From 138c591cf8450db7e93d60d7a7e0076f3dc8083e Mon Sep 17 00:00:00 2001
From: Piotr Gawron <p.gawron@atcomp.pl>
Date: Wed, 11 Dec 2024 10:22:34 +0100
Subject: [PATCH] configurable logos were not loaded
---
CHANGELOG | 1 +
src/components/Map/Map.component.tsx | 4 +-
.../MapAdditionalLogos.component.tsx | 51 +++++++++++++++++++
.../Map/MapAdditionalLogos/index.ts | 1 +
.../configuration/configuration.constants.ts | 6 +++
.../configuration/configuration.selectors.ts | 32 ++++++++++++
6 files changed, 94 insertions(+), 1 deletion(-)
create mode 100644 src/components/Map/MapAdditionalLogos/MapAdditionalLogos.component.tsx
create mode 100644 src/components/Map/MapAdditionalLogos/index.ts
diff --git a/CHANGELOG b/CHANGELOG
index 25728623..52071d51 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -1,5 +1,6 @@
minerva-front (18.0.7) stable; urgency=medium
* Bug fix: export to image did not include overlays (#326)
+ * Bug fix: missing logos added (#329)
-- Piotr Gawron <piotr.gawron@uni.lu> Wed, 11 Dec 2024 13:00:00 +0200
diff --git a/src/components/Map/Map.component.tsx b/src/components/Map/Map.component.tsx
index 72d18ebf..033ebd2f 100644
--- a/src/components/Map/Map.component.tsx
+++ b/src/components/Map/Map.component.tsx
@@ -1,8 +1,9 @@
import { Drawer } from '@/components/Map/Drawer';
import { Legend } from '@/components/Map/Legend';
+import { MapAdditionalLogos } from '@/components/Map/MapAdditionalLogos';
+import { MapViewer } from '@/components/Map/MapViewer';
import { MapAdditionalActions } from './MapAdditionalActions';
import { MapAdditionalOptions } from './MapAdditionalOptions';
-import { MapViewer } from './MapViewer/MapViewer.component';
import { PluginsDrawer } from './PluginsDrawer';
export const Map = (): JSX.Element => (
@@ -16,5 +17,6 @@ export const Map = (): JSX.Element => (
<MapViewer />
<Legend />
<MapAdditionalActions />
+ <MapAdditionalLogos />
</div>
);
diff --git a/src/components/Map/MapAdditionalLogos/MapAdditionalLogos.component.tsx b/src/components/Map/MapAdditionalLogos/MapAdditionalLogos.component.tsx
new file mode 100644
index 00000000..51b29d2d
--- /dev/null
+++ b/src/components/Map/MapAdditionalLogos/MapAdditionalLogos.component.tsx
@@ -0,0 +1,51 @@
+/* eslint-disable @next/next/no-img-element */
+import { twMerge } from 'tailwind-merge';
+import {
+ leftLogoImgValSelector,
+ leftLogoLinkValSelector,
+ leftLogoTextValSelector,
+ rightLogoImgValSelector,
+ rightLogoLinkValSelector,
+ rightLogoTextValSelector,
+} from '@/redux/configuration/configuration.selectors';
+import { useAppSelector } from '@/redux/hooks/useAppSelector';
+import { LinkButton } from '@/shared/LinkButton';
+
+export const MapAdditionalLogos = (): JSX.Element => {
+ const leftLink = useAppSelector(leftLogoLinkValSelector);
+ const leftText = useAppSelector(leftLogoTextValSelector);
+ const leftImage = useAppSelector(leftLogoImgValSelector);
+
+ const rightLink = useAppSelector(rightLogoLinkValSelector);
+ const rightText = useAppSelector(rightLogoTextValSelector);
+ const rightImage = useAppSelector(rightLogoImgValSelector);
+
+ return (
+ <div className={twMerge('absolute bottom-6 left-[102px] grid grid-cols-2 gap-4')}>
+ {leftLink && (
+ <LinkButton
+ type="button"
+ className="flex h-auto max-h-20 w-auto max-w-20 cursor-pointer items-center justify-center border-0 bg-gray-200 bg-opacity-20 hover:bg-gray-300 hover:bg-opacity-30"
+ data-testid="location-button"
+ title={leftText}
+ href={leftLink}
+ target="_blank"
+ >
+ <img alt={leftText} src={leftImage} />
+ </LinkButton>
+ )}
+ {rightLink && (
+ <LinkButton
+ type="button"
+ className="flex h-auto max-h-20 w-auto max-w-20 cursor-pointer items-center justify-center border-0 bg-gray-200 bg-opacity-20 hover:bg-gray-300 hover:bg-opacity-30"
+ data-testid="location-button"
+ title={rightText}
+ href={rightLink}
+ target="_blank"
+ >
+ <img alt={rightText} src={rightImage} />
+ </LinkButton>
+ )}
+ </div>
+ );
+};
diff --git a/src/components/Map/MapAdditionalLogos/index.ts b/src/components/Map/MapAdditionalLogos/index.ts
new file mode 100644
index 00000000..6ea9ee31
--- /dev/null
+++ b/src/components/Map/MapAdditionalLogos/index.ts
@@ -0,0 +1 @@
+export { MapAdditionalLogos } from './MapAdditionalLogos.component';
diff --git a/src/redux/configuration/configuration.constants.ts b/src/redux/configuration/configuration.constants.ts
index 032c5e0b..25ff1216 100644
--- a/src/redux/configuration/configuration.constants.ts
+++ b/src/redux/configuration/configuration.constants.ts
@@ -7,6 +7,12 @@ export const SEARCH_DISTANCE_NAME_ID = 'SEARCH_DISTANCE';
export const REQUEST_ACCOUNT_EMAIL = 'REQUEST_ACCOUNT_EMAIL';
export const TERMS_OF_SERVICE_ID = 'TERMS_OF_USE';
export const COOKIE_POLICY_URL = 'COOKIE_POLICY_URL';
+export const LEFT_LOGO_IMG = 'LEFT_LOGO_IMG';
+export const LEFT_LOGO_LINK = 'LEFT_LOGO_LINK';
+export const LEFT_LOGO_TEXT = 'LEFT_LOGO_TEXT';
+export const RIGHT_LOGO_IMG = 'RIGHT_LOGO_IMG';
+export const RIGHT_LOGO_LINK = 'RIGHT_LOGO_LINK';
+export const RIGHT_LOGO_TEXT = 'RIGHT_LOGO_TEXT';
export const LEGEND_FILE_NAMES_IDS = [
'LEGEND_FILE_1',
diff --git a/src/redux/configuration/configuration.selectors.ts b/src/redux/configuration/configuration.selectors.ts
index 01a9eb4c..8677cadb 100644
--- a/src/redux/configuration/configuration.selectors.ts
+++ b/src/redux/configuration/configuration.selectors.ts
@@ -20,6 +20,12 @@ import {
REQUEST_ACCOUNT_EMAIL,
TERMS_OF_SERVICE_ID,
COOKIE_POLICY_URL,
+ LEFT_LOGO_IMG,
+ LEFT_LOGO_LINK,
+ LEFT_LOGO_TEXT,
+ RIGHT_LOGO_IMG,
+ RIGHT_LOGO_LINK,
+ RIGHT_LOGO_TEXT,
} from './configuration.constants';
import { ConfigurationHandlersIds, ConfigurationImageHandlersIds } from './configuration.types';
@@ -151,3 +157,29 @@ export const loadingConfigurationMainSelector = createSelector(
configurationSelector,
state => state?.main?.loading,
);
+
+export const leftLogoImgValSelector = createSelector(
+ configurationOptionsSelector,
+ state => configurationAdapterSelectors.selectById(state, LEFT_LOGO_IMG)?.value,
+);
+export const leftLogoLinkValSelector = createSelector(
+ configurationOptionsSelector,
+ state => configurationAdapterSelectors.selectById(state, LEFT_LOGO_LINK)?.value,
+);
+export const leftLogoTextValSelector = createSelector(
+ configurationOptionsSelector,
+ state => configurationAdapterSelectors.selectById(state, LEFT_LOGO_TEXT)?.value,
+);
+
+export const rightLogoImgValSelector = createSelector(
+ configurationOptionsSelector,
+ state => configurationAdapterSelectors.selectById(state, RIGHT_LOGO_IMG)?.value,
+);
+export const rightLogoLinkValSelector = createSelector(
+ configurationOptionsSelector,
+ state => configurationAdapterSelectors.selectById(state, RIGHT_LOGO_LINK)?.value,
+);
+export const rightLogoTextValSelector = createSelector(
+ configurationOptionsSelector,
+ state => configurationAdapterSelectors.selectById(state, RIGHT_LOGO_TEXT)?.value,
+);
--
GitLab