From 1d5a8fc065aeaa9e4154f22da10eb897aca59ec2 Mon Sep 17 00:00:00 2001
From: Wanjin Noh <wanjin@megazone.com>
Date: Fri, 29 Nov 2024 18:25:51 +0900
Subject: [PATCH] feat(task-fields): add UnknownTaskField component and update
 validators

Signed-off-by: Wanjin Noh <wanjin@megazone.com>
---
 .../task-fields-form/TaskFieldsForm.vue       | 10 +++++----
 .../composables/use-task-field-validation.ts  |  2 +-
 .../field-templates/UnknownTaskField.vue      | 21 +++++++++++++++++++
 3 files changed, 28 insertions(+), 5 deletions(-)
 create mode 100644 apps/web/src/services/ops-flow/task-fields-form/field-templates/UnknownTaskField.vue

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
index 0fbd1c39b2..40693d579a 100644
--- 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
index 9ac87c2385..99700113d6 100644
--- 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
new file mode 100644
index 0000000000..06a394c0fe
--- /dev/null
+++ 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>