Browse Source

fix/Fixed dark mode styling bug with edit column and styling issues with toggle comments button

pull/2582/head
Muhammed Mustafa 2 years ago
parent
commit
ce7ff76e94
  1. 277
      packages/nc-gui/components/project/spreadsheet/components/EditColumn.vue
  2. 9
      packages/nc-gui/components/project/spreadsheet/components/ExpandedForm.vue

277
packages/nc-gui/components/project/spreadsheet/components/EditColumn.vue

@ -46,9 +46,13 @@
<v-row> <v-row>
<v-col v-if="relation" cols="12"> <v-col v-if="relation" cols="12">
<div class="caption"> <div class="caption">
<p class="mb-1">Foreign Key</p> <p class="mb-1">
Foreign Key
</p>
<v-icon small class="mt-n1"> mdi-table </v-icon> <v-icon small class="mt-n1">
mdi-table
</v-icon>
<span class="text-capitalize font-weight-bold body-1"> {{ relation._rtn }}</span> <span class="text-capitalize font-weight-bold body-1"> {{ relation._rtn }}</span>
<v-icon <v-icon
v-ge="['columns', 'fk-delete']" v-ge="['columns', 'fk-delete']"
@ -71,7 +75,7 @@
item-value="name" item-value="name"
item-text="name" item-text="name"
class="caption ui-type nc-ui-dt-dropdown" class="caption ui-type nc-ui-dt-dropdown"
:class="{ 'primary lighten-5': newColumn.uidt }" :class="{ 'primary lighten-5': newColumn.uidt && !isDark }"
:label="$t('labels.columnType')" :label="$t('labels.columnType')"
dense dense
outlined outlined
@ -80,10 +84,15 @@
> >
<template #selection="{ item }"> <template #selection="{ item }">
<div> <div>
<v-icon color="grey darken-4" small class="mr-1"> <v-icon color="isDark? 'white'? 'grey darken-4'" small class="mr-1">
{{ item.icon }} {{ item.icon }}
</v-icon> </v-icon>
<span class="caption grey--text text--darken-4"> {{ item.name }}</span> <span
class="caption"
:class="{ 'grey--text text--darken-4': !isDark }"
>
{{ item.name }}
</span>
</div> </div>
</template> </template>
@ -120,7 +129,9 @@
outlined outlined
> >
<template #prepend> <template #prepend>
<v-icon small class="mx-2" color="warning"> mdi-alert-outline </v-icon> <v-icon small class="mx-2" color="warning">
mdi-alert-outline
</v-icon>
</template> </template>
Changing MultiSelect to SingleSelect can lead to errors when there are multiple values associated Changing MultiSelect to SingleSelect can lead to errors when there are multiple values associated
with a cell with a cell
@ -145,7 +156,9 @@
@click="advanceOptions = !advanceOptions" @click="advanceOptions = !advanceOptions"
> >
{{ advanceOptions ? $t('general.hideAll') : $t('general.showMore') }} {{ advanceOptions ? $t('general.hideAll') : $t('general.showMore') }}
<v-icon x-small color="grey"> mdi-{{ advanceOptions ? 'minus' : 'plus' }}-circle-outline </v-icon> <v-icon x-small color="grey">
mdi-{{ advanceOptions ? 'minus' : 'plus' }}-circle-outline
</v-icon>
</div> </div>
</v-col> </v-col>
@ -420,7 +433,7 @@
<div class="disabled-info" :class="{ 'd-none': !isEditDisabled }"> <div class="disabled-info" :class="{ 'd-none': !isEditDisabled }">
<v-alert dense type="warning" icon="info" class="caption mx-2" outlined> <v-alert dense type="warning" icon="info" class="caption mx-2" outlined>
This spreadsheet is connected to an SQLite DB.<br /> This spreadsheet is connected to an SQLite DB.<br>
For production please see For production please see
<a href="https://github.com/nocodb/nocodb#production-setup" target="_blank">here</a>. <a href="https://github.com/nocodb/nocodb#production-setup" target="_blank">here</a>.
</v-alert> </v-alert>
@ -452,23 +465,23 @@
</template> </template>
<script> <script>
import { MssqlUi, SqliteUi } from 'nocodb-sdk'; import { MssqlUi, SqliteUi } from 'nocodb-sdk'
import { UITypes, uiTypes } from '../helpers/uiTypes'; import { UITypes, uiTypes } from '../helpers/uiTypes'
import RollupOptions from './editColumn/RollupOptions'; import RollupOptions from './editColumn/RollupOptions'
import FormulaOptions from '~/components/project/spreadsheet/components/editColumn/FormulaOptions'; import FormulaOptions from '~/components/project/spreadsheet/components/editColumn/FormulaOptions'
import LookupOptions from '~/components/project/spreadsheet/components/editColumn/LookupOptions'; import LookupOptions from '~/components/project/spreadsheet/components/editColumn/LookupOptions'
import CustomSelectOptions from '~/components/project/spreadsheet/components/editColumn/CustomSelectOptions'; import CustomSelectOptions from '~/components/project/spreadsheet/components/editColumn/CustomSelectOptions'
import RelationOptions from '~/components/project/spreadsheet/components/editColumn/RelationOptions'; import RelationOptions from '~/components/project/spreadsheet/components/editColumn/RelationOptions'
import DlgLabelSubmitCancel from '~/components/utils/DlgLabelSubmitCancel'; import DlgLabelSubmitCancel from '~/components/utils/DlgLabelSubmitCancel'
import LinkedToAnotherOptions from '~/components/project/spreadsheet/components/editColumn/LinkedToAnotherOptions'; import LinkedToAnotherOptions from '~/components/project/spreadsheet/components/editColumn/LinkedToAnotherOptions'
import { validateColumnName } from '~/helpers'; import { validateColumnName } from '~/helpers'
import RatingOptions from '~/components/project/spreadsheet/components/editColumn/RatingOptions'; import RatingOptions from '~/components/project/spreadsheet/components/editColumn/RatingOptions'
import CheckboxOptions from '~/components/project/spreadsheet/components/editColumn/CheckboxOptions'; import CheckboxOptions from '~/components/project/spreadsheet/components/editColumn/CheckboxOptions'
import CurrencyOptions from '@/components/project/spreadsheet/components/editColumn/CurrencyOptions'; import CurrencyOptions from '@/components/project/spreadsheet/components/editColumn/CurrencyOptions'
import DurationOptions from '@/components/project/spreadsheet/components/editColumn/DurationOptions'; import DurationOptions from '@/components/project/spreadsheet/components/editColumn/DurationOptions'
import DateOptions from '@/components/project/spreadsheet/components/editColumn/DateOptions'; import DateOptions from '@/components/project/spreadsheet/components/editColumn/DateOptions'
const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]; const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
export default { export default {
name: 'EditColumn', name: 'EditColumn',
@ -484,7 +497,7 @@ export default {
CustomSelectOptions, CustomSelectOptions,
CurrencyOptions, CurrencyOptions,
DurationOptions, DurationOptions,
DateOptions, DateOptions
}, },
props: { props: {
nodes: Object, nodes: Object,
@ -493,7 +506,7 @@ export default {
editColumn: Boolean, editColumn: Boolean,
column: Object, column: Object,
columnIndex: Number, columnIndex: Number,
value: Boolean, value: Boolean
}, },
data: () => ({ data: () => ({
columnToValidate, columnToValidate,
@ -504,12 +517,12 @@ export default {
idType: null, idType: null,
idTypes: [ idTypes: [
{ value: 'AI', text: 'Auto increment number' }, { value: 'AI', text: 'Auto increment number' },
{ value: 'AG', text: 'Auto generated string' }, { value: 'AG', text: 'Auto generated string' }
], ]
}), }),
computed: { computed: {
isIDCol() { isIDCol() {
return this.column && this.column.uidt === UITypes.ID; return this.column && this.column.uidt === UITypes.ID
}, },
accordion() { accordion() {
return ![ return ![
@ -518,8 +531,8 @@ export default {
UITypes.Rollup, UITypes.Rollup,
UITypes.SpecificDBType, UITypes.SpecificDBType,
UITypes.Formula, UITypes.Formula,
UITypes.Duration, UITypes.Duration
].includes(this.newColumn && this.newColumn.uidt); ].includes(this.newColumn && this.newColumn.uidt)
}, },
uiTypes() { uiTypes() {
return [ return [
@ -528,44 +541,44 @@ export default {
? [ ? [
{ {
name: 'ID', name: 'ID',
icon: 'mdi-identifier', icon: 'mdi-identifier'
}, }
] ]
: []), : [])
]; ]
}, },
isEditDisabled() { isEditDisabled() {
return this.editColumn && this.sqlUi === SqliteUi && this.column.uidt !== UITypes.Duration; return this.editColumn && this.sqlUi === SqliteUi && this.column.uidt !== UITypes.Duration
}, },
isSQLite() { isSQLite() {
return this.sqlUi === SqliteUi; return this.sqlUi === SqliteUi
}, },
isMSSQL() { isMSSQL() {
return this.sqlUi === MssqlUi; return this.sqlUi === MssqlUi
}, },
dataTypes() { dataTypes() {
return this.sqlUi.getDataTypeListForUiType(this.newColumn, this.idType); return this.sqlUi.getDataTypeListForUiType(this.newColumn, this.idType)
}, },
isSelect() { isSelect() {
return this.newColumn && (this.newColumn.uidt === 'MultiSelect' || this.newColumn.uidt === 'SingleSelect'); return this.newColumn && (this.newColumn.uidt === 'MultiSelect' || this.newColumn.uidt === 'SingleSelect')
}, },
isRelation() { isRelation() {
return this.newColumn && this.newColumn.uidt === 'ForeignKey'; return this.newColumn && this.newColumn.uidt === 'ForeignKey'
}, },
isLinkToAnotherRecord() { isLinkToAnotherRecord() {
return this.newColumn && this.newColumn.uidt === 'LinkToAnotherRecord'; return this.newColumn && this.newColumn.uidt === 'LinkToAnotherRecord'
}, },
isLookup() { isLookup() {
return this.newColumn && this.newColumn.uidt === 'Lookup'; return this.newColumn && this.newColumn.uidt === 'Lookup'
}, },
isRating() { isRating() {
return this.newColumn && this.newColumn.uidt === UITypes.Rating; return this.newColumn && this.newColumn.uidt === UITypes.Rating
}, },
isCheckbox() { isCheckbox() {
return this.newColumn && this.newColumn.uidt === UITypes.Checkbox; return this.newColumn && this.newColumn.uidt === UITypes.Checkbox
}, },
isRollup() { isRollup() {
return this.newColumn && this.newColumn.uidt === 'Rollup'; return this.newColumn && this.newColumn.uidt === 'Rollup'
}, },
relation() { relation() {
return ( return (
@ -573,138 +586,138 @@ export default {
this.column && this.column &&
this.meta.belongsTo && this.meta.belongsTo &&
this.meta.belongsTo.find(bt => bt.column_name === this.column.column_name) this.meta.belongsTo.find(bt => bt.column_name === this.column.column_name)
); )
}, },
isVirtual() { isVirtual() {
return this.isLinkToAnotherRecord || this.isLookup || this.isRollup; return this.isLinkToAnotherRecord || this.isLookup || this.isRollup
}, },
isCurrency() { isCurrency() {
return this.newColumn && this.newColumn.uidt === UITypes.Currency; return this.newColumn && this.newColumn.uidt === UITypes.Currency
}, },
isDate() { isDate() {
return this.newColumn && this.newColumn.uidt === UITypes.Date; return this.newColumn && this.newColumn.uidt === UITypes.Date
}, }
}, },
watch: { watch: {
column() { column() {
this.genColumnData(); this.genColumnData()
}, }
}, },
async created() { async created() {
this.genColumnData(); this.genColumnData()
}, },
mounted() { mounted() {
this.focusInput(); this.focusInput()
}, },
methods: { methods: {
validateColumnName(v) { validateColumnName(v) {
return validateColumnName(v, this.$store.getters['project/GtrProjectIsGraphql']); return validateColumnName(v, this.$store.getters['project/GtrProjectIsGraphql'])
}, },
onRelColumnSelect(colMeta) { onRelColumnSelect(colMeta) {
Object.assign(this.newColumn, { Object.assign(this.newColumn, {
dt: colMeta.dt, dt: colMeta.dt,
dtxp: colMeta.dtxp, dtxp: colMeta.dtxp,
dtxs: colMeta.dtxs, dtxs: colMeta.dtxs,
un: colMeta.un, un: colMeta.un
}); })
}, },
genColumnData() { genColumnData() {
this.newColumn = this.column this.newColumn = this.column
? { ...this.column } ? { ...this.column }
: this.sqlUi.getNewColumn([...this.meta.columns, ...(this.meta.v || [])].length + 1); : this.sqlUi.getNewColumn([...this.meta.columns, ...(this.meta.v || [])].length + 1)
this.newColumn.cno = this.newColumn.column_name; this.newColumn.cno = this.newColumn.column_name
}, },
close() { close() {
this.$emit('close'); this.$emit('close')
this.newColumn = {}; this.newColumn = {}
}, },
async save() { async save() {
if (!this.$refs.form.validate()) { if (!this.$refs.form.validate()) {
return; return
} }
try { try {
if (this.newColumn.uidt === 'Formula') { if (this.newColumn.uidt === 'Formula') {
await this.$refs.formula.save(); await this.$refs.formula.save()
return this.$emit('saved'); return this.$emit('saved')
// return this.$toast.info('Coming Soon...').goAway(3000) // return this.$toast.info('Coming Soon...').goAway(3000)
} }
if (this.isLinkToAnotherRecord && this.$refs.relation) { if (this.isLinkToAnotherRecord && this.$refs.relation) {
await this.$refs.relation.saveRelation(); await this.$refs.relation.saveRelation()
return this.$emit('saved'); return this.$emit('saved')
} }
if (this.isLookup && this.$refs.lookup) { if (this.isLookup && this.$refs.lookup) {
return await this.$refs.lookup.save(); return await this.$refs.lookup.save()
} }
if (this.isRollup && this.$refs.rollup) { if (this.isRollup && this.$refs.rollup) {
return await this.$refs.rollup.save(); return await this.$refs.rollup.save()
} }
if (this.newColumn.uidt === 'Formula' && this.$refs.formula) { if (this.newColumn.uidt === 'Formula' && this.$refs.formula) {
return await this.$refs.formula.save(); return await this.$refs.formula.save()
} }
this.newColumn.table_name = this.nodes.table_name; this.newColumn.table_name = this.nodes.table_name
this.newColumn.title = this.newColumn.column_name; this.newColumn.title = this.newColumn.column_name
if (this.editColumn) { if (this.editColumn) {
await this.$api.dbTableColumn.update(this.column.id, this.newColumn); await this.$api.dbTableColumn.update(this.column.id, this.newColumn)
} else { } else {
if (this.newColumn.uidt === UITypes.ID) { if (this.newColumn.uidt === UITypes.ID) {
// based on id column type set autogenerated meta prop // based on id column type set autogenerated meta prop
if (this.isAutoGenId) { if (this.isAutoGenId) {
this.newColumn.meta = { this.newColumn.meta = {
ag: 'nc', ag: 'nc'
}; }
} }
} }
await this.$api.dbTableColumn.create(this.meta.id, this.newColumn); await this.$api.dbTableColumn.create(this.meta.id, this.newColumn)
} }
this.$emit('saved', this.newColumn.title, this.editColumn ? this.meta.columns[this.columnIndex].title : null); this.$emit('saved', this.newColumn.title, this.editColumn ? this.meta.columns[this.columnIndex].title : null)
} catch (e) { } catch (e) {
console.log(e); console.log(e)
this.$toast.error('Failed to save column: ' + e).goAway(3000); this.$toast.error('Failed to save column: ' + e).goAway(3000)
throw e; throw e
} }
this.$emit('close'); this.$emit('close')
this.$e('a:column:add', { datatype: this.newColumn.uidt }); this.$e('a:column:add', { datatype: this.newColumn.uidt })
}, },
onDataTypeChange() { onDataTypeChange() {
this.newColumn.rqd = false; this.newColumn.rqd = false
if (this.newColumn.uidt !== UITypes.ID) { if (this.newColumn.uidt !== UITypes.ID) {
this.newColumn.primaryKey = false; this.newColumn.primaryKey = false
} }
this.newColumn.ai = false; this.newColumn.ai = false
this.newColumn.cdf = null; this.newColumn.cdf = null
this.newColumn.un = false; this.newColumn.un = false
this.newColumn.dtxp = this.sqlUi.getDefaultLengthForDatatype(this.newColumn.dt); this.newColumn.dtxp = this.sqlUi.getDefaultLengthForDatatype(this.newColumn.dt)
this.newColumn.dtxs = this.sqlUi.getDefaultScaleForDatatype(this.newColumn.dt); this.newColumn.dtxs = this.sqlUi.getDefaultScaleForDatatype(this.newColumn.dt)
this.newColumn.dtx = 'specificType'; this.newColumn.dtx = 'specificType'
const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect]; const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect]
if (this.column && selectTypes.includes(this.newColumn.uidt) && selectTypes.includes(this.column.uidt)) { if (this.column && selectTypes.includes(this.newColumn.uidt) && selectTypes.includes(this.column.uidt)) {
this.newColumn.dtxp = this.column.dtxp; this.newColumn.dtxp = this.column.dtxp
} }
if (this.isCurrency) { if (this.isCurrency) {
if (this.column?.uidt === UITypes.Currency) { if (this.column?.uidt === UITypes.Currency) {
this.newColumn.dtxp = this.column.dtxp; this.newColumn.dtxp = this.column.dtxp
this.newColumn.dtxs = this.column.dtxs; this.newColumn.dtxs = this.column.dtxs
} else { } else {
this.newColumn.dtxp = 19; this.newColumn.dtxp = 19
this.newColumn.dtxs = 2; this.newColumn.dtxs = 2
} }
} }
// this.$set(this.newColumn, 'uidt', this.sqlUi.getUIType(this.newColumn)); // this.$set(this.newColumn, 'uidt', this.sqlUi.getUIType(this.newColumn));
this.newColumn.altered = this.newColumn.altered || 2; this.newColumn.altered = this.newColumn.altered || 2
}, },
onUiOrIdTypeChange() { onUiOrIdTypeChange() {
const colProp = this.sqlUi.getDataTypeForUiType(this.newColumn, this.idType); const colProp = this.sqlUi.getDataTypeForUiType(this.newColumn, this.idType)
this.newColumn = { this.newColumn = {
...this.newColumn, ...this.newColumn,
meta: null, meta: null,
@ -714,77 +727,77 @@ export default {
cdf: null, cdf: null,
un: false, un: false,
dtx: 'specificType', dtx: 'specificType',
...colProp, ...colProp
}; }
this.newColumn.dtxp = this.sqlUi.getDefaultLengthForDatatype(this.newColumn.dt); this.newColumn.dtxp = this.sqlUi.getDefaultLengthForDatatype(this.newColumn.dt)
this.newColumn.dtxs = this.sqlUi.getDefaultScaleForDatatype(this.newColumn.dt); this.newColumn.dtxs = this.sqlUi.getDefaultScaleForDatatype(this.newColumn.dt)
const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect]; const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect]
if (this.column && selectTypes.includes(this.newColumn.uidt) && selectTypes.includes(this.column.uidt)) { if (this.column && selectTypes.includes(this.newColumn.uidt) && selectTypes.includes(this.column.uidt)) {
this.newColumn.dtxp = this.column.dtxp; this.newColumn.dtxp = this.column.dtxp
} }
if (columnToValidate.includes(this.newColumn.uidt)) { if (columnToValidate.includes(this.newColumn.uidt)) {
this.newColumn.meta = { this.newColumn.meta = {
validate: this.newColumn.meta && this.newColumn.meta.validate, validate: this.newColumn.meta && this.newColumn.meta.validate
}; }
} }
if (this.isCurrency) { if (this.isCurrency) {
if (this.column?.uidt === UITypes.Currency) { if (this.column?.uidt === UITypes.Currency) {
this.newColumn.dtxp = this.column.dtxp; this.newColumn.dtxp = this.column.dtxp
this.newColumn.dtxs = this.column.dtxs; this.newColumn.dtxs = this.column.dtxs
} else { } else {
this.newColumn.dtxp = 19; this.newColumn.dtxp = 19
this.newColumn.dtxs = 2; this.newColumn.dtxs = 2
} }
} }
this.newColumn.altered = this.newColumn.altered || 2; this.newColumn.altered = this.newColumn.altered || 2
}, },
focusInput() { focusInput() {
setTimeout(() => { setTimeout(() => {
if (this.$refs.column && this.$refs.column.$el) { if (this.$refs.column && this.$refs.column.$el) {
const el = this.$refs.column.$el.querySelector('input'); const el = this.$refs.column.$el.querySelector('input')
el.focus(); el.focus()
el.select(); el.select()
} }
}, 100); }, 100)
}, },
async deleteRelation(action = '', column) { async deleteRelation(action = '', column) {
try { try {
if (action === 'showDialog') { if (action === 'showDialog') {
this.relationDeleteDlg = true; this.relationDeleteDlg = true
} else if (action === 'hideDialog') { } else if (action === 'hideDialog') {
this.relationDeleteDlg = false; this.relationDeleteDlg = false
} else { } else {
const result = await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [ const result = await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [
{ {
env: this.nodes.env, env: this.nodes.env,
dbAlias: this.nodes.dbAlias, dbAlias: this.nodes.dbAlias
}, },
this.relation.type === 'virtual' ? 'xcVirtualRelationDelete' : 'relationDelete', this.relation.type === 'virtual' ? 'xcVirtualRelationDelete' : 'relationDelete',
{ {
childColumn: this.relation.column_name, childColumn: this.relation.column_name,
childTable: this.nodes.table_name, childTable: this.nodes.table_name,
parentTable: this.relation.rtn, parentTable: this.relation.rtn,
parentColumn: this.relation.rcn, parentColumn: this.relation.rcn
}, }
]); ])
this.relationDeleteDlg = false; this.relationDeleteDlg = false
this.relation = null; this.relation = null
this.$toast.success('Foreign Key deleted successfully').goAway(3000); this.$toast.success('Foreign Key deleted successfully').goAway(3000)
this.$emit('onRelationDelete'); this.$emit('onRelationDelete')
} }
} catch (e) { } catch (e) {
console.log(e); console.log(e)
this.$toast.error('Foreign key relation delete failed' + e).goAway(3000); this.$toast.error('Foreign key relation delete failed' + e).goAway(3000)
throw e; throw e
} }
}, }
}, }
}; }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

