From c37303ccf4daf100008760efa5e497e887965acf Mon Sep 17 00:00:00 2001
From: Sandro Lutz <code@temparus.ch>
Date: Sat, 17 Mar 2018 23:43:40 +0100
Subject: [PATCH] Add confirm button to withdraw group membership
---
src/components/Button.js | 5 +++
src/views/profile.js | 70 +++++++++++++++++++++++++++++-----------
2 files changed, 57 insertions(+), 18 deletions(-)
diff --git a/src/components/Button.js b/src/components/Button.js
index f21678f0..04c39da9 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -7,6 +7,11 @@ ButtonCSS.addStyle('.blue-button', {
color_light_text: 'white',
});
+ButtonCSS.addStyle('.flat-button', {
+ color_light_background: 'white',
+ color_light_text: 'gray',
+});
+
/**
* Generic button component
*
diff --git a/src/views/profile.js b/src/views/profile.js
index 0b6afdaf..b0612c8d 100644
--- a/src/views/profile.js
+++ b/src/views/profile.js
@@ -166,43 +166,77 @@ class announceSubscriptionForm {
// shows group memberships and allows to withdraw and enroll for selected groups.
class groupMemberships {
- static oninit() {
+ oninit() {
groups.load({ allow_self_enrollment: true });
groups.loadMemberships();
this.busy = [];
+ this.confirm = [];
}
- static view() {
+ view() {
return m('div', [
m(
'div',
groups.getMemberships().map(membership => {
- const buttonArgs = {
- events: {
- onclick: () => {
- this.busy[membership.group._id] = true;
- groups
- .withdraw(membership._id, membership._etag)
- .then(() => {
- this.busy[membership.group._id] = false;
- })
- .catch(() => {
- this.busy[membership.group._id] = false;
- });
- },
- },
- };
+ const buttonArgs = {};
+ let buttons;
if (this.busy[membership.group._id]) {
buttonArgs.disabled = true;
}
+ if (this.confirm[membership.group._id]) {
+ buttons = [
+ m(Button, {
+ ...buttonArgs,
+ label: 'cancel',
+ className: 'flat-button',
+ events: {
+ onclick: () => {
+ this.confirm[membership.group._id] = false;
+ this.busy[membership.group._id] = false;
+ },
+ },
+ }),
+ m('span', ' '),
+ m(Button, {
+ ...buttonArgs,
+ label: 'confirm',
+ events: {
+ onclick: () => {
+ this.busy[membership.group._id] = true;
+ groups
+ .withdraw(membership._id, membership._etag)
+ .then(() => {
+ this.busy[membership.group._id] = false;
+ this.confirm[membership.group._id] = false;
+ })
+ .catch(() => {
+ this.busy[membership.group._id] = false;
+ this.confirm[membership.group._id] = false;
+ });
+ },
+ },
+ }),
+ ];
+ } else {
+ buttons = m(Button, {
+ ...buttonArgs,
+ label: 'withdraw',
+ events: {
+ onclick: () => {
+ this.confirm[membership.group._id] = true;
+ },
+ },
+ });
+ }
+
return m('div', [
m('span', membership.group.name),
membership.expiry === undefined
? undefined
: m('span', `(expires on ${membership.expiry})`),
- m(Button, { ...buttonArgs, label: 'withdraw' }),
+ buttons,
]);
})
),
--
GitLab