psw/cmc_fe
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity

styling changes on contracts and meds

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/assets/css/app.css
View file

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

82
src/components/RecentOrders.vue
View file

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

200
src/views/contracts/ContractList.vue
View file

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

75
src/views/customers/CustomerList.vue
View file

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

97
src/views/medfeeds/MedFeedsList.vue
View file

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