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="ANALYTICS.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="ANALYTICS.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="ANALYTICS.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="ANALYTICS.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="ANALYTICS.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           ></ms-search-bar>
 155           <div
 156             flow-init
 157             flow-file-added="vm.importReport($file, $event, $flow)"
 158           >
 159             <md-button
 160               ng-if="vm.crudPermissions.canEdit && vm.currentNode.custom"
 161               class="md-icon-button"
 162               aria-label="import report"
 163               translate
 164               translate-attr-label="ANALYTICS.IMPORT_REPORT"
 165               flow-btn
 166             >
 167               <md-icon md-font-icon="icon-upload"></md-icon>
 168             </md-button>
 169           </div>
 170           <md-button
 171             ng-if="vm.crudPermissions.canEdit && vm.currentNode.custom"
 172             class="md-icon-button"
 173             ng-click="vm.createOrEditReport($event)"
 174             aria-label="add report"
 175             translate
 176             translate-attr-label="ANALYTICS.ADD_REPORT"
 177           >
 178             <md-icon md-font-icon="icon-plus"></md-icon>
 179           </md-button>
 180         </div>
 181       </md-toolbar>
 182       <md-table-container>
 183         <table
 184           md-table
 185           md-row-select
 186           multiple
 187           ng-model="vm.selectedReports"
 188           md-progress="vm.promise"
 189         >
 190           <thead md-head md-order="vm.query.sort" md-on-reorder="vm.getReports">
 191             <tr md-row>
 192               <th md-column md-order-by="id" width="10px">
 193                 {{ 'ANALYTICS.ID' | translate }}
 194               </th>
 195               <th md-column md-order-by="name">
 196                 {{ 'ANALYTICS.NAME' | translate }}
 197               </th>
 198               <th md-column md-order-by="description">
 199                 {{ 'ANALYTICS.DESCRIPTION' | translate }}
 200               </th>
 201               <th md-column md-order-by="createdAt">
 202                 {{ 'ANALYTICS.CREATED_AT' | translate }}
 203               </th>
 204               <th md-column width="10px"></th>
 205             </tr>
 206           </thead>
 207           <tbody md-body>
 208             <tr md-row ng-hide="vm.reports.rows.length">
 209               <td md-cell colspan="5">
 210                 <div layout="row" layout-align="center center">
 211                   <span translate="ANALYTICS.NO_AVAILABLE_INFO"
 212                     >No Available Info</span
 213                   >
 214                 </div>
 215               </td>
 216             </tr>
 217             <tr
 218               md-row
 219               md-select="report"
 220               md-select-id="id"
 221               ng-repeat="report in vm.reports.rows"
 222             >
 223               <td
 224                 ng-click="!vm.crudPermissions.canEdit ? vm.currentNode.custom && vm.editstate(report, $event) : vm.currentNode.custom && vm.createOrEditReport($event, report)"
 225                 md-cell
 226                 class="id"
 227               >
 228                 {{report.id}}
 229               </td>
 230               <td
 231                 ng-click="!vm.crudPermissions.canEdit ? vm.currentNode.custom && vm.editstate(report, $event) : vm.currentNode.custom && vm.createOrEditReport($event, report)"
 232                 md-cell
 233                 class="name"
 234               >
 235                 {{report.name}}
 236               </td>
 237               <td
 238                 ng-click="!vm.crudPermissions.canEdit ? vm.currentNode.custom && vm.editstate(report, $event) : vm.currentNode.custom && vm.createOrEditReport($event, report)"
 239                 md-cell
 240                 class="description"
 241               >
 242                 {{report.description}}
 243               </td>
 244               <td
 245                 ng-click="!vm.crudPermissions.canEdit ? vm.currentNode.custom && vm.editstate(report, $event) : vm.currentNode.custom && vm.createOrEditReport($event, report)"
 246                 md-cell
 247                 class="createdAt"
 248               >
 249                 {{report.createdAt | date:'medium'}}
 250               </td>
 251               <td md-cell class="actions">
 252                 <md-menu>
 253                   <md-button
 254                     class="md-icon-button"
 255                     aria-label="More"
 256                     translate
 257                     translate-attr-aria-label="ANALYTICS.MORE"
 258                     ng-click="$mdMenu.open($event)"
 259                   >
 260                     <md-icon md-font-icon="icon-dots-vertical"></md-icon>
 261                   </md-button>
 262
 263                   <md-menu-content width="3">
 264                     <md-menu-item ng-if="vm.crudPermissions.canEdit">
 265                       <md-button
 266                         ng-click="vm.copydialog(report, $event)"
 267                         translate="ANALYTICS.COPY_REPORT"
 268                       >
 269                         Copy Report
 270                       </md-button>
 271                     </md-menu-item>
 272                     <md-menu-item>
 273                       <md-button
 274                         ng-click="vm.previewdialog(report, $event)"
 275                         translate="ANALYTICS.PREVIEW_REPORT"
 276                       >
 277                         Preview Report
 278                       </md-button>
 279                     </md-menu-item>
 280                     <md-menu-item>
 281                       <md-button
 282                         ng-click="vm.rundialog(report, $event)"
 283                         translate="ANALYTICS.RUN_REPORT"
 284                       >
 285                         Run Report
 286                       </md-button>
 287                     </md-menu-item>
 288                     <md-menu-item>
 289                       <md-button
 290                         ng-click="vm.downloadfile(report, $event)"
 291                         translate="ANALYTICS.DOWNLOAD_JSON_REPORT"
 292                       >
 293                         Download Json Report
 294                       </md-button>
 295                     </md-menu-item>
 296                     <md-menu-divider
 297                       ng-if="vm.crudPermissions.canEdit && vm.crudPermissions.canDelete && vm.currentNode.custom"
 298                     >
 299                     </md-menu-divider>
 300                     <md-menu-item
 301                       ng-if="vm.crudPermissions.canEdit && vm.currentNode.custom"
 302                     >
 303                       <md-button
 304                         ng-click="vm.editstate(report, $event)"
 305                         translate="ANALYTICS.EDIT_REPORT"
 306                       >
 307                         Edit Report
 308                       </md-button>
 309                     </md-menu-item>
 310
 311                     <md-menu-item
 312                       ng-if="vm.crudPermissions.canDelete && vm.currentNode.custom"
 313                     >
 314                       <md-button
 315                         ng-click="vm.deleteconfirm(report, $event)"
 316                         translate="ANALYTICS.DELETE_REPORT"
 317                       >
 318                         Delete Report
 319                       </md-button>
 320                     </md-menu-item>
 321                   </md-menu-content>
 322                 </md-menu>
 323               </td>
 324             </tr>
 325           </tbody>
 326         </table>
 327       </md-table-container>
 328
 329       <md-table-pagination
 330         md-label="{page: '{{'ANALYTICS.PAGE' | translate}}:', rowsPerPage: '{{'ANALYTICS.ROWSPERPAGE' | translate}}:', of: '{{'ANALYTICS.OF' | translate}}'}"
 331         md-limit="vm.query.limit"
 332         md-limit-options="[10, 15, 20, 50, 100, 250]"
 333         md-page="vm.query.page"
 334         md-total="{{vm.reports.count}}"
 335         md-on-paginate="vm.getReports"
 336         md-page-select
 337       ></md-table-pagination>
 338     </md-card>
 339     <!-- / MAIN -->
 340   </div>
 341   <!-- / CONTENT -->
 342
 343   <!-- NO ADD BUTTON BUTTON -->
 344 </div>