From 0ca2a00e761f3ae60d2bb4d06ad4eb9597bf64ae Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Thu, 2 May 2024 09:16:10 +0200
Subject: [PATCH] Remove Objective Components

---
 client/src/App.vue                            |   2 -
 .../objective-groups/NewObjectiveWizard.vue   | 120 -----------------
 .../components/objective-groups/Objective.vue | 127 ------------------
 .../objective-groups/ObjectiveForm.vue        |  45 -------
 .../objective-groups/ObjectiveGroup.vue       |  92 -------------
 .../objective-groups/ObjectiveGroups.vue      |  75 -----------
 6 files changed, 461 deletions(-)
 delete mode 100644 client/src/components/objective-groups/NewObjectiveWizard.vue
 delete mode 100644 client/src/components/objective-groups/Objective.vue
 delete mode 100644 client/src/components/objective-groups/ObjectiveForm.vue
 delete mode 100644 client/src/components/objective-groups/ObjectiveGroup.vue
 delete mode 100644 client/src/components/objective-groups/ObjectiveGroups.vue

diff --git a/client/src/App.vue b/client/src/App.vue
index 954e7533..464ac1b3 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -37,7 +37,6 @@ const EditRoomEntryWizard = defineAsyncComponent(() =>
 );
 const NewProjectEntryWizard = defineAsyncComponent(() => import('@/components/portfolio/NewProjectEntryWizard.vue'));
 const EditProjectEntryWizard = defineAsyncComponent(() => import('@/components/portfolio/EditProjectEntryWizard.vue'));
-const NewObjectiveWizard = defineAsyncComponent(() => import('@/components/objective-groups/NewObjectiveWizard.vue'));
 const NewNoteWizard = defineAsyncComponent(() => import('@/components/notes/NewNoteWizard.vue'));
 const EditNoteWizard = defineAsyncComponent(() => import('@/components/notes/EditNoteWizard.vue'));
 const EditClassNameWizard = defineAsyncComponent(() => import('@/components/school-class/EditClassNameWizard.vue'));
