feat(tbrs): add a new tbr dialog to pattern. Change the settings tab, rechange the utils functions.

src/components/defaults/DefaultCurrencyInput.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script setup>
-import { watch, onBeforeMount, ref } from "vue";
+import { computed, watch } from "vue";
 import { useCurrencyInput } from "vue-currency-input";
 
 import { useInputRules } from "src/composables/useInputRules";
@@ -21,9 +21,6 @@ const { inputRules } = useInputRules();
 
 const model = defineModel({ type: Number });
 
-const defaultRules = [inputRules.minValue(0)];
-const finalRules = ref([]);
-
 const { options, label, rules } = defineProps({
   options: {
     type: Object,
@@ -74,14 +71,9 @@ watch(
   },
 );
 
-watch(
-  () => rules,
-  (value) => {
-    finalRules.value = [...value, ...defaultRules];
-  },
-);
-
-onBeforeMount(() => {
-  finalRules.value = [...rules, ...defaultRules];
-});
+const minRule = inputRules.minValue(0);
+const finalRules = computed(() => [
+  ...rules,
+  () => minRule(numberValue.value),
+]);
 </script>

src/helpers/utils.js

@@ -102,6 +102,11 @@ const normalizeString = (val) =>
     .normalize("NFKD")
     .replace(/[\u0300-\u036f~]/g, "");
 
+const formatPercentage = (value) => {
+  if (value == null) return "\u2014";
+  return `${(value * 100).toFixed(0)}%`;
+};
+
 export {
   formatDateDMYtoYMD,
   formatDateYMDtoDMY,
@@ -109,4 +114,5 @@ export {
   convertDateTime,
   formatToBRLCurrency,
   normalizeString,
+  formatPercentage,
 };

src/pages/tbr/components/CreateTbrDialog.vue → src/pages/tbr/components/AddEditTbrDialog.vue

@@ -5,7 +5,7 @@
       style="width: 100%; max-width: 1100px"
     >
       <DefaultDialogHeader
-        :title="() => 'Criar Novo TBR'"
+        :title="() => (tbr ? 'Editar TBR' : 'Criar Novo TBR')"
         @close="onDialogCancel"
       />
 
@@ -92,7 +92,7 @@ import { ref } from "vue";
 import { useDialogPluginComponent } from "quasar";
 import { useInputRules } from "src/composables/useInputRules";
 import { useSubmitHandler } from "src/composables/useSubmitHandler";
-import { createTbr } from "src/api/tbr";
+import { createTbr, updateTbr } from "src/api/tbr";
 
 import DefaultDialogHeader from "src/components/defaults/DefaultDialogHeader.vue";
 import DefaultInput from "src/components/defaults/DefaultInput.vue";
@@ -100,6 +100,13 @@ import DefaultCurrencyInput from "src/components/defaults/DefaultCurrencyInput.v
 
 defineEmits([...useDialogPluginComponent.emits]);
 
+const { tbr } = defineProps({
+  tbr: {
+    type: Object,
+    default: null,
+  },
+});
+
 const { inputRules } = useInputRules();
 const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
   useDialogPluginComponent();
@@ -107,11 +114,11 @@ const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
 const formRef = ref(null);
 
 const form = ref({
-  year: null,
-  tbr_value: null,
-  royalties_display: null,
-  fnm_display: null,
-  maintenance_display: null,
+  year: tbr?.year ?? null,
+  tbr_value: tbr ? Number(tbr.tbr_value) : null,
+  royalties_display: tbr ? Number(tbr.royalties_percentage) * 100 : null,
+  fnm_display: tbr ? Number(tbr.fnm_percentage) * 100 : null,
+  maintenance_display: tbr ? Number(tbr.maintenance_percentage) * 100 : null,
 });
 
 const { loading, execute } = useSubmitHandler({
@@ -120,14 +127,16 @@ const { loading, execute } = useSubmitHandler({
 });
 
 async function onOKClick() {
+  const payload = {
+    year: form.value.year,
+    tbr_value: form.value.tbr_value,
+    royalties_percentage: (form.value.royalties_display ?? 0) / 100,
+    fnm_percentage: (form.value.fnm_display ?? 0) / 100,
+    maintenance_percentage: (form.value.maintenance_display ?? 0) / 100,
+  };
+
   await execute(() =>
-    createTbr({
-      year: form.value.year,
-      tbr_value: form.value.tbr_value,
-      royalties_percentage: (form.value.royalties_display ?? 0) / 100,
-      fnm_percentage: (form.value.fnm_display ?? 0) / 100,
-      maintenance_percentage: (form.value.maintenance_display ?? 0) / 100,
-    }),
+    tbr ? updateTbr(tbr.id, payload) : createTbr(payload),
   );
 }
 </script>

src/pages/tbr/tabs/SettingsTab.vue

@@ -11,7 +11,7 @@
     @on-add-item="onAdd"
   >
     <template #body-cell-tbr_value="{ row }">
-      <q-td>{{ formatCurrency(row.tbr_value) }}</q-td>
+      <q-td>{{ formatToBRLCurrency(row.tbr_value) }}</q-td>
     </template>
 
     <template #body-cell-royalties="{ row }">
@@ -26,11 +26,18 @@
       <q-td>{{ formatPercentage(row.maintenance_percentage) }}</q-td>
     </template>
 
-    <template #body-cell-actions>
+    <template #body-cell-actions="{ row }">
       <q-td align="center">
         <div class="row no-wrap" style="gap: 4px">
           <q-btn flat round dense icon="mdi-eye-outline" size="sm" />
-          <q-btn flat round dense icon="mdi-file-edit-outline" size="sm" />
+          <q-btn
+            flat
+            round
+            dense
+            icon="mdi-file-edit-outline"
+            size="sm"
+            @click="onEdit(row)"
+          />
         </div>
       </q-td>
     </template>
@@ -41,8 +48,9 @@
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import DefaultTable from "src/components/defaults/DefaultTable.vue";
-import CreateTbrDialog from "src/pages/tbr/components/CreateTbrDialog.vue";
+import AddEditTbrDialog from "src/pages/tbr/components/AddEditTbrDialog.vue";
 import { getTbrs } from "src/api/tbr";
+import { formatToBRLCurrency, formatPercentage } from "src/helpers/utils";
 
 const $q = useQuasar();
 const rows = ref([]);
@@ -51,31 +59,34 @@ const columns = [
   { name: "id", label: "ID", field: "id", align: "left" },
   { name: "year", label: "Ano", field: "year", align: "left" },
   { name: "tbr_value", label: "TBR", field: "tbr_value", align: "left" },
-  { name: "royalties", label: "Royalties", field: "royalties_percentage", align: "left" },
+  {
+    name: "royalties",
+    label: "Royalties",
+    field: "royalties_percentage",
+    align: "left",
+  },
   { name: "fnm", label: "FNM", field: "fnm_percentage", align: "left" },
-  { name: "maintenance", label: "Manutenção", field: "maintenance_percentage", align: "left" },
+  {
+    name: "maintenance",
+    label: "Manutenção",
+    field: "maintenance_percentage",
+    align: "left",
+  },
   { name: "actions", label: "Ações", field: "actions", align: "center" },
 ];
 
-function formatCurrency(value) {
-  if (value == null) return "—";
-  return new Intl.NumberFormat("pt-BR", {
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2,
-  }).format(value) + " $";
-}
-
-function formatPercentage(value) {
-  if (value == null) return "—";
-  return `${(value * 100).toFixed(0)}%`;
-}
-
 async function loadData() {
   rows.value = await getTbrs();
 }
 
 function onAdd() {
-  $q.dialog({ component: CreateTbrDialog }).onOk(() => loadData());
+  $q.dialog({ component: AddEditTbrDialog }).onOk(() => loadData());
+}
+
+function onEdit(row) {
+  $q.dialog({ component: AddEditTbrDialog, componentProps: { tbr: row } }).onOk(
+    () => loadData(),
+  );
 }
 
 onMounted(loadData);