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

refactor(gui-v2): column header edit/add menu ui update 

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/3114/head
Pranav C 2 years ago
parent
3b5b82fba6
commit
90ceac6aed
15 changed files with 107 additions and 143 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. 16
      packages/nc-gui-v2/components/smartsheet-column/AdvancedOptions.vue
  2. 30
      packages/nc-gui-v2/components/smartsheet-column/CheckboxOptions.vue
  3. 4
      packages/nc-gui-v2/components/smartsheet-column/CurrencyOptions.vue
  4. 2
      packages/nc-gui-v2/components/smartsheet-column/DateOptions.vue
  5. 2
      packages/nc-gui-v2/components/smartsheet-column/DurationOptions.vue
  6. 80
      packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
  7. 22
      packages/nc-gui-v2/components/smartsheet-column/LinkedToAnotherRecordOptions.vue
  8. 16
      packages/nc-gui-v2/components/smartsheet-column/LookupOptions.vue
  9. 6
      packages/nc-gui-v2/components/smartsheet-column/PercentOptions.vue
  10. 34
      packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
  11. 18
      packages/nc-gui-v2/components/smartsheet-column/RollupOptions.vue
  12. 2
      packages/nc-gui-v2/components/smartsheet-column/SpecificDBTypeOptions.vue
  13. 4
      packages/nc-gui-v2/components/smartsheet-header/Menu.vue
  14. 8
      packages/nc-gui-v2/components/smartsheet/Grid.vue
  15. 6
      packages/nc-gui-v2/components/smartsheet/Toolbar.vue

16
packages/nc-gui-v2/components/smartsheet-column/AdvancedOptions.vue
Unescape View File

