Merge pull request #10 from mrmihi/dev

Chore: Added new dev environment
mrmihi · Dec 8, 2023 · 1cdb554 · 1cdb554
2 parents f9cbeb1 + c45e393
commit 1cdb554
Show file tree

Hide file tree

Showing 27 changed files with 227 additions and 146 deletions.
diff --git a/.github/workflows/dev-deploy.yml b/.github/workflows/dev-deploy.yml
@@ -0,0 +1,25 @@
+  name: CI dev deploy
+
+  on:
+    push:
+      branches:
+        - none
+  jobs:
+    deploy:
+      name: Deploy to staging
+      runs-on: ubuntu-latest
+      steps:
+        - name: Checkout repository 🛎️
+          uses: actions/checkout@v3
+
+        - name: Build 🏗️
+          uses: ./.github/actions/build
+          env:
+            build_configuration: production
+
+        - name: Deploy 🚀
+          uses: JamesIves/github-pages-deploy-action@v4
+          with:
+            folder: ./dist/hon/browser
+            branch: gh-pages-dev
+            clean-exclude: preview
diff --git a/.github/workflows/preview-deploy.yml b/.github/workflows/preview-deploy.yml
@@ -21,4 +21,4 @@ jobs:
       - name: Deploy preview 🚀
         uses: sliit-foss/actions/preview-deployments/deploy@main
         with:
-          site_domain: csse.mrmihi.live
+          site_domain: hon.mrmihi.dev
diff --git a/.github/workflows/quality-checks.yml b/.github/workflows/quality-checks.yml
@@ -20,6 +20,8 @@ jobs:
 
       - name: Run commitlint 🟩
         uses: sliit-foss/actions/quality-checks/commitlint@main
+        with:
+          package-manager: "npm"
 
   lint:
     name: Enforce ESLint rules
@@ -30,6 +32,8 @@ jobs:
 
       - name: Run linter 📢
         uses: sliit-foss/actions/quality-checks/linter@main
+        with:
+          package-manager: "npm"
 
   format:
     name: Format code
@@ -40,3 +44,5 @@ jobs:
 
       - name: Run formatter 🧹
         uses: sliit-foss/actions/quality-checks/formatter@main
+        with:
+          package-manager: "npm"
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,9 +1,9 @@
-<app-header></app-header>
+<app-header (selectedRoute)="onNavigate($event)"></app-header>
 <div class="container">
   <div class="row">
     <div class="col-md-12">
-      <app-books></app-books>
-      <app-shopping-list></app-shopping-list>
+      <app-books *ngIf="currentRoute === 'books'"></app-books>
+      <app-wish-list *ngIf="currentRoute !== 'books'"></app-wish-list>
     </div>
   </div>
 </div>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -3,15 +3,19 @@ import { CommonModule } from '@angular/common';
 import { RouterOutlet } from '@angular/router';
 import {HeaderComponent} from "./header/header.component";
 import {BookComponent} from "./books/book.component";
-import {ShoppingListComponent} from "./shopping-list/shopping-list.component";
+import {WishListComponent} from "./wish-list/wish-list.component";
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [CommonModule, RouterOutlet, HeaderComponent, BookComponent, ShoppingListComponent],
+  imports: [CommonModule, RouterOutlet, HeaderComponent, BookComponent, WishListComponent],
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
   title = 'hon';
+  currentRoute: string = "books";
+  onNavigate(route: string) {
+    this.currentRoute = route;
+  }
 }
diff --git a/src/app/books/book-detail/book-detail.component.html b/src/app/books/book-detail/book-detail.component.html
@@ -1,11 +1,11 @@
 <div class="row">
   <div class="col-xs-12">
-    <img src="" alt="" class="img-responsive">
+    <img [src]="selectedBook?.imagePath" [alt]="selectedBook?.name" class="w-10">
   </div>
 </div>
 <div class="row">
   <div class="col-xs-12">
-    <h1>Book Name</h1>
+    <h1>{{selectedBook?.name}}</h1>
   </div>
 </div>
 <div class="row">
@@ -15,13 +15,9 @@ <h1>Book Name</h1>
     </div>
   </div>
 </div>
-<div class="flex flex-row flex-wrap justify-content-center h-10rem">
+<div class="">
   <div class="">
