Edit Invoice frontend

resources/assets/js/components/NewInvoice.vue

@@ -2,14 +2,17 @@
 <template>
   <div class="invoice">
     <div class="header-container">
-      <h3 v-if="status === 'pending'" class="title">
+      <h3 v-if="currentStatus === 'pending'" class="title">
         Purchase Order (Pending Approval)
       </h3>
-      <h3 v-else-if="status === 'approve'" class="title" >
+      <h3 v-else-if="currentStatus === 'approve'" class="title" >
         Purchase Order (Approved)
       </h3>
-      <h3 v-else-if="status === 'request_change'" class="title">
+      <h3 v-else-if="currentStatus === 'request_change'" class="title">
         Purchase Order (Please Change)
+        <div class="error">
+          {{ statuses[statuses.length - 1].comment }}
+        </div>
       </h3>
       <h3 v-else class="title">
         Purchase Order
@@ -298,6 +301,26 @@
       </form>
     </div> <!-- invoice-container -->
     <div v-if="role === 'admin'" class="admin-panel">
+      <div v-if="statuses.length > 0" class="comments">
+        <h5>Log</h5>
+        <table class="table comment-table">
+          <thead>
+            <tr>
+              <th>Date Time</th>
+              <th>Status</th>
+              <th>Comment</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(comment, index) in statuses" :key="index">
+              <td>{{ comment.created_at }}</td>
+              <td>{{ comment.status }}</td>
+              <td>{{ comment.comment }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <br>
       <form @submit.prevent="onSubmitStatus">
         <h5>Admin Panel</h5>
         <div class="form-group">
@@ -402,6 +425,9 @@
     margin-left: 3em;
     margin-right: 3em;
   }
+  .error {
+    color: red;
+  }
 </style>
 
 <script>
@@ -474,13 +500,14 @@ export default {
       subtotal: 0,
       total: 0,
       role: null,
-      status: null
+      currentStatus: null,
+      statuses: []
     }
   },
   computed: {
     editable: function () {
       // Not editable if created and not admin
-      return this.role === 'admin' || this.status === null || this.status === 'request_change'
+      return this.role === 'admin' || this.currentStatus === null || this.currentStatus === 'request_change'
     }
   },
   validations: {
@@ -627,21 +654,40 @@ export default {
         return
       }
 
-      const url = '/api/invoice/' + this.booking_id
-
       // create order in line
       this.form.formData.lines
         .forEach((el, i) => {
           this.form.formData.lines[i].order = (i + 1)
         })
 
+      if (this.currentStatus) {
+        console.log('edit invoice')
+        this.editInvoice()
+      } else {
+        console.log('create invoice')
+        this.createInvoice()
+      }
+    },
+    createInvoice () {
+      const url = '/api/invoice/' + this.booking_id
       axios
         .post(url, this.form.formData)
         .then(resp => {
-          this.created = true
           alert('PO Created. Pending Approval.')
           this.$router.push({ name: 'home' })
-          console.log(resp)
+        })
+        .catch(err => {
+          alert(JSON.stringify(err.response.data.message))
+          console.error(err.response.data.message)
+        })
+    },
+    editInvoice () {
+      const url = '/api/invoice/' + this.booking_id
+      axios
+        .put(url, this.form.formData)
+        .then(resp => {
+          alert(`PO have been edited${this.role === 'admin' ? ' by admin.' : '. Pending Approval'}`)
+          this.$router.push({ name: 'home' })
         })
         .catch(err => {
           alert(JSON.stringify(err.response.data.message))
@@ -663,8 +709,12 @@ export default {
             this.form.formData.lines.push(el)
           })
 
-          this.status = resp.data.status[resp.data.status.length - 1].status
-          console.log(this.status)
+          resp.data.status.forEach((el, i) => {
+            this.statuses.push(el)
+          })
+
+          this.currentStatus = resp.data.status[resp.data.status.length - 1].status
+
           this.setTotal()
         })
     },
@@ -686,6 +736,9 @@ export default {
         .post(url, this.form.postStatus)
         .then(resp => {
           this.getInvoice()
+          this.form.postStatus.status = null
+          this.form.postStatus.comment = null
+          this.$v.form.postStatus.$reset()
           alert('Status Updated')
         })
     }