Use same component for create, edit and detail a resource

src/app/deposit/components/detail/detail.component.html

-<div>
-  <label>{{'deposit.title' | translate}}</label>
-  <span class="separator">:</span>
-  <span class="value">{{model.title}}</span>
-</div>
-
-<div>
-  <label>{{'deposit.description' | translate}}</label>
-  <span class="separator">:</span>
-  <span class="value">{{model.description}}</span>
-</div>
-
-

src/app/deposit/components/detail/detail.component.spec.ts

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

src/app/deposit/components/detail/detail.component.ts

-import {ChangeDetectionStrategy, Component, Input, OnInit} from "@angular/core";
-import {DepositsModel} from "@app/generated-api";
-
-@Component({
-  selector: "dlcm-detail-deposit",
-  templateUrl: "./detail.component.html",
-  styleUrls: ["./detail.component.scss"],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class DetailComponent implements OnInit {
-  @Input()
-  model: DepositsModel;
-
-  constructor() {
-  }
-
-  ngOnInit() {
-  }
-
-}

src/app/deposit/components/form/form.component.html

@@ -86,5 +86,11 @@
     </mat-select>
   </mat-form-field>
 
-  <button mat-flat-button color="primary" type="submit" [disabled]="!createDepositForm.valid">{{'deposit.submit' | translate }}</button>
+  <button *ngIf="!readonly"
+          mat-flat-button
+          color="primary"
+          type="submit"
+          [disabled]="!createDepositForm.valid">
+    {{'deposit.submit' | translate }}
+  </button>
 </form>

src/app/deposit/components/form/form.component.ts

@@ -29,6 +29,9 @@ export class FormComponent implements OnInit {
   @Input()
   model: DepositsModel;
 
+  @Input()
+  readonly: boolean;
+
   @Input()
   languages: LanguagesModel[];
 
@@ -48,6 +51,13 @@ export class FormComponent implements OnInit {
     } else {
       this.initNewForm();
     }
+    this.disableIfReadonly();
+  }
+
+  private disableIfReadonly() {
+    if (this.readonly) {
+      this.createDepositForm.disable();
+    }
   }
 
   private initNewForm() {

src/app/deposit/deposit.module.ts

@@ -9,7 +9,6 @@ import {ListView} from "@app/deposit/views/list/list.view";
 import {SharedModule} from "@app/shared/shared.module";
 import {TranslateModule} from "@ngx-translate/core";
 import {NgxsModule} from "@ngxs/store";
-import {DetailComponent} from "./components/detail/detail.component";
 import {CreateView} from "./views/create/create.view";
 import {DetailView} from "./views/detail/detail.view";
 
@@ -25,7 +24,6 @@ const dialogs = [
 ];
 const components = [
   FormComponent,
-  DetailComponent,
 ];
 
 @NgModule({

src/app/deposit/views/detail/detail.view.html

@@ -7,7 +7,8 @@
   <div class="spinner-wrapper" *ngIf="isLoading$ | async">
     <mat-spinner></mat-spinner>
   </div>
-  <dlcm-detail-deposit *ngIf="(current$| async) != null"
-                       [model]="current$| async">
-  </dlcm-detail-deposit>
+  <dlcm-form-deposit *ngIf="(current$| async) != null"
+                     [model]="current$| async"
+                     [readonly]="true"
+  ></dlcm-form-deposit>
 </div>

src/app/organizational-unit/components/detail/detail.component.html

-<div>
-  <label>{{'organizationalUnit.name' | translate}}</label>
-  <span class="separator">:</span>
-  <span class="value">{{model.name}}</span>
-</div>
-
-<div>
-  <label>{{'organizationalUnit.description' | translate}}</label>
-  <span class="separator">:</span>
-  <span class="value">{{model.description}}</span>
-</div>
-
-

src/app/organizational-unit/components/detail/detail.component.spec.ts

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

src/app/organizational-unit/components/detail/detail.component.ts

-import {ChangeDetectionStrategy, Component, Input, OnInit} from "@angular/core";
-import {OrganizationalUnitsModel} from "@app/generated-api";
-
-@Component({
-  selector: "dlcm-detail-orgunit",
-  templateUrl: "./detail.component.html",
-  styleUrls: ["./detail.component.scss"],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class DetailComponent implements OnInit {
-  @Input()
-  model: OrganizationalUnitsModel;
-
-  constructor() {
-  }
-
-  ngOnInit() {
-  }
-}

src/app/organizational-unit/components/form/form.component.html

@@ -26,5 +26,11 @@
   <mat-checkbox [formControlName]="isEmpty">{{'organizationalUnit.isEmpty' | translate }}</mat-checkbox>
   <mat-checkbox [formControlName]="open">{{'organizationalUnit.open' | translate }}</mat-checkbox>
 
-  <button mat-flat-button color="primary" type="submit" [disabled]="!createOrganizationalUnitForm.valid">{{'organizationalUnit.submit' | translate }}</button>
+  <button *ngIf="!readonly"
+          mat-flat-button
+          color="primary"
+          type="submit"
+          [disabled]="!createOrganizationalUnitForm.valid">
+    {{'organizationalUnit.submit' | translate }}
+  </button>
 </form>

src/app/organizational-unit/components/form/form.component.ts

@@ -21,6 +21,9 @@ export class FormComponent implements OnInit {
   @Input()
   model: OrganizationalUnitsModel;
 
+  @Input()
+  readonly: boolean;
+
   @Output()
   submitEvent: EventEmitter<any>;
 
@@ -31,9 +34,18 @@ export class FormComponent implements OnInit {
   ngOnInit() {
     if (this.model) {
       this.bindFormTo(this.model);
+
     } else {
       this.initNewForm();
     }
+
+    this.disableIfReadonly();
+  }
+
+  private disableIfReadonly() {
+    if (this.readonly) {
+      this.createOrganizationalUnitForm.disable();
+    }
   }
 
   private initNewForm() {

src/app/organizational-unit/organizational-unit.module.ts

@@ -5,7 +5,6 @@ import {OrganizationalUnitState} from "@app/organizational-unit/organizational-u
 import {SharedModule} from "@app/shared/shared.module";
 import {TranslateModule} from "@ngx-translate/core";
 import {NgxsModule} from "@ngxs/store";
-import {DetailComponent} from "./components/detail/detail.component";
 import {DeleteDialog} from "./dialogs/delete/delete.dialog";
 import {CreateView} from "./views/create/create.view";
 import {DetailView} from "./views/detail/detail.view";
@@ -24,7 +23,6 @@ const dialogs = [
 ];
 const components = [
   FormComponent,
-  DetailComponent,
 ];
 
 @NgModule({

src/app/organizational-unit/views/detail/detail.view.html

@@ -7,7 +7,8 @@
   <div class="spinner-wrapper" *ngIf="isLoading$ | async">
     <mat-spinner></mat-spinner>
   </div>
-  <dlcm-detail-orgunit *ngIf="(current$| async) != null"
-                       [model]="current$| async">
-  </dlcm-detail-orgunit>
+  <dlcm-form-orgunit *ngIf="(current$| async) != null"
+                     [model]="current$| async"
+                     [readonly]="true"
+  ></dlcm-form-orgunit>
 </div>