cssd-doc/cssd-front
1
0
Fork 0
mirror of https://git.meshkee.com/cssd/cssd-front.git synced 2026-10-14 05:43:17 +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
+24 -21
View File
@@ -3,9 +3,10 @@
<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"
:rules="[rules.required]"
class="py-3 pr-3"></v-text-field> class="py-3 pr-3"></v-text-field>
</v-flex> </v-flex>
<!-- <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3"> <!-- <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
@@ -19,24 +20,25 @@
class="py-3 pr-3" class="py-3 pr-3"
></v-text-field> ></v-text-field>
</v-flex> --> </v-flex> -->
<v-flex xs12 md4 sm4 class="WM-FlexCenter pl-3"> <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-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-text-field name="size" label="Size" color="black" v-model="formData.size"
class="py-3 pr-3"></v-text-field>
</v-flex> </v-flex>
<v-flex xs12 md4 sm4 class="WM-FlexCenter pl-3"> <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-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" <v-text-field name="specific" label="Specific" color="black" v-model="formData.specific"
class="py-3 pr-3"></v-text-field> class="py-3 pr-3"></v-text-field>
</v-flex> </v-flex>
</v-layout> <v-flex xs12 sm6 md6 lg3 class="WM-FlexCenter">
<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-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"
:rules="[rules.required]"
class="py-3 pr-3"></v-text-field> class="py-3 pr-3"></v-text-field>
</v-flex> </v-flex>
<v-flex xs12 md8 sm8 class="WM-FlexCenter" v-if="galleryDataLoaded"> <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" <wm-Dropzone class="w-100" :Images="galleries" :BatchID="file_batch_id"
:ModelID="$route.params.Item"
ModelType="Item"></wm-Dropzone> ModelType="Item"></wm-Dropzone>
</v-flex> </v-flex>
</v-layout> </v-layout>
@@ -50,12 +52,6 @@
</v-flex> </v-flex>
</v-layout> </v-layout>
<v-layout row wrap justify-center align-center> <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"> <v-flex xs12 md2 sm2 class="text-md-center text-sm-center text-xs-center">
<router-link :to="{ name: 'AllItem' }"> <router-link :to="{ name: 'AllItem' }">
<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">
@@ -64,6 +60,13 @@
</v-btn> </v-btn>
</router-link> </router-link>
</v-flex> </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> </v-layout>
</material-card> </material-card>
</v-container> </v-container>
@@ -71,9 +74,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 } from 'vuex'; import {mapMutations} from 'vuex';
import Dropzone from '@/components/core/Dropzone' import Dropzone from '@/components/core/Dropzone'
export default { export default {
@@ -125,7 +128,7 @@ export default {
} }
if (result && result.status == 200) { if (result && result.status == 200) {
this.$router.push({ name: 'AllItem' }) this.$router.push({name: 'AllItem'})
} }
}, },
} }
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
+39 -31
View File
@@ -3,12 +3,13 @@
<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"
color="black"></v-text-field>
</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-icon>
<v-autocomplete <v-autocomplete
class="py-3 pr-3" class="py-3 pr-3"
@@ -22,22 +23,24 @@
: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"
color="black"></v-text-field>
</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.cycle_number" label="Cycle Number" color="black"></v-text-field> <v-text-field class="py-3" v-model="filter.cycle_number" label="Cycle Number"
color="black"></v-text-field>
</v-flex> </v-flex>
<v-flex xs12 md2 sm3> <v-spacer/>
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load()"> <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> <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: 'AddLabel'}"> <router-link :to="{name: 'AddLabel'}">
<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>
@@ -47,26 +50,28 @@
</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>
<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 <td class="title font-weight-light">
class="title font-weight-light" {{ (item.user && item.user.medical_center) ? item.user.medical_center.name : '' }}
>{{ (item.user && item.user.medical_center) ? item.user.medical_center.name : '' }}</td> </td>
<td class="title font-weight-light">{{ item.user ? item.user.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.cycle_number }}</td>
<td class="title font-weight-light">{{ item.sterilizer_id }}</td> <td class="title font-weight-light">{{ item.sterilizer_id }}</td>
<td class="text-xs-right FlexBtn Height-MD-60"> <td class="text-xs-right FlexBtn Height-MD-60">
<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" @click="show(item.id)"> <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> <v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
<span>Show</span> <span>Show</span>
</v-btn> </v-btn>
@@ -78,8 +83,7 @@
<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>
@@ -95,8 +99,7 @@
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>
@@ -105,7 +108,8 @@
</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"
@click="generateBarcode(item.id, 'Label')">
<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>
@@ -117,9 +121,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" 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"/>
</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">
@@ -135,9 +140,10 @@
</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: [
@@ -153,7 +159,7 @@ export default {
}, },
{ {
sortable: false, sortable: false,
text: "User", text: "Owner",
value: "User" value: "User"
}, },
{ {
@@ -195,7 +201,7 @@ export default {
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;
@@ -221,7 +227,7 @@ export default {
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}
}); });
} }
}, },
@@ -245,7 +251,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}
}); });
} }
} }
@@ -274,9 +280,11 @@ export default {
.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;
src/views/MedicalCenter/List.vue
+5 -5
View File
@@ -3,16 +3,16 @@
<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>
<v-flex xs12 md2 sm2 class="text-xs-right"> <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: 'AddMedicalCenter' }"> <router-link :to="{ name: 'AddMedicalCenter' }">
<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>
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
+41 -61
View File
@@ -4,7 +4,7 @@
<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"
@@ -12,7 +12,7 @@
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>
@@ -23,21 +23,25 @@
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 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-flex xs12 md12 sm12></v-flex>
<!-- <v-row style="position: relative" v-for="(item, key) in formData.items" :key="key"> --> <!-- <v-row style="position: relative" v-for="(item, key) in formData.items" :key="key"> -->
<v-flex <v-flex xs12 md3 sm3 class="WM-FlexCenter WM-DuplicateInput"
xs12 style="position: relative" v-for="(item, key) in formData.items" :key="key">
md3
sm3
class="WM-FlexCenter WM-DuplicateInput"
style="position: relative"
v-for="(item, key) in formData.items"
:key="key"
>
<div class="Inner"> <div class="Inner">
<v-icon class="fas fa-check mr-2 WM-Margin-B-8"></v-icon> <v-icon class="fas fa-check mr-2 WM-Margin-B-8"/>
<v-autocomplete <v-autocomplete
@keydown.enter.native.prevent="duplicateForm(key)" @keydown.enter.native.prevent="duplicateForm(key)"
:ref="`selectItem-${key}`" :ref="`selectItem-${key}`"
@@ -48,8 +52,7 @@
item-value="id" item-value="id"
label="Select Items For Package" label="Select Items For Package"
color="black" color="black"
:filter="customFilter" :filter="customFilter">
>
<template v-slot:selection="{ item }"> <template v-slot:selection="{ item }">
{{ item.name }} - {{ item.udi }} {{ item.name }} - {{ item.udi }}
</template> </template>
@@ -65,9 +68,9 @@
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"
@@ -78,29 +81,17 @@
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
>
REMOVE
</v-btn> </v-btn>
</div> </div>
</v-flex> </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-row> -->
<v-spacer></v-spacer> <v-spacer/>
<v-flex xs12> <v-flex xs12>
<hr <hr class="v-divider theme--light" style="margin-top: 30px !important"/>
class="v-divider theme--light"
style="margin-top: 30px !important"
/>
</v-flex> </v-flex>
</v-layout> </v-layout>
<v-layout align-center justify-center wrap class="px-5 mb-3"> <v-layout align-center justify-center wrap class="px-5 mb-3">
@@ -109,8 +100,7 @@
color="black" color="black"
v-model="formData.note" v-model="formData.note"
class="pa-2" class="pa-2"
name="address" name="address">
>
<template v-slot:label> <template v-slot:label>
<div>description</div> <div>description</div>
</template> </template>
@@ -118,31 +108,20 @@
</v-flex> </v-flex>
</v-layout> </v-layout>
<v-layout row wrap justify-center align-center> <v-layout row wrap justify-center align-center>
<v-flex xs12 md2 sm2 class="text-md-center text-xs-center"> <v-flex xs12 md2 sm2 class="text-md-center text-sm-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' }"> <router-link :to="{ name: 'AllPackage' }">
<v-btn <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black"
>
<v-icon class="black--text">keyboard_arrow_left</v-icon> <v-icon class="black--text">keyboard_arrow_left</v-icon>
<span class="black--text">Back</span> <span class="black--text">Back</span>
</v-btn> </v-btn>
</router-link> </router-link>
</v-flex> </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> </v-layout>
</material-card> </material-card>
</v-container> </v-container>
@@ -150,9 +129,10 @@
</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 {
@@ -222,7 +202,7 @@ export default {
} }
if (result && result.status == 200) { if (result && result.status == 200) {
this.$router.push({ name: "AllPackage" }); this.$router.push({name: "AllPackage"});
} }
}, },
src/views/Package/List.vue
+34 -25
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>
@@ -70,14 +73,19 @@
<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>
@@ -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 {
@@ -229,7 +238,7 @@ export default {
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;
@@ -243,7 +252,7 @@ export default {
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}
}); });
} }
}, },
@@ -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 {
src/views/TestResult/AddEdit.vue
+74 -67
View File
@@ -3,8 +3,8 @@
<v-container grid-list-xs> <v-container grid-list-xs>
<material-card color="black" title="Submit Test Result"> <material-card color="black" title="Submit Test Result">
<v-layout wrap class="px-5 my-3" v-if="!$route.params.testResult"> <v-layout wrap class="px-5 my-3" v-if="!$route.params.testResult">
<v-flex xs12 md2 sm3 class="WM-FlexCenter"> <v-flex xs12 sm6 md4 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-autocomplete <v-autocomplete
:search-input.sync="searchInput" :search-input.sync="searchInput"
:items="testTypeNames" :items="testTypeNames"
@@ -12,37 +12,34 @@
label="Choose Test Type" label="Choose Test Type"
color="black" color="black"
class="py-3 pr-3" class="py-3 pr-3"
></v-autocomplete> />
</v-flex> </v-flex>
<v-flex xs12 md2 sm3 class="WM-FlexCenter ml-3"> <v-flex xs12 sm6 md4 lg3 xl2 class="WM-FlexCenter ml-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 <v-text-field
name="testcode" name="testcode"
v-model="filter.unique_code" v-model="filter.unique_code"
label="Or Enter Test Unique Code" label="Or Enter Test Unique Code"
color="black" color="black"
class="py-3 pr-3" class="py-3 pr-3"
></v-text-field> />
</v-flex> </v-flex>
<v-spacer/>
<!-- <v-spacer></v-spacer> --> <v-flex xs12 sm4 md4 lg3 xl2 class="text-xs-center text-sm-center text-md-center">
<v-flex xs12 md2 sm2 class="text-xs-center text-sm-center text-md-center"> <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"
@click="selectTestType" @click="selectTestType"
style="padding:10px 60px;" style="padding:10px 60px;">
>
<v-icon class="black--text mr-2 caption">fas fa-chevron-right</v-icon> <v-icon class="black--text mr-2 caption">fas fa-chevron-right</v-icon>
<span class="black--text">Select Test Result</span> <span class="black--text">Select Test Result</span>
</v-btn> </v-btn>
</v-flex> </v-flex>
</v-layout> </v-layout>
<v-layout row wrap class="px-5 my-3" v-if="!$route.params.testResult && form.length"> <v-layout row wrap class="px-5 my-3" v-if="!$route.params.testResult && form.length">
<v-divider></v-divider> <v-divider/>
</v-layout> </v-layout>
<v-layout wrap class="px-5 my-3" v-if="form.length"> <v-layout wrap class="px-5 my-3" v-if="form.length">
<v-flex xs12 sm12 md12> <v-flex xs12 sm12 md12>
<h3 class="WM-BorderLeftTitle">{{testTypeNameSelected}}</h3> <h3 class="WM-BorderLeftTitle">{{ testTypeNameSelected }}</h3>
</v-flex> </v-flex>
<!-- <v-flex xs12 sm3 md3> <!-- <v-flex xs12 sm3 md3>
<v-text-field <v-text-field
@@ -52,7 +49,7 @@
color="black" color="black"
class="pa-2" class="pa-2"
prepend-icon="fas fa-sort-numeric-up" prepend-icon="fas fa-sort-numeric-up"
></v-text-field> />
</v-flex> --> </v-flex> -->
<v-flex xs12 sm2 md2> <v-flex xs12 sm2 md2>
<v-menu <v-menu
@@ -61,36 +58,31 @@
transition="v-scale-transition" transition="v-scale-transition"
offset-y offset-y
v-model="menu" v-model="menu"
class="pa-2" class="pa-2">
>
<v-text-field style="padding-top:0 !important" <v-text-field style="padding-top:0 !important"
prepend-icon="far fa-calendar-alt" prepend-icon="far fa-calendar-alt"
required required
slot="activator" slot="activator"
label="Date" label="Date"
v-model="formData.date" v-model="formData.date"
color="black"/>
color="black"
></v-text-field>
<v-date-picker <v-date-picker
min="2020-01-01" min="2020-01-01"
color="pink" color="pink"
no-title no-title
v-model="formData.date" v-model="formData.date"
:date-format="date => new Date(formData.date).toDateString()" :date-format="date => new Date(formData.date).toDateString()"/>
></v-date-picker>
</v-menu> </v-menu>
</v-flex> </v-flex>
<v-flex xs12 sm2 md2> <v-flex xs12 sm2 md2>
<v-switch color="light-green accent-3" v-model="result" :label="'Result: ' + formData.result"></v-switch> <v-switch color="light-green accent-3" v-model="result" :label="'Result: ' + formData.result"/>
</v-flex> </v-flex>
<v-spacer></v-spacer> <v-spacer/>
<v-flex xs12 sm12 md12> <v-flex xs12 sm12 md12>
<template v-if="galleryDataLoaded"> <template v-if="galleryDataLoaded">
<wm-Dropzone :Images="galleries" :BatchID="file_batch_id" :ModelID="$route.params.testResult" ModelType="TestResult"></wm-Dropzone> <wm-Dropzone :Images="galleries" :BatchID="file_batch_id"
:ModelID="$route.params.testResult" ModelType="TestResult"/>
</template> </template>
</v-flex> </v-flex>
</v-layout> </v-layout>
@@ -113,7 +105,7 @@
min="0" min="0"
max="200" max="200"
thumb-label="always" thumb-label="always"
></v-slider> />
</v-flex> </v-flex>
</v-container> </v-container>
</v-layout> </v-layout>
@@ -129,7 +121,7 @@
:label="item.name" :label="item.name"
color="black" color="black"
prepend-icon="fa fa-align-left" prepend-icon="fa fa-align-left"
></v-text-field> />
</v-container> </v-container>
</v-layout> </v-layout>
</v-container> </v-container>
@@ -147,7 +139,7 @@
min="-1" min="-1"
max="3" max="3"
thumb-label="always" thumb-label="always"
></v-slider> />
</v-flex> </v-flex>
</v-container> </v-container>
</v-layout> </v-layout>
@@ -168,7 +160,7 @@
color="black" color="black"
item-text="title" item-text="title"
item-value="id" item-value="id"
></v-select> />
</v-flex> </v-flex>
</v-container> </v-container>
</v-layout> </v-layout>
@@ -186,7 +178,7 @@
:label="optionValue.title" :label="optionValue.title"
v-model="formData[item.name+'_'+item.id]" v-model="formData[item.name+'_'+item.id]"
:value="optionValue.id" :value="optionValue.id"
></v-checkbox> />
</v-flex> </v-flex>
</v-container> </v-container>
</v-layout> </v-layout>
@@ -204,7 +196,7 @@
:key="keyOption" :key="keyOption"
:label="optionValue.title" :label="optionValue.title"
:value="optionValue.id" :value="optionValue.id"
></v-radio> />
</v-radio-group> </v-radio-group>
</v-flex> </v-flex>
</v-container> </v-container>
@@ -221,7 +213,7 @@
color="light-green accent-3" color="light-green accent-3"
v-model="formData[item.name+'_'+item.id]" v-model="formData[item.name+'_'+item.id]"
:label="item.name + ': ' + formData[item.name+'_'+item.id].toString()" :label="item.name + ': ' + formData[item.name+'_'+item.id].toString()"
></v-switch> />
</v-flex> </v-flex>
</v-container> </v-container>
</v-layout> </v-layout>
@@ -240,7 +232,7 @@
thumb-label="always" thumb-label="always"
color="black" color="black"
prepend-icon="fa fa-sliders" prepend-icon="fa fa-sliders"
></v-slider> />
</v-flex> </v-flex>
</v-container> </v-container>
</v-layout> </v-layout>
@@ -259,14 +251,16 @@
mask="##:##" mask="##:##"
color="black" color="black"
prepend-icon="fa fa-clock-o" prepend-icon="fa fa-clock-o"
></v-text-field> />
</v-flex> </v-flex>
</v-container> </v-container>
</v-layout> </v-layout>
</v-container> </v-container>
<!-- <v-layout row wrap> <!-- <v-layout row wrap>
<template v-if="item.type == 'Form'"> --> <template v-if="item.type == 'Form'"> -->
<v-container row md-12 sm-12 xs-12 class="WM-Border WM-Border-LightGray WM-Padding-10 WM-BorderRadius-5" v-if="item.type == 'Form'"> <v-container row md-12 sm-12 xs-12
class="WM-Border WM-Border-LightGray WM-Padding-10 WM-BorderRadius-5"
v-if="item.type == 'Form'">
<v-layout row wrap> <v-layout row wrap>
<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3> <h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
</v-layout> </v-layout>
@@ -274,8 +268,7 @@
<v-flex <v-flex
:class="['pa-2', children.size]" :class="['pa-2', children.size]"
v-for="(children, keyChildren) in item.children" v-for="(children, keyChildren) in item.children"
:key="keyChildren" :key="keyChildren">
>
<v-container fluid v-if="children.type == 'Text'" class="WM-Padding-LR-0"> <v-container fluid v-if="children.type == 'Text'" class="WM-Padding-LR-0">
<p>{{ children.name }}</p> <p>{{ children.name }}</p>
<v-flex xs12> <v-flex xs12>
@@ -284,7 +277,7 @@
v-model="formData[children.name+'_'+children.id]" v-model="formData[children.name+'_'+children.id]"
:label="children.name" :label="children.name"
color="black" color="black"
></v-text-field> />
</v-flex> </v-flex>
</v-container> </v-container>
<v-container fluid v-if="children.type == 'Temperature'" class="WM-Padding-LR-0"> <v-container fluid v-if="children.type == 'Temperature'" class="WM-Padding-LR-0">
@@ -297,7 +290,7 @@
min="0" min="0"
max="200" max="200"
thumb-label="always" thumb-label="always"
></v-slider> />
</v-flex> </v-flex>
</v-container> </v-container>
<v-container fluid v-if="children.type == 'Pressure'" class="WM-Padding-LR-0"> <v-container fluid v-if="children.type == 'Pressure'" class="WM-Padding-LR-0">
@@ -310,7 +303,7 @@
step="0.01" step="0.01"
max="3" max="3"
thumb-label="always" thumb-label="always"
></v-slider> />
</v-flex> </v-flex>
</v-container> </v-container>
<v-container fluid v-if="children.type == 'Select'" class="WM-Padding-LR-0"> <v-container fluid v-if="children.type == 'Select'" class="WM-Padding-LR-0">
@@ -325,7 +318,7 @@
color="black" color="black"
item-text="title" item-text="title"
item-value="id" item-value="id"
></v-select> />
</v-flex> </v-flex>
</v-container> </v-container>
<v-container fluid v-if="children.type == 'Checkbox'" class="WM-Padding-LR-0"> <v-container fluid v-if="children.type == 'Checkbox'" class="WM-Padding-LR-0">
@@ -337,7 +330,7 @@
:label="optionValue.title" :label="optionValue.title"
v-model="formData[children.name+'_'+children.id]" v-model="formData[children.name+'_'+children.id]"
:value="optionValue.id" :value="optionValue.id"
></v-checkbox> />
</v-flex> </v-flex>
</v-container> </v-container>
<v-container fluid v-if="children.type == 'Radiobutton'" class="WM-Padding-LR-0"> <v-container fluid v-if="children.type == 'Radiobutton'" class="WM-Padding-LR-0">
@@ -349,7 +342,7 @@
:key="keyOption" :key="keyOption"
:label="optionValue.title" :label="optionValue.title"
:value="optionValue.id" :value="optionValue.id"
></v-radio> />
</v-radio-group> </v-radio-group>
</v-flex> </v-flex>
</v-container> </v-container>
@@ -360,7 +353,7 @@
color="light-green accent-3" color="light-green accent-3"
v-model="formData[children.name+'_'+children.id]" v-model="formData[children.name+'_'+children.id]"
:label="children.name + ': ' + formData[children.name+'_'+children.id].toString()" :label="children.name + ': ' + formData[children.name+'_'+children.id].toString()"
></v-switch> />
</v-flex> </v-flex>
</v-container> </v-container>
<v-container fluid v-if="children.type == 'Range'" class="WM-Padding-LR-0"> <v-container fluid v-if="children.type == 'Range'" class="WM-Padding-LR-0">
@@ -372,7 +365,7 @@
:max="children.options[1].title" :max="children.options[1].title"
thumb-label="always" thumb-label="always"
prepend-icon="fa fa-check" prepend-icon="fa fa-check"
></v-slider> />
</v-flex> </v-flex>
</v-container> </v-container>
<v-container fluid v-if="children.type == 'Time'" class="WM-Padding-LR-0"> <v-container fluid v-if="children.type == 'Time'" class="WM-Padding-LR-0">
@@ -384,7 +377,7 @@
class="WM-Font-30" class="WM-Font-30"
mask="##:##" mask="##:##"
prepend-icon="fa fa-clock-o" prepend-icon="fa fa-clock-o"
></v-text-field> />
</v-flex> </v-flex>
</v-container> </v-container>
</v-flex> </v-flex>
@@ -395,19 +388,23 @@
</v-flex> </v-flex>
</v-layout> </v-layout>
<v-layout row wrap class="px-5 my-3"> <v-layout row wrap class="px-5 my-3">
<v-divider></v-divider> <v-divider/>
</v-layout> </v-layout>
<v-layout align-center justify-center wrap class="px-5 mt-2"> <v-layout align-center justify-center wrap class="px-5 mt-2">
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="submitForm"> <v-flex class xs12 sm4 md3>
<v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
<span class="white--text">SAVE</span>
</v-btn>
<router-link :to="{name: 'AllResultTest'}"> <router-link :to="{name: 'AllResultTest'}">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5"> <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> <v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
<span class="black--text">Back</span> <span class="black--text">Back</span>
</v-btn> </v-btn>
</router-link> </router-link>
</v-flex>
<v-flex class xs12 sm4 md3>
<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> </v-layout>
</material-card> </material-card>
</v-container> </v-container>
@@ -415,11 +412,12 @@
</template> </template>
<script> <script>
import Dropzone from '@/components/core/Dropzone' import Dropzone from '@/components/core/Dropzone'
import { ApiService } from "@/services"; import {ApiService} from "@/services";
import { urls } from "@/config/urls"; import {urls} from "@/config/urls";
export default { export default {
components : { components: {
'wm-Dropzone' : Dropzone, 'wm-Dropzone': Dropzone,
}, },
data: () => ({ data: () => ({
galleryDataLoaded: false, galleryDataLoaded: false,
@@ -441,7 +439,7 @@ export default {
result: "Reject", result: "Reject",
img: null, img: null,
test_type_id: "", test_type_id: "",
date : "2020-01-01" date: "2020-01-01"
}, },
images: [], images: [],
menu: "", menu: "",
@@ -464,9 +462,8 @@ export default {
if (this.$route.params.testResult) { if (this.$route.params.testResult) {
this.filter.test_result_id = this.$route.params.testResult; this.filter.test_result_id = this.$route.params.testResult;
this.selectTestType(); this.selectTestType();
} } else {
else{ this.galleryDataLoaded = true;
this.galleryDataLoaded= true;
} }
this.load(); this.load();
}, },
@@ -573,7 +570,7 @@ export default {
} }
if (result && result.status == 200) { if (result && result.status == 200) {
this.$router.push({ name: "AllResultTest" }); this.$router.push({name: "AllResultTest"});
} }
}, },
onFileChange(e) { onFileChange(e) {
@@ -621,7 +618,7 @@ export default {
} }
}; };
</script> </script>
<style > <style>
.WM-Font-30 input { .WM-Font-30 input {
font-size: 30px !important; font-size: 30px !important;
} }
@@ -639,35 +636,45 @@ export default {
.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;
} }
.v-input--selection-controls__input { .v-input--selection-controls__input {
margin-right :0; margin-right: 0;
} }
.v-input--radio-group--column .v-radio:not(:last-child):not(:only-child) { .v-input--radio-group--column .v-radio:not(:last-child):not(:only-child) {
margin-bottom : 0; margin-bottom: 0;
} }
.v-input--radio-group--column .v-input--radio-group__input { .v-input--radio-group--column .v-input--radio-group__input {
flex-direction: row; flex-direction: row;
} }
.v-input--selection-controls .v-input__control { .v-input--selection-controls .v-input__control {
margin-right: 12px; margin-right: 12px;
} }
.v-input--selection-controls__input { .v-input--selection-controls__input {
margin-right: 7px; margin-right: 7px;
} }
.accent--text { .accent--text {
color: #E91E63 !important; color: #E91E63 !important;
caret-color: #E91E63 !important; caret-color: #E91E63 !important;
} }
.WM-Padding-LR-0 { .WM-Padding-LR-0 {
padding:24px 0; padding: 24px 0;
} }
.WM-BorderLeftTitle { .WM-BorderLeftTitle {
border-left: 1px solid; border-left: 1px solid;
padding-left: 5px; padding-left: 5px;
src/views/TestResult/List.vue
+42 -45
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,9 +67,9 @@
</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>
@@ -81,10 +82,10 @@
<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
+42 -54
View File
@@ -2,81 +2,69 @@
<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-icon class="far fa-calendar-alt mr-2"></v-icon>
<v-menu <v-menu
lazy lazy
:close-on-content-click="true" :close-on-content-click="true"
transition="v-scale-transition" transition="v-scale-transition"
offset-y offset-y
v-model="fromMenu" v-model="fromMenu" style="width: 100%">
>
<v-text-field <v-text-field
required required
slot="activator" slot="activator"
label="FromDate" label="FromDate"
v-model="filter.fromPicker" v-model="filter.fromPicker"
color="black" color="black"/>
></v-text-field>
<v-date-picker <v-date-picker
color="pink" color="pink"
no-title no-title
v-model="filter.fromPicker" v-model="filter.fromPicker"
:date-format="date => new Date(date).toDateString()" :date-format="date => new Date(date).toDateString()"/>
></v-date-picker>
</v-menu> </v-menu>
</v-flex> </v-flex>
<v-flex xs12 sm6 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-icon>
<v-menu <v-menu
lazy lazy
:close-on-content-click="true" :close-on-content-click="true"
transition="v-scale-transition" transition="v-scale-transition"
offset-y offset-y
v-model="upToMenu" v-model="upToMenu" style="width: 100%">
>
<v-text-field <v-text-field
required required
slot="activator" slot="activator"
label="UpToDate" label="UpToDate"
v-model="filter.upToPicker" v-model="filter.upToPicker"
color="black" color="black"/>
></v-text-field>
<v-date-picker <v-date-picker
color="pink" color="pink"
no-title no-title
v-model="filter.upToPicker" v-model="filter.upToPicker"
:date-format="date => new Date(date).toDateString()" :date-format="date => new Date(date).toDateString()"/>
></v-date-picker>
</v-menu> </v-menu>
</v-flex> </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"
@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>
</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: 'AddTestType'}"> <router-link :to="{name: 'AddTestType'}">
<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>
@@ -86,16 +74,13 @@
</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 justify-center wrap class="px-5 mt-3"> <v-layout align-center justify-center wrap class="px-5 mt-3">
<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 <span class="subheading font-weight-light text-white text--darken-3" v-text="header.text"/>
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">{{ item.name }}</td> <td class="headline font-weight-light">{{ item.name }}</td>
@@ -105,12 +90,11 @@
<td class="text-xs-right FlexBtn"> <td class="text-xs-right FlexBtn">
<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="item.test_results_count == 0" v-if="item.test_results_count == 0"
:to="{name : 'EditTestType', params : {testType : item.id}}" :to="{name : 'EditTestType', params : {testType : item.id}}">
> <v-btn color="cyan" class="mr-2 WM-ActionButton" v-bind="attrs" v-on="on">
<v-btn color="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> <v-icon class="white--text mr-2 caption">fas fa-pen</v-icon>
<span>Edit</span> <span>Edit</span>
</v-btn> </v-btn>
@@ -130,7 +114,8 @@
</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 color="orange darken-1" @click="generateBarcode(item.unique_code, 'TestType')" v-bind="attrs" <v-btn color="orange darken-1"
@click="generateBarcode(item.unique_code, 'TestType')" v-bind="attrs"
v-on="on"> v-on="on">
<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>
@@ -143,9 +128,9 @@
</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" :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="/dashboard"> <router-link to="/dashboard">
@@ -160,9 +145,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";
export default { export default {
data: () => ({ data: () => ({
@@ -245,7 +230,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}
}); });
} }
} }
@@ -262,13 +247,16 @@ export default {
.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
+39 -38
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">
@@ -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) {
src/views/User/MyInfo.vue
+37 -40
View File
@@ -3,8 +3,8 @@
<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"
@@ -12,10 +12,10 @@
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"
@@ -25,10 +25,10 @@
: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"
@@ -36,12 +36,10 @@
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-icon class="fa fa-envelope mr-2 WM-Margin-B-8" style="margin-top:70px"></v-icon>
<v-text-field <v-text-field
name="emailaddress" name="emailaddress"
label="Email Address" label="Email Address"
@@ -49,18 +47,16 @@
:rules="[rules.email]" :rules="[rules.email]"
class="px-2" class="px-2"
color="black" color="black"
style="margin-top:72px" />
></v-text-field>
</v-flex> </v-flex>
<v-flex xs12 sm8 md8> <v-flex xs12 sm12 md12>
<v-textarea <v-textarea
prepend-icon="fa fa-sort-amount-desc" prepend-icon="fa fa-sort-amount-desc"
color="black" color="black" rows="1"
:rules="[rules.counter]" :rules="[rules.counter]"
v-model="user.address" v-model="user.address"
class="pa-2" class="pa-2"
name="address" name="address">
>
<template v-slot:label> <template v-slot:label>
<div>Address</div> <div>Address</div>
</template> </template>
@@ -68,19 +64,7 @@
</v-flex> </v-flex>
</v-layout> </v-layout>
<v-layout row wrap justify-center align-center> <v-layout row wrap justify-center align-center>
<v-flex xs12 md2 sm2 class="text-md-center text-xs-center"> <v-flex xs12 sm4 md4 lg2 class="text-md-center text-sm-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'}"> <router-link :to="{name: 'Dashboard'}">
<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">keyboard_arrow_left</v-icon> <v-icon class="black--text">keyboard_arrow_left</v-icon>
@@ -88,6 +72,18 @@
</v-btn> </v-btn>
</router-link> </router-link>
</v-flex> </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> </v-layout>
</material-card> </material-card>
</v-container> </v-container>
@@ -95,9 +91,10 @@
</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 {
@@ -117,7 +114,7 @@ export default {
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;
} }
} }
@@ -132,14 +129,14 @@ export default {
if (this.$refs.form.validate()) { if (this.$refs.form.validate()) {
const result = await ApiService.post(urls.updateInfo, this.user); const result = await ApiService.post(urls.updateInfo, this.user);
if (result && result.status == 200) { if (result && result.status == 200) {
this.$store.dispatch("info", {}, { root: true }); this.$store.dispatch("info", {}, {root: true});
this.$router.push({ name: `Dashboard` }); this.$router.push({name: `Dashboard`});
} }
} }
}, },
...mapMutations('modal',['changeCurrentModal']), ...mapMutations('modal', ['changeCurrentModal']),
changePassword() { changePassword() {
this.changeCurrentModal({ modal: "modal-auth-change-password" }); this.changeCurrentModal({modal: "modal-auth-change-password"});
} }
} }
}; };