From a29b641534b07bbe71ea82863fccfb1761875bf3 Mon Sep 17 00:00:00 2001 From: Slava Olishevko Date: Thu, 12 Sep 2024 13:38:03 +0300 Subject: [PATCH] fix: fix mobile; fix: fix filter cleaning fix: fix displaying of collections in filters --- sources/models/appliedFilters.js | 28 +++++++++++++------ sources/models/imagesFilters.js | 9 +++--- sources/services/gallery/filter.js | 20 ++++++++----- sources/services/gallery/gallery.js | 15 ++++++++-- sources/views/subviews/gallery/gallery.js | 27 ++++++++++-------- .../views/subviews/gallery/galleryMobile.js | 8 +++--- .../views/subviews/gallery/parts/filters.js | 10 ++++--- .../views/subviews/gallery/parts/metadata.js | 4 +++ 8 files changed, 79 insertions(+), 42 deletions(-) diff --git a/sources/models/appliedFilters.js b/sources/models/appliedFilters.js index a16393d..8bde1e3 100644 --- a/sources/models/appliedFilters.js +++ b/sources/models/appliedFilters.js @@ -1,5 +1,6 @@ import constants from "../constants"; import util from "../utils/util"; +import collectionsModel from "./collectionsModel"; import state from "./state"; const appliedFilters = new webix.DataCollection(); @@ -441,17 +442,28 @@ function getFilterValue() { } function getFiltersFromURL(filtersArray) { - return filtersArray + const filtersFromUrl = filtersArray .map((filter) => { - const filterId = typeof filter === "object" ? filter.id : filter; + let filterId; + if (typeof filter === "object") { + filterId = filter.id; + } + else if (filter.includes(constants.COLLECTION_KEY)) { + const pinnedCollections = collectionsModel.getPinnedCollections(); + const id = Number(filter.substring(filter.indexOf("|") + 1)); + const collection = pinnedCollections?.find(c => c.id === id); + filterId = `${constants.COLLECTION_KEY}|${collection?.name}`; + } const control = $$(filterId); - const data = control.config.filtersChangedData; - data.id = filter.includes(constants.COLLECTION_KEY) - ? filter - : util.getOptionId(data.key, data.value); - data.remove = false; - return data; + if (control) { + const data = control.config.filtersChangedData; + data.id = util.getOptionId(data.key, data.value); + data.remove = false; + return data; + } + return null; }); + return filtersFromUrl.filter(f => f !== null); } function convertAppliedFiltersToParams() { diff --git a/sources/models/imagesFilters.js b/sources/models/imagesFilters.js index 112ddad..4ffca0b 100644 --- a/sources/models/imagesFilters.js +++ b/sources/models/imagesFilters.js @@ -3,7 +3,7 @@ import state from "./state"; let filtersData; const filtersIds = { - allCollections: "collections", + pinnedCollections: "collections", benignMelignant: "benign_malignant", lesionDiagnosis: "diagnosis", approximateAge: "age_approx", @@ -30,15 +30,14 @@ const filtersIds = { function getFiltersDataValues() { const filtersDataValues = [ { - label: "Collections", - visible: false, + label: "Pinned Collections", data: [ { - id: filtersIds.allCollections, + id: filtersIds.pinnedCollections, name: "Collection", type: "checkbox", datatype: "string", - options: state.imagesTotalCounts[filtersIds.allCollections] ?? [] + options: state.imagesTotalCounts[filtersIds.pinnedCollections] ?? [] } ] }, diff --git a/sources/services/gallery/filter.js b/sources/services/gallery/filter.js index 0e5912e..b0d4689 100644 --- a/sources/services/gallery/filter.js +++ b/sources/services/gallery/filter.js @@ -79,9 +79,7 @@ function updateFiltersFormControl(data) { case "rangeCheckbox": case "checkbox": { - const controlId = data.key === constants.COLLECTION_KEY - ? util.getOptionId(data.key, data.optionId) - : util.getOptionId(data.key, data.value); + const controlId = util.getOptionId(data.key, data.value); const control = $$(controlId); if (control) { // we do not need to call onChange event for the control. so we block event @@ -115,9 +113,15 @@ function _setLabelCount(foundCurrentCount, docCount) { filtersKeys.forEach((filterKey) => { const labelView = $$(util.getFilterLabelId(filterKey)); const template = labelView.config.template(); - const newTemplate = filterKey === constants.MISSING_KEY_VALUE - ? `${template} (${docCount[filterKey]})` - : `${template} (${foundCurrentCount[filterKey]} / ${docCount[filterKey]})`; + let newTemplate; + if (docCount[filterKey]) { + newTemplate = filterKey === constants.MISSING_KEY_VALUE + ? `${template} (${docCount[filterKey]})` + : `${template} (${foundCurrentCount[filterKey]} / ${docCount[filterKey]})`; + } + else { + newTemplate = template; + } labelView.define("template", newTemplate); labelView.refresh(); }); @@ -152,7 +156,9 @@ function updateFiltersCounts(countsAfterFiltration) { const controlId = util.getOptionId(filterKey, prepareOptionName(value.key, filterKey)); const controlView = $$(controlId); if (controlView) { - _setFilterCounts(controlView, value.doc_count, currentCount); + if (filterKey !== constants.COLLECTION_KEY) { + _setFilterCounts(controlView, value.doc_count, currentCount); + } } }); } diff --git a/sources/services/gallery/gallery.js b/sources/services/gallery/gallery.js index 5651e0b..8a6d8f0 100644 --- a/sources/services/gallery/gallery.js +++ b/sources/services/gallery/gallery.js @@ -1102,13 +1102,22 @@ class GalleryService { const facets = await ajax.getFacets(); const ids = Object.keys(facets); ids.forEach((id) => { - state.imagesTotalCounts[id] = facets[id].buckets; + state.imagesTotalCounts[id] = webix.copy(facets[id].buckets); if (id !== constants.COLLECTION_KEY) { state.imagesTotalCounts[id].push({ key: constants.MISSING_KEY_VALUE, doc_count: facets[id]?.meta?.missing_count }); } + if (id === constants.COLLECTION_KEY) { + state.imagesTotalCounts[id].length = 0; + pinnedCollectionsData.results.forEach((pc) => { + state.imagesTotalCounts[id].push({ + key: pc.id, + name: pc.name, + }); + }); + } }); let appliedFiltersArray = appliedFilterModel.getFiltersArray(); const paramFilters = this._view.$scope.getParam("filter"); @@ -1124,7 +1133,9 @@ class GalleryService { try { const parsedFilters = JSON.parse(paramFilters); appliedFiltersArray = appliedFilterModel.getFiltersFromURL(parsedFilters); - this._view.$scope.app.callEvent("filtersChanged", [appliedFiltersArray]); + if (appliedFiltersArray) { + this._view.$scope.app.callEvent("filtersChanged", [appliedFiltersArray]); + } } catch (err) { this._view.$scope.setParam("filter", "[]", true); diff --git a/sources/views/subviews/gallery/gallery.js b/sources/views/subviews/gallery/gallery.js index 41bac56..c9d5a09 100644 --- a/sources/views/subviews/gallery/gallery.js +++ b/sources/views/subviews/gallery/gallery.js @@ -178,17 +178,19 @@ export default class GalleryView extends JetView { id: ID_IMAGES_SELECTION_TEMPLATE, template: () => { webix.delay(() => { - const selectImagesForDownloadTemplateNode = this - .imagesSelectionTemplate - .$view - .firstChild - .firstChild; - const tooltipTextForDownload = `You can select maximum ${constants.MAX_COUNT_IMAGES_SELECTION} images for download.`; - searchButtonModel.createHintForSearchTimesButton( - selectImagesForDownloadTemplateNode, - tooltipForDataviewTemplatesClassName, - tooltipTextForDownload - ); + if (!util.isMobilePhone()) { + const selectImagesForDownloadTemplateNode = this + .imagesSelectionTemplate + ?.$view + ?.firstChild + ?.firstChild; + const tooltipTextForDownload = `You can select maximum ${constants.MAX_COUNT_IMAGES_SELECTION} images for download.`; + searchButtonModel.createHintForSearchTimesButton( + selectImagesForDownloadTemplateNode, + tooltipForDataviewTemplatesClassName, + tooltipTextForDownload + ); + } }); const text = " Select All on the Page for Download"; const selectedImagesCount = selectedImages.count(); @@ -449,7 +451,8 @@ export default class GalleryView extends JetView { const isicId = this.getRoot().$scope.getParam("image"); if (util.isMobilePhone()) { - this.app.show(`${constants.PATH_GALLERY_MOBILE}?image=${isicId}`); + const filter = this.getRoot().$scope.getParam("filter"); + this.app.show(`${constants.PATH_GALLERY_MOBILE}?image=${isicId ?? ""}&filter=${filter ?? ""}`); } else if (isicId && isTermsOfUseAccepted) { if (this.imageWindow) { diff --git a/sources/views/subviews/gallery/galleryMobile.js b/sources/views/subviews/gallery/galleryMobile.js index d0e820e..9141684 100644 --- a/sources/views/subviews/gallery/galleryMobile.js +++ b/sources/views/subviews/gallery/galleryMobile.js @@ -643,7 +643,7 @@ export default class GalleryMobileView extends JetView { }); const portrait = window.matchMedia("(orientation: portrait)").matches; - this.showOrHideElementsOnOrientation(portrait); + this.showOrHideElementsOnOrientation(portrait, true); const rotateHandler = util.debounce((landscape) => { const currentPortrait = !landscape; @@ -905,7 +905,7 @@ export default class GalleryMobileView extends JetView { const isicId = this.getRoot().$scope.getParam("image"); if (!util.isMobilePhone()) { - this.app.show(`${constants.PATH_GALLERY}?image=${isicId}`); + this.app.show(`${constants.PATH_GALLERY}?image=${isicId ?? ""}`); } else if (isicId && isTermsOfUseAccepted) { if (this.imageWindow) { @@ -1101,7 +1101,7 @@ export default class GalleryMobileView extends JetView { } } - showOrHideElementsOnOrientation(portrait) { + showOrHideElementsOnOrientation(portrait, initial) { try { const imageWindowZoomButtons = $$(mobileImageWindow.getZoomButtonTemplateId()); const leftLandscapeImageWindowZoomButton = $$(mobileImageWindow.getLeftLandscapeZoomButtonTemplateId()); @@ -1147,7 +1147,7 @@ export default class GalleryMobileView extends JetView { logger.error(e); } finally { - this.updatePagerSize(); + this.updatePagerSize(initial); } } diff --git a/sources/views/subviews/gallery/parts/filters.js b/sources/views/subviews/gallery/parts/filters.js index 8abd37b..5d55161 100644 --- a/sources/views/subviews/gallery/parts/filters.js +++ b/sources/views/subviews/gallery/parts/filters.js @@ -173,14 +173,16 @@ function getCheckboxUI(data, collapsed) { } } } - const optionName = filterService.prepareOptionName(currentOption.key, data.id); + const optionName = data.id === constants.COLLECTION_KEY + ? filterService.prepareOptionName(currentOption.name, data.id) + : filterService.prepareOptionName(currentOption.key, data.id); const id = util.getOptionId(data.id, optionName); const filtersChangedData = { view: data.type, datatype: data.datatype, key: data.id, filterName: data.name, - value: data.id === constants.COLLECTION_KEY ? currentOption.collectionName : optionName, + value: optionName, optionId: currentOption.optionId, status: "equals" }; @@ -197,13 +199,13 @@ function getCheckboxUI(data, collapsed) { view: "checkbox", css: "checkbox-ctrl", label: "", - labelRight: `${optionName} (0)`, + labelRight: optionName, value: 0, name: id, height: 28, gravity: 3, attributes: { - title: `${optionName} (0)`, + title: `${optionName}`, dataOptionId: currentOption.optionId ? `${currentOption.optionId}` : null }, labelWidth: 0, diff --git a/sources/views/subviews/gallery/parts/metadata.js b/sources/views/subviews/gallery/parts/metadata.js index b823a8e..ce2a33b 100644 --- a/sources/views/subviews/gallery/parts/metadata.js +++ b/sources/views/subviews/gallery/parts/metadata.js @@ -178,6 +178,10 @@ function createAccordionRows(data) {
Unique ID
${data.isic_id || ""}
+
+
Copyright license
+
${data.copyright_license || ""}
+
`, autoheight: true,