Merge remote-tracking branch 'refs/remotes/origin/master'

quasar.config.js

@@ -26,7 +26,7 @@ export default configure((ctx) => {
       // 'fontawesome-v6',
       // 'eva-icons',
       // 'themify',
-      // 'line-awesome',
+      'line-awesome',
       // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
 
       "roboto-font", // optional, you are not bound to it

src/components/geral/DefaultDialogHeader.vue

@@ -2,7 +2,7 @@
   <q-bar
     class="q-py-md"
     v-bind="$attrs"
-    style="min-height: 55px; max-height: 55px"
+    style="min-height: 45px; max-height: 45px"
   >
     <q-icon v-if="props.icon" :name="props.icon" />
     <div>{{ props.title() }}</div>

src/components/geral/DefaultHeaderPage.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="q-ml-md">
+    <q-breadcrumbs class="q-mb-md">
+      <q-breadcrumbs-el
+        v-for="breadcrumb in $route.meta?.breadcrumbs"
+        :key="breadcrumb?.name"
+        :label="breadcrumb?.title"
+        :to="{ name: breadcrumb?.name }"
+      />
+    </q-breadcrumbs>
+
+    <span class="text-h5">{{ $route.meta?.title }}</span>
+    <q-separator class="q-my-sm" />
+  </div>
+</template>
+
+<script setup></script>

src/components/geral/DefaultTable.vue

@@ -18,11 +18,11 @@
         v-if="mostrarCampoPesquisa"
         v-model="filter"
         outlined
-        dense
         debounce="500"
-        :placeholder="$t('general.search')"
+        placeholder="Buscar"
         style="min-width: 400px"
         clearable
+        dense
         autofocus
       >
         <template #append>
@@ -65,6 +65,15 @@
         <q-icon name="mdi-fullscreen" />
       </q-btn>
 
+      <q-btn
+        outline
+        class="default-button-padding q-ml-md bg-white"
+        icon="mdi-filter-outline"
+        style="height: 40px; width: 40px"
+        @click="showFilters = !showFilters"
+      >
+      </q-btn>
+
       <q-space />
 
       <q-btn-dropdown
@@ -76,11 +85,9 @@
 
       <q-btn
         v-if="props.addItem"
-        class="button-secondary"
-        color="primary"
-        padding="12px 16px"
         :outline="props.outlineAdd"
-        :label="$t('general.add')"
+        class="default-button-padding"
+        label="Adicionar"
         @click="onAddItem"
       >
       </q-btn>
@@ -119,6 +126,33 @@
       </q-td>
     </template>
 
+    <template #body-cell-principal="{ value, row }">
+      <q-td style="width: 1%">
+        <q-item-section>
+          <span class="text-center">
+            <q-icon
+              v-if="row.principal && value"
+              name="mdi-star"
+              size="1.5rem"
+              style="color: #385873"
+              onmouseover="this.style.color='#688FAF';"
+              onmouseout="this.style.color='#385873';"
+              @click.stop="togglePrincipal(row)"
+            />
+            <q-icon
+              v-if="!row.principal"
+              name="mdi-star-outline"
+              size="1.5rem"
+              style="color: #385873"
+              onmouseover="this.style.color='#688FAF';"
+              onmouseout="this.style.color='#385873';"
+              @click.stop="togglePrincipal(row)"
+            />
+          </span>
+        </q-item-section>
+      </q-td>
+    </template>
+
     <template v-if="!props.hideNoDataLabel" #no-data>
       <div class="q-my-md row justify-center full-width">
         <q-spinner v-if="loading" color="primary" size="30px" />
@@ -138,7 +172,7 @@
 import { ref, onMounted, toRaw, watch } from "vue";
 import { useRouter } from "vue-router";
 
-const emit = defineEmits(["onRowClick", "onAddItem", "noRows"]);
+const emit = defineEmits(["onRowClick", "onAddItem", "noRows", "togglePrincipal"]);
 
 const props = defineProps({
   // colunas de configuração da tabela
@@ -326,6 +360,11 @@ const onRequest = async () => {
   loading.value = false;
 };
 
+// funcao exclusiva para contatos table, para alterar o contato principal
+const togglePrincipal = async (row) => {
+  emit("togglePrincipal", row);
+};
+
 onMounted(async () => {
   // faz a primeira requisição
   await onRequest({
@@ -367,4 +406,17 @@ onMounted(async () => {
   background: #f7cfbb;
   border-radius: 24px;
 }
+
+.circulo-status {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  display: inline-block;
+}
+.circulo-ativo {
+  background-color: #80f680; /* Verde */
+}
+.circulo-inativo {
+  background-color: #919191; /* Cinza */
+}
 </style>

src/components/geral/LeftMenuLayout.vue

@@ -4,7 +4,7 @@
     v-model="leftDrawerOpen"
     show-if-above
     :width="250"
-    :mini-width="70"
+    :mini-width="100"
     :breakpoint="500"
     :mini="miniState"
     class="detached-container"
@@ -187,7 +187,7 @@
             >Sair</q-tooltip
           >
         </q-item>
-      </q-list>
+      </div>
     </div>
   </q-drawer>
 </template>

src/components/geral/TabsGlobal.vue

@@ -0,0 +1,39 @@
+<template>
+  <q-tabs
+    class="button bg-background-2 text-font"
+    indicator-color="transparent"
+    active-color="primary"
+    :model-value="tab"
+    v-bind="$attrs"
+    align="justify"
+    active-bg-color="white"
+  >
+    <q-tab
+      v-for="(q_tab, i) in props.tabsItems"
+      :key="i"
+      :name="q_tab.name"
+      :label="q_tab.label"
+      :disable="q_tab.disable"
+      :class="{ hidden: q_tab.hide }"
+      @update:model-value="(value) => $emit('update:tab', value)"
+    />
+  </q-tabs>
+</template>
+
+<script setup>
+defineEmits(["update:tab"]);
+
+const props = defineProps({
+  tabsItems: {
+    type: Array,
+    required: false,
+    default: () => [],
+  },
+
+  tab: {
+    type: String,
+    required: false,
+    default: "",
+  },
+});
+</script>

src/css/table.scss

@@ -46,7 +46,7 @@
   }
 
   .q-table__top {
-    padding-top: 16px;
+    padding-top: 8px;
     padding-left: 0px;
     padding-right: 0px;
     padding-bottom: 16px;

src/pages/LoginPage.vue

@@ -141,8 +141,9 @@ onMounted(() => {
   align-items: center;
 
   .login-card {
-    min-width: 500px;
+    min-width: 585px;
     max-width: 500px;
+    border-radius: 12px;
   }
 }
 </style>

src/pages/users/UsersPage.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="q-pa-md">
+    <DefaultHeaderPage />
     <DefaultTable
       :key="tableKey"
       :columns="columns"
@@ -24,6 +25,8 @@ import { useI18n } from "vue-i18n";
 import { permissionStore } from "src/stores/permission";
 import { getUsers, createUser, updateUser } from "src/api/user";
 
+import DefaultHeaderPage from "src/components/geral/DefaultHeaderPage.vue";
+
 const AddEditUserDialog = defineAsyncComponent(
   () => import("src/pages/users/components/AddEditUserDialog.vue"),
 );

src/router/routes/users.route.js

@@ -4,8 +4,19 @@ const routes = [
     name: "UsersPage",
     component: () => import("pages/users/UsersPage.vue"),
     meta: {
+      title: "Usuários",
       requireAuth: true,
       requiredPermission: "config.user",
+      breadcrumbs: [
+        {
+          name: "HomePage",
+          title: "Início",
+        },
+        {
+          name: "UsersPage",
+          title: "Usuários",
+        },
+      ],
     },
   },
 ];