Built motion from commit bfc7a72f7045b27461c9a5d1f71c1a658cfd0b8b. Version 3.0.0...
[motion-next.git] / public / src / js / modules / main / apps / staff / views / userProfiles / userProfiles.html / userProfiles.html
index a9cec65..0a10cd7 100644 (file)
-<div id="staff-userProfile" class="page-layout simple tabbed" layout="column">
+<div id="userProfiles" class="page-layout simple left-sidenav inner-sidenav">
   <!-- HEADER -->
-  <div class="header md-accent-bg" layout="row" layout-align="start center">
-    <div class="white-fg" layout="row" layout-align="start center" flex>
-      <md-button
-        class="goto-userProfiles-button md-icon-button"
-        aria-label="Go to userProfiles"
-        ng-click="vm.gotoUserProfiles()"
-        translate
-        translate-attr-aria-label="STAFF.GO_TO_USERPROFILES"
-      >
-        <md-icon md-font-icon="icon-arrow-left"></md-icon>
-      </md-button>
-
-      <div layout="row" layout-align="start center">
-        <div class="userProfile-image" hide-xs>
-          <img ng-src="assets/images/business/userProfiles.jpg" />
-        </div>
-
-        <div layout="column" layout-align="start start">
-          <div class="h2">
-            #{{vm.userProfile.id}}
-            <span ng-if="vm.userProfile.name">{{vm.userProfile.name}}</span>
-          </div>
-          <div class="subtitle secondary-text">
-            <span translate="STAFF.CREATED_AT"></span>
-            <span>{{vm.userProfile.createdAt | date:'medium'}}</span>
-          </div>
-        </div>
+  <div
+    class="header md-accent-bg"
+    layout="row"
+    layout-align="space-between center"
+  >
+    <!-- APP TITLE -->
+    <div layout="row" layout-align="start center">
+      <div class="logo" layout="row" layout-align="start center">
+        <span class="logo-icon">
+          <md-icon md-font-icon="icon-account-multiple" class="s24"></md-icon>
+        </span>
+        <span class="logo-text" translate="STAFF.USERPROFILES"
+          >UserProfiles</span
+        >
       </div>
     </div>
+    <!-- / APP TITLE -->
 
-    <div ng-cloak ng-if="vm.crudPermissions.canEdit">
-      <md-button
-        ng-click="vm.clonedialog(vm.userProfile, $event)"
-        class="md-fab md-amber-500-bg md-icon-button"
-        aria-label="clone"
+    <div layout="row">
+      <!-- SEARCH -->
+      <div
+        class="search-input-wrapper"
+        layout="row"
+        layout-align="start center"
       >
-        <md-tooltip
-          ><span translate="STAFF.CLONE_USERPROFILE"></span
-        ></md-tooltip>
-        <md-icon md-font-icon="icon-content-duplicate"></md-icon>
-      </md-button>
+        <label for="search">
+          <md-icon md-font-icon="icon-magnify"></md-icon>
+        </label>
+        <md-input-container md-no-float class="m-0">
+          <input
+            id="search"
+            placeholder="Search for anyone"
+            type="text"
+            ng-model="vm.query.filter"
+            ng-model-options="{ debounce: 1000 }"
+            translate
+            translate-attr-placeholder="STAFF.SEARCH_FOR_ANYONE"
+          />
+        </md-input-container>
+      </div>
+      <!-- / SEARCH -->
     </div>
-    <div>
-      <md-button
-        type="submit"
-        ng-click="vm.saveUserProfile()"
-        ng-if="vm.crudPermissions.canEdit"
-        class="send-button md-accent md-raised"
-        ng-disabled="(generalForm.$invalid) || (modulesForm.$invalid)"
-        translate="STAFF.SAVE"
-        translate-attr-aria-label="STAFF.SAVE"
-      >
-        SAVE
+  </div>
+  <!-- / HEADER -->
+
+  <!-- SELECTED BAR -->
+  <div
+    ng-show="vm.selectedUserProfiles.length > 0"
+    class="selected-bar header animate-slide-down md-accent-bg"
+    layout="row"
+    layout-align="start center"
+  >
+    <div class="close-button-wrapper" ng-click="vm.selectedUserProfiles =[]">
+      <md-button layout="row" layout-align="start center">
+        <md-icon md-font-icon="icon-arrow-left" class="mr-8"></md-icon>
+        <span translate="STAFF.BACK">Back</span>
       </md-button>
     </div>
