### File

`src/app/file-dir-card/file-dir-card.component.ts`

### Metadata

selector | `app-file-dir-card`
styleUrls | `file-dir-card.component.scss`
templateUrl | `file-dir-card.component.html`

### Inputs

`directory` | Type: `Directory`

`file` | Type: `File`

`isFile` | Type: `boolean`

`isNew` | Type: `boolean`

`level` | Type: `number`

`noEdits` | Default value: `false`

`parentDirs` | Type: `Directory[]`

`parentFiles` | Type: `File[]`

`parentPath` | Type: `string`

`trace` | Type: `number[]`

### Outputs

`cancelled` | `$event` type: `EventEmitter<boolean>`

`createDir` | `$event` type: `EventEmitter<any>`

`createFile` | `$event` type: `EventEmitter<File>`

`deleteDir` | `$event` type: `EventEmitter<any>`

`deleteFile` | `$event` type: `EventEmitter<any>`

### Constructor

`constructor(fileService: FileService, apiService: ApiService)`

### Methods

onDelete
`onDelete()`
Called on delete request by the user, requests the server to delete the corresonding file or directory as stored by the component. Returns: `void`

addToTraceDir
`addToTraceDir(dir: Directory)`
Returns: `number[]`

addToTraceFile
`addToTraceFile(file: File)`
Returns: `number[]`

deleteFileExec
`deleteFileExec($event: any)`
Called when a contained file is successfully deleted by the backend to remove the corresponding subcomponent from the directory tree on the frontend. Returns: `void`

deleteDirExec
`deleteDirExec($event: any)`
Called when a subdirectory is successfully deleted by the backend to remove the corresponding subcomponent from the directory tree on the frontend. Returns: `void`

onCreateDir
`onCreateDir()`
Requests the server to create a new directory as requested by the user and hence notifies the user. Returns: `void`

getRouterLink
`getRouterLink()`
Returns the encoded path to the file to serve the purpose of redirecting to the IDE component. Returns: `string`

onCreateFile
`onCreateFile()`
Requests the server to create a new empty file and on it being successful, emits a notification to the parent workspace component. Returns: `void`

createFileExec
`createFileExec(file: File)`

Update the directory tree at the client side UI and adds the corresponding new bar to the new file.

Parameters :

- file
  - Input File interface.

Returns: `void`

createDirExec
`createDirExec(name: string)`

Update the directory tree at the client side UI and adds the corresponding new bar to the new directory.

Parameters :

- name
  - Input directory name.

Returns: `void`

Private countFiles
`countFiles(directory: Directory)`

Counts the total number of files recursively in a directory.

Parameters :

- directory
  - Input directory as a Directory interface instance.

Returns: `number`

present
`present(newName: string)`

Checks whether a file or folder with the same name already exists inside the same parent directory.

Parameters :

- newName
  - The name to be checked for.

Returns: `boolean`

### Properties

creating
`creating: `boolean` </bcode>`
Default value: `false`

creatingNewSub
`creatingNewSub: `number` </bcode>`
Default value: `0`

deleting
`deleting: `boolean` </bcode>`

dirnames
`dirnames: `any[]` </bcode>`

extensions
`extensions: `string[]` </bcode>`

filenames
`filenames: `any[]` </bcode>`

isErrorCreating
`isErrorCreating: `boolean` </bcode>`
Default value: `false`

isErrorDeleting
`isErrorDeleting: `boolean` </bcode>`
Default value: `false`

isExpanded
`isExpanded: `boolean` </bcode>`
Default value: `false`

lang
`lang: `number` </bcode>`
Default value: `0`

