Skip to content

Commit ddf632f

Browse files
boazpoolmanboazpoolman
committed
wip: bug fixing
1 parent f545b3a commit ddf632f

File tree

2 files changed

+90
-70
lines changed

2 files changed

+90
-70
lines changed

‎admin/src/domManipulator.js‎

Lines changed: 90 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect } from 'react';
1+
import React, { useEffect, useState } from 'react';
22
import { renderToStaticMarkup } from 'react-dom/server';
33
import { useCMEditViewDataManager, useNotification } from '@strapi/helper-plugin';
44
import { useIntl } from 'react-intl';
@@ -27,6 +27,41 @@ const DuplicatorButton = ({ index }) => (
2727
</button>
2828
);
2929

30+
const insertDuplicateButton = (node) => {
31+
// Zoek naar alle 'Delete' knoppen binnen het nieuwe node
32+
const deleteButtons = node.querySelectorAll('button');
33+
deleteButtons.forEach((button) => {
34+
const duplicatorButtons = document.querySelectorAll('.duplicator-button');
35+
const index = duplicatorButtons.length;
36+
const span = button.querySelector('span');
37+
if (span && span.textContent.trim() === 'Delete') {
38+
console.log('Gevonden Delete knop:', button);
39+
40+
const buttonContainer = button.parentElement; // De <span> element rond de 'Delete' knop
41+
42+
if (buttonContainer) {
43+
// Controleer of de duplicator knop al bestaat binnen dezelfde container
44+
if (!buttonContainer.querySelector('.duplicator-span')) { // Check for duplicator-span
45+
console.log('Voeg duplicator knop toe aan:', buttonContainer);
46+
47+
// Creëer een nieuwe <span> element voor de duplicator knop
48+
const duplicatorSpan = document.createElement('span');
49+
duplicatorSpan.classList.add('duplicator-span');
50+
duplicatorSpan.style.display = 'inline-block'; // Zorg ervoor dat de span naast bestaande spans staat
51+
52+
// Render de DuplicatorButton component als HTML string en geef de variant index door
53+
const duplicatorButtonHTML = renderToStaticMarkup(<DuplicatorButton index={index} />);
54+
duplicatorSpan.innerHTML = duplicatorButtonHTML;
55+
56+
// Voeg de duplicator span toe naast de bestaande span
57+
buttonContainer.parentElement.insertBefore(duplicatorSpan, buttonContainer.nextSibling);
58+
}
59+
} else {
60+
console.warn('buttonContainer niet gevonden voor Delete knop:', button);
61+
}
62+
}
63+
});
64+
};
3065

3166

