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

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

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(moduleName: string) {
  const module: Ref<Module> = ref(new Module("", "", "", "", "", []));
  await fetchModule(moduleName).then((data) => {
    module.value = 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)
    : [];
  selectAll.value = event.checked;
};

function selectChange() {
  selectAll.value = selectedModules.value.length === modules.value.length;
}
</script>

<template>
  <div class="flex flex-column">
    <div class="flex align-items-center justify-content-center h-4rem m-2">
      <h3>
        Select additional Modules that are not listed in the regular semester
        for your Course
      </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="Select additional modules"
        @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
                icon="pi pi-info"
                severity="secondary"
                rounded
                outlined
                aria-label="Information"
                @click.stop="showInfo(slotProps.option.name)"
              ></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()">Next Step</Button>
    </div>
  </div>
</template>

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

:deep(.custom-multiselect li) {
  height: unset;
}
</style>