Add modal

src/app/deposit/components/table-deposits/table-deposits.component.ts

 import {Component, Input, OnInit} from '@angular/core';
 import {DepositsModel} from '@app/generated-api';
+import {PrimeNgColumnsModel} from '@app/shared/model/prime-ng-columns.model';
 
 @Component({
   selector: 'dlcm-table-deposits',
@@ -10,12 +11,14 @@ export class TableDepositsComponent implements OnInit {
   @Input()
   deposits: DepositsModel[];
 
-  cols: any[];
+  cols: PrimeNgColumnsModel[];
 
   constructor() {
   }
 
   ngOnInit() {
+    // TODO Use typeof to get interface propertie name
+    // TODO Use ngx translate
     this.cols = [
       {field: 'title', header: 'Titre'},
       {field: 'publicationDate', header: 'Date de publication'},

src/app/deposit/containers/create-deposit-container/create-deposit-container.component.html

+<p>
+  create-deposit-container works!
+</p>

src/app/deposit/containers/create-deposit-container/create-deposit-container.component.spec.ts

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

src/app/deposit/containers/create-deposit-container/create-deposit-container.component.ts

+import {Component, OnInit} from '@angular/core';
+import {MatDialogRef} from '@angular/material';
+
+@Component({
+  selector: 'dlcm-create-deposit-container',
+  templateUrl: './create-deposit-container.component.html',
+  styleUrls: ['./create-deposit-container.component.scss'],
+})
+export class CreateDepositContainerComponent implements OnInit {
+
+  constructor(public dialogRef: MatDialogRef<CreateDepositContainerComponent>) {
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/deposit/deposit.module.ts

@@ -6,19 +6,24 @@ import {DepositViewComponent} from '@app/deposit/views/deposit-view/deposit-view
 import {SharedModule} from '@app/shared/shared.module';
 import {TranslateModule} from '@ngx-translate/core';
 import {NgxsModule} from '@ngxs/store';
-import { TableDepositsComponent } from './components/table-deposits/table-deposits.component';
-
-const components = [];
+import {TableDepositsComponent} from './components/table-deposits/table-deposits.component';
+import {CreateDepositContainerComponent} from './containers/create-deposit-container/create-deposit-container.component';
 
 const views = [
   DepositViewComponent,
 ];
+const containers = [
+  CreateDepositContainerComponent,
+];
+const components = [
+  TableDepositsComponent,
+];
 
 @NgModule({
   declarations: [
-    ...components,
     ...views,
-    TableDepositsComponent,
+    ...containers,
+    ...components,
   ],
   imports: [
     SharedModule,
@@ -28,8 +33,12 @@ const views = [
       DepositState,
     ]),
   ],
+  entryComponents: [
+    CreateDepositContainerComponent,
+  ],
   exports: [
     ...views,
+    ...containers,
   ],
   providers: [
     DepositService,

src/app/deposit/views/deposit-view/deposit-view.component.html

@@ -2,7 +2,6 @@
 <button mat-flat-button color="secondary" (click)="getAll()">Refresh</button>
 
 <dlcm-table-deposits [deposits]="deposits$ | async"></dlcm-table-deposits>
-
 <mat-spinner *ngIf="(isLoading$ | async)"></mat-spinner>
 
 

src/app/deposit/views/deposit-view/deposit-view.component.ts

 import {Component, OnInit} from '@angular/core';
+import {MatDialog} from '@angular/material';
+import {CreateDepositContainerComponent} from '@app/deposit/containers/create-deposit-container/create-deposit-container.component';
 import {GetAll} from '@app/deposit/deposit.action';
 import {DepositStateModel} from '@app/deposit/deposit.state';
 import {DepositsModel} from '@app/generated-api';
@@ -17,7 +19,7 @@ export class DepositViewComponent implements OnInit {
   @Select((state) => ((state.deposit) as DepositStateModel).isLoading) isLoading$: Observable<boolean>;
   @Select((state) => ((state.deposit) as DepositStateModel).deposits) deposits$: Observable<DepositsModel[]>;
 
-  constructor(private store: Store) {
+  constructor(private store: Store, public dialog: MatDialog) {
   }
 
   ngOnInit() {
@@ -29,6 +31,9 @@ export class DepositViewComponent implements OnInit {
   }
 
   addDeposit() {
-
+    const dialogRef = this.dialog.open(CreateDepositContainerComponent, {
+      height: '400px',
+      width: '600px',
+    });
   }
 }

src/app/module/material.module.ts

 import {NgModule} from '@angular/core';
 import {
   MatButtonModule,
+  MatDialogModule,
   MatInputModule,
   MatProgressSpinnerModule,
   MatSnackBarModule,
@@ -15,6 +16,7 @@ const modules = [
   MatInputModule,
   MatButtonModule,
   MatSnackBarModule,
+  MatDialogModule,
 ];
 
 @NgModule({

src/app/shared/model/prime-ng-columns.model.ts

+export interface PrimeNgColumnsModel {
+  field: string;
+  header: string;
+}