From 06c49115be2e09f89e11eb67d3d6f7ff9c92f1dc Mon Sep 17 00:00:00 2001
From: Nic McPhee <mcphee@morris.umn.edu>
Date: Tue, 13 Feb 2024 01:00:39 -0600
Subject: [PATCH] Create a simple company list component

I had hoped to fancy this up more (esp. the HTML), but it works and I need to go to bed.

The one really nice thing is that I was able to use a `Signal` in the component to avoid having any subscriptions anywhere!
---
 .vscode/settings.json                         |  3 ++-
 .../company-list/company-list.component.html  | 16 +++++++++++++
 .../company-list/company-list.component.scss  |  0
 .../company-list.component.spec.ts            | 23 +++++++++++++++++++
 .../company-list/company-list.component.ts    | 20 ++++++++++++++++
 5 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 client/src/app/company-list/company-list.component.html
 create mode 100644 client/src/app/company-list/company-list.component.scss
 create mode 100644 client/src/app/company-list/company-list.component.spec.ts
 create mode 100644 client/src/app/company-list/company-list.component.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
index ff5150a2..beece0f8 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -29,7 +29,8 @@
       "sortorder",
       "testid",
       "todos",
-      "unsub"
+      "unsub",
+      "VINCH"
     ],
     "angular.enable-experimental-ivy-prompt": false,
 }
diff --git a/client/src/app/company-list/company-list.component.html b/client/src/app/company-list/company-list.component.html
new file mode 100644
index 00000000..34458df5
--- /dev/null
+++ b/client/src/app/company-list/company-list.component.html
@@ -0,0 +1,16 @@
+<div class="flex-row">
+  <div class="flex-1">
+    <h1 class="company-list-title">Companies</h1>
+    <div class="flex-row">
+      @if (this.companies()) {
+        <div class="flex-1">
+          <div class="company-cards-container flex-row gap-8 flex-wrap">
+            @for (company of this.companies(); track company._id) {
+              <app-company-card class="company-card" [company]="company" ></app-company-card>
+            }
+          </div>
+        </div>
+      }
+    </div>
+  </div>
+</div>
diff --git a/client/src/app/company-list/company-list.component.scss b/client/src/app/company-list/company-list.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/client/src/app/company-list/company-list.component.spec.ts b/client/src/app/company-list/company-list.component.spec.ts
new file mode 100644
index 00000000..19fba0a9
--- /dev/null
+++ b/client/src/app/company-list/company-list.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CompanyListComponent } from './company-list.component';
+
+describe('CompanyListComponent', () => {
+  let component: CompanyListComponent;
+  let fixture: ComponentFixture<CompanyListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CompanyListComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(CompanyListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/client/src/app/company-list/company-list.component.ts b/client/src/app/company-list/company-list.component.ts
new file mode 100644
index 00000000..3bacffac
--- /dev/null
+++ b/client/src/app/company-list/company-list.component.ts
@@ -0,0 +1,20 @@
+import { Component, Signal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { CompanyCardComponent } from '../company-card/company-card.component';
+import { UserService } from '../users/user.service';
+import { Company } from './company';
+
+@Component({
+  selector: 'app-company-list',
+  standalone: true,
+  imports: [CompanyCardComponent],
+  templateUrl: './company-list.component.html',
+  styleUrl: './company-list.component.scss'
+})
+export class CompanyListComponent {
+  companies: Signal<Company[]>;
+
+  constructor(private userService: UserService) {
+    this.companies = toSignal(this.userService.getCompanies());
+  }
+}