feat(date-task-field): add date validation and datetime picker component

Signed-off-by: Wanjin Noh <[email protected]>

apps/web/src/services/ops-flow/task-fields-form/composables/use-task-field-validation.ts

@@ -6,7 +6,7 @@ import { useFieldValidator } from '@/common/composables/form-validator';
 import type { TaskFieldFormProps } from '@/services/ops-flow/task-fields-form/types/task-field-form-type';
 
 
-const stringValidatorTypes: TaskFieldType[] = ['TEXT', 'PARAGRAPH'];
+const stringValidatorTypes: TaskFieldType[] = ['TEXT', 'PARAGRAPH', 'DATE'];
 const stringArrayValidatorTypes: TaskFieldType[] = ['DROPDOWN', 'USER', 'ASSET', 'PROJECT', 'PROVIDER', 'SERVICE_ACCOUNT'];
 export const useTaskFieldValidation = <TField extends TaskField, TValue>(props: TaskFieldFormProps<TField, any>) => {
     const stringValidator: ValidatorFn<TValue> = (val): string|boolean => {

apps/web/src/services/ops-flow/task-fields-form/field-templates/DateTaskField.vue

@@ -1,7 +1,42 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 
+import {
+    PFieldGroup, PDatetimePicker,
+} from '@cloudforet/mirinae';
+
+import type { OtherTaskField } 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<OtherTaskField, string>>();
+
+const emit = defineEmits<{(event: 'update:value', value: string): void;
+}>();
+
+const {
+    value, setValue,
+    isInvalid, invalidText,
+} = useTaskFieldValidation<OtherTaskField, string>(props);
+
+const selectedDates = computed(() => (value ? [value] : []));
+const handleUpdate = (val: string[]) => {
+    setValue(val[0] ?? '');
+    emit('update:value', val[0] ?? '');
+};
 </script>
 
 <template>
-    <div>DateTaskFieldForm</div>
+    <p-field-group :label="field.name"
+                   :required="field.is_required"
+                   :invalid="isInvalid"
+                   :invalid-text="invalidText"
+    >
+        <p-datetime-picker class="datetime-picker"
+                           :selected-dates="selectedDates"
+                           :invalid="isInvalid"
+                           @update:selected-dates="handleUpdate"
+        />
+    </p-field-group>
 </template>