Ingredients list plugin (Table in original IRIMS)

[nmadruga]

From "IRIMS description truncated user guide.pdf":

[CarlosNZ]

I have a thought about how this might work utilising existing plugins (partly).

Because it seems each "ingredient" requires the filling in of its own "mini-form" that uses the same kind of fields we already have.

How would it be if we created the "mini-form" for inputting ingredients using our existing elements (shortText, radioChoice etc.), then we make a new plugin called "buildList". It's parameters would specify a range of existing responses to take in as input and create one "ingredient"?

The plugin UI would have:

• a button to "Add ingredient" which takes the current responses and adds them to an ingredient in a list (while resetting those responses)
• each "ingredient" can be displayed using Semantic's "Card" component (something like this
• each ingredient can be deleted.
• selecting an ingredient in the list re-populates the previous form entries with their values for that ingredient.
• a "Ingredients completed" button, which sets the visibility of the other responses to false (so they don't show up in the Summary View). It can be toggled back to "incomplete", but the "validation" of this plugin would include making sure this button is "ON".

I dunno, there may be technical limitations and other problems with this approach that I haven't forseen, but it'd be good to be able to build this fairly complicated ingredients input interface without duplicating existing plugin functionality.

If you think this is a workable idea, let me know and I'll come up with a more detailed description.

[CarlosNZ]

Here's a quick mockup of how it might look:

[andreievg]

I see a few challenges in implementing this (a lot of them are dealt with by above, but not all)

Validation

I think we would need a 'custom' validation, it would go through every row and do the validation

Visibility of the form

As mentioned above, visibility of the enterable fields need to be toggled

Space

I think our form is too narrow for this sort of plugin. Maybe a modal for adding/editing ?

Re-using plugins

For sure

Brainstorming

• New form element to do the input and display
• Re use existing plugins
  • Pass through ApplicationViewWrapper and or SummaryViewWrapper to components ? (we dont' want to do a mutation though for inner plugins, I think we would want to seperate that logic from other bits like evaluating dynamic expressions)
• The form/input part is presented in a modal

paramaters:

{
  form: [
    {
      code: 'someCode',
      title: 'Country code',
      elementTypePluginCode: 'dropdownChoice',
      parameters: {
        search: true,
        options: {
          operator: 'graphQL',
          children: [
            'query countries { countries { code name } }',
            'https://countries.trevorblades.com',
            [],
            'countries',
          ],
        },
        optionsDisplayProperty: 'code',
        placeholder: 'Type one country code (2 digits)',
      },
      '//': 'below is an examples considering the uniqueness case, by the sounds of it its not that important',
      validation: {
        '//': 'just an example of new operator that tries to find a match',
        operator: 'noMatch',
        children: [
          {
            operator: 'objectProperties',
            '//': 'custom validation can insert rows if needed',
            children: ['rows.thisRow.someCode'],
          },
          {
            operator: 'extractObjectKeyFromArray',
            children: [
              {
                operator: 'objectProperties',
                children: ['rows'],
              },
              'someCode',
            ],
          },
        ],
      },
    },
    {
      '//': 'other bits of form',
    },
  ],
  '//': 'other parameters',
}

validation:

a custom validation method that uses evaluator. iterates over each row and each key, and uses inner plugin validation. can render validation errors under each row (or even in each cell).

[andreievg]

I've made a start on the diagram of ApplicationViewWrapper, it's only half done: https://app.diagrams.net/#G1WSMwIiyfmW02z5aqExDcrBurGDxEJfVZ

[CarlosNZ]

And aside from the above, I was envisaging parameters and response shape as follows:

Parameters

• label
• description
• addButtonText (default “Add item”)
• doneButtonText (default “Done adding items”)
• inputResponses : array of question codes (just “text” fields?)
• displayString: Markdown formatted, string substitution string (%1, %2, etc.)
• displayType: “cards” or “table” (default: “cards”)
• (Maybe) maxItems
• minItems (default 1)
• cardWidth: default Semantic value

Response structure

• text: comma separated, plain-text version of substituted displayString
• items: array of ingredients each with:
  • Object with Code: response value pairs
  • displayString

[CarlosNZ]

I'm going to do a quick proof-of-concept for Andrei's idea of running other plugins as children of the Ingredients list. Will be very simple, just want to check that it will work how we imagine, then we can go from there.