feat(header+dialog): create button in the header + dialog box (#320)

Co-authored-by: flaurens <flavie.laurens@unibas.ch>

src/app/main/dialog/dialog.component.html

@@ -230,11 +230,26 @@
         <dsp-message [short]="true" [message]="data.title"></dsp-message>
     </div>
 
+    <!-- all about RESOURCE -->
+    <!-- Create resource -->
+    <div *ngSwitchCase="'createResource'">
+        <app-dialog-header [title]="'appLabels.form.resource.title.profile' | translate"
+            [subtitle]="'appLabels.form.project.title.new' | translate">
+        </app-dialog-header>
+        The component <b>{{data.mode}}</b> is not implemented yet.
+        <!-- TODO: <app-resource-form (closeDialog)="dialogRef.close()"></app-resource-form> -->
+        <mat-dialog-actions>
+            <button mat-button mat-dialog-close class="cancel-button center" [mat-dialog-close]="false">
+                Cancel
+            </button>
+        </mat-dialog-actions>
+    </div>
+
     <!-- Unknown method (or not yet defined) -->
     <!-- Default dialog content component -->
     <div *ngSwitchDefault>
         <app-dialog-header [title]="'Not yet implemented'" [subtitle]="'ERROR 400'" (close)="dialogRef.close()">
         </app-dialog-header>
-        The component{{data.mode}} is not implemented yet.
+        The component <b>{{data.mode}}</b> is not implemented yet.
     </div>
 </div>

src/app/main/header/header.component.html

@@ -34,6 +34,10 @@ <h1 class="mat-headline mobile-only">DSP</h1>
 
     <!-- action tools: info menu, select language, login button, user menu -->
     <span class="action">
+        <button mat-icon-button aria-label="Add a new resource" (click)="openDialog('createResource')" class="main-toolbar-button new-resource" >
+            <mat-icon>add_circle_outline</mat-icon>
+        </button>
+
         <button mat-button [routerLink]="'/help'" class="main-toolbar-button help">Help</button>
 
         <app-select-language></app-select-language>

src/app/main/header/header.component.ts

@@ -1,10 +1,12 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
+import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
 import { MatIconRegistry } from '@angular/material/icon';
 import { DomSanitizer } from '@angular/platform-browser';
 import { NavigationStart, Router } from '@angular/router';
 import { DspMessageData, SearchParams, SessionService } from '@dasch-swiss/dsp-ui';
-import { ComponentCommunicationEventService, Events } from 'src/app/main/services/component-communication-event.service';
 import { Subscription } from 'rxjs';
+import { DialogComponent } from 'src/app/main/dialog/dialog.component';
+import { ComponentCommunicationEventService, Events } from 'src/app/main/services/component-communication-event.service';
 
 const { version: appVersion } = require('../../../../package.json');
 
@@ -34,6 +36,7 @@ export class HeaderComponent implements OnInit, OnDestroy{
         private _session: SessionService,
         private _domSanitizer: DomSanitizer,
         private _matIconRegistry: MatIconRegistry,
+        private _dialog: MatDialog,
         private _router: Router,
         private _componentCommsService: ComponentCommunicationEventService) {
 
@@ -117,6 +120,27 @@ export class HeaderComponent implements OnInit, OnDestroy{
 
     }
 
+    openDialog(mode: string, name?: string, iri?: string): void {
+        const dialogConfig: MatDialogConfig = {
+            width: '640px',
+            position: {
+                top: '112px'
+            },
+            data: { mode: mode, title: name, id: iri }
+        };
+
+        const dialogRef = this._dialog.open(
+            DialogComponent,
+            dialogConfig
+        );
+
+        dialogRef.afterClosed().subscribe(() => {
+
+            // do something
+
+        });
+    }
+
 }
 
 

src/assets/i18n/en.json

@@ -153,6 +153,22 @@
                 "title": {
                     "delete": "Delete list"
                 }
+            },
+            "resource": {
+                "title": {
+                    "new": "Create new",
+                    "edit": "Update resource",
+                    "profile": "Resource",
+                    "editSuccess": "You have successfully updated this resource.",
+                    "delete": "Delete this resource",
+                    "deleteHint": "You're sure to delete this resource?",
+                    "deleteButton": "Delete resource now",
+                    "formWizard": {
+                        "step_1": "Select your resource",
+                        "step_2": "Add properties",
+                        "step_3": "Confirm"
+                    }
+                }
             }
         }
     }

src/assets/style/_elements.scss

@@ -99,6 +99,15 @@ a,
   }
 }
 
+.new-resource {
+    width: 64px !important ;
+    align-content: center;
+
+    &:hover {
+        background-color: #EBEBEB;
+    }
+}
+
 // --------------------------------------
 
 //