newName
`newName: `string` </bcode>`

    import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
    import {File} from '../file';
    import {Directory} from '../directory';
    import {FileService} from '../file.service';
    import {ApiService} from '../api.service';

    @Component({
      selector: 'app-file-dir-card',
      templateUrl: './file-dir-card.component.html',
      styleUrls: ['./file-dir-card.component.scss']
    })
    export class FileDirCardComponent implements OnInit {

      @Input() isFile: boolean;
      @Input() level: number;
      @Input() file: File;
      @Input() directory: Directory;
      @Input() trace: number[];
      @Input() isNew: boolean;
      @Input() parentPath: string;
      @Input() noEdits = false;
      @Input() parentDirs: Directory[];
      @Input() parentFiles: File[];

      deleting: boolean;
      isExpanded = false;
      newName = '';
      isErrorDeleting = false;
      isErrorCreating = false;
      creating = false;
      creatingNewSub = 0;
      extensions = ['.cpp', '.py', '.java'];
      lang = 0;
      filenames = [];
      dirnames = [];

      @Output() deleteFile: EventEmitter<any> = new EventEmitter();
      @Output() deleteDir: EventEmitter<any> = new EventEmitter();
      @Output() createDir: EventEmitter<any> = new EventEmitter();
      @Output() createFile: EventEmitter<File> = new EventEmitter();
      @Output() cancelled: EventEmitter<boolean> = new EventEmitter();

      constructor(private fileService: FileService, private apiService: ApiService) {
      }

      ngOnInit(): void {
        if (!this.isFile && !this.isNew) {
          this.filenames = this.directory.files.map(item => item.filename);
          this.dirnames = this.directory.dirs.map(item => item.name);
        }
      }

      /**
       * Called on delete request by the user, requests the server to delete the corresonding file or directory as stored by the component.
       */
      onDelete(): void {
        this.deleting = true;
        this.fileService.delete(this.isFile ? this.file : this.directory, this.isFile,
          JSON.parse(this.apiService.getToken()).username, this.isFile ? 0 : this.countFiles(this.directory)).subscribe(
          data => {
            console.log(data);
            if (this.isFile) {
              this.deleteFile.emit(this.file);
            } else {
              this.deleteDir.emit(this.directory);
            }
            this.deleting = false;
          }, error => {
            console.log(error);
          }
        );
      }

      /**
       * @ignore
       */
      addToTraceDir(dir: Directory): number[] {
        const arr = JSON.parse(JSON.stringify(this.trace));
        arr.push(this.directory.dirs.indexOf(dir));
        return arr;
      }

      /**
       * @ignore
       */
      addToTraceFile(file: File): number[] {
        const arr = JSON.parse(JSON.stringify(this.trace));
        arr.push(this.directory.files.indexOf(file));
        return arr;
      }

      /**
       * Called when a contained file is successfully deleted by the backend to remove the corresponding subcomponent from the
       * directory tree on the frontend.
       */
      deleteFileExec($event: any): void {
        const index = this.directory.files.indexOf($event, 0);
        if (index > -1) {
          this.directory.files.splice(index, 1);
        }
      }

      /**
       * Called when a subdirectory is successfully deleted by the backend to remove the corresponding subcomponent from the
       * directory tree on the frontend.
       */
      deleteDirExec($event: any): void {
        const index = this.directory.dirs.indexOf($event, 0);
        if (index > -1) {
          this.directory.dirs.splice(index, 1);
        }
      }

      /**
       * Requests the server to create a new directory as requested by the user and hence notifies the user.
       */
      onCreateDir(): void {
        this.creating = true;
        this.fileService.createDirectory(JSON.parse(this.apiService.getToken()).username, this.newName, this.parentPath)
          .subscribe(data => {
            if (data === '0') {
              this.creating = false;
              this.isErrorCreating = true;
            } else {
              this.createDir.emit(this.newName);
            }
          });
      }

      /**
       * Returns the encoded path to the file to serve the purpose of redirecting to the IDE component.
       */
      getRouterLink(): string {
        return '/arena/file/' + encodeURIComponent(this.file.path + '/' + this.file.filename + this.file.language);
      }

      /**
       * Requests the server to create a new empty file and on it being successful, emits a notification to the parent workspace component.
       */
      onCreateFile(): void {
        this.creating = true;
        const file: File = {
          username: JSON.parse(this.apiService.getToken()).username,
          filename: this.newName,
          language: this.extensions[this.lang],
          text: '',
          path: this.parentPath
        };
        this.fileService.upload(file, false).subscribe(data => {
          if (data === '1') {
            console.log(data);
            this.createFile.emit(file);
          } else {
            console.log(data);
            this.creating = false;
            this.isErrorCreating = true;
          }
        });
      }

      /**
       * Update the directory tree at the client side UI and adds the corresponding new bar to the new file.
       * @param file - Input File interface.
       */
      createFileExec(file: File): void {
        this.directory.files.push(file);
        this.creatingNewSub = 0;
      }

      /**
       * Update the directory tree at the client side UI and adds the corresponding new bar to the new directory.
       * @param name - Input directory name.
       */
      createDirExec(name: string): void {
        this.directory.dirs.push({
          name,
          dirs: [],
          files: [],
          path: this.directory.path + this.directory.name + '/',
        });
        this.creatingNewSub = 0;
      }

      /**
       * Counts the total number of files recursively in a directory.
       * @param directory - Input directory as a Directory interface instance.
       * @private
       */
      private countFiles(directory: Directory): number {
        let count = directory.files.length;
        for (const dir of directory.dirs) {
          count += this.countFiles(dir);
        }
        return count;
      }

      /**
       * Checks whether a file or folder with the same name already exists inside the same parent directory.
       * @param newName - The name to be checked for.
       */
      present(newName: string): boolean {
        if (this.isFile) {
          return this.parentFiles.map(item => item.filename + item.language).includes(newName + this.extensions[this.lang]);
        } else {
          return this.parentDirs.map(item => item.name).includes(newName);
        }
      }
    }

# results matching ""

# No results matching ""