Browse Source

Merge pull request #2988 from nocodb/refactor/gui-v2-added-rollup-column

vue3: Added rollup column
pull/3009/head
Muhammed Mustafa 2 years ago committed by GitHub
parent
commit
b0f2ca3e3d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 7
      packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
  2. 98
      packages/nc-gui-v2/components/smartsheet-column/RollupOptions.vue
  3. 3
      packages/nc-gui-v2/composables/useColumnCreateStore.ts

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

@ -1,5 +1,5 @@
<script lang="ts" setup>
import { UITypes } from 'nocodb-sdk'
import { UITypes, isVirtualCol } from 'nocodb-sdk'
import { computed, inject, useColumnCreateStoreOrThrow, useMetas, watchEffect } from '#imports'
import { MetaInj } from '~/context'
import { uiTypes } from '~/utils/columnUtils'
@ -93,16 +93,17 @@ watchEffect(() => {
<SmartsheetColumnCheckboxOptions v-if="formState.uidt === UITypes.Checkbox" />
<SmartsheetColumnLookupOptions v-if="formState.uidt === UITypes.Lookup" />
<SmartsheetColumnDateOptions v-if="formState.uidt === UITypes.Date" />
<SmartsheetColumnRollupOptions v-if="formState.uidt === UITypes.Rollup" />
<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"
@click="advancedOptions = !advancedOptions"
>
{{ advancedOptions ? $t('general.hideAll') : $t('general.showMore') }}
<component :is="advancedOptions ? MdiMinusIcon : MdiPlusIcon" />
</div>
</div>
<div class="overflow-hidden" :class="advancedOptions ? 'h-min' : 'h-0'">
<a-checkbox
v-if="formState.meta && columnToValidate.includes(formState.uidt)"

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

@ -0,0 +1,98 @@
<script setup lang="ts">
import { UITypes, isSystemColumn, isVirtualCol } from 'nocodb-sdk'
import { useColumnCreateStoreOrThrow } from '#imports'
import { MetaInj } from '~/context'
const { formState, validateInfos, onDataTypeChange, setAdditionalValidations } = $(useColumnCreateStoreOrThrow())
const { tables } = $(useProject())
const meta = $(inject(MetaInj))
const { metas } = $(useMetas())
setAdditionalValidations({
fk_relation_column_id: [{ required: true, message: 'Required' }],
fk_rollup_column_id: [{ required: true, message: 'Required' }],
rollup_function: [{ required: true, message: 'Required' }],
})
const relationNames = {
mm: 'Many To Many',
hm: 'Has Many',
}
const aggrFunctionsList = [
{ text: 'count', value: 'count' },
{ text: 'min', value: 'min' },
{ text: 'max', value: 'max' },
{ text: 'avg', value: 'avg' },
{ text: 'min', value: 'min' },
{ text: 'sum', value: 'sum' },
{ text: 'countDistinct', value: 'countDistinct' },
{ text: 'sumDistinct', value: 'sumDistinct' },
{ text: 'avgDistinct', value: 'avgDistinct' },
]
if (!formState.fk_relation_column_id) formState.fk_relation_column_id = null
if (!formState.fk_rollup_column_id) formState.fk_rollup_column_id = null
if (!formState.rollup_function) formState.rollup_function = null
const refTables = $computed(() => {
if (!tables || !tables.length) {
return []
}
return meta.columns
.filter((c) => c.uidt === UITypes.LinkToAnotherRecord && c.colOptions.type !== 'bt' && !c.system)
.map((c) => ({
col: c.colOptions,
column: c,
...tables.find((t) => t.id === c.colOptions.fk_related_model_id),
}))
})
const columns = $computed(() => {
const selectedTable = refTables.find((t) => t.column.id === formState.fk_relation_column_id)
if (!selectedTable?.id) {
return []
}
return metas[selectedTable.id].columns.filter((c) => !isVirtualCol(c.uidt) && !isSystemColumn(c))
})
</script>
<template>
<div class="p-4 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" @change="onDataTypeChange">
<a-select-option v-for="(table, index) in refTables" :key="index" :value="table.col.fk_column_id">
<div class="flex flex-row items-center space-x-0.5">
<div class="font-weight-bold text-xs">{{ table.column.title }}</div>
<div class="text-[0.45rem]">({{ relationNames[table.col.type] }} {{ table.title || table.table_name }})</div>
</div>
</a-select-option>
</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-option v-for="(column, index) in columns" :key="index" :value="column.id">
{{ column.title }}
</a-select-option>
</a-select>
</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-option v-for="(func, index) in aggrFunctionsList" :key="index" :value="func.value">
{{ func.text }}
</a-select-option>
</a-select>
</a-form-item>
</div>
</template>
<style scoped></style>

3
packages/nc-gui-v2/composables/useColumnCreateStore.ts

@ -198,7 +198,8 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
}
onSuccess()
} catch (e: any) {
toast.error(await extractSdkResponseErrorMsg(e))
const error = await extractSdkResponseErrorMsg(e)
if (error) toast.error(await extractSdkResponseErrorMsg(e))
}
}

Loading…
Cancel
Save