From 9bce4bd5c8f96632424e45c80a9d3b1a87dc6ea6 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Thu, 12 May 2022 15:20:46 +0200
Subject: [PATCH] ui: user memberships route

---
 app/views/console/settings/index.phtml |  8 ++--
 app/views/console/users/team.phtml     |  6 +--
 app/views/console/users/user.phtml     | 55 ++++++++++++++++++++++++++
 3 files changed, 62 insertions(+), 7 deletions(-)

diff --git a/app/views/console/settings/index.phtml b/app/views/console/settings/index.phtml
index bae6ff3d03..aed016b17b 100644
--- a/app/views/console/settings/index.phtml
+++ b/app/views/console/settings/index.phtml
@@ -532,8 +532,8 @@ $smtpEnabled = $this->getParam('smtpEnabled', false);
 
                                         <input name="teamId" type="hidden" data-ls-bind="{{member.teamId}}">
                                         <input name="url" type="hidden" data-ls-bind="{{env.ENDPOINT}}/auth/join?project={{router.params.project}}" />
-                                        <input name="email" type="hidden" data-ls-bind="{{member.email}}">
-                                        <input name="name" type="hidden" data-ls-bind="{{member.name}}">
+                                        <input name="email" type="hidden" data-ls-bind="{{member.userEmail}}">
+                                        <input name="name" type="hidden" data-ls-bind="{{member.userName}}">
                                         <input name="roles" type="hidden" data-ls-bind="{{member.roles}}" data-cast-to="json">
                                     </form>
                                 </div>
@@ -541,9 +541,9 @@ $smtpEnabled = $this->getParam('smtpEnabled', false);
                                 <img src="" data-ls-attrs="src={{member|avatar}}" data-size="200" alt="User Avatar" class="avatar pull-start margin-end" loading="lazy" width="60" height="60" />
 
                                 <div class="margin-bottom-tiny">
-                                    <span data-ls-bind="{{member.name}}"></span> &nbsp;&nbsp;<span class="tag" data-ls-bind="{{member.roles.0}}"></span> &nbsp;&nbsp;<span data-ls-if="false === {{member.confirm}}" class="tag red">Pending Approval</span>
+                                    <span data-ls-bind="{{member.userName}}"></span> &nbsp;&nbsp;<span class="tag" data-ls-bind="{{member.roles.0}}"></span> &nbsp;&nbsp;<span data-ls-if="false === {{member.confirm}}" class="tag red">Pending Approval</span>
                                 </div>
-                                <span class="text-size-small text-fade" data-ls-bind="{{member.email}}"></span>
+                                <span class="text-size-small text-fade" data-ls-bind="{{member.userEmail}}"></span>
                             </li>
                         </ul>
                     </div>
diff --git a/app/views/console/users/team.phtml b/app/views/console/users/team.phtml
index 608d494819..c7c3f84b88 100644
--- a/app/views/console/users/team.phtml
+++ b/app/views/console/users/team.phtml
@@ -111,14 +111,14 @@
                                                 <button class="danger">Remove</button>
                                             </form>
 
-                                            <img src="" data-ls-attrs="src={{member|avatar}}" data-size="200" alt="User Avatar" class="avatar pull-start margin-end" loading="lazy" width="60" height="60" />
+                                            <img src="" data-ls-attrs="src={{member.userName|avatar}}" data-size="200" alt="User Avatar" class="avatar pull-start margin-end" loading="lazy" width="60" height="60" />
 
                                             <div class="margin-bottom-tiny">
-                                                <a data-ls-attrs="href=/console/users/user?id={{member.userId}}&project={{router.params.project}}"><span data-ls-bind="{{member.name}}"></span></a> &nbsp;&nbsp;
+                                                <a data-ls-attrs="href=/console/users/user?id={{member.userId}}&project={{router.params.project}}"><span data-ls-bind="{{member.userName}}"></span></a> &nbsp;&nbsp;
                                                 <span data-ls-if="1 == {{member.roles.length}}" class="text-fade tooltip" data-ls-bind="{{member.roles.length}} role" data-ls-attrs="data-tooltip={{member.roles|arraySentence}}"></span>
                                                 <span  data-ls-if="2 <= {{member.roles.length}}" class="text-fade tooltip" data-ls-bind="{{member.roles.length}} roles" data-ls-attrs="data-tooltip={{member.roles|arraySentence}}"></span>
                                             </div>
