[wip] userProfile - verifyForm

SHELTER-ZONE · Nov 1, 2023 · 9ed5d46 · 9ed5d46
1 parent e6f6403
commit 9ed5d46
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 52 deletions.
diff --git a/src/views/RegisterProfile/components/VerifyForm.vue b/src/views/RegisterProfile/components/VerifyForm.vue
@@ -1,11 +1,10 @@
 <template>
   <n-form ref="formRef" class="verify-form">
-    <div class="grid grid-cols-2 gap-30px">
-      <n-form-item label="避難者 ID" path="name">
-        <n-input />
-      </n-form-item>
-      <n-form-item label="來源" path="name">
-        <n-select :options="values(fromSourcesConfig)" />
+    <div class="grid grid-cols-2 gap-x-20px">
+      <n-form-item v-for="field in fields" :path="field.key" :key="field.key" :label="field.label">
+        <Component :is="get(fieldTypeComponent, field.type)" :disabled="field.disabled" :placeholder="field.placeholder"
+          v-model:value="formData[field.key]" :options="field.options" :filterable="field.filterable"
+          :clearable="field.clearable || true" />
       </n-form-item>
     </div>
 
@@ -14,20 +13,50 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
-import { NForm, NFormItem, NInput, NSelect, NButton } from 'naive-ui'
+import { reactive, ref, computed } from 'vue'
+import { NForm, NFormItem, NButton } from 'naive-ui'
 import { useOauthStore } from '@/stores/oauth'
 import { fromSourcesConfig } from '@/configs/verifyForm'
 import { Tag } from '@vicons/carbon'
-import { values } from 'lodash-es'
+import countries from '@/configs/countries'
+import { useForm } from '@/use/useForm'
+import { values, get } from 'lodash-es'
 
 const formRef = ref<null>()
 
+const { fieldTypeComponent, verifyForm } = useForm()
+
 const { user } = useOauthStore()
 
 const formData = reactive({
   name: null,
+  from: null,
+  country: null,
 })
+
+
+const fields = computed(() => [
+  {
+    label: '避難者 ID',
+    key: 'name',
+    type: 'text',
+  },
+  {
+    label: '來源',
+    key: 'from',
+    type: 'select',
+    placeholder: '選擇來源',
+    options: values(fromSourcesConfig)
+  },
+  {
+    label: '地區',
+    key: 'country',
+    type: 'select',
+    filterable: true,
+    placeholder: '搜尋/選擇地區',
+    options: countries.map((country) => ({ label: country, value: country })),
+  },
+])
 </script>
 
 <style scoped lang="postcss">

diff --git a/src/views/Verify/SZVerifyForm.vue b/src/views/Verify/SZVerifyForm.vue
@@ -1,42 +1,21 @@
 <template>
   <div class="sz-verify-form">
     <section v-show="!registering">
-      <n-form
-        ref="formRef"
-        :model="formData"
-        :rules="formRules"
-        class="flex flex-col gap-[20px]"
-      >
+      <n-form ref="formRef" :model="formData" :rules="formRules" class="flex flex-col gap-[20px]">
         <section>
           <SZBlockContainer>
-            <n-form-item
-              v-for="field in fields"
-              :path="field.key"
-              :key="field.key"
-              :label="field.label"
-            >
-              <Component
-                :is="get(fieldTypeComponent, field.type)"
-                :disabled="field.disabled"
-                :placeholder="field.placeholder"
-                v-model:value="formData[field.key as keyof SZVerifyFormDataStruc]"
-                :options="field.options"
-                :filterable="field.filterable"
-                :clearable="field.clearable || true"
-              />
+            <n-form-item v-for="field in fields" :path="field.key" :key="field.key" :label="field.label">
+              <Component :is="get(fieldTypeComponent, field.type)" :disabled="field.disabled"
+                :placeholder="field.placeholder" v-model:value="formData[field.key as keyof SZVerifyFormDataStruc]"
+                :options="field.options" :filterable="field.filterable" :clearable="field.clearable || true" />
             </n-form-item>
           </SZBlockContainer>
         </section>
 
         <section>
           <n-form-item path="roles">
-            <CheckBoxArea
-              class="w-full"
-              v-model:value="formData.roles"
-              title="身份組"
-              titlePosition="center"
-              :options="szRoleOptions"
-            />
+            <CheckBoxArea class="w-full" v-model:value="formData.roles" title="身份組" titlePosition="center"
+              :options="szRoleOptions" />
           </n-form-item>
         </section>
 
@@ -45,25 +24,14 @@
         </section>
 
         <section>
-          <n-button
-            block
-            secondary
-            type="primary"
-            :disabled="!agreeTerm"
-            @click="onVerify"
-            size="large"
-          >
+          <n-button block secondary type="primary" :disabled="!agreeTerm" @click="onVerify" size="large">
             <p class="font-bold tracking-[1px]">Verify</p>
           </n-button>
         </section>
       </n-form>
     </section>
 
-    <ProcessingRegister
-      v-if="registering"
-      :formData="formData"
-      @close="registering = false"
-    />
+    <ProcessingRegister v-if="registering" :formData="formData" @close="registering = false" />
   </div>
 </template>
 
@@ -83,7 +51,7 @@ import { SZBlockContainer } from '@shelter-zone/shelter-ui'
 // import HCaptcha from '@/components/HCaptcha/HCaptcha.vue'
 // config
 import countries from '@/configs/countries'
-import fromSources from '@/configs/fromSources'
+import { fromSourcesConfig } from '@/configs/verifyForm'
 // types
 import type { FormInst } from 'naive-ui'
 import type { SZVerifyFormDataStruc, SZVerifyFormField } from './types'
@@ -125,7 +93,7 @@ const fields = ref<SZVerifyFormField[]>([
     key: 'from',
     type: 'select',
     placeholder: '選擇來源',
-    options: fromSources,
+    options: fromSourcesConfig,
   },
 ])