workspace-ionic-app/src/app/show-folder/show-folder.component.ts

import { Component, OnInit, Input, CUSTOM_ELEMENTS_SCHEMA, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core';

import { Platform, AlertController, ToastController, IonicModule, ActionSheetController, ActionSheetButton } 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 { MatIconModule } from '@angular/material/icon';
import { WSItem } from '../model/ws-item';

@Component({
  standalone: true,
  selector: 'show-folder',
  providers: [FileOpener, StoragehubService],
  templateUrl: './show-folder.component.html',
  styleUrls: ['./show-folder.component.scss'],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  imports: [
    CommonModule, IonicModule, MatIconModule
  ]
})
export class ShowFolderComponent implements OnInit {

  @Output() folderClickedEvent = new EventEmitter<Item>();

  @Input() items: Item[] = [];

  wsItems: WSItem[] = [];
 
  @Input() parentItem: WSItem | undefined;

  @Input() tabName: string = "";

  @ViewChild('filepicker') uploader!: ElementRef;

  constructor(
    private actionSheetCtrl: ActionSheetController,
    private storagehub: StoragehubService,
    private alertCtrl: AlertController
  ) { }

  ngOnInit(): void {
  }

  ngOnChanges() {
    this.items.forEach(i => this.wsItems.push(new WSItem(i, this.storagehub)) );   
  }

  loadDocuments() {
    if (this.parentItem)
      this.storagehub.getChildren(this.parentItem.item.id, false).subscribe(
        (res) => {
          this.items = res;
          this.items.forEach(i => this.wsItems.push(new WSItem(i, this.storagehub)) ); 
        }
      )
  }
  
  itemClicked(item: WSItem) {
    if (item.isFolder()) {
      this.folderClickedEvent.emit(item.item);
    }
  }

  addFile() {
    console.log("add fiel called");
    this.uploader.nativeElement.click();
  }

  async fileSelected($event: any) {
    const selected = $event.target.files[0];

    if (selected && this.parentItem) {
      const upload$ = this.storagehub.uploadFile(this.parentItem.item.id, selected.name, selected);
      upload$.subscribe(
        suc => this.loadDocuments()
      );
    }

  }

  async createFolder() {
    let alert = await this.alertCtrl.create({
      header: 'Create folder',
      message: 'Please specify the name of the new folder',
      inputs: [
        {
          name: 'name',
          type: 'text',
          placeholder: 'new folder'
        }
      ],
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel'
        },
        {
          text: 'Create',
          handler: (data) => {
            if (this.parentItem) {
              const createFolder$ = this.storagehub.createFolder(this.parentItem.item.id, data.name, "");
              createFolder$.subscribe(
                suc => this.loadDocuments()
              );
            }
          }
        }
      ]
    });
    await alert.present();
  }

  async presentActionSheet(item: WSItem) {
    
    var buttons :ActionSheetButton<any>[] = [];
    item.getActions().forEach( action => buttons.push({
      text: action.name,
      data: {
        action: action.name,
      },
      handler: () => action.execute()          
    }));
    
    buttons.push({
      text: 'Cancel',
      role: 'cancel',
      data: {
        action: 'cancel',
      },
    });

    const actionSheet = await this.actionSheetCtrl.create({
      
      header: `${item.item.title}`,
      mode: 'ios',
      translucent: true,
      buttons: buttons,
      cssClass: 'my-custom-class'
    });

    await actionSheet.present();

    const result = await actionSheet.onDidDismiss();

  }

}