add element rich text

This commit is contained in:
Yisroel Baum 2026-05-27 20:02:31 +03:00
parent 827abde41b
commit 457dbbb7de
Signed by: yisroelbaum
GPG key ID: 0FA60884F75520A9
12 changed files with 63 additions and 5 deletions

View file

@ -46,6 +46,7 @@ class ElementController
'id' => $element->getId(),
'title' => $element->getTitle(),
'description' => $element->getDescription(),
'richText' => $element->getRichText(),
],
], 200);
}

View file

@ -10,6 +10,7 @@ class CreateElementDto
public Set $set,
public string $title,
public string $description,
public string $richText,
public ?Element $parentElement,
) {
}

View file

@ -10,6 +10,7 @@ class Element
private int $id,
private string $title,
private string $description,
private string $richText,
private Set $set,
private ?Element $parentElement,
) {
@ -30,6 +31,11 @@ class Element
return $this->description;
}
public function getRichText(): string
{
return $this->richText;
}
public function getSet(): Set
{
return $this->set;

View file

@ -10,6 +10,7 @@ use Illuminate\Database\Eloquent\Model;
* @property int $set_id
* @property string $title
* @property string $description
* @property string $rich_text
* @property int|null $parent_element_id
*
* @method static Builder<static>|ElementModel newModelQuery()
@ -20,6 +21,7 @@ use Illuminate\Database\Eloquent\Model;
* @method static Builder<static>|ElementModel whereSetId($value)
* @method static Builder<static>|ElementModel whereTitle($value)
* @method static Builder<static>|ElementModel whereDescription($value)
* @method static Builder<static>|ElementModel whereRichText($value)
*
* @mixin \Eloquent
*/
@ -33,6 +35,7 @@ class ElementModel extends Model
'set_id',
'title',
'description',
'rich_text',
'parent_element_id',
];

View file

@ -18,6 +18,7 @@ class EloquentElementRepository implements ElementRepository
'set_id' => $dto->set->getId(),
'title' => $dto->title,
'description' => $dto->description,
'rich_text' => $dto->richText,
'parent_element_id' => $dto->parentElement?->getId(),
]);
@ -25,6 +26,7 @@ class EloquentElementRepository implements ElementRepository
id: $model->id,
title: $dto->title,
description: $dto->description,
richText: $dto->richText,
set: $dto->set,
parentElement: $dto->parentElement,
);
@ -105,6 +107,7 @@ class EloquentElementRepository implements ElementRepository
id: $model->id,
title: $model->title,
description: $model->description,
richText: $model->rich_text,
set: $set,
parentElement: $parentElement,
);

View file

@ -31,6 +31,7 @@ class CreateElement
throw new BadRequestException('title is required');
}
$description = $request->description ?? '';
$richText = $request->richText ?? '';
$set = $this->setRepo->find($request->setId);
if ($set === null) {
@ -46,6 +47,7 @@ class CreateElement
set: $set,
title: $request->title,
description: $description,
richText: $richText,
parentElement: null,
));
}
@ -68,6 +70,7 @@ class CreateElement
set: $set,
title: $request->title,
description: $description,
richText: $richText,
parentElement: $parentElement,
));
}

View file

@ -8,6 +8,7 @@ class CreateElementRequest
public ?int $setId,
public ?string $title,
public ?string $description,
public ?string $richText,
public ?int $parentElementId,
) {
}

View file

@ -13,6 +13,7 @@ return new class extends Migration
$table->foreignId('set_id')->constrained('sets');
$table->string('title');
$table->text('description')->default('');
$table->text('rich_text')->default('');
$table->foreignId('parent_element_id')
->nullable()
->constrained('elements');

View file

@ -18,6 +18,9 @@ class ElementSeeder extends Seeder
set: $baderechSet,
title: $baderechSet->getName(),
description: $baderechSet->getDescription(),
richText: '<p>Begin with a clear map for avodah growth.</p>'
. '<p><strong>Move steadily</strong> from awareness '
. 'to practice.</p>',
parentElement: null,
));
$elementRepository->create(new CreateElementDto(
@ -25,12 +28,16 @@ class ElementSeeder extends Seeder
title: 'Avodah Foundations',
description: 'Core foundations for building a steady '
. 'avodah practice.',
richText: '<p>Avodah foundations begin with honest awareness '
. 'and small repeatable steps.</p>',
parentElement: $rootElement,
));
$elementRepository->create(new CreateElementDto(
set: $baderechSet,
title: 'Daily Practice',
description: 'Practical steps for consistent daily growth.',
richText: '<p>Daily practice turns inspiration into a '
. 'dependable rhythm.</p>',
parentElement: $rootElement,
));
}

View file

@ -50,7 +50,7 @@ describe('media page sets', () => {
cy.get('[data-cy="child-element-list"]')
.should(
'not.contain.text',
'Foundations rich text belongs on its own page.',
'Avodah foundations begin with honest awareness',
)
cy.contains('[data-cy="child-element-link"]', 'Avodah Foundations')
.as('avodahFoundationsLink')
@ -76,7 +76,7 @@ describe('media page sets', () => {
cy.get('[data-cy="element-rich-text"]')
.should(
'contain.text',
'Foundations rich text belongs on its own page.',
'Avodah foundations begin with honest awareness',
)
})
})

View file

@ -1,22 +1,26 @@
import { ref } from 'vue'
import { defineStore } from 'pinia'
export interface Element {
export interface ChildElement {
id: number
title: string
description: string
}
export interface Element extends ChildElement {
richText: string
}
interface ElementResponse {
element: Element
childElements: Element[]
childElements: ChildElement[]
}
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 childElements = ref<ChildElement[]>([])
const isLoading = ref(false)
const error = ref<string | null>(null)

View file

@ -49,6 +49,13 @@ watch(
{{ element.title }}
</h1>
<div
v-if="element.richText !== ''"
class="element-page__rich-text"
data-cy="element-rich-text"
v-html="element.richText"
/>
<nav
v-if="childElements.length > 0"
class="element-page__children"
@ -109,6 +116,27 @@ watch(
text-align: center;
}
.element-page__rich-text {
margin-top: 1.75rem;
color: #333333;
font-family: var(--font-sans);
font-size: 1.05rem;
line-height: 1.75;
}
.element-page__rich-text :deep(p) {
margin: 0 0 1rem;
}
.element-page__rich-text :deep(p:last-child) {
margin-bottom: 0;
}
.element-page__rich-text :deep(strong) {
color: #2c2c2c;
font-weight: 700;
}
.element-page__children {
margin-top: 3rem;
}