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

fix pagination

Browse Source
This commit is contained in:
saji_kk
2024-09-05 15:59:30 +03:30
parent 789d378f7b
commit c11ae8a447
5 changed files with 13439 additions and 8758 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+13089 -8396
View File
File diff suppressed because it is too large Load Diff
src/views/Cycle/List.vue
+80 -118
View File
@@ -5,69 +5,36 @@
<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 md2 sm3 class="WM-FlexCenter">
<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon> <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
<v-text-field <v-text-field class="py-3 pr-3" v-model="filter.cycle_id" label="Cycle ID"
class="py-3 pr-3" color="black"></v-text-field>
v-model="filter.cycle_id"
label="Cycle ID"
color="black"
></v-text-field>
</v-flex> </v-flex>
<v-flex xs12 md2 sm3 class="WM-FlexCenter pl-3"> <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-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
<v-text-field <v-text-field class="py-3 pr-3" v-model="filter.sterilizer_id" label="Sterilizer ID"
class="py-3 pr-3" color="black"></v-text-field>
v-model="filter.sterilizer_id"
label="Sterilizer ID"
color="black"
></v-text-field>
</v-flex> </v-flex>
<v-flex xs12 md2 sm3 class="WM-FlexCenter pl-3"> <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-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
<v-text-field <v-text-field class="py-3 pr-3" v-model="filter.cycle_number" label="Cycle Number"
class="py-3 pr-3" color="black"></v-text-field>
v-model="filter.cycle_number"
label="Cycle Number"
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 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-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"></v-icon>
<v-autocomplete <v-autocomplete class="py-3 pr-3" v-model="filter.medical_center_id" item-text="name"
class="py-3 pr-3" item-value="id" label="Hospital" color="black" :items="medicalCenters"
v-model="filter.medical_center_id" :clearable="true"></v-autocomplete>
item-text="name"
item-value="id"
label="Hospital"
color="black"
:items="medicalCenters"
:clearable="true"
></v-autocomplete>
</v-flex> </v-flex>
<v-flex xs12 sm2 md2 class="WM-FlexCenter pl-3"> <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-icon class="far fa-calendar-alt mr-2 WM-Margin-B-8"></v-icon>
<v-menu <v-menu lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
lazy v-model="Menu">
:close-on-content-click="true" <v-text-field style="padding-top:0 !important" required slot="activator" label="Date"
transition="v-scale-transition" color="black" class="" v-model="filter.date">
offset-y </v-text-field>
v-model="Menu" <v-date-picker color="pink" no-title v-model="filter.date"
> :date-format="date => new Date(date).toDateString()"></v-date-picker>
<v-text-field style="padding-top:0 !important" </v-menu>
required </v-flex>
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>
</v-menu>
</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: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>
@@ -76,7 +43,7 @@
</v-flex> </v-flex>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-flex xs12 md2 sm2 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>
<span class="black--text">Add</span> <span class="black--text">Add</span>
@@ -85,76 +52,66 @@
</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-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="packages" hide-actions> <v-data-table :headers="headers" :items="packages" 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"
class="subheading font-weight-light text-white text--darken-3" v-text="header.text" />
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.id }}</td> <td class="headline font-weight-light">{{ item.id }}</td>
<td <td class="title font-weight-light">{{ (item.user && item.user.medical_center) ?
class="title font-weight-light" item.user.medical_center.name : '' }}</td>
>{{ (item.user && item.user.medical_center) ? item.user.medical_center.name : '' }}</td>
<td class="title font-weight-light">{{ item.sterilizer_id }}</td> <td class="title font-weight-light">{{ item.sterilizer_id }}</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.date }}</td> <td class="title font-weight-light">{{ item.date }}</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"
<v-icon class="white--text mr-1 caption">fas fa-eye</v-icon> @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> <span>Show</span>
</v-btn>
</template>
<span>Show</span>
</v-tooltip> </v-tooltip>
<v-tooltip bottom open-on-hover> <v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<router-link <router-link class="LinkBtn"
class="LinkBtn" v-if="$hasRole('Admin') || item.user_id == $store.state.user.id"
v-if="$hasRole('Admin') || item.user_id == $store.state.user.id" :to="{ name: 'EditCycle', params: { cycle: item.id } }">
:to="{name: 'EditCycle', params: {cycle: item.id}}" <v-btn v-bind="attrs" v-on="on" color="orange" class="mr-2">
> <v-icon class="white--text mr-1 caption">fas fa-pen</v-icon>
<v-btn v-bind="attrs" v-on="on" color="orange" class="mr-2"> <span>Edit</span>
<v-icon class="white--text mr-1 caption">fas fa-pen</v-icon> </v-btn>
<span>Edit</span> </router-link>
</v-btn> </template>
</router-link> <span>Edit</span>
</template>
<span>Edit</span>
</v-tooltip> </v-tooltip>
<v-tooltip bottom open-on-hover> <v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<v-btn <v-btn v-bind="attrs" v-on="on" color="pink" class="WM-ActionButton mr-2"
v-bind="attrs" v-on="on" @click="remove(item.id)"
color="pink" v-if="$hasRole('Admin') || item.user_id == $store.state.user.id">
class="WM-ActionButton mr-2" <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
@click="remove(item.id)" <span>Remove</span>
v-if="$hasRole('Admin') || item.user_id == $store.state.user.id" </v-btn>
> </template>
<v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
<span>Remove</span> <span>Remove</span>
</v-btn>
</template>
<span>Remove</span>
</v-tooltip> </v-tooltip>
<v-tooltip bottom open-on-hover> <v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<v-btn <v-btn v-bind="attrs" v-on="on" color="orange darken-1"
v-bind="attrs" v-on="on" @click="generateBarcode(item.id, 'Cycle')">
color="orange darken-1" <v-icon class="white--text mr-1 caption">fas fa-barcode</v-icon>
@click="generateBarcode(item.id, 'Cycle')"> <span>Generate Barcode</span>
<v-icon class="white--text mr-1 caption">fas fa-barcode</v-icon> </v-btn>
</template>
<span>Generate Barcode</span> <span>Generate Barcode</span>
</v-btn>
</template>
<span>Generate Barcode</span>
</v-tooltip> </v-tooltip>
</td> </td>
</template> </template>
@@ -163,7 +120,8 @@
</v-layout> </v-layout>
<v-divider></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"></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">
@@ -191,9 +149,9 @@ export default {
value: "Cycle ID" value: "Cycle ID"
}, },
{ {
sortable: true, sortable: true,
text: "Hospital", text: "Hospital",
value: "Hospital" value: "Hospital"
}, },
{ {
sortable: true, sortable: true,
@@ -241,9 +199,10 @@ export default {
urls.listCycle(filter) urls.listCycle(filter)
); );
if (result && result.status == 200) { if (result && result.status == 200) {
this.packages = result.data.data.data; const { data, meta } = result.data;
this.currentPage = result.data.data.current_page; this.packages = data;
this.lastPage = result.data.data.last_page; this.currentPage = meta.current_page;
this.lastPage = meta.last_page;
} }
this.loadMedicalCenters(); this.loadMedicalCenters();
}, },
@@ -283,10 +242,10 @@ export default {
} }
}, },
async loadMedicalCenters() { async loadMedicalCenters() {
const result = await ApiService.get(urls.listFilterItemsTestResult); const result = await ApiService.get(urls.listFilterItemsTestResult);
if (result && result.status == 200) { if (result && result.status == 200) {
this.medicalCenters = result.data.data.MedicalCenters; this.medicalCenters = result.data.data.MedicalCenters;
} }
}, },
}, },
computed: { computed: {
@@ -301,12 +260,15 @@ export default {
</script> </script>
<style> <style>
.v-btn--floating { .v-btn--floating {
padding: 0!important; padding: 0 !important;
} }
.theme--light.v-btn.v-btn--flat { .theme--light.v-btn.v-btn--flat {
color: rgba(0,0,0,.87)!important; color: rgba(0, 0, 0, .87) !important;
} }
.v-btn--floating, .v-btn--icon:before {
border-radius: 50%!important; .v-btn--floating,
.v-btn--icon:before {
border-radius: 50% !important;
} }
</style> </style>
src/views/Label/List.vue
+4 -3
View File
@@ -195,9 +195,10 @@ 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) {
this.items = result.data.data.data; const { data, meta } = result.data;
this.currentPage = result.data.data.current_page; this.items = data;
this.lastPage = result.data.data.last_page; this.currentPage = meta.current_page;
this.lastPage = meta.last_page;
} }
this.loadMedicalCenters(); this.loadMedicalCenters();
}, },
src/views/Package/List.vue
+4 -3
View File
@@ -208,9 +208,10 @@ export default {
urls.listPackage(filter) urls.listPackage(filter)
); );
if (result && result.status == 200) { if (result && result.status == 200) {
this.items = result.data.data.data; const { data, meta } = result.data;
this.currentPage = result.data.data.current_page; this.items = data;
this.lastPage = result.data.data.last_page; this.currentPage = meta.current_page;
this.lastPage = meta.last_page;
} }
this.loadMedicalCenters(); this.loadMedicalCenters();
}, },
src/views/TestResult/List.vue
+262 -238
View File
@@ -1,60 +1,73 @@
<template> <template>
<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 mb-3 my-3">
<v-flex xs12 md2 sm3 class="WM-FlexCenter"> <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-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
<v-text-field class="py-3 pr-3" v-model="filter.device_id" label="ID" color="black"></v-text-field> <v-text-field class="py-3 pr-3" v-model="filter.device_id" label="ID"
</v-flex> color="black"></v-text-field>
<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3"> </v-flex>
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon> <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
<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> <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
</v-flex> <v-autocomplete :items="deviceLabels" item-text="name" item-value="id"
<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3"> v-model="filter.device_label" label="ID Label" color="black" class="py-3 pr-3"
<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon> :clearable="true"></v-autocomplete>
<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> </v-flex>
</v-flex> <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
<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-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"></v-icon> <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.medicalCenter_id" label="Hospital" color="black" :items="medicalCenters" item-text="name" item-value="id" :clearable="true"></v-autocomplete> color="black" :items="testTypes" item-text="name" item-value="id"></v-autocomplete>
</v-flex> </v-flex>
<v-flex xs12 md2 sm3 class="WM-FlexCenter"> <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-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"></v-icon>
<v-text-field class="py-3 pr-3" v-model="filter.user_name" label="User Name" color="black"></v-text-field> <v-autocomplete class="py-3 pr-3" v-model="filter.medicalCenter_id" label="Hospital"
</v-flex> color="black" :items="medicalCenters" item-text="name" item-value="id"
<v-flex xs12 sm6 md2 pl-3 class="WM-FlexCenter"> :clearable="true"></v-autocomplete>
<v-icon class="far fa-calendar-alt mr-2"></v-icon> </v-flex>
<v-menu lazy :close-on-content-click="true" transition="v-scale-transition" offset-y v-model="fromMenu"> <v-flex xs12 md2 sm3 class="WM-FlexCenter">
<v-text-field class="py-3 pr-3" required slot="activator" label="FromDate" v-model="filter.fromPicker" color="black"></v-text-field> <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
<v-date-picker color="pink" no-title v-model="filter.fromPicker" :date-format="date => new Date(date).toDateString()"></v-date-picker> <v-text-field class="py-3 pr-3" v-model="filter.user_name" label="User Name"
</v-menu> color="black"></v-text-field>
</v-flex> </v-flex>
<v-flex xs12 sm6 md2 pl-3 style="display: flex;align-items: center;"> <v-flex xs12 sm6 md2 pl-3 class="WM-FlexCenter">
<v-icon class="far fa-calendar-alt mr-2"></v-icon> <v-icon class="far fa-calendar-alt mr-2"></v-icon>
<v-menu lazy :close-on-content-click="true" transition="v-scale-transition" offset-y v-model="upToMenu"> <v-menu lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
<v-text-field class="py-3 pr-3" required slot="activator" label="UpToDate" color="black" v-model="filter.upToPicker"></v-text-field> v-model="fromMenu">
<v-date-picker color="pink" no-title v-model="filter.upToPicker" :date-format="date => new Date(date).toDateString()"></v-date-picker> <v-text-field class="py-3 pr-3" required slot="activator" label="FromDate"
</v-menu> v-model="filter.fromPicker" color="black"></v-text-field>
</v-flex> <v-date-picker color="pink" no-title v-model="filter.fromPicker"
<v-flex xs12 md3 sm3 class="WM-XL-Align-L text-lg-left"> :date-format="date => new Date(date).toDateString()"></v-date-picker>
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load(null, null)"> </v-menu>
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon> </v-flex>
<span class="white--text">Filter</span> <v-flex xs12 sm6 md2 pl-3 style="display: flex;align-items: center;">
</v-btn> <v-icon class="far fa-calendar-alt mr-2"></v-icon>
</v-flex> <v-menu lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
<v-spacer></v-spacer> v-model="upToMenu">
<v-flex wrap xs12 md2 sm2 class="WM-Align-R"> <v-text-field class="py-3 pr-3" required slot="activator" label="UpToDate" color="black"
<router-link :to="{name: 'SubmitTestResult'}"> v-model="filter.upToPicker"></v-text-field>
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black"> <v-date-picker color="pink" no-title v-model="filter.upToPicker"
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon> :date-format="date => new Date(date).toDateString()"></v-date-picker>
<span class="black--text">Add</span> </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-icon class="white--text mr-2 caption">fas fa-search</v-icon>
<span class="white--text">Filter</span>
</v-btn> </v-btn>
</router-link> </v-flex>
</v-flex> <v-spacer></v-spacer>
</v-layout> <v-flex wrap xs12 md2 sm2 class="WM-Align-R">
<v-layout wrap class="px-5 mb-3 my-3"> <router-link :to="{ name: 'SubmitTestResult' }">
<!-- <v-flex class xs12 md3 sm3 class="WM-XL-Align-L text-lg-left"> <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:10px 60px" @click="load(null, null)"> <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> <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>
@@ -69,100 +82,110 @@
</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-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>
<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"
</template> v-text="header.text" />
<template slot="items" slot-scope="{ item }"> </template>
<td class="headline font-weight-light">{{ item.id }}</td> <template slot="items" slot-scope="{ item }">
<td class="title font-weight-light">{{ item.test_type ? item.test_type.name : 'Archived Test' }}</td> <td class="headline font-weight-light">{{ item.id }}</td>
<td class="title font-weight-light">{{ item.user.medical_center.name }}</td> <td class="title font-weight-light">{{ item.test_type ? item.test_type.name : 'Archived
<td class="title font-weight-light">{{ item.user.name }}</td> Test' }}</td>
<td class="title font-weight-light"> <td class="title font-weight-light">{{ item.user.medical_center.name }}</td>
<span v-if="item.result == 'Reject'" class="ResultMsg Reject"> <td class="title font-weight-light">{{ item.user.name }}</td>
{{ item.result }} <td class="title font-weight-light">
</span> <span v-if="item.result == 'Reject'" class="ResultMsg Reject">
<span v-else-if="item.result == 'Accept'" class="ResultMsg Accept"> {{ item.result }}
{{ item.result }} </span>
</span> <span v-else-if="item.result == 'Accept'" class="ResultMsg Accept">
</td> {{ item.result }}
<td class="title font-weight-light">{{ item.created_at }}</td> </span>
<td class="title font-weight-light"> </td>
<span v-if="item.verified == 'NotVerified'" class="NotVerified"> <td class="title font-weight-light">{{ item.created_at }}</td>
<v-icon class="caption fa fa-times NotVerified"></v-icon> <td class="title font-weight-light">
</span> <span v-if="item.verified == 'NotVerified'" class="NotVerified">
<span v-if="item.verified == 'Verified'" class=""> <v-icon class="caption fa fa-times NotVerified"></v-icon>
<v-icon class="caption fa fa-check Verified"></v-icon> </span>
</span> <span v-if="item.verified == 'Verified'" class="">
<!-- {{ item.verified }} --> <v-icon class="caption fa fa-check Verified"></v-icon>
</td> </span>
<td class="text-xs-right FlexBtn"> <!-- {{ item.verified }} -->
<v-tooltip bottom open-on-hover> </td>
<template v-slot:activator="{ on, attrs }"> <td class="text-xs-right FlexBtn">
<v-btn color="cyan" class="mr-2" @click="show(item.id)" v-bind="attrs" v-on="on"> <v-tooltip bottom open-on-hover>
<v-icon class="white--text mr-1 caption">fas fa-eye</v-icon> <template v-slot:activator="{ on, attrs }">
<span>Show</span> <v-btn color="cyan" class="mr-2" @click="show(item.id)" v-bind="attrs"
</v-btn> v-on="on">
</template> <v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
<span>Show</span> <span>Show</span>
</v-tooltip>
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<v-btn color="orange" class="mr-2" @click="generateBarcode(item.id, 'TestResult')" v-bind="attrs" v-on="on">
<v-icon class="white--text mr-1 caption">fa fa-bars</v-icon>
<span>generate Barcode</span>
</v-btn>
</template>
<span>generate Barcode</span>
</v-tooltip>
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<!-- v-if="$hasRole('Admin') || item.user_id == $store.state.user.id" -->
<router-link class="LinkBtn" v-if="$hasRole('Admin') || (item.user_id == $store.state.user.id && item.verified == 'None')" :to="{name: 'EditTestResult', params: {testResult: item.id}}">
<v-btn color="orange" class="mr-2" v-bind="attrs" v-on="on">
<v-icon class="white--text mr-1 caption">fas fa-pen</v-icon>
<span>Edit</span>
</v-btn> </v-btn>
</router-link> </template>
</template> <span>Show</span>
<span>Edit</span> </v-tooltip>
</v-tooltip> <v-tooltip bottom open-on-hover>
<v-tooltip bottom open-on-hover> <template v-slot:activator="{ on, attrs }">
<template v-slot:activator="{ on, attrs }"> <v-btn color="orange" class="mr-2"
<!-- v-if="$hasRole('Admin') || item.user_id == $store.state.user.id" --> @click="generateBarcode(item.id, 'TestResult')" v-bind="attrs"
<v-btn color="pink" class="WM-ActionButton" @click="remove(item.id)" v-if="$hasRole('Admin') || (item.user_id == $store.state.user.id && item.verified == 'None')" v-bind="attrs" v-on="on"> v-on="on">
<v-icon class="white--text mr-2 caption">fas fa-times</v-icon> <v-icon class="white--text mr-1 caption">fa fa-bars</v-icon>
<span>Remove</span> <span>generate Barcode</span>
</v-btn> </v-btn>
</template> </template>
<span>Remove</span> <span>generate Barcode</span>
</v-tooltip> </v-tooltip>
</td> <v-tooltip bottom open-on-hover>
</template> <template v-slot:activator="{ on, attrs }">
</v-data-table> <!-- v-if="$hasRole('Admin') || item.user_id == $store.state.user.id" -->
</v-flex> <router-link class="LinkBtn"
</v-layout> v-if="$hasRole('Admin') || (item.user_id == $store.state.user.id && item.verified == 'None')"
<v-divider></v-divider> :to="{ name: 'EditTestResult', params: { testResult: item.id } }">
<div class="text-xs-center mt-2" v-if="lastPage > 1"> <v-btn color="orange" class="mr-2" v-bind="attrs" v-on="on">
<v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination> <v-icon class="white--text mr-1 caption">fas fa-pen</v-icon>
</div> <span>Edit</span>
<v-layout row wrap align-center justify-center class="mt-3"> </v-btn>
<router-link to="/dashboard"> </router-link>
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5"> </template>
<v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon> <span>Edit</span>
<span class="black--text">Back</span> </v-tooltip>
</v-btn> <v-tooltip bottom open-on-hover>
</router-link> <template v-slot:activator="{ on, attrs }">
</v-layout> <!-- v-if="$hasRole('Admin') || item.user_id == $store.state.user.id" -->
</material-card> <v-btn color="pink" class="WM-ActionButton" @click="remove(item.id)"
</v-container> v-if="$hasRole('Admin') || (item.user_id == $store.state.user.id && item.verified == 'None')"
</div> v-bind="attrs" v-on="on">
<v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
<span>Remove</span>
</v-btn>
</template>
<span>Remove</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>
</div>
</template> </template>
<script> <script>
@@ -179,46 +202,46 @@ import {
export default { export default {
data: () => ({ data: () => ({
headers: [{ headers: [{
sortable: false, sortable: false,
text: "ID", text: "ID",
value: "name" value: "name"
}, },
{ {
sortable: false, sortable: false,
text: "Test Type", text: "Test Type",
value: "TestType" value: "TestType"
}, },
{ {
sortable: false, sortable: false,
text: "Hospital", text: "Hospital",
value: "Hospital" value: "Hospital"
}, },
{ {
sortable: false, sortable: false,
text: "User", text: "User",
value: "Users" value: "Users"
}, },
{ {
sortable: false, sortable: false,
text: "Result", text: "Result",
value: "result" value: "result"
}, },
{ {
sortable: false, sortable: false,
text: "Date", text: "Date",
value: "date" value: "date"
}, },
{ {
sortable: false, sortable: false,
text: "Verify", text: "Verify",
value: "verify" value: "verify"
}, },
{ {
sortable: false, sortable: false,
text: "Action", text: "Action",
value: "action", value: "action",
align: "left" align: "left"
} }
], ],
filter: { filter: {
device_id: '', device_id: '',
@@ -237,53 +260,53 @@ export default {
testTypes: [], testTypes: [],
medicalCenters: [], medicalCenters: [],
deviceLabels: [{ deviceLabels: [{
name: "Washer ID", name: "Washer ID",
id: "Washer ID" id: "Washer ID"
}, },
{ {
name: "Autoclave ID", name: "Autoclave ID",
id: "Autoclave ID" id: "Autoclave ID"
}, },
{ {
name: "Sterilizer ID", name: "Sterilizer ID",
id: "Sterilizer ID" id: "Sterilizer ID"
}, },
{ {
name: "Seal Machine ID", name: "Seal Machine ID",
id: "Seal Machine ID" id: "Seal Machine ID"
}, },
{ {
name: "Patiant ID", name: "Patiant ID",
id: "Patiant ID" id: "Patiant ID"
}, },
{ {
name: "Set/Pack ID", name: "Set/Pack ID",
id: "Set/Pack ID" id: "Set/Pack ID"
}, },
{ {
name: "Medical Device ID", name: "Medical Device ID",
id: "Medical Device ID" id: "Medical Device ID"
}, },
{ {
name: "OR ID", name: "OR ID",
id: "OR ID" id: "OR ID"
}, },
{ {
name: "Personal ID", name: "Personal ID",
id: "Personal ID" id: "Personal ID"
}, },
{ {
name: "Instrument ID", name: "Instrument ID",
id: "Instrument ID" id: "Instrument ID"
}, },
{ {
name: "Basket ID", name: "Basket ID",
id: "Basket ID" id: "Basket ID"
}, },
{ {
name: "Implant ID", name: "Implant ID",
id: "Implant ID" id: "Implant ID"
}, },
] ]
}), }),
created() { created() {
@@ -311,9 +334,10 @@ export default {
urls.listTestResult(filter) urls.listTestResult(filter)
); );
if (result && result.status == 200) { if (result && result.status == 200) {
this.items = result.data.data.data; const { data, meta } = result.data;
this.currentPage = result.data.data.current_page; this.items = data;
this.lastPage = result.data.data.last_page; this.currentPage = meta.current_page;
this.lastPage = meta.last_page;
} }
}, },
async show(testResultId) { async show(testResultId) {