Skip to content

Commit

Permalink
handle next element id
Browse files Browse the repository at this point in the history
  • Loading branch information
timarney committed Nov 25, 2024
1 parent 4792a62 commit 6666a28
Show file tree
Hide file tree
Showing 8 changed files with 47 additions and 32 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -22,16 +22,25 @@ export const ElementPanel = ({
elements: FormElement[];
formId: string;
}) => {
const { getFocusInput, setChangeKey, setFocusInput, remove, moveUp, moveDown, duplicateElement } =
useTemplateStore((s) => ({
getFocusInput: s.getFocusInput,
setChangeKey: s.setChangeKey,
setFocusInput: s.setFocusInput,
remove: s.remove,
moveUp: s.moveUp,
moveDown: s.moveDown,
duplicateElement: s.duplicateElement,
}));
const {
getFocusInput,
setChangeKey,
setFocusInput,
remove,
moveUp,
moveDown,
duplicateElement,
incrementNextElementId,
} = useTemplateStore((s) => ({
getFocusInput: s.getFocusInput,
setChangeKey: s.setChangeKey,
setFocusInput: s.setFocusInput,
remove: s.remove,
moveUp: s.moveUp,
moveDown: s.moveDown,
duplicateElement: s.duplicateElement,
incrementNextElementId: s.incrementNextElementId,
}));

const [className, setClassName] = useState<string>("");
const [ifFocus, setIfFocus] = useState<boolean>(false);
Expand Down Expand Up @@ -74,7 +83,8 @@ export const ElementPanel = ({
setFocusInput(true);
const { en, fr } = await getTranslatedProperties("copy");
duplicateElement(item.id, groupId, en, fr);
}, [duplicateElement, groupId, item.id, setFocusInput]);
incrementNextElementId();
}, [duplicateElement, incrementNextElementId, groupId, item.id, setFocusInput]);

