entcore 4.5.0 → 4.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "entcore",
-  "version": "4.5.0",
+  "version": "4.5.1",
   "description": "",
   "main": "gulpfile.js",
   "types": "./types/src/ts/entcore.d.ts",
@@ -35,6 +35,7 @@
     "webpack-stream": "^3.2.0"
   },
   "devDependencies": {
+    "@types/angular": "1.7.4",
     "@types/ua-parser-js": "^0.7.35",
     "@types/core-js": "0.9.46",
     "@types/jasmine": "2.8.8",

package/src/template/media-library/browse.html

@@ -31,13 +31,24 @@
 <div class="row reduce-block-four search-image">
 	<input type="search" ng-model="display.search" i18n-placeholder="search" ng-change="updateSearch()" class="six cell" />
 	<div class="cell six">
-		<button type="button" class="right-magnet" ng-disabled="display.loading || selectedDocuments().length === 0" ng-click="selectDocuments()">
+		<!-- default nav -->
+		<button ng-if="display.listFrom" type="button" class="right-magnet" ng-disabled="display.loading || selectedDocuments().length === 0" ng-click="selectDocuments()">
 			<i18n>library.browse.add</i18n>
 		</button>
+
+		<!-- virtual document add button -->
+		<virtual-media-library-button
+				ng-if="!display.listFrom"
+				documents="documents"
+				folders="folders"
+				selected-virtual-folder="selectedVirtualFolder"
+				on-click="selectDocuments()">
+		</virtual-media-library-button>
 	</div>
 </div>
 
 <div class="row browse">
+	<!-- nav folder -->
 	<nav class="four cell vertical zero-mobile">
 		<ul class="height-minus300">
 			<li workflow="workspace.create">
@@ -75,22 +86,38 @@
 					<i18n>workspace.publicDocuments</i18n>
 				</a>
 			</li>
+
+			<!-- virtual folder -->
+			<virtual-media-library
+					selected-virtual-folder="selectedVirtualFolder"
+					on-click="resetRegularDisplay()">
+			</virtual-media-library>
 		</ul>
 	</nav>
 
-		<!--VIEW MODE-->
-		<div class="cell right-magnet">
-			<div class="choice-view">
-				<i class="show-icons" ng-class="{ selected: isViewMode('icons') }" ng-click="changeViewMode('icons')"></i>
-				<i class="show-list" ng-class="{ selected: isViewMode('list') }" ng-click="changeViewMode('list')"></i>
-			</div>
+	<!--VIEW MODE-->
+	<div ng-if="display.listFrom" class="cell right-magnet">
+		<div class="choice-view">
+			<i class="show-icons" ng-class="{ selected: isViewMode('icons') }" ng-click="changeViewMode('icons')"></i>
+			<i class="show-list" ng-class="{ selected: isViewMode('list') }" ng-click="changeViewMode('list')"></i>
 		</div>
+	</div>
 
-	<div class="cell eight height-five twelve-mobile browse-list height-minus300 overflowx-hd" on-bottom-scroll="documentList.increment()">
+	<!-- documents view by icons or list -->
+	<div ng-if="display.listFrom" class="cell eight height-five twelve-mobile browse-list height-minus300 overflowx-hd" on-bottom-scroll="documentList.increment()">
 		<div class="reduce-block-eight" ng-if="!documents.length && !folders.length" style="text-align: center; margin-top: 40px">
 			<i18n>library.browse.notfound</i18n>
 		</div>
 		<container ng-hide="!documents.length && !folders.length" template="documents-view" guard-ignore-template></container>
 	</div>
+
+	<!-- virtual folder document view -->
+	<virtual-media-library-document-view class="cell eight height-five twelve-mobile browse-list height-minus300 overflowx-hd"
+										 ng-if="!display.listFrom"
+										 search="display.search"
+										 selected-virtual-folder="selectedVirtualFolder">
+	</virtual-media-library-document-view>
+
+
 </div>
 <div class="row"></div>

package/src/template/media-library/record.html

@@ -1 +1 @@
-<recorder ng-model="record" on-upload="insertRecord()" protected></recorder>
+<recorder ng-model="record" on-upload="insertRecord" protected></recorder>

package/src/template/media-library/virtual-media-library/virtual-media-content.html

@@ -0,0 +1,56 @@
+<div class="icons-view" style="overflow: auto" ng-if="vm.selectedVirtualFolder">
+
+    <!--  empty state message -->
+    <div class="reduce-block-eight" ng-if="!vm.folders.length && !vm.documents.length" style="text-align: center; margin-top: 40px">
+        <i18n>library.browse.notfound</i18n>
+    </div>
+
+    <!-- folder part area -->
+    <div class="element reduce-block-six" ng-repeat="folder in vm.folders | orderBy: orderFieldFolder">
+        <explorer ng-model="folder.selected" on-open="vm.mediaServiceLibrary.openedTree.openFolder(folder)">
+            <div class="img container">
+                <i class="folder-large"></i>
+            </div>
+            <legend>
+                <a class="medium-text">[[folder.name]]</a>
+            </legend>
+        </explorer>
+    </div>
+
+    <!-- documents part area -->
+    <div class="element reduce-block-six" ng-repeat="document in vm.documents">
+        <explorer ng-model="document.selected"
+                  ng-click="vm.updateSelection(document)" on-open="selectDocument(document)"
+                  ng-switch="vm.getRole(document)">
+
+            <!-- img content -->
+            <div class="img container" ng-switch-when="img">
+                <div class="clip">
+                    <img image-lazy-load="vm.getThumbUrl(document)"/>
+                    <div class="absolute" ng-if="display.loading && display.loading.indexOf(document) !== -1">
+                        <img skin-src="/img/illustrations/loading.gif" />
+                    </div>
+                </div>
+            </div>
+
+            <!-- container video -->
+            <div class="img container video" ng-switch-when="video"
+                 ng-style="{'background-image': videoThumbUrl(document)}">
+                <svg class="icon-video" width="48" height="48">
+                    <use xlink:href="/workspace/public/img/illustrations.svg#icon-play"></use>
+                </svg>
+            </div>
+
+            <!-- default file -->
+            <div class="img container" ng-switch-default>
+                <i class="[[vm.getRole(document)]]-large"></i>
+            </div>
+
+            <!-- legend content -->
+            <legend>
+                <a class="medium-text">[[document.name]]</a>
+                <a><strong class="small-text">[[document.ownerName]]</strong></a>
+            </legend>
+        </explorer>
+    </div>
+</div>

package/src/template/media-library/virtual-media-library/virtual-media-folder.html

@@ -0,0 +1,7 @@
+<nav class="vertical mobile-navigation" ng-if="vm.folderServiceTree.trees.length > 0">
+     <ul style="border-left: none;">
+         <li data-ng-repeat="folder in vm.folderServiceTree.trees">
+             <folder-tree-inner folder="folder" tree-props="vm.folderServiceTree"></folder-tree-inner>
+         </li>
+     </ul>
+ </nav>

package/src/ts/directives/virtual-folder/README.md

@@ -0,0 +1,209 @@
+## Virtual Folder
+
+Virtual Folder is an extension of Media-Library component in order to create your own virtual documents 
+if you wish to make it exportable to all apps.
+
+Each Virtual Folder must be implemented by an App using Behaviours.
+
+### 1. Requirement
+
+Must add public configuration to Workspace App :
+<pre>
+## Workspace configuration
+{
+      ...
+      "config": {
+         ...
+         "publicConf": {
+           "folder-service": ["appName", "appName2", ...]
+        }
+      }
+}
+</pre>
+
+Note : `appName` (`or appName2`) must be written correctly in order to load their behaviours (e.g `Behaviours.load(appName)`)
+
+
+## Implementation usage as an App
+
+In your behaviours, you must add a field named `mediaLibraryService` (could be an object/class)
+
+It should be accessible via `Behaviours.applicationsBehaviours[appName].mediaLibraryService`
+
+`mediaLibraryService` must implement `VirtualMediaLibraryScope` as an object or class
+
+
+### 1. Interface 
+
+This is the interface that each app must implement :
+```
+interface IVirtualMediaLibraryScope{
+    folders: Array<Document>;
+
+    documents: Array<Document>;
+
+    openedTree: FolderTreeProps;
+
+    enableInitFolderTree(): boolean;
+
+    initFolderTree(): Promise<void>;
+
+    openFolder(folder: Document): Promise<void>;
+
+    onSelectVirtualDocumentsBefore(documents: Array<any>): Promise<Array<Document>>;
+ 
+    clearCopiedDocumentsAfterSelect(documents: Array<Document>): Promise<void>;
+}
+```
+### 2. Interface Description
+
+Each app must implement these scopes in their own behaviours as `mediaLibraryservice` (using `object` or `class` typescript)
+
+
+| Scope                   | Type | Description - Ideal implementation                                                                      
+| ------------------------- | ----- | -----------------------------------------------------------------------------------
+| `folders`           | ` Array<Document>` | An Array of documents that must contain folder type
+| `documents`       | `Array<Document>` | An Array of documents that must contain simply documents type                    
+| `openedTree`       | `FolderTreeProps` | The current opened tree loaded from behaviours (will store your current behaviours media library service)                      
+| `enableInitFolderTree`    | `boolean` | Method that will allow your virtual folder to be displayed as a `tree` service in media-library            
+| `initFolderTree` | `Promise<void>` | Initialize your folder `tree` service (using `folder-tree` directive). this method **requires** `folders` and `documents` members to be populated
+| `openFolder` | `Promise<void>` | open folder children from your `tree` service.  this method **requires** `folders` and `documents` members to be populated                      
+| `onSelectVirtualDocumentsBefore` | `Promise<Array<Document>>` | This method will execute the behaviour's action before its executes the media library scope `selectDocuments()`.            
+| `clearCopiedDocumentsAfterSelect` | `Promise<void>` | Allows clear copied documents (if you decided in your method `onSelectVirtualDocumentsBefore()`)                  
+
+### 3. Interface Implementation example
+
+```
+Behaviours.register(appName, {
+    right {
+        ...
+    }
+    mediaLibraryService: new MediaLibraryService(), // mediaLibraryService
+    ...
+})
+```
+
+Creation object :
+```
+export const mediaLibraryService: IVirtualMediaLibraryScope = {
+   // implements all methods
+};
+```
+or class : 
+```
+export class MediaLibraryService implements VirtualMediaLibraryScope {
+   // implements all methods
+};
+```
+
+### 4. Example implementation for each method
+
+Say we are implementing `MediaLibraryService` from a specific module that needs to display its own tree to the media library
+
+```typescript
+export class MediaLibraryService implements IVirtualMediaLibraryScope {
+    openedTree: any;
+    folders: Array<Document>;
+    documents: Array<Document>;
+
+    constructor() {
+        this.folders = [];
+        this.documents = [];
+    }
+
+    enableInitFolderTree(): boolean {
+        return true // or anything, you make your own condition to determine whether it should be displayed in your virtual folder tree
+    }
+
+    async initFolderTree(): Promise<void> {
+        // apicall() or method() from your own that will fetch data and use for assigning your folders and this documents
+        // (e.g): 
+        let documents: any = apiCall();
+
+        // populate folder content to media library behaviours
+        this.folders = documents.filter(filterFoldersOnly());
+        
+        // populate file content to media library behaviours
+        this.documents = documents.filter(filterDocumentsOnly()); // See below the example of field Document object must have 
+    }
+
+    async openFolder(folder: models.Element): Promise<void> {
+        // apicall() or method() from your own that will fetch data and use for assigning your folders and this documents
+        // you can add extra business logic, it will depend what you seek for
+        // (e.g): 
+        let documents: any = anotherCall();
+
+        // populate folder content to media library behaviours
+        this.folders = documents.filter(filterFoldersOnly());
+
+        // populate file content to media library behaviours
+        this.documents = documents.filter(filterDocumentsOnly()); // See below the example of field Document object must have 
+    }
+
+    async onSelectVirtualDocumentsBefore(documents: Array<any>): Promise<Array<Document>> {
+        // apicall() or method() from your own that will do any action you like
+        // IMPORTANT this must return {Promise<Array<Document>>} containing a "real" document since this will be used for media library ng model
+        
+        let resDocuments = await anotherCall(documents); // could be calling your own API/method to duplicate or choose different documents
+        return resDocuments;
+        
+    }
+
+    async clearCopiedDocumentsAfterSelect(documents: Array<Document>): Promise<void> {
+        if (documents && documents.length)
+            service.deleteAll(documents); // SUGGESTED method that will clear any documents
+        // note: service.deleteAll comes from workspaceService
+    }
+
+}
+```
+
+As for the `Document` model, these fields should be available :
+```
+{
+    name: {string}
+    comments: {string},
+    metadata: {
+        'content-type': {string},
+        role: {string},
+        extension: {string},
+        filename: {string},
+        size: {number}
+    }, // metadata as the workspace object
+    owner: {string},
+    ownerName: {string}
+}
+```
+Example fictive data of a document
+```
+{
+   "_id": {string} (e.g "id"),
+   "name": {string} (e.g "name"),
+   "title": {string} (e.g "title"),
+   "created": {string} (e.g "2022-06-02T12:06:00.000Z"),
+   "children": {Array<this} file/folder content (recommanded to avoid TypeError)
+   "documents": {Array<this>} file content 
+   "folders": {Array<this>} folder content // not mandatory if you decide to lazy load your current folder
+   "eParent": {string},
+   "eType": {string}, "file" | "folder"
+   "metadata":{
+      "name": {string} (e.g "insert title"),
+      "filename": {string}, (e.g "insert title.png"),
+      "content-type": {string} (e.g "image/png"),
+      "charset": {string} (e.g "UTF-8"),
+      "size": {number} (e.g 77287),
+      "extension": {string} (e.g "png"),
+      "role": {string}, (e.g "img")
+   },
+   "version": {number} (e.g 50),
+   "link": {string} (e.g "/workspace/document/id"),
+   "icon":" {string} (e.g "/workspace/document/id"),
+   "owner":{
+      "userId": {string} (e.g "user id"),
+      "displayName": {string} (e.g "display name")
+   },
+   "shared":[]
+}
+```
+
+

package/types/src/ts/directives/index.d.ts

@@ -65,3 +65,4 @@ export * from "./libraryPrompt";
 export * from "./dragndrop";
 export * from "./structureTree";
 export * from "./toast";
+export * from "./virtual-folder";

package/types/src/ts/directives/virtual-folder/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./virtual-media-library-document-view.directive";
+export * from "./virtual-media-library.directive";
+export * from "./virtual-media-library-button.directive";
+export * from "./virtual-media-library.model";

package/types/src/ts/directives/virtual-folder/virtual-media-library-button.directive.d.ts

@@ -0,0 +1,2 @@
+import { Directive } from "../../ng-start";
+export declare const virtualMediaLibraryButton: Directive;

package/types/src/ts/directives/virtual-folder/virtual-media-library-document-view.directive.d.ts

@@ -0,0 +1,2 @@
+import { Directive } from "../../ng-start";
+export declare const virtualMediaLibraryDocumentView: Directive;

package/types/src/ts/directives/virtual-folder/virtual-media-library.directive.d.ts

@@ -0,0 +1,2 @@
+import { Directive } from "../../ng-start";
+export declare const virtualMediaLibrary: Directive;

package/types/src/ts/entcore.d.ts

@@ -25,4 +25,5 @@ export * from "./tracking";
 export { Embedder } from "./embedder";
 export { DatepickerDelegate } from "./ng-app";
 export { FolderTreeProps } from "./directives/folderTree";
+export { IVirtualMediaLibraryScope } from "./directives/virtual-folder";
 export { FolderPickerProps, FolderPickerSource, FolderPickerSourceBlob, FolderPickerSourceFile } from "./directives/folderPicker";