mirror of
https://git.meshkee.com/cssd/cssd-front.git
synced 2026-10-11 05:03:23 +03:30
fix : items & package & style
This commit is contained in:
zeinab.ashrafi
@@ -19,15 +19,15 @@
|
||||
</v-list-tile>
|
||||
<template v-for="(link, i) in links">
|
||||
|
||||
<v-list-tile v-if="!link.role || $hasRole(link.role)" :key="i" :to="link.to" :active-class="color"
|
||||
avatar
|
||||
class="v-list-item ">
|
||||
<!-- <v-list-tile-action>-->
|
||||
<!-- <v-icon>{{ link.icon }}</v-icon>-->
|
||||
<!-- </v-list-tile-action>-->
|
||||
<v-list-tile-title v-text="link.text"/>
|
||||
</v-list-tile>
|
||||
<v-divider class="my-1" v-if="(!link.role || $hasRole(link.role)) && link.line"/>
|
||||
<v-list-tile v-if="!link.role || $hasRole(link.role)" :key="i" :to="link.to" :active-class="color"
|
||||
avatar
|
||||
class="v-list-item ">
|
||||
<!-- <v-list-tile-action>-->
|
||||
<!-- <v-icon>{{ link.icon }}</v-icon>-->
|
||||
<!-- </v-list-tile-action>-->
|
||||
<v-list-tile-title v-text="link.text"/>
|
||||
</v-list-tile>
|
||||
<v-divider class="my-1" v-if="(!link.role || $hasRole(link.role)) && link.line"/>
|
||||
</template>
|
||||
</v-layout>
|
||||
</v-img>
|
||||
@@ -53,7 +53,7 @@ export default {
|
||||
{
|
||||
to: {name: 'MyInfo'},
|
||||
icon: 'mdi-account',
|
||||
text: 'My Info'
|
||||
text: 'My Info',
|
||||
},
|
||||
{
|
||||
to: {name: 'SubmitTestResult'},
|
||||
@@ -63,53 +63,36 @@ export default {
|
||||
{
|
||||
to: {name: 'AllResultTest'},
|
||||
icon: 'description',
|
||||
text: 'All Test Result',
|
||||
line: true
|
||||
},
|
||||
{
|
||||
to: {name: 'ManageMedicalCenter'},
|
||||
icon: 'far fa-building',
|
||||
text: 'Manage Medical Center',
|
||||
role: 'Admin',
|
||||
},
|
||||
{
|
||||
to: {name: 'ManageUsers'},
|
||||
icon: 'far fa-address-book',
|
||||
text: 'Manage Users',
|
||||
role: 'Admin',
|
||||
},
|
||||
{
|
||||
to: {name: 'ListTestType'},
|
||||
icon: 'fas fa-vial',
|
||||
text: 'List Test Type',
|
||||
role: 'Admin',
|
||||
text: 'Test Results',
|
||||
line: true
|
||||
},
|
||||
|
||||
{
|
||||
to: {name: 'AllItem'},
|
||||
icon: 'far fa-clone',
|
||||
text: 'Items',
|
||||
role: 'Admin|Supervisor|User'
|
||||
},
|
||||
{
|
||||
to: {name: 'MyItem'},
|
||||
icon: 'far fa-clone',
|
||||
text: 'My Items',
|
||||
role: 'Admin|Supervisor|User',
|
||||
line: true
|
||||
},
|
||||
{
|
||||
to: {name: 'AllPackage'},
|
||||
icon: 'fas fa-archive',
|
||||
text: 'Packages',
|
||||
role: 'Admin|Supervisor|User',
|
||||
},
|
||||
{
|
||||
to: {name: 'MyPackage'},
|
||||
icon: 'far fa-clone',
|
||||
text: 'My Packages',
|
||||
line: true
|
||||
},
|
||||
{
|
||||
to: {name: 'AllLabels'},
|
||||
icon: 'fas fa-inbox',
|
||||
text: 'Labels',
|
||||
line: true
|
||||
},
|
||||
{
|
||||
to: {name: 'AllCycle'},
|
||||
@@ -117,16 +100,34 @@ export default {
|
||||
text: 'Cycles',
|
||||
line: true
|
||||
},
|
||||
/* {
|
||||
to: {name: 'Statistics'},
|
||||
icon: 'fas fa-chart-bar',
|
||||
text: 'Statistics',
|
||||
{
|
||||
to: {name: 'ManageMedicalCenter'},
|
||||
icon: 'far fa-building',
|
||||
text: 'Medical Center',
|
||||
role: 'Admin',
|
||||
},
|
||||
{
|
||||
to: {name: 'Tickets'},
|
||||
icon: 'style',
|
||||
text: 'Tickets',
|
||||
},*/
|
||||
to: {name: 'ManageUsers'},
|
||||
icon: 'far fa-address-book',
|
||||
text: 'Users',
|
||||
role: 'Admin|Supervisor',
|
||||
},
|
||||
{
|
||||
to: {name: 'ListTestType'},
|
||||
icon: 'fas fa-vial',
|
||||
text: 'Manage Test Type',
|
||||
role: 'Admin',
|
||||
},
|
||||
/* {
|
||||
to: {name: 'Statistics'},
|
||||
icon: 'fas fa-chart-bar',
|
||||
text: 'Statistics',
|
||||
},
|
||||
{
|
||||
to: {name: 'Tickets'},
|
||||
icon: 'style',
|
||||
text: 'Tickets',
|
||||
},*/
|
||||
],
|
||||
responsive: false
|
||||
}),
|
||||
|
||||
@@ -24,7 +24,6 @@
|
||||
import { ApiService } from "@/services";
|
||||
import { urls } from "@/config/urls";
|
||||
import toast from "@/services/global/toast.service";
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
props: ['ModelID', 'Images', 'BatchID', 'ModelType'],
|
||||
@@ -33,7 +32,7 @@
|
||||
},
|
||||
data: () => ({
|
||||
dropzoneOptions: {
|
||||
url: '/api/UploadFile',
|
||||
url: '/api/store_media',
|
||||
thumbnailWidth: 150,
|
||||
maxFilesize: 2,
|
||||
headers: { "Authorization": `Bearer ${TokenService.getToken()}` },
|
||||
@@ -69,7 +68,7 @@
|
||||
}
|
||||
},
|
||||
sending(file, xhr, form_data) {
|
||||
form_data.append('file', file);
|
||||
// form_data.append('file', file);
|
||||
form_data.append('model_id', this.ModelID);
|
||||
form_data.append('model_type', this.ModelType);
|
||||
form_data.append('batch_id', this.BatchID);
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<v-btn v-if="responsive" class="default v-btn--simple" dark icon @click.stop="onClickBtn">
|
||||
<v-icon>mdi-view-list</v-icon>
|
||||
</v-btn>
|
||||
{{ title }}
|
||||
<p class="pt-5 title-home"> {{ title }}</p>
|
||||
</v-toolbar-title>
|
||||
</div>
|
||||
|
||||
@@ -76,10 +76,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {
|
||||
mapMutations, mapActions
|
||||
} from 'vuex'
|
||||
import {mapMutations, mapActions} from 'vuex'
|
||||
|
||||
export default {
|
||||
data: () => ({
|
||||
@@ -100,7 +97,7 @@ export default {
|
||||
watch: {
|
||||
'$route'(val) {
|
||||
// this.title = val.name
|
||||
this.title = val.name.replace(/([A-Z])/g, ' $1').trim()
|
||||
this.title = val.name.replace(/([A-Z])/g, ' $1').trim() !== 'Dashboard' ? val.name.replace(/([A-Z])/g, ' $1').trim() : 'home'
|
||||
}
|
||||
},
|
||||
|
||||
@@ -144,6 +141,14 @@ export default {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.title-home {
|
||||
font-family: "Montserrat-Regular";
|
||||
font-weight: 400;
|
||||
font-size: 36px !important;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5rem;
|
||||
}
|
||||
|
||||
.Pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -1,118 +1,104 @@
|
||||
<template>
|
||||
<v-card
|
||||
v-bind="$attrs"
|
||||
:style="styles"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<helper-offset
|
||||
v-if="hasOffset"
|
||||
:inline="inline"
|
||||
:full-width="fullWidth"
|
||||
:offset="offset"
|
||||
>
|
||||
<v-card
|
||||
v-if="!$slots.offset"
|
||||
:color="color"
|
||||
:class="`elevation-${elevation}`"
|
||||
class="v-card--material__header"
|
||||
dark
|
||||
>
|
||||
<slot
|
||||
v-if="!title && !text"
|
||||
name="header"
|
||||
/>
|
||||
<span v-else>
|
||||
<h4
|
||||
class="title font-weight-light mb-2"
|
||||
v-text="title"
|
||||
/>
|
||||
<p
|
||||
class="category font-weight-thin"
|
||||
v-text="text"
|
||||
/>
|
||||
</span>
|
||||
</v-card>
|
||||
<slot
|
||||
v-else
|
||||
name="offset"
|
||||
/>
|
||||
</helper-offset>
|
||||
<v-card v-bind="$attrs" :style="styles" v-on="$listeners" class="card-container">
|
||||
<helper-offset v-if="hasOffset" :inline="inline" :full-width="fullWidth" :offset="offset">
|
||||
<v-card v-if="!$slots.offset" :color="color" :class="`elevation-${elevation}`"
|
||||
class="v-card--material__header" dark>
|
||||
<slot v-if="!title && !text" name="header"/>
|
||||
<div v-else>
|
||||
<h4 class="title font-weight-light mb-2" v-text="title"/>
|
||||
<p class="category font-weight-thin" v-text="text"/>
|
||||
</div>
|
||||
</v-card>
|
||||
<slot v-else name="offset"/>
|
||||
</helper-offset>
|
||||
|
||||
<v-card-text>
|
||||
<slot />
|
||||
</v-card-text>
|
||||
<v-card-text>
|
||||
<slot/>
|
||||
</v-card-text>
|
||||
|
||||
<v-divider
|
||||
v-if="$slots.actions"
|
||||
class="mx-3"
|
||||
/>
|
||||
<v-divider v-if="$slots.actions" class="mx-3"/>
|
||||
|
||||
<v-card-actions v-if="$slots.actions">
|
||||
<slot name="actions" />
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
<v-card-actions v-if="$slots.actions">
|
||||
<slot name="actions"/>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
inheritAttrs: false,
|
||||
inheritAttrs: false,
|
||||
|
||||
props: {
|
||||
color: {
|
||||
type: String,
|
||||
default: 'secondary'
|
||||
props: {
|
||||
color: {
|
||||
type: String,
|
||||
default: 'secondary'
|
||||
},
|
||||
elevation: {
|
||||
type: [Number, String],
|
||||
default: 10
|
||||
},
|
||||
inline: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
fullWidth: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
offset: {
|
||||
type: [Number, String],
|
||||
default: 24
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
elevation: {
|
||||
type: [Number, String],
|
||||
default: 10
|
||||
},
|
||||
inline: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
fullWidth: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
offset: {
|
||||
type: [Number, String],
|
||||
default: 24
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: undefined
|
||||
|
||||
computed: {
|
||||
hasOffset() {
|
||||
return this.$slots.header ||
|
||||
this.$slots.offset ||
|
||||
this.title ||
|
||||
this.text
|
||||
},
|
||||
styles() {
|
||||
if (!this.hasOffset) return null
|
||||
|
||||
return {
|
||||
marginBottom: `${this.offset*3}px`,
|
||||
marginTop: `${this.offset * 2}px`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
hasOffset () {
|
||||
return this.$slots.header ||
|
||||
this.$slots.offset ||
|
||||
this.title ||
|
||||
this.text
|
||||
},
|
||||
styles () {
|
||||
if (!this.hasOffset) return null
|
||||
|
||||
return {
|
||||
marginBottom: `${this.offset}px`,
|
||||
marginTop: `${this.offset * 2}px`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.v-card--material {
|
||||
&__header {
|
||||
&.v-card {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.card-container{
|
||||
border-radius: 10px !important;
|
||||
.v-card--material {
|
||||
&__header {
|
||||
&.v-card {
|
||||
border-radius: 10px;
|
||||
padding: 12px 30px !important;
|
||||
margin-left: 25px;
|
||||
margin-right: 25px;
|
||||
.title {
|
||||
font-size : 20px !important;
|
||||
font-family : 'Montserrat-Light' !important;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
> .v-card__text {
|
||||
padding: 16px 35px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,83 +1,86 @@
|
||||
<template>
|
||||
<v-card :class="color">
|
||||
<v-container>
|
||||
<v-layout row wrap>
|
||||
<v-flex xs12>
|
||||
<v-card-text primary-text :class="aligntext">
|
||||
<div>
|
||||
<div class="headline WM-NoLetterSpacing-7">{{title}}</div>
|
||||
<div class="subheading WM-LightGray-color">{{text}}</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-flex>
|
||||
<!-- <v-flex xs5 :class="alignimg" :style="{'background':'url('+ icon +') no-repeat center center', 'background-size':'contain','height':'100px'}">
|
||||
</v-flex> -->
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-card>
|
||||
<v-card :class="color" class="tile-section">
|
||||
<v-container class="py-1">
|
||||
<v-layout row wrap>
|
||||
<v-flex xs12>
|
||||
<v-card-text primary-text :class="aligntext" class="d-flex align-center">
|
||||
<v-icon v-if="icon" size="20" class="mr-2" style="max-width: 30px;">{{ icon }}</v-icon>
|
||||
<v-img v-if="image" src="image"/>
|
||||
<div>
|
||||
<div class="headline WM-NoLetterSpacing-7" v-if="title" v-html="title"></div>
|
||||
<div class="subheading WM-LightGray-color" v-if="text">{{ text }}</div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-flex>
|
||||
<!-- <v-flex xs5 :class="alignimg" :style="{'background':'url('+ icon +') no-repeat center center', 'background-size':'contain','height':'100px'}">
|
||||
</v-flex> -->
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
bordercolor: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
color : {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
column : {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
aligntext : {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
alignimg : {
|
||||
type: String,
|
||||
default: () => ''
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
bordercolor: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
image: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
column: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
aligntext: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
alignimg: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
}
|
||||
computed: {}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.headline {
|
||||
font-size : 30px !important;
|
||||
text-transform: uppercase !important;
|
||||
font-family : 'Montserrat-Bold' !important;
|
||||
font-size: 22px !important;
|
||||
text-transform: uppercase !important;
|
||||
font-family: 'Montserrat-Regular' !important;
|
||||
}
|
||||
@media screen and (max-width:1536px){
|
||||
.headline {
|
||||
font-size : 22px !important;
|
||||
letter-spacing: 2px !important;
|
||||
}
|
||||
.subheading {
|
||||
font-size : 14px !important;
|
||||
}
|
||||
|
||||
.subheading {
|
||||
font-size: 14px !important;
|
||||
color: #7b7b7b;
|
||||
font-family: 'Montserrat-Regular' !important;
|
||||
|
||||
}
|
||||
|
||||
.tile-section {
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,9 +1,5 @@
|
||||
<template>
|
||||
<material-card
|
||||
v-bind="$attrs"
|
||||
class="v-card--material-chart"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<material-card v-bind="$attrs" class="v-card--material-chart" v-on="$listeners">
|
||||
<chartist
|
||||
slot="header"
|
||||
:data="data"
|
||||
@@ -11,15 +7,9 @@
|
||||
:options="options"
|
||||
:ratio="ratio"
|
||||
:responsive-options="responsiveOptions"
|
||||
:type="type"
|
||||
/>
|
||||
|
||||
:type="type"/>
|
||||
<slot />
|
||||
|
||||
<slot
|
||||
slot="actions"
|
||||
name="actions"
|
||||
/>
|
||||
<slot slot="actions" name="actions"/>
|
||||
</material-card>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -4,8 +4,7 @@
|
||||
:class="[`elevation-${elevation}`]"
|
||||
:value="value"
|
||||
class="v-alert--notification"
|
||||
v-on="$listeners"
|
||||
>
|
||||
v-on="$listeners">
|
||||
<slot />
|
||||
</v-alert>
|
||||
</template>
|
||||
|
||||
@@ -1,46 +1,20 @@
|
||||
<template>
|
||||
<material-card
|
||||
v-bind="$attrs"
|
||||
class="v-card--material-stats"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<material-card v-bind="$attrs" class="v-card--material-stats" v-on="$listeners">
|
||||
<v-card
|
||||
slot="offset"
|
||||
:class="`elevation-${elevation}`"
|
||||
:color="color"
|
||||
class="pa-4"
|
||||
dark
|
||||
>
|
||||
<v-icon
|
||||
size="40"
|
||||
>
|
||||
{{ icon }}
|
||||
</v-icon>
|
||||
dark>
|
||||
<v-icon size="40">{{ icon }}</v-icon>
|
||||
</v-card>
|
||||
<div class="text-xs-right">
|
||||
<p
|
||||
class="category grey--text font-weight-light"
|
||||
v-text="title"
|
||||
/>
|
||||
<h3
|
||||
class="title display-1 font-weight-light">
|
||||
{{ value }} <small>{{ smallValue }}</small>
|
||||
</h3>
|
||||
<p class="category grey--text font-weight-light" v-text="title"/>
|
||||
<h3 class="title display-1 font-weight-light">{{ value }} <small>{{ smallValue }}</small></h3>
|
||||
</div>
|
||||
|
||||
<template slot="actions">
|
||||
<v-icon
|
||||
:color="subIconColor"
|
||||
size="20"
|
||||
class="mr-2"
|
||||
>
|
||||
{{ subIcon }}
|
||||
</v-icon>
|
||||
<span
|
||||
:class="subTextColor"
|
||||
class="caption font-weight-light"
|
||||
v-text="subText"
|
||||
/>
|
||||
<template slot="actions"><v-icon :color="subIconColor" size="20" class="mr-2">{{ subIcon }}</v-icon>
|
||||
<span :class="subTextColor" class="caption font-weight-light" v-text="subText"/>
|
||||
</template>
|
||||
</material-card>
|
||||
</template>
|
||||
|
||||
@@ -58,13 +58,13 @@
|
||||
<hr class="v-divider theme--light">
|
||||
</v-flex>
|
||||
<v-layout row wrap class="ml-4">
|
||||
<template>
|
||||
<template v-if="data.items.length">
|
||||
<v-expansion-panel class="WM-Panel">
|
||||
<v-expansion-panel-content
|
||||
v-for="(item, key) in data.items" :key="key"
|
||||
>
|
||||
<template v-slot:header>
|
||||
<div class="CSSD-font">{{ key+1 + ": " + item.name }} ({{ item.pivot.count }})</div>
|
||||
<div class="CSSD-font">{{ key+1 + ": " + item.name }} <span v-if="item.pivot">({{ item.pivot.count }})</span></div>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-text>note : {{ item.note }}</v-card-text>
|
||||
@@ -72,6 +72,9 @@
|
||||
</v-expansion-panel-content>
|
||||
</v-expansion-panel>
|
||||
</template>
|
||||
<template v-else>
|
||||
<p class="text-center mt-3" style="width: 100%;"> No Item Has Been Selected</p>
|
||||
</template>
|
||||
|
||||
</v-layout>
|
||||
</v-layout>
|
||||
|
||||
@@ -98,6 +98,9 @@ const urls = {
|
||||
listPackage: function (filter) {
|
||||
return "/Packages" + filter;
|
||||
},
|
||||
listMyPackage: function (filter) {
|
||||
return "/MyPackages" + filter;
|
||||
},
|
||||
showPackage: function (id) {
|
||||
return `/Packages/${id}`;
|
||||
},
|
||||
|
||||
@@ -284,6 +284,14 @@ export default [
|
||||
title:'My Item | CSSD Dashboard',
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/my-Package',
|
||||
name: 'MyPackage',
|
||||
view: 'MyPackage/List',
|
||||
meta:{
|
||||
title:'My Package | CSSD Dashboard',
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/tickets',
|
||||
name: 'Tickets',
|
||||
|
||||
@@ -106,6 +106,9 @@ h3.CSSD-font {
|
||||
border-left: 3px solid;
|
||||
}
|
||||
|
||||
.WM-LightGray-BG {
|
||||
background-color: #eee !important;
|
||||
}
|
||||
.WM-OrangeGradient-BG {
|
||||
background: linear-gradient(-245.99599235188236deg, rgba(252, 184, 162, 1) -0.3020833333333286%, rgba(255, 236, 210, 1) 93.03125%);
|
||||
}
|
||||
|
||||
+140
-34
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-container fluid class="dashboard">
|
||||
|
||||
<material-card class="" v-if="$hasRole('Admin')" color="black" title="Admin" text="">
|
||||
<material-card class="" v-if="$hasRole('Admin')" color="black" title="Admin Dashboard" text="">
|
||||
<v-layout row wrap>
|
||||
<template v-for="(AdminCard, Key ) in AdminCards">
|
||||
<v-flex v-if="!AdminCard.role || $hasRole(AdminCard.role)" :class="[AdminCard.column, 'pa-2']"
|
||||
:key="Key">
|
||||
<router-link :to="AdminCard.route">
|
||||
<router-link :to="AdminCard.route" style="height: 100%;display: grid;">
|
||||
<material-cards :title="AdminCard.title" :icon="AdminCard.icon" :color="AdminCard.color"
|
||||
:text="AdminCard.text" :aligntext="AdminCard.aligntext"
|
||||
:alignimg="AdminCard.alignimg"/>
|
||||
@@ -17,13 +17,13 @@
|
||||
</v-layout>
|
||||
</material-card>
|
||||
|
||||
<material-card v-if="$hasRole('Admin|Supervisor')" color="black" title="Supervisor" text="">
|
||||
<material-card v-if="$hasRole('Admin|Supervisor')" color="black" title="Supervisor Dashboard" text="">
|
||||
<v-layout row wrap>
|
||||
<template v-for="(SupervisorCard, Key ) in SupervisorCards">
|
||||
<v-flex v-if="!SupervisorCard.role || $hasRole(SupervisorCard.role)"
|
||||
:class="[SupervisorCard.column, 'pa-2']"
|
||||
:key="Key">
|
||||
<router-link :to="SupervisorCard.route">
|
||||
<router-link :to="SupervisorCard.route" style="height: 100%;display:grid;">
|
||||
<material-cards :title="SupervisorCard.title" :icon="SupervisorCard.icon"
|
||||
:color="SupervisorCard.color"
|
||||
:text="SupervisorCard.text" :aligntext="SupervisorCard.aligntext"
|
||||
@@ -35,12 +35,12 @@
|
||||
</v-layout>
|
||||
</material-card>
|
||||
|
||||
<material-card v-if="$hasRole('Admin|Supervisor|User')" color="black" title="User" text="">
|
||||
<material-card v-if="$hasRole('Admin|Supervisor|User')" color="black" title="User Dashboard" text="">
|
||||
<v-layout row wrap>
|
||||
<template v-for="(UsersCard, Key ) in UsersCards">
|
||||
<v-flex v-if="!UsersCard.role || $hasRole(UsersCard.role)" :class="[UsersCard.column, 'pa-2']"
|
||||
:key="Key">
|
||||
<router-link :to="UsersCard.route">
|
||||
<router-link :to="UsersCard.route" style="height: 100%;display:grid;">
|
||||
<material-cards :title="UsersCard.title" :icon="UsersCard.icon" :color="UsersCard.color"
|
||||
:text="UsersCard.text" :aligntext="UsersCard.aligntext"
|
||||
:alignimg="UsersCard.alignimg"/>
|
||||
@@ -63,34 +63,34 @@ export default {
|
||||
{
|
||||
title: 'Manage Users',
|
||||
text: 'You can Manage the users information',
|
||||
icon: '/img/Static/Dashboard/manageusers.png',
|
||||
color: 'WM-LightGreenGradient-BG',
|
||||
// image: '/img/Static/Dashboard/manageusers.png',
|
||||
color: 'WM-LightGray-BG',
|
||||
route: {name: 'ManageUsers'},
|
||||
aligntext: 'text-md-left',
|
||||
alignimg: 'text-md-left',
|
||||
column: 'xs12 md12 sm12',
|
||||
column: 'xs12 md6 sm6',
|
||||
role: 'Admin|Supervisor'
|
||||
},
|
||||
{
|
||||
title: 'Manage Medical Center',
|
||||
text: 'You can edit the medical center information',
|
||||
icon: '/img/Static/Dashboard/settings.png',
|
||||
color: 'WM-MuskGradient-BG',
|
||||
// image: '/img/Static/Dashboard/settings.png',
|
||||
color: 'WM-LightGray-BG',
|
||||
route: {name: 'ManageMedicalCenter'},
|
||||
aligntext: 'text-md-left',
|
||||
alignimg: 'text-md-right',
|
||||
column: 'xs12 md7 sm7',
|
||||
column: 'xs12 md6 sm6',
|
||||
role: 'Admin'
|
||||
},
|
||||
{
|
||||
title: 'List Test Type',
|
||||
text: 'You can simply add your test type',
|
||||
icon: '/img/Static/Dashboard/result.png',
|
||||
color: 'WM-GreyGradient-BG',
|
||||
// image: '/img/Static/Dashboard/result.png',
|
||||
color: 'WM-LightGray-BG',
|
||||
route: {name: 'ListTestType'},
|
||||
aligntext: 'text-md-left',
|
||||
alignimg: 'text-md-ce',
|
||||
column: 'xs12 md5 sm5',
|
||||
column: 'xs12 md12 sm12',
|
||||
role: 'Admin'
|
||||
}
|
||||
],
|
||||
@@ -98,23 +98,23 @@ export default {
|
||||
{
|
||||
title: 'Manage Users',
|
||||
text: 'You can Manage the users information',
|
||||
icon: '/img/Static/Dashboard/manageusers.png',
|
||||
color: 'WM-LightGreenGradient-BG',
|
||||
// image: '/img/Static/Dashboard/manageusers.png',
|
||||
color: 'WM-LightGray-BG',
|
||||
route: {name: 'ManageUsers'},
|
||||
aligntext: 'text-md-left',
|
||||
alignimg: 'text-md-left',
|
||||
column: 'xs12 md12 sm12',
|
||||
column: 'xs12 md6 sm6',
|
||||
role: 'Admin|Supervisor'
|
||||
},
|
||||
{
|
||||
title: 'Test to Verify',
|
||||
text: 'You can simply verify your own medical center test result in this section of website',
|
||||
icon: '/img/Static/Dashboard/verify.png',
|
||||
color: 'WM-PinkGradient-BG',
|
||||
// image: '/img/Static/Dashboard/verify.png',
|
||||
color: 'WM-LightGray-BG',
|
||||
route: {name: 'NotVerifyTestResult'},
|
||||
aligntext: 'text-md-left',
|
||||
alignimg: 'text-md-left',
|
||||
column: 'xs12 md12 sm12',
|
||||
column: 'xs12 md6 sm6',
|
||||
role: 'Admin|Supervisor'
|
||||
},
|
||||
],
|
||||
@@ -122,34 +122,141 @@ export default {
|
||||
{
|
||||
title: 'My Info',
|
||||
text: 'You can easily edit your registration information',
|
||||
icon: '/img/Static/Dashboard/info.png',
|
||||
color: 'WM-OrangeGradient-BG',
|
||||
// image: '/img/Static/Dashboard/info.png',
|
||||
color: 'WM-LightGray-BG',
|
||||
route: {name: 'MyInfo'},
|
||||
aligntext: 'text-md-left',
|
||||
alignimg: 'text-md-right',
|
||||
column: 'xs12 md6 sm6',
|
||||
column: 'xs12 md12 sm12',
|
||||
role: 'Admin|Supervisor|User'
|
||||
},
|
||||
{
|
||||
title: 'All Test Result',
|
||||
text: 'You can see all user tests and own tests',
|
||||
icon: '/img/Static/Dashboard/alltest.png',
|
||||
color: 'WM-GreenGradient-BG',
|
||||
// image: '/img/Static/Dashboard/alltest.png',
|
||||
color: 'WM-LightGray-BG',
|
||||
route: {name: 'AllResultTest'},
|
||||
aligntext: 'text-md-left',
|
||||
alignimg: 'text-md-right',
|
||||
column: 'xs12 md6 sm6',
|
||||
column: 'xs12 md8 sm8',
|
||||
role: 'Admin|Supervisor|User'
|
||||
},
|
||||
{
|
||||
title: 'Add a Test Result',
|
||||
text: 'You can add the test result',
|
||||
icon: '/img/Static/Dashboard/addtest.png',
|
||||
color: 'WM-YellowGradient-BG',
|
||||
title: `<span>Add A </span><br/><span>Test Result</span>`,
|
||||
icon: 'fas fa-plus',
|
||||
color: 'black text-white',
|
||||
route: {name: 'SubmitTestResult'},
|
||||
aligntext: 'text-md-left',
|
||||
alignimg: 'text-md-left',
|
||||
column: 'xs12 md12 sm12',
|
||||
column: 'xs12 md4 sm4',
|
||||
role: 'Admin|Supervisor|User'
|
||||
},
|
||||
{
|
||||
title: 'MY Items',
|
||||
text: 'items that you posses',
|
||||
// image: '/img/Static/Dashboard/alltest.png',
|
||||
color: 'WM-LightGray-BG',
|
||||
route: {name: 'MyItem'},
|
||||
aligntext: 'text-md-left',
|
||||
alignimg: 'text-md-right',
|
||||
column: 'xs12 md4 sm4',
|
||||
role: 'Admin|Supervisor|User'
|
||||
},
|
||||
{
|
||||
title: 'All Items',
|
||||
text: 'all existing items in your medical center ',
|
||||
// image: '/img/Static/Dashboard/alltest.png',
|
||||
color: 'WM-LightGray-BG',
|
||||
route: {name: 'AllItem'},
|
||||
aligntext: 'text-md-left',
|
||||
alignimg: 'text-md-right',
|
||||
column: 'xs12 md4 sm4',
|
||||
role: 'Admin|Supervisor|User'
|
||||
},
|
||||
{
|
||||
title: `<span>Add new </span><br/><span>item</span>`,
|
||||
icon: 'fas fa-plus',
|
||||
color: 'blue text-white',
|
||||
route: {name: 'AddItem'},
|
||||
aligntext: 'text-md-left',
|
||||
alignimg: 'text-md-left',
|
||||
column: 'xs12 md4 sm4',
|
||||
role: 'Admin|Supervisor|User'
|
||||
},
|
||||
{
|
||||
title: 'MY package',
|
||||
text: 'packages that you posses',
|
||||
// image: '/img/Static/Dashboard/alltest.png',
|
||||
color: 'WM-LightGray-BG',
|
||||
route: {name: 'MyItem'},
|
||||
aligntext: 'text-md-left',
|
||||
alignimg: 'text-md-right',
|
||||
column: 'xs12 md4 sm4',
|
||||
role: 'Admin|Supervisor|User'
|
||||
},
|
||||
{
|
||||
title: 'All package',
|
||||
text: 'all existing packages in your medical center ',
|
||||
// image: '/img/Static/Dashboard/alltest.png',
|
||||
color: 'WM-LightGray-BG',
|
||||
route: {name: 'AllItem'},
|
||||
aligntext: 'text-md-left',
|
||||
alignimg: 'text-md-right',
|
||||
column: 'xs12 md4 sm4',
|
||||
role: 'Admin|Supervisor|User'
|
||||
},
|
||||
{
|
||||
title: `<span>Add new </span><br/><span>Package</span>`,
|
||||
icon: 'fas fa-plus',
|
||||
color: 'cyan text-white',
|
||||
route: {name: 'AddPackage'},
|
||||
aligntext: 'text-md-left',
|
||||
alignimg: 'text-md-left',
|
||||
column: 'xs12 md4 sm4',
|
||||
role: 'Admin|Supervisor|User'
|
||||
},
|
||||
|
||||
{
|
||||
title: 'All labels',
|
||||
text: 'All active labels in your medical center',
|
||||
// image: '/img/Static/Dashboard/alltest.png',
|
||||
color: 'WM-LightGray-BG',
|
||||
route: {name: 'AllResultTest'},
|
||||
aligntext: 'text-md-left',
|
||||
alignimg: 'text-md-right',
|
||||
column: 'xs12 md8 sm8',
|
||||
role: 'Admin|Supervisor|User'
|
||||
},
|
||||
{
|
||||
title: `<span>Add new </span><br/><span> label</span>`,
|
||||
icon: 'fas fa-plus',
|
||||
color: 'purple text-white',
|
||||
route: {name: 'AddLabel'},
|
||||
aligntext: 'text-md-left',
|
||||
alignimg: 'text-md-left',
|
||||
column: 'xs12 md4 sm4',
|
||||
role: 'Admin|Supervisor|User'
|
||||
},
|
||||
|
||||
{
|
||||
title: 'All cycles',
|
||||
text: 'All active cycles in your medical center',
|
||||
// image: '/img/Static/Dashboard/alltest.png',
|
||||
color: 'WM-LightGray-BG',
|
||||
route: {name: 'AllResultTest'},
|
||||
aligntext: 'text-md-left',
|
||||
alignimg: 'text-md-right',
|
||||
column: 'xs12 md8 sm8',
|
||||
role: 'Admin|Supervisor|User'
|
||||
},
|
||||
{
|
||||
title: `<span>Add new </span><br/><span>cycle</span>`,
|
||||
icon: 'fas fa-plus',
|
||||
color: 'red text-white',
|
||||
route: {name: 'AddCycle'},
|
||||
aligntext: 'text-md-left',
|
||||
alignimg: 'text-md-left',
|
||||
column: 'xs12 md4 sm4',
|
||||
role: 'Admin|Supervisor|User'
|
||||
},
|
||||
],
|
||||
@@ -157,4 +264,3 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss"></style>
|
||||
|
||||
@@ -128,10 +128,10 @@
|
||||
</v-data-table>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-divider></v-divider>
|
||||
<v-divider/>
|
||||
<div class="text-xs-center" v-if="lastPage > 1">
|
||||
<v-pagination color="black" v-model="currentPage" :length="lastPage"
|
||||
:total-visible="6"></v-pagination>
|
||||
:total-visible="6"/>
|
||||
</div>
|
||||
<v-layout row wrap align-center justify-center class="mt-3">
|
||||
<router-link to="/dashboard">
|
||||
|
||||
+238
-45
@@ -2,30 +2,108 @@
|
||||
<div class>
|
||||
<v-container fluid>
|
||||
<material-card class color="black" title="My Items" text>
|
||||
<v-tabs centered color="cyan" dark icons-and-text>
|
||||
<v-tabs-slider color="yellow"/>
|
||||
|
||||
<v-tab href="#tab-1">
|
||||
My Items
|
||||
<v-icon>fa-clone</v-icon>
|
||||
</v-tab>
|
||||
|
||||
<v-tab href="#tab-2">
|
||||
My Requests
|
||||
<v-icon>fa-paper-plane</v-icon>
|
||||
</v-tab>
|
||||
|
||||
<v-tab-item value="tab-1">
|
||||
<v-card flat>
|
||||
<MyItemsList />
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
<v-tab-item value="tab-2">
|
||||
<v-card flat>
|
||||
<MyRequestsList />
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
</v-tabs>
|
||||
<v-layout align-center wrap class="my-3 px-5">
|
||||
<v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter">
|
||||
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
|
||||
<v-text-field class="py-3 pr-3" v-model="filter.item_id" label="Item ID" color="black"/>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl-3">
|
||||
<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-flex>
|
||||
<v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl-3" v-if="$hasRole('Admin')">
|
||||
<v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"/>
|
||||
<v-autocomplete class="py-3 pr-3" v-model="filter.medical_center_id" item-text="name" item-value="id"
|
||||
label="Hospital" color="black" :items="medicalCenters" :clearable="true"/>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl-3">
|
||||
<v-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-flex>
|
||||
<v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl3">
|
||||
<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-flex>
|
||||
<v-spacer/>
|
||||
<v-flex class xs12 sm6 md6 lg2 xl1>
|
||||
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="load()">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
|
||||
<span class="white--text">Filter</span>
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
|
||||
<router-link :to="{ name: 'AddItem' }">
|
||||
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
|
||||
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
|
||||
<span class="black--text">Add</span>
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout class="px-4 my-3">
|
||||
<v-divider/>
|
||||
</v-layout>
|
||||
<v-layout align-center wrap class="my-3 px-5">
|
||||
<v-flex md12>
|
||||
<v-data-table :headers="headers" :items="items" hide-actions>
|
||||
<template slot="headerCell" slot-scope="{ header }">
|
||||
<span class="subheading font-weight-light text-white text--darken-3" v-text="header.text"/>
|
||||
</template>
|
||||
<template slot="items" slot-scope="{ item }">
|
||||
<td class="title font-weight-light">{{ item.id }}</td>
|
||||
<!-- <td class="title font-weight-light">{{ item.unique_id }}</td> -->
|
||||
<td class="title font-weight-light">{{ item.name }}</td>
|
||||
<td class="title font-weight-light">{{ item.udi }}</td>
|
||||
<td class="title font-weight-light">{{ item.size }}</td>
|
||||
<td class="text-xs-right FlexBtn Height-MD-60 justify-self-end">
|
||||
<v-tooltip bottom open-on-hover>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn v-bind="attrs" v-on="on" color="cyan" class="mr-2" @click="show(item.id)">
|
||||
<v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
|
||||
<span>Show</span>
|
||||
</v-btn>
|
||||
</template>
|
||||
<span>Show</span>
|
||||
</v-tooltip>
|
||||
<v-tooltip bottom open-on-hover>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn class="mr-2" v-bind="attrs" v-on="on" color="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>
|
||||
<v-tooltip bottom open-on-hover>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn v-bind="attrs" v-on="on" color="red" class="WM-ActionButton mr-2"
|
||||
@click="remove(item.id)" v-if="$hasRole('Admin|Supervisor')">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
|
||||
<span>Remove</span>
|
||||
</v-btn>
|
||||
</template>
|
||||
<span>Remove</span>
|
||||
</v-tooltip>
|
||||
</td>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-divider/>
|
||||
<div class="text-xs-center" v-if="lastPage > 1">
|
||||
<v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"/>
|
||||
</div>
|
||||
<v-layout row wrap align-center justify-center class="mt-3">
|
||||
<router-link to="/dashboard">
|
||||
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
|
||||
@@ -38,28 +116,143 @@
|
||||
</v-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MyItemsList from "./Tabs/MyItems.vue";
|
||||
import MyRequestsList from "./Tabs/MyRequests.vue";
|
||||
import {ApiService} from "@/services";
|
||||
import {urls} from "@/config/urls";
|
||||
import {mapMutations, mapGetters} from "vuex";
|
||||
import toast from "@/services/global/toast.service";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MyItemsList,
|
||||
MyRequestsList,
|
||||
data: () => ({
|
||||
headers: [
|
||||
// {
|
||||
// sortable: true,
|
||||
// text: "ID",
|
||||
// value: "id"
|
||||
// },
|
||||
{
|
||||
sortable: true,
|
||||
text: "Item ID",
|
||||
value: "id"
|
||||
},
|
||||
{
|
||||
sortable: false,
|
||||
text: "Name",
|
||||
value: "name"
|
||||
},
|
||||
{
|
||||
sortable: false,
|
||||
text: "UDI",
|
||||
value: "udi"
|
||||
},
|
||||
{
|
||||
sortable: false,
|
||||
text: "Size",
|
||||
value: "size"
|
||||
},
|
||||
{
|
||||
sortable: false,
|
||||
text: "Action",
|
||||
value: "action",
|
||||
align: "left"
|
||||
}
|
||||
],
|
||||
filter: {
|
||||
name: '',
|
||||
size: '',
|
||||
item_id: '',
|
||||
medical_center_id: ''
|
||||
},
|
||||
items: [],
|
||||
currentPage: 1,
|
||||
lastPage: 1,
|
||||
medicalCenters: []
|
||||
|
||||
}),
|
||||
created() {
|
||||
this.load();
|
||||
},
|
||||
methods: {
|
||||
...mapMutations("modal", ["changeCurrentModal"]),
|
||||
async load(page = 1) {
|
||||
let filter = '?';
|
||||
for (const key in this.filter) {
|
||||
if (this.filter.hasOwnProperty(key)) {
|
||||
filter += `${key}=${this.filter[key]}&`;
|
||||
}
|
||||
}
|
||||
filter += (page) ? `page=${page}` : `page=1`;
|
||||
const result = await ApiService.get(urls.listMyItem(filter));
|
||||
if (result && result.status == 200) {
|
||||
this.items = result.data.data;
|
||||
this.currentPage = result.data.data.current_page;
|
||||
this.lastPage = result.data.data.last_page;
|
||||
}
|
||||
},
|
||||
async generateBarcode(item, type = null) {
|
||||
let code = item.udi;
|
||||
if (code) {
|
||||
const result = await ApiService.post(urls.Barcode(code, type));
|
||||
if (result && result.status == 200) {
|
||||
this.changeCurrentModal({
|
||||
modal: "modal-barcode-barcode",
|
||||
properties: {result, item},
|
||||
});
|
||||
}
|
||||
} else {
|
||||
toast.error('please first set UDI');
|
||||
}
|
||||
},
|
||||
async show(testResultId) {
|
||||
const result = await ApiService.get(urls.showItem(testResultId));
|
||||
if (result && result.status == 200) {
|
||||
this.changeCurrentModal({
|
||||
modal: "modal-item-show",
|
||||
properties: {result},
|
||||
});
|
||||
}
|
||||
},
|
||||
async changeStatus(id) {
|
||||
const result = await ApiService.post(
|
||||
urls.changeItemStatus(id)
|
||||
);
|
||||
if (result) {
|
||||
for (const key in this.items) {
|
||||
if (
|
||||
this.items.hasOwnProperty(key) &&
|
||||
this.items[key].id == id
|
||||
) {
|
||||
this.items[key].status = result.data.data.status;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
async remove(testResultId) {
|
||||
const result = await ApiService.delete(
|
||||
urls.removeItem(testResultId)
|
||||
);
|
||||
if (result && result.status == 200) {
|
||||
for (const key in this.items) {
|
||||
if (
|
||||
this.items.hasOwnProperty(key) &&
|
||||
this.items[key].id == testResultId
|
||||
) {
|
||||
this.items.splice(key, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
async transfer(data) {
|
||||
this.changeCurrentModal({
|
||||
modal: "modal-user-list",
|
||||
properties: {data},
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentPage(page) {
|
||||
this.load(page);
|
||||
},
|
||||
}
|
||||
};
|
||||
</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>
|
||||
</script>
|
||||
@@ -1,250 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-layout align-center wrap class="my-3 px-5">
|
||||
<v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter">
|
||||
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
|
||||
<v-text-field class="py-3 pr-3" v-model="filter.item_id" label="Item ID" color="black"/>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl-3">
|
||||
<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-flex>
|
||||
<v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl-3" v-if="$hasRole('Admin')">
|
||||
<v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"/>
|
||||
<v-autocomplete class="py-3 pr-3" v-model="filter.medical_center_id" item-text="name" item-value="id"
|
||||
label="Hospital" color="black" :items="medicalCenters" :clearable="true"/>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl-3">
|
||||
<v-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-flex>
|
||||
<v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl3">
|
||||
<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-flex>
|
||||
<v-spacer/>
|
||||
<v-flex class xs12 sm6 md6 lg2 xl1>
|
||||
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="load()">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
|
||||
<span class="white--text">Filter</span>
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
|
||||
<router-link :to="{ name: 'AddItem' }">
|
||||
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
|
||||
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
|
||||
<span class="black--text">Add</span>
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout class="px-4 my-3">
|
||||
<v-divider/>
|
||||
</v-layout>
|
||||
<v-layout align-center wrap class="my-3 px-5">
|
||||
<v-flex md12>
|
||||
<v-data-table :headers="headers" :items="items" hide-actions>
|
||||
<template slot="headerCell" slot-scope="{ header }">
|
||||
<span class="subheading font-weight-light text-white text--darken-3" v-text="header.text"/>
|
||||
</template>
|
||||
<template slot="items" slot-scope="{ item }">
|
||||
<td class="title font-weight-light">{{ item.id }}</td>
|
||||
<!-- <td class="title font-weight-light">{{ item.unique_id }}</td> -->
|
||||
<td class="title font-weight-light">{{ item.name }}</td>
|
||||
<td class="title font-weight-light">{{ item.udi }}</td>
|
||||
<td class="title font-weight-light">{{ item.size }}</td>
|
||||
<td class="text-xs-right FlexBtn Height-MD-60 justify-self-end">
|
||||
<v-tooltip bottom open-on-hover>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn v-bind="attrs" v-on="on" color="cyan" class="mr-2" @click="show(item.id)">
|
||||
<v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
|
||||
<span>Show</span>
|
||||
</v-btn>
|
||||
</template>
|
||||
<span>Show</span>
|
||||
</v-tooltip>
|
||||
<v-tooltip bottom open-on-hover>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn class="mr-2" v-bind="attrs" v-on="on" color="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>
|
||||
<v-tooltip bottom open-on-hover>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn v-bind="attrs" v-on="on" color="red" class="WM-ActionButton mr-2"
|
||||
@click="remove(item.id)">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
|
||||
<span>Remove</span>
|
||||
</v-btn>
|
||||
</template>
|
||||
<span>Remove</span>
|
||||
</v-tooltip>
|
||||
</td>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-divider/>
|
||||
<div class="text-xs-center" v-if="lastPage > 1">
|
||||
<v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {ApiService} from "@/services";
|
||||
import {urls} from "@/config/urls";
|
||||
import {mapMutations, mapGetters} from "vuex";
|
||||
import toast from "@/services/global/toast.service";
|
||||
|
||||
export default {
|
||||
data: () => ({
|
||||
headers: [
|
||||
// {
|
||||
// sortable: true,
|
||||
// text: "ID",
|
||||
// value: "id"
|
||||
// },
|
||||
{
|
||||
sortable: true,
|
||||
text: "Item ID",
|
||||
value: "id"
|
||||
},
|
||||
{
|
||||
sortable: false,
|
||||
text: "Name",
|
||||
value: "name"
|
||||
},
|
||||
{
|
||||
sortable: false,
|
||||
text: "UDI",
|
||||
value: "udi"
|
||||
},
|
||||
{
|
||||
sortable: false,
|
||||
text: "Size",
|
||||
value: "size"
|
||||
},
|
||||
{
|
||||
sortable: false,
|
||||
text: "Action",
|
||||
value: "action",
|
||||
align: "left"
|
||||
}
|
||||
],
|
||||
filter: {
|
||||
name: '',
|
||||
size: '',
|
||||
item_id: '',
|
||||
medical_center_id: ''
|
||||
},
|
||||
items: [],
|
||||
currentPage: 1,
|
||||
lastPage: 1,
|
||||
medicalCenters: []
|
||||
|
||||
}),
|
||||
created() {
|
||||
this.load();
|
||||
},
|
||||
methods: {
|
||||
...mapMutations("modal", ["changeCurrentModal"]),
|
||||
async load(page = 1) {
|
||||
let filter = '?';
|
||||
for (const key in this.filter) {
|
||||
if (this.filter.hasOwnProperty(key)) {
|
||||
filter += `${key}=${this.filter[key]}&`;
|
||||
}
|
||||
}
|
||||
filter += (page) ? `page=${page}` : `page=1`;
|
||||
const result = await ApiService.get(urls.listMyItem(filter));
|
||||
if (result && result.status == 200) {
|
||||
this.items = result.data.data;
|
||||
this.currentPage = result.data.data.current_page;
|
||||
this.lastPage = result.data.data.last_page;
|
||||
}
|
||||
},
|
||||
async generateBarcode(item, type = null) {
|
||||
let code = item.udi;
|
||||
if (code) {
|
||||
const result = await ApiService.post(urls.Barcode(code, type));
|
||||
if (result && result.status == 200) {
|
||||
this.changeCurrentModal({
|
||||
modal: "modal-barcode-barcode",
|
||||
properties: {result, item},
|
||||
});
|
||||
}
|
||||
} else {
|
||||
toast.error('please first set UDI');
|
||||
}
|
||||
},
|
||||
async show(testResultId) {
|
||||
const result = await ApiService.get(urls.showItem(testResultId));
|
||||
if (result && result.status == 200) {
|
||||
this.changeCurrentModal({
|
||||
modal: "modal-item-show",
|
||||
properties: {result},
|
||||
});
|
||||
}
|
||||
},
|
||||
async changeStatus(id) {
|
||||
const result = await ApiService.post(
|
||||
urls.changeItemStatus(id)
|
||||
);
|
||||
if (result) {
|
||||
for (const key in this.items) {
|
||||
if (
|
||||
this.items.hasOwnProperty(key) &&
|
||||
this.items[key].id == id
|
||||
) {
|
||||
this.items[key].status = result.data.data.status;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
async remove(testResultId) {
|
||||
const result = await ApiService.delete(
|
||||
urls.removeItem(testResultId)
|
||||
);
|
||||
if (result && result.status == 200) {
|
||||
for (const key in this.items) {
|
||||
if (
|
||||
this.items.hasOwnProperty(key) &&
|
||||
this.items[key].id == testResultId
|
||||
) {
|
||||
this.items.splice(key, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
async transfer(data) {
|
||||
this.changeCurrentModal({
|
||||
modal: "modal-user-list",
|
||||
properties: {data},
|
||||
});
|
||||
// const result = await ApiService.post(urls.transferItem(id));
|
||||
// if (result && result.status == 200) {
|
||||
// console.log(result , 'transfer - result')
|
||||
// }
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentPage(page) {
|
||||
this.load(page);
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,209 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-layout align-center wrap class="my-3 px-5">
|
||||
<v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter">
|
||||
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
|
||||
<v-text-field class="py-3 pr-3" v-model="filter.request_id" label="Request ID" color="black"/>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl-3">
|
||||
<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-flex>
|
||||
<v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl-3" v-if="$hasRole('Admin')">
|
||||
<v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"/>
|
||||
<v-autocomplete class="py-3 pr-3" v-model="filter.medical_center_id" item-text="name" item-value="id"
|
||||
label="Hospital" color="black" :items="medicalCenters" :clearable="true"/>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl-3">
|
||||
<v-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-flex>
|
||||
<v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl3">
|
||||
<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-flex>
|
||||
<v-spacer/>
|
||||
<v-flex class xs12 sm6 md6 lg2 xl1>
|
||||
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="load()">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
|
||||
<span class="white--text">Filter</span>
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
|
||||
<router-link :to="{ name: 'AddItem' }">
|
||||
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
|
||||
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
|
||||
<span class="black--text">Add</span>
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout class="px-4 my-3">
|
||||
<v-divider/>
|
||||
</v-layout>
|
||||
<v-layout align-center wrap class="my-3 px-5">
|
||||
<v-flex md12>
|
||||
<v-data-table :headers="headers" :items="items" hide-actions>
|
||||
<template slot="headerCell" slot-scope="{ header }">
|
||||
<span class="subheading font-weight-light text-white text--darken-3" v-text="header.text"/>
|
||||
</template>
|
||||
<template slot="items" slot-scope="{ item }">
|
||||
<td class="title font-weight-light">{{ item.id }}</td>
|
||||
<!-- <td class="title font-weight-light">{{ item.unique_id }}</td> -->
|
||||
<td class="title font-weight-light">{{ item.name }}</td>
|
||||
<td class="title font-weight-light">{{ item.udi }}</td>
|
||||
<td class="title font-weight-light">{{ item.size }}</td>
|
||||
<td class="text-xs-right FlexBtn Height-MD-60 justify-self-end">
|
||||
<v-tooltip bottom open-on-hover>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn v-bind="attrs" v-on="on" color="cyan" class="mr-2" @click="show(item.id)">
|
||||
<v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
|
||||
<span>Show</span>
|
||||
</v-btn>
|
||||
</template>
|
||||
<span>Show</span>
|
||||
</v-tooltip>
|
||||
<v-tooltip bottom open-on-hover>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn class="mr-2" v-bind="attrs" v-on="on" color="orange darken-1"
|
||||
@click="generateBarcode(item, 'Item')">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-barcode</v-icon>
|
||||
<span class="CSSD-font">Generate Barcode</span>
|
||||
</v-btn>
|
||||
</template>
|
||||
<span>Generate Barcode</span>
|
||||
</v-tooltip>
|
||||
</td>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-divider/>
|
||||
<div class="text-xs-center" v-if="lastPage > 1">
|
||||
<v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {ApiService} from "@/services";
|
||||
import {urls} from "@/config/urls";
|
||||
import {mapMutations, mapGetters} from "vuex";
|
||||
import toast from "@/services/global/toast.service";
|
||||
|
||||
export default {
|
||||
data: () => ({
|
||||
headers: [
|
||||
// {
|
||||
// sortable: true,
|
||||
// text: "ID",
|
||||
// value: "id"
|
||||
// },
|
||||
{
|
||||
sortable: true,
|
||||
text: "Item ID",
|
||||
value: "id"
|
||||
},
|
||||
{
|
||||
sortable: false,
|
||||
text: "Name",
|
||||
value: "name"
|
||||
},
|
||||
{
|
||||
sortable: false,
|
||||
text: "UDI",
|
||||
value: "udi"
|
||||
},
|
||||
{
|
||||
sortable: false,
|
||||
text: "Size",
|
||||
value: "size"
|
||||
},
|
||||
{
|
||||
sortable: false,
|
||||
text: "Action",
|
||||
value: "action",
|
||||
align: "left"
|
||||
}
|
||||
],
|
||||
filter: {
|
||||
name: '',
|
||||
size: '',
|
||||
request_id: '',
|
||||
medical_center_id: ''
|
||||
},
|
||||
items: [],
|
||||
currentPage: 1,
|
||||
lastPage: 1,
|
||||
medicalCenters: []
|
||||
|
||||
}),
|
||||
created() {
|
||||
this.load();
|
||||
},
|
||||
methods: {
|
||||
...mapMutations("modal", ["changeCurrentModal"]),
|
||||
async load(page = 1) {
|
||||
let filter = '?';
|
||||
for (const key in this.filter) {
|
||||
if (this.filter.hasOwnProperty(key)) {
|
||||
filter += `${key}=${this.filter[key]}&`;
|
||||
}
|
||||
}
|
||||
filter += (page) ? `page=${page}` : `page=1`;
|
||||
const result = await ApiService.get(
|
||||
urls.listItem(filter)
|
||||
);
|
||||
if (result && result.status == 200) {
|
||||
this.items = result.data.data;
|
||||
this.currentPage = result.data.data.current_page;
|
||||
this.lastPage = result.data.data.last_page;
|
||||
}
|
||||
},
|
||||
async generateBarcode(item, type = null) {
|
||||
let code = item.udi;
|
||||
if (code) {
|
||||
const result = await ApiService.post(urls.Barcode(code, type));
|
||||
if (result && result.status == 200) {
|
||||
this.changeCurrentModal({
|
||||
modal: "modal-barcode-barcode",
|
||||
properties: {result, item},
|
||||
});
|
||||
}
|
||||
} else {
|
||||
toast.error('please first set UDI');
|
||||
}
|
||||
},
|
||||
async show(testResultId) {
|
||||
const result = await ApiService.get(
|
||||
urls.showItem(testResultId)
|
||||
);
|
||||
if (result && result.status == 200) {
|
||||
this.changeCurrentModal({
|
||||
modal: "modal-item-show",
|
||||
properties: {result},
|
||||
});
|
||||
}
|
||||
},
|
||||
async changeStatus(id) {
|
||||
const result = await ApiService.post(
|
||||
urls.changeItemStatus(id)
|
||||
);
|
||||
if (result) {
|
||||
for (const key in this.items) {
|
||||
if (
|
||||
this.items.hasOwnProperty(key) &&
|
||||
this.items[key].id == id
|
||||
) {
|
||||
this.items[key].status = result.data.data.status;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
currentPage(page) {
|
||||
this.load(page);
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,310 @@
|
||||
<template>
|
||||
<div class>
|
||||
<v-container fluid>
|
||||
<material-card class color="black" title="My Packages" text>
|
||||
<v-layout align-center wrap class="mt-3 px-5">
|
||||
<v-flex xs12 sm6 md4 lg3 xl2 class="WM-FlexCenter">
|
||||
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
|
||||
<v-text-field class="py-3 pr-3" v-model="filter.package_id" label="Package ID"
|
||||
color="black"/>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm6 md4 lg3 xl2 class="WM-FlexCenter pl-3">
|
||||
<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-flex>
|
||||
<v-flex xs12 sm6 md4 lg3 xl2 class="WM-FlexCenter pl-3" v-if="$hasRole('Admin')">
|
||||
<v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"/>
|
||||
<v-autocomplete class="py-3 pr-3" v-model="filter.medical_center_id" item-text="name"
|
||||
item-value="id" label="Hospital" color="black" :items="medicalCenters"
|
||||
:clearable="true"/>
|
||||
</v-flex>
|
||||
<v-spacer/>
|
||||
<v-flex class xs12 sm6 md6 lg2 xl1>
|
||||
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="load()">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
|
||||
<span class="white--text">Filter</span>
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
|
||||
<router-link :to="{ name: 'AddPackage' }">
|
||||
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
|
||||
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
|
||||
<span class="black--text">Add</span>
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-flex>
|
||||
|
||||
</v-layout>
|
||||
<v-layout class="px-4 my-3">
|
||||
<v-divider/>
|
||||
</v-layout>
|
||||
<v-layout align-center wrap class="my-3 px-5">
|
||||
<v-flex md12>
|
||||
<v-data-table :headers="headers" :items="items" hide-actions>
|
||||
<template slot="headerCell" slot-scope="{ header }">
|
||||
<span class="subheading font-weight-light text-white text--darken-3"
|
||||
v-text="header.text"/>
|
||||
</template>
|
||||
<template slot="items" slot-scope="{ item }">
|
||||
<td class="title font-weight-light">{{ item.id }}</td>
|
||||
<!-- <td class="title font-weight-light">{{ item.unique_id }}</td> -->
|
||||
<td class="title font-weight-light">{{ item.name }}</td>
|
||||
<td class="title font-weight-light">
|
||||
{{ (item.user && item.user.medical_center) ? item.user.medical_center.name : '' }}
|
||||
</td>
|
||||
<td class="title font-weight-light">
|
||||
{{ item.user ? item.user.name : '' | text_20_letter }}
|
||||
</td>
|
||||
<td class="title font-weight-light">{{ item.description }}</td>
|
||||
<td class="title font-weight-light">{{ item.status }}</td>
|
||||
<td class="text-xs-right FlexBtn Height-MD-60 justify-self-end">
|
||||
<v-tooltip bottom open-on-hover v-if="$hasRole('Admin|Supervisor')">
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn :color="!['suspended', 'rejected'].includes(item.status) ? 'red' : 'green'"
|
||||
class="mr-2" @click="changeStatus(item)" v-bind="attrs" v-on="on">
|
||||
<v-icon class="white--text mr-1 caption">
|
||||
fas
|
||||
{{ !['suspended', 'rejected'].includes(item.status) ? 'fa-close' : 'fa-check' }}
|
||||
</v-icon>
|
||||
<span>
|
||||
{{ !['suspended', 'rejected'].includes(item.status) ? 'reject' : 'approve' }}
|
||||
</span>
|
||||
</v-btn>
|
||||
</template>
|
||||
<span>{{ !['suspended', 'rejected'].includes(item.status) ? 'reject' : 'approve' }}</span>
|
||||
</v-tooltip>
|
||||
<v-tooltip bottom open-on-hover>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn v-bind="attrs" v-on="on" color="cyan" class="mr-2"
|
||||
@click="show(item.id)">
|
||||
<v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
|
||||
<span>Show</span>
|
||||
</v-btn>
|
||||
</template>
|
||||
<span>Show</span>
|
||||
</v-tooltip>
|
||||
<v-tooltip bottom open-on-hover>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<router-link class="LinkBtn"
|
||||
v-if="$hasRole('Admin') || item.user_id == $store.state.user.id"
|
||||
:to="{ name: 'EditPackage', params: { package: item.id } }">
|
||||
<v-btn v-bind="attrs" v-on="on" color="orange" class="mr-2">
|
||||
<v-icon class="white--text mr-1 caption">fas fa-pen</v-icon>
|
||||
<span>Edit</span>
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</template>
|
||||
<span>Edit</span>
|
||||
</v-tooltip>
|
||||
<v-tooltip bottom open-on-hover>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn class="mr-2" v-bind="attrs" v-on="on" color="orange darken-1"
|
||||
@click="generateBarcode(item, '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>
|
||||
<v-tooltip bottom open-on-hover>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn v-bind="attrs" v-on="on" color="red" class="WM-ActionButton mr-2"
|
||||
@click="remove(item.id)" v-if="$hasRole('Admin|Supervisor')">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
|
||||
<span>Remove</span>
|
||||
</v-btn>
|
||||
</template>
|
||||
<span>Remove</span>
|
||||
</v-tooltip>
|
||||
</td>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-divider/>
|
||||
<div class="text-xs-center" v-if="lastPage > 1">
|
||||
<v-pagination color="black" v-model="currentPage" :length="lastPage"
|
||||
:total-visible="6"></v-pagination>
|
||||
</div>
|
||||
<v-layout row wrap align-center justify-center class="mt-3">
|
||||
<router-link to="/dashboard">
|
||||
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
|
||||
<v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
|
||||
<span class="black--text">Back</span>
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-layout>
|
||||
</material-card>
|
||||
</v-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ApiService} from "@/services";
|
||||
import {urls} from "@/config/urls";
|
||||
import {mapMutations, mapGetters} from "vuex";
|
||||
import toast from "@/services/global/toast.service";
|
||||
|
||||
export default {
|
||||
data: () => ({
|
||||
headers: [
|
||||
{
|
||||
sortable: true,
|
||||
text: "Package ID",
|
||||
value: "Package ID"
|
||||
},
|
||||
{
|
||||
sortable: true,
|
||||
text: "Name",
|
||||
value: "name"
|
||||
},
|
||||
{
|
||||
sortable: true,
|
||||
text: "Hospital",
|
||||
value: "Hospital"
|
||||
},
|
||||
{
|
||||
sortable: true,
|
||||
text: "Description",
|
||||
value: "description"
|
||||
},
|
||||
{
|
||||
sortable: true,
|
||||
text: "Status",
|
||||
value: "status"
|
||||
},
|
||||
{
|
||||
sortable: false,
|
||||
text: "Action",
|
||||
value: "action",
|
||||
align: "left"
|
||||
}
|
||||
],
|
||||
filter: {
|
||||
name: '',
|
||||
package_id: '',
|
||||
medical_center_id: ''
|
||||
},
|
||||
result: ['Pass', 'Fail'],
|
||||
items: [],
|
||||
currentPage: 1,
|
||||
lastPage: 1,
|
||||
medicalCenters: []
|
||||
}),
|
||||
created() {
|
||||
this.load();
|
||||
},
|
||||
methods: {
|
||||
...mapMutations("modal", ["changeCurrentModal"]),
|
||||
async load(page = 1) {
|
||||
let filter = '?';
|
||||
for (const key in this.filter) {
|
||||
if (this.filter.hasOwnProperty(key)) {
|
||||
filter += `${key}=${this.filter[key]}&`;
|
||||
}
|
||||
}
|
||||
filter += (page) ? `page=${page}` : `page=1`;
|
||||
const result = await ApiService.get(urls.listMyPackage(filter));
|
||||
if (result && result.status == 200) {
|
||||
const {data, meta} = result.data;
|
||||
this.items = data;
|
||||
this.currentPage = meta.current_page;
|
||||
this.lastPage = meta.last_page;
|
||||
}
|
||||
this.loadMedicalCenters();
|
||||
},
|
||||
async show(testResultId) {
|
||||
const result = await ApiService.get(urls.showPackage(testResultId));
|
||||
if (result && result.status == 200) {
|
||||
this.changeCurrentModal({
|
||||
modal: "modal-package-show",
|
||||
properties: {result}
|
||||
});
|
||||
}
|
||||
},
|
||||
async remove(testResultId) {
|
||||
const result = await ApiService.delete(urls.removePackage(testResultId));
|
||||
if (result && result.status == 200) {
|
||||
for (const key in this.items) {
|
||||
if (this.items.hasOwnProperty(key) && this.items[key].id == testResultId) {
|
||||
this.items.splice(key, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
async generateBarcode(item, type) {
|
||||
const code = item.udi;
|
||||
if (code) {
|
||||
const result = await ApiService.post(urls.Barcode(code, type));
|
||||
if (result && result.status == 200) {
|
||||
this.changeCurrentModal({modal: "modal-barcode-barcode", properties: {result}});
|
||||
}
|
||||
} else {
|
||||
toast.error('please first set UDI');
|
||||
}
|
||||
},
|
||||
async changeStatus(item) {
|
||||
const payload = {status: ['suspended', 'rejected'].includes(item.status) ? 'approved' : 'rejected',}
|
||||
const result = await ApiService.post(urls.changePackageStatus(item.id), payload);
|
||||
if (result) {
|
||||
for (const key in this.items) {
|
||||
if (this.items.hasOwnProperty(key) && this.items[key].id == item.id) {
|
||||
this.items[key].status = result.data.data.status;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
async loadMedicalCenters() {
|
||||
const result = await ApiService.get(urls.listFilterItemsTestResult);
|
||||
if (result && result.status == 200) {
|
||||
this.medicalCenters = result.data.data.MedicalCenters;
|
||||
}
|
||||
},
|
||||
async transfer(data) {
|
||||
this.changeCurrentModal({
|
||||
modal: "modal-user-list",
|
||||
properties: {data},
|
||||
});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters("modal", ["getModalResult"])
|
||||
},
|
||||
watch: {
|
||||
currentPage(page) {
|
||||
this.load(page);
|
||||
},
|
||||
getModalResult(testResult) {
|
||||
for (const key in this.items) {
|
||||
if (this.items.hasOwnProperty(key) && this.items[key].id == testResult.id) {
|
||||
this.items[key] = testResult;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</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>
|
||||
@@ -41,7 +41,6 @@
|
||||
<v-flex xs12 md3 sm3 class="WM-FlexCenter WM-DuplicateInput"
|
||||
style="position: relative" v-for="(item, key) in formData.items" :key="key">
|
||||
<div class="Inner">
|
||||
<!-- <v-icon class="fas fa-check mr-2 WM-Margin-B-8"/>-->
|
||||
<v-autocomplete
|
||||
@keydown.enter.native.prevent="duplicateForm(key)"
|
||||
@change="duplicateForm(key)"
|
||||
@@ -174,10 +173,7 @@ export default {
|
||||
async submitForm() {
|
||||
let result;
|
||||
if (this.$route.params.package) {
|
||||
result = await ApiService.put(
|
||||
urls.updatePackage(this.$route.params.package),
|
||||
this.formData
|
||||
);
|
||||
result = await ApiService.put(urls.updatePackage(this.$route.params.package), this.formData);
|
||||
} else {
|
||||
result = await ApiService.post(urls.storePackage, this.formData);
|
||||
}
|
||||
|
||||
@@ -71,20 +71,14 @@
|
||||
<v-btn :color="!['suspended', 'rejected'].includes(item.status) ? 'red' : 'green'"
|
||||
class="mr-2" @click="changeStatus(item)" v-bind="attrs" v-on="on">
|
||||
<v-icon class="white--text mr-1 caption">
|
||||
fas {{
|
||||
!['suspended', 'rejected'].includes(item.status) ? 'fa-close' : 'fa-check'
|
||||
}}
|
||||
fas {{!['suspended', 'rejected'].includes(item.status) ? 'fa-close' : 'fa-check'}}
|
||||
</v-icon>
|
||||
<span>
|
||||
{{
|
||||
!['suspended', 'rejected'].includes(item.status) ? 'reject' : 'approve'
|
||||
}}
|
||||
{{!['suspended', 'rejected'].includes(item.status) ? 'reject' : 'approve'}}
|
||||
</span>
|
||||
</v-btn>
|
||||
</template>
|
||||
<span>{{
|
||||
!['suspended', 'rejected'].includes(item.status) ? 'reject' : 'approve'
|
||||
}}</span>
|
||||
<span>{{!['suspended', 'rejected'].includes(item.status) ? 'reject' : 'approve'}}</span>
|
||||
</v-tooltip>
|
||||
<v-tooltip bottom open-on-hover>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
|
||||
@@ -484,67 +484,29 @@ export default {
|
||||
for (const key in result.data.data.inputs) {
|
||||
if (result.data.data.inputs.hasOwnProperty(key)) {
|
||||
if (result.data.data.inputs[key].type == "Form") {
|
||||
for (const keyForm in result.data.data.inputs[key]
|
||||
.children) {
|
||||
if (
|
||||
result.data.data.inputs[
|
||||
key
|
||||
].children.hasOwnProperty(keyForm)
|
||||
) {
|
||||
if (
|
||||
result.data.data.inputs[key].children[
|
||||
keyForm
|
||||
].type == "Checkbox" ||
|
||||
result.data.data.inputs[key].children[
|
||||
keyForm
|
||||
].type == "Select"
|
||||
) {
|
||||
this.formData[
|
||||
result.data.data.inputs[key]
|
||||
.children[keyForm].name +
|
||||
"_" +
|
||||
result.data.data.inputs[key]
|
||||
.children[keyForm].id
|
||||
] = [];
|
||||
for (const keyForm in result.data.data.inputs[key].children) {
|
||||
if (result.data.data.inputs[key].children.hasOwnProperty(keyForm)) {
|
||||
if (result.data.data.inputs[key].children[keyForm].type == "Checkbox" ||
|
||||
result.data.data.inputs[key].children[keyForm].type == "Select") {
|
||||
this.formData[result.data.data.inputs[key].children[keyForm].name + "_" + result.data.data.inputs[key].children[keyForm].id] = [];
|
||||
} else {
|
||||
this.formData[
|
||||
result.data.data.inputs[key]
|
||||
.children[keyForm].name +
|
||||
"_" +
|
||||
result.data.data.inputs[key]
|
||||
.children[keyForm].id
|
||||
] = "";
|
||||
this.formData[result.data.data.inputs[key].children[keyForm].name + "_" + result.data.data.inputs[key].children[keyForm].id] = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (
|
||||
result.data.data.inputs[key].type == "Checkbox" ||
|
||||
result.data.data.inputs[key].type == "Select"
|
||||
) {
|
||||
this.formData[
|
||||
result.data.data.inputs[key].name +
|
||||
"_" +
|
||||
result.data.data.inputs[key].id
|
||||
] = [];
|
||||
} else {
|
||||
this.formData[
|
||||
result.data.data.inputs[key].name +
|
||||
"_" +
|
||||
result.data.data.inputs[key].id
|
||||
] = "";
|
||||
} else if (result.data.data.inputs[key].type == "Checkbox" || result.data.data.inputs[key].type == "Select") {
|
||||
this.formData[result.data.data.inputs[key].name + "_" + result.data.data.inputs[key].id] = [];
|
||||
} else {this.formData[result.data.data.inputs[key].name + "_" + result.data.data.inputs[key].id] = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.$route.params.testResult) {
|
||||
const result = await ApiService.get(
|
||||
urls.editTestResult(this.$route.params.testResult)
|
||||
);
|
||||
const result = await ApiService.get(urls.editTestResult(this.$route.params.testResult));
|
||||
if (result && result.status == 200) {
|
||||
this.formData = result.data.data;
|
||||
for (const key in result.data.data.imagesPath) {
|
||||
if (result.data.data.imagesPath.hasOwnProperty(key)) {
|
||||
result.data.data.imagesPath[key] =
|
||||
result.data.data.imagesPath[key];
|
||||
result.data.data.imagesPath[key] = result.data.data.imagesPath[key];
|
||||
}
|
||||
}
|
||||
// this.images = result.data.data.imagesPath;
|
||||
@@ -558,15 +520,9 @@ export default {
|
||||
let result;
|
||||
this.formData['file_batch_id'] = this.file_batch_id;
|
||||
if (this.$route.params.testResult) {
|
||||
result = await ApiService.put(
|
||||
urls.updateTestResult(this.$route.params.testResult),
|
||||
this.formData
|
||||
);
|
||||
result = await ApiService.put(urls.updateTestResult(this.$route.params.testResult), this.formData);
|
||||
} else {
|
||||
result = await ApiService.post(
|
||||
urls.storeTestResult,
|
||||
this.formData
|
||||
);
|
||||
result = await ApiService.post(urls.storeTestResult, this.formData);
|
||||
}
|
||||
|
||||
if (result && result.status == 200) {
|
||||
|
||||
Reference in New Issue
Block a user