-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(Authoring): Convert project asset authoring to Angular (#1343)
- Loading branch information
1 parent
e784b2a
commit 4f58aad
Showing
31 changed files
with
925 additions
and
129 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
8 changes: 8 additions & 0 deletions
8
src/assets/wise5/authoringTool/project-asset-authoring/asset-chooser-dialog-data.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| export interface AssetChooserDialogData { | ||
| componentId: string; | ||
| isPopup: boolean; | ||
| nodeId: string; | ||
| projectId: number; | ||
| target: string; | ||
| targetObject: any; | ||
| } |
25 changes: 25 additions & 0 deletions
25
src/assets/wise5/authoringTool/project-asset-authoring/asset-chooser.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { MatDialog, MatDialogRef } from '@angular/material/dialog'; | ||
| import { ProjectAssetAuthoringComponent } from './project-asset-authoring.component'; | ||
|
|
||
| export class AssetChooser { | ||
| constructor( | ||
| private dialog: MatDialog, | ||
| private nodeId: string, | ||
| private componentId: string, | ||
| private projectId: number = null | ||
| ) {} | ||
|
|
||
| open(target: string, targetObject: any = null): MatDialogRef<ProjectAssetAuthoringComponent> { | ||
| return this.dialog.open(ProjectAssetAuthoringComponent, { | ||
| data: { | ||
| componentId: this.componentId, | ||
| isPopup: true, | ||
| nodeId: this.nodeId, | ||
| projectId: this.projectId, | ||
| target: target, | ||
| targetObject: targetObject | ||
| }, | ||
| width: '80%' | ||
| }); | ||
| } | ||
| } |
103 changes: 103 additions & 0 deletions
103
...assets/wise5/authoringTool/project-asset-authoring/project-asset-authoring.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| <div class="root"> | ||
| <div | ||
| class="drop-box" | ||
| ng2FileDrop | ||
| (onFileDrop)="fileChosen($event)" | ||
| accept="image/*,application/pdf,text/csv,text/javascript" | ||
| i18n | ||
| > | ||
| Drop image or file here or click to upload! | ||
| <input | ||
| type="file" | ||
| accept="image/*,application/pdf,text/csv,text/javascript" | ||
| class="file-input" | ||
| (onFileSelected)="fileChosen($event)" | ||
| ng2FileSelect | ||
| multiple | ||
| /> | ||
| </div> | ||
| <div class="storage-usage-message"> | ||
| <span i18n> | ||
| You are using {{ totalFileSize | filesize }} out of | ||
| {{ projectAssetTotalSizeMax | filesize }} ({{ projectAssetUsagePercentage.toFixed(0) }}%) | ||
| </span> | ||
| <span *ngIf="totalUnusedFilesSize != null && totalUnusedFilesSize !== 0" class="red" | ||
| >(Unused Files {{ totalUnusedFilesSize | filesize }} ({{ | ||
| unusedFilesPercentage.toFixed(0) | ||
| }}%)) | ||
| </span> | ||
| </div> | ||
| <div class="background-green"> | ||
| {{ uploadSuccessMessage }} | ||
| <div *ngFor="let successFile of successFiles"> | ||
| <b>{{ successFile.filename }}</b> | ||
| </div> | ||
| </div> | ||
| <div class="background-pink"> | ||
| {{ uploadErrorMessage }} | ||
| <div *ngFor="let errorFile of errorFiles"> | ||
| <b>{{ errorFile.filename }}</b> {{ errorFile.message }} | ||
| </div> | ||
| </div> | ||
| <mat-form-field> | ||
| <mat-label i18n>Sort Assets</mat-label> | ||
| <mat-select [(ngModel)]="assetSortBy" (ngModelChange)="assetSortByChanged()"> | ||
| <mat-option value="aToZ" i18n>File Name A->Z</mat-option> | ||
| <mat-option value="zToA" i18n>File Name Z->A</mat-option> | ||
| <mat-option value="smallToLarge" i18n>File Size Small -> Large</mat-option> | ||
| <mat-option value="largeToSmall" i18n>File Size Large -> Small</mat-option> | ||
| </mat-select> | ||
| </mat-form-field> | ||
| <div class="assets"> | ||
| <div class="asset-items-container"> | ||
| <ul class="asset-items"> | ||
| <ng-container *ngFor="let assetItem of projectAssets.files"> | ||
| <li | ||
| *ngIf=" | ||
| allowedFileTypes.includes('any') || allowedFileTypes.includes(assetItem.fileType) | ||
| " | ||
| class="asset-item cursor-pointer" | ||
| (mouseover)="previewAsset(assetItem)" | ||
| [ngStyle]="{ 'background-color': selectedAssetItem === assetItem ? 'yellow' : '' }" | ||
| fxLayout="row" | ||
| fxLayoutAlign="start center" | ||
| fxLayoutGap="10px" | ||
| > | ||
| <button mat-stroked-button *ngIf="isPopup" (click)="chooseAsset(assetItem)" i18n> | ||
| Choose | ||
| </button> | ||
| <span>{{ assetItem.fileName }} ({{ assetItem.fileSize | filesize }})</span> | ||
| <span *ngIf="!assetItem.used"> | ||
| <span class="red" i18n>(Not Used)</span> | ||
| </span> | ||
| <div fxFlex></div> | ||
| <button | ||
| mat-icon-button | ||
| (click)="downloadAsset(assetItem)" | ||
| matTooltip="Download" | ||
| matTooltipPosition="above" | ||
| i18n-matTooltip | ||
| > | ||
| <mat-icon>file_download</mat-icon> | ||
| </button> | ||
| <button | ||
| mat-icon-button | ||
| (click)="deleteAsset(assetItem)" | ||
| matTooltip="Delete" | ||
| matTooltipPosition="above" | ||
| i18n-matTooltip | ||
| > | ||
| <mat-icon>delete</mat-icon> | ||
| </button> | ||
| </li> | ||
| </ng-container> | ||
| </ul> | ||
| </div> | ||
| <div class="asset-preview"> | ||
| <img *ngIf="assetIsImage" [src]="previewAssetURL" class="max-width-400" /> | ||
| <video *ngIf="assetIsVideo" class="max-width-400" controls> | ||
| <source [src]="previewAssetURL" type="video/mp4" /> | ||
| </video> | ||
| </div> | ||
| </div> | ||
| </div> |
76 changes: 76 additions & 0 deletions
76
...assets/wise5/authoringTool/project-asset-authoring/project-asset-authoring.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| .root { | ||
| padding: 0px 16px; | ||
| } | ||
|
|
||
| .drop-box { | ||
| background: #F8F8F8; | ||
| border: 5px dashed #DDD; | ||
| height: 100px; | ||
| text-align: center; | ||
| padding-top: 30px; | ||
| margin-top: 10px; | ||
| margin-bottom: 10px; | ||
| bottom: 0px; | ||
| position: relative; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .file-input { | ||
| position: absolute; | ||
| top: 0px; | ||
| left: 0px; | ||
| width: 100%; | ||
| height: 100%; | ||
| opacity: 0; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .storage-usage-message { | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .assets { | ||
| display: flex; | ||
| } | ||
|
|
||
| .asset-items-container { | ||
| flex: 1; | ||
| height: 500px; | ||
| overflow-y: scroll; | ||
| } | ||
|
|
||
| .asset-items { | ||
| padding: 0px; | ||
| } | ||
|
|
||
| .asset-item { | ||
| list-style-type: none; | ||
| } | ||
|
|
||
| .asset-preview { | ||
| flex: 1; | ||
| } | ||
|
|
||
| .mat-icon { | ||
| margin: 0px; | ||
| } | ||
|
|
||
| .red { | ||
| color: red; | ||
| } | ||
|
|
||
| .background-green { | ||
| background-color: lightgreen; | ||
| } | ||
|
|
||
| .background-pink { | ||
| background-color: lightpink; | ||
| } | ||
|
|
||
| .max-width-400 { | ||
| max-width: 400px; | ||
| } | ||
|
|
||
| .cursor-pointer { | ||
| cursor: pointer; | ||
| } |
Oops, something went wrong.