+
+    <div flex layout="row" layout-align="space-between center">
+      <div>
+        <span class="selected-userProfiles-count">
+          <span>{{vm.selectedUserProfiles.length}}</span>
+          <span translate="STAFF.SELECTED">selected</span>
+        </span>
+
+        <md-menu class="select-menu" ng-if="!vm.currentThread">
+          <md-button
+            class="md-icon-button"
+            ng-click="$mdOpenMenu($event)"
+            aria-label="multi select toggle"
+            translate
+            translate-attr-aria-label="STAFF.MULTI_SELECT_TOGGLE"
+          >
+            <md-icon md-font-icon="icon-menu-down"></md-icon>
+          </md-button>
+          <md-menu-content width="3">
+            <md-menu-item>
+              <md-button
+                ng-click="vm.selectAllUserProfiles()"
+                translate="STAFF.SELECT_ALL"
+              >
+                Select all
+              </md-button>
+            </md-menu-item>
+            <md-menu-item>
+              <md-button
+                ng-click="vm.deselectUserProfiles()"
+                translate="STAFF.SELECT_NONE"
+              >
+                Select none
+              </md-button>
+            </md-menu-item>
+          </md-menu-content>
+        </md-menu>
+      </div>
+
+      <div class="multi-select-actions">
+        <button
+          class="md-icon-button"
+          ng-csv="vm.exportSelectedUserProfiles"
+          csv-label="true"
+          filename="userProfiles.csv"
+        >
+          <md-icon md-font-icon="icon-file-excel"></md-icon>
+        </button>
+        <md-button
+          class="md-icon-button"
+          ng-if="vm.crudPermissions.canDelete"
+          ng-click="vm.deleteSelectedUserProfiles($event)"
+          aria-label="delete selected"
+          translate
+          translate-attr-label="STAFF.DELETE_SELECTED"
+        >
+          <md-icon md-font-icon="icon-delete"></md-icon>
+        </md-button>
+      </div>
+    </div>
   </div>
-  <!-- / HEADER -->
+  <!-- / SELECTED BAR -->
 
   <!-- CONTENT -->
-  <div class="content">
-    <md-tabs
-      md-selected="vm.selectedTab"
-      md-stretch-tabs="always"
-      flex
-      layout-fill
-      md-dynamic-height
-    >
-      <md-tab>
-        <md-tab-label>
-          <span translate="STAFF.SETTINGS">SETTINGS</span>
-        </md-tab-label>
-        <md-tab-body>
-          <div
-            class="userProfile-detail-form-container general md-background-bg md-whiteframe-1dp"
+  <div class="content" md-background-bg layout="row" layout-align="start start">
+    <!-- MAIN -->
+    <div class="main scrollable" ms-scroll>
+      <!-- USERPROFILE TABLE -->
+      <md-card>
+        <md-table-container>
+          <table
+            md-table
+            md-row-select
+            multiple
+            ng-model="vm.selectedUserProfiles"
+            md-progress="vm.promise"
           >
