Using/Interacting with core UI code in a plugin?

[AmitEMV]

Hi!

I'm trying to create a new page which simplifies the order creation process, as a flow, without having to navigate across different panels/tabs. Don't want to modify the core code so trying to do this as a plugin.
Have few questions related to the UI interaction where I'm not quite sure of the recommended approach -

• Is this achievable through a plugin? (I'm trying using a UrlMixin and NavigationMixin)
• The aim is to add a new main menu item at the top, clicking on which will load this new page. Inside the page, when I click a button it needs to show New Sales Order modal/new Part modal. I've seen the inventree-order-history repo and it uses @inventreedb/ui. Is this the recommended way to access modals if needed (can it even access)? If this is not the intention, what other direction can I go in here if I don't want to duplicate the code?

Thanks!

[matmair]

Sounds achievable in principle, not sure if all things are doable in stable.

[AmitEMV]

@matmair Thank you for the response. Is using @inventreedb/ui OK then? I should be able to access the components/modals with it?

[SchrodingersGat]

Yes that is the intent of inventreedb/ui

[AmitEMV]

@SchrodingersGat Thank you for confirming. One last follow-up - I did try that and while most things are available, many items are not exposed as well, inlcluding useCreateApiFormModal. This prevents me from getting the context that's built along with the modal (e.g. Sales Order modal and that workflow).

This is by design I assume? There is no meaningful way to achieve this other than duplicating the code as plugins cannot reconstruct core workflows such as this - want to check if I am missing anything or this is the current state?

[matmair]

Re-creating core workflows is a non-goal

[SchrodingersGat]

@AmitEMV in fact useCreateApiFormModal is exposed to the plugin interface, via the context object. Check out the example in my manufacturing costs plugin

From PartPanel.tsx:

  const costFields: ApiFormFieldSet = useMemo(() => {
    return {
      part: {
        value: partId,
        disabled: true
      },
      description: {},
      quantity: {},
      // TODO: Add a "pre-field" element here
      rate: {
        api_url: apiUrl(RATE_URL),
        modelRenderer: RenderRate
      },
      // TODO: Mark unit_cost and unit_cost currency as "disabled" if a rate is selected
      unit_cost: {},
      unit_cost_currency: {},
      notes: {},
      inherited: {},
      active: {}
    };
  }, []);

  const createCostForm = context.forms.create({
    url: apiUrl(COST_URL),
    title: 'Add Manufacturing Cost',
    fields: costFields,
    successMessage: 'Cost created',
    onFormSuccess: () => {
      dataQuery.refetch();
    }
  });

[AmitEMV]

Hi @SchrodingersGat thank you so much for this example, this helped a lot! I got the plugin to work. Is there any plugin example/docs sample repo that uses NavigationMixin? While this is functional, the new menu item link just is an ID always and won't take the actual name, including the text in the new page (events/modal show up fine and text inside them too).

[SchrodingersGat]

I believe that the integration of custom navigation items is not yet fully implemented