Skip to content

Commit

Permalink
Converted remaining AT controllers into components.
Browse files Browse the repository at this point in the history
Worked on info, asset, notebook, milestones, wiselink, and authoringTool controllers.
Some of them (e.g. assetController) could not fully be converted because it is being used in mdDialog.
Removed unnecessary variables.
Changed let to const where applicable.
#36
  • Loading branch information
hirokiterashima committed Apr 2, 2021
1 parent 489c057 commit 0a0b7f5
Show file tree
Hide file tree
Showing 16 changed files with 415 additions and 497 deletions.
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() {
$onDestory() {
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 0a0b7f5

Please sign in to comment.