Desktop list editor, mobile contact editor

2026-07-09 02:15:08 +00:00 · 2014-09-05 15:12:05 -04:00
parent 4b0ef6086a
commit f321abc63a
11 changed files with 680 additions and 186 deletions
@@ -50,7 +50,7 @@
    </div>
  </div>

-  <div id="uploadResults" data-dropdown-content="dropdown-content" class="f-dropdown content">
+  <div id="uploadResults" data-dropdown-content="dropdown-content" class="f-dropdown">
    <div>
      <h3><var:string label:value="Import Cards"/></h3>
      <p id="uploadResultsContent"><!-- empty --></p>
@@ -89,7 +89,7 @@
    <li><var:string label:value="View Raw Source" /></li>
  </ul>

-  <div data-ng-app="SOGo.Contacts">
+  <div>

    <div data-ng-controller="AddressBookCtrl" data-ng-init="init()">

@@ -218,7 +218,7 @@
        </div>
        <div class="buttonsToolbar">
          <span data-ng-show="addressbook.isEditable">
-            <span class="button tiny radius" data-ng-click="edit()"><i class="icon-pencil"><!-- edit --></i></span>
+            <a class="button tiny radius" data-ui-sref="addressbook.editor({addressbook_id: addressbook.id, card_id: addressbook.card.id})"><i class="icon-pencil"><!-- edit --></i></a>
            <span class="button tiny radius alert" data-ng-click="confirmDelete(addressbook.card)"><i class="icon-trash"><!-- delete --></i></span>
          </span>
        </div>
@@ -227,13 +227,14 @@
            <label class="right"><var:string label:value="Birthday"/></label>
          </div>
          <div class="value">
-            <span>{{addressbook.card.$birthday()}}</span>
+            <span>{{addressbook.card.$birthday() | date}}</span>
          </div>
        </div>
        <div class="section" data-ng-show="addressbook.card.refs.length > 0">
+          <!-- list members -->
          <div class="attr" data-ng-repeat="ref in addressbook.card.refs">
            <div class="value single">
-              <a href="mailto:{{ref.email}}">{{ref.fn}}</a>
+              <a href="mailto:{{ref.email}}">{{ref.fn || ref.email}}</a>
            </div>
          </div>
        </div>
@@ -285,11 +286,14 @@
            <div data-ng-bind-html="addressbook.card.note"><!-- note --></div>
          </div>
        </div>
-      </div><!-- .viewer -->
+      </div>

-      <div class="editor" data-ng-show="editMode">
-        <form name="contactForm" href="" data-ng-show="addressbook.card.$isCard()"
-              data-ng-submit="save(contactForm)">
+    </script><!-- card.html -->
+
+    <script type="text/ng-template" id="cardEditor.html">
+
+      <div class="editor">
+        <form name="cardForm" data-ng-show="addressbook.card.$isCard()" data-ng-submit="save(cardForm)">
          <div class="buttonsToolbar">
            <span class="button tiny radius secondary" data-ng-click="cancel()"><i class="icon-arrow-left"><!-- cancel --></i></span>
            <span class="button tiny radius secondary" data-ng-click="reset()"><i class="icon-undo"><!-- reset --></i></span>
@@ -364,7 +368,7 @@
            </div>
            <div class="attr">
              <div class="value single">
-                <span class="button secondary tiny" data-ng-click="addOrgUnit()"><i class="icon-plus"><!-- new --></i> <var:string label:value="New Organizational Unit"/></span>
+                <span class="button secondary tiny" data-ng-click="addOrgUnit()"><i class="icon-plus"><!-- new --></i> <var:string label:value="Add Organizational Unit"/></span>
              </div>
            </div>
          </div>
@@ -388,7 +392,7 @@
                <label class="right inline"><var:string label:value="Category"/></label>
              </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 addressbook.card.allCategories"/>
+                <input type="text" label:placeholder="category" data-ng-model="category.value" data-sg-focus-on="category_{{$index}}" data-typeahead="cat for cat in addressbook.card.allCategories | filter:$viewValue"/>
              </div>
            </div>
            <div class="attr">
@@ -498,29 +502,59 @@
            </div>
          </div>
        </form>
-        <form name="contactForm" href="" data-ng-show="addressbook.card.$isList()" data-ng-submit="save()">
-          <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>
+        <form name="listForm" data-ng-show="addressbook.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></span>
+            <span class="button tiny radius secondary" data-ng-click="reset()"><i class="icon-undo"><!-- reset --></i></span>
+            <button class="button tiny radius" type="submit"><i class="icon-checkmark"><!-- save --></i></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="addressbook.card.fn"/>
+              </div>
            </div>
