public/src/js/modules/quick-panel/tabs/groups/create/dialog.html/dialog.html

   1 <md-dialog class="group-dialog" aria-label="New ChatGroup">
   2   <form name="groupForm" class="md-inline-form" novalidate>
   3     <md-toolbar class="md-accent md-hue-2">
   4       <div
   5         class="md-toolbar-tools"
   6         layout="row"
   7         layout-align="space-between center"
   8       >
   9         <span class="title">{{ vm.title | translate }}</span>
  10         <md-button class="md-icon-button" ng-click="vm.closeDialog(null)">
  11           <md-icon
  12             md-font-icon="icon-close"
  13             aria-label="Close dialog"
  14           ></md-icon>
  15         </md-button>
  16       </div>
  17     </md-toolbar>
  18
  19     <md-dialog-content ms-scroll>
  20       <!--START Error-->
  21       <div class="error-list">
  22         <div
  23           ng-repeat="error in vm.errors"
  24           class="error"
  25           layout="row"
  26           layout-align="space-between center"
  27         >
  28           <div>
  29             <span class="message">{{error.message}}</span>
  30             <span class="type">({{error.type}})</span>
  31           </div>
  32           <md-button class="md-icon-button">
  33             <md-icon
  34               md-font-icon="icon-alert-box"
  35               aria-label="alert error"
  36               class="s16"
  37             ></md-icon>
  38           </md-button>
  39         </div>
  40       </div>
  41       <!--END Error-->
  42
  43       <!--START NAME-->
  44       <md-input-container class="md-block">
  45         <label translate="QUICKPANEL.NAME">Name</label>
  46         <input
  47           type="text"
  48           name="name"
  49           ng-model="vm.group.name"
  50           required
  51           autofocus
  52         />
  53         <div
  54           ng-messages="groupForm['name'].$error"
  55           ng-show="groupForm['name'].$touched"
  56           role="alert"
  57         >
  58           <div ng-message="required">
  59             <span translate="QUICKPANEL.ERRORS.NAME_REQUIRED"
  60               >Name field is required</span
  61             >
  62           </div>
  63           <div ng-message="pattern">
  64             <span
  65               translate="QUICKPANEL.ERRORS.NAME_MUST_VALID_PATTERN"
  66               translate-values="{ regex: '/^[A-Za-z0-9\.\_]+$/i' }"
  67               >Name must be valid pattern
  68             </span>
  69           </div>
  70         </div>
  71       </md-input-container>
  72       <!--END NAME-->
  73
  74       <!--START Members-->
  75       <md-input-container class="md-block">
  76         <label translate="QUICKPANEL.MEMBERS">Members</label>
  77         <md-contact-chips
  78           ng-model="vm.group.members"
  79           md-contacts="vm.querySearch($query)"
  80           md-contact-name="name"
  81           md-contact-image="image"
  82           md-require-match="true"
  83           md-highlight-flags="i"
  84           placeholder="{{'QUICKPANEL.MEMBERS' | translate}}"
  85         >
  86         </md-contact-chips>
  87         <div
  88           ng-messages="groupForm['strategy'].$error"
  89           ng-show="groupForm['strategy'].$touched"
  90           role="alert"
  91         >
  92           <div ng-message="required">
  93             <span translate="QUICKPANEL.ERRORS.MEMBERS_REQUIRED"
  94               >Members field is required</span
  95             >
  96           </div>
  97         </div>
  98       </md-input-container>
  99       <!--END Members-->
 100
 101       <!--START Writing-->
 102       <md-input-container class="md-block">
 103         <md-switch ng-model="vm.group.write" aria-label="Write">
 104           {{'QUICKPANEL.ENABLE_WRITING' | translate}}
 105         </md-switch>
 106       </md-input-container>
 107       <!--END Writing-->
 108
 109       <div class="error-list">
 110         <div
 111           ng-repeat="error in vm.errors"
 112           class="error"
 113           layout="row"
 114           layout-align="space-between center"
 115         >
 116           <div>
 117             <span class="message">{{error.message}}</span>
 118             <span class="type">({{error.type}})</span>
 119           </div>
 120           <md-button class="md-icon-button">
 121             <md-icon
 122               md-font-icon="icon-alert-box"
 123               aria-label="alert error"
 124               class="s16"
 125             ></md-icon>
 126           </md-button>
 127         </div>
 128       </div>
 129     </md-dialog-content>
 130
 131     <md-dialog-actions layout="row" layout-align="space-between center">
 132       <div layout="row" layout-align="start center">
 133         <md-button
 134           type="submit"
 135           ng-if="vm.newChatGroup"
 136           ng-click="vm.saveChatGroup()"
 137           class="send-button md-accent md-raised"
 138           ng-disabled="groupForm.$invalid || groupForm.$pristine || (vm.group.members.length < 1)"
 139           aria-label="SAVE"
 140           translate="QUICKPANEL.SAVE"
 141           translate-attr-aria-label="QUICKPANEL.SAVE"
 142         >
 143           SAVE
 144         </md-button>
 145       </div>
 146     </md-dialog-actions>
 147   </form>
 148 </md-dialog>