return (
<div
Expand Down
7 changes: 5 additions & 2 deletions lib/hooks/form-builder/useHandleAdd.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,11 @@ import {
import { useTreeRef } from "@formBuilder/components/shared/right-panel/treeview/provider/TreeRefProvider";

export const useHandleAdd = () => {
const { add, addSubItem, setChangeKey } = useTemplateStore((s) => ({
const { add, incrementNextElementId, addSubItem, setChangeKey } = useTemplateStore((s) => ({
add: s.add,
addSubItem: s.addSubItem,
setChangeKey: s.setChangeKey,
incrementNextElementId: s.incrementNextElementId,
}));

const { treeView } = useTreeRef();
Expand Down Expand Up @@ -61,6 +62,7 @@ export const useHandleAdd = () => {
blockLoader(type as LoaderType, index, async (data, position) => {
// Note add() returns the element id -- we're not using it yet
id = await add(position, data.type, data, groupId);
incrementNextElementId();
});
return id;
}
Expand All @@ -70,6 +72,7 @@ export const useHandleAdd = () => {
item.properties.dynamicRow = await getTranslatedDynamicRowProperties();
}
id = await add(index, item.type, item, groupId);
incrementNextElementId();
treeView?.current?.addItem(String(id));

const el = document.getElementById(`item-${id}`);
Expand All @@ -82,7 +85,7 @@ export const useHandleAdd = () => {

el?.focus();
},
[add, create, groupId, treeView]
[add, incrementNextElementId, create, groupId, treeView]
);

const handleAddSubElement = useCallback(
Expand Down
1 change: 1 addition & 0 deletions lib/store/defaults.ts
Original file line number Diff line number Diff line change
Expand Up @@ -38,5 +38,6 @@ export const defaultForm = {
},
layout: [],
elements: [],
nextElementId: 1,
groups: {},
};
1 change: 1 addition & 0 deletions lib/store/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ export interface TemplateStoreState extends TemplateStoreProps {
setChangeKey: (key: string) => void;
getGroupsEnabled: () => boolean;
setGroupsLayout: (layout: string[]) => void;
incrementNextElementId: () => void;
}

export interface InitialTemplateStoreProps extends TemplateStoreProps {
Expand Down
19 changes: 16 additions & 3 deletions lib/store/useTemplateStore.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ import {
moveElementUp,
removeElementById,
removeById,
incrementElementId,
getSchemaFromState,
incrementSubElementId,
cleanInput,
Expand Down Expand Up @@ -80,6 +79,11 @@ const createTemplateStore = (initProps?: Partial<InitialTemplateStoreProps>) =>
} else {
initProps.form.groups = orderGroups(initProps.form.groups, initProps.form.groupsLayout);
}

// Handle legacy forms to ensure nextElementId is set correctly
if (initProps.form.nextElementId === 1 && initProps.form.elements.length == 1) {
initProps.form.nextElementId = initProps.form.elements.length + 1;
}
}

return createStore<TemplateStoreState>()(
Expand Down Expand Up @@ -216,7 +220,9 @@ const createTemplateStore = (initProps?: Partial<InitialTemplateStoreProps>) =>
set((state) => {
const allowGroups = state.allowGroupsFlag;

const id = incrementElementId(state.form.elements);
const id = state.form.nextElementId;
state.incrementNextElementId();

const item = {
...defaultField,
...data,
Expand Down Expand Up @@ -366,7 +372,7 @@ const createTemplateStore = (initProps?: Partial<InitialTemplateStoreProps>) =>
duplicateElement: (itemId, groupId = "", copyEn = "", copyFr = "") => {
const elIndex = get().form.elements.findIndex((el) => el.id === itemId);
set((state) => {
const id = incrementElementId(state.form.elements);
const id = state.form.nextElementId;
// deep copy the element
const element = JSON.parse(JSON.stringify(state.form.elements[elIndex]));
element.id = id;
Expand Down Expand Up @@ -497,6 +503,13 @@ const createTemplateStore = (initProps?: Partial<InitialTemplateStoreProps>) =>
state.form.groupsLayout = layout;
});
},
incrementNextElementId: () => {
set((state) => {
// Increment nextElementId
const nextElementId = state.form.nextElementId;
state.form.nextElementId = nextElementId + 1;
});
},
}),
{
name: "form-storage",
Expand Down
1 change: 1 addition & 0 deletions lib/types/form-types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,7 @@ export interface FormProperties {
groups?: GroupsType;
groupsLayout?: string[];
elements: FormElement[];
nextElementId: number;
brand?: BrandProperties;
formPurpose?: string;
[key: string]:
Expand Down
8 changes: 0 additions & 8 deletions lib/utils/form-builder/__tests__/util.test.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import {
sortByLayout,
incrementElementId,
swap,
moveUp,
moveDown,
Expand Down Expand Up @@ -37,13 +36,6 @@ describe("Util", () => {
expect(sorted4).toEqual([{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }]);
});

it("increments element id", () => {
expect(incrementElementId([])).toBe(1);
expect(incrementElementId([{ id: 3 }])).toBe(4);
expect(incrementElementId([{ id: 1 }, { id: 3 }, { id: 2 }])).toBe(4);
expect(incrementElementId([{ id: 6 }, { id: 8 }, { id: 4 }])).toBe(9);
});

it("increments subElement id", () => {
expect(incrementSubElementId([], 4)).toBe(401);
expect(incrementSubElementId([], 5)).toBe(501);
Expand Down
10 changes: 2 additions & 8 deletions lib/utils/form-builder/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -68,14 +68,6 @@ export const swapElement = (arr: FormElement[], index1: number, index2: number)
});
};

export const incrementElementId = (elements: FormElement[]) => {
if (!elements || !elements.length) {
return 1;
}
const ids = elements.map((element) => element.id).sort((a, b) => a - b);
return ids[ids.length - 1] + 1;
};

export const incrementSubElementId = (subElements: FormElement[], elId: number) => {
if (!subElements || !subElements.length) {
return Number(elId.toString() + "01");
Expand Down Expand Up @@ -126,6 +118,7 @@ export const getSchemaFromState = (state: TemplateStoreState, allowGroups = fals
layout,
groups,
groupsLayout,
nextElementId,
},
} = state;

Expand All @@ -141,6 +134,7 @@ export const getSchemaFromState = (state: TemplateStoreState, allowGroups = fals
brand,
groups,
groupsLayout,
nextElementId,
};

// Force this is off until a enable in a follow-up PR
Expand Down

0 comments on commit 6666a28

Please sign in to comment.