Browse Source

refactor(gui-v2): formula hint layout

pull/3049/head
Wing-Kam Wong 2 years ago
parent
commit
7a19c8df1c
  1. 35
      packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue

35
packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue

@ -101,6 +101,7 @@ const suggestionsList = computed(() => {
text: c.title, text: c.title,
type: 'column', type: 'column',
icon: getUIDTIcon(c.uidt), icon: getUIDTIcon(c.uidt),
uidt: c.uidt,
})), })),
...availableBinOps.map((op: string) => ({ ...availableBinOps.map((op: string) => ({
text: op, text: op,
@ -613,7 +614,7 @@ onMounted(() => {
<template> <template>
<div class="formula-wrapper"> <div class="formula-wrapper">
<a-form-item v-bind="validateInfos.formula_raw" label="Formula"> <a-form-item v-bind="validateInfos.formula_raw" label="Formula">
<a-input <a-textarea
ref="formulaRef" ref="formulaRef"
v-model:value="formState.formula_raw" v-model:value="formState.formula_raw"
class="mb-2" class="mb-2"
@ -623,21 +624,13 @@ onMounted(() => {
@change="handleInputDeb" @change="handleInputDeb"
/> />
</a-form-item> </a-form-item>
<div class="text-gray-600 mt-2 prose-sm"> <div class="text-gray-600 mt-2 mb-4 prose-sm">
Hint: Use {} to reference columns, e.g: {column_name}. For more, please check out Hint: Use {} to reference columns, e.g: {column_name}. For more, please check out
<a class="prose-sm" href="https://docs.nocodb.com/setup-and-usages/formulas#available-formula-features" target="_blank" <a class="prose-sm" href="https://docs.nocodb.com/setup-and-usages/formulas#available-formula-features" target="_blank"
>Formulas</a >Formulas</a
>. >.
</div> </div>
<a-drawer <div class="h-[250px] overflow-auto scrollbar-thin-primary">
v-model:visible="formulaSuggestionDrawer"
:closable="false"
:mask="false"
:mask-closable="false"
placement="right"
width="500px"
class="h-full overflow-auto"
>
<a-list ref="sugListRef" :data-source="suggestion" :locale="{ emptyText: 'No suggested formula was found' }"> <a-list ref="sugListRef" :data-source="suggestion" :locale="{ emptyText: 'No suggested formula was found' }">
<template #renderItem="{ item, index }"> <template #renderItem="{ item, index }">
<a-list-item <a-list-item
@ -650,7 +643,13 @@ onMounted(() => {
@click.prevent.stop="appendText(item)" @click.prevent.stop="appendText(item)"
> >
<a-list-item-meta> <a-list-item-meta>
<template v-if="item.type === 'function'" #description> <template #title>
<div class="flex">
<a-col :span="6">
<span class="prose-sm text-gray-600">{{ item.text }}</span>
</a-col>
<a-col :span="18">
<div v-if="item.type === 'function'" class="text-xs text-gray-500">
{{ item.description }} <br /><br /> {{ item.description }} <br /><br />
Syntax: <br /> Syntax: <br />
{{ item.syntax }} <br /><br /> {{ item.syntax }} <br /><br />
@ -658,15 +657,11 @@ onMounted(() => {
<div v-for="(example, idx) of item.examples" :key="idx"> <div v-for="(example, idx) of item.examples" :key="idx">
<div>({{ idx + 1 }}): {{ example }}</div> <div>({{ idx + 1 }}): {{ example }}</div>
</div> </div>
</template>
<template #title>
<div class="flex">
<div class="flex-1">
{{ item.text }}
</div> </div>
<div class=""> <div v-if="item.type === 'column'" class="float-right mr-5 -mt-2">
{{ getFormulaTypeName(item.type) }} <a-badge-ribbon :text="item.uidt" />
</div> </div>
</a-col>
</div> </div>
</template> </template>
<template #avatar> <template #avatar>
@ -678,6 +673,6 @@ onMounted(() => {
</a-list-item> </a-list-item>
</template> </template>
</a-list> </a-list>
</a-drawer> </div>
</div> </div>
</template> </template>

Loading…
Cancel
Save