RI-188: [job-board] défini le design du board et des cards (#189)

frontend-implicaction/src/app/app.module.ts

@@ -13,6 +13,7 @@ import {ToastModule} from 'primeng/toast';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {MessageService} from 'primeng/api';
 import {SidebarModule} from 'primeng/sidebar';
+import {BoardModule} from './board/board.module';
 
 @NgModule({
   declarations: [
@@ -30,6 +31,7 @@ import {SidebarModule} from 'primeng/sidebar';
     BrowserAnimationsModule,
     ToastModule,
     SidebarModule,
+    BoardModule
   ],
   providers: [MessageService],
   bootstrap: [AppComponent]

frontend-implicaction/src/app/board/board.component.html

@@ -1 +1,14 @@
-<p>board works!</p>
+<div class="row mx-auto">
+  <div
+    *ngFor="let column of columns; let last = last;"
+    [ngClass]="{'me-5': !last}"
+    class="col-12 col-md-5 col-lg shadow-sm me-5 mb-4 pt-4 px-3 bg-white vh-100"
+  >
+    <h3 class="mb-4">
+      {{column.status.label}}
+      <span class="badge rounded-pill bg-danger ms-4 px-3">{{column.applies.length}}</span>
+    </h3>
+
+    <app-apply-card *ngFor="let apply of column.applies" [apply]="apply"></app-apply-card>
+  </div>
+</div>

frontend-implicaction/src/app/board/board.component.scss

@@ -0,0 +1,6 @@
+@import "src/assets/variables";
+
+h3 {
+  color: $light-gray;
+  text-transform: uppercase;
+}

frontend-implicaction/src/app/board/board.component.ts

@@ -1,10 +1,38 @@
-import {Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {ApplyStatusCode, ApplyStatusEnum} from './enums/apply-status-enum';
+import {JobApply} from './models/job-apply';
+
+export class BoardColumn {
+  status: ApplyStatusEnum;
+  applies: JobApply[] = [];
+}
+
 
 @Component({
   selector: 'app-board',
   templateUrl: './board.component.html',
   styleUrls: ['./board.component.scss']
 })
-export class BoardComponent {
+export class BoardComponent implements OnInit {
+
+
+  columns: BoardColumn[] = ApplyStatusEnum.all()
+    .map(status => {
+      return {status, applies: []};
+    });
 
+  ngOnInit(): void {
+    this.columns
+      .find(column => column.status.code === ApplyStatusCode.PENDING)
+      .applies
+      .push({
+        jobTitle: 'Responsable de la maintenance et de la sécurité',
+        contractType: 'CDI',
+        companyImageUrl: 'https://www.netanswer.fr/wp-content/uploads/2017/01/logoNAli400.png',
+        companyName: 'Net Answer',
+        location: 'France, Paris(75)',
+        jobId: '12',
+        status: ApplyStatusEnum.PENDING
+      });
+  }
 }

frontend-implicaction/src/app/board/board.module.ts

@@ -1,14 +1,24 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {BoardComponent} from './board.component';
+import {BrowserModule} from '@angular/platform-browser';
+import {TagModule} from 'primeng/tag';
+import {ApplyCardComponent} from './components/apply-card/apply-card.component';
+import {SharedModule} from '../shared/shared.module';
+import {RouterModule} from '@angular/router';
 
 
 @NgModule({
   declarations: [
-    BoardComponent
+    BoardComponent,
+    ApplyCardComponent
   ],
   imports: [
-    CommonModule
+    CommonModule,
+    BrowserModule,
+    TagModule,
+    SharedModule,
+    RouterModule
   ]
 })
 export class BoardModule {

frontend-implicaction/src/app/board/components/apply-card/apply-card.component.html

@@ -0,0 +1,31 @@
+<div class="card p-3 mb-2 shadow-sm">
+  <div class="d-flex justify-content-between">
+    <div class="d-flex flex-row align-items-center">
+      <img
+        #companyImg
+        (error)="companyImg.src = COMPANY_IMAGE_DEFAULT_URI"
+        [src]="apply.companyImageUrl || COMPANY_IMAGE_DEFAULT_URI"
+        alt="{{apply.companyName}}"
+        class="icon"
+      >
+      <div class="ms-2 c-details">
+        <h6 class="mb-0 theme-primary">{{apply.companyName}}</h6>
+        <span>{{apply.location}}</span>
+      </div>
+    </div>
+    <app-contract-type [type]="apply.contractType"></app-contract-type>
+  </div>
+  <div class="mt-3">
+    <h3 class="heading">
+      <a
+        class="text-decoration-none theme-primary"
+        routerLink="/{{univers.JOBS.url}}/{{apply.jobId}}"
+      >
+        {{apply.jobTitle}}
+      </a>
+    </h3>
+  </div>
+  <div class="card-footer d-grid gap-2 p-0 mt-2">
+    <button class="btn btn-primary" type="button">Postuler</button>
+  </div>
+</div>

frontend-implicaction/src/app/board/components/apply-card/apply-card.component.scss

@@ -0,0 +1,9 @@
+.c-details span {
+  font-weight: 300;
+  font-size: 13px
+}
+
+.icon {
+  width: 50px;
+  height: 50px;
+}

frontend-implicaction/src/app/board/components/apply-card/apply-card.component.spec.ts

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

frontend-implicaction/src/app/board/components/apply-card/apply-card.component.ts

@@ -0,0 +1,20 @@
+import {Component, Input} from '@angular/core';
+import {JobApply} from '../../models/job-apply';
+import {Constants} from '../../../config/constants';
+import {Univers} from '../../../shared/enums/univers';
+
+@Component({
+  selector: 'app-apply-card',
+  templateUrl: './apply-card.component.html',
+  styleUrls: ['./apply-card.component.scss']
+})
+export class ApplyCardComponent {
+
+  readonly COMPANY_IMAGE_DEFAULT_URI = Constants.COMPANY_IMAGE_DEFAULT_URI;
+
+  @Input()
+  apply: JobApply;
+
+  univers = Univers;
+
+}

frontend-implicaction/src/app/board/enums/apply-status-enum.ts

@@ -0,0 +1,27 @@
+import {EnumCodeLabelAbstract} from '../../shared/enums/enum-code-label-abstract.enum';
+
+export enum ApplyStatusCode {
+  PENDING, SENT, CHASED, INTERVIEW
+}
+
+export class ApplyStatusEnum extends EnumCodeLabelAbstract<ApplyStatusCode> {
+  static readonly PENDING = new EnumCodeLabelAbstract(ApplyStatusCode.PENDING, 'Je vais postuler');
+  static readonly SENT = new EnumCodeLabelAbstract(ApplyStatusCode.SENT, `J'ai postulé`);
+  static readonly CHASED = new EnumCodeLabelAbstract(ApplyStatusCode.CHASED, `J'ai relancé`);
+  static readonly INTERVIEW = new EnumCodeLabelAbstract(ApplyStatusCode.INTERVIEW, `J'ai un entretien`);
+
+  constructor(
+    readonly code: ApplyStatusCode,
+    readonly label: string
+  ) {
+    super(code, label);
+  }
+
+  static all(): ApplyStatusEnum[] {
+    return this.values();
+  }
+
+  static from(code: ApplyStatusCode): ApplyStatusEnum {
+    return this.fromCode(code);
+  }
+}

frontend-implicaction/src/app/board/models/job-apply.ts

@@ -0,0 +1,12 @@
+import {ApplyStatusEnum} from '../enums/apply-status-enum';
+
+export interface JobApply {
+  id?: string;
+  jobId: string;
+  jobTitle: string;
+  location: string;
+  companyName: string;
+  companyImageUrl: string;
+  status: ApplyStatusEnum;
+  contractType: string;
+}

frontend-implicaction/src/app/config/constants.ts

@@ -33,5 +33,7 @@ export class Constants {
 
   public static readonly GROUP_IMAGE_DEFAULT_URI = 'assets/img/avatar-ia-group.png';
 
+  public static readonly COMPANY_IMAGE_DEFAULT_URI = 'assets/img/avatar-ia-group.png';
+
   readonly DEFAULT_YEAR_RANGE = `1900:${new Date().getFullYear() + 1}`;
 }

frontend-implicaction/src/app/job/components/job-details/job-details.component.html

@@ -2,10 +2,10 @@
   <div class="col-12 col-lg-3 card align-items-center py-5 px-2 height-fit-content">
     <img
       #companyLogo
-      (error)="companyLogo.src = 'assets/img/job-posting-img.png'"
-      [src]="job.company?.logo || 'assets/img/job-posting-img.png'"
+      (error)="companyLogo.src = constant.COMPANY_IMAGE_DEFAULT_URI"
+      [src]="job.company?.logo || constant.COMPANY_IMAGE_DEFAULT_URI"
       alt="job-logo"
-      class="card-img-top rounded-circle img-fluid shadow-sm user-avatar"
+      class="card-img-top img-fluid user-avatar"
     />
     <div class="card-body">
       <h3 class="card-title text-primary text-uppercase text-center mb-4">{{job.company?.name}}</h3>

frontend-implicaction/src/app/job/components/job-details/job-details.component.ts

@@ -3,6 +3,7 @@ import {JobPosting} from '../../../shared/models/job-posting';
 import {JobService} from '../../services/job.service';
 import {ToasterService} from '../../../core/services/toaster.service';
 import {ActivatedRoute} from '@angular/router';
+import {Constants} from '../../../config/constants';
 
 @Component({
   selector: 'app-job-details',
@@ -12,6 +13,7 @@ import {ActivatedRoute} from '@angular/router';
 export class JobDetailsComponent implements OnInit {
 
   job: JobPosting = {};
+  constant = Constants;
 
   constructor(
     private jobService: JobService,

frontend-implicaction/src/app/job/models/job-criteria-filter.ts

@@ -1,6 +1,6 @@
-import {ContractTypeCode} from './contract-type-enum';
+import {ContractEnumCode} from '../../shared/enums/contract.enum';
 
 export interface JobCriteriaFilter {
   search?: string;
-  contractType?: ContractTypeCode;
+  contractType?: ContractEnumCode;
 }

frontend-implicaction/src/app/shared/components/job-filter/job-filter.component.ts

@@ -1,8 +1,8 @@
 import {Component, OnDestroy, OnInit} from '@angular/core';
-import {ContractTypeCode, ContractTypeEnum} from '../../../job/models/contract-type-enum';
 import {JobCriteriaFilter} from '../../../job/models/job-criteria-filter';
 import {JobFilterContextService} from '../../../job/services/job-filter-context.service';
 import {Subscription} from 'rxjs';
+import {ContractEnum, ContractEnumCode} from '../../enums/contract.enum';
 
 @Component({
   selector: 'app-job-filter',
@@ -11,7 +11,7 @@ import {Subscription} from 'rxjs';
 })
 export class JobFilterComponent implements OnInit, OnDestroy {
 
-  contractTypes = ContractTypeEnum.all();
+  contractTypes = ContractEnum.all();
   criteria: JobCriteriaFilter = {};
   subscription: Subscription;
 
@@ -24,7 +24,7 @@ export class JobFilterComponent implements OnInit, OnDestroy {
       .subscribe(criteria => this.criteria = criteria);
   }
 
-  onContractTypeChange(code: ContractTypeCode): void {
+  onContractTypeChange(code: ContractEnumCode): void {
     this.criteria.contractType = code;
     this.filterContextService.setFilter(this.criteria);
   }

frontend-implicaction/src/app/shared/enums/univers.ts

@@ -1,12 +1,13 @@
 import {RoleEnumCode} from './role.enum';
 
 export class Univers {
+  // l'ordre de déclaration de ces variables correspond à l'ordre d'affichage dans le menu
   static readonly HOME = new Univers('Accueil', '');
   static readonly USERS = new Univers('Communauté', 'users', [RoleEnumCode.USER]);
   static readonly JOBS = new Univers(`Offres d'emploi`, 'jobs', [RoleEnumCode.USER]);
+  static readonly BOARD = new Univers('Job Board', 'board', [RoleEnumCode.ADMIN, RoleEnumCode.PREMIUM]);
   static readonly DISCUSSIONS = new Univers('Discussion', 'discussions', [RoleEnumCode.USER]);
   static readonly ADMIN = new Univers('Admin', 'admin', [RoleEnumCode.ADMIN]);
-  static readonly BOARD = new Univers('Job Board', 'board', [RoleEnumCode.ADMIN, RoleEnumCode.PREMIUM]);
 
   constructor(
     readonly title: string,

frontend-implicaction/src/styles.scss

@@ -98,7 +98,7 @@ textarea, input {
 }
 
 .theme-primary {
-  color: $primary;
+  color: $primary !important;
 }
 
 input:focus::placeholder {