github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
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
8b863ca3d8
commit
ce7ff76e94
2 changed files with 151 additions and 135 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

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

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

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

Write Preview
Loading…
Cancel
Save