update page fine

quasar.conf.js

@@ -94,7 +94,10 @@ module.exports = function (/* ctx */) {
       // directives: [],
 
       // Quasar plugins
-      plugins: []
+      plugins: [
+        'Loading',
+        'Notify'
+      ]
     },
 
     // animations: 'all', // --- includes all animations

src/pages/borrow.vue

@@ -6,9 +6,9 @@
           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>
+      <q-input bottom-slots v-model="borrower_id" ref="borrower_id" :rules="[val => !!val || 'Field is required']" label="Staf/Student ID" dense>
         <template v-slot:hint>
-          Borrower id
+          2016607348
         </template>
 
         <template v-slot:append>
@@ -31,7 +31,7 @@
 export default {
     data () {
       return {
-        borrower_id: '',
+        borrower_id: '2016607348',
         total_fines: .0,
         columns: [
           {

src/pages/fine.vue

@@ -6,7 +6,7 @@
           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>
+      <q-input bottom-slots v-model="borrower_id" ref="borrower_id" :rules="[val => !!val || 'Field is required']" label="Student/Staff ID" dense>
         <template v-slot:hint>
           Borrower id
         </template>
@@ -16,7 +16,7 @@
         </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>
+        <q-avatar size="70vw" color="green">{{ total_fines }}</q-avatar>
       </div>
     </div>
   </q-page>
@@ -26,17 +26,25 @@
 export default {
     data () {
       return {
-        borrower_id: '',
+        borrower_id: '2016607348',
         total_fines: .0
       }
     },
     methods: {
         findFines() {
+            
             this.$refs.borrower_id.validate()
             if (this.$refs.borrower_id.hasError){
-              
+              this.$q.notify({
+                message: 'Error. Please enter ID.',
+                icon: 'error',
+                color: 'red'
+              })
             }
             else {
+              this.$q.loading.show({
+              delay: 10 // ms
+            })
                 this.$axios.get('wils/denda',{
                     params: {
                         borrower_id: this.borrower_id
@@ -44,8 +52,21 @@ export default {
                 }).then((response) => {
                     console.log(response)
                     this.total_fines =  response.data.jumlah   
+                    this.$q.notify({
+                      message: 'Record was successfully retrieved.',
+                      icon: 'check',
+                      color: 'green'
+                    })
+
                 }).catch((err) => {
                     console.log(err)
+                    this.$q.notify({
+                      message: 'Error. please try again.',
+                      icon: 'error',
+                      color: 'red'
+                    })
+                }).finally(()=>{
+                  this.$q.loading.hide()
                 })
             }
         }