sogo/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox

<?xml version='1.0' standalone='yes'?>
<container xmlns="http://www.w3.org/1999/xhtml" xmlns:var="http://www.skyrix.com/od/binding" xmlns:const="http://www.skyrix.com/od/constant" xmlns:label="OGo:label">

  <md-content md-scroll-y="true">
    <div class="editor md-padding" style="padding-bottom: 72px">
      <hgroup class="header">
        <h1 data-ng-bind-html="card.$fullname()"><!-- fullname --></h1>
        <h6>{{card.$description()}}
          <span class="label radius" data-ng-repeat="category in card.categories">{{category.value}}</span>
        </h6>
      </hgroup>
      <form name="cardForm" data-ng-show="card.$isCard()" data-ng-submit="save(cardForm)">
        <md-input-container>
          <var:entity const:name="nbsp" />
          <label>
            <var:string label:value="Display" />
          </label>
          <input type="text" ng-maxlength="30" data-ng-model="card.fn" />
        </md-input-container>
        <md-input-container>
          <div class="action">
            <var:entity const:name="nbsp" />
          </div>
          <label class="">
            <var:string label:value="Firstname" />
          </label>
          <input type="text" data-ng-model="card.givenname" />
        </md-input-container>
        <md-input-container>
          <div class="action">
            <var:entity const:name="nbsp" />
          </div>
          <label class="right inline">
            <var:string label:value="Lastname" />
          </label>
          <input type="text" data-ng-model="card.sn" />
        </md-input-container>
        <md-input-container>
          <div class="action">
            <var:entity const:name="nbsp" />
          </div>
          <label class="right inline">
            <var:string label:value="Nickname" />
          </label>
          <input type="text" data-ng-model="card.nickname" />
        </md-input-container>
        <md-input-container>
          <div class="action">
            <var:entity const:name="nbsp" />
          </div>
          <label class="right inline">
            <var:string label:value="Organization" />
          </label>
          <input type="text" data-ng-model="card.org" />
        </md-input-container>
        <md-input-container>
          <div class="action">
            <var:entity const:name="nbsp" />
          </div>
          <label class="right inline">
            <var:string label:value="Title" />
          </label>
          <input type="text" data-ng-model="card.title" />
        </md-input-container>

        <!-- org units -->

        <fieldset class="section">
          <div class="attr" data-ng-repeat="unit in card.orgUnits">
            <div class="action">
              <span class="button alert icon" data-ng-click="card.$delete('orgUnits', $index)">
                <i class="icon-minus"><!-- remove --></i>
              </span>
            </div>
            <md-input-container>
              <div class="key">
                <label class="right inline">
                  <var:string label:value="Organization Unit" />
                </label>
              </div>
              <div class="value">
                <input type="text" label:placeholder="unit" data-ng-model="unit.value" data-sg-focus-on="orgUnit_{{$index}}" />
              </div>
            </md-input-container>
          </div>
          <div class="attr">
            <div class="value single">
              <span class="button secondary outline tiny" data-ng-click="addOrgUnit()">
                <i class="icon-plus"><!-- new --></i>
                <var:string label:value="Add Organizational Unit" />
              </span>
            </div>
          </div>
        </fieldset>
        <!-- birthday -->
        <div class="attr">
          <div class="action">
            <var:entity const:name="nbsp" />
          </div>
          <div class="key">
            <label class="right inline">
              <var:string label:value="Birthday" />
            </label>
          </div>
          <div class="value">
            <input type="text" data-ng-model="card.birthday" />
          </div>
        </div>
        <!-- categories -->
        <div class="section">
<!-- if there's some categories, here they are (this is sort of a template) -->
          <div class="attr" data-ng-repeat="category in card.categories">

            <md-input-container>
              <fieldset class="bgroup" layout="row">
                <b class="md-icon-remove-circle md-flex" data-ng-click="card.$delete('categories', $index)">
                  <!-- remove --></b>
                <!--<div class="key">-->
                <label class="md-flex">
                  <var:string label:value="Category" />
                </label>
              </fieldset>

              <!--</div>--><!--<div class="value">-->
              <input type="text" label:placeholder="category" data-ng-model="category.value" data-sg-focus-on="category_{{$index}}" data-typeahead="cat for cat in card.allCategories | filter:$viewValue" />
            </md-input-container>

            <!--</div>-->
          </div>
