working ui-only user-management-app

* add share button to test modal
* basic user list w/ permissions
* add `avatar_ref` to the attributes returned in the users DTO
* include `avatar_ref` in php test
* add disabled option to permissions dropdown
* refactor structure to be more angular
* modal is now a component
* main files moved inside feature folder
* add x's to delete members & re-align
* don't display X's on you or the owner
* grey out based on permissions selected
* adjust margins/padding
* expand description for public listing

Author: feliks-montez

src/Api/Model/Shared/UserListProjectModel.php

@@ -19,7 +19,7 @@ public function __construct($projectId)
         parent::__construct(
                 UserModelMongoMapper::instance(),
                 array('isInvited' => array('$ne' => true), 'projects' => array('$in' => array(MongoMapper::mongoID($projectId)))),
-                array('username', 'email', 'name') // TODO Stop exposing email this way
+                array('username', 'email', 'name', 'avatar_ref') // TODO Stop exposing email this way
         );
     }
 }

src/Site/views/shared/image/globe.png

@@ -6,6 +6,8 @@ export interface Project {
   projectCode?: string;
   projectName: string;
   role: string;
+  anonymousUserRole: string;
+  reusableInviteLinkRole: string;
   siteName: string;
   type?: string;
   isArchived: boolean;

src/angular-app/bellows/shared/model/project.model.ts

@@ -2,6 +2,7 @@ export class User {
   active: boolean = false;
   // noinspection TsLint
   avatar_ref?: string;
+  avatarUrl?: string;
   dateCreated: string = '';
   email: string = '';
   id: string = '';

src/angular-app/bellows/shared/model/user.model.ts

@@ -5,4 +5,6 @@
 
     <sil-notices></sil-notices>
     <div data-ui-view></div>
+
+    <i class="fa fa-share-alt" data-ng-click="$ctrl.openShareWithOthersModal()"></i>
 </div>

src/angular-app/languageforge/lexicon/lexicon-app.component.html

@@ -130,26 +130,11 @@ export class LexiconAppController implements angular.IController {
 
   openShareWithOthersModal(): void {
     const modalInstance = this.$modal.open({
-      templateUrl: '/angular-app/languageforge/lexicon/shared/share-with-others.modal.html',
-      controller: ['$scope', '$uibModalInstance',
-        ($scope: any, $modalInstance: angular.ui.bootstrap.IModalInstanceService) => {
-          $scope.selected = {
-            code: '',
-            language: {}
-          };
-          $scope.add = () => {
-            $modalInstance.close($scope.selected);
-          };
-
-          $scope.close = $modalInstance.dismiss;
-        }
-      ],
-      windowTopClass: 'modal-select-language'
+      component: 'shareWithOthersModal'
     });
-    // modalInstance.result.then(selected => {
-    //   this.npsNewProject.languageCode = selected.code;
-    //   this.npsNewProject.language = selected.language;
-    // }, () => {});
+    modalInstance.result.then(data => {
+      // TODO: save the data if not already
+    }, () => {});
   }
 
   private setupConfig(rights: Rights, editorConfig: LexiconConfig): void {

src/angular-app/languageforge/lexicon/lexicon-app.component.ts

@@ -1,14 +1,15 @@
 import * as angular from 'angular';
 import 'angular-sanitize';
 import uiRouter from 'angular-ui-router';
+import './new-project/lexicon-new-project.module';
 
 import {ApiService} from '../../bellows/core/api/api.service';
 import {CoreModule} from '../../bellows/core/core.module';
 import {LexiconCoreModule} from './core/lexicon-core.module';
 import {LexiconEditorModule} from './editor/editor.module';
 import {LexiconAppComponent} from './lexicon-app.component';
-import './new-project/lexicon-new-project.module';
 import {LexiconSettingsModule} from './settings/settings.module';
+import { ShareWithOthersModule } from './shared/share-with-others/share-with-others.module';
 
 export const LexiconAppModule = angular
   .module('lexicon', [
@@ -18,7 +19,8 @@ export const LexiconAppModule = angular
     CoreModule,
     LexiconCoreModule,
     LexiconEditorModule,
-    LexiconSettingsModule
+    LexiconSettingsModule,
+    ShareWithOthersModule
   ])
   .component('lexiconApp', LexiconAppComponent)
   .config(['$stateProvider', '$urlRouterProvider',

src/angular-app/languageforge/lexicon/lexicon-app.module.ts

@@ -17,3 +17,56 @@
     margin-bottom: 0;
   }
 }
+
+#who-has-access {
+  margin-top: 2rem;
+}
+
+#invite-member-form {
+  border-right: 1px solid white;
+
+  .permissions-spacer {
+    width: 2.25rem;
+    flex-shrink: 0;
+  }
+}
+
+#sharing-checkboxes {
+  margin-top: 1rem;
+  margin-bottom: 0;
+
+  input[type=checkbox] {
+    margin-left: 0;
+  }
+}
+
+.user-summary-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  img.rounded-circle {
+    max-width: 3em;
+  }
+
+  input[type=text] {
+    height: 1.5em;
+    margin-left: 0.5em;
+    padding: 0.25em;
+  }
+
+  .permissions-indicator {
+    width: 4em;
+    text-align: center;
+  }
+
+  .delete-member {
+    width: 1rem;
+    text-align:right;
+  }
+
+  > *:not(:last-child) {
+    margin-right: 0.5em;
+    margin-bottom: 0;
+  }
+}

