Skip to content

Commit

Permalink
Required migration from old ngbTabSet to new ngbNav after ng-bootstra…
Browse files Browse the repository at this point in the history 
…p update
  • Loading branch information
@tdonohue
tdonohue committed Nov 22, 2021
1 parent ab3fa88 commit 10c3424
Show file tree
Hide file tree
Showing 5 changed files with 116 additions and 96 deletions.
19 changes: 11 additions & 8 deletions src/app/collection-page/collection-item-mapper/collection-item-mapper.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,10 @@ <h2>{{'collection.edit.item-mapper.head' | translate}}</h2>
<p [innerHTML]="'collection.edit.item-mapper.collection' | translate:{ name: (collectionName$ |async) }" id="collection-name"></p>
<p>{{'collection.edit.item-mapper.description' | translate}}</p>

<ngb-tabset (tabChange)="tabChange($event)" [destroyOnHide]="true" #tabs="ngbTabset">
<ngb-tab title="{{'collection.edit.item-mapper.tabs.browse' | translate}}" id="browseTab">
<ng-template ngbTabContent>
<ul ngbNav (navChange)="tabChange($event)" [destroyOnHide]="true" #tabs="ngbNav" class="nav-tabs">
<li [ngbNavItem]="'browseTab'">
<a ngbNavLink>{{'collection.edit.item-mapper.tabs.browse' | translate}}</a>
<ng-template ngbNavContent>
<div class="mt-2">
<ds-item-select class="mt-2"
[key]="'browse'"
Expand All @@ -21,9 +22,10 @@ <h2>{{'collection.edit.item-mapper.head' | translate}}</h2>
(cancel)="onCancel()"></ds-item-select>
</div>
</ng-template>
</ngb-tab>
<ngb-tab title="{{'collection.edit.item-mapper.tabs.map' | translate}}" id="mapTab">
<ng-template ngbTabContent>
</li>
<li [ngbNavItem]="'mapTab'">
<a ngbNavLink>{{'collection.edit.item-mapper.tabs.map' | translate}}</a>
<ng-template ngbNavContent>
<div class="row mt-2">
<div class="col-12 col-lg-6">
<ds-search-form id="search-form"
Expand Down Expand Up @@ -52,8 +54,9 @@ <h2>{{'collection.edit.item-mapper.head' | translate}}</h2>
{{'collection.edit.item-mapper.no-search' | translate}}
</div>
</ng-template>
</ngb-tab>
</ngb-tabset>
</li>
</ul>
<div [ngbNavOutlet]="tabs"></div>
</div>
</div>
</div>
19 changes: 11 additions & 8 deletions ...app/item-page/edit-item-page/item-collection-mapper/item-collection-mapper.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,10 @@ <h2>{{'item.edit.item-mapper.head' | translate}}</h2>
<p [innerHTML]="'item.edit.item-mapper.item' | translate:{ name: (itemName$ | async) }" id="item-name"></p>
<p>{{'item.edit.item-mapper.description' | translate}}</p>

