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";

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

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

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);
  }
}

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

<template>
  <div class="flex flex-column w-full">
    <DataView 
      :value="modules"
      data-key="uuid"
      :class="
        [selectedCourse === ''? 
          ['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 md:mx-4">
            <h3>
              {{ $t("moduleSelection.modules") }} -
              {{ store.countModules() }}
            </h3>
          <div class="flex align-items-center justify-content-end white-space-nowrap">
            <p>{{ allSelected ? $t('moduleSelection.deselectAll') : $t('moduleSelection.selectAll')}}</p>
            <InputSwitch
              class="mx-2"
              :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="grid grid-nogutter">
        <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
          <div class="flex flex-column sm:flex-row justify-content-between align-items-center flex-1 column-gap-4 mx-2 md:mx-4">
            <p class="text-lg flex-1 align-self-stretch">{{ item.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(item)"
              @update:model-value="toggleModule(item)"
            />
        </div>
        </div>
        </div>
      </template>
    </DataView>
  </div>
</template>

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