use entities for group/publication descriptions

config.jsonc

@@ -557,7 +557,26 @@
     "id" and "name" keys are required. If "alternativeNames" is present, these
     will act as synonyms when autocompleting values entered as annotations.
     */
-    "entities": [],
+    "entities": [
+        {
+            "id": "group",
+            "title": "Group",
+            "keys": [
+                {"id": "id", "title": "ID", "type": "string"},
+                {"id": "name", "title": "Name", "type": "string"},
+                {"id": "description", "title": "Description", "type": "text"}
+            ]
+        },
+        {
+            "id": "publication",
+            "title": "Publication",
+            "keys": [
+                {"id": "id", "title": "ID", "type": "string"},
+                {"id": "name", "title": "Name", "type": "string"},
+                {"id": "description", "title": "Description", "type": "text"}
+            ]
+        }
+    ],
     /*
     "flags", if set to true, will cause flag icons to appear in filters.
     */

static/html/entities.publication.entity.html

@@ -0,0 +1,8 @@
+<div>
+    <div style="position: absolute; left: 16px; right: 16px; top: 16px">
+        <div style="font-weight: bold; font-size: 13px">About {name}:</div>
+        <div style="height: 8px"></div>
+        <div>{description}</div>
+        <div style="height: 8px"></div>
+    </div>
+</div>

static/js/documentInfoView.leftovers.js

@@ -112,6 +112,12 @@ pandora.ui.documentInfoView = function(data, isMixed) {
         });
 
         if (!isMultiple) {
+            var $left = Ox.Element()
+                .css({
+                    position: 'absolute'
+                })
+                .appendTo($info);
+
             var $icon = Ox.Element({
                     element: '<img>',
                 })
@@ -128,7 +134,7 @@ pandora.ui.documentInfoView = function(data, isMixed) {
                 .bindEvent({
                     singleclick: toggleIconSize
                 })
-                .appendTo($info),
+                .appendTo($left),
 
             $reflection = $('<div>')
                 .addClass('OxReflection')
@@ -140,7 +146,7 @@ pandora.ui.documentInfoView = function(data, isMixed) {
                     height: iconSize / 2 + 'px',
                     overflow: 'hidden'
                 })
-                .appendTo($info),
+                .appendTo($left),
 
             $reflectionIcon = $('<img>')
                 .attr({
@@ -163,6 +169,16 @@ pandora.ui.documentInfoView = function(data, isMixed) {
                 .appendTo($reflection);
         }
 
+        var $data = $('<div>')
+            .addClass('OxTextPage')
+            .css({
+                position: 'absolute',
+                left: margin + 'px',
+                top: margin + iconHeight + margin + 'px',
+                width: iconSize + 'px',
+            })
+            .appendTo($left);
+
         var $text = Ox.Element()
             .addClass('OxTextPage')
             .css({
@@ -201,6 +217,83 @@ pandora.ui.documentInfoView = function(data, isMixed) {
     if (!canEdit) {
         pandora.createLinks($info);
     }
+    // Group & Publication description -----------------------------------------------------
+    if (!isMultiple) {
+        ;['group', 'publication'].forEach(key => {
+            var $box = $('<div>').appendTo($data);
+            (data[key] ? pandora.api.findEntities : Ox.noop)({
+                query: {
+                    conditions: [{
+                        key: 'type', operator: '==', value: key
+                    }, {
+                        key: 'name', operator: '==', value: data[key]
+                    }],
+                    operator: '&'
+                },
+                keys: ['id', 'name', 'description']
+            }, function(result) {
+                if ((result && result.data.items.length == 1) || canEdit) {
+                    var entity = {}
+                    if (result && result.data.items.length) {
+                        entity = result.data.items[0]
+                    }
+                    $('<div>')
+                        .html(Ox._('About {0}:', [data[key]]))
+                        .css({
+                            'padding-top': '4px',
+                            'font-weight': 'bold'
+                        })
+                        .appendTo($box);
+                    $('<div>')
+                        .append(
+                            Ox.EditableContent({
+                                clickLink: pandora.clickLink,
+                                editable: false,
+                                format: function(value) {
+                                    return value.replace(
+                                        /<img src=/g,
+                                        '<img style="float: left; max-width: 256px; max-height: 256px; margin: 0 16px 16px 0" src='
+                                    );
+                                },
+                                placeholder: formatLight(Ox._('No {0} Description', [Ox._(Ox.toTitleCase(key))])),
+                                tooltip: canEdit ? pandora.getEditTooltip() : '',
+                                type: 'textarea',
+                                value: entity.description || ''
+                            })
+                            .css(css)
+                            .bindEvent({
+                                doubleclick: function(event) {
+                                    if (!canEdit) {
+                                        return
+                                    }
+                                    if (entity.id) {
+                                        var set = {}
+                                        set['entitiesType'] = key
+                                        set['entitiesSelection.' + key] = [entity.id];
+                                        pandora.UI.set(set);
+                                        pandora.$ui.entitiesDialog = pandora.ui.entitiesDialog().open();
+                                    } else {
+                                        pandora.api.addEntity({
+                                            type: key,
+                                            name: data[key]
+                                        }, function(result) {
+                                            var set = {}
+                                            set['entitiesType'] = key
+                                            set['entitiesSelection.' + key] = [result.data.id];
+                                            pandora.UI.set(set);
+                                            pandora.$ui.entitiesDialog = pandora.ui.entitiesDialog().open();
+                                        })
+                                    }
+                                }
+                            })
+                        ).css({
+                            margin: '12px 0',
+                        })
+                        .appendTo($box);
+                }
+            })
+        });
+    }
 
     // Title -------------------------------------------------------------------
 
@@ -242,8 +335,14 @@ pandora.ui.documentInfoView = function(data, isMixed) {
     renderGroup(['tags']);
 
     // Description -------------------------------------------------------------
-
     if (canEdit || data.description) {
+        $('<div>')
+            .html('Description:')
+            .css({
+                'padding-top': '4px',
+                'font-weight': 'bold'
+            })
+            .appendTo($text);
         $('<div>')
             .append(
                 Ox.EditableContent({
@@ -276,6 +375,13 @@ pandora.ui.documentInfoView = function(data, isMixed) {
     }
 
     if (canEdit || data.content) {
+        $('<div>')
+            .html('Content:')
+            .css({
+                'padding-top': '4px',
+                'font-weight': 'bold'
+            })
+            .appendTo($text);
         $('<div>')
             .append(
                 Ox.EditableContent({