Merge branch 'feature/element-children'

backend/app/Controllers/ElementController.php

@@ -17,7 +17,7 @@ class ElementController
     public function show(?int $id): JsonResponse
     {
         try {
-            $element = $this->getElement->execute(
+            $result = $this->getElement->execute(
                 new GetElementRequest(id: $id)
             );
         } catch (BadRequestException $exception) {
@@ -30,7 +30,17 @@ class ElementController
             ], 404);
         }
 
+        $element = $result->getElement();
+        $childElements = [];
+        foreach ($result->getChildElements() as $childElement) {
+            $childElements[] = [
+                'id' => $childElement->getId(),
+                'title' => $childElement->getTitle(),
+            ];
+        }
+
         return new JsonResponse([
+            'childElements' => $childElements,
             'element' => [
                 'id' => $element->getId(),
                 'title' => $element->getTitle(),

backend/app/Element/ElementRepository.php

@@ -16,4 +16,9 @@ interface ElementRepository
      * @return Element[]
      */
     public function findBySet(DomainSet $set): array;
+
+    /**
+     * @return Element[]
+     */
+    public function findByParentElement(Element $parentElement): array;
 }

backend/app/Element/EloquentElementRepository.php

@@ -61,6 +61,25 @@ class EloquentElementRepository implements ElementRepository
         return $elements;
     }
 
+    /**
+     * @return Element[]
+     */
+    public function findByParentElement(Element $parentElement): array
+    {
+        $models = ElementModel::where(
+            'parent_element_id',
+            $parentElement->getId(),
+        )
+            ->orderBy('id')
+            ->get();
+        $elements = [];
+        foreach ($models as $model) {
+            $elements[] = $this->toDomain($model);
+        }
+
+        return $elements;
+    }
+
     private function toDomain(ElementModel $model): Element
     {
         $set = $this->setRepo->find($model->set_id);

backend/app/Element/UseCases/GetElement/GetElement.php

@@ -2,7 +2,6 @@
 
 namespace App\Element\UseCases\GetElement;
 
-use App\Element\Element;
 use App\Element\ElementRepository;
 use App\Exceptions\BadRequestException;
 use App\Exceptions\NotFoundException;
@@ -17,7 +16,7 @@ class GetElement
      * @throws BadRequestException
      * @throws NotFoundException
      */
-    public function execute(GetElementRequest $request): Element
+    public function execute(GetElementRequest $request): GetElementResult
     {
         if ($request->id === null) {
             throw new BadRequestException('id is required');
@@ -28,6 +27,10 @@ class GetElement
             throw new NotFoundException('Element not found');
         }
 
-        return $element;
+        return new GetElementResult(
+            element: $element,
+            childElements: $this->elementRepository
+                ->findByParentElement($element),
+        );
     }
 }

backend/app/Element/UseCases/GetElement/GetElementResult.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Element\UseCases\GetElement;
+
+use App\Element\Element;
+
+class GetElementResult
+{
+    /**
+     * @param Element[] $childElements
+     */
+    public function __construct(
+        private Element $element,
+        private array $childElements,
+    ) {
+    }
+
+    public function getElement(): Element
+    {
+        return $this->element;
+    }
+
+    /**
+     * @return Element[]
+     */
+    public function getChildElements(): array
+    {
+        return $this->childElements;
+    }
+}

backend/database/seeders/ElementSeeder.php

@@ -14,10 +14,20 @@ class ElementSeeder extends Seeder
         $setRepository = app(SetRepository::class);
         $elementRepository = app(ElementRepository::class);
         $baderechSet = $setRepository->find(1);
-        $elementRepository->create(new CreateElementDto(
+        $rootElement = $elementRepository->create(new CreateElementDto(
             set: $baderechSet,
             title: $baderechSet->getName(),
             parentElement: null,
         ));
+        $elementRepository->create(new CreateElementDto(
+            set: $baderechSet,
+            title: 'Avodah Foundations',
+            parentElement: $rootElement,
+        ));
+        $elementRepository->create(new CreateElementDto(
+            set: $baderechSet,
+            title: 'Daily Practice',
+            parentElement: $rootElement,
+        ));
     }
 }

backend/tests/Fakes/FakeElementRepository.php

@@ -66,6 +66,25 @@ class FakeElementRepository implements ElementRepository
         return $elements;
     }
 
