modulplaner-frontend/src/components/general/ClassRemovedRow.vue

<template>
  <div
    class="w-full rounded-lg drop-shadow-lg text-xs xl:text-base mb-5"
    :class="
      hasAlternativeChosen
        ? 'bg-sky-200 dark:bg-sky-700'
        : 'bg-white dark:bg-gray-600'
    "
  >
    <div
      class="flex flex-row gap-4 justify-between items-center m-2 py-3 mr-10"
    >
      <button
        class="action-button flex-none"
        :title="isOpen ? 'Schliessen' : 'Öffnen'"
        @click="isOpen = !isOpen"
      >
        <font-awesome-icon
          v-if="isOpen"
          icon="fa-solid fa-chevron-down"
        />
        <font-awesome-icon
          v-else
          icon="fa-solid fa-chevron-right"
        />
      </button>

      <span class="font-bold">{{ taughtClass.name }}</span>
      <span class="">{{ taughtClass.executionTime }}</span>
      <span class="">{{ taughtClass.class }}</span>
      <span class="hidden md:inline-block">{{
        taughtClass.teachers.join(", ")
      }}</span>
      <span class="hidden md:inline-block">{{
        taughtClass.rooms.join(", ")
      }}</span>
      <span class="">
        <TeachingTypeIcon :teaching-type="taughtClass.teaching_type" />
      </span>
    </div>

    <hr
      v-if="isOpen"
      class="-mt-2"
    >
    <div
      v-if="isOpen"
      class="bg-white dark:bg-gray-800 w-full rounded-b-lg"
    >
      <table
        v-if="alternatives.length > 0"
        class="w-full upgrade-module-table"
      >
        <thead>
          <tr>
            <td class="pl-5">
              Modul
            </td>
            <td>Durchführung</td>
            <td>Klasse</td>
            <td class="hidden md:table-cell">
              Dozent
            </td>
            <td class="hidden md:table-cell">
              Raum
            </td>
            <td>Art</td>
            <td class="hidden md:table-cell">
              MSP
            </td>
            <td class="w-24" />
          </tr>
        </thead>
        <tbody>
          <ClassRow
            v-for="(alt, idx) in alternatives"
            :key="alt.id"
            :cls="alt"
            :apply-row-class="idx == 0"
          />
        </tbody>
      </table>
      <div
        v-else
        class="w-full flex justify-center py-5 text-gray-800 dark:text-gray-300"
      >
        <span>Leider gibt es keine Alternativen!</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { PropType } from "vue";
import { TaughtClass } from "../../types";
import ClassRow from "../general/ClassRow.vue";
import { useClassesStore } from "../../stores/classes";
import { usePlanningStore } from "../../stores/planning";
import TeachingTypeIcon from "./TeachingTypeIcon.vue";

export default {
  name: "ClassRemovedRow",
  components: { ClassRow, TeachingTypeIcon },
  props: {
    taughtClass: {
      required: true,
      type: Object as PropType<TaughtClass>,
    },
  },
  data() {
    return {
      isOpen: false,
    };
  },
  computed: {
    alternatives(): TaughtClass[] {
      const classesStore = useClassesStore();
      return classesStore.allClasses.filter(
        (cls) => cls.name == this.taughtClass.name,
      );
    },
    hasAlternativeChosen(): boolean {
      const alternatives = this.alternatives;
      const planningStore = usePlanningStore();

      return planningStore.chosen.some((el) => {
        return alternatives.some((al) => el.id == al.id);
      });
    },
  },
};
</script>

<style>
.upgrade-module-table thead td {
  @apply border-b border-gray-700 h-8 text-gray-500 font-bold;
}
.upgrade-module-table thead tr {
  @apply hover:bg-inherit;
}
.upgrade-module-table tbody td {
  @apply border-0 h-12 cursor-pointer;
}
.upgrade-module-table tbody .row:last-child {
  @apply border-b-0;
}
.upgrade-module-table .class-name {
  @apply pl-5;
}
.upgrade-module-table tr {
  @apply hover:bg-gray-900 border-0;
}
</style>

<style scoped>
.action-button {
  @apply h-5
    text-xs
    md:h-7
    md:text-base
    mx-0.5
    md:mx-1
    block
    hover:bg-gray-400
    active:bg-gray-500
    disabled:bg-gray-100
    disabled:text-gray-400
    dark:hover:bg-gray-800
    dark:active:bg-gray-900
    dark:disabled:bg-gray-800
    dark:disabled:text-gray-600
    disabled:pointer-events-none
    aspect-square
    rounded
    transition-all
    duration-200;
}
</style>