person-edit.html

<ion-header>
  <ion-navbar color="navbar">
    <ion-buttons left>
      <button ion-button color="cancel" (click)="cancelEdit($event)">Cancel</button>
    </ion-buttons>
    <ion-title *ngIf="profile == true">Edit Profile</ion-title>
    <ion-title *ngIf="profile != true && editing == true">Edit Person</ion-title>
    <ion-title *ngIf="profile != true && editing == false">Add Person</ion-title>
    <ion-buttons right>
      <button ion-button color="primary" [solid]="website == true ? 'true' : null" *ngIf="editing == true" (click)="savePersonAndContacts('Updating', $event)">Save</button>
      <button ion-button color="primary" [solid]="website == true ? 'true' : null" *ngIf="editing == false" (click)="savePersonAndContacts('Creating', $event)">Create</button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-list *ngIf="person">
    <ion-item color="white" class="profile" text-center>
      <person-avatar [initials]="person.initials" [image]="person.profile_picture" [large]="true" *ngIf="person.initials || person.profile_picture"></person-avatar>
      <button ion-button clear color="primary" *ngIf="person.profile_picture" (click)="showCameraOptions($event)">Change photo</button>
      <button ion-button clear color="primary" *ngIf="person.profile_picture == null" (click)="showCameraOptions($event)">Add photo</button>
      <input style="display:none" type="file" (change)="onFileChanged($event)" #fileInput *ngIf="website == true">
    </ion-item>
    <ion-item color="white">
      <ion-label floating>Full Name</ion-label>
      <ion-input type="text" autocorrect="off" autocapitalize="words" autocomplete="off" (keypress)="onKeyPress($event)" [(ngModel)]="person.name"></ion-input>
    </ion-item>
    <ion-item color="white">
      <ion-label floating>Description</ion-label>
      <ion-input type="text" autocorrect="off" autocapitalize="sentences" autocomplete="off" (keypress)="onKeyPress($event)" [(ngModel)]="person.description"></ion-input>
    </ion-item>
  </ion-list>
  <ion-list *ngIf="person">
    <ion-item color="white" tappable (click)="addPhone($event)">
      <ion-label color="primary">Add phone</ion-label>
    </ion-item>
    <ion-item class="phone" color="white" *ngFor="let contact of person.getPhones()">
      <ion-icon item-left ios="ios-call-outline" md="md-call"></ion-icon>
      <ion-select item-left interface="action-sheet" [disabled]="countryCodes.length <= 1" [selectOptions]="countryOptions" [(ngModel)]="contact.country_code">
        <ion-option [value]="countryCode" *ngFor="let countryCode of countryCodes">+{{countryCode}}</ion-option>
      </ion-select>
      <ion-input item-right type="tel" autocorrect="off" autocapitalize="off" autocomplete="off" placeholder="phone number" (keypress)="onKeyPress($event);onContactChanged(contact)" [(ngModel)]="contact.national_number"></ion-input>
      <ion-input type="tel" hidden [(ngModel)]="contact.contact"></ion-input>
    </ion-item>
  </ion-list>
  <ion-list *ngIf="person">
    <ion-item color="white" tappable (click)="addEmail($event)">
      <ion-label color="primary">Add email</ion-label>
    </ion-item>
    <ion-item class="email" color="white" *ngFor="let contact of person.getEmails()">
      <ion-label no-padding no-margin icon-only text-left>
        <ion-icon ios="ios-mail-outline" md="md-mail" item-left></ion-icon>
      </ion-label>
      <ion-input item-right type="email" autocorrect="off" autocapitalize="off" autocomplete="off" placeholder="email address" (keypress)="onKeyPress($event);onContactChanged(contact)" [(ngModel)]="contact.contact"></ion-input>
    </ion-item>
  </ion-list>
  <ion-list *ngIf="person">
    <ion-item color="white" tappable (click)="addAddress($event)">
      <ion-label color="primary">Add address</ion-label>
    </ion-item>
    <ion-item class="address" color="white" *ngFor="let contact of person.getAddresses()">
      <ion-label no-padding no-margin icon-only text-left>
        <ion-icon ios="ios-home" md="md-home" item-left></ion-icon>
      </ion-label>
      <ion-input item-right type="text" autocorrect="off" autocapitalize="sentences" autocomplete="off" placeholder="street address" (keypress)="onKeyPress($event)" [(ngModel)]="contact.contact"></ion-input>
    </ion-item>
  </ion-list>
  <ion-list *ngIf="person && (!person.isOwner() || user.isOwner()) && user && user.isOwnerOrAdmin() && (user.id != person.id)">
    <ion-item class="roles" color="white">
      <ion-icon ios="ios-key-outline" md="md-key" item-left></ion-icon>
      <ion-label no-padding no-margin icon-only text-left color="grey">Roles</ion-label>
      <ion-select item-right interface="action-sheet" multiple="false" [selectOptions]="roleOptions" [(ngModel)]="person.role" (ngModelChange)="showTransferOwnerWarning()" >
        <ion-option *ngIf="user.isOwner()" value="owner">Owner</ion-option>
        <ion-option value="admin">Administrator</ion-option>
        <ion-option value="author">Author</ion-option>
        <ion-option value="viewer">Viewer</ion-option>
        <ion-option value="responder">Reply Only</ion-option>
      </ion-select>
    </ion-item>
  </ion-list>
  <ion-list *ngIf="person">
    <ion-item class="groups" color="white" text-wrap tappable (click)="showPeopleSelect($event)">
      <ion-icon ios="ios-people" md="md-people" item-left></ion-icon>
      <ion-label no-padding no-margin icon-only text-left color="grey">Groups</ion-label>
      <div item-content class="content">{{person.groupNames()}}</div>
      <button ion-button clear item-right>
        <ion-icon ios="md-arrow-dropdown" md="md-arrow-dropdown"></ion-icon>
      </button>
    </ion-item>
  </ion-list>
  <div padding margin-top *ngIf="user && person && this.editing">
    <button ion-button block color="danger" *ngIf="person.isMe()" (click)="deleteAccount($event)">Delete my account</button>
    <button ion-button block color="danger" *ngIf="person.isMe() == false && user.isOwnerOrAdmin()" (click)="removePerson($event)">Remove from organization</button>
  </div>
</ion-content>