Generic-UI-list-editor: Implemented generic UI list editor, changed instances of labels, keywords and people in image to generic component

Author: adrielulanovsky

kahuna/public/js/components/gr-add-label/gr-add-label.js

@@ -15,8 +15,8 @@ export var addLabel = angular.module('gr.addLabel', [
 ]);
 
 addLabel.controller('GrAddLabelCtrl', [
-    '$window', '$q', 'labelService', 'mediaApi',
-    function ($window, $q, labelService,  mediaApi) {
+    '$scope', '$window', '$q', 'labelService', 'mediaApi',
+    function ($scope, $window, $q, labelService,  mediaApi) {
 
         let ctrl = this;
 
@@ -42,7 +42,10 @@ addLabel.controller('GrAddLabelCtrl', [
                     reset();
                 })
                 .catch(saveFailed)
-                .finally(() => ctrl.adding = false);
+                .finally(() => {
+                    ctrl.adding = false;
+                    $scope.$apply();
+                });
 
         }
 

kahuna/public/js/components/gr-image-metadata/gr-image-metadata.html

@@ -358,8 +358,8 @@
                 </span>
             </dd>
 
-            <dt ng-if="ctrl.singleImage && (ctrl.rawMetadata.peopleInImage || ctrl.userCanEdit)" class="image-info__wrap metadata-line metadata-line__key image-info__group--dl__key--panel">People</dt>
-            <dd ng-if="ctrl.singleImage && (ctrl.rawMetadata.peopleInImage || ctrl.userCanEdit)" class="image-info__wrap metadata-line metadata-line__info image-info__group--dl__value--panel">
+            <dt ng-if="(ctrl.rawMetadata.peopleInImage || ctrl.userCanEdit)" class="image-info__wrap metadata-line metadata-line__key image-info__group--dl__key--panel">People</dt>
+            <dd ng-if="(ctrl.rawMetadata.peopleInImage || ctrl.userCanEdit)" class="image-info__wrap metadata-line metadata-line__info image-info__group--dl__value--panel">
                 <button data-cy="it-edit-people-button"
                         class="image-info__edit"
                         ng-if="ctrl.userCanEdit"
@@ -375,14 +375,15 @@
                                    'image-info__editor--saving': peopleInImageEditForm.$waiting,
                                    'text-input': true}">
 
-                    <span class="metadata-line__info">
-                        <span ng:repeat="person in ctrl.metadata.peopleInImage">
-                            <a ui:sref="search.results({query: (person | queryFilter:'person')})">{{person}}</a>
-                            <span ng-if="ctrl.metadata.peopleInImage.length > 1 && $index != ctrl.metadata.peopleInImage.length - 1"></span>
-                        </span>
-
-                        <span class="editable-empty" ng-if="!ctrl.metadata.peopleInImage && ctrl.userCanEdit">Unknown (click ✎ to add)</span>
-                    </span>
+                <span class="editable-empty" ng-if="!ctrl.metadata.peopleInImage && ctrl.userCanEdit">Unknown (click ✎ to add)</span>
+                <ui-list-editor-info-panel
+                        images="ctrl.selectedImages"
+                        add-to-images="ctrl.addPersonToImages"
+                        remove-from-images="ctrl.removePersonFromImages"
+                        accessor="ctrl.peopleAccessor"
+                        query-filter="queryFilter:'person'"
+                        element-name="person">
+                    </ui-list-editor-info-panel>
                 </span>
             </dd>
     </dl>
@@ -597,22 +598,14 @@
             </gr-add-label>
         </dt>
         <dd class="labels">
-            <li class="label"
-                ng-repeat="label in ctrl.selectedLabels | orderBy:'data'"
-                ng-class="{'label--partial': label.count < ctrl.selectedImages.size}">
-                <button ng-if="label.count < ctrl.selectedImages.size"
-                        class="label__add"
-                        title="Apply label to all"
-                        ng-click="ctrl.addLabel(label.data)">
-                    <gr-icon>library_add</gr-icon>
-                </button>
-                <span class="label__value">{{label.data}}</span>
-                <button class="label__remove"
-                        title="Remove label from all"
-                        ng-click="ctrl.removeLabel(label.data)">
-                    <gr-icon>close</gr-icon>
-                </button>
-            </li>
+            <ui-list-editor-info-panel
+                images="ctrl.selectedImages"
+                add-to-images="ctrl.addLabelToImages"
+                remove-from-images="ctrl.removeLabelFromImages"
+                accessor="ctrl.labelAccessor"
+                query-filter="queryLabelFilter"
+                element-name="label">
+            </ui-list-editor-info-panel>
         </dd>
     </dl>
 </div>
@@ -642,12 +635,11 @@
         <dt class="image-info__heading image-info__wrap">Keywords</dt>
         <dd class="image-info__keywords">
             <ul>
-                <li class="image-info__keyword"
-                    ng-repeat="keyword in ctrl.metadata.keywords track by $index">
-                    <a ui-sref="search.results({query: (keyword | queryFilter:'keyword')})">
-                        {{keyword}}
-                    </a>
-                </li>
+                <ui-list-editor-compact
+                    images="ctrl.selectedImages"
+                    accessor="ctrl.keywordAccessor"
+                    query-filter="queryFilter:'keyword'">
+                </ui-list-editor-compact>
             </ul>
         </dd>
     </dl>

kahuna/public/js/components/gr-image-metadata/gr-image-metadata.js

@@ -6,8 +6,8 @@ import template from './gr-image-metadata.html';
 import '../../image/service';
 import '../../edits/service';
 import '../gr-description-warning/gr-description-warning';
-import { editOptions, overwrite } from '../../util/constants/editOptions';
 import '../../util/storage';
+import { editOptions, overwrite } from '../../util/constants/editOptions';
 import '../../services/image-accessor';
 import '../../services/image-list';
 import '../../services/label';
@@ -146,16 +146,40 @@ module.controller('grImageMetadataCtrl', [
         });
     };
 
-    ctrl.addLabel = function (label) {
-      var imageArray = Array.from(ctrl.selectedImages);
-      labelService.batchAdd(imageArray, [label]);
+    ctrl.addLabelToImages = labelService.batchAdd;
+    ctrl.removeLabelFromImages = labelService.batchRemove;
+    ctrl.labelAccessor = (image) => imageAccessor.readLabels(image).map(label => label.data);
+
+    ctrl.peopleAccessor = (image) => imageAccessor.readPeopleInImage(image);
+    ctrl.removePersonFromImages = (images, removedPerson) => {
+      images.map((image) => {
+        const maybeNewPeopleInImage = ctrl.peopleAccessor(image)?.filter((person) => person !== removedPerson);
+        const newPeopleInImage = maybeNewPeopleInImage ? maybeNewPeopleInImage : [];
+        editsService.batchUpdateMetadataField(
+          [image],
+          'peopleInImage',
+          newPeopleInImage,
+          ctrl.descriptionOption
+        );
+      });
+      return Promise.resolve(ctrl.selectedImages);
     };
-
-    ctrl.removeLabel = function (label) {
-      var imageArray = Array.from(ctrl.selectedImages);
-      labelService.batchRemove(imageArray, label);
+    ctrl.addPersonToImages = (images, addedPerson) => {
+      images.map((image) => {
+        const currentPeopleInImage = ctrl.peopleAccessor(image);
+        const newPeopleInImage = currentPeopleInImage ? [...currentPeopleInImage, addedPerson] : [addedPerson];
+        editsService.batchUpdateMetadataField(
+          [image],
+          'peopleInImage',
+          newPeopleInImage,
+          ctrl.descriptionOption
+        );
+      });
+      return Promise.resolve(ctrl.selectedImages);
     };
 
+    ctrl.keywordAccessor = (image) => imageAccessor.readMetadata(image).keywords;
+
     const ignoredMetadata = [
       'title', 'description', 'copyright', 'keywords', 'byline',
       'credit', 'subLocation', 'city', 'state', 'country',

kahuna/public/js/edits/image-editor.html

@@ -229,10 +229,16 @@ <h1>Organisation and Grouping</h1>
                         active="ctrl.inputtingLabel"
                         class="result-editor__field-container__add-button">
                     </gr-add-label>
-                    <ui-labeller
-                        image="ctrl.image"
-                        with-batch="ctrl.withBatch">
-                    </ui-labeller>
+                    <ui-list-editor-upload
+                        images="ctrl.imageAsArray"
+                        with-batch="ctrl.withBatch"
+                        add-to-images="ctrl.addLabelToImages"
+                        remove-from-images="ctrl.removeLabelFromImages"
+                        accessor="ctrl.labelAccessor"
+                        query-filter="queryLabelFilter"
+                        element-name="label"
+                        element-name-plural="labels">
+                    </ui-list-editor-upload>
                 </div>
             </div>
 

kahuna/public/js/edits/image-editor.js

@@ -4,16 +4,19 @@ import './image-editor.css';
 
 import {service} from './service';
 import {imageService} from '../image/service';
+import '../services/label';
+import {imageAccessor} from '../services/image-accessor';
 import {usageRightsEditor} from '../usage-rights/usage-rights-editor';
 import {leases} from '../leases/leases';
 import {archiver} from '../components/gr-archiver-status/gr-archiver-status';
 import {collectionsApi} from '../services/api/collections-api';
 import {rememberScrollTop} from '../directives/gr-remember-scroll-top';
 
-
 export var imageEditor = angular.module('kahuna.edits.imageEditor', [
     service.name,
     imageService.name,
+    "kahuna.services.label",
+    imageAccessor.name,
     usageRightsEditor.name,
     archiver.name,
     collectionsApi.name,
@@ -28,6 +31,8 @@ imageEditor.controller('ImageEditorCtrl', [
     'editsService',
     'editsApi',
     'imageService',
+    'labelService',
+    'imageAccessor',
     'collections',
     'mediaApi',
 
@@ -37,6 +42,8 @@ imageEditor.controller('ImageEditorCtrl', [
              editsService,
              editsApi,
              imageService,
+             labelService,
+             imageAccessor,
              collections,
              mediaApi) {
 
@@ -67,6 +74,12 @@ imageEditor.controller('ImageEditorCtrl', [
 
     ctrl.undelete = undelete;
 
+    ctrl.imageAsArray = [ctrl.image];
+
+    ctrl.addLabelToImages = labelService.batchAdd;
+    ctrl.removeLabelFromImages = labelService.batchRemove;
+    ctrl.labelAccessor = (image) => imageAccessor.readLabels(image).map(label => label.data);
+
     //TODO put collections in their own directive
     ctrl.addCollection = false;
     ctrl.addToCollection = addToCollection;
@@ -135,6 +148,7 @@ imageEditor.controller('ImageEditorCtrl', [
     function onSave() {
         return ctrl.image.get().then(newImage => {
             ctrl.image = newImage;
+            ctrl.imageAsArray = [newImage];
             ctrl.usageRights = imageService(ctrl.image).usageRights;
             updateUsageRightsCategory();
             ctrl.status = ctrl.image.data.valid ? 'ready' : 'invalid';

kahuna/public/js/edits/index.js

@@ -1,7 +1,7 @@
 import angular from 'angular';
 
-import './labeller';
+import './list-editor';
 
 export var edits = angular.module('kahuna.edits', [
-    'kahuna.edits.labeller'
+    'kahuna.edits.listEditor'
 ]);