feat: adiciona dialog de grupo

src/pages/cadastros/components/AddEditGroupDialog.vue

@@ -0,0 +1,66 @@
+<template>
+  <q-dialog ref="dialogRef" @hide="onDialogHide">
+    <div style="width: 100%; max-width: 480px">
+      <q-card class="overflow-hidden" style="width: 100%">
+        <DefaultDialogHeader title="Adicionar Novo Grupo" @close="onDialogCancel" />
+
+        <q-form ref="formRef" @submit="onOKClick">
+          <q-card-section class="q-pt-sm">
+            <DefaultInput
+              v-model="form.name"
+              label="Nome do Grupo"
+              outlined
+              :rules="[inputRules.required]"
+            />
+          </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="Salvar"
+              color="primary-2"
+              type="submit"
+              :loading="loading"
+            />
+          </q-card-actions>
+        </q-form>
+      </q-card>
+    </div>
+  </q-dialog>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useDialogPluginComponent } from "quasar";
+import { useInputRules } from "src/composables/useInputRules";
+import DefaultDialogHeader from "src/components/defaults/DefaultDialogHeader.vue";
+import DefaultInput from "src/components/defaults/DefaultInput.vue";
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
+  useDialogPluginComponent();
+
+const { inputRules } = useInputRules();
+
+const formRef = ref(null);
+const loading = ref(false);
+
+const form = ref({
+  name: "",
+});
+
+const onOKClick = async () => {
+  loading.value = true;
+  try {
+    onDialogOK(form.value);
+  } finally {
+    loading.value = false;
+  }
+};
+</script>

src/pages/cadastros/tabs/GruposTab.vue

@@ -8,6 +8,7 @@
       :female="false"
       no-api-call
       add-item
+      @on-add-item="handleAdd"
     >
       <template #body-cell-status="{ row }">
         <q-td align="center">
@@ -44,7 +45,11 @@
 
 <script setup>
 import { ref } from "vue";
+import { useQuasar } from "quasar";
 import DefaultTable from "src/components/defaults/DefaultTable.vue";
+import AddEditGroupDialog from "../components/AddEditGroupDialog.vue";
+
+const $q = useQuasar();
 
 const rows = ref([]);
 
@@ -55,6 +60,10 @@ const columns = ref([
   { name: "actions", label: "Ações", field: null, align: "center" },
 ]);
 
+function handleAdd() {
+  $q.dialog({ component: AddEditGroupDialog });
+}
+
 function onEdit(row) {
   console.log("edit", row);
 }