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
commit
90ceac6aed
  1. 16
      packages/nc-gui-v2/components/smartsheet-column/AdvancedOptions.vue
  2. 4
      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. 26
      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. 8
      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

@ -16,13 +16,12 @@ formState.value.au = !!formState.value.au
</script>
<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">
<a-form-item label="NN">
<a-checkbox
v-model:checked="formState.rqd"
:disabled="formState.pk || !sqlUi.columnEditable(formState)"
size="small"
class="nc-column-checkbox-NN"
@change="onAlter"
/>
@ -31,7 +30,6 @@ formState.value.au = !!formState.value.au
<a-checkbox
v-model:checked="formState.pk"
:disabled="!sqlUi.columnEditable(formState)"
size="small"
class="nc-column-checkbox-PK"
@change="onAlter"
/>
@ -40,7 +38,6 @@ formState.value.au = !!formState.value.au
<a-checkbox
v-model:checked="formState.ai"
:disabled="sqlUi.colPropUNDisabled(formState) || !sqlUi.columnEditable(formState)"
size="small"
class="nc-column-checkbox-AI"
@change="onAlter"
/>
@ -50,18 +47,18 @@ formState.value.au = !!formState.value.au
:disabled="sqlUi.colPropUNDisabled(formState) || !sqlUi.columnEditable(formState)"
@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
label="AU"
:disabled="sqlUi.colPropAuDisabled(formState) || !sqlUi.columnEditable(formState)"
@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>
</div>
<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">
{{ type }}
</a-select-option>
@ -71,15 +68,14 @@ formState.value.au = !!formState.value.au
<a-input
v-model:value="formState.dtxp"
:disabled="sqlUi.getDefaultLengthIsDisabled(formState.dt) || !sqlUi.columnEditable(formState)"
size="small"
@input="onAlter"
/>
</a-form-item>
<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 :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>
</a-form-item>
</div>

4
packages/nc-gui-v2/components/smartsheet-column/CheckboxOptions.vue