-            <div class="value">
-              <input type="text" data-ng-model="addressbook.card.fn"/>
+            <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="addressbook.card.nickname"/>
+              </div>
            </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="Firstname"/></label>
+          <!-- list members -->
+          <div class="section">
+            <div class="attr" data-ng-repeat="ref in addressbook.card.refs">
+              <div class="action">
+                <span class="button alert icon" data-ng-click="addressbook.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="addressbook.card.$updateMember($index, $model, $item)"/>
+              </div>
            </div>
-            <div class="value">
-              <input type="text" data-ng-model="addressbook.card.givenname"/>
+            <div class="attr">
+              <div class="value single">
+                <span class="button secondary tiny" data-ng-click="addMember()"><i class="icon-plus"><!-- new --></i> <var:string label:value="Add Member"/></span>
+              </div>
            </div>
          </div>
        </form>
-      </div><!-- .editor -->
+      </div>

-    </script>
+    </script><!-- cardEditor.html -->

    <!--<div class="dragHandle" id="rightDragHandle"></div>-->

@@ -16,7 +16,7 @@
    var contactFolders = <var:string value="contactFolders" const:escapeHTML="NO"/>;
  </script>

-  <body data-ng-app="SOGo.Contacts">
+  <body data-ng-app="SOGo.ContactsUI">

  <ion-nav-view><!-- main view --></ion-nav-view>

@@ -40,7 +40,7 @@
            </ion-item>
          </ion-list>
          <a class="button button-full button-assertive" href="#" data-ng-href="{{UserFolderURL}}logoff?theme=mobile"><var:string label:value="Disconnect"/></a>
-          <a class="button button-small button-outline button-stable button-block" href="#" data-ng-href="{{ApplicationBaseURL}}"><var:string label:value="Desktop Version"/></a>
+          <a class="button button-small button-outline button-stable button-block" data-ng-href="{{ApplicationBaseURL}}"><var:string label:value="Desktop Version"/></a>
        </ion-content>
      </ion-side-menu>
    </ion-side-menus>
@@ -53,7 +53,9 @@
      </ion-nav-buttons>
      <ion-content class="has-header">
        <ion-list>
-          <ion-item ng-repeat="folder in addressbooks" option-buttons="buttons" href="#/app/addressbook/{{folder.id}}" class="item-icon-right">
+          <ion-item ng-repeat="folder in addressbooks" option-buttons="buttons"
+                    ui-sref="app.addressbook({addressbook_id: folder.id})"
+                    class="item-icon-right">
            {{folder.name}}
            <i class="icon ion-ios7-arrow-right"><!-- right arrow icon --></i>
            <ion-option-button class="button-info"
@@ -66,6 +68,9 @@

  <script type="text/ng-template" id="addressbook.html">
    <ion-view title="{{addressbook.name}}">
+      <ion-nav-buttons side="right">
+        <a class="button button-clear button-positive button-icon icon ion-ios7-plus-empty" ui-sref="app.newCard({ addressbook_id: addressbook.id, contact_type: 'card' })"><!-- new --></a>
+      </ion-nav-buttons>
      <ion-content class="has-header">
        <ion-list>
          <ion-item class="item-input">
@@ -77,7 +82,9 @@
          </ion-item>
        </ion-list>
         <ion-list>
-          <ion-item ng-repeat="card in addressbook.cards" option-buttons="buttons" href="#/app/addressbook/{{addressbook.id}}/{{card.c_name}}" class="item-icon-right">
+          <ion-item class="item-icon-right" option-buttons="buttons"
+                    data-ng-repeat="card in addressbook.cards"
+                    data-ui-sref="app.card({addressbook_id: addressbook.id, card_id: card.c_name})">
            {{card.c_cn || card.c_mail}}
            <i class="icon ion-ios7-arrow-right"><!-- right arrow icon --></i>
          </ion-item>
@@ -87,13 +94,30 @@
  </script>

  <script type="text/ng-template" id="card.html">
-    <ion-view title="{{addressbook.card.c_cn}}">
+    <ion-view title="">
      <ion-nav-buttons side="right">
-        <button class="button button-clear button-positive" ng-click="edit()">Edit</button>
+        <a class="button button-clear button-positive" data-ng-click="edit()"><var:string label:value="Edit"/></a>
      </ion-nav-buttons>
      <ion-content padding="10" class="has-header">
        <h4 data-ng-bind-html="addressbook.card.$fullname()"><!-- fullname --></h4>
