gCubeSystem
/
workspace-ionic-app
16
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

routing addedy

This commit is contained in:
Lucio Lelii 2023-02-20 18:06:39 +01:00
parent a6781699e8
commit 0b721f46a1
18 changed files with 338 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
package-lock.json generated
View File

@ -22,6 +22,10 @@
"@capacitor/ios": "4.6.3",
"@capacitor/keyboard": "4.1.1",
"@capacitor/status-bar": "4.1.1",
"@fortawesome/angular-fontawesome": "^0.12.1",
"@fortawesome/fontawesome-svg-core": "^6.3.0",
"@fortawesome/free-regular-svg-icons": "^6.3.0",
"@fortawesome/free-solid-svg-icons": "^6.3.0",
"@ionic/angular": "^6.5.4",
"cordova-plugin-file-opener2": "^4.0.0",
"ionicons": "^6.1.3",
@ -2892,6 +2896,63 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/@fortawesome/angular-fontawesome": {
"version": "0.12.1",
"resolved": "https://registry.npmjs.org/@fortawesome/angular-fontawesome/-/angular-fontawesome-0.12.1.tgz",
"integrity": "sha512-vGGUfmWhsCtC+wUhnLXPeWBod33XKMFERwvD21LTbVBOCwUDUfwcS9nqfTmrULcpFl/bn20REZH/1vSreWd3ZA==",
"dependencies": {
"tslib": "^2.4.1"
},
"peerDependencies": {
"@angular/core": "^15.0.0",
"@fortawesome/fontawesome-svg-core": "~1.2.27 || ~1.3.0-beta2 || ^6.1.0"
}
},
"node_modules/@fortawesome/fontawesome-common-types": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.3.0.tgz",
"integrity": "sha512-4BC1NMoacEBzSXRwKjZ/X/gmnbp/HU5Qqat7E8xqorUtBFZS+bwfGH5/wqOC2K6GV0rgEobp3OjGRMa5fK9pFg==",
"hasInstallScript": true,
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/fontawesome-svg-core": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.3.0.tgz",
"integrity": "sha512-uz9YifyKlixV6AcKlOX8WNdtF7l6nakGyLYxYaCa823bEBqyj/U2ssqtctO38itNEwXb8/lMzjdoJ+aaJuOdrw==",
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "6.3.0"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/free-regular-svg-icons": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.3.0.tgz",
"integrity": "sha512-cZnwiVHZ51SVzWHOaNCIA+u9wevZjCuAGSvSYpNlm6A4H4Vhwh8481Bf/5rwheIC3fFKlgXxLKaw8Xeroz8Ntg==",
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "6.3.0"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/free-solid-svg-icons": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.3.0.tgz",
"integrity": "sha512-x5tMwzF2lTH8pyv8yeZRodItP2IVlzzmBuD1M7BjawWgg9XAvktqJJ91Qjgoaf8qJpHQ8FEU9VxRfOkLhh86QA==",
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "6.3.0"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@gar/promisify": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",

4
package.json
View File

@ -27,6 +27,10 @@
"@capacitor/ios": "4.6.3",
"@capacitor/keyboard": "4.1.1",
"@capacitor/status-bar": "4.1.1",
"@fortawesome/angular-fontawesome": "^0.12.1",
"@fortawesome/fontawesome-svg-core": "^6.3.0",
"@fortawesome/free-regular-svg-icons": "^6.3.0",
"@fortawesome/free-solid-svg-icons": "^6.3.0",
"@ionic/angular": "^6.5.4",
"cordova-plugin-file-opener2": "^4.0.0",
"ionicons": "^6.1.3",

12
src/app/app.module.ts
View File

@ -7,11 +7,19 @@ import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { fas } from '@fortawesome/free-solid-svg-icons'
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule, FontAwesomeModule],
providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
bootstrap: [AppComponent]
})
export class AppModule {}
export class AppModule {
constructor(library: FaIconLibrary) {
library.addIconPacks(fas);
}
}

11
src/app/model/item.model.ts
View File

