styling changes on contracts and meds

This commit is contained in:
Paul Wilde 2023-03-24 14:35:22 +00:00
parent eef3f9816c
commit 28e97f1c7f
5 changed files with 232 additions and 223 deletions

View file

@ -67,7 +67,6 @@ table tr.at_risk:hover {
color: grey; color: grey;
} }
.scroller { .scroller {
border: 1px dotted #333;
} }
.scroller { .scroller {
height: 600px; height: 600px;

View file

@ -1,51 +1,55 @@
<template> <template>
<h3>{{ doc_types[doc_status] }} Orders - {{ customer.acc_no }} {{ customer.name }} <v-card>
<v-btn v-if="customer.id != ''" size="smaller" icon="mdi-refresh" variant="text" color="green" @click="getCustomerRecentOrders" :loading="orders_loading"></v-btn> <v-card-title>
</h3> {{ doc_types[doc_status] }} Orders - {{ customer.acc_no }} {{ customer.name }}
<v-progress-linear color="blue" :active="orders_loading" indeterminate> <v-btn v-if="customer.id != ''" size="smaller" icon="mdi-refresh" variant="text" color="green" @click="getCustomerRecentOrders" :loading="orders_loading"></v-btn>
</v-progress-linear>
<v-container> </v-card-title>
<v-row dense> <v-progress-linear color="blue" :active="orders_loading" indeterminate>
<v-col cols=12 v-for="item in sortedOrders" :key="item.doc_no"> </v-progress-linear>
<v-card density="compact" :class="{ 'bg-green-lighten-5' : item.doc_status == 'Live' }"> <v-container>
<v-row dense>
<v-col cols=12 v-for="item in sortedOrders" :key="item.doc_no">
<v-card density="compact" :class="{ 'bg-green-lighten-5' : item.doc_status == 'Live' }">
<v-row dense> <v-row dense>
<v-col cols=4> <v-col cols=4>
<v-card-title> <v-card-title>
Order: {{ item.doc_no }} Order: {{ item.doc_no }}
</v-card-title> </v-card-title>
<v-card-subtitle> <v-card-subtitle>
{{ formatDate(item.doc_date,"DD/MM/YYYY") }} {{ formatDate(item.doc_date,"DD/MM/YYYY") }}
<v-icon v-if="item.doc_status == 'Completed'" icon="mdi-check"></v-icon> <v-icon v-if="item.doc_status == 'Completed'" icon="mdi-check"></v-icon>
<v-icon v-if="item.doc_status == 'Live'" icon="mdi-play"></v-icon> <v-icon v-if="item.doc_status == 'Live'" icon="mdi-play"></v-icon>
{{ item.doc_status }} {{ item.doc_status }}
</v-card-subtitle> </v-card-subtitle>
<v-card-text> <v-card-text>
<!--<h5>Address :</h5>--> <!--<h5>Address :</h5>-->
<template v-if="item.del_addr.id != 0 && item.del_addr.postal_name != ''"> <template v-if="item.del_addr.id != 0 && item.del_addr.postal_name != ''">
<h5>Delivery Address :</h5> <h5>Delivery Address :</h5>
<template v-for="(v, k , index) in item.del_addr" :key="index"> <template v-for="(v, k , index) in item.del_addr" :key="index">
<v-caption v-if="k != 'id' && (v != '' || v != 0)"> <v-caption v-if="k != 'id' && (v != '' || v != 0)">
{{ v }}<br/> {{ v }}<br/>
</v-caption> </v-caption>
</template>
</template> </template>
</template> </v-card-text>
</v-card-text>
</v-col> </v-col>
<v-col> <v-col>
<v-card-text> <v-card-text>
<h5>Items :</h5> <h5>Items :</h5>
<v-caption v-for="(i, index) in item.products" :key="index" style="border-bottom: 1px dotted #000;"> <v-caption v-for="(i, index) in item.products" :key="index" style="border-bottom: 1px dotted #000;">
{{ i.code }} - {{ i.name }} {{ i.code }} - {{ i.name }}
<span v-if="i.quantity != 0">x {{ i.quantity }}</span><br/> <span v-if="i.quantity != 0">x {{ i.quantity }}</span><br/>
</v-caption> </v-caption>
</v-card-text> </v-card-text>
</v-col> </v-col>
</v-row> </v-row>
</v-card> </v-card>
</v-col> </v-col>
</v-row> </v-row>
</v-container> </v-container>
</v-card>
</template> </template>
<script> <script>
import axios from 'axios' import axios from 'axios'

View file

@ -7,114 +7,110 @@
</v-tabs> </v-tabs>
<v-window v-model="tab" > <v-window v-model="tab" >
<v-window-item value="list"> <v-window-item value="list">
<v-responsive <v-row>
max-width="500" <v-col cols="8" xs="12" sm="12" md="12" lg="8">
>
<v-text-field clearable <v-text-field clearable
label="Search" label="Search"
variant="outlined" variant="outlined"
v-model="searchQuery" v-model="searchQuery"
density="compact" density="compact"
append-inner-icon="mdi-magnify"></v-text-field> append-inner-icon="mdi-magnify"></v-text-field>
</v-responsive> <v-btn color="warning"
<v-btn color="warning" v-if="site_info.features.addcontract"
v-if="site_info.features.addcontract" @click="showEditContract()"
@click="showEditContract()" prepend-icon="mdi-plus"
> variant="text"
+ Add >Add</v-btn>
</v-btn> <v-progress-linear indeterminate color="blue" :active="loading"></v-progress-linear>
<v-dialog v-model="showDialog"> <v-card variant="outlined">
</v-dialog> <RecycleScroller class="scroller"
<v-row> :items="filteredContracts"
<v-col cols="8" xs="12" sm="12" md="12" lg="8"> :item-size="130"
<v-progress-linear indeterminate color="blue" :active="loading"></v-progress-linear> v-slot="{ item }"
<RecycleScroller class="scroller" key-field="no"
:items="filteredContracts" >
:item-size="130" <v-row :class="[{inactive : !item.active}]" class="item">
v-slot="{ item }" <v-col cols="4" >
key-field="no" <h3>Contract : {{ item.no }}</h3>
> {{ item.customer.acc_no }} - {{ item.customer.name }}
<v-row :class="[{inactive : !item.active}]" class="item"> <v-switch v-model="item.active" color="green" @change="setContractInactive(item)" label="Active"></v-switch>
<v-col cols="4" > </v-col>
<h3>Contract : {{ item.no }}</h3> <v-col >
{{ item.customer.acc_no }} - {{ item.customer.name }} <template v-for="p in item.products" :key="p.code">
<v-switch v-model="item.active" color="green" @change="setContractInactive(item)" label="Active"></v-switch> <span v-if="p.code != ''">
</v-col> {{ p.code }} @ {{ p.price }}<br/>
<v-col > </span>
<template v-for="p in item.products" :key="p.code"> </template>
<span v-if="p.code != ''"> </v-col>
{{ p.code }} @ {{ p.price }}<br/> <v-col >
</span> <v-icon title="Start">mdi-play</v-icon>: {{ formatDate(item.start_date,"DD/MM/YYYY") }}<br/>
</template> <v-icon title="Finish">mdi-flag-checkered</v-icon>: {{ formatDate(item.finish_date,"DD/MM/YYYY") }}<br/>
</v-col> <v-icon title="Duration">mdi-clock</v-icon>: {{ item.duration }} months
<v-col > </v-col>
<v-icon title="Start">mdi-play</v-icon>: {{ formatDate(item.start_date,"DD/MM/YYYY") }}<br/> <v-col>
<v-icon title="Finish">mdi-flag-checkered</v-icon>: {{ formatDate(item.finish_date,"DD/MM/YYYY") }}<br/> {{ item.tonnage_per_month }} per month<br/>
<v-icon title="Duration">mdi-clock</v-icon>: {{ item.duration }} months = {{ formatNumber(item.tonnage_per_month * item.duration,2) }} total<br/>
</v-col> = {{ formatNumber(item.tonnage_per_month * item.remaining_duration,2) }} remaining<br/>
<v-col> </v-col>
{{ item.tonnage_per_month }} per month<br/> <v-col>
= {{ formatNumber(item.tonnage_per_month * item.duration,2) }} total<br/> <div class="d-flex justify-space-around align-center flex-column flex-sm-row fill-height">
= {{ formatNumber(item.tonnage_per_month * item.remaining_duration,2) }} remaining<br/> <v-btn color="info">
</v-col> More
<v-col> <v-overlay activator="parent" class="align-center justify-center">
<div class="d-flex justify-space-around align-center flex-column flex-sm-row fill-height"> <v-card title="Info" width="600">
<v-btn color="info"> <v-card-subtitle>Comments</v-card-subtitle>
More <v-card-text>{{ item.comments}} </v-card-text>
<v-overlay activator="parent" class="align-center justify-center"> <v-card-subtitle>Office</v-card-subtitle>
<v-card title="Info" width="600"> <v-card-text>{{ item.office_comments}}</v-card-text>
<v-card-subtitle>Comments</v-card-subtitle> <v-card-subtitle>Agreed</v-card-subtitle>
<v-card-text>{{ item.comments}} </v-card-text> <v-card-text>{{ formatDate(item.agree_date,"DD/MM/YYYY") }}</v-card-text>
<v-card-subtitle>Office</v-card-subtitle> <v-card-subtitle>Products</v-card-subtitle>
<v-card-text>{{ item.office_comments}}</v-card-text> <v-card-text>
<v-card-subtitle>Agreed</v-card-subtitle> <template v-for="p in item.products" :key="p.code">
<v-card-text>{{ formatDate(item.agree_date,"DD/MM/YYYY") }}</v-card-text> <span v-if="p.code != ''">
<v-card-subtitle>Products</v-card-subtitle> {{ p.code }} - {{ p.name }} @ {{ p.price }}<br/>
<v-card-text> </span>
<template v-for="p in item.products" :key="p.code"> </template>
<span v-if="p.code != ''"> </v-card-text>
{{ p.code }} - {{ p.name }} @ {{ p.price }}<br/> <v-card-actions>
</span> <v-btn color="info"
</template> target="blank"
</v-card-text> @click="getContractPrint(item.no)"
<v-card-actions> class="ma-2 pa-2"
<v-btn color="info" :loading="item.multiloading"
target="blank"
@click="getContractPrint(item.no)"
class="ma-2 pa-2"
:loading="item.multiloading"
>
Multi
</v-btn>
<v-btn color="info"
target="blank"
@click="getContractPrint(item.no,true)"
:loading="item.totalloading"
class="ma-2 pa-2"
>
Total
</v-btn>
<v-btn color="warning"
v-if="site_info.features.editcontract"
@click="showEditContract(item)"
> >
Edit Multi
</v-btn> </v-btn>
</v-card-actions>
</v-card> <v-btn color="info"
</v-overlay> target="blank"
</v-btn> @click="getContractPrint(item.no,true)"
<v-btn color="warning" :loading="item.totalloading"
v-if="site_info.features.editcontract" class="ma-2 pa-2"
@click="showEditContract(item)" >
> Total
Edit </v-btn>
</v-btn> <v-btn color="warning"
</div> v-if="site_info.features.editcontract"
</v-col> @click="showEditContract(item)"
</v-row> >
</RecycleScroller> Edit
</v-btn>
</v-card-actions>
</v-card>
</v-overlay>
</v-btn>
<v-btn color="warning"
v-if="site_info.features.editcontract"
@click="showEditContract(item)"
>
Edit
</v-btn>
</div>
</v-col>
</v-row>
</RecycleScroller>
</v-card>
</v-col> </v-col>
</v-row> </v-row>
</v-window-item> </v-window-item>
@ -125,6 +121,8 @@
<ContractMulti :contract="selected_contract" :total="total" /> <ContractMulti :contract="selected_contract" :total="total" />
</v-window-item> </v-window-item>
</v-window> </v-window>
<v-dialog v-model="showDialog">
</v-dialog>
</template> </template>
<script> <script>
import ContractEdit from './ContractEdit.vue'; import ContractEdit from './ContractEdit.vue';
@ -257,7 +255,7 @@ export default {
</script> </script>
<style scoped> <style scoped>
.scroller { .scroller {
height: 600px; height: 70vw;
} }
.item { .item {

View file

@ -8,41 +8,46 @@
append-inner-icon="mdi-magnify"></v-text-field> append-inner-icon="mdi-magnify"></v-text-field>
<v-row> <v-row>
<v-col cols="12" sm=12 lg=6> <v-col cols="12" sm=12 lg=6>
<h3>Customer List</h3> <v-card>
<v-progress-linear color="blue" :active="customers_loading" indeterminate> <v-card-title>
</v-progress-linear> Customer List
<v-list> </v-card-title>
<RecycleScroller <v-progress-linear color="blue" :active="customers_loading" indeterminate>
class="scroller" </v-progress-linear>
:items="filteredCustomers" <v-list>
:item-size="60" <RecycleScroller
key-field="acc_no" class="scroller"
v-slot="{ item }" :items="filteredCustomers"
> :item-size="60"
<v-list-item > key-field="acc_no"
<template v-slot:title > v-slot="{ item }"
<v-card @click="getCustomerInfo(item)"> >
{{ item.acc_no }} - {{ item.name }}: <v-list-item >
<span class="text-caption">{{ item.address.line_1 }}, {{ item.address.line_2 }}, <br/> <template v-slot:title >
{{ item.address.city }}, {{ item.address.county}}, {{ item.address.postcode }}, <v-card @click="getCustomerInfo(item)">
</span> {{ item.acc_no }} - {{ item.name }}:
</v-card> <span class="text-caption">{{ item.address.line_1 }}, {{ item.address.line_2 }}, <br/>
</template> {{ item.address.city }}, {{ item.address.county}}, {{ item.address.postcode }},
<template v-slot:append> </span>
<v-btn @click.prevent="goToContracts(item)" class="text-none" color="blue-lighten-1" title="View Contracts"> </v-card>
Contracts </template>
<v-badge v-if="item.contract_count > 0" color="blue-lighten-4" floating :content="item.contract_count"> <template v-slot:append>
</v-badge> <v-btn @click.prevent="goToContracts(item)" class="text-none" color="blue-lighten-1" title="View Contracts">
</v-btn> Contracts
<v-btn @click.prevent="goToMedFeeds(item)" class="text-none" color="orange-lighten-1" title="View Med Feeds"> <v-badge v-if="item.contract_count > 0" color="blue-lighten-4" floating :content="item.contract_count">
Med Feeds </v-badge>
<v-badge v-if="item.medfeed_count > 0" color="orange-lighten-4" floating :content="item.medfeed_count"> </v-btn>
</v-badge> <v-btn @click.prevent="goToMedFeeds(item)" class="text-none" color="orange-lighten-1" title="View Med Feeds">
</v-btn> Med Feeds
</template> <v-badge v-if="item.medfeed_count > 0" color="orange-lighten-4" floating :content="item.medfeed_count">
</v-list-item> </v-badge>
</RecycleScroller> </v-btn>
</v-list> </template>
</v-list-item>
</RecycleScroller>
</v-list>
</v-card>
<br/>
<RecentOrders :customer="selected_cust" doc_status="0"></RecentOrders> <RecentOrders :customer="selected_cust" doc_status="0"></RecentOrders>
</v-col> </v-col>
<v-col cols="12" sm=12 lg=6> <v-col cols="12" sm=12 lg=6>

View file

@ -10,60 +10,63 @@
<v-window-item value="list"> <v-window-item value="list">
<v-row> <v-row>
<v-col> <v-col>
</v-col>
</v-row>
<v-row>
<v-col cols="12" xs="12" sm="12" md="12" lg=8>
<v-text-field clearable <v-text-field clearable
label="Search" label="Search"
variant="outlined" variant="outlined"
v-model="searchQuery" v-model="searchQuery"
density="compact" density="compact"
append-inner-icon="mdi-magnify"></v-text-field> append-inner-icon="mdi-magnify"></v-text-field>
</v-col> <v-btn v-if="site_info.features.addmedfeed" color="warning" @click="editMedFeed()" prepend-icon="mdi-plus" variant="text">Add</v-btn>
</v-row>
<v-btn v-if="site_info.features.addmedfeed" color="warning" @click="editMedFeed()">+ Add</v-btn>
<v-row>
<v-col cols="12" xs="12" sm="12" md="12" lg=8>
<v-progress-linear indeterminate color="blue" :active="loading"></v-progress-linear> <v-progress-linear indeterminate color="blue" :active="loading"></v-progress-linear>
<RecycleScroller class="scroller" <v-card variant="outlined">
:items="filteredMedFeeds" <RecycleScroller class="scroller"
:item-size="108" :items="filteredMedFeeds"
v-slot="{ item }" :item-size="100"
key-field="id"> v-slot="{ item }"
<v-row class="item" :class="{ at_risk : item.customer.at_risk }"> key-field="id">
<v-col cols="4"> <v-row dense class="item" :class="{ at_risk : item.customer.at_risk }">
Medicated Feed : {{ item.id }}<br/> <v-col cols="4">
{{ item.customer.acc_no }} - {{ item.customer.name }}<br/> Medicated Feed : {{ item.id }}<br/>
{{ item.vet.practice }} <span class="text-caption">
</v-col> {{ item.customer.acc_no }} - {{ item.customer.name }}<br/>
<v-col> Vet: {{ item.vet.practice }}</span>
{{ item.medication.name }} {{ item.medication.inclusion_rate }}<br /> </v-col>
{{ item.product.name }} <v-col class="text-caption">
</v-col> {{ item.medication.name }} {{ item.medication.inclusion_rate }}<br />
<v-col> {{ item.product.name }}
Required : {{ formatDate(item.date_required,"DD/MM/YYYY") }} <br/> </v-col>
Repeat Prescription? : <v-icon v-if="item.repeat">mdi-refresh</v-icon> <v-col class="text-caption">
</v-col> Required : {{ formatDate(item.date_required,"DD/MM/YYYY") }} <br/>
<v-col> Repeat Prescription? : <v-icon v-if="item.repeat">mdi-refresh</v-icon>
<div class="d-flex justify-space-around align-center flex-column flex-sm-row fill-height"> </v-col>
<v-btn> <v-col>
More <div class="d-flex justify-space-around align-center flex-column flex-sm-row fill-height">
<v-overlay activator="parent" class="align-center justify-center"> <v-btn>
<v-container> More
<v-card width="600"> <v-overlay activator="parent" class="align-center justify-center">
<v-card-title>Info</v-card-title> <v-container>
<v-card-subtitle>Repeat Message</v-card-subtitle> <v-card width="600">
<v-card-text>{{ item.repeat_message }}</v-card-text> <v-card-title>Info</v-card-title>
<v-card-actions> <v-card-subtitle>Repeat Message</v-card-subtitle>
<v-btn class="mb-2 mr-2" color="blue" @click="reportScriptReq(item)">Script Request</v-btn> <v-card-text>{{ item.repeat_message }}</v-card-text>
<v-btn class="mb-2 mr-2" color="blue" @click="reportOrderForm(item)">Order Form</v-btn> <v-card-actions>
</v-card-actions> <v-btn class="mb-2 mr-2" color="blue" @click="reportScriptReq(item)">Script Request</v-btn>
</v-card> <v-btn class="mb-2 mr-2" color="blue" @click="reportOrderForm(item)">Order Form</v-btn>
</v-container> </v-card-actions>
</v-overlay> </v-card>
</v-btn><br/> </v-container>
<v-btn v-if="site_info.features.editmedfeed" color="warning" @click="editMedFeed(item)">Edit</v-btn> </v-overlay>
</div> </v-btn><br/>
</v-col> <v-btn v-if="site_info.features.editmedfeed" color="warning" @click="editMedFeed(item)">Edit</v-btn>
</v-row> </div>
</RecycleScroller> </v-col>
</v-row>
</RecycleScroller>
</v-card>
</v-col> </v-col>
</v-row> </v-row>
</v-window-item> </v-window-item>