Merge pull request #16 from CashStory/add-templates

Workspace templates

src/app/components/header/header.component.html

@@ -35,4 +35,4 @@
       </nb-user>
     </nb-action>
   </nb-actions>
-</div>
+</div>

src/app/components/header/header.component.scss

@@ -87,3 +87,11 @@
     display: none;
   }
 }
+
+.theme-holder {
+  float: right;
+  background: #3a33332b;
+  padding: 11px 17px 10px 14px;
+  border-top-left-radius: 25px;
+  border-bottom-left-radius: 25px;
+}

src/app/components/header/header.component.ts

@@ -131,6 +131,11 @@ export class HeaderComponent implements OnInit {
     return false;
   }
 
+  toggleThemebar(): boolean {
+    this.sidebarService.toggle(true, 'theme-sidebar');
+    return false;
+  }
+
   openSearch() {
     this.searchService.activateSearch('rotate-layout');
   }

src/app/components/layout/index.ts

@@ -3,7 +3,11 @@ import { FullscreenLockService } from '../../services/fullscreen-lock.service';
 import { Component, OnDestroy, OnInit, HostListener } from '@angular/core';
 import { delay, withLatestFrom, takeWhile } from 'rxjs/operators';
 import { AuthService } from '../../services/auth.service';
+import { WorkspaceService } from '../../services/workspace.service';
+import { TemplateApplyComponent } from '../../workspace/template-apply/template-apply.component';
+
 import {
+  NbDialogService,
   NbMediaBreakpoint,
   NbMediaBreakpointsService,
   NbMenuItem,
@@ -36,6 +40,31 @@ import hotkeysJs from 'hotkeys-js';
       <ng-content select="nb-menu"></ng-content>
       </nb-sidebar>
 
+      <nb-sidebar class="theme-sidebar"
+                   tag="theme-sidebar"
+                   responsive
+                   state="compacted"
+                   [end]="true">
+            <div *ngIf="themeSidebar">
+            <div (click)="toggleThemebar()">
+                <h6>Templates
+                  <em class="fas fa-times" style="float:right;"></em>
+                </h6>
+                <hr/>
+            </div>
+
+            <div *ngFor="let template of templatelist">
+            <nb-card (click)="chooseTheme(template._id)">
+              <nb-card-body class="theme-card">
+                <div class="theme-preview" style="background:url('assets/templates/{{template.template_preview}}')">
+                </div>
+                <h6 class="theme-name">{{template.name}}</h6>
+              </nb-card-body>
+            </nb-card>
+            </div>
+      </div>
+      </nb-sidebar>
+
       <nb-layout-column [class]="getClass()">
         <ng-content select="router-outlet"></ng-content>
       </nb-layout-column>
@@ -45,14 +74,21 @@ import hotkeysJs from 'hotkeys-js';
       <ngx-floating-button-item (click)="unFocus()" icon="compress-alt" status="basic" label="Back to bob" color="white"></ngx-floating-button-item>
       <!--Here We can Configure N number of Floating buttons-->
     </ngx-floating-button>
+    <div class="theme-holder" (click)="toggleThemebar()" *ngIf="!themeSidebar">
+    <em class="fas fa-angle-left" style="font-size: large;"></em>
+  </div>
   `,
 })
 export class LayoutComponent implements OnDestroy, OnInit {
+  templatelist;
   currentWs: IWp;
   ngOnInit() {
     this.auth.currentWpObs.subscribe((workspaceCurrent) => {
       this.currentWs = workspaceCurrent;
     });
+    this.wss.getTemplates().subscribe((templates) => {
+      this.templatelist = templates;
+    });
     hotkeysJs('escape', (event) => {
       this.unFocus();
       event.preventDefault();
@@ -65,6 +101,7 @@ export class LayoutComponent implements OnDestroy, OnInit {
   ];
   layout: any = {};
   sidebar: any = {};
+  themeSidebar: boolean = false;
 
   private alive = true;
 
@@ -91,7 +128,9 @@ export class LayoutComponent implements OnDestroy, OnInit {
     public searchService: NgxSearchService,
     public focusService: FocusService,
     public fullscreenLockService: FullscreenLockService,
-    private auth: AuthService) {
+    private auth: AuthService,
+    private dialogService: NbDialogService,
+    private wss: WorkspaceService) {
     const isBp = this.bpService.getByName('is');
     this.menuService.onItemSelect()
       .pipe(
@@ -107,6 +146,20 @@ export class LayoutComponent implements OnDestroy, OnInit {
 
   }
 
+  chooseTheme(id) {
+    this.dialogService.open(TemplateApplyComponent, {
+      hasScroll: true,
+      context: {
+        templateId: id,
+      },
+    });
+  }
+
+  toggleThemebar() {
+    this.sidebarService.toggle(true, 'theme-sidebar');
+    this.themeSidebar = !this.themeSidebar;
+  }
+
   async unFocusAndSearch() {
     this.focusService.unFocus();
     this.auth.event({}, {}, { event: 'un_fullscreen', date: new Date(), url: window.location.href });

src/app/components/layout/layout.scss

@@ -27,3 +27,27 @@
     background-size: 80%;
   }
 }
+
+.theme-holder {
+  background: #3a33332b;
+  padding: 11px 17px 10px 14px;
+  border-top-left-radius: 25px;
+  border-bottom-left-radius: 25px;
+  position: absolute;
+  bottom: 15px;
+  right: 0;
+}
+
+.theme-card {
+  padding: 0 !important;
+}
+
+.theme-preview {
+  height: 120px;
+  background-repeat: round !important;
+}
+
+.theme-name {
+  padding-left: 10px;
+  padding-top: 5px;
+}

src/app/services/workspace.service.ts

@@ -56,4 +56,11 @@ export class WorkspaceService {
     return this.http.post<IWorkspace>(`${environment.api}/workspaces/share/${id}/link`, '');
   }
 
+  getTemplates(): Observable<any> {
+    return this.http.get<IWorkspace>(`${environment.api}/workspaces/templates`);
+  }
+
+  applyTemplate(id, wpName): Observable<any> {
+    return this.http.post<IWorkspace>(`${environment.api}/workspaces/templates/${id}`, wpName);
+  }
 }

src/app/shared/models/workspace.ts

@@ -72,6 +72,8 @@ export interface IWorkspace {
   shared_users: IShared[];
   createdAt?: string;
   updatedAt?: string;
+  is_template: boolean;
+  template_preview: string;
 }
 
 export { IWp, IBox, ISection };

src/app/workspace/section/section.component.html

@@ -131,4 +131,4 @@
       </div>
     </nb-card-footer>
   </nb-card>
-</ng-template>
+</ng-template>

src/app/workspace/section/section.component.ts

@@ -17,7 +17,7 @@ import { Router } from '@angular/router';
 import { AuthService } from '../../services/auth.service';
 import { IBox, ISection, IWp } from '../../shared/models/workspace';
 import { IFavorite } from '../../shared/models/favorite';
-import { NbToastrService, NbDialogService, NbDialogRef } from '@nebular/theme';
+import { NbToastrService, NbDialogService, NbDialogRef, NbSidebarService } from '@nebular/theme';
 import { FormGroup, Validators, FormBuilder } from '@angular/forms';
 import { IUser } from '../../shared/models/user';
 import { environment } from '../../../environments/environment';
@@ -52,6 +52,7 @@ export class SectionComponent implements OnInit, OnDestroy {
   public sourceIndex: number;
   public activeContainer;
   lockStatus: boolean = true;
+  themeBarStatus: boolean = false;
   currentWpObs: any;
   currentWp: IWp;
   section: ISection;
@@ -98,6 +99,7 @@ export class SectionComponent implements OnInit, OnDestroy {
     private dialogService: NbDialogService,
     private formBuilder: FormBuilder,
     private viewportRuler: ViewportRuler,
+    private sidebarService: NbSidebarService,
   ) {
     this.target = null;
     this.source = null;

src/app/workspace/template-apply/template-apply.component.html

@@ -0,0 +1,9 @@
+<nb-card>
+    <nb-card-body>
+        <h6> Are you sure to create workspace?</h6><br/>
+        <input type="text" nbInput fullWidth status="basic" placeholder="Default" 
+        [(ngModel)]="wpName"><br/><br/>
+        <p class="error" *ngIf="nameError">Workspace name is required!</p>
+        <button nbButton status="success" (click)="applyTheme()">Proceed</button>
+    </nb-card-body>
+  </nb-card>

src/app/workspace/template-apply/template-apply.component.scss

@@ -0,0 +1,3 @@
+.error {
+  color: red;
+}

src/app/workspace/template-apply/template-apply.component.ts

@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+import { NbToastrService } from '@nebular/theme';
+import { WorkspaceService } from 'app/services/workspace.service';
+
+@Component({
+  selector: 'ngx-template-apply',
+  templateUrl: './template-apply.component.html',
+  styleUrls: ['./template-apply.component.scss'],
+})
+export class TemplateApplyComponent implements OnInit {
+  wpName: string;
+  nameError: boolean = false;
+  templateId: string;
+  constructor(
+    private wss: WorkspaceService,
+    private toastrService: NbToastrService,
+  ) { }
+
+  ngOnInit(): void {
+
+  }
+
+  applyTheme() {
+    if (!this.wpName) {
+      this.nameError = true;
+      return false;
+    }
+    const postData = {
+      wpName : this.wpName,
+    };
+    this.wss.applyTemplate(this.templateId, postData).subscribe((resp) => {
+      this.toastrService.show('', 'Workspace Created!');
+      location.href = `/${resp[0]._id}`;
+    });
+  }
+
+}