public/src/js/modules/main/apps/integrations/views/freshdeskAccounts/freshdeskAccounts.html/freshdeskAccounts.html

   1 <div
   2   id="freshdeskAccounts"
   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-heart" class="s24"></md-icon>
  16         </span>
  17         <span class="logo-text" translate="INTEGRATIONS.FRESHDESKACCOUNTS"
  18           >FreshdeskAccounts</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="APP.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.selectedFreshdeskAccounts.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.selectedFreshdeskAccounts =[]"
  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="APP.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-freshdeskAccounts-count">
  71           <span>{{vm.selectedFreshdeskAccounts.length}}</span>
  72           <span translate="APP.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="INTEGRATIONS.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.selectAllFreshdeskAccounts()"
  89                 translate="APP.SELECT_ALL"
  90               >
  91                 Select all
  92               </md-button>
  93             </md-menu-item>
  94             <md-menu-item>
  95               <md-button
  96                 ng-click="vm.deselectFreshdeskAccounts()"
  97                 translate="APP.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.exportSelectedFreshdeskAccounts"
 110           csv-label="true"
 111           filename="freshdeskAccounts.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.deleteSelectedFreshdeskAccounts($event)"
 119           aria-label="delete selected"
 120           translate
 121           translate-attr-label="APP.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       <!-- FRESHDESKACCOUNT TABLE -->
 135       <md-card>
 136         <md-table-container>
 137           <table
 138             md-table
 139             md-row-select
 140             multiple
 141             ng-model="vm.selectedFreshdeskAccounts"
 142             md-progress="vm.promise"
 143           >
 144             <thead
 145               md-head
 146               md-order="vm.query.sort"
 147               md-on-reorder="vm.getFreshdeskAccounts"
 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">{{ 'APP.ID' | translate }}</th>
 156                 <th md-column md-order-by="name">
 157                   {{ 'APP.NAME' | translate }}
 158                 </th>
 159                 <th md-column md-order-by="username">
 160                   {{ 'APP.USERNAME' | translate }}
 161                 </th>
 162                 <th md-column md-order-by="remoteUri">
 163                   {{ 'INTEGRATIONS.URI' | translate }}
 164                 </th>
 165                 <th md-column width="10px"></th>
 166               </tr>
 167             </thead>
 168             <tbody md-body>
 169               <tr md-row ng-hide="vm.freshdeskAccounts.rows.length">
 170                 <td md-cell colspan="5">
 171                   <div layout="row" layout-align="center center">
 172                     <span translate="APP.NO_AVAILABLE_INFO"
 173                       >No Available Info</span
 174                     >
 175                   </div>
 176                 </td>
 177               </tr>
 178               <tr
 179                 md-row
 180                 md-select="freshdeskAccount"
 181                 md-select-id="id"
 182                 ng-repeat="freshdeskAccount in vm.freshdeskAccounts.rows"
 183               >
 184                 <td md-cell ng-if="freshdeskAccount.userpic">
 185                   <img
 186                     class="avatar"
 187                     alt="{{freshdeskAccount.name}}"
 188                     ng-src="api/users/{{freshdeskAccount.id}}/avatar"
 189                   />
 190                 </td>
 191                 <td
 192                   md-cell
 193                   ng-if="!freshdeskAccount.userpic && (vm.table == 'users' || vm.table == 'agents')"
 194                 >
 195                   <img
 196                     class="avatar"
 197                     alt="{{freshdeskAccount.name}}"
 198                     ng-src="assets/images/avatars/profile.png"
 199                   />
 200                 </td>
 201                 <td
 202                   ng-click="vm.crudPermissions.readOnly || (vm.crudPermissions.canDelete && !vm.crudPermissions.canEdit) ? vm.editstate(freshdeskAccount, ev) : vm.createOrEditFreshdeskAccount($event, freshdeskAccount)"
 203                   md-cell
 204                   class="id"
 205                 >
 206                   {{freshdeskAccount.id}}
 207                 </td>
 208                 <td
 209                   ng-click="vm.crudPermissions.readOnly || (vm.crudPermissions.canDelete && !vm.crudPermissions.canEdit) ? vm.editstate(freshdeskAccount, ev) : vm.createOrEditFreshdeskAccount($event, freshdeskAccount)"
 210                   md-cell
 211                   class="name"
 212                 >
 213                   {{freshdeskAccount.name}}
 214                 </td>
 215                 <td
 216                   ng-click="vm.crudPermissions.readOnly || (vm.crudPermissions.canDelete && !vm.crudPermissions.canEdit) ? vm.editstate(freshdeskAccount, ev) : vm.createOrEditFreshdeskAccount($event, freshdeskAccount)"
 217                   md-cell
 218                   class="username"
 219                 >
 220                   {{freshdeskAccount.username}}
 221                 </td>
 222                 <td
 223                   ng-click="vm.crudPermissions.readOnly || (vm.crudPermissions.canDelete && !vm.crudPermissions.canEdit) ? vm.editstate(freshdeskAccount, ev) : vm.createOrEditFreshdeskAccount($event, freshdeskAccount)"
 224                   md-cell
 225                   class="remoteUri"
 226                 >
 227                   {{freshdeskAccount.remoteUri}}
 228                 </td>
 229
 230                 <td md-cell class="actions">
 231                   <md-menu>
 232                     <md-button
 233                       class="md-icon-button"
 234                       aria-label="More"
 235                       translate
 236                       translate-attr-aria-label="APP.MORE"
 237                       ng-click="$mdMenu.open($event)"
 238                     >
 239                       <md-icon md-font-icon="icon-dots-vertical"></md-icon>
 240                     </md-button>
 241
 242                     <md-menu-content width="3">
 243                       <!-- SUBACTIONS -->
 244
 245                       <!-- ACTIONS -->
 246
 247                       <md-menu-item ng-if="vm.crudPermissions.canEdit">
 248                         <md-button
 249                           ng-click="vm.editstate(freshdeskAccount, $event    )"
 250                           translate="INTEGRATIONS.EDIT_FRESHDESKACCOUNT"
 251                         >
 252                           Edit FreshdeskAccount
 253                         </md-button>
 254                       </md-menu-item>
 255
 256                       <!-- SUBACTIONS -->
 257
 258                       <!-- ACTIONS -->
 259
 260                       <md-menu-item>
 261                         <md-button
 262                           ng-click="vm.testtestintegrationaccount(freshdeskAccount, $event    )"
 263                           translate="INTEGRATIONS.TEST_FRESHDESKACCOUNT"
 264                         >
 265                           Test FreshdeskAccount
 266                         </md-button>
 267                       </md-menu-item>
 268
 269                       <!-- SUBACTIONS -->
 270
 271                       <!-- ACTIONS -->
 272
 273                       <md-menu-item ng-if="vm.crudPermissions.canDelete">
 274                         <md-button
 275                           ng-click="vm.deleteconfirm(freshdeskAccount, $event    )"
 276                           translate="INTEGRATIONS.DELETE_FRESHDESKACCOUNT"
 277                         >
 278                           Delete FreshdeskAccount
 279                         </md-button>
 280                       </md-menu-item>
 281                     </md-menu-content>
 282                   </md-menu>
 283                 </td>
 284               </tr>
 285             </tbody>
 286           </table>
 287         </md-table-container>
 288
 289         <md-table-pagination
 290           md-label="{page: '{{'INTEGRATIONS.PAGE' | translate}}:', rowsPerPage: '{{'INTEGRATIONS.ROWSPERPAGE' | translate}}:', of: '{{'INTEGRATIONS.OF' | translate}}'}"
 291           md-limit="vm.query.limit"
 292           md-limit-options="[10, 15, 20, 50, 100, 250]"
 293           md-page="vm.query.page"
 294           md-total="{{vm.freshdeskAccounts.count}}"
 295           md-on-paginate="vm.getFreshdeskAccounts"
 296           md-page-select
 297         >
 298         </md-table-pagination>
 299       </md-card>
 300       <!-- / FRESHDESKACCOUNT TABLE -->
 301       <!-- NO RESULTS -->
 302
 303       <!-- / NO RESULTS -->
 304     </div>
 305     <!-- / MAIN -->
 306   </div>
 307   <!-- / CONTENT -->
 308
 309   <!-- ADD FRESHDESKACCOUNT BUTTON -->
 310   <md-button
 311     ng-if="vm.crudPermissions.canEdit"
 312     class="md-fab md-accent add-item-button"
 313     id="add-freshdeskAccount-button"
 314     ng-click="vm.createOrEditFreshdeskAccount($event)"
 315     aria-label="add freshdeskAccount"
 316     translate
 317     translate-attr-aria-label="INTEGRATIONS.ADD_FRESHDESKACCOUNT"
 318   >
 319     <md-icon md-font-icon="icon-plus"></md-icon>
 320   </md-button>
 321   <!-- / ADD FRESHDESKACCOUNT BUTTON -->
 322 </div>