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:rsrc="OGo:url"
    xmlns:label="OGo:label"
    className="UIxPageFrame"
    title="title"
    const:userDefaultsKeys="SOGoContactsCategories"
    const:jsFiles="vendor/ckeditor/ckeditor.js, vendor/ckeditor/ck.js, Common.js, Preferences.services.js, Mailer.services.js, Contacts.js, Contacts.services.js, vendor/angular-file-upload.min.js">
  <script type="text/javascript">
    var contactFolders = <var:string value="contactFolders" const:escapeHTML="NO" />;
  </script>

  <main class="view layout-fill" ui-view="addressbooks" layout="row" ng-controller="navController"><!-- addressbooks list --></main>

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

    <!-- 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="Address Books"/></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.edit(folder)">
                      <var:string label:value="Rename"/>
                    </md-button>
                  </md-menu-item>
                  <md-menu-item>
                    <md-button type="button" ng-click="app.confirmDelete()">
                      <var:string label:value="Delete"/>
                    </md-button>
                  </md-menu-item>
                  <md-menu-divider><!-- divider --></md-menu-divider>
                  <md-menu-item>
                    <md-button type="button" ng-click="app.importCards($event, folder)">
                      <var:string label:value="Import"/>
                    </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.edit(folder)">
                      <var:string label:value="Rename"/>
                    </md-button>
                  </md-menu-item>
                  <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">
            <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 layout-fill" ui-view="addressbook"><!-- contacts list --></section>
  </script>

  <script type="text/ng-template" id="addressbook">
    <md-toolbar layout="row" layout-align="space-between center" class="toolbar-main">
      <var:component className="UIxTopnavToolbarTemplate" />
    </md-toolbar>

    <div layout="row" class="md-flex">

      <div class="view-list" layout="column">

        <!-- single-selection toolbar -->
        <md-toolbar ng-show="addressbook.selectedFolder.$selectedCount() == 0">
          <!-- sort mode -->
          <div class="md-toolbar-tools" ng-hide="addressbook.mode.search">
            <md-button class="sg-icon-button" label:aria-label="Search"
                       ng-click="addressbook.mode.search = true">
              <md-icon>search</md-icon>
            </md-button>
            <div class="md-flex"><!-- spacer --></div>
            <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-href="#">
                    <md-checkbox
                        ng-change="addressbook.sort(addressbook.selectedFolder.constructor.$query.sort)"
                        ng-model="addressbook.selectedFolder.constructor.$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>
            <md-button class="sg-icon-button" aria-label="Refresh" ng-click="addressbook.selectedFolder.$reload()" >
              <md-icon>refresh</md-icon>
            </md-button>
          </div>
          <!-- search mode -->
          <div class="md-toolbar-tools sg-toolbar-secondary"
               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>
        </md-toolbar>

        <!-- multiple selection mode -->
        <md-toolbar class="md-hue-1 sg-toolbar-secondary"
                    ng-show="addressbook.selectedFolder.$selectedCount() > 0">
          <div class="md-toolbar-tools">
            <md-button class="sg-icon-button" ng-click="addressbook.unselectCards()">
              <md-icon>arrow_back</md-icon>
            </md-button>
            <label>{{addressbook.selectedFolder.$selectedCount()}} <var:string label:value="selected"/></label>
            <div class="md-flex"><!-- spacer --></div>
            <md-button class="sg-icon-button" ng-click="addressbook.selectAll()">
              <md-tooltip md-direction="left"><var:string label:value="Select All"/></md-tooltip>
              <md-icon>select_all</md-icon>
            </md-button>
            <md-button class="sg-icon-button"
                       ng-show="addressbook.selectedFolder.acls.objectEraser"
                       ng-click="addressbook.confirmDeleteSelectedCards()">
              <md-icon>delete</md-icon>
            </md-button>
            <md-menu>
              <md-button class="sg-icon-button" label:aria-label="Copy contacts" ng-click="$mdOpenMenu()">
                <md-tooltip md-direction="left"><var:string label:value="Copy To"/></md-tooltip>
                <md-icon>content_copy</md-icon>
              </md-button>
              <md-menu-content width="4">
                <md-menu-item>
                  <md-button class="md-primary" ng-disabled="true"><var:string label:value="Address Books"/></md-button>
                </md-menu-item>
                <md-menu-divider><!-- divider --></md-menu-divider>
                <md-menu-item ng-repeat="folder in app.service.$addressbooks track by folder.id"
                              ng-hide="addressbook.selectedFolder.id == folder.id">
                  <md-button ng-click="addressbook.copySelectedCards(folder.id)">
                    <span ng-class="'sg-child-level-' + folder.level">{{folder.name}}</span>
                  </md-button>
                </md-menu-item>
              </md-menu-content>
            </md-menu>
            <md-menu>
              <md-button class="sg-icon-button" label:aria-label="More messages options" ng-click="$mdOpenMenu()">
                <md-icon>more_vert</md-icon>
              </md-button>
              <md-menu-content width="2">
                <md-menu-item>
                  <md-button ng-click="addressbook.newMessageWithSelectedCards($event)">
                    <var:string label:value="Write"/>
                  </md-button>
                </md-menu-item>
                <md-menu-item>
                  <md-button ng-click="addressbook.saveSelectedCards()">
                    <var:string label:value="Export"/>
                  </md-button>
                </md-menu-item>
              </md-menu-content>
            </md-menu>
          </div>
        </md-toolbar>

        <md-content id="contactsList" layout="column" class="md-flex">
          <md-subheader>
            <span ng-switch="addressbook.selectedFolder.cards.length">
              <span ng-switch-when="0"><var:string label:value="No contact"/></span>
              <span ng-switch-default="true">{{addressbook.selectedFolder.cards.length}} <var:string label:value="contacts"/></span>
            </span>
          </md-subheader>
          <md-virtual-repeat-container class="md-flex">
            <md-list class="sg-section-list">
              <div md-virtual-repeat="currentCard in addressbook.selectedFolder.cards" md-item-size="72">
                <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})">
                  <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.constructor.$query)"
                                   size="40">
                    <!-- 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.constructor.$query)}}</div>
                  </div>
                </md-list-item>
              </div>
            </md-list>
          </md-virtual-repeat-container>
          <div class="sg-progress-circular-floating"
               ng-show="addressbook.selectedFolder.$isLoading">
            <md-progress-circular class="md-accent"
                                  md-mode="indeterminate"
                                  md-diameter="32"><!-- progress --></md-progress-circular>
          </div>
          <md-button class="md-fab md-fab-bottom-right md-accent"
                     label:aria-label="New Contact"
                     ng-show="addressbook.selectedFolder.acls.objectCreator"
                     ng-click="addressbook.newComponent($event)">
            <md-icon>add</md-icon>
          </md-button>
        </md-content>
      </div>

      <div id="detailView" class="view-detail" layout="column" layout-align="start center"
           ng-class="{ 'sg-close': !addressbook.selectedFolder.selectedCard }"
           ui-view="card">
        <md-toolbar class="hide-sm"><!-- empty toolbar --></md-toolbar>
        <md-content class="hide-sm md-flex layout-fill md-hue-1" layout="column">
          <md-input-container layout-align="center center">
            <label class="sg-md-title"><var:string label:value="No contact selected"/></label>
          </md-input-container>
        </md-content>
      </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>