public/src/js/modules/main/apps/contactmanager/views/lists/lists.html/lists.html

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