Resolve "Use preferences instead of managed group types for school structure"

Closes #20 (closed)

aleksis/apps/cursus/frontend/components/SchoolStructure.vue

@@ -7,31 +7,48 @@ import SchoolTermField from "aleksis.core/components/school_term/SchoolTermField
 
 <template>
   <v-card>
-    <!-- Create grade form -->
+    <!-- Create first level group form -->
     <dialog-object-form
-      v-model="createGradeForm"
-      :fields="createGradeFields"
-      :default-item="createGradeDefaultItem"
+      v-model="createFirstLevelGroupForm"
+      :fields="firstLevelGroupFields"
+      :default-item="firstLevelGroupDefaultItem"
       :is-create="true"
-      create-item-i18n-key="cursus.school_structure.add_grade"
-      :gql-create-mutation="gqlCreateGrades"
-      :get-create-data="transformCreateGradeItem"
-      @cancel="createGradeForm = false"
+      :gql-create-mutation="gqlCreateFirstLevelGroup"
+      :get-create-data="transformFirstLevelGroupItem"
+      @cancel="createFirstLevelGroupForm = false"
       @save="updateSchoolStructure"
-    />
-    <!-- Create class form -->
+    >
+      <template #title>
+        <span class="text-h5">
+          {{
+            $t("cursus.school_structure.add_title", {
+              name: schoolStructure.firstLevelType.name,
+            })
+          }}
+        </span>
+      </template>
+    </dialog-object-form>
+    <!-- Create second level group form -->
     <dialog-object-form
-      v-model="createClassForm"
-      :fields="createClassFields"
-      :default-item="createClassDefaultItem"
+      v-model="createSecondLevelGroupForm"
+      :fields="secondLevelGroupFields"
+      :default-item="secondLevelGroupDefaultItem"
       :is-create="true"
-      create-item-i18n-key="cursus.school_structure.add_class"
-      :gql-create-mutation="gqlCreateClasses"
-      :get-create-data="transformCreateClassItemForGrade"
-      @cancel="createClassForm = false"
+      :gql-create-mutation="gqlCreateSecondLevelGroup"
+      :get-create-data="transformSecondLevelGroupItem"
+      @cancel="createFirstLevelGroupForm = false"
       @save="updateSchoolStructure"
     >
-      <!-- Hide parentGroups field - it is set on grade -->
+      <template #title>
+        <span class="text-h5">
+          {{
+            $t("cursus.school_structure.add_title", {
+              name: schoolStructure.secondLevelType.name,
+            })
+          }}
+        </span>
+      </template>
+      <!-- Hide parentGroups field - it is set on first level group -->
       <!-- eslint-disable-next-line vue/valid-v-slot -->
       <template #parentGroups.field="{ on, attrs }">
         <input type="hidden" v-bind="attrs" v-on="on" />
@@ -52,19 +69,27 @@ import SchoolTermField from "aleksis.core/components/school_term/SchoolTermField
         <v-card-actions>
           <create-button
             v-if="this.$data.currentTerm"
-            i18n-key="cursus.school_structure.add_grade"
-            @click="createGrade"
-          />
+            @click="createFirstLevelGroup"
+          >
+            <v-icon left>$plus</v-icon>
+            {{
+              $t("cursus.school_structure.add", {
+                name: schoolStructure.firstLevelType.name,
+              })
+            }}
+          </create-button>
         </v-card-actions>
       </div>
     </div>
-    <!-- Grades -->
+    <!-- First level groups -->
     <v-container v-if="this.$data.currentTerm">
       <v-row class="overflow-x-auto flex-nowrap slide-n-snap-x-container">
         <!-- responsive 1, 2, 3, 4 col layout -->
         <v-col
-          v-for="grade in grades"
-          :key="grade.id"
+          v-for="firstGroup in schoolStructure
+            ? schoolStructure.firstLevelGroupsByTerm
+            : []"
+          :key="firstGroup.id"
           class="slide-n-snap-contained"
           cols="12"
           sm="6"
@@ -74,27 +99,26 @@ import SchoolTermField from "aleksis.core/components/school_term/SchoolTermField
         >
           <v-card>
             <v-card-title class="justify-end">
-              {{ $t("cursus.school_structure.grade") }}
-              <span class="ml-3 text-h4">{{ grade.shortName }}</span>
+              {{ schoolStructure.firstLevelType.name }}
+              <span class="ml-3 text-h4">{{ firstGroup.shortName }}</span>
             </v-card-title>
             <v-list
               :max-height="$vuetify.breakpoint.height - 333"
               class="overflow-y-auto slide-n-snap-y-container"
             >
-              <!-- class is a "forbidden" name in v-for -->
               <v-list-item
-                v-for="clas in grade.childGroups"
-                :key="clas.id"
+                v-for="secondGroup in firstGroup.childGroups"
+                :key="secondGroup.id"
                 class="slide-n-snap-contained"
               >
                 <v-card class="mx-3 my-2">
                   <div class="d-flex flex-nowrap justify-space-between">
                     <div>
                       <v-card-title class="text-h4">
-                        {{ clas.shortName }}
+                        {{ secondGroup.shortName }}
                       </v-card-title>
                       <v-card-subtitle>
