htwkalender/frontend/src/view/AdditionalModules.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.ts";
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("/rename-modules");
}

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

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

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) => 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"
        @change="selectChange()"
        @selectall-change="onSelectAllChange($event)"
        :selectedItemsLabel="itemsLabelWithNumber(selectedModules)"
      >
        <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
                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>
            {{ itemsLabel(selectedModules) }}
            {{ $t("additionalModules.dropDownFooterSelected") }}
          </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;
}
</style>