diff options
Diffstat (limited to 'src/views/Editor.vue')
| -rw-r--r-- | src/views/Editor.vue | 105 |
1 files changed, 10 insertions, 95 deletions
diff --git a/src/views/Editor.vue b/src/views/Editor.vue index 5ef0131..b4a2e8e 100644 --- a/src/views/Editor.vue +++ b/src/views/Editor.vue @@ -1,123 +1,38 @@ <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> +<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'; -export default { +export default defineComponent({ name: 'Editor', components: { ActionBar, - List, + EditorLists, }, 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() { - 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; - }); - }, - 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; - } - - if (a.section < b.section) { - return -1; - } - if (b.section < a.section) { - return 1; - } - - return 0; - }); - }, - }, - data() { - return { - selectedPeerTeacher: new PeerTeacher(), - }; - }, - methods: { - handlePtClick(peerTeacher) { - this.selectedPeerTeacher = peerTeacher; - }, - deletePeerTeacher(id) { - if (this.selectedPeerTeacher.id === id) { - this.selectedPeerTeacher = new PeerTeacher(); - } - this.$store.commit('deletePeerTeacher', id); - }, - assignLab(id) { - if (this.selectedPeerTeacher.id !== 0) { - this.selectedPeerTeacher.assignedLabs.add(id); - } - }, - unassignLab(id) { - this.selectedPeerTeacher.assignedLabs.delete(id); - }, }, -}; +}); </script> <style> #home { max-height: inherit; } - -#editor { - display: flex; - max-height: inherit; -} - -.column { - flex: 1; - overflow: auto; -} </style> |
