From 33f7997450f10db054ddfa065ba7d1a6c54d80a3 Mon Sep 17 00:00:00 2001 From: Adriel Ulanovsky Date: Thu, 28 Oct 2021 12:38:04 -0300 Subject: [PATCH 1/7] Generic-UI-list-editor: WIP 1, replace labeller template --- .../components/gr-add-label/gr-add-label.js | 9 +- kahuna/public/js/edits/image-editor.html | 4 +- kahuna/public/js/edits/index.js | 4 +- .../public/js/edits/list-editor-compact.html | 16 +++ kahuna/public/js/edits/list-editor.css | 90 ++++++++++++ kahuna/public/js/edits/list-editor.html | 33 +++++ kahuna/public/js/edits/list-editor.js | 129 ++++++++++++++++++ kahuna/public/js/preview/image-large.html | 4 +- kahuna/public/js/preview/image.html | 4 +- 9 files changed, 282 insertions(+), 11 deletions(-) create mode 100644 kahuna/public/js/edits/list-editor-compact.html create mode 100644 kahuna/public/js/edits/list-editor.css create mode 100644 kahuna/public/js/edits/list-editor.html create mode 100644 kahuna/public/js/edits/list-editor.js diff --git a/kahuna/public/js/components/gr-add-label/gr-add-label.js b/kahuna/public/js/components/gr-add-label/gr-add-label.js index e4e0dcc706..e4ef83f22f 100644 --- a/kahuna/public/js/components/gr-add-label/gr-add-label.js +++ b/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(); + }); } diff --git a/kahuna/public/js/edits/image-editor.html b/kahuna/public/js/edits/image-editor.html index 34fe919bb2..6dc8e8053a 100644 --- a/kahuna/public/js/edits/image-editor.html +++ b/kahuna/public/js/edits/image-editor.html @@ -207,10 +207,10 @@

Organisation and Grouping

