From ce2e2a6d2de386df1abd02f5514d970affb0fad6 Mon Sep 17 00:00:00 2001
From: Joabesv <joabevarjao123@gmail.com>
Date: Mon, 16 Sep 2024 00:42:19 -0300
Subject: [PATCH] wip: reviewTeacher vue2.7

---
 src/components/ReviewSubject.vue |  19 +-
 src/components/ReviewTeacher.vue | 432 ++++++++++++++-----------------
 2 files changed, 205 insertions(+), 246 deletions(-)

diff --git a/src/components/ReviewSubject.vue b/src/components/ReviewSubject.vue
index c4de688..fc2b87a 100644
--- a/src/components/ReviewSubject.vue
+++ b/src/components/ReviewSubject.vue
@@ -98,16 +98,7 @@ const loading = ref(false);
 const helpData = ref(null);
 const filterSelected = ref(null);
 const samplesCount = ref(null);
-const concepts = ref([
-  { conceito: 'A' },
-  { conceito: 'B' },
-  { conceito: 'C' },
-  { conceito: 'D' },
-  { conceito: 'F' },
-]);
 const pieChart = ref();
-const studentCr = ref(null);
-
 
 watch(props.subjectInfo.notifier, (val) => {
   if(val) {
@@ -125,8 +116,8 @@ watch(() => props.subjectInfo, (newVal) => {
 // i miss optional chaining :(
 const subject = computed(() => {
   // biome-ignore lint/complexity/useOptionalChain: Babel version does not support it
-  return helpData.value && helpData.value.subject && helpData.value.subject.name 
-    ? helpData.value.subject.name 
+  return helpData.value && helpData.value.subject && helpData.value.subject.name
+    ? helpData.value.subject.name
     : '';
 });
 
@@ -167,6 +158,7 @@ function closeDialog() {
 
 async function setupSubjectStats() {
   const subjectId = props.subjectInfo.subject.id;
+  console.log(subjectId)
   if (!subjectId) {
     return;
   }
@@ -189,9 +181,6 @@ async function setupSubjectStats() {
     closeDialog();
   }
 }
-
-console.log(pieChart.value)
-
 function updateFilter() {
   pieChart.value.delegateMethod('showLoading', 'Carregando...');
 
@@ -201,7 +190,7 @@ function updateFilter() {
     if (filterSelected.value === 'all') {
       filter = helpData.value.general;
     } else {
-      filter = helpData.value.specific.find((specific) => 
+      filter = helpData.value.specific.find((specific) =>
         specific._id._id === filterSelected.value
       );
     }
diff --git a/src/components/ReviewTeacher.vue b/src/components/ReviewTeacher.vue
index d5db189..c2a47ea 100644
--- a/src/components/ReviewTeacher.vue
+++ b/src/components/ReviewTeacher.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog
-    :title="'Professor: ' + professorName"
+    :title="'Professor: ' + professor"
     @close="closeDialog()"
     :visible="value.dialog"
     width="460px"
@@ -21,7 +21,7 @@
         v-if="review && review.specific && review.specific.length"
       >
         <el-option
-          v-for="option in possibleDisciplinas"
+          v-for="option in possibleComponents"
           :key="option._id._id"
           :label="option._id.name"
           :value="option._id._id"
@@ -36,42 +36,40 @@
       <vue-highcharts
         class="ufabc-row ufabc-align-center ufabc-justify-middle"
         v-if="review && review.specific && review.specific.length"
-        :options="options"
+        :options="chartData"
         :highcharts="Highcharts"
         ref="pieChart"
       ></vue-highcharts>
 
       <div class="mt-2" style="text-align: center">
-        <b>* {{ cobraPresenca }}</b>
+        <b>* {{ trackAttendance }}</b>
       </div>
 
       <div class="ufabc-column ufabc-align-center mt-3 ufabc-flex-wrap">
         <div
           class="ufabc-row ufabc-align-center ufabc-justify-middle my-cr"
-          v-if="student_cr"
+          v-if="studentCr"
         >
-          Seu CR é <b class="ml-1">{{ crCropped(student_cr) }}</b>
+          Seu CR é <b class="ml-1">{{ crCropped(studentCr) }}</b>
         </div>
         <div
           class="conceitos"
-          v-if="
-            conceitoDistribution && conceitoDistribution.length && student_cr
-          "
+          v-if="conceptsDistribution && conceptsDistribution.length && studentCr"
         >
           <div class="conceitos-title">
-            Com seu CR {{ crCropped(student_cr) }}, seu conceito com este
+            Com seu CR {{ crCropped(studentCr) }}, seu conceito com este
             professor <b>provavelmente</b> será:
           </div>
           <div class="all-conceitos">
-            <div class="conceito-target" :class="targetConceitoStudent">
+            <div class="conceito-target" :class="targetStudentConcept">
               <div class="arrow">
-                <!--                 <div class="arrow-text">você</div> -->
+                <div class="arrow-text">você</div>
               </div>
               <div class="square"></div>
             </div>
             <div
               class="conceitos-cr ufabc-row"
-              v-for="(conceito, index) in conceitos"
+              v-for="(conceito, index) in concepts"
               :key="index"
             >
               <div class="conceito" :class="conceito.conceito">
@@ -100,10 +98,12 @@
     </span>
   </el-dialog>
 </template>
-<script>
+
+<script setup>
 import VueHighcharts from 'vue2-highcharts';
 import Highcharts3D from 'highcharts/highcharts-3d';
 import Highcharts from 'highcharts';
+import { ref, computed, watch, onMounted } from 'vue'
 
 import _ from 'lodash';
 import { NextAPI } from '../services/NextAPI';
@@ -112,7 +112,7 @@ import matriculaUtils from '../utils/Matricula';
 
 Highcharts3D(Highcharts);
 
-const data = {
+const chartData = ref({
   chart: {
     type: 'pie',
     options3d: {
@@ -145,242 +145,212 @@ const data = {
     },
   },
   series: [],
-};
-
+});
 const nextApi = NextAPI();
 
-export default {
-  name: 'ReviewTecher',
-  props: ['value'],
-  components: {
-    VueHighcharts,
-  },
+const props = defineProps({
+  value: Object,
+})
+
+const loading = ref(false);
+const review = ref(null);
+const filterSelected = ref(null);
+const samplesCount = ref(null);
+const studentCr = ref(null);
+const concepts = ref([
+  { conceito: 'A' },
+  { conceito: 'B' },
+  { conceito: 'C' },
+  { conceito: 'D' },
+  { conceito: 'F' },
+]);
+const pieChart = ref();
+
+const professor = computed(() => {
+  return props.value.professor.name
+})
+
+const possibleComponents = computed(() => {
+  if(review.value) {
+    return []
+  }
+  const components = review.value.specific
+  const generalDefaults = {
+    _id: {
+      _id: 'all',
+      name: 'Todas as matérias',
+    },
+  };
+  const general = Object.assign(generalDefaults, review.value.general);
+  components.push(general);
+  return components.reverse();
+})
+
+const conceptsDistribution = computed(() => {
+  if(!filterSelected.value) {
+    return []
+  }
+
+  let filter;
+  if (filterSelected.value === 'all') {
+      filter = helpData.value.general;
+    } else {
+      filter = helpData.value.specific.find((specific) =>
+        specific._id._id === filterSelected.value
+      );
+    }
+
+  return (
+    // biome-ignore lint/complexity/useOptionalChain: Babel does not support it
+    filter && filter.distribution && _.sortBy(filter.distribution, 'conceito')
+  )
+})
+
+const trackAttendance = (() => {
+  if(!review.value.general.distribution.length > 0) {
+    return
+  }
+
+  console.log('debug', review.value.general)
+  const hasAbsence = review.value.general.distribution.some(concept => concept === '0')
+  if(!hasAbsence) {
+    return 'Provavelmente esse professor NÃO cobra presença 👍';
+  }
+
+  return 'Provavelmente esse professor cobra presença 👎';
+})
+
+const targetStudentConcept = computed(() => {
+  if(!studentCr.value || conceptsDistribution.value || conceptsDistribution.value.length) {
+    return
+  }
+
+  const allCrs = []
+  for(const { conceito } of conceptsDistribution.value) {
+    if (conceito !== 'O' && conceito !== 'E') {
+      allCrs.push(conceito && conceito.cr_medio)
+    }
+  }
+  const [closest]  = allCrs.sort((a, b) => Math.abs(studentCr.value - a) - Math.abs(studentCr.value - b))
+  const target = conceptsDistribution.value.find(c => c.cr_medio === closest)
+
+  return target && target.conceito
+})
+
+function resolveColorForConcept(concept) {
+  return (
+    {
+      A: '#3fcf8c',
+      B: '#b8e986',
+      C: '#f8b74c',
+      D: '#ffa004',
+      F: '#f95469',
+      O: '#A9A9A9',
+    }[concept] || '#A9A9A9'
+  );
+}
 
-  data() {
-    return {
-      options: data,
-      Highcharts,
-      loading: false,
-
-      review: null,
-      filterSelected: null,
-      samplesCount: null,
-
-      conceitos: [
-        { conceito: 'A' },
-        { conceito: 'B' },
-        { conceito: 'C' },
-        { conceito: 'D' },
-        { conceito: 'F' },
-      ],
-
-      student_cr: null,
-    };
-  },
+const croppedCR = (cr) => cr.toFixed(2)
 
-  created() {
-    this.fetch();
-  },
+function closeDialog() {
+  props.value.dialog = false;
+  filterSelected.value = null;
+  review.value = null;
+  samplesCount.value = 0;
+}
 
-  watch: {
-    'value.notifier'(val) {
-      if (val) this.$notify(val);
-    },
 
-    'value.professor'(val) {
-      this.fetch();
-    },
-  },
+function findConcept(concept) {
+  const conceito = conceptsDistribution.value.find(concept => concept.conceito === concept)
+  return conceito ? crCropped(conceito.cr_medio) : '-';
+}
 
-  computed: {
-    professorName() {
-      return _.get(this.value, 'professor.name', '');
-    },
+async function fetch() {
+  const teacherId = props.value.professor.id
+  if(!teacherId) {
+    return
+  }
 
-    possibleDisciplinas() {
-      let disciplinas = this.review.specific;
-      let generalDefaults = {
-        _id: {
-          _id: 'all',
-          name: 'Todas as matérias',
-        },
-      };
-      let general = Object.assign(generalDefaults, this.review.general);
-      disciplinas.push(general);
-
-      return disciplinas.reverse();
-    },
+  fetchStudent()
 
-    conceitoDistribution() {
-      if (!this.filterSelected) return [];
-
-      let filter;
-      if (this.filterSelected == 'all') {
-        filter = this.review.general;
-      } else {
-        filter = _.find(this.review.specific, {
-          _id: { _id: this.filterSelected },
-        });
-      }
-
-      return (
-        filter &&
-        filter.distribution &&
-        _.sortBy(filter.distribution, 'conceito')
-      );
-    },
+  loading.value = true
 
-    cobraPresenca() {
-      if (!_.get(this.review, 'general.distribution.length', 0)) return;
+  try {
+    const {data: reviews} = await nextApi.get(`/teachers/reviews/${teacherId}`)
+    review.value = reviews
+    loading.value = false
 
-      if (_.find(this.review.general.distribution, { conceito: 'O' })) {
-        return 'Provavelmente esse professor cobra presença 👎';
-      } else {
-        return 'Provavelmente esse professor NÃO cobra presença 👍';
-      }
-    },
+    if(reviews.general.count) {
+      filterSelected.value =  possibleComponents.value[0]._id._id
+      setTimeout(() => {
+        updateFilter()
+      }, 500)
+    }
+  } catch(error) {
+    loading.value = false
+    closeDialog()
+  }
 
-    targetConceitoStudent() {
-      if (
-        !this.student_cr ||
-        !this.conceitoDistribution ||
-        !this.conceitoDistribution.length
-      )
-        return;
-
-      let all_cr = [];
-      for (let conceito of this.conceitoDistribution) {
-        if (conceito.conceito != 'O' && conceito.conceito != 'E') {
-          all_cr.push(conceito && conceito.cr_medio);
-        }
-      }
-      let closest = all_cr.sort(
-        (a, b) => Math.abs(this.student_cr - a) - Math.abs(this.student_cr - b),
-      )[0];
-      let targetConceito = _.find(this.conceitoDistribution, {
-        cr_medio: closest,
-      });
+}
 
-      return targetConceito && targetConceito.conceito;
-    },
-  },
+function fetchStudent() {
+  const storageUser = `ufabc-extension-${matriculaUtils.currentUser()}`;
+  Utils.storage.getItem(storageUser).then((item) => {
+    if (item == null) {
+      return;
+    }
+    studentCr.value = _.get(item, '[1].cr', 0) || _.get(item, '[0].cr', 0);
+  });
+}
 
-  methods: {
-    resolveColorForConcept(concept) {
-      return (
-        {
-          A: '#3fcf8c',
-          B: '#b8e986',
-          C: '#f8b74c',
-          D: '#ffa004',
-          F: '#f95469',
-          O: '#A9A9A9',
-        }[concept] || '#A9A9A9'
-      );
-    },
-    crCropped(cr) {
-      return cr.toFixed(2);
-    },
-    closeDialog() {
-      this.value.dialog = false;
-      this.filterSelected = null;
-      this.review = null;
-      this.samplesCount = 0;
-    },
-    findConcept(concept) {
-      let conceito = _.find(
-        this.conceitoDistribution,
-        { conceito: concept },
-        null,
-      );
-      return conceito ? this.crCropped(conceito.cr_medio) : '-';
-    },
-    findCount(concept) {
-      let conceito = _.find(
-        this.conceitoDistribution,
-        { conceito: concept },
-        null,
-      );
-      return conceito ? conceito.count : '-';
-    },
-    fetch() {
-      let professorId = _.get(this.value, 'professor.id', '');
-      if (!professorId) return;
-      this.fetchStudent();
-
-      this.loading = true;
-
-      nextApi
-        .get('/reviews/teachers/' + professorId)
-        .then((res) => {
-          this.review = res;
-          this.loading = false;
-
-          if (_.get(res, 'general.count', 0)) {
-            this.filterSelected = this.possibleDisciplinas[0]._id._id;
-            setTimeout(() => {
-              this.updateFilter();
-            }, 500);
-          }
-        })
-        .catch((e) => {
-          this.loading = false;
-
-          // Show dialog with error
-          this.closeDialog();
-        });
-    },
+function updateFilter() {
+  pieChart.value.delegateMethod('showLoading', 'Carregando...');
 
-    fetchStudent() {
-      let self = this;
+  setTimeout(() => {
+    pieChart.value.removeSeries();
 
-      const storageUser = 'ufabc-extension-' + matriculaUtils.currentUser();
-      Utils.storage.getItem(storageUser).then((item) => {
-        if (item == null) return;
-        self.student_cr = _.get(item, '[1].cr', 0) || _.get(item, '[0].cr', 0);
+    let filter;
+    if (filterSelected.value === 'all') {
+      filter = review.value.general;
+    } else {
+      filter = review.value.specific.find(
+        (item) => item._id._id === filterSelected.value
+      );
+    }
+
+    const conceitosFiltered = [];
+    const conceitos = filter.distribution;
+    for (const conceito of conceitos) {
+      conceitosFiltered.push({
+        name: conceito.conceito,
+        y: conceito.count,
+        color: resolveColorForConcept(conceito.conceito),
       });
-    },
+    }
+    samplesCount.value = filter.count;
+
+    pieChart.value.addSeries({
+      data: conceitosFiltered.sort((a, b) => a.name.localeCompare(b.name)),
+    });
+    pieChart.value.hideLoading();
+  }, 500);
+}
 
-    updateFilter() {
-      let pieChart = this.$refs.pieChart;
-      pieChart.delegateMethod('showLoading', 'Carregando...');
+watch(() => props.value.notifier, (val) => {
+  if (val) {
+    // Handle notification logic here
+  }
+});
 
-      setTimeout(() => {
-        pieChart.removeSeries();
-
-        let filter;
-        if (this.filterSelected == 'all') {
-          filter = this.review.general;
-        } else {
-          filter = _.find(this.review.specific, {
-            _id: { _id: this.filterSelected },
-          });
-        }
-
-        let conceitosFiltered = [];
-        let conceitos = filter.distribution;
-        for (let conceito of conceitos) {
-          conceitosFiltered.push({
-            name: conceito.conceito,
-            y: conceito.count,
-            color: this.resolveColorForConcept(conceito.conceito),
-          });
-        }
-        this.samplesCount = filter.count;
-
-        // pieChart.mergeOption({
-        //   subtitle: { text: 'Total de amostras: <b>' + filter.count + '<b/>'}
-        // })
-
-        pieChart.addSeries({
-          data: _.sortBy(conceitosFiltered, 'name'),
-        });
-        pieChart.hideLoading();
-      }, 500);
-    },
-  },
-};
+watch(() => props.value.professor, () => {
+  fetch();
+});
+
+onMounted(() => {
+  fetch();
+});
 </script>
+
 <style scoped>
 .information {
   color: rgba(0, 0, 0, 0.6);