3267
/**
@@ -37,68 +72,45 @@ const DuplicatorButton = ({ index }) => (
3772
* @param {object} app - Strapi app instance
3873
*/
3974
export const setupDOMManipulator = (app) => {
75+
const [insertedButtons, setInsertedButtons] = useState(0);
4076
const targetNode = document.body; // Observeer het gehele body-element
4177
const config = { childList: true, subtree: true }; // Observeer kind-elementen en de gehele subtree
42-
const { modifiedData, onChange } = useCMEditViewDataManager();
78+
const { modifiedData, onChange, slug, allLayoutData } = useCMEditViewDataManager();
79+
80+
console.log(modifiedData);
4381

4482
useEffect(() => {
45-
console.log(modifiedData);
46-
}, [modifiedData]);
47-
48-
/**
49-
* MutationObserver Callback
50-
* Deze functie wordt aangeroepen telkens wanneer er wijzigingen zijn in de geobserveerde nodes.
51-
*
52-
* @param {MutationRecord[]} mutationsList - Lijst van mutaties
53-
* @param {MutationObserver} observer - De observer instance
54-
*/
55-
const callback = (mutationsList, observer) => {
56-
mutationsList.forEach((mutation) => {
57-
if (mutation.type === 'childList') {
58-
mutation.addedNodes.forEach((node) => {
59-
if (node.nodeType === Node.ELEMENT_NODE) {
60-
// Zoek naar alle 'Delete' knoppen binnen het nieuwe node
61-
const deleteButtons = node.querySelectorAll('button');
62-
let variantIndex = 0; // Index om de juiste variant aan te geven
63-
deleteButtons.forEach((button) => {
64-
const span = button.querySelector('span');
65-
if (span && span.textContent.trim() === 'Delete') {
66-
console.log('Gevonden Delete knop:', button);
67-
68-
const buttonContainer = button.parentElement; // De <span> element rond de 'Delete' knop
69-
70-
if (buttonContainer) {
71-
// Controleer of de duplicator knop al bestaat binnen dezelfde container
72-
if (!buttonContainer.querySelector('.duplicator-span')) { // Check for duplicator-span
73-
console.log('Voeg duplicator knop toe aan:', buttonContainer);
74-
75-
// Creëer een nieuwe <span> element voor de duplicator knop
76-
const duplicatorSpan = document.createElement('span');
77-
duplicatorSpan.classList.add('duplicator-span');
78-
duplicatorSpan.style.display = 'inline-block'; // Zorg ervoor dat de span naast bestaande spans staat
79-
80-
// Render de DuplicatorButton component als HTML string en geef de variant index door
81-
const duplicatorButtonHTML = renderToStaticMarkup(<DuplicatorButton index={variantIndex} />);
82-
duplicatorSpan.innerHTML = duplicatorButtonHTML;
83-
84-
// Voeg de duplicator span toe naast de bestaande span
85-
buttonContainer.parentElement.insertBefore(duplicatorSpan, buttonContainer.nextSibling);
86-
87-
// Verhoog de variant index
88-
variantIndex++;
89-
}
90-
} else {
91-
console.warn('buttonContainer niet gevonden voor Delete knop:', button);
92-
}
93-
}
94-
});
95-
}
96-
});
83+
const visibleFields = allLayoutData.contentType.layouts.edit;
84+
const repeatableComponentFields = visibleFields.filter((field) => field[0].fieldSchema.type === 'component' && field[0].fieldSchema.repeatable);
85+
86+
repeatableComponentFields.forEach((field) => {
87+
const { label } = field[0].metadatas;
88+
89+
for (const labelElement of document.querySelectorAll('label')) {
90+
if (labelElement.textContent?.startsWith(`${label}`)) {
91+
const wrapperElement = labelElement.parentElement.parentElement.parentElement;
92+
insertDuplicateButton(wrapperElement);
93+
setInsertedButtons(insertedButtons + 1);
94+
}
9795
}
9896
});
99-
};
97+
}, [allLayoutData]);
10098

10199
useEffect(() => {
100+
const callback = (mutationsList, observer) => {
101+
mutationsList.forEach((mutation) => {
102+
if (mutation.type === 'childList') {
103+
mutation.addedNodes.forEach((node) => {
104+
if (node.nodeType === Node.ELEMENT_NODE) {
105+
insertDuplicateButton(node);
106+
setInsertedButtons(insertedButtons + 1);
107+
console.log('inserted button');
108+
}
109+
});
110+
}
111+
});
112+
};
113+
102114
// Initialiseer de MutationObserver met de callback en config
103115

104116
// @todo: De mutiation observer zorgt er voor dat de duplicator knoppen
@@ -114,17 +126,17 @@ export const setupDOMManipulator = (app) => {
114126
// en event listeners toe te voegen.
115127

116128
// Selecteer de duplicator-button om een event listener toe te voegen
117-
const duplicatorButton = document.querySelector('.duplicator-button');
129+
const duplicatorButtons = document.querySelectorAll('.duplicator-button');
118130

119-
if (!duplicatorButton) {
131+
if (!duplicatorButtons || duplicatorButtons.length === 0) {
120132
return () => {};
121133
}
122134

123-
const clickFunction = () => {
124-
console.log('Dupliceer knop geklikt via innerHTML');
135+
const clickFunction = (e) => {
136+
console.log('Dupliceer knop geklikt via innerHTML', e);
125137

126138
// Gebruik de variantIndex om de juiste variant te vinden
127-
const index = parseInt(duplicatorButton.getAttribute('data-index'), 10);
139+
const index = parseInt(e.target.parentElement.parentElement.getAttribute('data-index'), 10);
128140
console.log('Dupliceer knop indexx:', index);
129141

130142
// Haal de variant data op via de index
@@ -141,7 +153,8 @@ export const setupDOMManipulator = (app) => {
141153
// Implementeer de duplicatie logica
142154
// @todo: Hier staat .Variant hardcoded. Dit moet dynamisch worden gemaakt.
143155
const currentVariants = modifiedData.Variant || [];
144-
const newVariant = { ...componentData, id: Date.now() }; // Voeg unieke ID toe indien nodig
156+
const newVariant = { ...componentData, __temp_key__: Date.now() }; // Voeg unieke ID toe indien nodig
157+
delete newVariant.id;
145158

146159
// Update de varianten lijst en voeg het nieuwe item toe
147160
const updatedVariants = [...currentVariants, newVariant];
@@ -150,17 +163,25 @@ export const setupDOMManipulator = (app) => {
150163
// @todo: Hier staat Variant hardcoded. Dit moet dynamisch worden gemaakt.
151164
onChange({ target: { name: 'Variant', value: updatedVariants } });
152165

153-
// Gebruik notification in plaats van alert
154-
app.toggleNotification({
155-
type: 'success',
156-
message: { id: getTrad('duplicator.success'), defaultMessage: 'Component gedupliceerd!' },
157-
});
166+
// // Gebruik notification in plaats van alert
167+
// app.toggleNotification({
168+
// type: 'success',
169+
// message: { id: getTrad('duplicator.success'), defaultMessage: 'Component gedupliceerd!' },
170+
// });
158171
};
159172

160-
duplicatorButton.addEventListener('click', clickFunction);
173+
duplicatorButtons.forEach((button) => {
174+
button.addEventListener('click', clickFunction);
175+
});
176+
177+
console.log('added click function');
161178

162-
return () => duplicatorButton.removeEventListener('click', clickFunction);
163-
}, [modifiedData]);
179+
return () => {
180+
duplicatorButtons.forEach((button) => {
181+
button.removeEventListener('click', clickFunction);
182+
});
183+
};
184+
}, [modifiedData, insertedButtons]);
164185
};
165186

166187
export default setupDOMManipulator;

‎admin/src/index.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
import { prefixPluginTranslations } from '@strapi/helper-plugin';
33
import pluginPkg from '../../package.json';
44
import pluginId from './helpers/pluginId';
5-
import CMEditViewExclude from './components/CMEditViewExclude';
65
import Duplicator from './components/Duplicator';
76
import pluginPermissions from './permissions';
87
import { setupDOMManipulator } from './domManipulator';

0 commit comments

Comments
 (0)