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

<script lang="ts" setup>
import { computed, ComputedRef, PropType, Ref, ref, watch } from "vue";
import { Module } from "../model/module.ts";
import moduleStore from "../store/moduleStore";
import router from "../router";

const props = defineProps({
  modules: {
    type: Array as PropType<Module[]>,
    required: true,
  },
});

type ModuleWithSelection = { module: Module; selected: boolean };

// array of modules with boolean if selected with getter and setter
const modulesWithSelection: Ref<ModuleWithSelection[]> = ref(
  props.modules.map((propModule) => {
    return {
      module: propModule,
      selected: moduleStore().modules.some((module: Module) =>
        module.isEqual ? module.isEqual(propModule) : false,
      ),
    };
  }),
);

const selectedModules: ComputedRef<Module[]> = computed(() =>
  modulesWithSelection.value
    .filter((module) => module.selected)
    .map((module) => module.module),
);

const currentModules = computed(() => props.modules);

function selectAllModules(selection: boolean) {
  console.debug(props.modules);
  modulesWithSelection.value.forEach((module) => {
    module.selected = selection;
  });
}

const allSelected: Ref<boolean> = ref(true);

watch(currentModules, (newValue: Module[]) => {
  modulesWithSelection.value = newValue.map((module) => {
    return { module: module, selected: false };
  });
});

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

  router.push("/additional-modules");
}
</script>

<template>
  <div class="flex flex-column card-container mx-8 mt-2">
    <div class="flex align-items-center justify-content-center mb-3">
      <Button
        :disabled="selectedModules.length < 1"
        class="col-4 justify-content-center"
        @click="nextStep()"
        >{{ $t("moduleSelection.nextStep") }}
      </Button>
    </div>
    <div class="flex align-items-center justify-content-center">
      <DataView :value="modulesWithSelection" data-key="module">
        <template #header>
          <div class="flex justify-content-between flex-wrap">
            <div class="flex align-items-center justify-content-center">
              <h3>
                {{ $t("moduleSelection.modules") }} -
                {{ selectedModules.length }}
              </h3>
            </div>
            <div class="flex align-items-center justify-content-center">
              <ToggleButton
                v-model="allSelected"
                class="w-12rem"
                off-icon="pi pi-times"
                :off-label="$t('moduleSelection.deselectAll')"
                on-icon="pi pi-check"
                :on-label="$t('moduleSelection.selectAll')"
                @click="selectAllModules(!allSelected)"
              />
            </div>
          </div>
        </template>
        <template #empty>
          <p class="p-4 text-2xl font-bold text-900 empty-message">
            {{ $t("moduleSelection.noModulesAvailable") }}
          </p>
        </template>
        <template #list="slotProps">
          <div class="col-12">
            <div
              class="flex flex-column xl:flex-row xl:align-items-start p-2 gap-4"
            >
              <div
                class="flex flex-column sm:flex-row justify-content-between align-items-center flex-1 gap-4"
              >
                <div
                  class="flex flex-column align-items-center justify-content-center sm:align-items-start gap-3"
                >
                  <p class="text-lg">{{ slotProps.data.module.name }}</p>
                </div>
                <div
                  class="flex sm:flex-column justify-content-center sm:align-items-end gap-3 sm:gap-2"
                >
                  <ToggleButton
                    v-model="modulesWithSelection[slotProps.index].selected"
                    class="w-9rem"
                    off-icon="pi pi-times"
                    :off-label="$t('moduleSelection.unselected')"
                    on-icon="pi pi-check"
                    :on-label="$t('moduleSelection.selected')"
                  />
                </div>
              </div>
            </div>
          </div>
        </template>
      </DataView>
    </div>
  </div>
</template>

<style scoped>
@media screen and (min-width: 962px) {
  .empty-message {
    width: 50rem;
  }
}
</style>