refactor: validate form in each transform components (#5232)

* refactor: validate form in each transform components Signed-off-by: yuda <[email protected]> * chore: delete comment Signed-off-by: yuda <[email protected]> * chore: fix typo Signed-off-by: yuda <[email protected]> * chore: delete todo Signed-off-by: yuda <[email protected]> --------- Signed-off-by: yuda <[email protected]>
cloudforet-io · Dec 17, 2024 · bb868cd · bb868cd
1 parent 7943ae2
commit bb868cd
Show file tree

Hide file tree

Showing 12 changed files with 115 additions and 40 deletions.
diff --git a/.../web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformAddLabels.vue b/.../web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformAddLabels.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {
+    computed,
     onMounted, reactive, ref, watch,
 } from 'vue';
 import type { TranslateResult } from 'vue-i18n';
@@ -29,7 +30,9 @@ interface AdditionalLabel {
 const DATE_FIELD = 'Date';
 const COMPONENT_RANDOM_KEY = `add-labels-${random()}`;
 const props = defineProps<TransformDataTableProps<AddLabelsOptions>>();
-const emit = defineEmits<{(e: 'update:operator-options', value: AddLabelsOptions): void; }>();
+const emit = defineEmits<{(e: 'update:operator-options', value: AddLabelsOptions): void;
+    (e: 'update:invalid', value: boolean): void;
+}>();
 
 const dataTableInfo = ref<TransformDataTableInfo>({
     dataTableId: props.originData?.data_table_id,
@@ -38,6 +41,15 @@ const labelsInfo = ref<AddLabelsOptions['labels']>(props.originData.labels);
 const state = reactive({
     proxyOperatorOptions: useProxyValue<AddLabelsOptions>('operator-options', props, emit),
     refinedLabels: [] as AdditionalLabel[],
+    invalid: computed<boolean>(() => {
+        if (!state.proxyOperatorOptions?.data_table_id) return true;
+        if (!state.refinedLabels.length) return true;
+        if (state.refinedLabels.some((label) => !label.name || !label.value)) return true;
+        const fieldNames = state.refinedLabels.map((label) => label.name);
+        if (fieldNames.includes(DATE_FIELD)) return true;
+        if (fieldNames.length !== new Set(fieldNames).size) return true;
+        return false;
+    }),
     // groupByKeys: computed<string[]>(() => []),
 });
 
@@ -74,9 +86,9 @@ const handleRemoveLabel = (idx: number) => {
 };
 
 /* Watcher */
-watch(() => state.refinedLabels, (_refinedLabels) => {
+watch([dataTableInfo, () => state.refinedLabels], ([_dataTableInfo, _refinedLabels]) => {
     state.proxyOperatorOptions = {
-        ...state.proxyOperatorOptions,
+        data_table_id: _dataTableInfo.dataTableId,
         labels: _refinedLabels.reduce((acc, label) => {
             if (label.name && label.value) {
                 acc[label.name] = label.value;
@@ -85,6 +97,9 @@ watch(() => state.refinedLabels, (_refinedLabels) => {
         }, {}),
     };
 }, { deep: true });
+watch(() => state.invalid, (_invalid) => {
+    emit('update:invalid', _invalid);
+}, { immediate: true });
 
 onMounted(() => {
     state.refinedLabels = Object.entries(labelsInfo.value).map(([name, value]) => ({ name, value }));

diff --git a/...eb/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformConcatenate.vue b/...eb/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformConcatenate.vue
@@ -1,27 +1,35 @@
 <script setup lang="ts">
 import {
-    reactive, ref, watch,
+    computed, reactive, ref, watch,
 } from 'vue';
 
 import { useProxyValue } from '@/common/composables/proxy-state';
 import WidgetFormDataTableCardTransformFormWrapper
     from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormWrapper.vue';
 import {
-    type DATA_TABLE_OPERATOR,
+    DATA_TABLE_OPERATOR,
 } from '@/common/modules/widgets/_constants/data-table-constant';
 import type { TransformDataTableInfo, TransformDataTableProps } from '@/common/modules/widgets/types/widget-data-table-type';
 import type { ConcatOptions } from '@/common/modules/widgets/types/widget-model';
 
 
 
 const props = defineProps<TransformDataTableProps<ConcatOptions>>();
-const emit = defineEmits<{(e: 'update:operator-options', value: ConcatOptions): void; }>();
+const emit = defineEmits<{(e: 'update:operator-options', value: ConcatOptions): void;
+    (e: 'update:invalid', value: boolean): void;
+}>();
 
 const dataTableInfo = ref<TransformDataTableInfo>({
     dataTables: props.originData?.data_tables,
 });
 const state = reactive({
     proxyOperatorOptions: useProxyValue<ConcatOptions>('operator-options', props, emit),
+    invalid: computed<boolean>(() => {
+        if (state.proxyOperatorOptions.data_tables.length < 2) {
+            return true;
+        }
+        return !state.proxyOperatorOptions.data_tables.every((d) => !!d);
+    }),
 });
 
 // Update operator options
@@ -30,13 +38,14 @@ watch(dataTableInfo, (_dataTableInfo) => {
         data_tables: _dataTableInfo.dataTables || [],
     };
 }, { deep: true, immediate: true });
+watch(() => state.invalid, (_invalid) => {
+    emit('update:invalid', _invalid);
+}, { immediate: true });
 </script>
 
 <template>
-    <div class="widget-form-data-table-card-transform-concatenate">
-        <widget-form-data-table-card-transform-form-wrapper :data-table-id="props.baseDataTableId"
-                                                            :operator="DATA_TABLE_OPERATOR.CONCAT"
-                                                            :data-table-info.sync="dataTableInfo"
-        />
-    </div>
+    <widget-form-data-table-card-transform-form-wrapper :data-table-id="props.baseDataTableId"
+                                                        :operator="DATA_TABLE_OPERATOR.CONCAT"
+                                                        :data-table-info.sync="dataTableInfo"
+    />
 </template>
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue
@@ -68,19 +68,13 @@ const state = reactive({
     dataTableName: props.item.name ? props.item.name : `${props.item.operator} Data`,
     applyDisabled: computed(() => {
         const haveSavedName = !!originState.name;
-        const haveRequiredConcatOptions = haveSavedName && valueState.CONCAT.data_tables.length === 2 && !valueState.CONCAT.data_tables.includes(undefined);
-        const haveRequiredJoinOptions = haveSavedName && valueState.JOIN.data_tables.length === 2 && valueState.JOIN.how;
-        const haveRequiredQueryOptions = haveSavedName && !!valueState.QUERY.data_table_id && valueState.QUERY.conditions.filter((cond) => !!cond.trim()).length > 0;
-        const haveRequiredEvalOptions = haveSavedName && !!valueState.EVAL.data_table_id && valueState.EVAL.expressions.every((expression) => !!expression.name && !!expression.expression);
-        const haveRequiredAddLabels = haveSavedName && !!valueState.ADD_LABELS.data_table_id && Object.entries(valueState.ADD_LABELS.labels).every(([name, value]) => !!name && !!value);
-        const haveRequiredPivotOptions = haveSavedName && !!valueState.PIVOT.data_table_id && !!valueState.PIVOT.fields?.labels && valueState.PIVOT.fields?.labels?.length > 0
-            && !!valueState.PIVOT.fields?.column && !!valueState.PIVOT.fields?.data && (!!valueState.PIVOT.select || !!valueState.PIVOT.limit);
-        if (state.operator === 'CONCAT') return !haveRequiredConcatOptions;
-        if (state.operator === 'JOIN') return !haveRequiredJoinOptions;
-        if (state.operator === 'QUERY') return !haveRequiredQueryOptions;
-        if (state.operator === 'EVAL') return !haveRequiredEvalOptions;
-        if (state.operator === 'PIVOT') return !haveRequiredPivotOptions;
-        if (state.operator === 'ADD_LABELS') return !haveRequiredAddLabels;
+        if (!haveSavedName) return true;
+        if (state.operator === 'CONCAT') return invalidState.CONCAT;
+        if (state.operator === 'JOIN') return invalidState.JOIN;
+        if (state.operator === 'QUERY') return invalidState.QUERY;
+        if (state.operator === 'EVAL') return invalidState.EVAL;
+        if (state.operator === 'PIVOT') return invalidState.PIVOT;
+        if (state.operator === 'ADD_LABELS') return invalidState.ADD_LABELS;
         return true;
     }),
     optionsChanged: computed(() => {
@@ -121,6 +115,14 @@ const valueState = reactive({
     QUERY: DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.QUERY,
     ADD_LABELS: DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.ADD_LABELS,
 });
+const invalidState = reactive({
+    PIVOT: false,
+    CONCAT: false,
+    JOIN: false,
+    EVAL: false,
+    QUERY: false,
+    ADD_LABELS: false,
+});
 
 const originState = reactive({
     name: computed(() => props.item.name),
@@ -292,7 +294,6 @@ const handleUpdateDataTable = async () => {
 
 /* Utils */
 const setInitialDataTableForm = () => {
-    // TODO: check reset
     const _originDataTables = originState.dataTableInfo.dataTables.length ? cloneDeep(originState.dataTableInfo.dataTables) : [];
     const _originDataTableId = originState.dataTableInfo.dataTableId;
     // CONCAT
@@ -350,36 +351,42 @@ defineExpose({
                                                           :key="`pivot-${state.resetKey}`"
                                                           :base-data-table-id="state.dataTableId"
                                                           :operator-options.sync="valueState.PIVOT"
+                                                          :invalid.sync="invalidState.PIVOT"
                                                           :origin-data="props.item.options[state.operator]"
         />
         <widget-form-data-table-card-transform-concatenate v-if="state.operator === DATA_TABLE_OPERATOR.CONCAT"
                                                            :key="`concat-${state.resetKey}`"
                                                            :base-data-table-id="state.dataTableId"
                                                            :operator-options.sync="valueState.CONCAT"
+                                                           :invalid.sync="invalidState.CONCAT"
                                                            :origin-data="props.item.options[state.operator]"
         />
         <widget-form-data-table-card-transform-join v-else-if="state.operator === DATA_TABLE_OPERATOR.JOIN"
                                                     :key="`join-${state.resetKey}`"
                                                     :base-data-table-id="state.dataTableId"
                                                     :operator-options.sync="valueState.JOIN"
+                                                    :invalid.sync="invalidState.JOIN"
                                                     :origin-data="props.item.options[state.operator]"
         />
         <widget-form-data-table-card-transform-evaluate v-else-if="state.operator === DATA_TABLE_OPERATOR.EVAL"
                                                         :key="`eval-${state.resetKey}`"
                                                         :base-data-table-id="state.dataTableId"
                                                         :operator-options.sync="valueState.EVAL"
+                                                        :invalid.sync="invalidState.EVAL"
                                                         :origin-data="props.item.options[state.operator]"
         />
         <widget-form-data-table-card-transform-query v-else-if="state.operator === DATA_TABLE_OPERATOR.QUERY"
                                                      :key="`query-${state.resetKey}`"
                                                      :base-data-table-id="state.dataTableId"
                                                      :operator-options.sync="valueState.QUERY"
+                                                     :invalid.sync="invalidState.QUERY"
                                                      :origin-data="props.item.options[state.operator]"
         />
         <widget-form-data-table-card-transform-add-labels v-if="state.operator === DATA_TABLE_OPERATOR.ADD_LABELS"
                                                           :key="`add-labels-${state.resetKey}`"
                                                           :base-data-table-id="state.dataTableId"
                                                           :operator-options.sync="valueState.ADD_LABELS"
+                                                          :invalid.sync="invalidState.ADD_LABELS"
                                                           :origin-data="props.item.options[state.operator]"
         />
         <widget-form-data-table-card-footer :disabled="state.applyDisabled"

diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformEvaluate.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformEvaluate.vue
@@ -27,7 +27,9 @@ import type { EvalOptions } from '@/common/modules/widgets/types/widget-model';
 
 
 const props = defineProps<TransformDataTableProps<EvalOptions>>();
-const emit = defineEmits<{(e: 'update:operator-options', value: EvalOptions): void; }>();
+const emit = defineEmits<{(e: 'update:operator-options', value: EvalOptions): void;
+    (e: 'update:invalid', value: boolean): void;
+}>();
 
 const dataTableInfo = ref<TransformDataTableInfo>({
     dataTableId: props.originData?.data_table_id,
@@ -51,6 +53,12 @@ const state = reactive({
         },
     ]),
     globalVariablePopperVisible: false,
+    invalid: computed<boolean>(() => {
+        if (!state.proxyOperatorOptions.data_table_id) return true;
+        const fieldNames = expressionsInfo.value.map((expression) => expression.name);
+        if (fieldNames.length !== new Set(fieldNames).size) return true;
+        return !expressionsInfo.value.every((expression) => !!expression.name && !!expression.expression);
+    }),
 });
 
 const modalState = reactive({
@@ -126,6 +134,9 @@ watch([dataTableInfo, expressionsInfo], ([_dataTableInfo, _expressionsInfo]) =>
         expressions: _expressionsInfo,
     };
 }, { deep: true, immediate: true });
+watch(() => state.invalid, (_invalid) => {
+    emit('update:invalid', _invalid);
+}, { immediate: true });
 </script>
 
 <template>

diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformJoin.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformJoin.vue
@@ -10,15 +10,17 @@ import { useProxyValue } from '@/common/composables/proxy-state';
 import WidgetFormDataTableCardTransformFormWrapper
     from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormWrapper.vue';
 import {
-    type DATA_TABLE_OPERATOR, JOIN_TYPE,
+    DATA_TABLE_OPERATOR, JOIN_TYPE,
 } from '@/common/modules/widgets/_constants/data-table-constant';
 import type { TransformDataTableInfo, TransformDataTableProps } from '@/common/modules/widgets/types/widget-data-table-type';
 import type { JoinOptions, JoinType } from '@/common/modules/widgets/types/widget-model';
 
 
 
 const props = defineProps<TransformDataTableProps<JoinOptions>>();
-const emit = defineEmits<{(e: 'update:operator-options', value: JoinOptions): void; }>();
+const emit = defineEmits<{(e: 'update:operator-options', value: JoinOptions): void;
+    (e: 'update:invalid', value: boolean): void;
+}>();
 
 const dataTableInfo = ref<TransformDataTableInfo>({
     dataTables: props.originData?.data_tables,
@@ -32,6 +34,11 @@ const state = reactive({
         { label: 'Outer Join', name: JOIN_TYPE.OUTER, icon: 'ic_join-outer' },
         { label: 'Inner Join', name: JOIN_TYPE.INNER, icon: 'ic_join-inner' },
     ]),
+    invalid: computed<boolean>(() => {
+        if (state.proxyOperatorOptions.data_tables.length < 2) return true;
+        if (!state.proxyOperatorOptions.data_tables.every((d) => !!d)) return true;
+        return !howInfo.value;
+    }),
 });
 
 /* Event */
@@ -46,6 +53,9 @@ watch([dataTableInfo, howInfo], ([_dataTableInfo, _howInfo]) => {
         how: _howInfo,
     };
 }, { deep: true, immediate: true });
+watch(() => state.invalid, (_invalid) => {
+    emit('update:invalid', _invalid);
+}, { immediate: true });
 </script>
 
 <template>

diff --git a/.../web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformPivotForm.vue b/.../web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformPivotForm.vue
@@ -22,15 +22,17 @@ import { useProxyValue } from '@/common/composables/proxy-state';
 import WidgetFormDataTableCardTransformFormWrapper
     from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormWrapper.vue';
 import {
-    type DATA_TABLE_OPERATOR, DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP,
+    DATA_TABLE_OPERATOR, DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP,
 } from '@/common/modules/widgets/_constants/data-table-constant';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import type { TransformDataTableInfo, TransformDataTableProps } from '@/common/modules/widgets/types/widget-data-table-type';
 import type { PivotOptions } from '@/common/modules/widgets/types/widget-model';
 
 const props = defineProps<TransformDataTableProps<PivotOptions>>();
 
-const emit = defineEmits<{(e: 'update:operator-options', value: PivotOptions): void; }>();
+const emit = defineEmits<{(e: 'update:operator-options', value: PivotOptions): void;
+    (e: 'update:invalid', value: boolean): void;
+}>();
 const widgetGenerateStore = useWidgetGenerateStore();
 const widgetGenerateState = widgetGenerateStore.state;
 
@@ -66,6 +68,14 @@ const state = reactive({
             label: key,
         }));
     }),
+    invalid: computed<boolean>(() => {
+        if (!state.proxyOperatorOptions.data_table_id) return true;
+        if (!state.proxyOperatorOptions.fields?.labels?.length) return true;
+        if (!state.proxyOperatorOptions.fields?.column) return true;
+        if (!state.proxyOperatorOptions.fields?.data) return true;
+        if (!state.proxyOperatorOptions.select && !state.proxyOperatorOptions.limit) return true;
+        return false;
+    }),
     columnFieldInvalid: computed<boolean>(() => {
         if (state.labelFieldItems.length === 1) return true;
         return false;
@@ -235,6 +245,9 @@ watch([
         order_by: _orderBy,
     };
 });
+watch(() => state.invalid, (_invalid) => {
+    emit('update:invalid', _invalid);
+}, { immediate: true });
 
 onMounted(() => {
     state.selectedValueType = props.originData.limit !== undefined ? 'auto' : 'fixed';

diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformQuery.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformQuery.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {
-    reactive, ref, watch,
+    computed, reactive, ref, watch,
 } from 'vue';
 
 import { cloneDeep } from 'lodash';
@@ -16,7 +16,7 @@ import WidgetFormDataTableCardTransformFormWrapper
 import WidgetFormDataTableGlobalVariableViewButton
     from '@/common/modules/widgets/_components/WidgetFormDataTableGlobalVariableViewButton.vue';
 import {
-    type DATA_TABLE_OPERATOR,
+    DATA_TABLE_OPERATOR,
 } from '@/common/modules/widgets/_constants/data-table-constant';
 import type { TransformDataTableInfo, TransformDataTableProps } from '@/common/modules/widgets/types/widget-data-table-type';
 import type { QueryOptions } from '@/common/modules/widgets/types/widget-model';
@@ -27,7 +27,9 @@ const CONDITION_PLACEHOLDER = '{{ Product }} == \'A\'';
 const RANDOM_KEY = Math.random();
 
 const props = defineProps<TransformDataTableProps<QueryOptions>>();
-const emit = defineEmits<{(e: 'update:operator-options', value: QueryOptions): void; }>();
+const emit = defineEmits<{(e: 'update:operator-options', value: QueryOptions): void;
+    (e: 'update:invalid', value: boolean): void;
+}>();
 
 const dataTableInfo = ref<TransformDataTableInfo>({
     dataTableId: props.originData?.data_table_id,
@@ -37,6 +39,11 @@ const conditionsInfo = ref<QueryOptions['conditions']>(cloneDeep(props.originDat
 // const operatorInfo = ref<QueryOptions['operator']>(props.originData.operator);
 const state = reactive({
     proxyOperatorOptions: useProxyValue<QueryOptions>('operator-options', props, emit),
+    invalid: computed<boolean>(() => {
+        if (!state.proxyOperatorOptions?.data_table_id) return true;
+        if (state.proxyOperatorOptions.conditions.some((condition) => !condition)) return true;
+        return false;
+    }),
     // queryOperatorItems: computed<SelectDropdownMenuItem[]>(() => [
     //     { label: 'And', name: 'AND' },
     //     { label: 'Or', name: 'OR' },
@@ -66,6 +73,9 @@ watch([dataTableInfo, conditionsInfo], ([_dataTableInfo, _conditionsInfo]) => {
         conditions: _conditionsInfo,
     };
 }, { deep: true, immediate: true });
+watch(() => state.invalid, (_invalid) => {
+    emit('update:invalid', _invalid);
+}, { immediate: true });
 </script>
 
 <template>

diff --git a/apps/web/src/common/modules/widgets/_constants/widget-field-constant.ts b/apps/web/src/common/modules/widgets/_constants/widget-field-constant.ts
@@ -5,7 +5,7 @@ export const _FORMAT_RULE_TYPE = {
     numberThreshold: 'numberThreshold',
     percentThreshold: 'percentThreshold',
     textThreshold: 'textThreshold',
-    textNumberTreshold: 'textNumberTreshold',
+    textNumberThreshold: 'textNumberThreshold',
 } as const;
 
 export const FORMAT_RULE_TYPE = {

diff --git a/...web/src/common/modules/widgets/_widget-field-value-manager/constant/validator-registry.ts b/...web/src/common/modules/widgets/_widget-field-value-manager/constant/validator-registry.ts
@@ -59,7 +59,7 @@ export const widgetValidatorRegistry: WidgetValidatorRegistry = {
         if (type === _FORMAT_RULE_TYPE.numberThreshold || type === _FORMAT_RULE_TYPE.percentThreshold) {
             return fieldValue.rules.every((d) => !!d.number && !!d.color);
         }
-        if (type === _FORMAT_RULE_TYPE.textNumberTreshold) {
+        if (type === _FORMAT_RULE_TYPE.textNumberThreshold) {
             return fieldValue.rules.every((d) => !!d.text && !!d.number && !!d.color);
         }
         if (formatRulesOptions.useField) {