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

<template>
  <tr
    class="row"
    :class="[rowStyling]"
  >
    <td @click="showModuleInformation">
      <span class="class-name">{{ cls.name }}</span>
    </td>
    <td @click="showModuleInformation">
      <span> {{ cls.executionTime }}</span>
    </td>
    <td @click="showModuleInformation">
      <span>{{ cls.class }}</span>
    </td>
    <td
      class="hidden md:table-cell"
      @click="showModuleInformation"
    >
      <span
        v-for="teacher in cls.teachers"
        :key="teacher"
        class="block"
      >{{
        teacher
      }}</span>
    </td>
    <td
      class="hidden md:table-cell"
      @click="showModuleInformation"
    >
      <span
        v-for="room in cls.rooms"
        :key="room"
        class="block"
      >{{
        room
      }}</span>
    </td>
    <td @click="showModuleInformation">
      <TeachingTypeIcon :teaching-type="cls.teaching_type" />
    </td>
    <td
      class="hidden xl:table-cell"
      @click="showModuleInformation"
    >
      <span>{{ cls.module?.hasMSP === true ? "Ja" : "" }}</span>
    </td>
    <td class="cursor-default">
      <button
        :title="addRemoveClassTitle(cls.module, classChosen)"
        class="action-button"
        :disabled="cls.module?.hasCompleted || cls.module?.maxAttemptsReached"
        @click="toggleClassState"
      >
        <font-awesome-icon
          v-if="addable"
          icon="fa-solid fa-plus"
        />
        <font-awesome-icon
          v-else
          icon="fa-solid fa-minus"
        />
      </button>
      <a
        title="Klassen PDF in einem neuem Tab öffnen"
        target="_blank"
        :href="classesPDFLink(cls)"
      >
        <button
          class="action-button"
          title="Klassen PDF in einem neuem Tab öffnen"
        >
          <!-- I just gave up styling the link... -->
          <font-awesome-icon icon="fa-solid fa-file-pdf" />
        </button>
      </a>
    </td>
  </tr>
</template>

<script lang="ts">
import { usePlanningStore } from "../../stores/planning";
import {
  classesPDFLink,
  dayMap,
  toTime,
  addRemoveClassTitle,
  rowStyling,
} from "../../helpers";
import { ClassSelectorColumn, TeachingType } from "../../types";
import { PropType } from "vue";
import { useStudenthubStore } from "../../stores/studenthub";
import { useStateStore } from "../../stores/state";
import TeachingTypeIcon from "./TeachingTypeIcon.vue";
import { TaughtClass } from "../../api/types/semesters/versions/class";

export default {
  name: "ClassRow",
  components: { TeachingTypeIcon },
  props: {
    cls: {
      required: true,
      type: Object as PropType<TaughtClass>,
    },
    applyRowClass: {
      required: false,
      type: Boolean,
      default: true,
    },
  },
  setup() {
    const planningStore = usePlanningStore();
    const studenthubStore = useStudenthubStore();
    const stateStore = useStateStore();
    return {
      planningStore,
      studenthubStore,
      stateStore,
      toTime,
      classesPDFLink,
      addRemoveClassTitle,
      dayMap,
      ClassSelectorColumn,
      TeachingType,
    };
  },
  data() {
    return {
      currentPageIdx: 0,
      inspectingClass: null as TaughtClass | null,
    };
  },
  computed: {
    classChosen(): boolean {
      return this.planningStore.isModuleChosen(this.cls);
    },
    addable(): boolean {
      return !this.classChosen || (this.cls.module?.hasCompleted ?? false);
    },
    rowStyling(): string {
      return rowStyling(this.cls.module);
    },
  },
  methods: {
    showModuleInformation() {
      this.stateStore.inspectingClass = this.cls;
    },
    toggleClassState() {
      if (this.classChosen) this.planningStore.remove(this.cls);
      else this.planningStore.add(this.cls);
    },
  },
};
</script>

<style scoped>
.row {
  @apply border-b
    cursor-pointer
    dark:border-gray-500
    hover:bg-slate-200
    dark:hover:bg-gray-700
    transition-all
    duration-100;
}

.module-table .row td {
  @apply border-x border-gray-300 dark:border-gray-500 h-11;
}

.action-button {
  @apply rounded-lg
    aspect-square
    inline-block
    w-6
    text-xs
    md:w-8
    md:text-base
    hover:bg-gray-300
    active:bg-gray-300
    dark:hover:bg-gray-500
    dark:active:bg-gray-600
    mx-0.5
    transition-all
    duration-200
    disabled:hover:bg-inherit
    disabled:text-gray-300
    disabled:dark:text-gray-500;
}
</style>