memberApp/src/pages/ReportPage.vue

<template>
  <q-inner-loading
    :showing="loading"
    label="Please wait..."
    label-class="text-teal"
    label-style="font-size: 1.1em"
  />
  <div class="colums">
    <div class="row justify-end">
      <q-btn-dropdown
        ref="dropdownRef"
        class="q-ma-sm"
        color="primary"
        :label="$t('selectDates')"
        @show="loadSettings"
      >
        <DateDaySelect @update:dates="updateReport" />
        <div class="column justify-end q-pa-md">
          <div class="row q-ma-md">
            <q-input
              class="col-7"
              label-color="primary"
              :label="$t('filterEventName')"
              :hint="$t('hintFilterEventName')"
              type="text"
              v-model:model-value="filter"
            ></q-input>
          </div>
          <div class="row q-ma-md">
            <q-select
              class="col-7"
              :label="$t('filterByColumnValue')"
              dense
              v-model="group"
              :options="groups"
              option-label="name"
              option-value="id"
              multiple
              clearable
            />
          </div>

          <div class="row justify-end">
            <q-btn dense class="q-ma-md" color="primary" no-caps @click="applyDateChoice">{{
              $t('apply')
            }}</q-btn>
          </div>
        </div>
      </q-btn-dropdown>
    </div>
  </div>
  <div class="row justify-center q-ma-xs">
    <h3 class="col-12 text-center text-primary text-bold">{{ $t('report') }}</h3>
    <ReportStat :amounts="amounts" />
  </div>

  <div class="row justify-center">
    <div
      v-if="attendees !== undefined"
      :class="
        nonAttendees !== undefined ? 'col-12 col-sm-5 col-md-5 q-pa-md' : 'col-12 col-md-8 col-lg-5'
      "
    >
      <q-table
        flat
        dense
        :no-data-label="$t('noDataAvailable')"
        :loading-label="$t('loading')"
        :rows-per-page-label="$t('recordsPerPage')"
        :rows-per-page-options="[0]"
        :title="$t('attendees')"
        title-class="text-bold text-primary"
        :rows="attendees"
        :columns="columns"
      >
      </q-table>
    </div>
    <div
      v-if="nonAttendees !== undefined"
      :class="
        attendees !== undefined ? 'col-12 col-sm-5 col-md-5 q-pa-md' : 'col-12 col-md-8 col-lg-5'
      "
    >
      <q-table
        flat
        dense
        :title="$t('noneAttendees')"
        :no-data-label="$t('noDataAvailable')"
        :loading-label="$t('loading')"
        :rows-per-page-label="$t('recordsPerPage')"
        :rows-per-page-options="[0]"
        title-class="text-bold text-primary"
        :rows="nonAttendees"
        :columns="columns"
      >
      </q-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { appApi } from 'src/boot/axios';
import DateDaySelect from 'src/components/DateDaySelect.vue';
import { computed, onMounted, ref } from 'vue';
import { useNotify } from 'src/vueLib/general/useNotify';
import { i18n } from 'src/boot/lang';
import { databaseName } from 'src/vueLib/models/settings';
import type { Amount } from 'src/vueLib/models/report';
import ReportStat from 'src/components/ReportStat.vue';
import type { Group, Groups } from 'src/vueLib/models/group';
import { getLocalPageDefaults, setLocalPageDefaults } from 'src/localstorage/localStorage';

const filter = ref<string>('');
const group = ref<Group[]>([]);
const groups = ref<Groups>([]);
const allDates = ref<string[]>([]);
const attendees = ref();
const nonAttendees = ref();
const { NotifyResponse } = useNotify();
const dropdownRef = ref();
const loading = ref(false);
const amounts = ref<Amount[]>([]);

const columns = computed(() => [
  {
    name: 'firstName',
    align: 'left' as const,
    label: i18n.global.t('prename'),
    field: 'firstName',
    sortable: true,
  },
  {
    name: 'lastName',
    align: 'left' as const,
    label: i18n.global.t('lastName'),
    field: 'lastName',
    sortable: true,
  },
]);

onMounted(() => {
  loading.value = true;
  appApi
    .post('database/open', { dbPath: databaseName.value })
    .catch((err) => NotifyResponse(err, 'error'))

    .finally(() => {
      loading.value = false;
    });
  appApi
    .get('/groups')
    .then((resp) => (groups.value = resp.data))
    .catch((err) => NotifyResponse(err, 'error'))

    .finally(() => {
      loading.value = false;
    });
});

function loadSettings() {
  const settings = getLocalPageDefaults('report');
  if (!settings) return;
  if (settings.filteredValues.length > 0) {
    group.value = JSON.parse(settings?.filteredValues[0] || '') as Groups;
  }
}
function applyDateChoice() {
  amounts.value = [];

  loading.value = true;
  dropdownRef.value.hide();

  const payload: { name: null | string[]; date: string[]; groupIds: number[] | null } = {
    name: null,
    date: allDates.value,
    groupIds: null,
  };

  if (filter.value) {
    //name is a array of string and search works as example Test*, Ge*, *st
    payload.name = [filter.value];
  }
  if (group.value) {
    // group has to be array of id numbers
    payload.groupIds = group.value.map((g) => g.id);
  }
  payload.date = allDates.value;

  setLocalPageDefaults('report', filter.value || '', [JSON.stringify(group.value || '')]);

  appApi
    .post('report', payload)
    .then((resp) => {
      attendees.value = [];
      nonAttendees.value = [];
      if (!resp.data) return;
      if (resp.data.data === undefined) return;
      const data = resp.data.data;
      if (data.data === undefined) return;

      if (data.attendees) {
        attendees.value = data.attendees;
      }
      if (data.attendees) {
        nonAttendees.value = data.nonAttendees;
      }

      const days = [
        'Monday',
        'Tuesday',
        'Wednesday',
        'Thursday',
        'Friday',
        'Saturday',
        'Sunday',
        'total',
      ];

      amounts.value = days
        .filter((day) => data.data[day]) // Only include days that exist in the response
        .map((day) => ({
          ...data.data[day],
          name: i18n.global.t(day), // Dynamically translate the name
        }));
      if (amounts.value.length == 2) {
        amounts.value.splice(1);
      }
    })
    .catch((err) => NotifyResponse(err, 'error'))
    .finally(() => (loading.value = false));
}

function updateReport(dates: string[]) {
  allDates.value = dates;
}
</script>