Extend own Dialog and call it

Kirby 3 Questions 🤔
1

Hello!
I’m working on this and succeeded to save the form in a DB. Back in the panel, I want to show the database as a table. But what I also need, is a more “detailed” view on the item content (it’s too much for one table row) and “archive” the entry by changing a bool in the database. So I wanted to extend the basic dialog field and call it with either the id or with the entire data to show in the dialog.

I have problems in extending and opening the dialog. This is what I got so far (Plugin), but I get the error Cannot read property 'open' of undefined or dialogorder is not defined, depending on if I remove the $refs. What do I miss to extend the dialog field to dialogorder, what is the $refs thing (Just curious) and how do I get the id/content to the dialog, so I can add a method to archive it there?

partial index.php

  'fields' => [
          'dialogorder' => [
            'extends' => 'dialog'
          ],
          'orderview' => [
            'props' => [
              'data' => function () {
                return Db::select('xxxxx');
              }
            ]
          ]
      ],

Entire index.js

panel.plugin('webdev/orderonline', {
  fields: {
    dialogorder: {
      template: ` <k-text>
      test
    </k-text>
      `
    },
    orderview: {
      props: {
        data: Array
      },
      template: ` 

      <table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>Vorname</th>
      <th>Name</th>
      <th>Geburtstag</th>
      <th>E-Mail</th>
      <th>Telefon</th>
    </tr>
  </thead>
      <tbody>
<tr v-for="item in data.data">
                     <td>{{item.id}}</td>
                     <td>{{item.vorname}}</td>
                     <td>{{item.name}}</td>
                     <td>{{item.geburtstag}}</td>
                     <td>{{item.mail}}</td>
                     <td>{{item.tel}}</td>
                     <td>
                     <k-button @click="$refs.dialogorder.open()">HERE</k-button>
                     </td>
                     </tr>
                     </tbody>
      </table>
      `
    }
  }
});
2

I don’t really understand what you are trying to extend here? What sort of field is dialog?

3
4

If you create a new field which seems to be what you are doing, you can extend existing fields but not other components.

5

Okay, so my question would be what do I need do to open a dialog component from my own created field and how far can I tweak the content of the dialog?

6

You should be able to use the dialog component inside your field template. But you need to either create a field from scratch or extend an existing field.

7

Could you write me some lines of pseudo-code where to put the stuff?
When I put k-dialog> Code right into the template cody of my field, nothing shows up - not even the table behind the code:

panel.plugin('webdev/opendialog', {
  fields: {
    orderview: {
      props: {
        data: Array
      },
      template: ` 
<k-dialog ref="entrydialog">
</k-dialog>
      <table class="table table-striped k-structure-table">
  <thead>
    <tr>
      <th>#</th>
      <th>Action</th>
    </tr>
  </thead>
      <tbody>
<tr v-for="item in data.data">
                     <td class="k-structure-table-column">{{item.id}}</td>
                     <td class="k-structure-table-column">
                     <k-button @click="$refs.entrydialog.open()">OPEN DIALOG HERE</k-button>
                     </td>
                     </tr>
                     </tbody>
      </table>
      `
    }
  }
});
8

Works for me, although from what I can see, datais not defined, but if I remove it, clicking on Open dialog here opens an empty dialog.

The dialog component is documented here:

9

Okay, I can’t get it work at my example but I will try it in a different way.