added main markup for complaint add/edit

\

@@ -0,0 +1,168 @@
+<template>
+    <h3>Complaints</h3>
+    <v-tabs v-model="tab" >
+        <v-tab title="List" v-model="list"></v-tab>
+        <v-tab title="Edit" v-model="edit" v-if="edit"></v-tab>
+        <v-tab title="Report" v-model="report" v-if="report" ></v-tab>
+    </v-tabs>
+        <v-window v-model="tab">
+            <v-window-item v-model="list">
+                <v-col cols="12" xs="12" sm="12" md="12" lg=8>
+                    <v-text-field 
+                                                 clearable
+                                                 label="Search"
+                                                 variant="outlined"
+                                                 v-model="searchQuery"
+                                                 density="compact"
+                                                 append-inner-icon="mdi-magnify"></v-text-field>
+                    <v-row justify="space-between">
+                        <v-col cols=4>
+                            <v-btn v-if="site_info.features.addcomplaint" color="warning" prepend-icon="mdi-plus" variant="text" @click="showAddComplaint">Add</v-btn>
+                        </v-col>
+                        <v-col cols=3>
+                            <v-btn align="end" variant="text" @click="showActive = !showActive">
+                                Showing <span v-if="showActive">Active Only</span><span v-else>Inactive</span>
+                            </v-btn>
+                        </v-col>
+                    </v-row>
+                    <v-progress-linear indeterminate color="orange" :active="loading"></v-progress-linear>
+                    <v-card variant="outlined">
+                        <RecycleScroller class="scroller"
+                                         :items="filteredComplaints"
+                                         :item-size="100"
+                                         v-slot="{ item }" 
+                                         key-field="id">
+                        <v-row dense class="item" :class="{ 'bg-red-lighten-4' : item.at_risk }">
+                            <v-col cols="4">
+                                Complaint : {{ item.id }}<br/>
+                                <span class="text-caption">
+                                    Complaint Date : {{ item.complaint_date }}<br/>
+                                    Sales Order: {{ item.sop.doc_no }}<br/>
+                                </span>
+                            </v-col>
+                            <v-col cols="4" class="text-body-2">
+                                {{ item.customer.acc_no }} - {{ item.customer.name }}<br/>
+                                Reason : {{ item.reason }}<br/>
+                                Driver : {{ item.driver.name }}
+                            </v-col>
+                            <v-col cols=4>
+                                <div class="d-flex justify-space-around align-center flex-column flex-sm-row fill-height">
+                                    <v-row>
+                                        <v-icon icon="mdi-exclamation" v-if="item.at_risk" color="red" title="At Risk"></v-icon>
+                                        <v-icon icon="mdi-play" v-if="item.active" title="Active"></v-icon>
+                                    </v-row>
+                                    <v-btn @click="showInfo(item)" color="blue-lighten-1">View</v-btn>
+                                    <v-btn v-if="site_info.features.editcomplaint" color="orange-lighten-2">Edit</v-btn>
+                                </div>
+                            </v-col>
+                        </v-row>
+                        </RecycleScroller>
+                    </v-card>
+                </v-col>
+            </v-window-item>
+            <v-window-item value="edit">
+                <ComplaintEdit ref="edit" :setcomplaint="selected_cmplaint" @closetab="tab = 'list'" @complaintupdate="complaintUpdated"></ComplaintEdit>
+            </v-window-item>
+        </v-window>
+        <v-dialog v-model="showComplaintInfo">
+            <ComplaintInfo :in_complaint="selected_complaint" @return="doInfoReturn" />
+        </v-dialog>
+</template>
+<script>
+import axios from 'axios'
+import ComplaintInfo from '@/components/ComplaintInfo.vue'
+export default {
+    props: {
+        site_info:{},
+        user_info:{}
+    },
+    components: {
+        ComplaintInfo
+    },
+    data() {
+        return {
+            tab: "list",
+            list: [],
+            listreceived: false,
+            showActive: true,
+            loading: true,
+            limit: 300,
+            searchQuery: "",
+            edit: false,
+            report: false,
+            showComplaintInfo: false,
+            selected_complaint: {}
+        }
+    },
+    computed: {
+        filteredComplaints() {
+            let query = this.searchQuery.toLowerCase()
+            if (!this.listreceived){
+                this.getComplaintsList()
+            }
+            let clist = this.list.filter(q =>
+                q.customer.name.toLowerCase().includes(query) ||
+                q.customer.acc_no.includes(query) ||
+                q.id == query ||
+                q.reason.toLowerCase().includes(query)
+            )
+            if (this.showActive) {
+                clist = clist.filter(q => 
+                    q.active == true
+                )
+            }
+            return clist
+        }
+    },
+    methods: {
+        getComplaintsList(){
+            this.loading = true
+            let url = this.$api_url + "/customers/complaints/list"
+            let c_id = this.$route.params.id || ""
+            console.log("Getting Contracts list..." + c_id)
+            axios.get(url,{
+                params: {
+                    limit: this.limit,
+                    query: this.searchQuery,
+                    c_id: c_id
+                }
+            }).then(resp => {
+                this.list = resp.data
+                console.log(this.list)
+                this.listreceived = true
+            }).catch(err => {
+                console.log(err)
+            }).finally(() => {
+                this.loading = false
+            })
+        },
+        showInfo(complaint) {
+            this.showComplaintInfo = true
+            this.selected_complaint = complaint
+            complaint.info_loaded = false
+        },
+        doInfoReturn(code) {
+            console.log(code)
+        },
+        showAddComplaint() {
+            this.edit = true
+            this.tab = "edit"
+        }
+    }
+}
+</script>
+<style>
+.scroller {
+    height:600px;
+}
+.item {
+    height: 100px;
+    overflow-y:hidden;
+    padding: 0 1em;
+    margin-bottom:2px;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #000;
+}
+</style>
+