-            <div class="pb-16" layout="row" layout-align="start center">
-              <div class="h2 secondary-text" translate="STAFF.GENERAL">
-                GENERAL
-              </div>
-            </div>
-            <form name="generalForm" novalidate>
-              <md-input-container class="md-block">
-                <label translate="STAFF.NAME">Name</label>
-                <input
-                  type="text"
-                  name="name"
-                  ng-model="vm.userProfile.name"
-                  ng-required="true"
-                  autofocus
-                  disabled
-                />
-
-                <div
-                  ng-messages="generalForm['name'].$error"
-                  ng-show="generalForm['name'].$touched"
-                  role="alert"
-                >
-                  <div ng-message="required">
-                    <span translate="STAFF.ERRORS.NAME_REQUIRED"
-                      >Name field is required</span
+            <thead
+              md-head
+              md-order="vm.query.sort"
+              md-on-reorder="vm.getUserProfiles"
+            >
+              <tr md-row>
+                <th
+                  md-column
+                  ng-if="vm.table == 'users' || vm.table == 'agents'"
+                  width="20px"
+                ></th>
+                <th md-column md-order-by="id">{{ 'STAFF.ID' | translate }}</th>
+                <th md-column md-order-by="name">
+                  {{ 'STAFF.NAME' | translate }}
+                </th>
+                <th md-column md-order-by="description">
+                  {{ 'STAFF.DESCRIPTION' | translate }}
+                </th>
+                <th md-column md-order-by="crudPermissions">
+                  {{ 'STAFF.CRUDPERMISSIONS' | translate }}
+                </th>
+                <th md-column width="10px"></th>
+              </tr>
+            </thead>
+            <tbody md-body>
+              <tr md-row ng-hide="vm.userProfiles.rows.length">
+                <td md-cell colspan="5">
+                  <div layout="row" layout-align="center center">
+                    <span translate="STAFF.NO_AVAILABLE_INFO"
+                      >No Available Info</span
                     >
                   </div>
-                </div>
-              </md-input-container>
-              <md-input-container class="md-block">
-                <label translate="STAFF.DESCRIPTION">Description</label>
-                <input
-                  type="text"
-                  name="description"
-                  ng-model="vm.userProfile.description"
-                  ng-disabled="!vm.crudPermissions.canEdit"
-                />
-
-                <div
-                  ng-messages="generalForm['description'].$error"
-                  ng-show="generalForm['description'].$touched"
-                  role="alert"
+                </td>
+              </tr>
+              <tr
+                md-row
+                md-select="userProfile"
+                md-select-id="id"
+                ng-repeat="userProfile in vm.userProfiles.rows"
+              >
+                <td md-cell ng-if="userProfile.userpic">
+                  <img
+                    class="avatar"
+                    alt="{{userProfile.name}}"
+                    ng-src="api/users/{{userProfile.id}}/avatar"
+                  />
+                </td>
+                <td
+                  md-cell
+                  ng-if="!userProfile.userpic && (vm.table == 'users' || vm.table == 'agents')"
                 >
-                  <div ng-message="required">
-                    <span translate="STAFF.ERRORS.DESCRIPTION_REQUIRED"
-                      >Description field is required</span
-                    >
-                  </div>
-                </div>
-              </md-input-container>
-              <md-input-container class="md-block">
-                <label translate="STAFF.CRUDPERMISSIONS">CrudPermissions</label>
-                <md-select
-                  name="crudPermissions"
-                  ng-model="vm.userProfile.crudPermissions"
-                  multiple
-                  required
-                  ng-disabled="!vm.crudPermissions.canEdit"
+                  <img
+                    class="avatar"
+                    alt="{{userProfile.name}}"
+                    ng-src="assets/images/avatars/profile.png"
+                  />
+                </td>
+                <td
+                  ng-click="vm.crudPermissions.readOnly || (vm.crudPermissions.canDelete && !vm.crudPermissions.canEdit) ? vm.editstate(userProfile, ev) : vm.createOrEditUserProfile($event, userProfile)"
+                  md-cell
+                  class="id"
                 >
-                  <md-option ng-value="'r'" disabled>
-                    {{ 'STAFF.READ_PERMISSION' | translate }}
-                  </md-option>
-
-                  <md-option ng-value="'e'">
-                    {{ 'STAFF.EDIT_PERMISSION' | translate }}
-                  </md-option>
-
-                  <md-option ng-value="'d'">
-                    {{ 'STAFF.DELETE_PERMISSION' | translate }}
-                  </md-option>
-                </md-select>
-                <div
-                  ng-messages="generalForm['crudPermissions'].$error"
-                  ng-show="generalForm['crudPermissions'].$touched"
-                  role="alert"
+                  {{userProfile.id}}
+                </td>
+                <td
+                  ng-click="vm.crudPermissions.readOnly || (vm.crudPermissions.canDelete && !vm.crudPermissions.canEdit) ? vm.editstate(userProfile, ev) : vm.createOrEditUserProfile($event, userProfile)"
+                  md-cell
+                  class="name"
                 >
