Git-Demo Practical

package.json

@@ -22,7 +22,9 @@
     "@angular/platform-browser-dynamic": "^16.1.0-rc.0",
     "@angular/router": "^16.1.0-rc.0",
     "angular-in-memory-web-api": "~0.16.0",
+    "flowbite": "^2.2.1",
     "rxjs": "~7.8.0",
+    "tailwindcss": "^3.4.1",
     "tslib": "^2.3.0",
     "zone.js": "~0.13.0"
   },

src/app/app.component.ts

@@ -1,8 +1,14 @@
 import { Component } from '@angular/core';
+import { initFlowbite } from 'flowbite';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent { }
+export class AppComponent {
+
+  ngOnInit(): void {
+    initFlowbite();
+  }
+}

src/app/app.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { RouterModule } from '@angular/router';
 import { HttpClientModule } from '@angular/common/http';
-import { ReactiveFormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
 import { TopBarComponent } from './top-bar/top-bar.component';
@@ -11,18 +11,21 @@ import { ProductAlertsComponent } from './product-alerts/product-alerts.componen
 import { ProductDetailsComponent } from './product-details/product-details.component';
 import { CartComponent } from './cart/cart.component';
 import { ShippingComponent } from './shipping/shipping.component';
+import { FeedbackComponent } from './feedback/feedback.component';
 
 
 @NgModule({
   imports: [
     BrowserModule,
     HttpClientModule,
+    FormsModule,
     ReactiveFormsModule,
     RouterModule.forRoot([
       { path: '', component: ProductListComponent },
       { path: 'products/:productId', component: ProductDetailsComponent },
       { path: 'cart', component: CartComponent },
       { path: 'shipping', component: ShippingComponent },
+      {path: 'feedback', component: FeedbackComponent}
     ])
   ],
   declarations: [
@@ -32,7 +35,8 @@ import { ShippingComponent } from './shipping/shipping.component';
     ProductAlertsComponent,
     ProductDetailsComponent,
     CartComponent,
-    ShippingComponent
+    ShippingComponent,
+    FeedbackComponent
   ],
   bootstrap: [
     AppComponent

src/app/cart.service.ts

@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { Product } from './products';
+import { Product } from './models/products';
 import { Injectable } from '@angular/core';
 
 @Injectable({
@@ -8,9 +8,7 @@ import { Injectable } from '@angular/core';
 export class CartService {
   items: Product[] = [];
 
-  constructor(
-    private http: HttpClient
-  ) {}
+  constructor(private http: HttpClient) {}
 
   addToCart(product: Product) {
     this.items.push(product);

src/app/feedback.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { FeedbackService } from './feedback.service';
+
+describe('FeedbackService', () => {
+  let service: FeedbackService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(FeedbackService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/feedback.service.ts

@@ -0,0 +1,16 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { tap, timer } from 'rxjs';
+import { Feedback } from './models/feedback';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FeedbackService {
+
+  constructor(private http: HttpClient) { }
+
+  sendFeedback(feedback: Feedback) {
+    console.log("Feedback submitted", feedback);
+  }
+}

src/app/feedback/feedback.component.css

@@ -0,0 +1,4 @@
+.large-text-area {
+    min-width: 300px;
+    min-height: 300px;
+}

src/app/feedback/feedback.component.html

@@ -0,0 +1,46 @@
+<h1>Please give us feedback</h1>
+<form [formGroup]="form">
+    <div>
+      <label for="name">Name</label>
+      <input id="name" type="text" formControlName="name">
+    </div>
+
+    <div>
+      <label for="email">Email Address</label>
+      <input id="email" type="text" formControlName="name">
+    </div>
+
+    <div class="flex">
+      <label for="feedbackTypePositive" class="flex">
+          <span class="pr-2">Positive</span>
+        <input id="feedbackTypePositive" type="radio" [value]="true" formControlName="feedbackType">
+      </label>
+      <label for="feedbackTypeNegative" class="flex pl-2">
+        <span class="pr-2">Negative</span>
+        <input id="feedbackTypeNegative" type="radio" [value]="false" formControlName="feedbackType">
+      </label>
+    </div>
+
+    <div class="pb-4">
+      <label for="feedback">Feedback</label>
+      <textarea id="feedback" formControlName="feedback" class="large-text-area"></textarea>
+    </div>
+
+    <button class="button" type="submit" (click)="onSubmit()">Submit</button>
+</form>
+
+  <div #feedbackModal id="feedback-modal" tabindex="-1" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
+      <div class="relative p-4 w-full max-w-md max-h-full">
+          <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+              <div class="p-4 md:p-5 text-center">
+                  <svg class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
+                  </svg>
+                  <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">Thank you for your feedback. We value your input and will review it as soon as possible</h3>
+                  <button (click)="hideModal()" type="button" class="text-white button focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center me-2">
+                      Close
+                  </button>
+              </div>
+          </div>
+      </div>
+  </div>

src/app/feedback/feedback.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FeedbackComponent } from './feedback.component';
+
+describe('FeedbackComponent', () => {
+  let component: FeedbackComponent;
+  let fixture: ComponentFixture<FeedbackComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [FeedbackComponent]
+    });
+    fixture = TestBed.createComponent(FeedbackComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/feedback/feedback.component.ts

@@ -0,0 +1,54 @@
+import { Component, ContentChild, ElementRef, ViewChild } from '@angular/core';
+import { FeedbackService } from '../feedback.service';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { Feedback } from '../models/feedback';
+import { Modal, ModalOptions } from 'flowbite';
+
+@Component({
+  selector: 'app-feedback',
+  templateUrl: './feedback.component.html',
+  styleUrls: ['./feedback.component.css']
+})
+export class FeedbackComponent {
+public form: FormGroup = new FormGroup({
+  name: new FormControl(''),
+  feedbackType: new FormControl(null),
+  feedback: new FormControl('')
+});
+
+ @ViewChild("feedbackModal")
+  modal!: ElementRef; 
+
+  // options with default values
+modalOptions: ModalOptions = {
+  placement: 'center',
+  backdrop: 'dynamic',
+  backdropClasses:
+      'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40',
+  closable: false
+};
+
+// instance options object
+modalInstanceOptions = {
+id: 'feedback-modal',
+override: true
+};
+
+  constructor(private feedbackService: FeedbackService) {
+  }
+
+  onSubmit(): void {
+   const name = this.form.get('name')?.value;
+   const feedbackType = this.form.get('feedbackType')?.value;
+   const feedback = this.form.get('feedback')?.value;
+   const modal = new Modal(this.modal.nativeElement, this.modalOptions, this.modalInstanceOptions);
+   modal.show();
+
+   this.feedbackService.sendFeedback({name, feedbackType, feedback});
+  }
+
+  hideModal() {
+    const modal = new Modal(this.modal.nativeElement, this.modalOptions, this.modalInstanceOptions);
+    modal.hide();
+  }
+}

src/app/models/feedback.ts

@@ -0,0 +1,6 @@
+export interface Feedback {
+    name: string;
+    contactEmailAddress: string;
+    feedbackType: boolean;
+    feedback: string;
+}

src/app/product-alerts/product-alerts.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { Product } from '../products';
+import { Product } from '../models/products';
 
 @Component({
   selector: 'app-product-alerts',

src/app/product-details/product-details.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
-import { Product, products } from '../products';
+import { Product, products } from '../models/products';
 import { CartService } from '../cart.service';
 
 @Component({

src/app/product-list/product-list.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 
-import { products } from '../products';
+import { products } from '../models/products';
 
 @Component({
   selector: 'app-product-list',

src/app/top-bar/top-bar.component.html

@@ -2,6 +2,12 @@
   <h1>My Store</h1>
 </a>
 
-<a routerLink="/cart" class="button fancy-button">
-  <em class="material-icons">shopping_cart</em>Checkout
-</a>
+<div class="flex">
+  <a routerLink="/feedback" class="button fancy-button mr-2">
+    <em class="material-icons">feedback</em>Give feedback
+  </a>
+
+  <a routerLink="/cart" class="button fancy-button">
+    <em class="material-icons">shopping_cart</em>Checkout
+  </a>
+</div>

src/index.html

@@ -2,11 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>Git Demos</title>
+    <title>Ciara Massyn</title>
     <base href="/" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="author" content="Team Super Awsome" />
+    <meta name="author" content="Ciara Massyn" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <link
       href="https://fonts.googleapis.com/icon?family=Material+Icons"

src/styles.css

@@ -1,5 +1,9 @@
 /* Global Styles */
 
+
+@tailwind components;
+@tailwind utilities;
+
 * {
   font-family: 'Roboto', Arial, sans-serif;
   color: #616161;
@@ -104,6 +108,18 @@ label {
   padding-right: 4px;
 }
 
+.mr-2 {
+  margin-right: 8px;
+}
+
+.pb-4 {
+  padding-bottom: 16px;
+}
+
+.flex {
+  display: flex;
+}
+
 /* Top Bar */
 
 app-top-bar {

tailwind.config.js

@@ -0,0 +1,14 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{html,ts}",
+    "./node_modules/flowbite/**/*.js"
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    require('flowbite/plugin')
+]
+}
+