UIxAdministration.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:jsFiles="Common.js, Administration.js,
                              Administration.services.js, Preferences.services.js,
                              Contacts.services.js, Scheduler.services.js">

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

  <script type="text/ng-template" id="administration.html">
    <md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')" layout="column">
      <var:component className="UIxSidenavToolbarTemplate" />
      <md-content class="md-flex" layout="column" md-scroll-y="md-scroll-y"
                  md-colors="::{ backgroundColor: 'default-background-300' }">
        <md-list>
          <md-list-item ng-click="app.go('rights')"
                        ui-sref="administration.rights"
                        ui-sref-active="md-default-theme md-background md-bg md-hue-1">
            <md-icon>security</md-icon>
            <p class="sg-item-name"><var:string label:value="Rights"/></p>
          </md-list-item>
        </md-list>
      </md-content>
    </md-sidenav>

    <section layout="column" layout-fill="layout-fill"
             ui-view="module"><!-- admin module --></section>

  </script>

  <!--
      RIGHTS ADMINISTRATION PANEL
  -->
  <script type="text/ng-template" id="rights.html">
    <!-- TOP RIGHT TOOLBAR -->
    <md-toolbar layout="row" layout-align="space-between center" class="toolbar-main">
      <var:component className="UIxTopnavToolbar" />
    </md-toolbar>

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

      <div class="view-list" layout="column">
        <md-toolbar class="md-accent md-hue-1">
          <!-- search toolbar -->
          <form class="md-toolbar-tools"
                name="searchForm"
                sg-search="app.filter(searchText)"
                sg-allow-dot="false">
            <md-icon>search</md-icon>
            <md-input-container class="md-block md-flex" md-no-float="md-no-float">
              <input name="folderSearch" type="search" ng-minlength="3"
                     label:placeholder="Search Users"/>
            </md-input-container>
          </form>
        </md-toolbar>

        <md-divider><!-- divider --></md-divider>

        <md-content id="usersList" layout="column" class="md-flex">
          <md-subheader ng-show="app.service.$query">
            <span ng-switch="app.users.length">
              <span ng-switch-when="0"><var:string label:value="No matching user"/></span>
              <span ng-switch-default="true">{{app.users.length}} <var:string label:value="users found"/></span>
            </span>
          </md-subheader>
          <md-subheader ng-hide="app.service.$query">
            <var:string label:value="Start a search to edit the rights"/>
          </md-subheader>
          <md-list class="sg-section-list">
            <div ng-repeat="user in app.users">
              <md-list-item ng-class="{ 'sg-collapsed': user.uid != app.selectedUser.uid,
                                      'sg-expanded': user.uid == app.selectedUser.uid }"
                            ng-click="app.selectUser($index)"
                            aria-label="{{::user.c_email}}">
                <sg-avatar-image class="md-avatar"
                                 sg-email="::user.c_email"
                                 size="40">{{::user.$avatarIcon}}</sg-avatar-image>
                <div class="sg-tile-content">
                  <div class="sg-md-subhead">
                    <div>{{::user.cn}}</div>
                  </div>
                  <div class="sg-md-body">
                    <div>{{::user.c_email}}</div>
                  </div>
                </div>
                <md-button class="md-icon-button"><md-icon ng-class="{'md-rotate-180': user.uid == app.selectedUser.uid}">expand_more</md-icon></md-button>
              </md-list-item>
              <div ng-show="user == app.selectedUser">
                <!-- folders list -->
                <md-list-item ng-show="user.$$folders.length == 0">
                  <md-icon>warning</md-icon>
                  <var:string label:value="No resource"/>
                </md-list-item>
                <md-list-item class="sg-folder" ng-repeat="folder in user.$$folders">
                  <md-button class=""
                             aria-label="{{::folder.displayName}}" title="{{::folder.displayName}}"
                             ng-click="app.selectFolder(folder)">
                    <md-icon ng-class="{ 'icon-contacts': folder.type == 'Contact',
                                       'icon-event': folder.type == 'Appointment' }"><!--icon--></md-icon>
                    {{::folder.displayName}}
                  </md-button>
                </md-list-item>
                <md-divider><!-- divider --></md-divider>
              </div>
            </div>
          </md-list>
        </md-content>
      </div>

      <div id="detailView" class="view-detail"
           layout="column" layout-align="start center"
           ng-class="{ 'sg-close': !app.selectedUser.selectedFolder }"
           md-colors="::{backgroundColor: 'default-background-200'}"
           ui-view="acl">
        <md-content class="hide show-gt-md md-flex"
                    md-colors="::{backgroundColor: 'default-background-200'}"
                    layout="column" layout-align="center center" layout-fill="layout-fill">
          <div class="sg-md-title"
               md-colors="::{color: 'default-background-500'}"><var:string label:value="No resource selected"/></div>
        </md-content>
      </div>

    </div>
  </script>

</var:component>