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