Explorar el Código

feat: altera layout do feriado

ebagabee hace 3 semanas
padre
commit
c841495170

+ 3 - 18
src/components/charts/AniversariantesCard.vue

@@ -5,12 +5,9 @@
       <q-icon name="mdi-cake-variant-outline" color="secondary" size="sm" />
     </div>
 
-    <div class="header-row text-caption text-grey-6 q-mb-xs">
-      <div class="flex items-center" style="gap: 4px">
-        <q-icon name="mdi-calendar-outline" size="14px" color="secondary" />
-        <span>Nome</span>
-      </div>
-      <span>Ações</span>
+    <div class="text-caption text-grey-6 q-mb-xs flex items-center" style="gap: 4px">
+      <q-icon name="mdi-calendar-outline" size="14px" color="secondary" />
+      <span>Nome</span>
     </div>
     <q-separator />
 
@@ -24,12 +21,6 @@
             <q-item-section>
               <q-item-label class="text-body2">{{ person.name }}</q-item-label>
             </q-item-section>
-            <q-item-section side>
-              <div class="flex items-center no-wrap" style="gap: 4px">
-                <q-btn flat round dense size="sm" icon="mdi-whatsapp" color="dark" />
-                <q-btn flat round dense size="sm" icon="mdi-email-outline" color="dark" />
-              </div>
-            </q-item-section>
           </q-item>
           <q-separator v-if="index < people.length - 1" />
         </template>
@@ -55,12 +46,6 @@ defineProps({
   flex-direction: column;
 }
 
-.header-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
 .list-scroll {
   flex: 1;
   overflow-y: auto;

+ 61 - 56
src/pages/dashboard/DashboardPage.vue

@@ -111,6 +111,58 @@
       <!-- Row 3: Bottom -->
       <div class="row q-col-gutter-md items-stretch">
         <div class="col-12 col-md-5">
+          <q-card flat class="card-ring full-height feriados-card">
+            <div class="flex justify-between items-center no-wrap q-mb-sm">
+              <span class="text-subtitle2 text-weight-regular">Feriados do mês</span>
+              <q-btn
+                flat
+                round
+                dense
+                icon="mdi-calendar-star"
+                color="grey-5"
+                @click="openFeriadosDialog"
+              />
+            </div>
+
+            <q-btn
+              unelevated
+              color="primary"
+              label="Nova data"
+              no-caps
+              class="full-width q-mb-md"
+              @click="openFeriadosDialog"
+            />
+
+            <div v-if="feriadosLoading" class="flex flex-center q-py-md">
+              <q-spinner color="primary" size="24px" />
+            </div>
+            <div v-else-if="feriadosMes.length === 0" class="text-caption text-grey-5 text-center q-mt-sm">
+              Nenhum feriado neste mês.
+            </div>
+            <div v-else class="row q-gutter-sm">
+              <div
+                v-for="feriado in feriadosMes"
+                :key="feriado.id"
+                class="column items-center cursor-pointer"
+                style="min-width: 52px"
+                @click="openEditFromDashboard(feriado)"
+              >
+                <q-badge
+                  color="deep-orange"
+                  class="text-subtitle1 text-bold q-pa-sm"
+                  style="min-width: 40px; justify-content: center"
+                >
+                  {{ feriado.dia }}
+                </q-badge>
+                <div class="text-caption q-mt-xs text-center">
+                  {{ feriado.nome }}
+                </div>
+              </div>
+            </div>
+          </q-card>
+        </div>
+
+        <div class="col-12 col-md-4">
           <DashboardChartCard title="Matrículas por Período" style="height: 100%">
             <GroupedBarChart
               :labels="matriculasChart.labels"
@@ -125,63 +177,8 @@
           </DashboardChartCard>
         </div>
 
-        <div class="col-12 col-md-4">
-          <AniversariantesCard :people="aniversariantes" style="height: 100%" />
-        </div>
-
         <div class="col-12 col-md-3">
-          <q-card flat bordered class="full-height">
-            <q-card-section class="row justify-between items-center q-pb-xs">
-              <span class="text-subtitle2 text-weight-medium"
-                >Feriados do mês</span
-              >
-              <q-btn
-                flat
-                round
-                dense
-                icon="mdi-calendar-star"
-                color="grey-5"
-                @click="openFeriadosDialog"
-              />
-            </q-card-section>
-            <q-separator />
-            <q-card-section class="q-pt-md">
-              <q-btn
-                unelevated
-                color="primary"
-                label="Nova data"
-                no-caps
-                class="full-width q-mb-md"
-                @click="openFeriadosDialog"
-              />
-              <div v-if="feriadosLoading" class="flex flex-center q-py-md">
-                <q-spinner color="primary" size="24px" />
-              </div>
-              <div v-else-if="feriadosMes.length === 0" class="text-caption text-grey-5 text-center">
-                Nenhum feriado neste mês.
-              </div>
-              <div v-else class="row q-gutter-sm">
-                <div
-                  v-for="feriado in feriadosMes"
-                  :key="feriado.id"
-                  class="column items-center cursor-pointer"
-                  style="min-width: 52px"
-                  @click="openEditFromDashboard(feriado)"
-                >
-                  <q-badge
-                    color="deep-orange"
-                    class="text-subtitle1 text-bold q-pa-sm"
-                    style="min-width: 40px; justify-content: center"
-                  >
-                    {{ feriado.dia }}
-                  </q-badge>
-                  <div class="text-caption q-mt-xs text-center">
-                    {{ feriado.nome }}
-                  </div>
-                </div>
-              </div>
-            </q-card-section>
-          </q-card>
+          <AniversariantesCard :people="aniversariantes" style="height: 100%" />
         </div>
       </div>
     </div>
@@ -360,6 +357,7 @@ const feriadosMes = computed(() => {
       holiday_date: h.holiday_date,
       description: h.description,
       type: h.type,
+      base_holiday_id: h.base_holiday_id ?? null,
     }));
 });
 
@@ -429,4 +427,11 @@ onMounted(() => {
   text-align: center;
   pointer-events: none;
 }
+
+.feriados-card {
+  border-radius: 12px;
+  padding: 20px 24px;
+  display: flex;
+  flex-direction: column;
+}
 </style>