src/app/file/file.component.ts
selector | app-file |
styleUrls | file.component.scss |
templateUrl | file.component.html |
constructor(fileService: FileService, dataService: ApiService)
|
getFiles |
getFiles()
|
A function to obtain the directory structure and recursive tree of the root directory corresponding to the user on the server. It
Returns:
void
|
onChange |
onChange(event: any)
|
Returns:
void
|
onUpload |
onUpload()
|
Returns:
void
|
toDirectory |
toDirectory(name: string, obj: any, path: string)
|
Converts the input object
Parameters :
Returns:
Directory
|
deleteFileExec |
deleteFileExec($event: any)
|
Deletes the bar corresponding to the file on the frontend after successful deletion from the backend.
Returns:
void
|
deleteDirExec |
deleteDirExec($event: any)
|
Deletes the bar corresponding to the directory on the frontend after successful deletion from the backend.
Returns:
void
|
createFileExec |
createFileExec(file: File)
|
Creates a bar (subcomponent) to represent the newly created file, called after successful creation at the backend.
Returns:
void
|
createDirExec |
createDirExec(name: string)
|
Creates a bar (subcomponent) to represent the newly created directory, called after successful creation at the backend.
Returns:
void
|
Public countFiles |
countFiles(directory: Directory)
|
Counts the total number of files recursively in the input directory interface.
Parameters :
Returns:
number
|
creatingNew |
creatingNew: |
Default value: 0
|
deleting |
deleting: |
Default value: false
|
fileToUpload |
fileToUpload: |
loading |
loading: |
Default value: false
|
mainDir |
mainDir: |
shortLink |
shortLink: |
user |
user: |
import {Component, OnInit} from '@angular/core';
import {File} from '../file';
import {FileService} from '../file.service';
import {ApiService} from '../api.service';
import {User} from '../user';
import {Directory} from '../directory';
@Component({
selector: 'app-file',
templateUrl: './file.component.html',
styleUrls: ['./file.component.scss']
})
export class FileComponent implements OnInit {
user: User;
mainDir: Directory = {
name: '',
files: [],
dirs: [],
path: '/'
};
shortLink = '';
loading = false; // Flag variable
deleting = false; // Flag variable
fileToUpload: File = null;
creatingNew = 0;
constructor(private fileService: FileService,
private dataService: ApiService) {
}
ngOnInit(): void {
this.user = JSON.parse(this.dataService.getToken());
this.getFiles();
}
/**
* A function to obtain the directory structure and recursive tree of the root directory corresponding to the user on the server. It
* stores the obtained structure into as a Directory interface.
*/
getFiles(): void {
this.fileService.getFileList(this.user.username)
.subscribe(data => {
this.mainDir = this.toDirectory('', data, '/');
console.log(this.mainDir);
});
}
/**
* @ignore
*/
onChange(event): void {
this.fileToUpload = event.target.files[0];
console.log(this.fileToUpload);
}
/**
* @ignore
*/
onUpload(): void {
if ((document.getElementById('file-upload-input') as HTMLInputElement).value === '') {
return;
}
this.loading = true;
console.log(this.fileToUpload);
this.fileService.upload2(this.fileToUpload).subscribe(
(event: any) => {
if (typeof (event) === 'object') {
this.fileToUpload = null;
(document.getElementById('file-upload-input') as HTMLInputElement).value = '';
this.shortLink = event.link;
this.loading = false;
}
}
);
}
/**
* Converts the input object `obj` into a Directory interface.
* @param name - The name of the directory
* @param obj - The input JSON object
* @param path - The path of the parent directory
*/
toDirectory(name: string, obj: any, path: string): Directory {
const ret: Directory = {
name,
dirs: [],
files: [],
path: path === '/' ? path : path + '/'
};
for (const file of obj.files) {
const sp = file.split('.');
const f: File = {
username: this.user.username,
filename: file.replace(/\.[^/.]+$/, ''),
language: '.' + sp[sp.length - 1],
text: '',
path: path + '/' + name
};
ret.files.push(f);
}
for (const dir in obj.dirs) {
if (obj.dirs.hasOwnProperty(dir)) {
ret.dirs.push(this.toDirectory(dir, obj.dirs[dir], ret.path + name));
}
}
return ret;
}
/**
* Deletes the bar corresponding to the file on the frontend after successful deletion from the backend.
*/
deleteFileExec($event: any): void {
const index = this.mainDir.files.indexOf($event, 0);
if (index > -1) {
this.mainDir.files.splice(index, 1);
}
}
/**
* Deletes the bar corresponding to the directory on the frontend after successful deletion from the backend.
*/
deleteDirExec($event: any): void {
const index = this.mainDir.dirs.indexOf($event, 0);
if (index > -1) {
this.mainDir.dirs.splice(index, 1);
}
}
/**
* Creates a bar (subcomponent) to represent the newly created file, called after successful creation at the backend.
*/
createFileExec(file: File): void {
this.mainDir.files.push(file);
this.creatingNew = 0;
}
/**
* Creates a bar (subcomponent) to represent the newly created directory, called after successful creation at the backend.
*/
createDirExec(name: string): void {
this.mainDir.dirs.push({
name,
dirs: [],
files: [],
path: '/'
});
this.creatingNew = 0;
}
/**
* Counts the total number of files recursively in the input directory interface.
* @param directory - The input directory interface.
*/
public countFiles(directory: Directory): number {
let count = directory.files.length;
for (const dir of directory.dirs) {
count += this.countFiles(dir);
}
return count;
}
}