[DynamicDialog] A Footer Solution

[Rakasch]

Hi there,

I like the idea of DynamicDialog. But I was always struggling with having the footer in it's own component, as the documentation shows.
If I have a save button in a separate footer component, how would I handle saving when all my data is in the DialogContent?

Now I have found a nice solution with Teleport to have the footer in the same component as the content.
I thought I would share it with you:

https://stackblitz.com/edit/wqlat6-udssdh?file=src%2Fcomponents%2FProductListDemo.vue

[tugcekucukoglu]

Hi,

Did you try to add closeDialog function?

const closeDialog = (e) => {
    dialogRef.value.close(e);
};

Could I be missing something?

[Rakasch]

It's about saving data when you click save in the footer.
Like this:
https://stackblitz.com/edit/wqlat6-udssdh?file=src%2Fcomponents%2FProductListDemo.vue

I dont know how to do this, when the save-button is in a different component than the data.

[tugcekucukoglu]

Data saving can be done with some additions

App.vue

const text = ref('Hello World !');

const showProducts = () => {
  const dialogRef = dialog.open(ProductListDemo, {
    data: {
      value: text.value,
    },
    props: {
      header: 'Enter Text',
    },
    onClose: (options) => {
      const data = options.data;
      text.value = data.newValue;
    },
  });
};

ProductListDemo.vue

const dialogRef = inject('dialogRef');
const dialog = useDialog();
const text = ref(null);

onMounted(() => {
  text.value = dialogRef.value.data.value;
});

function closeDialog() {
  dialogRef.value.close({ newValue: dialogRef.value.data.value });
}

const onChange = (val) => {
  dialogRef.value.data.value = val;
};

Completed demo: https://stackblitz.com/edit/wqlat6-bdpfwf

[Rakasch]

To claryif this. My initial post wasn't a question. I just wanted to share my own solution to a problem that I faced.

I think we are talking at cross purposes, since you edited my example.
My example already contains MY solution to the problem.

---

Here again in more detail my motivation for this solution:

What I like about Vuejs is that it is a component-based design. That is, it encapsulates behavior within a reusable component.
That's why I prefer to have all my logic in one component.
If I start storing logic outside the component, that's the start of a lot of trouble.

Imagine I want to open this dynamic dialog from three different places. Then I would have to write the dialog.open three times, including the save function in the options.
Furthermore, it's a component that I use as a view, too. So it has it's save function within the component.
It just feels messy if I need three files (content, footer and js for dialog.open and save) for a single dialog component.
I would like to have it all together in one component.

That's why I was searching for a better solution for myself.
And my initial post contains what I came up with to avoid the separate footer component and avoid an external save function.

---

Nevertheless, I wonder what primevues intended way to do this would be.
Have a dialog with a textarea and a save and a cancel button in a separate footer component. Save only if you clicked the save button.