sogo/UI/Templates/ContactsUI/UIxContactFoldersView.wox

<?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:label = "OGo:label"
    const:userDefaultsKeys = "SOGoContactsCategories"
    const:jsFiles = "Common/user-model.js, Common/acl-model.js, Common/resource.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>

  <!--
  <div id="uploadDialog" style="display: none" class="dialog left">
    <div>
      <h3><var:string label:value="Import Cards"/></h3>
      <p class="prompt"><var:string label:value="Select a vCard or LDIF file."/></p>
      <form const:href="" name="uploadForm" id="uploadForm" method="post"
            enctype="multipart/form-data"
            onsubmit="return AIM.submit(this, {'onStart' : validateUploadForm,
                      'onComplete' : uploadCompleted})">
        <p class="prompt"><input type="file" name="contactsFile" id="contactsFile" class="textField" required="required" />
        <a href="#" class="button actionButton" id="uploadSubmit"
           onclick="if($('uploadForm').onsubmit()) $('uploadForm').submit()">
        <span><var:string label:value="Upload" /></span></a>
        <a href="#" class="button" const:id="uploadCancel">
        <span><var:string label:value="Cancel" /></span></a></p>
      </form>
      <hr/>
    </div>
  </div>

  <div id="uploadResults" dropdown-content="dropdown-content" class="f-dropdown">
    <div>
      <h3><var:string label:value="Import Cards"/></h3>
      <p id="uploadResultsContent">!- empty -</p>
      <p><a href="#" class="button" const:id="uploadOK">
      <span><var:string label:value="Done" /></span></a></p>
      <hr/>
    </div>
  </div>

  <ul class="f-dropdown" dropdown-content="dropdown-content" id="contactMenu">
    <li><var:string label:value="Properties" /></li>
    <li><var:string label:value="Categories" /></li>
    <li>!- separator -</li>
    <li><var:string label:value="Write" /></li>
    <li><var:string label:value="Instant Message" /></li>
    <li>!- separator -</li>
    <li><var:string label:value="Delete" /></li>
    <li>!- separator -</li>
    <li><var:string label:value="Move To" /></li>
    <li><var:string label:value="Copy To" /></li>
    <li><var:string label:value="Export" /></li>
    <li><var:string label:value="View Raw Source" /></li>
    </ul>
    -->
  <!--
    MAIN CONTENT ROW
    Content of the application view injected injected in the element bellow
    MUST be the first html element after body
    SHOULD  be a main tag (with role="main")

    Templates script tag wrappers goes next
  -->
  <!-- fixme : consistently prefix attributes with or without data prefix-->
  <main class="view md-layout-fill" ui-view="addressbooks" layout="row"><!-- addressbooks list --></main>

  <!-- TEMPLATE SCRIPT WRAPPER -->
  <script type = "text/ng-template" id = "UIxContactFoldersView">

    <!-- dropdown menu for addressbook options button -->
    <div id = "addressbookProperties" class = "f-dropdown icons-dropdown">
      <ul class = "button-group">
        <li label:tooltip = "Links to this Address Book"
            tooltip-popup-delay = "500">
          <span class = "button"
              sg-dropdown-content-toggle = "#addressbookLinks">
            <i class = "icon-hyperlink"><!-- links --></i>
          </span>
        </li>
        <li label:tooltip = "Rename"
            tooltip-popup-delay = "500">
          <span class = "button" ng-click = "edit()">
            <i class = "icon-pencil"><!-- rename --></i>
          </span>
        </li>
        <li ng-show = "addressbook.isOwned"
            label:tooltip = "Sharing..."
            tooltip-popup-delay = "500">
          <span class = "button" ng-click = "share()">
            <i class = "icon-share"><!-- share --></i>
          </span>
        </li>
        <li label:tooltip = "Import Cards"
            tooltip-popup-delay = "500">
          <span class = "button" ng-click = "importCards()">
            <i class = "icon-file"><!-- import --></i>
          </span>
        </li>
        <li label:tooltip = "Export"
            tooltip-popup-delay = "500">
          <span class = "button" ng-click = "exportCards()">
            <i class = "icon-ion-ios7-upload-outline"><!-- export --></i>
          </span>
        </li>
        <li label:tooltip = "Delete"
            tooltip-popup-delay = "500">
          <span class = "button" ng-click = "confirmDelete(addressbook)">
            <i class = "icon-trash"><!-- delete --></i>
          </span>
        </li>
      </ul>
    </div>

    <!-- dropdown menu for new card split button
    <ul id="newListDrop" class="f-dropdown">
      <li><a class="tiny" ui-sref="addressbook.new({addressbookId: addressbook.id, contactType: 'list'})"><var:string label:value="New List"/></a></li>
    </ul>
    -->

    <!-- dropdown menu for addressbook links
    <div id="addressbookLinks" class="sg-dropdown-content joyride-tip-guide">
      <span class="joyride-nub left">!- dropdown nub -</span>
      <div class="joyride-content-wrapper">
        <ul>
          <li class="title"><var:string label:value="Links to this Address Book"/></li>
          <li class="subtitle"><var:string label:value="CardDAV URL for Authenticated User Access"/></li>
          <li class="value">{{addressbook.cardDavURL}}</li>
          <var:if condition="isPublicAccessEnabled">
            <li class="subtitle"><var:string label:value="CardDAV URL for Public Access"/></li>
            <li class="value">{{addressbook.publicCardDavURL}}</li>
          </var:if>
        </ul>
      </div>
    </div>
    -->

    <!-- dropdown menu for subscriptions
    <div id="folderSubscribe" class="sg-dropdown-content"
         sg-subscribe="contact"
         sg-subscribe-on-select="subscribeToFolder">!- subscription dropdown -</div>
    -->
