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
Unified 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-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"> <p class="mb-1">Foreign Key</p>
Foreign Key
</p>
<v-icon small class="mt-n1"> <v-icon small class="mt-n1"> mdi-table </v-icon>
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']"
@ -87,10 +83,7 @@
<v-icon color="isDark? 'white'? '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 <span class="caption" :class="{ 'grey--text text--darken-4': !isDark }">
class="caption"
:class="{ 'grey--text text--darken-4': !isDark }"
>
{{ item.name }} {{ item.name }}
</span> </span>
</div> </div>
@ -129,9 +122,7 @@
outlined outlined
> >
<template #prepend> <template #prepend>
<v-icon small class="mx-2" color="warning"> <v-icon small class="mx-2" color="warning"> mdi-alert-outline </v-icon>
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
@ -156,9 +147,7 @@
@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"> <v-icon x-small color="grey"> mdi-{{ advanceOptions ? 'minus' : 'plus' }}-circle-outline </v-icon>
mdi-{{ advanceOptions ? 'minus' : 'plus' }}-circle-outline
</v-icon>
</div> </div>
</v-col> </v-col>
@ -433,7 +422,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>
@ -465,23 +454,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',
@ -497,7 +486,7 @@ export default {
CustomSelectOptions, CustomSelectOptions,
CurrencyOptions, CurrencyOptions,
DurationOptions, DurationOptions,
DateOptions DateOptions,
}, },
props: { props: {
nodes: Object, nodes: Object,
@ -506,7 +495,7 @@ export default {
editColumn: Boolean, editColumn: Boolean,
column: Object, column: Object,
columnIndex: Number, columnIndex: Number,
value: Boolean value: Boolean,
}, },
data: () => ({ data: () => ({
columnToValidate, columnToValidate,
@ -517,12 +506,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 ![
@ -531,8 +520,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 [
@ -541,44 +530,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 (
@ -586,138 +575,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,
@ -727,77 +716,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">

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

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

Write Preview
Loading…
Cancel
Save