feat: relatorios de midia

src/pages/students/components/EditStudentDialog.vue

@@ -18,7 +18,10 @@
         </div>
 
         <div v-show="currentTab === 'responsible'">
-          <ResponsibleTab ref="responsibleTabRef" :student-id="props.student.id" />
+          <ResponsibleTab
+            ref="responsibleTabRef"
+            :student-id="props.student.id"
+          />
         </div>
 
         <div v-show="currentTab === 'contracts'">
@@ -103,7 +106,7 @@ const tabs = [
   { name: "profile", label: "Perfil do Aluno" },
   { name: "responsible", label: "Responsáveis" },
   { name: "contracts", label: "Contratos" },
-  { name: "history", label: "Histórico" },
+  { name: "history", label: "Frequência" },
   { name: "media", label: "Mídias" },
 ];
 

src/pages/students/tabs/HistoryTab.vue

@@ -1,157 +1,99 @@
 <template>
   <div>
-    <div v-show="currentView === null">
-      <DefaultTable
-        v-model:rows="contractRows"
-        title="Contratos"
-        :columns="contractColumns"
-        descricao="contratos"
-        :feminino="false"
-        no-api-call
+    <div class="row items-center q-mb-lg" style="gap: 8px">
+      <span class="text-subtitle1 text-weight-medium"
+        >Relatório de Presença</span
       >
-        <template #body-cell-period="{ row }">
-          <q-td>{{ row.started_date }} — {{ row.end_date }}</q-td>
-        </template>
-
-        <template #body-cell-status="{ row }">
-          <q-td align="center">
-            <q-badge
-              :color="row.status === 'active' ? 'positive' : 'warning'"
-              :label="row.status === 'active' ? 'Ativo' : 'Inativo'"
-            />
-          </q-td>
-        </template>
-
-        <template #body-cell-actions>
-          <q-td auto-width>
-            <q-item-section class="no-wrap" style="flex-direction: row">
-              <q-btn
-                outline
-                icon="mdi-pencil-outline"
-                style="width: 36px"
-                class="q-mr-sm"
-                @click.prevent.stop="() => {}"
-              />
-              <q-btn
-                outline
-                icon="mdi-trash-can-outline"
-                style="width: 36px"
-                class="q-mr-sm"
-                @click.prevent.stop="() => {}"
-              />
-            </q-item-section>
-          </q-td>
-        </template>
-      </DefaultTable>
-
-      <div class="row q-mt-lg" style="gap: 1rem">
-        <div class="col">
-          <div class="text-subtitle1 q-mb-sm">Frequência</div>
-          <div style="height: 280px">
-            <BarChart
-              :data="frequencyChartData"
-              data-set-label="Presenças"
-              label-x="Mês"
-              label-y="Aulas"
-              title="Frequência"
-            />
-          </div>
-        </div>
-
-        <div class="col-md-4 col-12">
-          <div class="text-subtitle1 q-mb-sm">Ocorrências</div>
-          <div class="column" style="gap: 8px">
-            <q-btn
-              color="primary-2"
-              label="Notas"
-              no-caps
-              unelevated
-              @click="currentView = 'notes'"
-            />
-            <q-btn
-              color="primary-2"
-              label="Relatório de Presença"
-              no-caps
-              unelevated
-              @click="currentView = 'attendance'"
-            />
-            <q-btn
-              color="primary-2"
-              label="Arquivos em Anexo"
-              no-caps
-              unelevated
-              @click="currentView = 'files'"
-            />
-          </div>
-        </div>
-      </div>
     </div>
 
-    <div v-show="currentView === 'notes'">
-      <div class="row items-center q-mb-md" style="gap: 8px">
-        <q-btn flat round dense icon="mdi-arrow-left" @click="currentView = null" />
-        <span class="text-h6">Notas</span>
-      </div>
-      <DefaultSelect
-        v-model="selectedCourse"
-        label="Curso"
-        :options="[]"
-        class="q-mb-md"
-      />
-      <q-list bordered separator>
-        <q-item v-if="notes.length === 0">
-          <q-item-section class="text-grey">Nenhuma nota adicionada.</q-item-section>
-        </q-item>
-        <q-item v-for="(note, i) in notes" :key="i">
-          <q-item-section>{{ note }}</q-item-section>
-        </q-item>
-      </q-list>
-    </div>
-
-    <div v-show="currentView === 'attendance'">
-      <div class="row items-center q-mb-md" style="gap: 8px">
-        <q-btn flat round dense icon="mdi-arrow-left" @click="currentView = null" />
-        <span class="text-h6">Relatório de Presença</span>
+    <div v-for="course in courses" :key="course.id" class="q-mb-sm">
+      <div
+        class="row items-center q-px-md q-py-sm rounded-borders"
+        style="border: 1px solid #e0e0e0; cursor: default"
+      >
+        <span class="col text-body2" style="color: #e8825a">{{
+          course.name
+        }}</span>
+        <q-btn
+          flat
+          round
+          dense
+          :icon="
+            expandedCourses.includes(course.id) ? 'mdi-eye' : 'mdi-eye-outline'
+          "
+          @click="toggleCourse(course.id)"
+        />
       </div>
-      <q-list bordered separator>
-        <q-item v-if="attendanceItems.length === 0">
-          <q-item-section class="text-grey">Nenhum registro encontrado.</q-item-section>
-        </q-item>
-      </q-list>
-    </div>
 
