sogo/UI/Templates/Themes/mobile/ContactsUI/UIxContactFoldersView.wox
Francis Lachapelle 441834edbf Mobile version: move ng template 'menu'
The 'menu.html' AngularJS template is moved to UIxPageFrame.wox to be
used by all modules.
2015-06-11 15:38:15 -04:00

410 lines
21 KiB
XML

<?xml version='1.0' standalone='yes'?>
<!DOCTYPE var:component>
<var:component
xmlns="http://www.w3.org/1999/xhtml"
xmlns:var="http://www.skyrix.com/od/binding"
xmlns:const="http://www.skyrix.com/od/constant"
xmlns:uix="OGo:uix"
xmlns:label="OGo:label"
xmlns:rsrc="OGo:url"
const:userDefaultsKeys="SOGoContactsCategories"
const:jsFiles="Common/resource.js, Common/user-model.js, Common/acl-model.js, Contacts/card-model.js, Contacts/addressbook-model.js"
className="UIxPageFrame"
title="name"
var:popup="isPopup">
<script type="text/javascript">
var contactFolders = <var:string value="contactFolders" const:escapeHTML="NO"/>;
</script>
<ion-nav-view><!-- main view --></ion-nav-view>
<script type="text/ng-template" id="addressbooks.html">
<ion-view title="Address Books">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"><!-- menu toggle --></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<a class="button button-clear button-positive button-icon icon ion-ios7-plus-empty" ng-click="newAddressbook()"><!-- new --></a>
</ion-nav-buttons>
<ion-content class="has-header">
<ion-list>
<ion-item ng-repeat="addressbook in addressbooks" option-buttons="buttons"
ui-sref="app.addressbook({addressbookId: addressbook.id})"
class="item-icon-left item-icon-right">
<i class="icon" ng-class="{'ion-earth': addressbook.isRemote}"><!-- public addressbook --></i>
{{addressbook.name}}
<i class="icon ion-ios7-arrow-right"><!-- right arrow icon --></i>
<ion-option-button class="button-info"
ng-hide="addressbook.isRemote"
ng-click="edit(addressbook)"><var:string label:value="Edit"/></ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
</script>
<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" ng-click="addCard()"><!-- new --></a>
</ion-nav-buttons>
<ion-content class="has-header">
<ion-list>
<ion-item class="item-input">
<i class="icon ion-search placeholder-icon"><!-- search --></i>
<input type="text"
placeholder="Search"
data-ng-model="search.filter"
data-ng-keyup="doSearch($event)"/>
</ion-item>
</ion-list>
<ion-list>
<ion-item class="item-icon-right" option-buttons="buttons"
data-ng-repeat="card in addressbook.cards"
data-ui-sref="app.card({addressbookId: addressbook.id, cardId: card.c_name})">
{{card.c_cn || card.c_mail}}
<i class="icon ion-ios7-arrow-right"><!-- right arrow icon --></i>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
</script>
<script type="text/ng-template" id="card.html">
<ion-view title="">
<ion-nav-buttons side="right">
<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="card.$fullname()"><!-- fullname --></h4>
<p>
{{card.$description()}}
<span class="label" data-ng-repeat="category in card.categories">{{category.value}}</span>
</p>
<ion-list class="list-clear" data-ng-show="card.birthday">
<ion-item class="item-icon-right">
<i class="icon ion-calendar"><!-- icon --></i>
<small><var:string label:value="Birthday"/></small> {{card.$birthday() | date}}
</ion-item>
</ion-list>
<ion-list class="list-clear" data-ng-show="card.refs.length > 0">
<ion-item ng-repeat="ref in 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="card.emails">
<ion-item ng-repeat="email in card.emails"
href="{{UserFolderURL}}Mail/Compose/{{email.value}}"
class="item-icon-right">
<i class="icon ion-email"><!-- icon --></i>
<small>{{email.type}}</small> {{email.value}}
</ion-item>
</ion-list>
<ion-list class="list-clear" data-ng-show="card.phones">
<ion-item ng-repeat="phone in card.phones"
href="tel:{{phone.value}}"
class="item-icon-right">
<i class="icon ion-ios7-telephone-outline"><!-- icon --></i>
<small>{{phone.type}}</small> {{phone.value}}
</ion-item>
</ion-list>
<ion-list class="list-clear" data-ng-show="card.urls">
<ion-item ng-repeat="url in card.urls"
href="{{url.value}}"
class="item-icon-right">
<i class="icon ion-link"><!-- icon --></i>
<small>{{url.type}}</small> {{url.value}}
</ion-item>
</ion-list>
<ion-list class="list-clear" data-ng-show="card.addresses">
<ion-item class="item-icon-right" ng-repeat="address in card.addresses">
<i class="icon ion-location"><!-- icon --></i>
<small>{{address.type}}</small>
<address data-sg-address="address"><!-- address --></address>
</ion-item>
</ion-list>
<ion-list class="list-clear" data-ng-show="card.note">
<ion-item>
<small><var:string label:value="note"/></small>
{{card.note}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
</script>
<script type="text/ng-template" id="cardEditor.html">
<ion-modal-view>
<form name="cardForm" data-ng-show="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="card.fn"/>
</ion-item>
<ion-item class="item-input">
<input type="text" label:placeholder="Givenname" ng-model="card.givenname"/>
</ion-item>
<ion-item class="item-input">
<input type="text" label:placeholder="Lastname" ng-model="card.sn"/>
</ion-item>
<ion-item class="item-input">
<input type="text" label:placeholder="Nickname" ng-model="card.nickname"/>
</ion-item>
<ion-item class="item-input">
<input type="text" label:placeholder="Organization" ng-model="card.org"/>
</ion-item>
<ion-item class="item-input">
<input type="text" label:placeholder="Title" ng-model="card.title"/>
</ion-item>
</ion-list>
<ion-list class="list-clear">
<ion-item ng-repeat="unit in card.orgUnits"
class="item-input">
<button class="button button-small button-assertive button-icon icon ion-minus-circled" data-ng-click="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 card.categories"
class="item-input">
<button class="button button-small button-assertive button-icon icon ion-minus-circled" data-ng-click="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 card.emails"
class="item-input item-select">
<button class="button button-small button-assertive button-icon icon ion-minus-circled" data-ng-click="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 card.phones"
class="item-input item-select">
<button class="button button-small button-assertive button-icon icon ion-minus-circled" data-ng-click="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 card.urls"
class="item-input item-select">
<button class="button button-small button-assertive button-icon icon ion-minus-circled"
data-ng-click="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 card.addresses">
<ion-item class="item-input">
<button class="button button-small button-assertive button-icon icon ion-minus-circled"
data-ng-click="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="card.note"/>
</ion-item>
</ion-list>
<button class="button button-block button-assertive"
ng-hide="card.isNew"
ng-click="confirmDelete(card)"><var:string label:value="Delete"/></button>
</ion-content>
</form>
<form name="listForm" data-ng-show="card.$isList()">
<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(listForm)"><var:string label:value="Save" /></button>
</ion-header-bar>
<ion-content padding="10">
<div>
<div class="subtitle">
<var:string label:value="List details"/>
</div>
<ion-list class="list-clear">
<ion-item class="item-input">
<input type="text" label:placeholder="List name:" ng-model="card.fn"/>
</ion-item>
<ion-item class="item-input">
<input type="text" label:placeholder="List nickname:" ng-model="card.nickname"/>
</ion-item>
<ion-item class="item-input">
<input type="text" label:placeholder="List description:" ng-model="card.description"/>
</ion-item>
</ion-list>
</div>
<div class="subtitle">
<var:string label:value="Members"/>
</div>
<div id="search-box" class="item-input-inset">
<div class="item-input-wrapper">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" label:placeholder="Search" data-ng-model="search.query" data-ng-keyup="showPopOver($event)" />
<i ng-show="search.query" class="clear-search icon ion-ios7-close-empty" ng-click="resetSearch()"><!-- spacer --></i>
</div>
</div>
<ion-list class="list-clear">
<ion-item ng-repeat="ref in card.refs" class="item-input">
<button class="button button-small button-assertive button-icon icon ion-minus-circled"
data-ng-click="card.$delete('refs', $index)"><!-- remove --></button>
<span>{{ref.$shortFormat()}}</span>
</ion-item>
</ion-list>
<button class="button button-block button-assertive" ng-hide="card.isNew"
ng-click="confirmDelete(card)"><var:string label:value="Delete"/></button>
</ion-content>
</form>
</ion-modal-view>
</script>
<script type="text/ng-template" id="searchFolderContacts.html">
<ion-popover-view>
<ion-content>
<ion-list ng-repeat="card in addressbook.cards | orderBy:['sn'] | filter:cardsFilter">
<ion-item ng-click="addMember(card)">
<span>{{card.$shortFormat(search.query)}}</span>
</ion-item>
</ion-list>
</ion-content>
</ion-popover-view>
</script>
<script type="text/ng-template" id="acl-modal.html">
<ion-modal-view>
<ion-header-bar class="bar-positive">
<div class="buttons" data-ng-hide="search.active">
<button class="button button-icon" data-ng-click="closeModal()"><var:string label:value="Close"/></button>
</div>
<div class="buttons" data-ng-show="search.active">
<button class="button button-icon" data-ng-click="cancelSearch()"><var:string label:value="Back"/></button>
</div>
<h1 class="title">{{title}}</h1>
<div class="buttons">
<button class="button button-icon" data-ng-click="saveModal()"><var:string label:value="Save"/></button>
</div>
</ion-header-bar>
<ion-content>
<ion-list show-delete="showDelete"
on-tap="toggleDelete(false)">
<div ng-repeat="user in users | orderBy:['userClass', 'displayName']">
<ion-item class="item-stable item-icon-left item-icon-right"
ng-click="toggleUser(user)"
on-swipe-right="toggleDelete(true)">
<i class="icon"
ng-class="(user.userClass == 'public-user') ? 'ion-ios7-people' : 'ion-ios7-person'"><!-- spacer --></i>
{{user.$shortFormat()}}
<i class="icon" data-ng-class="displayIcon(user)"><!-- spacer --></i>
<ion-delete-button class="ion-minus-circled"
ng-disabled="user.$isSpecial() || !user.inAclList"
ng-click="removeUser(user)"></ion-delete-button>
</ion-item>
<div class="item-accordion" ng-show="userIsSelected(user)">
<ion-toggle ng-hide="user.$isSpecial()"
ng-model="selectedUser.isSubscribed"
ng-checked="selectedUser.isSubscribed"
ng-disabled="selectedUser.wasSubscribed">
<var:string label:value="Subscribe user"/></ion-toggle>
<ion-checkbox data-ng-hide="selectedUser.$isAnonymous()"
data-ng-checked="selectedUser.rights.canCreateObjects"
data-ng-model="selectedUser.rights.canCreateObjects"
data-ng-change="confirmChange(selectedUser)">
<var:string label:value="This person can add cards to this addressbook."/></ion-checkbox>
<ion-checkbox data-ng-hide="selectedUser.$isAnonymous()"
data-ng-checked="selectedUser.rights.canEditObjects"
data-ng-model="selectedUser.rights.canEditObjects"
data-ng-change="confirmChange(selectedUser)">
<var:string label:value="This person can edit the cards of this addressbook."/></ion-checkbox>
<ion-checkbox data-ng-hide="selectedUser.$isAnonymous()"
data-ng-checked="selectedUser.rights.canEraseObjects"
data-ng-model="selectedUser.rights.canEraseObjects"
data-ng-change="confirmChange(selectedUser)">
<var:string label:value="This person can erase cards from this addressbook."/></ion-checkbox>
<ion-checkbox data-ng-checked="selectedUser.rights.canViewObjects"
data-ng-model="selectedUser.rights.canViewObjects"
data-ng-change="confirmChange(selectedUser)">
<var:string label:value="This person can read the cards of this addressbook."/></ion-checkbox>
</div>
</div>
</ion-list>
</ion-content>
<ion-footer-bar class="bar-footer">
<ion-search class="item item-light" label:placeholder="Add..." min-length="2"
model="usersFound"
source="searchUsers"
clear="cancelSearch()">
</ion-search>
</ion-footer-bar>
</ion-modal-view>
</script>
</var:component>