-                  <div ng-message="required">
-                    <span translate="STAFF.ERRORS.CRUDPERMISSIONS_REQUIRED"
-                      >CrudPermissions field is required</span
-                    >
-                  </div>
-                </div>
-              </md-input-container>
-            </form>
-          </div>
-        </md-tab-body>
-      </md-tab>
-      <md-tab>
-        <md-tab-label>
-          <span translate="STAFF.PERMISSIONS">PERMISSIONS</span>
-        </md-tab-label>
-        <md-tab-body>
-          <div
-            class="userProfile-detail-form-container modules md-background-bg md-whiteframe-1dp"
-          >
-            <div class="pb-16" layout="row" layout-align="start center">
-              <div class="h2 secondary-text" translate="STAFF.MODULES">
-                MODULES
-              </div>
-            </div>
-            <div
-              ng-controller="UserProfilePermissionsController as vm_pc"
-              ng-init="vm_pc.init(vm.userProfile, vm.license)"
-              class="userProfile-detail-form-container"
-            >
-              <md-grid-list
-                flex
-                md-cols-gt-xs="2"
-                md-cols-gt-sm="2"
-                md-cols-gt-md="4"
-                md-cols-gt-lg="6"
-                md-row-height-gt-xs="2:1"
-                md-row-height-gt-sm="2:1"
-                md-row-height-gt-md="3:1"
-                gt-xs-gutter="4px"
-                gt-sm-gutter="8px"
-                gt-md-gutter="8px"
-                gt-lg-gutter="16px"
-              >
-                <md-grid-tile
-                  ng-repeat="father in vm_pc.modules"
-                  ng-if="vm_pc.userProfile.role !== 'admin' && !father.permissions.hidden"
-                  md-colspan="2"
+                  {{userProfile.name}}
+                </td>
+                <td
+                  ng-click="vm.crudPermissions.readOnly || (vm.crudPermissions.canDelete && !vm.crudPermissions.canEdit) ? vm.editstate(userProfile, ev) : vm.createOrEditUserProfile($event, userProfile)"
+                  md-cell
+                  class="description"
+                >
+                  {{userProfile.description}}
+                </td>
+                <td
+                  ng-click="vm.crudPermissions.readOnly || (vm.crudPermissions.canDelete && !vm.crudPermissions.canEdit) ? vm.editstate(userProfile, ev) : vm.createOrEditUserProfile($event, userProfile)"
+                  md-cell
+                  class="crudPermissions"
                 >
-                  <md-card
-                    flex-xs
-                    flex-gt-xs="90"
-                    layout="column"
-                    no-padding
-                    no-margin
-                  >
-                    <md-card-header>
-                      <md-card-avatar>
-                        <md-icon
-                          class="md-avatar-icon auto-size"
-                          md-font-icon="{{father.icon}}"
-                          ng-class="{ true: father.status.color }[true]"
-                        ></md-icon>
-                        <md-tooltip>{{ father.status.info }}</md-tooltip>
-                      </md-card-avatar>
-                      <md-card-header-text layout-align="center start">
-                        <span class="md-title" translate="{{father.translate}}"
-                          >{{ father.title }}</span
+                  {{userProfile.selectedcrudPermissions}}
+                </td>
+
+                <td md-cell class="actions">
+                  <md-menu>
+                    <md-button
+                      class="md-icon-button"
+                      aria-label="More"
+                      translate
+                      translate-attr-aria-label="STAFF.MORE"
+                      ng-click="$mdOpenMenu($event)"
+                    >
+                      <md-icon md-font-icon="icon-dots-vertical"></md-icon>
+                    </md-button>
+
+                    <md-menu-content width="3">
+                      <!-- SUBACTIONS -->
+
+                      <!-- ACTIONS -->
+
+                      <md-menu-item ng-if="vm.crudPermissions.canEdit">
+                        <md-button
+                          ng-click="vm.editstate(userProfile, $event    )"
+                          translate="STAFF.EDIT_USERPROFILE"
                         >
