Added Card, Customers, and new Costumer Form

src/app/Services/customer-service/customer.service.spec.ts

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

src/app/Services/customer-service/customer.service.ts

@@ -0,0 +1,37 @@
+import { Injectable } from '@angular/core';
+import { createClient } from '@supabase/supabase-js'
+import {from, Observable} from "rxjs";
+import {Associate, Customer} from "../../types";
+import {SUPABASE_PROJECT_URL, SUPABASE_PUBLIC_API_KEY} from "../../../environments/environment";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CustomerService {
+// Create a single supabase client for interacting with your database
+  private supabase = createClient(SUPABASE_PROJECT_URL, SUPABASE_PUBLIC_API_KEY);
+
+
+  public getCustomers() : Observable<any>  {
+    return from(this.supabase
+      .from('customers')
+      .select('*'));
+  }
+
+  public getAssociates() : Observable<any>  {
+    return from(this.supabase
+      .from('associates')
+      .select('*'));
+  }
+
+  public async addCustomer(customer: Customer){
+    return this.supabase
+      .from('customers')
+      .insert(customer)
+      .select();
+  }
+
+  public editCustomer(){
+
+  }
+}

src/app/add-new-customer/add-new-customer.component.css

@@ -0,0 +1,7 @@
+.add-new-costumer{
+  .input{
+    margin-top: 1.5rem;
+    display: flex;
+    flex-direction: column;
+  }
+}

src/app/add-new-customer/add-new-customer.component.html

@@ -0,0 +1,34 @@
+<form class="add-new-costumer"
+         [formGroup]="formGroup"
+         (ngSubmit)="addNewCustomer()">
+  <div class="input">
+    <label for="firstName">First Name</label>
+    <input pInputText id="firstName"
+           aria-describedby="first-name-help"
+           formControlName="firstName"/>
+    <small id="first-name-help">Enter your First Name</small>
+  </div>
+  <div class="input">
+    <label for="lastName">Last Name</label>
+    <input pInputText id="lastName"
+           aria-describedby="last-name-help"
+           formControlName="lastName" />
+    <small id="last-name-help">Enter your Last Name</small>
+  </div>
+  <div class="input">
+    <label for="email">Email</label>
+    <input pInputText id="email"
+           aria-describedby="email-help"
+           formControlName="email" />
+    <small id="email-help">Enter your Email</small>
+  </div>
+  <div class="input">
+    <label for="phoneNumber">Phone Number</label>
+    <input pInputText id="phoneNumber"
+           aria-describedby="phone-number-help"
+           formControlName="phoneNumber" />
+    <small id="phone-number-help">Enter your Phone Number</small>
+  </div>
+
+  <p-button type="submit">Add New Customer</p-button>
+</form>

