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" transition="dialog-bottom-transition"
scrollable 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 <v-toolbar
:prominent="false" :prominent="false"
flat flat
@ -62,6 +68,11 @@ export default {
type: String, type: String,
required: true required: true
}, },
loading: {
type: Boolean,
required: false,
default: false
},
slug: { slug: {
type: String, type: String,
required: true required: true

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

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