From f3619b20e1c5baa342eb7466c67c44d3192bb3eb Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Tue, 13 Apr 2021 00:52:32 -0500
Subject: Initial TypeScript refactoring

---
 src/views/About.vue  |  9 ++++---
 src/views/Editor.vue | 72 +++++++++++++++++++++++++---------------------------
 2 files changed, 39 insertions(+), 42 deletions(-)

(limited to 'src/views')

diff --git a/src/views/About.vue b/src/views/About.vue
index ab4725e..ac2bde1 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -7,18 +7,19 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import FileUpload from '../components/FileUpload.vue';
 
 import { parsePtDatabase } from '../features/parser';
 
-export default {
+export default defineComponent({
   name: 'About',
   components: {
     FileUpload,
   },
   methods: {
-    handleDatabaseChange(files) {
+    handleDatabaseChange(files: File[]) {
       parsePtDatabase(files[0]).then((result) => {
         this.$store.commit('setLabs', result.labs);
         this.$store.commit('setPeerTeachers', result.peerTeachers);
@@ -26,5 +27,5 @@ export default {
       });
     },
   },
-};
+});
 </script>
diff --git a/src/views/Editor.vue b/src/views/Editor.vue
index 5ef0131..fd83fb7 100644
--- a/src/views/Editor.vue
+++ b/src/views/Editor.vue
@@ -21,62 +21,58 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue';
 import ActionBar from '@/components/ActionBar.vue';
 import List from '@/components/List.vue';
 import PeerTeacher from '@/models/PeerTeacher';
+import Lab from '@/models/Lab';
 
-export default {
+export default defineComponent({
   name: 'Editor',
   components: {
     ActionBar,
     List,
   },
   computed: {
-    labs() {
+    labs(): Lab[] {
       return Array.from(this.$store.state.labs.values()).sort((a, b) => a.id
         .localeCompare(b.id));
     },
-    peerTeachers() {
+    peerTeachers(): PeerTeacher[] {
       return Array.from(this.$store.state.peerTeachers.values()).sort((a, b) => a.lastname
         .toUpperCase().localeCompare(b.lastname.toUpperCase()));
     },
-    compatibleLabs() {
+    compatibleLabs(): Lab[] {
       const temp = this.labs.filter((lab) => (!this.selectedPeerTeacher.assignedLabs.has(lab.id)
         && !this.selectedPeerTeacher.conflictsWith(lab.event)));
 
       const currentAssignments = this.selectedPeerTeacherAssignments;
-      return temp.filter((lab) => {
-        let compatible = true;
-        currentAssignments.every((assignedLab) => {
-          if (lab.event.conflictsWith(assignedLab.event)) {
-            compatible = false;
-            return false;
-          }
-          return true;
-        });
-        return compatible;
-      });
+      return temp.filter((lab) => !currentAssignments
+        .some((assignedLab) => lab.event.conflictsWith(assignedLab.event)));
     },
-    selectedPeerTeacherAssignments() {
-      return [...this.selectedPeerTeacher.assignedLabs.values()].map((id) => this.$store.state.labs
-        .get(id)).sort((a, b) => {
-        if (a.course < b.course) {
-          return -1;
-        }
-        if (b.course < a.course) {
-          return 1;
-        }
+    selectedPeerTeacherAssignments(): Lab[] {
+      return Array.from(this.selectedPeerTeacher.assignedLabs.values())
+        .flatMap((id) => {
+          const lab = this.$store.state.labs.get(id);
+          return (lab === undefined) ? [] : [lab];
+        }).sort((a, b) => {
+          if (a.course < b.course) {
+            return -1;
+          }
+          if (b.course < a.course) {
+            return 1;
+          }
 
-        if (a.section < b.section) {
-          return -1;
-        }
-        if (b.section < a.section) {
-          return 1;
-        }
+          if (a.section < b.section) {
+            return -1;
+          }
+          if (b.section < a.section) {
+            return 1;
+          }
 
-        return 0;
-      });
+          return 0;
+        });
     },
   },
   data() {
@@ -85,25 +81,25 @@ export default {
     };
   },
   methods: {
-    handlePtClick(peerTeacher) {
+    handlePtClick(peerTeacher: PeerTeacher) {
       this.selectedPeerTeacher = peerTeacher;
     },
-    deletePeerTeacher(id) {
+    deletePeerTeacher(id: number) {
       if (this.selectedPeerTeacher.id === id) {
         this.selectedPeerTeacher = new PeerTeacher();
       }
       this.$store.commit('deletePeerTeacher', id);
     },
-    assignLab(id) {
+    assignLab(id: string) {
       if (this.selectedPeerTeacher.id !== 0) {
         this.selectedPeerTeacher.assignedLabs.add(id);
       }
     },
-    unassignLab(id) {
+    unassignLab(id: string) {
       this.selectedPeerTeacher.assignedLabs.delete(id);
     },
   },
-};
+});
 </script>
 
 <style>
-- 
cgit v1.2.3


From b595ffa5efaa76d97fd6d6b79c24af46755cffd4 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Tue, 13 Apr 2021 09:50:37 -0500
Subject: Move editor lists to component

---
 src/components/EditorLists.vue | 112 +++++++++++++++++++++++++++++++++++++++++
 src/views/Editor.vue           |  87 ++------------------------------
 2 files changed, 115 insertions(+), 84 deletions(-)
 create mode 100644 src/components/EditorLists.vue

(limited to 'src/views')

diff --git a/src/components/EditorLists.vue b/src/components/EditorLists.vue
new file mode 100644
index 0000000..2d72b1e
--- /dev/null
+++ b/src/components/EditorLists.vue
@@ -0,0 +1,112 @@
+<template>
+  <div id="editor">
+    <div class="column">
+      <list :items="peerTeachers" @selection-changed="handlePtClick" #default="pt">
+        {{ pt.item.name }} <button @click.stop="deletePeerTeacher(pt.item.id)">X</button>
+      </list>
+    </div>
+    <div class="column">
+      <list :items="compatibleLabs" #default="lab">
+        {{ lab.item.fullInfo }} <button @click.stop="assignLab(lab.item.id)">+</button>
+      </list>
+    </div>
+    <div class="column">
+      <list :items="selectedPeerTeacherAssignments" #default="lab">
+        {{ lab.item.fullInfo }} <button @click.stop="unassignLab(lab.item.id)">X</button>
+      </list>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import List from '@/components/List.vue';
+import PeerTeacher from '@/models/PeerTeacher';
+import Lab from '@/models/Lab';
+
+export default defineComponent({
+  name: 'EditorLists',
+  components: {
+    List,
+  },
+  props: {
+    peerTeachers: {
+      type: Array as PropType<PeerTeacher[]>,
+      default: [],
+    },
+    labs: {
+      type: Array as PropType<Lab[]>,
+      default: [],
+    },
+  },
+  computed: {
+    compatibleLabs(): Lab[] {
+      const temp = this.labs.filter((lab) => (!this.selectedPeerTeacher.assignedLabs.has(lab.id)
+        && !this.selectedPeerTeacher.conflictsWith(lab.event)));
+
+      const currentAssignments = this.selectedPeerTeacherAssignments;
+      return temp.filter((lab) => !currentAssignments
+        .some((assignedLab) => lab.event.conflictsWith(assignedLab.event)));
+    },
+    selectedPeerTeacherAssignments(): Lab[] {
+      return Array.from(this.selectedPeerTeacher.assignedLabs.values())
+        .flatMap((id) => {
+          const lab = this.$store.state.labs.get(id);
+          return (lab === undefined) ? [] : [lab];
+        }).sort((a, b) => {
+          if (a.course < b.course) {
+            return -1;
+          }
+          if (b.course < a.course) {
+            return 1;
+          }
+
+          if (a.section < b.section) {
+            return -1;
+          }
+          if (b.section < a.section) {
+            return 1;
+          }
+
+          return 0;
+        });
+    },
+  },
+  data() {
+    return {
+      selectedPeerTeacher: new PeerTeacher(),
+    };
+  },
+  methods: {
+    handlePtClick(peerTeacher: PeerTeacher) {
+      this.selectedPeerTeacher = peerTeacher;
+    },
+    deletePeerTeacher(id: number) {
+      if (this.selectedPeerTeacher.id === id) {
+        this.selectedPeerTeacher = new PeerTeacher();
+      }
+      this.$store.commit('deletePeerTeacher', id);
+    },
+    assignLab(id: string) {
+      if (this.selectedPeerTeacher.id !== 0) {
+        this.selectedPeerTeacher.assignedLabs.add(id);
+      }
+    },
+    unassignLab(id: string) {
+      this.selectedPeerTeacher.assignedLabs.delete(id);
+    },
+  },
+});
+</script>
+
+<style>
+#editor {
+  display: flex;
+  max-height: inherit;
+}
+
+.column {
+  flex: 1;
+  overflow: auto;
+}
+</style>
diff --git a/src/views/Editor.vue b/src/views/Editor.vue
index fd83fb7..b4a2e8e 100644
--- a/src/views/Editor.vue
+++ b/src/views/Editor.vue
@@ -1,30 +1,14 @@
 <template>
   <div id="home">
     <action-bar />
-    <div id="editor">
-      <div class="column">
-        <list :items="peerTeachers" @selection-changed="handlePtClick" #default="pt">
-          {{ pt.item.name }} <button @click.stop="deletePeerTeacher(pt.item.id)">X</button>
-        </list>
-      </div>
-      <div class="column">
-        <list :items="compatibleLabs" #default="lab">
-          {{ lab.item.fullInfo }} <button @click.stop="assignLab(lab.item.id)">+</button>
-        </list>
-      </div>
-      <div class="column">
-        <list :items="selectedPeerTeacherAssignments" #default="lab">
-          {{ lab.item.fullInfo }} <button @click.stop="unassignLab(lab.item.id)">X</button>
-        </list>
-      </div>
-    </div>
+    <editor-lists :peerTeachers="peerTeachers" :labs="labs" />
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import ActionBar from '@/components/ActionBar.vue';
-import List from '@/components/List.vue';
+import EditorLists from '@/components/EditorLists.vue';
 import PeerTeacher from '@/models/PeerTeacher';
 import Lab from '@/models/Lab';
 
@@ -32,7 +16,7 @@ export default defineComponent({
   name: 'Editor',
   components: {
     ActionBar,
-    List,
+    EditorLists,
   },
   computed: {
     labs(): Lab[] {
@@ -43,61 +27,6 @@ export default defineComponent({
       return Array.from(this.$store.state.peerTeachers.values()).sort((a, b) => a.lastname
         .toUpperCase().localeCompare(b.lastname.toUpperCase()));
     },
-    compatibleLabs(): Lab[] {
-      const temp = this.labs.filter((lab) => (!this.selectedPeerTeacher.assignedLabs.has(lab.id)
-        && !this.selectedPeerTeacher.conflictsWith(lab.event)));
-
-      const currentAssignments = this.selectedPeerTeacherAssignments;
-      return temp.filter((lab) => !currentAssignments
-        .some((assignedLab) => lab.event.conflictsWith(assignedLab.event)));
-    },
-    selectedPeerTeacherAssignments(): Lab[] {
-      return Array.from(this.selectedPeerTeacher.assignedLabs.values())
-        .flatMap((id) => {
-          const lab = this.$store.state.labs.get(id);
-          return (lab === undefined) ? [] : [lab];
-        }).sort((a, b) => {
-          if (a.course < b.course) {
-            return -1;
-          }
-          if (b.course < a.course) {
-            return 1;
-          }
-
-          if (a.section < b.section) {
-            return -1;
-          }
-          if (b.section < a.section) {
-            return 1;
-          }
-
-          return 0;
-        });
-    },
-  },
-  data() {
-    return {
-      selectedPeerTeacher: new PeerTeacher(),
-    };
-  },
-  methods: {
-    handlePtClick(peerTeacher: PeerTeacher) {
-      this.selectedPeerTeacher = peerTeacher;
-    },
-    deletePeerTeacher(id: number) {
-      if (this.selectedPeerTeacher.id === id) {
-        this.selectedPeerTeacher = new PeerTeacher();
-      }
-      this.$store.commit('deletePeerTeacher', id);
-    },
-    assignLab(id: string) {
-      if (this.selectedPeerTeacher.id !== 0) {
-        this.selectedPeerTeacher.assignedLabs.add(id);
-      }
-    },
-    unassignLab(id: string) {
-      this.selectedPeerTeacher.assignedLabs.delete(id);
-    },
   },
 });
 </script>
@@ -106,14 +35,4 @@ export default defineComponent({
 #home {
   max-height: inherit;
 }
-
-#editor {
-  display: flex;
-  max-height: inherit;
-}
-
-.column {
-  flex: 1;
-  overflow: auto;
-}
 </style>
-- 
cgit v1.2.3