modulplaner-frontend/src/components/views/ModuleSelector.vue

<template>
  <LoadSaveView />

  <form
    @submit.prevent=""
    @keydown.enter.prevent=""
  >
    <ul>
      <li
        v-for="(filterSet, idx) in classesStore.filterRules"
        :key="filterSet.pk"
        class="mb-2"
      >
        <ClassFilter
          v-model="classesStore.filterRules[idx]"
          :is-last-filter="classesStore.filterRules.length == 1"
          @add-filter="classesStore.insertFilter"
          @remove-filter="classesStore.removeFilter"
        />
      </li>
    </ul>
  </form>

  <table
    class="module-table mt-5 border-collapse w-full text-center text-xs xl:text-sm 2xl:text-base"
  >
    <thead>
      <tr
        class="border-b dark:border-gray-500 font-bold bg-gray-200 h-10 dark:bg-gray-500 dark:text-white"
      >
        <td>
          <OrderingControl
            title="Modul"
            @changed="
              (order) => orderingChanged(ClassSelectorColumn.Module, order)
            "
          />
        </td>
        <td>
          <OrderingControl
            title="Durchführung"
            @changed="
              (order) => orderingChanged(ClassSelectorColumn.Time, order)
            "
          />
        </td>
        <td>
          <OrderingControl
            title="Klasse"
            @changed="
              (order) => orderingChanged(ClassSelectorColumn.Class, order)
            "
          />
        </td>
        <td class="hidden md:table-cell">
          <OrderingControl
            title="Dozent"
            @changed="
              (order) => orderingChanged(ClassSelectorColumn.Lecturer, order)
            "
          />
        </td>
        <td class="hidden md:table-cell">
          <OrderingControl
            title="Raum"
            @changed="
              (order) => orderingChanged(ClassSelectorColumn.Room, order)
            "
          />
        </td>
        <td>
          <OrderingControl
            title="Art"
            @changed="
              (order) =>
                orderingChanged(ClassSelectorColumn.TeachingType, order)
            "
          />
        </td>
        <td class="hidden xl:table-cell">
          <OrderingControl
            title="MSP"
            @changed="
              (order) => orderingChanged(ClassSelectorColumn.MSP, order)
            "
          />
        </td>
        <td />
      </tr>
    </thead>

    <ClassRow
      v-for="cls in paginatedClasses"
      :key="cls.id"
      :cls="cls"
    />
  </table>

  <div
    v-if="filteredModules.length == 0"
    class="flex flex-wrap justify-center mt-10 text-center"
  >
    <span
      class="text-2xl text-gray-400 dark:text-gray-600 no-results-text font-mono w-full"
    >Schade, leider gibt es keine Resultate...</span>
    <button
      title="Module durchsuchen"
      class="action-button mt-5"
      @click="stateStore.showingModuleSearch = true"
    >
      Alle Module durchsuchen
    </button>
  </div>

  <NumberedPagination
    v-model="currentPageIdx"
    :page-size="pageSize"
    :result-count="filteredModules.length"
  />
  <ModuleSearchModal />
</template>

<script lang="ts">
import { useClassesStore } from "../../stores/classes";
import { usePlanningStore } from "../../stores/planning";
import { classesPDFLink, dayMap, toTime } from "../../helpers";
import { watch } from "vue";
import LoadSaveView from "../general/ModulesetManager.vue";
import OrderingControl from "../general/OrderingControl.vue";
import { TaughtClass, ClassSelectorColumn, Ordering } from "../../types";
import { useStateStore } from "../../stores/state";
import { useStudenthubStore } from "../../stores/studenthub";
import { useModulesStore } from "../../stores/modules";
import ClassFilter from "../general/ClassFilter.vue";
import ClassRow from "../general/ClassRow.vue";
import ModuleSearchModal from "../modals/ModuleSearchModal.vue";
import NumberedPagination from "../general/NumberedPagination.vue";

export default {
  name: "ModuleSelector",
  components: {
    LoadSaveView,
    OrderingControl,
    ClassFilter,
    ClassRow,
    ModuleSearchModal,
    NumberedPagination,
  },
  setup() {
    const classesStore = useClassesStore();
    const planningStore = usePlanningStore();
    const stateStore = useStateStore();
    const studenthubStore = useStudenthubStore();
    const modulesStore = useModulesStore();

    return {
      classesStore,
      planningStore,
      studenthubStore,
      modulesStore,
      toTime,
      classesPDFLink,
      dayMap,
      pageSize: 12,
      stateStore,
      ClassSelectorColumn,
    };
  },
  data() {
    return {
      currentPageIdx: 0,
      inspectingClass: null as TaughtClass | null,
    };
  },
  computed: {
    filteredModules() {
      return this.classesStore.filteredModules;
    },
    paginatedClasses() {
      const idx = this.currentPageIdx;
      return this.filteredModules.slice(
        idx * this.pageSize,
        (idx + 1) * this.pageSize,
      );
    },
  },
  mounted() {
    watch(
      () => this.filteredModules,
      () => (this.currentPageIdx = 0),
    );
  },
  methods: {
    orderingChanged(col: ClassSelectorColumn, dir: Ordering) {
      this.classesStore.updateOrdering(col, dir);
    },
  },
};
</script>

<style scoped>
.no-results-text::after {
  @apply bg-gray-600 dark:bg-gray-300;
  content: "";
  width: 10px;
  height: 20px;
  margin-left: 3px;
  display: inline-block;
  animation: cursor-blink 1s alternate infinite;
}

@keyframes cursor-blink {
  0% {
    opacity: 0;
  }
}

.action-button {
  @apply h-10
    text-xs
    px-10
    md:text-base
    mx-0.5
    md:mx-1
    block
    bg-gray-300
    dark:bg-gray-700
    hover:bg-gray-400
    active:bg-gray-500
    dark:hover:bg-gray-600
    dark:active:bg-gray-700
    dark:disabled:bg-gray-800
    dark:disabled:text-gray-600
    disabled:pointer-events-none
    rounded
    transition-all
    duration-200;
}
</style>