-    <div v-show="currentView === 'files'">
-      <div class="row items-center q-mb-md" style="gap: 8px">
-        <q-btn flat round dense icon="mdi-arrow-left" @click="currentView = null" />
-        <span class="text-h6">Arquivos em Anexo</span>
+      <div v-if="expandedCourses.includes(course.id)">
+        <q-markup-table flat bordered class="q-mt-xs">
+          <thead>
+            <tr>
+              <th class="text-left">Item</th>
+              <th class="text-left">Data</th>
+              <th class="text-left">Status</th>
+              <th class="text-right">Justificativa</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(record, index) in course.attendances" :key="index">
+              <td>{{ record.item }}</td>
+              <td>
+                <q-badge
+                  :label="record.date"
+                  style="
+                    background-color: #6ed4c8;
+                    color: #fff;
+                    font-size: 0.75rem;
+                    padding: 4px 8px;
+                    border-radius: 12px;
+                  "
+                />
+              </td>
+              <td>{{ record.status }}</td>
+              <td class="text-right">{{ record.justification }}</td>
+            </tr>
+          </tbody>
+        </q-markup-table>
       </div>
-      <q-list bordered separator>
-        <q-item v-if="attachedFiles.length === 0">
-          <q-item-section class="text-grey">Nenhum arquivo anexado.</q-item-section>
-        </q-item>
-      </q-list>
     </div>
   </div>
 </template>
 
 <script setup>
 import { ref } from "vue";
-import DefaultTable from "src/components/defaults/DefaultTable.vue";
-import DefaultSelect from "src/components/defaults/DefaultSelect.vue";
-import BarChart from "src/components/charts/normal/BarChart.vue";
 
-const contractRows = ref([]);
-const contractColumns = ref([
-  { name: "contract", label: "Contrato", field: "protocol", align: "left" },
-  { name: "period", label: "Data Inicial - Final", field: null, align: "left" },
-  { name: "status", label: "Status Contrato", field: "status", align: "center" },
-  { name: "actions", label: "Ações", field: null, align: "center" },
+const expandedCourses = ref([1]);
+
+const courses = ref([
+  {
+    id: 1,
+    name: "Inteligência extrema",
+    attendances: [
+      { item: 1, date: "15/02", status: "Presente", justification: "-" },
+      { item: 2, date: "18/02", status: "Presente", justification: "-" },
+      { item: 3, date: "20/02", status: "Ausente", justification: "Sim" },
+      { item: 3, date: "20/02", status: "Ausente", justification: "Não" },
+    ],
+  },
+  {
+    id: 2,
+    name: "Inteligência extrema II",
+    attendances: [],
+  },
+  {
+    id: 3,
+    name: "Inteligência extrema III",
+    attendances: [],
+  },
 ]);
 
-const currentView = ref(null);
-const selectedCourse = ref(null);
-const notes = ref([]);
-const attendanceItems = ref([]);
-const attachedFiles = ref([]);
-const frequencyChartData = ref({ chart_data: [] });
+function toggleCourse(id) {
+  const idx = expandedCourses.value.indexOf(id);
+  if (idx === -1) {
+    expandedCourses.value.push(id);
+  } else {
+    expandedCourses.value.splice(idx, 1);
+  }
+}
 </script>

src/pages/students/tabs/MediaTab.vue

@@ -1,11 +1,70 @@
 <template>
-  <div class="flex justify-center items-center q-pa-xl text-grey-6">
-    <div class="column items-center" style="gap: 8px">
-      <q-icon name="mdi-image-multiple-outline" size="48px" />
-      <span>Mídias em breve.</span>
-    </div>
+  <div>
+    <DefaultTable
+      v-model:rows="rows"
+      :columns="columns"
+      no-api-call
+      add-item
+      :show-search-field="false"
+      hide-no-data-label
+      @on-add-item="addMedia"
+    >
+      <template #body-cell-item="{ rowIndex }">
+        <q-td>{{ rowIndex + 1 }}</q-td>
+      </template>
+
+      <template #body-cell-actions="{ row }">
+        <q-btn
+          flat
+          round
+          dense
+          icon="mdi-eye-outline"
+          class="q-mr-xs"
+          @click.stop="viewMedia(row)"
+        />
+        <q-btn
+          flat
+          round
+          dense
+          icon="mdi-trash-can-outline"
+          @click.stop="deleteMedia(row)"
+        />
+      </template>
+    </DefaultTable>
   </div>
 </template>
 
 <script setup>
+import { ref } from "vue";
+import DefaultTable from "src/components/defaults/DefaultTable.vue";
+
+const rows = ref([
+  { id: 1, date: "23/08/2024", name: "Comprovante de pagamento" },
+  { id: 2, date: "23/08/2024", name: "Certidão de nascimento" },
+  { id: 3, date: "23/08/2024", name: "Comprovante de residência" },
+]);
+
+const columns = [
+  { name: "item", label: "Item", field: "id", align: "left" },
+  { name: "date", label: "Data", field: "date", align: "left" },
+  {
+    name: "name",
+    label: "Comprovante de pagamento",
+    field: "name",
+    align: "left",
+  },
+  { name: "actions", label: "Ações", field: null, align: "right" },
+];
+
+function addMedia() {
+  // TODO: open upload dialog
+}
+
+function viewMedia(row) {
+  console.log(row);
+}
+
+function deleteMedia(row) {
+  rows.value = rows.value.filter((r) => r.id !== row.id);
+}
 </script>