Generate pdf with the score report

app/Http/Controllers/StudentsController.php

@@ -73,4 +73,12 @@ public function getScores(Request $request)
 
         return response([$response], 200);
     }
+
+    public function get(Request $request)
+    {
+        $grade_id = $request->get('grade_id');
+        $grade = Grade::findOrFail($grade_id);
+        $students = $grade->students->load('courses', 'grade');
+        return response([$students], 200);
+    }
 }

app/Student.php

@@ -8,9 +8,10 @@ class Student extends Model
 {
     protected $guarded = [];
 
-    public function course()
+    public function courses()
     {
-        return $this->belongsToMany(Course::class, 'student_courses','student_id', 'course_id');
+        return $this->belongsToMany(Course::class, 'student_courses','student_id', 'course_id')
+            ->withPivot(['score']);
     }
 
     public function grade()

package.json

@@ -38,6 +38,7 @@
     "echarts": "^4.1.0",
     "element-ui": "^2.6.1",
     "file-saver": "^2.0.1",
+    "html2pdf.js": "^0.9.1",
     "js-cookie": "^2.2.0",
     "jsonlint": "^1.6.3",
     "jszip": "^3.2.0",

public/mix-manifest.json

@@ -1,4 +1,5 @@
 {
     "/js/app.js": "/js/app.js",
-    "/css/app.css": "/css/app.css"
+    "/css/app.css": "/css/app.css",
+    "/vendors~pdfjsWorker.js": "/vendors~pdfjsWorker.js"
 }

resources/js/api/students.js

@@ -1,5 +1,13 @@
 import request from '@/utils/request';
 
+export function fetch(query) {
+  return request({
+    url: '/students/get',
+    method: 'post',
+    params: query,
+  });
+}
+
 export function fetchList(query) {
   return request({
     url: '/students',

resources/js/lang/en.js

@@ -16,6 +16,8 @@ export default {
     'new-course': 'New Course',
     'new-grade': 'New Grade',
     'success': 'Success!',
+    'generate': 'Generate',
+    'print': 'Print',
     'delete-message': 'This will permanently delete this. Continue?',
   },
   'edit-course-modal': {

resources/js/lang/es.js

@@ -17,6 +17,8 @@ export default {
     'new-course': 'Crear otro curso',
     'new-grade': 'Crear otro curso',
     'success': 'Exito!',
+    'generate': 'Generar',
+    'print': 'Imprimir',
     'delete-message': 'Esto será borrado permanentemente. Desea continuar?',
   },
   'edit-course-modal': {

resources/js/objects/student.js

@@ -12,6 +12,7 @@ export default class Student {
     this.created_at = studentRaw.created_at;
     this.grade = studentRaw.grade;
     this.grade_id = studentRaw.grade_id;
+    this.courses = studentRaw.courses;
   }
 
   save() {
@@ -28,5 +29,6 @@ new Student({
   name: '',
   picture: '',
   grade: null,
+  courses: [],
 });
 

resources/js/router/modules/scores.js

@@ -17,6 +17,12 @@ const scoreRouter = {
       name: 'grade',
       meta: { title: 'Per Grade', noCache: true },
     },
+    {
+      path: 'report',
+      component: () => import('@/views/scores/report'),
+      name: 'report',
+      meta: { title: 'Report', noCache: true },
+    },
   ],
 };
 

resources/js/views/scores/grade.vue

@@ -9,12 +9,8 @@
         :value="grade.id">
       </el-option>
     </el-select>
-    <el-table v-loading="studentsLoading" :data="studentsList" border fit highlight-current-row style="width: 100%">
-      <el-table-column
-        type="index"
-        width="50">
-      </el-table-column>
-      <el-table-column align="center" label="ID" width="80">
+    <el-table v-loading="studentsLoading" :data="studentsList" border height="calc(100vh - 250px)" fit highlight-current-row style="width: 100%">
+      <el-table-column align="center" label="ID" width="80" fixed>
         <template slot-scope="scope">
           <span>{{ scope.row.id }}</span>
         </template>
@@ -187,10 +183,8 @@ export default {
 </script>
 
 <style scoped>
-  .chart-container{
-    position: relative;
-    width: 100%;
-    height: calc(100vh - 84px);
+  input {
+    padding: 5px;
   }
 </style>
 

resources/js/views/scores/report.vue

@@ -0,0 +1,202 @@
+/* eslint-disable new-cap */
+<template>
+  <div class="app-container" v-loading.fullscreen.lock="loading">
+    <label>Select a grade</label>
+    <el-select v-model="grade.id" placeholder="Select" style="margin-bottom: 5px;" @change="generateGradeReport">
+      <el-option
+        v-for="grade in grades"
+        :key="grade.id"
+        :label="grade.name"
+        :value="grade.id">
+      </el-option>
+    </el-select>
+    <el-row v-if="grade.id" style="margin-top: 10px;">
+      <el-col :span="24">
+        <!--<el-button type="success" @click="generateGradeReport">-->
+          <!--{{$t('common.generate')}}-->
+        <!--</el-button>-->
+        <el-button type="warning" @click="generatePrint" v-if="students">
+          {{$t('common.print')}}
+        </el-button>
+        <el-button @click="$router.back()">
+          {{$t('common.back')}}
+        </el-button>
+      </el-col>
+    </el-row>
+    <el-row :gutter="12" id="scoresReport" ref="scoresReport">
+        <el-card id="scoreReport" class="box-card score-report" v-for="student in students" :key="'student.' + student.id" shadow="always" style="margin: 15px 0;">
+          <div class="info">
+            <div class="header">
+              <div class="left">
+                <img src="/static/logo1.jpg" alt="Logo">
+              </div>
+              <div class="right">
+                <p>Lorem ipsum dolor sit amet.</p>
+                <p>Lorem ipsum dolor.</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
+              </div>
+              <h1>Score Report</h1>
+            </div>
+            <table>
+              <tbody>
+              <tr>
+                <td><strong>Name:</strong></td>
+                <td>{{student.name}}</td>
+              </tr>
+              <tr>
+                <td><strong>Grade:</strong></td>
+                <td>{{student.grade.name}}</td>
+              </tr>
+              </tbody>
+            </table>
+          </div>
+          <div class="scores">
+            <table>
+              <thead>
+                <tr>
+                  <th>Course</th>
+                  <th>Score</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="course in student.courses">
+                  <td>{{course.name}}</td>
+                  <td>{{course.pivot.score}}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div class="footer">
+            <small>Created with http://schoolkit.alanhurtarte.com</small>
+          </div>
+        </el-card>
+    </el-row>
+  </div>
+</template>
+<script>
+import { fetchList as fetchGradesList } from '@/api/grades';
+import { fetch } from '../../api/students';
+import Grade from '../../objects/grade';
+import Student from '../../objects/student';
+// import * as JsPDF from 'jspdf';
+import html2pdf from 'html2pdf.js';
+
+export default {
+  name: 'gradesList',
+  components: {
+  },
+  data() {
+    return {
+      grades: [],
+      grade: {
+        courses: [],
+      },
+      students: [],
+      loading: false,
+    };
+  },
+  mounted() {
+  },
+  created() {
+    this.getGradesList();
+  },
+  methods: {
+    getGradesList() {
+      this.loading = true;
+      fetchGradesList().then(response => {
+        this.grades = response.items.map(function(item, index) {
+          return new Grade(item);
+        });
+        this.loading = false;
+      }).catch((error) => {
+        console.log('error', error);
+      });
+    },
+    generateGradeReport() {
+      this.loading = true;
+      fetch({ grade_id: this.grade.id }).then(response => {
+        this.students = response[0].map(function(student) {
+          return new Student(student);
+        });
+        this.loading = false;
+      }).catch((error) => {
+        console.log('error', error);
+      });
+      console.log('generate pdf');
+    },
+    generatePrint() {
+      const element = document.getElementById('scoresReport');
+      // html2pdf(document.getElementById('scoresReport'));
+      html2pdf().from(element).set({
+        pagebreak: { mode: 'avoid-all', before: '#scoreReport' },
+      }).save('scores_report_' + this.grade.id);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+  input {
+    padding: 5px;
+  }
+
+  @page {
+    margin: 0 auto;
+    size: auto;
+  }
+
+  /*body { margin: 1.6cm; }*/
+  header, footer {
+    display: none;
+  }
+
+  .score-report {
+    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+    position: relative;
+
+    .header {
+      display: block;
+      text-align: center;
+      margin-bottom: 50px;
+
+      .left {
+        margin-right: 5px;
+
+        img {
+          height: 150px;
+        }
+      }
+
+      .right {
+        p {
+          margin: 5px;
+        }
+      }
+    }
+
+    .scores {
+      margin-top: 50px;
+
+      table {
+        margin-top: 50px;
+        border-collapse: collapse;
+
+        th, td {
+          padding: 15px;
+          text-align: left;
+        }
+      }
+
+      table, th, td {
+        border: 1px solid #adadad;
+      }
+    }
+
+    .footer {
+      position: absolute;
+      bottom:  5px;
+      right: 5px;
+    }
+  }
+</style>
+

routes/api.php

@@ -28,6 +28,7 @@
 Route::delete('/professors', 'ProfessorsController@delete');
 
 Route::post('/students', 'StudentsController@getList');
+Route::post('/students/get', 'StudentsController@get');
 Route::post('/students/add', 'StudentsController@add');
 Route::delete('/students', 'StudentsController@delete');