Changes from our SA

CNAME

@@ -1 +1 @@
-lost.university
+lost.university

package.json

@@ -13,13 +13,15 @@
     "@fortawesome/fontawesome-free": "^6.5.1",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-brands-svg-icons": "^6.5.1",
-    "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/vue-fontawesome": "^3.0.5",
+    "@headlessui/vue": "^1.7.23",
     "bulma": "^0.9.3",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6",
-    "vuedraggable": "^4.1.0"
+    "vuedraggable": "^4.1.0",
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@types/node": "^20.3.3",

src/components/AccreditedModuleBadge.vue

@@ -0,0 +1,72 @@
+<template>
+  <div
+    class="relative flex justify-between px-4 rounded text-white group/module"
+    :class="computedClasses"
+    :title="tooltip"
+    tabindex="0"
+  >
+    <div class="grid grid-cols-[minmax(0,_auto)_auto_auto] gap-2">
+      <span class="">{{ accreditedModule.name }}</span>
+      <span>-</span>
+      <span>{{ accreditedModule.ects }}</span>
+    </div>
+    <div>
+      <button
+        class="absolute opacity-0 touch-only:opacity-75 group-hover/module:opacity-75
+              hover:!opacity-100 right-2 transition-opacity duration-75"
+        type="button"
+        @click="removeModule"
+      >
+        <font-awesome-icon
+          :icon="['fa', 'circle-xmark']"
+          size="lg"
+        />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from 'vue';
+import type { AccreditedModule } from '../helpers/types';
+import { getColorClassForPrioritizedCategory } from '../helpers/color-helper';
+import { store } from '../helpers/store';
+
+export default defineComponent({
+  name: 'AccreditedModuleBadge',
+  props: {
+    accreditedModule: {
+      type: Object as PropType<AccreditedModule>,
+      required: true,
+    }
+  },
+  emits: ['on-remove-clicked'],
+  computed: {
+    computedClasses() {
+      const classes = [this.getColorClassForPrioritizedCategory(this.accreditedModule.categoryIds)];
+      if(this.accreditedModule.validationInfo) {
+        classes.push(...['border-red-500', 'border-4']);
+      } else {
+        classes.push('p-[4px]');
+      }
+      return classes;
+    },
+    tooltip() {
+      if(this.accreditedModule.validationInfo) {
+        return this.accreditedModule.validationInfo.tooltip;
+      }
+
+      const categoryNames = this.accreditedModule.categoryIds
+        .map(id => store.getters.categories.find(c => c.id === id)?.name)
+        .join(', ');
+      return `${this.accreditedModule.name} - ${this.accreditedModule.ects} - ${categoryNames}`;
+    }
+  },
+  methods: {
+    getColorClassForPrioritizedCategory,
+    removeModule() {
+      this.$emit('on-remove-clicked');
+    }
+  }
+});
+</script>

src/components/AccreditedModules.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="grid grid-cols-[min-content_auto] gap-2">
+    <div class="grid grid-rows-2">
+      <div class="flex">
+        Übertrittsmodule
+        <font-awesome-icon
+          :icon="['fa', 'circle-question']"
+          class="ml-2"
+          title="Für im SLCM als 'Übertritt' gekennzeichnete Module"
+          tabindex="0"
+        />
+      </div>
+      <AccreditedModulesModal />
+    </div>
+    <div
+      v-if="accreditedModules.length"
+      class="flex flex-wrap"
+    >
+      <div
+        v-for="accreditedModule in accreditedModules"
+        :key="accreditedModule"
+        class="mr-2 mb-2"
+      >
+        <AccreditedModuleBadge
+          :accredited-module="accreditedModule"
+          @on-remove-clicked="removeAccreditedModule(accreditedModule)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { mapGetters } from 'vuex';
+import AccreditedModulesModal from './AccreditedModulesModal.vue';
+import AccreditedModuleBadge from './AccreditedModuleBadge.vue';
+import { store } from '../helpers/store';
+import { StorageHelper } from '../helpers/storage-helper';
+import type { AccreditedModule } from '../helpers/types';
+
+export default defineComponent({
+  name: 'AccreditedModules',
+  components: { AccreditedModulesModal, AccreditedModuleBadge },
+  computed: {
+    ...mapGetters(['accreditedModules']),
+  },
+  methods: {
+    removeAccreditedModule(accreditedModule: AccreditedModule) {
+      store.commit('removeAccreditedModule', accreditedModule);
+      StorageHelper.updateUrlFragment();
+    }
+  }
+});
+</script>