feat: :sparkles: feat (autocadastro) adiciona campo de cracha

adicionado campo de cracha no autocadastro da landingpage

fase:dev | origin:escopo

app/composables/useRegisterApi.ts

@@ -1,10 +1,20 @@
 interface RegisterPayload {
   name: string
   cpf: string
+  registration: string
   email: string
   phone: string
-  position_label: string
-  sector_label: string
+  position_id: number | null
+  sector_id: number | null
+}
+
+export interface SelectOption {
+  id: number
+  name: string
+}
+
+interface ApiResponse<T> {
+  payload: T
 }
 
 export const useRegisterApi = () => {
@@ -17,5 +27,16 @@ export const useRegisterApi = () => {
     })
   }
 
-  return { registerLandingUser }
+  const { data: positionsData } = useAsyncData('public-positions', () =>
+    $fetch<ApiResponse<SelectOption[]>>(`${apiUrl}/api/public/positions`).catch(() => null),
+  )
+
+  const { data: sectorsData } = useAsyncData('public-sectors', () =>
+    $fetch<ApiResponse<SelectOption[]>>(`${apiUrl}/api/public/sectors`).catch(() => null),
+  )
+
+  const positions = computed<SelectOption[]>(() => positionsData.value?.payload ?? [])
+  const sectors = computed<SelectOption[]>(() => sectorsData.value?.payload ?? [])
+
+  return { registerLandingUser, positions, sectors }
 }

app/pages/index.vue

@@ -150,6 +150,19 @@
                   </div>
                 </div>
 
+                <div class="field-group">
+                  <label class="field-label">Crachá</label>
+                  <div class="field-input-wrap">
+                    <span class="material-icons field-icon">credit_card</span>
+                    <input
+                      v-model="form.cracha"
+                      type="text"
+                      placeholder="Número do seu crachá"
+                      class="field-input"
+                    >
+                  </div>
+                </div>
+
                 <div class="field-group">
                   <label class="field-label">E-mail</label>
                   <div :class="['field-input-wrap', { 'field-error': errors.email }]">
@@ -184,12 +197,12 @@
                   <label class="field-label">Cargo</label>
                   <div class="field-input-wrap">
                     <span class="material-icons field-icon">work</span>
-                    <input
-                      v-model="form.cargo"
-                      type="text"
-                      placeholder="Assistente Financeiro"
-                      class="field-input"
-                    >
+                    <select v-model="form.cargoId" class="field-input">
+                      <option :value="null" disabled>Selecione seu cargo</option>
+                      <option v-for="position in positions" :key="position.id" :value="position.id">
+                        {{ position.name }}
+                      </option>
+                    </select>
                   </div>
                 </div>
 
@@ -197,12 +210,12 @@
                   <label class="field-label">Setor</label>
                   <div class="field-input-wrap">
                     <span class="material-icons field-icon">business</span>
-                    <input
-                      v-model="form.setor"
-                      type="text"
-                      placeholder="Financeiro"
-                      class="field-input"
-                    >
+                    <select v-model="form.setorId" class="field-input">
+                      <option :value="null" disabled>Selecione seu setor</option>
+                      <option v-for="sector in sectors" :key="sector.id" :value="sector.id">
+                        {{ sector.name }}
+                      </option>
+                    </select>
                   </div>
                 </div>
 
@@ -260,10 +273,11 @@ const scrollTo = (id: string) => {
 const form = reactive({
   nomeCompleto: '',
   cpf: '',
+  cracha: '',
   email: '',
   telefone: '',
-  cargo: '',
-  setor: '',
+  cargoId: null as number | null,
+  setorId: null as number | null,
 })
 
 const formatCPF = (value: string): string => {
@@ -323,7 +337,7 @@ const onPhoneBlur = () => {
 
 watch(() => form.email, () => { if (errors.email) errors.email = '' })
 
-const { registerLandingUser } = useRegisterApi()
+const { registerLandingUser, positions, sectors } = useRegisterApi()
 
 const isLoading = ref(false)
 const showSuccess = ref(false)
@@ -331,7 +345,15 @@ const showError = ref(false)
 const errorMessage = ref('')
 
 const resetForm = () => {
-  Object.assign(form, { nomeCompleto: '', cpf: '', email: '', telefone: '', cargo: '', setor: '' })
+  Object.assign(form, {
+    nomeCompleto: '',
+    cpf: '',
+    cracha: '',
+    email: '',
+    telefone: '',
+    cargoId: null,
+    setorId: null,
+  })
   Object.assign(errors, { cpf: '', email: '', telefone: '' })
 }
 
@@ -346,12 +368,13 @@ const handleSubmit = async () => {
 
   try {
     await registerLandingUser({
-      name:           form.nomeCompleto,
-      cpf:            form.cpf,
-      email:          form.email,
-      phone:          form.telefone,
-      position_label: form.cargo,
-      sector_label:   form.setor,
+      name:         form.nomeCompleto,
+      cpf:          form.cpf,
+      registration: form.cracha,
+      email:        form.email,
+      phone:        form.telefone,
+      position_id:  form.cargoId,
+      sector_id:    form.setorId,
     })
 
     showSuccess.value = true