Skip to content

Commit

Permalink
feat(ui): lowcode improvement (#1136)
Browse files Browse the repository at this point in the history 
Added different QOL regarding the low code first iteration :

- When the id or namespace is empty on save, show an error
- Remove the useless Add button in the metadata editor
- Dragged node has increased zIndex, so it's always above other nodes
- Confirm task deletion
- Highlight the path when hovering over a task and when two tasks a swappable
- reduce the opacity of all nodes that can not* be swapped with the node being dragged
- Fix an issue where empty inputs are added to the flow
  • Loading branch information
@Skraye
Skraye authored Apr 6, 2023
1 parent 580d731 commit 4c96adf
Show file tree
Hide file tree
Showing 4 changed files with 76 additions and 55 deletions.
2 changes: 1 addition & 1 deletion ui/src/components/flows/MetadataEditor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -210,7 +210,7 @@
namespace: this.newMetadata.namespace,
description: this.newMetadata.description,
labels: this.arrayToObject(this.newMetadata.labels),
inputs: this.newMetadata.inputs,
inputs: this.newMetadata.inputs.filter(e => e.name && e.type),
variables: this.arrayToObject(this.newMetadata.variables),
taskDefaults: taskDefaults,
disabled: this.newMetadata.disabled
Expand Down
9 changes: 2 additions & 7 deletions ui/src/components/flows/MetadataInputs.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@
</div>
</el-drawer>
<div class="w-100">
<div v-if="newInputs.length > 0">
<div>
<div class="d-flex w-100" v-for="(input, index) in newInputs" :key="index">
<div class="flex-fill flex-grow-1 w-100 me-2">
<el-input
Expand All @@ -113,11 +113,6 @@
</div>
</div>
</div>
<div v-else class="d-flex justify-content-center">
<el-button :icon="Plus" type="success" class="w-25" @click="addInput">
Add
</el-button>
</div>
</div>
</div>
</template>
Expand Down Expand Up @@ -150,7 +145,7 @@
}
return {
newInputs: [],
newInputs: [{}],
inputsType: [
{
component: "editor",
Expand Down
109 changes: 65 additions & 44 deletions ui/src/components/graph/Topology.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@
const showTopology = ref(props.isCreating ? "source" : (props.execution ? "topology" : "combined"));
const updatedFromEditor = ref(false);
const timer = ref(null);
const dragging = ref(false);
const flowables = () => {
Expand Down Expand Up @@ -468,14 +469,20 @@
}
};
// const onMouseOver = (node) => {
// addSelectedElements(linkedElements(id, node.uid));
// }
//
// const onMouseLeave = () => {
// removeSelectedNodes(getNodes.value);
// removeSelectedEdges(getEdges.value);
// }
const onMouseOver = (node) => {
if (!dragging.value) {
linkedElements(id, node.uid).forEach((n) => {
if (n.type === "task") {
n.style = {...n.style, outline: "0.5px solid " + cssVariable('--bs-yellow')}
}
});
}
}
const onMouseLeave = () => {
resetNodesStyle();
}
const forwardEvent = (type, event) => {
emit(type, event);
Expand Down Expand Up @@ -528,17 +535,24 @@
}
const onDelete = (event) => {
const section = event.section ? event.section : "tasks";
const flowParsed = YamlUtils.parse(flowYaml.value);
if (section === "tasks" && flowParsed.tasks.length === 1 && flowParsed.tasks.map(e => e.id).includes(event.id)) {
store.dispatch("core/showMessage", {
variant: "error",
title: t("can not delete"),
message: t("can not have less than 1 task")
});
return;
}
onEdit(YamlUtils.deleteTask(flowYaml.value, event.id, section));
toast.confirm(
t("delete task confirm", {taskId: flowParsed.id}),
() => {
const section = event.section ? event.section : "tasks";
if (section === "tasks" && flowParsed.tasks.length === 1 && flowParsed.tasks.map(e => e.id).includes(event.id)) {
store.dispatch("core/showMessage", {
variant: "error",
title: t("can not delete"),
message: t("can not have less than 1 task")
});
return;
}
onEdit(YamlUtils.deleteTask(flowYaml.value, event.id, section));
},
() => {}
)
}
const onCreateNewTask = (event) => {
Expand Down Expand Up @@ -619,13 +633,14 @@
}
onNodeDragStart((e) => {
// addSelectedElements(linkedElements(id, e.node.data.node.uid));
dragging.value = true;
resetNodesStyle();
e.node.style = {...e.node.style, zIndex: 1976}
lastPosition.value = e.node.position;
})
onNodeDragStop((e) => {
// removeSelectedNodes(getNodes.value);
// removeSelectedEdges(getEdges.value);
dragging.value = false;
if (checkIntersections(e.intersections, e.node) === null) {
const taskNode1 = e.node;
// check multiple intersection with task
Expand All @@ -638,34 +653,27 @@
} else {
getNodes.value.find(n => n.id === e.node.id).position = lastPosition.value;
}
getNodes.value.forEach(n => {
if (n.type === "task" || n.type === "trigger") {
n.style = {...n.style, opacity: "1"}
}
})
resetNodesStyle();
e.node.style = {...e.node.style, zIndex: 1}
lastPosition.value = null;
})
onNodeDrag((e) => {
if (checkIntersections(e.intersections, e.node)) {
const taskNodeIds = e.intersections.filter(n => n.type === "task" || n.type === "trigger").map(n => n.id)
getNodes.value.forEach(n => {
if (n.type === "task" || n.type === "trigger") {
if (taskNodeIds.includes(n.id)) {
n.style = {...n.style, opacity: "0.5"}
} else {
n.style = {...n.style, opacity: "1"}
}
}
})
} else {
const tasksMeet = e.intersections.filter(n => n.type === "task").map(n => n.id);
getNodes.value.forEach(n => {
if (n.type === "task" || n.type === "trigger") {
n.style = {...n.style, opacity: "1"}
resetNodesStyle();
getNodes.value.filter(n => n.id !== e.node.id).forEach(n => {
if (n.type === "trigger" || (n.type === "task" && YamlUtils.isParentChildrenRelation(flowYaml.value, n.id, e.node.id))) {
n.style = {...n.style, opacity: "0.5"}
} else {
n.style = {...n.style, opacity: "1"}
}
})
if (!checkIntersections(e.intersections, e.node) && e.intersections.filter(n => n.type === "task").length === 1) {
e.intersections.forEach(n => {
if (n.type === "task") {
n.style = {...n.style, outline: "0.5px solid " + cssVariable('--bs-primary')}
}
})
e.node.style = {...e.node.style, outline: "0.5px solid " + cssVariable('--bs-primary')}
}
})
Expand All @@ -683,6 +691,13 @@
return null;
}
const resetNodesStyle = () => {
getNodes.value.filter(n => n.type === "task" || n.type === " trigger")
.forEach(n => {
n.style = {...n.style, opacity: "1", outline: "none"}
})
}
const editorUpdate = (event) => {
updatedFromEditor.value = true;
flowYaml.value = event;
Expand Down Expand Up @@ -739,7 +754,11 @@
})
return;
} else {
isEditMetadataOpen.value = true;
store.dispatch("core/showMessage", {
variant: "error",
title: t("can not save"),
message: t("flow must have id and namespace")
});
return;
}
}
Expand Down Expand Up @@ -783,6 +802,8 @@
@edit="onEdit"
@delete="onDelete"
@addFlowableError="onAddFlowableError"
@mouseover="onMouseOver"
@mouseleave="onMouseLeave"
/>
</template>

Expand Down
11 changes: 8 additions & 3 deletions ui/src/translations.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -402,7 +402,10 @@
"switch-view": "Switch view",
"source and topology": "Source and topology",
"editor": "Editor",
"error in editor": "An error have been found in the editor"
"error in editor": "An error have been found in the editor",
"delete task confirm": "Do you want to delete the task <code>{taskId}</code> ?",
"can not save": "Can not save",
"flow must have id and namespace": "Flow must have an id and a namespace."
},
"fr": {
"id": "Identifiant",
Expand Down Expand Up @@ -808,7 +811,9 @@
"switch-view": "Changer de vue",
"source and topology": "Source et topologie",
"editor": "Éditeur",
"error in editor": "Une erreur a été trouvé dans l'éditeur"

"error in editor": "Une erreur a été trouvé dans l'éditeur",
"delete task confirm": "Êtes-vous sûr de vouloir supprimer la tâche <code>{taskId}</code> ?",
"can not save": "Impossible de sauvegarder",
"flow must have id and namespace": "Le flow doit avoir un id et un namespace."
}
}

0 comments on commit 4c96adf

Please sign in to comment.