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

refactor(gui): ui improvements 

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/743/head
Pranav C 3 years ago
parent
34c40ab2ee
commit
712059f8f4
4 changed files with 331 additions and 277 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. 550
      packages/nc-gui/components/project/spreadsheet/components/editColumn.vue
  2. 2
      packages/nc-gui/components/project/spreadsheet/components/editColumn/linkedToAnotherOptions.vue
  3. 2
      packages/nc-gui/components/project/spreadsheet/components/editableCell/editableAttachmentCell.vue
  4. 54
      packages/nc-gui/components/project/spreadsheet/helpers/uiTypes.js

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

@ -104,272 +104,286 @@
<!-- </v-list-item>--> <!-- </v-list-item>-->
<!-- </v-list>--> <!-- </v-list>-->
</v-col> </v-col>
<v-col v-if="accordion" cols="12" class="pt-0" :class="{'pb-0': advanceOptions}">
<template v-if="newColumn.uidt !== 'Formula'"> <div
<v-col class="pointer grey--text text-right caption nc-more-options"
v-if="isLookup" @click="advanceOptions = !advanceOptions"
cols="12"
>
<lookup-options
ref="lookup"
:column="newColumn"
:nodes="nodes"
:meta="meta"
:is-s-q-lite="isSQLite"
:alias="newColumn.cn"
:is-m-s-s-q-l="isMSSQL"
v-on="$listeners"
/>
</v-col>
<v-col
v-if="isRollup"
cols="12"
>
<rollup-options
ref="rollup"
:column="newColumn"
:nodes="nodes"
:meta="meta"
:is-s-q-lite="isSQLite"
:alias="newColumn.cn"
:is-m-s-s-q-l="isMSSQL"
v-on="$listeners"
/>
</v-col>
<v-col
v-if="isLinkToAnotherRecord"
cols="12"
> >
<linked-to-another-options More options
ref="relation" <v-icon small>
:column="newColumn" mdi-menu-{{ advanceOptions ? 'up' : 'down' }}
:nodes="nodes" </v-icon>
:meta="meta" </div>
:is-s-q-lite="isSQLite" </v-col>
:alias="newColumn.cn" <v-col v-show="advanceOptions || !accordion" cols="12">
:is-m-s-s-q-l="isMSSQL" <v-row>
@onColumnSelect="onRelColumnSelect" <template v-if="newColumn.uidt !== 'Formula'">
/> <v-col
</v-col> v-if="isLookup"
<v-col cols="12"
v-if="isRelation" >
cols="12" <lookup-options
> ref="lookup"
<relation-options :column="newColumn"
ref="relation" :nodes="nodes"
:alias="alias" :meta="meta"
:column="newColumn" :is-s-q-lite="isSQLite"
:nodes="nodes" :alias="newColumn.cn"
:is-m-s-s-q-l="isMSSQL" :is-m-s-s-q-l="isMSSQL"
:is-s-q-lite="isSQLite" v-on="$listeners"
@onColumnSelect="onRelColumnSelect" />
/> </v-col>
</v-col> <v-col
v-if="isRollup"
<v-col v-if="isSelect" cols="12"> cols="12"
<custom-select-options >
v-model="newColumn.dtxp" <rollup-options
@input="newColumn.altered = newColumn.altered || 2" ref="rollup"
/> :column="newColumn"
</v-col> :nodes="nodes"
:meta="meta"
<template v-if="newColumn.cn && newColumn.uidt && !isVirtual"> :is-s-q-lite="isSQLite"
<v-col cols="12"> :alias="newColumn.cn"
<v-container fluid class="wrapper"> :is-m-s-s-q-l="isMSSQL"
<v-row> v-on="$listeners"
<v-col cols="12"> />
<div class="d-flex justify-space-between caption"> </v-col>
<v-tooltip bottom z-index="99999"> <v-col
<template #activator="{on}"> v-if="isLinkToAnotherRecord"
<div v-on="on"> cols="12"
<v-checkbox >
v-model="newColumn.rqd" <linked-to-another-options
:disabled="newColumn.pk || !sqlUi.columnEditable(newColumn)" ref="relation"
class="mr-2 mt-0" :column="newColumn"
dense :nodes="nodes"
hide-details :meta="meta"
label="NN" :is-s-q-lite="isSQLite"
@input="newColumn.altered = newColumn.altered || 2" :alias="newColumn.cn"
> :is-m-s-s-q-l="isMSSQL"
<template #label> @onColumnSelect="onRelColumnSelect"
<span class="caption font-weight-bold">NN</span> />
</template> </v-col>
</v-checkbox> <v-col
</div> v-if="isRelation"
</template> cols="12"
<span>Not Null</span> >
</v-tooltip> <relation-options
<v-tooltip bottom z-index="99999"> ref="relation"
<template #activator="{on}"> :alias="alias"
<div v-on="on"> :column="newColumn"
<v-checkbox :nodes="nodes"
:is-m-s-s-q-l="isMSSQL"
v-model="newColumn.pk" :is-s-q-lite="isSQLite"
:disabled="!sqlUi.columnEditable(newColumn)" @onColumnSelect="onRelColumnSelect"
class="mr-2 mt-0" />
dense </v-col>
hide-details
label="PK" <v-col v-if="isSelect" cols="12">
@input="newColumn.altered = newColumn.altered || 2" <custom-select-options
> v-model="newColumn.dtxp"
<template #label> @input="newColumn.altered = newColumn.altered || 2"
<span class="caption font-weight-bold">PK</span> />
</template> </v-col>
</v-checkbox>
</div> <template v-if="newColumn.cn && newColumn.uidt && !isVirtual">
</template> <v-col cols="12">
<span>Primary Key</span> <v-container fluid class="wrapper">
</v-tooltip> <v-row>
<v-col cols="12">
<v-tooltip bottom z-index="99999"> <div class="d-flex justify-space-between caption">
<template #activator="{on}"> <v-tooltip bottom z-index="99999">
<div v-on="on"> <template #activator="{on}">
<v-checkbox <div v-on="on">
v-model="newColumn.ai" <v-checkbox
:disabled="sqlUi.colPropUNDisabled(newColumn) || !sqlUi.columnEditable(newColumn)" v-model="newColumn.rqd"
class="mr-2 mt-0" :disabled="newColumn.pk || !sqlUi.columnEditable(newColumn)"
dense class="mr-2 mt-0"
hide-details dense
label="AI" hide-details
@input="newColumn.altered = newColumn.altered || 2" label="NN"
> @input="newColumn.altered = newColumn.altered || 2"
<template #label> >
<span class="caption font-weight-bold">AI</span> <template #label>
</template> <span class="caption font-weight-bold">NN</span>
</v-checkbox> </template>
</div> </v-checkbox>
</template> </div>
<span>Auto Increment</span> </template>
</v-tooltip> <span>Not Null</span>
</v-tooltip>
<v-tooltip bottom z-index="99999"> <v-tooltip bottom z-index="99999">
<template #activator="{on}"> <template #activator="{on}">
<div v-on="on"> <div v-on="on">
<v-checkbox <v-checkbox
v-model="newColumn.un"
class="mr-2 mt-0" v-model="newColumn.pk"
dense :disabled="!sqlUi.columnEditable(newColumn)"
hide-details class="mr-2 mt-0"
label="UN" dense
:disabled="sqlUi.colPropUNDisabled(newColumn) || !sqlUi.columnEditable(newColumn)" hide-details
@input="newColumn.altered = newColumn.altered || 2" label="PK"
> @input="newColumn.altered = newColumn.altered || 2"
<template #label> >
<span class="caption font-weight-bold">UN</span> <template #label>
</template> <span class="caption font-weight-bold">PK</span>
</v-checkbox> </template>
</div> </v-checkbox>
</template> </div>
<span>Unsigned</span> </template>
</v-tooltip> <span>Primary Key</span>
</v-tooltip>
<v-tooltip bottom z-index="99999">
<template #activator="{on}"> <v-tooltip bottom z-index="99999">
<div v-on="on"> <template #activator="{on}">
<v-checkbox <div v-on="on">
v-model="newColumn.au" <v-checkbox
class="mr-2 mt-0" v-model="newColumn.ai"
dense :disabled="sqlUi.colPropUNDisabled(newColumn) || !sqlUi.columnEditable(newColumn)"
hide-details class="mr-2 mt-0"
label="UN" dense
:disabled=" sqlUi.colPropAuDisabled(newColumn) || !sqlUi.columnEditable(newColumn)" hide-details
@input="newColumn.altered = newColumn.altered || 2" label="AI"
> @input="newColumn.altered = newColumn.altered || 2"
<template #label> >
<span class="caption font-weight-bold">AU</span> <template #label>
</template> <span class="caption font-weight-bold">AI</span>
</v-checkbox> </template>
</div> </v-checkbox>
</template> </div>
<span>Auto Update Timestamp</span> </template>
</v-tooltip> <span>Auto Increment</span>
</div> </v-tooltip>
</v-col>
<v-col cols="12"> <v-tooltip bottom z-index="99999">
<v-autocomplete <template #activator="{on}">
v-model="newColumn.dt" <div v-on="on">
hide-details <v-checkbox
class="caption data-type" v-model="newColumn.un"
label="Type in Database" class="mr-2 mt-0"
dense dense
outlined hide-details
:items="dataTypes" label="UN"
@change="onDataTypeChange" :disabled="sqlUi.colPropUNDisabled(newColumn) || !sqlUi.columnEditable(newColumn)"
/> @input="newColumn.altered = newColumn.altered || 2"
</v-col> >
<template #label>
<v-col :cols="sqlUi.showScale(newColumn) && !isSelect ? 6 : 12"> <span class="caption font-weight-bold">UN</span>
<v-text-field </template>
v-if="!isSelect" </v-checkbox>
v-model="newColumn.dtxp" </div>
dense </template>
:disabled="sqlUi.getDefaultLengthIsDisabled(newColumn.dt) || !sqlUi.columnEditable(newColumn)" <span>Unsigned</span>
class="caption" </v-tooltip>
label="Length / Values"
outlined <v-tooltip bottom z-index="99999">
hide-details <template #activator="{on}">
@input="newColumn.altered = newColumn.altered || 2" <div v-on="on">
/> <v-checkbox
</v-col> v-model="newColumn.au"
<v-col v-if="sqlUi.showScale(newColumn)" :cols="isSelect ?12 : 6"> class="mr-2 mt-0"
<v-text-field dense
v-model="newColumn.dtxs" hide-details
dense label="UN"
:disabled=" !sqlUi.columnEditable(newColumn)" :disabled=" sqlUi.colPropAuDisabled(newColumn) || !sqlUi.columnEditable(newColumn)"
class="caption" @input="newColumn.altered = newColumn.altered || 2"
label="Scale" >
outlined <template #label>
hide-details <span class="caption font-weight-bold">AU</span>
@input="newColumn.altered = newColumn.altered || 2" </template>
/> </v-checkbox>
</v-col> </div>
</template>
<v-col cols="12"> <span>Auto Update Timestamp</span>
<v-textarea </v-tooltip>
v-model="newColumn.cdf" </div>
label="Default value" </v-col>
:hint="sqlUi.getDefaultValueForDatatype(newColumn.dt)" <v-col cols="12">
persistent-hint <v-autocomplete
rows="3" v-model="newColumn.dt"
outlined hide-details
dense class="caption data-type"
class="caption" label="Type in Database"
@input="newColumn.altered = newColumn.altered || 2" dense
/> outlined
</v-col> :items="dataTypes"
</v-row> @change="onDataTypeChange"
</v-container> />
</v-col> </v-col>
</template>
</template> <v-col :cols="sqlUi.showScale(newColumn) && !isSelect ? 6 : 12">
<template v-else> <v-text-field
<v-col cols="12"> v-if="!isSelect"
<formula-options v-model="newColumn.dtxp"
ref="formula" dense
:column="newColumn" :disabled="sqlUi.getDefaultLengthIsDisabled(newColumn.dt) || !sqlUi.columnEditable(newColumn)"
:nodes="nodes" class="caption"
:meta="meta" label="Length / Values"
:is-s-q-lite="isSQLite" outlined
:alias="newColumn.cn" hide-details
:is-m-s-s-q-l="isMSSQL" @input="newColumn.altered = newColumn.altered || 2"
:sql-ui="sqlUi" />
v-on="$listeners" </v-col>
/> <v-col v-if="sqlUi.showScale(newColumn)" :cols="isSelect ?12 : 6">
<v-text-field
<!-- <v-autocomplete v-model="newColumn.dtxs"
label="Formula" dense
hide-details :disabled=" !sqlUi.columnEditable(newColumn)"
class="caption formula-type" class="caption"
outlined label="Scale"
dense outlined
:items="formulas" hide-details
> @input="newColumn.altered = newColumn.altered || 2"
<template #item="{item}"> />
<span class="green&#45;&#45;text text&#45;&#45;darken-2 caption font-weight-regular">{{ item }}</span> </v-col>
<v-col cols="12">
<v-textarea
v-model="newColumn.cdf"
label="Default value"
:hint="sqlUi.getDefaultValueForDatatype(newColumn.dt)"
persistent-hint
rows="3"
outlined
dense
class="caption"
@input="newColumn.altered = newColumn.altered || 2"
/>
</v-col>
</v-row>
</v-container>
</v-col>
</template> </template>
</v-autocomplete>--> </template>
</v-col> <template v-else>
</template> <v-col cols="12">
<formula-options
ref="formula"
:column="newColumn"
:nodes="nodes"
:meta="meta"
:is-s-q-lite="isSQLite"
:alias="newColumn.cn"
:is-m-s-s-q-l="isMSSQL"
:sql-ui="sqlUi"
v-on="$listeners"
/>
<!-- <v-autocomplete
label="Formula"
hide-details
class="caption formula-type"
outlined
dense
:items="formulas"
>
<template #item="{item}">
<span class="green&#45;&#45;text text&#45;&#45;darken-2 caption font-weight-regular">{{ item }}</span>
</template>
</v-autocomplete>-->
</v-col>
</template>
</v-row>
</v-col>
</template> </template>
<div class="disabled-info" :class="{'d-none':!isEditDisabled}"> <div class="disabled-info" :class="{'d-none':!isEditDisabled}">
@ -397,7 +411,7 @@
</template> </template>
<script> <script>
import { 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'
@ -430,9 +444,13 @@ export default {
data: () => ({ data: () => ({
valid: false, valid: false,
relationDeleteDlg: false, relationDeleteDlg: false,
newColumn: {} newColumn: {},
advanceOptions: false
}), }),
computed: { computed: {
accordion() {
return ![UITypes.LinkToAnotherRecord, UITypes.Lookup, UITypes.Rollup, UITypes.SpecificDBType].includes(this.newColumn && this.newColumn.uidt)
},
uiTypes() { uiTypes() {
return uiTypes.filter(t => !this.editColumn || !t.virtual) return uiTypes.filter(t => !this.editColumn || !t.virtual)
}, },

2
packages/nc-gui/components/project/spreadsheet/components/editColumn/linkedToAnotherOptions.vue
Unescape View File

@ -13,7 +13,7 @@
> >
<v-radio value="hm" label="Has Many" /> <v-radio value="hm" label="Has Many" />
<v-radio value="mm" label="Many To Many" /> <v-radio value="mm" label="Many To Many" />
<v-radio disabled value="oo" label="One To One" /> <!-- <v-radio disabled value="oo" label="One To One" />-->
</v-radio-group> </v-radio-group>
</v-col> </v-col>
</v-row> </v-row>

2
packages/nc-gui/components/project/spreadsheet/components/editableCell/editableAttachmentCell.vue
Unescape View File

@ -34,7 +34,7 @@
contain contain
:src="item.url || item.data" :src="item.url || item.data"
v-on="on" v-on="on"
@click="selectImage(item.url || item.data,i)" @click="selectImage(item.url || item.data, i)"
> >
<template #placeholder> <template #placeholder>
<v-skeleton-loader <v-skeleton-loader

54
packages/nc-gui/components/project/spreadsheet/helpers/uiTypes.js
Unescape View File

@ -8,11 +8,11 @@ const uiTypes = [
icon: 'mdi-link-variant', icon: 'mdi-link-variant',
virtual: 1 virtual: 1
}, },
{ // {
name: 'ForeignKey', // name: 'ForeignKey',
icon: 'mdi-link-variant', // icon: 'mdi-link-variant',
virtual: 1 // virtual: 1
}, // },
{ {
name: 'Lookup', name: 'Lookup',
icon: 'mdi-table-column-plus-before', icon: 'mdi-table-column-plus-before',
@ -116,10 +116,10 @@ const uiTypes = [
name: 'DateTime', name: 'DateTime',
icon: 'mdi-calendar-clock' icon: 'mdi-calendar-clock'
}, },
{ // {
name: 'CreateTime', // name: 'CreateTime',
icon: 'mdi-calendar-clock' // icon: 'mdi-calendar-clock'
}, // },
// { // {
// name: 'LastModifiedTime', // name: 'LastModifiedTime',
// icon: 'mdi-calendar-clock', // icon: 'mdi-calendar-clock',
@ -192,6 +192,42 @@ export default [
'SpecificDBType' 'SpecificDBType'
] ]
export const UITypes = {
ID: 'ID',
ForeignKey: 'ForeignKey',
SingleLineText: 'SingleLineText',
LongText: 'LongText',
Attachment: 'Attachment',
Checkbox: 'Checkbox',
MultiSelect: 'MultiSelect',
SingleSelect: 'SingleSelect',
Collaborator: 'Collaborator',
Date: 'Date',
Year: 'Year',
Time: 'Time',
PhoneNumber: 'PhoneNumber',
Email: 'Email',
URL: 'URL',
Number: 'Number',
Decimal: 'Decimal',
Currency: 'Currency',
Percent: 'Percent',
Duration: 'Duration',
Rating: 'Rating',
Formula: 'Formula',
Rollup: 'Rollup',
Count: 'Count',
Lookup: 'Lookup',
DateTime: 'DateTime',
CreateTime: 'CreateTime',
LastModifiedTime: 'LastModifiedTime',
AutoNumber: 'AutoNumber',
Barcode: 'Barcode',
Button: 'Button',
SpecificDBType: 'SpecificDBType',
LinkToAnotherRecord: 'LinkToAnotherRecord'
}
/** /**
* @copyright Copyright (c) 2021, Xgene Cloud Ltd * @copyright Copyright (c) 2021, Xgene Cloud Ltd
* *

Write Preview
Loading…
Cancel
Save