<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>
<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>