feat(tbrs): create dialog, change settings table and create a new tbr api file

src/api/tbr.js

@@ -1,16 +1,16 @@
 import api from "src/api";
 
-export const getRoyaltiesBaseBrackets = async () => {
-  const { data } = await api.get("/royalties-base-bracket");
+export const getTbrs = async () => {
+  const { data } = await api.get("/tbr");
   return data.payload;
 };
 
-export const getFnmBaseBrackets = async () => {
-  const { data } = await api.get("/fnm-base-bracket");
+export const createTbr = async (payload) => {
+  const { data } = await api.post("/tbr", payload);
   return data.payload;
 };
 
-export const getMaintenanceBaseBrackets = async () => {
-  const { data } = await api.get("/maintenance-base-bracket");
+export const updateTbr = async (id, payload) => {
+  const { data } = await api.put(`/tbr/${id}`, payload);
   return data.payload;
 };

src/pages/tbr/components/CreateTbrDialog.vue

@@ -0,0 +1,133 @@
+<template>
+  <q-dialog ref="dialogRef" @hide="onDialogHide">
+    <q-card
+      class="q-dialog-plugin overflow-hidden"
+      style="width: 100%; max-width: 1100px"
+    >
+      <DefaultDialogHeader
+        :title="() => 'Criar Novo TBR'"
+        @close="onDialogCancel"
+      />
+
+      <q-form ref="formRef" @submit="onOKClick">
+        <q-card-section class="q-pt-none">
+          <p class="text-subtitle2 q-mb-md">Definir Valores e TBR</p>
+
+          <div class="row q-col-gutter-sm">
+            <DefaultInput
+              v-model="form.year"
+              label="Ano"
+              class="col-3"
+              outlined
+              type="number"
+              min="2000"
+              max="2100"
+              :rules="[inputRules.required]"
+            />
+
+            <DefaultCurrencyInput
+              v-model="form.tbr_value"
+              label="TBR $"
+              class="col-3"
+              outlined
+            />
+
+            <DefaultInput
+              v-model="form.royalties_display"
+              label="Royalties %"
+              class="col-2"
+              outlined
+              type="number"
+              min="0"
+              max="100"
+              :rules="[inputRules.required]"
+            />
+
+            <DefaultInput
+              v-model="form.fnm_display"
+              label="FMN %"
+              class="col-2"
+              outlined
+              type="number"
+              min="0"
+              max="100"
+              :rules="[inputRules.required]"
+            />
+
+            <DefaultInput
+              v-model="form.maintenance_display"
+              label="Manutenção %"
+              class="col-2"
+              outlined
+              type="number"
+              min="0"
+              max="100"
+              :rules="[inputRules.required]"
+            />
+          </div>
+        </q-card-section>
+
+        <q-card-actions>
+          <q-space />
+          <q-btn
+            outline
+            color="negative"
+            label="Cancelar"
+            @click="onDialogCancel"
+          />
+          <q-btn
+            color="primary-2"
+            label="Salvar"
+            type="submit"
+            :loading="loading"
+          />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup>
+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 DefaultDialogHeader from "src/components/defaults/DefaultDialogHeader.vue";
+import DefaultInput from "src/components/defaults/DefaultInput.vue";
+import DefaultCurrencyInput from "src/components/defaults/DefaultCurrencyInput.vue";
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { inputRules } = useInputRules();
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
+  useDialogPluginComponent();
+
+const formRef = ref(null);
+
+const form = ref({
+  year: null,
+  tbr_value: null,
+  royalties_display: null,
+  fnm_display: null,
+  maintenance_display: null,
+});
+
+const { loading, execute } = useSubmitHandler({
+  formRef,
+  onSuccess: (result) => onDialogOK(result),
+});
+
+async function onOKClick() {
+  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,
+    }),
+  );
+}
+</script>

src/pages/tbr/tabs/SettingsTab.vue

@@ -3,19 +3,15 @@
     v-model:rows="rows"
     :columns="columns"
     title="Configurações TBR"
-    description="faixas"
+    description="configurações"
     :female="false"
     :no-api-call="true"
     :show-search-field="true"
     :add-item="true"
     @on-add-item="onAdd"
   >
-    <template #body-cell-year="{ row }">
-      <q-td>{{ formatMonthRange(row.start_month, row.end_month) }}</q-td>
-    </template>
-
-    <template #body-cell-tbr="{ row }">
-      <q-td>{{ formatPercentage(row.royalties_percentage) }}</q-td>
+    <template #body-cell-tbr_value="{ row }">
+      <q-td>{{ formatCurrency(row.tbr_value) }}</q-td>
     </template>
 
     <template #body-cell-royalties="{ row }">
@@ -27,9 +23,7 @@
     </template>
 
     <template #body-cell-maintenance="{ row }">
-      <q-td align="center">{{
-        formatPercentage(row.maintenance_percentage)
-      }}</q-td>
+      <q-td>{{ formatPercentage(row.maintenance_percentage) }}</q-td>
     </template>
 
     <template #body-cell-actions>
@@ -45,62 +39,44 @@
 
 <script setup>
 import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
 import DefaultTable from "src/components/defaults/DefaultTable.vue";
-import {
-  getRoyaltiesBaseBrackets,
-  getFnmBaseBrackets,
-  getMaintenanceBaseBrackets,
-} from "src/api/tbr";
+import CreateTbrDialog from "src/pages/tbr/components/CreateTbrDialog.vue";
+import { getTbrs } from "src/api/tbr";
 
+const $q = useQuasar();
 const rows = ref([]);
 
 const columns = [
-  { name: "id", label: "ID", field: "id", align: "center" },
-  { name: "year", label: "Ano", field: "start_month", align: "left" },
-  { name: "tbr", label: "TBR", field: "royalties_percentage", align: "left" },
-  {
-    name: "royalties",
-    label: "Royalties",
-    field: "royalties_percentage",
-    align: "left",
-  },
+  { 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: "fnm", label: "FNM", field: "fnm_percentage", align: "left" },
-  {
-    name: "maintenance",
-    label: "Manutenção",
-    field: "maintenance_percentage",
-    align: "center",
-  },
+  { 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)}%`;
 }
 
-function formatMonthRange(start, end) {
-  return end ? `Mês ${start} - ${end}` : `Mês ${start}+`;
+async function loadData() {
+  rows.value = await getTbrs();
 }
 
-onMounted(async () => {
-  const [royalties, fnm, maintenance] = await Promise.all([
-    getRoyaltiesBaseBrackets(),
-    getFnmBaseBrackets(),
-    getMaintenanceBaseBrackets(),
-  ]);
-
-  rows.value = royalties.map((r, i) => ({
-    id: r.id,
-    start_month: r.start_month,
-    end_month: r.end_month,
-    royalties_percentage: r.percentage,
-    fnm_percentage: fnm[i]?.percentage ?? null,
-    maintenance_percentage: maintenance[i]?.percentage ?? null,
-  }));
-});
-
 function onAdd() {
-  // TODO
+  $q.dialog({ component: CreateTbrDialog }).onOk(() => loadData());
 }
+
+onMounted(loadData);
 </script>