From 43807dbfc6fb395f7fd51464c8f4bd01e62106fb Mon Sep 17 00:00:00 2001
From: Julian Gonggrijp <dev@juliangonggrijp.com>
Date: Thu, 6 Jan 2022 02:53:10 +0100
Subject: [PATCH] Make ItemMetadataView self-rendering and -updating, clean and
 correct

The lack of self-updating prevented the item metadata table from
populating in a deep-linked annotation panel.
---
 .../src/item-metadata/item-metadata-view.ts   | 29 ++++++++-----------
 .../src/panel-annotation/annotation-view.ts   |  4 +--
 2 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/frontend/src/item-metadata/item-metadata-view.ts b/frontend/src/item-metadata/item-metadata-view.ts
index 9ed1bcb01..303485d43 100644
--- a/frontend/src/item-metadata/item-metadata-view.ts
+++ b/frontend/src/item-metadata/item-metadata-view.ts
@@ -22,37 +22,33 @@ export interface ViewOptions extends BaseOpt<Node> {
 
 export default class ItemMetadataView extends View<Node> {
     title: string;
-    metadata: any;
 
     constructor(options?: ViewOptions) {
         super(options);
     }
 
-    initialize(options: ViewOptions): this {
-        this.title = 'Item metadata';
-        if (options.title) this.title = options.title;
-        this.metadata = new Object();
-        this.collectDetails();
-        return this;
+    initialize(options: ViewOptions): void {
+        this.title = options.title || 'Item metadata';
+        this.render().listenTo(this.model, 'change', this.render);
     }
 
     render(): this {
-        this.$el.html(this.template(this));
-        this.initAccordions();
-        return this;
+        this.$el.html(this.template(this.collectDetails()));
+        return this.initAccordions();
     }
 
-    collectDetails(): this {
+    collectDetails() {
+        const metadata: any = {};
         if (this.model.has(dcterms.creator)) {
-            this.metadata['creator'] = getLabel(this.model.get(dcterms.creator)[0] as Node);
+            metadata['creator'] = getLabel(this.model.get(dcterms.creator)[0] as Node);
         }
         if (this.model.has(dcterms.created)) {
-            this.metadata['created'] = this.model.get(dcterms.created)[0];
+            metadata['created'] = this.model.get(dcterms.created)[0];
         }
         if (this.model.has(dcterms.modified)) {
-            this.metadata['modified'] = this.model.get(dcterms.modified)[0];
+            metadata['modified'] = this.model.get(dcterms.modified)[0];
         }
-        return this;
+        return { metadata, title: this.title };
     }
 
     initAccordions(): this {
@@ -62,10 +58,9 @@ export default class ItemMetadataView extends View<Node> {
         return this;
     }
 }
+
 extend(ItemMetadataView.prototype, {
     tagName: 'div',
     className: 'item-metadata accordions',
     template: itemMetadataTemplate,
-    events: {
-    }
 });
diff --git a/frontend/src/panel-annotation/annotation-view.ts b/frontend/src/panel-annotation/annotation-view.ts
index 433864d2d..8ee2b2ea2 100644
--- a/frontend/src/panel-annotation/annotation-view.ts
+++ b/frontend/src/panel-annotation/annotation-view.ts
@@ -50,7 +50,7 @@ export default class AnnotationView extends CompositeView<FlatItem> {
             this.annotationMetadataView = new ItemMetadataView({
                 model: annotation,
                 title: 'Annotation metadata'
-            }).render();
+            });
         }
     }
 
@@ -66,7 +66,7 @@ export default class AnnotationView extends CompositeView<FlatItem> {
         if (item) {
             this.itemMetadataView = new ItemMetadataView({
                 model: item,
-            }).render();
+            });
             this.listenTo(item, 'change', this.collectDetails)
                 .collectDetails(item);
             this.listenTo(item, 'change', this.render);