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

fix : style

Browse Source
This commit is contained in:
zeinab.ashrafi
2025-03-12 14:26:49 +03:30
parent 850f302365
commit 21888b55a5
14 changed files with 1809 additions and 1819 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Cycle/List.vue
+22 -22
View File
@@ -3,46 +3,46 @@
<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-5 my-3"> <v-layout align-center wrap class="px-5 my-3">
<v-flex xs12 md2 sm3 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> <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="py-3 pr-3" v-model="filter.cycle_id" label="Cycle ID"
color="black"></v-text-field> color="black"/>
</v-flex> </v-flex>
<v-flex xs12 md2 sm3 class="WM-FlexCenter pl-3"> <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-icon> <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="py-3 pr-3" v-model="filter.sterilizer_id" label="Sterilizer ID"
color="black"></v-text-field> color="black"/>
</v-flex> </v-flex>
<v-flex xs12 md2 sm3 class="WM-FlexCenter pl-3"> <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-icon> <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="py-3 pr-3" v-model="filter.cycle_number" label="Cycle Number"
color="black"></v-text-field> color="black"/>
</v-flex> </v-flex>
<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3" v-if="$hasRole('Admin')"> <v-flex xs12 sm6 md6 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-icon> <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="py-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"></v-autocomplete> :clearable="true"/>
</v-flex> </v-flex>
<v-flex xs12 sm2 md2 class="WM-FlexCenter pl-3"> <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3">
<v-icon class="far fa-calendar-alt mr-2 WM-Margin-B-8"></v-icon> <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 lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
v-model="Menu"> v-model="Menu">
<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>
<v-date-picker color="pink" no-title v-model="filter.date" <v-date-picker color="pink" no-title v-model="filter.date"
:date-format="date => new Date(date).toDateString()"></v-date-picker> :date-format="date => new Date(date).toDateString()"/>
</v-menu> </v-menu>
</v-flex> </v-flex>
<v-flex class xs12 md2 sm3> <v-spacer/>
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load()"> <v-flex class xs12 sm6 md6 lg2 xl1>
<v-btn class="WM-CyanBlueGradient-BG" style="padding:9px 30px" @click="load()">
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon> <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
<span class="white--text">Filter</span> <span class="white--text">Filter</span>
</v-btn> </v-btn>
</v-flex> </v-flex>
<v-spacer></v-spacer> <v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
<v-flex xs12 md2 sm2 class="text-xs-right">
<router-link :to="{ name: 'AddCycle' }"> <router-link :to="{ name: 'AddCycle' }">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black"> <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon> <v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
@@ -52,7 +52,7 @@
</v-flex> </v-flex>
</v-layout> </v-layout>
<v-layout class="px-4 my-3"> <v-layout class="px-4 my-3">
<v-divider></v-divider> <v-divider/>
</v-layout> </v-layout>
<v-layout align-center wrap class="px-5 my-3"> <v-layout align-center wrap class="px-5 my-3">
<v-flex md12> <v-flex md12>
@@ -118,10 +118,10 @@
</v-data-table> </v-data-table>
</v-flex> </v-flex>
</v-layout> </v-layout>
<v-divider></v-divider> <v-divider/>
<div class="text-xs-center mt-2" v-if="lastPage > 1"> <div class="text-xs-center mt-2" v-if="lastPage > 1">
<v-pagination color="black" v-model="currentPage" :length="lastPage" <v-pagination color="black" v-model="currentPage" :length="lastPage"
:total-visible="6"></v-pagination> :total-visible="6"/>
</div> </div>
<v-layout row wrap align-center justify-center class="mt-3"> <v-layout row wrap align-center justify-center class="mt-3">
<router-link to="/dashboard"> <router-link to="/dashboard">
src/views/Item/AddEdit.vue
+126 -123
View File
@@ -1,138 +1,141 @@
<template> <template>
<v-form ref="form"> <v-form ref="form">
<v-container grid-list-xs fluid> <v-container grid-list-xs fluid>
<material-card color="black" title="Add Instrument"> <material-card color="black" title="Add Instrument">
<v-layout align-center justify-center wrap class="px-5 my-3"> <v-layout align-center justify-center wrap class="px-5 my-3">
<v-flex xs12 md4 sm4 class="WM-FlexCenter"> <v-flex xs12 sm6 md6 lg3 class="WM-FlexCenter">
<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon> <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
<v-text-field name="name" label="Name" color="black" v-model="formData.name" :rules="[rules.required]" <v-text-field name="name" label="Name" color="black" v-model="formData.name"
class="py-3 pr-3"></v-text-field> :rules="[rules.required]"
</v-flex> class="py-3 pr-3"></v-text-field>
<!-- <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3"> </v-flex>
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon> <!-- <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
<v-text-field <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
name="unique_id" <v-text-field
label="Item ID" name="unique_id"
color="black" label="Item ID"
v-model="formData.unique_id" color="black"
:rules="[rules.required]" v-model="formData.unique_id"
class="py-3 pr-3" :rules="[rules.required]"
></v-text-field> class="py-3 pr-3"
</v-flex> --> ></v-text-field>
<v-flex xs12 md4 sm4 class="WM-FlexCenter pl-3"> </v-flex> -->
<v-icon class="fas fa-check mr-2 WM-Margin-B-8"></v-icon> <v-flex xs12 sm6 md6 lg3 class="WM-FlexCenter pl-3">
<v-text-field name="size" label="Size" color="black" v-model="formData.size" class="py-3 pr-3"></v-text-field> <v-icon class="fas fa-check mr-2 WM-Margin-B-8"></v-icon>
</v-flex> <v-text-field name="size" label="Size" color="black" v-model="formData.size"
<v-flex xs12 md4 sm4 class="WM-FlexCenter pl-3"> class="py-3 pr-3"></v-text-field>
<v-icon class="fas fa-check mr-2 WM-Margin-B-8"></v-icon> </v-flex>
<v-text-field name="specific" label="Specific" color="black" v-model="formData.specific" <v-flex xs12 sm6 md6 lg3 class="WM-FlexCenter pl-3">
class="py-3 pr-3"></v-text-field> <v-icon class="fas fa-check mr-2 WM-Margin-B-8"></v-icon>
</v-flex> <v-text-field name="specific" label="Specific" color="black" v-model="formData.specific"
</v-layout> class="py-3 pr-3"></v-text-field>
<v-layout class="px-5 mb-3"> </v-flex>
<v-flex xs12 md4 sm4 class="WM-FlexCenter"> <v-flex xs12 sm6 md6 lg3 class="WM-FlexCenter">
<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon> <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
<v-text-field name="UDI" label="UDI" color="black" v-model="formData.udi" :rules="[rules.required]" <v-text-field name="UDI" label="UDI" color="black" v-model="formData.udi"
class="py-3 pr-3"></v-text-field> :rules="[rules.required]"
</v-flex> class="py-3 pr-3"></v-text-field>
<v-flex xs12 md8 sm8 class="WM-FlexCenter" v-if="galleryDataLoaded"> </v-flex>
<wm-Dropzone class="w-100" :Images="galleries" :BatchID="file_batch_id" :ModelID="$route.params.Item" <v-flex xs12 sm12 class="WM-FlexCenter" v-if="galleryDataLoaded">
ModelType="Item"></wm-Dropzone> <wm-Dropzone class="w-100" :Images="galleries" :BatchID="file_batch_id"
</v-flex> :ModelID="$route.params.Item"
</v-layout> ModelType="Item"></wm-Dropzone>
<v-layout align-center wrap class="px-5 mb-3"> </v-flex>
<v-flex xs12 sm12 md12> </v-layout>
<v-textarea color="black" v-model="formData.note" class="pa-2" name="address"> <v-layout align-center wrap class="px-5 mb-3">
<template v-slot:label> <v-flex xs12 sm12 md12>
<div>description</div> <v-textarea color="black" v-model="formData.note" class="pa-2" name="address">
</template> <template v-slot:label>
</v-textarea> <div>description</div>
</v-flex> </template>
</v-layout> </v-textarea>
<v-layout row wrap justify-center align-center> </v-flex>
<v-flex xs12 md2 sm2 class="text-md-center text-xs-center"> </v-layout>
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="submitForm()"> <v-layout row wrap justify-center align-center>
<v-icon class="white--text mr-2 caption">fas fa-check</v-icon> <v-flex xs12 md2 sm2 class="text-md-center text-sm-center text-xs-center">
<span class="white--text">SAVE</span> <router-link :to="{ name: 'AllItem' }">
</v-btn> <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
</v-flex> <v-icon class="black--text">keyboard_arrow_left</v-icon>
<v-flex xs12 md2 sm2 class="text-md-center text-sm-center text-xs-center"> <span class="black--text">Back</span>
<router-link :to="{ name: 'AllItem' }"> </v-btn>
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black"> </router-link>
<v-icon class="black--text">keyboard_arrow_left</v-icon> </v-flex>
<span class="black--text">Back</span> <v-flex xs12 md2 sm2 class="text-md-center text-xs-center">
</v-btn> <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="submitForm()">
</router-link> <v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
</v-flex> <span class="white--text">SAVE</span>
</v-layout> </v-btn>
</material-card> </v-flex>
</v-container>
</v-form> </v-layout>
</material-card>
</v-container>
</v-form>
</template> </template>
<script> <script>
import { ApiService } from "@/services"; import {ApiService} from "@/services";
import { urls } from "@/config/urls"; import {urls} from "@/config/urls";
import { mapMutations } from 'vuex'; import {mapMutations} from 'vuex';
import Dropzone from '@/components/core/Dropzone' import Dropzone from '@/components/core/Dropzone'
export default { export default {
components: { components: {
'wm-Dropzone': Dropzone, 'wm-Dropzone': Dropzone,
},
data() {
return {
galleries: [],
galleryDataLoaded: false,
file_batch_id: Math.floor(Math.random() * 9000000000) + 1000000000,
formData: {
name: "",
unique_id: "",
result: "",
note: "",
},
result: ["Pass", "Fail"],
rules: {
required: value => !!value || "Required.",
counter: value =>
!value || value.length == 0 || value.length >= 5 || "Min 5 characters",
}
};
},
created() {
if (this.$route.params.Item) {
this.load(this.$route.params.Item);
} else {
this.galleryDataLoaded = true;
}
},
methods: {
async load(id) {
const result = await ApiService.get(urls.editItem(id));
if (result.status == 200) {
this.galleries = result.data.data.filesPath;
this.galleryDataLoaded = true;
this.formData = result.data.data;
}
}, },
async submitForm() { data() {
let result; return {
this.formData['file_batch_id'] = this.file_batch_id; galleries: [],
if (this.$route.params.Item) { galleryDataLoaded: false,
result = await ApiService.put(urls.updateItem(this.$route.params.Item), this.formData); file_batch_id: Math.floor(Math.random() * 9000000000) + 1000000000,
} else { formData: {
result = await ApiService.post(urls.storeItem, this.formData); name: "",
} unique_id: "",
result: "",
note: "",
},
result: ["Pass", "Fail"],
rules: {
required: value => !!value || "Required.",
counter: value =>
!value || value.length == 0 || value.length >= 5 || "Min 5 characters",
}
};
},
created() {
if (this.$route.params.Item) {
this.load(this.$route.params.Item);
} else {
this.galleryDataLoaded = true;
}
},
methods: {
async load(id) {
const result = await ApiService.get(urls.editItem(id));
if (result.status == 200) {
this.galleries = result.data.data.filesPath;
this.galleryDataLoaded = true;
this.formData = result.data.data;
}
},
async submitForm() {
let result;
this.formData['file_batch_id'] = this.file_batch_id;
if (this.$route.params.Item) {
result = await ApiService.put(urls.updateItem(this.$route.params.Item), this.formData);
} else {
result = await ApiService.post(urls.storeItem, this.formData);
}
if (result && result.status == 200) { if (result && result.status == 200) {
this.$router.push({ name: 'AllItem' }) this.$router.push({name: 'AllItem'})
} }
}, },
} }
}; };
</script> </script>
<style> <style>
.w-100 { .w-100 {
width: 100%; width: 100%;
} }
</style> </style>
src/views/Item/List.vue
+7 -5
View File
@@ -27,21 +27,23 @@
<v-text-field class="py-3 pr-3" v-model="filter.udi" label="UDI" color="black"/> <v-text-field class="py-3 pr-3" v-model="filter.udi" label="UDI" color="black"/>
</v-flex> </v-flex>
<!--btn--> <!--btn-->
<v-flex xs12 sm4 md4 lg3 xl1 class="WM-FlexCenter"> <v-spacer/>
<v-flex class xs12 sm6 md6 lg2 xl1>
<v-btn class="WM-CyanBlueGradient-BG" style="padding:9px 30px" @click="load()"> <v-btn class="WM-CyanBlueGradient-BG" style="padding:9px 30px" @click="load()">
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon> <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
<span class="white--text CSSD-font">Filter</span> <span class="white--text">Filter</span>
</v-btn> </v-btn>
</v-flex> </v-flex>
<v-spacer/> <v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
<v-flex xs12 sm12 md4 lg3 xl1 class="text-xs-right">
<router-link :to="{ name: 'AddItem' }"> <router-link :to="{ name: 'AddItem' }">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black"> <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon> <v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
<span class="black--text CSSD-font">Add</span> <span class="black--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-4 my-3">
<v-divider/> <v-divider/>
src/views/Label/AddEdit.vue
+2 -4
View File
@@ -3,7 +3,6 @@
<v-container grid-list-xs fluid> <v-container grid-list-xs fluid>
<material-card color="black" title="Add Label on Set "> <material-card color="black" title="Add Label on Set ">
<v-layout wrap class="px-5 my-3"> <v-layout wrap class="px-5 my-3">
<v-flex xs12 sm6 md4 lg3 class="WM-FlexCenter pl-3"> <v-flex xs12 sm6 md4 lg3 class="WM-FlexCenter pl-3">
<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 name="sterilizerId" label="Sterilizer ID" color="black" <v-text-field name="sterilizerId" label="Sterilizer ID" color="black"
@@ -25,11 +24,11 @@
<v-autocomplete color="black" :items="items" item-text="name" v-model="formData.package_id" <v-autocomplete color="black" :items="items" item-text="name" v-model="formData.package_id"
item-value="id" label="Package ID" class="py-3 pr-3" :filter="customFilter"> item-value="id" label="Package ID" class="py-3 pr-3" :filter="customFilter">
<template v-slot:chip="{ item }"> <template v-slot:chip="{ item }">
{{ item.name }} - {{ item.udi }} {{ item.name }} - {{ item.id }}
</template> </template>
<template v-slot:item="{ item }"> <template v-slot:item="{ item }">
{{ item.name }} - {{ item.udi }} {{ item.name }} - {{ item.id }}
</template> </template>
</v-autocomplete> </v-autocomplete>
</v-flex> </v-flex>
@@ -80,7 +79,6 @@
<script> <script>
import { ApiService } from "@/services"; import { ApiService } from "@/services";
import { urls } from "@/config/urls"; import { urls } from "@/config/urls";
import { mapMutations } from "vuex";
export default { export default {
data() { data() {
return { return {
src/views/Label/List.vue
+260 -252
View File
@@ -1,284 +1,292 @@
<template> <template>
<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-5 my-3"> <v-layout align-center wrap class="px-5 my-3">
<v-flex xs12 md3 sm3 class="WM-FlexCenter"> <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> <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
<v-text-field class="py-3" v-model="filter.label_id" label="Label ID" color="black"></v-text-field> <v-text-field class="py-3" v-model="filter.label_id" label="Label ID"
</v-flex> color="black"></v-text-field>
</v-flex>
<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3" v-if="$hasRole('Admin')"> <v-flex xs12 sm6 md6 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-icon> <v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"></v-icon>
<v-autocomplete <v-autocomplete
class="py-3 pr-3" class="py-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"
item-value="id" item-value="id"
label="Hospital" label="Hospital"
color="black" color="black"
:items="medicalCenters" :items="medicalCenters"
:clearable="true" :clearable="true"
></v-autocomplete> ></v-autocomplete>
</v-flex> </v-flex>
<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3"> <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-icon> <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
<v-text-field class="py-3" v-model="filter.sterilizer_id" label="Sterilizer ID" color="black"></v-text-field> <v-text-field class="py-3" v-model="filter.sterilizer_id" label="Sterilizer ID"
</v-flex> color="black"></v-text-field>
<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3"> </v-flex>
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon> <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3">
<v-text-field class="py-3" v-model="filter.cycle_number" label="Cycle Number" color="black"></v-text-field> <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
</v-flex> <v-text-field class="py-3" v-model="filter.cycle_number" label="Cycle Number"
<v-flex xs12 md2 sm3> color="black"></v-text-field>
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load()"> </v-flex>
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon> <v-spacer/>
<span class="white--text">Filter</span> <v-flex xs12 sm6 md6 lg2 xl1 class="">
</v-btn> <v-btn class="WM-CyanBlueGradient-BG" style="padding:9px 30px" @click="load()">
</v-flex> <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
<v-spacer></v-spacer> <span class="white--text">Filter</span>
<v-flex xs12 md2 sm2 class="text-xs-right"> </v-btn>
<router-link :to="{name: 'AddLabel'}"> </v-flex>
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black"> <v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon> <router-link :to="{name: 'AddLabel'}">
<span class="black--text">Add</span> <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
</v-btn> <v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
</router-link> <span class="black--text">Add</span>
</v-flex> </v-btn>
</v-layout> </router-link>
<v-layout class="px-4 my-3"> </v-flex>
<v-divider></v-divider> </v-layout>
</v-layout> <v-layout class="px-4 my-3">
<v-layout align-center wrap class="px-5 my-3"> <v-divider/>
<v-flex md12> </v-layout>
<v-data-table :headers="headers" :items="items" hide-actions> <v-layout align-center wrap class="px-5 my-3">
<template slot="headerCell" slot-scope="{ header }"> <v-flex md12>
<span class="subheading font-weight-light text-white text--darken-3" v-text="header.text" /> <v-data-table :headers="headers" :items="items" hide-actions>
</template> <template slot="headerCell" slot-scope="{ header }">
<template slot="items" slot-scope="{ item }"> <span class="subheading font-weight-light text-white text--darken-3"
<td class="title font-weight-light">{{ item.id }}</td> v-text="header.text"/>
<td </template>
class="title font-weight-light" <template slot="items" slot-scope="{ item }">
>{{ (item.user && item.user.medical_center) ? item.user.medical_center.name : '' }}</td> <td class="title font-weight-light">{{ item.id }}</td>
<td class="title font-weight-light">{{ item.user ? item.user.name : '' }}</td> <td class="title font-weight-light">
<td class="title font-weight-light">{{ item.cycle_number }}</td> {{ (item.user && item.user.medical_center) ? item.user.medical_center.name : '' }}
<td class="title font-weight-light">{{ item.sterilizer_id }}</td> </td>
<td class="text-xs-right FlexBtn Height-MD-60"> <td class="title font-weight-light">{{ item.user ? item.user.name : '' }}</td>
<v-tooltip bottom open-on-hover> <td class="title font-weight-light">{{ item.cycle_number }}</td>
<template v-slot:activator="{ on, attrs }"> <td class="title font-weight-light">{{ item.sterilizer_id }}</td>
<v-btn v-bind="attrs" v-on="on" color="cyan" class="mr-2" @click="show(item.id)"> <td class="text-xs-right FlexBtn Height-MD-60">
<v-icon class="white--text mr-1 caption">fas fa-eye</v-icon> <v-tooltip bottom open-on-hover>
<span>Show</span> <template v-slot:activator="{ on, attrs }">
</v-btn> <v-btn v-bind="attrs" v-on="on" color="cyan" class="mr-2"
</template> @click="show(item.id)">
<span>Show</span> <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>
<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="orange" 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> </router-link>
</router-link> </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="pink"
class="WM-ActionButton mr-2" class="WM-ActionButton mr-2"
@click="remove(item.id)" @click="remove(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-times</v-icon>
<v-icon class="white--text mr-2 caption">fas fa-times</v-icon> <span>Remove</span>
<span>Remove</span> </v-btn>
</v-btn> </template>
</template> <span>Remove</span>
<span>Remove</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="orange darken-1 mr-2" @click="generateBarcode(item.id, 'Label')"> <v-btn v-bind="attrs" v-on="on" color="orange darken-1 mr-2"
<v-icon class="white--text mr-1 caption">fas fa-barcode</v-icon> @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> <span>Generate Barcode</span>
</v-btn>
</template>
<span>Generate Barcode</span>
</v-tooltip> </v-tooltip>
</td> </td>
</template> </template>
</v-data-table> </v-data-table>
</v-flex> </v-flex>
</v-layout> </v-layout>
<v-divider></v-divider> <v-divider/>
<div class="text-xs-center" v-if="lastPage > 1"> <div class="text-xs-center" v-if="lastPage > 1">
<v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination> <v-pagination color="black" v-model="currentPage" :length="lastPage"
</div> :total-visible="6"/>
<v-layout row wrap align-center justify-center class="mt-3"> </div>
<router-link to="/dashboard"> <v-layout row wrap align-center justify-center class="mt-3">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5"> <router-link to="/dashboard">
<v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon> <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
<span class="black--text">Back</span> <v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
</v-btn> <span class="black--text">Back</span>
</router-link> </v-btn>
</v-layout> </router-link>
</material-card> </v-layout>
</v-container> </material-card>
</div> </v-container>
</div>
</template> </template>
<script> <script>
import { ApiService } from "@/services"; import {ApiService} from "@/services";
import { urls } from "@/config/urls"; import {urls} from "@/config/urls";
import { mapMutations, mapGetters } from "vuex"; import {mapMutations, mapGetters} from "vuex";
export default { export default {
data: () => ({ data: () => ({
headers: [ headers: [
{ {
sortable: true, sortable: true,
text: "Label ID", text: "Label ID",
value: "Label ID" value: "Label ID"
}, },
{ {
sortable: true, sortable: true,
text: "Hospital", text: "Hospital",
value: "Hospital" value: "Hospital"
}, },
{ {
sortable: false, sortable: false,
text: "User", text: "Owner",
value: "User" value: "User"
}, },
{ {
sortable: false, sortable: false,
text: "Cycle Number", text: "Cycle Number",
value: "Cycle Number" value: "Cycle Number"
}, },
{ {
sortable: false, sortable: false,
text: "SterilizerID", text: "SterilizerID",
value: "SterilizerID" value: "SterilizerID"
}, },
{ {
sortable: false, sortable: false,
text: "Action", text: "Action",
value: "action", value: "action",
align: "left" align: "left"
} }
], ],
filter: {}, filter: {},
items: [], items: [],
medicalCenters: [], medicalCenters: [],
users: [], users: [],
currentPage: 1, currentPage: 1,
lastPage: 1 lastPage: 1
}), }),
created() { created() {
this.load(); this.load();
}, },
methods: { methods: {
...mapMutations("modal", ["changeCurrentModal"]), ...mapMutations("modal", ["changeCurrentModal"]),
async load(page = 1) { async load(page = 1) {
let filter = "?"; let filter = "?";
for (const key in this.filter) { for (const key in this.filter) {
if (this.filter.hasOwnProperty(key)) { if (this.filter.hasOwnProperty(key)) {
filter += `${key}=${this.filter[key]}&`; filter += `${key}=${this.filter[key]}&`;
} }
} }
filter += page ? `page=${page}` : `page=1`; filter += page ? `page=${page}` : `page=1`;
const result = await ApiService.get(urls.listLabel(filter)); const result = await ApiService.get(urls.listLabel(filter));
if (result && result.status == 200) { if (result && result.status == 200) {
const { data, meta } = result.data; const {data, meta} = result.data;
this.items = data; this.items = data;
this.currentPage = meta.current_page; this.currentPage = meta.current_page;
this.lastPage = meta.last_page; this.lastPage = meta.last_page;
} }
this.loadMedicalCenters(); this.loadMedicalCenters();
}, },
async loadMedicalCenters() { async loadMedicalCenters() {
const result = await ApiService.get(urls.listFilterItemsTestResult); const result = await ApiService.get(urls.listFilterItemsTestResult);
if (result && result.status == 200) { if (result && result.status == 200) {
this.medicalCenters = result.data.data.MedicalCenters; this.medicalCenters = result.data.data.MedicalCenters;
} }
}, },
async fillUsers() { async fillUsers() {
const result = await ApiService.get( const result = await ApiService.get(
urls.listOpertorMedicalCenter(this.form.medicalCenterId) urls.listOpertorMedicalCenter(this.form.medicalCenterId)
); );
if (result && result.status == 200) { if (result && result.status == 200) {
this.users = result.data.data.users; this.users = result.data.data.users;
} }
}, },
async show(testResultId) { async show(testResultId) {
const result = await ApiService.get(urls.showLabel(testResultId)); const result = await ApiService.get(urls.showLabel(testResultId));
if (result && result.status == 200) { if (result && result.status == 200) {
this.changeCurrentModal({ this.changeCurrentModal({
modal: "modal-label-show", modal: "modal-label-show",
properties: { result, width :40 } properties: {result, width: 40}
}); });
} }
}, },
async remove(testResultId) { async remove(testResultId) {
const result = await ApiService.delete( const result = await ApiService.delete(
urls.removeLabel(testResultId) urls.removeLabel(testResultId)
); );
if (result && result.status == 200) { if (result && result.status == 200) {
for (const key in this.items) { for (const key in this.items) {
if ( if (
this.items.hasOwnProperty(key) && this.items.hasOwnProperty(key) &&
this.items[key].id == testResultId this.items[key].id == testResultId
) { ) {
this.items.splice(key, 1); this.items.splice(key, 1);
} }
} }
} }
}, },
async generateBarcode(code, type) { async generateBarcode(code, type) {
const result = await ApiService.post(urls.Barcode(code, type)); const result = await ApiService.post(urls.Barcode(code, type));
if (result && result.status == 200) { if (result && result.status == 200) {
this.changeCurrentModal({ this.changeCurrentModal({
modal: "modal-barcode-barcode", modal: "modal-barcode-barcode",
properties: { result } properties: {result}
}); });
} }
} }
}, },
computed: { computed: {
...mapGetters("modal", ["getModalResult"]) ...mapGetters("modal", ["getModalResult"])
}, },
watch: { watch: {
currentPage(page) { currentPage(page) {
this.load(page); this.load(page);
}, },
getModalResult(testResult) { getModalResult(testResult) {
for (const key in this.items) { for (const key in this.items) {
if ( if (
this.items.hasOwnProperty(key) && this.items.hasOwnProperty(key) &&
this.items[key].id == testResult.id this.items[key].id == testResult.id
) { ) {
this.items[key] = testResult; this.items[key] = testResult;
} }
} }
} }
} }
}; };
</script> </script>
<style> <style>
.v-btn--floating { .v-btn--floating {
padding: 0 !important; padding: 0 !important;
} }
.theme--light.v-btn.v-btn--flat { .theme--light.v-btn.v-btn--flat {
color: rgba(0, 0, 0, 0.87) !important; color: rgba(0, 0, 0, 0.87) !important;
} }
.v-btn--floating, .v-btn--floating,
.v-btn--icon:before { .v-btn--icon:before {
border-radius: 50% !important; border-radius: 50% !important;
} }
</style> </style>
src/views/MedicalCenter/List.vue
+16 -16
View File
@@ -3,23 +3,23 @@
<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-5 mb-3">
<v-flex xs12 md3 sm3 class="pr-3"> <v-flex xs12 md3 sm3 class="pr-3">
<v-text-field label="Name" v-model="filter.name" color="black"></v-text-field> <v-text-field label="Name" v-model="filter.name" color="black"/>
</v-flex>
<v-flex xs12 md2 sm2 class="text-xs-right">
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @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-flex xs12 md2 sm2 class="text-xs-right">
<router-link :to="{ name: 'AddMedicalCenter' }">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
<span class="black--text">Add</span>
</v-btn>
</router-link>
</v-flex> </v-flex>
<v-spacer/>
<v-flex class xs12 sm6 md6 lg2 xl1>
<v-btn class="WM-CyanBlueGradient-BG" style="padding:9px 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: 'AddMedicalCenter' }">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
<span class="black--text">Add</span>
</v-btn>
</router-link>
</v-flex>
</v-layout> </v-layout>
<v-layout class="px-4 my-3"> <v-layout class="px-4 my-3">
<v-divider></v-divider> <v-divider></v-divider>
src/views/MedicalCenter/OperatorList.vue
+1 -1
View File
@@ -12,7 +12,7 @@
<v-select :items="roles" name="roles" v-model="filter.role" label="Roles" class="pa-2" color="black"></v-select> <v-select :items="roles" name="roles" v-model="filter.role" label="Roles" class="pa-2" color="black"></v-select>
</v-flex> </v-flex>
<v-flex xs12 md2 sm2 class="text-xs-right"> <v-flex xs12 md2 sm2 class="text-xs-right">
<v-btn class="WM-CyanBlueGradient-BG" @click="load" style="padding:10px 60px"> <v-btn class="WM-CyanBlueGradient-BG" @click="load" style="padding:9px 30px">
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon> <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
<span class="white--text">Filter</span> <span class="white--text">Filter</span>
</v-btn> </v-btn>
src/views/Package/AddEdit.vue
+212 -232
View File
@@ -1,253 +1,233 @@
<template> <template>
<v-form ref="form"> <v-form ref="form">
<v-container grid-list-xs fluid> <v-container grid-list-xs fluid>
<material-card color="black" title="Add Package"> <material-card color="black" title="Add Package">
<v-layout wrap class="px-5 my-3"> <v-layout wrap class="px-5 my-3">
<v-flex xs12 md3 sm3 class="WM-FlexCenter"> <v-flex xs12 md3 sm3 class="WM-FlexCenter">
<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon> <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
<v-text-field <v-text-field
name="name" name="name"
label="Name" label="Name"
color="black" color="black"
v-model="formData.name" v-model="formData.name"
:rules="[rules.required, rules.counter]" :rules="[rules.required, rules.counter]"
class="py-3 pr-3" class="py-3 pr-3"
></v-text-field> />
</v-flex> </v-flex>
<!-- <v-flex xs12 md3 sm3 class="WM-FlexCenter"> <!-- <v-flex xs12 md3 sm3 class="WM-FlexCenter">
<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon> <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
<v-text-field <v-text-field
name="unique_id" name="unique_id"
label="Package ID" label="Package ID"
color="black" color="black"
v-model="formData.unique_id" v-model="formData.unique_id"
:rules="[rules.required, rules.counter]" :rules="[rules.required, rules.counter]"
class="py-3 pr-3" class="py-3 pr-3"
></v-text-field> />
</v-flex> --> </v-flex> -->
<v-flex xs12 md12 sm12></v-flex> <!-- <v-flex xs3 class="WM-FlexCenter">
<!-- <v-row style="position: relative" v-for="(item, key) in formData.items" :key="key"> --> <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
<v-flex <v-text-field
xs12 name="UDI"
md3 label="UDI"
sm3 color="black"
class="WM-FlexCenter WM-DuplicateInput" v-model="formData.udi"
style="position: relative" :rules="[rules.required]"
v-for="(item, key) in formData.items" class="py-3"
:key="key" />
> </v-flex>-->
<div class="Inner"> <v-flex xs12 md12 sm12></v-flex>
<v-icon class="fas fa-check mr-2 WM-Margin-B-8"></v-icon> <!-- <v-row style="position: relative" v-for="(item, key) in formData.items" :key="key"> -->
<v-autocomplete <v-flex xs12 md3 sm3 class="WM-FlexCenter WM-DuplicateInput"
@keydown.enter.native.prevent="duplicateForm(key)" style="position: relative" v-for="(item, key) in formData.items" :key="key">
:ref="`selectItem-${key}`" <div class="Inner">
class="py-3 pr-3" <v-icon class="fas fa-check mr-2 WM-Margin-B-8"/>
:items="items" <v-autocomplete
item-text="name" @keydown.enter.native.prevent="duplicateForm(key)"
v-model="item.id" :ref="`selectItem-${key}`"
item-value="id" class="py-3 pr-3"
label="Select Items For Package" :items="items"
color="black" item-text="name"
:filter="customFilter" v-model="item.id"
> item-value="id"
<template v-slot:selection="{ item }"> label="Select Items For Package"
{{ item.name }} - {{ item.udi }} color="black"
</template> :filter="customFilter">
<template v-slot:selection="{ item }">
{{ item.name }} - {{ item.udi }}
</template>
<template v-slot:item="{ item }"> <template v-slot:item="{ item }">
{{ item.name }} - {{ item.udi }} {{ item.name }} - {{ item.udi }}
</template> </template>
</v-autocomplete> </v-autocomplete>
<v-btn <v-btn
absolute absolute
small small
right right
bottom bottom
color="cyan" color="cyan"
@click="duplicateForm(key)" @click="duplicateForm(key)">
> <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>ADD ADD
</v-btn> </v-btn>
<v-btn <v-btn
v-if="key > 0" v-if="key > 0"
absolute absolute
small small
right right
top top
color="pink" color="pink"
@click="removeForm(key)" @click="removeForm(key)"
> >
<v-icon class="white--text mr-2 caption">fas fa-remove</v-icon <v-icon class="white--text mr-2 caption">fas fa-remove
>REMOVE </v-icon
</v-btn> >
</div> REMOVE
</v-flex> </v-btn>
<v-flex xs3 class="WM-FlexCenter"> </div>
<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon> </v-flex>
<v-text-field <!-- </v-row> -->
name="UDI" <v-spacer/>
label="UDI" <v-flex xs12>
color="black" <hr class="v-divider theme--light" style="margin-top: 30px !important"/>
v-model="formData.udi" </v-flex>
:rules="[rules.required]" </v-layout>
class="py-3" <v-layout align-center justify-center wrap class="px-5 mb-3">
></v-text-field> <v-flex xs12 sm12 md12>
</v-flex> <v-textarea
<!-- </v-row> --> color="black"
<v-spacer></v-spacer> v-model="formData.note"
<v-flex xs12> class="pa-2"
<hr name="address">
class="v-divider theme--light" <template v-slot:label>
style="margin-top: 30px !important" <div>description</div>
/> </template>
</v-flex> </v-textarea>
</v-layout> </v-flex>
<v-layout align-center justify-center wrap class="px-5 mb-3"> </v-layout>
<v-flex xs12 sm12 md12> <v-layout row wrap justify-center align-center>
<v-textarea <v-flex xs12 md2 sm2 class="text-md-center text-sm-center text-xs-center">
color="black" <router-link :to="{ name: 'AllPackage' }">
v-model="formData.note" <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
class="pa-2" <v-icon class="black--text">keyboard_arrow_left</v-icon>
name="address" <span class="black--text">Back</span>
> </v-btn>
<template v-slot:label> </router-link>
<div>description</div> </v-flex>
</template> <v-flex xs12 md2 sm2 class="text-md-center text-xs-center">
</v-textarea> <v-btn class="WM-CyanBlueGradient-BG" style="padding: 10px 60px" @click="submitForm()">
</v-flex> <v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
</v-layout> <span class="white--text">SAVE</span>
<v-layout row wrap justify-center align-center> </v-btn>
<v-flex xs12 md2 sm2 class="text-md-center text-xs-center"> </v-flex>
<v-btn </v-layout>
class="WM-CyanBlueGradient-BG" </material-card>
style="padding: 10px 60px" </v-container>
@click="submitForm()" </v-form>
>
<v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
<span class="white--text">SAVE</span>
</v-btn>
</v-flex>
<v-flex
xs12
md2
sm2
class="text-md-center text-sm-center text-xs-center"
>
<router-link :to="{ name: 'AllPackage' }">
<v-btn
class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black"
>
<v-icon class="black--text">keyboard_arrow_left</v-icon>
<span class="black--text">Back</span>
</v-btn>
</router-link>
</v-flex>
</v-layout>
</material-card>
</v-container>
</v-form>
</template> </template>
<script> <script>
import { ApiService } from "@/services"; import {ApiService} from "@/services";
import { urls } from "@/config/urls"; import {urls} from "@/config/urls";
import { mapMutations } from "vuex"; import {mapMutations} from "vuex";
export default { export default {
data() { data() {
return { return {
formData: { formData: {
name: "", name: "",
result: "", result: "",
note: "", note: "",
items: [ items: [
{ {
name: "", name: "",
}, },
], ],
}, },
items: [], items: [],
result: ["Pass", "Fail"], result: ["Pass", "Fail"],
rules: { rules: {
required: (value) => !!value || "Required.", required: (value) => !!value || "Required.",
counter: (value) => counter: (value) =>
!value || !value ||
value.length == 0 || value.length == 0 ||
value.length >= 5 || value.length >= 5 ||
"Min 5 characters", "Min 5 characters",
}, },
}; };
},
created() {
if (this.$route.params.package) {
this.load(this.$route.params.package);
}
this.loadItems();
},
methods: {
customFilter(item, queryText) {
const name = item.name.toLowerCase();
const udi = item.udi ? item.udi.toLowerCase() : null;
const searchText = queryText.toLowerCase();
if (udi) {
return name.indexOf(searchText) > -1 || udi.indexOf(searchText) > -1;
}
return name.indexOf(searchText) > -1;
}, },
async load(id) { created() {
const result = await ApiService.get(urls.editPackage(id)); if (this.$route.params.package) {
if (result.status == 200) { this.load(this.$route.params.package);
this.formData = result.data.data; }
} this.loadItems();
}, },
async loadItems() { methods: {
const result = await ApiService.get(urls.listAllItem()); customFilter(item, queryText) {
if (result.status == 200) { const name = item.name.toLowerCase();
this.items = result.data.data; const udi = item.udi ? item.udi.toLowerCase() : null;
} const searchText = queryText.toLowerCase();
// this.items = [ if (udi) {
// { name: "test", udi: "23" }, return name.indexOf(searchText) > -1 || udi.indexOf(searchText) > -1;
// { name: "saj", udi: "43" }, }
// ]; return name.indexOf(searchText) > -1;
}, },
async submitForm() { async load(id) {
let result; const result = await ApiService.get(urls.editPackage(id));
if (this.$route.params.package) { if (result.status == 200) {
result = await ApiService.put( this.formData = result.data.data;
urls.updatePackage(this.$route.params.package), }
this.formData },
); async loadItems() {
} else { const result = await ApiService.get(urls.listAllItem());
result = await ApiService.post(urls.storePackage, this.formData); if (result.status == 200) {
} this.items = result.data.data;
}
// this.items = [
// { name: "test", udi: "23" },
// { name: "saj", udi: "43" },
// ];
},
async submitForm() {
let result;
if (this.$route.params.package) {
result = await ApiService.put(
urls.updatePackage(this.$route.params.package),
this.formData
);
} else {
result = await ApiService.post(urls.storePackage, this.formData);
}
if (result && result.status == 200) { if (result && result.status == 200) {
this.$router.push({ name: "AllPackage" }); this.$router.push({name: "AllPackage"});
} }
}, },
duplicateForm(infoIndex) { duplicateForm(infoIndex) {
this.formData.items.push({ this.formData.items.push({
name: "", name: "",
}); });
console.log(this.$refs[`selectItem-1`], infoIndex); console.log(this.$refs[`selectItem-1`], infoIndex);
this.$refs[`selectItem-${infoIndex}`][0].focus(); this.$refs[`selectItem-${infoIndex}`][0].focus();
},
removeForm(infoIndex) {
this.formData.items.splice(infoIndex, 1);
},
}, },
removeForm(infoIndex) {
this.formData.items.splice(infoIndex, 1);
},
},
}; };
</script> </script>
<style media="screen"> <style media="screen">
.WM-DuplicateInput { .WM-DuplicateInput {
margin: 15px 0; margin: 15px 0;
} }
.WM-DuplicateInput .Inner { .WM-DuplicateInput .Inner {
padding: 15px 20px !important; padding: 15px 20px !important;
margin: 0 10px 0 0; margin: 0 10px 0 0;
width: 100%; width: 100%;
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.2);
} }
</style> </style>
src/views/Package/List.vue
+51 -42
View File
@@ -3,40 +3,37 @@
<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-5"> <v-layout align-center wrap class="mt-3 px-5">
<v-flex xs12 md3 sm3 class="WM-FlexCenter"> <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-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="py-3 pr-3" v-model="filter.package_id" label="Package ID"
color="black"/> color="black"/>
</v-flex> </v-flex>
<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3"> <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-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="py-3 pr-3" v-model="filter.name" label="Name" color="black"/>
</v-flex> </v-flex>
<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3" v-if="$hasRole('Admin')"> <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-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="py-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-flex class xs12 md2 sm3>
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load()"> <v-btn class="WM-CyanBlueGradient-BG" style="padding:9px 30px" @click="load()">
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon> <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
<span class="white--text">Filter</span> <span class="white--text">Filter</span>
</v-btn> </v-btn>
</v-flex> </v-flex>
<v-spacer></v-spacer> --> <v-spacer></v-spacer> -->
<!-- <v-spacer></v-spacer> --> <!-- <v-spacer></v-spacer> -->
<v-spacer/>
</v-layout> <v-flex class xs12 sm6 md6 lg2 xl1>
<v-layout align-center wrap class="mb-3 px-5"> <v-btn class="WM-CyanBlueGradient-BG" style="padding:9px 30px" @click="load()">
<v-flex class xs12 md2 sm3>
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load()">
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon> <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
<span class="white--text">Filter</span> <span class="white--text">Filter</span>
</v-btn> </v-btn>
</v-flex> </v-flex>
<v-spacer/> <v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
<v-flex xs12 md2 sm2 class="text-xs-right ml-3">
<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-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon> <v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
@@ -44,6 +41,7 @@
</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-4 my-3">
<v-divider/> <v-divider/>
@@ -52,15 +50,20 @@
<v-flex md12> <v-flex md12>
<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"/>
</template> </template>
<template slot="items" slot-scope="{ item }"> <template slot="items" slot-scope="{ item }">
<td class="title font-weight-light">{{ item.id }}</td> <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.unique_id }}</td> -->
<td class="title font-weight-light">{{ item.name }}</td> <td class="title font-weight-light">{{ item.name }}</td>
<td class="title font-weight-light">{{ (item.user && item.user.medical_center) ? <td class="title font-weight-light">
item.user.medical_center.name : '' }}</td> {{ (item.user && item.user.medical_center) ? item.user.medical_center.name : '' }}
<td class="title font-weight-light">{{ item.user ? item.user.name : '' | text_20_letter }}</td> </td>
<td class="title font-weight-light">{{
item.user ? item.user.name : '' | text_20_letter
}}
</td>
<td class="title font-weight-light">{{ item.udi | text_20_letter }}</td> <td class="title font-weight-light">{{ item.udi | text_20_letter }}</td>
<td class="title font-weight-light">{{ item.description }}</td> <td class="title font-weight-light">{{ item.description }}</td>
<td class="title font-weight-light">{{ item.status }}</td> <td class="title font-weight-light">{{ item.status }}</td>
@@ -68,22 +71,27 @@
<v-tooltip bottom open-on-hover v-if="$hasRole('Admin|Supervisor')"> <v-tooltip bottom open-on-hover v-if="$hasRole('Admin|Supervisor')">
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<v-btn :color="!['suspended', 'rejected'].includes(item.status) ? 'red' : 'green'" <v-btn :color="!['suspended', 'rejected'].includes(item.status) ? 'red' : 'green'"
class="mr-2" @click="changeStatus(item)" v-bind="attrs" v-on="on"> class="mr-2" @click="changeStatus(item)" v-bind="attrs" v-on="on">
<v-icon class="white--text mr-1 caption"> <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> </v-icon>
<span> <span>
{{ !['suspended', 'rejected'].includes(item.status) ? 'reject' : 'approve' }} {{
!['suspended', 'rejected'].includes(item.status) ? 'reject' : 'approve'
}}
</span> </span>
</v-btn> </v-btn>
</template> </template>
<span>{{ !['suspended', 'rejected'].includes(item.status) ? 'reject' : 'approve' <span>{{
!['suspended', 'rejected'].includes(item.status) ? 'reject' : 'approve'
}}</span> }}</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="cyan" class="mr-2" <v-btn v-bind="attrs" v-on="on" color="cyan" 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="white--text mr-1 caption">fas fa-eye</v-icon>
<span>Show</span> <span>Show</span>
</v-btn> </v-btn>
@@ -93,8 +101,8 @@
<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: '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="orange" 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>
@@ -106,8 +114,8 @@
<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="pink" class="WM-ActionButton mr-2"
@click="remove(item.id)" @click="remove(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-times</v-icon> <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
<span>Remove</span> <span>Remove</span>
</v-btn> </v-btn>
@@ -117,7 +125,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 class="mr-2" v-bind="attrs" v-on="on" color="orange darken-1" <v-btn class="mr-2" v-bind="attrs" v-on="on" color="orange darken-1"
@click="generateBarcode(item, 'Package')"> @click="generateBarcode(item, 'Package')">
<v-icon class="white--text mr-1 caption">fas fa-barcode</v-icon> <v-icon class="white--text mr-1 caption">fas fa-barcode</v-icon>
<span>Generate Barcode</span> <span>Generate Barcode</span>
</v-btn> </v-btn>
@@ -131,7 +139,8 @@
</v-layout> </v-layout>
<v-divider/> <v-divider/>
<div class="text-xs-center" v-if="lastPage > 1"> <div class="text-xs-center" v-if="lastPage > 1">
<v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination> <v-pagination color="black" v-model="currentPage" :length="lastPage"
:total-visible="6"></v-pagination>
</div> </div>
<v-layout row wrap align-center justify-center class="mt-3"> <v-layout row wrap align-center justify-center class="mt-3">
<router-link to="/dashboard"> <router-link to="/dashboard">
@@ -147,9 +156,9 @@
</template> </template>
<script> <script>
import { ApiService } from "@/services"; import {ApiService} from "@/services";
import { urls } from "@/config/urls"; import {urls} from "@/config/urls";
import { mapMutations, mapGetters } from "vuex"; import {mapMutations, mapGetters} from "vuex";
import toast from "@/services/global/toast.service"; import toast from "@/services/global/toast.service";
export default { export default {
@@ -226,10 +235,10 @@ export default {
} }
filter += (page) ? `page=${page}` : `page=1`; filter += (page) ? `page=${page}` : `page=1`;
const result = await ApiService.get( const result = await ApiService.get(
urls.listPackage(filter) urls.listPackage(filter)
); );
if (result && result.status == 200) { if (result && result.status == 200) {
const { data, meta } = result.data; const {data, meta} = result.data;
this.items = data; this.items = data;
this.currentPage = meta.current_page; this.currentPage = meta.current_page;
this.lastPage = meta.last_page; this.lastPage = meta.last_page;
@@ -238,24 +247,24 @@ export default {
}, },
async show(testResultId) { async show(testResultId) {
const result = await ApiService.get( const result = await ApiService.get(
urls.showPackage(testResultId) urls.showPackage(testResultId)
); );
if (result && result.status == 200) { if (result && result.status == 200) {
this.changeCurrentModal({ this.changeCurrentModal({
modal: "modal-package-show", modal: "modal-package-show",
properties: { result } properties: {result}
}); });
} }
}, },
async remove(testResultId) { async remove(testResultId) {
const result = await ApiService.delete( const result = await ApiService.delete(
urls.removePackage(testResultId) urls.removePackage(testResultId)
); );
if (result && result.status == 200) { if (result && result.status == 200) {
for (const key in this.items) { for (const key in this.items) {
if ( if (
this.items.hasOwnProperty(key) && this.items.hasOwnProperty(key) &&
this.items[key].id == testResultId this.items[key].id == testResultId
) { ) {
this.items.splice(key, 1); this.items.splice(key, 1);
} }
@@ -269,7 +278,7 @@ export default {
if (result && result.status == 200) { if (result && result.status == 200) {
this.changeCurrentModal({ this.changeCurrentModal({
modal: "modal-barcode-barcode", modal: "modal-barcode-barcode",
properties: { result } properties: {result}
}); });
} }
} else { } else {
@@ -312,8 +321,8 @@ export default {
getModalResult(testResult) { getModalResult(testResult) {
for (const key in this.items) { for (const key in this.items) {
if ( if (
this.items.hasOwnProperty(key) && this.items.hasOwnProperty(key) &&
this.items[key].id == testResult.id this.items[key].id == testResult.id
) { ) {
this.items[key] = testResult; this.items[key] = testResult;
} }
src/views/TestResult/AddEdit.vue
+635 -628
View File
File diff suppressed because it is too large Load Diff
src/views/TestResult/List.vue
+54 -57
View File
@@ -2,62 +2,63 @@
<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-5 mb-3 my-3"> <v-layout align-center wrap class="px-5 my-3">
<v-flex xs12 md2 sm3 class="WM-FlexCenter"> <v-flex xs12 sm6 md6 lg2 class="WM-FlexCenter pl-3">
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon> <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="py-3 pr-3" v-model="filter.device_id" label="ID"
color="black"></v-text-field> color="black"/>
</v-flex> </v-flex>
<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3"> <v-flex xs12 sm6 md6 lg3 class="WM-FlexCenter pl-3">
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon> <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="py-3 pr-3"
:clearable="true"></v-autocomplete> :clearable="true"/>
</v-flex> </v-flex>
<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3"> <v-flex xs12 sm6 md6 lg3 class="WM-FlexCenter pl-3">
<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon> <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="py-3 pr-3" v-model="filter.testType_id" label="TestType Name"
color="black" :items="testTypes" item-text="name" item-value="id"></v-autocomplete> color="black" :items="testTypes" item-text="name" item-value="id"/>
</v-flex> </v-flex>
<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3"> <v-flex xs12 sm6 md6 lg3 class="WM-FlexCenter pl-3">
<v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"></v-icon> <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="py-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"></v-autocomplete> :clearable="true"/>
</v-flex> </v-flex>
<v-flex xs12 md2 sm3 class="WM-FlexCenter"> <v-flex xs12 sm6 md6 lg3 class="WM-FlexCenter pl-3">
<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon> <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="py-3 pr-3" v-model="filter.user_name" label="User Name"
color="black"></v-text-field> color="black"/>
</v-flex> </v-flex>
<v-flex xs12 sm6 md2 pl-3 class="WM-FlexCenter"> <v-flex xs12 sm6 md6 lg3 class="WM-FlexCenter pl-3">
<v-icon class="far fa-calendar-alt mr-2"></v-icon> <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 lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
v-model="fromMenu"> v-model="fromMenu" style="width: 100%">
<v-text-field class="py-3 pr-3" required slot="activator" label="FromDate" <v-text-field class="py-3 pr-3" required slot="activator" label="FromDate"
v-model="filter.fromPicker" color="black"></v-text-field> 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()"></v-date-picker> :date-format="date => new Date(date).toDateString()"/>
</v-menu> </v-menu>
</v-flex> </v-flex>
<v-flex xs12 sm6 md2 pl-3 style="display: flex;align-items: center;"> <v-flex xs12 sm6 md6 lg3 style="display: flex;align-items: center;">
<v-icon class="far fa-calendar-alt mr-2"></v-icon> <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 lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
v-model="upToMenu"> 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="py-3 pr-3" required slot="activator" label="UpToDate" color="black"
v-model="filter.upToPicker"></v-text-field> 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()"></v-date-picker> :date-format="date => new Date(date).toDateString()"/>
</v-menu> </v-menu>
</v-flex> </v-flex>
<v-flex xs12 md3 sm3 class="WM-XL-Align-L text-lg-left"> <v-spacer/>
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load(null, null)"> <v-spacer/>
<v-flex class xs12 sm6 md6 lg2 xl1>
<v-btn class="WM-CyanBlueGradient-BG" style="padding:9px 30px" @click="load(null, null)">
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon> <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
<span class="white--text">Filter</span> <span class="white--text">Filter</span>
</v-btn> </v-btn>
</v-flex> </v-flex>
<v-spacer></v-spacer> <v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
<v-flex wrap xs12 md2 sm2 class="WM-Align-R">
<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-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon> <v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
@@ -66,25 +67,25 @@
</router-link> </router-link>
</v-flex> </v-flex>
</v-layout> </v-layout>
<v-layout wrap class="px-5 mb-3 my-3"> <!--<v-layout wrap class="px-5 mb-3 my-3">
<!-- <v-flex class xs12 md3 sm3 class="WM-XL-Align-L text-lg-left"> <v-flex class xs12 md3 sm3 class="WM-XL-Align-L text-lg-left">
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load(null, null)"> <v-btn class="WM-CyanBlueGradient-BG" style="padding:9px 30px" @click="load(null, null)">
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon> <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
<span class="white--text">Filter</span> <span class="white--text">Filter</span>
</v-btn> </v-btn>
</v-flex> </v-flex>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-flex wrap xs12 md2 sm2 class="WM-Align-R"> <v-flex wrap xs12 md2 sm2 class="WM-Align-R">
<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-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon> <v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
<span class="black--text">Add</span> <span class="black--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-4 my-3">
<v-divider></v-divider> <v-divider/>
</v-layout> </v-layout>
<v-layout align-center wrap class="px-5 my-2"> <v-layout align-center wrap class="px-5 my-2">
<v-flex md12> <v-flex md12>
@@ -99,20 +100,16 @@
<td class="title font-weight-light">{{ item.user.medical_center.name }}</td> <td class="title font-weight-light">{{ item.user.medical_center.name }}</td>
<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"> <td class="title font-weight-light">
<span v-if="item.result == 'Reject'" class="ResultMsg Reject"> <span v-if="item.result == 'Reject'" class="ResultMsg Reject">{{ item.result }}</span>
{{ item.result }} <span v-else-if="item.result == 'Accept'" class="ResultMsg Accept">{{ item.result }}</span>
</span>
<span v-else-if="item.result == 'Accept'" class="ResultMsg Accept">
{{ item.result }}
</span>
</td> </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="title font-weight-light"> <td class="title font-weight-light">
<span v-if="item.verified == 'NotVerified'" class="NotVerified"> <span v-if="item.verified == 'NotVerified'" class="NotVerified">
<v-icon class="caption fa fa-times NotVerified"></v-icon> <v-icon class="caption fa fa-times NotVerified"/>
</span> </span>
<span v-if="item.verified == 'Verified'" class=""> <span v-if="item.verified == 'Verified'" class="">
<v-icon class="caption fa fa-check Verified"></v-icon> <v-icon class="caption fa fa-check Verified"/>
</span> </span>
<!-- {{ item.verified }} --> <!-- {{ item.verified }} -->
</td> </td>
@@ -169,7 +166,7 @@
</v-data-table> </v-data-table>
</v-flex> </v-flex>
</v-layout> </v-layout>
<v-divider></v-divider> <v-divider/>
<div class="text-xs-center mt-2" v-if="lastPage > 1"> <div class="text-xs-center mt-2" v-if="lastPage > 1">
<v-pagination color="black" v-model="currentPage" :length="lastPage" <v-pagination color="black" v-model="currentPage" :length="lastPage"
:total-visible="6"></v-pagination> :total-visible="6"></v-pagination>
src/views/TestType/List.vue
+242 -254
View File
@@ -1,274 +1,262 @@
<template> <template>
<v-container fluid> <v-container fluid>
<material-card class color="black" title="TestType List" text> <material-card class color="black" title="TestType List" text>
<v-layout wrap class="px-5 mb-3"> <v-layout wrap class="px-5 mb-3">
<v-flex xs12 md3 sm3 class="WM-FlexCenter"> <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3">
<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon> <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> <v-text-field class="py-3 pr-3" label="Name" v-model="filter.name" color="black"/>
</v-flex> </v-flex>
<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3"> <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-icon> <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> <v-text-field class="py-3 pr-3" label="UniqueId" v-model="filter.unique_id" color="black"/>
</v-flex> </v-flex>
<v-flex xs12 md36 sm3 class="WM-FlexCenter pl-3"> <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3">
<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon> <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> <v-text-field class="py-3 pr-3" label="UserName" v-model="filter.user_name" color="black"/>
</v-flex> </v-flex>
</v-layout> <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3">
<v-layout wrap class="px-5 mb-3"> <v-icon class="far fa-calendar-alt mr-2"/>
<v-flex xs12 sm6 md2 class="WM-FlexCenter"> <v-menu
<v-icon class="far fa-calendar-alt mr-2"></v-icon> lazy
<v-menu :close-on-content-click="true"
lazy transition="v-scale-transition"
:close-on-content-click="true" offset-y
transition="v-scale-transition" v-model="fromMenu" style="width: 100%">
offset-y <v-text-field
v-model="fromMenu" required
> slot="activator"
<v-text-field label="FromDate"
required v-model="filter.fromPicker"
slot="activator" color="black"/>
label="FromDate" <v-date-picker
v-model="filter.fromPicker" color="pink"
color="black" no-title
></v-text-field> v-model="filter.fromPicker"
<v-date-picker :date-format="date => new Date(date).toDateString()"/>
color="pink" </v-menu>
no-title </v-flex>
v-model="filter.fromPicker" <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3">
:date-format="date => new Date(date).toDateString()" <v-icon class="far fa-calendar-alt mr-2"></v-icon>
></v-date-picker> <v-menu
</v-menu> lazy
</v-flex> :close-on-content-click="true"
<v-flex xs12 sm6 md2 class="WM-FlexCenter pl-3"> transition="v-scale-transition"
<v-icon class="far fa-calendar-alt mr-2"></v-icon> offset-y
<v-menu v-model="upToMenu" style="width: 100%">
lazy <v-text-field
:close-on-content-click="true" required
transition="v-scale-transition" slot="activator"
offset-y label="UpToDate"
v-model="upToMenu" v-model="filter.upToPicker"
> color="black"/>
<v-text-field <v-date-picker
required color="pink"
slot="activator" no-title
label="UpToDate" v-model="filter.upToPicker"
v-model="filter.upToPicker" :date-format="date => new Date(date).toDateString()"/>
color="black" </v-menu>
></v-text-field> </v-flex>
<v-date-picker
color="pink"
no-title
v-model="filter.upToPicker"
:date-format="date => new Date(date).toDateString()"
></v-date-picker>
</v-menu>
</v-flex>
<v-flex xs12 md2 sm2 class="text-xs-right ml-4"> <v-spacer/>
<v-btn <v-flex class xs12 sm6 md6 lg2 xl1>
class="WM-CyanBlueGradient-BG" <v-btn class="WM-CyanBlueGradient-BG" style="padding:9px 30px" @click="load(undefined)">
style="padding:10px 60px" <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
@click="load(undefined)" <span class="white--text">Filter</span>
> </v-btn>
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon> </v-flex>
<span class="white--text">Filter</span> <v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
</v-btn> <router-link :to="{name: 'AddTestType'}">
</v-flex> <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
<v-spacer></v-spacer> <v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
<v-flex xs12 md2 sm2 class="text-xs-right"> <span class="black--text">Add</span>
<router-link :to="{name: 'AddTestType'}"> </v-btn>
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black"> </router-link>
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon> </v-flex>
<span class="black--text">Add</span> </v-layout>
</v-btn> <v-layout class="px-4 my-3">
</router-link> <v-divider/>
</v-flex> </v-layout>
</v-layout> <v-layout align-center justify-center wrap class="px-5 mt-3">
<v-layout class="px-4 my-3"> <v-flex md12>
<v-divider></v-divider> <v-data-table :headers="headers" :items="items" hide-actions>
</v-layout> <template slot="headerCell" slot-scope="{ header }">
<v-layout align-center justify-center wrap class="px-5 mt-3"> <span class="subheading font-weight-light text-white text--darken-3" v-text="header.text"/>
<v-flex md12> </template>
<v-data-table :headers="headers" :items="items" hide-actions> <template slot="items" slot-scope="{ item }">
<template slot="headerCell" slot-scope="{ header }"> <td class="headline font-weight-light">{{ item.name }}</td>
<span <td class="title font-weight-light">{{ item.unique_code }}</td>
class="subheading font-weight-light text-white text--darken-3" <td class="title font-weight-light">{{ item.user.name }}</td>
v-text="header.text" <td class="title font-weight-light">{{ $d(new Date(item.created_at), 'long') }}</td>
/> <td class="text-xs-right FlexBtn">
</template> <v-tooltip bottom open-on-hover>
<template slot="items" slot-scope="{ item }"> <template v-slot:activator="{ on, attrs }">
<td class="headline font-weight-light">{{ item.name }}</td> <router-link
<td class="title font-weight-light">{{ item.unique_code }}</td> class="LinkBtn"
<td class="title font-weight-light">{{ item.user.name }}</td> v-if="item.test_results_count == 0"
<td class="title font-weight-light">{{ $d(new Date(item.created_at), 'long') }}</td> :to="{name : 'EditTestType', params : {testType : item.id}}">
<td class="text-xs-right FlexBtn"> <v-btn color="cyan" class="mr-2 WM-ActionButton" v-bind="attrs" v-on="on">
<v-tooltip bottom open-on-hover> <v-icon class="white--text mr-2 caption">fas fa-pen</v-icon>
<template v-slot:activator="{ on, attrs }"> <span>Edit</span>
<router-link class="LinkBtn" </v-btn>
v-if="item.test_results_count == 0" </router-link>
:to="{name : 'EditTestType', params : {testType : item.id}}" </template>
> <span>Edit</span>
<v-btn color="cyan" class="mr-2 WM-ActionButton" v-bind="attrs" </v-tooltip>
v-on="on"> <v-tooltip bottom open-on-hover>
<v-icon class="white--text mr-2 caption">fas fa-pen</v-icon> <template v-slot:activator="{ on, attrs }">
<span>Edit</span> <v-btn color="black" class="mr-2" @click="remove(item.id)" v-bind="attrs"
</v-btn> v-on="on">
</router-link> <v-icon class="white--text mr-1 caption">fas fa-folder</v-icon>
</template> <span>Archive</span>
<span>Edit</span> </v-btn>
</v-tooltip> </template>
<v-tooltip bottom open-on-hover> <span>Archive</span>
<template v-slot:activator="{ on, attrs }"> </v-tooltip>
<v-btn color="black" class="mr-2" @click="remove(item.id)" v-bind="attrs" <v-tooltip bottom open-on-hover>
v-on="on"> <template v-slot:activator="{ on, attrs }">
<v-icon class="white--text mr-1 caption">fas fa-folder</v-icon> <v-btn color="orange darken-1"
<span>Archive</span> @click="generateBarcode(item.unique_code, 'TestType')" v-bind="attrs"
</v-btn> v-on="on">
</template> <v-icon class="white--text mr-1 caption">fas fa-barcode</v-icon>
<span>Archive</span> <span>Generate Barcode</span>
</v-tooltip> </v-btn>
<v-tooltip bottom open-on-hover> </template>
<template v-slot:activator="{ on, attrs }"> <span>Generate Barcode</span>
<v-btn color="orange darken-1" @click="generateBarcode(item.unique_code, 'TestType')" v-bind="attrs" </v-tooltip>
v-on="on"> </td>
<v-icon class="white--text mr-1 caption">fas fa-barcode</v-icon> </template>
<span>Generate Barcode</span> </v-data-table>
</v-btn> </v-flex>
</template> </v-layout>
<span>Generate Barcode</span> <v-divider/>
</v-tooltip> <div class="text-xs-center mt-2" v-if="lastPage > 1">
</td> <v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"/>
</template> </div>
</v-data-table> <v-layout row wrap align-center justify-center class="mt-3">
</v-flex> <router-link to="/dashboard">
</v-layout> <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
<v-divider></v-divider> <v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
<div class="text-xs-center mt-2" v-if="lastPage > 1"> <span class="black--text">Back</span>
<v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination> </v-btn>
</div> </router-link>
<v-layout row wrap align-center justify-center class="mt-3"> </v-layout>
<router-link to="/dashboard"> </material-card>
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5"> </v-container>
<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>
</template> </template>
<script> <script>
import { ApiService } from "@/services"; import {ApiService} from "@/services";
import { urls } from "@/config/urls"; import {urls} from "@/config/urls";
import { mapMutations, mapGetters } from "vuex"; import {mapMutations, mapGetters} from "vuex";
export default { export default {
data: () => ({ data: () => ({
headers: [ headers: [
{ {
sortable: false, sortable: false,
text: "TestType Name", text: "TestType Name",
value: "name" value: "name"
}, },
{ {
sortable: false, sortable: false,
text: "TestType UniqueId", text: "TestType UniqueId",
value: "uniqueId" value: "uniqueId"
}, },
{ {
sortable: false, sortable: false,
text: "Register TestType", text: "Register TestType",
value: "users" value: "users"
}, },
{ {
sortable: false, sortable: false,
text: "Date", text: "Date",
value: "date" value: "date"
}, },
{ {
sortable: false, sortable: false,
text: "Action", text: "Action",
value: "action", value: "action",
align: "right" align: "right"
} }
], ],
items: [], items: [],
filter: { filter: {
name: "", name: "",
unique_id: "", unique_id: "",
user_name: "", user_name: "",
fromPicker: "", fromPicker: "",
upToPicker: "" upToPicker: ""
}, },
fromMenu: "", fromMenu: "",
upToMenu: "", upToMenu: "",
currentPage: 1, currentPage: 1,
lastPage: 1 lastPage: 1
}), }),
created() { created() {
this.load(); this.load();
}, },
methods: { methods: {
...mapMutations("modal", ["changeCurrentModal"]), ...mapMutations("modal", ["changeCurrentModal"]),
async load(page = 1) { async load(page = 1) {
let filter = "?"; let filter = "?";
for (const key in this.filter) { for (const key in this.filter) {
if (this.filter.hasOwnProperty(key)) { if (this.filter.hasOwnProperty(key)) {
filter += `${key}=${this.filter[key]}&`; filter += `${key}=${this.filter[key]}&`;
} }
} }
filter += page ? `page=${page}` : `page=1`; filter += page ? `page=${page}` : `page=1`;
const result = await ApiService.get(urls.listTestType(filter)); const result = await ApiService.get(urls.listTestType(filter));
if (result && result.status == 200) { if (result && result.status == 200) {
this.items = result.data.data.data; this.items = result.data.data.data;
this.currentPage = result.data.data.current_page; this.currentPage = result.data.data.current_page;
this.lastPage = result.data.data.last_page; this.lastPage = result.data.data.last_page;
} }
}, },
async remove(id) { async remove(id) {
const result = await ApiService.delete(urls.deleteTestType(id)); const result = await ApiService.delete(urls.deleteTestType(id));
if (result.status == 200) { if (result.status == 200) {
for (const key in this.items) { for (const key in this.items) {
if ( if (
this.items.hasOwnProperty(key) && this.items.hasOwnProperty(key) &&
this.items[key].id == id this.items[key].id == id
) { ) {
this.items.splice(key, 1); this.items.splice(key, 1);
} }
} }
} }
}, },
async generateBarcode(code, type) { async generateBarcode(code, type) {
const result = await ApiService.post(urls.Barcode(code, type)); const result = await ApiService.post(urls.Barcode(code, type));
if (result && result.status == 200) { if (result && result.status == 200) {
this.changeCurrentModal({ this.changeCurrentModal({
modal: "modal-barcode-barcode", modal: "modal-barcode-barcode",
properties: { result } properties: {result}
}); });
} }
} }
}, },
watch: { watch: {
currentPage(page) { currentPage(page) {
this.load(page); this.load(page);
} }
} }
}; };
</script> </script>
<style lang="css" scoped> <style lang="css" scoped>
.WM-ActionButton { .WM-ActionButton {
padding: 8px 22px; padding: 8px 22px;
} }
.v-btn--floating { .v-btn--floating {
padding: 0!important; padding: 0 !important;
} }
.theme--light.v-btn.v-btn--flat { .theme--light.v-btn.v-btn--flat {
color: rgba(0,0,0,.87)!important; color: rgba(0, 0, 0, .87) !important;
} }
.v-btn--floating, .v-btn--icon:before { .v-btn--floating, .v-btn--icon:before {
border-radius: 50%!important; border-radius: 50% !important;
} }
</style> </style>
src/views/User/List.vue
+46 -45
View File
@@ -2,51 +2,51 @@
<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-5 mb-3"> <v-layout align-center justify-center wrap class="px-5 mb-3">
<v-flex xs12 md3 sm3 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> <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="py-3 pr-3" color="black" name="name" label="Name"
v-model="filter.name"></v-text-field> v-model="filter.name"/>
</v-flex> </v-flex>
<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3"> <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3">
<v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"></v-icon> <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="py-3 pr-3" v-model="filter.medical_center_id" label="Hospital" color="black"
:items="medicalCenters" item-text="name" item-value="id"></v-autocomplete> :items="medicalCenters" item-text="name" item-value="id"/>
</v-flex> </v-flex>
<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3"> <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3">
<v-icon class="fa fa-phone mr-2 WM-Margin-B-8"></v-icon> <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="py-3 pr-3" color="black" name="CellPhone" label="CellPhone"
v-model="filter.cell_number"></v-text-field> v-model="filter.cell_number"/>
</v-flex> </v-flex>
<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3"> <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3">
<v-icon class="fa fa-check mr-2 WM-Margin-B-8"></v-icon> <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="py-3 pr-3" color="black" name="role" label="Role" :items="roles"
v-model="filter.role"></v-select> v-model="filter.role"/>
</v-flex> </v-flex>
</v-layout> <!-- </v-layout>
<v-layout class="px-5 mb-3"> <v-layout class="px-5 mb-3">-->
<v-flex xs12 sm12 md2 class="WM-FlexCenter"> <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-menu lazy :close-on-content-click="true" transition="v-scale-transition" offset-y <v-menu lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
v-model="fromMenu"> 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-text-field> v-model="filter.fromPicker"/>
<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()"></v-date-picker> :date-format="date => new Date(date).toDateString()"/>
</v-menu> </v-menu>
</v-flex> </v-flex>
<v-flex xs12 sm12 md2 class="WM-FlexCenter pl-3"> <v-flex xs12 sm6 md6 lg3 xl2 class="WM-FlexCenter pl-3">
<v-icon class="far fa-calendar-alt mr-2"></v-icon> <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 lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
v-model="upToMenu"> 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-text-field> 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()"></v-date-picker> :date-format="date => new Date(date).toDateString()"/>
</v-menu> </v-menu>
</v-flex> </v-flex>
<!-- <v-spacer></v-spacer> --> <v-spacer/>
<v-flex wrap xs12 md2 sm12 class="WM-Align-R ml-4"> <v-flex wrap xs12 sm12 class="WM-Align-R ml-4">
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load(undefined)"> <v-btn class="WM-CyanBlueGradient-BG" style="padding:9px 30px" @click="load(undefined)">
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon> <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
<span class="white--text">Filter</span> <span class="white--text">Filter</span>
</v-btn> </v-btn>
@@ -54,13 +54,13 @@
</v-layout> </v-layout>
<v-layout class="px-4 my-3"> <v-layout class="px-4 my-3">
<v-divider></v-divider> <v-divider/>
</v-layout> </v-layout>
<v-layout align-center justify-center wrap class="px-5 my-2"> <v-layout align-center justify-center wrap class="px-5 my-2">
<v-flex xs12 md12 sm12> <v-flex xs12 md12 sm12>
<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"/>
</template> </template>
<template slot="items" slot-scope="{ item }"> <template slot="items" slot-scope="{ item }">
<td class="headline font-weight-light"> <td class="headline font-weight-light">
@@ -77,9 +77,9 @@
<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' ? 'green' : 'red'"
@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'">
<v-icon class="white--text mr-2 caption">fa fa-pause</v-icon> <v-icon class="white--text mr-2 caption">fa fa-pause</v-icon>
<span v-if="item.status == 'Active'">Suspended</span> <span v-if="item.status == 'Active'">Suspended</span>
@@ -96,8 +96,8 @@
<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="orange darken-1"
@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="white--text mr-2 caption">fas fa-user-tag</v-icon>
<span>Role</span> <span>Role</span>
</v-btn> </v-btn>
@@ -107,7 +107,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" v-if="$hasRole('Admin')" <v-btn v-bind="attrs" v-on="on" color="pink" v-if="$hasRole('Admin')"
class="WM-ActionButton" @click="remove(item.id)"> class="WM-ActionButton" @click="remove(item.id)">
<v-icon class="white--text mr-2 caption">fas fa-times</v-icon> <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
<span>Remove</span> <span>Remove</span>
</v-btn> </v-btn>
@@ -120,10 +120,10 @@
</v-flex> </v-flex>
</v-layout> </v-layout>
<v-layout class="px-4 my-3"> <v-layout class="px-4 my-3">
<v-divider></v-divider> <v-divider/>
</v-layout> </v-layout>
<div class="text-xs-center mt-2" v-if="lastPage > 1"> <div class="text-xs-center mt-2" v-if="lastPage > 1">
<v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination> <v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"/>
</div> </div>
<v-layout row wrap align-center justify-center class="mt-3"> <v-layout row wrap align-center justify-center class="mt-3">
<router-link :to="{ name: 'Dashboard' }"> <router-link :to="{ name: 'Dashboard' }">
@@ -138,10 +138,11 @@
</template> </template>
<script> <script>
import { urls } from "@/config/urls"; import {urls} from "@/config/urls";
import { ApiService } from "@/services"; import {ApiService} from "@/services";
import { mapMutations, mapGetters } from "vuex"; import {mapMutations, mapGetters} from "vuex";
import { roles } from "@/config/utils"; import {roles} from "@/config/utils";
export default { export default {
data: () => ({ data: () => ({
headers: [ headers: [
@@ -207,7 +208,7 @@ export default {
this.currentPage = result.data.data.current_page; this.currentPage = result.data.data.current_page;
this.lastPage = result.data.data.last_page; this.lastPage = result.data.data.last_page;
} else { } else {
this.$router.push({ name: `Dashboard` }); this.$router.push({name: `Dashboard`});
} }
}, },
async changeStatus(userId) { async changeStatus(userId) {
@@ -219,14 +220,14 @@ export default {
} }
} }
} else { } else {
this.$router.push({ name: `Dashboard` }); this.$router.push({name: `Dashboard`});
} }
}, },
...mapMutations("modal", ["changeCurrentModal", "closeModal"]), ...mapMutations("modal", ["changeCurrentModal", "closeModal"]),
changeRoleModal(user) { changeRoleModal(user) {
this.changeCurrentModal({ this.changeCurrentModal({
modal: "modal-user-role", modal: "modal-user-role",
properties: { user } properties: {user}
}); });
}, },
async remove(userId) { async remove(userId) {
@@ -242,7 +243,7 @@ export default {
if (result && result.status == 200) { if (result && result.status == 200) {
for (const key in this.items) { for (const key in this.items) {
if ( if (
this.items[key].id == userId this.items[key].id == userId
) { ) {
this.items.splice(key, 1); this.items.splice(key, 1);
} }
src/views/User/MyInfo.vue
+134 -137
View File
@@ -1,146 +1,143 @@
<template> <template>
<v-form ref="form"> <v-form ref="form">
<v-container grid-list-xs fluid> <v-container grid-list-xs fluid>
<material-card color="black" title="My Info"> <material-card color="black" title="My Info">
<v-layout align-center justify-center wrap class="px-5 my-3"> <v-layout align-center justify-center wrap class="px-5 my-3">
<v-flex xs12 md4 sm4 class="WM-FlexCenter"> <v-flex xs12 sm6 md6 lg3 class="WM-FlexCenter">
<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon> <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
<v-text-field <v-text-field
name="name" name="name"
label="Name" label="Name"
color="black" color="black"
v-model="user.name" v-model="user.name"
:rules="[rules.required, rules.counter]" :rules="[rules.required, rules.counter]"
class="py-3 pr-3" class="py-3 pr-3"
></v-text-field> />
</v-flex> </v-flex>
<v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3"> <v-flex xs12 sm6 md6 lg3 class="WM-FlexCenter pl-3">
<v-icon class="fa fa-male mr-2 WM-Margin-B-8"></v-icon> <v-icon class="fa fa-male mr-2 WM-Margin-B-8"/>
<v-select <v-select
:items="items" :items="items"
label="Gender" label="Gender"
name="gender" name="gender"
v-model="user.gender" v-model="user.gender"
single-line single-line
:rules="[rules.required]" :rules="[rules.required]"
class="py-3 pr-3" class="py-3 pr-3"
color="black" color="black"
></v-select> />
</v-flex> </v-flex>
<v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3"> <v-flex xs12 sm6 md6 lg3 class="WM-FlexCenter pl-3">
<v-icon class="fa fa-phone mr-2 WM-Margin-B-8"></v-icon> <v-icon class="fa fa-phone mr-2 WM-Margin-B-8"/>
<v-text-field <v-text-field
name="cellnumber" name="cellnumber"
label="Cell Number" label="Cell Number"
v-model="user.cell_number" v-model="user.cell_number"
color="black" color="black"
class="py-3 pr-3" class="py-3 pr-3"
disabled disabled
></v-text-field> />
</v-flex> </v-flex>
</v-layout> <v-flex xs12 sm6 md6 lg3 class="WM-FlexCenter pl-3">
<v-layout align-center justify-center wrap class="px-5 mb-3"> <v-icon class="fa fa-envelope mr-2 WM-Margin-B-8"/>
<v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3"> <v-text-field
<v-icon class="fa fa-envelope mr-2 WM-Margin-B-8" style="margin-top:70px"></v-icon> name="emailaddress"
<v-text-field label="Email Address"
name="emailaddress" v-model="user.email"
label="Email Address" :rules="[rules.email]"
v-model="user.email" class="px-2"
:rules="[rules.email]" color="black"
class="px-2" />
color="black" </v-flex>
style="margin-top:72px" <v-flex xs12 sm12 md12>
></v-text-field> <v-textarea
</v-flex> prepend-icon="fa fa-sort-amount-desc"
<v-flex xs12 sm8 md8> color="black" rows="1"
<v-textarea :rules="[rules.counter]"
prepend-icon="fa fa-sort-amount-desc" v-model="user.address"
color="black" class="pa-2"
:rules="[rules.counter]" name="address">
v-model="user.address" <template v-slot:label>
class="pa-2" <div>Address</div>
name="address" </template>
> </v-textarea>
<template v-slot:label> </v-flex>
<div>Address</div> </v-layout>
</template> <v-layout row wrap justify-center align-center>
</v-textarea> <v-flex xs12 sm4 md4 lg2 class="text-md-center text-sm-center text-xs-center">
</v-flex> <router-link :to="{name: 'Dashboard'}">
</v-layout> <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
<v-layout row wrap justify-center align-center> <v-icon class="black--text">keyboard_arrow_left</v-icon>
<v-flex xs12 md2 sm2 class="text-md-center text-xs-center"> <span class="black--text">Back</span>
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="saveInfo()"> </v-btn>
<v-icon class="white--text mr-2 caption">fas fa-check</v-icon> </router-link>
<span class="white--text">SAVE</span> </v-flex>
</v-btn> <v-flex xs12 sm4 md4 lg3 class="text-md-center text-sm-center text-xs-center">
</v-flex> <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black" @click="changePassword">
<v-flex xs12 md3 sm3 class="text-md-center text-sm-center text-xs-center"> <v-icon class="black--text mr-1">fas fa-refresh</v-icon>
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black" @click="changePassword"> <span class="black--text"> Change Password </span>
<v-icon class="black--text mr-1">fas fa-refresh</v-icon> </v-btn>
<span class="black--text"> Change Password </span> </v-flex>
</v-btn> <v-flex xs12 sm4 md4 lg2 class="text-md-center text-xs-center">
</v-flex> <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="saveInfo()">
<v-flex xs12 md1 sm1 class="text-md-center text-sm-center text-xs-center"> <v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
<router-link :to="{name: 'Dashboard'}"> <span class="white--text">SAVE</span>
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black"> </v-btn>
<v-icon class="black--text">keyboard_arrow_left</v-icon> </v-flex>
<span class="black--text">Back</span> </v-layout>
</v-btn> </material-card>
</router-link> </v-container>
</v-flex> </v-form>
</v-layout>
</material-card>
</v-container>
</v-form>
</template> </template>
<script> <script>
import { ApiService } from "@/services"; import {ApiService} from "@/services";
import { urls } from "@/config/urls"; import {urls} from "@/config/urls";
import { mapMutations } from 'vuex'; import {mapMutations} from 'vuex';
export default { export default {
data() { data() {
return { return {
user: { user: {
cell_number: "", cell_number: "",
gender: "", gender: "",
name: "", name: "",
email: "", email: "",
address: "" address: ""
}, },
items: ["Male", "FeMale"], items: ["Male", "FeMale"],
rules: { rules: {
required: value => !!value || "Required.", required: value => !!value || "Required.",
counter: value => counter: value =>
!value || value.length == 0 || value.length >= 5 || "Min 5 characters", !value || value.length == 0 || value.length >= 5 || "Min 5 characters",
email: value => { email: value => {
if (value && value.length > 0) { if (value && value.length > 0) {
const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return pattern.test(value) || "Invalid e-mail."; return pattern.test(value) || "Invalid e-mail.";
} else{ } else {
return true; return true;
} }
} }
} }
}; };
},
created() {
this.user = this.$store.state.user;
},
methods: {
async saveInfo() {
if (this.$refs.form.validate()) {
const result = await ApiService.post(urls.updateInfo, this.user);
if (result && result.status == 200) {
this.$store.dispatch("info", {}, { root: true });
this.$router.push({ name: `Dashboard` });
}
}
}, },
...mapMutations('modal',['changeCurrentModal']), created() {
changePassword() { this.user = this.$store.state.user;
this.changeCurrentModal({ modal: "modal-auth-change-password" }); },
methods: {
async saveInfo() {
if (this.$refs.form.validate()) {
const result = await ApiService.post(urls.updateInfo, this.user);
if (result && result.status == 200) {
this.$store.dispatch("info", {}, {root: true});
this.$router.push({name: `Dashboard`});
}
}
},
...mapMutations('modal', ['changeCurrentModal']),
changePassword() {
this.changeCurrentModal({modal: "modal-auth-change-password"});
}
} }
}
}; };
</script> </script>