htwkalender/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 card-container mx-8 mt-2">
    <div class="flex align-items-center justify-content-center mb-3">
      <Button
        :disabled="store.isEmpty()"
        class="col-4 justify-content-center"
        @click="nextStep()"
        >{{ $t("moduleSelection.nextStep") }}
      </Button>
    </div>
    <div class="flex align-items-center justify-content-center">
      <DataView :value="modules" data-key="uuid">
        <template #header>
          <div class="flex justify-content-between flex-wrap">
            <div class="flex align-items-center justify-content-center">
              <h3>
                {{ $t("moduleSelection.modules") }} -
                {{ store.countModules() }}
              </h3>
            </div>
            <div class="flex align-items-center justify-content-center">
              {{ 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 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.name }}</p>
                </div>
                <div
                  class="flex sm:flex-column justify-content-center sm:align-items-end gap-3 sm:gap-2"
                >
                  <ToggleButton
                    class="w-9rem"
                    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>
            </div>
          </div>
        </template>
      </DataView>
    </div>
  </div>
</template>

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