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