public/app/main/apps/contactmanager/views/contacts/create/dialog.html

   1 <md-dialog class="cm-contact-dialog" aria-label="New Contact">
   2     <form name="contactForm" class="md-inline-form" novalidate>
   3         <md-toolbar class="md-accent md-hue-2">
   4             <div class="md-toolbar-tools" layout="row" layout-align="space-between center">
   5                 <span class="title">{{ vm.title | translate }}</span>
   6                 <md-button class="md-icon-button" ng-click="vm.closeDialog()">
   7                     <md-icon md-font-icon="icon-close" aria-label="Close dialog"></md-icon>
   8                 </md-button>
   9             </div>
  10         </md-toolbar>
  11
  12         <md-dialog-content ms-scroll>
  13             <div class="error-list">
  14                 <div ng-repeat="error in vm.errors" class="error" layout="row" layout-align="space-between center">
  15                     <div>
  16                         <span class="message">{{error.message}}</span>
  17                         <span class="type">({{error.type}})</span>
  18                     </div>
  19                     <md-button class="md-icon-button">
  20                         <md-icon md-font-icon="icon-alert-box" aria-label="alert error" class="s16"></md-icon>
  21                     </md-button>
  22                 </div>
  23             </div>
  24
  25             <md-input-container class="md-block">
  26                 <label translate="CONTACTMANAGER.FIRSTNAME">First name</label>
  27                 <input name="firstName" ng-model="vm.contact.firstName" required md-autofocus>
  28
  29                 <div ng-messages="contactForm.firstName.$error" ng-show="contactForm.firstName.$touched" role="alert">
  30                     <div ng-message="required">
  31                         <span translate="CONTACTMANAGER.ERRORS.FIRSTNAME_REQUIRED">First name field is required</span>
  32                     </div>
  33                 </div>
  34             </md-input-container>
  35
  36             <md-input-container class="md-block">
  37                 <label translate="CONTACTMANAGER.LASTNAME">Last name</label>
  38                 <input name="lastName" ng-model="vm.contact.lastName">
  39             </md-input-container>
  40
  41             <md-input-container class="md-block">
  42                 <label translate="CONTACTMANAGER.PHONE">Phone</label>
  43                 <input name="phone" ng-model="vm.contact.phone" required>
  44
  45                 <div ng-messages="contactForm.phone.$error" ng-show="contactForm.phone.$touched" role="alert">
  46                     <div ng-message="required">
  47                         <span translate="CONTACTMANAGER.ERRORS.PHONE_REQUIRED">Phone field is required</span>
  48                     </div>
  49                 </div>
  50             </md-input-container>
  51
  52             <md-input-container class="md-block">
  53                 <label translate="CONTACTMANAGER.MOBILE">Mobile</label>
  54                 <input name="mobile" ng-model="vm.contact.mobile">
  55             </md-input-container>
  56
  57             <md-input-container class="md-block">
  58                 <label translate="CONTACTMANAGER.FAX">Fax</label>
  59                 <input name="fax" ng-model="vm.contact.fax">
  60             </md-input-container>
  61
  62             <md-input-container class="md-block">
  63                 <label translate="CONTACTMANAGER.LIST">List</label>
  64                 <md-select name="list" ng-model="vm.contact.ListId" ng-disabled="vm.contact.id && vm.contact.ListId" ng-init="vm.getCustomFields(vm.contact.ListId)" ng-change="vm.getCustomFields(vm.contact.ListId)" required>
  65                     <md-optgroup label="Lists">
  66                         <md-option ng-value="list.id" ng-repeat="list in vm.lists.rows">{{list.name}}</md-option>
  67                         <md-option ng-value="null"><em translate="CONTACTMANAGER.NONE">None</em></md-option>
  68                     </md-optgroup>
  69                 </md-select>
  70
  71                 <div ng-messages="contactForm.list.$error" ng-show="contactForm.list.$touched" role="alert">
  72                     <div ng-message="required">
  73                         <span translate="CONTACTMANAGER.ERRORS.LIST_REQUIRED">List field is required</span>
  74                     </div>
  75                 </div>
  76             </md-input-container>
  77
  78             <div ng-repeat="customField in vm.customFields.rows" class="md-block" ng-switch="customField.type">
  79                 <div ng-switch-when="datetime">
  80                     <label>{{customField.alias}}</label>
  81
  82                     <div ng-init="vm.contact['cf_' + customField.id] = vm.getDateFromString(vm.contact['cf_' + customField.id])">
  83                         <mdp-date-picker mdp-open-on-click mdp-placeholder="Date" ng-required="customField.required" mdp-format="YYYY-MM-DD" ng-model="vm.contact['cf_' + customField.id]"></mdp-date-picker>
  84                         <mdp-time-picker mdp-open-on-click mdp-placeholder="Time" ng-required="customField.required" mdp-format="HH:mm:ss" mdp-auto-switch="true" ng-model="vm.contact['cf_' + customField.id]"></mdp-time-picker>
  85                     </div>
  86                 </div>
  87
  88                 <md-input-container ng-switch-when="select">
  89                     <label>{{customField.alias}}</label>
  90
  91                     <md-select ng-model="vm.contact['cf_' + customField.id]" ng-required="customField.required">
  92                         <md-option ng-repeat="value in customField.values" ng-value="value">{{value}}</md-option>
  93                         <md-option ng-value="null"><em translate="CONTACTMANAGER.NONE">None</em></md-option>
  94                     </md-select>
  95                 </md-input-container>
  96
  97                 <md-input-container ng-switch-when="switch">
  98                     <md-switch aria-label="{{customField.alias}}" ng-model="vm.contact['cf_' + customField.id]" ng-true-value="1" ng-false-value="0">
  99                         {{customField.alias}}
 100                     </md-switch>
 101                 </md-input-container>
 102
 103                 <md-input-container ng-switch-default>
 104                     <label>{{customField.alias}}</label>
 105
 106                     <input type="{{customField.type}}" ng-model="vm.contact['cf_' + customField.id]" ng-required="customField.required">
 107                 </md-input-container>
 108             </div>
 109
 110             <md-input-container class="md-block">
 111                 <label translate="CONTACTMANAGER.COMPANY">Company</label>
 112                 <md-select name="company" ng-model="vm.contact.CompanyId">
 113                     <md-optgroup label="Companies">
 114                         <md-option ng-value="company.id" ng-repeat="company in vm.companies.rows">{{company.name}}</md-option>
 115                     </md-optgroup>
 116                 </md-select>
 117             </md-input-container>
 118
 119             <div ng-if="!vm.allFields" layout="row" layout-align="center center">
 120                 <md-button class="md-accent" ng-click="vm.allFields = true" translate="CONTACTMANAGER.SHOW_ALL_FIELDS">Show All Fields</md-button>
 121             </div>
 122
 123             <md-input-container class="md-block" ng-if="vm.allFields">
 124                 <label translate="CONTACTMANAGER.DATE_OF_BIRTH">Date of Birth</label>
 125                 <md-icon md-font-icon="icon-calendar-blank"></md-icon>
 126                 <input type="date" name="dateOfBirth" ng-model="vm.contact.dateOfBirth" class="text-truncate">
 127             </md-input-container>
 128
 129             <md-input-container class="md-block" ng-if="vm.allFields">
 130                 <label translate="CONTACTMANAGER.COUNTRY">Country</label>
 131                 <input type="text" name="country" ng-model="vm.contact.country">
 132             </md-input-container>
 133
 134             <md-input-container class="md-block" ng-if="vm.allFields">
 135                 <label translate="CONTACTMANAGER.CITY">City</label>
 136                 <input type="text" name="city" ng-model="vm.contact.city">
 137             </md-input-container>
 138
 139             <md-input-container class="md-block" ng-if="vm.allFields">
 140                 <label translate="CONTACTMANAGER.STREET">Street</label>
 141                 <input type="text" name="street" ng-model="vm.contact.street">
 142             </md-input-container>
 143
 144             <md-input-container class="md-block" ng-if="vm.allFields">
 145                 <label translate="CONTACTMANAGER.POSTAL_CODE">Postal Code</label>
 146                 <input type="text" name="postalCode" ng-model="vm.contact.postalCode">
 147             </md-input-container>
 148
 149             <md-input-container class="md-block" ng-if="vm.allFields">
 150                 <label translate="CONTACTMANAGER.NOTES">Notes</label>
 151                 <input type="text" name="description" ng-model="vm.contact.description">
 152             </md-input-container>
 153
 154             <div ng-if="vm.allFields" layout="row" layout-align="center center">
 155                 <md-button class="md-accent" ng-click="vm.allFields = false" translate="CONTACTMANAGER.FEWER_FIELDS">Fewer Fields</md-button>
 156             </div>
 157
 158             <div class="error-list">
 159                 <div ng-repeat="error in vm.errors" class="error" layout="row" layout-align="space-between center">
 160                     <div>
 161                         <span class="message">{{error.message}}</span>
 162                         <span class="type">({{error.type}})</span>
 163                     </div>
 164                     <md-button class="md-icon-button">
 165                         <md-icon md-font-icon="icon-alert-box" aria-label="alert error" class="s16"></md-icon>
 166                     </md-button>
 167                 </div>
 168             </div>
 169         </md-dialog-content>
 170
 171         <md-dialog-actions layout="row" layout-align="space-between center">
 172             <div layout="row" layout-align="start center">
 173                 <md-button type="submit" ng-if="!vm.newContact" ng-click="vm.saveContact()" class="send-button md-accent md-raised" ng-disabled="contactForm.$invalid || contactForm.$pristine" aria-label="SAVE" translate="CONTACTMANAGER.SAVE" translate-attr-aria-label="CONTACTMANAGER.SAVE">
 174                     SAVE
 175                 </md-button>
 176
 177                 <md-button type="submit" ng-if="vm.newContact" ng-click="vm.addNewContact()" class="send-button md-accent md-raised" ng-disabled="contactForm.$invalid || contactForm.$pristine" aria-label="ADD" translate="CONTACTMANAGER.ADD_CONTACT" translate-attr-aria-label="CONTACTMANAGER.ADD_CONTACT">
 178                     ADD CONTACT
 179                 </md-button>
 180             </div>
 181             <div layout="row">
 182                 <md-button class="md-icon-button" ng-if="!vm.newContact" ng-click="vm.deleteContact($event)" aria-label="DELETE" translate translate-attr-aria-label="CONTACTMANAGER.DELETE">
 183                     <md-icon md-font-icon="icon-delete"></md-icon>
 184                     <md-tooltip><span translate="CONTACTMANAGER.DELETE">DELETE</span></md-tooltip>
 185                 </md-button>
 186             </div>
 187         </md-dialog-actions>
 188     </form>
 189 </md-dialog>