feat(support): adiciona ticket dialog

src/pages/support/SupportPage.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <DefaultHeaderPage title="Suporte"  />
+    <DefaultHeaderPage title="Suporte" />
     <DefaultTable
       ref="tableRef"
       :columns="columns"
@@ -10,6 +10,7 @@
       :female="false"
       no-api-call
       description="tickets"
+      @on-add-item="openAddTicketDialog"
     >
       <template #body-cell-actions="{ row }">
         <q-btn
@@ -31,13 +32,27 @@
 </template>
 
 <script setup>
-import { ref, useTemplateRef } from "vue";
+import { ref, defineAsyncComponent, useTemplateRef } from "vue";
+import { useQuasar } from "quasar";
 
 import DefaultTable from "src/components/defaults/DefaultTable.vue";
 import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
 
+const AddTicketDialog = defineAsyncComponent(
+  () => import("src/pages/support/components/AddTicketDialog.vue"),
+);
+
+const $q = useQuasar();
 const tableRef = useTemplateRef("tableRef");
-const rows = ref([])
+const rows = ref([]);
+
+const openAddTicketDialog = () => {
+  $q.dialog({
+    component: AddTicketDialog,
+  }).onOk(() => {
+    tableRef.value?.refresh();
+  });
+};
 
 const columns = [
   {

src/pages/support/components/AddTicketDialog.vue

@@ -0,0 +1,136 @@
+<template>
+  <q-dialog ref="dialogRef" @hide="onDialogHide">
+    <div style="width: 100%; max-width: 1100px">
+      <q-card class="overflow-hidden" style="width: 100%">
+        <DefaultDialogHeader title="Novo Ticket" @close="onDialogCancel" />
+
+        <q-form ref="formRef" @submit="onOKClick">
+          <q-card-section class="q-pt-sm">
+            <CustomTabComponent
+              v-model:active-tab="currentTab"
+              :tabs="tabs"
+              class="q-mb-md"
+            />
+
+            <!-- Tab: Ticket -->
+            <div v-show="currentTab === 'ticket'">
+              <div class="row q-col-gutter-sm">
+                <DefaultInput
+                  v-model="form.title"
+                  label="Título da Tarefa"
+                  class="col-12"
+                />
+
+                <DefaultInputDatePicker
+                  v-model="form.date"
+                  label="Data do Registro"
+                  class="col-6"
+                />
+
+                <DefaultSelect
+                  v-model="form.priority"
+                  label="Prioridade"
+                  :options="priorityOptions"
+                  class="col-6"
+                />
+
+                <DefaultSelect
+                  v-model="form.responsible"
+                  label="Responsável"
+                  :options="[]"
+                  class="col-6"
+                />
+
+                <UnitSelect v-model="form.unit" class="col-6" />
+
+                <DefaultSelect
+                  v-model="form.sector"
+                  label="Setor"
+                  :options="[]"
+                  class="col-6"
+                />
+
+                <DefaultInput
+                  v-model="form.description"
+                  label="Descrição"
+                  type="textarea"
+                  class="col-12"
+                />
+              </div>
+            </div>
+
+            <!-- Tab: Comentários -->
+            <div v-show="currentTab === 'comentarios'" />
+          </q-card-section>
+
+          <q-card-actions align="right" class="q-px-md q-pb-md">
+            <q-btn
+              outline
+              color="primary"
+              label="Cancelar"
+              @click="onDialogCancel"
+            />
+            <q-btn
+              color="primary"
+              label="Salvar"
+              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 CustomTabComponent from "src/components/shared/CustomTabComponent.vue";
+import DefaultDialogHeader from "src/components/defaults/DefaultDialogHeader.vue";
+import DefaultInput from "src/components/defaults/DefaultInput.vue";
+import DefaultInputDatePicker from "src/components/defaults/DefaultInputDatePicker.vue";
+import DefaultSelect from "src/components/defaults/DefaultSelect.vue";
+import UnitSelect from "src/components/selects/UnitSelect.vue";
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
+  useDialogPluginComponent();
+
+const formRef = ref(null);
+const loading = ref(false);
+const currentTab = ref("ticket");
+
+const tabs = [
+  { name: "ticket", label: "Ticket" },
+  { name: "comentarios", label: "Comentários" },
+];
+
+const priorityOptions = [
+  { label: "Alta", value: "alta" },
+  { label: "Normal", value: "normal" },
+  { label: "Baixa", value: "baixa" },
+];
+
+const form = ref({
+  title: null,
+  date: null,
+  priority: null,
+  responsible: null,
+  unit: null,
+  sector: null,
+  description: null,
+});
+
+const onOKClick = async () => {
+  loading.value = true;
+  try {
+    // TODO: implement save
+    onDialogOK(form.value);
+  } finally {
+    loading.value = false;
+  }
+};
+</script>