Accounts dashboard base UI for Feature: "Marketplace and Shop owners should be able to create custom permission groups"

client/modules/accounts/templates/dashboard/dashboard.html

@@ -1,44 +1,7 @@
 <template name="accountsDashboard">
   {{#if hasPermission 'accounts'}}
-
-    {{> memberForm}}
-    <div class="container-fluid-sm">
-
-      <div class="panel panel-default">
-        <div class="panel-heading">
-          <h3 class="panel-title">
-            <span data-i18n="accounts.shopMembers">Shop Members</span>
-          </h3>
-        </div>
-
-        <ul class="list-group">
-          {{#each members}}
-            {{#if isShopMember}}
-              <li class="list-group-item flex">
-                {{> member}}
-              </li>
-            {{/if}}
-          {{/each}}
-        </ul>
-      </div>
-
-      <div class="panel panel-default">
-        <div class="panel-heading">
-          <h3 class="panel-title">
-            <span data-i18n="accounts.guests">Guests</span>
-          </h3>
-        </div>
-
-        <ul class="list-group">
-          {{#each members}}
-            {{#if isShopGuest}}
-              <li class="list-group-item flex">
-                {{> member}}
-              </li>
-            {{/if}}
-          {{/each}}
-        </ul>
-      </div>
+    <div>
+      {{> React component=accountsDashboard }}
     </div>
   {{/if}}
 </template>

client/modules/accounts/templates/dashboard/dashboard.js

@@ -6,6 +6,7 @@ import { ServiceConfiguration } from "meteor/service-configuration";
 import { Reaction, i18next } from "/client/api";
 import * as Collections from "/lib/collections";
 import { ServiceConfigHelper } from "../../helpers/util";
+import AccountsDashboardContainer from "/imports/plugins/core/accounts/client/containers/accountsDashboardContainer";
 
 /**
  * Accounts helpers
@@ -81,6 +82,10 @@ Template.accountsDashboard.helpers({
         });
       }
     }
+  },
+
+  accountsDashboard() {
+    return AccountsDashboardContainer;
   }
 });
 

client/modules/accounts/templates/members/member.html

@@ -18,83 +18,7 @@
 </template>
 
 <template name="memberSettings">
-
-  <div class="panel">
-
-    <div class="panel-heading panel-title-center">
-      <div class="profile-image">
-        <img class="circular-icon" src="{{getGravatar this 80}}" style="width: 80px;border-radius: 50%;" />
-        <span class="profile-image-display-name">{{displayName this}}</span>
-        <span>{{this.email}}</span>
-      </div>
-    </div>
-
+  <div>
+    {{> React accountsDetail }}
   </div>
-
-  {{#if showAvalaraTaxSettings }}
-    {{> taxSettingsPanel member=this }}
-  {{/if}}
-
-  {{#each groupsForUser}}
-    {{#if permissionGroups}}
-    <div class="panel-body">
-      <h3><i class="fa fa-shopping-cart"></i> {{shopLabel}}</h3>
-    </div>
-
-    <div class="panel-group shop-member-groups">
-      {{#each permissionGroups}}
-        <div class="panel panel-default">
-
-          <div class="panel-heading panel-heading-flex" data-event-action="expandPermission">
-
-            <div class="panel-title">
-              <label for="permissions-{{name}}-{{../../userId}}">
-                <i class="{{icon}}"></i> {{label}}
-              </label>
-            </div>
-
-
-            <div class="panel-controls">
-              <input type="checkbox" class="checkbox-switch"
-                id="permissions-{{name}}-{{../../userId}}"
-                data-userId="{{../../userId}}"
-                data-permission="{{name}}"
-                {{hasPermissionChecked name ../../userId}}
-                {{isOwnerDisabled ../../userId}}
-                data-event-action="toggleMemberPermission"
-              />
-            </div>
-          </div>
-
-          {{#if hasManyPermissions permissions}}
-            <ul class="list-group">
-              {{#each permissions}}
-                <li class="list-group-item shop-member-permission flex">
-                  <div class="flex-item-fill">
-                    <label for="sub-permissions-{{name}}-{{../../userId}}">
-                      <i class="{{orElse icon 'fa fa-gear'}}"></i> {{label}}
-                    </label>
-                  </div>
-
-                  <div class="flex-item-static">
-                    <input class="checkbox-switch"
-                      id="sub-permissions-{{name}}-{{../../userId}}"
-                      type="checkbox"
-                      data-userId="{{../../../userId}}"
-                      data-permission="{{permission}}"
-                      {{hasPermissionChecked permission ../../../userId}}
-                      {{isOwnerDisabled ../../../userId}}
-                      data-event-action="toggleMemberPermission"
-                    />
-                  </div>
-                </li>
-              {{/each}}
-            </ul>
-          {{/if}}
-
-        </div>
-      {{/each}}
-      </div>
-    {{/if}}
-  {{/each}}
 </template>

client/modules/accounts/templates/members/member.js

@@ -5,6 +5,7 @@ import { Meteor } from "meteor/meteor";
 import { Template } from "meteor/templating";
 import { $ } from "meteor/jquery";
 import { Roles } from "meteor/alanning:roles";
+import AccountsManageContainer from "/imports/plugins/core/accounts/client/containers/accountsManageContainer";
 
 const getPermissionMap = (permissions) => {
   const permissionMap = {};
@@ -115,7 +116,6 @@ Template.memberSettings.helpers({
         });
       }
     });
-
     return permissionGroups;
   },
 
@@ -133,6 +133,13 @@ Template.memberSettings.helpers({
     });
 
     return _.get(avalara, "settings.avalara.enabled", false);
+  },
+
+  accountsDetail() {
+    return {
+      component: AccountsManageContainer,
+      ...Template.currentData()
+    };
   }
 });
 

imports/plugins/core/accounts/client/components/accountsDashboard.js

@@ -0,0 +1,91 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import AccountsTable from "./accountsTable";
+import AccountsManageContainer from "../containers/accountsManageContainer";
+
+class AccountsDashboard extends Component {
+  static propTypes = {
+    accounts: PropTypes.array,
+    groups: PropTypes.array
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      accounts: props.accounts,
+      groups: props.groups,
+      showSideBar: false,
+      selectedGroup: {}
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const { groups, accounts } = nextProps;
+    const selectedGroup = groups.find(grp => grp._id === (this.state.selectedGroup || {})._id);
+    this.setState({ groups, accounts, selectedGroup });
+  }
+
+  handleGroupSelect = group => {
+    this.setState({ showSideBar: true, selectedGroup: group });
+  };
+
+  tableClassName() {
+    if (this.state.showSideBar) {
+      return "col-md-9";
+    }
+    return "col-md-12";
+  }
+
+  detailDivClassName() {
+    if (this.state.showSideBar) {
+      return "col-md-3";
+    }
+    return "hide";
+  }
+
+  renderGroupDetail = () => {
+    if (this.state.showSideBar) {
+      const { groups, accounts } = this.state;
+      return (
+        <AccountsManageContainer
+          className="accounts-manage-container"
+          group={this.state.selectedGroup}
+          groups={groups}
+          accounts={accounts}
+          onChangeGroup={this.handleGroupSelect}
+        />
+      );
+    }
+    return null;
+  };
+
+  renderGroupsTable(groups) {
+    if (Array.isArray(groups)) {
+      return groups.map((group, index) => {
+        return (
+          <div key={index}>
+            <AccountsTable group={group} onGroupSelect={this.handleGroupSelect} {...this.props} />
+          </div>
+        );
+      });
+    }
+
+    return null;
+  }
+
+  render() {
+    return (
+      <div className="row list-group accounts-table">
+        <div className={this.tableClassName()}>
+          {this.renderGroupsTable(this.state.groups)}
+        </div>
+        <div className={this.detailDivClassName()}>
+          {this.renderGroupDetail()}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default AccountsDashboard;