Sort pages by field value – stuck with JSON representation

The CMS Questions
1

Hi everyone,

I am unfortunately stuck with my JSON content representation and hope somebody might be able to help :pray:

I have a list of concerts that are each played on several dates. Every concert (Concert A, Concert B, …) is a subpage in a pages section. The dates within each concert subpage are listed with a structure field:

sections:
  terminitem:
    type: fields
    fields:
      ...
      terminitemtermine:
        type: structure
        fields:
          termindate:
            type: date
            label: Termine
            display: DD.MM.YYYY
            time: true

Now, on the parent page I want to display a calender list with a chronological overview of all concerts by date. Something like:

2022

January
1: Concert A
5: Concert A
10: Concert B
12: Concert A

February
21: Concert B
22: Concert A

etc.

So I need an array of all dates from all subpages sorted chronologically, not by subpage (but which each link to the respective subpage). It seems similar to this: Pluck structured data? - #16 by judbd. But where it gets tricky for me is that I am working with JSON content representation (using this great starter kit: GitHub - johannschopplich/kirby-vue3-starterkit: ✨ Kirby + Vue SPA starter: automatic routing, i18n, SEO and more!). Unfortunately I am a beginner with JSON and stuck at this point.

Here’s the relevant part from the JSON so far, with which I am able to output the individual dates sorted by subpage, which is of course not what I want:

<?php

$data = [
	'title' => $page->title()->value(),

	'children' => array_values($page->children()->map(function ($terminitem) {
		return [
			'terminitemdates' => array_values($terminitem->terminitemtermine()->toStructure()->map(function ($termindate) {
				return [
			  		'termindate' => $termindate->termindate()->toDate('d.m.Y'),
				];
			})->data()),
		];
	})->data())
];

echo vite()->json($data);

Template so far:

  <ul v-for="child in page.children" :key="child.uri">
    <li v-for="termindate in child.terminitemdates" :key="termindate.uri">
      <div>{{ termindate.termindate }}: {{ terminitem.title }}</div>
    </li>
  </ul>

How could I get a sorted array of all the individual dates outside of the 'children' object with JSON? Thanks so much in advance for any help!

2

The point here is that you would indeed have to get all relevant dates from all the structure field of all the subpages.

The while looping through the dates, you would fetch all events that belong to that date.

3

That’s what I was thinking conceptually but I have trouble with the correct code/syntax. For now I am trying another, simpler approach that doesn’t involve the above mentioned repo or JSON. I am now just working with the Kirby API.

These are the approaches I’ve tried to far (based on the same blueprint as above).

Using pluck() (which might not be right because I will then have to loop through these dates?):

<?php foreach($page->children()->listed()->toPages()->terminitemtermine()->toStructure()->pluck('termindate') as $date): ?>
     <?= $date ?>
<?php endforeach ?>

Using collections:

site/collections/termindates.php

<?php 
return function ($site) {
    return $site->find('termine')->children()->listed()->toPages()->terminitemtermine()->toStructure()->termindate();
};

In the snippet

<?php foreach($kirby->collection('termindates') as $date) {
     echo $date->html();
} ?>

Also tried something along the lines of this post: Getting specific page children structure field - #6 by ryuchix

But no luck so far. It mostly tells me “Call to a member function terminitemtermine() on null”. How do I get into the children pages? What am I missing?