src/angular-app/languageforge/lexicon/lexicon.scss

@@ -1,16 +1,21 @@
-<b>Invite a new member</b>
-<div class="inline-form">
-  <label>via: </label>
-  <input type="email" class="form-control" placeholder="Email">
-  <button type="button" class="btn btn-primary"><i class="fa fa-paper-plane"></i></button>
-  <user-permissions-dropdown></user-permissions-dropdown>
-</div>
+<div id="invite-member-form">
+  <b>Invite a new member</b>
+  <div class="inline-form" style="margin-top: 8px;">
+    <label>via: </label>
+    <input type="email" class="form-control" placeholder="Email" ng-model="inviteUserEmail"
+           ng-change="$ctrl.setEmailInviteUserAttr('email', this.value)">
+    <button type="button" class="btn btn-primary"><i class="fa fa-paper-plane"></i></button>
+    <permissions-dropdown permission-target="$ctrl.specialPermissionTargets.INVITE_USER_VIA_EMAIL" on-permission-changed="$ctrl.onPermissionChanged"></permissions-dropdown>
+    <div class="permissions-spacer"></div>
+  </div>
 
-<b>or</b>
-<div class="inline-form">
-  <label>via: </label>
-  <div class="input-group">
-    <input type="text" class="form-control" value="{{$ctrl.inviteLink}}" ng-readonly="true" onfocus="this.select();">
+  <b>or</b>
+  <div class="inline-form">
+    <label>via: </label>
+    <div class="input-group">
+      <input type="text" class="form-control" value="{{$ctrl.inviteLink}}" ng-readonly="true" onfocus="this.select();">
+    </div>
+    <permissions-dropdown permission-target="$ctrl.specialPermissionTargets.ANONYMOUS_USERS"></permissions-dropdown>
+    <div class="permissions-spacer"></div>
   </div>
-  <user-permissions-dropdown></user-permissions-dropdown>
 </div>

src/angular-app/languageforge/lexicon/shared/share-with-others.modal.html