-                        {{ clas.name }}
+                        {{ secondGroup.name }}
                       </v-card-subtitle>
                     </div>
                     <div>
@@ -104,15 +128,15 @@ import SchoolTermField from "aleksis.core/components/school_term/SchoolTermField
                         class="px-2"
                       >
                         <v-chip
-                          v-for="teacher in clas.owners"
+                          v-for="teacher in secondGroup.owners"
                           :key="teacher.id"
                           :to="{
                             name: 'core.personById',
                             params: { id: teacher.id },
                           }"
-                          :outlined="true"
+                          outlined
                         >
-                          {{ teacher.shortName }}
+                          {{ teacher.shortName || teacher.lastName }}
                         </v-chip>
                       </v-chip-group>
                       <v-card-actions>
@@ -120,7 +144,7 @@ import SchoolTermField from "aleksis.core/components/school_term/SchoolTermField
                           i18n-key="cursus.school_structure.timetable"
                           :to="{
                             name: 'lesrooster.timetable_management',
-                            params: { id: clas.id },
+                            params: { id: secondGroup.id },
                           }"
                         />
                       </v-card-actions>
@@ -133,10 +157,16 @@ import SchoolTermField from "aleksis.core/components/school_term/SchoolTermField
               <v-spacer />
               <!-- MAYBE: ADD PLAN COURSES LINK -->
               <create-button
-                i18n-key="cursus.school_structure.add_class"
                 color="secondary"
-                @click="createClass(grade.id)"
-              />
+                @click="createSecondLevelGroup(firstGroup.id)"
+              >
+                <v-icon left>$plus</v-icon>
+                {{
+                  $t("cursus.school_structure.add", {
+                    name: schoolStructure.secondLevelType.name,
+                  })
+                }}
+              </create-button>
             </v-card-actions>
           </v-card>
         </v-col>
@@ -147,38 +177,38 @@ import SchoolTermField from "aleksis.core/components/school_term/SchoolTermField
 
 <script>
 import {
-  gqlSchoolGrades,
-  gqlCreateGrades,
-  gqlCreateClasses,
+  gqlFirstLevelGroups,
+  gqlCreateFirstLevelGroup,
+  gqlCreateSecondLevelGroup,
 } from "./schoolStructure.graphql";
 
 export default {
   name: "SchoolStructure",
   data() {
     return {
-      createGradeForm: false,
-      createGradeFields: [
+      createFirstLevelGroupForm: false,
+      firstLevelGroupFields: [
         {
-          text: this.$t("cursus.school_structure.grade_fields.name"),
+          text: this.$t("cursus.school_structure.fields.name"),
           value: "name",
         },
         {
-          text: this.$t("cursus.school_structure.grade_fields.short_name"),
+          text: this.$t("cursus.school_structure.fields.short_name"),
           value: "shortName",
         },
       ],
-      createGradeDefaultItem: {
+      firstLevelGroupDefaultItem: {
         name: "",
         shortName: "",
       },
-      createClassForm: false,
-      createClassFields: [
+      createSecondLevelGroupForm: false,
+      secondLevelGroupFields: [
         {
-          text: this.$t("cursus.school_structure.class_fields.name"),
+          text: this.$t("cursus.school_structure.fields.name"),
           value: "name",
         },
         {
-          text: this.$t("cursus.school_structure.class_fields.short_name"),
+          text: this.$t("cursus.school_structure.fields.short_name"),
           value: "shortName",
         },
         {
@@ -186,18 +216,18 @@ export default {
           value: "parentGroups",
         },
       ],
-      createClassDefaultItem: {
+      secondLevelGroupDefaultItem: {
         name: "",
         shortName: "",
         parentGroups: [],
       },
-      createClassCurrentGradeID: 0,
+      createSecondLevelGroupFirstLevelGroupId: 0,
       currentTerm: null,
     };
   },
   apollo: {
-    grades: {
-      query: gqlSchoolGrades,
+    schoolStructure: {
+      query: gqlFirstLevelGroups,
       variables() {
         return {
           schoolTerm: this.$data.currentTerm.id,
@@ -209,28 +239,28 @@ export default {
     },
   },
   methods: {
-    createGrade() {
-      this.$data.createGradeForm = true;
+    createFirstLevelGroup() {
+      this.$data.createFirstLevelGroupForm = true;
     },
-    createClass(id) {
-      this.$data.createClassCurrentGradeID = id;
-      this.$data.createClassForm = true;
+    createSecondLevelGroup(id) {
+      this.$data.createSecondLevelGroupFirstLevelGroupId = id;
+      this.$data.createSecondLevelGroupForm = true;
     },
-    transformCreateGradeItem(item) {
+    transformFirstLevelGroupItem(item) {
       return {
         ...item,
         schoolTerm: this.$data.currentTerm.id,
       };
     },
-    transformCreateClassItemForGrade(item) {
+    transformSecondLevelGroupItem(item) {
       return {
         ...item,
         schoolTerm: this.$data.currentTerm.id,
-        parentGroups: this.$data.createClassCurrentGradeID,
+        parentGroups: this.$data.createSecondLevelGroupFirstLevelGroupId,
       };
     },
     updateSchoolStructure() {
-      this.$apollo.queries.grades.refetch();
+      this.$apollo.queries.schoolStructure.refetch();
     },
   },
 };