Add manage restaurants page

src/app/app.module.ts

@@ -32,6 +32,7 @@ import { HttpClientModule } from '@angular/common/http';
 import { ExploreRestaurantsPageComponent } from './pages/explore-restaurants-page/explore-restaurants-page.component';
 import { ManageRestaurantsComponent } from './pages/manage-restaurants/manage-restaurants.component';
 import { ReAuthenticateDialogComponent } from './components/auth/re-authenticate-dialog/re-authenticate-dialog.component';
+import { RestaurantCardComponent } from './components/restaurants/restaurant-card/restaurant-card.component';
 
 @NgModule({
     declarations: [
@@ -45,6 +46,7 @@ import { ReAuthenticateDialogComponent } from './components/auth/re-authenticate
         ExploreRestaurantsPageComponent,
         ManageRestaurantsComponent,
         ReAuthenticateDialogComponent,
+        RestaurantCardComponent,
     ],
     imports: [
         BrowserModule,

src/app/components/restaurants/restaurant-card/restaurant-card.component.html

@@ -0,0 +1,34 @@
+<mat-card
+    *ngIf="restaurant"
+    class="max-w-72 rounded overflow-hidden shadow-lg">
+    <img
+        class="mb-4"
+        mat-card-image
+        [src]="coverPhoto"
+        alt="{{ restaurant.name }}" />
+    <mat-card-content>
+        <div class="font-bold text-xl mb-2">{{ restaurant.name }}</div>
+        <p class="text-gray-700 text-base">{{ restaurant.description }}</p>
+        <p class="text-gray-700 text-sm mt-2">
+            {{ restaurant.location.streetAddress }},
+            {{ restaurant.location.city }}, {{ restaurant.location.province }},
+            {{ restaurant.location.country }}
+        </p>
+    </mat-card-content>
+    <mat-card-content>
+        <span
+            class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2"
+            *ngFor="let cuisine of restaurant.cuisines"
+            >{{ cuisine.name }}</span
+        >
+    </mat-card-content>
+
+    <mat-card-actions>
+        <button
+            mat-stroked-button
+            color="accent"
+            disableRipple="true"
+            >View Details</button
+        >
+    </mat-card-actions>
+</mat-card>

src/app/components/restaurants/restaurant-card/restaurant-card.component.spec.ts

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

src/app/components/restaurants/restaurant-card/restaurant-card.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input } from '@angular/core';
+import { Restaurant } from 'src/app/models/restaurant';
+
+@Component({
+    selector: 'restaurant-card',
+    templateUrl: './restaurant-card.component.html',
+    styleUrls: ['./restaurant-card.component.scss'],
+})
+export class RestaurantCardComponent {
+    @Input() restaurant: Restaurant;
+    private DEFAULT_COVER_PHOTO_URL = 'assets/images/RestaurantCover.jpg';
+
+    get coverPhoto(): string {
+        return this.restaurant?.coverPhotoUri ?? this.DEFAULT_COVER_PHOTO_URL;
+    }
+}

src/app/models/restaurant.ts

@@ -0,0 +1,46 @@
+import { ProfileUser } from './user';
+
+export type Restaurants = Restaurant[];
+
+export class Restaurant {
+    _id: string;
+    ownerId: string;
+    name: string;
+    description?: string;
+    location: RestaurantLocation;
+    coverPhotoUri: string;
+    photoUris?: string[];
+    staffMembers: ProfileUser[];
+    layout: {
+        length: string;
+        width: string;
+    };
+    cuisines: Cuisine[];
+
+    constructor(data: any) {
+        this._id = data?._id ?? null;
+        this.ownerId = data?.ownerId ?? null;
+        this.name = data?.name ?? null;
+        this.description = data?.description ?? null;
+        this.location = data?.location ?? null;
+        this.coverPhotoUri = data?.coverPhotoUri ?? null;
+        this.photoUris = data?.photoUris ?? null;
+        this.staffMembers = data?.staffMembers ?? null;
+        this.layout = data?.layout ?? null;
+        this.cuisines = data?.cuisines ?? null;
+    }
+}
+
+export interface Cuisine {
+    _id: string;
+    name: string;
+    imageUrl: string;
+}
+
+export interface RestaurantLocation {
+    streetAddress: string;
+    city: string;
+    province: string;
+    country: string;
+    postal: string;
+}

src/app/pages/landing-page/landing-page.component.ts

@@ -1,6 +1,5 @@
 import { Router } from '@angular/router';
 import { Component, OnInit } from '@angular/core';
-import { UserService } from 'src/app/services/user.service';
 
 @Component({
     selector: 'app-landing-page',
@@ -10,24 +9,13 @@ import { UserService } from 'src/app/services/user.service';
 export class LandingPageComponent implements OnInit {
     playTransition = false;
 
-    constructor(
-        private router: Router,
-        private userSerice: UserService,
-    ) {}
+    constructor(private router: Router) {}
 
     ngOnInit(): void {
         this.playTransition = true;
-
-        this.getAllRestaurants();
     }
 
     navigateToExploreRestaurants() {
         this.router.navigate(['/explore-restaurants']);
     }
-
-    getAllRestaurants() {
-        this.userSerice.getRestaurants().subscribe((res) => {
-            console.log(res);
-        });
-    }
 }

src/app/pages/manage-restaurants/manage-restaurants.component.html

@@ -1,11 +1,20 @@
 <div class="min-h-screen container-80 p-4">
+    <!-- Header -->
     <section class="flex justify-between flex-wrap gap-5">
-        <h2 class="font-bold text-3xl">Manage Restuarants</h2>
+        <h2 class="font-bold text-3xl">Manage Restaurants</h2>
         <button
             mat-button
             mat-flat-button
+            [disableRipple]="true"
             color="accent">
             <mat-icon>add</mat-icon>Add Restaurant</button
         >
     </section>
+
+    <!-- Owned Restaurants -->
+    <section class="flex flex-wrap gap-5 mt-8 justify-center lg:justify-start">
+        <restaurant-card
+            *ngFor="let restaurant of restaurants"
+            [restaurant]="restaurant"></restaurant-card>
+    </section>
 </div>

src/app/pages/manage-restaurants/manage-restaurants.component.ts

@@ -1,8 +1,40 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Restaurants } from 'src/app/models/restaurant';
+import { RestaurantsService } from 'src/app/services/restaurants.service';
 
 @Component({
     selector: 'manage-restaurants',
     templateUrl: './manage-restaurants.component.html',
     styleUrls: ['./manage-restaurants.component.scss'],
 })
-export class ManageRestaurantsComponent {}
+export class ManageRestaurantsComponent implements OnInit {
+    // Services
+    restaurantsService = inject(RestaurantsService);
+
+    // Props
+    restaurants: Restaurants;
+
+    ngOnInit(): void {
+        // For now
+        // this.getOwnedRestaurants();
+        this.getAllRestaurants();
+    }
+
+    getOwnedRestaurants() {
+        this.restaurantsService
+            .getOwnedRestaurants()
+            .subscribe((restaurants) => {
+                this.restaurants = restaurants ?? [];
+            });
+    }
+
+    // Just to test for now
+    getAllRestaurants() {
+        this.restaurantsService.getRestaurants().subscribe((res) => {
+            this.restaurants = res?.restaurants ?? [];
+
+            console.log(this.restaurants);
+        });
+    }
+}

src/app/services/restaurants.service.ts

@@ -0,0 +1,36 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { filter, map } from 'rxjs';
+import { environment } from 'src/environments/environment.development';
+import { UserService } from './user.service';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class RestaurantsService {
+    private API_URL = environment.apiUrl;
+
+    constructor(
+        private http: HttpClient,
+        private userService: UserService,
+    ) {}
+
+    getRestaurants() {
+        const url = `${this.API_URL}/api/restaurants`;
+
+        return this.http.get<any>(url);
+    }
+
+    getOwnedRestaurants() {
+        return this.getRestaurants().pipe(
+            map((data) => data?.restaurants),
+            map((restaurants) => {
+                return restaurants.filter(
+                    (restaurant) =>
+                        restaurant.ownerId ===
+                        this.userService.currentUser()?.uid,
+                );
+            }),
+        );
+    }
+}

src/app/services/user.service.ts

@@ -117,12 +117,6 @@ export class UserService {
         return this.http.get<any>(url, { headers });
     }
 
-    getRestaurants() {
-        const url = `${this.API_URL}/api/restaurants`;
-
-        return this.http.get<any>(url);
-    }
-
     updateUserById(uid: string, newUser: ProfileUser): Observable<any> {
         const url = `${this.API_URL}/api/users/${uid}`;
         const headers = this.authService.getAuthHeaders();