app/packs/src/decidim/direct_verifications/admin/participants.js
class VerificationUI {
constructor($table, config) {
this.$table = $table;
this.svgPath = $table.find("use[href]:first").attr("href").split("#")[0];
this.icon = "icon-key";
this.config = config;
this.$table.on("click", ".show-verifications-modal", (e) => this.toggleModal(e));
this.addModal();
}
addModal() {
this.$modal = $(`<div class="reveal" id="show-verifications-modal" data-reveal>
<div class="reveal__header">
<h3 class="reveal__title">${this.config.modalTitle}</h3>
<button class="close-button" data-close aria-label="${this.config.closeModalLabel}"
type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="row">
<div class="columns medium-4 medium-centered modal-body">
</div>
</div>
</div>`);
this.$table.after(this.$modal);
this.$title = $("#user-groups .card-title:first");
this.$modalBody = this.$modal.find(".modal-body");
this.reveal = new Foundation.Reveal(this.$modal);
}
drawButtons() {
this.$table.find("tbody tr").each((idx, tr) => {
const $lastTd = $(tr).find("td:last");
$lastTd.prepend(`<a class="action-icon action-icon action-icon show-verifications-modal" title="${this.config.buttonTitle}" href="#open-show-verifications-modal"><span class="has-tip ${this.getTrStatus(tr)}"><svg aria-label="${this.config.buttonTitle}" role="img" class="icon--ban icon">
<title>${this.config.buttonTitle}</title>
<use href="${this.svgPath}#${this.icon}"></use>
</svg></span></a>`);
});
}
addStatsTitle() {
// Add upper link to verification stats
const $a = $(`<a class="button tiny button--title" href="${this.config.statsPath}">${this.config.statsLabel}</a>`);
$a.on("click", (e) => {
e.preventDefault();
this.loadUrl($a.attr("href"), true);
});
this.$title.append($a);
}
getTrStatus(tr) {
return this.getUserVerifications($(tr).data("user-id")).length
? "alert"
: "";
}
getVerification(id) {
return this.config.verifications.find((auth) => auth.id == id);
}
getUserVerifications(userId) {
return this.config.verifications.filter((auth) => auth.userId == userId);
}
toggleModal(e) {
const userId = $(e.target).closest("tr").data("user-id");
this.loadUrl(this.config.userVerificationsPath.replace("-ID-", userId));
}
loadUrl(url, large = false) {
this.$modal.removeClass("large");
if (large) {
this.$modal.addClass("large");
}
this.$modalBody.html('<span class="loading-spinner"></span>');
this.$modalBody.load(url);
this.$modal.foundation("toggle");
}
}
$(() => {
const ui = new VerificationUI($("#user-groups table.table-list"), DirectVerificationsConfig);
// Draw the icon buttons for checking verification statuses
ui.drawButtons();
ui.addStatsTitle();
});