Giter Club home page Giter Club logo

Comments (17)

dalssoft avatar dalssoft commented on September 25, 2024 1

My suggestion is to have a switch buttons to view steps as text or as workflow, something like this:

image

from herbsshelf.

jhomarolo avatar jhomarolo commented on September 25, 2024 1

Awesome!

from herbsshelf.

dalssoft avatar dalssoft commented on September 25, 2024 1

since we have https://github.com/herbsjs/herbs2mermaid now, can we move on with this feature?

from herbsshelf.

maikmb avatar maikmb commented on September 25, 2024

I will work on this issue.

from herbsshelf.

maikvortx avatar maikvortx commented on September 25, 2024

Guys, where do you think this diagram should be on the shelf? I think to put it on the bottom of usecase details.

Image

from herbsshelf.

maikmb avatar maikmb commented on September 25, 2024

Hello! What do you think about this example?

screenshot-localhost_4000-2022 07 18-18_57_28

screenshot-localhost_4000-2022 07 18-18_55_45

from herbsshelf.

dalssoft avatar dalssoft commented on September 25, 2024

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)?

from herbsshelf.

jhomarolo avatar jhomarolo commented on September 25, 2024

Well done @maikmb!

For me, we just need to change the colors, nothing more.

from herbsshelf.

maikmb avatar maikmb commented on September 25, 2024

Hey guys!

This is an example with Herbs primary color and complex UCs like many Ifs or multi-level-steps. Any more suggestions?

screenshot-localhost_4000-2022 07 24-21_13_37

from herbsshelf.

jhomarolo avatar jhomarolo commented on September 25, 2024

Please open the PR

from herbsshelf.

dalssoft avatar dalssoft commented on September 25, 2024

Wow! its getting very cool!!

One thing that I didn't understand was this part:
image

Could you post here the code for this use case?

from herbsshelf.

maikvortx avatar maikvortx commented on September 25, 2024

Please open the PR

Hi @jhomarolo, I will implement unit tests to open PR. I need one more day to implement it.

from herbsshelf.

maikmb avatar maikmb commented on September 25, 2024

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()
      }),     

    }),

from herbsshelf.

maikmb avatar maikmb commented on September 25, 2024

Hey guys, here's the full example with complex Multi-Level Steps.

Flow Chart

screenshot-localhost_4000-2022 07 26-22_32_40

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()
      }),     

    }),

  })


from herbsshelf.

dalssoft avatar dalssoft commented on September 25, 2024

Is there a PR for this issue? I couldn't find.

from herbsshelf.

maikvortx avatar maikvortx commented on September 25, 2024

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.

from herbsshelf.

jhomarolo avatar jhomarolo commented on September 25, 2024

@maikmb when you finish, please put the pr link here

from herbsshelf.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.