Skip to content

Commit

Permalink
Connect data object data types with data (#749)
Browse files Browse the repository at this point in the history
  • Loading branch information
markus-moser authored Nov 28, 2024
1 parent a75faeb commit 0f4443c
Show file tree
Hide file tree
Showing 40 changed files with 2,524 additions and 77 deletions.
6 changes: 3 additions & 3 deletions assets/js/src/core/components/date-picker/time-picker.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,13 @@ export type TimePickerProps = GenericTimePickerProps & {
}

export const TimePicker = (props: TimePickerProps): React.JSX.Element => {
const outputFormat = props?.outputFormat
const outputFormat = props?.outputFormat ?? 'HH:mm:ss'

const [value, setValue] = React.useState<Dayjs | null>(toDayJs(props.value))
const [value, setValue] = React.useState<Dayjs | null>(toDayJs(props.value, outputFormat))

useEffect(() => {
if (props.onChange !== undefined) {
props.onChange(fromDayJs(value, props.outputType, props.outputFormat ?? 'HH:mm:ss'))
props.onChange(fromDayJs(value, props.outputType, outputFormat))
}
}, [value, props.outputType, outputFormat])

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,15 @@ import dayjs, { type Dayjs } from 'dayjs'

export type DatePickerValueType = string | number | Dayjs | null
export type OutputType = 'dateString' | 'timestamp' | 'dayjs'
export const toDayJs = (value?: DatePickerValueType | any): Dayjs | null => {
export const toDayJs = (value?: DatePickerValueType | any, format?: string): Dayjs | null => {
if (dayjs.isDayjs(value)) {
return value
}
if (typeof value === 'number') {
return dayjs.unix(value)
}
if (typeof value === 'string') {
return dayjs(value)
return dayjs(value, format)
}
return null
}
Expand Down
8 changes: 2 additions & 6 deletions assets/js/src/core/components/geo-map/geo-map.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -150,20 +150,16 @@ const GeoMap = forwardRef<GeoMapAPI, GeoMapProps>((props, ref): React.JSX.Elemen
return () => {
if (containerRef.current !== null) {
observer.unobserve(containerRef.current)
observer.disconnect()
}
}
}, [])

useEffect(() => {
if (isVisible) {
geoMapApi.forceRerender()
}
}, [isVisible])

useEffect(() => {
if (!isVisible) {
return
}

const map = initializeMap()
return () => {
if (map !== null) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import { type GeoBounds } from '@Pimcore/components/geo-map/types/geo-types'
export const addGeoBoundsToolbar = (leafletMap: L.Map, featureGroup: L.FeatureGroup, geoBounds?: GeoBounds, onChange?: (geoBounds: GeoBounds | undefined) => void, disabled?: boolean): void => {
leafletMap.addLayer(featureGroup)

const bounds = geoBounds !== undefined ? L.latLngBounds(L.latLng(geoBounds.NElatitude, geoBounds.NElongitude), L.latLng(geoBounds.SWlatitude, geoBounds.SWlongitude)) : undefined
const bounds = geoBounds !== undefined ? L.latLngBounds(L.latLng(geoBounds.northEast.latitude, geoBounds.northEast.longitude), L.latLng(geoBounds.southWest.latitude, geoBounds.southWest.longitude)) : undefined
let rectangle: L.Rectangle | undefined

if (bounds !== undefined) {
Expand Down Expand Up @@ -61,10 +61,14 @@ export const addGeoBoundsToolbar = (leafletMap: L.Map, featureGroup: L.FeatureGr
const ne = layer.getBounds().getNorthEast()
const sw = layer.getBounds().getSouthWest()
onChange({
NElatitude: ne.lat,
NElongitude: ne.lng,
SWlatitude: sw.lat,
SWlongitude: sw.lng
northEast: {
latitude: ne.lat,
longitude: ne.lng
},
southWest: {
latitude: sw.lat,
longitude: sw.lng
}
})
}
}
Expand All @@ -82,10 +86,14 @@ export const addGeoBoundsToolbar = (leafletMap: L.Map, featureGroup: L.FeatureGr
const sw = e.layer.getBounds().getSouthWest()

onChange({
NElatitude: ne.lat,
NElongitude: ne.lng,
SWlatitude: sw.lat,
SWlongitude: sw.lng
northEast: {
latitude: ne.lat,
longitude: ne.lng
},
southWest: {
latitude: sw.lat,
longitude: sw.lng
}
})
}
})
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export const addGeoPolyLineToolbar = (leafletMap: L.Map, featureGroup: L.Feature
const polyLine = geoPolyLine !== undefined ? L.polyline(convertPolyLineToLatLngs(geoPolyLine), { stroke: true, color: '#3388ff', opacity: 0.5, fillOpacity: 0.2, weight: 4 }) : undefined
if (polyLine !== undefined) {
featureGroup.addLayer(polyLine)
leafletMap.fitBounds(polyLine.getBounds())
}

if (disabled === true) {
Expand Down Expand Up @@ -65,8 +66,6 @@ export const addGeoPolyLineToolbar = (leafletMap: L.Map, featureGroup: L.Feature
})

leafletMap.on(L.Draw.Event.EDITSTOP, function (e) {
this.dirty = true
this.data = []
for (const layerId in e.target._layers) {
if (Object.prototype.hasOwnProperty.call(e.target._layers, layerId) === true) {
const layer = e.target._layers[layerId]
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export const addGeoPolygonToolbar = (leafletMap: L.Map, featureGroup: L.FeatureG
const polygon = geoPolygon !== undefined ? L.polygon(convertPolyLineToLatLngs(geoPolygon), { stroke: true, color: '#3388ff', opacity: 0.5, fillOpacity: 0.2, weight: 4 }) : undefined
if (polygon !== undefined) {
featureGroup.addLayer(polygon)
leafletMap.fitBounds(polygon.getBounds())
}

if (disabled === true) {
Expand Down Expand Up @@ -65,8 +66,6 @@ export const addGeoPolygonToolbar = (leafletMap: L.Map, featureGroup: L.FeatureG
})

leafletMap.on(L.Draw.Event.EDITSTOP, function (e) {
this.dirty = true
this.data = []
for (const layerId in e.target._layers) {
if (Object.prototype.hasOwnProperty.call(e.target._layers, layerId) === true) {
const layer = e.target._layers[layerId]
Expand Down
6 changes: 2 additions & 4 deletions assets/js/src/core/components/geo-map/types/geo-types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,8 @@ export interface GeoPoint {
export type GeoPoints = GeoPoint[]

export interface GeoBounds {
NElongitude: number
NElatitude: number
SWlongitude: number
SWlatitude: number
northEast: GeoPoint
southWest: GeoPoint
}

export type GeoType = GeoPoint | GeoPoints | GeoBounds
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,6 @@ export default config

export const _default = {
args: {
value: [0, 100]
value: { minimum: 3, maximum: 10 }
}
}
27 changes: 14 additions & 13 deletions assets/js/src/core/components/numeric-range/numeric-range.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import { Flex } from '@Pimcore/components/flex/flex'
import { type ValueType } from '@rc-component/mini-decimal/es/interface'
import { t } from 'i18next'

export type NumericRangeValue = [start: ValueType | null, end: ValueType | null]
export interface NumericRangeValue { minimum: ValueType | null, maximum: ValueType | null }

export type NumericRangeProps = InputNumberProps & {
value?: NumericRangeValue | null
Expand All @@ -29,10 +29,10 @@ export const validateOneFieldEmpty = async (rule, value): Promise<any> => {
if (value === null) {
await Promise.resolve(); return
}
if (value[0] === null) {
if (value.minimum === null) {
await Promise.reject(Error(t('form.validation.numeric-range.first-value-missing')))
}
if (value[1] === null) {
if (value.maximum === null) {
await Promise.reject(Error(t('form.validation.numeric-range.second-value-missing')))
}
await Promise.resolve()
Expand All @@ -44,7 +44,7 @@ export const validateSecondValueGreater = async (rule, value): Promise<any> => {
return
}

if (value[0] > value[1]) {
if (value.minimum > value.maximum) {
await Promise.reject(Error(t('form.validation.numeric-range.second-value-greater')))
}
await Promise.resolve()
Expand All @@ -59,14 +59,15 @@ export const NumericRange = (props: NumericRangeProps): React.JSX.Element => {
}
}, [value])

const updateValue = (index: number, newValue: ValueType | null): void => {
const updateValue = (key: 'minimum' | 'maximum', newValue: ValueType | null): void => {
setValue((prevValue) => {
if (prevValue === null) {
prevValue = [null, null]
const updatedValue: NumericRangeValue = {
minimum: prevValue?.minimum ?? null,
maximum: prevValue?.maximum ?? null,
[key]: newValue
}
const updatedValue: NumericRangeValue = index === 0 ? [newValue, prevValue[1]] : [prevValue[0], newValue]

return updatedValue[0] === null && updatedValue[1] === null ? null : updatedValue
return updatedValue.minimum === null && updatedValue.maximum === null ? null : updatedValue
})
}

Expand All @@ -78,14 +79,14 @@ export const NumericRange = (props: NumericRangeProps): React.JSX.Element => {
>
<InputNumber
{ ...props }
onChange={ (newValue) => { updateValue(0, newValue) } }
value={ value !== null ? value[0] : null }
onChange={ (newValue) => { updateValue('minimum', newValue) } }
value={ value !== null ? value.minimum : null }
/>
<div></div>
<InputNumber
{ ...props }
onChange={ (newValue) => { updateValue(1, newValue) } }
value={ value !== null ? value[1] : null }
onChange={ (newValue) => { updateValue('maximum', newValue) } }
value={ value !== null ? value.maximum : null }
/>
</Flex>
)
Expand Down
2 changes: 1 addition & 1 deletion assets/js/src/core/components/select/select.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import { isString, isEmpty } from 'lodash'
import { Icon } from '@Pimcore/components/icon/icon'
import { useStyles } from './select.styles'

interface SelectProps extends AntdSelectProps {
export interface SelectProps extends AntdSelectProps {
customArrowIcon?: string
customIcon?: string
width?: number
Expand Down
23 changes: 11 additions & 12 deletions assets/js/src/core/modules/app/app-view.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
* @license https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
*/

import React, { StrictMode } from 'react'
import React from 'react'
import { GlobalProvider } from './global-provider'
import { App as AntApp } from 'antd'
import { RouterProvider } from 'react-router-dom'
Expand All @@ -22,17 +22,16 @@ import { DateTimeConfig } from '@Pimcore/app/config/date-time'
export const AppView = (): React.JSX.Element => {
return (
<>
<StrictMode>
<GlobalProvider>
<AntApp>
<DateTimeConfig>
<AppLoader>
<RouterProvider router={ router } />
</AppLoader>
</DateTimeConfig>
</AntApp>
</GlobalProvider>
</StrictMode>

<GlobalProvider>
<AntApp>
<DateTimeConfig>
<AppLoader>
<RouterProvider router={ router } />
</AppLoader>
</DateTimeConfig>
</AntApp>
</GlobalProvider>
</>
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
/**
* Pimcore
*
* This source file is available under two different licenses:
* - Pimcore Open Core License (POCL)
* - Pimcore Commercial License (PCL)
* Full copyright and license information is available in
* LICENSE.md which is distributed with this source code.
*
* @copyright Copyright (c) Pimcore GmbH (http://www.pimcore.org)
* @license https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
*/

import React, { useEffect, useState } from 'react'
import { Select, type SelectProps } from '@Pimcore/components/select/select'

export interface BooleanSelectProps extends SelectProps {
value?: boolean | null
className?: string
onChange?: (value?: boolean | null) => void
}

export const BooleanSelect = (props: BooleanSelectProps): React.JSX.Element => {
const [value, setValue] = useState<boolean | null>(props.value ?? null)

const mapValue = (value?: boolean | null): number | undefined => {
if (value === undefined) {
return undefined
}
if (value === null) {
return 0
}

return value ? 1 : -1
}

const reverseMapValue = (value?: number): boolean | null | undefined => {
if (value === undefined) {
return undefined
}
if (value === 0) {
return null
}

return value === 1
}

useEffect(() => {
if (props.onChange !== undefined) {
props.onChange(value)
}
}, [value])

const onChange = (value?: number): void => {
const newValue = reverseMapValue(value)
setValue(newValue ?? null)
props.onChange?.(newValue)
}

return (
<Select
{ ...props }
onChange={ onChange }
value={ mapValue(value) }
/>
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,14 @@ export interface ConsentProps {

export interface ConsentValue {
consent: boolean
'note-text'?: string
noteContent?: string
noteId?: number
}

export const Consent = (props: ConsentProps): React.JSX.Element => {
const [value, setValue] = useState<ConsentValue | null>(props.value ?? null)

const noteText = value !== null ? (value['note-text'] ?? '') : ''
const noteContent = value !== null ? (value.noteContent ?? '') : ''

const onChange = (e: CheckboxChangeEvent): void => {
setValue({
Expand All @@ -51,9 +51,12 @@ export const Consent = (props: ConsentProps): React.JSX.Element => {
className={ props.className }
gap="small"
>
<Checkbox onChange={ onChange } />
{ noteText.length > 0 && (
<span>({ noteText })</span>
<Checkbox
checked={ value?.consent }
onChange={ onChange }
/>
{ noteContent.length > 0 && (
<span>({ noteContent })</span>
) }
</Flex>
)
Expand Down
Loading

0 comments on commit 0f4443c

Please sign in to comment.