#14 Implementación de media por crédito junto con los literales dinam…

…izados y los el-tag para dar colorido a la tabla
jualoppaz · Dec 1, 2020 · 4edf60a · 4edf60a
1 parent 2394291
commit 4edf60a
Showing 1 changed file with 59 additions and 5 deletions.
diff --git a/components/academic-record/averages/AcademicCourseAverages.vue b/components/academic-record/averages/AcademicCourseAverages.vue
@@ -1,30 +1,59 @@
 <template>
   <div id="academic-course-averages">
     <h1 id="academic-course-averages-title">
-      xoxMedias por Curso Académico
+      {{ headerTitle }}
     </h1>
     <el-divider />
     <el-table
       :data="rows"
       border
     >
       <el-table-column
-        label="xoxCurso académico"
+        :label="academicCourseLabel"
         prop="academicCourse"
         align="center"
       />
       <el-table-column
-        label="xoxMedia por Asignatura"
-        prop="subjectAverage"
+        :label="subjectAverageLabel"
         align="center"
-      />
+      >
+        <template slot-scope="props">
+          <el-tag
+            :type="getMarkType(props.row.subjectAverage)"
+            effect="dark"
+          >
+            {{ props.row.subjectAverage }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column
+        :label="creditAverageLabel"
+        align="center"
+      >
+        <template slot-scope="props">
+          <el-tag
+            :type="getMarkType(props.row.creditAverage)"
+            effect="dark"
+          >
+            {{ props.row.creditAverage }}
+          </el-tag>
+        </template>
+      </el-table-column>
     </el-table>
   </div>
 </template>
 
 <script>
 export default {
   name: 'AcademicCourseAverages',
+  data() {
+    return {
+      headerTitle: this.$t('VIEWS.ACADEMIC_RECORD.ACADEMIC_COURSES.ACADEMIC_COURSE_AVERAGES_TABLE.HEADER.TITLE'),
+      academicCourseLabel: this.$t('VIEWS.ACADEMIC_RECORD.ACADEMIC_COURSES.ACADEMIC_COURSE_AVERAGES_TABLE.ACADEMIC_COURSE.LABEL'),
+      subjectAverageLabel: this.$t('VIEWS.ACADEMIC_RECORD.ACADEMIC_COURSES.ACADEMIC_COURSE_AVERAGES_TABLE.SUBJECT_AVERAGE.LABEL'),
+      creditAverageLabel: this.$t('VIEWS.ACADEMIC_RECORD.ACADEMIC_COURSES.ACADEMIC_COURSE_AVERAGES_TABLE.CREDIT_AVERAGE.LABEL'),
+    };
+  },
   computed: {
     subjectAverageByAcademicCourse20102011() {
       return this.$store.getters['academic-records/getSubjectAverageByAcademicCourse']('2010/2011');
@@ -38,24 +67,49 @@ export default {
     subjectAverageByAcademicCourse20132014() {
       return this.$store.getters['academic-records/getSubjectAverageByAcademicCourse']('2013/2014');
     },
+    creditAverageByAcademicCourse20102011() {
+      return this.$store.getters['academic-records/getCreditAverageByAcademicCourse']('2010/2011');
+    },
+    creditAverageByAcademicCourse20112012() {
+      return this.$store.getters['academic-records/getCreditAverageByAcademicCourse']('2011/2012');
+    },
+    creditAverageByAcademicCourse20122013() {
+      return this.$store.getters['academic-records/getCreditAverageByAcademicCourse']('2012/2013');
+    },
+    creditAverageByAcademicCourse20132014() {
+      return this.$store.getters['academic-records/getCreditAverageByAcademicCourse']('2013/2014');
+    },
     rows() {
       return [
         {
           academicCourse: '2010/2011',
           subjectAverage: this.subjectAverageByAcademicCourse20102011,
+          creditAverage: this.creditAverageByAcademicCourse20102011,
         }, {
           academicCourse: '2011/2012',
           subjectAverage: this.subjectAverageByAcademicCourse20112012,
+          creditAverage: this.creditAverageByAcademicCourse20112012,
         }, {
           academicCourse: '2012/2013',
           subjectAverage: this.subjectAverageByAcademicCourse20122013,
+          creditAverage: this.creditAverageByAcademicCourse20122013,
         }, {
           academicCourse: '2013/2014',
           subjectAverage: this.subjectAverageByAcademicCourse20132014,
+          creditAverage: this.creditAverageByAcademicCourse20132014,
         },
       ];
     },
   },
+  methods: {
+    getMarkType(average) {
+      if (average >= 9) return 'warning';
+      if (average >= 7) return '';
+      if (average >= 5) return 'success';
+      if (average < 5) return 'fail';
+      return 'info';
+    },
+  },
 };
 </script>