src/app/add-new-customer/add-new-customer.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddNewCustomerComponent } from './add-new-customer.component';
+
+describe('AddNewCustomerComponent', () => {
+  let component: AddNewCustomerComponent;
+  let fixture: ComponentFixture<AddNewCustomerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AddNewCustomerComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AddNewCustomerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/add-new-customer/add-new-customer.component.ts

@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from "@angular/forms";
+import {ButtonModule} from "primeng/button";
+import {InputTextModule} from "primeng/inputtext";
+import {CustomerService} from "../Services/customer-service/customer.service";
+
+@Component({
+  selector: 'app-add-new-customer',
+  standalone: true,
+  imports: [FormsModule, ReactiveFormsModule, ButtonModule, InputTextModule],
+  templateUrl: './add-new-customer.component.html',
+  styleUrl: './add-new-customer.component.css'
+})
+export class AddNewCustomerComponent {
+  formGroup : FormGroup = new FormGroup({
+    firstName: new FormControl(),
+    lastName: new FormControl(),
+    email: new FormControl(),
+    phoneNumber: new FormControl()
+  });
+
+  customerService: CustomerService;
+  constructor(customerService: CustomerService) {
+    this.customerService = customerService;
+  }
+
+  addNewCustomer(){
+    this.customerService.addCustomer(this.formGroup.value)
+      .then((response)=>{
+        console.log(response);
+        this.customerService.getCustomers();
+    });
+  }
+}

src/app/customers/customers.component.css

@@ -0,0 +1,14 @@
+.customers{
+  .customer{
+    margin-top: 1.5rem;
+  }
+  .customer-info{
+    display: flex;
+    align-items: baseline;
+    gap: 1rem;
+    p{
+      margin-block-start: .5em;
+      margin-block-end: .5em;
+    }
+  }
+}

src/app/customers/customers.component.html

@@ -0,0 +1,31 @@
+<div class="customers">
+  <div class="customer" *ngFor="let customer of customers">
+    <p-card header="{{customer.firstName}} {{customer.lastName}}"
+            subheader="{{customer.email}}" >
+        <div class="customer-info">
+          <p>{{customer.phoneNumber}}</p>
+          <small>Phone Number</small>
+        </div>
+        <div class="customer-info">
+          <div  class="customer-info"
+                *ngIf="customer.loyaltyPoints > 0">
+            <p>{{customer.loyaltyPoints}}</p>
+            <small>Royalty Points</small>
+          </div>
+          <div class="customer-info"
+               *ngIf="customer.numberOfPurchases > 0">
+            <p>{{customer.numberOfPurchases}}</p>
+            <small>Purchases</small>
+          </div>
+        </div>
+
+      <ng-template pTemplate="footer">
+        <div class="customer-info"
+             *ngIf="customer.associateName">
+          <p>{{ customer.associateName }}</p>
+          <small>Associate</small>
+        </div>
+      </ng-template>
+    </p-card>
+  </div>
+</div>

src/app/customers/customers.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CustomersComponent } from './customers.component';
+
+describe('CustomersComponent', () => {
+  let component: CustomersComponent;
+  let fixture: ComponentFixture<CustomersComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CustomersComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CustomersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/customers/customers.component.ts

@@ -0,0 +1,58 @@
+import { Component } from '@angular/core';
+import {CardModule} from "primeng/card";
+import {CustomerService} from "../Services/customer-service/customer.service";
+import {Associate, Customer} from "../types";
+import {NgForOf, NgIf} from "@angular/common";
+
+@Component({
+  selector: 'app-customers',
+  standalone: true,
+  imports: [
+    CardModule,
+    NgForOf,
+    NgIf
+  ],
+  templateUrl: './customers.component.html',
+  styleUrl: './customers.component.css'
+})
+export class CustomersComponent {
+  private customerService: CustomerService;
+  public customers: Customer[] = [];
+  public associates: Associate[] = [];
+  constructor(customersService: CustomerService) {
+    this.customerService = customersService;
+
+    this.getCustomers();
+  }
+
+  getCustomers(){
+    let customers: Customer[];
+
+    this.customerService.getCustomers().subscribe((res)=>{
+      this.customerService.getAssociates().subscribe((response)=>{
+        this.associates = response.data;
+        this.customers = res.data;
+        customers.forEach((customer: Customer)=>{
+          let index = this.associates.findIndex((value : Associate)=>  value.id == customer.associateId);
+          customer.associateName = this.associates[index].name;
+        })
+        this.customers = customers;
+      });
+    });
+  };
+
+  getAssociates(): Associate[]{
+    let associates : Associate[] = [];
+    this.customerService.getAssociates()
+      .subscribe({
+        next(data){
+          associates = data;
+        },
+        error(error){
+          console.error(error);
+        }
+      });
+    return associates;
+  };
+
+}

src/environments/environment.development.ts

@@ -0,0 +1 @@
+export const environment = {};

src/environments/environment.ts

@@ -0,0 +1,3 @@
+export const environment = {};
+export const SUPABASE_PROJECT_URL: string = "https://hsqkqnflesqacnevvfub.supabase.co";
+export const SUPABASE_PUBLIC_API_KEY: string = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImhzcWtxbmZsZXNxYWNuZXZ2ZnViIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MTA2MTEwMDIsImV4cCI6MjAyNjE4NzAwMn0.-J0Cfh9W5dPk4hxzfSlC8rYb_FjHnQ_U-0Wdm2qosKk"