@@ -3,6 +3,8 @@ import { NoticeService } from '../../../../bellows/core/notice/notice.service';
 
 export class InviteMemberFormController implements angular.IController {
   inviteLink: string;
+  emailInviteUser: object;
+
   static $inject = ['$scope', 'silNoticeService'];
   constructor(private $scope: angular.IScope) { }
 
@@ -18,6 +20,9 @@ export class InviteMemberFormController implements angular.IController {
 
 export const InviteMemberFormComponent: angular.IComponentOptions = {
   bindings: {
+    emailInviteUser: '<',
+    setEmailInviteUserAttr: '&',
+    onPermissionChanged: '<'
   },
   controller: InviteMemberFormController,
   templateUrl: '/angular-app/languageforge/lexicon/shared/share-with-others/invite-member-form.component.html'

src/angular-app/languageforge/lexicon/shared/share-with-others/invite-member-form.component.html

@@ -1,12 +1,12 @@
 <div class="btn-group" uib-dropdown is-open="status.isopen">
-  <button id="single-button" type="button" class="btn btn-primary text-dark bg-light"
-    uib-dropdown-toggle style="width: 4em;">
+  <button id="single-button" type="button" class="btn btn-primary text-dark bg-light .permissions-indicator"
+    uib-dropdown-toggle>
     <i class="fa fa-{{ $ctrl.selectedPermission.icon }}"></i> <span class="caret"></span>
   </button>
   <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
     <li class="dropdown-item" role="menuitem"
       ng-repeat="permission in $ctrl.permissions">
-      <div ng-click="$ctrl.setSelectedPermission(permission)">
+      <div ng-click="$ctrl.selectPermission(permission)">
           {{ permission.description }} <i class="fa fa-check" ng-show="$ctrl.selectedPermission == permission"></i>
       </div>
     </li>

src/angular-app/languageforge/lexicon/shared/share-with-others/invite-member-form.component.ts

@@ -1,31 +1,56 @@
 import * as angular from 'angular';
-import { CommentsOfflineCacheService } from '../../../../bellows/core/offline/comments-offline-cache.service';
+
+/*
+* The options in the dropdown can be changed by using the `permissions=` attribute in HTML.
+* setting `allow-disable="true"` will add a disable option to the dropdown
+*/
+
+export interface Permission {
+  name: string;
+  description: string;
+  icon: string;
+}
 
 export class PermissionsDropdownController implements angular.IController {
-  permissions: any[];
-  selectedPermission: object;
+  permissionTarget: any;
+  permissions: Permission[];
+  selectedPermission: Permission;
+  selected: string;
+  allowDisable: boolean;
+  onPermissionChanged: (params: {$event: {permission: Permission, target: any}}) => void;
 
   static $inject = ['$scope'];
   constructor(private $scope: angular.IScope) { }
 
   $onInit(): void {
-    this.permissions = [
-      {name: 'edit', description: 'can edit', icon: 'pencil'},
-      {name: 'comment', description: 'can comment', icon: 'comment'},
-      {name: 'view', description: 'can view', icon: 'eye'}
+    this.permissions = this.permissions || [
+      {name: 'contributor', description: 'can edit', icon: 'pencil'},
+      {name: 'observer_with_comment', description: 'can comment', icon: 'comment'},
+      {name: 'observer', description: 'can view', icon: 'eye'}
     ];
+    if (this.allowDisable) {
+      this.permissions.push({name: 'disabled', description: 'turn off', icon: 'ban'});
+    }
 
-    this.setSelectedPermission(this.permissions[this.permissions.length-1]);
+    this.selectedPermission = this.permissions.find(permission => permission.name === this.selected)
+      || this.permissions[this.permissions.length-1];
   }
 
-  setSelectedPermission(permission: object) {
-    this.selectedPermission = permission;
+  selectPermission(permission: Permission) {
+    if (this.selectedPermission.name !== permission.name) {
+      this.selectedPermission = permission;
+      this.onPermissionChanged({$event: { permission, target: this.permissionTarget}});
+    }
   }
 
 }
 
 export const PermissionsDropdownComponent: angular.IComponentOptions = {
   bindings: {
+    allowDisable: '=',
+    onPermissionChanged: '&',
+    permissionTarget: '<',
+    selected: '<'
   },
   controller: PermissionsDropdownController,
   templateUrl: '/angular-app/languageforge/lexicon/shared/share-with-others/permissions-dropdown.component.html'

src/angular-app/languageforge/lexicon/shared/share-with-others/permissions-dropdown.component.html

@@ -0,0 +1,20 @@
+import * as angular from 'angular';
+
+export class ShareWithOthersModalInstanceController implements angular.IController {
+  modalInstance: any;
+
+  constructor() {}
+
+  $onInit() {
+  }
+}
+
+export const ShareWithOthersComponent: angular.IComponentOptions = {
+  bindings: {
+    modalInstance: '<',
+    close: '&',
+    dismiss: '&'
+  },
+  controller: ShareWithOthersModalInstanceController,
+  templateUrl: '/angular-app/languageforge/lexicon/shared/share-with-others/share-with-others.modal.html'
+};

src/angular-app/languageforge/lexicon/shared/share-with-others/permissions-dropdown.component.ts

@@ -0,0 +1,14 @@
+<div id="modal-share-with-others">
+  <div class="modal-header">
+    <h3 class="modal-title">Share with Others</h3>
+    <i ng-click="$ctrl.dismiss()" class="close-modal fa fa-times"></i>
+  </div>
+  <div class="modal-body">
+    <user-management-app></user-management-app>
+  </div>
+  <div class="modal-footer d-block clearfix">
+    <button class="btn btn-primary float-right" id="apply-sharing-config-button" ng-click="$ctrl.close()">
+      Done
+    </button>
+  </div>
+</div>

src/angular-app/languageforge/lexicon/shared/share-with-others/share-with-others.component.ts

@@ -0,0 +1,18 @@
+import * as angular from 'angular';
+
+import { InviteMemberFormComponent } from './invite-member-form.component';
+import { PermissionsDropdownComponent } from './permissions-dropdown.component';
+import { ShareWithOthersComponent } from './share-with-others.component';
+import { UserManagementAppComponent } from './user-management-app.component';
+import { UserPermissionListComponent } from './user-permission-list.component';
+
+export const ShareWithOthersModule = angular
+  .module('shareWithOthersModule', [
+    'ui.bootstrap'
+  ])
+  .component('shareWithOthersModal', ShareWithOthersComponent)
+  .component('userManagementApp', UserManagementAppComponent)
+  .component('permissionsDropdown', PermissionsDropdownComponent)
+  .component('inviteMemberForm', InviteMemberFormComponent)
+  .component('userPermissionList', UserPermissionListComponent)
+  .name;