public/src/js/modules/main/apps/jscripty/views/projects/edit/view.html/view.html

   1 <div id="jscripty-project" class="page-layout simple tabbed" layout="column">
   2   <!-- HEADER -->
   3   <div class="header md-accent-bg" layout="row" layout-align="start center">
   4     <div class="white-fg" layout="row" layout-align="start center" flex>
   5       <md-button
   6         class="goto-projects-button md-icon-button"
   7         aria-label="Go to projects"
   8         ng-click="vm.gotoProjects()"
   9         translate
  10         translate-attr-aria-label="JSCRIPTY.GO_TO_PROJECTS"
  11       >
  12         <md-icon md-font-icon="icon-arrow-left"></md-icon>
  13       </md-button>
  14
  15       <div layout="row" layout-align="start center">
  16         <div class="project-image" hide-xs>
  17           <img ng-src="assets/images/business/projects.jpg" />
  18         </div>
  19
  20         <div layout="column" layout-align="start start">
  21           <div class="h2">
  22             #{{vm.project.id}}
  23             <span ng-if="vm.project.name">{{vm.project.name}}</span>
  24           </div>
  25           <div class="subtitle secondary-text">
  26             <span translate="JSCRIPTY.CREATED_AT"></span>
  27             <span>{{vm.project.createdAt | date:'medium'}}</span>
  28           </div>
  29         </div>
  30       </div>
  31     </div>
  32
  33     <div ng-cloak ng-if="vm.crudPermissions.canEdit">
  34       <md-button
  35         ng-click="vm.clonedialog(vm.project, $event)"
  36         class="md-fab md-green-500-bg md-icon-button"
  37         aria-label="clone"
  38       >
  39         <md-tooltip
  40           ><span translate="JSCRIPTY.CLONE_PROJECT"></span
  41         ></md-tooltip>
  42         <md-icon md-font-icon="icon-content-duplicate"></md-icon>
  43       </md-button>
  44     </div>
  45     <div>
  46       <md-button
  47         type="submit"
  48         ng-click="vm.saveProject()"
  49         ng-if="vm.crudPermissions.canEdit"
  50         class="send-button md-accent md-raised"
  51         ng-disabled="(generalForm.$invalid) || (builderForm.$invalid) || (previewForm.$invalid) || (sessionsForm.$invalid) || (answersForm.$invalid)"
  52         translate="JSCRIPTY.SAVE"
  53         translate-attr-aria-label="JSCRIPTY.SAVE"
  54       >
  55         SAVE
  56       </md-button>
  57     </div>
  58   </div>
  59   <!-- / HEADER -->
  60
  61   <!-- CONTENT -->
  62   <div class="content">
  63     <md-tabs
  64       md-selected="vm.selectedTab"
  65       md-stretch-tabs="always"
  66       flex
  67       layout-fill
  68       md-dynamic-height
  69     >
  70       <md-tab>
  71         <md-tab-label>
  72           <span translate="JSCRIPTY.SETTINGS">SETTINGS</span>
  73         </md-tab-label>
  74         <md-tab-body>
  75           <div
  76             class="project-detail-form-container general md-background-bg md-whiteframe-1dp"
  77           >
  78             <div class="pb-16" layout="row" layout-align="start center">
  79               <div class="h2 secondary-text" translate="JSCRIPTY.GENERAL">
  80                 GENERAL
  81               </div>
  82             </div>
  83             <form name="generalForm" novalidate>
  84               <md-input-container class="md-block">
  85                 <label translate="JSCRIPTY.NAME">Name</label>
  86                 <input
  87                   type="text"
  88                   name="name"
  89                   ng-model="vm.project.name"
  90                   ng-pattern="/^[A-Za-z0-9\.\_]+$/i"
  91                   ng-required="true"
  92                   autofocus
  93                   disabled
  94                 />
  95
  96                 <div class="hint">
  97                   <span translate="JSCRIPTY.HELP.NAME"></span>
  98                 </div>
  99                 <div
 100                   ng-messages="generalForm['name'].$error"
 101                   ng-show="generalForm['name'].$touched"
 102                   role="alert"
 103                 >
 104                   <div ng-message="required">
 105                     <span translate="JSCRIPTY.ERRORS.NAME_REQUIRED"
 106                       >Name field is required</span
 107                     >
 108                   </div>
 109                   <div ng-message="pattern">
 110                     <span
 111                       translate="JSCRIPTY.ERRORS.NAME_MUST_VALID_PATTERN"
 112                       translate-values="{ regex: '/^[A-Za-z0-9\.\_]+$/i' }"
 113                       >Name must be valid pattern
 114                     </span>
 115                   </div>
 116                 </div>
 117               </md-input-container>
 118               <md-input-container class="md-block">
 119                 <md-switch
 120                   ng-model="vm.project.enableUncompleteSave"
 121                   aria-label="EnableUncompleteSave"
 122                   ng-disabled="!vm.crudPermissions.canEdit"
 123                   ><span translate="JSCRIPTY.ENABLEUNCOMPLETESAVE"
 124                     >EnableUncompleteSave</span
 125                   ></md-switch
 126                 >
 127
 128                 <div class="hint">
 129                   <span translate="JSCRIPTY.HELP.ENABLEUNCOMPLETESAVE"></span>
 130                 </div>
 131               </md-input-container>
 132               <md-input-container class="md-block">
 133                 <md-switch
 134                   ng-model="vm.project.sendUnpauseOnSubmit"
 135                   aria-label="SendUnpauseOnSubmit"
 136                   ng-disabled="!vm.crudPermissions.canEdit"
 137                   ><span translate="JSCRIPTY.SENDUNPAUSEONSUBMIT"
 138                     >SendUnpauseOnSubmit</span
 139                   ></md-switch
 140                 >
 141
 142                 <div class="hint">
 143                   <span translate="JSCRIPTY.HELP.SENDUNPAUSEONSUBMIT"></span>
 144                 </div>
 145               </md-input-container>
 146               <md-input-container class="md-block">
 147                 <label translate="JSCRIPTY.DESCRIPTION">Description</label>
 148                 <input
 149                   type="text"
 150                   name="description"
 151                   ng-model="vm.project.description"
 152                   ng-disabled="!vm.crudPermissions.canEdit"
 153                 />
 154
 155                 <div
 156                   ng-messages="generalForm['description'].$error"
 157                   ng-show="generalForm['description'].$touched"
 158                   role="alert"
 159                 >
 160                   <div ng-message="required">
 161                     <span translate="JSCRIPTY.ERRORS.DESCRIPTION_REQUIRED"
 162                       >Description field is required</span
 163                     >
 164                   </div>
 165                 </div>
 166               </md-input-container>
 167             </form>
 168           </div>
 169         </md-tab-body>
 170       </md-tab>
 171       <md-tab>
 172         <md-tab-label>
 173           <span translate="JSCRIPTY.BUILDER">BUILDER</span>
 174         </md-tab-label>
 175         <md-tab-body>
 176           <div
 177             class="project-detail-form-container builder md-background-bg md-whiteframe-1dp"
 178           >
 179             <div
 180               ng-controller="ProjectBuilderController as vm_bc"
 181               ng-init="vm_bc.init(vm.project)"
 182             >
 183               <mw-form-builder
 184                 ng-if="vm_bc.project.formData"
 185                 form-data="vm_bc.project.formData"
 186                 options="vm_bc.optionsBuilder"
 187                 read-only="false"
 188               ></mw-form-builder>
 189             </div>
 190           </div>
 191         </md-tab-body>
 192       </md-tab>
 193       <md-tab>
 194         <md-tab-label>
 195           <span translate="JSCRIPTY.PREVIEW">PREVIEW</span>
 196         </md-tab-label>
 197         <md-tab-body>
 198           <div
 199             class="project-detail-form-container preview md-background-bg md-whiteframe-1dp"
 200           >
 201             <div
 202               layout="column"
 203               layout-align="center"
 204               ng-controller="ProjectViewerController as vm_vc"
 205               ng-init="vm_vc.init(vm.project)"
 206             >
 207               <div layout="row" layout-align="center">
 208                 <md-button
 209                   class="md-raised md-accent"
 210                   aria-label="Reset"
 211                   ng-click="vm_vc.resetViewer()"
 212                 >
 213                   Reset
 214                 </md-button>
 215               </div>
 216               <mw-form-viewer
 217                 ng-if="vm_vc.project.formData"
 218                 form-data="vm_vc.project.formData"
 219                 response-data="vm_vc.responseData"
 220                 on-submit="vm_vc.onSubmit($event)"
 221                 api="vm_vc.formViewer"
 222               ></mw-form-viewer>
 223             </div>
 224           </div>
 225         </md-tab-body>
 226       </md-tab>
 227       <md-tab>
 228         <md-tab-label>
 229           <span translate="JSCRIPTY.SESSIONS">SESSIONS</span>
 230         </md-tab-label>
 231         <md-tab-body>
 232           <div
 233             class="project-detail-form-container sessions md-background-bg md-whiteframe-1dp"
 234           >
 235             <div
 236               ng-controller="ProjectSessionsController as vm_dc"
 237               ng-init="vm_dc.init(vm.project, vm.crudPermissions)"
 238             >
 239               <md-toolbar
 240                 class="md-table-toolbar md-default"
 241                 ng-hide="vm_dc.selectedProjectSessions.length"
 242               >
 243                 <div class="md-toolbar-tools">
 244                   <span class="md-subhead" translate="JSCRIPTY.SESSIONS"
 245                     >Sessions</span
 246                   >
 247                   <ms-search-bar
 248                     on-search="vm_dc.query.filter = query"
 249                     on-collapse="vm_dc.query.filter = undefined"
 250                     debounce="300"
 251                     direction="down"
 252                   ></ms-search-bar>
 253                   <div flex></div>
 254                 </div>
 255               </md-toolbar>
 256               <md-toolbar
 257                 class="md-table-toolbar md-accent"
 258                 ng-show="vm_dc.selectedProjectSessions.length"
 259               >
 260                 <div class="md-toolbar-tools">
 261                   <span class="md-subhead"
 262                     >{{vm_dc.selectedProjectSessions.length}}
 263                     {{vm_dc.selectedProjectSessions.length > 1 ? 'items' :
 264                     'item'}} selected</span
 265                   >
 266                   <div flex></div>
 267                   <button
 268                     class="md-icon-button"
 269                     ng-csv="vm_dc.exportSelectedProjectSessions"
 270                     csv-label="true"
 271                     filename="projects.csv"
 272                   >
 273                     <md-icon md-font-icon="icon-file-excel"></md-icon>
 274                   </button>
 275                   <md-button
 276                     ng-if="vm_dc.crudPermissions.canDelete"
 277                     class="md-icon-button"
 278                     ng-click="vm_dc.deleteSelectedProjectSessions($event)"
 279                     aria-label="delete selected"
 280                     translate
 281                     translate-attr-label="JSCRIPTY.DELETE_SELECTED"
 282                   >
 283                     <md-icon md-font-icon="icon-delete"></md-icon>
 284                   </md-button>
 285                 </div>
 286               </md-toolbar>
 287               <md-table-container class="font-size-12">
 288                 <table
 289                   md-table
 290                   md-row-select
 291                   multiple
 292                   ng-model="vm_dc.selectedProjectSessions"
 293                   md-progress="vm_dc.promise"
 294                 >
 295                   <thead
 296                     md-head
 297                     md-order="vm_dc.query.sort"
 298                     md-on-reorder="vm_dc.getProjectSessions"
 299                   >
 300                     <tr md-row>
 301                       <th md-column md-order-by="id">
 302                         {{ 'JSCRIPTY.ID' | translate }}
 303                       </th>
 304                       <th md-column md-order-by="starttime">
 305                         {{ 'JSCRIPTY.STARTTIME' | translate }}
 306                       </th>
 307                       <th md-column md-order-by="endtime">
 308                         {{ 'JSCRIPTY.ENDTIME' | translate }}
 309                       </th>
 310                       <th md-column md-order-by="membername">
 311                         {{ 'JSCRIPTY.MEMBERNAME' | translate }}
 312                       </th>
 313                       <th md-column md-order-by="calleridnum">
 314                         {{ 'JSCRIPTY.CALLERIDNUM' | translate }}
 315                       </th>
 316                       <th md-column md-order-by="completed">
 317                         {{ 'JSCRIPTY.COMPLETE' | translate }}
 318                       </th>
 319                       <th md-column width="10px"></th>
 320                     </tr>
 321                   </thead>
 322                   <tbody md-body>
 323                     <tr
 324                       md-row
 325                       md-select="session"
 326                       md-select-id="id"
 327                       ng-repeat="session in vm_dc.projectSessions.rows"
 328                     >
 329                       <td md-cell>{{session.id}}</td>
 330                       <td md-cell>{{ session.starttime | formatdate }}</td>
 331                       <td md-cell>{{ session.endtime | formatdate }}</td>
 332                       <td md-cell>{{session.membername}}</td>
 333                       <td md-cell>{{session.calleridnum}}</td>
 334                       <td md-cell class="completed">
 335                         <md-icon
 336                           md-colors="{color: {{session.completed ? '\'green\'' : '\'grey\''}}}"
 337                           md-font-icon="{{session.completed? 'icon-check' : 'icon-close'}}"
 338                         ></md-icon>
 339                       </td>
 340                       <td md-cell class="actions">
 341                         <md-menu>
 342                           <md-button
 343                             class="md-icon-button"
 344                             aria-label="More"
 345                             translate
 346                             translate-attr-aria-label="JSCRIPTY.MORE"
 347                             ng-click="$mdMenu.open($event)"
 348                           >
 349                             <md-icon
 350                               md-font-icon="icon-dots-vertical"
 351                             ></md-icon>
 352                           </md-button>
 353
 354                           <md-menu-content width="3">
 355                             <md-menu-item>
 356                               <md-button
 357                                 ng-click="vm_dc.showQuestionsProjectSession($event, session)"
 358                                 translate="JSCRIPTY.SHOW_QUESTIONS_SESSION"
 359                               >
 360                                 Results Session
 361                               </md-button>
 362                             </md-menu-item>
 363                             <md-menu-item
 364                               ng-if="vm_dc.crudPermissions.canDelete"
 365                             >
 366                               <md-button
 367                                 ng-click="vm_dc.deleteConfirm(session, $event)"
 368                                 translate="JSCRIPTY.DELETE_SESSION"
 369                               >
 370                                 Delete Session
 371                               </md-button>
 372                             </md-menu-item>
 373                           </md-menu-content>
 374                         </md-menu>
 375                       </td>
 376                     </tr>
 377                     <tr md-row ng-if="!vm_dc.projectSessions.rows.length">
 378                       <td md-cell colspan="8">
 379                         <div layout="row" layout-align="center center">
 380                           <span
 381                             class="text-boxed-light"
 382                             translate="JSCRIPTY.NO_SESSION_AVAILABLE"
 383                             >No session available</span
 384                           >
 385                         </div>
 386                       </td>
 387                     </tr>
 388                   </tbody>
 389                 </table>
 390               </md-table-container>
 391               <md-table-pagination
 392                 md-label="{page: '{{'JSCRIPTY.PAGE' | translate}}:', rowsPerPage: '{{'JSCRIPTY.ROWSPERPAGE' | translate}}:', of: '{{'JSCRIPTY.OF' | translate}}'}"
 393                 md-limit="vm_dc.query.limit"
 394                 md-limit-options="[10, 15, 20, 50, 100, 250]"
 395                 md-page="vm_dc.query.page"
 396                 md-total="{{vm_dc.projectSessions.count}}"
 397                 md-on-paginate="vm_dc.getProjectSessions"
 398                 md-page-select
 399               ></md-table-pagination>
 400             </div>
 401           </div>
 402         </md-tab-body>
 403       </md-tab>
 404       <md-tab>
 405         <md-tab-label>
 406           <span translate="JSCRIPTY.ANSWERS">ANSWERS</span>
 407         </md-tab-label>
 408         <md-tab-body>
 409           <div
 410             class="project-detail-form-container answers md-background-bg md-whiteframe-1dp"
 411           >
 412             <div
 413               ng-controller="ProjectAnswersController as vm_an"
 414               ng-init="vm_an.init(vm.project)"
 415             >
 416               <div
 417                 class="pb-16"
 418                 layout="row"
 419                 layout-align="space-between center"
 420               >
 421                 <div class="h2 secondary-text" translate="JSCRIPTY.ANSWERS">
 422                   Answers
 423                 </div>
 424                 <md-date-range
 425                   localization-map="vm_an.localizationMap"
 426                   ng-model="vm_an.pickerModel"
 427                   auto-confirm="true"
 428                   show-template="true"
 429                   md-on-select="vm_an.getAnswers()"
 430                   placeholder="{{ 'DASHBOARDS.ALL' | translate }}"
 431                 ></md-date-range>
 432                 <md-button
 433                   type="button"
 434                   ng-disabled="!vm_an.answers"
 435                   ng-click="vm_an.getSummary($event)"
 436                   class="md-accent md-raised md-button ng-scope md-default-theme md-ink-ripple md-green-500-bg md-icon-button"
 437                   title="{{'JSCRIPTY.EXPORT_TO_CSV' | translate}}"
 438                 >
 439                   <md-icon
 440                     md-font-icon="icon-file-excel"
 441                     class="md-default-theme md-font material-icons icon-file-excel"
 442                   ></md-icon>
 443                 </md-button>
 444               </div>
 445               <div layout="row">
 446                 <md-card
 447                   class="md-whiteframe-1dp"
 448                   ng-if="vm_an.answers && vm_an.hasIdAnswers"
 449                   flex
 450                 >
 451                   <md-list>
 452                     <md-list-item
 453                       class="md-2-line contact-item"
 454                       ng-repeat="(key, question) in vm_an.answers"
 455                     >
 456                       <div class="md-list-item-text compact" layout-padding>
 457                         <h3>{{question.question}}</h3>
 458                         <md-table-container>
 459                           <table md-table>
 460                             <thead md-head>
 461                               <tr md-row>
 462                                 <th md-column></th>
 463                                 <th md-column>#</th>
 464                                 <th md-column>%</th>
 465                               </tr>
 466                             </thead>
 467                             <tbody md-body>
 468                               <tr
 469                                 md-row
 470                                 ng-repeat="(key, value) in question.answers"
 471                               >
 472                                 <td md-cell>{{key}}</td>
 473                                 <td md-cell width="20px">{{value}}</td>
 474                                 <td md-cell width="20px">
 475                                   {{value*100/question.sum | number:1}}
 476                                 </td>
 477                               </tr>
 478                               <tr md-row>
 479                                 <td md-cell>
 480                                   <b>{{'JSCRIPTY.TOTAL' | translate}}</b>
 481                                 </td>
 482                                 <td md-cell width="20px">
 483                                   <b>{{question.sum}}</b>
 484                                 </td>
 485                                 <td md-cell width="20px"><b>100</b></td>
 486                               </tr>
 487                             </tbody>
 488                           </table>
 489                         </md-table-container>
 490                       </div>
 491                       <md-divider ng-if="!$last"></md-divider>
 492                     </md-list-item>
 493                   </md-list>
 494                 </md-card>
 495                 <span
 496                   ng-if="!vm_an.answers || !vm_an.hasIdAnswers"
 497                   class="text-boxed-light"
 498                   translate="JSCRIPTY.NO_ANSWERS_AVAILABLE"
 499                   >No answers available</span
 500                 >
 501               </div>
 502             </div>
 503           </div>
 504         </md-tab-body>
 505       </md-tab>
 506     </md-tabs>
 507   </div>
 508   <!-- / CONTENT -->
 509 </div>