feat: update validation code of widget fields

Signed-off-by: yuda <[email protected]>
cloudforet-io · Aug 30, 2024 · 66dbbe0 · 66dbbe0
1 parent 3a017de
commit 66dbbe0
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 18 deletions.
diff --git a/apps/web/src/common/modules/widgets/_widget-fields/WidgetFieldAdvancedFormatRules.vue b/apps/web/src/common/modules/widgets/_widget-fields/WidgetFieldAdvancedFormatRules.vue
@@ -37,7 +37,7 @@ const state = reactive({
     proxyValue: useProxyValue<AdvancedFormatRulesValue>('value', props, emit),
     baseColor: computed<string>(() => state.proxyValue?.baseColor ?? props.widgetFieldSchema?.options?.baseColor ?? DEFAULT_BASE_COLOR),
     type: computed<AdvancedFormatRulesType>(() => props.widgetFieldSchema?.options?.formatRulesType as AdvancedFormatRulesType),
-    isAllValid: computed<boolean>(() => {
+    isValid: computed<boolean>(() => {
         if (!state.proxyValue) return false;
         if (state.type === ADVANCED_FORMAT_RULE_TYPE.textThreshold) {
             return state.proxyValue.value.every((d) => !!d.text && !!d.threshold && !!d.color);
@@ -77,7 +77,7 @@ const handleUpdateField = (val: string) => {
 };
 
 /* Watcher */
-watch(() => state.isAllValid, (isValid) => {
+watch(() => state.isValid, (isValid) => {
     emit('update:is-valid', isValid);
 }, { immediate: true });
 watch(() => labelsMenuItem.value, (menuItem) => {

diff --git a/apps/web/src/common/modules/widgets/_widget-fields/WidgetFieldColorSchema.vue b/apps/web/src/common/modules/widgets/_widget-fields/WidgetFieldColorSchema.vue
@@ -38,6 +38,7 @@ const state = reactive({
         name: key,
         label: key,
     }))),
+    isValid: computed<boolean>(() => !!state.proxyValue?.colorValue?.length && !!state.proxyValue?.colorName),
 });
 
 const handleClickColor = (color: ColorSchemaMenuItem) => {
@@ -49,8 +50,10 @@ const handleClickColor = (color: ColorSchemaMenuItem) => {
     };
 };
 
-watch(() => state.proxyValue, (value) => {
-    emit('update:is-valid', value?.colorName !== undefined);
+watch(() => state.proxyValue, () => {
+}, { immediate: true });
+watch(() => state.isValid, (isValid) => {
+    emit('update:is-valid', isValid);
 }, { immediate: true });
 
 const initValue = () => {

diff --git a/apps/web/src/common/modules/widgets/_widget-fields/WidgetFieldDataField.vue b/apps/web/src/common/modules/widgets/_widget-fields/WidgetFieldDataField.vue
@@ -33,8 +33,8 @@ const state = reactive({
     selectedItem: undefined as undefined | MenuItem[] | string,
     isValid: computed<boolean>(() => {
         if (state.menuItems.length === 0) return false;
-        if (Array.isArray(state.selectedItem)) {
-            return !!state.selectedItem.length;
+        if (props.widgetFieldSchema?.options?.multiSelectable) {
+            return Array.isArray(state.selectedItem) && !!state.selectedItem?.length;
         }
         return !!state.selectedItem;
     }),

diff --git a/apps/web/src/common/modules/widgets/_widget-fields/WidgetFieldGroupBy.vue b/apps/web/src/common/modules/widgets/_widget-fields/WidgetFieldGroupBy.vue
@@ -54,7 +54,9 @@ const state = reactive({
     isValid: computed<boolean>(() => {
         if (!state.hideCount && !state.proxyValue?.count) return false;
         if (state.multiselectable && !state.selectedItem?.length) return false;
-        if (state.fixedValue) return state.selectedItem?.[0]?.label === state.fixedValue || state.selectedItem === state.fixedValue;
+        if (state.fixedValue) {
+            return state.selectedItem.map((d) => d.name).include(state.fixedValue) || state.selectedItem === state.fixedValue;
+        }
         return !!state.selectedItem;
     }),
     max: computed(() => props.widgetFieldSchema?.options?.max),
@@ -88,7 +90,7 @@ const handleUpdateCount = (val: number) => {
 /* Watcher */
 watch(() => state.isValid, (isValid) => {
     emit('update:is-valid', isValid);
-});
+}, { immediate: true });
 
 const convertToMenuItem = (data?: string[]) => data?.map((d) => ({
     name: d,

diff --git a/apps/web/src/common/modules/widgets/_widget-fields/WidgetFieldLegend.vue b/apps/web/src/common/modules/widgets/_widget-fields/WidgetFieldLegend.vue
@@ -12,8 +12,7 @@ import type { LegendOptions, WidgetFieldComponentProps, WidgetFieldComponentEmit
 import type { LegendValue } from '@/common/modules/widgets/types/widget-field-value-type';
 
 
-const emit = defineEmits<WidgetFieldComponentEmit<boolean|undefined>>();
-
+const emit = defineEmits<WidgetFieldComponentEmit<LegendValue>>();
 const props = withDefaults(defineProps<WidgetFieldComponentProps<LegendOptions, LegendValue>>(), {
     widgetFieldSchema: () => ({
         options: {

diff --git a/apps/web/src/common/modules/widgets/_widget-fields/WidgetFieldMax.vue b/apps/web/src/common/modules/widgets/_widget-fields/WidgetFieldMax.vue
@@ -1,5 +1,7 @@
 <script lang="ts" setup>
-import { onMounted, reactive } from 'vue';
+import {
+    computed, onMounted, reactive, watch,
+} from 'vue';
 
 import { PFieldGroup, PTextInput } from '@cloudforet/mirinae';
 
@@ -8,7 +10,6 @@ import type { MaxOptions, WidgetFieldComponentProps, WidgetFieldComponentEmit }
 
 
 const emit = defineEmits<WidgetFieldComponentEmit<number>>();
-
 const props = withDefaults(defineProps<WidgetFieldComponentProps<MaxOptions, number>>(), {
     widgetFieldSchema: () => ({
         options: {
@@ -19,13 +20,18 @@ const props = withDefaults(defineProps<WidgetFieldComponentProps<MaxOptions, num
 
 const state = reactive({
     proxyValue: useProxyValue<number>('value', props, emit),
+    isValid: computed<boolean>(() => typeof state.proxyValue === 'number'),
 });
 
 const handleUpdateValue = (value: string|'') => {
     const parsedValue = value === '' ? 0 : parseInt(value);
     state.proxyValue = (parsedValue < 0) ? 0 : parsedValue;
 };
 
+watch(() => state.isValid, (isValid) => {
+    emit('update:is-valid', isValid);
+}, { immediate: true });
+
 onMounted(() => {
     emit('update:is-valid', true);
     state.proxyValue = props.value ?? props.widgetFieldSchema.options?.default ?? 0;

diff --git a/apps/web/src/common/modules/widgets/_widget-fields/WidgetFieldMin.vue b/apps/web/src/common/modules/widgets/_widget-fields/WidgetFieldMin.vue
@@ -1,5 +1,7 @@
 <script lang="ts" setup>
-import { onMounted, reactive } from 'vue';
+import {
+    computed, onMounted, reactive, watch,
+} from 'vue';
 
 import { PFieldGroup, PTextInput } from '@cloudforet/mirinae';
 
@@ -12,7 +14,6 @@ import type {
 
 
 const emit = defineEmits<WidgetFieldComponentEmit<number>>();
-
 const props = withDefaults(defineProps<WidgetFieldComponentProps<MinOptions, number>>(), {
     widgetFieldSchema: () => ({
         options: {
@@ -23,13 +24,18 @@ const props = withDefaults(defineProps<WidgetFieldComponentProps<MinOptions, num
 
 const state = reactive({
     proxyValue: useProxyValue<number>('value', props, emit),
+    isValid: computed<boolean>(() => typeof state.proxyValue === 'number'),
 });
 
 const handleUpdateValue = (value: string|'') => {
     const parsedValue = value === '' ? 0 : parseInt(value);
     state.proxyValue = (parsedValue < 0) ? 0 : parsedValue;
 };
 
+watch(() => state.isValid, (isValid) => {
+    emit('update:is-valid', isValid);
+}, { immediate: true });
+
 onMounted(() => {
     emit('update:is-valid', true);
     state.proxyValue = props.value ?? props.widgetFieldSchema.options?.default ?? 0;

diff --git a/apps/web/src/common/modules/widgets/_widget-fields/WidgetFieldTableDataField.vue b/apps/web/src/common/modules/widgets/_widget-fields/WidgetFieldTableDataField.vue
@@ -88,9 +88,11 @@ const state = reactive({
     }))),
     isValid: computed<boolean>(() => {
         if (state.menuItems.length === 0) return false;
-        if (state.proxyValue.fieldType === 'dynamicField' && !state.proxyValue.dynamicFieldValue?.length) return false;
-        if (Array.isArray(state.selectedItem)) {
-            return !!state.selectedItem.length;
+        if (state.proxyValue.fieldType === 'dynamicField') {
+            return !!state.proxyValue?.criteria && !!state.proxyValue.value;
+        }
+        if (state.proxyValue.fieldType === 'staticField') {
+            return !!state.proxyValue?.value?.length;
         }
         return !!state.selectedItem;
     }),
@@ -198,7 +200,7 @@ const handleClearDynamicFieldsSelection = () => {
 /* Watcher */
 watch(() => state.isValid, (isValid) => {
     emit('update:is-valid', isValid);
-});
+}, { immediate: true });
 const convertToMenuItem = (data?: string[]) => data?.map((d) => ({
     name: d,
     label: d,