src/components/DriverSearch.vue

@@ -0,0 +1,75 @@
+<template>
+    <v-card title="Driver Search">
+        <v-card-text>
+            <v-text-field label="Search" v-model="driver_search" append-icon="mdi-magnify"></v-text-field>
+            <v-progress-linear indeterminate :active="drivers_loading">
+            </v-progress-linear>
+            <v-list>
+                <RecycleScroller class="scroller"
+                                 :items="filteredDrivers"
+                                 :item-size="50"
+                                 v-slot="{ item }" 
+                                 key-field="id"
+                                 >
+                                 <v-list-item @click="setDriver(item)">
+                                     {{ item.name }}
+                                 </v-list-item>
+                </RecycleScroller>
+            </v-list>
+        </v-card-text>
+    </v-card>
+</template>
+<script>
+import axios from 'axios'
+export default {
+    props:{
+    },
+    data() {
+        return {
+            driver_search: "",
+            drivers: [],
+            drivers_loading: null
+        }
+    },
+    emits: ['return'],
+    created() {
+        this.allDrivers()
+    },
+    computed: {
+        filteredDrivers() {
+            let q = this.driver_search.toLowerCase()
+            if (q == ""){ return this.drivers }
+            let ms = this.drivers.filter(m => 
+                m.name.toLowerCase().includes(q)
+            )
+            return ms
+        }
+    },
+    methods: {
+        allDrivers(){
+            this.drivers_loading = true
+            console.log("All Drivers...")
+            let url = this.$api_url + "/drivers"
+            axios.get(url)
+                .then(resp => {
+                    this.drivers = resp.data
+                })
+                .catch(err => {
+                    console.log(err)
+                })
+                .finally(() => {
+                    this.drivers_loading = false
+                })
+        },
+        setDriver(p){
+            this.$emit('return',p)
+        }
+    }
+}
+</script>
+<style scoped>
+.scroller {
+    height:500px;
+}
+</style>
+

src/types/ComplaintType.vue

