feat(products): adiciona descricao

src/api/product.js

@@ -1,6 +1,26 @@
 import api from "src/api";
 
+export const getProducts = async (params) => {
+  const { data } = await api.get("/product", { params });
+  return data.payload;
+};
+
 export const getProductsForSelect = async () => {
   const { data } = await api.get("/product/all/select");
   return data.payload;
 };
+
+export const createProduct = async (payload) => {
+  const { data } = await api.post("/product", payload);
+  return data.payload;
+};
+
+export const updateProduct = async (id, payload) => {
+  const { data } = await api.put(`/product/${id}`, payload);
+  return data.payload;
+};
+
+export const deleteProduct = async (id) => {
+  const { data } = await api.delete(`/product/${id}`);
+  return data;
+};

src/pages/products/components/AddProductDialog.vue

@@ -9,10 +9,18 @@
             <div class="text-h6 q-mb-sm">Produto</div>
 
             <div class="row q-col-gutter-sm">
+              <DefaultInput
+                v-model="form.name"
+                label="Nome do Produto"
+                class="col-12"
+              />
+
               <DefaultInput
                 v-model="form.description"
-                label="Descrição do Produto"
+                label="Descrição"
                 class="col-12"
+                type="textarea"
+                autogrow
               />
 
               <DefaultCurrencyInput
@@ -29,11 +37,12 @@
                 min="0"
               />
 
-              <DefaultCurrencyInput
-                :model-value="totalValue"
+              <DefaultInput
+                :model-value="totalValueFormatted"
                 label="Valor Total do Produto"
                 class="col-4"
-                disabled
+                disable
+                readonly
               />
             </div>
           </q-card-section>
@@ -49,6 +58,7 @@
               label="Cadastrar Produto"
               color="primary-2"
               type="submit"
+              :loading="loading"
             />
           </q-card-actions>
         </q-form>
@@ -59,7 +69,9 @@
 
 <script setup>
 import { ref, computed } from "vue";
-import { useDialogPluginComponent } from "quasar";
+import { useDialogPluginComponent, useQuasar } from "quasar";
+import { createProduct } from "src/api/product";
+import { formatToBRLCurrency } from "src/helpers/utils";
 
 import DefaultDialogHeader from "src/components/defaults/DefaultDialogHeader.vue";
 import DefaultInput from "src/components/defaults/DefaultInput.vue";
@@ -67,20 +79,37 @@ import DefaultCurrencyInput from "src/components/defaults/DefaultCurrencyInput.v
 
 defineEmits([...useDialogPluginComponent.emits]);
 
+const $q = useQuasar();
+
 const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
   useDialogPluginComponent();
 
 const formRef = ref(null);
+const loading = ref(false);
 
 const form = ref({
+  name: "",
   description: "",
   unitPrice: 0,
   quantity: 0,
 });
 
 const totalValue = computed(() => form.value.unitPrice * form.value.quantity);
+const totalValueFormatted = computed(() => formatToBRLCurrency(totalValue.value));
 
 const onOKClick = async () => {
-  onDialogOK({ ...form.value, totalValue: totalValue.value });
+  loading.value = true;
+  try {
+    const product = await createProduct({
+      name:        form.value.name,
+      description: form.value.description,
+      price_sale:  form.value.unitPrice,
+    });
+    onDialogOK(product);
+  } catch {
+    $q.notify({ type: "negative", message: "Erro ao cadastrar produto." });
+  } finally {
+    loading.value = false;
+  }
 };
 </script>