feat(task-field): add OtherTaskField interface and update validation …

…logic Signed-off-by: Wanjin Noh <[email protected]>
cloudforet-io · Nov 29, 2024 · 20bedc0 · 20bedc0
1 parent 48edc1c
commit 20bedc0
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 17 deletions.
diff --git a/apps/web/src/schema/opsflow/_types/task-field-type.ts b/apps/web/src/schema/opsflow/_types/task-field-type.ts
@@ -45,7 +45,7 @@ export interface DropdownTaskField extends BaseTaskField {
     field_type: 'DROPDOWN';
     options?: DropdownTaskFieldOptions;
 }
-interface OtherTaskField extends BaseTaskField {
+export interface OtherTaskField extends BaseTaskField {
     field_type: Exclude<TaskFieldType, 'TEXT'|'PARAGRAPH'|'DROPDOWN'>;
 }
 export type TaskField = TextTaskField | ParagraphTaskField | DropdownTaskField | OtherTaskField;
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
@@ -100,7 +100,7 @@ const data = ref<Record<string, any>>({
     field_1: 'text',
     field_2: 'paragraph',
     field_3: ['label1', 'label2'],
-    field_4: [{ key: 'a', name: 'option1' }, { key: 'b', name: 'option2' }],
+    field_4: ['1'],
     field_5: '2022-01-01',
     field_6: ['project'],
     field_7: ['provider'],

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
@@ -8,8 +8,8 @@ import type { TaskFieldFormProps } from '@/services/ops-flow/task-fields-form/ty
 
 const stringValidatorTypes: TaskFieldType[] = ['TEXT', 'PARAGRAPH'];
 const stringArrayValidatorTypes: TaskFieldType[] = ['DROPDOWN', 'USER', 'ASSET', 'PROJECT', 'PROVIDER', 'SERVICE_ACCOUNT'];
-export const useTaskFieldValidation = (props: TaskFieldFormProps<TaskField, any>) => {
-    const stringValidator: ValidatorFn<any> = (val: any): string|boolean => {
+export const useTaskFieldValidation = <TField extends TaskField, TValue>(props: TaskFieldFormProps<TField, any>) => {
+    const stringValidator: ValidatorFn<TValue> = (val): string|boolean => {
         if (val === undefined || val === null) {
             if (props.field.is_required) {
                 return 'This field is required';
@@ -25,7 +25,7 @@ export const useTaskFieldValidation = (props: TaskFieldFormProps<TaskField, any>
         return true;
     };
 
-    const stringArrayValidator: ValidatorFn<any> = (val: any): string|boolean => {
+    const stringArrayValidator: ValidatorFn<TValue> = (val): string|boolean => {
         if (val === undefined || val === null) {
             if (props.field.is_required) {
                 return 'This field is required';
@@ -53,7 +53,7 @@ export const useTaskFieldValidation = (props: TaskFieldFormProps<TaskField, any>
     };
 
 
-    const fieldValidator = useFieldValidator(props.value, (val) => {
+    const fieldValidator = useFieldValidator<TValue>(props.value, (val) => {
         if (stringValidatorTypes.includes(props.field.field_type)) {
             return stringValidator(val);
         }

diff --git a/apps/web/src/services/ops-flow/task-fields-form/field-templates/DropdownTaskField.vue b/apps/web/src/services/ops-flow/task-fields-form/field-templates/DropdownTaskField.vue
@@ -1,7 +1,69 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 
+import {
+    PFieldGroup, PSelectDropdown, getTextHighlightRegex,
+} from '@cloudforet/mirinae';
+import type { AutocompleteHandler, SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
+
+import type { DropdownTaskField } from '@/schema/opsflow/_types/task-field-type';
+
+import { useTaskFieldValidation } from '@/services/ops-flow/task-fields-form/composables/use-task-field-validation';
+import type { TaskFieldFormProps } from '@/services/ops-flow/task-fields-form/types/task-field-form-type';
+
+const props = defineProps<TaskFieldFormProps<DropdownTaskField, string[]>>();
+
+const emit = defineEmits<{(event: 'update:value', value: string[]): void;
+}>();
+
+const {
+    value, setValue,
+    isInvalid, invalidText,
+} = useTaskFieldValidation<DropdownTaskField, string[]>(props);
+
+interface DropdownItem extends SelectDropdownMenuItem {
+    label: string;
+}
+
+const allItems = computed<DropdownItem[]>(() => {
+    if (!props.field.options?.enums) return [];
+    return props.field.options.enums.map((item) => ({
+        name: item.key,
+        label: item.name,
+    }));
+});
+
+const selectedItems = computed<DropdownItem[]>(() => value.value.map((item) => ({
+    name: item,
+    label: allItems.value.find((i) => i.name === item)?.label ?? item,
+})));
+const dropdownItemsHandler: AutocompleteHandler = async (keyword: string, pageStart = 1, pageLimit = 10) => {
+    const filteredItems = allItems.value.filter((item) => getTextHighlightRegex(keyword).test(item.label));
+    const _totalCount = pageStart - 1 + Number(pageLimit);
+    const _slicedResults = filteredItems.slice(pageStart - 1, _totalCount);
+    return {
+        results: _slicedResults,
+        more: _totalCount < filteredItems.length,
+    };
+};
+const handleUpdate = (val: DropdownItem[]) => {
+    setValue(val.map((item) => item.name));
+    emit('update:value', val.map((item) => item.name));
+};
 </script>
 
 <template>
-    <div>DropdownTaskFieldForm</div>
+    <p-field-group :label="field.name"
+                   :required="field.is_required"
+                   :invalid="isInvalid"
+                   :invalid-text="invalidText"
+    >
+        <p-select-dropdown show-select-marker
+                           :selected="selectedItems"
+                           :handler="dropdownItemsHandler"
+                           is-filterable
+                           show-delete-all-button
+                           @update:selected="handleUpdate"
+        />
+    </p-field-group>
 </template>
diff --git a/apps/web/src/services/ops-flow/task-fields-form/field-templates/LabelsTaskField.vue b/apps/web/src/services/ops-flow/task-fields-form/field-templates/LabelsTaskField.vue
@@ -3,22 +3,22 @@ import {
     PFieldGroup,
 } from '@cloudforet/mirinae';
 
-import type { TextTaskField } from '@/schema/opsflow/_types/task-field-type';
+import type { OtherTaskField } from '@/schema/opsflow/_types/task-field-type';
 
 import LabelsInput from '@/common/components/inputs/LabelsInput.vue';
 
 import { useTaskFieldValidation } from '@/services/ops-flow/task-fields-form/composables/use-task-field-validation';
 import type { TaskFieldFormProps } from '@/services/ops-flow/task-fields-form/types/task-field-form-type';
 
-const props = defineProps<TaskFieldFormProps<TextTaskField, string[]>>();
+const props = defineProps<TaskFieldFormProps<OtherTaskField, string[]>>();
 
 const emit = defineEmits<{(event: 'update:value', value: string[]): void;
 }>();
 
 const {
     value, setValue,
     isInvalid, invalidText,
-} = useTaskFieldValidation(props);
+} = useTaskFieldValidation<OtherTaskField, string[]>(props);
 
 const handleUpdate = (val: string[]) => {
     setValue(val);

diff --git a/apps/web/src/services/ops-flow/task-fields-form/field-templates/ParagraphTaskField.vue b/apps/web/src/services/ops-flow/task-fields-form/field-templates/ParagraphTaskField.vue
@@ -18,7 +18,7 @@ const emit = defineEmits<{(event: 'update:value', value: string): void;
 const {
     value, setValue,
     isInvalid, invalidText,
-} = useTaskFieldValidation(props);
+} = useTaskFieldValidation<ParagraphTaskField, string>(props);
 
 const handleUpdate = (val: string) => {
     setValue(val);

diff --git a/apps/web/src/services/ops-flow/task-fields-form/field-templates/ProjectTaskField.vue b/apps/web/src/services/ops-flow/task-fields-form/field-templates/ProjectTaskField.vue
@@ -3,22 +3,22 @@ import {
     PFieldGroup,
 } from '@cloudforet/mirinae';
 
-import type { TextTaskField } from '@/schema/opsflow/_types/task-field-type';
+import type { OtherTaskField } from '@/schema/opsflow/_types/task-field-type';
 
 import ProjectSelectDropdown from '@/common/modules/project/ProjectSelectDropdown.vue';
 
 import { useTaskFieldValidation } from '@/services/ops-flow/task-fields-form/composables/use-task-field-validation';
 import type { TaskFieldFormProps } from '@/services/ops-flow/task-fields-form/types/task-field-form-type';
 
-const props = defineProps<TaskFieldFormProps<TextTaskField, string[]>>();
+const props = defineProps<TaskFieldFormProps<OtherTaskField, string[]>>();
 
 const emit = defineEmits<{(event: 'update:value', value: string[]): void;
 }>();
 
 const {
     value, setValue,
     isInvalid, invalidText,
-} = useTaskFieldValidation(props);
+} = useTaskFieldValidation<OtherTaskField, string[]>(props);
 
 const handleUpdate = (val: string[]) => {
     setValue(val);

diff --git a/apps/web/src/services/ops-flow/task-fields-form/field-templates/UserTaskField.vue b/apps/web/src/services/ops-flow/task-fields-form/field-templates/UserTaskField.vue
@@ -3,22 +3,22 @@ import {
     PFieldGroup,
 } from '@cloudforet/mirinae';
 
-import type { TextTaskField } from '@/schema/opsflow/_types/task-field-type';
+import type { OtherTaskField } from '@/schema/opsflow/_types/task-field-type';
 
 import UserSelectDropdown from '@/common/modules/user/UserSelectDropdown.vue';
 
 import { useTaskFieldValidation } from '@/services/ops-flow/task-fields-form/composables/use-task-field-validation';
 import type { TaskFieldFormProps } from '@/services/ops-flow/task-fields-form/types/task-field-form-type';
 
-const props = defineProps<TaskFieldFormProps<TextTaskField, string[]>>();
+const props = defineProps<TaskFieldFormProps<OtherTaskField, string[]>>();
 
 const emit = defineEmits<{(event: 'update:value', value: string[]): void;
 }>();
 
 const {
     value, setValue,
     isInvalid, invalidText,
-} = useTaskFieldValidation(props);
+} = useTaskFieldValidation<OtherTaskField, string[]>(props);
 
 const handleUpdate = (val: string[]) => {
     setValue(val);