Skip to content

Commit

Permalink
Merge pull request #39 from WISE-Community/issue-36-refactor-at-contr…
Browse files Browse the repository at this point in the history
…ollers-info-asset-notebook-milestones-wiselink

Converted remaining AT controllers into components
  • Loading branch information
geoffreykwan authored Apr 5, 2021
2 parents 50b1e7b + 22f3232 commit 57a997b
Show file tree
Hide file tree
Showing 17 changed files with 416 additions and 498 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export class EditComponentJsonComponent {
});
}

ngOnDestory() {
ngOnDestroy() {
this.jsonChangedSubscription.unsubscribe();
this.nodeChangedSubscription.unsubscribe();
}
Expand Down
6 changes: 3 additions & 3 deletions src/app/services/projectAssetService.ts
Original file line number Diff line number Diff line change
Expand Up @@ -235,9 +235,9 @@ export class ProjectAssetService {

openAssetChooser(params: any) {
return this.upgrade.$injector.get('$mdDialog').show({
templateUrl: 'assets/wise5/authoringTool/asset/asset.html',
controller: 'ProjectAssetController',
controllerAs: 'projectAssetController',
templateUrl: 'assets/wise5/authoringTool/asset/assetAuthoring.html',
controller: 'ProjectAssetAuthoringController',
controllerAs: '$ctrl',
$stateParams: params,
clickOutsideToClose: true,
escapeToClose: true
Expand Down
105 changes: 0 additions & 105 deletions src/assets/wise5/authoringTool/asset/asset.html

This file was deleted.

100 changes: 100 additions & 0 deletions src/assets/wise5/authoringTool/asset/assetAuthoring.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
<style>
md-dialog {
display: initial;
width: 80%;
}
.drop-box {
background: #F8F8F8;
border: 5px dashed #DDD;
width: 90%;
height: 100px;
text-align: center;
padding-top: 50px;
margin: 10px;
bottom: 0px;
}
.drop-box:hover {
cursor: pointer;
}
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
li {
padding-left: 20px;
}
li:hover {
cursor: pointer;
}
#uploadSuccessMessage {
background-color: lightgreen;
}
#errorMessage {
background-color: lightpink;
}
</style>

<div ngf-drop ngf-select
ngf-change="$ctrl.uploadAssetItems($files)" class="drop-box"
ngf-resize="{quality: .8, width: 1000, height: 1000, pattern:'image/*', restoreExif: true}"
ngf-resize-if="$width > 1000 || $height > 1000"
drag-over-class="dragover" ngf-multiple="true" allow-dir="false"
accept="image/*,application/pdf,text/csv,text/javascript" translate="dropAssetMessage"></div>
<span translate="assetUsageMessage"
translate-value-usage="{{$ctrl.totalFileSize | appropriateSizeText }}"
translate-value-max="{{$ctrl.projectAssetTotalSizeMax | appropriateSizeText }}"
translate-value-percentage="{{$ctrl.projectAssetUsagePercentage | roundToDecimal:0 }}"></span>
<span ng-if="$ctrl.totalUnusedFilesSize != null && $ctrl.totalUnusedFilesSize != 0"
style="color:red">({{ ::'unusedFiles' | translate }} {{$ctrl.totalUnusedFilesSize | appropriateSizeText}} ({{$ctrl.unusedFilesPercentage | roundToDecimal:0}}%))
</span>
<div id="uploadSuccessMessage">
{{$ctrl.uploadSuccessMessage}}
<div ng-repeat='successFile in $ctrl.successFiles'>
<b>{{::successFile.filename}}</b>
</div>
</div>
<div id="errorMessage">
{{$ctrl.uploadErrorMessage}}
<div ng-repeat='errorFile in $ctrl.errorFiles'>
<b>{{::errorFile.filename}}</b> {{::errorFile.message}}
</div>
</div>
<span translate="sortAssets"></span>: <select ng-model="$ctrl.assetSortBy"
ng-change="$ctrl.assetSortByChanged()">
<option value="aToZ" translate="fileNameAToZ"></option>
<option value="zToA" translate="fileNameZToA"></option>
<option value="smallToLarge" translate="fileSizeSmallToLarge"></option>
<option value="largeToSmall" translate="fileSizeLargeToSmall"></option>
</select>
<div style='display:flex'>
<div style='flex:1; height:500px; overflow-y:scroll;'>
<ul>
<li ng-repeat='assetItem in $ctrl.projectAssets.files'
class='assetItem'
ng-click='$ctrl.assetClicked($event, assetItem)'
ng-mouseover='$ctrl.previewAsset($event, assetItem)'
ng-style="$ctrl.selectedAssetItem === assetItem ? { 'backgroundColor': 'yellow'} : { 'backgroundColor': '' }"
ng-if='($ctrl.allowedFileTypes.includes("any") || $ctrl.allowedFileTypes.includes(assetItem.fileType))'>
<span>{{::assetItem.fileName}} ({{::assetItem.fileSize | appropriateSizeText}})</span>
<button ng-click='$ctrl.chooseAsset(assetItem)' ng-show='$ctrl.isPopup'>Choose</button>
<span>
<md-tooltip md-direction="top"><span translate="download"></span></md-tooltip>
<md-icon ng-click="$ctrl.downloadAsset(assetItem)">file_download</md-icon>
</span>
<md-icon ng-click='$ctrl.deleteAsset(assetItem)'>delete</md-icon>
<span ng-if="!assetItem.used">
<span style="color:red">({{ ::'notUsed' | translate }})</span>
</span>
</li>
</ul>
</div>
<div style='flex:1;'>
<div>
<img ng-src='{{$ctrl.previewAssetURL}}' ng-show='$ctrl.assetIsImage' style='max-width: 400px'/>
<video ng-show='$ctrl.assetIsVideo' style='max-width: 400px' controls>
<source ng-src='{{$ctrl.previewAssetURL}}' type='video/mp4'>
</video>
</div>
</div>
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { ConfigService } from '../../services/configService';
import { ProjectAssetService } from '../../../../app/services/projectAssetService';
import * as $ from 'jquery';

class ProjectAssetController {
export class ProjectAssetAuthoringController {
$translate: any;
projectId: number;
projectAssets: any;
Expand Down Expand Up @@ -36,10 +36,8 @@ class ProjectAssetController {
static $inject = [
'$filter',
'$mdDialog',
'$rootScope',
'$state',
'$stateParams',
'$scope',
'$timeout',
'ConfigService',
'ProjectAssetService',
Expand All @@ -49,16 +47,17 @@ class ProjectAssetController {
constructor(
$filter: any,
private $mdDialog: any,
private $rootScope: any,
private $state: any,
private $stateParams: any,
private $scope: any,
private $timeout: any,
private ConfigService: ConfigService,
private ProjectAssetService: ProjectAssetService,
private UtilService: UtilService
) {
this.$translate = $filter('translate');
}

$onInit() {
this.projectId = this.$stateParams.projectId;
this.totalFileSize = 0;
this.totalUnusedFilesSize = 0;
Expand All @@ -69,27 +68,21 @@ class ProjectAssetController {
if (stateParams.isPopup != null) {
this.isPopup = true;
}

if (stateParams.projectId != null) {
this.projectId = stateParams.projectId;
}

if (stateParams.nodeId != null) {
this.nodeId = stateParams.nodeId;
}

if (stateParams.componentId != null) {
this.componentId = stateParams.componentId;
}

if (stateParams.target != null) {
this.target = stateParams.target;
}

if (stateParams.targetObject != null) {
this.targetObject = stateParams.targetObject;
}

if (stateParams.allowedFileTypes != null) {
this.allowedFileTypes = this.$stateParams.allowedFileTypes;
}
Expand Down Expand Up @@ -120,13 +113,9 @@ class ProjectAssetController {
if (this.ProjectAssetService.isProjectAssetsAvailable()) {
this.ProjectAssetService.calculateAssetUsage();
}

this.$scope.$on('$destroy', () => {
this.unsubscribeAll();
});
}

unsubscribeAll() {
$onDestroy() {
this.getProjectAssetsSubscription.unsubscribe();
this.getTotalFileSizeSubscription.unsubscribe();
this.getTotalUnusedFileSizeSubscription.unsubscribe();
Expand Down Expand Up @@ -172,10 +161,6 @@ class ProjectAssetController {
return 0;
}

/**
* Delete an asset from the project after confirming with the user
* @param assetItem the asset to delete
*/
deleteAsset(assetItem) {
const message = `${this.$translate('areYouSureYouWantToDeleteThisFile')}\n\n${
assetItem.fileName
Expand All @@ -201,11 +186,6 @@ class ProjectAssetController {
this.$mdDialog.hide(params);
}

/**
* Upload all the small files. If there are any large files, we will confirm with the author
* that they want to upload those files.
* @param files An array of file objects.
*/
uploadAssetItems(files) {
let performUploadOfAllFiles = true;
const largeAndSmallFiles = this.separateLargeAndSmallFiles(files);
Expand Down Expand Up @@ -341,4 +321,7 @@ class ProjectAssetController {
}
}

export default ProjectAssetController;
export const ProjectAssetAuthoringComponent = {
templateUrl: `/wise5/authoringTool/asset/assetAuthoring.html`,
controller: ProjectAssetAuthoringController
};
36 changes: 15 additions & 21 deletions src/assets/wise5/authoringTool/authoringTool.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,31 +8,25 @@
</style>

<div class="app-styles" disable-delete-keypress
ng-mousemove='authoringToolController.mouseMoved()'
ng-mousemove='$ctrl.mouseMoved()'
role="main" layout="column" layout-fill md-theme="at">
<at-top-bar logo-path="{{::authoringToolController.logoPath}}"
project-id="authoringToolController.projectId"
project-title="authoringToolController.projectTitle"
run-id="authoringToolController.runId"
run-code="authoringToolController.runCode"></at-top-bar>
<at-toolbar ng-if="authoringToolController.showToolbar"
number-project="authoringToolController.numberProject"
show-step-tools="authoringToolController.showStepTools"
view-name="authoringToolController.currentViewName"
on-menu-toggle="authoringToolController.toggleMenu()"></at-toolbar>
<md-sidenav md-component-id="monitorSidenav"
md-is-open="authoringToolController.isMenuOpen"
md-whiteframe="4">
<at-main-menu state="authoringToolController.$state"
views="authoringToolController.views"></at-main-menu>
<at-top-bar logo-path="{{::$ctrl.logoPath}}"
project-id="$ctrl.projectId"
project-title="$ctrl.projectTitle"
run-id="$ctrl.runId"
run-code="$ctrl.runCode"></at-top-bar>
<at-toolbar ng-if="$ctrl.showToolbar"
number-project="$ctrl.numberProject"
show-step-tools="$ctrl.showStepTools"
view-name="$ctrl.currentViewName"
on-menu-toggle="$ctrl.toggleMenu()"></at-toolbar>
<md-sidenav md-component-id="monitorSidenav" md-is-open="$ctrl.isMenuOpen" md-whiteframe="4">
<at-main-menu state="$ctrl.$state" views="$ctrl.views"></at-main-menu>
</md-sidenav>
<md-content id="content" flex role="main" layout="column" class="l-main"
ng-class="{ 'l-main--with-toolbar': authoringToolController.showToolbar }"
ng-class="{ 'l-main--with-toolbar': $ctrl.showToolbar }"
flex role="main">
<div ui-view></div>
</md-content>
<side-menu ng-if="authoringToolController.showToolbar"
state="authoringToolController.$state"
views="authoringToolController.views"></side-menu>
</side-menu>
<side-menu ng-if="$ctrl.showToolbar" state="$ctrl.$state" views="$ctrl.views"></side-menu>
</div>
Loading

0 comments on commit 57a997b

Please sign in to comment.