-                      </md-card-header-text>
-                      <md-card-actions
-                        class="no-margin"
-                        layout="row"
-                        ng-init="vm_pc.checkSectionResources(father)"
-                        ng-if="father.status.tag != 'unlicensed'"
-                      >
-                        <md-switch
-                          class="auto-height no-margin"
-                          ng-model="father.allResourcesEnabled"
-                          ng-change="vm_pc.onChangeEnableAllResources(father)"
-                          aria-label="Enable all"
-                        ></md-switch>
+                          Edit UserProfile
+                        </md-button>
+                      </md-menu-item>
+
+                      <!-- SUBACTIONS -->
+
+                      <!-- ACTIONS -->
+
+                      <md-menu-item ng-if="vm.crudPermissions.canEdit">
                         <md-button
-                          class="md-mini auto-width"
-                          aria-label="Manage"
-                          ng-click="vm_pc.manageResources(father)"
-                          ng-hide="father.permissions && !father.permissions.association"
+                          ng-click="vm.clonedialog(userProfile, $event    )"
+                          translate="STAFF.CLONE_USERPROFILE"
                         >
-                          <md-tooltip
-                            >{{'STAFF.PERMISSIONS_MANAGE' | translate}}
-                          </md-tooltip>
-                          <md-icon md-font-icon="icon-cog"></md-icon>
+                          clone UserProfile
                         </md-button>
-                      </md-card-actions>
-                      <md-card-header-text
-                        ng-if="father.status.tag === 'unlicensed'"
-                        layout-align="center end"
+                      </md-menu-item>
+
+                      <!-- SUBACTIONS -->
+
+                      <!-- ACTIONS -->
+
+                      <md-menu-item
+                        ng-if="vm.currentUser.role === 'admin' && user.id !== vm.currentUser.id"
                       >
-                        <span class="md-subhead red-A700-fg"
-                          >{{ father.status.name }}</span
+                        <md-button
+                          ng-click="vm.deleteconfirm(userProfile, $event    )"
+                          translate="STAFF.DELETE_USERPROFILE"
                         >
-                      </md-card-header-text>
-                    </md-card-header>
-                  </md-card>
-                </md-grid-tile>
-              </md-grid-list>
-            </div>
-          </div>
-        </md-tab-body>
-      </md-tab>
-    </md-tabs>
+                          Delete UserProfile
+                        </md-button>
+                      </md-menu-item>
+                    </md-menu-content>
+                  </md-menu>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </md-table-container>
+
+        <md-table-pagination
+          md-label="{page: '{{'STAFF.PAGE' | translate}}:', rowsPerPage: '{{'STAFF.ROWSPERPAGE' | translate}}:', of: '{{'STAFF.OF' | translate}}'}"
+          md-limit="vm.query.limit"
+          md-limit-options="[10, 15, 20, 50, 100, 250]"
+          md-page="vm.query.page"
+          md-total="{{vm.userProfiles.count}}"
+          md-on-paginate="vm.getUserProfiles"
+          md-page-select
+        ></md-table-pagination>
+      </md-card>
+      <!-- / USERPROFILE TABLE -->
+      <!-- NO RESULTS -->
+
+      <!-- / NO RESULTS -->
+    </div>
+    <!-- / MAIN -->
   </div>
   <!-- / CONTENT -->
+
+  <!-- ADD USERPROFILE BUTTON -->
+  <md-button
+    ng-if="vm.crudPermissions.canEdit"
+    class="md-fab md-accent"
+    id="add-userProfile-button"
+    ng-click="vm.createOrEditUserProfile($event)"
+    aria-label="add userProfile"
+    translate
+    translate-attr-aria-label="STAFF.ADD_USERPROFILE"
+  >
+    <md-icon md-font-icon="icon-plus"></md-icon>
+  </md-button>
+  <!-- / ADD USERPROFILE BUTTON -->
 </div>