cssd-doc/cssd-front
1
0
Fork 0
mirror of https://git.meshkee.com/cssd/cssd-front.git synced 2026-10-13 23:23:16 +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;
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 {
cursor: pointer;
}
src/components/modal/item/show.vue
+46 -12
View File
@@ -10,25 +10,33 @@
<v-flex xs12 md6 sm6>
<div class>
<span class="title CSSD-font">Item ID :</span>
<span class="headline ml-1 CSSD-font" style="letter-spacing:0 !important">{{
data.id
}}</span>
<span class="headline ml-1 CSSD-font" style="letter-spacing:0 !important">
{{ data.id }}
</span>
</div>
</v-flex>
<v-flex xs12 md6 sm6>
<div class>
<span class="title CSSD-font">Name :</span>
<span class="headline ml-1 CSSD-font" style="letter-spacing:0 !important">{{
data.name
}}</span>
<span class="headline ml-1 CSSD-font" style="letter-spacing:0 !important">
{{ data.name }}
</span>
</div>
</v-flex>
<v-flex xs12 md6 sm6>
<div class>
<span class="title CSSD-font">Size :</span>
<span class="headline ml-1 CSSD-font" style="letter-spacing:0 !important">{{
data.size
}}</span>
<span class="headline ml-1 CSSD-font" style="letter-spacing:0 !important">
{{ data.size }}
</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>
</v-flex>
<v-flex xs12 md6 sm6>
@@ -55,6 +63,26 @@
</v-flex>
</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">
<h3 class="CSSD-font">Barcode And QRCode Image</h3>
<v-flex xs12>
@@ -101,6 +129,7 @@
import {mapGetters, mapMutations} from "vuex";
import {ApiService} from "@/services";
import {urls} from "@/config/urls";
import toast from "@/services/global/toast.service";
export default {
data: () => ({
@@ -110,12 +139,17 @@ export default {
}),
methods: {
...mapMutations("modal", ["closeModal", "setResultModal", "changeCurrentModal"]),
async generateBarcode(itemId) {
const result = await ApiService.post(urls.Barcode(itemId, 'Item'));
async generateBarcode(item) {
let code = item.udi;
if (code) {
const result = await ApiService.post(urls.Barcode(code, 'Item'));
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() {
const prtHtml = document.getElementById("printMe").innerHTML;
@@ -158,7 +192,7 @@ export default {
...mapGetters("modal", ["getModalProperties"])
},
mounted() {
this.generateBarcode(this.data.id);
this.generateBarcode(this.data);
}
};
</script>
src/styles/css/Assets/Main.scss
+12 -18
View File
@@ -26,25 +26,11 @@
src: url('../../fonts/Montserrat-Light.ttf') format('truetype');
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.title,
.display-1 {
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .title, .display-1 {
font-family: 'Montserrat-Regular' !important;
}
.CSSD-font,
.headline.CSSD-font,
h3.CSSD-font {
.CSSD-font, .headline.CSSD-font, h3.CSSD-font {
font-family: 'Montserrat-Regular' !important;
}
@@ -86,8 +72,7 @@ h3.CSSD-font {
vertical-align: sub !important;
}
.fa,
.fas {
.fa, .fas {
font-size: 20px;
}
@@ -107,6 +92,15 @@ h3.CSSD-font {
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 {
background-color: #eee !important;
}
src/styles/css/Assets/WM-ModernTheme.scss
+178 -42
View File
@@ -5,6 +5,7 @@
.En-Raleway {
font-family: 'Raleway', sans-serif;
}
.WM-SubText {
display: inline-block;
padding: 10px 25px 10px 25px;
@@ -12,9 +13,11 @@
border-radius: 5px;
margin: 3px 0px 10px 0px;
}
.WM-SubText.SmallPad {
padding: 5px 15px 5px 15px;
}
.WM-SubText.XS {
padding: 3px 15px 1px 15px;
}
@@ -22,64 +25,83 @@
.WM-LetterSpacing-5 {
letter-spacing: 5px;
}
.WM-LetterSpacing-10 {
letter-spacing: 10px;
}
.WM-LetterSpacing-15 {
letter-spacing: 15px;
}
.wow {
visibility: hidden;
}
.RotateX {
transform: rotate(180deg);
webkit-transform: rotate(180deg);
}
.Material-Shoadow-SM {
box-shadow: 0 8px 10px rgba(0,0,0,0.30), 0 4px 3px rgba(0,0,0,0.22);
box-shadow: 0 8px 10px rgba(0, 0, 0, 0.30), 0 4px 3px rgba(0, 0, 0, 0.22);
}
.InlineBlock {
display: inline-block;
}
.CubeTransition {
transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.WhiteTheme .WM-SubText {
background-color: #fff !important;
color: #000;
}
.WhiteTheme .Notification {
background-color: transparent !important;
}
.WM-Height-90 {
height: 90px;
}
.WM-Height-110 {
height: 110px;
}
.WM-Height-130 {
height: 130px;
}
.WM-Width-220 {
width: 220px;
}
.WM-Width-Full {
width: 100%;
}
.WM-Height-Full {
height: 100%;
}
.WM-Absolute {
position: absolute;
}
.WM-Relative {
position: relative;
}
.WM-Block {
display: block;
}
.WM-InlineBlock {
display: inline-block;
}
@@ -87,69 +109,85 @@
[class^='WM-Hover'], [class*='WM-Hover'] {
transition: 0.2s;
}
/* --------------------------------------------------------
Align & Floats :: Begin
-------------------------------------------------------- */
.WM-Align-C {
text-align: center;
}
.WM-Align-R {
text-align: right;
}
.WM-Align-L {
text-align: left;
}
.WM-Float-R {
float: right;
}
.WM-Float-L {
float: left;
}
/* --------------------------------------------------------
Direction :: Begin
-------------------------------------------------------- */
.WM-RTL {
direction: rtl;
}
/* --------------------------------------------------------
Fonts :: Begin
-------------------------------------------------------- */
.WM-Font-12 {
font-size: 12px;
}
.WM-Font-14 {
font-size: 14px;
}
.WM-Font-16 {
font-size: 16px;
}
.WM-Font-18 {
font-size: 18px;
}
.WM-Font-20 {
font-size: 20px;
}
.WM-Font-22 {
font-size: 22px;
}
.WM-Font-24 {
font-size: 24px;
}
.WM-Font-30 {
font-size: 30px;
}
.WM-Font-36 {
font-size: 36px;
}
.WM-Font-48 {
font-size: 48px;
}
.WM-Font-52 {
font-size: 52px;
}
/* --------------------------------------------------------
Inputs :: Begin
-------------------------------------------------------- */
@@ -169,28 +207,53 @@
}
.WM-Input:focus::-webkit-input-placeholder {
color:transparent;
color: transparent;
}
.WM-Input:focus::-webkit-input-placeholder { color:transparent; }
.WM-Input:focus:-moz-placeholder { color:transparent; }
.WM-Input:focus::-moz-placeholder { color:transparent; }
.WM-Input:focus:-ms-input-placeholder { color:transparent; }
.WM-Input:focus::-webkit-input-placeholder {
color: transparent;
}
.WM-TextArea:focus::-webkit-input-placeholder { color:transparent; }
.WM-TextArea:focus:-moz-placeholder { color:transparent; }
.WM-TextArea:focus::-moz-placeholder { color:transparent; }
.WM-TextArea:focus:-ms-input-placeholder { color:transparent; }
.WM-Input:focus:-moz-placeholder {
color: transparent;
}
.WM-Input:focus::-moz-placeholder {
color: transparent;
}
.WM-Input:focus:-ms-input-placeholder {
color: transparent;
}
.WM-TextArea:focus::-webkit-input-placeholder {
color: transparent;
}
.WM-TextArea:focus:-moz-placeholder {
color: transparent;
}
.WM-TextArea:focus::-moz-placeholder {
color: transparent;
}
.WM-TextArea:focus:-ms-input-placeholder {
color: transparent;
}
.WM-Input::-webkit-input-placeholder {
color: #555555;
}
.WM-Input:-moz-placeholder {
color: #555555;
}
.WM-Input::-moz-placeholder {
color: #555555;
}
.WM-Input:-ms-input-placeholder {
color: #555555;
}
@@ -198,12 +261,15 @@
.WM-TextArea::-webkit-input-placeholder {
color: #555555;
}
.WM-TextArea:-moz-placeholder {
color: #555555;
}
.WM-TextArea::-moz-placeholder {
color: #555555;
}
.WM-TextArea:-ms-input-placeholder {
color: #555555;
}
@@ -256,33 +322,40 @@
transition: all 0.4s;
background: #ff4b5a;
}
.WM-Input.WM-Red + .WM-Input100-Focus::before {
background: #ee3552;
}
.WM-Input.WM-Orange + .WM-Input100-Focus::before {
background: #FF6B57;
}
.WM-Input.WM-Purple + .WM-Input100-Focus::before {
background: #ac3773;
}
.WM-Input.WM-Cyan + .WM-Input100-Focus::before {
background: #32c5d2;
}
.WM-Input.WM-Green + .WM-Input100-Focus::before {
background: #0d7e00;
}
.WM-Input.WM-Blue + .WM-Input100-Focus::before {
background: #3498DB;
}
.WM-Input.WM-Black + .WM-Input100-Focus::before {
background: #000;
}
.WM-Input.WM-Input100 {
height: 40px;
}
.WM-InputWrapper input:disabled {
cursor: not-allowed;
}
@@ -310,61 +383,87 @@
.WM-Margin-T-5 {
margin-top: 5px;
}
.WM-Margin-T-15 {
margin-top: 15px;
}
.WM-Margin-T-20 {
margin-top: 20px;
}
.WM-Margin-T-45 {
margin-top: 45px;
}
.WM-Margin-T-55 {
margin-top: 55px;
}
.WM-Margin-T-100 {
margin-top: 100px;
}
.WM-Margin-L-10 {
margin-left: 10px;
}
.WM-Margin-L-0 {
margin-left: 0 !important;
}
.WM-Margin-R-10 {
margin-right: 10px;
}
.WM-Margin-R-40 {
margin-right: 40px;
}
.WM-Margin-BT-20 {
margin-top: 20px;
margin-bottom: 20px;
}
.WM-Margin-BT-5 {
margin-top: 5px;
margin-bottom: 5px;
}
.WM-Margin-BT-0 {
margin-top: 0;
margin-bottom: 0;
}
.WM-Margin-B-10 {
margin-bottom: 10px;
}
.WM-Margin-B-30 {
margin-bottom: 30px;
}
.WM-Margin-RL-15 {
margin-left: 15px;
margin-right: 15px;
}
.WM-Margin-RL-0 {
margin-left: 0;
margin-right: 0;
}
/* --------------------------------------------------------
Paddings :: Begin
-------------------------------------------------------- */
.WM-Padding-10 {
padding: 10px;
}
.WM-Padding-5 {
padding: 5px;
}
.WM-Padding-T-10 {
padding-top: 10px;
}
@@ -375,18 +474,23 @@
.WM-Border {
border: 1px solid;
}
.WM-Border-2x {
border: 2px solid;
}
.WM-Border-R {
border-right: 1px solid;
}
.WM-Border-L {
border-left: 1px solid;
}
.WM-Border-T {
border-top: 1px solid;
}
.WM-Border-B {
border-bottom: 1px solid;
}
@@ -507,6 +611,7 @@
-o-box-shadow: 0 10px 30px 0px rgba(52, 152, 219, 0.5);
-ms-box-shadow: 0 10px 30px 0px rgba(52, 152, 219, 0.5);
}
.WM-Btn-Gray {
background-color: #797979;
box-shadow: 0 10px 30px 0px rgba(82, 104, 119, 0.5);
@@ -535,6 +640,7 @@
-o-box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5);
-ms-box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5);
}
.WM-Btn-RedHover:hover {
background-color: #ee3552;
cursor: pointer;
@@ -550,18 +656,22 @@
min-width: 50px;
padding: 0 10px;
}
.WM-Btn-SM i {
margin-left: 0px;
}
.WM-Btn-XS {
min-width: 40px;
padding: 0 10px;
line-height: 1 !important;
height: 40px !important;
}
.WM-Btn-XS i {
margin-left: 0px;
}
/* .WM-Btn:hover i {
-webkit-transform: translateX(10px);
-moz-transform: translateX(10px);
@@ -571,28 +681,30 @@
} */
/* --------------------------------------------------------
Headers :: Begin
-------------------------------------------------------- */
.WM-SH-Container {
.WM-SH-Container {
width: 100%;
position: relative;
text-align: right;
}
.WM-SH-TextFa {
}
.WM-SH-TextFa {
margin-bottom: 15px;
font-size: 25px;
color: #000;
}
.WM-SH-Line {
}
.WM-SH-Line {
width: 100%;
height: 1px;
background-color: #000;
overflow: hidden;
}
.WM-SH-TextEn-Container {
}
.WM-SH-TextEn-Container {
top: -12px;
position: relative;
display: inline-block;
@@ -600,8 +712,9 @@
overflow: visible;
padding: 0 0px;
background-color: #fff;
}
.WM-SH-TextEn {
}
.WM-SH-TextEn {
background-color: #000;
padding: 5px 20px 5px 20px;
color: #fff;
@@ -610,12 +723,12 @@
font-size: 14px;
margin: 0px 0px 0px 20px;
border-radius: 3px;
}
.WM-SH-Description {
}
.WM-SH-Description {
margin-top: -7px;
font-size: 14px;
}
}
/* --------------------------------------------------------
@@ -627,6 +740,7 @@
direction: rtl;
text-decoration: none;
}
.WM-Link::after {
content: '';
display: block;
@@ -636,6 +750,7 @@
transition: width .3s;
margin-top: 2px;
}
.WM-Link:hover::after, .WM-Link.WM-Selected::after {
width: 100%;
}
@@ -643,6 +758,7 @@
.WM-Link-Red:hover, .WM-Link-Red.WM-Selected {
color: #ee3552 !important;
}
.WM-Link-Red::after {
background: #ee3552;
}
@@ -650,6 +766,7 @@
.WM-Link-Green:hover, .WM-Link-Green.WM-Selected {
color: #32c5d2 !important;
}
.WM-Link-Green::after {
background: #32c5d2;
}
@@ -657,6 +774,7 @@
.WM-Link-Dark:hover, .WM-Link-Dark.WM-Selected {
color: #000 !important;
}
.WM-Link-Dark::after {
background: #000;
}
@@ -664,6 +782,7 @@
.WM-Link-Purple:hover, .WM-Link-Purple.WM-Selected {
color: #ac3773 !important;
}
.WM-Link-Purple::after {
background: #ac3773;
}
@@ -671,12 +790,12 @@
.WM-Link-Orange:hover, .WM-Link-Orange.WM-Selected {
color: #FF6B57 !important;
}
.WM-Link-Orange::after {
background: #FF6B57;
}
/* --------------------------------------------------------
Colors :: Begin
-------------------------------------------------------- */
@@ -862,10 +981,11 @@
Hover :: Grayscale
-------------------------------------------------------- */
.WM-CategoryItem {
display:block;
overflow:hidden;
position:relative;
display: block;
overflow: hidden;
position: relative;
}
.WM-Hover-Grayscale {
cursor: pointer;
-webkit-transition: all 1s ease !important;
@@ -874,25 +994,41 @@
-ms-transition: all 1s ease !important;
transition: all 1s ease !important;
}
.WM-Hover-Grayscale:hover {
-webkit-filter: grayscale(100%) !important;
}
.WM-Width-120{
width:120px;
.WM-Width-120 {
width: 120px;
}
.WM-Width-150{
width:150px;
.WM-Width-150 {
width: 150px;
}
.WM-Width-300{
width:300px;
.WM-Width-300 {
width: 300px;
}
.WM-Width-350{
width:350px;
.WM-Width-350 {
width: 350px;
}
.WM-Width-500{
width:500px;
.WM-Width-500 {
width: 500px;
}
.WM-Width-400{
width:400px;
.WM-Width-400 {
width: 400px;
}
.WM-Tooltip-Btn {
min-width: 40px;
padding: 0;
line-height: 40px;
height: 40px;
text-align: center;
justify-content: center;
align-items: center;
}
src/views/Cycle/List.vue
+47 -36
View File
@@ -2,32 +2,32 @@
<div class>
<v-container fluid>
<material-card class color="black" title="All Cycles" text>
<v-layout align-center wrap class="px-3 my-3">
<v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter">
<v-layout align-center wrap class="px-3">
<v-flex xs12 sm4 lg2 xl1 class="WM-FlexCenter">
<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"/>
</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-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"/>
</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-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"/>
</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-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"
:clearable="true"/>
</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-menu lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
v-model="Menu">
<v-menu class="pt-3 pr-3" lazy :close-on-content-click="true" transition="v-scale-transition"
offset-y v-model="Menu" style="width: 100%;">
<v-text-field style="padding-top:0 !important" required slot="activator" label="Date"
color="black" class="" v-model="filter.date">
</v-text-field>
@@ -36,17 +36,25 @@
</v-menu>
</v-flex>
<v-spacer/>
<v-flex class xs12 sm6 md6 lg2 xl1>
<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-flex xs12 sm12 md12 lg12 xl3 class="WM-Align-R">
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<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>
</v-flex>
<v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
</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>
<router-link :to="{ name: 'AddCycle' }">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
<span class="black--text">Add</span>
<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>
</router-link>
</v-flex>
@@ -77,20 +85,32 @@
<td class="text-xs-right FlexBtn Height-MD-60 justify-self-end">
<v-tooltip bottom open-on-hover>
<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)">
<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>
</v-btn>
</template>
<span>Show</span>
</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>
<template v-slot:activator="{ on, attrs }">
<router-link class="LinkBtn"
v-if="$hasRole('Admin') || item.user_id == $store.state.user.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>
<span>Edit</span>
</v-btn>
@@ -98,9 +118,10 @@
</template>
<span>Edit</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" class="WM-ActionButton mr-2"
<v-btn v-bind="attrs" v-on="on" color="red" class="WM-ActionButton mr-2"
@click="removeModal(item.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>
@@ -109,16 +130,6 @@
</template>
<span>Remove</span>
</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>
</template>
</v-data-table>
@@ -163,7 +174,7 @@ export default {
{sortable: false, text: "Label IDs", value: "Label IDs"},
{sortable: false, text: "Cycle Number", value: "Cycle Number"},
{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: {},
Menu: false,
src/views/Item/List.vue
+52 -50
View File
@@ -2,43 +2,53 @@
<div class>
<v-container fluid>
<material-card class color="black" title="All Items" text>
<v-layout align-center wrap class="my-3 px-3">
<v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter">
<v-layout align-center wrap class="px-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-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"/>
</v-flex>
<v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter">
<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 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-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"
:clearable="true"/>
</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-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 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-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>
<!--btn-->
<v-spacer/>
<v-flex class xs12 sm6 md6 lg2 xl1>
<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-flex xs12 sm6 md6 lg12 xl3 class="WM-Align-R">
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<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>
</v-flex>
<v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
</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>
<router-link :to="{ name: 'AddItem' }">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
<span class="black--text">Add</span>
<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>
</router-link>
</v-flex>
@@ -74,7 +84,7 @@
<v-btn :color="status.color" class="mr-2"
@click="changeStatus(item, status.status)" v-bind="attrs"
v-on="on">
<v-icon class="white--text mr-1 caption">
<v-icon :class="`${status.font_color}--text mr-1 caption`">
fas {{ status.icon }}
</v-icon>
<span>{{ status.label }}</span>
@@ -85,20 +95,30 @@
</template>
<v-tooltip bottom open-on-hover>
<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)">
<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>
</v-btn>
</template>
<span>Show</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="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 }">
<router-link class="LinkBtn"
v-if="$hasRole('Admin|Supervisor') ||( item.user_id == $store.state.user.id && !['approved', 'rejected'].includes(item.status))"
: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>
<span>Edit</span>
</v-btn>
@@ -108,7 +128,7 @@
</v-tooltip>
<v-tooltip bottom open-on-hover>
<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)"
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>
@@ -117,16 +137,6 @@
</template>
<span>Remove</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="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>
</template>
</v-data-table>
@@ -209,6 +219,8 @@ export default {
this.loadMedicalCenters();
},
async generateBarcode(item, type = null) {
let code = item.udi;
if (code) {
const result = await ApiService.post(urls.Barcode(item.id, type));
if (result && result.status == 200) {
this.changeCurrentModal({
@@ -216,6 +228,9 @@ export default {
properties: {result, item},
});
}
} else {
toast.error('An error occurred while generating the barcode . please first set UDI');
}
},
async show(id) {
const result = await ApiService.get(urls.showItem(id));
@@ -252,8 +267,8 @@ export default {
getStatus(item) {
if (item.status === 'pending') {
return [
{status: 'rejected', label: 'reject', color: 'red', icon: 'fa-close'},
{status: 'approved', label: 'approve', color: 'green', icon: 'fa-check'}
{status: 'approved', label: 'approve', color: 'cyan', font_color : 'white', icon: 'fa-check'},
{status: 'rejected', label: 'reject', color: 'light-gray',font_color : 'black', icon: 'fa-close'},
]
} else {
const nextStatus = item.status === 'rejected' ? 'approved' : 'rejected'
@@ -261,7 +276,8 @@ export default {
{
status: nextStatus,
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'
}
]
@@ -284,17 +300,3 @@ export default {
}
};
</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>
<v-container fluid>
<material-card class color="black" title="All Labels" text>
<v-layout align-center wrap class="px-3 my-3">
<v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter">
<v-layout align-center wrap class="px-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-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"/>
</v-flex>
<v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3" v-if="$hasRole('Admin')">
<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.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-autocomplete
class="py-3 pr-3"
class="pt-3 pr-3"
v-model="filter.medical_center_id"
@change="fillUsers"
item-text="name"
@@ -23,28 +32,26 @@
:clearable="true"
/>
</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-flex xs12 sm6 md6 lg2 xl1 class="">
<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-flex xs12 sm6 md6 lg12 xl3 class="WM-Align-R">
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<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>
</v-flex>
<v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
<router-link :to="{name: 'AddLabel'}">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
<span class="black--text">Add</span>
</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>
<router-link :to="{ name: 'AddLabel' }">
<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>
</router-link>
</v-flex>
@@ -71,21 +78,33 @@
<td class="text-xs-right FlexBtn Height-MD-60 justify-self-end">
<v-tooltip bottom open-on-hover>
<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)">
<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>
</v-btn>
</template>
<span>Show</span>
</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>
<template v-slot:activator="{ on, attrs }">
<router-link
class="LinkBtn"
v-if="$hasRole('Admin') || item.user_id == $store.state.user.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>
<span>Edit</span>
</v-btn>
@@ -93,11 +112,12 @@
</template>
<span>Edit</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"
color="red"
class="WM-ActionButton mr-2"
@click="removeModal(item.id)"
v-if="$hasRole('Admin') || item.user_id == $store.state.user.id">
@@ -107,16 +127,6 @@
</template>
<span>Remove</span>
</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>
</template>
</v-data-table>
@@ -161,7 +171,7 @@ export default {
{sortable: false, text: "Cycle Number", value: "Cycle Number"},
{sortable: false, text: "Sterilizer ID", value: "Sterilizer 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: {},
items: [],
src/views/MedicalCenter/List.vue
+35 -30
View File
@@ -1,31 +1,34 @@
<template>
<v-container fluid>
<material-card class color="black" title="Medical Centers List" text>
<v-layout wrap class="px-5 mb-3">
<v-flex xs12 md3 sm3 class="pr-3">
<v-text-field label="Name" v-model="filter.name" color="black"/>
<v-layout wrap class="px-3 align-center">
<v-flex xs12 sm6 md6 lg3 xl2>
<v-text-field class="pt-3 pr-3" label="Name" v-model="filter.name" color="black"/>
</v-flex>
<v-spacer/>
<v-flex class xs12 sm6 md6 lg2 xl1>
<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-flex xs12 sm6 md6 lg3 xl3 class="WM-Align-R">
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<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>
</v-flex>
<v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
</template>
<span>Filter</span>
</v-tooltip>
<router-link :to="{ name: 'AddMedicalCenter' }">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
<span class="black--text">Add</span>
<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>
</router-link>
</v-flex>
</v-layout>
<v-layout class="px-4 my-3">
<v-layout class="px-3 my-3">
<v-divider/>
</v-layout>
<v-layout align-center justify-center wrap class="px-5 mt-3">
<v-flex md12>
<v-layout align-center justify-center wrap class="px-3 mt-3">
<v-flex xs12>
<v-data-table :headers="headers" :items="items" hide-actions>
<template slot="headerCell" slot-scope="{ header }">
<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">{{ item.users_count }} Operator</td>
<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>
<template v-slot:activator="{ on, attrs }">
<router-link class="LinkBtn"
: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>
<span>Edit</span>
</v-btn>
@@ -47,22 +64,10 @@
</template>
<span>Edit</span>
</v-tooltip>
<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="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)"
<v-btn v-bind="attrs" v-on="on" color="red" @click="removeModal(item.id)"
class="WM-ActionButton">
<v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
<span>Remove</span>
src/views/MyItem/List.vue
+66 -55
View File
@@ -2,47 +2,51 @@
<div class>
<v-container fluid>
<material-card class color="black" title="My Items" text>
<v-layout align-center wrap class="my-3 px-3">
<v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter">
<v-layout align-center wrap class="px-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-text-field class="py-3 pr-3" v-model="getFilters.item_id"
@input="updateFilter('item_id', getFilters.item_id)" label="Item ID"
<v-text-field class="pt-3 pr-3" v-model="filter.item_id" label="Item ID"
color="black"/>
</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-text-field class="py-3 pr-3" v-model="getFilters.name"
@input="updateFilter('name', getFilters.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 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-autocomplete class="py-3 pr-3" v-model="getFilters.medical_center_id" item-text="name"
item-value="id"
@input="updateFilter('medical_center_id', getFilters.medical_center_id)"
label="Hospital" color="black" :items="medicalCenters" :clearable="true"/>
<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"
:clearable="true"/>
</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-text-field class="py-3 pr-3" v-model="getFilters.size"
@input="updateFilter('size', getFilters.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 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-text-field class="py-3 pr-3" v-model="getFilters.udi"
@input="updateFilter('udi', getFilters.udi)" label="UDI" color="black"/>
<v-text-field class="pt-3 pr-3" v-model="filter.udi" label="UDI" color="black"/>
</v-flex>
<!--btn-->
<v-spacer/>
<v-flex class xs12 sm6 md6 lg2 xl1>
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="onFilterClick()">
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
<span class="white--text">Filter</span>
<v-flex xs12 sm6 md6 lg2 xl3 class="WM-Align-R">
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<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>
</v-flex>
<v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
</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>
<router-link :to="{ name: 'AddItem' }">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
<span class="black--text">Add</span>
<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>
</router-link>
</v-flex>
@@ -75,7 +79,7 @@
<v-btn :color="status.color" class="mr-2"
@click="changeStatus(item, status.status)" v-bind="attrs"
v-on="on">
<v-icon class="white--text mr-1 caption">
<v-icon :class="`${status.font_color}--text mr-1 caption`">
fas {{ status.icon }}
</v-icon>
<span>{{ status.label }}</span>
@@ -86,20 +90,40 @@
</template>
<v-tooltip bottom open-on-hover>
<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)">
<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>
</v-btn>
</template>
<span>Show</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="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>
<template v-slot:activator="{ on, attrs }">
<router-link class="LinkBtn"
v-if="$hasRole('Admin|Supervisor') ||( item.user_id == $store.state.user.id && !['approved', 'rejected'].includes(item.status))"
: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>
<span>Edit</span>
</v-btn>
@@ -109,7 +133,7 @@
</v-tooltip>
<v-tooltip bottom open-on-hover>
<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)"
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>
@@ -118,26 +142,6 @@
</template>
<span>Remove</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="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>
</template>
@@ -196,6 +200,7 @@ export default {
}),
async created() {
this.loadMyItem();
this.loadMedicalCenters();
},
computed: {
...mapGetters('myItems', ["getFilters", 'getMyItems', 'getCurrentPage', 'getLastPage']),
@@ -226,6 +231,8 @@ export default {
});
},
async generateBarcode(item, type = null) {
let code = item.udi;
if (code) {
const result = await ApiService.post(urls.Barcode(item.id, type));
if (result && result.status == 200) {
this.changeCurrentModal({
@@ -233,6 +240,9 @@ export default {
properties: {result, item},
});
}
} else {
toast.error('An error occurred while generating the barcode . please first set UDI');
}
},
async show(testResultId) {
const result = await ApiService.get(
@@ -271,8 +281,8 @@ export default {
getStatus(item) {
if (item.status === 'pending') {
return [
{status: 'rejected', label: 'reject', color: 'red', icon: 'fa-close'},
{status: 'approved', label: 'approve', color: 'green', icon: 'fa-check'}
{status: 'approved', label: 'approve', color: 'cyan', font_color : 'white', icon: 'fa-check'},
{status: 'rejected', label: 'reject', color: 'light-gray',font_color : 'black', icon: 'fa-close'},
]
} else {
const nextStatus = item.status === 'rejected' ? 'approved' : 'rejected'
@@ -280,7 +290,8 @@ export default {
{
status: nextStatus,
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'
}
]
src/views/MyPackage/List.vue
+56 -45
View File
@@ -2,38 +2,45 @@
<div class>
<v-container fluid>
<material-card class color="black" title="My Packages" text>
<v-layout align-center wrap class="mt-3 px-3">
<v-flex xs12 sm6 md4 lg3 xl2 class="WM-FlexCenter">
<v-layout align-center wrap class="px-3">
<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-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"/>
</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-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 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-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"
:clearable="true"/>
</v-flex>
<v-spacer/>
<v-flex class xs12 sm6 md6 lg2 xl1>
<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-flex xs12 sm6 md6 lg4 xl3 class="WM-Align-R">
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<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>
</v-flex>
<v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
</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>
<router-link :to="{ name: 'AddPackage' }">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
<span class="black--text">Add</span>
<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>
</router-link>
</v-flex>
</v-layout>
<v-layout class="px-3 my-3">
<v-divider/>
@@ -62,7 +69,8 @@
<v-btn :color="status.color" class="mr-2"
@click="changeStatus(item, status.status)" v-bind="attrs"
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>
<span>{{ status.label }}</span>
</v-btn>
@@ -73,21 +81,43 @@
<v-tooltip bottom open-on-hover>
<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)">
<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>
</v-btn>
</template>
<span>Show</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="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>
<template v-slot:activator="{ on, attrs }">
<router-link class="LinkBtn"
v-if="$hasRole('Admin|Supervisor') ||( item.user_id == $store.state.user.id && !['approved', 'rejected'].includes(item.status))"
: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>
<span>Edit</span>
</v-btn>
@@ -98,7 +128,7 @@
<v-tooltip bottom open-on-hover>
<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)"
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>
@@ -107,26 +137,6 @@
</template>
<span>Remove</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="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>
</template>
@@ -245,8 +255,8 @@ export default {
getStatus(item) {
if (item.status === 'pending') {
return [
{status: 'rejected', label: 'reject', color: 'red', icon: 'fa-close'},
{status: 'approved', label: 'approve', color: 'green', icon: 'fa-check'}
{status: 'approved', label: 'approve', color: 'cyan' , font_color : 'white', icon: 'fa-check'},
{status: 'rejected', label: 'reject', color: 'light-gray' ,font_color : 'black', icon: 'fa-close'},
]
} else {
const nextStatus = item.status === 'rejected' ? 'approved' : 'rejected'
@@ -254,7 +264,8 @@ export default {
{
status: nextStatus,
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'
}
]
src/views/Package/List.vue
+64 -47
View File
@@ -2,46 +2,45 @@
<div class>
<v-container fluid>
<material-card class color="black" title="All Packages" text>
<v-layout align-center wrap class="mt-3 px-3">
<v-flex xs12 sm6 md4 lg3 xl2 class="WM-FlexCenter">
<v-layout align-center wrap class="px-3">
<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-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"/>
</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-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 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-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"
:clearable="true"/>
</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-flex class xs12 sm6 md6 lg2 xl1>
<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-flex xs12 sm6 md6 lg4 xl3 class="WM-Align-R">
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<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>
</v-flex>
<v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
</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>
<router-link :to="{ name: 'AddPackage' }">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
<span class="black--text">Add</span>
<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>
</router-link>
</v-flex>
</v-layout>
<v-layout class="px-3 my-3">
<v-divider/>
@@ -73,9 +72,8 @@
<v-btn :color="status.color" class="mr-2"
@click="changeStatus(item, status.status)" v-bind="attrs"
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>
<span>{{ status.label }}</span>
</v-btn>
@@ -86,21 +84,44 @@
<v-tooltip bottom open-on-hover>
<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)">
<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>
</v-btn>
</template>
<span>Show</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="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>
<template v-slot:activator="{ on, attrs }">
<router-link class="LinkBtn"
v-if="$hasRole('Admin|Supervisor') ||( item.user_id == $store.state.user.id && !['approved', 'rejected'].includes(item.status))"
: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>
<span>Edit</span>
</v-btn>
@@ -111,7 +132,7 @@
<v-tooltip bottom open-on-hover>
<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)"
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>
@@ -120,16 +141,6 @@
</template>
<span>Remove</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="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>
</template>
</v-data-table>
@@ -192,7 +203,7 @@ export default {
this.load();
},
methods: {
...mapMutations("modal", ["changeCurrentModal",'closeModal']),
...mapMutations("modal", ["changeCurrentModal", 'closeModal']),
async load(page = 1) {
let filter = '?';
for (const key in this.filter) {
@@ -256,8 +267,8 @@ export default {
getStatus(item) {
if (item.status === 'pending') {
return [
{status: 'rejected', label: 'reject', color: 'red', icon: 'fa-close'},
{status: 'approved', label: 'approve', color: 'green', icon: 'fa-check'}
{status: 'approved', label: 'approve', color: 'cyan', font_color : 'white', icon: 'fa-check'},
{status: 'rejected', label: 'reject', color: 'light-gray',font_color : 'black', icon: 'fa-close'},
]
} else {
const nextStatus = item.status === 'rejected' ? 'approved' : 'rejected'
@@ -265,13 +276,19 @@ export default {
{
status: nextStatus,
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'
}
]
}
},
async transfer(data) {
this.changeCurrentModal({
modal: "modal-user-list",
properties: {data},
});
},
async changeStatus(item, status) {
const result = await ApiService.post(urls.changePackageStatus(item.id), {status})
src/views/TestResult/List.vue
+27 -25
View File
@@ -2,39 +2,39 @@
<div class>
<v-container fluid>
<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-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"/>
</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-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"/>
</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-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"/>
</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-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"
:clearable="true"/>
</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-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"/>
</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-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-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-date-picker color="pink" no-title v-model="filter.fromPicker"
:date-format="date => new Date(date).toDateString()"/>
@@ -42,27 +42,29 @@
</v-flex>
<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-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-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-date-picker color="pink" no-title v-model="filter.upToPicker"
:date-format="date => new Date(date).toDateString()"/>
</v-menu>
</v-flex>
<v-spacer/>
<v-spacer/>
<v-flex class xs12 sm6 md6 lg2 xl1>
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="load(null, null)">
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
<span class="white--text">Filter</span>
<v-flex xs12 sm6 md6 lg12 xl3 class="WM-Align-R">
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<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)">
<v-icon class="black--text caption">fas fa-search</v-icon>
</v-btn>
</v-flex>
<v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
</template>
<span>Filter</span>
</v-tooltip>
<router-link :to="{ name: 'SubmitTestResult' }">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
<span class="black--text">Add</span>
<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>
</router-link>
</v-flex>
src/views/TestType/List.vue
+52 -45
View File
@@ -1,22 +1,22 @@
<template>
<v-container fluid>
<material-card class color="black" title="TestType List" text>
<v-layout wrap class="px-3 mb-3">
<v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3">
<material-card color="black" title="TestType List" text>
<v-layout wrap align-center class="px-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-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 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-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 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-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 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-menu
<v-menu class="pt-3 pr-3"
lazy
:close-on-content-click="true"
transition="v-scale-transition"
@@ -35,9 +35,9 @@
:date-format="date => new Date(date).toDateString()"/>
</v-menu>
</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-menu
<v-menu class="pt-3 pr-3"
lazy
:close-on-content-click="true"
transition="v-scale-transition"
@@ -56,19 +56,22 @@
:date-format="date => new Date(date).toDateString()"/>
</v-menu>
</v-flex>
<v-spacer/>
<v-flex class xs12 sm6 md6 lg2 xl1>
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="load(undefined)">
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
<span class="white--text">Filter</span>
<v-spacer/>
<v-flex xs12 sm6 md6 lg6 xl2 class="WM-Align-R">
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<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>
</v-flex>
<v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
<router-link :to="{name: 'AddTestType'}">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
<span class="black--text">Add</span>
</template>
<span>Filter</span>
</v-tooltip>
<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>
</router-link>
</v-flex>
@@ -88,13 +91,36 @@
<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="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>
<template v-slot:activator="{ on, attrs }">
<router-link
class="LinkBtn"
v-if="item.test_results_count == 0"
: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>
<span>Edit</span>
</v-btn>
@@ -102,27 +128,8 @@
</template>
<span>Edit</span>
</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>
</template>
</v-data-table>
src/views/User/List.vue
+24 -22
View File
@@ -1,32 +1,30 @@
<template>
<v-container grid-list-xs>
<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-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-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-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"/>
</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-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-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-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-flex>
<!-- </v-layout>
<v-layout class="px-5 mb-3">-->
<v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter">
<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-text-field required slot="activator" label="FromDate" color="black"
v-model="filter.fromPicker"/>
@@ -34,9 +32,9 @@
:date-format="date => new Date(date).toDateString()"/>
</v-menu>
</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-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-text-field required slot="activator" label="UpToDate" color="black"
v-model="filter.upToPicker"/>
@@ -45,11 +43,15 @@
</v-menu>
</v-flex>
<v-spacer/>
<v-flex wrap xs12 sm12 class="WM-Align-R ml-4">
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="load(undefined)">
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
<span class="white--text">Filter</span>
<v-flex xs12 sm12 md12 lg3 xl12 class="WM-Align-R">
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<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-flex>
</v-layout>
@@ -76,7 +78,7 @@
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<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"
v-if="$hasRole('Admin|Supervisor')">
<template v-if="item.status == 'Active'">
@@ -84,7 +86,7 @@
<span v-if="item.status == 'Active'">Suspended</span>
</template>
<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>
</template>
</v-btn>
@@ -94,10 +96,10 @@
</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"
<v-btn v-bind="attrs" v-on="on" color="light-gray"
@click="changeRoleModal(item)" class="mr-2 WM-ActionButton"
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>
</v-btn>
</template>
@@ -105,7 +107,7 @@
</v-tooltip>
<v-tooltip bottom open-on-hover>
<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)">
<v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
<span>Remove</span>