-        <p>{{addressbook.card.$description()}}</p>
+        <p>
+          {{addressbook.card.$description()}}
+          <span class="label" data-ng-repeat="category in addressbook.card.categories">{{category.value}}</span>
+        </p>
+        <ion-list class="list-clear" data-ng-show="addressbook.card.birthday">
+          <ion-item class="item-icon-right">
+            <i class="icon ion-calendar"><!-- icon --></i>
+            <small><var:string label:value="Birthday"/></small> {{addressbook.card.$birthday() | date}}
+          </ion-item>
+        </ion-list>
+        <ion-list class="list-clear" data-ng-show="addressbook.card.refs.length > 0">
+          <ion-item ng-repeat="ref in addressbook.card.refs"
+                    href="{{UserFolderURL}}Mail/Compose/{{ref.email}}"
+                    class="item-icon-right">
+            <i class="icon ion-person"><!-- icon --></i>
+            {{ref.fn || ref.email}}
+          </ion-item>
+        </ion-list>
        <ion-list class="list-clear" data-ng-show="addressbook.card.emails">
          <ion-item ng-repeat="email in addressbook.card.emails"
                    href="{{UserFolderURL}}Mail/Compose/{{email.value}}"
@@ -119,7 +143,8 @@
          </ion-item>
        </ion-list>
        <ion-list class="list-clear" data-ng-show="addressbook.card.addresses">
-          <ion-item ng-repeat="address in addressbook.card.addresses">
+          <ion-item class="item-icon-right" ng-repeat="address in addressbook.card.addresses">
+            <i class="icon ion-location"><!-- icon --></i>
            <small>{{address.type}}</small>
            <address data-sg-address="address"><!-- address --></address>
          </ion-item>
@@ -134,6 +159,154 @@
    </ion-view>
  </script>