<ngb-tabset (tabChange)="tabChange($event)" [destroyOnHide]="true" #tabs="ngbTabset">
<ngb-tab title="{{'item.edit.item-mapper.tabs.browse' | translate}}" id="browseTab">
<ng-template ngbTabContent>
<ul ngbNav (navChange)="tabChange($event)" [destroyOnHide]="true" #tabs="ngbNav" class="nav-tabs">
<li [ngbNavItem]="'browseTab'">
<a ngbNavLink>{{'item.edit.item-mapper.tabs.browse' | translate}}</a>
<ng-template ngbNavContent>
<div class="mt-2">
<ds-collection-select class="mt-2"
[key]="'browse'"
Expand All @@ -20,9 +21,10 @@ <h2>{{'item.edit.item-mapper.head' | translate}}</h2>
(cancel)="onCancel()"></ds-collection-select>
</div>
</ng-template>
</ngb-tab>
<ngb-tab title="{{'item.edit.item-mapper.tabs.map' | translate}}" id="mapTab">
<ng-template ngbTabContent>
</li>
<li [ngbNavItem]="'mapTab'">
<a ngbNavLink>{{'item.edit.item-mapper.tabs.map' | translate}}</a>
<ng-template ngbNavContent>
<div class="row mt-2">
<div class="col-12 col-lg-6">
<ds-search-form id="search-form"
Expand Down Expand Up @@ -50,8 +52,9 @@ <h2>{{'item.edit.item-mapper.head' | translate}}</h2>
{{'item.edit.item-mapper.no-search' | translate}}
</div>
</ng-template>
</ngb-tab>
</ngb-tabset>
</li>
</ul>
<div [ngbNavOutlet]="tabs"></div>
</div>
</div>
</div>
32 changes: 18 additions & 14 deletions ...ted-entities/tabbed-related-entities-search/tabbed-related-entities-search.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,21 @@
<ngb-tabset *ngIf="relationTypes.length > 1" [destroyOnHide]="true" #tabs="ngbTabset" [activeId]="activeTab$ | async" (tabChange)="onTabChange($event)">
<ngb-tab *ngFor="let relationType of relationTypes" title="{{'item.page.relationships.' + relationType.label | translate}}" [id]="relationType.filter">
<ng-template ngbTabContent>
<div class="mt-4">
<ds-related-entities-search [item]="item"
[relationType]="relationType.filter"
[configuration]="relationType.configuration"
[searchEnabled]="searchEnabled"
[sideBarWidth]="sideBarWidth">
</ds-related-entities-search>
</div>
</ng-template>
</ngb-tab>
</ngb-tabset>
<ng-container *ngIf="relationTypes.length > 1">
<ul ngbNav #tabs="ngbNav" [destroyOnHide]="true" [activeId]="activeTab$ | async" (navChange)="onTabChange($event)" class="nav-tabs">
<li *ngFor="let relationType of relationTypes" [ngbNavItem]="relationType.filter">
<a ngbNavLink>{{'item.page.relationships.' + relationType.label | translate}}</a>
<ng-template ngbNavContent>
<div class="mt-4">
<ds-related-entities-search [item]="item"
[relationType]="relationType.filter"
[configuration]="relationType.configuration"
[searchEnabled]="searchEnabled"
[sideBarWidth]="sideBarWidth">
</ds-related-entities-search>
</div>
</ng-template>
</li>
</ul>
<div [ngbNavOutlet]="tabs"></div>
</ng-container>
<div *ngIf="relationTypes.length === 1" class="mt-4">
<ds-related-entities-search *ngVar="relationTypes[0] as relationType" [item]="item"
[relationType]="relationType.filter"
Expand Down
111 changes: 58 additions & 53 deletions ...der/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,59 +7,64 @@ <h4 class="modal-title" id="modal-title">{{ ('submission.sections.describe.relat
</div>
<div class="modal-body">
<ds-loading *ngIf="!item || !collection"></ds-loading>
<ngb-tabset *ngIf="item && collection">
<ngb-tab [title]="'submission.sections.describe.relationship-lookup.search-tab.tab-title.' + relationshipOptions.relationshipType | translate : {count: (totalInternal$ | async)}">
<ng-template ngbTabContent>
<ds-dynamic-lookup-relation-search-tab
[selection$]="selection$"
[listId]="listId"
[relationship]="relationshipOptions"
[repeatable]="repeatable"
[context]="context"
[query]="query"
[relationshipType]="relationshipType"
[isLeft]="isLeft"
[item]="item"
[isEditRelationship]="isEditRelationship"
[toRemove]="toRemove"
(selectObject)="select($event)"
(deselectObject)="deselect($event)"
class="d-block pt-3">
</ds-dynamic-lookup-relation-search-tab>
</ng-template>
</ngb-tab>
<ngb-tab *ngFor="let source of (externalSourcesRD$ | async); let idx = index"
[title]="'submission.sections.describe.relationship-lookup.search-tab.tab-title.' + source.id | translate : {count: (totalExternal$ | async)[idx]}">
<ng-template ngbTabContent>
<ds-dynamic-lookup-relation-external-source-tab
[label]="label"
[listId]="listId"
[repeatable]="repeatable"
[item]="item"
[collection]="collection"
[relationship]="relationshipOptions"
[context]="context"
[externalSource]="source"
(importedObject)="imported($event)"
class="d-block pt-3">
</ds-dynamic-lookup-relation-external-source-tab>
</ng-template>
</ngb-tab>
<ngb-tab *ngIf="!isEditRelationship" [title]="'submission.sections.describe.relationship-lookup.selection-tab.tab-title' | translate : {count: (selection$ | async)?.length}">
<ng-template ngbTabContent>
<ds-dynamic-lookup-relation-selection-tab
[selection$]="selection$"
[listId]="listId"
[relationshipType]="relationshipOptions.relationshipType"
[repeatable]="repeatable"
[context]="context"
(selectObject)="select($event)"
(deselectObject)="deselect($event)"
class="d-block pt-3">
</ds-dynamic-lookup-relation-selection-tab>
</ng-template>
</ngb-tab>
</ngb-tabset>
<ng-container *ngIf="item && collection">
<ul ngbNav #nav="ngbNav" class="nav-tabs">
<li ngbNavItem>
<a ngbNavLink>{{'submission.sections.describe.relationship-lookup.search-tab.tab-title.' + relationshipOptions.relationshipType | translate : { count: (totalInternal$ | async)} }}</a>
<ng-template ngbNavContent>
<ds-dynamic-lookup-relation-search-tab
[selection$]="selection$"
[listId]="listId"
[relationship]="relationshipOptions"
[repeatable]="repeatable"
[context]="context"
[query]="query"
[relationshipType]="relationshipType"
[isLeft]="isLeft"
[item]="item"
[isEditRelationship]="isEditRelationship"
[toRemove]="toRemove"
(selectObject)="select($event)"
(deselectObject)="deselect($event)"
class="d-block pt-3">
</ds-dynamic-lookup-relation-search-tab>
</ng-template>
</li>
<li ngbNavItem *ngFor="let source of (externalSourcesRD$ | async); let idx = index">
<a ngbNavLink>{{'submission.sections.describe.relationship-lookup.search-tab.tab-title.' + source.id | translate : { count: (totalExternal$ | async)[idx] } }}</a>
<ng-template ngbNavContent>
<ds-dynamic-lookup-relation-external-source-tab
[label]="label"
[listId]="listId"
[repeatable]="repeatable"
[item]="item"
[collection]="collection"
[relationship]="relationshipOptions"
[context]="context"
[externalSource]="source"
(importedObject)="imported($event)"
class="d-block pt-3">
</ds-dynamic-lookup-relation-external-source-tab>
</ng-template>
</li>
<li ngbNavItem *ngIf="!isEditRelationship">
<a ngbNavLink>{{'submission.sections.describe.relationship-lookup.selection-tab.tab-title' | translate : { count: (selection$ | async)?.length } }}</a>
<ng-template ngbNavContent>
<ds-dynamic-lookup-relation-selection-tab
[selection$]="selection$"
[listId]="listId"
[relationshipType]="relationshipOptions.relationshipType"
[repeatable]="repeatable"
[context]="context"
(selectObject)="select($event)"
(deselectObject)="deselect($event)"
class="d-block pt-3">
</ds-dynamic-lookup-relation-selection-tab>
</ng-template>
</li>
</ul>
<div [ngbNavOutlet]="nav"></div>
</ng-container>
</div>
<div class="modal-footer">
<small>{{ ('submission.sections.describe.relationship-lookup.selected' | translate: {size: (selection$ | async)?.length || 0}) }}</small>
Expand Down
31 changes: 18 additions & 13 deletions src/app/shared/resource-policies/form/resource-policy-form.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,24 @@
<div class="container-fluid">
<label for="ResourcePolicyObject">{{'resource-policies.form.eperson-group-list.label' | translate}}</label>
<input id="ResourcePolicyObject" class="form-control mb-3" type="text" readonly [value]="resourcePolicyTargetName$ | async">
<ngb-tabset *ngIf="canSetGrant()" type="pills">
<ngb-tab [title]="'resource-policies.form.eperson-group-list.tab.eperson' | translate">
<ng-template ngbTabContent>
<ds-eperson-group-list (select)="updateObjectSelected($event, true)"></ds-eperson-group-list>
</ng-template>
</ngb-tab>
<ngb-tab [title]="'resource-policies.form.eperson-group-list.tab.group' | translate">
<ng-template ngbTabContent>
<ds-eperson-group-list [isListOfEPerson]="false"
(select)="updateObjectSelected($event, false)"></ds-eperson-group-list>
</ng-template>
</ngb-tab>
</ngb-tabset>
<ng-container *ngIf="canSetGrant()">
<ul ngbNav #nav="ngbNav" class="nav-pills">
<li ngbNavItem>
<a ngbNavLink>{{'resource-policies.form.eperson-group-list.tab.eperson' | translate}}</a>
<ng-template ngbNavContent>
<ds-eperson-group-list (select)="updateObjectSelected($event, true)"></ds-eperson-group-list>
</ng-template>
</li>
<li ngbNavItem>
<a ngbNavLink>{{'resource-policies.form.eperson-group-list.tab.group' | translate}}</a>
<ng-template ngbNavContent>
<ds-eperson-group-list [isListOfEPerson]="false"
(select)="updateObjectSelected($event, false)"></ds-eperson-group-list>
</ng-template>
</li>
</ul>
<div [ngbNavOutlet]="nav"></div>
</ng-container>
<div>
<hr>
<div class="form-group row">
Expand Down

0 comments on commit 10c3424

Please sign in to comment.