@ -16,13 +16,12 @@ formState.value.au = !!formState.value.au
</script> </script>
<template> <template>
<div class="p-4 border-[2px] radius-1 border-grey w-full"> <div class="p-4 border-[2px] radius-1 border-grey w-full flex flex-col gap-2">
<div class="flex justify-space-between"> <div class="flex justify-space-between">
<a-form-item label="NN"> <a-form-item label="NN">
<a-checkbox <a-checkbox
v-model:checked="formState.rqd" v-model:checked="formState.rqd"
:disabled="formState.pk || !sqlUi.columnEditable(formState)" :disabled="formState.pk || !sqlUi.columnEditable(formState)"
size="small"
class="nc-column-checkbox-NN" class="nc-column-checkbox-NN"
@change="onAlter" @change="onAlter"
/> />
@ -31,7 +30,6 @@ formState.value.au = !!formState.value.au
<a-checkbox <a-checkbox
v-model:checked="formState.pk" v-model:checked="formState.pk"
:disabled="!sqlUi.columnEditable(formState)" :disabled="!sqlUi.columnEditable(formState)"
size="small"
class="nc-column-checkbox-PK" class="nc-column-checkbox-PK"
@change="onAlter" @change="onAlter"
/> />
@ -40,7 +38,6 @@ formState.value.au = !!formState.value.au
<a-checkbox <a-checkbox
v-model:checked="formState.ai" v-model:checked="formState.ai"
:disabled="sqlUi.colPropUNDisabled(formState) || !sqlUi.columnEditable(formState)" :disabled="sqlUi.colPropUNDisabled(formState) || !sqlUi.columnEditable(formState)"
size="small"
class="nc-column-checkbox-AI" class="nc-column-checkbox-AI"
@change="onAlter" @change="onAlter"
/> />
@ -50,18 +47,18 @@ formState.value.au = !!formState.value.au
:disabled="sqlUi.colPropUNDisabled(formState) || !sqlUi.columnEditable(formState)" :disabled="sqlUi.colPropUNDisabled(formState) || !sqlUi.columnEditable(formState)"
@change="onAlter" @change="onAlter"
> >
<a-checkbox v-model:checked="formState.un" size="small" class="nc-column-checkbox-UN" /> <a-checkbox v-model:checked="formState.un" class="nc-column-checkbox-UN" />
</a-form-item> </a-form-item>
<a-form-item <a-form-item
label="AU" label="AU"
:disabled="sqlUi.colPropAuDisabled(formState) || !sqlUi.columnEditable(formState)" :disabled="sqlUi.colPropAuDisabled(formState) || !sqlUi.columnEditable(formState)"
@change="onAlter" @change="onAlter"
> >
<a-checkbox v-model:checked="formState.au" size="small" class="nc-column-checkbox-AU" /> <a-checkbox v-model:checked="formState.au" class="nc-column-checkbox-AU" />
</a-form-item> </a-form-item>
</div> </div>
<a-form-item :label="$t('labels.databaseType')" v-bind="validateInfos.dt"> <a-form-item :label="$t('labels.databaseType')" v-bind="validateInfos.dt">
<a-select v-model:value="formState.dt" size="small" @change="onDataTypeChange"> <a-select v-model:value="formState.dt" @change="onDataTypeChange">
<a-select-option v-for="type in dataTypes" :key="type" :value="type"> <a-select-option v-for="type in dataTypes" :key="type" :value="type">
{{ type }} {{ type }}
</a-select-option> </a-select-option>
@ -71,15 +68,14 @@ formState.value.au = !!formState.value.au
<a-input <a-input
v-model:value="formState.dtxp" v-model:value="formState.dtxp"
:disabled="sqlUi.getDefaultLengthIsDisabled(formState.dt) || !sqlUi.columnEditable(formState)" :disabled="sqlUi.getDefaultLengthIsDisabled(formState.dt) || !sqlUi.columnEditable(formState)"
size="small"
@input="onAlter" @input="onAlter"
/> />
</a-form-item> </a-form-item>
<a-form-item v-if="sqlUi.showScale(formState)" label="Scale"> <a-form-item v-if="sqlUi.showScale(formState)" label="Scale">
<a-input v-model="formState.dtxs" :disabled="!sqlUi.columnEditable(formState)" size="small" @input="onAlter" /> <a-input v-model="formState.dtxs" :disabled="!sqlUi.columnEditable(formState)" @input="onAlter" />
</a-form-item> </a-form-item>
<a-form-item :label="$t('placeholder.defaultValue')"> <a-form-item :label="$t('placeholder.defaultValue')">
<a-textarea v-model:value="formState.cdf" size="small" auto-size @input="onAlter(2, true)" /> <a-textarea v-model:value="formState.cdf" auto-size @input="onAlter(2, true)" />
<span class="text-gray-400 text-xs">{{ sqlUi.getDefaultValueForDatatype(formState.dt) }}</span> <span class="text-gray-400 text-xs">{{ sqlUi.getDefaultValueForDatatype(formState.dt) }}</span>
</a-form-item> </a-form-item>
</div> </div>

30
packages/nc-gui-v2/components/smartsheet-column/CheckboxOptions.vue
Unescape View File

@ -73,21 +73,23 @@ watch(
<a-row> <a-row>
<a-col :span="24"> <a-col :span="24">
<a-form-item label="Icon"> <a-form-item label="Icon">
<a-select v-model:value="formState.meta.iconIdx" size="small" class="w-52"> <a-select v-model:value="formState.meta.iconIdx" class="w-52">
<a-select-option v-for="(icon, i) of iconList" :key="i" :value="i"> <a-select-option v-for="(icon, i) of iconList" :key="i" :value="i">
<component <div class="flex items-center">
:is="getMdiIcon(icon.checked)" <component
class="mx-1" :is="getMdiIcon(icon.checked)"
:style="{ class="mx-1"
color: formState.meta.color, :style="{
}" color: formState.meta.color,
/> }"
<component />
:is="getMdiIcon(icon.unchecked)" <component
:style="{ :is="getMdiIcon(icon.unchecked)"
color: formState.meta.color, :style="{
}" color: formState.meta.color,
/> }"
/>
</div>
</a-select-option> </a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>

4
packages/nc-gui-v2/components/smartsheet-column/CurrencyOptions.vue
Unescape View File

