SHGOun-GIS-Client V10 -- Next

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:23.3.0-alpine3.19 AS build
+FROM node:20-alpine3.20 AS build
 
 RUN apk update && apk upgrade --no-cache
 

Dockerfile.dev

@@ -1,4 +1,4 @@
-FROM node:23.3.0-alpine3.19
+FROM node:20-alpine3.20
 
 RUN apk update && apk upgrade --no-cache
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terrestris/shogun-gis-client",
-  "version": "9.0.0",
+  "version": "10.0.0-next.3",
   "description": "This is the default GIS client used in the SHOGun project. Based on the react-geo-client template",
   "keywords": [
     "shogun",
@@ -45,17 +45,20 @@
     "@reduxjs/toolkit": "^2.5.0",
     "@terrestris/base-util": "^3.0.0",
     "@terrestris/mapfish-print-manager": "^16.0.2",
-    "@terrestris/ol-util": "^21.0.0",
-    "@terrestris/react-geo": "^27.0.0",
-    "@terrestris/react-util": "^10.0.1",
+    "@terrestris/ol-util": "^21.1.0",
+    "@terrestris/react-geo": "^30.0.0",
+    "@terrestris/react-util": "^11.0.1",
     "@terrestris/shogun-e2e-tests": "^1.0.8",
-    "@terrestris/shogun-util": "^10.4.1",
+    "@terrestris/shogun-util": "^10.5.1",
     "@types/color": "^4.2.0",
     "@types/js-md5": "^0.7.2",
+    "@types/proj4": "^2.5.6",
     "@types/react": "^18.3.17",
     "@types/react-dom": "^18.3.5",
-    "antd": "^5.23.2",
+    "antd": "^5.24.4",
+    "clsx": "^2.1.1",
     "color": "^5.0.0",
+    "dayjs": "^1.11.13",
     "dotenv": "^16.4.7",
     "geostyler": "^16.0.1",
     "geostyler-openlayers-parser": "^5.0.1",
@@ -65,13 +68,15 @@
     "js-md5": "^0.8.3",
     "keycloak-js": "^26.1.0",
     "normalize.css": "^8.0.1",
-    "ol": "^10.3.1",
+    "ol": "^10.4.0",
+    "ol-mapbox-style": "12.4.0",
     "proj4": "^2.15.0",
     "react": "^18.3.1",
     "react-cookie-consent": "^9.0.0",
     "react-dom": "^18.3.1",
     "react-i18next": "^15.4.0",
     "react-redux": "^9.2.0",
+    "react-rnd": "^10.5.2",
     "shapefile.js": "^1.1.4"
   },
   "devDependencies": {
@@ -85,10 +90,10 @@
     "@commitlint/cli": "^19.6.1",
     "@commitlint/config-conventional": "^19.6.0",
     "@eslint/js": "^9.18.0",
-    "@module-federation/enhanced": "^0.11.0",
+    "@module-federation/enhanced": "^0.11.2",
     "@playwright/test": "^1.49.1",
-    "@rspack/cli": "^1.1.6",
-    "@rspack/core": "^1.1.6",
+    "@rspack/cli": "^1.3.0",
+    "@rspack/core": "^1.3.0",
     "@rspack/plugin-react-refresh": "^1.0.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
@@ -102,16 +107,16 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
-    "@typescript-eslint/eslint-plugin": "^8.25.0",
-    "@typescript-eslint/parser": "^8.25.0",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.10.9",
+    "@typescript-eslint/eslint-plugin": "^8.25.0",
+    "@typescript-eslint/parser": "^8.25.0",
     "babel-jest": "^29.7.0",
     "babel-loader": "^10.0.0",
     "buffer": "^6.0.3",
     "chokidar": "^4.0.2",
     "css-loader": "^7.1.2",
-    "eslint": "^9.18.0",
+    "eslint": "^9.23.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-refresh": "^0.4.18",

src/components/DisplayField/index.spec.tsx

@@ -5,7 +5,7 @@ import {
   screen
 } from '@testing-library/react';
 
-import moment from 'moment';
+import dayjs from 'dayjs';
 
 import { createReduxWrapper } from '../../utils/testUtils';
 
@@ -65,7 +65,7 @@ describe('<DisplayField />', () => {
   });
 
   it('date is displayed correctly', () => {
-    const now = moment('01-01-2024');
+    const now = dayjs('01-01-2024');
     const format = 'DD.MM.YYYY';
 
     render(

src/components/DisplayField/index.tsx

@@ -1,16 +1,20 @@
-import React from 'react';
+import React, {
+  FC,
+  JSX
+} from 'react';
 
 import {
   Checkbox,
   Typography,
   UploadFile
 } from 'antd';
 
-import isString from 'lodash/isString';
-import moment, {
-  isMoment
-} from 'moment';
+import dayjs, {
+  Dayjs,
+  isDayjs
+} from 'dayjs';
 
+import _isString from 'lodash/isString';
 import {
   useTranslation
 } from 'react-i18next';
@@ -27,7 +31,7 @@ import FileUpload from '../FileUpload';
 import ImageUpload from '../ImageUpload';
 import ReferenceTable from '../ReferenceTable';
 
-export type ValueType = string | number | boolean | moment.Moment | Record<string, any>;
+export type ValueType = string | number | boolean | Dayjs | Record<string, any>;
 export type DataType = 'auto' | 'number' | 'boolean' | 'string' | 'date' | 'url' | 'json';
 
 export type ReferenceConfig = {
@@ -58,7 +62,7 @@ export type DisplayFieldProps = {
   urlDisplayValue?: string;
 };
 
-export const DisplayField: React.FC<DisplayFieldProps> = ({
+export const DisplayField: FC<DisplayFieldProps> = ({
   dataType = 'auto',
   valueMap,
   format = 'DD.MM.YYYY',
@@ -114,10 +118,10 @@ export const DisplayField: React.FC<DisplayFieldProps> = ({
 
   if (
     dataType === 'date' ||
-    (dataType === 'auto' && isMoment(value))
+    (dataType === 'auto' && dayjs(`${value}`).isValid())
   ) {
-    if (value) {
-      displayValue = moment(value as string).format(format);
+    if (value && (isDayjs(value) || (_isString(value) && dayjs(`${value}`).isValid()))) {
+      displayValue = dayjs(value).format(format);
     }
   }
 
@@ -133,7 +137,7 @@ export const DisplayField: React.FC<DisplayFieldProps> = ({
 
   if (
     dataType === 'url' ||
-    (dataType === 'auto' && isString(value) && isUrl(value))
+    (dataType === 'auto' && _isString(value) && isUrl(value))
   ) {
     if (value) {
       displayValue = (

src/components/EditFeatureDrawer/EditFeatureFullForm/index.tsx

@@ -1,53 +1,38 @@
 import React, {
-  ReactNode,
-  useCallback,
-  useEffect,
-  useState
+  ReactNode, useCallback, useEffect, useState
 } from 'react';
 
 import {
-  Alert,
-  UploadFile
+  Alert, UploadFile
 } from 'antd';
-import {
-  useForm
-} from 'antd/lib/form/Form';
-
-import {
-  Feature
-} from 'geojson';
+import { useForm } from 'antd/lib/form/Form';
 
-import moment from 'moment';
+import dayjs from 'dayjs';
+import { Feature } from 'geojson';
 
 import { ValidateErrorEntity } from 'rc-field-form/es/interface';
 
-import {
-  useTranslation
-} from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 import Logger from '@terrestris/base-util/dist/Logger';
 
 import {
-  WmsLayer,
-  isWmsLayer
+  isWmsLayer, WmsLayer
 } from '@terrestris/ol-util/dist/typeUtils/typeUtils';
 
 import { useMap } from '@terrestris/react-util/dist/Hooks/useMap/useMap';
 
 import ShogunFile from '@terrestris/shogun-util/dist/model/File';
 import {
-  PropertyFormItemEditConfig,
-  PropertyFormTabConfig
+  PropertyFormItemEditConfig, PropertyFormTabConfig
 } from '@terrestris/shogun-util/dist/model/Layer';
 
 import useAppDispatch from '../../../hooks/useAppDispatch';
 import useConvertImageUrl from '../../../hooks/useConvertImageUrl';
 import useExecuteGetFeature from '../../../hooks/useExecuteGetFeature';
 import useSHOGunAPIClient from '../../../hooks/useSHOGunAPIClient';
 
-import {
-  setFeature
-} from '../../../store/editFeature';
+import { setFeature } from '../../../store/editFeature';
 
 import { isFileConfig } from '../EditFeatureForm';
 import EditFeatureGeometryToolbar from '../EditFeatureGeometryToolbar';
@@ -132,7 +117,7 @@ export const EditFeatureFullForm: React.FC<EditFeatureFullFormProps> = ({
         });
 
         if (isDate) {
-          const parsedDate = moment(value);
+          const parsedDate = dayjs(value);
 
           if (parsedDate.isValid()) {
             properties[key] = parsedDate;
@@ -166,8 +151,7 @@ export const EditFeatureFullForm: React.FC<EditFeatureFullFormProps> = ({
                 };
               });
 
-              const result = await Promise.all(fileListWithBlob);
-              properties[key] = result;
+              properties[key] = await Promise.all(fileListWithBlob);
             } catch (error) {
               Logger.error('Could not parse file list from JSON config: ', error);
               properties[key] = [];
@@ -213,14 +197,12 @@ export const EditFeatureFullForm: React.FC<EditFeatureFullFormProps> = ({
       }
     });
 
-    const formattedMessage = collectedFieldErrors.map((line, index) => (
+    return collectedFieldErrors.map((line, index) => (
       <React.Fragment key={index}>
         {line}
-        {index !== collectedFieldErrors.length - 1 && <br />}
+        {index !== collectedFieldErrors.length - 1 && <br/>}
       </React.Fragment>
     ));
-
-    return formattedMessage;
   };
 
   const onSaveSuccess = (responseText?: string) => {