htwkalender-pwa/frontend/src/components/AdditionalModuleTable.vue

<!--
Calendar implementation for the HTWK Leipzig timetable. Evaluation and display of the individual dates in iCal format.
Copyright (C) 2024 HTWKalender support@htwkalender.de

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.
-->

<script lang="ts" setup>
import { defineAsyncComponent, inject, onMounted, ref, Ref } from "vue";
import { Module } from "../model/module.ts";
import { fetchAllModules } from "../api/fetchCourse.ts";
import moduleStore from "../store/moduleStore.ts";
import { FilterMatchMode } from "primevue/api";
import {
  DataTableRowSelectEvent,
  DataTableRowUnselectEvent,
} from "primevue/datatable";
import { useDialog } from "primevue/usedialog";
import { router } from "@/main";
import { fetchModule } from "../api/fetchModule.ts";
import { useI18n } from "vue-i18n";
import { fetchEventTypes } from "../api/fetchEvents.ts";

const dialog = useDialog();
const { t } = useI18n({ useScope: "global" });

const store = moduleStore();
if (store.isEmpty()) {
  router.replace("/");
}

const eventTypes: Ref<string[]> = ref([]);


const mobilePage = inject("mobilePage") as Ref<boolean>;
const filters = ref({
  course: {
    value: null,
    matchMode: FilterMatchMode.CONTAINS,
  },
  name: {
    value: null,
    matchMode: FilterMatchMode.CONTAINS,
  },
  eventType: {
    value: null,
    matchMode: FilterMatchMode.IN,
  },
  prof: {
    value: null,
    matchMode: FilterMatchMode.CONTAINS,
  },
});

const loadedModules: Ref<Module[]> = ref(new Array(10));

const loadingData = ref(true);

onMounted( () => {
  fetchAllModules()
    .then(
      (data) =>
        (loadedModules.value = data.map((module: Module) => {
          return module;
        })),
    )
    .finally(() => {
      loadingData.value = false;
    });

  fetchEventTypes().then((data) => {
    eventTypes.value = data;
  });
});

const ModuleInformation = defineAsyncComponent(
  () => import("./ModuleInformation.vue"),
);

async function showInfo(module: Module) {
  await fetchModule(module).then((data) => {
    module = data;
  });
  dialog.open(ModuleInformation, {
    class: "w-full m-0",
    props: {
      style: {
        width: "80vw",
      },
      breakpoints: {
        "992px": "100vw",
        "640px": "100vw",
      },
      modal: true,
    },
    data: {
      module: module,
    },
  });
}

function selectModule(event: DataTableRowSelectEvent) {
  store.addModule(event.data);
}

function unselectModule(event: DataTableRowUnselectEvent) {
  store.removeModule(event.data);
}
</script>

<template>
  <div class="m-2 lg:w-10 w-full">
    <DynamicDialog />
    <DataTable
      id="dt-responsive-table"
      v-model:filters="filters"
      :selection="store.getAllModules()"
      :value="loadedModules"
      data-key="uuid"
      paginator
      :rows="10"
      :rows-per-page-options="[5, 10, 20, 50]"
      paginator-template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink RowsPerPageDropdown"
      :current-page-report-template="
        $t('additionalModules.paginator.from') +
        '{first}' +
        $t('additionalModules.paginator.to') +
        '{last}' +
        $t('additionalModules.paginator.of') +
        '{totalRecords}'
      "
      filter-display="row"
      :show-gridlines="true"
      :striped-rows="true"
      :select-all="false"
      :size="mobilePage ? 'small' : 'large'"
      @row-select="selectModule"
      @row-unselect="unselectModule"
    >
      <Column selection-mode="multiple">
        <template v-if="loadingData" #body>
          <Skeleton></Skeleton>
        </template>
      </Column>

      <Column
        field="course"
        :header="$t('additionalModules.course')"
        :show-clear-button="false"
        :show-filter-menu="false"
      >
        <template #filter="{ filterModel, filterCallback }">
          <InputText
            v-model="filterModel.value"
            type="text"
            class="p-column-filter max-w-10rem"
            @input="filterCallback()"
          />
        </template>
        <template v-if="loadingData" #body>
          <Skeleton></Skeleton>
        </template>
      </Column>
      <Column
        field="name"
        :header="$t('additionalModules.module')"
        :show-clear-button="false"
        :show-filter-menu="false"
      >
        <template #filter="{ filterModel, filterCallback }">
          <InputText
            v-model="filterModel.value"
            type="text"
            class="p-column-filter"
            @input="filterCallback()"
          />
        </template>
        <template v-if="loadingData" #body>
          <Skeleton></Skeleton>
        </template>
      </Column>
      <Column
        field="eventType"
        filter-field="eventType"
        :filter-menu-style="{ width: '10rem' }"
        style="min-width: 10rem"
        :header="$t('additionalModules.eventType')"
        :show-clear-button="false"
        :show-filter-menu="false"
      >
        <template #filter="{ filterModel, filterCallback }">
          <MultiSelect
            v-model="filterModel.value"
            :options="eventTypes"
            class="p-column-filter max-w-10rem"
            style="min-width: 10rem"
            @change="filterCallback()"
          />
        </template>
        <template v-if="loadingData" #body>
          <Skeleton></Skeleton>
        </template>
      </Column>
      <Column
        field="prof"
        :header="$t('additionalModules.professor')"
        :show-clear-button="false"
        :show-filter-menu="false"
      >
        <template v-if="loadingData" #body>
          <Skeleton></Skeleton>
        </template>
      </Column>
      <Column :header="$t('additionalModules.info')">
        <template #body="slotProps">
          <div v-if="loadingData">
            <Skeleton></Skeleton>
          </div>
          <div v-else>
            <Button
              icon="pi pi-info"
              severity="secondary"
              rounded
              outlined
              :aria-label="$t('additionalModules.info-long')"
              class="small-button"
              @click.stop="showInfo(slotProps.data)"
            ></Button>
          </div>
        </template>
      </Column>
      <template #footer>
        <div class="py-2 px-3">
          {{
            t("additionalModules.footerModulesSelected", {
              count: store?.countModules() ?? 0,
            })
          }}
        </div>
      </template>
    </DataTable>
  </div>
</template>

<style scoped>
:deep(.custom-multiselect) {
  width: 50rem;
}

:deep(.custom-multiselect li) {
  height: unset;
}

.small-button.p-button {
  width: 2rem;
  height: 2rem;
  padding: 0;
}

:deep(.p-filter-column .p-checkbox .p-component) {
  display: none !important;
}
</style>