Merge branch 'wysiwyg' of https://github.com/codelab-fun/codelab into feature/side-panel-selection

Author: k-belov

apps/codelab/src/app/admin/content/presentation-editor/content.component.html

@@ -1,26 +1,34 @@
 <!--<div *ngFor="let slide of slides; let i = index">-->
 <!--  <slides-full-slide [slide]="slide"></slides-full-slide>-->
 <!--</div>-->
-<div>
-  <button mat-icon-button routerLink="/admin/content">
-    <mat-icon>home</mat-icon>
-  </button>
-</div>
-<div class="wrapper" *ngIf="presentation$ | async as presentation">
-  <slides-side-panel
-    [presentationId]="presentation.id"
-    [currentSlideIndex]="currentSlideIndex$ | async"
-    [slides]="presentation.slides"
-  ></slides-side-panel>
-  <div class="editor" *ngIf="currentSlide$ | async as slide; else noSlide">
-    <slides-slide-editor
+<ng-container *ngIf="presentation$ | async as presentation">
+  <div>
+    <button mat-icon-button routerLink="/admin/content">
+      <mat-icon>home</mat-icon>
+    </button>
+    <input
+      [value]="presentation.name"
+      (keyup)="
+        updatePresentationMeta(presentation.id, 'name', $event.target.value)
+      "
+    />
+  </div>
+  <div class="wrapper">
+    <slides-side-panel
       [presentationId]="presentation.id"
-      [slide]="slide"
-    ></slides-slide-editor>
+      [currentSlideIndex]="currentSlideIndex$ | async"
+      [slides]="presentation.slides"
+    ></slides-side-panel>
+    <div class="editor" *ngIf="currentSlide$ | async as slide; else noSlide">
+      <slides-slide-editor
+        [presentationId]="presentation.id"
+        [slide]="slide"
+      ></slides-slide-editor>
+    </div>
+    <ng-template #noSlide>
+      <button mat-button (click)="addSlide(presentation.id)">
+        Create new slide
+      </button>
+    </ng-template>
   </div>
-  <ng-template #noSlide>
-    <button mat-button (click)="addSlide(presentation.id)">
-      Create new slide
-    </button>
-  </ng-template>
-</div>
+</ng-container>

apps/codelab/src/app/admin/content/presentation-editor/content.component.ts

@@ -45,4 +45,8 @@ export class ContentComponent {
   addSlide(presentationId: string) {
     this.contentService.addSlide(presentationId);
   }
+
+  updatePresentationMeta(presentationId: string, name: string, value: string) {
+    this.contentService.updatePresentationMeta(presentationId, name, value);
+  }
 }

apps/codelab/src/app/admin/content/presentation-editor/preview/slide-preview/dynamic-renderer/dynamic-renderer.component.ts

