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 basePath = `${environment.BASE_PATH}`

  public authCheck: boolean = false
  public userName: string = ''
  public password: string = ''
  public activeEditor: string = ''
  public sectionTitle: string = ''
  public activeModify: boolean = false
  public modifyId: number = null

  public exhibitions: any = []
  public works: 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: string = ''
  public videoType: string = ''
  public videoURL: string = ''

  public editorConfig: AngularEditorConfig = editorConfig
  public workSections: any = [
    {title: 'Entertainment', section: 'entertainment'},
    {title: 'Installations', section: 'installations'},
    {title: 'Performances', section: 'performances'},
    {title: 'Workshops', section: 'workshops'}
  ]

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

  ngOnInit(): void {

    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)
      })

      this.apisService.getPortfolio('portfolio').toPromise().then((response) => {
        this.works = 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 {
    switch(section) {
      case 'works-add':
        this.sectionTitle = 'Add work'
        break;
      case 'works-modify':
        this.sectionTitle = 'Modify work'
        break;
      case 'works-delete':
        this.sectionTitle = 'Delete work'
        break;
    }
    this.activeModify = false
    this.activeEditor = section
    this.resetFields()
  }

  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('token', window.sessionStorage.getItem('authToken'))
    uploadData.append('path', 'assets')
    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 {
    const body = {
      token: window.sessionStorage.getItem('authToken'),
      url: url
    }
    this.apisService.removeImage(body).toPromise().then((response) => {
      this.selectedGallery = this.selectedGallery.filter(item => item.url != url)
    },(error) => {
      console.error(error)
    }).catch((e) => {
      console.error(e)
    })
  }

  selectWork(id): void {

    this.activeModify = true
    this.modifyId = id
    this.apisService.getDetails('works', id).toPromise().then((response) => {
      const detail = response.item
      this.apisService.getPortfolio('exhibitions').toPromise().then((response) => {
        this.exhibitions = response.items
        this.title = detail.title
        this.content = detail.content
        this.type = detail.type
        this.tags = detail.tags
        this.selectedExhibitions = detail.exhibitions.length ?
                                    this.exhibitions.filter(item => detail.exhibitions.map(a => a.id).indexOf(item.id) > -1) : []
        this.selectedGallery = detail.gallery ? JSON.parse(detail.gallery) : []
        this.selectedVideos = detail.videos ? JSON.parse(detail.videos) : []

        console.log(detail.exhibitions, this.selectedExhibitions)
      },(error) => {
        console.error(error)
      }).catch((e) => {
        console.error(e)
      })
    },(error) => {
      console.error(error)
    }).catch((e) => {
      console.error(e)
    })
  }

  saveWork(): void {

    let error = false
    let errorMessages = []
    const mainImage = this.selectedGallery.filter(item => item.main)

    if(!this.title){
      error = true
      errorMessages.push('No title')
    }
    if(!this.type){
      error = true
      errorMessages.push('No type selected')
    }
    if(this.selectedGallery.length == 0 || mainImage.length == 0){
      error = true
      errorMessages.push('No main image selected')
    }

    if(error) {
      console.log('ERRORS:',errorMessages)
    } else {
      const body = {
        id: this.activeModify ? this.modifyId : null,
        token: window.sessionStorage.getItem('authToken'),
        title: this.title,
        content: this.content,
        type: this.type,
        tags: this.tags,
        image: mainImage[0].url,
        exhibitions: this.selectedExhibitions.map(a => a.id).join(','),
        gallery: JSON.stringify(this.selectedGallery),
        videos: JSON.stringify(this.selectedVideos)
      }

      this.apisService.saveWork(body).toPromise().then((response) => {
        this.resetFields()

        this.works = response.items
      },(error) => {
        console.error(error)
      }).catch((e) => {
        console.error(e)
      })
    }
  }

  resetFields(): void {
    this.title = ''
    this.content = ''
    this.type = ''
    this.tags = ''
    this.selectedExhibitions = []
    this.selectedGallery = []
    this.selectedVideos = []
  }
}