new: add axios funtion

quasar.conf.js

@@ -72,7 +72,7 @@ module.exports = function (/* ctx */) {
     devServer: {
       https: false,
       port: 8080,
-      open: true // opens browser window automatically
+      open: false // opens browser window automatically
     },
 
     // https://v1.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework

src/boot/axios.js

 import Vue from 'vue'
 import axios from 'axios'
 
+axios.defaults.baseURL = 'https://api.uitm.edu.my/'
+axios.defaults.timeout = 15000
+axios.defaults.headers.common['Authorization'] = 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOlsiL3BlbmFuZ19zdGRfYWN0aXZpdHkiLCIvdWNtcyIsIi9nYW1iYXIiLCIvcGljdHVyZSIsIi9zdGFmZi9wb3J0YWxfbG9naW4iLCIvc3R1ZGVudC9wb3J0YWxfbG9naW4iLCIvaWNlcHMiLCIvd2lscyJdLCJjcmVhdGVkX2J5IjoiSW50ZWdyYXNpIiwic2VyaWFsIjoxLCJleHAiOjE2MjAyODUyNDEuODQ4ODI0LCJwZWdhd2FpX2JlcnRhbmdndW5namF3YWIiOiJOVVIgRElZQU5BSCBCSU5USSBEQSBIQUxJQiIsInVzZXIiOiJ3aWxzIn0.glTIXfY8mX3cdVcNeoD9e3Qcmc3YjZ1csr3bB7Tozg4';
+axios.defaults.headers.post['Content-Type'] = 'application/json'
 Vue.prototype.$axios = axios

src/pages/borrow.vue

+<template>
+  <q-page padding>
+    <div class="q-pa-md">
+      <q-banner dense inline-actions class="text-white bg-blue font-tajuk">
+        <div class="font-tajuk text-h4">
+          Borrow
+        </div>
+      </q-banner>
+      <q-input bottom-slots v-model="borrower_id" ref="borrower_id" :rules="[val => !!val || 'Field is required']" label="borrower_id" dense>
+        <template v-slot:hint>
+          Borrower id
+        </template>
+
+        <template v-slot:append>
+          <q-btn round dense flat icon="search" @click="findFines" />
+        </template>
+      </q-input>
+      <div  class="q-pa-md fit row wrap justify-center   q-gutter-md">
+        <q-table
+          title="Borrows"
+          :data="data"
+          :columns="columns"
+          row-key="name"
+        />
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script>
+export default {
+    data () {
+      return {
+        borrower_id: '',
+        total_fines: .0,
+        columns: [
+          {
+            name: 'BOR_ID',
+            required: true,
+            label: 'Bor ID',
+            align: 'left',
+            field: 'BOR_ID',
+            sortable: true
+          },
+          { name: 'COPY_ID', align: 'center', label: 'Copy ID', field: 'COPY_ID', sortable: true },
+          { name: 'ISS_DT', label: 'Iss Date', field: 'ISS_DT', sortable: false },
+          { name: 'RET_DT', label: 'Ret Date', field: 'RET_DT' },
+          { name: 'TITLE_NAME', label: 'Title Name', field: 'TITLE_NAME' }
+        ],
+        data: []
+      }
+    },
+    methods: {
+        findFines() {
+            this.$refs.borrower_id.validate()
+            if (this.$refs.borrower_id.hasError){
+              
+            }
+            else {
+                this.$axios.get('wils/pinjam',{
+                    params: {
+                        BOR_ID: this.borrower_id
+                    }
+                }).then((response) => {
+                    console.log(response)
+                    this.data =  response.data       
+                }).catch((err) => {
+                    console.log(err)
+                })
+            }
+        }
+    }
+}
+</script>
+
+<style>
+    @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap');
+    .font-tajuk {
+        font-family: 'Roboto Condensed', sans-serif;
+    }
+    .my-card {
+      width: 100%;
+      max-width: 300px;
+    }
+</style>
\ No newline at end of file

src/pages/fine.vue

+<template>
+  <q-page padding>
+    <div class="q-pa-md">
+      <q-banner dense inline-actions class="text-white bg-blue font-tajuk">
+        <div class="font-tajuk text-h4">
+          Fines
+        </div>
+      </q-banner>
+      <q-input bottom-slots v-model="borrower_id" ref="borrower_id" :rules="[val => !!val || 'Field is required']" label="borrower_id" dense>
+        <template v-slot:hint>
+          Borrower id
+        </template>
+
+        <template v-slot:append>
+          <q-btn round dense flat icon="search" @click="findFines" />
+        </template>
+      </q-input>
+      <div v-if="total_fines>0" class="q-pa-md fit row wrap justify-center   q-gutter-md">
+        <q-avatar size="300px" color="red">{{ total_fines }}</q-avatar>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script>
+export default {
+    data () {
+      return {
+        borrower_id: '',
+        total_fines: .0
+      }
+    },
+    methods: {
+        findFines() {
+            this.$refs.borrower_id.validate()
+            if (this.$refs.borrower_id.hasError){
+              
+            }
+            else {
+                this.$axios.get('wils/denda',{
+                    params: {
+                        borrower_id: this.borrower_id
+                    }
+                }).then((response) => {
+                    console.log(response)
+                    this.total_fines =  response.data.jumlah       
+                }).catch((err) => {
+                    console.log(err)
+                })
+            }
+        }
+    }
+}
+</script>
+
+<style>
+    @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap');
+    .font-tajuk {
+        font-family: 'Roboto Condensed', sans-serif;
+    }
+    .my-card {
+      width: 100%;
+      max-width: 300px;
+    }
+</style>
\ No newline at end of file

src/router/routes.js

@@ -7,7 +7,10 @@ const routes = [
       { path: '', component: () => import('pages/Index.vue') },
       { path: 'home', component: () => import('pages/azrulpage.vue') },
       { path: 'contact-us', component: () => import('pages/contactus.vue') },
-      { path: 'my-account', component: () => import('pages/myaccount.vue') }
+      { path: 'my-account', component: () => import('pages/myaccount.vue') },
+      { path: 'fines', component: () => import('pages/fine.vue') },
+      { path: 'borrowing-history', component: () => import('pages/borrow.vue') }
+
     ]
   },