Built motion from commit f861bcb808219e66da88ba48b61bddb35224a65e. Version 3.0.0...
[motion-next.git] / public / templates / core / directives / ms-dual-multiselect / ms-dual-multiselect.html / ms-dual-multiselect.html
index 10a5560..b4aa097 100644 (file)
@@ -5,7 +5,7 @@
       <input
         ng-model="query"
         type="text"
-        placeholder="{{options.labelSearch || 'Search...'}}"
+        placeholder="{{ 'STAFF.PERMISSIONS_PLACEHOLDER_SEARCH' | translate }}"
       />
     </md-input-container>
     <md-content class="border h-300">
       >
         <md-list-item
           class="md-3-line"
-          ng-class="options.readOnly ? 'read-only-mode' : ''"
-          ng-disabled="options.readOnly"
-          ng-repeat="item in options.items | filter: query | orderBy: options.orderBy"
-          ng-click="canTransfer(item, options, false)"
+          ng-class="{'read-only-mode': vm.readOnly || vm.addDisabled}"
+          ng-disabled="vm.readOnly || vm.addDisabled"
+          ng-repeat="item in availableItems = (vm.options.items | filter: query) | orderBy: vm.options.orderBy"
+          ng-click="vm.canTransfer(item, vm.options, false)"
         >
           <div class="md-list-item-text" layout="column">
-            <h3 ng-if="options.line1">{{getLine(item, options.line1)}}</h3>
-            <h4 ng-if="options.line2">{{getLine(item, options.line2)}}</h4>
-            <p ng-if="options.line3">{{getLine(item, options.line3)}}</p>
-            <p class="ms-dual-multiselect-line-xs" ng-if="options.line4">
-              {{getLine(item, options.line4)}}
+            <h3 ng-if="vm.options.line1">
+              {{vm.getLine(item, vm.options.line1)}}
+            </h3>
+            <h4 ng-if="vm.options.line2">
+              {{vm.getLine(item, vm.options.line2)}}
+            </h4>
+            <p ng-if="vm.options.line3">
+              {{vm.getLine(item, vm.options.line3)}}
+            </p>
+            <p class="ms-dual-multiselect-line-xs" ng-if="vm.options.line4">
+              {{vm.getLine(item, vm.options.line4)}}
             </p>
           </div>
           <md-icon
-            ng-show="!options.readOnly"
+            ng-hide="vm.readOnly && !vm.addDisabled"
+            ng-class="{'add-disabled': vm.addDisabled}"
             md-font-icon="icon-arrow-right-bold"
             aria-label="swap"
-          ></md-icon>
+          >
+          </md-icon>
           <md-divider></md-divider>
         </md-list-item>
       </md-list>
     </md-content>
     <div class="margin-10" layout="row">
       <span class="h4" flex
-        >{{options.labelAll || 'All Items'}} ({{options.items.length}})</span
+        >{{vm.options.labelAll || 'All Items'}}
+        ({{availableItems.length}})</span
       >
       <md-icon
-        ng-show="options.showSelectAndDeselectAll && !options.readOnly"
+        ng-hide="vm.options.showSelectAndDeselectAll === false || vm.readOnly"
+        ng-class="{'add-disabled': vm.addDisabled}"
+        ng-disabled="vm.addDisabled"
         md-font-icon="icon-chevron-double-right"
         aria-label="swap"
-        ng-click="transfer(options.items, options.selectedItems, -1, false)"
+        ng-click="vm.transfer(vm.options.items, vm.options.selectedItems, -1, false)"
       ></md-icon>
     </div>
   </div>
@@ -61,7 +72,7 @@
       <input
         ng-model="selectedQuery"
         type="text"
-        placeholder="{{options.labelSearch || 'Search...'}}"
+        placeholder="{{ 'STAFF.PERMISSIONS_PLACEHOLDER_SEARCH' | translate }}"
       />
     </md-input-container>
     <md-content class="border h-300">
       >
         <md-list-item
           class="md-3-line"
-          ng-class="options.readOnly || !item.isValid ? 'read-only-mode' : ''"
-          ng-disabled="options.readOnly"
-          ng-repeat="item in options.selectedItems | filter: selectedQuery | orderBy: options.orderBy"
-          ng-click="canTransfer(item, options, true)"
+          ng-class="{'read-only-mode': vm.readOnly || !item.isValid}"
+          ng-disabled="vm.readOnly"
+          ng-repeat="item in associatedItems = (vm.options.selectedItems | filter: selectedQuery) | orderBy: vm.options.orderBy"
+          ng-click="vm.canTransfer(item, vm.options, true)"
         >
           <md-icon
-            ng-class="options.readOnly || !item.isValid ? 'hidden' : ''"
+            ng-class="{'hidden': vm.readOnly || !item.isValid}"
             md-font-icon="icon-arrow-left-bold"
             aria-label="swap"
           ></md-icon>
           <div class="md-list-item-text" layout="column">
-            <h3 ng-if="options.line1">{{getLine(item, options.line1)}}</h3>
-            <h4 ng-if="options.line2">{{getLine(item, options.line2)}}</h4>
-            <p ng-if="options.line3">{{getLine(item, options.line3)}}</p>
-            <p class="ms-dual-multiselect-line-xs" ng-if="options.line4">
-              {{getLine(item, options.line4)}}
+            <h3 ng-if="vm.options.line1">
+              {{vm.getLine(item, vm.options.line1)}}
+            </h3>
+            <h4 ng-if="vm.options.line2">
+              {{vm.getLine(item, vm.options.line2)}}
+            </h4>
+            <p ng-if="vm.options.line3">
+              {{vm.getLine(item, vm.options.line3)}}
+            </p>
+            <p class="ms-dual-multiselect-line-xs" ng-if="vm.options.line4">
+              {{vm.getLine(item, vm.options.line4)}}
             </p>
           </div>
           <md-divider></md-divider>
     </md-content>
     <div class="margin-10" layout="row">
       <md-icon
-        ng-show="options.showSelectAndDeselectAll && !options.readOnly"
+        ng-hide="vm.options.showSelectAndDeselectAll === false || vm.readOnly"
         md-font-icon="icon-chevron-double-left"
         aria-label="swap"
-        flex
-        ng-click="transfer(options.selectedItems, options.items, -1, true)"
+        ng-click="vm.transfer(vm.options.selectedItems, vm.options.items, -1, true)"
       ></md-icon>
-      <span class="h4"
-        >{{options.labelSelected || 'Selected Items'}}
-        ({{options.selectedItems.length}})</span
+      <span class="h4 text-right" flex
+        >{{vm.options.labelSelected || 'Selected Items'}}
+        ({{associatedItems.length}})</span
       >
     </div>
   </div>