htwkalender/frontend/src/components/editCalendar/EditAdditionalModules.vue

<script lang="ts" setup>
import { defineAsyncComponent, ref, Ref } from "vue";
import { Module } from "../../model/module.ts";
import { fetchAllModules } from "../../api/fetchCourse.ts";
import moduleStore from "../../store/moduleStore";
import { MultiSelectAllChangeEvent } from "primevue/multiselect";
import router from "../../router";
import { fetchModule } from "../../api/fetchModule.ts";
import { useDialog } from "primevue/usedialog";
import { useI18n } from "vue-i18n";

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

const fetchedModules = async () => {
  return await fetchAllModules();
};

const modules: Ref<Module[]> = ref([]);

const selectedModules: Ref<Module[]> = ref([] as Module[]);

fetchedModules().then(
  (data) =>
    (modules.value = data.map((module: Module) => {
      return module;
    })),
);

async function nextStep() {
  selectedModules.value.forEach((module: Module) => {
    moduleStore().addModule(module);
  });

  await router.push("/edit-calendar");
}

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

async function showInfo(module: Module) {
  await fetchModule(module).then((data: Module) => {
    dialog.open(ModuleInformation, {
      props: {
        style: {
          width: "50vw",
        },
        breakpoints: {
          "960px": "75vw",
          "640px": "90vw",
        },
        modal: true,
      },
      data: {
        module: data,
      },
    });
  });
}

const display = (module: Module) => module.name + " (" + module.course + ")";

const selectAll = ref(false);

const onSelectAllChange = (event: MultiSelectAllChangeEvent) => {
  selectedModules.value = event.checked
    ? modules.value.map((module) => module)
    : [];
  selectAll.value = event.checked;
};

function selectChange() {
  selectAll.value = selectedModules.value.length === modules.value.length;
}

function itemsLabel(selectedModules: Module[]): string {
  return (selectedModules ? selectedModules.length : 0) != 1
    ? t("additionalModules.modules")
    : t("additionalModules.module");
}

function itemsLabelWithNumber(selectedModules: Module[]): string {
  return (
    selectedModules.length.toString() +
    " " +
    itemsLabel(selectedModules) +
    " " +
    t("additionalModules.dropDownFooterSelected")
  );
}
</script>

<template>
  <div class="flex flex-column">
    <div class="flex align-items-center justify-content-center h-4rem m-2">
      <h3>
        {{ $t("additionalModules.subTitle") }}
      </h3>
    </div>
    <div class="card flex align-items-center justify-content-center m-2">
      <MultiSelect
        v-model="selectedModules"
        :max-selected-labels="1"
        :option-label="display"
        :options="modules"
        :select-all="selectAll"
        :virtual-scroller-options="{ itemSize: 70 }"
        class="custom-multiselect"
        filter
        :placeholder="$t('additionalModules.dropDown')"
        :auto-filter-focus="true"
        :show-toggle-all="false"
        :selected-items-label="itemsLabelWithNumber(selectedModules)"
        @change="selectChange()"
        @selectall-change="onSelectAllChange($event)"
      >
        <template #option="slotProps">
          <div class="flex justify-content-between w-full">
            <div class="flex align-items-center justify-content-center">
              <p class="text-1xl white-space-normal p-mb-0">
                {{ display(slotProps.option) }}
              </p>
            </div>
            <div class="flex align-items-center justify-content-center ml-2">
              <Button
                class="small-button"
                icon="pi pi-info"
                severity="secondary"
                rounded
                outlined
                aria-label="Information"
                @click.stop="showInfo(slotProps.option)"
              ></Button>
              <DynamicDialog />
            </div>
          </div>
        </template>
        <template #footer>
          <div class="py-2 px-3">
            <b>{{ selectedModules ? selectedModules.length : 0 }}</b>
            item{{
              (selectedModules ? selectedModules.length : 0) > 1 ? "s" : ""
            }}
            selected.
          </div>
        </template>
      </MultiSelect>
    </div>
    <div class="flex align-items-center justify-content-center h-4rem m-2">
      <Button @click="nextStep()">{{
        $t("additionalModules.nextStep")
      }}</Button>
    </div>
  </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;
}
</style>