public/src/js/modules/main/apps/tools/views/customDashboards/edit/view.html/view.html

   1 <div
   2   id="tools-customDashboard"
   3   class="page-layout simple tabbed"
   4   layout="column"
   5 >
   6   <!-- HEADER -->
   7   <div class="header md-accent-bg" layout="row" layout-align="start center">
   8     <div class="white-fg" layout="row" layout-align="start center" flex>
   9       <md-button
  10         class="goto-customDashboards-button md-icon-button"
  11         aria-label="Go to customDashboards"
  12         ng-click="vm.gotoCustomDashboards()"
  13         translate
  14         translate-attr-aria-label="TOOLS.GO_TO_CUSTOMDASHBOARDS"
  15       >
  16         <md-icon md-font-icon="icon-arrow-left"></md-icon>
  17       </md-button>
  18
  19       <div layout="row" layout-align="start center">
  20         <div class="customDashboard-image" hide-xs>
  21           <img ng-src="assets/images/business/customDashboards.jpg" />
  22         </div>
  23
  24         <div layout="column" layout-align="start start">
  25           <div class="h2">
  26             #{{vm.customDashboard.id}}
  27             <span ng-if="vm.customDashboard.name"
  28               >{{vm.customDashboard.name}}</span
  29             >
  30           </div>
  31           <div class="subtitle secondary-text">
  32             <span translate="APP.CREATED_AT"></span>
  33             <span>{{vm.customDashboard.createdAt | date:'medium'}}</span>
  34           </div>
  35         </div>
  36       </div>
  37     </div>
  38
  39     <div ng-cloak ng-if="vm.crudPermissions.canEdit">
  40       <md-button
  41         ng-click="vm.clonedialog(vm.customDashboard, $event)"
  42         class="md-fab md-green-500-bg md-icon-button"
  43         aria-label="clone"
  44       >
  45         <md-tooltip
  46           ><span translate="TOOLS.CLONE_CUSTOMDASHBOARD"></span
  47         ></md-tooltip>
  48         <md-icon md-font-icon="icon-content-duplicate"></md-icon>
  49       </md-button>
  50     </div>
  51
  52     <div ng-cloak>
  53       <md-button
  54         ng-click="vm.gotogoto(vm.customDashboard, $event)"
  55         class="md-fab md-warn md-icon-button"
  56         aria-label="goto"
  57       >
  58         <md-tooltip
  59           ><span translate="TOOLS.GOTO_CUSTOMDASHBOARD"></span
  60         ></md-tooltip>
  61         <md-icon md-font-icon="icon-forward"></md-icon>
  62       </md-button>
  63     </div>
  64     <div>
  65       <md-button
  66         type="submit"
  67         ng-click="vm.saveCustomDashboard()"
  68         ng-if="vm.crudPermissions.canEdit"
  69         class="send-button md-accent md-raised"
  70         ng-disabled="(generalForm.$invalid) || (dashboardForm.$invalid)"
  71         translate="APP.SAVE"
  72         translate-attr-aria-label="APP.SAVE"
  73       >
  74         SAVE
  75       </md-button>
  76     </div>
  77   </div>
  78   <!-- / HEADER -->
  79
  80   <!-- CONTENT -->
  81   <div class="content">
  82     <md-tabs
  83       md-selected="vm.selectedTab"
  84       md-stretch-tabs="always"
  85       flex
  86       layout-fill
  87       md-dynamic-height
  88     >
  89       <md-tab>
  90         <md-tab-label>
  91           <span translate="APP.SETTINGS">SETTINGS</span>
  92         </md-tab-label>
  93         <md-tab-body>
  94           <div
  95             class="customDashboard-detail-form-container general md-background-bg md-whiteframe-1dp"
  96           >
  97             <div class="pb-16" layout="row" layout-align="start center">
  98               <div class="h2 secondary-text" translate="APP.GENERAL">
  99                 GENERAL
 100               </div>
 101             </div>
 102             <form name="generalForm" novalidate>
 103               <md-input-container class="md-block">
 104                 <label translate="APP.NAME">Name</label>
 105                 <input
 106                   type="text"
 107                   name="name"
 108                   ng-model="vm.customDashboard.name"
 109                   ng-required="true"
 110                   autofocus
 111                   ng-disabled="!vm.crudPermissions.canEdit"
 112                 />
 113
 114                 <div
 115                   ng-messages="generalForm['name'].$error"
 116                   ng-show="generalForm['name'].$touched"
 117                   role="alert"
 118                 >
 119                   <div ng-message="required">
 120                     <span translate="APP.ERRORS.NAME_REQUIRED"
 121                       >Name field is required</span
 122                     >
 123                   </div>
 124                 </div>
 125               </md-input-container>
 126               <md-input-container class="md-block">
 127                 <label translate="APP.DESCRIPTION">Description</label>
 128                 <input
 129                   type="text"
 130                   name="description"
 131                   ng-model="vm.customDashboard.description"
 132                   ng-disabled="!vm.crudPermissions.canEdit"
 133                 />
 134
 135                 <div
 136                   ng-messages="generalForm['description'].$error"
 137                   ng-show="generalForm['description'].$touched"
 138                   role="alert"
 139                 >
 140                   <div ng-message="required">
 141                     <span translate="TOOLS.ERRORS.DESCRIPTION_REQUIRED"
 142                       >Description field is required</span
 143                     >
 144                   </div>
 145                 </div>
 146               </md-input-container>
 147             </form>
 148           </div>
 149         </md-tab-body>
 150       </md-tab>
 151       <md-tab>
 152         <md-tab-label>
 153           <span translate="APP.DASHBOARD">DASHBOARD</span>
 154         </md-tab-label>
 155         <md-tab-body>
 156           <div
 157             class="customDashboard-detail-form-container dashboard md-background-bg md-whiteframe-1dp"
 158           >
 159             <div
 160               ng-controller="CustomDashboardItemsController as vm_cd"
 161               ng-init="vm_cd.init(vm.customDashboard, vm.crudPermissions)"
 162               class="customDashboard-detail-form-container no-padding no-margin"
 163               layout="column"
 164             >
 165               <div ng-if="vm_cd.customDashboard.widgets.length">
 166                 <md-button
 167                   class="md-fab md-mini md-accent"
 168                   ng-click="vm_cd.createOrEditWidget()"
 169                   ng-if="vm_cd.crudPermissions.canEdit"
 170                   aria-label="add item"
 171                 >
 172                   <md-tooltip>{{ 'TOOLS.ADD_WIDGET' | translate }}</md-tooltip>
 173                   <md-icon md-font-icon="icon-plus"></md-icon>
 174                 </md-button>
 175                 <md-content flex>
 176                   <ms-widget-engine
 177                     config="vm_cd.customDashboard"
 178                     on-edit="vm_cd.createOrEditWidget(widget)"
 179                     on-delete="vm_cd.deleteWidget(widget)"
 180                   ></ms-widget-engine>
 181                 </md-content>
 182               </div>
 183               <div
 184                 ng-if="!vm_cd.customDashboard.widgets.length"
 185                 layout="row"
 186                 layout-align="center center"
 187                 flex
 188               >
 189                 <md-button
 190                   class="width-130 height-130 md-accent md-raised"
 191                   ng-click="vm_cd.createOrEditWidget()"
 192                   aria-label="add item"
 193                   layout="column"
 194                 >
 195                   <md-icon
 196                     md-font-icon="icon-plus-circle"
 197                     class="s50"
 198                   ></md-icon>
 199                   <span layout-wrap translate="TOOLS.ADD_WIDGET"></span>
 200                 </md-button>
 201               </div>
 202             </div>
 203           </div>
 204         </md-tab-body>
 205       </md-tab>
 206     </md-tabs>
 207   </div>
 208   <!-- / CONTENT -->
 209 </div>