fix: fix mobile;

fix: fix filter cleaning fix: fix displaying of collections in filters
ImageMarkup · Sep 12, 2024 · a29b641 · a29b641
1 parent 6c15023
commit a29b641
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 42 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 = "<span class='gallery-select-all-images link'> Select All on the Page for Download</span>";
 								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
@@ -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
@@ -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
@@ -178,6 +178,10 @@ function createAccordionRows(data) {
 										<div class="item-content-label">Unique ID</div>
 										<div class="item-content-value">${data.isic_id || ""}</div>
 									</div>
+									<div class="item-content-row">
+										<div class="item-content-label">Copyright license</div>
+										<div class="item-content-value">${data.copyright_license || ""}</div>
+									</div>
 								</div>
 							</div>`,
 				autoheight: true,