wip add form

src/app/admin/admin.component.html

@@ -18,11 +18,60 @@
   </div>
 
   <div class="row no-gutters" *ngIf="authCheck">
-    <div class="col-12 col-md-3 col-lg-2 menu" >
-      <span class="section-title">Works</span>
-      <button class="action">Add</button>
-      <button class="action">Add</button>
-      <button class="action">Add</button>
+    <div class="col-12 col-md-3 col-lg-2">
+      <div class="menu">
+        <span class="section-title">Works</span>
+        <button class="action" (click)="showEditor('works-add')">Add</button>
+        <button class="action" (click)="showEditor('works-modify')">Modify</button>
+        <button class="action" (click)="showEditor('works-delete')">Delete</button>
+      </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">
+          <div class="col-6">
+            <span class="label">Title</span>
+            <input type="text" class="input-text" name="title">
+          </div>
+          <div class="col-6">
+            <span class="label">Type</span>
+            <select class="input-select" name="type">
+              <option value="entertainment">Entertainment</option>
+              <option value="installation">Installation</option>
+              <option value="performances">Performances</option>
+              <option value="workshops">Workshops</option>
+            </select>
+          </div>
+          <div class="col-12">
+            <span class="label">Content</span>
+            <textarea type="text" class="input-textarea" name="content"></textarea>
+          </div>
+          <div class="col-6">
+            <span class="label">Tags</span>
+            <input type="text" class="input-text" name="tags">
+          </div>
+          <div class="col-6">
+            <span class="label">Main image</span>
+            <input type="file" class="input-file" name="mainImage">
+          </div>
+          <div class="col-6">
+            <span class="label">Exhibitions</span>
+            <select class="input-select" name="exhibitions">
+              <option value="" [selected]="aaa"></option>
+              <option value="{{exhibition.title}}" *ngFor="let exhibition of exhibitions" (click)="exhibitionAdd($event,exhibition.id)">
+                {{exhibition.date_from | date}} | {{exhibition.title}}
+              </option>
+            </select>
+          </div>
+          <div class="col-6">
+            <span class="label">Selected exhibitions</span>
+            <span class="selected-exhibition" *ngFor="let se of selectedExhibitions" (click)="exhibitionRemove(se.id)">
+              {{se.title}}
+            </span>
+          </div>
+        </form>
+      </div>
     </div>
   </div>
 </div>

src/app/admin/admin.component.scss

@@ -12,6 +12,36 @@
     }
   }
 
+  .edit-container {
+    .title {
+      display: block;
+      font-size: $font-30;
+      font-weight: bolder;
+      text-transform: uppercase;
+      padding: 20px 0;
+    }
+    .form {
+      .label {
+        display: block;
+        font-size: $font-20;
+        text-transform: uppercase;
+        padding: 20px 0 5px 0;
+      }
+
+      .selected-exhibition {
+        display: block;
+        font-size: $font-16;
+        font-weight: bolder;
+        border-radius: 4px;
+        border: 2px solid $white;
+        background: $white-alpha;
+        cursor: pointer;
+        padding: 8px 20px;
+        margin-bottom: 5px;
+      }
+    }
+  }
+
   .menu {
     background: $dark-gray;
 
@@ -46,9 +76,17 @@
 @media (min-width: map-get($grid-breakpoints, 'md')) {
   .component-admin {
     .menu {
+      position: fixed;
       height: 100vh;
-      background: $dark-gray;
+      width: 25%;
     }
   }
+}
 
+@media (min-width: map-get($grid-breakpoints, 'lg')) {
+  .component-admin {
+    .menu {
+      width: 16.66%;
+    }
+  }
 }

src/app/admin/admin.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core'
+import { ApisService } from '../services/apis.service'
 import { AuthService } from '../services/auth.service'
 
 @Component({
@@ -11,17 +12,28 @@ export class AdminComponent implements OnInit {
   public authCheck: boolean = false
   public userName: string = ''
   public password: string = ''
+  public activeEditor: string = ''
+  public exhibitions: any = []
 
-  constructor(private authService: AuthService) { }
+  public selectedExhibitions: any = []
 
-  ngOnInit(): void {
-
-    const body = {
-      token: window.sessionStorage.getItem('authToken')
-    }
+  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)
+      })
     },(error) => {
       console.error('Auth ERROR', error)
     }).catch((e) => {
@@ -31,11 +43,7 @@ export class AdminComponent implements OnInit {
 
 
   login(): void {
-
-    const body = {
-      usr: this.userName,
-      pwd: this.password
-    }
+    const body = { usr: this.userName, pwd: this.password }
     this.authService.login(body).toPromise().then((response) => {
       this.authCheck = response.status == 200
       if(this.authCheck) {
@@ -46,6 +54,20 @@ export class AdminComponent implements OnInit {
     }).catch((e) => {
       console.error('Auth CATCH', e)
     })
+  }
+
+  showEditor(section): void {
+    this.activeEditor = section
+  }
+
+  exhibitionAdd(e, id): void {
+    //e.originalTarget.value = ''
+    this.selectedExhibitions.push(
+      this.exhibitions.filter(item => item.id == id)[0]
+    )
+  }
 
+  exhibitionRemove(id): void {
+    this.selectedExhibitions = this.selectedExhibitions.filter(item => item.id != id)
   }
 }

src/assets/scss/forms.scss

@@ -1,6 +1,7 @@
 
 
 input,
+select,
 button,
 textarea {
   border: none;
@@ -18,8 +19,10 @@ textarea {
 }
 
 input[type=text],
-input[type=password]{
-  color: $gray;
+input[type=password],
+input[type=file],
+select {
+  color: $black;
   padding: 10px 20px;
   width: 100%;
   text-align: left;
@@ -30,7 +33,11 @@ input[type=password]{
 }
 
 .input-text {
-  padding: 10px 20px;
+  padding: 10px 20px !important;
+}
+
+.input-file {
+  padding: 6px 20px !important;
 }
 
 .input-textarea {
@@ -38,6 +45,10 @@ input[type=password]{
   width: 100%;
 }
 
+.input-select {
+  padding: 9px 20px !important;
+}
+
 .button {
   position: relative;
   appearance: none;
@@ -45,7 +56,7 @@ input[type=password]{
   border: none;
   background: $black;
   display: inline-block;
-  padding: 8px 20px 10px 20px;
+  padding: 8px 20px 10px 20px !important;
   text-align: center;
   font-family: $font-20;
   text-transform: uppercase;