SubstitutionOverview.vue

<script setup>
import SubstitutionDay from "./substitutions/SubstitutionDay.vue";
import CRUDIterator from "aleksis.core/components/generic/CRUDIterator.vue";
import DateSelectFooter from "aleksis.core/components/generic/DateSelectFooter.vue";
import SubjectChip from "aleksis.apps.cursus/components/SubjectChip.vue";

import {
  amendedLessonsFromAbsences,
  patchAmendLessonsWithAmends,
  groupsByOwner,
} from "./amendLesson.graphql";

import dateSortedIteratorMixin from "../mixins/dateSortedIteratorMixin.js";
</script>

<template>
  <c-r-u-d-iterator
      :gql-query="gqlQuery"
      :gql-additional-query-args="gqlQueryArgs"
      :gql-patch-mutation="gqlPatchMutation"
      :get-patch-data="gqlGetPatchData"
      i18n-key="chronos.substitutions.overview"
      :enable-search="true"
      :enable-create="false"
      :show-create="false"
      :enable-delete="false"
      :enable-edit="true"
      :elevated="false"
      :force-model-item-update="true"
      @lastQuery="lastQuery = $event"
      fixed-header
      disable-pagination
      hide-default-footer
      use-deep-search
    >
      <template #additionalActions="{ attrs, on }">
        <v-autocomplete
          :items="groups"
          item-text="name"
          clearable
          return-object
          filled
          dense
          hide-details
          :placeholder="$t('chronos.substitutions.overview.filter.groups')"
          :loading="$apollo.queries.groups.loading"
          :value="currentObj"
          @input="changeSelection"
          @click:clear="changeSelection"
        />
        <v-alert type="info" outlined dense class="full-width">
          <v-row
            align="center"
            no-gutters
          >
            <v-col class="grow">
              {{ $t("chronos.substitutions.overview.info_alert.text") }}
            </v-col>
            <v-spacer></v-spacer>
            <v-col class="shrink">
              <v-btn
                color="info"
                outlined
                :to="{ name: 'kolego.absences' }"
              >
                {{ $t("chronos.substitutions.overview.info_alert.button") }}
              </v-btn>
            </v-col>
          </v-row>
        </v-alert>
      </template>

      <template #default="{ items }">
        <substitution-day
          v-for="{ date, itemsOfDay, first, last } in groupItemsByDay(items)"
          v-intersect="{
            handler: intersectHandler(date, first, last),
            options: {
              rootMargin: '-' + topMargin + 'px 0px 0px 0px',
              threshold: [0, 1],
            },
          }"
          :date="date"
          :substitutions="itemsOfDay"
          :lastQuery="lastQuery"
          :focus-on-mount="initDate && initDate.toMillis() === date.toMillis()"
          @init="transition"
          :key="'day-' + date"
          ref="days"
        />

        <date-select-footer
          :value="currentDate"
          @input="gotoDate"
          @prev="gotoPrev"
          @next="gotoNext"
        />
      </template>
    </c-r-u-d-iterator>
</template>

<script>
export default {
  name: "SubstitutionOverview",
  mixins: [dateSortedIteratorMixin],
  props: {
    objId: {
      type: [Number, String],
      required: false,
      default: null,
    },
  },
  data() {
    return {
      gqlQuery: amendedLessonsFromAbsences,
      gqlPatchMutation: patchAmendLessonsWithAmends,
      groups: [],
    };
  },
  methods: {
    gqlGetPatchData(item) {
      return { id: item.id, teachers: item.teachers };
    },
    changeSelection(selection) {
      this.$router.push({
        name: "chronos.substitutionOverview",
        params: {
          objId: selection.id,
        },
        hash: this.$route.hash,
      });
      this.resetDate();
    },
  },
  computed: {
    gqlQueryArgs() {
      return {
        objId: this.objId ? Number(this.objId) : null,
        dateStart: this.dateStart,
        dateEnd: this.dateEnd,
      };
    },
    currentObj() {
      return this.groups.find((o) => o.id === this.objId);
    },
  },
  apollo: {
    groups: groupsByOwner,
  },
};
</script>