Edit non-image multimedia, brings up multimedia dialog

Fixes #780

* Change multimedia-button to multimedia-add-button
* Create multimedia-edit-button
* Fix some problems with handling format and source type

gedbrowserng-frontend/src/app/components/attribute-list/attribute-list-item.component.html

@@ -5,14 +5,18 @@
         #elseLinkBlock><span>{{ attributeUtil.contents() }}</span></ng-template><span
         *ngIf="attribute?.attributes.length">,</span>
    </span>
-  <app-attribute-list-item-detail-list [dataset]="dataset" [attributes]="attribute?.attributes"></app-attribute-list-item-detail-list>
+  <app-attribute-list-item-detail-list [dataset]="dataset" [attributes]="attribute?.attributes">
+    </app-attribute-list-item-detail-list>
   <span class="example-fill-remaining-space"></span>
   <span *ngIf="attributeUtil.editable()" class="hidden">
-    <p-button (onClick)="edit()"
+    <p-button *ngIf="!attributeUtil.multimedia()" (onClick)="edit()"
         icon="fa fa-fw fa-pencil" pTooltip="Edit attribute"></p-button>
+    <app-multimedia-edit-button *ngIf="attributeUtil.multimedia()"
+        [parent]="this" [dataset]="dataset" [attributes]="attributeList" [index]="index">
+      </app-multimedia-edit-button>
     <p-button [styleClass]="'ui-button-danger'" (onClick)="delete()"
         icon="fa fa-fw fa-trash" pTooltip="Delete attribute"></p-button>
-    <app-source-button *ngIf="!href()"[parent]="this" [dataset]="dataset"></app-source-button>
+    <app-source-button *ngIf="!href()" [parent]="this" [dataset]="dataset"></app-source-button>
   </span>
 </div>
 <app-new-attribute-dialog

gedbrowserng-frontend/src/app/components/components.module.ts

@@ -28,8 +28,9 @@ import {
 } from './attribute-list';
 import { LinkDialogComponent } from './link-dialog';
 import { LinkPersonDialogComponent } from './link-person-dialog';
-import { MultimediaButtonComponent } from './multimedia-button/multimedia-button.component';
+import { MultimediaAddButtonComponent } from './multimedia-add-button';
 import { MultimediaDialogComponent } from './multimedia-dialog/multimedia-dialog.component';
+import { MultimediaEditButtonComponent } from './multimedia-edit-button';
 import { MultimediaGalleryComponent } from './multimedia-gallery';
 import { NewAttributeDialogComponent } from './attribute-dialog';
 import { NewNoteDialogComponent } from './new-note-dialog';
@@ -71,8 +72,9 @@ import { SubmitterButtonComponent } from './submitter-button';
     AttributeListItemDetailListItemComponent,
     LinkDialogComponent,
     LinkPersonDialogComponent,
-    MultimediaButtonComponent,
+    MultimediaAddButtonComponent,
     MultimediaDialogComponent,
+    MultimediaEditButtonComponent,
     MultimediaGalleryComponent,
     NewAttributeDialogComponent,
     NewNoteDialogComponent,
@@ -90,8 +92,9 @@ import { SubmitterButtonComponent } from './submitter-button';
     AttributeListItemDetailListItemComponent,
     LinkDialogComponent,
     LinkPersonDialogComponent,
-    MultimediaButtonComponent,
+    MultimediaAddButtonComponent,
     MultimediaDialogComponent,
+    MultimediaEditButtonComponent,
     MultimediaGalleryComponent,
     NewAttributeDialogComponent,
     NewNoteDialogComponent,

gedbrowserng-frontend/src/app/components/index.ts

@@ -2,7 +2,7 @@ export * from './attribute-dialog';
 export * from './attribute-list';
 export * from './link-dialog';
 export * from './link-person-dialog';
-export * from './multimedia-button';
+export * from './multimedia-add-button';
 export * from './multimedia-dialog';
 export * from './multimedia-gallery';
 export * from './new-note-dialog';

gedbrowserng-frontend/src/app/components/multimedia-add-button/index.ts

@@ -0,0 +1 @@
+export * from './multimedia-add-button.component';

