wip: refactor ReviewSubject

package.json

@@ -88,7 +88,7 @@
     "toastr": "^2.1.4",
     "url-loader": "^1.1.2",
     "vue": "2.7.16",
-    "vue-loader": "^15.3.0",
+    "vue-loader": "^15.10.0",
     "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "2.7.16",
     "vue2-highcharts": "^1.2.5",

src/components/ReviewSubject.vue

@@ -1,12 +1,12 @@
 <template>
   <el-dialog
-    :title="'Disciplina: ' + subjectName"
+    :title="'Disciplina: ' + subject"
     @close="closeDialog()"
     :visible="value.dialog"
     width="800px"
     top="2vh"
     class="ufabc-element-dialog mt-1">
-    <div v-if='loading || (help_data && help_data.specific && help_data.specific.length)'
+    <div v-if='loading || (helpData && helpData.specific && helpData.specific.length)'
       style="min-height: 200px"
       v-loading="loading"
       element-loading="Carregando">
@@ -16,14 +16,14 @@
 
       <vue-highcharts
         class="ufabc-row ufabc-align-center ufabc-justify-middle"
-          v-if='help_data && help_data.specific && help_data.specific.length'
-          :options="options"
+          v-if='helpData && helpData.specific && help_data.specific.length'
+          :options="chartOptions"
           :highcharts="Highcharts"
           ref="pieChart"
       ></vue-highcharts>
       <SubjectTeachersList
-        v-if='help_data && help_data.specific && help_data.specific.length'
-        :teachers="help_data.specific"
+        v-if='helpData && helpData.specific && helpData.specific.length'
+        :teachers="helpData.specific"
       />
 
     </div>
@@ -35,7 +35,9 @@
     </span>
   </el-dialog>
 </template>
-<script>
+
+<script setup>
+import { ref, watch, computed, onMounted } from 'vue';
 import VueHighcharts from 'vue2-highcharts';
 import Highcharts3D from 'highcharts/highcharts-3d';
 import Highcharts from 'highcharts';
