-<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>