Browse Source

Merge pull request #3006 from nocodb/refactor/gui-v2-ltar-column-header

vue3: Added LTAR column
pull/3009/head
Muhammed Mustafa 2 years ago committed by GitHub
parent
commit
12682454a1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 2
      packages/nc-gui-v2/components.d.ts
  2. 1
      packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
  3. 107
      packages/nc-gui-v2/components/smartsheet-column/LinkedToAnotherRecordOptions.vue

2
packages/nc-gui-v2/components.d.ts vendored

@ -40,6 +40,8 @@ declare module '@vue/runtime-core' {
AModal: typeof import('ant-design-vue/es')['Modal'] AModal: typeof import('ant-design-vue/es')['Modal']
APagination: typeof import('ant-design-vue/es')['Pagination'] APagination: typeof import('ant-design-vue/es')['Pagination']
APopconfirm: typeof import('ant-design-vue/es')['Popconfirm'] APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
ARadio: typeof import('ant-design-vue/es')['Radio']
ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
ARate: typeof import('ant-design-vue/es')['Rate'] ARate: typeof import('ant-design-vue/es')['Rate']
ARow: typeof import('ant-design-vue/es')['Row'] ARow: typeof import('ant-design-vue/es')['Row']
ASelect: typeof import('ant-design-vue/es')['Select'] ASelect: typeof import('ant-design-vue/es')['Select']

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

@ -94,6 +94,7 @@ watchEffect(() => {
<SmartsheetColumnLookupOptions v-if="formState.uidt === UITypes.Lookup" /> <SmartsheetColumnLookupOptions v-if="formState.uidt === UITypes.Lookup" />
<SmartsheetColumnDateOptions v-if="formState.uidt === UITypes.Date" /> <SmartsheetColumnDateOptions v-if="formState.uidt === UITypes.Date" />
<SmartsheetColumnRollupOptions v-if="formState.uidt === UITypes.Rollup" /> <SmartsheetColumnRollupOptions v-if="formState.uidt === UITypes.Rollup" />
<SmartsheetColumnLinkedToAnotherRecordOptions v-if="formState.uidt === UITypes.LinkToAnotherRecord" />
<div <div
v-if="!isVirtualCol(formState.uidt)" v-if="!isVirtualCol(formState.uidt)"

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

@ -0,0 +1,107 @@
<script setup lang="ts">
import type { TableType } from 'nocodb-sdk'
import { ModelTypes, MssqlUi, SqliteUi } from 'nocodb-sdk'
import { useColumnCreateStoreOrThrow } from '#imports'
import { MetaInj } from '~/context'
import MdiPlusIcon from '~icons/mdi/plus-circle-outline'
import MdiMinusIcon from '~icons/mdi/minus-circle-outline'
const { formState, validateInfos, onDataTypeChange, setAdditionalValidations } = $(useColumnCreateStoreOrThrow())
const { tables, sqlUi } = $(useProject())
const meta: TableType = $(inject(MetaInj))
setAdditionalValidations({
childId: [{ required: true, message: 'Required' }],
})
const onUpdateDeleteOptions = sqlUi === MssqlUi ? ['NO ACTION'] : ['NO ACTION', 'CASCADE', 'RESTRICT', 'SET NULL', 'SET DEFAULT']
if (!formState.parentId) formState.parentId = meta.id
if (!formState.childId) formState.childId = null
if (!formState.childColumn) formState.childColumn = `${meta.table_name}_id`
if (!formState.childTable) formState.childTable = meta.table_name
if (!formState.parentTable) formState.parentTable = formState.rtn || ''
if (!formState.parentColumn) formState.parentColumn = formState.rcn || ''
if (!formState.type) formState.type = 'hm'
if (!formState.onUpdate) formState.onUpdate = onUpdateDeleteOptions[0]
if (!formState.onDelete) formState.onDelete = onUpdateDeleteOptions[0]
if (!formState.virtual) formState.virtual = sqlUi === SqliteUi
if (!formState.alias) formState.alias = formState.column_name
const advancedOptions = $(ref(false))
const refTables = $computed(() => {
if (!tables || !tables.length) {
return []
}
return tables.filter((t) => t.type === ModelTypes.TABLE)
})
</script>
<template>
<div class="w-full flex flex-col mb-2 mt-4">
<div class="border-2 p-4">
<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>
<a-radio value="mm">Many To Many</a-radio>
</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-option v-for="(table, index) in refTables" :key="index" :value="table.id">
{{ table.title }}
</a-select-option>
</a-select>
</a-form-item>
</div>
<div
class="text-xs cursor-pointer text-grey nc-more-options my-2 flex align-center gap-1 justify-end"
@click="advancedOptions = !advancedOptions"
>
{{ advancedOptions ? $t('general.hideAll') : $t('general.showMore') }}
<component :is="advancedOptions ? MdiMinusIcon : MdiPlusIcon" />
</div>
<div v-if="advancedOptions" class="flex flex-col p-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-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-option v-for="(option, index) in onUpdateDeleteOptions" :key="index" :value="option">
{{ option }}
</a-select-option>
</a-select>
</a-form-item>
</div>
<div class="flex flex-row">
<a-form-item>
<a-checkbox v-model:checked="formState.virtual" name="virtual" @change="onDataTypeChange">Virtual Relation</a-checkbox>
</a-form-item>
</div>
</div>
</div>
</template>
<style scoped></style>
Loading…
Cancel
Save