refactor: split concat transform into separate components (#5224)

* refactor: split concat transform into separate components Signed-off-by: yuda <[email protected]> * chore: delete console.log Signed-off-by: yuda <[email protected]> * chore: fix watcher Signed-off-by: yuda <[email protected]> * refactor: split join transform into separate components Signed-off-by: yuda <[email protected]> * refactor: refactor EVAL form Signed-off-by: yuda <[email protected]> * refactor: refactor QUERY form Signed-off-by: yuda <[email protected]> * refactor: refactor ADD_LABELS form Signed-off-by: yuda <[email protected]> * refactor: update `createUnsavedTransformDataTable` Signed-off-by: yuda <[email protected]> * refactor: fix dt update validator and reset function Signed-off-by: yuda <[email protected]> * chore: update language Signed-off-by: yuda <[email protected]> * chore: update component name Signed-off-by: yuda <[email protected]> * fix: fix minor bugs Signed-off-by: yuda <[email protected]> --------- Signed-off-by: yuda <[email protected]>
cloudforet-io · Dec 17, 2024 · 25072f5 · 25072f5
1 parent 26c5570
commit 25072f5
Show file tree

Hide file tree

Showing 14 changed files with 596 additions and 631 deletions.
diff --git a/...rmDataTableCardTransformFormAddLabels.vue → ...etFormDataTableCardTransformAddLabels.vue b/...rmDataTableCardTransformFormAddLabels.vue → ...etFormDataTableCardTransformAddLabels.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { computed, reactive } from 'vue';
+import {
+    onMounted, reactive, ref, watch,
+} from 'vue';
 import type { TranslateResult } from 'vue-i18n';
 
 import { random } from 'lodash';
@@ -11,64 +13,95 @@ import {
 import { i18n } from '@/translations';
 
 import { useProxyValue } from '@/common/composables/proxy-state';
-import type { AdditionalLabel } from '@/common/modules/widgets/types/widget-data-table-type';
+import WidgetFormDataTableCardTransformFormWrapper
+    from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormWrapper.vue';
+import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
+import type { TransformDataTableProps, TransformDataTableInfo } from '@/common/modules/widgets/types/widget-data-table-type';
+import type { AddLabelsOptions } from '@/common/modules/widgets/types/widget-model';
 
 
 
-const DATE_FIELD = 'Date';
-const COMPONENT_RANDOM_KEY = `add-labels-${random()}`;
-interface Props {
-    labels: (AdditionalLabel[]|string[]);
+interface AdditionalLabel {
+    name: string;
+    value: string;
 }
 
-const props = defineProps<Props>();
+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:labels'; value: AdditionalLabel[]}>();
+const dataTableInfo = ref<TransformDataTableInfo>({
+    dataTableId: props.originData?.data_table_id,
+});
+const labelsInfo = ref<AddLabelsOptions['labels']>(props.originData.labels);
 const state = reactive({
-    proxyLabels: useProxyValue<AdditionalLabel[]>('labels', props, emit),
-    groupByKeys: computed<string[]>(() => []),
+    proxyOperatorOptions: useProxyValue<AddLabelsOptions>('operator-options', props, emit),
+    refinedLabels: [] as AdditionalLabel[],
+    // groupByKeys: computed<string[]>(() => []),
 });
 
 /* Helper */
 const getInvalidText = (idx: number): TranslateResult|undefined => {
-    const targetName = state.proxyLabels[idx]?.name;
+    const targetName = state.refinedLabels[idx]?.name;
     if (!targetName) {
         return undefined;
     }
-    if (state.groupByKeys.includes(targetName)) {
-        return i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.ADD_LABELS.GROUP_BY_KEY_INVALID');
-    }
+    // if (state.groupByKeys.includes(targetName)) {
+    //     return i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.ADD_LABELS.GROUP_BY_KEY_INVALID');
+    // }
     if (targetName === DATE_FIELD) {
         return i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.ADD_LABELS.DATE_FIELD_INVALID');
     }
-    if (state.proxyLabels.some((label, lIdx) => lIdx !== idx && label.name === targetName)) {
+    if (state.refinedLabels.some((label, lIdx) => lIdx !== idx && label.name === targetName)) {
         return i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.ADD_LABELS.DUPLICATED_LABEL');
     }
     return undefined;
 };
 
 /* Events */
 const handleClickAddLabel = () => {
-    state.proxyLabels = [
-        ...state.proxyLabels,
+    state.refinedLabels = [
+        ...state.refinedLabels,
         {
             name: '',
             value: '',
         },
     ];
 };
 const handleRemoveLabel = (idx: number) => {
-    state.proxyLabels = state.proxyLabels.filter((_, index) => index !== idx);
+    state.refinedLabels = state.refinedLabels.filter((_, index) => index !== idx);
 };
+
+/* Watcher */
+watch(() => state.refinedLabels, (_refinedLabels) => {
+    state.proxyOperatorOptions = {
+        ...state.proxyOperatorOptions,
+        labels: _refinedLabels.reduce((acc, label) => {
+            if (label.name && label.value) {
+                acc[label.name] = label.value;
+            }
+            return acc;
+        }, {}),
+    };
+}, { deep: true });
+
+onMounted(() => {
+    state.refinedLabels = Object.entries(labelsInfo.value).map(([name, value]) => ({ name, value }));
+});
 </script>
 
 <template>
-    <div class="widget-form-data-table-card-transform-form-add-labels">
+    <widget-form-data-table-card-transform-form-wrapper :data-table-id="props.baseDataTableId"
+                                                        :operator="DATA_TABLE_OPERATOR.ADD_LABELS"
+                                                        :data-table-info.sync="dataTableInfo"
+                                                        class="widget-form-data-table-card-transform-add-labels"
+    >
         <p-field-group :label="$t('COMMON.WIDGETS.DATA_TABLE.FORM.ADDITIONAL_LABELS')"
                        required
         >
             <div class="additional-labels-wrapper">
-                <div v-if="state.proxyLabels.length"
+                <div v-if="state.refinedLabels.length"
                      class="field-title-wrapper"
                 >
                     <p-field-title class="field-title"
@@ -84,7 +117,7 @@ const handleRemoveLabel = (idx: number) => {
                                    inline
                     />
                 </div>
-                <div v-for="(labelInfo, idx) in state.proxyLabels"
+                <div v-for="(labelInfo, idx) in state.refinedLabels"
                      :key="`${COMPONENT_RANDOM_KEY}-${idx}`"
                      class="label-wrapper"
                 >
@@ -99,7 +132,7 @@ const handleRemoveLabel = (idx: number) => {
                         />
                         <p-icon-button name="ic_delete"
                                        size="sm"
-                                       :disabled="state.proxyLabels.length === 1"
+                                       :disabled="state.refinedLabels.length === 1"
                                        @click="handleRemoveLabel(idx)"
                         />
                     </div>
@@ -118,11 +151,11 @@ const handleRemoveLabel = (idx: number) => {
                 </p-button>
             </div>
         </p-field-group>
-    </div>
+    </widget-form-data-table-card-transform-form-wrapper>
 </template>
 
 <style scoped lang="postcss">
-.widget-form-data-table-card-transform-form-add-labels {
+.widget-form-data-table-card-transform-add-labels {
     @apply flex flex-col gap-2;
 
     .additional-labels-wrapper {

diff --git a/...eb/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformConcatenate.vue b/...eb/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformConcatenate.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import {
+    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,
+} 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 dataTableInfo = ref<TransformDataTableInfo>({
+    dataTables: props.originData?.data_tables,
+});
+const state = reactive({
+    proxyOperatorOptions: useProxyValue<ConcatOptions>('operator-options', props, emit),
+});
+
+// Update operator options
+watch(dataTableInfo, (_dataTableInfo) => {
+    state.proxyOperatorOptions = {
+        data_tables: _dataTableInfo.dataTables || [],
+    };
+}, { deep: true, 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>
+</template>