front solution

apps/frontend/src/app/app-routing.module.ts

@@ -7,6 +7,11 @@ const routes: Routes = [
     loadChildren: () =>
       import('./modules/map/map.module').then((m) => m.MapModule),
   },
+  {
+    path: 'issue',
+    loadChildren: () =>
+      import('./modules/issue/issue.module').then((m) => m.IssueModule),
+  },
 ];
 
 @NgModule({

apps/frontend/src/app/models/comment.model.ts

@@ -0,0 +1,5 @@
+export interface CommentModel {
+  userName: string;
+  content: string;
+  createdAt: Date;
+}

apps/frontend/src/app/models/issue.model.ts

@@ -1,3 +1,6 @@
+import { CommentModel } from './comment.model';
+import { SolutionModel } from './solution.model';
+
 export interface IssueModel {
   id: string;
   title: string;
@@ -7,4 +10,6 @@ export interface IssueModel {
   photos: any[];
   type: 'problem' | 'suggestion';
   createdAt: Date;
+  solution?: SolutionModel;
+  comments: CommentModel[];
 }

apps/frontend/src/app/models/solution.model.ts

@@ -0,0 +1,5 @@
+import { CommentModel } from './comment.model';
+
+export interface SolutionModel {
+  comments: CommentModel[];
+}

apps/frontend/src/app/modules/issue/issue.component.html

@@ -3,7 +3,9 @@
     <div class="main">
       <p-card>
         <h1>{{ (issue$ | async)?.title }}</h1>
+        <p>{{ (issue$ | async)?.description }}</p>
       </p-card>
     </div>
+    <div class="comments"></div>
   </p-card>
 </div>

apps/frontend/src/app/modules/issue/issue.module.ts

@@ -1,11 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { CardModule } from 'primeng/card';
+import { IssueRoutingModule } from './issue-routing.module';
 import { IssueComponent } from './issue.component';
 
 @NgModule({
   declarations: [IssueComponent],
-  imports: [CommonModule, CardModule],
+  imports: [CommonModule, CardModule, IssueRoutingModule],
   providers: [],
 })
 export class IssueModule {}

apps/frontend/src/app/modules/issues/issue.component.html

@@ -1,6 +1,10 @@
 <div class="issues">
   <p-card>
-    <app-issue-element *ngFor="let issue of issues$ | async" [issue]="issue">
+    <app-issue-element
+      *ngFor="let issue of issues$ | async"
+      [issue]="issue"
+      [routerLink]="['/', 'issue', issue.id]"
+    >
     </app-issue-element>
   </p-card>
 </div>

apps/frontend/src/app/modules/issues/issue.module.ts

@@ -1,12 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
 import { CardModule } from 'primeng/card';
 import { IssueElementComponent } from './components/issue-element/issue-element.component';
 import { IssueComponent } from './issue.component';
 
 @NgModule({
   declarations: [IssueComponent, IssueElementComponent],
-  imports: [CommonModule, CardModule],
+  imports: [CommonModule, CardModule, RouterModule],
   exports: [IssueComponent],
   providers: [],
 })

apps/frontend/src/app/modules/solutions/solutions-routing.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { SolutionsComponent } from './solutions.component';
+
+const routes: Routes = [{ path: '', component: SolutionsComponent }];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class SolutionsRoutingModule {}

apps/frontend/src/app/modules/solutions/solutions.component.html

@@ -0,0 +1 @@
+<p>solutions works!</p>

apps/frontend/src/app/modules/solutions/solutions.component.spec.ts

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

apps/frontend/src/app/modules/solutions/solutions.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-solutions',
+  templateUrl: './solutions.component.html',
+  styleUrls: ['./solutions.component.scss']
+})
+export class SolutionsComponent {
+
+}

apps/frontend/src/app/modules/solutions/solutions.module.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { SolutionsRoutingModule } from './solutions-routing.module';
+import { SolutionsComponent } from './solutions.component';
+
+@NgModule({
+  declarations: [SolutionsComponent],
+  imports: [CommonModule, SolutionsRoutingModule],
+  providers: [],
+})
+export class SolutionsModule {}

apps/frontend/src/app/store/reducer/issue.reducer.ts

@@ -13,6 +13,7 @@ const initialState: IssueState = {
       photos: [],
       status: 'new',
       type: 'problem',
+      comments: [],
     },
     {
       id: '2',
@@ -23,6 +24,7 @@ const initialState: IssueState = {
       photos: [],
       status: 'new',
       type: 'problem',
+      comments: [],
     },
     {
       id: '3',
@@ -33,6 +35,7 @@ const initialState: IssueState = {
       photos: [],
       status: 'new',
       type: 'problem',
+      comments: [],
     },
   ],
 };

apps/frontend/src/app/store/selectors/issue.selectors.ts

@@ -7,3 +7,8 @@ export const selectAllIssues = createSelector(
   selectIssueFeatureState,
   (state) => state.issues
 );
+
+export const selectIssue = (id: string) =>
+  createSelector(selectAllIssues, (issues) =>
+    issues.find((issue) => issue.id === id)
+  );