Template Essentials

db.json

@@ -1 +1,50 @@
-{}
+{
+  "donuts": [
+    {
+      "id": "xy12yr",
+      "name": "Just Chocolate",
+      "icon": "just-chocolate",
+      "price": 120,
+      "promo": "new",
+      "description": "For the pure chocoholic."
+    },
+    {
+      "id": "zy19yr",
+      "name": "Glazed Fudge",
+      "icon": "glazed-fudge",
+      "price": 129,
+      "promo": "new",
+      "description": "Sticky perfection."
+    },
+    {
+      "id": "qy19ya",
+      "name": "Caramel Swirl",
+      "icon": "caramel-swirl",
+      "price": 129,
+      "promo": "new",
+      "description": "Chocolate drizzled with caramel"
+    },
+    {
+      "id": "2dfe5",
+      "name": "Sour Supreme",
+      "icon": "sour-supreme",
+      "price": 139,
+      "description": "For the sour advocate."
+    },
+    {
+      "id": "a6rfg",
+      "name": "Zesty Lemon",
+      "icon": "zesty-lemon",
+      "price": 129,
+      "description": "Delicious luscious lemon."
+    },
+    {
+      "name": "teestfff",
+      "icon": "glazed-fudge",
+      "price": 3,
+      "promo": "limited",
+      "description": "qdsqsdf",
+      "id": "RF-n7_z"
+    }
+  ]
+}

src/app/admin/admin.module.ts

@@ -0,0 +1,37 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from "@angular/forms";
+import {RouterModule, Routes} from "@angular/router";
+
+// containers
+import {DonutListComponent} from './containers/donut-list/donut-list.component';
+import {DonutSingleComponent} from './containers/donut-single/donut-single.component';
+
+// components
+import {DonutCardComponent} from './components/donut-card/donut-card.component';
+import {DonutFormComponent} from './components/donut-form/donut-form.component';
+
+export const routes: Routes = [
+  {path: 'donuts', component: DonutListComponent},
+  {path: 'donuts/new', component: DonutSingleComponent, data: {isEdit: false}},
+  {path: 'donuts/:id', component: DonutSingleComponent, data: {isEdit: true}},
+  // redirects http://localhost:4200/admin to http://localhost:4200/admin/donuts
+  // put always at the end
+  {path: '', pathMatch: 'full', redirectTo: 'donuts'},
+];
+
+@NgModule({
+  declarations: [
+    DonutListComponent,
+    DonutSingleComponent,
+    DonutCardComponent,
+    DonutFormComponent,
+  ],
+  imports: [
+    CommonModule, FormsModule, RouterModule.forChild(routes)
+  ]
+})
+export class AdminModule {
+}
+
+

src/app/admin/components/donut-card/donut-card.component.ts

@@ -0,0 +1,78 @@
+import {Component, Input, ViewEncapsulation} from '@angular/core';
+import {Donut} from "../../models/donut.model";
+
+@Component({
+  selector: 'donut-card',
+  encapsulation: ViewEncapsulation.Emulated, // Is de default dat wil zeggen dat nu de css van styles.scss genomen wordt
+  template: `
+      <a
+              class="donut-card"
+              [routerLink]="donut.id"
+              [ngClass]="{
+                'donut-card-promo': donut.promo
+            }"
+      >
+      <img
+        src="/assets/img/{{ donut.icon }}.svg"
+        [alt]="donut.name"
+        class="donut-card-icon"
+      />
+      <div>
+        <p class="donut-card-name">
+          {{ donut.name }}
+            <ng-container [ngSwitch]="donut.promo">
+                <span class="donut-card-label">
+                    <ng-template [ngSwitchCase]="'new'"> NEW </ng-template>
+                    <ng-template [ngSwitchCase]="'limited'"> LIMITED </ng-template>
+                    <ng-template ngSwitchDefault> Nothing special... </ng-template>
+                </span>
+            </ng-container>
+        </p>
+        <p class="donut-card-price">
+          {{ donut.price / 100 | currency }}
+        </p>
+      </div>
+    </a>
+  `,
+  styles: [
+    `
+      .donut-card {
+        display: flex;
+        align-items: center;
+        background: #f7f7f7;
+        border-radius: 5px;
+        margin-bottom: 5px;
+        padding: 5px 15px;
+        transition: transform 0.2s ease-in-out;
+        &:hover {
+          transform: translateY(-3px);
+        }
+        &-name {
+          font-size: 16px;
+        }
+        &-label {
+          border: 1px solid #c14583;
+          border-radius: 4px;
+          padding: 0 4px;
+          margin-left: 5px;
+          font-size: 12px;
+          color: #c14583;
+        }
+        &-price {
+          font-size: 14px;
+          color: #c14583;
+        }
+        &-promo {
+          border: 2px solid #eee;
+        }
+        &-icon {
+          width: 50px;
+          margin-right: 10px;
+        }
+      }
+    `,
+  ]
+})
+export class DonutCardComponent {
+  @Input() donut!: Donut;
+}

src/app/admin/components/donut-form/donut-form.component.ts

