Skip to content

Commit

Permalink
several improvements and bugfixes
Browse files Browse the repository at this point in the history
  • Loading branch information
Philipp Kuhlmay committed Oct 26, 2023
1 parent c150960 commit f1d056b
Show file tree
Hide file tree
Showing 27 changed files with 40,356 additions and 3,299 deletions.
226 changes: 51 additions & 175 deletions Build/Sources/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,24 @@ import {useEffect, useState} from "react";
import {LeftContentComponent} from "./components/views/LeftContentComponent";
import {RightContentComponent} from "./components/views/RightContentComponent";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {getDemoExtensionKey} from "./helper";

const initialNodes = [];
const initialEdges = [];
import initialProperties from "./initialValues/properties";
import defaultAuthor from "./initialValues/author";
import defaultModule from "./initialValues/module";
import defaultPlugin from "./initialValues/plugin";

function App() {
// Nodes for ReactFlow
const [nodes, setNodes] = useState([]);
const [edges, setEdges] = useState([]);

const [properties, setProperties] = useState(initialProperties);
const [authors, setAuthors] = useState([]);
const [plugins, setPlugins] = useState([]);
const [modules, setModules] = useState([]);

// Zustand für das Ein- und Ausklappen der linken Spalte
const [isLeftColumnVisible, setLeftColumnVisible] = useState(true);

const onNodesChanged = (nodes) => {
// Dont use prev
console.log("onNodesChanged");
Expand All @@ -25,100 +33,37 @@ function App() {
console.log(nodes);
}, [nodes]);

useEffect(() => {
const leftColumn = document.getElementById('left-column');
if (leftColumn) {
leftColumn.style.opacity = isLeftColumnVisible ? '1' : '0';
}
}, [isLeftColumnVisible]);

const onEdgesChanged = (edges) => {
// Dont use prev
setEdges(edges);
}

// Zustand für das Ein- und Ausklappen der linken Spalte
const [isLeftColumnVisible, setLeftColumnVisible] = useState(true);

// Funktion zum Umschalten der Sichtbarkeit der linken Spalte
const toggleLeftColumn = () => {
setLeftColumnVisible(!isLeftColumnVisible);
}

const [properties, setProperties] = useState(
{
backendModules: [],
description: "",
emConf: {
"category": "",
"custom_category": "",
"dependsOn": "",
"disableLocalization": false,
"disableVersioning": false,
"generateDocumentationTemplate": false,
"generateEditorConfig": true,
"generateEmptyGitRepository": false,
"sourceLanguage": "en",
"state": "alpha",
"targetVersion": "12.4",
"version": "1.0.0"
},
extensionKey: "",
name: "",
originalExtensionKey: "",
originalVendorName: "",
persons: [],
plugins: [],
vendorName: ""
}
);
const [authors, setAuthors] = useState([]);
const [plugins, setPlugins] = useState([]);
const [modules, setModules] = useState([]);

const defaultAuthor = {
company: '',
email: '',
name: '',
role: '',
}

const defaultModule = {
actions : {
controllerActionCombinations: ""
},
description: '',
key: '',
mainModule: '',
name: '',
tabLabel: '',
}
const generateUUID = () => Math.random().toString();

const defaultPlugin = {
actions: {
controllerActionCombinations: "",
noncacheableActions: ""
},
description: '',
key: '',
name: '',
}

const addNewAuthorHandler = () => {
setAuthors((prevAuthors) => {
return [...prevAuthors, {...defaultAuthor, id: Math.random().toString()}];
const addNewItemHandler = (setter, defaultItem) => () => {
setter((prevItems) => {
return [...prevItems, {...defaultItem, id: generateUUID()}];
});
}

const addNewModuleHandler = () => {
setModules((prevModules) => {
return [...prevModules, {...defaultModule, id: Math.random().toString()}];
});
}

const addNewPluginHandler = () => {
setPlugins((prevPlugins) => {
return [...prevPlugins, {...defaultPlugin, id: Math.random().toString()}];
});
}
const addNewAuthorHandler = addNewItemHandler(setAuthors, defaultAuthor);
const addNewModuleHandler = addNewItemHandler(setModules, defaultModule);
const addNewPluginHandler = addNewItemHandler(setPlugins, defaultPlugin);

const updateExtensionPropertiesHandler = (key, value) => {
// console.log("updateExtensionPropertiesHandler")
// console.log(key)
// console.log(value)
if (key.includes('.')) {
const [parentKey, childKey] = key.split('.');
setProperties(prevProperties => ({
Expand Down Expand Up @@ -183,133 +128,62 @@ function App() {
}

const removeAuthorHandler = (authorId) => {
// TODO Testen !!!
setAuthors((prevAuthors) => {
return prevAuthors.filter((author) => author.id !== authorId);
});
}

const removePluginHandler = (pluginId) => {
// TODO Testen !!!
setPlugins((prevPlugins) => {
return prevPlugins.filter((plugin) => plugin.id !== pluginId);
});
}

const removeModuleHandler = (moduleId) => {
// TODO Testen !!!
setModules((prevModules) => {
return prevModules.filter((module) => module.id !== moduleId);
});
}

const moveAuthor = (index, direction) => {
setAuthors(prevAuthors => {
const newAuthors = [...prevAuthors];
const moveElement = (index, direction, array, setArray) => {
setArray(prevArray => {
const newArray = [...prevArray];
const targetIndex = index + direction;

// Überprüfen, ob der Zielindex innerhalb der gültigen Bereichsgrenzen liegt
if (targetIndex >= 0 && targetIndex < newAuthors.length) {
// Elemente tauschen
const temp = newAuthors[targetIndex];
newAuthors[targetIndex] = newAuthors[index];
newAuthors[index] = temp;
if (targetIndex >= 0 && targetIndex < newArray.length) {
const temp = newArray[targetIndex];
newArray[targetIndex] = newArray[index];
newArray[index] = temp;
}

return newAuthors;
return newArray;
});
}

const movePlugin = (index, direction) => {
setPlugins(prevPlugins => {
const newPlugins = [...prevPlugins];
const targetIndex = index + direction;

// Überprüfen, ob der Zielindex innerhalb der gültigen Bereichsgrenzen liegt
if (targetIndex >= 0 && targetIndex < newPlugins.length) {
// Elemente tauschen
const temp = newPlugins[targetIndex];
newPlugins[targetIndex] = newPlugins[index];
newPlugins[index] = temp;
}

return newPlugins;
});
}

const moveModule = (index, direction) => {
setModules(prevModules => {
const newModules = [...prevModules];
const targetIndex = index + direction;

// Überprüfen, ob der Zielindex innerhalb der gültigen Bereichsgrenzen liegt
if (targetIndex >= 0 && targetIndex < newModules.length) {
// Elemente tauschen
const temp = newModules[targetIndex];
newModules[targetIndex] = newModules[index];
newModules[index] = temp;
}
return newModules;
});
}

useEffect(() => {
const leftColumn = document.getElementById('left-column');
if (leftColumn) {
leftColumn.style.opacity = isLeftColumnVisible ? '1' : '0';
}
}, [isLeftColumnVisible]);
// Benutzen Sie dann die 'moveElement' Methode für die spezifischen Operationen
const moveAuthor = (index, direction) => moveElement(index, direction, authors, setAuthors);
const movePlugin = (index, direction) => moveElement(index, direction, plugins, setPlugins);
const moveModule = (index, direction) => moveElement(index, direction, modules, setModules);

const handleOpenExtension = (extension) => {
// console.log("handleDemoInput");
// console.log(properties);
console.log("handleOpenExtension");
console.log(extension);

const working = JSON.parse(extension.working);
console.log(working);
const updatedProperties = {
...properties,
description: working.properties.description,
emConf: working.properties.emConf,
extensionKey: working.properties.extensionKey,
name: working.properties.name,
vendorName: working.properties.vendorName
};

setProperties(updatedProperties);

const updatedAuthors = working.properties.persons.map((author) => {
return {
...author,
id: Math.random().toString()
}
});
setAuthors(updatedAuthors);
// Sets properties.
setProperties(prev => ({...prev, ...working.properties}));

const updatedPlugins = working.properties.plugins.map((plugin) => {
return {
...plugin,
id: Math.random().toString()
}
});
setPlugins(updatedPlugins);
// Helper function to generate new IDs.
const createNewIds = (arr) => arr.map(item => ({...item, id: Math.random().toString()}));

const updatedModules = working.properties.backendModules.map((module) => {
return {
...module,
id: Math.random().toString()
}
});
setModules(updatedModules);
// Updated authors, plugins and modules with new IDs.
setAuthors(createNewIds(working.properties.persons));
setPlugins(createNewIds(working.properties.plugins));
setModules(createNewIds(working.properties.backendModules));

// console.log(updatedProperties);
// Check if nodes or edges are available, and update them.
setNodes(working.nodes ? createNewIds(working.nodes) : []);
setEdges(working.edges ? createNewIds(working.edges) : []);
}

useEffect(() => {
console.log(properties);
}, [properties]);

return (
<div className="App container-fluid">
<button
Expand Down Expand Up @@ -359,6 +233,8 @@ function App() {
<RightContentComponent
onNodesChanged={onNodesChanged}
onEdgesChanged={onEdgesChanged}
nodes={nodes}
edges={edges}
/>
</div>
</div>
Expand Down
Loading

0 comments on commit f1d056b

Please sign in to comment.