Skip to content

Commit

Permalink
feat(Import Step): Add dedicated choose unit page before choosing step (
Browse files Browse the repository at this point in the history 
#1430)

Co-authored-by: Jonathan Lim-Breitbart <breity10@gmail.com>
  • Loading branch information
@hirokiterashima @breity
hirokiterashima and breity authored Oct 1, 2023
1 parent 93a3cd7 commit 772eba3
Show file tree
Hide file tree
Showing 14 changed files with 364 additions and 323 deletions.
83 changes: 41 additions & 42 deletions ...g-tool/import-step/choose-import-step-location/choose-import-step-location.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,45 @@
<h5 i18n>Choose a location for the imported steps</h5>
<div style="margin-top: 20px; margin-left: 20px">
<div *ngFor="let nodeId of nodeIds" class="project-item">
<div
id="{{ nodeId }}"
[ngClass]="{
groupHeader: isGroupNode(nodeId),
stepHeader: !isGroupNode(nodeId),
branchPathStepHeader: isNodeInAnyBranchPath(nodeId) && !isGroupNode(nodeId)
}"
>
<div fxLayout="row" fxLayoutGap="8px" class="projectItemTitleDiv">
<div fxLayout="row" fxLayoutAlign="start center">
<node-icon [nodeId]="nodeId" size="18"></node-icon>&nbsp;
<p style="display: inline; cursor: pointer">
{{ getNodePositionById(nodeId) }}: {{ getNodeTitle(nodeId) }}
</p>
</div>
<button
mat-raised-button
color="primary"
*ngIf="isGroupNode(nodeId)"
matTooltip="Insert As First Step"
i18n-matTooltip
matTooltipPosition="above"
(click)="importSelectedNodes(nodeId); $event.stopPropagation()"
>
<mat-icon>call_received</mat-icon>
</button>
<button
mat-raised-button
color="primary"
*ngIf="!isGroupNode(nodeId)"
matTooltip="Insert After"
i18n-matTooltip
matTooltipPosition="above"
(click)="importSelectedNodes(nodeId); $event.stopPropagation()"
>
<mat-icon>subdirectory_arrow_left</mat-icon>
</button>
<h5 i18n>Choose a location for the imported steps.</h5>
<div *ngFor="let nodeId of nodeIds" class="project-item">
<div
id="{{ nodeId }}"
[ngClass]="{
'step-header': !isGroupNode(nodeId),
'branch-path-step-header': isNodeInAnyBranchPath(nodeId) && !isGroupNode(nodeId)
}"
>
<div fxLayout="row" fxLayoutGap="8px">
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="4px">
<node-icon [nodeId]="nodeId" size="18"></node-icon>&nbsp;
<span> {{ getNodePositionById(nodeId) }}: {{ getNodeTitle(nodeId) }} </span>
</div>
<button
mat-raised-button
color="primary"
*ngIf="isGroupNode(nodeId)"
matTooltip="Insert As First Step"
i18n-matTooltip
matTooltipPosition="above"
(click)="importSelectedNodes(nodeId); $event.stopPropagation()"
>
<mat-icon>call_received</mat-icon>
</button>
<button
mat-raised-button
color="primary"
*ngIf="!isGroupNode(nodeId)"
matTooltip="Insert After"
i18n-matTooltip
matTooltipPosition="above"
(click)="importSelectedNodes(nodeId); $event.stopPropagation()"
>
<mat-icon>subdirectory_arrow_left</mat-icon>
</button>
</div>
</div>
</div>
<hr />
<button mat-button color="primary" routerLink="../.." aria-label="Cancel" i18n>Cancel</button>
<div class="nav-controls">
<mat-divider></mat-divider>
<div fxLayout="row" fxLayoutAlign="end center">
<button mat-button color="primary" routerLink="../.." aria-label="Cancel" i18n>Cancel</button>
</div>
</div>
16 changes: 6 additions & 10 deletions ...g-tool/import-step/choose-import-step-location/choose-import-step-location.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,19 @@
.project-item {
margin-top: 4px;
margin-bottom: 4px;
}

.project-item:hover {
background-color: #add8e6;
}