<!-- New category button-group -->
          <div class="attr">
            <!--<div class="value single">-->
              <span class="button secondary outline tiny" data-ng-click="addCategory()">
                <i class="icon-plus"><!-- new --></i>
                <var:string label:value="New Category" />
              </span>
            <!--</div>-->
          </div>
        </div>
        <!-- emails -->
        <div class="section">
          <div class="attr" data-ng-repeat="email in card.emails">
            <div class="action">
              <span class="button alert icon" data-ng-click="card.$delete('emails', $index)">
                <i class="icon-minus"><!-- remove --></i>
              </span>
            </div>
            <div class="key">
              <select class="text-right" data-ng-model="email.type" data-ng-options="type for type in allEmailTypes">
                <!-- email types -->
              </select>
            </div>
            <div class="value">
              <input type="email" label:placeholder="email address" data-ng-model="email.value" data-sg-focus-on="email_{{$index}}" />
            </div>
          </div>
          <div class="attr">
            <div class="value single">
              <span class="button secondary outline tiny" data-ng-click="addEmail()">
                <i class="icon-plus"><!-- new --></i>
                <var:string label:value="New Email Address" />
              </span>
            </div>
          </div>
        </div>
        <!-- phones -->
        <div class="section">
          <div class="attr" data-ng-repeat="phone in card.phones">
            <div class="action">
              <span class="button alert icon" data-ng-click="card.$delete('phones', $index)">
                <i class="icon-minus"><!-- remove --></i>
              </span>
            </div>
            <div class="key">
              <select class="text-right" data-ng-model="phone.type" data-ng-options="type for type in allTelTypes">
                <!-- phone types -->
              </select>
            </div>
            <div class="value">
              <input type="text" label:placeholder="phone number" data-ng-model="phone.value" data-sg-focus-on="phone_{{$index}}" />
            </div>
          </div>
          <div class="attr">
            <div class="value single">
              <span class="button secondary outline tiny" data-ng-click="addPhone()">
                <i class="icon-plus"><!-- new --></i>
                <var:string label:value="New Phone Number" />
              </span>
            </div>
          </div>
        </div>
        <!-- urls -->
        <div class="section">
          <div class="attr" data-ng-repeat="url in card.urls">
            <div class="action">
              <span class="button alert icon" data-ng-click="card.$delete('urls', $index)">
                <i class="icon-minus"><!-- remove --></i>
              </span>
            </div>
            <div class="key">
              <select class="text-right" data-ng-model="url.type" data-ng-options="type for type in allUrlTypes">
                <!-- url types -->
              </select>
            </div>
            <div class="value">
              <input type="url" label:placeholder="URL" data-ng-model="url.value" data-sg-focus-on="url_{{$index}}" />
            </div>
          </div>
          <div class="attr">
            <div class="value single">
              <span class="button secondary outline tiny" data-ng-click="addUrl()">
                <i class="icon-plus"><!-- new --></i>
                <var:string label:value="New URL" />
              </span>
            </div>
          </div>
        </div>
        <!-- addresses -->
        <div class="section">
          <div class="attr" data-ng-repeat="address in card.addresses">
            <div class="action">
              <span class="button alert icon" data-ng-click="card.$delete('addresses', $index)">
                <i class="icon-minus"><!-- remove --></i>
              </span>
            </div>
            <div class="key">
              <select class="text-right" data-ng-model="address.type" data-ng-options="type for type in allAddressTypes">
                <!-- address types -->
              </select>
            </div>
            <div class="value compact">
              <input type="text" label:placeholder="street" data-ng-model="address.street" data-sg-focus-on="address_{{$index}}" />
              <input type="text" data-ng-model="address.street2" />
              <input type="text" label:placeholder="Postoffice" data-ng-model="address.postoffice" />
              <input type="text" label:placeholder="City" data-ng-model="address.locality" />
              <input type="text" label:placeholder="Region" data-ng-model="address.region" />
              <input type="text" label:placeholder="Country" data-ng-model="address.country" />
              <input type="text" label:placeholder="Postal Code" data-ng-model="address.postalcode" />
            </div>
          </div>
          <div class="attr">
            <div class="value single">
              <span class="button secondary outline tiny" data-ng-click="addAddress()">
                <i class="icon-plus"><!-- new --></i>
                <var:string label:value="New Address" />
              </span>
            </div>
          </div>
        </div>
        <!-- note -->
        <div class="attr">
          <div class="action">
            <var:entity const:name="nbsp" />
          </div>
          <div class="key">
            <label class="right inline">
              <var:string label:value="Note" />
            </label>
          </div>
          <div class="value">
            <textarea data-ng-model="card.note"><!-- note --></textarea>
          </div>
        </div>
        <fieldset class="sg-buttongroup">
          <span class="button tiny radius secondary" data-ng-click="cancel()">
            <i class="icon-arrow-left"><!-- cancel --></i>
            <var:string label:value="Cancel" />
          </span>
          <span class="button tiny radius secondary" data-ng-click="reset()">
            <i class="icon-undo"><!-- reset --></i>
            <var:string label:value="Reset" />
          </span>
          <md-button class="button tiny radius" type="submit">
            <i class="icon-checkmark"><!-- save --></i>
            <var:string label:value="Save" />
          </md-button>
        </fieldset>
      </form>
      <form name="listForm" data-ng-show="card.$isList()" data-ng-submit="save(listForm)">
        <div class="buttonsToolbar">
          <span class="button tiny radius secondary" data-ng-click="cancel()">
            <i class="icon-arrow-left"><!-- cancel --></i>
            <var:string label:value="Cancel" />
          </span>
          <span class="button tiny radius secondary" data-ng-click="reset()">
            <i class="icon-undo"><!-- reset --></i>
            <var:string label:value="Reset" />
          </span>
          <button class="button tiny radius" type="submit">
            <i class="icon-checkmark"><!-- save --></i>
            <var:string label:value="Save" />
          </button>
        </div>
        <div class="section">
          <div class="attr">
            <div class="action">
              <var:entity const:name="nbsp" />
            </div>
            <div class="key">
              <label class="right inline">
                <var:string label:value="Display" />
              </label>
            </div>
            <div class="value">
              <input type="text" data-ng-model="card.fn" />
            </div>
          </div>
          <div class="attr">
            <div class="action">
              <var:entity const:name="nbsp" />
            </div>
            <div class="key">
              <label class="right inline">
                <var:string label:value="Nickname" />
              </label>
            </div>
            <div class="value">
              <input type="text" data-ng-model="card.nickname" />
            </div>
          </div>
        </div>
        <!-- list members -->
        <div class="section">
          <div class="attr" data-ng-repeat="ref in card.refs">
            <div class="action">
              <span class="button alert icon" data-ng-click="card.$delete('refs', $index)">
                <i class="icon-minus"><!-- remove --></i>
              </span>
            </div>
            <div class="key">
              <label class="right inline">
                <var:string label:value="Member" />
              </label>
            </div>
            <div class="value">
              <input type="text" label:placeholder="email address" data-ng-model="ref.email" data-sg-focus-on="ref_{{$index}}" data-typeahead="card.$preferredEmail($viewValue) as card.$shortFormat($viewValue) for card in addressbook.$filter($viewValue, {dry: true, excludeLists: true})" data-typeahead-on-select="card.$updateMember($index, $model, $item)" />
            </div>
          </div>
          <div class="attr">
            <div class="value single">
              <span class="button outline secondary tiny" data-ng-click="addMember()">
                <i class="icon-plus"><!-- new --></i>
                <var:string label:value="Add Member" />
              </span>
            </div>
          </div>
        </div>
      </form>
    </div>
  </md-content>

</container>