feat(products): adiciona dialgo de produtos

src/pages/products/ProductsPage.vue

@@ -59,9 +59,11 @@
 
 <script setup>
 import { defineAsyncComponent, ref } from "vue";
+import { useQuasar } from "quasar";
 
 import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
 import CustomTabComponent from "src/components/shared/CustomTabComponent.vue";
+import AddProductDialog from "./components/AddProductDialog.vue";
 
 const ProductsTab = defineAsyncComponent(() => import("./tabs/ProductsTab.vue"));
 const StockTab = defineAsyncComponent(() => import("./tabs/StockTab.vue"));
@@ -78,7 +80,9 @@ const tabs = [
   { name: "orders", label: "Pedidos" },
 ];
 
+const $q = useQuasar();
+
 const handleAdd = () => {
-  // ação de adicionar
+  $q.dialog({ component: AddProductDialog });
 };
 </script>

src/pages/products/components/AddProductDialog.vue

@@ -0,0 +1,86 @@
+<template>
+  <q-dialog ref="dialogRef" @hide="onDialogHide">
+    <div style="width: 100%; max-width: 600px">
+      <q-card class="overflow-hidden" style="width: 100%">
+        <DefaultDialogHeader title="Novo Produto" @close="onDialogCancel" />
+
+        <q-form ref="formRef" @submit="onOKClick">
+          <q-card-section class="q-pt-sm">
+            <div class="text-h6 q-mb-sm">Produto</div>
+
+            <div class="row q-col-gutter-sm">
+              <DefaultInput
+                v-model="form.description"
+                label="Descrição do Produto"
+                class="col-12"
+              />
+
+              <DefaultCurrencyInput
+                v-model="form.unitPrice"
+                label="Valor Unitário"
+                class="col-4"
+              />
+
+              <DefaultInput
+                v-model="form.quantity"
+                label="Quantidade"
+                class="col-4"
+                type="number"
+                min="0"
+              />
+
+              <DefaultCurrencyInput
+                :model-value="totalValue"
+                label="Valor Total do Produto"
+                class="col-4"
+                disabled
+              />
+            </div>
+          </q-card-section>
+
+          <q-card-actions align="right" class="q-px-md q-pb-md">
+            <q-btn
+              label="Cancelar"
+              outline
+              color="primary-2"
+              @click="onDialogCancel"
+            />
+            <q-btn
+              label="Cadastrar Produto"
+              color="primary-2"
+              type="submit"
+            />
+          </q-card-actions>
+        </q-form>
+      </q-card>
+    </div>
+  </q-dialog>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import { useDialogPluginComponent } from "quasar";
+
+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 { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
+  useDialogPluginComponent();
+
+const formRef = ref(null);
+
+const form = ref({
+  description: "",
+  unitPrice: 0,
+  quantity: 0,
+});
+
+const totalValue = computed(() => form.value.unitPrice * form.value.quantity);
+
+const onOKClick = async () => {
+  onDialogOK({ ...form.value, totalValue: totalValue.value });
+};
+</script>