+    /**
+     * @return Element[]
+     */
+    public function findByParentElement(Element $parentElement): array
+    {
+        $elements = [];
+        foreach ($this->elementsById as $element) {
+            $currentParentElement = $element->getParentElement();
+            if (
+                $currentParentElement !== null
+                && $currentParentElement->getId() === $parentElement->getId()
+            ) {
+                $elements[] = $this->cloneElement($element);
+            }
+        }
+
+        return $elements;
+    }
+
     private function cloneElement(Element $element): Element
     {
         $parentElement = $element->getParentElement();

backend/tests/Feature/ElementsEndpointTest.php

@@ -27,11 +27,31 @@ class ElementsEndpointTest extends TestCase
             title: 'Baderech HaAvodah',
             parentElement: null,
         ));
+        $firstChildElement = $elementRepository->create(new CreateElementDto(
+            set: $set,
+            title: 'Avodah Foundations',
+            parentElement: $element,
+        ));
+        $secondChildElement = $elementRepository->create(new CreateElementDto(
+            set: $set,
+            title: 'Daily Practice',
+            parentElement: $element,
+        ));
 
         $response = $this->getJson("/api/elements/{$element->getId()}");
 
         $response->assertOk();
         $response->assertExactJson([
+            'childElements' => [
+                [
+                    'id' => $firstChildElement->getId(),
+                    'title' => 'Avodah Foundations',
+                ],
+                [
+                    'id' => $secondChildElement->getId(),
+                    'title' => 'Daily Practice',
+                ],
+            ],
             'element' => [
                 'id' => $element->getId(),
                 'title' => 'Baderech HaAvodah',

backend/tests/Unit/Controllers/ElementControllerTest.php

@@ -25,7 +25,18 @@ class ElementControllerTest extends TestCase
 
     public function testShowReturnsElementPayload(): void
     {
-        $element = $this->createElement('Baderech HaAvodah');
+        $set = $this->createSet(1, 'Baderech');
+        $element = $this->createElement($set, 'Baderech HaAvodah', null);
+        $firstChildElement = $this->createElement(
+            $set,
+            'Avodah Foundations',
+            $element,
+        );
+        $secondChildElement = $this->createElement(
+            $set,
+            'Daily Practice',
+            $element,
+        );
 
         $response = $this->controller->show($element->getId());
 
@@ -33,6 +44,16 @@ class ElementControllerTest extends TestCase
         $body = json_decode($response->getContent(), true);
         $this->assertSame($element->getId(), $body['element']['id']);
         $this->assertSame('Baderech HaAvodah', $body['element']['title']);
+        $this->assertSame([
+            [
+                'id' => $firstChildElement->getId(),
+                'title' => 'Avodah Foundations',
+            ],
+            [
+                'id' => $secondChildElement->getId(),
+                'title' => 'Daily Practice',
+            ],
+        ], $body['childElements']);
     }
 
     public function testShowReturns400WhenIdMissing(): void
@@ -57,19 +78,25 @@ class ElementControllerTest extends TestCase
         );
     }
 
-    private function createElement(string $title): Element
+    private function createSet(int $id, string $name): DomainSet
     {
-        $set = new DomainSet(
-            id: 1,
-            name: 'Baderech',
-            description: 'Baderech description',
+        return new DomainSet(
+            id: $id,
+            name: $name,
+            description: "$name description",
             iconImageUrl: '/assets/baderech-icon.png',
         );
+    }
 
+    private function createElement(
+        DomainSet $set,
+        string $title,
+        ?Element $parentElement,
+    ): Element {
         return $this->elementRepo->create(new CreateElementDto(
             set: $set,
             title: $title,
-            parentElement: null,
+            parentElement: $parentElement,
         ));
     }
 }

backend/tests/Unit/Element/UseCases/GetElementTest.php

@@ -26,17 +26,76 @@ class GetElementTest extends TestCase
 
     public function testReturnsElementWhenFound(): void
     {
-        $element = $this->createElement('Baderech HaAvodah');
+        $set = $this->createSet(1, 'Baderech');
+        $element = $this->createElement(
+            $set,
+            'Baderech HaAvodah',
+            null,
+        );
 
-        $foundElement = $this->getElement->execute(new GetElementRequest(
+        $result = $this->getElement->execute(new GetElementRequest(
             id: $element->getId(),
         ));
+        $foundElement = $result->getElement();
 
         $this->assertInstanceOf(Element::class, $foundElement);
         $this->assertSame($element->getId(), $foundElement->getId());
         $this->assertSame('Baderech HaAvodah', $foundElement->getTitle());
     }
 
+    public function testReturnsDirectChildElements(): void
+    {
+        $set = $this->createSet(1, 'Baderech');
+        $parentElement = $this->createElement(
+            $set,
+            'Baderech HaAvodah',
+            null,
+        );
+        $firstChildElement = $this->createElement(
+            $set,
+            'Avodah Foundations',
+            $parentElement,
+        );
+        $secondChildElement = $this->createElement(
+            $set,
+            'Daily Practice',
+            $parentElement,
+        );
+        $this->createElement(
+            $set,
+            'Nested Practice',
+            $firstChildElement,
+        );
+        $otherSet = $this->createSet(2, 'Daily Learning');
+        $otherParentElement = $this->createElement(
+            $otherSet,
+            'Other Parent',
+            null,
+        );
+        $this->createElement(
+            $otherSet,
+            'Other Child',
+            $otherParentElement,
+        );
+
+        $result = $this->getElement->execute(new GetElementRequest(
+            id: $parentElement->getId(),
+        ));
+        $childElements = $result->getChildElements();
+
+        $this->assertCount(2, $childElements);
+        $this->assertSame(
+            $firstChildElement->getId(),
+            $childElements[0]->getId(),
+        );
+        $this->assertSame('Avodah Foundations', $childElements[0]->getTitle());
+        $this->assertSame(
+            $secondChildElement->getId(),
+            $childElements[1]->getId(),
+        );
+        $this->assertSame('Daily Practice', $childElements[1]->getTitle());
+    }
+
     public function testThrowsWhenIdMissing(): void
     {
         $this->expectException(BadRequestException::class);
@@ -53,19 +112,25 @@ class GetElementTest extends TestCase
         $this->getElement->execute(new GetElementRequest(id: 999));
     }
 
-    private function createElement(string $title): Element
+    private function createSet(int $id, string $name): DomainSet
     {
-        $set = new DomainSet(
-            id: 1,
-            name: 'Baderech',
-            description: 'Baderech description',
+        return new DomainSet(
+            id: $id,
+            name: $name,
+            description: "$name description",
             iconImageUrl: '/assets/baderech-icon.png',
         );
+    }
 
+    private function createElement(
+        DomainSet $set,
+        string $title,
+        ?Element $parentElement,
+    ): Element {
         return $this->elementRepo->create(new CreateElementDto(
             set: $set,
             title: $title,
-            parentElement: null,
+            parentElement: $parentElement,
         ));
     }
 }

frontend/rabbi_gerzi/cypress/e2e/media.cy.ts

@@ -41,5 +41,15 @@ describe('media page sets', () => {
     cy.location('pathname').should('eq', '/element/1')
     cy.get('[data-cy="element-page"]').should('be.visible')
     cy.contains('h1', 'Baderech HaAvodah').should('be.visible')
+    cy.get('[data-cy="child-element-list"]').should('be.visible')
+    cy.contains('[data-cy="child-element-link"]', 'Avodah Foundations')
+      .should('have.attr', 'href', '/element/2')
+    cy.contains('[data-cy="child-element-link"]', 'Daily Practice')
+      .should('have.attr', 'href', '/element/3')
+
+    cy.contains('[data-cy="child-element-link"]', 'Avodah Foundations')
+      .click()
+    cy.location('pathname').should('eq', '/element/2')
+    cy.contains('h1', 'Avodah Foundations').should('be.visible')
   })
 })

frontend/rabbi_gerzi/src/stores/elements.ts

@@ -8,17 +8,20 @@ export interface Element {
 
 interface ElementResponse {
   element: Element
+  childElements: Element[]
 }
 
 const API_BASE_URL = import.meta.env.VITE_API_BASE_URL as string
 
 export const useElementsStore = defineStore('elements', () => {
   const element = ref<Element | null>(null)
+  const childElements = ref<Element[]>([])
   const isLoading = ref(false)
   const error = ref<string | null>(null)
 
   async function fetchElement(elementId: string): Promise<void> {
     element.value = null
+    childElements.value = []
     error.value = null
     isLoading.value = true
 
@@ -39,12 +42,14 @@ export const useElementsStore = defineStore('elements', () => {
 
       const data: ElementResponse = await response.json()
       element.value = data.element
+      childElements.value = data.childElements
     } catch {
+      childElements.value = []
       error.value = 'Network error - could not load element'
     } finally {
       isLoading.value = false
     }
   }
 
-  return { element, isLoading, error, fetchElement }
+  return { element, childElements, isLoading, error, fetchElement }
 })

frontend/rabbi_gerzi/src/views/ElementPage.vue

@@ -7,7 +7,7 @@ import { useElementsStore } from '@/stores/elements'
 
 const route = useRoute()
 const elementsStore = useElementsStore()
-const { element, isLoading, error } = storeToRefs(elementsStore)
+const { element, childElements, isLoading, error } = storeToRefs(elementsStore)
 
 const elementId = computed(() => {
   const routeElementId = route.params.id
@@ -44,9 +44,33 @@ watch(
       >
         {{ error }}
       </p>
-      <h1 v-else-if="element" class="element-page__heading">
-        {{ element.title }}
-      </h1>
+      <section v-else-if="element" class="element-page__content">
+        <h1 class="element-page__heading">
+          {{ element.title }}
+        </h1>
+
+        <nav
+          v-if="childElements.length > 0"
+          class="element-page__children"
+          aria-label="Child elements"
+        >
+          <ul class="element-page__child-list" data-cy="child-element-list">
+            <li
+              v-for="childElement in childElements"
+              :key="childElement.id"
+              class="element-page__child-item"
+            >
+              <RouterLink
+                :to="{ name: 'element', params: { id: childElement.id } }"
+                class="element-page__child-link"
+                data-cy="child-element-link"
+              >
+                {{ childElement.title }}
+              </RouterLink>
+            </li>
+          </ul>
+        </nav>
+      </section>
     </main>
   </div>
 </template>
@@ -62,6 +86,11 @@ watch(
   padding: 5.1rem 4.15rem 5rem;
 }
 
+.element-page__content {
+  max-width: 48rem;
+  margin: 0 auto;
+}
+
 .element-page__heading {
   margin: 0;
   color: #2c2c2c;
@@ -72,6 +101,48 @@ watch(
   text-align: center;
 }
 
+.element-page__children {
+  margin-top: 3rem;
+}
+
+.element-page__child-list {
+  display: grid;
+  margin: 0;
+  padding: 0;
+  gap: 0.85rem;
+  list-style: none;
+}
+
+.element-page__child-link {
+  display: block;
+  padding: 1rem 1.2rem;
+  background: var(--color-white);
+  border: 1px solid #e5cf9f;
+  border-radius: 8px;
+  color: #333333;
+  font-family: var(--font-serif);
+  font-size: 1.25rem;
+  line-height: 1.25;
+  text-align: center;
+  text-decoration: none;
+  transition:
+    border-color 180ms ease,
+    box-shadow 180ms ease,
+    transform 180ms ease;
+}
+
+.element-page__child-link:hover,
+.element-page__child-link:focus-visible {
+  border-color: #d4ad5f;
+  box-shadow: 0 10px 28px rgb(44 44 44 / 9%);
+  transform: translateY(-1px);
+}
+
+.element-page__child-link:focus-visible {
+  outline: 3px solid rgb(212 173 95 / 45%);
+  outline-offset: 4px;
+}
+
 .element-page__status {
   max-width: 48rem;
   margin: 0 auto;
@@ -92,5 +163,9 @@ watch(
   .element-page__main {
     padding: 3rem 1rem;
   }
+
+  .element-page__children {
+    margin-top: 2rem;
+  }
 }
 </style>