Skip to content

Commit

Permalink
Merge pull request #644 from openstad/feat/choose-which-datalayer-is-…
Browse files Browse the repository at this point in the history 
…active-on-init

feat: Make it possible to choose whether a datalayer is active on init
  • Loading branch information
@rudivanhierden
rudivanhierden authored Oct 16, 2024
2 parents 33fcb78 + 845e567 commit ade516a
Show file tree
Hide file tree
Showing 3 changed files with 98 additions and 45 deletions.
123 changes: 86 additions & 37 deletions apps/admin-server/src/pages/projects/[project]/widgets/resourcesmap/[id]/datalayers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,20 +13,23 @@ import { useRouter } from 'next/router';
import useDatalayers from "@/hooks/use-datalayers";
import {Checkbox} from "@/components/ui/checkbox";
import {YesNoSelect} from "@/lib/form-widget-helpers";
import { useEffect } from 'react';

const formSchema = z.object({
enableOnOffSwitching: z.boolean().optional(),
datalayer: z.array(z.object({
id: z.number(),
name: z.string()
name: z.string(),
activeOnInit: z.boolean().optional(),
})).optional(),
});
}).catchall(z.boolean().optional());

export default function WidgetResourcesMapDatalayers(
props: ResourceOverviewMapWidgetTabProps &
EditFieldProps<ResourceOverviewMapWidgetTabProps> & {
datalayer?: any;
enableOnOffSwitching?: boolean;
activeOnInit?: boolean;
}
) {

Expand All @@ -48,6 +51,17 @@ export default function WidgetResourcesMapDatalayers(

const { data: datalayers } = useDatalayers(props.projectId === undefined ? projectId : props.projectId) as { data: { id: string, name: string }[] } ?? [];

useEffect(() => {
if (!form.getValues('enableOnOffSwitching')) {
const updatedLayers = (form.getValues('datalayer') || []).map((layer) => {
const { activeOnInit, ...rest } = layer;
return rest;
});
form.setValue('datalayer', updatedLayers);
props.onFieldChanged('datalayer', updatedLayers);
}
}, [form.getValues('enableOnOffSwitching')]);

return (
<div className="p-6 bg-white rounded-md">
<Form {...form}>
Expand All @@ -58,49 +72,84 @@ export default function WidgetResourcesMapDatalayers(
className="space-y-4 lg:w-1/2">

{datalayers?.map((item) => (
<FormField
key={item.id}
control={form.control}
name="datalayer"
render={({ field }) => {
<div key={item.id}>
<FormField
control={form.control}
name="datalayer"
render={({field}) => {
const isChecked = Array.isArray(field.value) && field.value.some(obj => obj.id === Number(item.id));

return (
<FormItem
key={item.id}
className="flex flex-column items-start space-x-0 space-y-3">
<div className='flex flex-row items-start space-x-3 space-y-0'>
<FormControl>
<Checkbox
checked={isChecked}
onCheckedChange={(checked) => {
let values = form.getValues('datalayer') || [];
<FormItem className="flex flex-row items-start space-x-3 space-y-0">
<FormControl>
<Checkbox
checked={isChecked}
onCheckedChange={(checked) => {
let values = form.getValues('datalayer') || [];

if (checked) {
if (!values.some(obj => obj.id === Number(item.id))) {
const { name } = item;
form.setValue('datalayer', [...values, { name, id: Number(item.id) }]);
props.onFieldChanged(field.name, [...values, { name, id: Number(item.id) }]);
}
} else {
const filteredValues = values.filter(obj => obj.id !== Number(item.id));
form.setValue('datalayer', filteredValues);
props.onFieldChanged('datalayer', filteredValues);
}
}}
/>
</FormControl>
<FormLabel className="font-normal">
{item.name}
</FormLabel>
</div>
<FormMessage />
if (checked) {
if (!values.some(obj => obj.id === Number(item.id))) {
const {name} = item;
form.setValue('datalayer', [...values, {name, id: Number(item.id)}]);
props.onFieldChanged(field.name, [...values, {name, id: Number(item.id)}]);
}
} else {
const filteredValues = values.filter(obj => obj.id !== Number(item.id));
form.setValue('datalayer', filteredValues);
props.onFieldChanged('datalayer', filteredValues);
}
}}
/>
</FormControl>
<FormLabel className="font-normal">
{item.name}
</FormLabel>
<FormMessage/>
</FormItem>
);
}}
/>
}}
/>

{(
form.getValues('enableOnOffSwitching') &&
Array.isArray(form.getValues('datalayer')) &&
form.getValues('datalayer')?.some(obj => obj.id === Number(item.id))
) && (
<FormField
control={form.control}
name={`activeOnInit_${item.id}`}
render={({field}) => {
const activeOnInit = form.getValues('datalayer')
?.find(obj => obj.id === Number(item.id))?.activeOnInit ?? true;

return (
<FormItem className="flex flex-row items-start space-x-3 space-y-0">
<FormControl>
<Checkbox
checked={activeOnInit}
onCheckedChange={(checked) => {
let values = form.getValues('datalayer') || [];
const updatedValues = values.map(obj =>
obj.id === Number(item.id) ? { ...obj, activeOnInit: !!checked } : obj
);
form.setValue('datalayer', updatedValues);
props.onFieldChanged('datalayer', updatedValues);
}}
/>
</FormControl>
<FormLabel className="font-normal">
Deze laag standaard tonen bij het openen van de kaart
</FormLabel>
<FormMessage/>
</FormItem>
);
}}
/>
)}
</div>
)) || null}

<br />
<FormField
control={form.control}
name="enableOnOffSwitching"
Expand Down
19 changes: 11 additions & 8 deletions packages/leaflet-map/src/resource-overview-map.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ const ResourceOverviewMap = ({
projectId: props.projectId,
});

const mapDataLayers: { layer: any; icon?: any, name: string, id: string }[] = [];
const mapDataLayers: { layer: any; icon?: any, name: string, id: string, activeOnInit: boolean }[] = [];
const selectedDataLayers = props?.resourceOverviewMapWidget?.datalayer || [];
const showOnOffButtons = props?.resourceOverviewMapWidget?.enableOnOffSwitching || false;

Expand All @@ -171,6 +171,7 @@ const ResourceOverviewMap = ({
layer: foundDatalayer.layer,
icon: foundDatalayer.icon,
name: selectedDataLayer.name,
activeOnInit: typeof(selectedDataLayer?.activeOnInit) === 'boolean' ? selectedDataLayer.activeOnInit : true,
id: stableId
});
}
Expand Down Expand Up @@ -230,7 +231,7 @@ const ResourceOverviewMap = ({
useEffect(() => {
if (mapDataLayers.length > 0 && Object.keys(activeLayers).length === 0) {
const initialLayers = mapDataLayers.reduce((acc, layer) => {
acc[layer.id] = true; // Zet alle lagen standaard aan
acc[layer.id] = layer.activeOnInit;
return acc;
}, {} as { [key: string]: boolean });

Expand All @@ -250,16 +251,18 @@ const ResourceOverviewMap = ({
return ((polygon && center) || !areaId) ? (
<div className='map-container--buttons'>
<Button appearance='primary-action-button' className='skip-link' onClick={skipMarkers}>Sla kaart over</Button>
{showOnOffButtons && mapDataLayers.length > 0 && (
{ mapDataLayers.length > 0 && (
<ul className="legend">
{mapDataLayers.map(layer => (
<li key={layer.id} className="legend-item">
<label className="legend-label">
<input
type="checkbox"
checked={!!activeLayers[layer.id]}
onChange={() => toggleLayer(layer.id)}
/>
{showOnOffButtons && (
<input
type="checkbox"
checked={!!activeLayers[layer.id]}
onChange={() => toggleLayer(layer.id)}
/>
)}
<div className="legend-info">
{(layer.icon && layer.icon[0] && layer.icon[0].url) && <img src={layer.icon[0].url} alt="Layer icon" className="legend-icon"/>}
<span>{layer.name || 'Naamloze laag'}</span>
Expand Down
1 change: 1 addition & 0 deletions packages/leaflet-map/src/types/resource-overview-map-widget-props.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,4 +32,5 @@ export type DataLayer = {
layer: any;
icon: any;
name: string;
activeOnInit?: boolean;
};

0 comments on commit ade516a

Please sign in to comment.