Maked table depending on blueprint values

[Piterden]

No description provided.

[rhukster]

I'll take a look at this soon.. thanks.

[rhukster]

I like this but i want to investigate a bit more to make it a handle the sort option a bit better.

[Piterden]

Yes, I actually wrote it for my custom data collection, not the default of your plugin.

[rhukster]

Yah i like the idea of making the list more blueprint-driven. However, I think we can actually put custom fields in the blueprint YAML that the list can use. Ie, the 'sortable', 'searchable', 'width' options etc.

[Piterden]

We could do even like so:

  fields:
    published:
      type: toggle
      label: Published
      highlight: 1
      default: 1
      options:
        1: PLUGIN_ADMIN.YES
        0: PLUGIN_ADMIN.NO
      validate:
        type: bool
        required: true
      # We could add
      column:
        type: editable # Just for example
        width: 18
        # And so on...

[mahagr]

I've done the same in my feature branch, though I didn't store this information in the form part but into a separate configuration.

[Piterden]

👍

[mahagr]

I'm going to make a few changes.. :)

[Piterden]

yes - this is just a sketch ;)

[mahagr]

@Piterden I think you like the changes I made. It's still pretty much work in progress, but I have a branch that added support for multiple directories. It also added new config section to the blueprints in order to automate and customize listing page.

I reverted your changes in the original file -- I'm now using new folder structure, which allows easier customization.

To test this out, just add following code to user/blueprints/flex-directory/clients.yaml

title: Clients
description: Client list.
type: flex-directory

config:
  admin:
    list:
      fields:
        name:
          link: edit
        company:
        email:
        phone:
          width: 15
        zip:
          width: 10
  data:
    storage: user://data/directory/clients.yaml

form:
  validation: loose

  fields:
    id:
      type: text
      label: Id
      validate:
        required: true
    name:
      type: text
      label: Full Name
      validate:
        required: true
    company:
      type: text
      label: Company
    email:
      type: email
      label: Email Address
      validate:
        required: true
    phone:
      type: text
      label: Phone Number
    zip:
      type: text
      label: Zip Code
    ip:
      type: text
      label: IP Address

After that just edit user/config/plugins/flex-directory.yaml file by hand and add following:

directories:
  - blueprints://flex-directory/clients.yaml

For frontend you need user/pages/02.directory/flex-directory.md:

---
cache: false
---

# Directories

And also template file themes/[YOUR_THEME]/templates/flex-directory/types/clients.html.twig:

{% set directory = grav.flex_directory.directory(type) %}
{% set data = directory.collection.getData().toArray() %}

<div id="flex-directory">
    <ul class="list">
        {% for entry in data %}
            <li>
                <div class="entry-details">
                    <h3>{{ entry.name }} <small>&lt;{{ entry.email }}&gt;</small></h3>
                    <p>Company: {{ entry.company }}</p>
                    <p>ZIP: {{ entry.zip }}</p>
                </div>
            </li>
        {% endfor %}
    </ul>
</div>

If you add multiple types, both admin and site will have types list as landing page. :)

Happy testing.

PS. This only works in my feature/multiple branch.

[Piterden]

I have one not a bad example in Vue. For the inspiration.
https://gitlab.com/Piterden/good-motherfucker/blob/piterden/app2/src/components/Filters/Filters.vue#L2

[8book]

Hello!

I am using the Flex Directory plugin with the modifications to create multiple entries, I found AMAZING, I was interested in this option. Much obliged!

But now you have an old problem with the image field again. It gives the following error:
Call to undefined method Grav \ Plugin \ FlexDirectory \ AdminController :: data ()

I'm using:
Grav: Grav v1.4.0 - Admin v1.7.0

Form Yaml

thumbnail:
       type: file
       label: Thumbnail
       destination: 'user / data / directory / files'
       multiple: true