@ -67,12 +67,11 @@ formState.value.meta = {
</script> </script>
<template> <template>
<a-row> <a-row gutter="8">
<a-col :span="12"> <a-col :span="12">
<a-form-item v-bind="validateInfos['meta.currency_locale']" label="Currency Locale"> <a-form-item v-bind="validateInfos['meta.currency_locale']" label="Currency Locale">
<a-select <a-select
v-model:value="formState.meta.currency_locale" v-model:value="formState.meta.currency_locale"
size="small"
class="w-52" class="w-52"
show-search show-search
:filter-option="filterOption" :filter-option="filterOption"
@ -91,7 +90,6 @@ formState.value.meta = {
class="w-52" class="w-52"
show-search show-search
:filter-option="filterOption" :filter-option="filterOption"
size="small"
:disabled="isMoney && isPg" :disabled="isMoney && isPg"
> >
<a-select-option v-for="(currencyCode, i) of currencyList" :key="i" :value="currencyCode"> <a-select-option v-for="(currencyCode, i) of currencyList" :key="i" :value="currencyCode">

2
packages/nc-gui-v2/components/smartsheet-column/DateOptions.vue
Unescape View File

@ -12,7 +12,7 @@ if (!formState.meta?.date_format) {
<template> <template>
<a-form-item label="Date Format"> <a-form-item label="Date Format">
<a-select v-model:value="formState.meta.date_format" size="small"> <a-select v-model:value="formState.meta.date_format">
<a-select-option v-for="(format, i) of dateFormats" :key="i" :value="format"> <a-select-option v-for="(format, i) of dateFormats" :key="i" :value="format">
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
<div class="text-xs"> <div class="text-xs">

2
packages/nc-gui-v2/components/smartsheet-column/DurationOptions.vue
Unescape View File

@ -25,7 +25,7 @@ formState.value.meta = {
</a-col> </a-col>
<a-col :span="24"> <a-col :span="24">
<a-form-item label="Duration Format"> <a-form-item label="Duration Format">
<a-select v-model:value="formState.meta.duration" size="small" class="w-52"> <a-select v-model:value="formState.meta.duration" class="w-52">
<a-select-option v-for="(duration, i) of durationOptionList" :key="i" :value="duration.id"> <a-select-option v-for="(duration, i) of durationOptionList" :key="i" :value="duration.id">
{{ duration.title }} {{ duration.title }}
</a-select-option> </a-select-option>

80
packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
Unescape View File

@ -105,57 +105,51 @@ if (!formState.value?.column_name) {
</script> </script>
<template> <template>
<div class="min-w-[350px] w-max max-h-[95vh] bg-white shadow p-4 overflow-auto" @click.stop> <div class="min-w-[400px] w-max max-h-[95vh] bg-white shadow p-6 overflow-auto" @click.stop>
<a-form v-model="formState" name="column-create-or-edit" layout="vertical"> <a-form v-model="formState" name="column-create-or-edit" layout="vertical">
<a-form-item :label="$t('labels.columnName')" v-bind="validateInfos.title"> <div class="flex flex-col gap-2">
<a-input ref="antInput" v-model:value="formState.title" size="small" class="nc-column-name-input" @input="onAlter(8)" /> <a-form-item :label="$t('labels.columnName')" v-bind="validateInfos.title">
</a-form-item> <a-input ref="antInput" v-model:value="formState.title" class="nc-column-name-input" @input="onAlter(8)" />
</a-form-item>
<a-form-item
v-if="!(editColumnDropdown && !!onlyNameUpdateOnEditColumns.find((col) => col === formState.uidt))" <a-form-item
:label="$t('labels.columnType')" v-if="!(editColumnDropdown && !!onlyNameUpdateOnEditColumns.find((col) => col === formState.uidt))"
> :label="$t('labels.columnType')"
<a-select
v-model:value="formState.uidt"
show-search
size="small"
class="nc-column-type-input"
@change="onUidtOrIdTypeChange"
> >
<a-select-option v-for="opt of uiTypesOptions" :key="opt.name" :value="opt.name" v-bind="validateInfos.uidt"> <a-select v-model:value="formState.uidt" show-search class="nc-column-type-input" @change="onUidtOrIdTypeChange">
<div class="flex gap-1 align-center text-xs"> <a-select-option v-for="opt of uiTypesOptions" :key="opt.name" :value="opt.name" v-bind="validateInfos.uidt">
<component :is="opt.icon" class="text-grey" /> <div class="flex gap-1 align-center">
{{ opt.name }} <component :is="opt.icon" class="text-grey" />
</div> {{ opt.name }}
</a-select-option> </div>
</a-select> </a-select-option>
</a-form-item> </a-select>
</a-form-item>
<SmartsheetColumnFormulaOptions v-if="formState.uidt === UITypes.Formula" ref="formulaOptionsRef" /> <SmartsheetColumnFormulaOptions v-if="formState.uidt === UITypes.Formula" ref="formulaOptionsRef" />
<SmartsheetColumnCurrencyOptions v-if="formState.uidt === UITypes.Currency" /> <SmartsheetColumnCurrencyOptions v-if="formState.uidt === UITypes.Currency" />
<SmartsheetColumnDurationOptions v-if="formState.uidt === UITypes.Duration" /> <SmartsheetColumnDurationOptions v-if="formState.uidt === UITypes.Duration" />
<SmartsheetColumnRatingOptions v-if="formState.uidt === UITypes.Rating" /> <SmartsheetColumnRatingOptions v-if="formState.uidt === UITypes.Rating" />
<SmartsheetColumnCheckboxOptions v-if="formState.uidt === UITypes.Checkbox" /> <SmartsheetColumnCheckboxOptions v-if="formState.uidt === UITypes.Checkbox" />
<SmartsheetColumnLookupOptions v-if="!editColumnDropdown && formState.uidt === UITypes.Lookup" /> <SmartsheetColumnLookupOptions v-if="!editColumnDropdown && formState.uidt === UITypes.Lookup" />
<SmartsheetColumnDateOptions v-if="formState.uidt === UITypes.Date" /> <SmartsheetColumnDateOptions v-if="formState.uidt === UITypes.Date" />
<SmartsheetColumnRollupOptions v-if="!editColumnDropdown && formState.uidt === UITypes.Rollup" /> <SmartsheetColumnRollupOptions v-if="!editColumnDropdown && formState.uidt === UITypes.Rollup" />
<SmartsheetColumnLinkedToAnotherRecordOptions <SmartsheetColumnLinkedToAnotherRecordOptions
v-if="!editColumnDropdown && formState.uidt === UITypes.LinkToAnotherRecord" v-if="!editColumnDropdown && formState.uidt === UITypes.LinkToAnotherRecord"
/> />
<SmartsheetColumnSpecificDBTypeOptions v-if="formState.uidt === UITypes.SpecificDBType" /> <SmartsheetColumnSpecificDBTypeOptions v-if="formState.uidt === UITypes.SpecificDBType" />
<SmartsheetColumnPercentOptions v-if="formState.uidt === UITypes.Percent" /> <SmartsheetColumnPercentOptions v-if="formState.uidt === UITypes.Percent" />
<SmartsheetColumnSelectOptions v-if="formState.uidt === UITypes.SingleSelect || formState.uidt === UITypes.MultiSelect" /> <SmartsheetColumnSelectOptions v-if="formState.uidt === UITypes.SingleSelect || formState.uidt === UITypes.MultiSelect" />
</div>
<div <div
v-if="!isVirtualCol(formState.uidt)" v-if="!isVirtualCol(formState.uidt)"
class="text-xs cursor-pointer text-grey nc-more-options my-2 flex align-center gap-1 justify-end" class="text-xs cursor-pointer text-grey nc-more-options mb-1 mt-4 flex align-center gap-1 justify-end"
@click="advancedOptions = !advancedOptions" @click="advancedOptions = !advancedOptions"
> >
{{ advancedOptions ? $t('general.hideAll') : $t('general.showMore') }} {{ advancedOptions ? $t('general.hideAll') : $t('general.showMore') }}
<component :is="advancedOptions ? MdiMinusIcon : MdiPlusIcon" /> <component :is="advancedOptions ? MdiMinusIcon : MdiPlusIcon" />
</div> </div>
<div class="overflow-hidden" :class="advancedOptions ? 'h-min' : 'h-0'"> <div class="overflow-hidden" :class="advancedOptions ? 'h-min mb-2' : 'h-0'">
<a-checkbox <a-checkbox
v-if="formState.meta && columnToValidate.includes(formState.uidt)" v-if="formState.meta && columnToValidate.includes(formState.uidt)"
v-model:checked="formState.meta.validate" v-model:checked="formState.meta.validate"
@ -169,11 +163,11 @@ if (!formState.value?.column_name) {
</div> </div>
<a-form-item> <a-form-item>
<div class="flex justify-end gap-1 mt-4"> <div class="flex justify-end gap-1 mt-4">
<a-button html-type="button" size="small" @click="onCancel"> <a-button html-type="button" @click="onCancel">
<!-- Cancel --> <!-- Cancel -->
{{ $t('general.cancel') }} {{ $t('general.cancel') }}
</a-button> </a-button>
<a-button html-type="submit" type="primary" size="small" @click="onSubmit"> <a-button html-type="submit" type="primary" @click="onSubmit">
<!-- Save --> <!-- Save -->
{{ $t('general.save') }} {{ $t('general.save') }}
</a-button> </a-button>

22
packages/nc-gui-v2/components/smartsheet-column/LinkedToAnotherRecordOptions.vue
Unescape View File

@ -41,7 +41,7 @@ const refTables = $computed(() => {
<template> <template>
<div class="w-full flex flex-col mb-2 mt-4"> <div class="w-full flex flex-col mb-2 mt-4">
<div class="border-2 p-4"> <div class="border-2 p-6">
<a-form-item v-bind="validateInfos.type"> <a-form-item v-bind="validateInfos.type">
<a-radio-group v-model:value="formState.type" name="type" v-bind="validateInfos.type"> <a-radio-group v-model:value="formState.type" name="type" v-bind="validateInfos.type">
<a-radio value="hm">Has Many</a-radio> <a-radio value="hm">Has Many</a-radio>
@ -49,7 +49,7 @@ const refTables = $computed(() => {
</a-radio-group> </a-radio-group>
</a-form-item> </a-form-item>
<a-form-item class="flex w-full pb-2 mt-4" :label="$t('labels.childTable')" v-bind="validateInfos.childId"> <a-form-item class="flex w-full pb-2 mt-4" :label="$t('labels.childTable')" v-bind="validateInfos.childId">
<a-select v-model:value="formState.childId" size="small" @change="onDataTypeChange"> <a-select v-model:value="formState.childId" @change="onDataTypeChange">
<a-select-option v-for="(table, index) in refTables" :key="index" :value="table.id"> <a-select-option v-for="(table, index) in refTables" :key="index" :value="table.id">
{{ table.title }} {{ table.title }}
</a-select-option> </a-select-option>
@ -65,29 +65,17 @@ const refTables = $computed(() => {
<component :is="advancedOptions ? MdiMinusIcon : MdiPlusIcon" /> <component :is="advancedOptions ? MdiMinusIcon : MdiPlusIcon" />
</div> </div>
<div v-if="advancedOptions" class="flex flex-col p-4 border-2 mt-2"> <div v-if="advancedOptions" class="flex flex-col p-6 gap-4 border-2 mt-2">
<div class="flex flex-row space-x-2"> <div class="flex flex-row space-x-2">
<a-form-item class="flex w-1/2" :label="$t('labels.onUpdate')"> <a-form-item class="flex w-1/2" :label="$t('labels.onUpdate')">
<a-select <a-select v-model:value="formState.onUpdate" :disabled="formState.virtual" name="onUpdate" @change="onDataTypeChange">
v-model:value="formState.onUpdate"
:disabled="formState.virtual"
name="onUpdate"
size="small"
@change="onDataTypeChange"
>
<a-select-option v-for="(option, index) in onUpdateDeleteOptions" :key="index" :value="option"> <a-select-option v-for="(option, index) in onUpdateDeleteOptions" :key="index" :value="option">
{{ option }} {{ option }}
</a-select-option> </a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item class="flex w-1/2" :label="$t('labels.onDelete')"> <a-form-item class="flex w-1/2" :label="$t('labels.onDelete')">
<a-select <a-select v-model:value="formState.onDelete" :disabled="formState.virtual" name="onDelete" @change="onDataTypeChange">
v-model:value="formState.onDelete"
:disabled="formState.virtual"
name="onDelete"
size="small"
@change="onDataTypeChange"
>
<a-select-option v-for="(option, index) in onUpdateDeleteOptions" :key="index" :value="option"> <a-select-option v-for="(option, index) in onUpdateDeleteOptions" :key="index" :value="option">
{{ option }} {{ option }}
</a-select-option> </a-select-option>

16
packages/nc-gui-v2/components/smartsheet-column/LookupOptions.vue
Unescape View File

@ -52,15 +52,10 @@ const columns = $computed(() => {
</script> </script>
<template> <template>
<div class="p-4 w-full flex flex-col border-2 mb-2 mt-4"> <div class="p-6 w-full flex flex-col border-2 mb-2 mt-4">
<div class="w-full flex flex-row space-x-2"> <div class="w-full flex flex-row space-x-2">
<a-form-item class="flex w-1/2 pb-2" :label="$t('labels.childTable')" v-bind="validateInfos.fk_relation_column_id"> <a-form-item class="flex w-1/2 pb-2" :label="$t('labels.childTable')" v-bind="validateInfos.fk_relation_column_id">
<a-select <a-select v-model:value="formState.fk_relation_column_id" dropdown-class-name="!w-64" @change="onDataTypeChange">
v-model:value="formState.fk_relation_column_id"
size="small"
dropdown-class-name="!w-64"
@change="onDataTypeChange"
>
<a-select-option v-for="(table, index) in refTables" :key="index" :value="table.col.fk_column_id"> <a-select-option v-for="(table, index) in refTables" :key="index" :value="table.col.fk_column_id">
<div class="flex flex-row space-x-0.5 h-full pb-0.5 items-center justify-between"> <div class="flex flex-row space-x-0.5 h-full pb-0.5 items-center justify-between">
<div class="font-semibold text-xs">{{ table.column.title }}</div> <div class="font-semibold text-xs">{{ table.column.title }}</div>
@ -72,12 +67,7 @@ const columns = $computed(() => {
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item class="flex w-1/2" :label="$t('labels.childColumn')" v-bind="validateInfos.fk_lookup_column_id"> <a-form-item class="flex w-1/2" :label="$t('labels.childColumn')" v-bind="validateInfos.fk_lookup_column_id">
<a-select <a-select v-model:value="formState.fk_lookup_column_id" name="fk_lookup_column_id" @change="onDataTypeChange">
v-model:value="formState.fk_lookup_column_id"
name="fk_lookup_column_id"
size="small"
@change="onDataTypeChange"
>
<a-select-option v-for="(column, index) of columns" :key="index" :value="column.id"> <a-select-option v-for="(column, index) of columns" :key="index" :value="column.id">
{{ column.title }} {{ column.title }}
</a-select-option> </a-select-option>

6
packages/nc-gui-v2/components/smartsheet-column/PercentOptions.vue
Unescape View File

@ -11,10 +11,10 @@ if (!formState.meta?.default) formState.meta.default = null
</script> </script>
<template> <template>
<div class="flex flex-col mt-2"> <div class="flex flex-col mt-2 gap-2">
<div class="flex flex-row space-x-2"> <div class="flex flex-row space-x-2">
<a-form-item class="flex w-1/2" label="Precision"> <a-form-item class="flex w-1/2" label="Precision">
<a-select v-model:value="formState.meta.precision" size="small"> <a-select v-model:value="formState.meta.precision">
<a-select-option v-for="(precision, i) of precisions" :key="i" :value="precision.id"> <a-select-option v-for="(precision, i) of precisions" :key="i" :value="precision.id">
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
<div class="text-xs"> <div class="text-xs">
@ -25,7 +25,7 @@ if (!formState.meta?.default) formState.meta.default = null
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="Default Number (%)"> <a-form-item label="Default Number (%)">
<a-input v-model:value="formState.meta.default" size="small" name="default" type="number" /> <a-input v-model:value="formState.meta.default" name="default" type="number" />
</a-form-item> </a-form-item>
</div> </div>
<div class="flex flex-row mt-2"> <div class="flex flex-row mt-2">

34
packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
Unescape View File

@ -64,31 +64,33 @@ watch(
</script> </script>
<template> <template>
<a-row> <a-row :gutter="8">
<a-col :span="12"> <a-col :span="12">
<a-form-item label="Icon"> <a-form-item label="Icon">
<a-select v-model:value="formState.meta.iconIdx" size="small" class="w-52"> <a-select v-model:value="formState.meta.iconIdx" class="w-52">
<a-select-option v-for="(icon, i) of iconList" :key="i" :value="i"> <a-select-option v-for="(icon, i) of iconList" :key="i" :value="i">
<component <div class="flex items-center">
:is="getMdiIcon(icon.full)" <component
class="mx-1" :is="getMdiIcon(icon.full)"
:style="{ class="mx-1"
color: formState.meta.color, :style="{
}" color: formState.meta.color,
/> }"
<component />
:is="getMdiIcon(icon.empty)" <component
:style="{ :is="getMdiIcon(icon.empty)"
color: formState.meta.color, :style="{
}" color: formState.meta.color,
/> }"
/>
</div>
</a-select-option> </a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-form-item label="Max"> <a-form-item label="Max">
<a-select v-model:value="formState.meta.max" class="w-52" size="small"> <a-select v-model:value="formState.meta.max" class="w-52">
<a-select-option v-for="(v, i) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" :key="i" :value="v"> <a-select-option v-for="(v, i) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" :key="i" :value="v">
{{ v }} {{ v }}
</a-select-option> </a-select-option>

18
packages/nc-gui-v2/components/smartsheet-column/RollupOptions.vue
Unescape View File

@ -65,15 +65,10 @@ const columns = $computed(() => {
</script> </script>
<template> <template>
<div class="p-4 w-full flex flex-col border-2 mb-2 mt-4"> <div class="p-6 w-full flex flex-col border-2 mb-2 mt-4">
<div class="w-full flex flex-row space-x-2"> <div class="w-full flex flex-row space-x-2">
<a-form-item class="flex w-1/2 pb-2" :label="$t('labels.childTable')" v-bind="validateInfos.fk_relation_column_id"> <a-form-item class="flex w-1/2 pb-2" :label="$t('labels.childTable')" v-bind="validateInfos.fk_relation_column_id">
<a-select <a-select v-model:value="formState.fk_relation_column_id" dropdown-class-name="!w-64" @change="onDataTypeChange">
v-model:value="formState.fk_relation_column_id"
size="small"
dropdown-class-name="!w-64"
@change="onDataTypeChange"
>
<a-select-option v-for="(table, index) in refTables" :key="index" :value="table.col.fk_column_id"> <a-select-option v-for="(table, index) in refTables" :key="index" :value="table.col.fk_column_id">
<div class="flex flex-row space-x-0.5 h-full pb-0.5 items-center justify-between"> <div class="flex flex-row space-x-0.5 h-full pb-0.5 items-center justify-between">
<div class="font-semibold text-xs">{{ table.column.title }}</div> <div class="font-semibold text-xs">{{ table.column.title }}</div>
@ -85,12 +80,7 @@ const columns = $computed(() => {
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item class="flex w-1/2" :label="$t('labels.childColumn')" v-bind="validateInfos.fk_rollup_column_id"> <a-form-item class="flex w-1/2" :label="$t('labels.childColumn')" v-bind="validateInfos.fk_rollup_column_id">
<a-select <a-select v-model:value="formState.fk_rollup_column_id" name="fk_rollup_column_id" @change="onDataTypeChange">
v-model:value="formState.fk_rollup_column_id"
name="fk_rollup_column_id"
size="small"
@change="onDataTypeChange"
>
<a-select-option v-for="(column, index) of columns" :key="index" :value="column.id"> <a-select-option v-for="(column, index) of columns" :key="index" :value="column.id">
{{ column.title }} {{ column.title }}
</a-select-option> </a-select-option>
@ -98,7 +88,7 @@ const columns = $computed(() => {
</a-form-item> </a-form-item>
</div> </div>
<a-form-item label="Aggregate function" v-bind="validateInfos.rollup_function"> <a-form-item label="Aggregate function" v-bind="validateInfos.rollup_function">
<a-select v-model:value="formState.rollup_function" size="small" @change="onDataTypeChange"> <a-select v-model:value="formState.rollup_function" @change="onDataTypeChange">
<a-select-option v-for="(func, index) of aggrFunctionsList" :key="index" :value="func.value"> <a-select-option v-for="(func, index) of aggrFunctionsList" :key="index" :value="func.value">
{{ func.text }} {{ func.text }}
</a-select-option> </a-select-option>

2
packages/nc-gui-v2/components/smartsheet-column/SpecificDBTypeOptions.vue
Unescape View File

@ -1,3 +1,3 @@
<template> <template>
<SmartsheetColumnAdvancedOptions class="mt-4" /> <SmartsheetColumnAdvancedOptions class="mt-4 mb-2" />
</template> </template>

4
packages/nc-gui-v2/components/smartsheet-header/Menu.vue
Unescape View File

@ -65,7 +65,7 @@ function onVisibleChange() {
</script> </script>
<template> <template>
<a-dropdown v-model:visible="editColumnDropdown" :trigger="['click']" @visible-change="onVisibleChange"> <a-dropdown v-model:visible="editColumnDropdown" :trigger="['click']" placement="bottomRight" @visible-change="onVisibleChange">
<span /> <span />
<template #overlay> <template #overlay>
<SmartsheetColumnEditOrAdd <SmartsheetColumnEditOrAdd
@ -76,7 +76,7 @@ function onVisibleChange() {
/> />
</template> </template>
</a-dropdown> </a-dropdown>
<a-dropdown :trigger="['hover']"> <a-dropdown placement="bottomRight" :trigger="['hover']">
<MdiMenuDownIcon class="text-grey nc-ui-dt-dropdown" /> <MdiMenuDownIcon class="text-grey nc-ui-dt-dropdown" />
<template #overlay> <template #overlay>
<a-menu class="shadow bg-white"> <a-menu class="shadow bg-white">

8
packages/nc-gui-v2/components/smartsheet/Grid.vue
Unescape View File

@ -482,10 +482,10 @@ const expandForm = (row: Row, state: Record<string, any>) => {
table, table,
td, td,
th { th {
border-right: 1px solid #7f828b33 !important; border-right: 1px solid #f0f0f0 !important;
border-left: 1px solid #7f828b33 !important; border-left: 1px solid #f0f0f0 !important;
border-bottom: 1px solid #7f828b33 !important; border-bottom: 1px solid #f0f0f0 !important;
border-top: 1px solid #7f828b33 !important; border-top: 1px solid #f0f0f0 !important;
border-collapse: collapse; border-collapse: collapse;
} }

6
packages/nc-gui-v2/components/smartsheet/Toolbar.vue
Unescape View File

@ -5,7 +5,7 @@ const { isGrid, isForm } = useSmartsheetStoreOrThrow()
</script> </script>
<template> <template>
<div class="nc-table-toolbar w-full py-1 flex gap-1 items-center h-[48px] px-2" style="z-index: 7"> <div class="nc-table-toolbar w-full py-1 flex gap-1 items-center h-[48px] px-2 border-b" style="z-index: 7">
<SmartsheetToolbarFieldsMenu v-if="isGrid" :show-system-fields="false" class="ml-1" /> <SmartsheetToolbarFieldsMenu v-if="isGrid" :show-system-fields="false" class="ml-1" />
<SmartsheetToolbarColumnFilterMenu v-if="isGrid" /> <SmartsheetToolbarColumnFilterMenu v-if="isGrid" />
@ -26,4 +26,8 @@ const { isGrid, isForm } = useSmartsheetStoreOrThrow()
:deep(.nc-toolbar-btn) { :deep(.nc-toolbar-btn) {
@apply border-0 !text-xs font-semibold px-2; @apply border-0 !text-xs font-semibold px-2;
} }
.nc-table-toolbar {
border-color: #f0f0f0 !important;
}
</style> </style>

Write Preview
Loading…
Cancel
Save