modify work

src/app/admin/admin.component.html

@@ -27,9 +27,20 @@
       </div>
     </div>
     <div class="col p-5">
-      <div class="edit-container" *ngIf="activeEditor == 'works-add'">
-        <span class="title">Add work</span>
-        <form class="form row" (submit)="saveWork()">
+      <div class="edit-container">
+        <span class="title">{{sectionTitle}}</span>
+        <form class="form row" (submit)="saveWork()" *ngIf="activeEditor == 'works-modify'">
+          <div class="col-12">
+            <span class="label">Select work</span>
+            <select class="input-select">
+              <option value=""></option>
+              <option value="{{work.title}}" *ngFor="let work of works" (click)="selectWork(work.id)">
+                {{work.title}}
+              </option>
+            </select>
+          </div>
+        </form>
+        <form class="form row" (submit)="saveWork()" *ngIf="activeEditor == 'works-add' || activeModify">
           <div class="col-8">
             <span class="label">Title</span>
             <input type="text" class="input-text" name="title" [(ngModel)]="title">
@@ -37,10 +48,7 @@
           <div class="col-4">
             <span class="label">Type</span>
             <select class="input-select" name="type" [(ngModel)]="type">
-              <option value="entertainment">Entertainment</option>
-              <option value="installation">Installation</option>
-              <option value="performances">Performances</option>
-              <option value="workshops">Workshops</option>
+              <option [value]="sec.section" *ngFor="let sec of workSections">{{sec.title}}</option>
             </select>
           </div>
           <div class="col-12">
@@ -61,8 +69,8 @@
 
               <div class="image-box" [ngClass]="{'main': image.main}" *ngFor="let image of selectedGallery">
                 <img class="image" [src]="basePath+image.url">
-                <button class="remove" (click)="galleryRemove(image.url)"><span class="icon-trash-2"></span></button>
-                <button class="set-main" (click)="gallerySetMain(image.url)" *ngIf="!image.main"><span class="icon-check"></span></button>
+                <button type="button" class="remove" (click)="galleryRemove(image.url)"><span class="icon-trash-2"></span></button>
+                <button type="button" class="set-main" (click)="gallerySetMain(image.url)" *ngIf="!image.main"><span class="icon-check"></span></button>
               </div>
             </div>
           </div>

src/app/admin/admin.component.ts

@@ -19,8 +19,12 @@ export class AdminComponent implements OnInit {
   public userName: string = ''
   public password: string = ''
   public activeEditor: string = ''
-  public exhibitions: any = []
+  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 = []
@@ -34,7 +38,13 @@ export class AdminComponent implements OnInit {
   public videoType: string = ''
   public videoURL: string = ''
 
-  editorConfig: AngularEditorConfig = editorConfig
+  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,
@@ -54,6 +64,14 @@ export class AdminComponent implements OnInit {
       }).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) => {
@@ -76,7 +94,20 @@ export class AdminComponent implements OnInit {
   }
 
   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 {
@@ -147,6 +178,36 @@ export class AdminComponent implements OnInit {
     })
   }
 
+  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
@@ -167,9 +228,10 @@ export class AdminComponent implements OnInit {
     }
 
     if(error) {
-      console.log('ERORS:',errorMessages)
+      console.log('ERRORS:',errorMessages)
     } else {
       const body = {
+        id: this.activeModify ? this.modifyId : null,
         token: window.sessionStorage.getItem('authToken'),
         title: this.title,
         content: this.content,
@@ -182,14 +244,9 @@ export class AdminComponent implements OnInit {
       }
 
       this.apisService.saveWork(body).toPromise().then((response) => {
-        console.log(response)
-        this.title = ''
-        this.content = ''
-        this.type = ''
-        this.tags = ''
-        this.selectedExhibitions = []
-        this.selectedGallery = []
-        this.selectedVideos = []
+        this.resetFields()
+
+        this.works = response.items
       },(error) => {
         console.error(error)
       }).catch((e) => {
@@ -197,4 +254,14 @@ export class AdminComponent implements OnInit {
       })
     }
   }
+
+  resetFields(): void {
+    this.title = ''
+    this.content = ''
+    this.type = ''
+    this.tags = ''
+    this.selectedExhibitions = []
+    this.selectedGallery = []
+    this.selectedVideos = []
+  }
 }