github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

fix/formatting fix

pull/2582/head
Muhammed Mustafa 2 years ago
parent
56901319b7
commit
86587ac73c
2 changed files with 141 additions and 154 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. 271
      packages/nc-gui/components/project/spreadsheet/components/EditColumn.vue
  2. 24
      packages/nc-gui/components/project/spreadsheet/components/editColumn/DurationOptions.vue

271
packages/nc-gui/components/project/spreadsheet/components/EditColumn.vue
Unescape View File

@ -46,13 +46,9 @@
<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']"
@ -87,10 +83,7 @@
<v-icon color="isDark? 'white'? 'grey darken-4'" small class="mr-1">
{{ item.icon }}
</v-icon>
<span
class="caption"
:class="{ 'grey--text text--darken-4': !isDark }"
>
<span class="caption" :class="{ 'grey--text text--darken-4': !isDark }">
{{ item.name }}
</span>
</div>
@ -129,9 +122,7 @@
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
@ -156,9 +147,7 @@
@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>
@ -433,7 +422,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>
@ -465,23 +454,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',
@ -497,7 +486,7 @@ export default {
CustomSelectOptions,
CurrencyOptions,
DurationOptions,
DateOptions
DateOptions,
},
props: {
nodes: Object,
@ -506,7 +495,7 @@ export default {
editColumn: Boolean,
column: Object,
columnIndex: Number,
value: Boolean
value: Boolean,
},
data: () => ({
columnToValidate,
@ -517,12 +506,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 ![
@ -531,8 +520,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 [
@ -541,44 +530,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 (
@ -586,138 +575,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,
@ -727,77 +716,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">

24
packages/nc-gui/components/project/spreadsheet/components/editColumn/DurationOptions.vue
Unescape View File

@ -1,8 +1,6 @@
<template>
<v-row class="duration-wrapper">
<div class="caption">
A duration of time in minutes or seconds (e.g. 1:23).
</div>
<div class="caption">A duration of time in minutes or seconds (e.g. 1:23).</div>
<!-- TODO: i18n -->
<v-autocomplete
v-model="colMeta.duration"
@ -32,7 +30,7 @@
</template>
<script>
import { durationOptions } from '~/helpers/durationHelper'
import { durationOptions } from '~/helpers/durationHelper';
export default {
name: 'DurationOptions',
@ -41,24 +39,24 @@ export default {
durationOptionList: durationOptions.map(o => ({
...o,
// h:mm:ss (e.g. 3:45, 1:23:40)
title: `${o.title} ${o.example}`
title: `${o.title} ${o.example}`,
})),
colMeta: {
duration: 0
}
duration: 0,
},
}),
watch: {
value() {
this.colMeta = this.value || {}
this.colMeta = this.value || {};
},
colMeta(v) {
this.$emit('input', v)
}
this.$emit('input', v);
},
},
created() {
this.colMeta = this.value ? { ...this.value } : { ...this.colMeta }
}
}
this.colMeta = this.value ? { ...this.value } : { ...this.colMeta };
},
};
</script>
<style scoped>

Write Preview
Loading…
Cancel
Save