fix : style

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
+51 -42
View File
@@ -3,40 +3,37 @@
<v-container fluid>
<material-card class color="black" title="All Packages" text>
<v-layout align-center wrap class="mt-3 px-5">
<v-flex xs12 md3 sm3 class="WM-FlexCenter">
<v-flex xs12 sm6 md4 lg3 xl2 class="WM-FlexCenter">
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
<v-text-field class="py-3 pr-3" v-model="filter.package_id" label="Package ID"
color="black"/>
color="black"/>
</v-flex>
<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
<v-flex xs12 sm6 md4 lg3 xl2 class="WM-FlexCenter pl-3">
<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
<v-text-field class="py-3 pr-3" v-model="filter.name" label="Name" color="black"/>
</v-flex>
<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3" v-if="$hasRole('Admin')">
<v-flex xs12 sm6 md4 lg3 xl2 class="WM-FlexCenter pl-3" v-if="$hasRole('Admin')">
<v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"/>
<v-autocomplete class="py-3 pr-3" v-model="filter.medical_center_id" item-text="name"
item-value="id" label="Hospital" color="black" :items="medicalCenters"
:clearable="true"/>
item-value="id" label="Hospital" color="black" :items="medicalCenters"
:clearable="true"/>
</v-flex>
<!-- <v-flex class xs12 md2 sm3>
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load()">
<v-btn class="WM-CyanBlueGradient-BG" style="padding:9px 30px" @click="load()">
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
<span class="white--text">Filter</span>
</v-btn>
</v-flex>
<v-spacer></v-spacer> -->
<!-- <v-spacer></v-spacer> -->
</v-layout>
<v-layout align-center wrap class="mb-3 px-5">
<v-flex class xs12 md2 sm3>
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load()">
<v-spacer/>
<v-flex class xs12 sm6 md6 lg2 xl1>
<v-btn class="WM-CyanBlueGradient-BG" style="padding:9px 30px" @click="load()">
<v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
<span class="white--text">Filter</span>
</v-btn>
</v-flex>
<v-spacer/>
<v-flex xs12 md2 sm2 class="text-xs-right ml-3">
<v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
<router-link :to="{ name: 'AddPackage' }">
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
<v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
@@ -44,6 +41,7 @@
</v-btn>
</router-link>
</v-flex>
</v-layout>
<v-layout class="px-4 my-3">
<v-divider/>
@@ -52,15 +50,20 @@
<v-flex md12>
<v-data-table :headers="headers" :items="items" hide-actions>
<template slot="headerCell" slot-scope="{ header }">
<span class="subheading font-weight-light text-white text--darken-3" v-text="header.text" />
<span class="subheading font-weight-light text-white text--darken-3"
v-text="header.text"/>
</template>
<template slot="items" slot-scope="{ item }">
<td class="title font-weight-light">{{ item.id }}</td>
<!-- <td class="title font-weight-light">{{ item.unique_id }}</td> -->
<td class="title font-weight-light">{{ item.name }}</td>
<td class="title font-weight-light">{{ (item.user && item.user.medical_center) ?
item.user.medical_center.name : '' }}</td>
<td class="title font-weight-light">{{ item.user ? item.user.name : '' | text_20_letter }}</td>
<td class="title font-weight-light">
{{ (item.user && item.user.medical_center) ? item.user.medical_center.name : '' }}
</td>
<td class="title font-weight-light">{{
item.user ? item.user.name : '' | text_20_letter
}}
</td>
<td class="title font-weight-light">{{ item.udi | text_20_letter }}</td>
<td class="title font-weight-light">{{ item.description }}</td>
<td class="title font-weight-light">{{ item.status }}</td>
@@ -68,22 +71,27 @@
<v-tooltip bottom open-on-hover v-if="$hasRole('Admin|Supervisor')">
<template v-slot:activator="{ on, attrs }">
<v-btn :color="!['suspended', 'rejected'].includes(item.status) ? 'red' : 'green'"
class="mr-2" @click="changeStatus(item)" v-bind="attrs" v-on="on">
class="mr-2" @click="changeStatus(item)" v-bind="attrs" v-on="on">
<v-icon class="white--text mr-1 caption">
fas {{!['suspended', 'rejected'].includes(item.status) ? 'fa-close' : 'fa-check' }}
fas {{
!['suspended', 'rejected'].includes(item.status) ? 'fa-close' : 'fa-check'
}}
</v-icon>
<span>
{{ !['suspended', 'rejected'].includes(item.status) ? 'reject' : 'approve' }}
{{
!['suspended', 'rejected'].includes(item.status) ? 'reject' : 'approve'
}}
</span>
</v-btn>
</template>
<span>{{ !['suspended', 'rejected'].includes(item.status) ? 'reject' : 'approve'
<span>{{
!['suspended', 'rejected'].includes(item.status) ? 'reject' : 'approve'
}}</span>
</v-tooltip>
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on" color="cyan" class="mr-2"
@click="show(item.id)">
@click="show(item.id)">
<v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
<span>Show</span>
</v-btn>
@@ -93,8 +101,8 @@
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<router-link class="LinkBtn"
v-if="$hasRole('Admin') || item.user_id == $store.state.user.id"
:to="{ name: 'EditPackage', params: { package: item.id } }">
v-if="$hasRole('Admin') || item.user_id == $store.state.user.id"
:to="{ name: 'EditPackage', params: { package: item.id } }">
<v-btn v-bind="attrs" v-on="on" color="orange" class="mr-2">
<v-icon class="white--text mr-1 caption">fas fa-pen</v-icon>
<span>Edit</span>
@@ -106,8 +114,8 @@
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on" color="pink" class="WM-ActionButton mr-2"
@click="remove(item.id)"
v-if="$hasRole('Admin') || item.user_id == $store.state.user.id">
@click="remove(item.id)"
v-if="$hasRole('Admin') || item.user_id == $store.state.user.id">
<v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
<span>Remove</span>
</v-btn>
@@ -117,7 +125,7 @@
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<v-btn class="mr-2" v-bind="attrs" v-on="on" color="orange darken-1"
@click="generateBarcode(item, 'Package')">
@click="generateBarcode(item, 'Package')">
<v-icon class="white--text mr-1 caption">fas fa-barcode</v-icon>
<span>Generate Barcode</span>
</v-btn>
@@ -131,7 +139,8 @@
</v-layout>
<v-divider/>
<div class="text-xs-center" v-if="lastPage > 1">
<v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination>
<v-pagination color="black" v-model="currentPage" :length="lastPage"
:total-visible="6"></v-pagination>
</div>
<v-layout row wrap align-center justify-center class="mt-3">
<router-link to="/dashboard">
@@ -147,9 +156,9 @@
</template>
<script>
import { ApiService } from "@/services";
import { urls } from "@/config/urls";
import { mapMutations, mapGetters } from "vuex";
import {ApiService} from "@/services";
import {urls} from "@/config/urls";
import {mapMutations, mapGetters} from "vuex";
import toast from "@/services/global/toast.service";
export default {
@@ -226,10 +235,10 @@ export default {
}
filter += (page) ? `page=${page}` : `page=1`;
const result = await ApiService.get(
urls.listPackage(filter)
urls.listPackage(filter)
);
if (result && result.status == 200) {
const { data, meta } = result.data;
const {data, meta} = result.data;
this.items = data;
this.currentPage = meta.current_page;
this.lastPage = meta.last_page;
@@ -238,24 +247,24 @@ export default {
},
async show(testResultId) {
const result = await ApiService.get(
urls.showPackage(testResultId)
urls.showPackage(testResultId)
);
if (result && result.status == 200) {
this.changeCurrentModal({
modal: "modal-package-show",
properties: { result }
properties: {result}
});
}
},
async remove(testResultId) {
const result = await ApiService.delete(
urls.removePackage(testResultId)
urls.removePackage(testResultId)
);
if (result && result.status == 200) {
for (const key in this.items) {
if (
this.items.hasOwnProperty(key) &&
this.items[key].id == testResultId
this.items.hasOwnProperty(key) &&
this.items[key].id == testResultId
) {
this.items.splice(key, 1);
}
@@ -269,7 +278,7 @@ export default {
if (result && result.status == 200) {
this.changeCurrentModal({
modal: "modal-barcode-barcode",
properties: { result }
properties: {result}
});
}
} else {
@@ -312,8 +321,8 @@ export default {
getModalResult(testResult) {
for (const key in this.items) {
if (
this.items.hasOwnProperty(key) &&
this.items[key].id == testResult.id
this.items.hasOwnProperty(key) &&
this.items[key].id == testResult.id
) {
this.items[key] = testResult;
}