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 class="header md-accent-bg" layout="row" layout-align="space-between center">
   4     <!-- APP TITLE -->
   5     <div layout="row" layout-align="start center">
   6       <div class="logo" layout="row" layout-align="start center">
   7         <span class="logo-icon">
   8           <md-icon md-font-icon="icon-chart-line" class="s24"></md-icon>
   9         </span>
  10         <span class="logo-text" translate="ANALYTICS.REPORTS">Reports</span>
  11       </div>
  12     </div>
  13     <!-- / APP TITLE -->
  14   </div>
  15   <!-- / HEADER -->
  16
  17   <!-- SELECTED BAR -->
  18   <div ng-show="vm.selectedReports.length > 0" class="selected-bar header animate-slide-down md-accent-bg" layout="row"
  19     layout-align="start center">
  20     <div class="close-button-wrapper" ng-click="vm.selectedReports =[]">
  21       <md-button layout="row" layout-align="start center">
  22         <md-icon md-font-icon="icon-arrow-left" class="mr-8"></md-icon>
  23         <span translate="APP.BACK">Back</span>
  24       </md-button>
  25     </div>
  26
  27     <div flex layout="row" layout-align="space-between center">
  28       <div>
  29         <span class="selected-reports-count">
  30           <span>{{vm.selectedReports.length}}</span>
  31           <span translate="APP.SELECTED">selected</span>
  32         </span>
  33
  34         <md-menu class="select-menu" ng-if="!vm.currentThread">
  35           <md-button class="md-icon-button" ng-click="$mdMenu.open($event)" aria-label="multi select toggle" translate
  36             translate-attr-aria-label="ANALYTICS.MULTI_SELECT_TOGGLE">
  37             <md-icon md-font-icon="icon-menu-down"></md-icon>
  38           </md-button>
  39           <md-menu-content width="3">
  40             <md-menu-item>
  41               <md-button ng-click="vm.selectAllReports()" translate="APP.SELECT_ALL">
  42                 Select all
  43               </md-button>
  44             </md-menu-item>
  45             <md-menu-item>
  46               <md-button ng-click="vm.deselectReports()" translate="APP.SELECT_NONE">
  47                 Select none
  48               </md-button>
  49             </md-menu-item>
  50           </md-menu-content>
  51         </md-menu>
  52       </div>
  53
  54       <div class="multi-select-actions">
  55         <button class="md-icon-button" ng-csv="vm.exportSelectedReports" csv-label="true" filename="reports.csv">
  56           <md-icon md-font-icon="icon-file-excel"></md-icon>
  57         </button>
  58         <md-button ng-if="vm.crudPermissions.canDelete && vm.currentNode.custom" class="md-icon-button"
  59           ng-click="vm.deleteSelectedReports($event)" aria-label="delete selected" translate
  60           translate-attr-label="APP.DELETE_SELECTED">
  61           <md-icon md-font-icon="icon-delete"></md-icon>
  62         </md-button>
  63       </div>
  64     </div>
  65   </div>
  66   <!-- / SELECTED BAR -->
  67
  68   <!-- CONTENT -->
  69   <div class="content" md-background-bg layout="row" layout-align="start start">
  70     <!-- MAIN -->
  71     <div layout="column" flex="30">
  72       <md-card class="padding-top-5 padding-horizontal-10 padding-bottom-0">
  73         <!-- SEARCH -->
  74         <div layout="row" layout-align="start center">
  75           <label for="searchFolder" class="m-0">
  76             <md-icon md-font-icon="icon-magnify"></md-icon>
  77           </label>
  78           <md-input-container md-no-float class="margin-horizontal-0 margin-bottom-0 margin-top-10" flex>
  79             <input id="searchFolder" placeholder="Search folder" type="text" ng-model="vm.search"
  80               ng-model-options="{ debounce: 1000 }" translate
  81               translate-attr-placeholder="ANALYTICS.SEARCH_FOR_FOLDER" />
  82           </md-input-container>
  83         </div>
  84         <!-- / SEARCH -->
  85       </md-card>
  86       <md-card class="padding-10 scrollable" ms-scroll>
  87         <div js-tree="vm.treeDefaultConfig" tree-events-obj="vm.treeDefaultEvents" ng-model="vm.treeDefaultData"
  88           tree="vm.treeDefaultInstance"></div>
  89       </md-card>
  90       <md-card class="padding-10 scrollable" ms-scroll>
  91         <div js-tree="vm.treeCustomConfig" tree-events-obj="vm.treeCustomEvents" ng-model="vm.treeCustomData"
  92           tree="vm.treeCustomInstance"></div>
  93       </md-card>
  94     </div>
  95     <md-card flex="70">
  96       <md-toolbar class="md-table-toolbar md-default">
  97         <div class="md-toolbar-tools">
  98           <span class="h2 secondary-text">{{vm.currentNode.text}}</span>
  99           <p ng-if="vm.currentPath">
 100             <span class="text-boxed">{{vm.currentPath}}</span>
 101           </p>
 102           <div flex></div>
 103           <ms-search-bar on-search="vm.query.filter = query" on-collapse="vm.query.filter = undefined" debounce="300">
 104           </ms-search-bar>
 105           <div flow-init flow-file-added="vm.importReport($file, $event, $flow)">
 106             <md-button ng-if="vm.crudPermissions.canEdit && vm.currentNode.custom" class="md-icon-button"
 107               aria-label="import report" translate translate-attr-label="ANALYTICS.IMPORT_REPORT" flow-btn>
 108               <md-icon md-font-icon="icon-upload"></md-icon>
 109             </md-button>
 110           </div>
 111           <md-button ng-if="vm.crudPermissions.canEdit && vm.currentNode.custom" class="md-icon-button"
 112             ng-click="vm.createOrEditReport($event)" aria-label="add report" translate
 113             translate-attr-label="ANALYTICS.ADD_REPORT">
 114             <md-icon md-font-icon="icon-plus"></md-icon>
 115           </md-button>
 116         </div>
 117       </md-toolbar>
 118       <md-table-container>
 119         <table md-table md-row-select multiple ng-model="vm.selectedReports" md-progress="vm.promise">
 120           <thead md-head md-order="vm.query.sort" md-on-reorder="vm.getReports">
 121             <tr md-row>
 122               <th md-column md-order-by="id" width="10px">
 123                 {{ 'APP.ID' | translate }}
 124               </th>
 125               <th md-column md-order-by="name">{{ 'APP.NAME' | translate }}</th>
 126               <th md-column md-order-by="description">
 127                 {{ 'APP.DESCRIPTION' | translate }}
 128               </th>
 129               <th md-column md-order-by="createdAt">
 130                 {{ 'APP.CREATED_AT' | translate }}
 131               </th>
 132               <th md-column width="10px"></th>
 133             </tr>
 134           </thead>
 135           <tbody md-body>
 136             <tr md-row ng-hide="vm.reports.rows.length">
 137               <td md-cell colspan="5">
 138                 <div layout="row" layout-align="center center">
 139                   <span translate="APP.NO_AVAILABLE_INFO">No Available Info</span>
 140                 </div>
 141               </td>
 142             </tr>
 143             <tr md-row md-select="report" md-select-id="id" ng-repeat="report in vm.reports.rows">
 144               <td
 145                 ng-click="!vm.crudPermissions.canEdit ? vm.currentNode.custom && vm.editstate(report, $event) : vm.currentNode.custom && vm.createOrEditReport($event, report)"
 146                 md-cell class="id">
 147                 {{report.id}}
 148               </td>
 149               <td
 150                 ng-click="!vm.crudPermissions.canEdit ? vm.currentNode.custom && vm.editstate(report, $event) : vm.currentNode.custom && vm.createOrEditReport($event, report)"
 151                 md-cell class="name">
 152                 {{report.name}}
 153               </td>
 154               <td
 155                 ng-click="!vm.crudPermissions.canEdit ? vm.currentNode.custom && vm.editstate(report, $event) : vm.currentNode.custom && vm.createOrEditReport($event, report)"
 156                 md-cell class="description">
 157                 {{report.description}}
 158               </td>
 159               <td
 160                 ng-click="!vm.crudPermissions.canEdit ? vm.currentNode.custom && vm.editstate(report, $event) : vm.currentNode.custom && vm.createOrEditReport($event, report)"
 161                 md-cell class="createdAt">
 162                 {{report.createdAt | date:'medium'}}
 163               </td>
 164               <td md-cell class="actions">
 165                 <md-menu>
 166                   <md-button class="md-icon-button" aria-label="More" translate translate-attr-aria-label="APP.MORE"
 167                     ng-click="$mdMenu.open($event)">
 168                     <md-icon md-font-icon="icon-dots-vertical"></md-icon>
 169                   </md-button>
 170
 171                   <md-menu-content width="3">
 172                     <md-menu-item ng-if="vm.crudPermissions.canEdit">
 173                       <md-button ng-click="vm.copydialog(report, $event)" translate="ANALYTICS.COPY_REPORT">
 174                         Copy Report
 175                       </md-button>
 176                     </md-menu-item>
 177                     <md-menu-item>
 178                       <md-button ng-click="vm.previewdialog(report, $event)" translate="ANALYTICS.PREVIEW_REPORT">
 179                         Preview Report
 180                       </md-button>
 181                     </md-menu-item>
 182                     <md-menu-item>
 183                       <md-button ng-click="vm.rundialog(report, $event)" translate="ANALYTICS.RUN_REPORT">
 184                         Run Report
 185                       </md-button>
 186                     </md-menu-item>
 187                     <md-menu-item>
 188                       <md-button ng-click="vm.downloadfile(report, $event)" translate="ANALYTICS.DOWNLOAD_JSON_REPORT">
 189                         Download Json Report
 190                       </md-button>
 191                     </md-menu-item>
 192                     <md-menu-divider
 193                       ng-if="vm.crudPermissions.canEdit && vm.crudPermissions.canDelete && vm.currentNode.custom">
 194                     </md-menu-divider>
 195                     <md-menu-item ng-if="vm.crudPermissions.canEdit && vm.currentNode.custom">
 196                       <md-button ng-click="vm.editstate(report, $event)" translate="ANALYTICS.EDIT_REPORT">
 197                         Edit Report
 198                       </md-button>
 199                     </md-menu-item>
 200
 201                     <md-menu-item ng-if="vm.crudPermissions.canDelete && vm.currentNode.custom">
 202                       <md-button ng-click="vm.deleteconfirm(report, $event)" translate="ANALYTICS.DELETE_REPORT">
 203                         Delete Report
 204                       </md-button>
 205                     </md-menu-item>
 206                   </md-menu-content>
 207                 </md-menu>
 208               </td>
 209             </tr>
 210           </tbody>
 211         </table>
 212       </md-table-container>
 213
 214       <md-table-pagination
 215         md-label="{page: '{{'APP.PAGE' | translate}}:', rowsPerPage: '{{'APP.ROWSPERPAGE' | translate}}:', of: '{{'APP.OF' | translate}}'}"
 216         md-limit="vm.query.limit" md-limit-options="[10, 15, 20, 50, 100, 250]" md-page="vm.query.page"
 217         md-total="{{vm.reports.count}}" md-on-paginate="vm.getReports" md-page-select></md-table-pagination>
 218     </md-card>
 219     <!-- / MAIN -->
 220   </div>
 221   <!-- / CONTENT -->
 222
 223   <!-- NO ADD BUTTON BUTTON -->
 224 </div>