From 7943eb5c272480db22a67848e21467240c5999ae Mon Sep 17 00:00:00 2001
From: Joabesv <joabevarjao123@gmail.com>
Date: Mon, 16 Sep 2024 14:08:01 -0300
Subject: [PATCH] chore: migrate SubjectTeacherList to vue2.7

---
 package.json                           |   1 +
 pnpm-lock.yaml                         |  12 +
 src/components/Modal.vue               |   2 +-
 src/components/SubjectTeachersList.vue | 344 ++++++++++++++++---------
 4 files changed, 242 insertions(+), 117 deletions(-)

diff --git a/package.json b/package.json
index 909a27e..b349adc 100644
--- a/package.json
+++ b/package.json
@@ -89,6 +89,7 @@
     "url-loader": "^1.1.2",
     "vue": "2.7.16",
     "vue-loader": "^15.10.0",
+    "vue-router": "3.6.5",
     "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "2.7.16",
     "vue2-highcharts": "^1.2.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 41d4aa9..1ad639a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -95,6 +95,9 @@ importers:
       vue-loader:
         specifier: ^15.10.0
         version: 15.11.1(babel-core@6.26.3)(css-loader@1.0.1(webpack@3.12.0))(lodash@4.17.21)(mustache@3.2.1)(vue-template-compiler@2.7.16)(webpack@3.12.0)
+      vue-router:
+        specifier: 3.6.5
+        version: 3.6.5(vue@2.7.16)
       vue-style-loader:
         specifier: ^4.1.2
         version: 4.1.3
@@ -5558,6 +5561,11 @@ packages:
       vue-template-compiler:
         optional: true
 
+  vue-router@3.6.5:
+    resolution: {integrity: sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==}
+    peerDependencies:
+      vue: ^2
+
   vue-style-loader@4.1.3:
     resolution: {integrity: sha512-sFuh0xfbtpRlKfm39ss/ikqs9AbKCoXZBpHeVZ8Tx650o0k0q/YCM7FRvigtxpACezfq6af+a7JeqVTWvncqDg==}
 
@@ -12739,6 +12747,10 @@ snapshots:
       - walrus
       - whiskers
 
