dslak_website/src/app/admin/admin.component.ts

import { Component, OnInit } from '@angular/core'
import { ApisService } from '../services/apis.service'
import { AuthService } from '../services/auth.service'
import { AngularEditorConfig } from '@kolkov/angular-editor'
import { environment } from '../../environments/environment'
import { editorConfig } from '../../config/config'

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

  private restApi = `${environment.API_URL}`

  public authCheck: boolean = false
  public userName: string = ''
  public password: string = ''
  public activeEditor: string = ''
  public exhibitions: any = []

  public selectedExhibitions: any = []
  public selectedVideos: any = []
  public selectedGallery: any = []

  // ngModels
  public title: string = ''
  public type: string = ''
  public content: string = ''
  public tags: string = ''
  public mainImage: any = null
  public videoType: string = ''
  public videoURL: string = ''

  editorConfig: AngularEditorConfig = editorConfig

  constructor(
    private authService: AuthService,
    private apisService: ApisService
  ) { }

  ngOnInit(): void {

    this.selectedGallery = [
      {
        main: true,
        title: '',
        url: 'http://unsplash.it/800/600'
      },
      {
        title: '',
        url: 'http://unsplash.it/800/700'
      }
    ]

    const body = { token: window.sessionStorage.getItem('authToken') }
    this.authService.authCheck(body).toPromise().then((response) => {
      this.authCheck = response.status == 200

      this.apisService.getPortfolio('exhibitions').toPromise().then((response) => {
        this.exhibitions = response.items
      },(error) => {
        console.error('getPortfolio ERROR', error)
      }).catch((e) => {
        console.error('getPortfolio CATCH', e)
      })
    },(error) => {
      console.error('Auth ERROR', error)
    }).catch((e) => {
      console.error('Auth CATCH', e)
    })
  }

  login(): void {
    const body = { usr: this.userName, pwd: this.password }
    this.authService.login(body).toPromise().then((response) => {
      this.authCheck = response.status == 200
      if(this.authCheck) {
        window.sessionStorage.setItem('authToken', response.authToken)
      }
    },(error) => {
      console.error('Auth ERROR', error)
    }).catch((e) => {
      console.error('Auth CATCH', e)
    })
  }

  showEditor(section): void {
    this.activeEditor = section
  }

  exhibitionAdd(id): void {
    this.selectedExhibitions.push(
      this.exhibitions.filter(item => item.id == id)[0]
    )
    this.exhibitions = this.exhibitions.filter(item => item.id != id)
  }

  exhibitionRemove(id): void {
    this.exhibitions.push(
      this.selectedExhibitions.filter(item => item.id == id)[0]
    )
    this.selectedExhibitions = this.selectedExhibitions.filter(item => item.id != id)
  }

  videoAdd(): void {
    this.selectedVideos.push({
      type: this.videoType,
      url: this.videoURL
    })
    this.videoURL = ''
  }

  videoRemove(url): void {
    this.selectedVideos = this.selectedVideos.filter(item => item.url != url)
  }

  onFileChanged(e) {
    const file = (<HTMLInputElement>e.target).files[0]
    const uploadData = new FormData()
    uploadData.append('file', file, file.name)
    this.apisService.uploadImage(uploadData).toPromise().then((response) => {
      this.selectedGallery.push({
        title: response.title || '',
        url: response.imageUrl
      })
    },(error) => {
      console.error(error)
    }).catch((e) => {
      console.error(e)
    })
  }

  gallerySetMain(url): void {
    this.selectedGallery.forEach((e) => {
      if(e.url == url) {
        e.main = true
      } else {
        delete e.main
      }
    })
  }

  galleryRemove(url): void {
    this.apisService.removeImage(url).toPromise().then((response) => {
      this.selectedGallery = this.selectedGallery.filter(item => item.url != url)
    },(error) => {
      console.error(error)
    }).catch((e) => {
      console.error(e)
    })
  }
}