yisroelbaum/Rabbi_Gerzi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'feature/element-card-links'

Browse source
This commit is contained in:
Yisroel Baum 2026-05-25 22:14:00 +03:00
commit 2e87add96c
Signed by: yisroelbaum
GPG key ID: 0FA60884F75520A9
12 changed files with 202 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

7
ai/shared.md
View file

@ -20,6 +20,13 @@ guides (`backend-context.md`, `frontend-context.md`) extend these.
batch multiple behaviors into one failing-test commit and one
implementation commit when they can be reviewed separately.
## Runtime assumptions
- Assume every process defined in `process-compose.yml` is already running
for local development and verification unless a command proves otherwise.
Do not start duplicate PostgreSQL, backend, or frontend processes just to
run checks.
## Code style
- Lines should not exceed 80 columns, but should use up to 80 columns when

13
backend/app/Controllers/SetController.php
View file

@ -2,14 +2,17 @@
namespace App\Controllers;
use App\Element\ElementRepository;
use App\Set\Set as DomainSet;
use App\Set\SetRepository;
use Illuminate\Http\JsonResponse;
class SetController
{
public function __construct(private SetRepository $setRepository)
{
public function __construct(
private SetRepository $setRepository,
private ElementRepository $elementRepository,
) {
}
public function index(): JsonResponse
@ -29,16 +32,20 @@ class SetController
* id: int,
* name: string,
* description: string,
* iconImageUrl: string
* iconImageUrl: string,
* rootElementId: int|null
* }
*/
private function buildSetPayload(DomainSet $set): array
{
$rootElement = $this->elementRepository->findRootBySet($set);
return [
'id' => $set->getId(),
'name' => $set->getName(),
'description' => $set->getDescription(),
'iconImageUrl' => $set->getIconImageUrl(),
'rootElementId' => $rootElement?->getId(),
];
}
}

2
backend/app/Element/ElementRepository.php
View file

@ -10,6 +10,8 @@ interface ElementRepository
public function find(int $id): ?Element;
public function findRootBySet(DomainSet $set): ?Element;
/**
* @return Element[]
*/

10
backend/app/Element/EloquentElementRepository.php
View file

@ -35,6 +35,16 @@ class EloquentElementRepository implements ElementRepository
return $model === null ? null : $this->toDomain($model);
}
public function findRootBySet(DomainSet $set): ?Element
{
$model = ElementModel::where('set_id', $set->getId())
->whereNull('parent_element_id')
->orderBy('id')
->first();
return $model === null ? null : $this->toDomain($model);
}
/**
* @return Element[]
*/

11
backend/database/seeders/SetSeeder.php
View file

@ -11,14 +11,19 @@ class SetSeeder extends Seeder
public function run(): void
{
$setRepository = app(SetRepository::class);
$title = 'Baderech HaAvodah';
$baderechTitle = 'Baderech HaAvodah';
$set = $setRepository->create(new CreateSetDto(
name: $title,
$setRepository->create(new CreateSetDto(
name: $baderechTitle,
description: 'Baderech HaAvodah is a way of living - '
. 'a structured path for inner and outer growth, '
. 'spiritual refinement, and personal development.',
iconImageUrl: '/assets/baderech-haavodah-icon.png',
));
$setRepository->create(new CreateSetDto(
name: 'Daily Learning',
description: 'Daily learning for steady growth',
iconImageUrl: '/assets/daily-learning-icon.svg',
));
}
}

14
backend/tests/Fakes/FakeElementRepository.php
View file

@ -37,6 +37,20 @@ class FakeElementRepository implements ElementRepository
return $this->cloneElement($this->elementsById[$id]);
}
public function findRootBySet(DomainSet $set): ?Element
{
foreach ($this->elementsById as $element) {
if (
$element->getSet()->getId() === $set->getId()
&& $element->getParentElement() === null
) {
return $this->cloneElement($element);
}
}
return null;
}
/**
* @return Element[]
*/

12
backend/tests/Feature/SetsEndpointTest.php
View file

@ -2,6 +2,8 @@
namespace Tests\Feature;
use App\Element\CreateElementDto;
use App\Element\ElementRepository;
use App\Set\CreateSetDto;
use App\Set\SetRepository;
use Illuminate\Foundation\Testing\RefreshDatabase;
@ -14,6 +16,7 @@ class SetsEndpointTest extends TestCase
public function testReturnsAllSets(): void
{
$setRepository = app(SetRepository::class);
$elementRepository = app(ElementRepository::class);
$baderechSet = $setRepository->create(new CreateSetDto(
name: 'Baderech HaAvodah',
description: 'Baderech HaAvodah is a way of living',
@ -24,6 +27,13 @@ class SetsEndpointTest extends TestCase
description: 'Daily learning for steady growth',
iconImageUrl: '/assets/daily-learning-icon.svg',
));
$baderechRootElement = $elementRepository->create(
new CreateElementDto(
set: $baderechSet,
title: $baderechSet->getName(),
parentElement: null,
)
);
$response = $this->getJson('/api/sets');
@ -35,12 +45,14 @@ class SetsEndpointTest extends TestCase
'name' => $baderechSet->getName(),
'description' => $baderechSet->getDescription(),
'iconImageUrl' => $baderechSet->getIconImageUrl(),
'rootElementId' => $baderechRootElement->getId(),
],
[
'id' => $dailyLearningSet->getId(),
'name' => $dailyLearningSet->getName(),
'description' => $dailyLearningSet->getDescription(),
'iconImageUrl' => $dailyLearningSet->getIconImageUrl(),
'rootElementId' => null,
],
],
]);

23
frontend/rabbi_gerzi/cypress/e2e/media.cy.ts
View file