@ -73,8 +73,9 @@ watch(
<a-row>
<a-col :span="24">
<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">
<div class="flex items-center">
<component
:is="getMdiIcon(icon.checked)"
class="mx-1"
@ -88,6 +89,7 @@ watch(
color: formState.meta.color,
}"
/>
</div>
</a-select-option>
</a-select>
</a-form-item>

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

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

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

@ -12,7 +12,7 @@ if (!formState.meta?.date_format) {
<template>
<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">
<div class="flex flex-row items-center">
<div class="text-xs">

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

@ -25,7 +25,7 @@ formState.value.meta = {
</a-col>
<a-col :span="24">
<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">
{{ duration.title }}
</a-select-option>

26
packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue

@ -105,32 +105,26 @@ if (!formState.value?.column_name) {
</script>
<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">
<div class="flex flex-col gap-2">
<a-form-item :label="$t('labels.columnName')" v-bind="validateInfos.title">
<a-input ref="antInput" v-model:value="formState.title" size="small" class="nc-column-name-input" @input="onAlter(8)" />
<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))"
:label="$t('labels.columnType')"
>
<a-select
v-model:value="formState.uidt"
show-search
size="small"
class="nc-column-type-input"
@change="onUidtOrIdTypeChange"
>
<a-select v-model:value="formState.uidt" show-search 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">
<div class="flex gap-1 align-center text-xs">
<div class="flex gap-1 align-center">
<component :is="opt.icon" class="text-grey" />
{{ opt.name }}
</div>
</a-select-option>
</a-select>
</a-form-item>
<SmartsheetColumnFormulaOptions v-if="formState.uidt === UITypes.Formula" ref="formulaOptionsRef" />
<SmartsheetColumnCurrencyOptions v-if="formState.uidt === UITypes.Currency" />
<SmartsheetColumnDurationOptions v-if="formState.uidt === UITypes.Duration" />
@ -145,17 +139,17 @@ if (!formState.value?.column_name) {
<SmartsheetColumnSpecificDBTypeOptions v-if="formState.uidt === UITypes.SpecificDBType" />
<SmartsheetColumnPercentOptions v-if="formState.uidt === UITypes.Percent" />
<SmartsheetColumnSelectOptions v-if="formState.uidt === UITypes.SingleSelect || formState.uidt === UITypes.MultiSelect" />
</div>
<div
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"
>
{{ advancedOptions ? $t('general.hideAll') : $t('general.showMore') }}
<component :is="advancedOptions ? MdiMinusIcon : MdiPlusIcon" />
</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
v-if="formState.meta && columnToValidate.includes(formState.uidt)"
v-model:checked="formState.meta.validate"
@ -169,11 +163,11 @@ if (!formState.value?.column_name) {
</div>
<a-form-item>
<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 -->
{{ $t('general.cancel') }}
</a-button>
<a-button html-type="submit" type="primary" size="small" @click="onSubmit">
<a-button html-type="submit" type="primary" @click="onSubmit">
<!-- Save -->
{{ $t('general.save') }}
</a-button>

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

@ -41,7 +41,7 @@ const refTables = $computed(() => {
<template>
<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-radio-group v-model:value="formState.type" name="type" v-bind="validateInfos.type">
<a-radio value="hm">Has Many</a-radio>
@ -49,7 +49,7 @@ const refTables = $computed(() => {
</a-radio-group>
</a-form-item>
<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">
{{ table.title }}
</a-select-option>
@ -65,29 +65,17 @@ const refTables = $computed(() => {
<component :is="advancedOptions ? MdiMinusIcon : MdiPlusIcon" />
</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">
<a-form-item class="flex w-1/2" :label="$t('labels.onUpdate')">
<a-select
v-model:value="formState.onUpdate"
:disabled="formState.virtual"
name="onUpdate"
size="small"
@change="onDataTypeChange"
>
<a-select v-model:value="formState.onUpdate" :disabled="formState.virtual" name="onUpdate" @change="onDataTypeChange">
<a-select-option v-for="(option, index) in onUpdateDeleteOptions" :key="index" :value="option">
{{ option }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item class="flex w-1/2" :label="$t('labels.onDelete')">
<a-select
v-model:value="formState.onDelete"
:disabled="formState.virtual"
name="onDelete"
size="small"
@change="onDataTypeChange"
>
<a-select v-model:value="formState.onDelete" :disabled="formState.virtual" name="onDelete" @change="onDataTypeChange">
<a-select-option v-for="(option, index) in onUpdateDeleteOptions" :key="index" :value="option">
{{ option }}
</a-select-option>

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

@ -52,15 +52,10 @@ const columns = $computed(() => {
</script>
<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">
<a-form-item class="flex w-1/2 pb-2" :label="$t('labels.childTable')" v-bind="validateInfos.fk_relation_column_id">
<a-select
v-model:value="formState.fk_relation_column_id"
size="small"
dropdown-class-name="!w-64"
@change="onDataTypeChange"
>
<a-select v-model:value="formState.fk_relation_column_id" dropdown-class-name="!w-64" @change="onDataTypeChange">
<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="font-semibold text-xs">{{ table.column.title }}</div>
@ -72,12 +67,7 @@ const columns = $computed(() => {
</a-select>
</a-form-item>
<a-form-item class="flex w-1/2" :label="$t('labels.childColumn')" v-bind="validateInfos.fk_lookup_column_id">
<a-select
v-model:value="formState.fk_lookup_column_id"
name="fk_lookup_column_id"
size="small"
@change="onDataTypeChange"
>
<a-select v-model:value="formState.fk_lookup_column_id" name="fk_lookup_column_id" @change="onDataTypeChange">
<a-select-option v-for="(column, index) of columns" :key="index" :value="column.id">
{{ column.title }}
</a-select-option>

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

@ -11,10 +11,10 @@ if (!formState.meta?.default) formState.meta.default = null
</script>
<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">
<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">
<div class="flex flex-row items-center">
<div class="text-xs">
@ -25,7 +25,7 @@ if (!formState.meta?.default) formState.meta.default = null
</a-select>
</a-form-item>
<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>
</div>
<div class="flex flex-row mt-2">

8
packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue

@ -64,11 +64,12 @@ watch(
</script>
<template>
<a-row>
<a-row :gutter="8">
<a-col :span="12">
<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">
<div class="flex items-center">
<component
:is="getMdiIcon(icon.full)"
class="mx-1"
@ -82,13 +83,14 @@ watch(
color: formState.meta.color,
}"
/>
</div>
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<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">
{{ v }}
</a-select-option>

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

@ -65,15 +65,10 @@ const columns = $computed(() => {
</script>
<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">
<a-form-item class="flex w-1/2 pb-2" :label="$t('labels.childTable')" v-bind="validateInfos.fk_relation_column_id">
<a-select
v-model:value="formState.fk_relation_column_id"
size="small"
dropdown-class-name="!w-64"
@change="onDataTypeChange"
>
<a-select v-model:value="formState.fk_relation_column_id" dropdown-class-name="!w-64" @change="onDataTypeChange">
<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="font-semibold text-xs">{{ table.column.title }}</div>
@ -85,12 +80,7 @@ const columns = $computed(() => {
</a-select>
</a-form-item>
<a-form-item class="flex w-1/2" :label="$t('labels.childColumn')" v-bind="validateInfos.fk_rollup_column_id">
<a-select
v-model:value="formState.fk_rollup_column_id"
name="fk_rollup_column_id"
size="small"
@change="onDataTypeChange"
>
<a-select v-model:value="formState.fk_rollup_column_id" name="fk_rollup_column_id" @change="onDataTypeChange">
<a-select-option v-for="(column, index) of columns" :key="index" :value="column.id">
{{ column.title }}
</a-select-option>
@ -98,7 +88,7 @@ const columns = $computed(() => {
</a-form-item>
</div>
<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">
{{ func.text }}
</a-select-option>

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

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

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

@ -65,7 +65,7 @@ function onVisibleChange() {
</script>
<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 />
<template #overlay>
<SmartsheetColumnEditOrAdd
@ -76,7 +76,7 @@ function onVisibleChange() {
/>
</template>
</a-dropdown>
<a-dropdown :trigger="['hover']">
<a-dropdown placement="bottomRight" :trigger="['hover']">
<MdiMenuDownIcon class="text-grey nc-ui-dt-dropdown" />
<template #overlay>
<a-menu class="shadow bg-white">

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

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

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

@ -5,7 +5,7 @@ const { isGrid, isForm } = useSmartsheetStoreOrThrow()
</script>
<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" />
<SmartsheetToolbarColumnFilterMenu v-if="isGrid" />
@ -26,4 +26,8 @@ const { isGrid, isForm } = useSmartsheetStoreOrThrow()
:deep(.nc-toolbar-btn) {
@apply border-0 !text-xs font-semibold px-2;
}
.nc-table-toolbar {
border-color: #f0f0f0 !important;
}
</style>

Loading…
Cancel
Save