-                                            <small class="text-size-small text-fade" data-ls-bind="{{member.email}}"></small> &nbsp;&nbsp;<span data-ls-if="false === {{member.confirm}}" class="text-danger text-size-small">Pending Approval</span>
+                                            <small class="text-size-small text-fade" data-ls-bind="{{member.userEmail}}"></small> &nbsp;&nbsp;<span data-ls-if="false === {{member.confirm}}" class="text-danger text-size-small">Pending Approval</span>
                                         </li>
                                     </ul>
                                 </div>
diff --git a/app/views/console/users/user.phtml b/app/views/console/users/user.phtml
index 7c12e1b75e..435dba1bd1 100644
--- a/app/views/console/users/user.phtml
+++ b/app/views/console/users/user.phtml
@@ -332,6 +332,61 @@
                     </div>
                 </div>
             </li>
+            <li data-state="/console/users/user/memberships?id={{router.params.id}}&project={{router.params.project}}">
+                <h2>Memberships</h2>
+
+                <div
+                    data-service="users.getMemberships"
+                    data-name="memberships"
+                    data-param-user-id="{{router.params.id}}"
+                    data-event="load,users.update">
+
+                    <div class="box margin-top margin-bottom" data-ls-if="{{memberships.length}} === 0" style="display: none" class="margin-top-xxl margin-bottom-xxl text-align-center">
+                        <h3 class="text-bold margin-bottom-no">No memberships available.</h3>
+                    </div>
+
+                    <div data-ls-if="0 != {{memberships.total}}">
+                        <div class="margin-bottom-small margin-end-small text-align-end text-size-small margin-top-negative text-fade"><span data-ls-bind="{{memberships.total}}"></span> memberships found</div>
+
+                        <div class="box margin-bottom">
+                            <ul data-ls-loop="memberships.memberships" data-ls-as="membership" class="list">
+                                <li class="clear">
+                                    <form class="pull-end"
+                                        data-analytics
+                                        data-analytics-activity
+                                        data-analytics-event="submit"
+                                        data-analytics-category="console"
+                                        data-analytics-label="Delete Team Membership"
+                                        data-service="teams.deleteMembership"
+                                        data-event="submit"
+                                        data-success="alert,trigger"
+                                        data-confirm="Are you sure you want to remove that user from the team?"
+                                        data-success-param-alert-text="Member Removed Successfully"
+                                        data-success-param-trigger-events="teams.deleteMembership"
+                                        data-failure="alert"
+                                        data-failure-param-alert-text="Failed to Remove Member"
+                                        data-failure-param-alert-classname="error">
+
+                                        <input name="teamId" data-ls-attrs="id={{membership.$id}}" type="hidden" data-ls-bind="{{router.params.id}}">
+                                        <input name="membershipId" data-ls-attrs="id=leave-membershipId-{{membership.$id}}" type="hidden" data-ls-bind="{{membership.$id}}">
+
+                                        <button class="danger">Remove</button>
+                                    </form>
+                                    <div class="pull-start margin-end">
+                                        <img src="" data-ls-attrs="src={{membership.teamName|avatar}},alt={{membership.teamName}}" data-size="60" class="avatar margin-end pull-start" loading="lazy" width="60" height="60" />
+                                    </div>
+                                    <a data-ls-attrs="href=/console/users/teams/team?id={{membership.teamId}}&project={{router.params.project}}" data-ls-bind="{{membership.teamName}}"></a>
+                                    <div class="margin-top-small">
+                                        <span data-ls-if="1 == {{membership.roles.length}}" class="text-fade tooltip" data-ls-bind="{{membership.roles.length}} role" data-ls-attrs="data-tooltip={{membership.roles|arraySentence}}"></span>
+                                        <span  data-ls-if="2 <= {{membership.roles.length}}" class="text-fade tooltip" data-ls-bind="{{membership.roles.length}} roles" data-ls-attrs="data-tooltip={{membership.roles|arraySentence}}"></span>
+                                        <span data-ls-if="false === {{membership.confirm}}" class="text-danger text-size-small">Pending Approval</span>
+                                    </div>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </li>
             <li data-state="/console/users/user/sessions?id={{router.params.id}}&project={{router.params.project}}">
                 <h2>Sessions</h2>