-    Description
-  </div>
-</div>
-<div class="flex flex-row flex-wrap justify-content-center h-10rem">
-  <div class="">
-    Ingredients
+    {{selectedBook?.description}}
   </div>
 </div>
+
diff --git a/src/app/books/book-detail/book-detail.component.ts b/src/app/books/book-detail/book-detail.component.ts
@@ -1,7 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 import { DropdownModule } from 'primeng/dropdown';
 import {CommonModule} from "@angular/common";
 import {FormsModule} from "@angular/forms";
+import {Book} from "../../shared/book.model";
 
 interface Options {
   name: string;
@@ -14,7 +15,7 @@ interface Options {
   imports: [DropdownModule, CommonModule, FormsModule]
 })
 export class BookDetailComponent implements OnInit {
-
+  @Input() selectedBook: Book | undefined;
   constructor() { }
 
   options: Options[] | undefined;

diff --git a/src/app/books/book-list/book-item/book-item.component.html b/src/app/books/book-list/book-item/book-item.component.html
@@ -1,3 +1,14 @@
-<p>
-  book-item works!
-</p>
+<div
+  class="list-group-item clearfix"
+  (click) = "onSelect()">
+  <p-card header="{{book.name}}" class="m-1">
+    <p class="m-0">
+      {{book.description}}
+      <img
+        [src]="book.imagePath"
+        alt="{{ book.name }}"
+        class="img-responsive"
+        style="max-height: 50px;">
+    </p>
+  </p-card>
+</div>
diff --git a/src/app/books/book-list/book-item/book-item.component.ts b/src/app/books/book-list/book-item/book-item.component.ts
@@ -1,13 +1,23 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {CardModule} from "primeng/card";
+import {CommonModule, NgOptimizedImage} from "@angular/common";
+import {FormsModule} from "@angular/forms";
+import {Book} from "../../../shared/book.model";
 
 @Component({
   standalone: true,
   selector: 'app-book-item',
   templateUrl: './book-item.component.html',
-  styleUrls: ['./book-item.component.css']
+  styleUrls: ['./book-item.component.css'],
+  imports: [CardModule, CommonModule, FormsModule, NgOptimizedImage]
 })
 export class BookItemComponent implements OnInit {
-
+  @Input() book: Book = new Book('Default Book', 'This is simply a test', 'https://upload.wikimedia.org/wikipedia/commons/1/15/Recipe_logo.jpeg');
+  @Output() bookSelected = new EventEmitter<void>();
+  onSelect() {
+    console.log('child selected');
+    this.bookSelected.emit();
+  }
   constructor() { }
 
   ngOnInit() {

diff --git a/src/app/books/book-list/book-list.component.html b/src/app/books/book-list/book-list.component.html
@@ -6,21 +6,11 @@
 <hr>
 <div class="">
   <div class="">
-    <div
-      class="list-group-item clearfix"
-      *ngFor="let book of books">
-      <p-card header="{{book.name}}" class="m-1">
-        <p class="m-0">
-          {{book.description}}
-          <img
-            [src]="book.imagePath"
-            alt="{{ book.name }}"
-            class="img-responsive"
-            style="max-height: 50px;">
-        </p>
-      </p-card>
-    </div>
-    <app-book-item></app-book-item>
+    <app-book-item
+      *ngFor="let bookEl of books"
+      [book] = "bookEl"
+      (bookSelected)="onSelectedBook(bookEl)">
+    </app-book-item>
   </div>
 </div>
 
diff --git a/src/app/books/book-list/book-list.component.ts b/src/app/books/book-list/book-list.component.ts
@@ -1,10 +1,9 @@
-import { Component, OnInit } from '@angular/core';
-
-import { Book } from '../book.model';
+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
+import { Book } from '../../shared/book.model';
 import {BookItemComponent} from "./book-item/book-item.component";
 import {CommonModule} from "@angular/common";
 import { ButtonModule } from 'primeng/button';
-import { CardModule } from 'primeng/card';
+import {FormsModule} from "@angular/forms";
 
 @Component({
   standalone: true,
@@ -14,16 +13,21 @@ import { CardModule } from 'primeng/card';
     BookItemComponent,
     CommonModule,
     ButtonModule,
-    CardModule
+    FormsModule
   ],
   styleUrls: ['./book-list.component.css']
 })
 export class BookListComponent implements OnInit {
+  @Output() onSelection = new EventEmitter<Book>();
   books: Book[] = [
-    new Book('A Test Book', 'This is simply a test', 'https://upload.wikimedia.org/wikipedia/commons/1/15/Recipe_logo.jpeg'),
+    new Book('The Cheat Code', 'Going Off Script', 'https://upload.wikimedia.org/wikipedia/commons/1/15/Recipe_logo.jpeg'),
     new Book('A Test Book', 'This is simply a test', 'https://upload.wikimedia.org/wikipedia/commons/1/15/Recipe_logo.jpeg')
   ];
 
+  onSelectedBook(book: Book) {
+    console.log('parent selected');
+    this.onSelection.emit(book);
+  }
   constructor() { }
 
   ngOnInit() {

diff --git a/src/app/books/book.component.ts b/src/app/books/book.component.ts
@@ -1,19 +1,22 @@
 import { Component, OnInit } from '@angular/core';
 import {BookListComponent} from "./book-list/book-list.component";
 import {BookDetailComponent} from "./book-detail/book-detail.component";
+import {NgIf} from "@angular/common";
+import {Book} from "../shared/book.model";
 
 @Component({
   standalone: true,
   selector: 'app-books',
   templateUrl: './books.component.html',
   imports: [
     BookListComponent,
-    BookDetailComponent
+    BookDetailComponent,
+    NgIf
   ],
   styleUrls: ['./books.component.css']
 })
 export class BookComponent implements OnInit {
-
+  selectedBookFromList: Book | undefined;
   constructor() { }
 
   ngOnInit() {

diff --git a/src/app/books/book.model.ts b/src/app/books/book.model.ts
diff --git a/src/app/books/books.component.html b/src/app/books/books.component.html
@@ -1,8 +1,16 @@
-<div class="flex flex-row flex-wrap justify-content-center">
+<div class="flex flex-row flex-wrap">
   <div class="w-4 m-4">
-    <app-book-list></app-book-list>
+    <app-book-list (onSelection)="selectedBookFromList = $event"></app-book-list>
   </div>
   <div class="w-4 m-4">
-    <app-book-detail></app-book-detail>
+    <app-book-detail *ngIf="selectedBookFromList; else noBookPrompt"
+    [selectedBook]="selectedBookFromList"
+    ></app-book-detail>
   </div>
 </div>
+
+<ng-template #noBookPrompt>
+  <div class="alert alert-info">
+    Please select a book.
+  </div>
+</ng-template>
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
@@ -1,6 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
 import { MenubarModule } from 'primeng/menubar';
-import { MenuItem } from 'primeng/api';
+import {MenuItem} from 'primeng/api';
 
 @Component({
   standalone: true,
@@ -9,12 +9,18 @@ import { MenuItem } from 'primeng/api';
   imports: [ MenubarModule ]
 })
 export class HeaderComponent implements OnInit {
+  @Output() selectedRoute = new EventEmitter<string>();
   items: MenuItem[] | undefined;
 
+  onSelect(route: string) {
+    console.log('onSelect: ' + route);
+    this.selectedRoute.emit(route);
+  }
+
   ngOnInit() {
     this.items = [
       {
-        label: 'File',
+        label: 'Books',
         icon: 'pi pi-fw pi-file',
         items: [
           {
@@ -28,8 +34,9 @@ export class HeaderComponent implements OnInit {
             ]
           },
           {
-            label: 'Delete',
-            icon: 'pi pi-fw pi-trash'
+            label: 'View',
+            icon: 'pi pi-fw pi-trash',
+            command: () => this.onSelect('books'),
           },
           {
             separator: true
@@ -41,23 +48,24 @@ export class HeaderComponent implements OnInit {
         ]
       },
       {
-        label: 'Edit',
+        label: 'Wish List',
         icon: 'pi pi-fw pi-pencil',
         items: [
           {
-            label: 'Left',
-            icon: 'pi pi-fw pi-align-left'
+            label: 'View',
+            icon: 'pi pi-fw pi-align-left',
+            command: () => this.onSelect('wish-list'),
           },
           {
-            label: 'Right',
+            label: 'Delete',
             icon: 'pi pi-fw pi-align-right'
           },
           {
-            label: 'Center',
+            label: 'Search',
             icon: 'pi pi-fw pi-align-center'
           },
           {
-            label: 'Justify',
+            label: 'Export',
             icon: 'pi pi-fw pi-align-justify'
           }
         ]