.groupHeader {
margin-left: 5px !important;
.step-header {
margin-inline-start: 24px;
}

.stepHeader {
margin-left: 30px !important;
}

.branchPathStepHeader {
margin-left: 55px !important;
.branch-path-step-header {
margin-inline-start: 48px;
}

.mat-icon {
margin: 0px;
margin: 0;
}
2 changes: 1 addition & 1 deletion ...ing-tool/import-step/choose-import-step-location/choose-import-step-location.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { ActivatedRoute, Router } from '@angular/router';

@Component({
selector: 'choose-import-step-location',
styleUrls: ['choose-import-step-location.component.scss'],
styleUrls: ['choose-import-step-location.component.scss', '../import-step.scss'],
templateUrl: 'choose-import-step-location.component.html'
})
export class ChooseImportStepLocationComponent {
Expand Down
144 changes: 60 additions & 84 deletions src/app/authoring-tool/import-step/choose-import-step/choose-import-step.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,97 +1,73 @@
<h4 i18n>Import Step(s)</h4>
<br />
<div i18n>Choose a unit to import from:</div>
<mat-form-field style="margin-right: 20px; width: 100%">
<mat-label i18n>My Units</mat-label>
<mat-select
[(ngModel)]="importMyProjectId"
(selectionChange)="showMyProject()"
style="width: 100%"
>
<mat-option *ngFor="let project of myProjectsList" value="{{ project.id }}">
{{ project.id + ' - ' + project.name }}
<span *ngIf="project.runId != null"> (<span i18n>Run ID</span>: {{ project.runId }})</span>
</mat-option>
</mat-select>
</mat-form-field>
<br />
<mat-form-field style="margin-right: 20px; width: 100%">
<mat-label i18n>Library Units</mat-label>
<mat-select
[(ngModel)]="importLibraryProjectId"
(selectionChange)="showLibraryProject()"
style="width: 100%"
<h5 i18n>Choose the step(s) that you want to import, then select Next.</h5>
<p fxLayout="row wrap" fxLayoutAlign="start center" fxLayoutGap="8px">
<strong i18n>Selected unit: {{ project.metadata.title }}</strong>
<button
mat-raised-button
color="primary"
(click)="previewProject()"
matTooltip="Preview Unit"
i18n-matTooltip
matTooltipPosition="above"
>
<mat-option *ngFor="let project of libraryProjectsList" value="{{ project.id }}">
{{ project.id + ' - ' + project.name }}
</mat-option>
</mat-select>
</mat-form-field>
<br />
<div *ngIf="importProject != null">
<div i18n>Choose the step(s) that you want to import, then click next.</div>
<br />
<div fxLayout="row wrap" fxLayoutGap="8px">
<h4 style="display: inline">{{ importProject.metadata.title }}</h4>
<mat-icon>visibility</mat-icon>
</button>
</p>
<div
*ngFor="let item of projectIdToOrder"
[ngClass]="{
groupHeader: item.node.type == 'group',
stepHeader: item.node.type != 'group'
}"
>
<h6 *ngIf="item.order != 0 && item.node.type == 'group'">
{{ item.stepNumber }}: {{ item.node.title }}
</h6>
<div fxLayout="row wrap" fxLayoutGap="8px" *ngIf="item.order != 0 && item.node.type != 'group'">
<mat-checkbox name="item" ngDefaultControl [(ngModel)]="item.checked">
<span class="step-title">{{ item.stepNumber }}: {{ item.node.title }}</span>
</mat-checkbox>
<button
mat-raised-button
color="primary"
(click)="previewImportProject()"
matTooltip="Preview Unit"
class="mat-raised-button mat-primary"
style="margin-top: -5"
(click)="previewNode(item.node)"
aria-label="Preview Step"
matTooltip="Preview Step"
i18n-matTooltip
matTooltipPosition="above"
>
<mat-icon>visibility</mat-icon>
</button>
</div>
<div
*ngFor="let importItem of importProjectIdToOrder"
[ngClass]="{
groupHeader: importItem.node.type == 'group',
stepHeader: importItem.node.type != 'group'
}"
>
<h6 *ngIf="importItem.order != 0 && importItem.node.type == 'group'">
{{ importItem.stepNumber }}: {{ importItem.node.title }}
</h6>
<div
fxLayout="row wrap"
fxLayoutGap="8px"
*ngIf="importItem.order != 0 && importItem.node.type != 'group'"
</div>
<div class="nav-controls">
<mat-divider></mat-divider>
<div fxLayout="row" fxLayoutGap="16px" fxLayoutAlign="end center">
<button
mat-button
color="primary"
routerLink="../choose-unit"
aria-label="Back"
i18n-aria-label
i18n
>
<mat-checkbox name="importItem" ngDefaultControl [(ngModel)]="importItem.checked">
<h6 style="display: inline">{{ importItem.stepNumber }}: {{ importItem.node.title }}</h6>
</mat-checkbox>
<button
mat-raised-button
color="primary"
class="regularButton mat-raised-button mat-primary"
style="margin-top: -5"
(click)="previewImportNode(importItem.node)"
aria-label="Preview Step"
matTooltip="Preview Step"
i18n-matTooltip
matTooltipPosition="above"
>
<mat-icon>visibility</mat-icon>
</button>
</div>
Back
</button>
<span fxFlex></span>
<button mat-button color="primary" routerLink="../.." aria-label="cancel" i18n>Cancel</button>
<button
mat-raised-button
color="primary"
(click)="goToChooseLocation()"
[disabled]="getSelectedNodesToImport().length == 0"
matTooltip="Next"
i18n-matTooltip
matTooltipPosition="above"
aria-label="next"
i18n
>
Next
</button>
</div>
</div>
<hr />
<div class="nav-controls" fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="end center">
<button mat-button color="primary" routerLink="../.." aria-label="cancel" i18n>Cancel</button>
<button
mat-raised-button
color="primary"
(click)="importSteps()"
[disabled]="getSelectedNodesToImport().length == 0"
matTooltip="Next"
i18n-matTooltip
matTooltipPosition="above"
aria-label="next"
i18n
>
Next
</button>
</div>
15 changes: 4 additions & 11 deletions src/app/authoring-tool/import-step/choose-import-step/choose-import-step.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,7 @@
.stepHeader {
margin-top: 4px;
}

.nav-controls {
background-color: white;
position: sticky;
bottom: 0;
padding-bottom: 8px;
}

.mat-icon {
margin: 0px;
}

.step-title {
font-weight: 400;
}
Loading

0 comments on commit 772eba3

Please sign in to comment.