mirror of https://github.com/nocodb/nocodb
Browse Source
* wip: rating cell ui implementation Signed-off-by: Pranav C <pranavxc@gmail.com> * wip: migration for meta column data field Signed-off-by: Pranav C <pranavxc@gmail.com> * wip: rating column options Signed-off-by: Pranav C <pranavxc@gmail.com> * feat: rating cell creation and mapping metadata Signed-off-by: Pranav C <pranavxc@gmail.com> * refactor: change default type to int for rating Signed-off-by: Pranav C <pranavxc@gmail.com> * feat: add email cell Signed-off-by: Pranav C <pranavxc@gmail.com> * feat: accept invalid values for columns if validation disabled Signed-off-by: Pranav C <pranavxc@gmail.com> * refactor: remove additional options Signed-off-by: Pranav C <pranavxc@gmail.com> * feat: checkbox customization Signed-off-by: Pranav C <pranavxc@gmail.com> * refactor: move validate checkbox to advance option Signed-off-by: Pranav C <pranavxc@gmail.com> * refactor: add tick icon in checkbox Signed-off-by: Pranav C <pranavxc@gmail.com> * refactor: start rating max value from 1 Signed-off-by: Pranav C <pranavxc@gmail.com> * refactor: minor ui corrections Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: load rating component in gallery view Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: use default icon and color if meta missing(checkbox and rating) re #2036 Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: cache column with parsed metadata re #2038 Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: convert old rating column to number type Signed-off-by: Pranav C <pranavxc@gmail.com> * refactor: migration filename correction Signed-off-by: Pranav C <pranavxc@gmail.com> * refactor: component name Signed-off-by: Pranav C <pranavxc@gmail.com>pull/2071/head
Pranav C
2 years ago
committed by
GitHub
22 changed files with 728 additions and 237 deletions
@ -0,0 +1,22 @@
|
||||
<template> |
||||
<a v-if="isEmail" :href="`mailto:${value}`" target="_blank">{{ value }}</a> |
||||
<span v-else>{{ value }}</span> |
||||
</template> |
||||
|
||||
<script> |
||||
import { isEmail } from '~/helpers' |
||||
|
||||
export default { |
||||
name: 'EmailCell', |
||||
props: ['value'], |
||||
computed: { |
||||
isEmail() { |
||||
return isEmail(this.value || '') |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,98 @@
|
||||
<template> |
||||
<div> |
||||
<div class="nc-rating-wrapper ui-type"> |
||||
<v-select |
||||
v-model="colMeta.icon" |
||||
label="Icon" |
||||
:items="icons" |
||||
dense |
||||
outlined |
||||
class="caption" |
||||
:item-value="v=>v" |
||||
:value-comparator="(a,b) => a && b && a.full === b.full && a.empty === b.empty" |
||||
> |
||||
<template #item="{ item }"> |
||||
<v-icon small :color="colMeta.color"> |
||||
{{ item.full }} |
||||
</v-icon> |
||||
<v-icon class="ml-2" small :color="colMeta.color"> |
||||
{{ item.empty }} |
||||
</v-icon> |
||||
</template> |
||||
<template #selection="{ item }"> |
||||
<v-icon small :color="colMeta.color"> |
||||
{{ item.full }} |
||||
</v-icon> |
||||
<v-icon class="ml-2" small :color="colMeta.color"> |
||||
{{ item.empty }} |
||||
</v-icon> |
||||
</template> |
||||
</v-select> |
||||
<v-select |
||||
v-model="colMeta.max" |
||||
label="Max" |
||||
:items="[1,2,3,4,5,6,7,8,9,10]" |
||||
dense |
||||
outlined |
||||
class="caption" |
||||
/> |
||||
</div> |
||||
<v-color-picker |
||||
v-model="colMeta.color" |
||||
class="mx-auto" |
||||
hide-inputs |
||||
/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
export default { |
||||
name: 'RatingOptions', |
||||
props: ['column', 'meta', 'value'], |
||||
data: () => ({ |
||||
colMeta: { |
||||
icon: { |
||||
full: 'mdi-star', |
||||
empty: 'mdi-star-outline' |
||||
}, |
||||
color: '#fcb401', |
||||
max: 5 |
||||
}, |
||||
icons: [{ |
||||
full: 'mdi-star', |
||||
empty: 'mdi-star-outline' |
||||
}, { |
||||
full: 'mdi-heart', |
||||
empty: 'mdi-heart-outline' |
||||
}, { |
||||
full: 'mdi-moon-full', |
||||
empty: 'mdi-moon-new' |
||||
}, { |
||||
full: 'mdi-thumb-up', |
||||
empty: 'mdi-thumb-up-outline' |
||||
}, { |
||||
full: 'mdi-flag', |
||||
empty: 'mdi-flag-outline' |
||||
}] |
||||
}), |
||||
watch: { |
||||
value() { |
||||
this.colMeta = this.value || {} |
||||
}, |
||||
colMeta(v) { |
||||
this.$emit('input', v) |
||||
} |
||||
}, |
||||
created() { |
||||
this.colMeta = this.value || { ...this.colMeta } |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.nc-rating-wrapper { |
||||
display: flex; |
||||
gap: 16px |
||||
} |
||||
</style> |
||||
@ -0,0 +1,95 @@
|
||||
<template> |
||||
<div> |
||||
<div class="nc-rating-wrapper ui-type"> |
||||
<v-select |
||||
v-model="colMeta.icon" |
||||
label="Icon" |
||||
:items="icons" |
||||
dense |
||||
outlined |
||||
class="caption" |
||||
:item-value="v=>v" |
||||
:value-comparator="(a,b) => a && b && a.checked === b.checked && a.unchecked === b.unchecked" |
||||
> |
||||
<template #item="{ item }"> |
||||
<v-icon small :color="colMeta.color"> |
||||
{{ item.checked }} |
||||
</v-icon> |
||||
<v-icon class="ml-2" small :color="colMeta.color"> |
||||
{{ item.unchecked }} |
||||
</v-icon> |
||||
</template> |
||||
<template #selection="{ item }"> |
||||
<v-icon small :color="colMeta.color"> |
||||
{{ item.checked }} |
||||
</v-icon> |
||||
<v-icon class="ml-2" small :color="colMeta.color"> |
||||
{{ item.unchecked }} |
||||
</v-icon> |
||||
</template> |
||||
</v-select> |
||||
</div> |
||||
<v-color-picker |
||||
v-model="colMeta.color" |
||||
class="mx-auto" |
||||
hide-inputs |
||||
/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
export default { |
||||
name: 'CheckboxOptions', |
||||
props: ['column', 'meta', 'value'], |
||||
data: () => ({ |
||||
colMeta: { |
||||
icon: { |
||||
checked: 'mdi-check-bold', |
||||
unchecked: 'mdi-crop-square' |
||||
}, |
||||
color: '#777' |
||||
}, |
||||
icons: [{ |
||||
checked: 'mdi-check-bold', |
||||
unchecked: 'mdi-crop-square' |
||||
}, { |
||||
checked: 'mdi-check-circle-outline', |
||||
unchecked: 'mdi-checkbox-blank-circle-outline' |
||||
}, { |
||||
checked: 'mdi-star', |
||||
unchecked: 'mdi-star-outline' |
||||
}, { |
||||
checked: 'mdi-heart', |
||||
unchecked: 'mdi-heart-outline' |
||||
}, { |
||||
checked: 'mdi-moon-full', |
||||
unchecked: 'mdi-moon-new' |
||||
}, { |
||||
checked: 'mdi-thumb-up', |
||||
unchecked: 'mdi-thumb-up-outline' |
||||
}, { |
||||
checked: 'mdi-flag', |
||||
unchecked: 'mdi-flag-outline' |
||||
}] |
||||
}), |
||||
watch: { |
||||
value() { |
||||
this.colMeta = this.value || {} |
||||
}, |
||||
colMeta(v) { |
||||
this.$emit('input', v) |
||||
} |
||||
}, |
||||
created() { |
||||
this.colMeta = this.value || { ...this.colMeta } |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.nc-rating-wrapper { |
||||
display: flex; |
||||
gap: 16px |
||||
} |
||||
</style> |
||||
@ -0,0 +1,71 @@
|
||||
<template> |
||||
<div class="d-100 h-100" :class="{'nc-cell-hover-show': localState == 0 || !localState}"> |
||||
<v-rating |
||||
v-model="localState" |
||||
:length="ratingMeta.max" |
||||
dense |
||||
x-small |
||||
:disabled="readOnly" |
||||
clearable |
||||
> |
||||
<template #item="{isFilled, click}"> |
||||
<v-icon v-if="isFilled" :size="15" :color="ratingMeta.color" @click="click"> |
||||
{{ fullIcon }} |
||||
</v-icon> |
||||
<v-icon |
||||
v-else |
||||
:color="ratingMeta.color" |
||||
:size="15" |
||||
class="nc-cell-hover-show" |
||||
@click="click" |
||||
> |
||||
{{ emptyIcon }} |
||||
</v-icon> |
||||
</template> |
||||
</v-rating> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'RatingCell', |
||||
props: { |
||||
column: Object, |
||||
value: [String, Number], |
||||
readOnly: Boolean |
||||
}, |
||||
computed: { |
||||
fullIcon() { |
||||
return (this.ratingMeta && this.ratingMeta.icon && this.ratingMeta.icon.full) || 'mdi-star' |
||||
}, |
||||
emptyIcon() { |
||||
return (this.ratingMeta && this.ratingMeta.icon && this.ratingMeta.icon.empty) || 'mdi-star-outline' |
||||
}, |
||||
localState: { |
||||
get() { |
||||
return this.value |
||||
}, |
||||
set(val) { |
||||
this.$emit('input', val) |
||||
} |
||||
}, |
||||
ratingMeta() { |
||||
return { |
||||
icon: { |
||||
full: 'mdi-star', |
||||
empty: 'mdi-star-outline' |
||||
}, |
||||
color: '#fcb401', |
||||
max: 5, |
||||
...(this.column && this.column.meta |
||||
? this.column.meta |
||||
: {}) |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,38 @@
|
||||
import Knex from 'knex'; |
||||
import { MetaTable } from '../../utils/globals'; |
||||
|
||||
const up = async (knex: Knex) => { |
||||
await knex.schema.alterTable(MetaTable.COLUMNS, table => { |
||||
table.text('meta'); |
||||
}); |
||||
}; |
||||
|
||||
const down = async knex => { |
||||
await knex.schema.alterTable(MetaTable.COLUMNS, table => { |
||||
table.dropColumn('meta'); |
||||
}); |
||||
}; |
||||
|
||||
export { up, down }; |
||||
|
||||
/** |
||||
* @copyright Copyright (c) 2022, Xgene Cloud Ltd |
||||
* |
||||
* @author Wing-Kam Wong <wingkwong.code@gmail.com> |
||||
* |
||||
* @license GNU AGPL version 3 or any later version |
||||
* |
||||
* This program is free software: you can redistribute it and/or modify |
||||
* it under the terms of the GNU Affero General Public License as |
||||
* published by the Free Software Foundation, either version 3 of the |
||||
* License, or (at your option) any later version. |
||||
* |
||||
* This program is distributed in the hope that it will be useful, |
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
* GNU Affero General Public License for more details. |
||||
* |
||||
* You should have received a copy of the GNU Affero General Public License |
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>. |
||||
* |
||||
*/ |
||||
Loading…
Reference in new issue