@ -11,8 +11,11 @@ describe('media page sets', () => {
cy.contains('h1', 'Torah Media').should('be.visible')
cy.get('[data-cy="media-set-grid"]').should('be.visible')
cy.get('[data-cy="media-set-card"]', { timeout: 10000 })
.should('have.length', 1)
.first()
.should('have.length', 2)
cy.contains('[data-cy="media-set-card"]', 'Baderech HaAvodah')
.as('baderechCard')
.should('have.attr', 'href', '/element/1')
.within(() => {
cy.get('img[data-cy="media-set-icon"]')
.should('be.visible')
@ -22,5 +25,21 @@ describe('media page sets', () => {
cy.contains('a structured path for inner and outer growth')
.should('be.visible')
})
cy.contains('[data-cy="media-set-card"]', 'Daily Learning')
.as('dailyLearningCard')
.should('match', 'article')
.and('not.have.attr', 'href')
cy.get('@dailyLearningCard')
.within(() => {
cy.contains('h2', 'Daily Learning').should('be.visible')
cy.contains('Daily learning for steady growth').should('be.visible')
})
cy.get('@baderechCard').click()
cy.location('pathname').should('eq', '/element/1')
cy.get('[data-cy="element-page"]').should('be.visible')
cy.contains('h1', 'Element 1').should('be.visible')
})
})

6
frontend/rabbi_gerzi/src/router/index.ts
View file

@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
import HomePage from '@/views/HomePage.vue'
import LoginPage from '@/views/LoginPage.vue'
import MediaPage from '@/views/MediaPage.vue'
import ElementPage from '@/views/ElementPage.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
@ -21,6 +22,11 @@ const router = createRouter({
name: 'media',
component: MediaPage,
},
{
path: '/element/:id',
name: 'element',
component: ElementPage,
},
],
})

1
frontend/rabbi_gerzi/src/stores/mediaSets.ts
View file

@ -6,6 +6,7 @@ export interface MediaSet {
name: string
description: string
iconImageUrl: string
rootElementId: number | null
}
interface SetsResponse {

54
frontend/rabbi_gerzi/src/views/ElementPage.vue Normal file
View file

@ -0,0 +1,54 @@
<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import SiteHeader from '@/components/SiteHeader.vue'
const route = useRoute()
const elementId = computed(() => {
const routeElementId = route.params.id
if (Array.isArray(routeElementId)) {
return routeElementId.join('/')
}
return routeElementId
})
</script>
<template>
<div class="element-page">
<SiteHeader />
<main class="element-page__main" data-cy="element-page">
<h1 class="element-page__heading">Element {{ elementId }}</h1>
</main>
</div>
</template>
<style scoped>
.element-page {
min-height: 100vh;
background: var(--color-white);
}
.element-page__main {
min-height: 100vh;
padding: 5.1rem 4.15rem 5rem;
}
.element-page__heading {
margin: 0;
color: #2c2c2c;
font-family: var(--font-serif);
font-size: clamp(2.6rem, 4.8vw, 3.2rem);
font-weight: 400;
line-height: 1.1;
text-align: center;
}
@media (max-width: 768px) {
.element-page__main {
padding: 3rem 1rem;
}
}
</style>

74
frontend/rabbi_gerzi/src/views/MediaPage.vue
View file

@ -33,23 +33,41 @@ onMounted(() => {
No media sets are available yet.
</p>
<div v-else class="media-page__grid" data-cy="media-set-grid">
<article
v-for="mediaSet in sets"
:key="mediaSet.id"
class="media-page__card"
data-cy="media-set-card"
>
<img
:src="mediaSet.iconImageUrl"
:alt="`${mediaSet.name} icon`"
class="media-page__card-icon"
data-cy="media-set-icon"
/>
<h2 class="media-page__card-title">{{ mediaSet.name }}</h2>
<p class="media-page__card-description">
{{ mediaSet.description }}
</p>
</article>
<template v-for="mediaSet in sets" :key="mediaSet.id">
<RouterLink
v-if="mediaSet.rootElementId !== null"
:to="{ name: 'element', params: { id: mediaSet.rootElementId } }"
class="media-page__card"
data-cy="media-set-card"
>
<img
:src="mediaSet.iconImageUrl"
:alt="`${mediaSet.name} icon`"
class="media-page__card-icon"
data-cy="media-set-icon"
/>
<h2 class="media-page__card-title">{{ mediaSet.name }}</h2>
<p class="media-page__card-description">
{{ mediaSet.description }}
</p>
</RouterLink>
<article
v-else
class="media-page__card media-page__card--disabled"
data-cy="media-set-card"
>
<img
:src="mediaSet.iconImageUrl"
:alt="`${mediaSet.name} icon`"
class="media-page__card-icon"
data-cy="media-set-icon"
/>
<h2 class="media-page__card-title">{{ mediaSet.name }}</h2>
<p class="media-page__card-description">
{{ mediaSet.description }}
</p>
</article>
</template>
</div>
</section>
</main>
@ -114,7 +132,29 @@ onMounted(() => {
background: var(--color-white);
border: 1px solid #e5cf9f;
border-radius: 17px;
color: inherit;
text-align: center;
text-decoration: none;
transition:
border-color 180ms ease,
box-shadow 180ms ease,
transform 180ms ease;
}
a.media-page__card:hover,
a.media-page__card:focus-visible {
border-color: #d4ad5f;
box-shadow: 0 14px 35px rgb(44 44 44 / 10%);
transform: translateY(-2px);
}
a.media-page__card:focus-visible {
outline: 3px solid rgb(212 173 95 / 45%);
outline-offset: 4px;
}
.media-page__card--disabled {
opacity: 0.72;
}
.media-page__card-icon {