@@ -83,154 +85,143 @@ const data = {
 
 const nextApi = NextAPI();
 
-export default {
-  name: 'ReviewSubject',
-  props: ['value'],
-  components: {
-    VueHighcharts,
-    SubjectTeachersList,
-  },
-
-  data() {
-    return {
-      options: data,
-      Highcharts,
-      loading: false,
-
-      help_data: null,
-      filterSelected: null,
-      samplesCount: null,
-
-      conceitos: [
-        { conceito: 'A' },
-        { conceito: 'B' },
-        { conceito: 'C' },
-        { conceito: 'D' },
-        { conceito: 'F' },
-      ],
-
-      student_cr: null,
-    };
-  },
-
-  created() {
-    this.fetch();
+const props = defineProps({
+  value: {
+    default: {
+      dialog: false,
+      subject: null,
+      // use this to notify
+      notifier: null,
+    },
   },
-
-  watch: {
-    'value.notifier'(val) {
-      if (val) this.$notify(val);
+});
+
+const chartOptions = ref(data);
+const loading = ref(false);
+const helpData = ref(null);
+const filterSelected = ref(null);
+const samplesCount = ref(null);
+const pieChart = ref(null);
+
+const concepts = ref([
+  { conceito: 'A' },
+  { conceito: 'B' },
+  { conceito: 'C' },
+  { conceito: 'D' },
+  { conceito: 'F' },
+]);
+
+const studentCr = ref(null);
+
+onMounted(() => {
+  setupSubjectStats();
+  console.log('chart',pieChart.value)
+  console.log('props', props.value)
+});
+
+const possibleComponents = computed(() => {
+  const components = [...helpData.value.specific];
+  const generalDefaults = {
+    _id: {
+      _id: 'all',
+      name: 'Todas as matérias',
     },
+  };
+  const general = Object.assign(generalDefaults, helpData.value.general);
+  components.push(general);
+
+  return components.reverse();
+});
+const subject = computed(() =>  'fallback' || helpData.value.subject)
+
+
+function setupSubjectStats() {
+  console.log(props.value)
+  // const subjectId = props.value.subject.id || '';
+  const subjectId = ''
+  if (!subjectId) {
+    return;
+  }
+
+  loading.value = true;
+  nextApi
+    .get(`/entities/subject/review/${subjectId}`)
+    .then((res) => {
+      helpData.value = res;
+      loading.value = false;
+      filterSelected.value = possibleComponents.value[0]._id._id;
+      if (res.general.count || 0) {
+        setTimeout(() => {
+          // updateFilter()
+        }, 500);
+      }
+    })
+    .catch((e) => {
+      loading.value = false;
+      console.log(e);
+
+      closeDialog();
+    });
+}
 
-    'value.subject'(val) {
-      this.fetch();
-    },
-  },
+function closeDialog() {
+  props.value.dialog = false;
+  filterSelected.value = null;
+  helpData.value = null;
+  samplesCount.value = 0;
+}
 
-  computed: {
-    subjectName() {
-      return _.get(this.help_data, 'subject.name', '');
-    },
+function resolveColorForConcept(concept) {
+  return (
+    {
+      A: '#3fcf8c',
+      B: '#b8e986',
+      C: '#f8b74c',
+      D: '#ffa004',
+      F: '#f95469',
+      O: '#A9A9A9',
+    }[concept] || '#A9A9A9'
+  );
+}
+
+function updateFilter() {
+  pieChart.value.delegateMethod('showLoading', 'Carregando...');
 
-    possibleDisciplinas() {
-      let disciplinas = [...this.help_data.specific];
-      let generalDefaults = {
+  setTimeout(() => {
+    pieChart.value.removeSeries();
+    let filter;
+    if (filterSelected.value === 'all') {
+      filter = helpData.value.general;
+    } else {
+      filter = helpData.value.specific.find((specific) => ({
         _id: {
-          _id: 'all',
-          name: 'Todas as matérias',
+          _id: filterSelected,
         },
-      };
-      let general = Object.assign(generalDefaults, this.help_data.general);
-      disciplinas.push(general);
+      }));
+    }
 
-      return disciplinas.reverse();
-    },
-  },
+    const filteredConcepts = [];
+    const distributionConcepts = filter.distribution;
 
-  methods: {
-    resolveColorForConcept(concept) {
-      return (
-        {
-          A: '#3fcf8c',
-          B: '#b8e986',
-          C: '#f8b74c',
-          D: '#ffa004',
-          F: '#f95469',
-          O: '#A9A9A9',
-        }[concept] || '#A9A9A9'
-      );
-    },
+    for (const { conceito, count } of distributionConcepts) {
+      filteredConcepts.push({
+        name: conceito,
+        y: count,
+        color: resolveColorForConcept(conceito),
+      });
+    }
 
-    closeDialog() {
-      this.value.dialog = false;
-      this.filterSelected = null;
-      this.help_data = null;
-      this.samplesCount = 0;
-    },
+    samplesCount.value = filter.count;
 
-    fetch() {
-      let subjectId = _.get(this.value, 'subject.id', '');
-      if (!subjectId) return;
-      this.loading = true;
-
-      nextApi
-        .get('/help/subjects/' + subjectId)
-        .then((res) => {
-          this.help_data = res;
-          this.loading = false;
-
-          this.filterSelected = this.possibleDisciplinas[0]._id._id;
-          if (_.get(res, 'general.count', 0)) {
-            setTimeout(() => {
-              this.updateFilter();
-            }, 500);
-          }
-        })
-        .catch((e) => {
-          this.loading = false;
-          console.log(e);
-
-          // Show dialog with error
-          this.closeDialog();
-        });
-    },
+    pieChart.addSeries({
+      data: _.sortBy(filteredConcepts, 'name'),
+    });
 
-    updateFilter() {
-      let pieChart = this.$refs.pieChart;
-      pieChart.delegateMethod('showLoading', 'Carregando...');
-
-      setTimeout(() => {
-        pieChart.removeSeries();
-
-        let filter;
-        if (this.filterSelected == 'all') {
-          filter = this.help_data.general;
-        } else {
-          filter = _.find(this.help_data.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.addSeries({
-          data: _.sortBy(conceitosFiltered, 'name'),
-        });
-        pieChart.hideLoading();
-      }, 500);
-    },
-  },
-};
+    pieChart.value.hideLoading();
+  }, 500);
+}
 </script>
+
 <style scoped>
 .information {
   color: rgba(0, 0, 0, 0.6);

src/main.js

@@ -30,7 +30,7 @@ const reviewSubjectData = {
   notifier: null,
 };
 
-var app = new Vue({
+new Vue({
   el: '#app',
   data: {
     name: 'ufabc-matricula-extension',
@@ -59,8 +59,10 @@ new Vue({
 });
 
 new Vue({
-  template:
-    '<v-app v-show="$data.dialog"><ReviewSubject :value="$data"></ReviewSubject></v-app>',
+  template: `<v-app v-show="$data.dialog">
+      <ReviewSubject :value="$data"></ReviewSubject>
+    </v-app>
+    `,
   el: '#review-subject',
   data() {
     return reviewSubjectData;
@@ -69,15 +71,15 @@ new Vue({
 });
 
 // handler cortes
-$('body').on('click', '.corte', async function (e) {
+$('body').on('click', '.corte', async (e) => {
   const target = $(e.target);
   const corte_id = target.parent().parent().attr('value');
   modalData.corte_id = corte_id;
   modalData.dialog = true;
 });
 
 // handler teacherReview
-$('body').on('click', '.ReviewTeacher', function (e) {
+$('body').on('click', '.ReviewTeacher', (e) => {
   const teacherId = $(e.target).attr('data');
   const teacherName = $(e.target).attr('teacherName');
   teacherReviewData.professor = {
@@ -89,7 +91,7 @@ $('body').on('click', '.ReviewTeacher', function (e) {
 });
 
 // handler subject click
-$('body').on('click', 'span.sa, span.sbc', function (e) {
+$('body').on('click', 'span.sa, span.sbc', (e) => {
   const subjectId = $(e.target).attr('subjectId');
   reviewSubjectData.subject = {
     id: subjectId,