@ -1,7 +1,11 @@
import {Content, LastAction } from "./model";
import {AbstractItem, Content, LastAction } from "./model";
export class Item {
private "@class": string;
itemType : string | undefined;
constructor(
public name: string,
public path: string,
@ -26,6 +30,7 @@ export class Item {
public externalRoot?: boolean | undefined,
public privilege?: null | undefined,
public vreFolder?: boolean | undefined,
public displayName?: string | undefined) {}
public displayName?: string | undefined) {
}
}

29
src/app/model/model.ts
View File

@ -2,6 +2,35 @@
itemlist: Item[];
}*/
export interface AbtractItem {
"@class": string;
content?: Content;
id: string;
name: string;
path: string;
parentId: string;
parentPath: String;
primaryType: String;
trashed: boolean;
externalManaged: boolean;
shared: boolean;
locked: boolean;
publicItem: boolean;
title: string;
description: string;
lastModifiedBy: string;
lastModificationTime: number;
creationTime: number;
lastAction: LastAction;
hidden: boolean;
accounting: null;
externalRoot?: boolean;
privilege?: null;
vreFolder?: boolean;
displayName?: string;
}
export interface AbstractItem {
content?: Content;
id: string;

38
src/app/show-folder/show-folder.component.html
View File

@ -1,35 +1,29 @@
<ion-header>
<ion-toolbar>
<ion-buttons slot="start" *ngIf="folder != ''">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>
{{ folder || 'Devdactic Explorer' }}
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-header >
<ion-toolbar>
<ion-buttons slot="start" *ngIf="parentItem !== undefined">
<ion-back-button text="Previous" icon="caret-back"></ion-back-button>
</ion-buttons>
<ion-title> {{ parentItem ? parentItem.title : tabName }} </ion-title>
</ion-toolbar>
</ion-header>
<ion-text color="medium" *ngIf="items.length == 0" class="ion-padding ion-text-center">
<p>Empty folder</p>
</ion-text>
<ion-list>
<ion-item-sliding *ngFor="let i of items">
<ion-item >
<ion-icon name="folder" slot="start" *ngIf="i.isDirectory"></ion-icon>
<ion-icon name="document" slot="start" *ngIf="!i.isDirectory"></ion-icon>
<ion-item (click)="itemClicked(i)">
<fa-icon [icon]="['fas',getIconInfo(i)]" slot="start"></fa-icon>
<ion-label text-wrap>
{{ i.name }}
<p>{{ i.path }}</p>
{{ i.title }}
<!--<p>{{ i.path }}</p> -->
</ion-label>
</ion-item>
<ion-item-options side="start" *ngIf="!i.isDirectory">
<ion-item-option color="danger">
<ion-icon name="trash" slot="icon-only"></ion-icon>
</ion-item-option>
</ion-item-options>
<!--
<ion-item-options side="end">
<ion-item-option (click)="startCopy()" color="success">
@ -39,10 +33,10 @@
Move
</ion-item-option>
</ion-item-options> -->
</ion-item-sliding>
</ion-list>
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button>
<ion-icon name="add"></ion-icon>

66
src/app/show-folder/show-folder.component.ts
View File

@ -1,12 +1,15 @@
import { Component, OnInit, Input, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { Component, OnInit, Input, CUSTOM_ELEMENTS_SCHEMA, Output, EventEmitter } from '@angular/core';
import { Platform, AlertController, ToastController, IonIcon } from '@ionic/angular';
import { Platform, AlertController, ToastController, IonicModule } from '@ionic/angular';
import { FileOpener } from '@awesome-cordova-plugins/file-opener/ngx';
import { Router, ActivatedRoute } from '@angular/router';
import { StoragehubService } from '../storagehub.service';
import { CommonModule } from '@angular/common';
import { Item } from '../model/item.model';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { IconName } from '@fortawesome/fontawesome-svg-core';
@Component({
standalone: true,
@ -16,16 +19,18 @@ import { CommonModule } from '@angular/common';
styleUrls: ['./show-folder.component.scss'],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [
CommonModule
CommonModule, IonicModule, FontAwesomeModule
]
})
export class ShowFolderComponent implements OnInit {
items : any[] = [];
folder = '';
shouldMove = false;
@Input() folderId: string = ''
@Output() folderClickedEvent = new EventEmitter<Item>();
@Input() items: Item[] = []
@Input() parentItem: Item | undefined;
@Input() tabName: string = "";
constructor(
private plt: Platform,
@ -35,15 +40,50 @@ export class ShowFolderComponent implements OnInit {
private route: ActivatedRoute,
private toastCtrl: ToastController,
private storagehub: StoragehubService
) {}
) { }
ngOnInit() {
this.folder = this.route.snapshot.paramMap.get('folder') || '';
this.loadDocuments();
ngOnInit() {
}
loadDocuments() {
getType(item: Item): string | undefined {
return item["@class"].split(".").pop();
}
isFolder(item: Item): boolean {
const type = this.getType(item);
return type === 'SharedFolder' ||
type === 'ExternalFolder' ||
type === 'FolderItem';
}
getIconInfo(item: Item): IconName {
let retrievedName: string;
switch (item["@class"].split(".").pop()) {
case 'SharedFolder':
retrievedName = !item.vreFolder ? "folder-plus" : "folder-plus";
break;
case 'FolderItem':
retrievedName = "folder";
break;
case 'PDFFileItem':
retrievedName = "file-pdf";
break;
case 'ImageFile':
retrievedName = "file-image";
break;
case 'ExternalLink':
retrievedName = 'link';
break;
default:
retrievedName = "file";
}
return retrievedName as IconName;
}
itemClicked(item: Item){
if (this.isFolder(item)){
this.folderClickedEvent.emit(item);
}
}
}

31
src/app/storagehub.service.ts
View File

@ -19,9 +19,12 @@ export class StoragehubService {
}
getWsRoot(): Observable<any> {
getWsRoot(): Observable<Item> {
const getWsURL = `${shURL}?gcube-token=${token}&exclude=hl:accounting`;
return this.http.get(getWsURL, {observe: 'body', responseType: 'text'});
return this.http.get<ItemWrapper>(getWsURL, {observe: 'body', responseType: 'json'}).pipe(
map(value => value.item),
catchError(this.error)
);
}
getTrashRoot(): Observable<Item> {
@ -32,12 +35,23 @@ export class StoragehubService {
);
}
getVres(): Observable<any> {
getVres(): Observable<Item[]> {
const getVresURL = `${shURL}vrefolders/?gcube-token=${token}&exclude=hl:accounting`;
return this.http.get(getVresURL, {observe: 'body', responseType: 'text'});
return this.http.get<ItemList>(getVresURL, {observe: 'body', responseType: 'json'}).pipe(
map(value => value.itemlist),
catchError(this.error)
);
}
getChildren(id:string, onlyFolder:boolean): Observable<Item[]>{
getItem(id: string): Observable<Item> {
const getWsURL = `${shURL}items/${id}?gcube-token=${token}&exclude=hl:accounting`;
return this.http.get<ItemWrapper>(getWsURL, {observe: 'body', responseType: 'json'}).pipe(
map(value => value.item),
catchError(this.error)
);
}
getChildren(id:string, onlyFolder?:boolean): Observable<Item[]>{
let getWsURL = `${shURL}items/${id}/children?gcube-token=${token}&exclude=hl:accounting`;
if (onlyFolder)
getWsURL += '&onlyType=nthl:workspaceItem';
@ -48,10 +62,13 @@ export class StoragehubService {
);
}
getAnchestor(id:string): Observable<any>{
getAnchestor(id:string): Observable<Item[]>{
let getWsURL = `${shURL}items/${id}/ancherstors?gcube-token=${token}&exclude=hl:accounting`;
console.log("ws children "+getWsURL);
return this.http.get(getWsURL, {observe: 'body', responseType: 'text'});
return this.http.get<ItemList>(getWsURL, {observe: 'body', responseType: 'json'}).pipe(
map(value => value.itemlist),
catchError(this.error)
);
}
error(error: HttpErrorResponse) {

17
src/app/tabs/tabs-routing.module.ts
View File

@ -9,6 +9,12 @@ const routes: Routes = [
children: [
{
path: 'ws',
pathMatch: 'full',
loadChildren: () => import('../ws/ws.module').then(m => m.WsPageModule)
},
{
path: 'ws/:folderid',
pathMatch: 'full',
loadChildren: () => import('../ws/ws.module').then(m => m.WsPageModule)
},
{
@ -16,13 +22,13 @@ const routes: Routes = [
loadChildren: () => import('../vres/vres.module').then(m => m.VresPageModule)
},
{
path: 'trash',
loadChildren: () => import('../trash/trash.module').then(m => m.TrashPageModule)
path: 'vres/:folderid',
pathMatch: 'full',
loadChildren: () => import('../vres/vres.module').then(m => m.VresPageModule)
},
{
path: '',
redirectTo: '/tabs/ws',
pathMatch: 'full'
path: 'trash',
loadChildren: () => import('../trash/trash.module').then(m => m.TrashPageModule)
}
]
},
@ -35,5 +41,6 @@ const routes: Routes = [
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}

10
src/app/trash/trash.page.html
View File

@ -1,12 +1,4 @@
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Trash
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<show-folder folderId=""></show-folder>
<show-folder [items]="getValues()" tabName="Trash"></show-folder>
</ion-content>

25
src/app/trash/trash.page.ts
View File

@ -11,25 +11,26 @@ import { StoragehubService } from '../storagehub.service';
})
export class TrashPage implements OnInit{
export class TrashPage implements OnInit {
values : Item[] = [];
values: Item[] = [];
constructor(private storagehub: StoragehubService) {}
constructor(private storagehub: StoragehubService) { }
ngOnInit() {
this.storagehub.getTrashRoot().subscribe(
(res) => this.onSuccess(res)
(res) => this.onSuccess(res)
);
console.log("values "+this.values);
}
private onSuccess(res: Item){
this.storagehub.getChildren(res.id, false).subscribe(
(res) => this.values = res
)
}
private onSuccess(res: Item) {
this.storagehub.getChildren(res.id, false).subscribe(
(res) => this.values = res
)
}
public getValues(): Item[] {
return this.values;
}
}

4
src/app/vres/vres.module.ts
View File

@ -6,6 +6,7 @@ import { VresPage } from './vres.page';
import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
import { VresPageRoutingModule } from './vres-routing.module';
import { ShowFolderComponent } from '../show-folder/show-folder.component';
@NgModule({
imports: [
@ -13,7 +14,8 @@ import { VresPageRoutingModule } from './vres-routing.module';
CommonModule,
FormsModule,
ExploreContainerComponentModule,
VresPageRoutingModule
VresPageRoutingModule,
ShowFolderComponent
],
declarations: [VresPage]
})

16
src/app/vres/vres.page.html
View File

@ -1,17 +1,3 @@
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Vres
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Vres</ion-title>
</ion-toolbar>
</ion-header>
<app-explore-container name="Vres page"></app-explore-container>
<show-folder [items]="getValues()" tabName="My VREs" [parentItem]="getCurrentItem()" (folderClickedEvent)="openFolder($event)"></show-folder>
</ion-content>

55
src/app/vres/vres.page.ts
View File

@ -1,12 +1,59 @@
import { Component } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Item } from '../model/item.model';
import { StoragehubService } from '../storagehub.service';
@Component({
selector: 'app-vres',
templateUrl: 'vres.page.html',
styleUrls: ['vres.page.scss']
styleUrls: ['vres.page.scss'],
providers: [StoragehubService]
})
export class VresPage {
export class VresPage implements OnInit {
constructor() {}
values: Item[] = [];
item: Item | undefined;
folderid: string | undefined;
constructor(private storagehub: StoragehubService,
private router: Router,
private route: ActivatedRoute) { }
ngOnInit() {
this.folderid = this.route.snapshot.paramMap.get('folderid') || undefined;
if (!this.folderid)
this.storagehub.getVres().subscribe(
(res) => this.values = res
);
else
this.storagehub.getItem(this.folderid).subscribe(
(res) => {
this.item = res;
this.onSuccess(res);
}
);
}
private onSuccess(item: Item) {
this.storagehub.getChildren(item.id, false).subscribe(
(res) => this.values = res
)
}
public getValues(): Item[] {
return this.values;
}
openFolder(item: Item) {
this.router.navigateByUrl(`tabs/vres/${item.id}`);
}
public getCurrentItem(): Item | undefined {
return this.item;
}
}

12
src/app/ws/ws-routing.module.ts
View File

@ -5,14 +5,10 @@ import { WsPage } from './ws.page';
const routes: Routes = [
{
path: '',
component: WsPage,
pathMatch: 'full'
},
{
path: 'ws/:folder',
component: ShowFolderComponent
}
path: '',
component: WsPage
}
];
@NgModule({

6
src/app/ws/ws.module.ts
View File

@ -1,4 +1,4 @@
import { IonicModule } from '@ionic/angular';
import { IonicModule} from '@ionic/angular';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
@ -6,6 +6,7 @@ import { WsPage } from './ws.page';
import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
import { WsPageRoutingModule } from './ws-routing.module';
import { ShowFolderComponent } from '../show-folder/show-folder.component';
@NgModule({
imports: [
@ -13,7 +14,8 @@ import { WsPageRoutingModule } from './ws-routing.module';
CommonModule,
FormsModule,
ExploreContainerComponentModule,
WsPageRoutingModule
WsPageRoutingModule,
ShowFolderComponent
],
declarations: [WsPage]
})

16
src/app/ws/ws.page.html
View File

@ -1,17 +1,5 @@
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Workspace
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Workspace</ion-title>
</ion-toolbar>
</ion-header>
<app-explore-container name="Workspace page"></app-explore-container>
<show-folder [items]="getValues()" tabName="My Workspace" [parentItem]="getCurrentItem()" (folderClickedEvent)="openFolder($event)"></show-folder>
</ion-content>

61
src/app/ws/ws.page.ts
View File

@ -2,36 +2,59 @@ import { Component, OnInit } from '@angular/core';
import { Platform, AlertController, ToastController } from '@ionic/angular';
import { Router, ActivatedRoute } from '@angular/router';
import { FileOpener } from '@awesome-cordova-plugins/file-opener/ngx';
import { Item } from '../model/item.model';
import { StoragehubService } from '../storagehub.service';
@Component({
selector: 'app-ws',
providers: [FileOpener],
providers: [StoragehubService],
templateUrl: 'ws.page.html',
styleUrls: ['ws.page.scss']
styleUrls: ['ws.page.scss'],
})
export class WsPage {
export class WsPage implements OnInit {
items = [];
folder = '';
constructor(private plt: Platform,private alertCtrl: AlertController,
private fileOpener: FileOpener,
values: Item[] = [];
folderid: string | undefined;
item : Item | undefined ;
constructor(private storagehub: StoragehubService,
private router: Router,
private route: ActivatedRoute,
private toastCtrl: ToastController) {
}
private route: ActivatedRoute) { }
ngOnInit() {
this.folder = this.route.snapshot.paramMap.get('folder') || '';
this.loadDocuments();
this.folderid = this.route.snapshot.paramMap.get('folderid') || undefined;
if (!this.folderid)
this.storagehub.getWsRoot().subscribe(
(res) => this.onSuccess(res)
);
else
this.storagehub.getItem(this.folderid).subscribe(
(res) => {
this.item = res;
this.onSuccess(res);
}
);
}
loadDocuments() {
//this.plt.ready().then(() => {
//call the service
// });
private onSuccess(item: Item) {
this.storagehub.getChildren(item.id, false).subscribe(
(res) => this.values = res
)
}
public getValues(): Item[] {
return this.values;
}
openFolder(item: Item) {
this.router.navigateByUrl(`tabs/ws/${item.id}`);
}
public getCurrentItem() : Item | undefined{
console.log("item is "+this.item)
return this.item;
}
}