Fix lint problems

lost-university · Sep 20, 2023 · 9de2d13 · 9de2d13
1 parent 9d40f2d
commit 9de2d13
Showing 1 changed file with 70 additions and 34 deletions.
diff --git a/src/components/Semester.vue b/src/components/Semester.vue
@@ -1,38 +1,74 @@
 <template>
   <!-- eslint-disable-next-line vue/no-mutating-props -->
-    <draggable :list="modules" group="semester" item-key="id" :animation="200" :delay-on-touch-only="true" :delay="500"
-      class="columns is-flex is-flex-direction-column has-text-centered" @end="onDropEnd">
-      <template #header>
-        <div class="semester-header">
-          <h2 class="subtitle pl-3 mb-2">
-            Semester {{ number }}
-          </h2>
-          <button class="delete-button delete is-medium" type="button" @click="removeSemester()" />
-        </div>
-      </template>
-      <template #item="{ element }">
-        <ModuleComponent :module="element" :semester-number="number" @on-delete="$emit('on-module-deleted', $event)" />
-      </template>
-      <template #footer>
-        <div class="column semester-footer" :class="{ 'is-hidden': isAddingNewModule }">
-          <button class="button is-dark button-add is-fullwidth" type="button" @click="isAddingNewModule = true">
-            +
-          </button>
-        </div>
-        <div class="column" :class="{ 'is-hidden': !isAddingNewModule }">
-          <label for="additionalModule">Select additional module</label>
-          <input id="additionalModule" ref="addModuleInput" type="text" list="allModules" @change="addModule($event)">
-          <datalist id="allModules">
-            <option v-for="selectableModule in allModules" :key="selectableModule.name" :value="selectableModule.name">
-              {{ selectableModule.name }}
-            </option>
-          </datalist>
-        </div>
-        <div class="column semester-footer">
-          <p>Total ECTS: {{ getTotalEcts }}</p>
-        </div>
-      </template>
-    </draggable>
+  <draggable
+    :list="modules"
+    group="semester"
+    item-key="id"
+    :animation="200"
+    :delay-on-touch-only="true"
+    :delay="500"
+    class="columns is-flex is-flex-direction-column has-text-centered"
+    @end="onDropEnd"
+  >
+    <template #header>
+      <div class="semester-header">
+        <h2 class="subtitle pl-3 mb-2">
+          Semester {{ number }}
+        </h2>
+        <button
+          class="delete-button delete is-medium"
+          type="button"
+          @click="removeSemester()"
+        />
+      </div>
+    </template>
+    <template #item="{ element }">
+      <ModuleComponent
+        :module="element"
+        :semester-number="number"
+        @on-delete="$emit('on-module-deleted', $event)"
+      />
+    </template>
+    <template #footer>
+      <div
+        class="column semester-footer"
+        :class="{ 'is-hidden': isAddingNewModule }"
+      >
+        <button
+          class="button is-dark button-add is-fullwidth"
+          type="button"
+          @click="isAddingNewModule = true"
+        >
+          +
+        </button>
+      </div>
+      <div
+        class="column"
+        :class="{ 'is-hidden': !isAddingNewModule }"
+      >
+        <label for="additionalModule">Select additional module</label>
+        <input
+          id="additionalModule"
+          ref="addModuleInput"
+          type="text"
+          list="allModules"
+          @change="addModule($event)"
+        >
+        <datalist id="allModules">
+          <option
+            v-for="selectableModule in allModules"
+            :key="selectableModule.name"
+            :value="selectableModule.name"
+          >
+            {{ selectableModule.name }}
+          </option>
+        </datalist>
+      </div>
+      <div class="column semester-footer">
+        <p>Total ECTS: {{ getTotalEcts }}</p>
+      </div>
+    </template>
+  </draggable>
 </template>
 
 <script lang="ts">
@@ -82,7 +118,7 @@ export default defineComponent({
     },
     isAddingNewModule(newValue: boolean) {
       const addModuleInput = ref<HTMLInputElement | null>(null);
-      if (!addModuleInput) {
+      if (!addModuleInput.value) {
         return;
       }
       if (newValue === false) {