9
packages/nc-gui/components/project/spreadsheet/components/ExpandedForm.vue

@ -1,7 +1,7 @@
<template> <template>
<v-card width="1000" max-width="100%"> <v-card width="1000" max-width="100%">
<v-toolbar height="55" class="elevation-1"> <v-toolbar height="55" class="elevation-1">
<div class="d-100 d-flex"> <div class="header d-100 d-flex">
<h5 class="title text-center"> <h5 class="title text-center">
<v-icon :color="iconColor"> mdi-table-arrow-right </v-icon> <v-icon :color="iconColor"> mdi-table-arrow-right </v-icon>
@ -17,10 +17,9 @@
<v-btn small text @click="reload"> <v-btn small text @click="reload">
<v-icon small> mdi-reload </v-icon> <v-icon small> mdi-reload </v-icon>
</v-btn> </v-btn>
<x-icon <x-icon
v-if="!isNew && _isUIAllowed('rowComments')" v-if="!isNew && _isUIAllowed('rowComments')"
icon-class="mr-2" icon-class="ml-1 mr-2 px-1 py-1"
tooltip="Toggle comments" tooltip="Toggle comments"
small small
text text
@ -671,6 +670,10 @@ h5 {
background: var(--v-backgroundColorDefault-base); background: var(--v-backgroundColorDefault-base);
} }
.header {
display: flex;
align-items: center;
}
.nc-chip { .nc-chip {
padding: 8px; padding: 8px;
border-radius: 8px; border-radius: 8px;

Loading…
Cancel
Save