Untitled

import {
  ChangeDetectorRef,
  Component,
  EventEmitter,
  Input,
  Output,
} from '@angular/core';
import {
  IResource,
  ResourceWithUploadProgress,
} from '../../models/resource.models';
import {
  LanguageWrapperService,
  LoaderService,
  NotificationService,
} from '@eino/core';
import { ResourceDrawerService } from '../../services/resource-drawer.service';
import { TranslateModule } from '@ngx-translate/core';
import { ResourcePreviewCarouselComponent } from '../resource-preview-carousel/resource-preview-carousel.component';
import { ResourcePreviewCarouselListComponent } from '../resource-preview-carousel-list/resource-preview-carousel-list.component';
import { ButtonModule } from 'primeng/button';
import { ResourceService } from '../../services/resource.service';
import { ConfirmationService } from 'primeng/api';
import { NONAME } from 'dns';
import { ResourceStateService } from '../../services/resource-state.service';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
import { DatePipe } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ListboxModule } from 'primeng/listbox';
import { InputTextModule } from 'primeng/inputtext';
import { InputTextareaModule } from 'primeng/inputtextarea';
import { CardModule } from 'primeng/card';
import { ScrollerModule } from 'primeng/scroller';
import { TabMenuModule } from 'primeng/tabmenu';
import { TabPanel, TabViewModule } from 'primeng/tabview';
import { ActivatedRoute, Router } from '@angular/router';

type LayoutType = 'gallery' | 'list';
@Component({
  selector: 'eino-resource-preview-gallery',
  standalone: true,
  imports: [
    TranslateModule,
    ButtonModule,
    ResourcePreviewCarouselComponent,
    ResourcePreviewCarouselListComponent,
    CKEditorModule,
    DatePipe,
    FormsModule,
    ReactiveFormsModule,
    ListboxModule,
    InputTextModule,
    InputTextareaModule,
    CardModule,
    ScrollerModule,
    DatePipe,
    TabMenuModule,
    TabViewModule,
  ],
  templateUrl: './resource-preview-gallery.component.html',
  styleUrls: ['./resource-preview-gallery.component.scss'],
})
export class ResourcePreviewGalleryComponent {
  isShuffling = false;
  currentTitle?: string;
  reorderedResources: ResourceWithUploadProgress[] = [];
  queueFiles: unknown[] = [];

  @Input({ required: true }) resources: ResourceWithUploadProgress[] = [];
  @Input() edit = false;
  @Input() shuffle = false;
  @Input() addExtension = true;
  @Input() isQMInfo = false;
  @Input() layout: LayoutType = 'gallery';
  @Input() resourceInfoId?: string;
  @Input() showDownloader = true;
  @Input() showShareResourceDownloader = false;

  @Output() infoEdited = new EventEmitter();
  @Output() infoDeleted = new EventEmitter<string>();
  resourceType!: string;
  Editor = ClassicEditor;
  editorConfig = {
    toolbar: [
      'bold',
      'italic',
      '|',
      'bulletedList',
      'numberedList',
      '|',
      'link',
      '|',
      'blockQuote',
      'insertTable',
      '|',
      'undo',
      'redo',
    ],
  };
  notes: any[] = [];
  editorData = '';
  selectedNoteIndex = 0;
  resourceDrawerMode = this.resourceDrawerService.resourceDrawerMode;
  resourceSharePage = false;

  constructor(
    private cd: ChangeDetectorRef,
    private loaderService: LoaderService,
    private notificationService: NotificationService,
    private languageService: LanguageWrapperService,
    private resourceService: ResourceService,
    private resourceDrawerService: ResourceDrawerService,
    private confirmationService: ConfirmationService,
    private resourceStateService: ResourceStateService,
    private router: Router,
    private activatedRoute: ActivatedRoute
  ) {}

