cssd-doc/cssd-front
1
0
Fork 0
mirror of https://git.meshkee.com/cssd/cssd-front.git synced 2026-10-13 10:13:17 +03:30
Code Issues Packages Projects Releases Wiki Activity

fix : btn colors and filter btns

Browse Source
This commit is contained in:
zeinab.ashrafi
2025-04-22 14:31:17 +03:30
parent 32e8bb910f
commit 8482e6bc53
14 changed files with 1054 additions and 804 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/core/Toolbar.vue
+9 -1
View File
@@ -148,7 +148,15 @@ export default {
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1.5rem; letter-spacing: 1.5rem;
} }
@media screen and (max-width: 1440px) {
.title-home {
font-family: "Montserrat-Regular";
font-weight: 400;
font-size: 25px !important;
text-transform: uppercase;
letter-spacing: 12px;
}
}
.Pointer { .Pointer {
cursor: pointer; cursor: pointer;
} }
src/components/modal/item/show.vue
+49 -15
View File
@@ -10,25 +10,33 @@
<v-flex xs12 md6 sm6> <v-flex xs12 md6 sm6>
<div class> <div class>
<span class="title CSSD-font">Item ID :</span> <span class="title CSSD-font">Item ID :</span>
<span class="headline ml-1 CSSD-font" style="letter-spacing:0 !important">{{ <span class="headline ml-1 CSSD-font" style="letter-spacing:0 !important">
data.id {{ data.id }}
}}</span> </span>
</div> </div>
</v-flex> </v-flex>
<v-flex xs12 md6 sm6> <v-flex xs12 md6 sm6>
<div class> <div class>
<span class="title CSSD-font">Name :</span> <span class="title CSSD-font">Name :</span>
<span class="headline ml-1 CSSD-font" style="letter-spacing:0 !important">{{ <span class="headline ml-1 CSSD-font" style="letter-spacing:0 !important">
data.name {{ data.name }}
}}</span> </span>
</div> </div>
</v-flex> </v-flex>
<v-flex xs12 md6 sm6> <v-flex xs12 md6 sm6>
<div class> <div class>
<span class="title CSSD-font">Size :</span> <span class="title CSSD-font">Size :</span>
<span class="headline ml-1 CSSD-font" style="letter-spacing:0 !important">{{ <span class="headline ml-1 CSSD-font" style="letter-spacing:0 !important">
data.size {{ data.size }}
}}</span> </span>
</div>
</v-flex>
<v-flex xs12 md6 sm6>
<div class>
<span class="title CSSD-font">UDI :</span>
<span class="headline ml-1 CSSD-font" style="letter-spacing:0 !important">
{{ data.udi }}
</span>
</div> </div>
</v-flex> </v-flex>
<v-flex xs12 md6 sm6> <v-flex xs12 md6 sm6>
@@ -55,6 +63,26 @@
</v-flex> </v-flex>
</v-layout> </v-layout>
<v-layout align-left justify-left wrap class="my-3" v-if="data.files.length">
<h3 class="CSSD-font">Image</h3>
<v-flex xs12>
<hr class="v-divider theme--light"/>
</v-flex>
<v-layout row wrap class="">
<!-- <LightBox :media="data.images.map(img => ({thumb: img.path, src: img.path}))" style="width: 20%"></LightBox> -->
<v-flex xs6 md2 sm2 v-for="(file, key) in data.files" :key="key">
<template v-if="file.file_type == 'document'">
<a target="_blank" :href="'/'+file.thumbnail">
<v-icon class="mr-2 caption">fas fa-check</v-icon>
{{ file.file_name }}</a>
</template>
<template v-else>
<img :src="file.thumbnail" style="width: 100%"/>
</template>
</v-flex>
</v-layout>
</v-layout>
<v-layout align-left justify-left wrap class="my-3"> <v-layout align-left justify-left wrap class="my-3">
<h3 class="CSSD-font">Barcode And QRCode Image</h3> <h3 class="CSSD-font">Barcode And QRCode Image</h3>
<v-flex xs12> <v-flex xs12>
@@ -101,6 +129,7 @@
import {mapGetters, mapMutations} from "vuex"; import {mapGetters, mapMutations} from "vuex";
import {ApiService} from "@/services"; import {ApiService} from "@/services";
import {urls} from "@/config/urls"; import {urls} from "@/config/urls";
import toast from "@/services/global/toast.service";
export default { export default {
data: () => ({ data: () => ({
@@ -110,11 +139,16 @@ export default {
}), }),
methods: { methods: {
...mapMutations("modal", ["closeModal", "setResultModal", "changeCurrentModal"]), ...mapMutations("modal", ["closeModal", "setResultModal", "changeCurrentModal"]),
async generateBarcode(itemId) { async generateBarcode(item) {
const result = await ApiService.post(urls.Barcode(itemId, 'Item')); let code = item.udi;
if (result && result.status == 200) { if (code) {
this.QRCodeimg = result.data.data.QRCode ? result.data.data.QRCode : null; const result = await ApiService.post(urls.Barcode(code, 'Item'));
this.barcodeimg = result.data.data.Barcode ? result.data.data.Barcode : null; if (result && result.status == 200) {
this.QRCodeimg = result.data.data.QRCode ? result.data.data.QRCode : null;
this.barcodeimg = result.data.data.Barcode ? result.data.data.Barcode : null;
}
} else {
toast.error('An error occurred while generating the barcode . please first set UDI');
} }
}, },
print() { print() {
@@ -158,7 +192,7 @@ export default {
...mapGetters("modal", ["getModalProperties"]) ...mapGetters("modal", ["getModalProperties"])
}, },
mounted() { mounted() {
this.generateBarcode(this.data.id); this.generateBarcode(this.data);
} }
}; };
</script> </script>
src/styles/css/Assets/Main.scss
+12 -18
View File
@@ -26,25 +26,11 @@
src: url('../../fonts/Montserrat-Light.ttf') format('truetype'); src: url('../../fonts/Montserrat-Light.ttf') format('truetype');
} }
body, body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .title, .display-1 {
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.title,
.display-1 {
font-family: 'Montserrat-Regular' !important; font-family: 'Montserrat-Regular' !important;
} }
.CSSD-font, .CSSD-font, .headline.CSSD-font, h3.CSSD-font {
.headline.CSSD-font,
h3.CSSD-font {
font-family: 'Montserrat-Regular' !important; font-family: 'Montserrat-Regular' !important;
} }
@@ -86,8 +72,7 @@ h3.CSSD-font {
vertical-align: sub !important; vertical-align: sub !important;
} }
.fa, .fa, .fas {
.fas {
font-size: 20px; font-size: 20px;
} }
@@ -107,6 +92,15 @@ h3.CSSD-font {
border-left: 3px solid; border-left: 3px solid;
} }
.cyan{
background-color: #32c5d2 !important;
border-color: #32c5d2 !important;
}
.light-gray {
background-color: #eeeeee !important;
border-color: #eeeeee !important;
}
.WM-LightGray-BG { .WM-LightGray-BG {
background-color: #eee !important; background-color: #eee !important;
} }
src/styles/css/Assets/WM-ModernTheme.scss
+494 -358
View File
File diff suppressed because it is too large Load Diff
src/views/Cycle/List.vue
+47 -36
View File
@@ -2,32 +2,32 @@
<div class> <div class>
<v-container fluid> <v-container fluid>
<material-card class color="black" title="All Cycles" text> <material-card class color="black" title="All Cycles" text>
<v-layout align-center wrap class="px-3 my-3"> <v-layout align-center wrap class="px-3">
<v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter"> <v-flex xs12 sm4 lg2 xl1 class="WM-FlexCenter">
<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/> <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
<v-text-field class="py-3 pr-3" v-model="filter.cycle_id" label="Cycle ID" <v-text-field class="pt-3 pr-3" v-model="filter.cycle_id" label="Cycle ID"
color="black"/> color="black"/>
</v-flex> </v-flex>
<v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3"> <v-flex xs12 sm4 lg2 xl1 class="WM-FlexCenter">
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/> <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
<v-text-field class="py-3 pr-3" v-model="filter.sterilizer_id" label="Sterilizer ID" <v-text-field class="pt-3 pr-3" v-model="filter.sterilizer_id" label="Sterilizer ID"
color="black"/> color="black"/>
</v-flex> </v-flex>
<v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3"> <v-flex xs12 sm4 lg2 xl1 class="WM-FlexCenter">
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/> <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
<v-text-field class="py-3 pr-3" v-model="filter.cycle_number" label="Cycle Number" <v-text-field class="pt-3 pr-3" v-model="filter.cycle_number" label="Cycle Number"
color="black"/> color="black"/>
</v-flex> </v-flex>
<v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3" v-if="$hasRole('Admin')"> <v-flex xs12 sm6 lg3 xl2 class="WM-FlexCenter" v-if="$hasRole('Admin')">
<v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"/> <v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"/>
<v-autocomplete class="py-3 pr-3" v-model="filter.medical_center_id" item-text="name" <v-autocomplete class="pt-3 pr-3" v-model="filter.medical_center_id" item-text="name"
item-value="id" label="Hospital" color="black" :items="medicalCenters" item-value="id" label="Hospital" color="black" :items="medicalCenters"
:clearable="true"/> :clearable="true"/>
</v-flex> </v-flex>
<v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3"> <v-flex xs12 sm6 lg3 xl2 class="WM-FlexCenter">
<v-icon class="far fa-calendar-alt mr-2 WM-Margin-B-8"/> <v-icon class="far fa-calendar-alt mr-2 WM-Margin-B-8"/>
<v-menu lazy :close-on-content-click="true" transition="v-scale-transition" offset-y <v-menu class="pt-3 pr-3" lazy :close-on-content-click="true" transition="v-scale-transition"
v-model="Menu"> offset-y v-model="Menu" style="width: 100%;">
<v-text-field style="padding-top:0 !important" required slot="activator" label="Date" <v-text-field style="padding-top:0 !important" required slot="activator" label="Date"
color="black" class="" v-model="filter.date"> color="black" class="" v-model="filter.date">
</v-text-field> </v-text-field>
@@ -36,17 +36,25 @@
</v-menu> </v-menu>
</v-flex> </v-flex>
<v-spacer/> <v-spacer/>
<v-flex class xs12 sm6 md6 lg2 xl1> <v-flex xs12 sm12 md12 lg12 xl3 class="WM-Align-R">
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="load()"> <v-tooltip bottom open-on-hover>
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon> <template v-slot:activator="{ on, attrs }">
<span class="white--text">Filter</span> <v-btn v-bind="attrs" v-on="on" color="WM-Tooltip-Btn WM-Outline-Btn WM-Border WM-Margin-BT-0 WM-Border-Black mr-2" @click="load()">
<v-icon class="black--text caption">fas fa-search</v-icon>
</v-btn>
</template>
<span>Filter</span>
</v-tooltip>
<v-btn class="WM-Outline-Btn WM-Border mr-2 WM-Margin-BT-0 WM-Border-Black" style="padding: 10px 30px;">
<v-icon class="black--text mr-2 caption">fas fa-share-square</v-icon>
<span class="black--text">EXPORT</span>
</v-btn> </v-btn>
</v-flex>
<v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
<router-link :to="{ name: 'AddCycle' }"> <router-link :to="{ name: 'AddCycle' }">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black"> <v-btn class="WM-CyanBlueGradient-BG WM-Margin-BT-0" style="padding:10px 30px">
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon> <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
<span class="black--text">Add</span> <span class="white--text">Add</span>
</v-btn> </v-btn>
</router-link> </router-link>
</v-flex> </v-flex>
@@ -77,20 +85,32 @@
<td class="text-xs-right FlexBtn Height-MD-60 justify-self-end"> <td class="text-xs-right FlexBtn Height-MD-60 justify-self-end">
<v-tooltip bottom open-on-hover> <v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on" color="cyan" class="mr-2" <v-btn v-bind="attrs" v-on="on" color="light-gray" class="mr-2"
@click="show(item.id)"> @click="show(item.id)">
<v-icon class="white--text mr-1 caption">fas fa-eye</v-icon> <v-icon class="black--text mr-1 caption">fas fa-eye</v-icon>
<span>Show</span> <span>Show</span>
</v-btn> </v-btn>
</template> </template>
<span>Show</span> <span>Show</span>
</v-tooltip> </v-tooltip>
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on" color="light-gray" class="mr-2"
@click="generateBarcode(item.id, 'Cycle')">
<v-icon class="black--text mr-1 caption">fas fa-barcode</v-icon>
<span>Generate Barcode</span>
</v-btn>
</template>
<span>Generate Barcode</span>
</v-tooltip>
<v-tooltip bottom open-on-hover> <v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<router-link class="LinkBtn" <router-link class="LinkBtn"
v-if="$hasRole('Admin') || item.user_id == $store.state.user.id" v-if="$hasRole('Admin') || item.user_id == $store.state.user.id"
:to="{ name: 'EditCycle', params: { cycle: item.id } }"> :to="{ name: 'EditCycle', params: { cycle: item.id } }">
<v-btn v-bind="attrs" v-on="on" color="orange" class="mr-2"> <v-btn v-bind="attrs" v-on="on" color="black" class="mr-2">
<v-icon class="white--text mr-1 caption">fas fa-pen</v-icon> <v-icon class="white--text mr-1 caption">fas fa-pen</v-icon>
<span>Edit</span> <span>Edit</span>
</v-btn> </v-btn>
@@ -98,9 +118,10 @@
</template> </template>
<span>Edit</span> <span>Edit</span>
</v-tooltip> </v-tooltip>
<v-tooltip bottom open-on-hover> <v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on" color="pink" class="WM-ActionButton mr-2" <v-btn v-bind="attrs" v-on="on" color="red" class="WM-ActionButton mr-2"
@click="removeModal(item.id)" @click="removeModal(item.id)"
v-if="$hasRole('Admin') || item.user_id == $store.state.user.id"> v-if="$hasRole('Admin') || item.user_id == $store.state.user.id">
<v-icon class="white--text mr-2 caption">fas fa-trash</v-icon> <v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
@@ -109,16 +130,6 @@
</template> </template>
<span>Remove</span> <span>Remove</span>
</v-tooltip> </v-tooltip>
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on" color="orange darken-1"
@click="generateBarcode(item.id, 'Cycle')">
<v-icon class="white--text mr-1 caption">fas fa-barcode</v-icon>
<span>Generate Barcode</span>
</v-btn>
</template>
<span>Generate Barcode</span>
</v-tooltip>
</td> </td>
</template> </template>
</v-data-table> </v-data-table>
@@ -163,7 +174,7 @@ export default {
{sortable: false, text: "Label IDs", value: "Label IDs"}, {sortable: false, text: "Label IDs", value: "Label IDs"},
{sortable: false, text: "Cycle Number", value: "Cycle Number"}, {sortable: false, text: "Cycle Number", value: "Cycle Number"},
{sortable: false, text: "Date", value: "date"}, {sortable: false, text: "Date", value: "date"},
{sortable: false, text: "Action", value: "action", align: "center",width:'10%'} {sortable: false, text: "Action", value: "action", align: "center", width: '10%'}
], ],
filter: {}, filter: {},
Menu: false, Menu: false,
src/views/Item/List.vue
+58 -56
View File
@@ -2,43 +2,53 @@
<div class> <div class>
<v-container fluid> <v-container fluid>
<material-card class color="black" title="All Items" text> <material-card class color="black" title="All Items" text>
<v-layout align-center wrap class="my-3 px-3"> <v-layout align-center wrap class="px-3">
<v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter"> <v-flex xs12 sm4 md4 lg2 xl1 class="WM-FlexCenter">
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/> <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
<v-text-field class="py-3 pr-3" v-model="filter.item_id" label="Item ID" <v-text-field class="pt-3 pr-3" v-model="filter.item_id" label="Item ID"
color="black"/> color="black"/>
</v-flex> </v-flex>
<v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter"> <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter">
<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/> <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
<v-text-field class="py-3 pr-3" v-model="filter.name" label="Name" color="black"/> <v-text-field class="pt-3 pr-3" v-model="filter.name" label="Name" color="black"/>
</v-flex> </v-flex>
<v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter" v-if="$hasRole('Admin')"> <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter" v-if="$hasRole('Admin')">
<v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"/> <v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"/>
<v-autocomplete class="py-3 pr-3" v-model="filter.medical_center_id" item-text="name" <v-autocomplete class="pt-3 pr-3" v-model="filter.medical_center_id" item-text="name"
item-value="id" label="Hospital" color="black" :items="medicalCenters" item-value="id" label="Hospital" color="black" :items="medicalCenters"
:clearable="true"/> :clearable="true"/>
</v-flex> </v-flex>
<v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter"> <v-flex xs12 sm3 md3 lg2 xl1 class="WM-FlexCenter">
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/> <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
<v-text-field class="py-3 pr-3" v-model="filter.size" label="Size" color="black"/> <v-text-field class="pt-3 pr-3" v-model="filter.size" label="Size" color="black"/>
</v-flex> </v-flex>
<v-flex xs12 sm4 md3 lg2 xl2 class="WM-FlexCenter"> <v-flex xs12 sm3 md3 lg2 xl1 class="WM-FlexCenter">
<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/> <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
<v-text-field class="py-3 pr-3" v-model="filter.udi" label="UDI" color="black"/> <v-text-field class="pt-3 pr-3" v-model="filter.udi" label="UDI" color="black"/>
</v-flex> </v-flex>
<!--btn--> <!--btn-->
<v-spacer/> <v-spacer/>
<v-flex class xs12 sm6 md6 lg2 xl1> <v-flex xs12 sm6 md6 lg12 xl3 class="WM-Align-R">
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="load()"> <v-tooltip bottom open-on-hover>
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon> <template v-slot:activator="{ on, attrs }">
<span class="white--text">Filter</span> <v-btn v-bind="attrs" v-on="on"
color="WM-Tooltip-Btn WM-Outline-Btn WM-Border WM-Margin-BT-0 WM-Border-Black mr-2"
@click="load()">
<v-icon class="black--text caption">fas fa-search</v-icon>
</v-btn>
</template>
<span>Filter</span>
</v-tooltip>
<v-btn class="WM-Outline-Btn WM-Border mr-2 WM-Margin-BT-0 WM-Border-Black" style="padding: 10px 30px;">
<v-icon class="black--text mr-2 caption">fas fa-share-square</v-icon>
<span class="black--text">EXPORT</span>
</v-btn> </v-btn>
</v-flex>
<v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
<router-link :to="{ name: 'AddItem' }"> <router-link :to="{ name: 'AddItem' }">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black"> <v-btn class="WM-CyanBlueGradient-BG WM-Margin-BT-0" style="padding:10px 30px">
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon> <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
<span class="black--text">Add</span> <span class="white--text">Add</span>
</v-btn> </v-btn>
</router-link> </router-link>
</v-flex> </v-flex>
@@ -74,7 +84,7 @@
<v-btn :color="status.color" class="mr-2" <v-btn :color="status.color" class="mr-2"
@click="changeStatus(item, status.status)" v-bind="attrs" @click="changeStatus(item, status.status)" v-bind="attrs"
v-on="on"> v-on="on">
<v-icon class="white--text mr-1 caption"> <v-icon :class="`${status.font_color}--text mr-1 caption`">
fas {{ status.icon }} fas {{ status.icon }}
</v-icon> </v-icon>
<span>{{ status.label }}</span> <span>{{ status.label }}</span>
@@ -85,20 +95,30 @@
</template> </template>
<v-tooltip bottom open-on-hover> <v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on" color="cyan" class="mr-2" <v-btn v-bind="attrs" v-on="on" color="light-gray" class="mr-2"
@click="show(item.id)"> @click="show(item.id)">
<v-icon class="white--text mr-1 caption">fas fa-eye</v-icon> <v-icon class="black--text mr-1 caption">fas fa-eye</v-icon>
<span>Show</span> <span>Show</span>
</v-btn> </v-btn>
</template> </template>
<span>Show</span> <span>Show</span>
</v-tooltip> </v-tooltip>
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<v-btn class="mr-2" v-bind="attrs" v-on="on" color="light-gray"
@click="generateBarcode(item, 'Item')">
<v-icon class="black--text mr-2 caption">fas fa-barcode</v-icon>
<span class="CSSD-font">Generate Barcode</span>
</v-btn>
</template>
<span>Generate Barcode</span>
</v-tooltip>
<v-tooltip bottom open-on-hover> <v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<router-link class="LinkBtn" <router-link class="LinkBtn"
v-if="$hasRole('Admin|Supervisor') ||( item.user_id == $store.state.user.id && !['approved', 'rejected'].includes(item.status))" v-if="$hasRole('Admin|Supervisor') ||( item.user_id == $store.state.user.id && !['approved', 'rejected'].includes(item.status))"
:to="{ name: 'EditItem', params: { Item: item.id } }"> :to="{ name: 'EditItem', params: { Item: item.id } }">
<v-btn v-bind="attrs" v-on="on" color="orange" class="mr-2"> <v-btn v-bind="attrs" v-on="on" color="black" class="mr-2">
<v-icon class="white--text mr-1 caption">fas fa-pen</v-icon> <v-icon class="white--text mr-1 caption">fas fa-pen</v-icon>
<span>Edit</span> <span>Edit</span>
</v-btn> </v-btn>
@@ -108,7 +128,7 @@
</v-tooltip> </v-tooltip>
<v-tooltip bottom open-on-hover> <v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on" color="pink" class="WM-ActionButton mr-2" <v-btn v-bind="attrs" v-on="on" color="red" class="WM-ActionButton mr-2"
@click="removeModal(item.id)" @click="removeModal(item.id)"
v-if="$hasRole('Admin|Supervisor') ||( item.user_id == $store.state.user.id && !['approved', 'rejected'].includes(item.status))"> v-if="$hasRole('Admin|Supervisor') ||( item.user_id == $store.state.user.id && !['approved', 'rejected'].includes(item.status))">
<v-icon class="white--text mr-2 caption">fas fa-trash</v-icon> <v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
@@ -117,16 +137,6 @@
</template> </template>
<span>Remove</span> <span>Remove</span>
</v-tooltip> </v-tooltip>
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<v-btn class="mr-2" v-bind="attrs" v-on="on" color="orange darken-1"
@click="generateBarcode(item, 'Item')">
<v-icon class="white--text mr-2 caption">fas fa-barcode</v-icon>
<span class="CSSD-font">Generate Barcode</span>
</v-btn>
</template>
<span>Generate Barcode</span>
</v-tooltip>
</td> </td>
</template> </template>
</v-data-table> </v-data-table>
@@ -209,12 +219,17 @@ export default {
this.loadMedicalCenters(); this.loadMedicalCenters();
}, },
async generateBarcode(item, type = null) { async generateBarcode(item, type = null) {
const result = await ApiService.post(urls.Barcode(item.id, type)); let code = item.udi;
if (result && result.status == 200) { if (code) {
this.changeCurrentModal({ const result = await ApiService.post(urls.Barcode(item.id, type));
modal: "modal-barcode-barcode", if (result && result.status == 200) {
properties: {result, item}, this.changeCurrentModal({
}); modal: "modal-barcode-barcode",
properties: {result, item},
});
}
} else {
toast.error('An error occurred while generating the barcode . please first set UDI');
} }
}, },
async show(id) { async show(id) {
@@ -252,8 +267,8 @@ export default {
getStatus(item) { getStatus(item) {
if (item.status === 'pending') { if (item.status === 'pending') {
return [ return [
{status: 'rejected', label: 'reject', color: 'red', icon: 'fa-close'}, {status: 'approved', label: 'approve', color: 'cyan', font_color : 'white', icon: 'fa-check'},
{status: 'approved', label: 'approve', color: 'green', icon: 'fa-check'} {status: 'rejected', label: 'reject', color: 'light-gray',font_color : 'black', icon: 'fa-close'},
] ]
} else { } else {
const nextStatus = item.status === 'rejected' ? 'approved' : 'rejected' const nextStatus = item.status === 'rejected' ? 'approved' : 'rejected'
@@ -261,7 +276,8 @@ export default {
{ {
status: nextStatus, status: nextStatus,
label: nextStatus === 'approved' ? 'approve' : 'reject', label: nextStatus === 'approved' ? 'approve' : 'reject',
color: nextStatus === 'approved' ? 'green' : 'red', color: nextStatus === 'approved' ? 'cyan' : 'light-gray',
font_color: nextStatus === 'approved' ? 'white' : 'black',
icon: nextStatus === 'approved' ? 'fa-check' : 'fa-close' icon: nextStatus === 'approved' ? 'fa-check' : 'fa-close'
} }
] ]
@@ -284,17 +300,3 @@ export default {
} }
}; };
</script> </script>
<style>
.v-btn--floating {
padding: 0 !important;
}
.theme--light.v-btn.v-btn--flat {
color: rgba(0, 0, 0, .87) !important;
}
.v-btn--floating,
.v-btn--icon:before {
border-radius: 50% !important;
}
</style>
src/views/Label/List.vue
+51 -41
View File
@@ -2,17 +2,26 @@
<div class> <div class>
<v-container fluid> <v-container fluid>
<material-card class color="black" title="All Labels" text> <material-card class color="black" title="All Labels" text>
<v-layout align-center wrap class="px-3 my-3"> <v-layout align-center wrap class="px-3">
<v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter"> <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter">
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/> <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
<v-text-field class="py-3" v-model="filter.label_id" label="Label ID" <v-text-field class="pt-3 pr-3" v-model="filter.label_id" label="Label ID"
color="black"/> color="black"/>
</v-flex> </v-flex>
<v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter">
<v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3" v-if="$hasRole('Admin')"> <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
<v-text-field class="pt-3 pr-3" v-model="filter.sterilizer_id" label="Sterilizer ID"
color="black"/>
</v-flex>
<v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter">
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
<v-text-field class="pt-3 pr-3" v-model="filter.cycle_number" label="Cycle Number"
color="black"/>
</v-flex>
<v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter" v-if="$hasRole('Admin')">
<v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"/> <v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"/>
<v-autocomplete <v-autocomplete
class="py-3 pr-3" class="pt-3 pr-3"
v-model="filter.medical_center_id" v-model="filter.medical_center_id"
@change="fillUsers" @change="fillUsers"
item-text="name" item-text="name"
@@ -23,28 +32,26 @@
:clearable="true" :clearable="true"
/> />
</v-flex> </v-flex>
<v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3">
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
<v-text-field class="py-3" v-model="filter.sterilizer_id" label="Sterilizer ID"
color="black"/>
</v-flex>
<v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3">
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
<v-text-field class="py-3" v-model="filter.cycle_number" label="Cycle Number"
color="black"/>
</v-flex>
<v-spacer/> <v-spacer/>
<v-flex xs12 sm6 md6 lg2 xl1 class=""> <v-flex xs12 sm6 md6 lg12 xl3 class="WM-Align-R">
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="load()"> <v-tooltip bottom open-on-hover>
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon> <template v-slot:activator="{ on, attrs }">
<span class="white--text">Filter</span> <v-btn v-bind="attrs" v-on="on" color="WM-Tooltip-Btn WM-Outline-Btn WM-Border WM-Margin-BT-0 WM-Border-Black mr-2" @click="load()">
<v-icon class="black--text caption">fas fa-search</v-icon>
</v-btn>
</template>
<span>Filter</span>
</v-tooltip>
<v-btn class="WM-Outline-Btn WM-Border mr-2 WM-Margin-BT-0 WM-Border-Black" style="padding: 10px 30px;">
<v-icon class="black--text mr-2 caption">fas fa-share-square</v-icon>
<span class="black--text">EXPORT</span>
</v-btn> </v-btn>
</v-flex>
<v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right"> <router-link :to="{ name: 'AddLabel' }">
<router-link :to="{name: 'AddLabel'}"> <v-btn class="WM-CyanBlueGradient-BG WM-Margin-BT-0" style="padding:10px 30px">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black"> <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon> <span class="white--text">Add</span>
<span class="black--text">Add</span>
</v-btn> </v-btn>
</router-link> </router-link>
</v-flex> </v-flex>
@@ -71,21 +78,33 @@
<td class="text-xs-right FlexBtn Height-MD-60 justify-self-end"> <td class="text-xs-right FlexBtn Height-MD-60 justify-self-end">
<v-tooltip bottom open-on-hover> <v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on" color="cyan" class="mr-2" <v-btn v-bind="attrs" v-on="on" color="light-gray" class="mr-2"
@click="show(item.id)"> @click="show(item.id)">
<v-icon class="white--text mr-1 caption">fas fa-eye</v-icon> <v-icon class="black--text mr-1 caption">fas fa-eye</v-icon>
<span>Show</span> <span>Show</span>
</v-btn> </v-btn>
</template> </template>
<span>Show</span> <span>Show</span>
</v-tooltip> </v-tooltip>
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on" color="light-gray" class="mr-2"
@click="generateBarcode(item.id, 'Label')">
<v-icon class="black--text mr-1 caption">fas fa-barcode</v-icon>
<span>Generate Barcode</span>
</v-btn>
</template>
<span>Generate Barcode</span>
</v-tooltip>
<v-tooltip bottom open-on-hover> <v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<router-link <router-link
class="LinkBtn" class="LinkBtn"
v-if="$hasRole('Admin') || item.user_id == $store.state.user.id" v-if="$hasRole('Admin') || item.user_id == $store.state.user.id"
:to="{name: 'EditLabel', params: {label: item.id}}"> :to="{name: 'EditLabel', params: {label: item.id}}">
<v-btn v-bind="attrs" v-on="on" color="orange" class="mr-2"> <v-btn v-bind="attrs" v-on="on" color="black" class="mr-2">
<v-icon class="white--text mr-1 caption">fas fa-pen</v-icon> <v-icon class="white--text mr-1 caption">fas fa-pen</v-icon>
<span>Edit</span> <span>Edit</span>
</v-btn> </v-btn>
@@ -93,11 +112,12 @@
</template> </template>
<span>Edit</span> <span>Edit</span>
</v-tooltip> </v-tooltip>
<v-tooltip bottom open-on-hover> <v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<v-btn <v-btn
v-bind="attrs" v-on="on" v-bind="attrs" v-on="on"
color="pink" color="red"
class="WM-ActionButton mr-2" class="WM-ActionButton mr-2"
@click="removeModal(item.id)" @click="removeModal(item.id)"
v-if="$hasRole('Admin') || item.user_id == $store.state.user.id"> v-if="$hasRole('Admin') || item.user_id == $store.state.user.id">
@@ -107,16 +127,6 @@
</template> </template>
<span>Remove</span> <span>Remove</span>
</v-tooltip> </v-tooltip>
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on" color="orange darken-1 mr-2"
@click="generateBarcode(item.id, 'Label')">
<v-icon class="white--text mr-1 caption">fas fa-barcode</v-icon>
<span>Generate Barcode</span>
</v-btn>
</template>
<span>Generate Barcode</span>
</v-tooltip>
</td> </td>
</template> </template>
</v-data-table> </v-data-table>
@@ -161,7 +171,7 @@ export default {
{sortable: false, text: "Cycle Number", value: "Cycle Number"}, {sortable: false, text: "Cycle Number", value: "Cycle Number"},
{sortable: false, text: "Sterilizer ID", value: "Sterilizer ID"}, {sortable: false, text: "Sterilizer ID", value: "Sterilizer ID"},
{sortable: false, text: "Package ID", value: "Package ID"}, {sortable: false, text: "Package ID", value: "Package ID"},
{sortable: false, text: "Action", value: "action", align: "center",width:'10%'} {sortable: false, text: "Action", value: "action", align: "center", width: '10%'}
], ],
filter: {}, filter: {},
items: [], items: [],
src/views/MedicalCenter/List.vue
+36 -31
View File
@@ -1,31 +1,34 @@
<template> <template>
<v-container fluid> <v-container fluid>
<material-card class color="black" title="Medical Centers List" text> <material-card class color="black" title="Medical Centers List" text>
<v-layout wrap class="px-5 mb-3"> <v-layout wrap class="px-3 align-center">
<v-flex xs12 md3 sm3 class="pr-3"> <v-flex xs12 sm6 md6 lg3 xl2>
<v-text-field label="Name" v-model="filter.name" color="black"/> <v-text-field class="pt-3 pr-3" label="Name" v-model="filter.name" color="black"/>
</v-flex> </v-flex>
<v-spacer/> <v-spacer/>
<v-flex class xs12 sm6 md6 lg2 xl1> <v-flex xs12 sm6 md6 lg3 xl3 class="WM-Align-R">
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="load()"> <v-tooltip bottom open-on-hover>
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon> <template v-slot:activator="{ on, attrs }">
<span class="white--text">Filter</span> <v-btn v-bind="attrs" v-on="on" color="WM-Tooltip-Btn WM-Outline-Btn WM-Border WM-Margin-BT-0 WM-Border-Black mr-2" @click="load()">
</v-btn> <v-icon class="black--text caption">fas fa-search</v-icon>
</v-flex> </v-btn>
<v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right"> </template>
<span>Filter</span>
</v-tooltip>
<router-link :to="{ name: 'AddMedicalCenter' }"> <router-link :to="{ name: 'AddMedicalCenter' }">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black"> <v-btn class="WM-CyanBlueGradient-BG WM-Margin-BT-0" style="padding:10px 30px">
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon> <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
<span class="black--text">Add</span> <span class="white--text">Add</span>
</v-btn> </v-btn>
</router-link> </router-link>
</v-flex> </v-flex>
</v-layout> </v-layout>
<v-layout class="px-4 my-3"> <v-layout class="px-3 my-3">
<v-divider/> <v-divider/>
</v-layout> </v-layout>
<v-layout align-center justify-center wrap class="px-5 mt-3"> <v-layout align-center justify-center wrap class="px-3 mt-3">
<v-flex md12> <v-flex xs12>
<v-data-table :headers="headers" :items="items" hide-actions> <v-data-table :headers="headers" :items="items" hide-actions>
<template slot="headerCell" slot-scope="{ header }"> <template slot="headerCell" slot-scope="{ header }">
<span class="subheading font-weight-light text-white text--darken-3" v-text="header.text"/> <span class="subheading font-weight-light text-white text--darken-3" v-text="header.text"/>
@@ -35,11 +38,25 @@
<td class="title font-weight-light">{{ $d(new Date(item.created_at), 'long') }}</td> <td class="title font-weight-light">{{ $d(new Date(item.created_at), 'long') }}</td>
<td class="title font-weight-light">{{ item.users_count }} Operator</td> <td class="title font-weight-light">{{ item.users_count }} Operator</td>
<td class="text-xs-right FlexBtn Height-MD-80 Height-SM-48 justify-self-end"> <td class="text-xs-right FlexBtn Height-MD-80 Height-SM-48 justify-self-end">
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<router-link class="LinkBtn"
:to="{ name: 'OperatorList', params: { medicalCenter: item.id } }">
<v-btn v-bind="attrs" v-on="on" color="light-gray"
class="mr-2 WM-ActionButton">
<v-icon class="black--text mr-2 caption">fas fa-user</v-icon>
<span>Operator</span>
</v-btn>
</router-link>
</template>
<span>Operator</span>
</v-tooltip>
<v-tooltip bottom open-on-hover> <v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<router-link class="LinkBtn" <router-link class="LinkBtn"
:to="{ name: 'EditMedicalCenter', params: { medicalCenter: item.id } }"> :to="{ name: 'EditMedicalCenter', params: { medicalCenter: item.id } }">
<v-btn v-bind="attrs" v-on="on" color="cyan" class="mr-2 WM-ActionButton"> <v-btn v-bind="attrs" v-on="on" color="black" class="mr-2 WM-ActionButton">
<v-icon class="white--text mr-2 caption">fas fa-pen</v-icon> <v-icon class="white--text mr-2 caption">fas fa-pen</v-icon>
<span>Edit</span> <span>Edit</span>
</v-btn> </v-btn>
@@ -47,22 +64,10 @@
</template> </template>
<span>Edit</span> <span>Edit</span>
</v-tooltip> </v-tooltip>
<v-tooltip bottom open-on-hover> <v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<router-link class="LinkBtn" <v-btn v-bind="attrs" v-on="on" color="red" @click="removeModal(item.id)"
:to="{ name: 'OperatorList', params: { medicalCenter: item.id } }">
<v-btn v-bind="attrs" v-on="on" color="orange darken-1"
class="mr-2 WM-ActionButton">
<v-icon class="white--text mr-2 caption">fas fa-user</v-icon>
<span>Operator</span>
</v-btn>
</router-link>
</template>
<span>Operator</span>
</v-tooltip>
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on" color="pink" @click="removeModal(item.id)"
class="WM-ActionButton"> class="WM-ActionButton">
<v-icon class="white--text mr-2 caption">fas fa-trash</v-icon> <v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
<span>Remove</span> <span>Remove</span>
src/views/MyItem/List.vue
+72 -61
View File
@@ -2,47 +2,51 @@
<div class> <div class>
<v-container fluid> <v-container fluid>
<material-card class color="black" title="My Items" text> <material-card class color="black" title="My Items" text>
<v-layout align-center wrap class="my-3 px-3"> <v-layout align-center wrap class="px-3">
<v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter"> <v-flex xs12 sm4 md4 lg2 xl1 class="WM-FlexCenter">
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/> <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
<v-text-field class="py-3 pr-3" v-model="getFilters.item_id" <v-text-field class="pt-3 pr-3" v-model="filter.item_id" label="Item ID"
@input="updateFilter('item_id', getFilters.item_id)" label="Item ID"
color="black"/> color="black"/>
</v-flex> </v-flex>
<v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl-3"> <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter">
<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/> <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
<v-text-field class="py-3 pr-3" v-model="getFilters.name" <v-text-field class="pt-3 pr-3" v-model="filter.name" label="Name" color="black"/>
@input="updateFilter('name', getFilters.name)" label="Name" color="black"/>
</v-flex> </v-flex>
<v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl-3" v-if="$hasRole('Admin')"> <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter" v-if="$hasRole('Admin')">
<v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"/> <v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"/>
<v-autocomplete class="py-3 pr-3" v-model="getFilters.medical_center_id" item-text="name" <v-autocomplete class="pt-3 pr-3" v-model="filter.medical_center_id" item-text="name"
item-value="id" item-value="id" label="Hospital" color="black" :items="medicalCenters"
@input="updateFilter('medical_center_id', getFilters.medical_center_id)" :clearable="true"/>
label="Hospital" color="black" :items="medicalCenters" :clearable="true"/>
</v-flex> </v-flex>
<v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl-3"> <v-flex xs12 sm4 md4 lg2 xl1 class="WM-FlexCenter">
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/> <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
<v-text-field class="py-3 pr-3" v-model="getFilters.size" <v-text-field class="pt-3 pr-3" v-model="filter.size" label="Size" color="black"/>
@input="updateFilter('size', getFilters.size)" label="Size" color="black"/>
</v-flex> </v-flex>
<v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl3"> <v-flex xs12 sm4 md3 lg2 xl1 class="WM-FlexCenter">
<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/> <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
<v-text-field class="py-3 pr-3" v-model="getFilters.udi" <v-text-field class="pt-3 pr-3" v-model="filter.udi" label="UDI" color="black"/>
@input="updateFilter('udi', getFilters.udi)" label="UDI" color="black"/>
</v-flex> </v-flex>
<!--btn-->
<v-spacer/> <v-spacer/>
<v-flex class xs12 sm6 md6 lg2 xl1> <v-flex xs12 sm6 md6 lg2 xl3 class="WM-Align-R">
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="onFilterClick()"> <v-tooltip bottom open-on-hover>
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon> <template v-slot:activator="{ on, attrs }">
<span class="white--text">Filter</span> <v-btn v-bind="attrs" v-on="on" color="WM-Tooltip-Btn WM-Outline-Btn WM-Border WM-Margin-BT-0 WM-Border-Black mr-2" @click="load()">
<v-icon class="black--text caption">fas fa-search</v-icon>
</v-btn>
</template>
<span>Filter</span>
</v-tooltip>
<v-btn class="WM-Outline-Btn WM-Border mr-2 WM-Margin-BT-0 WM-Border-Black" style="padding: 10px 30px;">
<v-icon class="black--text mr-2 caption">fas fa-share-square</v-icon>
<span class="black--text">EXPORT</span>
</v-btn> </v-btn>
</v-flex>
<v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
<router-link :to="{ name: 'AddItem' }"> <router-link :to="{ name: 'AddItem' }">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black"> <v-btn class="WM-CyanBlueGradient-BG WM-Margin-BT-0" style="padding:10px 30px">
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon> <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
<span class="black--text">Add</span> <span class="white--text">Add</span>
</v-btn> </v-btn>
</router-link> </router-link>
</v-flex> </v-flex>
@@ -75,7 +79,7 @@
<v-btn :color="status.color" class="mr-2" <v-btn :color="status.color" class="mr-2"
@click="changeStatus(item, status.status)" v-bind="attrs" @click="changeStatus(item, status.status)" v-bind="attrs"
v-on="on"> v-on="on">
<v-icon class="white--text mr-1 caption"> <v-icon :class="`${status.font_color}--text mr-1 caption`">
fas {{ status.icon }} fas {{ status.icon }}
</v-icon> </v-icon>
<span>{{ status.label }}</span> <span>{{ status.label }}</span>
@@ -86,20 +90,40 @@
</template> </template>
<v-tooltip bottom open-on-hover> <v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on" color="cyan" class="mr-2" <v-btn v-bind="attrs" v-on="on" color="light-gray" class="mr-2"
@click="show(item.id)"> @click="show(item.id)">
<v-icon class="white--text mr-1 caption">fas fa-eye</v-icon> <v-icon class="black--text mr-1 caption">fas fa-eye</v-icon>
<span>Show</span> <span>Show</span>
</v-btn> </v-btn>
</template> </template>
<span>Show</span> <span>Show</span>
</v-tooltip> </v-tooltip>
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<v-btn class="mr-2" v-bind="attrs" v-on="on" color="light-gray"
@click="generateBarcode(item, 'Item')">
<v-icon class="black--text mr-2 caption">fas fa-barcode</v-icon>
<span class="CSSD-font">Generate Barcode</span>
</v-btn>
</template>
<span>Generate Barcode</span>
</v-tooltip>
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<v-btn class="mr-2" v-bind="attrs" v-on="on" color="light-gray"
@click="transfer(item)">
<v-icon class="black--text mr-2 caption">fas fa-arrows-alt</v-icon>
<span class="CSSD-font">Transfer</span>
</v-btn>
</template>
<span>Transfer</span>
</v-tooltip>
<v-tooltip bottom open-on-hover> <v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<router-link class="LinkBtn" <router-link class="LinkBtn"
v-if="$hasRole('Admin|Supervisor') ||( item.user_id == $store.state.user.id && !['approved', 'rejected'].includes(item.status))" v-if="$hasRole('Admin|Supervisor') ||( item.user_id == $store.state.user.id && !['approved', 'rejected'].includes(item.status))"
:to="{ name: 'EditItem', params: { Item: item.id } }"> :to="{ name: 'EditItem', params: { Item: item.id } }">
<v-btn v-bind="attrs" v-on="on" color="orange" class="mr-2"> <v-btn v-bind="attrs" v-on="on" color="black" class="mr-2">
<v-icon class="white--text mr-1 caption">fas fa-pen</v-icon> <v-icon class="white--text mr-1 caption">fas fa-pen</v-icon>
<span>Edit</span> <span>Edit</span>
</v-btn> </v-btn>
@@ -109,7 +133,7 @@
</v-tooltip> </v-tooltip>
<v-tooltip bottom open-on-hover> <v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on" color="pink" class="WM-ActionButton mr-2" <v-btn v-bind="attrs" v-on="on" color="red" class="WM-ActionButton mr-2"
@click="removeModal(item.id)" @click="removeModal(item.id)"
v-if="$hasRole('Admin|Supervisor') ||( item.user_id == $store.state.user.id && !['approved', 'rejected'].includes(item.status))"> v-if="$hasRole('Admin|Supervisor') ||( item.user_id == $store.state.user.id && !['approved', 'rejected'].includes(item.status))">
<v-icon class="white--text mr-2 caption">fas fa-trash</v-icon> <v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
@@ -118,26 +142,6 @@
</template> </template>
<span>Remove</span> <span>Remove</span>
</v-tooltip> </v-tooltip>
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<v-btn class="mr-2" v-bind="attrs" v-on="on" color="orange darken-1"
@click="generateBarcode(item, 'Item')">
<v-icon class="white--text mr-2 caption">fas fa-barcode</v-icon>
<span class="CSSD-font">Generate Barcode</span>
</v-btn>
</template>
<span>Generate Barcode</span>
</v-tooltip>
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<v-btn class="mr-2" v-bind="attrs" v-on="on" color="pink darken-1"
@click="transfer(item)">
<v-icon class="white--text mr-2 caption">fas fa-arrows-alt</v-icon>
<span class="CSSD-font">Transfer</span>
</v-btn>
</template>
<span>Transfer</span>
</v-tooltip>
</td> </td>
</template> </template>
@@ -196,6 +200,7 @@ export default {
}), }),
async created() { async created() {
this.loadMyItem(); this.loadMyItem();
this.loadMedicalCenters();
}, },
computed: { computed: {
...mapGetters('myItems', ["getFilters", 'getMyItems', 'getCurrentPage', 'getLastPage']), ...mapGetters('myItems', ["getFilters", 'getMyItems', 'getCurrentPage', 'getLastPage']),
@@ -226,12 +231,17 @@ export default {
}); });
}, },
async generateBarcode(item, type = null) { async generateBarcode(item, type = null) {
const result = await ApiService.post(urls.Barcode(item.id, type)); let code = item.udi;
if (result && result.status == 200) { if (code) {
this.changeCurrentModal({ const result = await ApiService.post(urls.Barcode(item.id, type));
modal: "modal-barcode-barcode", if (result && result.status == 200) {
properties: {result, item}, this.changeCurrentModal({
}); modal: "modal-barcode-barcode",
properties: {result, item},
});
}
} else {
toast.error('An error occurred while generating the barcode . please first set UDI');
} }
}, },
async show(testResultId) { async show(testResultId) {
@@ -271,8 +281,8 @@ export default {
getStatus(item) { getStatus(item) {
if (item.status === 'pending') { if (item.status === 'pending') {
return [ return [
{status: 'rejected', label: 'reject', color: 'red', icon: 'fa-close'}, {status: 'approved', label: 'approve', color: 'cyan', font_color : 'white', icon: 'fa-check'},
{status: 'approved', label: 'approve', color: 'green', icon: 'fa-check'} {status: 'rejected', label: 'reject', color: 'light-gray',font_color : 'black', icon: 'fa-close'},
] ]
} else { } else {
const nextStatus = item.status === 'rejected' ? 'approved' : 'rejected' const nextStatus = item.status === 'rejected' ? 'approved' : 'rejected'
@@ -280,7 +290,8 @@ export default {
{ {
status: nextStatus, status: nextStatus,
label: nextStatus === 'approved' ? 'approve' : 'reject', label: nextStatus === 'approved' ? 'approve' : 'reject',
color: nextStatus === 'approved' ? 'green' : 'red', color: nextStatus === 'approved' ? 'cyan' : 'light-gray',
font_color: nextStatus === 'approved' ? 'white' : 'black',
icon: nextStatus === 'approved' ? 'fa-check' : 'fa-close' icon: nextStatus === 'approved' ? 'fa-check' : 'fa-close'
} }
] ]
src/views/MyPackage/List.vue
+56 -45
View File
@@ -2,38 +2,45 @@
<div class> <div class>
<v-container fluid> <v-container fluid>
<material-card class color="black" title="My Packages" text> <material-card class color="black" title="My Packages" text>
<v-layout align-center wrap class="mt-3 px-3"> <v-layout align-center wrap class="px-3">
<v-flex xs12 sm6 md4 lg3 xl2 class="WM-FlexCenter"> <v-flex xs12 sm6 md6 lg2 xl2 class="WM-FlexCenter">
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/> <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
<v-text-field class="py-3 pr-3" v-model="filter.package_id" label="Package ID" <v-text-field class="pt-3 pr-3" v-model="filter.package_id" label="Package ID"
color="black"/> color="black"/>
</v-flex> </v-flex>
<v-flex xs12 sm6 md4 lg3 xl2 class="WM-FlexCenter pl-3"> <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter">
<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/> <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
<v-text-field class="py-3 pr-3" v-model="filter.name" label="Name" color="black"/> <v-text-field class="pt-3 pr-3" v-model="filter.name" label="Name" color="black"/>
</v-flex> </v-flex>
<v-flex xs12 sm6 md4 lg3 xl2 class="WM-FlexCenter pl-3" v-if="$hasRole('Admin')"> <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter" v-if="$hasRole('Admin')">
<v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"/> <v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"/>
<v-autocomplete class="py-3 pr-3" v-model="filter.medical_center_id" item-text="name" <v-autocomplete class="pt-3 pr-3" v-model="filter.medical_center_id" item-text="name"
item-value="id" label="Hospital" color="black" :items="medicalCenters" item-value="id" label="Hospital" color="black" :items="medicalCenters"
:clearable="true"/> :clearable="true"/>
</v-flex> </v-flex>
<v-spacer/> <v-spacer/>
<v-flex class xs12 sm6 md6 lg2 xl1> <v-flex xs12 sm6 md6 lg4 xl3 class="WM-Align-R">
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="load()"> <v-tooltip bottom open-on-hover>
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon> <template v-slot:activator="{ on, attrs }">
<span class="white--text">Filter</span> <v-btn v-bind="attrs" v-on="on" color="WM-Tooltip-Btn WM-Outline-Btn WM-Border WM-Margin-BT-0 WM-Border-Black mr-2" @click="load()">
<v-icon class="black--text caption">fas fa-search</v-icon>
</v-btn>
</template>
<span>Filter</span>
</v-tooltip>
<v-btn class="WM-Outline-Btn WM-Border mr-2 WM-Margin-BT-0 WM-Border-Black" style="padding: 10px 30px;">
<v-icon class="black--text mr-2 caption">fas fa-share-square</v-icon>
<span class="black--text">EXPORT</span>
</v-btn> </v-btn>
</v-flex>
<v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
<router-link :to="{ name: 'AddPackage' }"> <router-link :to="{ name: 'AddPackage' }">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black"> <v-btn class="WM-CyanBlueGradient-BG WM-Margin-BT-0" style="padding:10px 30px">
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon> <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
<span class="black--text">Add</span> <span class="white--text">Add</span>
</v-btn> </v-btn>
</router-link> </router-link>
</v-flex> </v-flex>
</v-layout> </v-layout>
<v-layout class="px-3 my-3"> <v-layout class="px-3 my-3">
<v-divider/> <v-divider/>
@@ -62,7 +69,8 @@
<v-btn :color="status.color" class="mr-2" <v-btn :color="status.color" class="mr-2"
@click="changeStatus(item, status.status)" v-bind="attrs" @click="changeStatus(item, status.status)" v-bind="attrs"
v-on="on"> v-on="on">
<v-icon class="white--text mr-1 caption">fas {{ status.icon }} <v-icon :class="`${status.font_color}--text mr-1 caption`">
fas {{ status.icon }}
</v-icon> </v-icon>
<span>{{ status.label }}</span> <span>{{ status.label }}</span>
</v-btn> </v-btn>
@@ -73,21 +81,43 @@
<v-tooltip bottom open-on-hover> <v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on" color="cyan" class="mr-2" <v-btn v-bind="attrs" v-on="on" color="light-gray" class="mr-2"
@click="show(item.id)"> @click="show(item.id)">
<v-icon class="white--text mr-1 caption">fas fa-eye</v-icon> <v-icon class="black--text mr-1 caption">fas fa-eye</v-icon>
<span>Show</span> <span>Show</span>
</v-btn> </v-btn>
</template> </template>
<span>Show</span> <span>Show</span>
</v-tooltip> </v-tooltip>
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<v-btn class="mr-2" v-bind="attrs" v-on="on" color="light-gray"
@click="generateBarcode(item.id, 'Package')">
<v-icon class="black--text mr-1 caption">fas fa-barcode</v-icon>
<span>Generate Barcode</span>
</v-btn>
</template>
<span>Generate Barcode</span>
</v-tooltip>
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<v-btn class="mr-2" v-bind="attrs" v-on="on" color="light-gray"
@click="transfer(item)">
<v-icon class="black--text mr-2 caption">fas fa-arrows-alt</v-icon>
<span class="CSSD-font">Transfer</span>
</v-btn>
</template>
<span>Transfer</span>
</v-tooltip>
<v-tooltip bottom open-on-hover> <v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<router-link class="LinkBtn" <router-link class="LinkBtn"
v-if="$hasRole('Admin|Supervisor') ||( item.user_id == $store.state.user.id && !['approved', 'rejected'].includes(item.status))" v-if="$hasRole('Admin|Supervisor') ||( item.user_id == $store.state.user.id && !['approved', 'rejected'].includes(item.status))"
:to="{ name: 'EditPackage', params: { package: item.id } }"> :to="{ name: 'EditPackage', params: { package: item.id } }">
<v-btn v-bind="attrs" v-on="on" color="orange" class="mr-2"> <v-btn v-bind="attrs" v-on="on" color="black" class="mr-2">
<v-icon class="white--text mr-1 caption">fas fa-pen</v-icon> <v-icon class="white--text mr-1 caption">fas fa-pen</v-icon>
<span>Edit</span> <span>Edit</span>
</v-btn> </v-btn>
@@ -98,7 +128,7 @@
<v-tooltip bottom open-on-hover> <v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on" color="pink" class="WM-ActionButton mr-2" <v-btn v-bind="attrs" v-on="on" color="red" class="WM-ActionButton mr-2"
@click="removeModal(item.id)" @click="removeModal(item.id)"
v-if="$hasRole('Admin|Supervisor') ||( item.user_id == $store.state.user.id && !['approved', 'rejected'].includes(item.status))"> v-if="$hasRole('Admin|Supervisor') ||( item.user_id == $store.state.user.id && !['approved', 'rejected'].includes(item.status))">
<v-icon class="white--text mr-2 caption">fas fa-trash</v-icon> <v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
@@ -107,26 +137,6 @@
</template> </template>
<span>Remove</span> <span>Remove</span>
</v-tooltip> </v-tooltip>
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<v-btn class="mr-2" v-bind="attrs" v-on="on" color="orange darken-1"
@click="generateBarcode(item.id, 'Package')">
<v-icon class="white--text mr-1 caption">fas fa-barcode</v-icon>
<span>Generate Barcode</span>
</v-btn>
</template>
<span>Generate Barcode</span>
</v-tooltip>
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<v-btn class="mr-2" v-bind="attrs" v-on="on" color="pink darken-1"
@click="transfer(item)">
<v-icon class="white--text mr-2 caption">fas fa-arrows-alt</v-icon>
<span class="CSSD-font">Transfer</span>
</v-btn>
</template>
<span>Transfer</span>
</v-tooltip>
</td> </td>
</template> </template>
@@ -245,8 +255,8 @@ export default {
getStatus(item) { getStatus(item) {
if (item.status === 'pending') { if (item.status === 'pending') {
return [ return [
{status: 'rejected', label: 'reject', color: 'red', icon: 'fa-close'}, {status: 'approved', label: 'approve', color: 'cyan' , font_color : 'white', icon: 'fa-check'},
{status: 'approved', label: 'approve', color: 'green', icon: 'fa-check'} {status: 'rejected', label: 'reject', color: 'light-gray' ,font_color : 'black', icon: 'fa-close'},
] ]
} else { } else {
const nextStatus = item.status === 'rejected' ? 'approved' : 'rejected' const nextStatus = item.status === 'rejected' ? 'approved' : 'rejected'
@@ -254,7 +264,8 @@ export default {
{ {
status: nextStatus, status: nextStatus,
label: nextStatus === 'approved' ? 'approve' : 'reject', label: nextStatus === 'approved' ? 'approve' : 'reject',
color: nextStatus === 'approved' ? 'green' : 'red', color: nextStatus === 'approved' ? 'cyan' : 'light-gray',
font_color: nextStatus === 'approved' ? 'white' : 'black',
icon: nextStatus === 'approved' ? 'fa-check' : 'fa-close' icon: nextStatus === 'approved' ? 'fa-check' : 'fa-close'
} }
] ]
src/views/Package/List.vue
+64 -47
View File
@@ -2,46 +2,45 @@
<div class> <div class>
<v-container fluid> <v-container fluid>
<material-card class color="black" title="All Packages" text> <material-card class color="black" title="All Packages" text>
<v-layout align-center wrap class="mt-3 px-3"> <v-layout align-center wrap class="px-3">
<v-flex xs12 sm6 md4 lg3 xl2 class="WM-FlexCenter"> <v-flex xs12 sm6 md6 lg2 xl2 class="WM-FlexCenter">
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/> <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
<v-text-field class="py-3 pr-3" v-model="filter.package_id" label="Package ID" <v-text-field class="pt-3 pr-3" v-model="filter.package_id" label="Package ID"
color="black"/> color="black"/>
</v-flex> </v-flex>
<v-flex xs12 sm6 md4 lg3 xl2 class="WM-FlexCenter pl-3"> <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter">
<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/> <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
<v-text-field class="py-3 pr-3" v-model="filter.name" label="Name" color="black"/> <v-text-field class="pt-3 pr-3" v-model="filter.name" label="Name" color="black"/>
</v-flex> </v-flex>
<v-flex xs12 sm6 md4 lg3 xl2 class="WM-FlexCenter pl-3" v-if="$hasRole('Admin')"> <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter" v-if="$hasRole('Admin')">
<v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"/> <v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"/>
<v-autocomplete class="py-3 pr-3" v-model="filter.medical_center_id" item-text="name" <v-autocomplete class="pt-3 pr-3" v-model="filter.medical_center_id" item-text="name"
item-value="id" label="Hospital" color="black" :items="medicalCenters" item-value="id" label="Hospital" color="black" :items="medicalCenters"
:clearable="true"/> :clearable="true"/>
</v-flex> </v-flex>
<!-- <v-flex class xs12 md2 sm3>
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="load()">
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
<span class="white--text">Filter</span>
</v-btn>
</v-flex>
<v-spacer></v-spacer> -->
<!-- <v-spacer></v-spacer> -->
<v-spacer/> <v-spacer/>
<v-flex class xs12 sm6 md6 lg2 xl1> <v-flex xs12 sm6 md6 lg4 xl3 class="WM-Align-R">
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="load()"> <v-tooltip bottom open-on-hover>
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon> <template v-slot:activator="{ on, attrs }">
<span class="white--text">Filter</span> <v-btn v-bind="attrs" v-on="on" color="WM-Tooltip-Btn WM-Outline-Btn WM-Border WM-Margin-BT-0 WM-Border-Black mr-2" @click="load()">
<v-icon class="black--text caption">fas fa-search</v-icon>
</v-btn>
</template>
<span>Filter</span>
</v-tooltip>
<v-btn class="WM-Outline-Btn WM-Border mr-2 WM-Margin-BT-0 WM-Border-Black" style="padding: 10px 30px;">
<v-icon class="black--text mr-2 caption">fas fa-share-square</v-icon>
<span class="black--text">EXPORT</span>
</v-btn> </v-btn>
</v-flex>
<v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
<router-link :to="{ name: 'AddPackage' }"> <router-link :to="{ name: 'AddPackage' }">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black"> <v-btn class="WM-CyanBlueGradient-BG WM-Margin-BT-0" style="padding:10px 30px">
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon> <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
<span class="black--text">Add</span> <span class="white--text">Add</span>
</v-btn> </v-btn>
</router-link> </router-link>
</v-flex> </v-flex>
</v-layout> </v-layout>
<v-layout class="px-3 my-3"> <v-layout class="px-3 my-3">
<v-divider/> <v-divider/>
@@ -73,9 +72,8 @@
<v-btn :color="status.color" class="mr-2" <v-btn :color="status.color" class="mr-2"
@click="changeStatus(item, status.status)" v-bind="attrs" @click="changeStatus(item, status.status)" v-bind="attrs"
v-on="on"> v-on="on">
<v-icon class="white--text mr-1 caption">fas {{ <v-icon :class="`${status.font_color}--text mr-1 caption`">
status.icon fas {{status.icon}}
}}
</v-icon> </v-icon>
<span>{{ status.label }}</span> <span>{{ status.label }}</span>
</v-btn> </v-btn>
@@ -86,21 +84,44 @@
<v-tooltip bottom open-on-hover> <v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on" color="cyan" class="mr-2" <v-btn v-bind="attrs" v-on="on" color="light-gray" class="mr-2"
@click="show(item.id)"> @click="show(item.id)">
<v-icon class="white--text mr-1 caption">fas fa-eye</v-icon> <v-icon class="black--text mr-1 caption">fas fa-eye</v-icon>
<span>Show</span> <span>Show</span>
</v-btn> </v-btn>
</template> </template>
<span>Show</span> <span>Show</span>
</v-tooltip> </v-tooltip>
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<v-btn class="mr-2" v-bind="attrs" v-on="on" color="light-gray"
@click="generateBarcode(item.id, 'Package')">
<v-icon class="black--text mr-1 caption">fas fa-barcode</v-icon>
<span>Generate Barcode</span>
</v-btn>
</template>
<span>Generate Barcode</span>
</v-tooltip>
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<v-btn class="mr-2" v-bind="attrs" v-on="on" color="light-gray"
v-if="$hasRole('Admin|Supervisor') ||( item.user_id == $store.state.user.id)"
@click="transfer(item)">
<v-icon class="black--text mr-2 caption">fas fa-arrows-alt</v-icon>
<span class="CSSD-font">Transfer</span>
</v-btn>
</template>
<span>Transfer</span>
</v-tooltip>
<v-tooltip bottom open-on-hover> <v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<router-link class="LinkBtn" <router-link class="LinkBtn"
v-if="$hasRole('Admin|Supervisor') ||( item.user_id == $store.state.user.id && !['approved', 'rejected'].includes(item.status))" v-if="$hasRole('Admin|Supervisor') ||( item.user_id == $store.state.user.id && !['approved', 'rejected'].includes(item.status))"
:to="{ name: 'EditPackage', params: { package: item.id } }"> :to="{ name: 'EditPackage', params: { package: item.id } }">
<v-btn v-bind="attrs" v-on="on" color="orange" class="mr-2"> <v-btn v-bind="attrs" v-on="on" color="black" class="mr-2">
<v-icon class="white--text mr-1 caption">fas fa-pen</v-icon> <v-icon class="white--text mr-1 caption">fas fa-pen</v-icon>
<span>Edit</span> <span>Edit</span>
</v-btn> </v-btn>
@@ -111,7 +132,7 @@
<v-tooltip bottom open-on-hover> <v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on" color="pink" class="WM-ActionButton mr-2" <v-btn v-bind="attrs" v-on="on" color="red" class="WM-ActionButton mr-2"
@click="removeModal(item.id)" @click="removeModal(item.id)"
v-if="$hasRole('Admin|Supervisor') ||( item.user_id == $store.state.user.id && !['approved', 'rejected'].includes(item.status))"> v-if="$hasRole('Admin|Supervisor') ||( item.user_id == $store.state.user.id && !['approved', 'rejected'].includes(item.status))">
<v-icon class="white--text mr-2 caption">fas fa-trash</v-icon> <v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
@@ -120,16 +141,6 @@
</template> </template>
<span>Remove</span> <span>Remove</span>
</v-tooltip> </v-tooltip>
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<v-btn class="mr-2" v-bind="attrs" v-on="on" color="orange darken-1"
@click="generateBarcode(item.id, 'Package')">
<v-icon class="white--text mr-1 caption">fas fa-barcode</v-icon>
<span>Generate Barcode</span>
</v-btn>
</template>
<span>Generate Barcode</span>
</v-tooltip>
</td> </td>
</template> </template>
</v-data-table> </v-data-table>
@@ -192,7 +203,7 @@ export default {
this.load(); this.load();
}, },
methods: { methods: {
...mapMutations("modal", ["changeCurrentModal",'closeModal']), ...mapMutations("modal", ["changeCurrentModal", 'closeModal']),
async load(page = 1) { async load(page = 1) {
let filter = '?'; let filter = '?';
for (const key in this.filter) { for (const key in this.filter) {
@@ -256,8 +267,8 @@ export default {
getStatus(item) { getStatus(item) {
if (item.status === 'pending') { if (item.status === 'pending') {
return [ return [
{status: 'rejected', label: 'reject', color: 'red', icon: 'fa-close'}, {status: 'approved', label: 'approve', color: 'cyan', font_color : 'white', icon: 'fa-check'},
{status: 'approved', label: 'approve', color: 'green', icon: 'fa-check'} {status: 'rejected', label: 'reject', color: 'light-gray',font_color : 'black', icon: 'fa-close'},
] ]
} else { } else {
const nextStatus = item.status === 'rejected' ? 'approved' : 'rejected' const nextStatus = item.status === 'rejected' ? 'approved' : 'rejected'
@@ -265,13 +276,19 @@ export default {
{ {
status: nextStatus, status: nextStatus,
label: nextStatus === 'approved' ? 'approve' : 'reject', label: nextStatus === 'approved' ? 'approve' : 'reject',
color: nextStatus === 'approved' ? 'green' : 'red', color: nextStatus === 'approved' ? 'cyan' : 'light-gray',
font_color: nextStatus === 'approved' ? 'white' : 'black',
icon: nextStatus === 'approved' ? 'fa-check' : 'fa-close' icon: nextStatus === 'approved' ? 'fa-check' : 'fa-close'
} }
] ]
} }
}, },
async transfer(data) {
this.changeCurrentModal({
modal: "modal-user-list",
properties: {data},
});
},
async changeStatus(item, status) { async changeStatus(item, status) {
const result = await ApiService.post(urls.changePackageStatus(item.id), {status}) const result = await ApiService.post(urls.changePackageStatus(item.id), {status})
src/views/TestResult/List.vue
+28 -26
View File
@@ -2,39 +2,39 @@
<div class> <div class>
<v-container fluid> <v-container fluid>
<material-card class color="black" title="All Test Result" text> <material-card class color="black" title="All Test Result" text>
<v-layout align-center wrap class="px-3 my-3"> <v-layout align-center wrap class="px-3">
<v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter"> <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter">
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/> <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
<v-text-field class="py-3 pr-3" v-model="filter.device_id" label="ID" <v-text-field class="pt-3 pr-3" v-model="filter.device_id" label="ID"
color="black"/> color="black"/>
</v-flex> </v-flex>
<v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter pl-3"> <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter">
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/> <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
<v-autocomplete :items="deviceLabels" item-text="name" item-value="id" <v-autocomplete :items="deviceLabels" item-text="name" item-value="id"
v-model="filter.device_label" label="ID Label" color="black" class="py-3 pr-3" v-model="filter.device_label" label="ID Label" color="black" class="pt-3 pr-3"
:clearable="true"/> :clearable="true"/>
</v-flex> </v-flex>
<v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter pl-3"> <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter">
<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/> <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
<v-autocomplete class="py-3 pr-3" v-model="filter.testType_id" label="TestType Name" <v-autocomplete class="pt-3 pr-3" v-model="filter.testType_id" label="TestType Name"
color="black" :items="testTypes" item-text="name" item-value="id"/> color="black" :items="testTypes" item-text="name" item-value="id"/>
</v-flex> </v-flex>
<v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter pl-3"> <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter">
<v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"/> <v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"/>
<v-autocomplete class="py-3 pr-3" v-model="filter.medicalCenter_id" label="Hospital" <v-autocomplete class="pt-3 pr-3" v-model="filter.medicalCenter_id" label="Hospital"
color="black" :items="medicalCenters" item-text="name" item-value="id" color="black" :items="medicalCenters" item-text="name" item-value="id"
:clearable="true"/> :clearable="true"/>
</v-flex> </v-flex>
<v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter pl-3"> <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter">
<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/> <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
<v-text-field class="py-3 pr-3" v-model="filter.user_name" label="User Name" <v-text-field class="pt-3 pr-3" v-model="filter.user_name" label="User Name"
color="black"/> color="black"/>
</v-flex> </v-flex>
<v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter pl-3"> <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter">
<v-icon class="far fa-calendar-alt mr-2"/> <v-icon class="far fa-calendar-alt mr-2"/>
<v-menu lazy :close-on-content-click="true" transition="v-scale-transition" offset-y <v-menu class="pr-3" lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
v-model="fromMenu" style="width: 100%"> v-model="fromMenu" style="width: 100%">
<v-text-field class="py-3 pr-3" required slot="activator" label="FromDate" <v-text-field class="pt-3 pr-3" required slot="activator" label="FromDate"
v-model="filter.fromPicker" color="black"/> v-model="filter.fromPicker" color="black"/>
<v-date-picker color="pink" no-title v-model="filter.fromPicker" <v-date-picker color="pink" no-title v-model="filter.fromPicker"
:date-format="date => new Date(date).toDateString()"/> :date-format="date => new Date(date).toDateString()"/>
@@ -42,27 +42,29 @@
</v-flex> </v-flex>
<v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter" style="display: flex;align-items: center;"> <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter" style="display: flex;align-items: center;">
<v-icon class="far fa-calendar-alt mr-2"/> <v-icon class="far fa-calendar-alt mr-2"/>
<v-menu lazy :close-on-content-click="true" transition="v-scale-transition" offset-y <v-menu class="pr-3" lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
v-model="upToMenu" style="width: 100%"> v-model="upToMenu" style="width: 100%">
<v-text-field class="py-3 pr-3" required slot="activator" label="UpToDate" color="black" <v-text-field class="pt-3 pr-3" required slot="activator" label="UpToDate" color="black"
v-model="filter.upToPicker"/> v-model="filter.upToPicker"/>
<v-date-picker color="pink" no-title v-model="filter.upToPicker" <v-date-picker color="pink" no-title v-model="filter.upToPicker"
:date-format="date => new Date(date).toDateString()"/> :date-format="date => new Date(date).toDateString()"/>
</v-menu> </v-menu>
</v-flex> </v-flex>
<v-spacer/> <v-spacer/>
<v-spacer/> <v-flex xs12 sm6 md6 lg12 xl3 class="WM-Align-R">
<v-flex class xs12 sm6 md6 lg2 xl1> <v-tooltip bottom open-on-hover>
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="load(null, null)"> <template v-slot:activator="{ on, attrs }">
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon> <v-btn v-bind="attrs" v-on="on" color="WM-Tooltip-Btn WM-Outline-Btn WM-Border WM-Margin-BT-0 WM-Border-Black mr-2" @click="load(null, null)">
<span class="white--text">Filter</span> <v-icon class="black--text caption">fas fa-search</v-icon>
</v-btn> </v-btn>
</v-flex> </template>
<v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right"> <span>Filter</span>
</v-tooltip>
<router-link :to="{ name: 'SubmitTestResult' }"> <router-link :to="{ name: 'SubmitTestResult' }">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black"> <v-btn class="WM-CyanBlueGradient-BG WM-Margin-BT-0" style="padding:10px 30px">
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon> <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
<span class="black--text">Add</span> <span class="white--text">Add</span>
</v-btn> </v-btn>
</router-link> </router-link>
</v-flex> </v-flex>
src/views/TestType/List.vue
+53 -46
View File
@@ -1,22 +1,22 @@
<template> <template>
<v-container fluid> <v-container fluid>
<material-card class color="black" title="TestType List" text> <material-card color="black" title="TestType List" text>
<v-layout wrap class="px-3 mb-3"> <v-layout wrap align-center class="px-3">
<v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3"> <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter">
<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/> <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
<v-text-field class="py-3 pr-3" label="Name" v-model="filter.name" color="black"/> <v-text-field class="pt-3 pr-3" label="Name" v-model="filter.name" color="black"/>
</v-flex> </v-flex>
<v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3"> <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter">
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/> <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
<v-text-field class="py-3 pr-3" label="UniqueId" v-model="filter.unique_id" color="black"/> <v-text-field class="pt-3 pr-3" label="UniqueId" v-model="filter.unique_id" color="black"/>
</v-flex> </v-flex>
<v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3"> <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter">
<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/> <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
<v-text-field class="py-3 pr-3" label="UserName" v-model="filter.user_name" color="black"/> <v-text-field class="pt-3 pr-3" label="UserName" v-model="filter.user_name" color="black"/>
</v-flex> </v-flex>
<v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3"> <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter">
<v-icon class="far fa-calendar-alt mr-2"/> <v-icon class="far fa-calendar-alt mr-2"/>
<v-menu <v-menu class="pt-3 pr-3"
lazy lazy
:close-on-content-click="true" :close-on-content-click="true"
transition="v-scale-transition" transition="v-scale-transition"
@@ -35,9 +35,9 @@
:date-format="date => new Date(date).toDateString()"/> :date-format="date => new Date(date).toDateString()"/>
</v-menu> </v-menu>
</v-flex> </v-flex>
<v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3"> <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter">
<v-icon class="far fa-calendar-alt mr-2"></v-icon> <v-icon class="far fa-calendar-alt mr-2"></v-icon>
<v-menu <v-menu class="pt-3 pr-3"
lazy lazy
:close-on-content-click="true" :close-on-content-click="true"
transition="v-scale-transition" transition="v-scale-transition"
@@ -56,19 +56,22 @@
:date-format="date => new Date(date).toDateString()"/> :date-format="date => new Date(date).toDateString()"/>
</v-menu> </v-menu>
</v-flex> </v-flex>
<v-spacer/> <v-spacer/>
<v-flex class xs12 sm6 md6 lg2 xl1> <v-spacer/>
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="load(undefined)"> <v-flex xs12 sm6 md6 lg6 xl2 class="WM-Align-R">
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon> <v-tooltip bottom open-on-hover>
<span class="white--text">Filter</span> <template v-slot:activator="{ on, attrs }">
</v-btn> <v-btn v-bind="attrs" v-on="on" color="WM-Tooltip-Btn WM-Outline-Btn WM-Border WM-Margin-BT-0 WM-Border-Black mr-2" @click="load()">
</v-flex> <v-icon class="black--text caption">fas fa-search</v-icon>
<v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right"> </v-btn>
<router-link :to="{name: 'AddTestType'}"> </template>
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black"> <span>Filter</span>
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon> </v-tooltip>
<span class="black--text">Add</span>
<router-link :to="{ name: 'AddTestType' }">
<v-btn class="WM-CyanBlueGradient-BG WM-Margin-BT-0" style="padding:10px 30px">
<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
<span class="white--text">Add</span>
</v-btn> </v-btn>
</router-link> </router-link>
</v-flex> </v-flex>
@@ -88,13 +91,36 @@
<td class="title font-weight-light">{{ item.user.name }}</td> <td class="title font-weight-light">{{ item.user.name }}</td>
<td class="title font-weight-light">{{ $d(new Date(item.created_at), 'long') }}</td> <td class="title font-weight-light">{{ $d(new Date(item.created_at), 'long') }}</td>
<td class="text-xs-right FlexBtn justify-self-end"> <td class="text-xs-right FlexBtn justify-self-end">
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<v-btn color="light-gray" class="mr-2"
@click="generateBarcode(item.unique_code, 'TestType')" v-bind="attrs"
v-on="on">
<v-icon class="black--text mr-1 caption">fas fa-barcode</v-icon>
<span>Generate Barcode</span>
</v-btn>
</template>
<span>Generate Barcode</span>
</v-tooltip>
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<v-btn color="light-gray" class="mr-2" @click="remove(item.id)" v-bind="attrs"
v-on="on">
<v-icon class="black--text mr-1 caption">fas fa-folder</v-icon>
<span>Archive</span>
</v-btn>
</template>
<span>Archive</span>
</v-tooltip>
<v-tooltip bottom open-on-hover> <v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<router-link <router-link
class="LinkBtn" class="LinkBtn"
v-if="item.test_results_count == 0" v-if="item.test_results_count == 0"
:to="{name : 'EditTestType', params : {testType : item.id}}"> :to="{name : 'EditTestType', params : {testType : item.id}}">
<v-btn color="cyan" class="mr-2 WM-ActionButton" v-bind="attrs" v-on="on"> <v-btn color="black" class="WM-ActionButton" v-bind="attrs" v-on="on">
<v-icon class="white--text mr-2 caption">fas fa-pen</v-icon> <v-icon class="white--text mr-2 caption">fas fa-pen</v-icon>
<span>Edit</span> <span>Edit</span>
</v-btn> </v-btn>
@@ -102,27 +128,8 @@
</template> </template>
<span>Edit</span> <span>Edit</span>
</v-tooltip> </v-tooltip>
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<v-btn color="black" class="mr-2" @click="remove(item.id)" v-bind="attrs"
v-on="on">
<v-icon class="white--text mr-1 caption">fas fa-folder</v-icon>
<span>Archive</span>
</v-btn>
</template>
<span>Archive</span>
</v-tooltip>
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<v-btn color="orange darken-1"
@click="generateBarcode(item.unique_code, 'TestType')" v-bind="attrs"
v-on="on">
<v-icon class="white--text mr-1 caption">fas fa-barcode</v-icon>
<span>Generate Barcode</span>
</v-btn>
</template>
<span>Generate Barcode</span>
</v-tooltip>
</td> </td>
</template> </template>
</v-data-table> </v-data-table>
src/views/User/List.vue
+25 -23
View File
@@ -1,32 +1,30 @@
<template> <template>
<v-container grid-list-xs> <v-container grid-list-xs>
<material-card color="black" title="Member List"> <material-card color="black" title="Member List">
<v-layout align-center justify-center wrap class="px-3 mb-3"> <v-layout align-center wrap class="px-3">
<v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter"> <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter">
<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/> <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
<v-text-field class="py-3 pr-3" color="black" name="name" label="Name" <v-text-field class="pt-3 pr-3" color="black" name="name" label="Name"
v-model="filter.name"/> v-model="filter.name"/>
</v-flex> </v-flex>
<v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3"> <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter">
<v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"/> <v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"/>
<v-autocomplete class="py-3 pr-3" v-model="filter.medical_center_id" label="Hospital" color="black" <v-autocomplete class="pt-3 pr-3" v-model="filter.medical_center_id" label="Hospital" color="black"
:items="medicalCenters" item-text="name" item-value="id"/> :items="medicalCenters" item-text="name" item-value="id"/>
</v-flex> </v-flex>
<v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3"> <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter">
<v-icon class="fa fa-phone mr-2 WM-Margin-B-8"/> <v-icon class="fa fa-phone mr-2 WM-Margin-B-8"/>
<v-text-field class="py-3 pr-3" color="black" name="CellPhone" label="CellPhone" <v-text-field class="pt-3 pr-3" color="black" name="CellPhone" label="CellPhone"
v-model="filter.cell_number"/> v-model="filter.cell_number"/>
</v-flex> </v-flex>
<v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3"> <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter">
<v-icon class="fa fa-check mr-2 WM-Margin-B-8"/> <v-icon class="fa fa-check mr-2 WM-Margin-B-8"/>
<v-select class="py-3 pr-3" color="black" name="role" label="Role" :items="roles" <v-select class="pt-3 pr-3" color="black" name="role" label="Role" :items="roles"
v-model="filter.role"/> v-model="filter.role"/>
</v-flex> </v-flex>
<!-- </v-layout>
<v-layout class="px-5 mb-3">-->
<v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter"> <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter">
<v-icon class="far fa-calendar-alt mr-2"/> <v-icon class="far fa-calendar-alt mr-2"/>
<v-menu lazy :close-on-content-click="true" transition="v-scale-transition" offset-y <v-menu class="pt-3 pr-3" lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
v-model="fromMenu" style="width: 100%"> v-model="fromMenu" style="width: 100%">
<v-text-field required slot="activator" label="FromDate" color="black" <v-text-field required slot="activator" label="FromDate" color="black"
v-model="filter.fromPicker"/> v-model="filter.fromPicker"/>
@@ -34,9 +32,9 @@
:date-format="date => new Date(date).toDateString()"/> :date-format="date => new Date(date).toDateString()"/>
</v-menu> </v-menu>
</v-flex> </v-flex>
<v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3"> <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter ">
<v-icon class="far fa-calendar-alt mr-2"/> <v-icon class="far fa-calendar-alt mr-2"/>
<v-menu lazy :close-on-content-click="true" transition="v-scale-transition" offset-y <v-menu class="pt-3 pr-3" lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
v-model="upToMenu" style="width: 100%"> v-model="upToMenu" style="width: 100%">
<v-text-field required slot="activator" label="UpToDate" color="black" <v-text-field required slot="activator" label="UpToDate" color="black"
v-model="filter.upToPicker"/> v-model="filter.upToPicker"/>
@@ -45,11 +43,15 @@
</v-menu> </v-menu>
</v-flex> </v-flex>
<v-spacer/> <v-spacer/>
<v-flex wrap xs12 sm12 class="WM-Align-R ml-4"> <v-flex xs12 sm12 md12 lg3 xl12 class="WM-Align-R">
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="load(undefined)"> <v-tooltip bottom open-on-hover>
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon> <template v-slot:activator="{ on, attrs }">
<span class="white--text">Filter</span> <v-btn v-bind="attrs" v-on="on" color="WM-Tooltip-Btn WM-Outline-Btn WM-Border WM-Margin-BT-0 WM-Border-Black mr-2" @click="load()">
</v-btn> <v-icon class="black--text caption">fas fa-search</v-icon>
</v-btn>
</template>
<span>Filter</span>
</v-tooltip>
</v-flex> </v-flex>
</v-layout> </v-layout>
@@ -76,7 +78,7 @@
<v-tooltip bottom open-on-hover> <v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on" <v-btn v-bind="attrs" v-on="on"
:color="item.status == 'Active' ? 'green' : 'red'" :color="item.status == 'Active' ? 'cyan' : 'light-gray'"
@click="changeStatus(item.id)" class="mr-2 WM-ActionButton" @click="changeStatus(item.id)" class="mr-2 WM-ActionButton"
v-if="$hasRole('Admin|Supervisor')"> v-if="$hasRole('Admin|Supervisor')">
<template v-if="item.status == 'Active'"> <template v-if="item.status == 'Active'">
@@ -84,7 +86,7 @@
<span v-if="item.status == 'Active'">Suspended</span> <span v-if="item.status == 'Active'">Suspended</span>
</template> </template>
<template v-else> <template v-else>
<v-icon class="white--text mr-2 caption">fa fa-pause</v-icon> <v-icon class="black--text mr-2 caption">fa fa-pause</v-icon>
<span>Active</span> <span>Active</span>
</template> </template>
</v-btn> </v-btn>
@@ -94,10 +96,10 @@
</v-tooltip> </v-tooltip>
<v-tooltip bottom open-on-hover> <v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on" color="orange darken-1" <v-btn v-bind="attrs" v-on="on" color="light-gray"
@click="changeRoleModal(item)" class="mr-2 WM-ActionButton" @click="changeRoleModal(item)" class="mr-2 WM-ActionButton"
v-if="$hasRole('Admin')"> v-if="$hasRole('Admin')">
<v-icon class="white--text mr-2 caption">fas fa-user-tag</v-icon> <v-icon class="black--text mr-2 caption">fas fa-user-tag</v-icon>
<span>Role</span> <span>Role</span>
</v-btn> </v-btn>
</template> </template>
@@ -105,7 +107,7 @@
</v-tooltip> </v-tooltip>
<v-tooltip bottom open-on-hover> <v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on" color="pink" v-if="$hasRole('Admin')" <v-btn v-bind="attrs" v-on="on" color="red" v-if="$hasRole('Admin')"
class="WM-ActionButton" @click="removeModal(item.id)"> class="WM-ActionButton" @click="removeModal(item.id)">
<v-icon class="white--text mr-2 caption">fas fa-trash</v-icon> <v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
<span>Remove</span> <span>Remove</span>