local changes

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,13 @@
                                    '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">
+                    </ui-list-editor-info-panel>
                 </span>
             </dd>
     </dl>
@@ -449,22 +448,12 @@
             </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">
+            </ui-list-editor-info-panel>
         </dd>
     </dl>
 </div>
@@ -494,12 +483,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
+                    sref="ctrl.labelSref"
+                    images="ctrl.selectedImages"
+                    accessor="ctrl.keywordAccessor">
+                </ui-list-editor-compact>
             </ul>
         </dd>
     </dl>

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

@@ -6,7 +6,7 @@ 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 { editOptions, overwrite, append } from '../../util/constants/editOptions';
 import '../../services/image-accessor';
 import '../../services/image-list';
 import '../../services/label';
@@ -100,15 +100,39 @@ 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.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.removeLabel = function (label) {
-      var imageArray = Array.from(ctrl.selectedImages);
-      labelService.batchRemove(imageArray, label);
-    };
+    ctrl.keywordAccessor = (image) => imageAccessor.readMetadata(image).keywords;
 
     const ignoredMetadata = [
       'title', 'description', 'copyright', 'keywords', 'byline',

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

@@ -207,10 +207,13 @@ <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.image]"
+                        with-batch="ctrl.withBatch"
+                        add-to-images="ctrl.addLabelToImages"
+                        remove-from-images="ctrl.removeLabelFromImages"
+                        accessor="ctrl.labelAccessor">
+                    </ui-list-editor>
                 </div>
             </div>
 

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

@@ -4,16 +4,22 @@ 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';
 
+import {List} from 'immutable';
+
 
 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 +34,8 @@ imageEditor.controller('ImageEditorCtrl', [
     'editsService',
     'editsApi',
     'imageService',
+    'labelService',
+    'imageAccessor',
     'collections',
 
     function($rootScope,
@@ -36,6 +44,8 @@ imageEditor.controller('ImageEditorCtrl', [
              editsService,
              editsApi,
              imageService,
+             labelService,
+             imageAccessor,
              collections) {
 
     var ctrl = this;
@@ -56,6 +66,11 @@ imageEditor.controller('ImageEditorCtrl', [
     ctrl.invalidReasons = ctrl.image.data.invalidReasons;
     ctrl.systemName = window._clientConfig.systemName;
 
+    ctrl.addLabelToImages = labelService.batchAdd;
+    ctrl.removeLabelFromImages = labelService.batchRemove;
+    ctrl.labelAccessor = (image) => imageAccessor.readLabels(image).map(label => label.data);
+    ctrl.labelSref = (element) => {debugger; return search.results({query:(element | queryLabelFilter)})};
+
     //TODO put collections in their own directive
     ctrl.addCollection = false;
     ctrl.addToCollection = addToCollection;

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'
 ]);

kahuna/public/js/edits/list-editor-compact.html

@@ -0,0 +1,16 @@
+<div>
+    <ul ng-if="ctrl.plainList.length > 0">
+        <li class="element"
+            ng-repeat="element in ctrl.plainList">
+
+            <span ng-if="ctrl.disabled" class="element__value element__value--compact">{{element}}</span>
+            <h1>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</h1>
+            <h1>{{ctrl.sref(element)}}</h1>
+            <a class="element__value element__value--compact element__link"
+               ng-if="!ctrl.disabled"
+               ui-sref="search.results({query: ctrl.sref(element)})">
+                {{element}}
+            </a>
+        </li>
+    </ul>
+</div>

kahuna/public/js/edits/list-editor-info-panel.html

@@ -0,0 +1,16 @@
+<li class="element"
+    ng-repeat="element in ctrl.listWithOccurrences"
+    ng-class="{'element--partial': element.count < ctrl.images.size}">
+    <button ng-if="element.count < ctrl.images.size"
+            class="element__add"
+            title="Apply element to all"
+            ng-click="ctrl.addElements([element.data])">
+        <gr-icon>library_add</gr-icon>
+    </button>
+    <span class="element__value">{{element.data}}</span>
+    <button class="element__remove"
+            title="Remove element from all"
+            ng-click="ctrl.removeElement(element.data)">
+        <gr-icon>close</gr-icon>
+    </button>
+</li>

kahuna/public/js/edits/list-editor-upload.html

@@ -0,0 +1,32 @@
+<div>
+    <span ng-if="ctrl.withBatch" class="labeller__apply-all">
+        <button
+            title="Apply these labels to all your current uploads"
+            ng-if="!ctrl.confirmDelete"
+            ng-click="ctrl.batchApply()"
+        >⇔</button>
+
+        <button title="Remove ALL labels"
+                class="button button--confirm-delete"
+                ng-if="ctrl.confirmDelete"
+                ng-click="ctrl.batchRemove()">
+            <gr-icon>warning</gr-icon>Remove ALL labels in job?
+        </button>
+    </span>
+
+    <ul ng-if="ctrl.plainList.length > 0">
+        <li class="element"
+            ng-repeat="element in ctrl.plainList"
+            ng-class="{'element--removing': ctrl.elementsBeingRemoved.has(element)}">
+            <a ui-sref="search.results({query: (element | queryLabelFilter)})"
+               class="element__value element__link">{{element}}</a>
+
+            <button data-cy="it-remove-label-button"
+                    class="element__remove"
+                    title="Remove label"
+                    ng-click="ctrl.removeElement(element)">
+                <gr-icon>close</gr-icon>
+            </button>
+        </li>
+    </ul>
+</div>