feat: confirmation

This commit is contained in:
saji_kk
2024-09-05 17:02:23 +03:30
parent c11ae8a447
commit 21c3410e25
6 changed files with 176 additions and 188 deletions
+46 -37
View File
@@ -13,7 +13,7 @@
</v-flex>
<v-spacer></v-spacer>
<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-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
<span class="black--text">Add</span>
@@ -28,10 +28,7 @@
<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="headline font-weight-light WM-NoLetterSpacing">{{ item.name }}</td>
@@ -39,35 +36,36 @@
<td class="title font-weight-light">{{ item.users_count }} Operator</td>
<td class="text-xs-right FlexBtn Height-MD-80 Height-SM-48">
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<router-link class="LinkBtn" :to="{name : 'EditMedicalCenter', params : {medicalCenter : item.id}}">
<v-btn v-bind="attrs" v-on="on" color="cyan" class="mr-2 WM-ActionButton">
<v-icon class="white--text mr-2 caption">fas fa-pen</v-icon>
<span>Edit</span>
</v-btn>
</router-link>
</template>
<span>Edit</span>
<template v-slot:activator="{ on, attrs }">
<router-link class="LinkBtn"
:to="{ name: 'EditMedicalCenter', params: { medicalCenter: item.id } }">
<v-btn v-bind="attrs" v-on="on" color="cyan" class="mr-2 WM-ActionButton">
<v-icon class="white--text mr-2 caption">fas fa-pen</v-icon>
<span>Edit</span>
</v-btn>
</router-link>
</template>
<span>Edit</span>
</v-tooltip>
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<router-link class="LinkBtn" :to="{name : 'OperatorList', params : {medicalCenter : item.id}}">
<v-btn v-bind="attrs" v-on="on" color="orange darken-1" class="mr-2 WM-ActionButton">
<v-icon class="white--text mr-2 caption">fas fa-user</v-icon>
<span>Operator</span>
</v-btn>
</router-link>
</template>
<span>Operator</span>
<template v-slot:activator="{ on, attrs }">
<router-link class="LinkBtn" :to="{ name: 'OperatorList', params: { medicalCenter: item.id } }">
<v-btn v-bind="attrs" v-on="on" color="orange darken-1" class="mr-2 WM-ActionButton">
<v-icon class="white--text mr-2 caption">fas fa-user</v-icon>
<span>Operator</span>
</v-btn>
</router-link>
</template>
<span>Operator</span>
</v-tooltip>
<v-tooltip bottom open-on-hover>
<template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on" color="pink" @click="remove(item.id)" class="WM-ActionButton">
<v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
<template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on" color="pink" @click="remove(item.id)" class="WM-ActionButton">
<v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
<span>Remove</span>
</v-btn>
</template>
<span>Remove</span>
</v-btn>
</template>
<span>Remove</span>
</v-tooltip>
</td>
</template>
@@ -79,7 +77,7 @@
<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="{name: 'Dashboard'}">
<router-link :to="{ name: '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>
@@ -93,6 +91,7 @@
<script>
import { ApiService } from "@/services";
import { urls } from "@/config/urls";
import { mapMutations } from 'vuex'
export default {
data: () => ({
headers: [
@@ -129,6 +128,7 @@ export default {
this.load();
},
methods: {
...mapMutations("modal", ["changeCurrentModal", "closeModal"]),
async load(page = 1) {
let filter = `?page=${page}&name=${this.filter.name}`;
const result = await ApiService.get(urls.listMedicalCenter(filter));
@@ -137,14 +137,23 @@ export default {
this.lastPage = result.data.data.last_page;
},
async remove(id) {
const result = await ApiService.delete(urls.deleteMedicalCenter(id));
if (result && result.status == 200) {
for (const key in this.items) {
if (this.items.hasOwnProperty(key) && this.items[key].id == id) {
this.items.splice(key, 1);
this.changeCurrentModal({
modal: "modal-user-confirmation",
properties: {
width: '30'
},
success: async () => {
const result = await ApiService.delete(urls.deleteMedicalCenter(id));
this.closeModal();
if (result && result.status == 200) {
for (const key in this.items) {
if (this.items[key].id == id) {
this.items.splice(key, 1);
}
}
}
}
}
},
});
}
},
watch: {