active="ctrl.inputtingLabel" class="result-editor__field-container__add-button"> - - + diff --git a/kahuna/public/js/edits/index.js b/kahuna/public/js/edits/index.js index 95040f8f08..6913ff8adf 100644 --- a/kahuna/public/js/edits/index.js +++ b/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' ]); diff --git a/kahuna/public/js/edits/list-editor-compact.html b/kahuna/public/js/edits/list-editor-compact.html new file mode 100644 index 0000000000..83d52561f8 --- /dev/null +++ b/kahuna/public/js/edits/list-editor-compact.html @@ -0,0 +1,16 @@ +
+ +
diff --git a/kahuna/public/js/edits/list-editor.css b/kahuna/public/js/edits/list-editor.css new file mode 100644 index 0000000000..009991eb1f --- /dev/null +++ b/kahuna/public/js/edits/list-editor.css @@ -0,0 +1,90 @@ +ui-labeller, +ui-labeller-compact { + display: block; +} + +.labeller { + font-size: 1.3rem; + display: flex; +} + +.label { + color: white; + display: inline-flex; + justify-content: space-between; + margin: 0 5px 5px 0; +} + +.label--removing { + background-color: #99ddff; +} + +/* +label--partial is part of gr-panel. +TODO refactor gr-panel to use common labeller component +*/ +.label--partial .label__value, +.label--partial .label__add, +.label--partial .label__remove { + background-color: white; + color: #00adee; +} + +.label__value, +.label__remove { + color: white; + background-color: #00adee; +} + +.label__link:hover, +.label__remove:hover { + color: #00adee; + background-color: white; +} + +.label__add, +.label__value { + border-top-left-radius: 2px; + border-bottom-left-radius: 2px; +} + +.label--partial .label__value { + border-radius: 0px; +} + +.label__value { + padding: 0 5px; +} + +.label__value--compact { + border-radius: 2px; +} + +.label__remove { + border-top-right-radius: 2px; + border-bottom-right-radius: 2px; +} + +.label button:hover gr-icon { + color: #333; +} + +.label button:active gr-icon { + background-color: #008fc5; + color: #333; +} + +.label--partial button:active gr-icon { + background-color: #CFCFCF; + color: #333; +} + +.labeller__apply-all { + margin-left: 10px; + line-height: 20px; + font-size: 1.6rem; +} + +.labeller__apply-all:hover { + color: #FFF; +} diff --git a/kahuna/public/js/edits/list-editor.html b/kahuna/public/js/edits/list-editor.html new file mode 100644 index 0000000000..1b0a8ccd29 --- /dev/null +++ b/kahuna/public/js/edits/list-editor.html @@ -0,0 +1,33 @@ +
+ + + + + + + +
diff --git a/kahuna/public/js/edits/list-editor.js b/kahuna/public/js/edits/list-editor.js new file mode 100644 index 0000000000..e08b8f02ff --- /dev/null +++ b/kahuna/public/js/edits/list-editor.js @@ -0,0 +1,129 @@ +import angular from 'angular'; +import template from './list-editor.html'; +import templateCompact from './list-editor-compact.html'; +import './list-editor.css'; + +import '../search/query-filter'; +import '../services/label'; + +export var listEditor = angular.module('kahuna.edits.listEditor', [ + 'kahuna.search.filters.query', + 'kahuna.services.label' +]); + +listEditor.controller('ListEditorCtrl', [ + '$rootScope', + '$scope', + '$window', + '$timeout', + 'labelService', + function($rootScope, + $scope, + $window, + $timeout, + labelService) { + + var ctrl = this; + + $scope.$watch(() => ctrl.image.data.userMetadata.data.labels, newLabels => { + ctrl.labels = newLabels; + }); + + function saveFailed(e) { + console.error(e); + $window.alert('Something went wrong when saving, please try again!'); + } + + ctrl.addLabels = labels => { + ctrl.adding = true; + + labelService.add(ctrl.image, labels) + .then(img => { + ctrl.image = img; + ctrl.labels = ctrl.image.data.userMetadata.data.labels; + }) + .catch(saveFailed) + .finally(() => { + ctrl.adding = false; + }); + }; + + ctrl.labelsBeingRemoved = new Set(); + ctrl.removeLabel = label => { + ctrl.labelsBeingRemoved.add(label); + + labelService.remove(ctrl.image, label) + .then(img => { + ctrl.image = img; + ctrl.labels = ctrl.image.data.userMetadata.data.labels; + }) + .catch(saveFailed) + .finally(() => { + ctrl.labelsBeingRemoved.delete(label); + }); + }; + + ctrl.removeLabels = () => { + ctrl.labels.data.map(label => ctrl.removeLabel(label.data)); + }; + + const batchAddLabelsEvent = 'events:batch-apply:add-labels'; + const batchRemoveLabelsEvent = 'events:batch-apply:remove-labels'; + + if (Boolean(ctrl.withBatch)) { + $scope.$on(batchAddLabelsEvent, (e, labels) => ctrl.addLabels(labels)); + $scope.$on(batchRemoveLabelsEvent, () => ctrl.removeLabels()); + + ctrl.batchApplyLabels = () => { + var labels = ctrl.labels.data.map(label => label.data); + + if (labels.length > 0) { + $rootScope.$broadcast(batchAddLabelsEvent, labels); + } else { + ctrl.confirmDelete = true; + + $timeout(() => { + ctrl.confirmDelete = false; + }, 5000); + } + }; + + ctrl.batchRemoveLabels = () => { + ctrl.confirmDelete = false; + $rootScope.$broadcast(batchRemoveLabelsEvent); + }; + } + +}]); + +listEditor.directive('uiListEditor', [function() { + return { + restrict: 'E', + scope: { + // Annoying that we can't make a uni-directional binding + // as we don't really want to modify the original + image: '=', + withBatch: '=?' + }, + controller: 'ListEditorCtrl', + controllerAs: 'ctrl', + bindToController: true, + template: template + }; +}]); + +listEditor.directive('uiListEditorCompact', [function() { + return { + restrict: 'E', + scope: { + // Annoying that we can't make a uni-directional binding + // as we don't really want to modify the original + image: '=', + disabled: '=' + }, + controller: 'ListEditorCtrl', + controllerAs: 'ctrl', + bindToController: true, + template: templateCompact + }; +}]); diff --git a/kahuna/public/js/preview/image-large.html b/kahuna/public/js/preview/image-large.html index 25a7e04e49..63b1c48ac0 100644 --- a/kahuna/public/js/preview/image-large.html +++ b/kahuna/public/js/preview/image-large.html @@ -70,11 +70,11 @@ - - + - - + Date: Mon, 8 Nov 2021 23:45:59 -0300 Subject: [PATCH 2/7] WIP --- kahuna/public/js/edits/image-editor.html | 7 +- kahuna/public/js/edits/image-editor.js | 14 +++ .../public/js/edits/list-editor-compact.html | 10 +- kahuna/public/js/edits/list-editor.html | 16 +-- kahuna/public/js/edits/list-editor.js | 100 +++++++++++------- kahuna/public/js/preview/image-large.html | 7 +- kahuna/public/js/preview/image.html | 7 +- kahuna/public/js/preview/image.js | 19 +++- kahuna/public/js/services/image-accessor.js | 4 + kahuna/public/js/services/image-logic.js | 5 + 10 files changed, 130 insertions(+), 59 deletions(-) diff --git a/kahuna/public/js/edits/image-editor.html b/kahuna/public/js/edits/image-editor.html index 6dc8e8053a..823655f901 100644 --- a/kahuna/public/js/edits/image-editor.html +++ b/kahuna/public/js/edits/image-editor.html @@ -208,8 +208,11 @@

Organisation and Grouping

class="result-editor__field-container__add-button"> + images="[ctrl.image]" + with-batch="ctrl.withBatch" + add-to-images="ctrl.addLabelToImages" + remove-from-images="ctrl.removeLabelFromImages" + accessor="ctrl.labelAccessor"> diff --git a/kahuna/public/js/edits/image-editor.js b/kahuna/public/js/edits/image-editor.js index 44c92112e9..1f436bc6b1 100644 --- a/kahuna/public/js/edits/image-editor.js +++ b/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,10 @@ 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) => List(imageAccessor.readLabels(image)).map(label => label.data); + //TODO put collections in their own directive ctrl.addCollection = false; ctrl.addToCollection = addToCollection; diff --git a/kahuna/public/js/edits/list-editor-compact.html b/kahuna/public/js/edits/list-editor-compact.html index 83d52561f8..a01bf6c8c0 100644 --- a/kahuna/public/js/edits/list-editor-compact.html +++ b/kahuna/public/js/edits/list-editor-compact.html @@ -1,15 +1,15 @@
diff --git a/kahuna/public/js/edits/list-editor.html b/kahuna/public/js/edits/list-editor.html index 1b0a8ccd29..455b2e9b96 100644 --- a/kahuna/public/js/edits/list-editor.html +++ b/kahuna/public/js/edits/list-editor.html @@ -3,29 +3,29 @@
    + ng-if="ctrl.list.length > 0">
  • - {{label.data}} + ng-repeat="element in ctrl.list" + ng-class="{'label--removing': ctrl.elementsBeingRemoved.has(element)}"> + {{element}}
    • diff --git a/kahuna/public/js/edits/list-editor.js b/kahuna/public/js/edits/list-editor.js index e08b8f02ff..501bf1689d 100644 --- a/kahuna/public/js/edits/list-editor.js +++ b/kahuna/public/js/edits/list-editor.js @@ -1,14 +1,14 @@ import angular from 'angular'; import template from './list-editor.html'; import templateCompact from './list-editor-compact.html'; +import {List} from 'immutable'; import './list-editor.css'; import '../search/query-filter'; -import '../services/label'; export var listEditor = angular.module('kahuna.edits.listEditor', [ 'kahuna.search.filters.query', - 'kahuna.services.label' + 'kahuna.services.image-logic', ]); listEditor.controller('ListEditorCtrl', [ @@ -16,31 +16,44 @@ listEditor.controller('ListEditorCtrl', [ '$scope', '$window', '$timeout', - 'labelService', - function($rootScope, + 'imageLogic', + function($rootScope, $scope, $window, $timeout, - labelService) { - + imageLogic) { var ctrl = this; - $scope.$watch(() => ctrl.image.data.userMetadata.data.labels, newLabels => { - ctrl.labels = newLabels; + const retrieveElements = (images) => List(images).flatMap(img => ctrl.accessor(img)).toArray(); + + $scope.$watchCollection('ctrl.images', updatedImages => { + debugger; + updateHandler(updatedImages); + }, true); + + const updateHandler = (updatedImages) => { + ctrl.images = ctrl.images.map(img => updatedImages.find(x => imageLogic.isSameImage(x, img)) || img); + ctrl.list = retrieveElements(ctrl.images); + }; + + const updateListener = $rootScope.$on('images-updated', (e, updatedImages) => { + updateHandler(updatedImages); }); - function saveFailed(e) { - console.error(e); + ctrl.list = retrieveElements(ctrl.images); + + function saveFailed(e) { + console.error(e); $window.alert('Something went wrong when saving, please try again!'); } - ctrl.addLabels = labels => { + ctrl.addElements = elements => { ctrl.adding = true; - labelService.add(ctrl.image, labels) - .then(img => { - ctrl.image = img; - ctrl.labels = ctrl.image.data.userMetadata.data.labels; + ctrl.addToImages(ctrl.images, elements) + .then(imgs => { + ctrl.images = imgs; + ctrl.list = retrieveElements(ctrl.images); }) .catch(saveFailed) .finally(() => { @@ -48,37 +61,37 @@ listEditor.controller('ListEditorCtrl', [ }); }; - ctrl.labelsBeingRemoved = new Set(); - ctrl.removeLabel = label => { - ctrl.labelsBeingRemoved.add(label); + ctrl.elementsBeingRemoved = new Set(); + ctrl.removeElement = element => { + ctrl.elementsBeingRemoved.add(element); - labelService.remove(ctrl.image, label) - .then(img => { - ctrl.image = img; - ctrl.labels = ctrl.image.data.userMetadata.data.labels; + ctrl.removeFromImages(ctrl.images, element) + .then(imgs => { + ctrl.images = imgs; + ctrl.list = retrieveElements(ctrl.images); }) .catch(saveFailed) .finally(() => { - ctrl.labelsBeingRemoved.delete(label); + ctrl.elementsBeingRemoved.delete(element); }); }; - ctrl.removeLabels = () => { - ctrl.labels.data.map(label => ctrl.removeLabel(label.data)); + ctrl.removeAll = () => { + ctrl.list.forEach(element => ctrl.removeFromImages(ctrl.images, element)); }; - const batchAddLabelsEvent = 'events:batch-apply:add-labels'; - const batchRemoveLabelsEvent = 'events:batch-apply:remove-labels'; + const batchAddEvent = 'events:batch-apply:add-all'; + const batchRemoveEvent = 'events:batch-apply:remove-all'; if (Boolean(ctrl.withBatch)) { - $scope.$on(batchAddLabelsEvent, (e, labels) => ctrl.addLabels(labels)); - $scope.$on(batchRemoveLabelsEvent, () => ctrl.removeLabels()); + $scope.$on(batchAddEvent, (e, elements) => ctrl.addElements(elements)); + $scope.$on(batchRemoveEvent, () => ctrl.removeAll()); - ctrl.batchApplyLabels = () => { - var labels = ctrl.labels.data.map(label => label.data); + ctrl.batchApply = () => { + var elements = ctrl.list; - if (labels.length > 0) { - $rootScope.$broadcast(batchAddLabelsEvent, labels); + if (elements.length > 0) { + $rootScope.$broadcast(batchAddEvent, elements); } else { ctrl.confirmDelete = true; @@ -88,12 +101,15 @@ listEditor.controller('ListEditorCtrl', [ } }; - ctrl.batchRemoveLabels = () => { + ctrl.batchRemove = () => { ctrl.confirmDelete = false; - $rootScope.$broadcast(batchRemoveLabelsEvent); + $rootScope.$broadcast(batchRemoveEvent); }; } + $scope.$on('$destroy', function() { + updateListener(); + }); }]); listEditor.directive('uiListEditor', [function() { @@ -102,8 +118,11 @@ listEditor.directive('uiListEditor', [function() { scope: { // Annoying that we can't make a uni-directional binding // as we don't really want to modify the original - image: '=', - withBatch: '=?' + images: '=', + withBatch: '=?', + addToImages: '=', + removeFromImages: '=', + accessor: '=' }, controller: 'ListEditorCtrl', controllerAs: 'ctrl', @@ -118,8 +137,11 @@ listEditor.directive('uiListEditorCompact', [function() { scope: { // Annoying that we can't make a uni-directional binding // as we don't really want to modify the original - image: '=', - disabled: '=' + images: '=', + disabled: '=', + addToImages: '=', + removeFromImages: '=', + accessor: '=' }, controller: 'ListEditorCtrl', controllerAs: 'ctrl', diff --git a/kahuna/public/js/preview/image-large.html b/kahuna/public/js/preview/image-large.html index 63b1c48ac0..a92a436ac9 100644 --- a/kahuna/public/js/preview/image-large.html +++ b/kahuna/public/js/preview/image-large.html @@ -71,9 +71,12 @@
+ ng-if="!ctrl.inputtingLabel" + add-to-images="ctrl.addLabelToImages" + remove-from-images="ctrl.removeLabelFromImages" + accessor="ctrl.labelAccessor"> + ng-if="!ctrl.inputtingLabel" + add-to-images="ctrl.addLabelToImages" + remove-from-images="ctrl.removeLabelFromImages" + accessor="ctrl.labelAccessor"> ctrl.image, (newImage) => { + debugger; + }) + + ctrl.addLabelToImages = labelService.batchAdd; + ctrl.removeLabelFromImages = labelService.batchRemove; + ctrl.labelAccessor = (image) => List(imageAccessor.readLabels(image)).map(label => label.data); + const updateImage = (updatedImage) => { ctrl.states = imageService(updatedImage).states; ctrl.image = updatedImage; diff --git a/kahuna/public/js/services/image-accessor.js b/kahuna/public/js/services/image-accessor.js index ba833deee2..8d33160b1f 100644 --- a/kahuna/public/js/services/image-accessor.js +++ b/kahuna/public/js/services/image-accessor.js @@ -15,6 +15,9 @@ imageAccessor.factory('imageAccessor', function() { /* == Readers == (return data) */ + function readId(image) { + return image.data.id; + } function readCost(image) { return image.data.cost; @@ -80,6 +83,7 @@ imageAccessor.factory('imageAccessor', function() { } return { + readId, readCost, readLabels, readLeases, diff --git a/kahuna/public/js/services/image-logic.js b/kahuna/public/js/services/image-logic.js index d39d1d0dbe..eebb38fe09 100644 --- a/kahuna/public/js/services/image-logic.js +++ b/kahuna/public/js/services/image-logic.js @@ -11,6 +11,10 @@ export const imageLogic = angular.module('kahuna.services.image-logic', [ */ imageLogic.factory('imageLogic', ['imageAccessor', function(imageAccessor) { + function isSameImage(image1, image2) { + return imageAccessor.readId(image1) === imageAccessor.readId(image2); + } + function canBeDeleted(image) { return image.getAction('delete').then(action => !! action); } @@ -101,6 +105,7 @@ imageLogic.factory('imageLogic', ['imageAccessor', function(imageAccessor) { } return { + isSameImage, canBeDeleted, canBeArchived, getArchivedState, From 96bb171d74b62465ac2c94c7ef8cc4f3109ab1dc Mon Sep 17 00:00:00 2001 From: Adriel Ulanovsky Date: Thu, 11 Nov 2021 09:41:42 -0300 Subject: [PATCH 3/7] WIP: Working upload and preview --- kahuna/public/js/edits/list-editor.js | 5 +---- kahuna/public/js/preview/image-large.html | 4 ++-- kahuna/public/js/preview/image.html | 4 ++-- kahuna/public/js/preview/image.js | 4 +++- 4 files changed, 8 insertions(+), 9 deletions(-) diff --git a/kahuna/public/js/edits/list-editor.js b/kahuna/public/js/edits/list-editor.js index 501bf1689d..b480801362 100644 --- a/kahuna/public/js/edits/list-editor.js +++ b/kahuna/public/js/edits/list-editor.js @@ -26,10 +26,7 @@ listEditor.controller('ListEditorCtrl', [ const retrieveElements = (images) => List(images).flatMap(img => ctrl.accessor(img)).toArray(); - $scope.$watchCollection('ctrl.images', updatedImages => { - debugger; - updateHandler(updatedImages); - }, true); + $scope.$watchCollection('ctrl.images', updatedImages => updateHandler(updatedImages)); const updateHandler = (updatedImages) => { ctrl.images = ctrl.images.map(img => updatedImages.find(x => imageLogic.isSameImage(x, img)) || img); diff --git a/kahuna/public/js/preview/image-large.html b/kahuna/public/js/preview/image-large.html index a92a436ac9..26894902c4 100644 --- a/kahuna/public/js/preview/image-large.html +++ b/kahuna/public/js/preview/image-large.html @@ -71,7 +71,7 @@ diff --git a/kahuna/public/js/preview/image.html b/kahuna/public/js/preview/image.html index 55cd5cfe37..78b6bc0c87 100644 --- a/kahuna/public/js/preview/image.html +++ b/kahuna/public/js/preview/image.html @@ -63,7 +63,7 @@ diff --git a/kahuna/public/js/preview/image.js b/kahuna/public/js/preview/image.js index ce66fa6a4b..cff54c749d 100644 --- a/kahuna/public/js/preview/image.js +++ b/kahuna/public/js/preview/image.js @@ -49,17 +49,19 @@ image.controller('uiPreviewImageCtrl', [ var ctrl = this; $scope.$watch(() => ctrl.image, (newImage) => { - debugger; + ctrl.imageAsArray = [newImage]; }) ctrl.addLabelToImages = labelService.batchAdd; ctrl.removeLabelFromImages = labelService.batchRemove; ctrl.labelAccessor = (image) => List(imageAccessor.readLabels(image)).map(label => label.data); + ctrl.imageAsArray = [ctrl.image]; const updateImage = (updatedImage) => { ctrl.states = imageService(updatedImage).states; ctrl.image = updatedImage; ctrl.flagState = ctrl.states.costState; + ctrl.imageAsArray = [updatedImage]; }; const freeImagesUpdateListener = $rootScope.$on('images-updated', (e, updatedImages) => { From a543f203f2d359c493d8f8d750bf0fac518bdf91 Mon Sep 17 00:00:00 2001 From: Adriel Ulanovsky Date: Thu, 11 Nov 2021 17:02:58 -0300 Subject: [PATCH 4/7] WIP: info panel working --- .../gr-image-metadata/gr-image-metadata.html | 22 ++----- .../gr-image-metadata/gr-image-metadata.js | 12 +--- kahuna/public/js/edits/image-editor.html | 2 +- kahuna/public/js/edits/image-editor.js | 2 +- .../public/js/edits/list-editor-compact.html | 4 +- .../js/edits/list-editor-info-panel.html | 16 +++++ ...st-editor.html => list-editor-upload.html} | 4 +- kahuna/public/js/edits/list-editor.js | 58 +++++++++++++------ kahuna/public/js/preview/image.js | 2 +- 9 files changed, 73 insertions(+), 49 deletions(-) create mode 100644 kahuna/public/js/edits/list-editor-info-panel.html rename kahuna/public/js/edits/{list-editor.html => list-editor-upload.html} (92%) diff --git a/kahuna/public/js/components/gr-image-metadata/gr-image-metadata.html b/kahuna/public/js/components/gr-image-metadata/gr-image-metadata.html index 78a58b1d5b..01bece9041 100644 --- a/kahuna/public/js/components/gr-image-metadata/gr-image-metadata.html +++ b/kahuna/public/js/components/gr-image-metadata/gr-image-metadata.html @@ -449,22 +449,12 @@
-
  • - - {{label.data}} - -
    • + +
    diff --git a/kahuna/public/js/components/gr-image-metadata/gr-image-metadata.js b/kahuna/public/js/components/gr-image-metadata/gr-image-metadata.js index e45a3b71eb..80239c3f1f 100644 --- a/kahuna/public/js/components/gr-image-metadata/gr-image-metadata.js +++ b/kahuna/public/js/components/gr-image-metadata/gr-image-metadata.js @@ -100,15 +100,9 @@ module.controller('grImageMetadataCtrl', [ ); }; - ctrl.addLabel = function (label) { - var imageArray = Array.from(ctrl.selectedImages); - labelService.batchAdd(imageArray, [label]); - }; - - ctrl.removeLabel = function (label) { - var imageArray = Array.from(ctrl.selectedImages); - labelService.batchRemove(imageArray, label); - }; + ctrl.addLabelToImages = labelService.batchAdd; + ctrl.removeLabelFromImages = labelService.batchRemove; + ctrl.labelAccessor = (image) => imageAccessor.readLabels(image).map(label => label.data); const ignoredMetadata = [ 'title', 'description', 'copyright', 'keywords', 'byline', diff --git a/kahuna/public/js/edits/image-editor.html b/kahuna/public/js/edits/image-editor.html index 823655f901..b7d251e0e9 100644 --- a/kahuna/public/js/edits/image-editor.html +++ b/kahuna/public/js/edits/image-editor.html @@ -207,7 +207,7 @@

    Organisation and Grouping

    active="ctrl.inputtingLabel" class="result-editor__field-container__add-button">     - List(imageAccessor.readLabels(image)).map(label => label.data); + ctrl.labelAccessor = (image) => imageAccessor.readLabels(image).map(label => label.data); //TODO put collections in their own directive ctrl.addCollection = false; diff --git a/kahuna/public/js/edits/list-editor-compact.html b/kahuna/public/js/edits/list-editor-compact.html index a01bf6c8c0..598803f830 100644 --- a/kahuna/public/js/edits/list-editor-compact.html +++ b/kahuna/public/js/edits/list-editor-compact.html @@ -1,8 +1,8 @@
      + ng-if="ctrl.plainList.length > 0">
    • + ng-repeat="element in ctrl.plainList"> {{element}} diff --git a/kahuna/public/js/edits/list-editor-info-panel.html b/kahuna/public/js/edits/list-editor-info-panel.html new file mode 100644 index 0000000000..fe69ce2e41 --- /dev/null +++ b/kahuna/public/js/edits/list-editor-info-panel.html @@ -0,0 +1,16 @@ +
    • + + {{element.data}} + +
      • diff --git a/kahuna/public/js/edits/list-editor.html b/kahuna/public/js/edits/list-editor-upload.html similarity index 92% rename from kahuna/public/js/edits/list-editor.html rename to kahuna/public/js/edits/list-editor-upload.html index 455b2e9b96..67cf346f00 100644 --- a/kahuna/public/js/edits/list-editor.html +++ b/kahuna/public/js/edits/list-editor-upload.html @@ -15,9 +15,9 @@
        + ng-if="ctrl.plainList.length > 0">
      • {{element}} diff --git a/kahuna/public/js/edits/list-editor.js b/kahuna/public/js/edits/list-editor.js index b480801362..fc45f83e2a 100644 --- a/kahuna/public/js/edits/list-editor.js +++ b/kahuna/public/js/edits/list-editor.js @@ -1,8 +1,10 @@ import angular from 'angular'; -import template from './list-editor.html'; +import templateUpload from './list-editor-upload.html'; import templateCompact from './list-editor-compact.html'; +import templateInfoPanel from './list-editor-info-panel.html'; import {List} from 'immutable'; import './list-editor.css'; +import '../services/image-list'; import '../search/query-filter'; @@ -17,27 +19,32 @@ listEditor.controller('ListEditorCtrl', [ '$window', '$timeout', 'imageLogic', + 'imageList', function($rootScope, $scope, $window, $timeout, - imageLogic) { + imageLogic, + imageList) { var ctrl = this; - const retrieveElements = (images) => List(images).flatMap(img => ctrl.accessor(img)).toArray(); + const retrieveElementsWithOccurrences = (images) => imageList.getOccurrences(images.flatMap(img => ctrl.accessor(img))); $scope.$watchCollection('ctrl.images', updatedImages => updateHandler(updatedImages)); - const updateHandler = (updatedImages) => { - ctrl.images = ctrl.images.map(img => updatedImages.find(x => imageLogic.isSameImage(x, img)) || img); - ctrl.list = retrieveElements(ctrl.images); + const updateHandler = (maybeUpdatedImages) => { + const updatedImages = ctrl.images.map(img => maybeUpdatedImages.find(x => imageLogic.isSameImage(x, img)) || img); + ctrl.listWithOccurrences = retrieveElementsWithOccurrences(updatedImages); + ctrl.plainList = ctrl.listWithOccurrences.map(x => x.data); + }; const updateListener = $rootScope.$on('images-updated', (e, updatedImages) => { updateHandler(updatedImages); }); - ctrl.list = retrieveElements(ctrl.images); + ctrl.listWithOccurrences = retrieveElementsWithOccurrences(ctrl.images); + ctrl.plainList = ctrl.listWithOccurrences.map(x => x.data); function saveFailed(e) { console.error(e); @@ -49,8 +56,7 @@ listEditor.controller('ListEditorCtrl', [ ctrl.addToImages(ctrl.images, elements) .then(imgs => { - ctrl.images = imgs; - ctrl.list = retrieveElements(ctrl.images); + updateHandler(imgs); }) .catch(saveFailed) .finally(() => { @@ -64,8 +70,7 @@ listEditor.controller('ListEditorCtrl', [ ctrl.removeFromImages(ctrl.images, element) .then(imgs => { - ctrl.images = imgs; - ctrl.list = retrieveElements(ctrl.images); + updateHandler(imgs); }) .catch(saveFailed) .finally(() => { @@ -74,7 +79,7 @@ listEditor.controller('ListEditorCtrl', [ }; ctrl.removeAll = () => { - ctrl.list.forEach(element => ctrl.removeFromImages(ctrl.images, element)); + ctrl.plainList.forEach(element => ctrl.removeFromImages(ctrl.images, element)); }; const batchAddEvent = 'events:batch-apply:add-all'; @@ -85,7 +90,7 @@ listEditor.controller('ListEditorCtrl', [ $scope.$on(batchRemoveEvent, () => ctrl.removeAll()); ctrl.batchApply = () => { - var elements = ctrl.list; + var elements = ctrl.plainList; if (elements.length > 0) { $rootScope.$broadcast(batchAddEvent, elements); @@ -109,13 +114,13 @@ listEditor.controller('ListEditorCtrl', [ }); }]); -listEditor.directive('uiListEditor', [function() { +listEditor.directive('uiListEditorUpload', [function() { return { restrict: 'E', scope: { // Annoying that we can't make a uni-directional binding // as we don't really want to modify the original - images: '=', + images: '<', withBatch: '=?', addToImages: '=', removeFromImages: '=', @@ -124,7 +129,7 @@ listEditor.directive('uiListEditor', [function() { controller: 'ListEditorCtrl', controllerAs: 'ctrl', bindToController: true, - template: template + template: templateUpload }; }]); @@ -134,7 +139,7 @@ listEditor.directive('uiListEditorCompact', [function() { scope: { // Annoying that we can't make a uni-directional binding // as we don't really want to modify the original - images: '=', + images: '<', disabled: '=', addToImages: '=', removeFromImages: '=', @@ -146,3 +151,22 @@ listEditor.directive('uiListEditorCompact', [function() { template: templateCompact }; }]); + +listEditor.directive('uiListEditorInfoPanel', [function() { + return { + restrict: 'E', + scope: { + // Annoying that we can't make a uni-directional binding + // as we don't really want to modify the original + images: '<', + disabled: '<', + addToImages: '<', + removeFromImages: '<', + accessor: '<' + }, + controller: 'ListEditorCtrl', + controllerAs: 'ctrl', + bindToController: true, + template: templateInfoPanel + }; +}]); \ No newline at end of file diff --git a/kahuna/public/js/preview/image.js b/kahuna/public/js/preview/image.js index cff54c749d..291de75b16 100644 --- a/kahuna/public/js/preview/image.js +++ b/kahuna/public/js/preview/image.js @@ -54,7 +54,7 @@ image.controller('uiPreviewImageCtrl', [ ctrl.addLabelToImages = labelService.batchAdd; ctrl.removeLabelFromImages = labelService.batchRemove; - ctrl.labelAccessor = (image) => List(imageAccessor.readLabels(image)).map(label => label.data); + ctrl.labelAccessor = (image) => imageAccessor.readLabels(image).map(label => label.data); ctrl.imageAsArray = [ctrl.image]; const updateImage = (updatedImage) => { From b1328712aa0c8015beb772aae809698e5522d1d5 Mon Sep 17 00:00:00 2001 From: Adriel Ulanovsky Date: Tue, 23 Nov 2021 08:09:41 -0300 Subject: [PATCH 5/7] WIP: Working, remaining bits: queryfilter, css --- .../gr-image-metadata/gr-image-metadata.html | 30 ++++++------ .../gr-image-metadata/gr-image-metadata.js | 32 ++++++++++++- kahuna/public/js/edits/image-editor.js | 1 + .../public/js/edits/list-editor-compact.html | 13 +++-- .../js/edits/list-editor-info-panel.html | 14 +++--- .../public/js/edits/list-editor-upload.html | 13 +++-- kahuna/public/js/edits/list-editor.css | 47 ++++++++++--------- kahuna/public/js/edits/list-editor.js | 4 +- kahuna/public/js/preview/image-large.html | 3 +- kahuna/public/js/preview/image.html | 3 +- kahuna/public/js/preview/image.js | 1 + kahuna/public/js/services/image-accessor.js | 5 ++ kahuna/public/stylesheets/main.css | 8 ++-- 13 files changed, 106 insertions(+), 68 deletions(-) diff --git a/kahuna/public/js/components/gr-image-metadata/gr-image-metadata.html b/kahuna/public/js/components/gr-image-metadata/gr-image-metadata.html index 01bece9041..37bf72995c 100644 --- a/kahuna/public/js/components/gr-image-metadata/gr-image-metadata.html +++ b/kahuna/public/js/components/gr-image-metadata/gr-image-metadata.html @@ -358,8 +358,8 @@ -
        People
        -
        +
        People
        +
        @@ -484,12 +483,11 @@
        Keywords
        diff --git a/kahuna/public/js/components/gr-image-metadata/gr-image-metadata.js b/kahuna/public/js/components/gr-image-metadata/gr-image-metadata.js index 80239c3f1f..618c48179f 100644 --- a/kahuna/public/js/components/gr-image-metadata/gr-image-metadata.js +++ b/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'; @@ -104,6 +104,36 @@ module.controller('grImageMetadataCtrl', [ 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.keywordAccessor = (image) => imageAccessor.readMetadata(image).keywords; + const ignoredMetadata = [ 'title', 'description', 'copyright', 'keywords', 'byline', 'credit', 'subLocation', 'city', 'state', 'country', diff --git a/kahuna/public/js/edits/image-editor.js b/kahuna/public/js/edits/image-editor.js index c8c6c1fa05..91f518fb1b 100644 --- a/kahuna/public/js/edits/image-editor.js +++ b/kahuna/public/js/edits/image-editor.js @@ -69,6 +69,7 @@ imageEditor.controller('ImageEditorCtrl', [ ctrl.addLabelToImages = labelService.batchAdd; ctrl.removeLabelFromImages = labelService.batchRemove; ctrl.labelAccessor = (image) => imageAccessor.readLabels(image).map(label => label.data); + ctrl.labelSref = (element) => `search.results({query: (${element} | queryLabelFilter)})`; //TODO put collections in their own directive ctrl.addCollection = false; diff --git a/kahuna/public/js/edits/list-editor-compact.html b/kahuna/public/js/edits/list-editor-compact.html index 598803f830..ed715c6c49 100644 --- a/kahuna/public/js/edits/list-editor-compact.html +++ b/kahuna/public/js/edits/list-editor-compact.html @@ -1,14 +1,13 @@ -
        -
          -
        • +
            +
          • - {{element}} + {{element}} - + ui-sref="ctrl.sref(element)"> {{element}}
            • diff --git a/kahuna/public/js/edits/list-editor-info-panel.html b/kahuna/public/js/edits/list-editor-info-panel.html index fe69ce2e41..3ff63cd2d8 100644 --- a/kahuna/public/js/edits/list-editor-info-panel.html +++ b/kahuna/public/js/edits/list-editor-info-panel.html @@ -1,15 +1,15 @@ -
          • + ng-class="{'element--partial': element.count < ctrl.images.size}"> - {{element.data}} - diff --git a/kahuna/public/js/edits/list-editor-upload.html b/kahuna/public/js/edits/list-editor-upload.html index 67cf346f00..0928275c26 100644 --- a/kahuna/public/js/edits/list-editor-upload.html +++ b/kahuna/public/js/edits/list-editor-upload.html @@ -1,4 +1,4 @@ -
            +
            • diff --git a/kahuna/public/js/edits/list-editor.js b/kahuna/public/js/edits/list-editor.js index 1fc948376c..c0b3909f9a 100644 --- a/kahuna/public/js/edits/list-editor.js +++ b/kahuna/public/js/edits/list-editor.js @@ -27,6 +27,9 @@ listEditor.controller('ListEditorCtrl', [ imageLogic, imageList) { var ctrl = this; +// debugger; +// ctrl.sref("test-sref") + const retrieveElementsWithOccurrences = (images) => imageList.getOccurrences(images.flatMap(img => ctrl.accessor(img))); @@ -143,7 +146,8 @@ listEditor.directive('uiListEditorCompact', [function() { disabled: '=', removeFromImages: '=', accessor: '=', - sref: '=' + sref: '=', + element: '=' }, controller: 'ListEditorCtrl', controllerAs: 'ctrl', @@ -169,4 +173,4 @@ listEditor.directive('uiListEditorInfoPanel', [function() { bindToController: true, template: templateInfoPanel }; -}]); \ No newline at end of file +}]); diff --git a/kahuna/public/js/preview/image-large.html b/kahuna/public/js/preview/image-large.html index 6bbc00c552..c47fe86556 100644 --- a/kahuna/public/js/preview/image-large.html +++ b/kahuna/public/js/preview/image-large.html @@ -76,6 +76,7 @@ ng-if="!ctrl.inputtingLabel" add-to-images="ctrl.addLabelToImages" remove-from-images="ctrl.removeLabelFromImages" + element="ctrl.xyz" accessor="ctrl.labelAccessor" sref="ctrl.labelSref"> diff --git a/kahuna/public/js/preview/image.js b/kahuna/public/js/preview/image.js index 842f18fed4..0d8ed95f0d 100644 --- a/kahuna/public/js/preview/image.js +++ b/kahuna/public/js/preview/image.js @@ -6,6 +6,8 @@ import '../util/rx'; import template from './image.html'; import templateLarge from './image-large.html'; +import '../search/query-filter'; + import {List} from 'immutable'; import '../image/service'; import '../imgops/service'; @@ -17,6 +19,7 @@ import '../components/gr-archiver-status/gr-archiver-status'; import '../components/gr-syndication-icon/gr-syndication-icon'; export var image = angular.module('kahuna.preview.image', [ + 'kahuna.search.filters.query', 'gr.image.service', 'gr.image-usages.service', 'kahuna.services.label', @@ -55,7 +58,13 @@ image.controller('uiPreviewImageCtrl', [ 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)})}; + ctrl.labelSref = (element) => { + console.log("***********image.js ctrl.labelSref *************") + console.log(element) +// debugger; + const result = `(${element} | queryLabelFilter)` + return result + }; ctrl.imageAsArray = [ctrl.image]; const updateImage = (updatedImage) => { diff --git a/kahuna/public/js/search/query-filter.js b/kahuna/public/js/search/query-filter.js index 61870a5e0d..200525c902 100644 --- a/kahuna/public/js/search/query-filter.js +++ b/kahuna/public/js/search/query-filter.js @@ -3,7 +3,7 @@ import angular from 'angular'; import {getCollection} from '../search-query/query-syntax'; export var queryFilters = angular.module('kahuna.search.filters.query', []); - +debugger; var containsSpace = s => / /.test(s); var stripDoubleQuotes = s => s.replace(/"/g, ''); @@ -14,7 +14,6 @@ export function maybeQuoted(value) { return value; } } - export function fieldFilter(field, value) { const cleanValue = stripDoubleQuotes(value); const valueMaybeQuoted = maybeQuoted(cleanValue); @@ -22,6 +21,7 @@ export function fieldFilter(field, value) { } queryFilters.filter('queryFilter', function() { + debugger; return (value, field) => fieldFilter(field, value); });