Motion >> Repos - motion-next.git/blob

   1 <div
   2   id="customDashboards"
   3   class="page-layout simple left-sidenav inner-sidenav motion-list"
   4 >
   5   <!-- HEADER -->
   6   <div
   7     class="header md-accent-bg"
   8     layout="row"
   9     layout-align="space-between center"
  10   >
  11     <!-- APP TITLE -->
  12     <div layout="row" layout-align="start center">
  13       <div class="logo" layout="row" layout-align="start center">
  14         <span class="logo-icon">
  15           <md-icon md-font-icon="icon-auto-fix" class="s24"></md-icon>
  16         </span>
  17         <span class="logo-text" translate="TOOLS.CUSTOMDASHBOARDS"
  18           >CustomDashboards</span
  19         >
  20       </div>
  21     </div>
  22     <!-- / APP TITLE -->
  23
  24     <div layout="row">
  25       <!-- SEARCH -->
  26       <div
  27         class="search-input-wrapper"
  28         layout="row"
  29         layout-align="start center"
  30       >
  31         <label for="search">
  32           <md-icon md-font-icon="icon-magnify"></md-icon>
  33         </label>
  34         <md-input-container md-no-float class="m-0">
  35           <input
  36             id="search"
  37             placeholder="Search for anyone"
  38             type="text"
  39             ng-model="vm.query.filter"
  40             ng-model-options="{ debounce: 1000 }"
  41             translate
  42             translate-attr-placeholder="TOOLS.SEARCH_FOR_ANYONE"
  43           />
  44         </md-input-container>
  45       </div>
  46       <!-- / SEARCH -->
  47     </div>
  48   </div>
  49   <!-- / HEADER -->
  50
  51   <!-- SELECTED BAR -->
  52   <div
  53     ng-show="vm.selectedCustomDashboards.length > 0"
  54     class="selected-bar header animate-slide-down md-accent-bg"
  55     layout="row"
  56     layout-align="start center"
  57   >
  58     <div
  59       class="close-button-wrapper"
  60       ng-click="vm.selectedCustomDashboards =[]"
  61     >
  62       <md-button layout="row" layout-align="start center">
  63         <md-icon md-font-icon="icon-arrow-left" class="mr-8"></md-icon>
  64         <span translate="TOOLS.BACK">Back</span>
  65       </md-button>
  66     </div>
  67
  68     <div flex layout="row" layout-align="space-between center">
  69       <div>
  70         <span class="selected-customDashboards-count">
  71           <span>{{vm.selectedCustomDashboards.length}}</span>
  72           <span translate="TOOLS.SELECTED">selected</span>
  73         </span>
  74
  75         <md-menu class="select-menu" ng-if="!vm.currentThread">
  76           <md-button
  77             class="md-icon-button"
  78             ng-click="$mdMenu.open($event)"
  79             aria-label="multi select toggle"
  80             translate
  81             translate-attr-aria-label="TOOLS.MULTI_SELECT_TOGGLE"
  82           >
  83             <md-icon md-font-icon="icon-menu-down"></md-icon>
  84           </md-button>
  85           <md-menu-content width="3">
  86             <md-menu-item>
  87               <md-button
  88                 ng-click="vm.selectAllCustomDashboards()"
  89                 translate="TOOLS.SELECT_ALL"
  90               >
  91                 Select all
  92               </md-button>
  93             </md-menu-item>
  94             <md-menu-item>
  95               <md-button
  96                 ng-click="vm.deselectCustomDashboards()"
  97                 translate="TOOLS.SELECT_NONE"
  98               >
  99                 Select none
 100               </md-button>
 101             </md-menu-item>
 102           </md-menu-content>
 103         </md-menu>
 104       </div>
 105
 106       <div class="multi-select-actions">
 107         <button
 108           class="md-icon-button"
 109           ng-csv="vm.exportSelectedCustomDashboards"
 110           csv-label="true"
 111           filename="customDashboards.csv"
 112         >
 113           <md-icon md-font-icon="icon-file-excel"></md-icon>
 114         </button>
 115         <md-button
 116           class="md-icon-button"
 117           ng-if="vm.crudPermissions.canDelete"
 118           ng-click="vm.deleteSelectedCustomDashboards($event)"
 119           aria-label="delete selected"
 120           translate
 121           translate-attr-label="TOOLS.DELETE_SELECTED"
 122         >
 123           <md-icon md-font-icon="icon-delete"></md-icon>
 124         </md-button>
 125       </div>
 126     </div>
 127   </div>
 128   <!-- / SELECTED BAR -->
 129
 130   <!-- CONTENT -->
 131   <div class="content" md-background-bg layout="row" layout-align="start start">
 132     <!-- MAIN -->
 133     <div class="main scrollable" ms-scroll>
 134       <!-- CUSTOMDASHBOARD TABLE -->
 135       <md-card>
 136         <md-table-container>
 137           <table
 138             md-table
 139             md-row-select
 140             multiple
 141             ng-model="vm.selectedCustomDashboards"
 142             md-progress="vm.promise"
 143           >
 144             <thead
 145               md-head
 146               md-order="vm.query.sort"
 147               md-on-reorder="vm.getCustomDashboards"
 148             >
 149               <tr md-row>
 150                 <th
 151                   md-column
 152                   ng-if="vm.table == 'users' || vm.table == 'agents'"
 153                   width="20px"
 154                 ></th>
 155                 <th md-column md-order-by="id">{{ 'TOOLS.ID' | translate }}</th>
 156                 <th md-column md-order-by="name">
 157                   {{ 'TOOLS.NAME' | translate }}
 158                 </th>
 159                 <th md-column md-order-by="description">
 160                   {{ 'TOOLS.DESCRIPTION' | translate }}
 161                 </th>
 162                 <th md-column width="10px"></th>
 163               </tr>
 164             </thead>
 165             <tbody md-body>
 166               <tr md-row ng-hide="vm.customDashboards.rows.length">
 167                 <td md-cell colspan="4">
 168                   <div layout="row" layout-align="center center">
 169                     <span translate="TOOLS.NO_AVAILABLE_INFO"
 170                       >No Available Info</span
 171                     >
 172                   </div>
 173                 </td>
 174               </tr>
 175               <tr
 176                 md-row
 177                 md-select="customDashboard"
 178                 md-select-id="id"
 179                 ng-repeat="customDashboard in vm.customDashboards.rows"
 180               >
 181                 <td md-cell ng-if="customDashboard.userpic">
 182                   <img
 183                     class="avatar"
 184                     alt="{{customDashboard.name}}"
 185                     ng-src="api/users/{{customDashboard.id}}/avatar"
 186                   />
 187                 </td>
 188                 <td
 189                   md-cell
 190                   ng-if="!customDashboard.userpic && (vm.table == 'users' || vm.table == 'agents')"
 191                 >
 192                   <img
 193                     class="avatar"
 194                     alt="{{customDashboard.name}}"
 195                     ng-src="assets/images/avatars/profile.png"
 196                   />
 197                 </td>
 198                 <td
 199                   ng-click="vm.crudPermissions.readOnly || (vm.crudPermissions.canDelete && !vm.crudPermissions.canEdit) ? vm.editstate(customDashboard, ev) : vm.createOrEditCustomDashboard($event, customDashboard)"
 200                   md-cell
 201                   class="id"
 202                 >
 203                   {{customDashboard.id}}
 204                 </td>
 205                 <td
 206                   ng-click="vm.crudPermissions.readOnly || (vm.crudPermissions.canDelete && !vm.crudPermissions.canEdit) ? vm.editstate(customDashboard, ev) : vm.createOrEditCustomDashboard($event, customDashboard)"
 207                   md-cell
 208                   class="name"
 209                 >
 210                   {{customDashboard.name}}
 211                 </td>
 212                 <td
 213                   ng-click="vm.crudPermissions.readOnly || (vm.crudPermissions.canDelete && !vm.crudPermissions.canEdit) ? vm.editstate(customDashboard, ev) : vm.createOrEditCustomDashboard($event, customDashboard)"
 214                   md-cell
 215                   class="description"
 216                 >
 217                   {{customDashboard.description}}
 218                 </td>
 219
 220                 <td md-cell class="actions">
 221                   <md-menu>
 222                     <md-button
 223                       class="md-icon-button"
 224                       aria-label="More"
 225                       translate
 226                       translate-attr-aria-label="TOOLS.MORE"
 227                       ng-click="$mdMenu.open($event)"
 228                     >
 229                       <md-icon md-font-icon="icon-dots-vertical"></md-icon>
 230                     </md-button>
 231
 232                     <md-menu-content width="3">
 233                       <!-- SUBACTIONS -->
 234
 235                       <!-- ACTIONS -->
 236
 237                       <md-menu-item ng-if="vm.crudPermissions.canEdit">
 238                         <md-button
 239                           ng-click="vm.editstate(customDashboard, $event    )"
 240                           translate="TOOLS.EDIT_CUSTOMDASHBOARD"
 241                         >
 242                           Edit CustomDashboard
 243                         </md-button>
 244                       </md-menu-item>
 245
 246                       <!-- SUBACTIONS -->
 247
 248                       <!-- ACTIONS -->
 249
 250                       <md-menu-item ng-if="vm.crudPermissions.canEdit">
 251                         <md-button
 252                           ng-click="vm.clonedialog(customDashboard, $event    )"
 253                           translate="TOOLS.CLONE_CUSTOMDASHBOARD"
 254                         >
 255                           clone CustomDashboard
 256                         </md-button>
 257                       </md-menu-item>
 258
 259                       <!-- SUBACTIONS -->
 260
 261                       <!-- ACTIONS -->
 262
 263                       <md-menu-item>
 264                         <md-button
 265                           ng-click="vm.gotodashboardgoto(customDashboard, $event    )"
 266                           translate="TOOLS.GOTODASHBOARD_CUSTOMDASHBOARD"
 267                         >
 268                           goToDashboard CustomDashboard
 269                         </md-button>
 270                       </md-menu-item>
 271
 272                       <!-- SUBACTIONS -->
 273
 274                       <!-- ACTIONS -->
 275
 276                       <md-menu-item ng-if="vm.crudPermissions.canDelete">
 277                         <md-button
 278                           ng-click="vm.deleteconfirm(customDashboard, $event    )"
 279                           translate="TOOLS.DELETE_CUSTOMDASHBOARD"
 280                         >
 281                           Delete CustomDashboard
 282                         </md-button>
 283                       </md-menu-item>
 284                     </md-menu-content>
 285                   </md-menu>
 286                 </td>
 287               </tr>
 288             </tbody>
 289           </table>
 290         </md-table-container>
 291
 292         <md-table-pagination
 293           md-label="{page: '{{'TOOLS.PAGE' | translate}}:', rowsPerPage: '{{'TOOLS.ROWSPERPAGE' | translate}}:', of: '{{'TOOLS.OF' | translate}}'}"
 294           md-limit="vm.query.limit"
 295           md-limit-options="[10, 15, 20, 50, 100, 250]"
 296           md-page="vm.query.page"
 297           md-total="{{vm.customDashboards.count}}"
 298           md-on-paginate="vm.getCustomDashboards"
 299           md-page-select
 300         ></md-table-pagination>
 301       </md-card>
 302       <!-- / CUSTOMDASHBOARD TABLE -->
 303       <!-- NO RESULTS -->
 304
 305       <!-- / NO RESULTS -->
 306     </div>
 307     <!-- / MAIN -->
 308   </div>
 309   <!-- / CONTENT -->
 310
 311   <!-- ADD CUSTOMDASHBOARD BUTTON -->
 312   <md-button
 313     ng-if="vm.crudPermissions.canEdit"
 314     class="md-fab md-accent add-item-button"
 315     id="add-customDashboard-button"
 316     ng-click="vm.createOrEditCustomDashboard($event)"
 317     aria-label="add customDashboard"
 318     translate
 319     translate-attr-aria-label="TOOLS.ADD_CUSTOMDASHBOARD"
 320   >
 321     <md-icon md-font-icon="icon-plus"></md-icon>
 322   </md-button>
 323   <!-- / ADD CUSTOMDASHBOARD BUTTON -->
 324 </div>