@@ -8,7 +8,7 @@ import {
 import { ContentSlide, CustomBlock, SlideViewType } from '../../../types';
 import { CodelabTitleSlideEditorComponent } from '../../../wrappers/custom-component-editors/codelab-title-slide-editor/codelab-title-slide-editor.component';
 import { CodelabCodeDemoFilePathEditorComponent } from '../../../wrappers/custom-component-editors/codelab-code-demo-file-path-editor/codelab-code-demo-file-path-editor.component';
-import { CodelabCodeDemoConsoleComponent } from '../../../wrappers/custom-component-editors/codelab-code-demo-console/codelab-code-demo-console.component';
+import { CodelabCodeDemoConsoleEditorComponent } from '../../../wrappers/custom-component-editors/codelab-code-demo-console-editor/codelab-code-demo-console-editor.component';
 import { CodeDemoEditorEditorComponent } from '../../../wrappers/custom-component-editors/codelab-code-demo-editor-editor/code-demo-editor.component';
 import { CodelabImageEditorComponent } from '../../../wrappers/custom-component-editors/codelab-image-editor/codelab-image-editor.component';
 import { BlankComponent } from '../blank/blank.component';
@@ -24,7 +24,7 @@ export class PreviewDynamicComponentResolver extends NgxdResolver<string, any> {
     super([
       { type: 'codelab-title-slide', component: TitleSlideComponent },
       {
-        type: 'codelab-code-demo-console',
+        type: 'codelab-code-demo-console-editor',
         component: CodelabCodeDemoPreviewComponent
       },
       {
@@ -65,8 +65,8 @@ export class EditDynamicComponentResolver extends NgxdResolver<string, any> {
         component: CodelabTitleSlideEditorComponent
       },
       {
-        type: 'codelab-code-demo-console',
-        component: CodelabCodeDemoConsoleComponent
+        type: 'codelab-code-demo-console-editor',
+        component: CodelabCodeDemoConsoleEditorComponent
       },
       {
         type: 'codelab-exercise-preview',
@@ -132,7 +132,7 @@ export class DynamicRendererComponent implements OnChanges {
     //   const componentMap = {
     //     preview: {
     //       'codelab-title-slide': TitleSlideComponent,
-    //       'codelab-code-demo-console': CodelabCodeDemoPreviewComponent,
+    //       'codelab-code-demo-console-editor': CodelabCodeDemoPreviewComponent,
     //       'codelab-exercise-preview': CodelabCodeDemoPreviewComponent,
     //       'codelab-exercise': CodelabCodeDemoPreviewComponent,
     //       'codelab-closing-slide': CodelabTitleSlideEditorComponent,
@@ -145,7 +145,7 @@ export class DynamicRendererComponent implements OnChanges {
     //     },
     //     edit: {
     //       'codelab-title-slide': CodelabTitleSlideEditorComponent,
-    //       'codelab-code-demo-console': CodelabCodeDemoConsoleComponent,
+    //       'codelab-code-demo-console-editor': CodelabCodeDemoConsoleEditorComponent,
     //       'codelab-exercise-preview': CodelabExerciseComponent,
     //       'codelab-exercise': CodelabExerciseComponent,
     //       'codelab-closing-slide': CodelabTitleSlideEditorComponent,

apps/codelab/src/app/admin/content/presentation-editor/preview/slide-preview/slide-preview.component.css

@@ -0,0 +1,2 @@
+.empty-slide {
+}

apps/codelab/src/app/admin/content/presentation-editor/preview/slide-preview/slide-preview.component.html

@@ -1,3 +1,6 @@
+<div *ngIf="slide.blocks.length === 0" class="empty-slide">
+  Empty slide
+</div>
 <ng-container *ngFor="let block of slide.blocks">
   <ng-container *ngIf="block.type === 'custom'">
     <slides-dynamic-renderer

apps/codelab/src/app/admin/content/presentation-editor/reducer.ts

@@ -99,11 +99,16 @@ export function reducer(
     case 'updateSlideMeta':
       getSlide()[payload.name] = payload.value;
       return presentations;
+
+    // Presentations
     case 'addPresentation':
       presentations.push(payload);
       return presentations;
     case 'deletePresentation':
       return presentations.filter(({ id }) => id !== payload.presentationId);
+    case 'updatePresentationMeta':
+      getPresentation()[payload.name] = payload.value;
+      return presentations;
   }
 
   console.assert(false);

apps/codelab/src/app/admin/content/presentation-editor/services/content.service.ts

@@ -125,6 +125,16 @@ export class ContentService implements OnDestroy {
     };
     this.dispatch(presentationId, action);
   }
+  updatePresentationMeta(presentationId: string, name: string, value: string) {
+    const action = {
+      type: 'updatePresentationMeta',
+      payload: {
+        name,
+        value
+      }
+    };
+    this.dispatch(presentationId, action);
+  }
 
   deleteSlide(presentationId: string, slideId: string) {
     const action = {

apps/codelab/src/app/admin/content/presentation-editor/slide-editor/action-bar/action-bar.component.css

@@ -2,3 +2,7 @@
   padding: 16px;
   display: block;
 }
+
+.templates {
+  margin-left: -10px;
+}

apps/codelab/src/app/admin/content/presentation-editor/slide-editor/action-bar/action-bar.component.html

@@ -12,10 +12,32 @@
   </button>
   <button
     mat-icon-button
-    (click)="addCustom('codelab-code-demo-console', defaultDemoProps)"
+    (click)="addCustom('codelab-code-demo-console-editor', templates.simpleApp)"
   >
     <mat-icon>web</mat-icon>
   </button>
+  <button class="templates" mat-icon-button [matMenuTriggerFor]="templatesMenu">
+    <mat-icon>arrow_drop_down</mat-icon>
+  </button>
+
+  <mat-menu #templatesMenu="matMenu">
+    <button
+      mat-menu-item
+      (click)="
+        addCustom('codelab-code-demo-console-editor', templates.simpleApp)
+      "
+    >
+      Simple / One File
+    </button>
+    <button
+      mat-menu-item
+      (click)="
+        addCustom('codelab-code-demo-console-editor', templates.angularApp)
+      "
+    >
+      Angular App
+    </button>
+  </mat-menu>
 
   <button mat-icon-button (click)="addCustom('codelab-image')">
     <mat-icon>image</mat-icon>

apps/codelab/src/app/admin/content/presentation-editor/slide-editor/action-bar/action-bar.component.ts

@@ -11,8 +11,18 @@ export class ActionBarComponent {
   @Output() addBlock = new EventEmitter<ContentBlock>();
   @Input() slide: ContentSlide;
   @Input() presentationId!: string;
-  defaultDemoProps = {
-    code: { 'app.ts': '// Type your code here!' }
+
+  readonly templates = {
+    simpleApp: {
+      code: { 'app.ts': '// Type your code here!' }
+    },
+    angularApp: {
+      code: {
+        'app.ts': '// Angular app!!',
+        'component.ts': '// C',
+        'module.ts': '// M'
+      }
+    }
   };
 
   constructor(private contentService: ContentService) {}