mirror of
https://git.meshkee.com/cssd/cssd-front.git
synced 2026-10-13 22:33:16 +03:30
fix : btn colors and filter btns
This commit is contained in:
zeinab.ashrafi
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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,12 +139,17 @@ 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 (code) {
|
||||||
|
const result = await ApiService.post(urls.Barcode(code, 'Item'));
|
||||||
if (result && result.status == 200) {
|
if (result && result.status == 200) {
|
||||||
this.QRCodeimg = result.data.data.QRCode ? result.data.data.QRCode : null;
|
this.QRCodeimg = result.data.data.QRCode ? result.data.data.QRCode : null;
|
||||||
this.barcodeimg = result.data.data.Barcode ? result.data.data.Barcode : 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() {
|
||||||
const prtHtml = document.getElementById("printMe").innerHTML;
|
const prtHtml = document.getElementById("printMe").innerHTML;
|
||||||
@@ -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>
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,6 +5,7 @@
|
|||||||
.En-Raleway {
|
.En-Raleway {
|
||||||
font-family: 'Raleway', sans-serif;
|
font-family: 'Raleway', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-SubText {
|
.WM-SubText {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 10px 25px 10px 25px;
|
padding: 10px 25px 10px 25px;
|
||||||
@@ -12,9 +13,11 @@
|
|||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
margin: 3px 0px 10px 0px;
|
margin: 3px 0px 10px 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-SubText.SmallPad {
|
.WM-SubText.SmallPad {
|
||||||
padding: 5px 15px 5px 15px;
|
padding: 5px 15px 5px 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-SubText.XS {
|
.WM-SubText.XS {
|
||||||
padding: 3px 15px 1px 15px;
|
padding: 3px 15px 1px 15px;
|
||||||
}
|
}
|
||||||
@@ -22,64 +25,83 @@
|
|||||||
.WM-LetterSpacing-5 {
|
.WM-LetterSpacing-5 {
|
||||||
letter-spacing: 5px;
|
letter-spacing: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-LetterSpacing-10 {
|
.WM-LetterSpacing-10 {
|
||||||
letter-spacing: 10px;
|
letter-spacing: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-LetterSpacing-15 {
|
.WM-LetterSpacing-15 {
|
||||||
letter-spacing: 15px;
|
letter-spacing: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wow {
|
.wow {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.RotateX {
|
.RotateX {
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
webkit-transform: rotate(180deg);
|
webkit-transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.Material-Shoadow-SM {
|
.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 {
|
.InlineBlock {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.CubeTransition {
|
.CubeTransition {
|
||||||
transition-property: all;
|
transition-property: all;
|
||||||
transition-duration: .5s;
|
transition-duration: .5s;
|
||||||
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
|
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.WhiteTheme .WM-SubText {
|
.WhiteTheme .WM-SubText {
|
||||||
background-color: #fff !important;
|
background-color: #fff !important;
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WhiteTheme .Notification {
|
.WhiteTheme .Notification {
|
||||||
background-color: transparent !important;
|
background-color: transparent !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Height-90 {
|
.WM-Height-90 {
|
||||||
height: 90px;
|
height: 90px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Height-110 {
|
.WM-Height-110 {
|
||||||
height: 110px;
|
height: 110px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Height-130 {
|
.WM-Height-130 {
|
||||||
height: 130px;
|
height: 130px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Width-220 {
|
.WM-Width-220 {
|
||||||
width: 220px;
|
width: 220px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Width-Full {
|
.WM-Width-Full {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Height-Full {
|
.WM-Height-Full {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Absolute {
|
.WM-Absolute {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Relative {
|
.WM-Relative {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Block {
|
.WM-Block {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-InlineBlock {
|
.WM-InlineBlock {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
@@ -87,69 +109,85 @@
|
|||||||
[class^='WM-Hover'], [class*='WM-Hover'] {
|
[class^='WM-Hover'], [class*='WM-Hover'] {
|
||||||
transition: 0.2s;
|
transition: 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --------------------------------------------------------
|
/* --------------------------------------------------------
|
||||||
Align & Floats :: Begin
|
Align & Floats :: Begin
|
||||||
-------------------------------------------------------- */
|
-------------------------------------------------------- */
|
||||||
.WM-Align-C {
|
.WM-Align-C {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Align-R {
|
.WM-Align-R {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Align-L {
|
.WM-Align-L {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Float-R {
|
.WM-Float-R {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Float-L {
|
.WM-Float-L {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --------------------------------------------------------
|
/* --------------------------------------------------------
|
||||||
Direction :: Begin
|
Direction :: Begin
|
||||||
-------------------------------------------------------- */
|
-------------------------------------------------------- */
|
||||||
.WM-RTL {
|
.WM-RTL {
|
||||||
direction: rtl;
|
direction: rtl;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --------------------------------------------------------
|
/* --------------------------------------------------------
|
||||||
Fonts :: Begin
|
Fonts :: Begin
|
||||||
-------------------------------------------------------- */
|
-------------------------------------------------------- */
|
||||||
.WM-Font-12 {
|
.WM-Font-12 {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Font-14 {
|
.WM-Font-14 {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Font-16 {
|
.WM-Font-16 {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Font-18 {
|
.WM-Font-18 {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Font-20 {
|
.WM-Font-20 {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Font-22 {
|
.WM-Font-22 {
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Font-24 {
|
.WM-Font-24 {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Font-30 {
|
.WM-Font-30 {
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Font-36 {
|
.WM-Font-36 {
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Font-48 {
|
.WM-Font-48 {
|
||||||
font-size: 48px;
|
font-size: 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Font-52 {
|
.WM-Font-52 {
|
||||||
font-size: 52px;
|
font-size: 52px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* --------------------------------------------------------
|
/* --------------------------------------------------------
|
||||||
Inputs :: Begin
|
Inputs :: Begin
|
||||||
-------------------------------------------------------- */
|
-------------------------------------------------------- */
|
||||||
@@ -169,28 +207,53 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.WM-Input:focus::-webkit-input-placeholder {
|
.WM-Input:focus::-webkit-input-placeholder {
|
||||||
color:transparent;
|
color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Input:focus::-webkit-input-placeholder { color:transparent; }
|
.WM-Input:focus::-webkit-input-placeholder {
|
||||||
.WM-Input:focus:-moz-placeholder { color:transparent; }
|
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-Input:focus:-moz-placeholder {
|
||||||
.WM-TextArea:focus:-moz-placeholder { color:transparent; }
|
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:-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 {
|
.WM-Input::-webkit-input-placeholder {
|
||||||
color: #555555;
|
color: #555555;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Input:-moz-placeholder {
|
.WM-Input:-moz-placeholder {
|
||||||
color: #555555;
|
color: #555555;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Input::-moz-placeholder {
|
.WM-Input::-moz-placeholder {
|
||||||
color: #555555;
|
color: #555555;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Input:-ms-input-placeholder {
|
.WM-Input:-ms-input-placeholder {
|
||||||
color: #555555;
|
color: #555555;
|
||||||
}
|
}
|
||||||
@@ -198,12 +261,15 @@
|
|||||||
.WM-TextArea::-webkit-input-placeholder {
|
.WM-TextArea::-webkit-input-placeholder {
|
||||||
color: #555555;
|
color: #555555;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-TextArea:-moz-placeholder {
|
.WM-TextArea:-moz-placeholder {
|
||||||
color: #555555;
|
color: #555555;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-TextArea::-moz-placeholder {
|
.WM-TextArea::-moz-placeholder {
|
||||||
color: #555555;
|
color: #555555;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-TextArea:-ms-input-placeholder {
|
.WM-TextArea:-ms-input-placeholder {
|
||||||
color: #555555;
|
color: #555555;
|
||||||
}
|
}
|
||||||
@@ -256,33 +322,40 @@
|
|||||||
transition: all 0.4s;
|
transition: all 0.4s;
|
||||||
background: #ff4b5a;
|
background: #ff4b5a;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Input.WM-Red + .WM-Input100-Focus::before {
|
.WM-Input.WM-Red + .WM-Input100-Focus::before {
|
||||||
background: #ee3552;
|
background: #ee3552;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Input.WM-Orange + .WM-Input100-Focus::before {
|
.WM-Input.WM-Orange + .WM-Input100-Focus::before {
|
||||||
background: #FF6B57;
|
background: #FF6B57;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Input.WM-Purple + .WM-Input100-Focus::before {
|
.WM-Input.WM-Purple + .WM-Input100-Focus::before {
|
||||||
background: #ac3773;
|
background: #ac3773;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Input.WM-Cyan + .WM-Input100-Focus::before {
|
.WM-Input.WM-Cyan + .WM-Input100-Focus::before {
|
||||||
background: #32c5d2;
|
background: #32c5d2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Input.WM-Green + .WM-Input100-Focus::before {
|
.WM-Input.WM-Green + .WM-Input100-Focus::before {
|
||||||
background: #0d7e00;
|
background: #0d7e00;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Input.WM-Blue + .WM-Input100-Focus::before {
|
.WM-Input.WM-Blue + .WM-Input100-Focus::before {
|
||||||
background: #3498DB;
|
background: #3498DB;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Input.WM-Black + .WM-Input100-Focus::before {
|
.WM-Input.WM-Black + .WM-Input100-Focus::before {
|
||||||
background: #000;
|
background: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.WM-Input.WM-Input100 {
|
.WM-Input.WM-Input100 {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-InputWrapper input:disabled {
|
.WM-InputWrapper input:disabled {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
@@ -310,61 +383,87 @@
|
|||||||
.WM-Margin-T-5 {
|
.WM-Margin-T-5 {
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Margin-T-15 {
|
.WM-Margin-T-15 {
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Margin-T-20 {
|
.WM-Margin-T-20 {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Margin-T-45 {
|
.WM-Margin-T-45 {
|
||||||
margin-top: 45px;
|
margin-top: 45px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Margin-T-55 {
|
.WM-Margin-T-55 {
|
||||||
margin-top: 55px;
|
margin-top: 55px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Margin-T-100 {
|
.WM-Margin-T-100 {
|
||||||
margin-top: 100px;
|
margin-top: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Margin-L-10 {
|
.WM-Margin-L-10 {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Margin-L-0 {
|
.WM-Margin-L-0 {
|
||||||
margin-left: 0 !important;
|
margin-left: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Margin-R-10 {
|
.WM-Margin-R-10 {
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Margin-R-40 {
|
.WM-Margin-R-40 {
|
||||||
margin-right: 40px;
|
margin-right: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Margin-BT-20 {
|
.WM-Margin-BT-20 {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Margin-BT-5 {
|
.WM-Margin-BT-5 {
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.WM-Margin-BT-0 {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.WM-Margin-B-10 {
|
.WM-Margin-B-10 {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Margin-B-30 {
|
.WM-Margin-B-30 {
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Margin-RL-15 {
|
.WM-Margin-RL-15 {
|
||||||
margin-left: 15px;
|
margin-left: 15px;
|
||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.WM-Margin-RL-0 {
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/* --------------------------------------------------------
|
/* --------------------------------------------------------
|
||||||
Paddings :: Begin
|
Paddings :: Begin
|
||||||
-------------------------------------------------------- */
|
-------------------------------------------------------- */
|
||||||
.WM-Padding-10 {
|
.WM-Padding-10 {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Padding-5 {
|
.WM-Padding-5 {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Padding-T-10 {
|
.WM-Padding-T-10 {
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
}
|
}
|
||||||
@@ -375,18 +474,23 @@
|
|||||||
.WM-Border {
|
.WM-Border {
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Border-2x {
|
.WM-Border-2x {
|
||||||
border: 2px solid;
|
border: 2px solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Border-R {
|
.WM-Border-R {
|
||||||
border-right: 1px solid;
|
border-right: 1px solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Border-L {
|
.WM-Border-L {
|
||||||
border-left: 1px solid;
|
border-left: 1px solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Border-T {
|
.WM-Border-T {
|
||||||
border-top: 1px solid;
|
border-top: 1px solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Border-B {
|
.WM-Border-B {
|
||||||
border-bottom: 1px solid;
|
border-bottom: 1px solid;
|
||||||
}
|
}
|
||||||
@@ -507,6 +611,7 @@
|
|||||||
-o-box-shadow: 0 10px 30px 0px rgba(52, 152, 219, 0.5);
|
-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);
|
-ms-box-shadow: 0 10px 30px 0px rgba(52, 152, 219, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Btn-Gray {
|
.WM-Btn-Gray {
|
||||||
background-color: #797979;
|
background-color: #797979;
|
||||||
box-shadow: 0 10px 30px 0px rgba(82, 104, 119, 0.5);
|
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);
|
-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);
|
-ms-box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Btn-RedHover:hover {
|
.WM-Btn-RedHover:hover {
|
||||||
background-color: #ee3552;
|
background-color: #ee3552;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -550,18 +656,22 @@
|
|||||||
min-width: 50px;
|
min-width: 50px;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Btn-SM i {
|
.WM-Btn-SM i {
|
||||||
margin-left: 0px;
|
margin-left: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Btn-XS {
|
.WM-Btn-XS {
|
||||||
min-width: 40px;
|
min-width: 40px;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
line-height: 1 !important;
|
line-height: 1 !important;
|
||||||
height: 40px !important;
|
height: 40px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Btn-XS i {
|
.WM-Btn-XS i {
|
||||||
margin-left: 0px;
|
margin-left: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* .WM-Btn:hover i {
|
/* .WM-Btn:hover i {
|
||||||
-webkit-transform: translateX(10px);
|
-webkit-transform: translateX(10px);
|
||||||
-moz-transform: translateX(10px);
|
-moz-transform: translateX(10px);
|
||||||
@@ -571,28 +681,30 @@
|
|||||||
} */
|
} */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* --------------------------------------------------------
|
/* --------------------------------------------------------
|
||||||
Headers :: Begin
|
Headers :: Begin
|
||||||
-------------------------------------------------------- */
|
-------------------------------------------------------- */
|
||||||
|
|
||||||
.WM-SH-Container {
|
.WM-SH-Container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
.WM-SH-TextFa {
|
|
||||||
|
.WM-SH-TextFa {
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
.WM-SH-Line {
|
|
||||||
|
.WM-SH-Line {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.WM-SH-TextEn-Container {
|
|
||||||
|
.WM-SH-TextEn-Container {
|
||||||
top: -12px;
|
top: -12px;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@@ -600,8 +712,9 @@
|
|||||||
overflow: visible;
|
overflow: visible;
|
||||||
padding: 0 0px;
|
padding: 0 0px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
.WM-SH-TextEn {
|
|
||||||
|
.WM-SH-TextEn {
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
padding: 5px 20px 5px 20px;
|
padding: 5px 20px 5px 20px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
@@ -610,12 +723,12 @@
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
margin: 0px 0px 0px 20px;
|
margin: 0px 0px 0px 20px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
.WM-SH-Description {
|
|
||||||
|
.WM-SH-Description {
|
||||||
margin-top: -7px;
|
margin-top: -7px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* --------------------------------------------------------
|
/* --------------------------------------------------------
|
||||||
@@ -627,6 +740,7 @@
|
|||||||
direction: rtl;
|
direction: rtl;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Link::after {
|
.WM-Link::after {
|
||||||
content: '';
|
content: '';
|
||||||
display: block;
|
display: block;
|
||||||
@@ -636,6 +750,7 @@
|
|||||||
transition: width .3s;
|
transition: width .3s;
|
||||||
margin-top: 2px;
|
margin-top: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Link:hover::after, .WM-Link.WM-Selected::after {
|
.WM-Link:hover::after, .WM-Link.WM-Selected::after {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
@@ -643,6 +758,7 @@
|
|||||||
.WM-Link-Red:hover, .WM-Link-Red.WM-Selected {
|
.WM-Link-Red:hover, .WM-Link-Red.WM-Selected {
|
||||||
color: #ee3552 !important;
|
color: #ee3552 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Link-Red::after {
|
.WM-Link-Red::after {
|
||||||
background: #ee3552;
|
background: #ee3552;
|
||||||
}
|
}
|
||||||
@@ -650,6 +766,7 @@
|
|||||||
.WM-Link-Green:hover, .WM-Link-Green.WM-Selected {
|
.WM-Link-Green:hover, .WM-Link-Green.WM-Selected {
|
||||||
color: #32c5d2 !important;
|
color: #32c5d2 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Link-Green::after {
|
.WM-Link-Green::after {
|
||||||
background: #32c5d2;
|
background: #32c5d2;
|
||||||
}
|
}
|
||||||
@@ -657,6 +774,7 @@
|
|||||||
.WM-Link-Dark:hover, .WM-Link-Dark.WM-Selected {
|
.WM-Link-Dark:hover, .WM-Link-Dark.WM-Selected {
|
||||||
color: #000 !important;
|
color: #000 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Link-Dark::after {
|
.WM-Link-Dark::after {
|
||||||
background: #000;
|
background: #000;
|
||||||
}
|
}
|
||||||
@@ -664,6 +782,7 @@
|
|||||||
.WM-Link-Purple:hover, .WM-Link-Purple.WM-Selected {
|
.WM-Link-Purple:hover, .WM-Link-Purple.WM-Selected {
|
||||||
color: #ac3773 !important;
|
color: #ac3773 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Link-Purple::after {
|
.WM-Link-Purple::after {
|
||||||
background: #ac3773;
|
background: #ac3773;
|
||||||
}
|
}
|
||||||
@@ -671,12 +790,12 @@
|
|||||||
.WM-Link-Orange:hover, .WM-Link-Orange.WM-Selected {
|
.WM-Link-Orange:hover, .WM-Link-Orange.WM-Selected {
|
||||||
color: #FF6B57 !important;
|
color: #FF6B57 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Link-Orange::after {
|
.WM-Link-Orange::after {
|
||||||
background: #FF6B57;
|
background: #FF6B57;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* --------------------------------------------------------
|
/* --------------------------------------------------------
|
||||||
Colors :: Begin
|
Colors :: Begin
|
||||||
-------------------------------------------------------- */
|
-------------------------------------------------------- */
|
||||||
@@ -862,10 +981,11 @@
|
|||||||
Hover :: Grayscale
|
Hover :: Grayscale
|
||||||
-------------------------------------------------------- */
|
-------------------------------------------------------- */
|
||||||
.WM-CategoryItem {
|
.WM-CategoryItem {
|
||||||
display:block;
|
display: block;
|
||||||
overflow:hidden;
|
overflow: hidden;
|
||||||
position:relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Hover-Grayscale {
|
.WM-Hover-Grayscale {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
-webkit-transition: all 1s ease !important;
|
-webkit-transition: all 1s ease !important;
|
||||||
@@ -874,25 +994,41 @@
|
|||||||
-ms-transition: all 1s ease !important;
|
-ms-transition: all 1s ease !important;
|
||||||
transition: all 1s ease !important;
|
transition: all 1s ease !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Hover-Grayscale:hover {
|
.WM-Hover-Grayscale:hover {
|
||||||
-webkit-filter: grayscale(100%) !important;
|
-webkit-filter: grayscale(100%) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WM-Width-120{
|
.WM-Width-120 {
|
||||||
width:120px;
|
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;
|
||||||
}
|
}
|
||||||
+47
-36
@@ -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>
|
</v-btn>
|
||||||
</v-flex>
|
</template>
|
||||||
<v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
|
<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' }">
|
<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,
|
||||||
|
|||||||
+52
-50
@@ -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>
|
</v-btn>
|
||||||
</v-flex>
|
</template>
|
||||||
<v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
|
<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' }">
|
<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,6 +219,8 @@ export default {
|
|||||||
this.loadMedicalCenters();
|
this.loadMedicalCenters();
|
||||||
},
|
},
|
||||||
async generateBarcode(item, type = null) {
|
async generateBarcode(item, type = null) {
|
||||||
|
let code = item.udi;
|
||||||
|
if (code) {
|
||||||
const result = await ApiService.post(urls.Barcode(item.id, type));
|
const result = await ApiService.post(urls.Barcode(item.id, type));
|
||||||
if (result && result.status == 200) {
|
if (result && result.status == 200) {
|
||||||
this.changeCurrentModal({
|
this.changeCurrentModal({
|
||||||
@@ -216,6 +228,9 @@ export default {
|
|||||||
properties: {result, item},
|
properties: {result, item},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
toast.error('An error occurred while generating the barcode . please first set UDI');
|
||||||
|
}
|
||||||
},
|
},
|
||||||
async show(id) {
|
async show(id) {
|
||||||
const result = await ApiService.get(urls.showItem(id));
|
const result = await ApiService.get(urls.showItem(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>
|
|
||||||
|
|||||||
+51
-41
@@ -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>
|
</v-btn>
|
||||||
</v-flex>
|
</template>
|
||||||
<v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
|
<span>Filter</span>
|
||||||
<router-link :to="{name: 'AddLabel'}">
|
</v-tooltip>
|
||||||
<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>
|
<v-btn class="WM-Outline-Btn WM-Border mr-2 WM-Margin-BT-0 WM-Border-Black" style="padding: 10px 30px;">
|
||||||
<span class="black--text">Add</span>
|
<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>
|
</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: [],
|
||||||
|
|||||||
@@ -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-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: '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>
|
||||||
|
|||||||
+66
-55
@@ -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>
|
</v-btn>
|
||||||
</v-flex>
|
</template>
|
||||||
<v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
|
<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' }">
|
<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,6 +231,8 @@ export default {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
async generateBarcode(item, type = null) {
|
async generateBarcode(item, type = null) {
|
||||||
|
let code = item.udi;
|
||||||
|
if (code) {
|
||||||
const result = await ApiService.post(urls.Barcode(item.id, type));
|
const result = await ApiService.post(urls.Barcode(item.id, type));
|
||||||
if (result && result.status == 200) {
|
if (result && result.status == 200) {
|
||||||
this.changeCurrentModal({
|
this.changeCurrentModal({
|
||||||
@@ -233,6 +240,9 @@ export default {
|
|||||||
properties: {result, item},
|
properties: {result, item},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
toast.error('An error occurred while generating the barcode . please first set UDI');
|
||||||
|
}
|
||||||
},
|
},
|
||||||
async show(testResultId) {
|
async show(testResultId) {
|
||||||
const result = await ApiService.get(
|
const result = await ApiService.get(
|
||||||
@@ -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'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -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>
|
</v-btn>
|
||||||
</v-flex>
|
</template>
|
||||||
<v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
|
<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' }">
|
<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'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
+64
-47
@@ -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>
|
</v-btn>
|
||||||
</v-flex>
|
</template>
|
||||||
<v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
|
<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' }">
|
<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})
|
||||||
|
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
+52
-45
@@ -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-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-btn>
|
||||||
</v-flex>
|
</template>
|
||||||
<v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
|
<span>Filter</span>
|
||||||
<router-link :to="{name: 'AddTestType'}">
|
</v-tooltip>
|
||||||
<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>
|
<router-link :to="{ name: 'AddTestType' }">
|
||||||
<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>
|
</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>
|
||||||
|
|||||||
+24
-22
@@ -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-icon class="black--text caption">fas fa-search</v-icon>
|
||||||
</v-btn>
|
</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>
|
||||||
|
|||||||
Reference in New Issue
Block a user