多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

148 lines
4.2 KiB

5 months ago
<script setup lang="ts">
import { type ColumnType, isVirtualCol } from 'nocodb-sdk'
interface Props {
column: ColumnType
value?: boolean
}
const props = defineProps<Props>()
5 months ago
const { $api } = useNuxtApp()
5 months ago
5 months ago
const { getMeta } = useMetas()
const { eventBus } = useSmartsheetStoreOrThrow()
const { fields } = useViewColumnsOrThrow()
5 months ago
const meta = inject(MetaInj, ref())
5 months ago
const searchField = ref('')
5 months ago
const column = toRef(props, 'column')
5 months ago
const value = useVModel(props, 'value')
const selectedField = ref()
const isLoading = ref(false)
const filteredColumns = computed(() => {
const columns = meta.value?.columnsById ?? {}
return (fields.value ?? [])
.filter((f) => !isVirtualCol(columns[f.fk_column_id]))
.filter((c) => c.title.toLowerCase().includes(searchField.value.toLowerCase()))
})
const changeDisplayField = async () => {
isLoading.value = true
try {
await $api.dbTableColumn.primaryColumnSet(selectedField?.value?.fk_column_id as string)
await getMeta(meta?.value?.id as string, true)
eventBus.emit(SmartsheetStoreEvents.FIELD_RELOAD)
value.value = false
} catch (e) {
console.error(e)
} finally {
isLoading.value = false
}
}
5 months ago
const getIcon = (c: ColumnType) =>
h(isVirtualCol(c) ? resolveComponent('SmartsheetHeaderVirtualCellIcon') : resolveComponent('SmartsheetHeaderCellIcon'), {
columnMeta: c,
})
5 months ago
onMounted(() => {
searchField.value = ''
selectedField.value = fields.value?.find((f) => f.fk_column_id === column.value.id)
})
5 months ago
</script>
<template>
<NcModal v-model:visible="value" size="small">
<div class="flex flex-col gap-3">
5 months ago
<div>
<h1 class="text-base text-gray-800 font-semibold">{{ $t('labels.searchDisplayValue') }}</h1>
<div class="text-gray-600 flex items-center gap-1">
5 months ago
{{ $t('labels.selectYourNewTitleFor') }}
<span class="bg-gray-100 inline-flex items-center gap-1 px-1 rounded-md">
5 months ago
<component :is="iconMap.table" />
{{ meta?.title ?? meta?.table_name }}
</span>
</div>
5 months ago
</div>
<div class="flex w-full gap-2 justify-between items-center">
<a-input v-model:value="searchField" class="w-full h-8 flex-1" size="small" :placeholder="$t('placeholder.searchFields')">
<template #prefix>
<component :is="iconMap.search" class="w-4 text-gray-500 h-4" />
</template>
</a-input>
</div>
<div class="border-1 rounded-md h-[250px] nc-scrollbar-md border-gray-200">
5 months ago
<div
feat: button field (#9144) * feat: static button type * fix: swagger * fix: style corrections * feat: webhook trigger * fix: disables * feat: Button icons fix: row Delete failing * fix: expanded-form ux fix: disable buttons in forms fix: update PlainCell button handling fix: webhook delete, active change handling * fix: disable case * fix: disable case * fix: update Button styles * fix: refactor min/max with limit for columns fix: disable filter, groupby for Button Field fix: disable aggregation for Buttons * fix: hide button field in Filters * fix: fields menu corrections fix: update menu corrections * fix: rebase * feat: support webhook creation from ButtonOptions * fix: sort related tests * fix: keep webhook modal open * fix: ui fixes * fix: icon duplicate * fix: syntax highlighing for handlebar fix: disable mascot fix: truncate selected webhook * fix: sort disable tooltip * test: button playwright test * fix: button column duplication * fix: add error fix: column options * fix: EditOrAddProvider.vue * fix: add invalid configuration * fix: ux corrections * fix: ux corrections * fix: error handling fix: clear single query cache on hook delete * fix: include button type in api * fix: update overlay styles fix: webhook update * fix: formula placeholder * fix: playwright tests * fix: playwright tests * feat: refactor formula input * fix: added more spacing * fix: no icon text * fix: lint * fix: handle invalid url * fix: handle sort by for button causes issue when button used as lookup * fix: button field position * docs: button field * fix: tooltip correction * fix: link * fix: add btn href * fix: handle some edge cases * fix: handle some edge cases * fix: update font color * fix: add manual trigger docs * fix: sqlite BaseModel fix * docs: button share view info * fix: rebase * fix: reduce height and added resize support fix: added tooltip if label overflow * fix: manual hook disable state * docs: manual trigger details in webhook page * fix: chevron grey shade to 500 * docs: sample payload for manual trigger * fix: style update * fix: pr review comments * fix: pr review changes * fix: reactivity issue * fix: reactivity issue * fix: filter enabled on button * fix: reload meta on webhook change * fix: error handling in formula filter * fix: handle url error --------- Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>
4 months ago
v-for="col in filteredColumns"
:key="col.fk_column_id"
5 months ago
:class="{
feat: button field (#9144) * feat: static button type * fix: swagger * fix: style corrections * feat: webhook trigger * fix: disables * feat: Button icons fix: row Delete failing * fix: expanded-form ux fix: disable buttons in forms fix: update PlainCell button handling fix: webhook delete, active change handling * fix: disable case * fix: disable case * fix: update Button styles * fix: refactor min/max with limit for columns fix: disable filter, groupby for Button Field fix: disable aggregation for Buttons * fix: hide button field in Filters * fix: fields menu corrections fix: update menu corrections * fix: rebase * feat: support webhook creation from ButtonOptions * fix: sort related tests * fix: keep webhook modal open * fix: ui fixes * fix: icon duplicate * fix: syntax highlighing for handlebar fix: disable mascot fix: truncate selected webhook * fix: sort disable tooltip * test: button playwright test * fix: button column duplication * fix: add error fix: column options * fix: EditOrAddProvider.vue * fix: add invalid configuration * fix: ux corrections * fix: ux corrections * fix: error handling fix: clear single query cache on hook delete * fix: include button type in api * fix: update overlay styles fix: webhook update * fix: formula placeholder * fix: playwright tests * fix: playwright tests * feat: refactor formula input * fix: added more spacing * fix: no icon text * fix: lint * fix: handle invalid url * fix: handle sort by for button causes issue when button used as lookup * fix: button field position * docs: button field * fix: tooltip correction * fix: link * fix: add btn href * fix: handle some edge cases * fix: handle some edge cases * fix: update font color * fix: add manual trigger docs * fix: sqlite BaseModel fix * docs: button share view info * fix: rebase * fix: reduce height and added resize support fix: added tooltip if label overflow * fix: manual hook disable state * docs: manual trigger details in webhook page * fix: chevron grey shade to 500 * docs: sample payload for manual trigger * fix: style update * fix: pr review comments * fix: pr review changes * fix: reactivity issue * fix: reactivity issue * fix: filter enabled on button * fix: reload meta on webhook change * fix: error handling in formula filter * fix: handle url error --------- Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>
4 months ago
'bg-gray-100': selectedField === col,
5 months ago
}"
feat: button field (#9144) * feat: static button type * fix: swagger * fix: style corrections * feat: webhook trigger * fix: disables * feat: Button icons fix: row Delete failing * fix: expanded-form ux fix: disable buttons in forms fix: update PlainCell button handling fix: webhook delete, active change handling * fix: disable case * fix: disable case * fix: update Button styles * fix: refactor min/max with limit for columns fix: disable filter, groupby for Button Field fix: disable aggregation for Buttons * fix: hide button field in Filters * fix: fields menu corrections fix: update menu corrections * fix: rebase * feat: support webhook creation from ButtonOptions * fix: sort related tests * fix: keep webhook modal open * fix: ui fixes * fix: icon duplicate * fix: syntax highlighing for handlebar fix: disable mascot fix: truncate selected webhook * fix: sort disable tooltip * test: button playwright test * fix: button column duplication * fix: add error fix: column options * fix: EditOrAddProvider.vue * fix: add invalid configuration * fix: ux corrections * fix: ux corrections * fix: error handling fix: clear single query cache on hook delete * fix: include button type in api * fix: update overlay styles fix: webhook update * fix: formula placeholder * fix: playwright tests * fix: playwright tests * feat: refactor formula input * fix: added more spacing * fix: no icon text * fix: lint * fix: handle invalid url * fix: handle sort by for button causes issue when button used as lookup * fix: button field position * docs: button field * fix: tooltip correction * fix: link * fix: add btn href * fix: handle some edge cases * fix: handle some edge cases * fix: update font color * fix: add manual trigger docs * fix: sqlite BaseModel fix * docs: button share view info * fix: rebase * fix: reduce height and added resize support fix: added tooltip if label overflow * fix: manual hook disable state * docs: manual trigger details in webhook page * fix: chevron grey shade to 500 * docs: sample payload for manual trigger * fix: style update * fix: pr review comments * fix: pr review changes * fix: reactivity issue * fix: reactivity issue * fix: filter enabled on button * fix: reload meta on webhook change * fix: error handling in formula filter * fix: handle url error --------- Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>
4 months ago
:data-testid="`nc-display-field-update-menu-${col.title}`"
5 months ago
class="px-3 py-1 flex flex-row items-center rounded-md hover:bg-gray-100"
feat: button field (#9144) * feat: static button type * fix: swagger * fix: style corrections * feat: webhook trigger * fix: disables * feat: Button icons fix: row Delete failing * fix: expanded-form ux fix: disable buttons in forms fix: update PlainCell button handling fix: webhook delete, active change handling * fix: disable case * fix: disable case * fix: update Button styles * fix: refactor min/max with limit for columns fix: disable filter, groupby for Button Field fix: disable aggregation for Buttons * fix: hide button field in Filters * fix: fields menu corrections fix: update menu corrections * fix: rebase * feat: support webhook creation from ButtonOptions * fix: sort related tests * fix: keep webhook modal open * fix: ui fixes * fix: icon duplicate * fix: syntax highlighing for handlebar fix: disable mascot fix: truncate selected webhook * fix: sort disable tooltip * test: button playwright test * fix: button column duplication * fix: add error fix: column options * fix: EditOrAddProvider.vue * fix: add invalid configuration * fix: ux corrections * fix: ux corrections * fix: error handling fix: clear single query cache on hook delete * fix: include button type in api * fix: update overlay styles fix: webhook update * fix: formula placeholder * fix: playwright tests * fix: playwright tests * feat: refactor formula input * fix: added more spacing * fix: no icon text * fix: lint * fix: handle invalid url * fix: handle sort by for button causes issue when button used as lookup * fix: button field position * docs: button field * fix: tooltip correction * fix: link * fix: add btn href * fix: handle some edge cases * fix: handle some edge cases * fix: update font color * fix: add manual trigger docs * fix: sqlite BaseModel fix * docs: button share view info * fix: rebase * fix: reduce height and added resize support fix: added tooltip if label overflow * fix: manual hook disable state * docs: manual trigger details in webhook page * fix: chevron grey shade to 500 * docs: sample payload for manual trigger * fix: style update * fix: pr review comments * fix: pr review changes * fix: reactivity issue * fix: reactivity issue * fix: filter enabled on button * fix: reload meta on webhook change * fix: error handling in formula filter * fix: handle url error --------- Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>
4 months ago
@click.stop="selectedField = col"
5 months ago
>
<div class="flex flex-row items-center w-full cursor-pointer truncate ml-1 py-[5px] pr-2">
feat: button field (#9144) * feat: static button type * fix: swagger * fix: style corrections * feat: webhook trigger * fix: disables * feat: Button icons fix: row Delete failing * fix: expanded-form ux fix: disable buttons in forms fix: update PlainCell button handling fix: webhook delete, active change handling * fix: disable case * fix: disable case * fix: update Button styles * fix: refactor min/max with limit for columns fix: disable filter, groupby for Button Field fix: disable aggregation for Buttons * fix: hide button field in Filters * fix: fields menu corrections fix: update menu corrections * fix: rebase * feat: support webhook creation from ButtonOptions * fix: sort related tests * fix: keep webhook modal open * fix: ui fixes * fix: icon duplicate * fix: syntax highlighing for handlebar fix: disable mascot fix: truncate selected webhook * fix: sort disable tooltip * test: button playwright test * fix: button column duplication * fix: add error fix: column options * fix: EditOrAddProvider.vue * fix: add invalid configuration * fix: ux corrections * fix: ux corrections * fix: error handling fix: clear single query cache on hook delete * fix: include button type in api * fix: update overlay styles fix: webhook update * fix: formula placeholder * fix: playwright tests * fix: playwright tests * feat: refactor formula input * fix: added more spacing * fix: no icon text * fix: lint * fix: handle invalid url * fix: handle sort by for button causes issue when button used as lookup * fix: button field position * docs: button field * fix: tooltip correction * fix: link * fix: add btn href * fix: handle some edge cases * fix: handle some edge cases * fix: update font color * fix: add manual trigger docs * fix: sqlite BaseModel fix * docs: button share view info * fix: rebase * fix: reduce height and added resize support fix: added tooltip if label overflow * fix: manual hook disable state * docs: manual trigger details in webhook page * fix: chevron grey shade to 500 * docs: sample payload for manual trigger * fix: style update * fix: pr review comments * fix: pr review changes * fix: reactivity issue * fix: reactivity issue * fix: filter enabled on button * fix: reload meta on webhook change * fix: error handling in formula filter * fix: handle url error --------- Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>
4 months ago
<component :is="getIcon(meta.columnsById[col.fk_column_id])" class="!w-3.5 !h-3.5 !text-gray-500" />
5 months ago
<NcTooltip class="flex-1 pl-1 pr-2 truncate" show-on-truncate-only>
<template #title>
feat: button field (#9144) * feat: static button type * fix: swagger * fix: style corrections * feat: webhook trigger * fix: disables * feat: Button icons fix: row Delete failing * fix: expanded-form ux fix: disable buttons in forms fix: update PlainCell button handling fix: webhook delete, active change handling * fix: disable case * fix: disable case * fix: update Button styles * fix: refactor min/max with limit for columns fix: disable filter, groupby for Button Field fix: disable aggregation for Buttons * fix: hide button field in Filters * fix: fields menu corrections fix: update menu corrections * fix: rebase * feat: support webhook creation from ButtonOptions * fix: sort related tests * fix: keep webhook modal open * fix: ui fixes * fix: icon duplicate * fix: syntax highlighing for handlebar fix: disable mascot fix: truncate selected webhook * fix: sort disable tooltip * test: button playwright test * fix: button column duplication * fix: add error fix: column options * fix: EditOrAddProvider.vue * fix: add invalid configuration * fix: ux corrections * fix: ux corrections * fix: error handling fix: clear single query cache on hook delete * fix: include button type in api * fix: update overlay styles fix: webhook update * fix: formula placeholder * fix: playwright tests * fix: playwright tests * feat: refactor formula input * fix: added more spacing * fix: no icon text * fix: lint * fix: handle invalid url * fix: handle sort by for button causes issue when button used as lookup * fix: button field position * docs: button field * fix: tooltip correction * fix: link * fix: add btn href * fix: handle some edge cases * fix: handle some edge cases * fix: update font color * fix: add manual trigger docs * fix: sqlite BaseModel fix * docs: button share view info * fix: rebase * fix: reduce height and added resize support fix: added tooltip if label overflow * fix: manual hook disable state * docs: manual trigger details in webhook page * fix: chevron grey shade to 500 * docs: sample payload for manual trigger * fix: style update * fix: pr review comments * fix: pr review changes * fix: reactivity issue * fix: reactivity issue * fix: filter enabled on button * fix: reload meta on webhook change * fix: error handling in formula filter * fix: handle url error --------- Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>
4 months ago
{{ col.title }}
5 months ago
</template>
feat: button field (#9144) * feat: static button type * fix: swagger * fix: style corrections * feat: webhook trigger * fix: disables * feat: Button icons fix: row Delete failing * fix: expanded-form ux fix: disable buttons in forms fix: update PlainCell button handling fix: webhook delete, active change handling * fix: disable case * fix: disable case * fix: update Button styles * fix: refactor min/max with limit for columns fix: disable filter, groupby for Button Field fix: disable aggregation for Buttons * fix: hide button field in Filters * fix: fields menu corrections fix: update menu corrections * fix: rebase * feat: support webhook creation from ButtonOptions * fix: sort related tests * fix: keep webhook modal open * fix: ui fixes * fix: icon duplicate * fix: syntax highlighing for handlebar fix: disable mascot fix: truncate selected webhook * fix: sort disable tooltip * test: button playwright test * fix: button column duplication * fix: add error fix: column options * fix: EditOrAddProvider.vue * fix: add invalid configuration * fix: ux corrections * fix: ux corrections * fix: error handling fix: clear single query cache on hook delete * fix: include button type in api * fix: update overlay styles fix: webhook update * fix: formula placeholder * fix: playwright tests * fix: playwright tests * feat: refactor formula input * fix: added more spacing * fix: no icon text * fix: lint * fix: handle invalid url * fix: handle sort by for button causes issue when button used as lookup * fix: button field position * docs: button field * fix: tooltip correction * fix: link * fix: add btn href * fix: handle some edge cases * fix: handle some edge cases * fix: update font color * fix: add manual trigger docs * fix: sqlite BaseModel fix * docs: button share view info * fix: rebase * fix: reduce height and added resize support fix: added tooltip if label overflow * fix: manual hook disable state * docs: manual trigger details in webhook page * fix: chevron grey shade to 500 * docs: sample payload for manual trigger * fix: style update * fix: pr review comments * fix: pr review changes * fix: reactivity issue * fix: reactivity issue * fix: filter enabled on button * fix: reload meta on webhook change * fix: error handling in formula filter * fix: handle url error --------- Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>
4 months ago
<template #default>{{ col.title }}</template>
5 months ago
</NcTooltip>
</div>
<div class="flex-1" />
feat: button field (#9144) * feat: static button type * fix: swagger * fix: style corrections * feat: webhook trigger * fix: disables * feat: Button icons fix: row Delete failing * fix: expanded-form ux fix: disable buttons in forms fix: update PlainCell button handling fix: webhook delete, active change handling * fix: disable case * fix: disable case * fix: update Button styles * fix: refactor min/max with limit for columns fix: disable filter, groupby for Button Field fix: disable aggregation for Buttons * fix: hide button field in Filters * fix: fields menu corrections fix: update menu corrections * fix: rebase * feat: support webhook creation from ButtonOptions * fix: sort related tests * fix: keep webhook modal open * fix: ui fixes * fix: icon duplicate * fix: syntax highlighing for handlebar fix: disable mascot fix: truncate selected webhook * fix: sort disable tooltip * test: button playwright test * fix: button column duplication * fix: add error fix: column options * fix: EditOrAddProvider.vue * fix: add invalid configuration * fix: ux corrections * fix: ux corrections * fix: error handling fix: clear single query cache on hook delete * fix: include button type in api * fix: update overlay styles fix: webhook update * fix: formula placeholder * fix: playwright tests * fix: playwright tests * feat: refactor formula input * fix: added more spacing * fix: no icon text * fix: lint * fix: handle invalid url * fix: handle sort by for button causes issue when button used as lookup * fix: button field position * docs: button field * fix: tooltip correction * fix: link * fix: add btn href * fix: handle some edge cases * fix: handle some edge cases * fix: update font color * fix: add manual trigger docs * fix: sqlite BaseModel fix * docs: button share view info * fix: rebase * fix: reduce height and added resize support fix: added tooltip if label overflow * fix: manual hook disable state * docs: manual trigger details in webhook page * fix: chevron grey shade to 500 * docs: sample payload for manual trigger * fix: style update * fix: pr review comments * fix: pr review changes * fix: reactivity issue * fix: reactivity issue * fix: filter enabled on button * fix: reload meta on webhook change * fix: error handling in formula filter * fix: handle url error --------- Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>
4 months ago
<component :is="iconMap.check" v-if="selectedField === col" class="!w-4 !h-4 !text-brand-500" />
5 months ago
</div>
5 months ago
</div>
<div class="flex w-full gap-2 justify-end">
5 months ago
<NcButton type="secondary" size="small" @click="value = false">
5 months ago
{{ $t('general.cancel') }}
</NcButton>
<NcButton
5 months ago
:disabled="!selectedField || selectedField.fk_column_id === column.id"
5 months ago
:loading="isLoading"
size="small"
5 months ago
@click="changeDisplayField"
5 months ago
>
5 months ago
{{ $t('labels.changeDisplayValueField') }}
5 months ago
</NcButton>
</div>
</div>
</NcModal>
</template>
<style scoped lang="scss">
.ant-input::placeholder {
@apply text-gray-500;
}
.ant-input:placeholder-shown {
@apply text-gray-500 !text-md;
}
.ant-input-affix-wrapper {
@apply px-4 rounded-lg py-2 w-84 border-1 focus:border-brand-500 border-gray-200 !ring-0;
}
</style>