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

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

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

const modules : ComputedRef<Module[]> = computed(() => props.modules);

store.modules.clear();

const allSelected : ComputedRef<boolean> = 
  computed(() => props.modules.every((module) => store.hasModule(module)));

function toggleAllModules(){
  if (allSelected.value) {
    store.removeAllModules();
  } else {
    store.overwriteModules(props.modules);
  }
  console.debug(props.modules);
}

function toggleModule(module: Module) {
  if (store.hasModule(module)) {
    store.removeModule(module);
  } else {
    store.addModule(module);
  }
}

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

<template>
  <div class="flex flex-column mx-8 mt-2 w-full">
    <Button
      :disabled="store.isEmpty()"
      class="col-12 md:col-4 mb-3 align-self-end"
      @click="nextStep()"
      icon="pi pi-arrow-right"
      :label="$t('moduleSelection.nextStep')"
    />
    <DataView 
      :value="modules"
      data-key="uuid"
      :class="
        [modules.length === 0? 
          ['opacity-0', 'pointer-events-none'] : 
          ['opacity-100', 'transition-all', 'transition-duration-500', 'transition-ease-in-out']
        ,
        'w-full']"
      >
      <template #header>
        <div class="flex justify-content-between align-items-center flex-wrap">
            <h3>
              {{ $t("moduleSelection.modules") }} -
              {{ store.countModules() }}
            </h3>
          <div class="flex flex-1 align-items-center justify-content-end white-space-nowrap">
            {{ allSelected ? $t('moduleSelection.deselectAll') : $t('moduleSelection.selectAll')}}
            <InputSwitch
              class="mx-4"
              :disabled="modules.length === 0"
              :model-value="allSelected"
              @update:model-value="toggleAllModules()"
            />
          </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 sm:flex-row justify-content-between align-items-center flex-1 column-gap-4 mx-2">
            <p class="text-lg flex-1 align-self-stretch">{{ slotProps.data.name }}</p>
            <ToggleButton
              class="w-9rem align-self-end my-2"
              off-icon="pi pi-times"
              :off-label="$t('moduleSelection.unselected')"
              on-icon="pi pi-check"
              :on-label="$t('moduleSelection.selected')"
              :model-value="store.hasModule(slotProps.data)"
              @update:model-value="toggleModule(slotProps.data)"
            />
          </div>
        </div>
      </template>
    </DataView>
  </div>
</template>

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