[admin][optim] load abuse reports and translation proposals client-side / async

This commit is contained in:
Andrea Vos 2022-07-30 16:37:39 +02:00
parent e83a2334ef
commit 3b5dfe2f38

View File

@ -156,60 +156,64 @@
</div> </div>
</section> </section>
<section v-if="$isGranted('translations') && translationProposals.length"> <template v-if="$isGranted('translations')">
<h3> <Loading :value="translationProposals"/>
<Icon v="language"/> <section v-if="translationProposals && translationProposals.length">
Translation proposals ({{translationProposals.length}}) <h3>
</h3> <Icon v="language"/>
Translation proposals ({{translationProposals.length}})
</h3>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-bordered"> <table class="table table-bordered">
<thead> <thead>
<tr> <tr>
<th>key</th> <th>key</th>
<th>base</th> <th>base</th>
<th>translation</th> <th>translation</th>
<th>author</th> <th>author</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="tp in translationProposals"> <tr v-for="tp in translationProposals">
<td>{{tp.tKey}}</td> <td>{{tp.tKey}}</td>
<td>{{translator.get(tp.tKey, false, true)}}</td> <td>{{translator.get(tp.tKey, false, true)}}</td>
<td v-if="Array.isArray(tp.tValue)"> <td v-if="Array.isArray(tp.tValue)">
<ul> <ul>
<li v-for="el in tp.tValue">{{el}}</li> <li v-for="el in tp.tValue">{{el}}</li>
</ul> </ul>
</td> </td>
<td v-else> <td v-else>
{{tp.tValue}} {{tp.tValue}}
</td> </td>
<td> <td>
<nuxt-link :to="`/@${tp.author}`">@{{tp.author}}</nuxt-link> <nuxt-link :to="`/@${tp.author}`">@{{tp.author}}</nuxt-link>
<br/> <br/>
<button class="btn btn-sm btn-danger" @click="rejectTranslationProposal(tp.id)">Reject</button> <button class="btn btn-sm btn-danger" @click="rejectTranslationProposal(tp.id)">Reject</button>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<details class="border mb-3"> <details class="border mb-3">
<summary class="bg-light p-3"> <summary class="bg-light p-3">
<span class="badge bg-success">Approve</span> <span class="badge bg-success">Approve</span>
</summary> </summary>
<div class="p-2"> <div class="p-2">
<p> <p>
We still need to manually move the translations to the relevant SUML file, We still need to manually move the translations to the relevant SUML file,
but at least it should be easy to copy paste bits from here: but at least it should be easy to copy paste bits from here:
</p> </p>
<hr/> <hr/>
<pre>{{translationsProposalsSuml}}</pre> <pre>{{translationsProposalsSuml}}</pre>
<hr/> <hr/>
<button class="btn btn-success" @click="markTranslationProposalsDone">Copied, mark as done</button> <button class="btn btn-success" @click="markTranslationProposalsDone">Copied, mark as done</button>
</div> </div>
</details> </details>
</section> </section>
</Loading>
</template>
<section v-if="$isGranted('users')"> <section v-if="$isGranted('users')">
<h3> <h3>
@ -219,7 +223,9 @@
</h3> </h3>
<ModerationRules type="rulesUsers" emphasise/> <ModerationRules type="rulesUsers" emphasise/>
<ModerationRules type="susRegexes" label="Keywords for automated triggers"/> <ModerationRules type="susRegexes" label="Keywords for automated triggers"/>
<AbuseReports :abuseReports="abuseReports" allowResolving/> <Loading :value="abuseReports">
<AbuseReports :abuseReports="abuseReports" allowResolving/>
</Loading>
</section> </section>
<section v-for="(locale, k) in stats.locales" :key="k"> <section v-for="(locale, k) in stats.locales" :key="k">
@ -291,6 +297,8 @@ import {deepSet, head} from "../src/helpers";
adminNotifications: this.$user().adminNotifications ?? 7, adminNotifications: this.$user().adminNotifications ?? 7,
translator, translator,
missingTranslations: translator.listMissingTranslations(), missingTranslations: translator.listMissingTranslations(),
abuseReports: undefined,
translationProposals: undefined,
} }
}, },
async asyncData({ app, store }) { async asyncData({ app, store }) {
@ -299,22 +307,19 @@ import {deepSet, head} from "../src/helpers";
stats = await app.$axios.$get(`/admin/stats`); stats = await app.$axios.$get(`/admin/stats`);
} catch {} } catch {}
let abuseReports = [];
try {
abuseReports = await app.$axios.$get(`/admin/reports`);
} catch {}
let translationProposals = [];
try {
translationProposals = await app.$axios.$get(`/translations/proposals`);
} catch {}
return { return {
stats, stats,
abuseReports,
translationProposals
}; };
}, },
async mounted() {
this.$axios.$get(`/admin/reports`)
.then(r => this.abuseReports = r)
.catch();
this.$axios.$get(`/translations/proposals`)
.then(r => this.translationProposals = r)
.catch();
},
methods: { methods: {
async impersonate(email) { async impersonate(email) {
const { token } = await this.$axios.$get(`/admin/impersonate/${encodeURIComponent(email)}`); const { token } = await this.$axios.$get(`/admin/impersonate/${encodeURIComponent(email)}`);
@ -343,11 +348,11 @@ import {deepSet, head} from "../src/helpers";
return r; return r;
}, },
abuseReportsActiveCount() { abuseReportsActiveCount() {
return this.abuseReports.filter(r => !r.isHandled).length; return this.abuseReports ? this.abuseReports.filter(r => !r.isHandled).length : '';
}, },
translationsProposalsSuml() { translationsProposalsSuml() {
const data = {}; const data = {};
for (let tp of this.translationProposals) { for (let tp of this.translationProposals || []) {
deepSet(data, tp.tKey, tp.tValue); deepSet(data, tp.tKey, tp.tValue);
} }
return new Suml().dump(data); return new Suml().dump(data);