+  <script type="text/ng-template" id="cardEditor.html">
+    <ion-modal-view>
+      <form name="cardForm" data-ng-show="addressbook.card.$isCard()">
+      <ion-header-bar class="bar-positive">
+        <button class="button button-clear" ng-click="cancel()"><var:string label:value="Cancel"/></button>
+        <button class="button button-clear" ng-click="save(cardForm)"><var:string label:value="Save"/></button>
+      </ion-header-bar>
+      <ion-content padding="10">
+        <ion-list class="list-clear">
+          <ion-item class="item-input">
+            <input type="text" label:placeholder="Display" ng-model="addressbook.card.fn"/>
+          </ion-item>
+          <ion-item class="item-input">
+            <input type="text" label:placeholder="Givenname" ng-model="addressbook.card.givenname"/>
+          </ion-item>
+          <ion-item class="item-input">
+            <input type="text" label:placeholder="Lastname" ng-model="addressbook.card.sn"/>
+          </ion-item>
+          <ion-item class="item-input">
+            <input type="text" label:placeholder="Nickname" ng-model="addressbook.card.nickname"/>
+          </ion-item>
+          <ion-item class="item-input">
+            <input type="text" label:placeholder="Organization" ng-model="addressbook.card.org"/>
+          </ion-item>
+          <ion-item class="item-input">
+            <input type="text" label:placeholder="Title" ng-model="addressbook.card.title"/>
+          </ion-item>
+        </ion-list>
+        <ion-list class="list-clear">
+          <ion-item ng-repeat="unit in addressbook.card.orgUnits"
+                    class="item-input">
+            <button class="button button-small button-assertive button-icon icon ion-minus-circled" data-ng-click="addressbook.card.$delete('orgUnits', $index)"><!-- remove --></button>
+            <input type="text" label:placeholder="organization unit"
+                   ng-model="unit.value"/>
+          </ion-item>
+          <ion-item>
+            <button class="button button-small button-clear button-positive"
+                    data-ng-click="addOrgUnit()"><i class="icon ion-plus-circled"><!-- add --></i> <var:string label:value="Add Organizational Unit"/></button>
+          </ion-item>
+        </ion-list>
+        <ion-list class="list-clear">
+          <ion-item class="item-input">
+            <input type="date" label:placeholder="birthday"
+                   ng-model="birthday"/>
+          </ion-item>
+        </ion-list>
+        <ion-list class="list-clear">
+          <ion-item ng-repeat="category in addressbook.card.categories"
+                    class="item-input">
+            <button class="button button-small button-assertive button-icon icon ion-minus-circled" data-ng-click="addressbook.card.$delete('categories', $index)"><!-- remove --></button>
+            <input type="text" label:placeholder="category"
+                   ng-model="category.value"/>
+          </ion-item>
+          <ion-item>
+            <button class="button button-small button-clear button-positive"
+                    data-ng-click="addCategory()"><i class="icon ion-plus-circled"><!-- add --></i> <var:string label:value="Add Category"/></button>
+          </ion-item>
+        </ion-list>
+        <ion-list class="list-clear">
+          <ion-item ng-repeat="email in addressbook.card.emails"
+                    class="item-input item-select">
+            <button class="button button-small button-assertive button-icon icon ion-minus-circled" data-ng-click="addressbook.card.$delete('emails', $index)"><!-- remove --></button>
+            <input type="text" label:placeholder="email address"
+                   ng-model="email.value"/>
+            <select data-ng-model="email.type"
+                    data-ng-options="type for type in allEmailTypes"><!-- email types --></select>
+          </ion-item>
+          <ion-item>
+            <button class="button button-small button-clear button-positive"
+                    data-ng-click="addEmail()"><i class="icon ion-plus-circled"><!-- add --></i> <var:string label:value="Add Email Address"/></button>
+          </ion-item>
+        </ion-list>
+        <ion-list class="list-clear">
+          <ion-item ng-repeat="phone in addressbook.card.phones"
+                    class="item-input item-select">
+            <button class="button button-small button-assertive button-icon icon ion-minus-circled" data-ng-click="addressbook.card.$delete('phones', $index)"><!-- remove --></button>
+            <input type="text" label:placeholder="phone number"
+                   ng-model="phone.value"/>
+            <select data-ng-model="phone.type"
+                    data-ng-options="type for type in allPhoneTypes"><!-- phone types --></select>
+          </ion-item>
+          <ion-item>
+            <button class="button button-small button-clear button-positive"
+                    data-ng-click="addPhone()"><i class="icon ion-plus-circled"><!-- add --></i> <var:string label:value="Add Phone Number"/></button>
+          </ion-item>
+        </ion-list>
+        <ion-list class="list-clear">
+          <ion-item ng-repeat="url in addressbook.card.urls"
+                    class="item-input item-select">
+            <button class="button button-small button-assertive button-icon icon ion-minus-circled"
+                    data-ng-click="addressbook.card.$delete('urls', $index)"><!-- remove --></button>
+            <input type="text" label:placeholder="URL"
+                   ng-model="url.value"/>
+            <select data-ng-model="url.type"
+                    data-ng-options="type for type in allUrlTypes"><!-- url types --></select>
+          </ion-item>
+          <ion-item>
+            <button class="button button-small button-clear button-positive" data-ng-click="addUrl()">
+              <i class="icon ion-plus-circled"><!-- add --></i> <var:string label:value="Add URL"/>
+            </button>
+          </ion-item>
+        </ion-list>
+        <ion-list class="list-clear"
+                  ng-repeat="address in addressbook.card.addresses">
+          <ion-item class="item-input">
+            <button class="button button-small button-assertive button-icon icon ion-minus-circled"
+                    data-ng-click="addressbook.card.$delete('addresses', $index)"><!-- remove --></button>
+            <ion-list class="list-address">
+              <ion-item class="item-input">
+                <input type="text" label:placeholder="street" data-ng-model="address.street"/>
+              </ion-item>
+              <ion-item class="item-input">
+                <input type="text" label:placeholder="street" data-ng-model="address.street2"/>
+              </ion-item>
+              <ion-item class="item-input item-select">
+                <input type="text" label:placeholder="Postoffice" data-ng-model="address.postoffice"/>
+                <select data-ng-model="address.type"
+                        data-ng-options="type for type in allAddressTypes"><!-- address types --></select>
+              </ion-item>
+              <ion-item class="item-input">
+                <input type="text" label:placeholder="City" data-ng-model="address.locality"/>
+                <input type="text" label:placeholder="Region" data-ng-model="address.region"/>
+              </ion-item>
+              <ion-item class="item-input">
+                <input type="text" label:placeholder="Country" data-ng-model="address.country"/>
+                <input type="text" label:placeholder="Postal Code" data-ng-model="address.postalcode"/>
+              </ion-item>
+            </ion-list>
+          </ion-item>
+          <ion-item>
+            <button class="button button-small button-clear button-positive" data-ng-click="addAddress()">
+              <i class="icon ion-plus-circled"><!-- add --></i> <var:string label:value="Add Address"/>
+            </button>
+          </ion-item>
+        </ion-list>
+        <ion-list class="list-clear">
+          <ion-item class="item-input">
+            <input type="text" label:placeholder="Note" data-ng-model="addressbook.card.note"/>
+          </ion-item>
+        </ion-list>
+        <button class="button button-block button-assertive"
+                ng-hide="addressbook.card.isNew"
+                ng-click="confirmDelete(addressbook.card)"><var:string label:value="Delete"/></button>
+      </ion-content>
+      </form>
+    </ion-modal-view>
+  </script>
+
 </body>

 </var:component>