  ngOnInit() {
    this.saveNotes(this.resources);
    console.log('resource save', this.resources);
    this.resourceStateService.accessAllowedSupportValue$.subscribe((value) => {
      this.resourceType = value;
    });
    if (this.notes.length > 0) {
      this.selectedNoteIndex = 0;
      this.editorData = this.notes[0].content;
    }
    const currentUrl = this.router.url;
    if (currentUrl.includes('data-public')) {
      this.resourceSharePage = true;
    } else {
      this.resourceSharePage = false;
    }
  }

  selectTitle(index: number) {
    this.selectedNoteIndex = index;
    this.editorData = this.notes[index].content;
  }

  saveNotes(resources: any[]) {
    this.notes = resources
      .filter((resource) => resource.content_type === 'text')
      .map((resource) => {
        return {
          title: resource.title,
          content: resource.text,
          created_at: resource.created_at,
        };
      });
  }

  public setLayout(layout: LayoutType) {
    this.layout = layout;
  }

  public setShuffle(isShuffling: boolean) {
    this.isShuffling = isShuffling;
  }

  public saveShuffle() {
    if (!this.reorderedResources.length) return;

    this.resourceService.reorderResources(this.reorderedResources).subscribe({
      next: (res) => {
        this.resourceDrawerService.updateResources(res.data);
        this.notificationService.showNotification(
          'success',
          this.languageService.getInstantTranslation(
            'resource_upload.reorder_success'
          )
        );
        this.isShuffling = false;
      },
      error: () => {
        this.notificationService.showNotification(
          'error',
          this.languageService.getInstantTranslation(
            'resource_upload.network_error'
          )
        );
      },
    });
  }

  public handleCurrentTitle(title: string) {
    this.currentTitle = title;
    // this.cd.detectChanges(); // Without this we will get (NG0100: Expression has changed after it was checked)
  }

  public handleReorder(resources: ResourceWithUploadProgress[]) {
    this.reorderedResources = resources;
  }

  public removeResource(resource: ResourceWithUploadProgress) {
    this.confirmationService.confirm({
      header: ' ',
      message: this.languageService.getInstantTranslation(
        'draft.delete_modal.title'
      ),
      acceptLabel: this.languageService.getInstantTranslation(
        'audio_recording.yes_button_text'
      ),
      rejectLabel:
        this.languageService.getInstantTranslation('modal_text.cancel'),
      acceptButtonStyleClass: 'p-button-danger p-button-sm',
      rejectButtonStyleClass:
        'p-button-secondary p-button-outlined p-button-sm',
      acceptIcon: 'none',
      rejectIcon: 'none',
      closeOnEscape: false,
      accept: () => {
        if (this.isQMInfo) {
          this.infoDeleted.emit(resource.id);
        } else {
          this.resourceService
            .deleteResource(resource.id!, resource.department?.id)
            .subscribe({
              next: () => {
                this.resourceDrawerService.removeResource(resource.id!);
                this.notificationService.showNotification(
                  'success',
                  this.languageService.getInstantTranslation(
                    'resource_upload.deleted_succssfully'
                  )
                );
              },
              error: () => {
                this.loaderService.stopLoader();
                this.notificationService.showNotification(
                  'error',
                  this.languageService.getInstantTranslation(
                    'resource_upload.network_error'
                  )
                );
              },
            });
        }
      },
    });
  }

  public renameResource(obj: {
    resourceId: string;
    title: string;
    departmentId: any;
  }) {
    if (this.infoEdited.observers.length) {
      this.infoEdited.emit(obj);
    } else {
      this.resourceService
        .renameResource(obj.resourceId, obj.title, obj.departmentId)
        .subscribe(() => {
          const resource = this.resources.find(
            (resource) => resource.id === obj.resourceId
          )!;

          this.resourceDrawerService.upsertResource({
            ...resource,
            title: obj.title,
          });
        });
    }
  }

  public isInProgressResources() {
    return this.resources.some((res) => res.uploadProgress);
  }
  get filteredResources() {
    return this.resources.filter(
      (resource) => resource.content_type !== 'text'
    );
  }
}