feat: reestilying contract dialog

src/components/defaults/DefaultSelect.vue

@@ -68,7 +68,7 @@ const {
   },
   outlined: {
     type: Boolean,
-    default: false,
+    default: true,
   },
   dropdownIcon: {
     type: String,

src/pages/unit/components/CreateContractDialog.vue

@@ -2,7 +2,7 @@
   <q-dialog ref="dialogRef" @hide="onDialogHide">
     <q-card
       class="q-dialog-plugin overflow-hidden"
-      style="width: 900px; max-width: 95vw"
+      style="width: 100%; max-width: 1100px"
     >
       <DefaultDialogHeader
         :title="() => 'Criar novo contrato'"
@@ -10,9 +10,11 @@
       />
 
       <q-card-section>
-        <div class="text-h6 q-mb-sm">Dados da Unidade</div>
+        <div class="text-body2 q-mb-sm">Dados da Unidade</div>
+
         <div class="row q-col-gutter-x-sm">
           <DefaultInput
+            :model-value="contractForm.id"
             label="ID"
             color="secondary"
             label-color="secondary"
@@ -20,6 +22,7 @@
           />
 
           <DefaultInput
+            v-model="contractForm.franchisee_name"
             label="Nome do Franqueado"
             color="secondary"
             label-color="secondary"
@@ -27,6 +30,7 @@
           />
 
           <DefaultInput
+            v-model="contractForm.franchisee_document"
             label="CPF/CNH"
             color="secondary"
             label-color="secondary"
@@ -34,6 +38,7 @@
           />
 
           <DefaultInputDatePicker
+            v-model="contractForm.franchisee_birthday"
             label="Data de Nascimento"
             color="secondary"
             label-color="secondary"
@@ -43,9 +48,11 @@
       </q-card-section>
 
       <q-card-section>
-        <div class="text-h6 q-mb-sm">Definir Valores e TBR</div>
-        <div class="row q-col-gutter-x-sm">
+        <div class="text-body2 q-mb-sm">Definir Valores e TBR</div>
+
+        <div class="row q-col-gutter-sm">
           <DefaultInputDatePicker
+            v-model="contractForm.contract_start_date"
             label="Data de Início"
             color="secondary"
             label-color="secondary"
@@ -53,6 +60,7 @@
           />
 
           <DefaultInputDatePicker
+            v-model="contractForm.contract_end_date"
             label="Data de Fim"
             color="secondary"
             label-color="secondary"
@@ -60,6 +68,7 @@
           />
 
           <DefaultCurrencyInput
+            v-model="contractForm.contract_tbr_value"
             label="TBR $"
             color="secondary"
             label-color="secondary"
@@ -67,6 +76,7 @@
           />
 
           <DefaultInputDatePicker
+            v-model="contractForm.contract_due_date_price"
             label="Vencimento Boleto"
             color="secondary"
             label-color="secondary"
@@ -74,18 +84,20 @@
           />
 
           <DefaultSelect
+            v-model="contractForm.inhabitants_range"
             label="Faixa de Habitante"
             color="secondary"
             label-color="secondary"
             :options="inhabitantRangeOptions"
-            class="col-md-4 col-12"
+            class="col-md-3 col-12"
           />
 
           <DefaultInput
+            v-model="contractForm.tax_base_royalts"
             label="Taxa Base Royalties"
             color="secondary"
             label-color="secondary"
-            class="col-md-4 col-12"
+            class="col-md-3 col-12"
           >
             <template #append>
               <span class="text-secondary">%</span>
@@ -93,10 +105,11 @@
           </DefaultInput>
 
           <DefaultInput
+            v-model="contractForm.tax_base_fnm"
             label="Taxa Base FMN"
             color="secondary"
             label-color="secondary"
-            class="col-md-4 col-12"
+            class="col-md-3 col-12"
           >
             <template #append>
               <span class="text-secondary">%</span>
@@ -104,11 +117,12 @@
           </DefaultInput>
 
           <DefaultInput
+            v-model="contractForm.tax_base_maintenance"
             label="Taxa Base Manutenção"
             color="secondary"
             outlined
             label-color="secondary"
-            class="col-md-4 col-12"
+            class="col-md-3 col-12"
           >
             <template #append>
               <span class="text-secondary">%</span>
@@ -138,10 +152,28 @@ import DefaultInput from "src/components/defaults/DefaultInput.vue";
 import DefaultInputDatePicker from "src/components/defaults/DefaultInputDatePicker.vue";
 import DefaultCurrencyInput from "src/components/defaults/DefaultCurrencyInput.vue";
 import DefaultSelect from "src/components/defaults/DefaultSelect.vue";
+import { useFormUpdateTracker } from "src/composables/useFormUpdateTracker";
 
 defineEmits([...useDialogPluginComponent.emits]);
 
 const { dialogRef, onDialogHide, onDialogCancel } = useDialogPluginComponent();
 
 const inhabitantRangeOptions = [{ label: "Selecione", value: null }];
+
+const { form: contractForm } = useFormUpdateTracker({
+  unit_id: null,
+  franchisee_name: null,
+  franchisee_document: null,
+  franchisee_birthday: null,
+
+  contract_start_date: null,
+  contract_end_date: null,
+  contract_tbr_value: null,
+  contract_due_date_price: null,
+
+  inhabitants_range: null,
+  tax_base_royalts: null,
+  tax_base_fnm: null,
+  tax_base_maintenance: null,
+});
 </script>