Closed dalssoft closed 1 year ago
I will work on this issue.
Guys, where do you think this diagram should be on the shelf? I think to put it on the bottom of usecase details.
My suggestion is to have a switch buttons to view steps as text or as workflow, something like this:
Hello! What do you think about this example?
Wow! great job @maikmb!
(1) is it possible to change the color of the graph? this blue/purple doesn't match the current visual identity.
(2) have you tested with complex UCs (many IFs and/or multi-level steps)?
Well done @maikmb!
For me, we just need to change the colors, nothing more.
Hey guys!
This is an example with Herbs primary color and complex UCs like many Ifs or multi-level-steps. Any more suggestions?
Awesome!
Please open the PR
Wow! its getting very cool!!
One thing that I didn't understand was this part:
Could you post here the code for this use case?
Please open the PR
Hi @jhomarolo, I will implement unit tests to open PR. I need one more day to implement it.
Could you post here the code for this use case?
Hi @dalssoft ! This part refers to Multi-Level Steps.
Step example:
'Send real time events': step({
'Update mobile push notifications': step(async (ctx) => {
return Ok()
}),
'Update payment cart': step(async (ctx) => {
return Ok()
}),
}),
Hey guys, here's the full example with complex Multi-Level Steps.
Flow Chart
Usecase
const updateItem = (injection) =>
usecase('Update Item', {
request: {
id: Number,
description: String,
isDone: Boolean,
position: Number
},
response: Item,
'Validate request': step(async (ctx) => {
return Ok()
}),
'Check if is necessary to update': ifElse({
'If position has changed ': step((ctx) => {
return Ok(true)
}),
'Save itens': step(async (ctx) => {
return Ok()
}),
'Updated item': step(async (ctx) => {
return Ok()
}),
}),
'Notify update item': step(async (ctx) => {
return Ok()
}),
'Calculate stock': step(async (ctx) => {
return Ok()
}),
'Send real time events': step({
'Update mobile push notifications': step(async (ctx) => {
return Ok()
}),
'Update payment cart': step(async (ctx) => {
return Ok()
}),
}),
'Check if has product': ifElse({
'If has product ': step((ctx) => {
return Ok(true)
}),
'Update product item': step(async (ctx) => {
return Ok()
}),
'Create product item': step(async (ctx) => {
return Ok()
}),
}),
'Update cart dashboard': step(async (ctx) => {
return Ok()
}),
'Save product': step({
'Update database': step(async (ctx) => {
return Ok()
}),
'Update cache database': step(async (ctx) => {
return Ok()
}),
}),
})
Is there a PR for this issue? I couldn't find.
Hi @dalssoft,
I will open a PR for this feature. I created a new glue, herbs2mermaid, and configure it for my project to test with shelf.
@maikmb when you finish, please put the pr link here
since we have https://github.com/herbsjs/herbs2mermaid now, can we move on with this feature?
It would be interesting to understand a use case not only in code but also having a more "visual" approach and have this information as part of Shelf experience.
For that we could extract metadata from Herbs
usecase
and export to MermaidJS:Generated graph (by github / mermaid):