pagesassos/panel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Activity

fix(Admin): better loading management and fetchOne system for OrganizationsList

Browse source
This commit is contained in:
Matthieu Bessat 2020-08-16 12:56:41 +02:00
parent fbb320fea6
commit 7816ceaa3d
2 changed files with 82 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/Preview.vue
View file

@ -6,7 +6,13 @@
transition="dialog-bottom-transition"
scrollable
>
<v-card tile>
<div
v-if="loading"
style="background: rgba(0, 0, 0, 0.8)"
class="d-flex py-8 justify-center align-center white--text">
<v-progress-circular class="my-8 py-8" indeterminate />
</div>
<v-card tile v-else>
<v-toolbar
:prominent="false"
flat
@ -62,6 +68,11 @@ export default {
type: String,
required: true
},
loading: {
type: Boolean,
required: false,
default: false
},
slug: {
type: String,
required: true

103
src/views/Admin/OrganizationList.vue
View file

@ -4,7 +4,7 @@
<v-data-table
:headers="headers"
:items="organizations"
:loading="isLoading"
:loading="tableLoading"
:options.sync="options"
:server-items-length="totalCount"
sort-by="validationState"
@ -186,7 +186,7 @@
<v-btn small icon color="success">
<v-icon
small
@click="openApproveModal(item)"
@click="openApproveModal(item._id)"
v-bind="attrs"
v-on="on"
>
@ -221,11 +221,19 @@
v-model="detailsModal"
max-width="600px"
:fullscreen="$vuetify.breakpoint.mobile">
<v-card>
<div
v-if="fetchOneLoading"
style="background: rgba(0, 0, 0, 0.8); height: 100%"
class="d-flex py-8 justify-center align-center white--text">
<v-progress-circular class="my-8 py-8" indeterminate />
</div>
<v-card class="limit-radius" v-if="toSeeItem != null && !fetchOneLoading">
<v-card-title>
Détails et actions sur l'association {{ toSeeItem.adminName }}
Détails sur "{{ toSeeItem.adminName }}"
</v-card-title>
<v-card-text :class="$vuetify.breakpoint.mobile ? 'mx-0' : ''">
<v-card-text
:class="$vuetify.breakpoint.mobile ? 'mx-0' : ''"
class="dense-modal-text">
<!-- show dates, status, current and published version page link, token -->
<!-- action: reset token, send email -->
<v-list two-line>
@ -246,16 +254,18 @@
</v-list-item-action>
</v-list-item>
<v-divider />
<v-list-item>
<v-list-item-icon>
<v-icon>label</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ toSeeItem._id }}</v-list-item-title>
<v-list-item-subtitle>Identifiant base de donnée</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<template v-if="$store.state.debugMode">
<v-divider />
<v-list-item>
<v-list-item-icon>
<v-icon>label</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ toSeeItem._id }}</v-list-item-title>
<v-list-item-subtitle>Identifiant base de donnée</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</template>
<v-divider />
<v-list-item>
@ -330,6 +340,7 @@
:id="toApproveItem._id"
:slug="toApproveItem.slugs[0]"
:dialogTitle="approveModalTitle"
:loading="fetchOneLoading"
@close="approveModal = false"
>
<v-btn outlined text dark class="warning" @click="openDiffModal()">
@ -347,7 +358,7 @@
</Preview>
<div class="diff-dialog">
<v-dialog max-width="900px" v-model="diffModal">
<v-card>
<v-card class="limit-radius">
<v-card-title>Comparaison des deux versions</v-card-title>
<v-card-text class="diff-content">
<div
@ -370,7 +381,7 @@
<v-dialog max-width="500px" v-model="rejectionModal">
<v-card>
<v-card-title>Indiquez la raison de ce refus</v-card-title>
<v-card-text>
<v-card-text class="dense-modal-text">
<v-textarea
:disabled="approved"
label="Description"
@ -475,7 +486,8 @@ export default {
diffText: '',
options: null,
totalCount: 0,
isLoading: false
tableLoading: false,
fetchOneLoading: false
}
},
@ -504,29 +516,39 @@ export default {
this.$store.commit('SET_TITLE', 'Gestion des associations')
if (this.$route.query.approval !== undefined) {
this.fetchOne(this.$route.query.approval).then((data) => {
if (data != null) {
this.$router.push({ query: {} })
this.openApproveModal(data)
}
})
this.$router.push({ query: {} })
this.openApproveModal(this.$route.query.approval)
// this.fetchOne(this.$route.query.approval).then((data) => {
// if (data != null) {
// this.$router.push({ query: {} })
// this.openApproveModal(data)
// }
// })
}
},
methods: {
fetchOne (id) {
let charged = false
setTimeout(() => {
if (!charged) {
this.fetchOneLoading = true
}
}, 300)
return new Promise(resolve => {
this.$apitator.get('/admin/organizations/' + id, {
withAuth: true
}).then(res => {
charged = true
this.fetchOneLoading = false
resolve(res.data.data)
})
})
},
fetchData () {
this.isLoading = true
this.tableLoading = true
let params = {}
if (this.options != null) {
params = {
@ -542,7 +564,7 @@ export default {
}).then(res => {
this.organizations = res.data.data.docs
this.totalCount = res.data.data.totalDocs
this.isLoading = false
this.tableLoading = false
})
},
@ -572,8 +594,11 @@ export default {
},
openDetailsModal (item) {
this.toSeeItem = item
this.detailsModal = true
this.toSeeItem = null
this.fetchOne(item._id).then(data => {
this.toSeeItem = data
})
},
close () {
@ -671,15 +696,20 @@ export default {
},
openPanel (item) {
const routeData = this.$router.resolve({ name: 'DelegateMain', query: { delegateToken: item.token } })
const routeData = this.$router.resolve({
name: 'DelegateMain',
query: { delegateToken: item.token }
})
window.open(routeData.href, '_blank').focus()
},
openApproveModal (item) {
this.$refs.preview.reload()
openApproveModal (itemId) {
this.approveModal = true
this.toApproveItem = item
this.approved = false
this.fetchOne(itemId).then((data) => {
this.$refs.preview.reload()
this.toApproveItem = data
this.approved = false
})
},
approve () {
@ -843,6 +873,11 @@ export default {
<style>
.limit-radius {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.diff-dialog .v-dialog {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
@ -861,5 +896,7 @@ export default {
.diff .remove {
background-color: #ffeef0;
}
.dense-modal-text {
padding-bottom: 0 !important;
}
</style>