@@ -3,7 +3,7 @@ import Customer from '@/types/CustomerType.vue'
 import ComplaintInfo from '@/types/ComplaintInfoType.vue'
 export default class Complaint {
     id = 0
-    complaint_date = ""
+    complaint_date = new Date()
     delivery_date = ""
     reason = ""
     sop = {}

src/views/complaints/ComplaintEdit.vue

@@ -0,0 +1,187 @@
+<template>
+    <v-card :title="title">
+        <v-card-subtitle>
+            Complaint : {{ complaint.id }}
+        </v-card-subtitle>
+        <v-card-text>
+            <v-container>
+                <v-row>
+                    <v-col cols=6>
+                        <v-text-field readonly variant="outlined" prepend-inner-icon="mdi-magnify" @click="showCustomerSearch" label="Customer" :model-value="complaint.customer.acc_no + ' - ' + complaint.customer.name">
+                        </v-text-field>
+                        <label>
+                            Complaint Date :
+                            <DatePicker v-model="complaint.complaint_date"   format="dd/MM/yyyy" />
+                        </label>
+                    </v-col>
+                    <v-col cols=6>
+                        <v-text-field label="Sales Order Number" v-model="complaint.sop.doc_no" variant="outlined"></v-text-field>
+                        <v-select label="Reason" v-model="complaint.reason" :items="reasons" item-title="reason" item-value="id" return-object variant="outlined"></v-select>
+                        <v-text-field readonly prepend-inner-icon="mdi-magnify" label="Driver" v-model="complaint.driver.name" variant="outlined" @click="showDriverSearch"></v-text-field>
+                    </v-col>
+                </v-row>
+                <v-row>
+                    <v-col cols=12>
+                        <v-progress-linear :active="info_loading" indeterminate></v-progress-linear>
+                        <v-textarea variant="outlined" label="Comments" v-model="complaint.info.comments">
+                        </v-textarea>
+                    </v-col>
+                </v-row>
+                <v-row>
+                    <v-col cols=12>
+                        <v-expansion-panels v-model="debugPanel">
+                            <v-expansion-panel title="Debug Info">
+                                <v-expansion-panel-text>
+                                    {{ complaint }}
+                                </v-expansion-panel-text>
+                            </v-expansion-panel>
+                        </v-expansion-panels>
+                    </v-col>
+                </v-row>
+            </v-container>
+        </v-card-text>
+        <ErrorBanner :errors="errors" />
+        <v-card-actions>
+            <v-btn v-if="!complaint.isNew" color="red-darken-1"
+                                           variant="text"
+                                           :loading="saving"
+                                           @click="saveComplaint(selected_complaint)">Save</v-btn>
+            <v-btn v-if="complaint.isNew" color="red-darken-1"
+                                          variant="text"
+                                          :loading="saving"
+                                          @click="saveComplaint(selected_complaint)">Add</v-btn>
+            <v-spacer></v-spacer>
+            <v-btn color="blue-darken-1"
+                   variant="text"
+                   @click="close">Close</v-btn>
+        </v-card-actions>
+    </v-card>
+    <v-dialog v-model="search[0]" scrollable>
+        <CustomerSearch @returnCustomer="setCustomer"></CustomerSearch>
+    </v-dialog>
+    <v-dialog v-model="search[1]">
+        <DriverSearch @return="setDriver"></DriverSearch>
+    </v-dialog>
+</template>
+<script>
+import axios from 'axios'
+import ErrorBanner from '@/components/ErrorBanner.vue'
+import methods from '@/CommonMethods.vue'
+import DatePicker from '@vuepic/vue-datepicker'
+import Complaint from '@/types/ComplaintType.vue'
+import CustomerSearch from '@/components/CustomerSearch.vue'
+import DriverSearch from '@/components/DriverSearch.vue'
+export default {
+    props: {
+        setcomplaint: new Complaint()
+    },
+    components: {
+        ErrorBanner,
+        CustomerSearch,
+        DriverSearch,
+        DatePicker
+    },
+    watch: {
+        setcomplaint(newval) {
+            this.complaint = newval
+        },
+    },
+    mixins: [methods],
+    data() {
+        return {
+            complaint: this.setcomplaint,
+            saving: false,
+            info_loading: false,
+            search: [],
+            customer_search: null,
+            customers_loading: false,
+            customers: [],
+            errors: [],
+            reasons: [],
+            debugPanel: true
+        }
+    },
+    computed: {
+        title() {
+            if ( this.complaint.isNew ) {
+                return "New Complaint"
+            } else {
+                return "Edit Complaint"
+            }
+        }
+    },
+    emits: ['closetab','complaintupdate'],
+    methods: {
+        close() {
+            this.$emit('closetab')
+        },
+        showCustomerSearch() {
+            this.search[0] = true
+        },
+        showDriverSearch() {
+            this.search[1] = true
+        },
+        async saveComplaint(){
+            this.errors = []
+            this.saving = true
+            let url = this.$api_url + "/customers/complaints/" + this.complaint.id + "/save"
+            if (this.complaint.isNew) {
+                url = this.$api_url + "/customers/complaints/add"
+            }
+            axios.post(url, {
+                complaint: this.complaint
+            }).then(resp => {
+                console.log("Saved Complaint : " + JSON.stringify(resp.data))
+                this.saving = false
+                let stat = resp.data
+                if (stat.status == true ) {
+                    if (this.complaint.isNew) {
+                        this.$emit('complaintupdate', resp.data)
+                    } else {
+                        this.$emit('complaintupdate', resp.data)
+                    }
+                }  else {
+                    this.errors.push("Complaint not saved.")
+                    console.log("Not Saved")
+                }
+            }).catch(err => {
+                console.log(err)
+                this.saving = false
+            })
+        },
+        setCustomer(c){
+            this.complaint.customer = c
+            this.search[0] = false
+        },
+        setDriver(d) {
+            this.complaint.driver = d
+            this.search[1] = false
+        },
+        getComplaintInfo(){
+            this.info_loading = true
+            let url = this.$api_url + "/customers/complaints/" + this.complaint.id + "/info"
+            console.log("Getting Complaint Info...")
+            axios.get(url)
+                .then(resp =>{
+                    this.complaint.info = resp.data
+                }).finally(() => {
+                    this.info_loading = false
+                })
+        },
+        getComplaintReasons() {
+            let url = this.$api_url + "/customers/complaints/reasons"
+            axios.get(url).
+                then(resp => {
+                    this.reasons = resp.data
+                })
+
+        }
+    },
+    created() {
+        if (!this.complaint.isNew) {
+            this.getComplaintInfo()
+        }
+        this.getComplaintReasons()
+    }
+}
+</script>

src/views/complaints/ComplaintsList.vue

@@ -1,23 +1,21 @@
 <template>
     <h3>Complaints</h3>
     <v-tabs v-model="tab" >
-        <v-tab title="List" v-model="list" />
+        <v-tab title="List" value="isList"></v-tab>
-            <v-tab title="Edit" v-model="edit" v-if="edit" />
+        <v-tab title="Edit" value="edit" v-if="edit"></v-tab>
-                <v-tab title="Report" v-model="report" v-if="report" />
+        <v-tab title="Report" value="report" v-if="report" ></v-tab>
     </v-tabs>
     <v-window v-model="tab">
-            <v-window-item v-model="list">
+        <v-window-item value="isList">
             <v-col cols="12" xs="12" sm="12" md="12" lg=8>
-                    <v-text-field 
+                <v-text-field label="Search"
-                                                 clearable
-                                                 label="Search"
                               variant="outlined"
                               v-model="searchQuery"
                               density="compact"
                               append-inner-icon="mdi-magnify"></v-text-field>
                 <v-row justify="space-between">
                     <v-col cols=4>
-                            <v-btn v-if="site_info.features.addcomplaint" color="warning" prepend-icon="mdi-plus" variant="text">Add</v-btn>
+                        <v-btn v-if="site_info.features.addcomplaint" color="warning" prepend-icon="mdi-plus" variant="text" @click="showAddComplaint">Add</v-btn>
                     </v-col>
                     <v-col cols=3>
                         <v-btn align="end" variant="text" @click="showActive = !showActive">
@@ -52,7 +50,7 @@
                                     <v-icon icon="mdi-play" v-if="item.active" title="Active"></v-icon>
                                 </v-row>
                                 <v-btn @click="showInfo(item)" color="blue-lighten-1">View</v-btn>
-                                    <v-btn v-if="site_info.features.editcomplaint" color="orange-lighten-2">Edit</v-btn>
+                                <v-btn v-if="site_info.features.editcomplaint" color="orange-lighten-2" @click="showEditComplaint(item)">Edit</v-btn>
                             </div>
                         </v-col>
                     </v-row>
@@ -60,6 +58,9 @@
                 </v-card>
             </v-col>
         </v-window-item>
+        <v-window-item value="edit">
+            <ComplaintEdit ref="edit" :setcomplaint="selected_complaint" @closetab="tab = 'isList'" @complaintupdate="complaintUpdated"></ComplaintEdit>
+        </v-window-item>
     </v-window>
     <v-dialog v-model="showComplaintInfo">
         <ComplaintInfo :in_complaint="selected_complaint" @return="doInfoReturn" />
@@ -67,18 +68,21 @@
 </template>
 <script>
 import axios from 'axios'
+import Complaint from '@/types/ComplaintType.vue'
 import ComplaintInfo from '@/components/ComplaintInfo.vue'
+import ComplaintEdit from '@/views/complaints/ComplaintEdit.vue'
 export default {
     props: {
         site_info:{},
         user_info:{}
     },
     components: {
-        ComplaintInfo
+        ComplaintInfo,
+        ComplaintEdit
     },
     data() {
         return {
-            tab: "list",
+            tab: "isList",
             list: [],
             listreceived: false,
             showActive: true,
@@ -125,7 +129,6 @@ export default {
                 }
             }).then(resp => {
                 this.list = resp.data
-                console.log(this.list)
                 this.listreceived = true
             }).catch(err => {
                 console.log(err)
@@ -141,6 +144,22 @@ export default {
         doInfoReturn(code) {
             console.log(code)
         },
+        showAddComplaint() {
+            this.selected_complaint = new Complaint()
+            this.selected_complaint.isNew = true
+            this.edit = true
+            this.tab = "edit"
+        },
+        showEditComplaint(cmp) {
+            this.selected_complaint = cmp
+            this.selected_complaint.isNew = false
+            this.edit = true
+            this.tab = "edit"
+        },
+        complaintUpdated(cmp) {
+            console.log(cmp)
+            this.tab = "isList"
+        }
     }
 }
 </script>