+  vue-router@3.6.5(vue@2.7.16):
+    dependencies:
+      vue: 2.7.16
+
   vue-style-loader@4.1.3:
     dependencies:
       hash-sum: 1.0.2
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index 7fef222..4cea6f6 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -199,7 +199,7 @@ function setupComponents() {
   if (!componentId) {
     return;
   }
-  const studentId = matriculaUtils.getStudentId() || 557736;
+  const studentId = matriculaUtils.getStudentId();
 
   loading.value = true;
 
diff --git a/src/components/SubjectTeachersList.vue b/src/components/SubjectTeachersList.vue
index 7f5c031..da24910 100644
--- a/src/components/SubjectTeachersList.vue
+++ b/src/components/SubjectTeachersList.vue
@@ -10,7 +10,7 @@
     <el-table
       ref="teachersList"
       @row-click="openTeacher($event)"
-      @sort-change="sortButton = null"
+      @sort-change="onSortChange"
       :data="teachersSorted"
       :class="{ 'teacher-table-mobile': $vuetify.breakpoint.xsOnly }"
       empty-text="Nenhum resultado encontrado"
@@ -126,127 +126,239 @@
     </el-table>
   </div>
 </template>
-<script>
-export default {
-  name: 'SubjectTeachersList',
-
-  data() {
-    return {
-      sortButton: 0,
-      concepts: [
-        { code: 'A', color: 'rgb(63, 207, 140)' },
-        { code: 'B', color: 'rgb(184, 233, 134)' },
-        { code: 'C', color: 'rgb(248, 183, 76)' },
-        { code: 'D', color: 'rgb(255, 160, 4)' },
-        { code: 'F', color: 'rgb(249, 84, 105)' },
-        { code: 'O', color: 'rgb(169, 169, 169)' },
-      ],
-      unthrustableThreshold: 10,
-    };
-  },
 
-  props: {
-    teachers: {
-      type: Array,
-    },
-  },
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { useRouter } from 'vue-router/composables';
+import _ from 'lodash';
 
-  watch: {
-    sortButton(val) {
-      if (val !== null) {
-        // clear internal sort of table when external button clicked
-        this.$refs &&
-          this.$refs.teachersList &&
-          this.$refs.teachersList.clearSort();
-      }
-    },
+const props = defineProps({
+  teachers: {
+    type: Array,
+    default: () => [],
   },
+});
 
-  computed: {
-    teachersSorted() {
-      let order = [['teacher.name'], ['desc']];
-      if (this.sortButton == 0) {
-        order = [
-          ['approval', 'reproof', 'count'],
-          ['desc', 'desc'],
-        ];
-      } else if (this.sortButton == 1) {
-        order = [
-          ['reproof', 'approval'],
-          ['desc', 'desc'],
-        ];
-      } else if (this.sortButton == 2) {
-        order = [['count'], ['desc']];
-      } else if (this.sortButton == 3) {
-        order = [['cr_professor'], ['desc']];
-      }
-
-      return _.orderBy([...this.teachersPopulated], ...order);
-    },
-
-    teachersPopulated() {
-      let teachers = [...(this.teachers || [])];
-      let possibleConcepts = ['A', 'B', 'C', 'D', 'F', 'O'];
-
-      for (let i = 0; i < teachers.length; i++) {
-        teachers[i].concepts = {};
-        possibleConcepts.forEach((c) => {
-          teachers[i].concepts[c] = {};
-          teachers[i].concepts[c]['percentage'] =
-            this.calculateConceptPercentage(teachers[i].distribution, c);
-          teachers[i].concepts[c]['count'] = this.findConceptCount(
-            teachers[i].distribution,
-            c,
-          );
-        });
-
-        let approvalConcepts = ['A', 'B', 'C', 'D'];
-        let reproofConcepts = ['F', 'O'];
-        let approval = [];
-        let reproof = [];
-        approvalConcepts.forEach((c, index) => {
-          approval.push(teachers[i].concepts[c]['percentage']);
-        });
-        reproofConcepts.forEach((c) => {
-          reproof.push(teachers[i].concepts[c]['percentage']);
-        });
-        teachers[i]['approval'] = _.sum(approval);
-        teachers[i]['reproof'] = _.sum(reproof);
-      }
-
-      return teachers;
-    },
-  },
+// we dont have vue-router, so i really dont know if this worked before
+const router = useRouter();
+const teachersList = ref(null)
+const sortButton = ref(0)
+const unthrustableThreshold = 10
 
-  methods: {
-    findConceptCount(distribution, concept) {
-      let conceptTarget = _.find(distribution, { conceito: concept });
-      return _.get(conceptTarget, 'count', null);
-    },
-
-    findConceptCountTotal(distribution) {
-      return _.sumBy(distribution, 'count');
-    },
-
-    calculateConceptPercentage(distribution, concept) {
-      return (
-        (100 * this.findConceptCount(distribution, concept)) /
-        this.findConceptCountTotal(distribution)
-      );
-    },
-
-    openTeacher(teacher) {
-      let teacherId = _.get(teacher, 'teacher._id', null);
-      if (teacherId) {
-        this.$router.replace({ query: {} });
-        this.$router.push({
-          name: 'reviews',
-          query: { teacherId, subjectId: null },
-        });
-      }
-    },
-  },
+const concepts = [
+  { code: 'A', color: 'rgb(63, 207, 140)' },
+  { code: 'B', color: 'rgb(184, 233, 134)' },
+  { code: 'C', color: 'rgb(248, 183, 76)' },
+  { code: 'D', color: 'rgb(255, 160, 4)' },
+  { code: 'F', color: 'rgb(249, 84, 105)' },
+  { code: 'O', color: 'rgb(169, 169, 169)' },
+];
+
+const findConceptCount = (distribution, concept) => {
+  const conceptTarget = _.find(distribution, { conceito: concept });
+  return _.get(conceptTarget, 'count', null);
+};
+
+const findConceptCountTotal = (distribution) => {
+  return _.sumBy(distribution, 'count');
+};
+
+const calculateConceptPercentage = (distribution, concept) => {
+  return (
+    (100 * findConceptCount(distribution, concept)) /
+    findConceptCountTotal(distribution)
+  );
 };
+
+
+const onSortChange = () => {
+  sortButton.value = null;
+};
+
+watch(sortButton, (val) => {
+  if (val !== null && teachersList.value) {
+    teachersList.value.clearSort();
+  }
+});
+
+const openTeacher = (teacher) => {
+  const teacherId = _.get(teacher, 'teacher._id', null);
+  if (teacherId) {
+    router.replace({ query: {} });
+    router.push({
+      name: 'reviews',
+      query: { teacherId, subjectId: null },
+    });
+  }
+};
+
+const teachersSorted = computed(() => {
+  let order = [['teacher.name'], ['desc']];
+  if (sortButton.value === 0) {
+    order = [
+      ['approval', 'reproof', 'count'],
+      ['desc', 'desc'],
+    ];
+  } else if (sortButton.value === 1) {
+    order = [
+      ['reproof', 'approval'],
+      ['desc', 'desc'],
+    ];
+  } else if (sortButton.value === 2) {
+    order = [['count'], ['desc']];
+  } else if (sortButton.value === 3) {
+    order = [['cr_professor'], ['desc']];
+  }
+
+  return _.orderBy([...teachersPopulated.value], ...order);
+});
+
+const teachersPopulated = computed(() => {
+  return props.teachers.map((teacher) => {
+    const concepts = ['A', 'B', 'C', 'D', 'F', 'O'].reduce((acc, c) => {
+      acc[c] = {
+        percentage: calculateConceptPercentage(teacher.distribution, c),
+        count: findConceptCount(teacher.distribution, c),
+      };
+      return acc;
+    }, {});
+
+    const approval = ['A', 'B', 'C', 'D'].reduce(
+      (sum, c) => sum + concepts[c].percentage,
+      0
+    );
+    const reproof = ['F', 'O'].reduce(
+      (sum, c) => sum + concepts[c].percentage,
+      0
+    );
+
+    return Object.assign({}, teacher, {
+      concepts,
+      approval,
+      reproof,
+    });
+  });
+});
+
+//   name: 'SubjectTeachersList',
+
+//   data() {
+//     return {
+//       sortButton: 0,
+//       concepts: [
+//         { code: 'A', color: 'rgb(63, 207, 140)' },
+//         { code: 'B', color: 'rgb(184, 233, 134)' },
+//         { code: 'C', color: 'rgb(248, 183, 76)' },
+//         { code: 'D', color: 'rgb(255, 160, 4)' },
+//         { code: 'F', color: 'rgb(249, 84, 105)' },
+//         { code: 'O', color: 'rgb(169, 169, 169)' },
+//       ],
+//       unthrustableThreshold: 10,
+//     };
+//   },
+
+//   props: {
+//     teachers: {
+//       type: Array,
+//     },
+//   },
+
+//   watch: {
+//     sortButton(val) {
+//       if (val !== null) {
+//         // clear internal sort of table when external button clicked
+//         this.$refs &&
+//           this.$refs.teachersList &&
+//           this.$refs.teachersList.clearSort();
+//       }
+//     },
+//   },
+
+//   computed: {
+//     teachersSorted() {
+//       let order = [['teacher.name'], ['desc']];
+//       if (this.sortButton == 0) {
+//         order = [
+//           ['approval', 'reproof', 'count'],
+//           ['desc', 'desc'],
+//         ];
+//       } else if (this.sortButton == 1) {
+//         order = [
+//           ['reproof', 'approval'],
+//           ['desc', 'desc'],
+//         ];
+//       } else if (this.sortButton == 2) {
+//         order = [['count'], ['desc']];
+//       } else if (this.sortButton == 3) {
+//         order = [['cr_professor'], ['desc']];
+//       }
+
+//       return _.orderBy([...this.teachersPopulated], ...order);
+//     },
+
+//     teachersPopulated() {
+//       let teachers = [...(this.teachers || [])];
+//       let possibleConcepts = ['A', 'B', 'C', 'D', 'F', 'O'];
+
+//       for (let i = 0; i < teachers.length; i++) {
+//         teachers[i].concepts = {};
+//         possibleConcepts.forEach((c) => {
+//           teachers[i].concepts[c] = {};
+//           teachers[i].concepts[c]['percentage'] =
+//             this.calculateConceptPercentage(teachers[i].distribution, c);
+//           teachers[i].concepts[c]['count'] = this.findConceptCount(
+//             teachers[i].distribution,
+//             c,
+//           );
+//         });
+
+//         let approvalConcepts = ['A', 'B', 'C', 'D'];
+//         let reproofConcepts = ['F', 'O'];
+//         let approval = [];
+//         let reproof = [];
+//         approvalConcepts.forEach((c, index) => {
+//           approval.push(teachers[i].concepts[c]['percentage']);
+//         });
+//         reproofConcepts.forEach((c) => {
+//           reproof.push(teachers[i].concepts[c]['percentage']);
+//         });
+//         teachers[i]['approval'] = _.sum(approval);
+//         teachers[i]['reproof'] = _.sum(reproof);
+//       }
+
+//       return teachers;
+//     },
+//   },
+
+//   methods: {
+//     findConceptCount(distribution, concept) {
+//       let conceptTarget = _.find(distribution, { conceito: concept });
+//       return _.get(conceptTarget, 'count', null);
+//     },
+
+//     findConceptCountTotal(distribution) {
+//       return _.sumBy(distribution, 'count');
+//     },
+
+//     calculateConceptPercentage(distribution, concept) {
+//       return (
+//         (100 * this.findConceptCount(distribution, concept)) /
+//         this.findConceptCountTotal(distribution)
+//       );
+//     },
+
+//     openTeacher(teacher) {
+//       let teacherId = _.get(teacher, 'teacher._id', null);
+//       if (teacherId) {
+//         this.$router.replace({ query: {} });
+//         this.$router.push({
+//           name: 'reviews',
+//           query: { teacherId, subjectId: null },
+//         });
+//       }
+//     },
+//   },
+// };
 </script>
 
 <style type="text/css">