gedbrowserng-frontend/src/app/components/multimedia-button/multimedia-button.component.spec.ts → gedbrowserng-frontend/src/app/components/multimedia-add-button/multimedia-add-button.component.spec.ts

@@ -1,6 +1,6 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { MultimediaButtonComponent } from './multimedia-button.component';
+import { MultimediaButtonComponent } from './multimedia-add-button.component';
 
 describe('MultimediaButtonComponent', () => {
   let component: MultimediaButtonComponent;

gedbrowserng-frontend/src/app/components/multimedia-button/multimedia-button.component.ts → gedbrowserng-frontend/src/app/components/multimedia-add-button/multimedia-add-button.component.ts

@@ -7,11 +7,11 @@ import { StringUtil, MultimediaDialogHelper } from '../../utils';
 import { MultimediaDialogComponent } from '../multimedia-dialog';
 
 @Component({
-  selector: 'app-multimedia-button',
-  templateUrl: './multimedia-button.component.html',
-  styleUrls: ['./multimedia-button.component.css']
+  selector: 'app-multimedia-add-button',
+  templateUrl: './multimedia-add-button.component.html',
+  styleUrls: ['./multimedia-add-button.component.css']
 })
-export class MultimediaButtonComponent implements OnInit {
+export class MultimediaAddButtonComponent implements OnInit {
   @Input() parent: HasMultimedia;
   @Input() dataset: string;
 

gedbrowserng-frontend/src/app/components/multimedia-edit-button/index.ts

@@ -0,0 +1 @@
+export * from './multimedia-edit-button.component';

gedbrowserng-frontend/src/app/components/multimedia-edit-button/multimedia-edit-button.component.css

@@ -0,0 +1 @@
+

gedbrowserng-frontend/src/app/components/multimedia-edit-button/multimedia-edit-button.component.html

@@ -0,0 +1,7 @@
+<p-button (onClick)="edit()"
+    icon="fa fa-fw fa-pencil" pTooltip="Edit multimedia attribute"></p-button>
+<app-multimedia-dialog
+    *ngIf="displayDialog" [p]="this"
+    (emitClose)="onDialogClose()" (emitOpen)="onDialogOpen($event)"
+    (emitOK)="update($event)"
+    [(display)]="displayDialog"></app-multimedia-dialog>

gedbrowserng-frontend/src/app/components/multimedia-edit-button/multimedia-edit-button.component.spec.ts

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

gedbrowserng-frontend/src/app/components/multimedia-edit-button/multimedia-edit-button.component.ts

@@ -0,0 +1,40 @@
+import { Component, Input } from '@angular/core';
+
+import { Saveable } from '../../interfaces';
+import { ApiAttribute, MultimediaDialogData } from '../../models';
+import { MultimediaDialogHelper } from '../../utils';
+import { MultimediaDialogComponent } from '../multimedia-dialog';
+
+@Component({
+  selector: 'app-multimedia-edit-button',
+  templateUrl: './multimedia-edit-button.component.html',
+  styleUrls: ['./multimedia-edit-button.component.css']
+})
+export class MultimediaEditButtonComponent {
+  @Input() dataset: string;
+  @Input() parent: Saveable;
+  @Input() attributes: Array<ApiAttribute>;
+  @Input() index;
+  displayDialog = false;
+
+  constructor() { }
+
+  edit(): void {
+    this.displayDialog = true;
+  }
+
+  onDialogOpen(data: MultimediaDialogComponent) {
+    if (data !== undefined) {
+      data._data = MultimediaDialogHelper.buildMultimediaDialogData(this.attributes, this.index);
+    }
+  }
+
+  onDialogClose(): void {
+    this.displayDialog = false;
+  }
+
+  update(data: MultimediaDialogData): void {
+    this.attributes.splice(this.index, 1, MultimediaDialogHelper.buildMultimediaAttribute(data));
+    this.parent.save();
+  }
+}

gedbrowserng-frontend/src/app/components/multimedia-gallery/multimedia-gallery.component.html

@@ -1,7 +1,7 @@
 <p-panel header="Multimedia" [toggleable]="true" [styleClass]="styleClass">
   <p-header>
     <span class="bump-out">
-      <app-multimedia-button [parent]="this" [dataset]="dataset"></app-multimedia-button>
+      <app-multimedia-add-button [parent]="this" [dataset]="dataset"></app-multimedia-add-button>
     </span>
   </p-header>
   <div *ngIf="galleryImages().length">

gedbrowserng-frontend/src/app/components/multimedia-gallery/multimedia-gallery.component.ts

@@ -57,7 +57,7 @@ export class MultimediaGalleryComponent implements OnInit, HasMultimedia {
     this.displayDialog = true;
     this.dialogIndex = i;
     this.onDialogOpen = this.onDialogOpen.bind(this);
-    this.create = this.create.bind(this);
+    this.update = this.update.bind(this);
   }
 
   deleteButtonClicked(event, i) {
@@ -120,9 +120,8 @@ export class MultimediaGalleryComponent implements OnInit, HasMultimedia {
     }
   }
 
-  create(data: MultimediaDialogData) {
-    const attribute: ApiAttribute = MultimediaDialogHelper.buildMultimediaAttribute(data);
-    this.multimedia.splice(this.dialogIndex, 1, attribute);
+  update(data: MultimediaDialogData) {
+    this.multimedia.splice(this.dialogIndex, 1, MultimediaDialogHelper.buildMultimediaAttribute(data));
     this.save();
   }
 }

gedbrowserng-frontend/src/app/utils/attribute-analyzer.ts

@@ -98,4 +98,7 @@ export class AttributeAnalyzer {
     return null;
   }
 
+  multimedia(): boolean {
+    return (this.parent.attribute.type === 'multimedia');
+  }
 }

gedbrowserng-frontend/src/app/utils/multimedia-dialog-helper.ts

@@ -11,22 +11,27 @@ export class MultimediaDialogHelper {
       ]
     };
     for (const mFile of data.files) {
-      const file: ApiAttribute = {
-        type: 'attribute', string: 'File', tail: mFile.fileUrl,
-        attributes: [
-          { type: 'attribute', string: 'Format', tail: mFile.format, attributes: [
-            { type: 'attribute', string: 'Media', tail: mFile.sourceType.toLowerCase(), attributes: [] }
-          ] },
-        ]
-      };
-      attribute.attributes.push(file);
+      attribute.attributes.push(this.buildFileAttribute(mFile));
     }
     if (!StringUtil.isEmpty(data.note)) {
       attribute.attributes.push({ type: 'attribute', string: 'Note', tail: data.note, attributes: [] });
     }
     return attribute;
   }
 
+  private static buildFileAttribute(mFile: MultimediaFileData): ApiAttribute {
+    return {
+      type: 'attribute', string: 'File', tail: mFile.fileUrl,
+      attributes: [
+        {
+          type: 'attribute', string: 'Format', tail: mFile.format.toLowerCase(), attributes: [
+            { type: 'attribute', string: 'Media', tail: mFile.sourceType.toLowerCase(), attributes: [] }
+          ]
+        },
+      ]
+    };
+  }
+
   public static buildMultimediaDialogData(multimedias: Array<ApiAttribute>, dialogIndex?: number | 0): MultimediaDialogData {
     const files: Array<MultimediaFileData> = new Array<MultimediaFileData>();
     if (ArrayUtil.isEmpty(multimedias)) {
@@ -56,7 +61,7 @@ export class MultimediaDialogHelper {
     }
     files.push({
       fileUrl: attribute.tail,
-      format: MultimediaFormat[ImageUtil.imageFormat(attribute)],
+      format: MultimediaFormat[this.imageFormat(attribute)],
       sourceType: MultimediaSourceType[this.sourceType(attribute)] });
   }
 
@@ -67,8 +72,17 @@ export class MultimediaDialogHelper {
     return note;
   }
 
-  private static sourceType(multimedia: ApiAttribute): string {
-    for (const attribute of multimedia.attributes) {
+  private static imageFormat(file: ApiAttribute): string {
+    for (const attribute of file.attributes) {
+      if (attribute.string === 'Format') {
+        return attribute.tail;
+      }
+    }
+    return '';
+  }
+
+  private static sourceType(file: ApiAttribute): string {
+    for (const attribute of file.attributes) {
       if (attribute.string === 'Format') {
         return attribute.attributes[0].tail;
       }