@@ -69,7 +68,6 @@ export default {
     EditRoomEntryWizard,
     NewProjectEntryWizard,
     EditProjectEntryWizard,
-    NewObjectiveWizard,
     NewNoteWizard,
     EditNoteWizard,
     EditClassNameWizard,
diff --git a/client/src/components/objective-groups/NewObjectiveWizard.vue b/client/src/components/objective-groups/NewObjectiveWizard.vue
deleted file mode 100644
index e160fcc4..00000000
--- a/client/src/components/objective-groups/NewObjectiveWizard.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
-  <modal
-    :hide-header="true"
-    :small="true"
-  >
-    <modal-input
-      :placeholder="'Lernziel'"
-      :value="text"
-      @input="text = $event"
-    />
-
-    <template #footer>
-      <div>
-        <a
-          :class="{ 'button--disabled': disableSave }"
-          class="button button--primary"
-          data-cy="modal-save-button"
-          @click="save(text)"
-          >Speichern</a
-        >
-        <a
-          class="button"
-          @click="hide()"
-          >Abbrechen</a
-        >
-      </div>
-    </template>
-  </modal>
-</template>
-
-<script>
-import Modal from '@/components/Modal.vue';
-import ModalInput from '@/components/ModalInput.vue';
-
-import NEW_OBJECTIVE_MUTATION from '@/graphql/gql/mutations/addObjective.gql';
-import OBJECTIVE_GROUP_QUERY from '@/graphql/gql/queries/objectiveGroupQuery.gql';
-
-export default {
-  components: {
-    Modal,
-    ModalInput,
-  },
-
-  data() {
-    return {
-      text: '',
-      saving: false,
-    };
-  },
-
-  computed: {
-    objectiveGroup() {
-      return this.$modal.state.payload.parent;
-    },
-    disableSave() {
-      return this.saving;
-    },
-  },
-
-  methods: {
-    save(entry) {
-      this.saving = true;
-      this.$apollo
-        .mutate({
-          mutation: NEW_OBJECTIVE_MUTATION,
-          variables: {
-            input: {
-              objective: Object.assign(
-                {},
-                {
-                  objectiveGroup: this.objectiveGroup,
-                  text: entry,
-                }
-              ),
-            },
-          },
-          update: (
-            store,
-            {
-              data: {
-                addObjective: { objective },
-              },
-            }
-          ) => {
-            try {
-              const query = OBJECTIVE_GROUP_QUERY;
-              const variables = { id: this.objectiveGroup };
-              const { objectiveGroup } = store.readQuery({ query, variables });
-              if (objectiveGroup && objectiveGroup.objectives) {
-                const objectives = [
-                  ...objectiveGroup.objectives,
-                  {
-                    ...objective,
-                    __typename: 'ObjectiveNode',
-                  },
-                ];
-                const data = {
-                  objectiveGroup: {
-                    ...objectiveGroup,
-                    objectives,
-                  },
-                };
-                store.writeQuery({ query, variables, data });
-              }
-            } catch (e) {
-              // Query did not exist in the cache, and apollo throws a generic Error. Do nothing
-            }
-          },
-        })
-        .then(() => {
-          this.saving = false;
-          this.$modal.confirm();
-        });
-    },
-    hide() {
-      this.$modal.cancel();
-    },
-  },
-};
-</script>
diff --git a/client/src/components/objective-groups/Objective.vue b/client/src/components/objective-groups/Objective.vue
deleted file mode 100644
index b3e53987..00000000
--- a/client/src/components/objective-groups/Objective.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<template>
-  <li
-    :class="{ 'hideable-element--greyed-out': hidden }"
-    class="objective hideable-element"
-    v-if="editMode || !hidden"
-  >
-    <visibility-action
-      :block="objective"
-      :type="type"
-      v-if="editMode"
-    />
-    <div
-      class="block-actions"
-      v-if="editMode && canEdit"
-    >
-      <user-widget
-        v-bind="me"
-        class="block-actions__user-widget objective__user-widget"
-      />
-      <more-options-widget>
-        <div class="popover-links__link">
-          <a @click="deleteObjective(objective)">Löschen</a>
-        </div>
-      </more-options-widget>
-    </div>
-    <div>
-      {{ objective.text }}
-    </div>
-  </li>
-</template>
-
-<script>
-import VisibilityAction from '@/components/visibility/VisibilityAction.vue';
-import UserWidget from '@/components/UserWidget.vue';
-import MoreOptionsWidget from '@/components/MoreOptionsWidget.vue';
-
-import DELETE_OBJECTIVE_MUTATION from '@/graphql/gql/mutations/deleteObjective.gql';
-import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
-import { hidden } from '@/helpers/visibility';
-import { OBJECTIVE_TYPE } from '@/consts/types';
-
-import me from '@/mixins/me';
-
-export default {
-  props: {
-    objective: {
-      type: Object,
-      default: null,
-    },
-    editMode: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  mixins: [me],
-
-  components: {
-    MoreOptionsWidget,
-    VisibilityAction,
-    UserWidget,
-  },
-
-  data() {
-    return {
-      type: OBJECTIVE_TYPE,
-    };
-  },
-
-  computed: {
-    hidden() {
-      return hidden({
-        block: this.objective,
-        schoolClass: this.schoolClass,
-        type: this.type,
-      });
-    },
-    canEdit() {
-      return this.objective.mine;
-    },
-  },
-
-  methods: {
-    deleteObjective(objective) {
-      this.$apollo.mutate({
-        mutation: DELETE_OBJECTIVE_MUTATION,
-        variables: {
-          input: {
-            id: objective.id,
-          },
-        },
-        refetchQueries: [
-          {
-            query: MODULE_DETAILS_QUERY,
-            variables: {
-              slug: this.$route.params.slug,
-            },
-          },
-        ],
-        // todo: make update work here also
-        // update(store, {data: {deleteObjective: {success}}}) {
-        //   if (success) {
-        //     const query = MODULE_DETAILS_QUERY;
-        //     const variables = {slug: this.$route.params.slug};
-        //     const data = store.readQuery({query, variables});
-        //     if (data) {
-        //       data.module.objectiveGroups.edges.
-        //       data.rooms.edges.splice(data.rooms.edges.findIndex(edge => edge.node.id === theId), 1);
-        //       store.writeQuery({query, variables, data});
-        //     }
-        //   }
-        // }
-      });
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss">
-.objective {
-  min-height: 50px;
-
-  &__user-widget {
-    margin-right: 0;
-  }
-}
-</style>
diff --git a/client/src/components/objective-groups/ObjectiveForm.vue b/client/src/components/objective-groups/ObjectiveForm.vue
deleted file mode 100644
index 61a600ea..00000000
--- a/client/src/components/objective-groups/ObjectiveForm.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-  <div class="objective-form">
-    <modal-input
-      :value="objective.text"
-      class="objective-form__input"
-      placeholder="Lernziel erfassen..."
-      @input="$emit('input', $event)"
-    />
-    <a
-      class="icon-button"
-      @click="$emit('delete')"
-    >
-      <trash-icon class="icon-button__icon icon-button__icon--subtle" />
-    </a>
-  </div>
-</template>
-
-<script>
-import ModalInput from '@/components/ModalInput.vue';
-import { defineAsyncComponent } from 'vue';
-const TrashIcon = defineAsyncComponent(() => import('@/components/icons/TrashIcon.vue'));
-
-export default {
-  props: ['objective'],
-
-  components: {
-    ModalInput,
-    TrashIcon,
-  },
-};
-</script>
-
-<style scoped lang="scss">
-@import '@/styles/_variables.scss';
-
-.objective-form {
-  display: grid;
-  grid-template-columns: 1fr 50px;
-  margin-bottom: 10px;
-
-  &__input {
-    width: $modal-input-width;
-  }
-}
-</style>
diff --git a/client/src/components/objective-groups/ObjectiveGroup.vue b/client/src/components/objective-groups/ObjectiveGroup.vue
deleted file mode 100644
index 8d1b4e19..00000000
--- a/client/src/components/objective-groups/ObjectiveGroup.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-  <div
-    :class="{ 'hideable-element--greyed-out': hidden }"
-    class="objective-group hideable-element"
-    v-if="editMode || !hidden"
-  >
-    <visibility-action
-      :block="group"
-      :type="type"
-      v-if="editMode"
-    />
-
-    <h4>{{ group.displayTitle }}</h4>
-
-    <ul class="objective-group__objective-list">
-      <objective
-        :objective="objective"
-        class="objective-group__objective"
-        :edit-mode="editMode"
-        v-for="objective in group.objectives"
-        :key="objective.id"
-      />
-    </ul>
-    <add-content-button
-      :parent="group"
-      :where="{ parent: group }"
-      v-if="editMode"
-    />
-  </div>
-</template>
-
-<script>
-import Objective from '@/components/objective-groups/Objective.vue';
-import VisibilityAction from '@/components/visibility/VisibilityAction.vue';
-import AddContentButton from '@/components/AddContentButton.vue';
-
-import me from '@/mixins/me';
-
-import { OBJECTIVE_GROUP_TYPE } from '@/consts/types';
-import { hidden } from '@/helpers/visibility';
-
-export default {
-  props: {
-    group: {
-      required: true,
-      type: Object,
-    },
-  },
-
-  mixins: [me],
-
-  components: {
-    AddContentButton,
-    Objective,
-    VisibilityAction,
-  },
-
-  data() {
-    return {
-      type: OBJECTIVE_GROUP_TYPE,
-    };
-  },
-
-  computed: {
-    editMode() {
-      return this.group.module?.inEditMode || false;
-    },
-    hidden() {
-      return hidden({
-        block: this.group,
-        schoolClass: this.schoolClass,
-        type: this.type,
-      });
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss">
-@import 'styles/helpers';
-
-.objective-group {
-  position: relative;
-
-  &__actions {
-    position: absolute;
-    left: -70px;
-    top: -4px;
-    display: grid;
-  }
-}
-</style>
diff --git a/client/src/components/objective-groups/ObjectiveGroups.vue b/client/src/components/objective-groups/ObjectiveGroups.vue
deleted file mode 100644
index 2131fed3..00000000
--- a/client/src/components/objective-groups/ObjectiveGroups.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-  <div class="objective-groups">
-    <template v-for="group in filteredObjectiveGroups">
-      <objective-group
-        :group="group"
-        v-if="group.objectives.length"
-        :key="group.id"
-      />
-    </template>
-  </div>
-</template>
-
-<script>
-import ObjectiveGroup from '@/components/objective-groups/ObjectiveGroup.vue';
-import { meQuery } from '@/graphql/queries';
-
-export default {
-  props: {
-    groups: {
-      type: Array,
-      default: () => [],
-    },
-  },
-
-  components: {
-    ObjectiveGroup,
-  },
-
-  apollo: {
-    me: meQuery,
-  },
-
-  data() {
-    return {
-      me: {},
-    };
-  },
-
-  computed: {
-    filteredObjectiveGroups() {
-      return this.objectiveGroups.filter((g) => !g.hidden);
-    },
-    objectiveGroups() {
-      /*
-         a teacher should get multiple blocks, so he can manage the visibility for his students.
-         students don't care about the blocks, so they should get just one block that contains all the objectives
-         */
-      if (this.me.isTeacher || !this.groups.length) {
-        return this.groups;
-      } else {
-        // todo: maybe this can be done a bit more elegantly
-        let groups = this.groups;
-        const objectives = groups.map((g) => g.objectives).flat(); // get all objectives in one array
-        const firstGroup = Object.assign({}, groups[0], { objectives });
-
-        return [firstGroup];
-      }
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss">
-@import 'styles/helpers';
-
-.objective-groups {
-  margin-bottom: $large-spacing;
-  display: flex;
-  flex-direction: column;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-</style>