@omnia/foundation/extensibility/typings/directives/TargetingPicker.html

Provide omnia foundation typings and tooling work on client side for omnia extension.

<div class="omf-targeting-picker">
    <p *ngIf="scope.isTargetDefinitionNotFound">{{'Targeting.TargetingDefinitionNotFound' | omfLocalize}}</p>
    <div *ngIf="!scope.isTargetDefinitionNotFound">
        <div class="radio">
            <label><input type="radio" name="hasTargeting" [(ngModel)]="hasTargeting" [value]="false" (ngModelChange)="scope.onHasTargetingChange()" />{{'OMF.Targeting.NoTargeting' | omfLocalize}}</label>
        </div>
        <div class="radio">
            <label><input type="radio" name="hasTargeting" [(ngModel)]="hasTargeting" [value]="true" (ngModelChange)="scope.onHasTargetingChange()" />{{'OMF.Targeting.TargetTo' | omfLocalize}}</label>
        </div>

        <div *ngIf="mode == 'dynamicdefinition'">
            <div class="targeting-value-wrapper" *ngIf="hasTargeting">
                <div class="form-group targeting-definition-dropdown">
                    <div class="omf-form-control">
                        <omf-dropdown-list [items]="scope.lookupTargetingDefinitions"
                                           textProperty="title"
                                           valueProperty="id"
                                           [preSelectFirstItem]="scope.preSelectFirstItem"
                                           [(selectedItemValue)]="targetingDefinitionId"
                                           [onItemSelected]="scope.selectTargetingDefinition"
                                           >
                        </omf-dropdown-list>
                        <span [omfFormValidatorFor]="targetingDefinitionId" omf-required></span>
                    </div>
                </div>
                <div *ngIf="targetingDefinition != undefined && targetingDefinition != null">
                    <div *ngFor="let filter of targetingDefinition.filters">
                        <div class="form-group" *ngIf="filter.type == 0 && targetingValues[filter.id] !== undefined && targetingValues[filter.id] !== null">
                            <label class="omf-form-label">{{filter.displayName}}</label>
                            <div class="omf-form-control">
                                <omf-csom-taxonomy-picker [termSetId]="filter.termSetId"
                                                          [(selected)]="targetingValues[filter.id].value"
                                                          (selectedChange)="onTargetingValuesChange($event)"
                                                          [isMulti]="true">
                                </omf-csom-taxonomy-picker>
                                <span *ngIf="filter.required" [omfFormValidatorFor]="targetingValues[filter.id].value" omf-required></span>
                            </div>
                        </div>
                        <div class="form-group" *ngIf="filter.type == 1 && targetingValues[filter.id] !== undefined && targetingValues[filter.id] !== null">
                            <label class="omf-form-label">{{filter.displayName}}</label>
                            <div class="omf-form-control">
                                <omf-dropdown-list [allowMultipleValues]="true"
                                                   [items]="scope.groupMembershipLookupValues[filter.id]"
                                                   valueProperty="id"
                                                   textProperty="title"
                                                   [preSelectFirstItem]="scope.preSelectFirstItem"
                                                   [onItemSelected]="onTargetingValuesChange"
                                                   [onItemDeselected]="onTargetingValuesChange"
                                                   [(selectedItemValue)]="targetingValues[filter.id].value">
                                </omf-dropdown-list>
                                <span *ngIf="filter.required" [omfFormValidatorFor]="targetingValues[filter.id].value" omf-required></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div *ngIf="mode == 'fixeddefinition'">
            <div class="targeting-value-wrapper" *ngIf="hasTargeting && targetingDefinition != undefined">
                <div *ngFor="let filter of targetingDefinition.filters">
                    <div class="form-group" *ngIf="filter.type == 0 && targetingValues[filter.id] !== undefined && targetingValues[filter.id] !== null">
                        <label class="omf-form-label">{{filter.displayName}}</label>
                        <div class="omf-form-control">
                            <omf-csom-taxonomy-picker [termSetId]="filter.termSetId"
                                                      [(selected)]="targetingValues[filter.id].value"
                                                      (selectedChange)="onTargetingValuesChange($event)"
                                                      [isMulti]="true">
                            </omf-csom-taxonomy-picker>
                            <span *ngIf="filter.required" [omfFormValidatorFor]="targetingValues[filter.id].value" omf-required></span>
                        </div>
                    </div>
                    <div class="form-group" *ngIf="filter.type == 1 && targetingValues[filter.id] !== undefined && targetingValues[filter.id] !== null">
                        <label class="omf-form-label">{{filter.displayName}}</label>
                        <div class="omf-form-control">
                            <omf-dropdown-list [allowMultipleValues]="true"
                                               [items]="scope.groupMembershipLookupValues[filter.id]"
                                               valueProperty="id"
                                               textProperty="title"
                                               [preSelectFirstItem]="scope.preSelectFirstItem"
                                               [onItemSelected]="onTargetingValuesChange"
                                               [onItemDeselected]="onTargetingValuesChange"
                                               [(selectedItemValue)]="targetingValues[filter.id].value">
                            </omf-dropdown-list>
                            <span *ngIf="filter.required" [omfFormValidatorFor]="targetingValues[filter.id].value" omf-required></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div *ngIf="mode == 'definitiononly'">
            <div class="targeting-value-wrapper" *ngIf="hasTargeting">
                <div class="form-group">
                    <div class="omf-form-control">
                        <omf-dropdown-list [items]="scope.lookupTargetingDefinitions"
                                           textProperty="title"
                                           valueProperty="id"
                                           [preSelectFirstItem]="scope.preSelectFirstItem"
                                           [(selectedItemValue)]="targetingDefinitionId"
                                           [onItemSelected]="scope.selectTargetingDefinition">
                        </omf-dropdown-list>
                        <span [omfFormValidatorFor]="targetingDefinitionId" omf-required></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>