<!-- Sidenav -->
    <md-sidenav class="md-sidenav-left" md-component-id="left" md-is-locked-open="$media('gt-md')" layout="column">
      <md-toolbar class="md-tall" layout-align="end start">
        <span class="sg-logo"> </span>
        <h2 class="md-toolbar-tools md-toolbar-tools-bottom">
          <span class="sg-md-title md-flex">{{activeUser.identification}}</span>
        </h2>
      </md-toolbar>
      <md-content md-scroll-y="md-scroll-y" class="md-flex" ng-controller="LeftCtrl">
        <md-button ng-click="close()" class="md-primary md-hide-gt-md">Close</md-button>
        <md-list>
          <md-item ng-repeat = "folder in addressbooks track by folder.id"
              ng-class = "{_selected: addressbook.id==folder.id}"
              ng-dblclick = "edit($index)">
            <md-item-content>
              <i class = "icon" ng-class = "{'icon-earth': folder.isRemote, 'icon-address-book': folder.isEditable}"><!-- icon --></i>
              <form ng-submit = "save($index)">
                <a ui-sref = "addressbook({addressbookId: folder.id})"
                    ng-click = "select($index)"
                    ng-show = "editMode!=folder.id"
                    ng-cloak = "ng-cloak">{{folder.name}}
                </a>
                <input class = "folder-name" type = "text"
                    ng-model = "folder.name"
                    ng-show = "editMode==folder.id"
                    ng-cloak = "ng-cloak"
                    ng-blur = "save($index)"
                    sg-focus-on = "addressBookName_{{$index}}"
                    sg-escape = "revertEditing($index)" />
              </form>
              <span class = "icon" ng-cloak = "ng-cloak">
                <a class = "icon" href = "#"
                    dropdown-toggle = "#addressbookProperties"
                    options = "align:right"
                    ng-show = "currentFolderIsConfigurable(folder)">
                  <i class = "icon-cog"><!-- options --></i>
                </a>
              </span>
            </md-item-content>
          </md-item>
        </md-list>
      </md-content>
    </md-sidenav>

    <section layout="column" class="md-layout-fill">
      <md-toolbar layout="column" layout-align="space-between start" class="md-tall toolbar-main">
        <div class="md-toolbar-tools" layout="row" layout-align="space-between start" ng-controller="toggleCtrl">
          <div class="sg-toolbar-group-1">
            <md-button ng-click="toggleLeft()" class="md-hide-gt-md">
              <span class="md-icon-menu"></span>
            </md-button>

            <div class="sg-md-display-3">
              15
            </div>
          </div>
          <div class="sg-toolbar-group-2">
            <span class="md-icon-search"></span>
          </div>
        </div>
        <div class="md-toolbar-tools md-toolbar-tools-bottom" layout="row" layout-align="space-between center">
          <div class="cols-7" layout="row" layout-align="space-between center" style="padding-right: 16px">
            <md-input-container class="sg-search-field-container">
              <label style="color: white"><i class="md-icon-search"><!--icon--></i>Search</label>
              <input name="folderSearch" type="search"
                     ng-model="search.filter" ng-keyup="doSearch($event)" style="color: white"/>
            </md-input-container>

            <div class="sg-toolbar-group">
              <span>ALL
                <span class="md-icon-arrow-drop-down"><!-- sort drop-down --></span>
              </span>
              <span class="md-icon-create"><!-- icon --></span>
            </div>
          </div>
          <div class="spacer cols-8"><!-- spacer --></div>
        </div>
      </md-toolbar>

      <div layout="row" class="md-flex" layout-align="space-between">

        <md-content style="position: relative;" id="contactsList">
          <style>
            .vs-repeat-repeated-element {
            width: 100%;
            }
          </style>
          <header class="sg-md-subheader">
            <h2 class="sg-md-subhead-solo fg-sogoBlue-700">Contacts</h2>
          </header>
          <!-- Search field & special results
               <input type="text" placeholder="Search" ng-model="search.filter" ng-keyup="doSearch($event)" />
               <div ng-switch="search.status">
               <div ng-switch-when="min-char" class="alert-bg">
               <i class="icon-warning"></i><var:string label:value="Please enter at least three characters"/>
               </div>
               <div ng-switch-when="no-result" class="alert-bg">
               <i class="icon-ion-search"></i><var:string label:value="No matching card"/>
               </div>
               <div ng-switch-when="remote-addressbook" ng-show="addressbook.cards.length == 0" class="alert-bg">
               <i class="icon-ion-search"></i><var:string label:value="Initiate a search"/>
               </div>
               </div>
          -->
          <md-list vs-repeat="72" vs-scroll-parent="#contactsList">
            <md-item ng-repeat="currentCard in addressbook.cards track by currentCard.id"
                     ng-class="{_selected: card.id == currentCard.id}">
              <md-item-content>
                <div class="md-tile-left">
                  <!--avatar--><!-- currentCard.tag = vcard || vlist -->
                </div>
                <div class="sg-tile-content">
                  <a ui-sref="addressbook.card.view({addressbookId: addressbook.id, cardId: currentCard.id})">
                    <div class="sg-md-body-multi contact-name" ng-bind-html="currentCard.$fullname()"><!-- cn --></div>
                    <div class="sg-md-subhead-multi contact-email">{{currentCard.$preferredEmail()}}</div>
                  </a>
                </div>
              </md-item-content>
            </md-item>
          </md-list>
        </md-content>
        <md-content class="md-padding md-flex" ui-view="card"><!-- card view --></md-content>
      </div>

    </section>

  </script>
    <!-- modal for addressbook sharing options -->
    <script type = "text/ng-template" id="UIxUserRightsEditor">
      <var:component className="UIxContactsUserRightsEditor" />
    </script>
    <script type = "text/ng-template" id = "UIxContactViewTemplate">
      <var:component className="UIxContactViewTemplate" />
    </script>

    <var:string value = "errorAlertJavaScript" const:escapeHTML = "NO" />

</var:component>