public/src/js/modules/main/apps/analytics/views/reports/reports.html/reports.html

   1 <div id="reports" class="page-layout simple left-sidenav inner-sidenav">
   2   <!-- HEADER -->
   3   <div
   4     class="header md-accent-bg"
   5     layout="row"
   6     layout-align="space-between center"
   7   >
   8     <!-- APP TITLE -->
   9     <div layout="row" layout-align="start center">
  10       <div class="logo" layout="row" layout-align="start center">
  11         <span class="logo-icon">
  12           <md-icon md-font-icon="icon-chart-line" class="s24"></md-icon>
  13         </span>
  14         <span class="logo-text" translate="ANALYTICS.REPORTS">Reports</span>
  15       </div>
  16     </div>
  17     <!-- / APP TITLE -->
  18   </div>
  19   <!-- / HEADER -->
  20
  21   <!-- SELECTED BAR -->
  22   <div
  23     ng-show="vm.selectedReports.length > 0"
  24     class="selected-bar header animate-slide-down md-accent-bg"
  25     layout="row"
  26     layout-align="start center"
  27   >
  28     <div class="close-button-wrapper" ng-click="vm.selectedReports =[]">
  29       <md-button layout="row" layout-align="start center">
  30         <md-icon md-font-icon="icon-arrow-left" class="mr-8"></md-icon>
  31         <span translate="APP.BACK">Back</span>
  32       </md-button>
  33     </div>
  34
  35     <div flex layout="row" layout-align="space-between center">
  36       <div>
  37         <span class="selected-reports-count">
  38           <span>{{vm.selectedReports.length}}</span>
  39           <span translate="APP.SELECTED">selected</span>
  40         </span>
  41
  42         <md-menu class="select-menu" ng-if="!vm.currentThread">
  43           <md-button
  44             class="md-icon-button"
  45             ng-click="$mdMenu.open($event)"
  46             aria-label="multi select toggle"
  47             translate
  48             translate-attr-aria-label="ANALYTICS.MULTI_SELECT_TOGGLE"
  49           >
  50             <md-icon md-font-icon="icon-menu-down"></md-icon>
  51           </md-button>
  52           <md-menu-content width="3">
  53             <md-menu-item>
  54               <md-button
  55                 ng-click="vm.selectAllReports()"
  56                 translate="APP.SELECT_ALL"
  57               >
  58                 Select all
  59               </md-button>
  60             </md-menu-item>
  61             <md-menu-item>
  62               <md-button
  63                 ng-click="vm.deselectReports()"
  64                 translate="APP.SELECT_NONE"
  65               >
  66                 Select none
  67               </md-button>
  68             </md-menu-item>
  69           </md-menu-content>
  70         </md-menu>
  71       </div>
  72
  73       <div class="multi-select-actions">
  74         <button
  75           class="md-icon-button"
  76           ng-csv="vm.exportSelectedReports"
  77           csv-label="true"
  78           filename="reports.csv"
  79         >
  80           <md-icon md-font-icon="icon-file-excel"></md-icon>
  81         </button>
  82         <md-button
  83           ng-if="vm.crudPermissions.canDelete && vm.currentNode.custom"
  84           class="md-icon-button"
  85           ng-click="vm.deleteSelectedReports($event)"
  86           aria-label="delete selected"
  87           translate
  88           translate-attr-label="APP.DELETE_SELECTED"
  89         >
  90           <md-icon md-font-icon="icon-delete"></md-icon>
  91         </md-button>
  92       </div>
  93     </div>
  94   </div>
  95   <!-- / SELECTED BAR -->
  96
  97   <!-- CONTENT -->
  98   <div class="content" md-background-bg layout="row" layout-align="start start">
  99     <!-- MAIN -->
 100     <div layout="column" flex="30">
 101       <md-card class="padding-top-5 padding-horizontal-10 padding-bottom-0">
 102         <!-- SEARCH -->
 103         <div layout="row" layout-align="start center">
 104           <label for="searchFolder" class="m-0">
 105             <md-icon md-font-icon="icon-magnify"></md-icon>
 106           </label>
 107           <md-input-container
 108             md-no-float
 109             class="margin-horizontal-0 margin-bottom-0 margin-top-10"
 110             flex
 111           >
 112             <input
 113               id="searchFolder"
 114               placeholder="Search folder"
 115               type="text"
 116               ng-model="vm.search"
 117               ng-model-options="{ debounce: 1000 }"
 118               translate
 119               translate-attr-placeholder="ANALYTICS.SEARCH_FOR_FOLDER"
 120             />
 121           </md-input-container>
 122         </div>
 123         <!-- / SEARCH -->
 124       </md-card>
 125       <md-card class="padding-10 scrollable" ms-scroll>
 126         <div
 127           js-tree="vm.treeDefaultConfig"
 128           tree-events-obj="vm.treeDefaultEvents"
 129           ng-model="vm.treeDefaultData"
 130           tree="vm.treeDefaultInstance"
 131         ></div>
 132       </md-card>
 133       <md-card class="padding-10 scrollable" ms-scroll>
 134         <div
 135           js-tree="vm.treeCustomConfig"
 136           tree-events-obj="vm.treeCustomEvents"
 137           ng-model="vm.treeCustomData"
 138           tree="vm.treeCustomInstance"
 139         ></div>
 140       </md-card>
 141     </div>
 142     <md-card flex="70">
 143       <md-toolbar class="md-table-toolbar md-default">
 144         <div class="md-toolbar-tools">
 145           <span class="h2 secondary-text">{{vm.currentNode.text}}</span>
 146           <p ng-if="vm.currentPath">
 147             <span class="text-boxed">{{vm.currentPath}}</span>
 148           </p>
 149           <div flex></div>
 150           <ms-search-bar
 151             on-search="vm.query.filter = query"
 152             on-collapse="vm.query.filter = undefined"
 153             debounce="300"
 154           >
 155           </ms-search-bar>
 156           <div
 157             flow-init
 158             flow-file-added="vm.importReport($file, $event, $flow)"
 159           >
 160             <md-button
 161               ng-if="vm.crudPermissions.canEdit && vm.currentNode.custom"
 162               class="md-icon-button"
 163               aria-label="import report"
 164               translate
 165               translate-attr-label="ANALYTICS.IMPORT_REPORT"
 166               flow-btn
 167             >
 168               <md-icon md-font-icon="icon-upload"></md-icon>
 169             </md-button>
 170           </div>
 171           <md-button
 172             ng-if="vm.crudPermissions.canEdit && vm.currentNode.custom"
 173             class="md-icon-button"
 174             ng-click="vm.createOrEditReport($event)"
 175             aria-label="add report"
 176             translate
 177             translate-attr-label="ANALYTICS.ADD_REPORT"
 178           >
 179             <md-icon md-font-icon="icon-plus"></md-icon>
 180           </md-button>
 181         </div>
 182       </md-toolbar>
 183       <md-table-container>
 184         <table
 185           md-table
 186           md-row-select
 187           multiple
 188           ng-model="vm.selectedReports"
 189           md-progress="vm.promise"
 190         >
 191           <thead md-head md-order="vm.query.sort" md-on-reorder="vm.getReports">
 192             <tr md-row>
 193               <th md-column md-order-by="id" width="10px">
 194                 {{ 'APP.ID' | translate }}
 195               </th>
 196               <th md-column md-order-by="name">{{ 'APP.NAME' | translate }}</th>
 197               <th md-column md-order-by="description">
 198                 {{ 'APP.DESCRIPTION' | translate }}
 199               </th>
 200               <th md-column md-order-by="createdAt">
 201                 {{ 'APP.CREATED_AT' | translate }}
 202               </th>
 203               <th md-column width="10px"></th>
 204             </tr>
 205           </thead>
 206           <tbody md-body>
 207             <tr md-row ng-hide="vm.reports.rows.length">
 208               <td md-cell colspan="5">
 209                 <div layout="row" layout-align="center center">
 210                   <span translate="APP.NO_AVAILABLE_INFO"
 211                     >No Available Info</span
 212                   >
 213                 </div>
 214               </td>
 215             </tr>
 216             <tr
 217               md-row
 218               md-select="report"
 219               md-select-id="id"
 220               ng-repeat="report in vm.reports.rows"
 221             >
 222               <td
 223                 ng-click="!vm.crudPermissions.canEdit ? vm.currentNode.custom && vm.editstate(report, $event) : vm.currentNode.custom && vm.createOrEditReport($event, report)"
 224                 md-cell
 225                 class="id"
 226               >
 227                 {{report.id}}
 228               </td>
 229               <td
 230                 ng-click="!vm.crudPermissions.canEdit ? vm.currentNode.custom && vm.editstate(report, $event) : vm.currentNode.custom && vm.createOrEditReport($event, report)"
 231                 md-cell
 232                 class="name"
 233               >
 234                 {{report.name}}
 235               </td>
 236               <td
 237                 ng-click="!vm.crudPermissions.canEdit ? vm.currentNode.custom && vm.editstate(report, $event) : vm.currentNode.custom && vm.createOrEditReport($event, report)"
 238                 md-cell
 239                 class="description"
 240               >
 241                 {{report.description}}
 242               </td>
 243               <td
 244                 ng-click="!vm.crudPermissions.canEdit ? vm.currentNode.custom && vm.editstate(report, $event) : vm.currentNode.custom && vm.createOrEditReport($event, report)"
 245                 md-cell
 246                 class="createdAt"
 247               >
 248                 {{report.createdAt | date:'medium'}}
 249               </td>
 250               <td md-cell class="actions">
 251                 <md-menu>
 252                   <md-button
 253                     class="md-icon-button"
 254                     aria-label="More"
 255                     translate
 256                     translate-attr-aria-label="APP.MORE"
 257                     ng-click="$mdMenu.open($event)"
 258                   >
 259                     <md-icon md-font-icon="icon-dots-vertical"></md-icon>
 260                   </md-button>
 261
 262                   <md-menu-content width="3">
 263                     <md-menu-item ng-if="vm.crudPermissions.canEdit">
 264                       <md-button
 265                         ng-click="vm.copydialog(report, $event)"
 266                         translate="ANALYTICS.COPY_REPORT"
 267                       >
 268                         Copy Report
 269                       </md-button>
 270                     </md-menu-item>
 271                     <md-menu-item>
 272                       <md-button
 273                         ng-click="vm.previewdialog(report, $event)"
 274                         translate="ANALYTICS.PREVIEW_REPORT"
 275                       >
 276                         Preview Report
 277                       </md-button>
 278                     </md-menu-item>
 279                     <md-menu-item>
 280                       <md-button
 281                         ng-click="vm.rundialog(report, $event)"
 282                         translate="ANALYTICS.RUN_REPORT"
 283                       >
 284                         Run Report
 285                       </md-button>
 286                     </md-menu-item>
 287                     <md-menu-item>
 288                       <md-button
 289                         ng-click="vm.downloadfile(report, $event)"
 290                         translate="ANALYTICS.DOWNLOAD_JSON_REPORT"
 291                       >
 292                         Download Json Report
 293                       </md-button>
 294                     </md-menu-item>
 295                     <md-menu-divider
 296                       ng-if="vm.crudPermissions.canEdit && vm.crudPermissions.canDelete && vm.currentNode.custom"
 297                     >
 298                     </md-menu-divider>
 299                     <md-menu-item
 300                       ng-if="vm.crudPermissions.canEdit && vm.currentNode.custom"
 301                     >
 302                       <md-button
 303                         ng-click="vm.editstate(report, $event)"
 304                         translate="ANALYTICS.EDIT_REPORT"
 305                       >
 306                         Edit Report
 307                       </md-button>
 308                     </md-menu-item>
 309
 310                     <md-menu-item
 311                       ng-if="vm.crudPermissions.canDelete && vm.currentNode.custom"
 312                     >
 313                       <md-button
 314                         ng-click="vm.deleteconfirm(report, $event)"
 315                         translate="ANALYTICS.DELETE_REPORT"
 316                       >
 317                         Delete Report
 318                       </md-button>
 319                     </md-menu-item>
 320                   </md-menu-content>
 321                 </md-menu>
 322               </td>
 323             </tr>
 324           </tbody>
 325         </table>
 326       </md-table-container>
 327
 328       <md-table-pagination
 329         md-label="{page: '{{'APP.PAGE' | translate}}:', rowsPerPage: '{{'APP.ROWSPERPAGE' | translate}}:', of: '{{'APP.OF' | translate}}'}"
 330         md-limit="vm.query.limit"
 331         md-limit-options="[10, 15, 20, 50, 100, 250]"
 332         md-page="vm.query.page"
 333         md-total="{{vm.reports.count}}"
 334         md-on-paginate="vm.getReports"
 335         md-page-select
 336       ></md-table-pagination>
 337     </md-card>
 338     <!-- / MAIN -->
 339   </div>
 340   <!-- / CONTENT -->
 341
 342   <!-- NO ADD BUTTON BUTTON -->
 343 </div>