add gallery logic

src/app/admin/admin.component.html

@@ -47,6 +47,21 @@
             <span class="label">Content</span>
             <angular-editor [placeholder]="'Enter text here...'" [config]="editorConfig" name="content" [(ngModel)]="content"></angular-editor>
           </div>
+          <div class="col-12">
+            <span class="label">Gallery</span>
+            <div class="gallery-container">
+
+              <label class="image-add" for="image-add">
+                <input type="file" id="image-add" (change)="onFileChanged($event)">
+              </label>
+
+              <div class="image-box" [ngClass]="{'main': image.main}" *ngFor="let image of selectedGallery">
+                <img class="image" [src]="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>
+              </div>
+            </div>
+          </div>
           <div class="col-6">
             <span class="label">Tags</span>
             <input type="text" class="input-text" name="tags" [(ngModel)]="tags">

src/app/admin/admin.component.scss

@@ -34,6 +34,91 @@
         padding: 20px 0 5px 0;
       }
 
+
+      .gallery-container {
+        display: flex;
+        background: $white;
+        border-radius: 4px;
+        width: 100%;
+        padding: 5px;
+
+        .image-add {
+          appearance: none;
+          display: inline-block;
+          position: relative;
+          border: 2px solid $light-gray;
+          border-radius: 4px;
+          height: 100px;
+          width: 100px;
+          margin: 5px;
+          cursor: pointer;
+
+          &:before {
+            content: '\e90a';
+            font-family: $font-icon;
+            font-size: $font-30;
+            color: $light-gray;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+          }
+
+          input {
+            visibility: hidden;
+          }
+        }
+
+        .image-box {
+          display: inline-block;
+          position: relative;
+          border: 2px solid $light-gray;
+          height: 100px;
+          width: 120px;
+          margin: 5px;
+          border-radius: 4px;
+          overflow: hidden;
+
+          .image {
+            position: absolute;
+            height: 100%;
+            width: 100%;
+            object-fit: cover;
+            z-index: 0;
+          }
+
+          .remove,
+          .set-main {
+            position: absolute;
+            top: 4px;
+            right: 4px;
+            border: 0;
+            border-radius: 2px;
+            color: $black;
+            height: 20px;
+            width: 20px;
+            background: $white-alpha;
+            padding: 0;
+            margin: 0;
+            cursor: pointer;
+            font-size: $font-12;
+            z-index: 10;
+          }
+
+          .remove {
+            color: $red;
+          }
+          .set-main {
+            color: $green;
+            right: 30px;
+          }
+
+          &.main {
+            border: 2px solid $yellow;
+          }
+        }
+      }
+
       .selected-exhibition,
       .selected-video {
         display: block;

src/app/admin/admin.component.ts

@@ -22,13 +22,14 @@ export class AdminComponent implements OnInit {
 
   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 mainImage: any = null
   public videoType: string = ''
   public videoURL: string = ''
 
@@ -40,6 +41,19 @@ export class AdminComponent implements OnInit {
   ) { }
 
   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
@@ -58,7 +72,6 @@ export class AdminComponent implements OnInit {
     })
   }
 
-
   login(): void {
     const body = { usr: this.userName, pwd: this.password }
     this.authService.login(body).toPromise().then((response) => {
@@ -102,4 +115,40 @@ export class AdminComponent implements OnInit {
   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)
+    })
+  }
 }

src/app/services/apis.service.ts

@@ -30,5 +30,20 @@ export class ApisService extends BaseService {
     )
   }
 
+  // ADMIN SERVICES
+  uploadImage(body): Observable<any> {
+    let urlApi = `${this.restApi}upload.php`
+    return this.http.post<any>(urlApi, body).pipe(
+      catchError(this.handleError)
+    )
+  }
+
+  removeImage(url): Observable<any> {
+    let urlApi = `${this.restApi}remove.php?url=${url}`
+    return this.http.get<any>(urlApi).pipe(
+      catchError(this.handleError)
+    )
+  }
+
 
 }

src/assets/scss/variables.scss

@@ -26,6 +26,8 @@ $black:       #000;
 $gray:        #999;
 $light-gray:  #eee;
 $dark-gray:   #333;
+$red:         #d00;
+$green:       #0c0;
 
 $yellow:      #a2dc02;
 

src/config/config.ts

@@ -1,18 +1,18 @@
-
+import { environment } from '../environments/environment'
 import { AngularEditorConfig } from '@kolkov/angular-editor'
 
 export const editorConfig: AngularEditorConfig = {
   editable: true,
   spellcheck: true,
-  height: '200px',
+  height: '300px',
   translate: 'no',
   enableToolbar: true,
   showToolbar: true,
   placeholder: 'Enter text here...',
-  defaultParagraphSeparator: '',
-  defaultFontName: 'Abel',
+  defaultParagraphSeparator: 'p',
+  defaultFontName: '',
   defaultFontSize: '',
-  uploadUrl: 'http://dslakng.local/apis/upload.php',
+  uploadUrl: `${environment.API_URL}upload.php`,
   uploadWithCredentials: false,
   sanitize: true,
   toolbarPosition: 'top',