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

<template>
  <tr
    class="row"
    :class="[highlight ? 'italic bg-gray-300 dark:bg-gray-900' : '']"
  >
    <td
      class="cursor-pointer"
      @click="clickedRow"
    >
      {{ cls.executionTime }}
    </td>
    <td
      class="cursor-pointer"
      @click="clickedRow"
    >
      {{ cls.class }}
    </td>
    <td
      class="cursor-pointer"
      @click="clickedRow"
    >
      {{ cls.teachers.join(", ") }}
    </td>
    <td
      class="cursor-pointer"
      @click="clickedRow"
    >
      <span class="mr-2">{{ cls.rooms.join(", ") }}</span>
      <TeachingTypeIcon :teaching-type="cls.teaching_type" />
    </td>
    <td>
      <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 { PropType } from "vue";
import { addRemoveClassTitle, classesPDFLink } from "../../helpers";
import { usePlanningStore } from "../../stores/planning";
import { useStateStore } from "../../stores/state";
import TeachingTypeIcon from "../general/TeachingTypeIcon.vue";
import { TaughtClass } from "../../api/types/semesters/versions/class";

export default {
  name: "CurrentModuleExecutionsRow",
  components: { TeachingTypeIcon },
  props: {
    cls: {
      required: true,
      type: Object as PropType<TaughtClass>,
    },
    highlight: {
      required: false,
      type: Boolean,
      default: false,
    },
  },
  setup() {
    const planningStore = usePlanningStore();
    const stateStore = useStateStore();
    return {
      planningStore,
      stateStore,
      classesPDFLink,
      addRemoveClassTitle,
    };
  },
  computed: {
    classChosen(): boolean {
      return this.planningStore.isModuleChosen(this.cls);
    },
    addable(): boolean {
      return !this.classChosen || (this.cls.module?.hasCompleted ?? false);
    },
  },
  methods: {
    toggleClassState() {
      if (this.classChosen) this.planningStore.remove(this.cls);
      else this.planningStore.add(this.cls);
    },
    clickedRow() {
      this.stateStore.inspectingClass = this.cls;
      this.stateStore.inspectingModule = null;
    },
  },
};
</script>

<style scoped>
.row {
  @apply border-b
    dark:border-gray-500
    hover:bg-slate-200
    dark:hover:bg-gray-700
    transition-all
    duration-100;
}
.module-table 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
    cursor-pointer;
}
</style>