public/templates/core/directives/ms-dual-multiselect/ms-dual-multiselect.html/ms-dual-multiselect.html

   1 <div ng-cloak layout-gt-sm="row" layout="column">
   2   <div flex-gt-sm="50" flex="45">
   3     <md-input-container class="md-icon-float md-block margin-0">
   4       <md-icon md-font-icon="icon-magnify" aria-label="swap"></md-icon>
   5       <input
   6         ng-model="query"
   7         type="text"
   8         placeholder="{{ 'STAFF.PERMISSIONS_PLACEHOLDER_SEARCH' | translate }}"
   9       />
  10     </md-input-container>
  11     <md-content class="border h-300">
  12       <md-list
  13         class="md-dense no-padding"
  14         layout-fill
  15         layout-align="center center"
  16       >
  17         <md-list-item
  18           class="md-3-line"
  19           ng-class="{'read-only-mode': vm.readOnly || vm.addDisabled}"
  20           ng-disabled="vm.readOnly || vm.addDisabled"
  21           ng-repeat="item in availableItems = (vm.options.items | filter: query) | orderBy: vm.options.orderBy"
  22           ng-click="vm.canTransfer(item, vm.options, false)"
  23         >
  24           <div class="md-list-item-text" layout="column">
  25             <h3 ng-if="vm.options.line1">
  26               {{vm.getLine(item, vm.options.line1)}}
  27             </h3>
  28             <h4 ng-if="vm.options.line2">
  29               {{vm.getLine(item, vm.options.line2)}}
  30             </h4>
  31             <p ng-if="vm.options.line3">
  32               {{vm.getLine(item, vm.options.line3)}}
  33             </p>
  34             <p class="ms-dual-multiselect-line-xs" ng-if="vm.options.line4">
  35               {{vm.getLine(item, vm.options.line4)}}
  36             </p>
  37           </div>
  38           <md-icon
  39             ng-hide="vm.readOnly && !vm.addDisabled"
  40             ng-class="{'add-disabled': vm.addDisabled}"
  41             md-font-icon="icon-arrow-right-bold"
  42             aria-label="swap"
  43           >
  44           </md-icon>
  45           <md-divider></md-divider>
  46         </md-list-item>
  47       </md-list>
  48     </md-content>
  49     <div class="margin-10" layout="row">
  50       <span class="h4" flex
  51         >{{vm.options.labelAll || 'All Items'}}
  52         ({{availableItems.length}})</span
  53       >
  54       <md-icon
  55         ng-hide="vm.options.showSelectAndDeselectAll === false || vm.readOnly"
  56         ng-class="{'add-disabled': vm.addDisabled}"
  57         ng-disabled="vm.addDisabled"
  58         md-font-icon="icon-chevron-double-right"
  59         aria-label="swap"
  60         ng-click="vm.transfer(vm.options.items, vm.options.selectedItems, -1, false)"
  61       ></md-icon>
  62     </div>
  63   </div>
  64
  65   <div flex="10" layout="row" layout-align="center center">
  66     <md-icon md-font-icon="icon-swap-horizontal" aria-label="swap"></md-icon>
  67   </div>
  68
  69   <div flex-gt-sm="50" flex="45">
  70     <md-input-container class="md-icon-float md-block margin-0">
  71       <md-icon md-font-icon="icon-magnify" aria-label="swap"></md-icon>
  72       <input
  73         ng-model="selectedQuery"
  74         type="text"
  75         placeholder="{{ 'STAFF.PERMISSIONS_PLACEHOLDER_SEARCH' | translate }}"
  76       />
  77     </md-input-container>
  78     <md-content class="border h-300">
  79       <md-list
  80         class="md-dense no-padding"
  81         layout-fill
  82         layout-align="center center"
  83       >
  84         <md-list-item
  85           class="md-3-line"
  86           ng-class="{'read-only-mode': vm.readOnly || !item.isValid}"
  87           ng-disabled="vm.readOnly"
  88           ng-repeat="item in associatedItems = (vm.options.selectedItems | filter: selectedQuery) | orderBy: vm.options.orderBy"
  89           ng-click="vm.canTransfer(item, vm.options, true)"
  90         >
  91           <md-icon
  92             ng-class="{'hidden': vm.readOnly || !item.isValid}"
  93             md-font-icon="icon-arrow-left-bold"
  94             aria-label="swap"
  95           ></md-icon>
  96           <div class="md-list-item-text" layout="column">
  97             <h3 ng-if="vm.options.line1">
  98               {{vm.getLine(item, vm.options.line1)}}
  99             </h3>
 100             <h4 ng-if="vm.options.line2">
 101               {{vm.getLine(item, vm.options.line2)}}
 102             </h4>
 103             <p ng-if="vm.options.line3">
 104               {{vm.getLine(item, vm.options.line3)}}
 105             </p>
 106             <p class="ms-dual-multiselect-line-xs" ng-if="vm.options.line4">
 107               {{vm.getLine(item, vm.options.line4)}}
 108             </p>
 109           </div>
 110           <md-divider></md-divider>
 111         </md-list-item>
 112       </md-list>
 113     </md-content>
 114     <div class="margin-10" layout="row">
 115       <md-icon
 116         ng-hide="vm.options.showSelectAndDeselectAll === false || vm.readOnly"
 117         md-font-icon="icon-chevron-double-left"
 118         aria-label="swap"
 119         ng-click="vm.transfer(vm.options.selectedItems, vm.options.items, -1, true)"
 120       ></md-icon>
 121       <span class="h4 text-right" flex
 122         >{{vm.options.labelSelected || 'Selected Items'}}
 123         ({{associatedItems.length}})</span
 124       >
 125     </div>
 126   </div>
 127 </div>