HasNestedMany with nested fields in DependencyContainer

[wajdijurry]

I am using this package to nest a relation into other resource. In my case, I am nesting Variation resource into Product resource.

The Variation resource has the following fields:

// opt-out code
            Boolean::make('Enable Sale Price?', 'sale_price', function ($value) {
                return !is_null($value);
            }),

            DependencyContainer::make([
                Currency::make('Sale Price', 'sale_price')
                    ->currency('JOD'),
            ])->dependsOnNotEmpty('sale_price'),
// opt-out code

And the Product resource has this:

            HasManyNested::make('Variations', 'variations', Variation::class)
                ->propagate('id')
                ->hideFromIndex()
                ->useTabs(),

Something weird is going on, as illustrated in the attached video, when I check "Enable Sale Price?" for the second Variation, the first Variation got affected by this change.

This bug applies to all fields in DependencyContainer in the Variation resource.

screencast-admin.otomech.local-2023.10.04-19_01_26.webm

[wajdijurry]

I figured out that the fields in the first Variation have the same IDs as the second Variation. I believe this is the case but I lack the experience to edit the fields templates in Vue.js

[Lupennat]

HasNestedMany generate a "formUniqueId" for each nested form panel.
DependencyContainer Field does not use and propagate to child fields this prop.
The watcher recursively resolves all vue root nodes and assigns the value in "dependencyValues" based only on the field attribute, which in the context of hasManyNested is not unique.
Because of this, the dependency is shared among all Nested forms and not on the single form.

Probably it should be fixed with something like this on FormField.vue file

<template>
    <div v-if="dependenciesSatisfied">
        <div v-for="childField in field.fields">
            <component
               ...
                :form-unique-id="formUniqueId"
            />
        </div>
    </div>
</template>
<script>
export default {
      ...
      props: ['resourceName', 'resourceId', 'field', 'formUniqueId'],
      methods: {
           ...
           componentIsDependency(component) {
                if(component.formUniqueId !== this.formUniqueId) {
                    return false;
               }
               ...
            }
       }
}
</script>

[wajdijurry]

HasNestedMany generate a "formUniqueId" for each nested form panel. DependencyContainer Field does not use and propagate to child fields this prop. The watcher recursively resolves all vue root nodes and assigns the value in "dependencyValues" based only on the field attribute, which in the context of hasManyNested is not unique. Because of this, the dependency is shared among all Nested forms and not on the single form.

Probably it should be fixed with something like this on FormField.vue file

<template>
    <div v-if="dependenciesSatisfied">
        <div v-for="childField in field.fields">
            <component
               ...
                :form-unique-id="formUniqueId"
            />
        </div>
    </div>
</template>
<script>
export default {
      ...
      props: ['resourceName', 'resourceId', 'field', 'formUniqueId'],
      methods: {
           ...
           componentIsDependency(component) {
                if(component.formUniqueId !== this.formUniqueId) {
                    return false;
               }
               ...
            }
       }
}
</script>

Thanks @Lupennat . I have forked this package and applied your fix. Now it is working like a charm!