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.js, Preferences.services.js, Contacts.js, Contacts.services.js"
    className="UIxPageFrame"
    title="name">
  <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
  -->
  <main class="view md-layout-fill" ui-view="addressbooks" layout="row" ng-controller="navController"><!-- 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" ng-hide="true">
      <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 label:tooltip="Import Cards"
            tooltip-popup-delay="500">
          <span class="button" ng-click="importCards()">
            <i class="icon-file"><!-- import --></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 id="left-sidenav" class="md-sidenav-left md-whiteframe-z1" md-component-id="left" md-is-locked-open="isGtMedium" layout="column">
      <var:component className="UIxSidenavToolbarTemplate" />
      <!-- <div style="position: relative; display: flex;"> -->
      <md-content md-scroll-y="md-scroll-y">
        <!-- User's addressbooks -->
        <section>
          <md-subheader class="sg-md-subheader">
            <div layout="row" layout-align="space-between center">
              <span><var:string label:value="AddressBooks"/></span>
              <md-button class="sg-icon-button"
                         label:aria-label="New Addressbook..."
                         ng-click="app.newAddressbook()">
                <md-icon>add_circle_outline</md-icon>
              </md-button>
            </div>
          </md-subheader>
          <md-list>
            <md-list-item ng-repeat="folder in app.service.$addressbooks track by folder.id"
                          ng-click="app.select(folder)"
                          ng-dblclick="app.edit(folder)"
                          ui-sref="app.addressbook({addressbookId: folder.id})"
                          ui-sref-active="sg-active">
              <md-icon>contacts</md-icon>
              <p class="sg-item-name"
                 ng-show="app.editMode!=folder.id">{{folder.name}}</p>
              <md-input-container class="md-flex md-tile-content"
                                  ng-show="app.editMode == folder.id">
                <input class="folder-name" type="text"
                       label:aria-label="Name of the Address Book"
                       ng-model="folder.name"
                       ng-cloak="ng-cloak"
                       ng-blur="app.save(folder)"
                       sg-focus-on="addressBookName_{{folder.id}}"
                       sg-enter="app.save(folder)"
                       sg-escape="app.revertEditing(folder)"/>
              </md-input-container>
              <md-menu class="md-secondary"
                       ng-show="app.service.selectedFolder.id == folder.id">
                <md-icon label:aria-label="Options"
                         ng-click="$mdOpenMenu()"
                         md-menu-origin="md-menu-origin">more_vert</md-icon>
                <md-menu-content width="2">
                  <md-menu-item>
                    <md-button type="button" ng-click="app.confirmDelete()">
                      <var:string label:value="Delete"/>
                    </md-button>
                  </md-menu-item>
                  <md-menu-item>
                    <md-button type="button" ng-click="app.exportCards()">
                      <var:string label:value="Export"/>
                    </md-button>
                  </md-menu-item>
                  <md-menu-divider><!-- divider --></md-menu-divider>
                  <md-menu-item>
                    <md-button type="button" ng-click="app.showLinks(folder)">
                      <var:string label:value="Links to this Address Book"/>
                    </md-button>
                  </md-menu-item>
                  <md-menu-item>
                    <md-button type="button" ng-click="app.share(folder)">
                      <var:string label:value="Sharing..."/>
                    </md-button>
                  </md-menu-item>
                </md-menu-content>
              </md-menu>
            </md-list-item>
          </md-list>
        </section>
        <!-- Subscriptions -->
        <section>
          <md-subheader class="sg-md-subheader">
            <div layout="row" layout-align="space-between center">
              <span><var:string label:value="Subscriptions"/></span>
              <md-button class="sg-icon-button"
                         label:aria-label="Subscribe to an Addressbook..."
                       sg-subscribe="contact"
                       sg-subscribe-on-select="app.subscribeToFolder(folderData)">
                <md-icon>add_circle_outline</md-icon>
              </md-button>
            </div>
          </md-subheader>
          <md-list>
            <md-list-item ng-repeat="folder in app.service.$subscriptions track by folder.id"
                          ng-click="app.select(folder)"
                          ng-dblclick="app.edit(folder)"
                          ui-sref="app.addressbook({addressbookId: folder.id})"
                          ui-sref-active="sg-active">
              <md-icon>contacts</md-icon>
              <p class="sg-item-name"
                 ng-show="editMode!=folder.id">{{folder.name}}</p>
              <md-input-container class="md-flex md-tile-content"
                                  ng-show="app.editMode==folder.id">
                <input class="folder-name" type="text"
                       label:aria-label="Name of the Address Book"
                       ng-model="folder.name"
                       ng-cloak="ng-cloak"
                       ng-blur="app.save(folder)"
                       sg-focus-on="addressBookName_{{folder.id}}"
                       sg-enter="app.save(folder)"
                       sg-escape="app.revertEditing(folder)"/>
              </md-input-container>
              <md-menu class="md-secondary"
                       ng-show="app.service.selectedFolder.id==folder.id">
                <md-icon label:aria-label="Options"
                         ng-click="$mdOpenMenu()"
                         md-menu-origin="md-menu-origin">more_vert</md-icon>
                <md-menu-content width="2">
                  <md-menu-item>
                    <md-button type="button" ng-click="app.confirmDelete(folder)">
                      <var:string label:value="Delete"/>
                    </md-button>
                  </md-menu-item>
                </md-menu-content>
              </md-menu>
            </md-list-item>
          </md-list>
        </section>
        <!-- Remote/domain addressbooks -->
        <section>
          <md-subheader class="sg-md-subheader md-padding">
            <var:string label:value="Global Addressbooks"/>
          </md-subheader>
          <md-list>
            <md-list-item ng-repeat="folder in app.service.$remotes track by folder.id"
                          ng-click="app.select(folder)"
                          ui-sref="app.addressbook({addressbookId: folder.id})"
                          ui-sref-active="sg-active">
              <md-icon>public</md-icon>
              <p class="sg-item-name">{{folder.name}}</p>
            </md-list-item>
          </md-list>
        </section>
      </md-content>
    <!-- </div> -->
    </md-sidenav>

    <section layout="column" class="sg-app-content md-layout-fill" ui-view="addressbook"><!-- contacts list --></section>
  </script>

  <script type="text/ng-template" id="addressbook">
    <md-toolbar layout="column" layout-align="space-between start" class="md-tall toolbar-main">
      <div class="md-toolbar-tools md-toolbar-tools-top sg-padded" layout="row" layout-align="space-between start">
        <var:component className="UIxTopnavToolbarTemplate" />
      </div>
      <div class="md-toolbar-tools" layout="row" layout-align="space-between center"
           ng-show="addressbook.selectedFolder.$selectedCount() == 0">

        <div class="view-list" layout="row" layout-align="space-between center"
             ng-hide="addressbook.mode.search">
          <div class="sg-toolbar-group">
            <md-button class="sg-icon-button" label:aria-label="Search"
                       ng-click="addressbook.mode.search = true">
              <md-icon>search</md-icon>
            </md-button>
          </div>
          <div class="sg-toolbar-group-last">
            <md-menu>
              <md-button class="sg-icon-button" label:aria-label="Sort"
                         ng-click="$mdOpenMenu()">
                <md-icon>sort</md-icon>
              </md-button>
              <md-menu-content>
                <md-menu-item>
                  <md-button ng-click="addressbook.sort('c_cn')">
                    <md-icon ng-class="{ 'icon-check': addressbook.sortedBy('c_cn') }">
                      <!-- selected --></md-icon> <var:string label:value="Name"/>
                  </md-button>
                </md-menu-item>
                <md-menu-item>
                  <md-button ng-click="addressbook.sort('c_mail')">
                    <md-icon ng-class="{ 'icon-check': addressbook.sortedBy('c_mail') }">
                      <!-- selected --></md-icon> <var:string label:value="Email"/>
                  </md-button>
                </md-menu-item>
                <md-menu-item>
                  <md-button ng-click="addressbook.sort('c_screenname')">
                    <md-icon ng-class="{ 'icon-check': addressbook.sortedBy('c_screenname') }">
                      <!-- selected --></md-icon> <var:string
                      label:value="Screen Name"/>
                  </md-button>
                </md-menu-item>
                <md-menu-item>
                  <md-button ng-click="addressbook.sort('c_o')">
                    <md-icon ng-class="{ 'icon-check': addressbook.sortedBy('c_o') }">
                      <!-- selected --></md-icon> <var:string
                      label:value="Organization"/>
                  </md-button>
                </md-menu-item>
                <md-menu-item>
                  <md-button ng-click="addressbook.sort('c_telephonenumber')">
                    <md-icon ng-class="{ 'icon-check': addressbook.sortedBy('c_telephonenumber') }">
                      <!-- selected --></md-icon> <var:string
                      label:value="Preferred Phone"/>
                  </md-button>
                </md-menu-item>
                <md-menu-divider> <!-- divider --></md-menu-divider>
                <md-menu-item >
                  <md-button ng-click="addressbook.sort()">
                    <md-checkbox
                        ng-model="addressbook.selectedFolder.$query.asc"
                        ng-true-value="0"
                        ng-false-value="1"><var:string label:value="Descending Order"/></md-checkbox>
                  </md-button>
                </md-menu-item>
              </md-menu-content>
            </md-menu>
          </div>
        </div>
        <!-- search mode -->
        <div class="view-list sg-padded--right sg-toolbar-search" layout="row" layout-align="space-between center"
             ng-show="addressbook.mode.search"
             sg-search="addressbook.selectedFolder.$filter(searchText, { search: searchField })">
          <md-button class="sg-icon-button"
                     sg-search-cancel="addressbook.cancelSearch()"
                     label:aria-label="Back">
            <md-icon>arrow_back</md-icon>
          </md-button>
          <md-input-container>
            <input name="folderSearch" type="search" />
          </md-input-container>
          <md-input-container>
            <md-select>
              <md-option value="name_or_address" selected="selected"><var:string label:value="Name or Email"/></md-option>
              <md-option value="category"><var:string label:value="Category"/></md-option>
              <md-option value="organization"><var:string label:value="Organization"/></md-option>
          </md-select>
          </md-input-container>
        </div>
      </div>

      <div layout="row" layout-align="start center" ng-show="addressbook.selectedFolder.$selectedCount() > 0">
        <md-button class="sg-icon-button" ng-click="addressbook.unselectCards()">
          <md-icon>arrow_back</md-icon>
        </md-button>
        <label>{{addressbook.selectedFolder.$selectedCount()}} selected</label>
        <md-button class="sg-icon-button" ng-click="addressbook.confirmDeleteSelectedCards()">
          <md-icon>delete</md-icon>
        </md-button>
        <md-button class="sg-icon-button">
          <md-icon>email</md-icon>
        </md-button>
      </div>
    </md-toolbar>
    <div layout="row" class="md-flex" layout-align="space-between">
      <div class="view-list" layout="column">
        <md-content id="contactsList" layout="column" class="md-flex">
          <header class="sg-md-subheader sg-md-subheader--fixed">
            <h2 class="md-default-theme sg-md-subhead-solo fg-sogoBlue-700">
              <span ng-show="addressbook.selectedFolder.cards.length > 0">{{addressbook.selectedFolder.cards.length}} <var:string label:value="contacts"/></span>
              <span ng-show="addressbook.selectedFolder.cards.length == 0"><var:string label:value="No contact"/></span>
            </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-virtual-repeat-container class="md-flex">
            <md-list>
              <div md-virtual-repeat="currentCard in addressbook.selectedFolder.cards">
                <md-list-item
                    ng-class="{'sg-active': currentCard.id == addressbook.selectedFolder.selectedCard}"
                    ng-click="addressbook.selectCard(currentCard)"
                    ui-sref="app.addressbook.card.view({addressbookId: addressbook.selectedFolder.id, cardId: currentCard.id})">
                  <!-- ui-sref-active="sg-active" -->
                  <div class="sg-selected-avatar" ng-show="currentCard.selected"
                       ng-click="currentCard.selected = !currentCard.selected">
                    <!-- selected avatar -->
                  </div>
                  <sg-avatar-image class="md-tile-left"
                                   ng-show="addressbook.notSelectedComponent(currentCard, 'vcard')"
                                   ng-click="currentCard.selected = !currentCard.selected"
                                   sg-email="currentCard.$preferredEmail(addressbook.selectedFolder.$query)"
                                   size="48">
                    <!-- contact avatar -->
                  </sg-avatar-image>
                  <div class="sg-list-avatar"
                       ng-show="addressbook.notSelectedComponent(currentCard, 'vlist')"
                       ng-click="currentCard.selected = !currentCard.selected">
                    <!-- list avatar -->
                  </div>
                  <div class="sg-tile-content">
                    <div class="sg-md-subhead-multi" ng-bind-html="currentCard.$fullname()"><!-- cn --></div>
                    <div class="sg-md-body-multi">{{currentCard.$preferredEmail(addressbook.selectedFolder.$query)}}</div>
                  </div>
                </md-list-item>
              </div>
            </md-list>
          </md-virtual-repeat-container>
          <md-button class="md-fab md-fab-bottom-right md-accent"
                     label:aria-label="New Contact"
                     ng-click="addressbook.newComponent($event)">
            <md-icon>add</md-icon>
          </md-button>
        </md-content>
      </div>

      <div id="detailView" class="view-detail ng-cloak" layout="column" ui-view="card"
           ng-show="addressbook.selectedFolder.selectedCard"><!-- card view --></div>

    </div>
  </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:component>