feat(task-fields): add UnknownTaskField component and update validators

Signed-off-by: Wanjin Noh <[email protected]>
cloudforet-io · Nov 29, 2024 · 1d5a8fc · 1d5a8fc
1 parent 2d3f63e
commit 1d5a8fc
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 5 deletions.
diff --git a/apps/web/src/services/ops-flow/task-fields-form/TaskFieldsForm.vue b/apps/web/src/services/ops-flow/task-fields-form/TaskFieldsForm.vue
@@ -13,11 +13,13 @@ const COMPONENT_MAP: Partial<Record<TaskFieldType, ReturnType<typeof defineAsync
     DROPDOWN: defineAsyncComponent(() => import('@/services/ops-flow/task-fields-form/field-templates/DropdownTaskField.vue')),
     DATE: defineAsyncComponent(() => import('@/services/ops-flow/task-fields-form/field-templates/DateTaskField.vue')),
     USER: defineAsyncComponent(() => import('@/services/ops-flow/task-fields-form/field-templates/UserTaskField.vue')),
-    ASSET: defineAsyncComponent(() => import('@/services/ops-flow/task-fields-form/field-templates/AssetTaskField.vue')),
     PROJECT: defineAsyncComponent(() => import('@/services/ops-flow/task-fields-form/field-templates/ProjectTaskField.vue')),
-    PROVIDER: defineAsyncComponent(() => import('@/services/ops-flow/task-fields-form/field-templates/ProviderTaskField.vue')),
-    SERVICE_ACCOUNT: defineAsyncComponent(() => import('@/services/ops-flow/task-fields-form/field-templates/ServiceAccountTaskField.vue')),
+    // ASSET: defineAsyncComponent(() => import('@/services/ops-flow/task-fields-form/field-templates/AssetTaskField.vue')),
+    // PROVIDER: defineAsyncComponent(() => import('@/services/ops-flow/task-fields-form/field-templates/ProviderTaskField.vue')),
+    // SERVICE_ACCOUNT: defineAsyncComponent(() => import('@/services/ops-flow/task-fields-form/field-templates/ServiceAccountTaskField.vue')),
 };
+const UnknownTaskField = defineAsyncComponent(() => import('@/services/ops-flow/task-fields-form/field-templates/UnknownTaskField.vue'));
+
 const fields = ref<TaskField[]>([
     {
         field_id: 'field_1',
@@ -113,7 +115,7 @@ const data = ref<Record<string, any>>({
 
 <template>
     <div class="flex flex-col gap-4">
-        <component :is="COMPONENT_MAP[field.field_type]"
+        <component :is="COMPONENT_MAP[field.field_type] ?? UnknownTaskField"
                    v-for="field in fields"
                    :key="field.field_id"
                    :field="field"

diff --git a/apps/web/src/services/ops-flow/task-fields-form/composables/use-task-field-validation.ts b/apps/web/src/services/ops-flow/task-fields-form/composables/use-task-field-validation.ts
@@ -7,7 +7,7 @@ import type { TaskFieldFormProps } from '@/services/ops-flow/task-fields-form/ty
 
 
 const stringValidatorTypes: TaskFieldType[] = ['TEXT', 'PARAGRAPH', 'DATE'];
-const stringArrayValidatorTypes: TaskFieldType[] = ['DROPDOWN', 'USER', 'ASSET', 'PROJECT', 'PROVIDER', 'SERVICE_ACCOUNT'];
+const stringArrayValidatorTypes: TaskFieldType[] = ['DROPDOWN', 'USER', 'PROJECT']; // , 'PROVIDER', 'SERVICE_ACCOUNT', 'ASSET'];
 export const useTaskFieldValidation = <TField extends TaskField, TValue>(props: TaskFieldFormProps<TField, any>) => {
     const stringValidator: ValidatorFn<TValue> = (val): string|boolean => {
         if (val === undefined || val === null) {

diff --git a/apps/web/src/services/ops-flow/task-fields-form/field-templates/UnknownTaskField.vue b/apps/web/src/services/ops-flow/task-fields-form/field-templates/UnknownTaskField.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import {
+    PFieldGroup,
+} from '@cloudforet/mirinae';
+
+import type { TaskField } from '@/schema/opsflow/_types/task-field-type';
+
+import type { TaskFieldFormProps } from '@/services/ops-flow/task-fields-form/types/task-field-form-type';
+
+const props = defineProps<TaskFieldFormProps<TaskField, any>>();
+
+
+</script>
+
+<template>
+    <p-field-group :label="props.field.name"
+                   :required="props.field.is_required"
+                   :invalid="true"
+                   :invalid-text="`${props.field.field_type} is not supported`"
+    />
+</template>