@@ -0,0 +1,197 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {NgForm} from "@angular/forms";
+import {Donut} from "../../models/donut.model";
+
+@Component({
+  selector: 'donut-form',
+  template: `
+    <form class="donut-form" #form="ngForm" *ngIf="donut else loading;">
+      <label>
+        <span>Name</span>
+        <input
+          type="text"
+          name="name"
+          class="input"
+          required
+          minlength="5"
+          [ngModel]="donut.name"
+          [ngModelOptions]="{ updateOn: 'blur' }"
+          #name="ngModel"
+        />
+        <ng-container *ngIf="name.invalid && name.touched">
+          <div class="donut-form-error" *ngIf="name.errors?.minlength">Minimum length of a name is 5!.</div>
+          <div class="donut-form-error" *ngIf="name.errors?.required">Name is required.</div>
+        </ng-container>
+      </label>
+
+      <label>
+        <span>Icon</span>
+        <select name="icon" class="input input--select" required [ngModel]="donut.icon" #icon="ngModel">
+          <option *ngFor=" let icon of icons" [ngValue]="icon">
+            {{icon}}
+          </option>
+        </select>
+        <ng-container *ngIf="icon.invalid && icon.touched">
+          <div class="donut-form-error" *ngIf="icon.errors?.required">Icon is required.</div>
+        </ng-container>
+      </label>
+
+      <label>
+        <span>Price</span>
+        <input type="number" name="price" class="input" required [ngModel]="donut.price" #price="ngModel"/>
+        <ng-container *ngIf="price.invalid && price.touched">
+          <div class="donut-form-error" *ngIf="price.errors?.required">Price is required.</div>
+        </ng-container>
+      </label>
+
+      <div class="donut-form-radios">
+        <p class="donut-form-radios-label">Promo:</p>
+        <label>
+          <!--          [value] >> property binding. Met undefined kan je de promo weg laten in de json  -->
+          <input type="radio" name="promo" [value]="undefined" [ngModel]="donut.promo"/>
+          <span>None</span>
+        </label>
+        <label>
+          <input type="radio" name="promo" value="new" [ngModel]="donut.promo"/>
+          <span>New</span>
+        </label>
+        <label>
+          <input type="radio" name="promo" value="limited" [ngModel]="donut.promo"/>
+          <span>Limited</span>
+        </label>
+      </div>
+
+      <label>
+        <span>Description</span>
+        <textarea
+          name="description"
+          class="input input--textarea"
+          required
+          [ngModel]="donut.description"
+          #description="ngModel"
+        ></textarea>
+        <ng-container *ngIf="description.invalid && description.touched">
+          <div class="donut-form-error" *ngIf="description.errors?.required">Description is required.</div>
+        </ng-container>
+      </label>
+
+        <button
+                type="button"
+                class="btn btn--green"
+                *ngIf="!isEdit"
+                (click)="handleCreate(form)"
+        >
+            Create
+        </button>
+        <button
+                type="button"
+                class="btn btn--green"
+                *ngIf="isEdit"
+                [disabled]="form.untouched"
+                (click)="handleUpdate(form)"
+        >
+            Update
+        </button>
+        <button
+                type="button"
+                class="btn btn--green"
+                *ngIf="isEdit"
+                (click)="handleDelete()"
+        >
+            Delete
+        </button>
+        <button
+                type="button"
+                class="btn btn--grey"
+                *ngIf="form.touched || isEdit"
+                (click)="form.resetForm()"
+        >
+            Reset Form
+        </button>
+
+        <div class="donut-form-working" *ngIf="form.valid && form.submitted">
+            Working...
+        </div>
+    </form>
+
+    <ng-template #loading>Loading...</ng-template>
+  `,
+  styles: [
+    `
+      .donut-form {
+        &-radios {
+          display: flex;
+          align-content: center;
+
+          &-label {
+            margin-right: 10px;
+          }
+
+          label {
+            display: flex;
+            align-items: center;
+
+            span {
+              color: #444;
+              margin-bottom: 0;
+            }
+          }
+        }
+
+        &-working {
+          font-size: 12px;
+          font-style: italic;
+          margin: 10px 0;
+        }
+
+        &-error {
+          font-size: 12px;
+          color: #e66262;
+        }
+      }
+    `
+  ]
+})
+export class DonutFormComponent {
+
+  @Input() donut!: Donut;
+  @Input() isEdit!: boolean;
+
+  @Output() create = new EventEmitter<Donut>()
+  @Output() update = new EventEmitter<Donut>()
+  @Output() delete = new EventEmitter<Donut>()
+
+  icons: string[] = [
+    'caramel-swirl',
+    'glazed-fudge',
+    'just-chocolate',
+    'sour-supreme',
+    'strawberry-glaze',
+    'vanilla-sundae',
+    'zesty-lemon',
+  ]
+
+  constructor() {
+  }
+
+  handleCreate(form: NgForm) {
+    if (form.valid) {
+      this.create.emit(form.value)
+    } else {
+      form.form.markAllAsTouched()
+    }
+  }
+
+  handleUpdate(form: NgForm) {
+    if (form.valid) {
+      this.update.emit({id: this.donut.id, ...form.value})
+    } else {
+      form.form.markAllAsTouched()
+    }
+  }
+
+  handleDelete() {
+    if (confirm(`Really delete ${this.donut.name}?`))
+      this.delete.emit({...this.donut})
+  }
+}