Rabbi_Gerzi/frontend/rabbi_gerzi/src/views/ElementPage.vue

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { computed, watch } from 'vue'
import { useRoute } from 'vue-router'
import SiteHeader from '@/components/SiteHeader.vue'
import { useElementsStore } from '@/stores/elements'

const route = useRoute()
const elementsStore = useElementsStore()
const { element, childElements, isLoading, error } = storeToRefs(elementsStore)

const elementId = computed(() => {
  const routeElementId = route.params.id

  if (Array.isArray(routeElementId)) {
    return routeElementId.join('/')
  }

  return routeElementId
})

watch(
  elementId,
  (currentElementId) => {
    if (typeof currentElementId !== 'string' || currentElementId === '') {
      return
    }

    void elementsStore.fetchElement(currentElementId)
  },
  { immediate: true },
)
</script>

<template>
  <div class="element-page">
    <SiteHeader />
    <main class="element-page__main" data-cy="element-page">
      <p v-if="isLoading" class="element-page__status">Loading element...</p>
      <p
        v-else-if="error"
        class="element-page__status element-page__status--error"
        data-cy="element-error"
      >
        {{ error }}
      </p>
      <section v-else-if="element" class="element-page__content">
        <h1 class="element-page__heading">
          {{ element.title }}
        </h1>

        <div
          v-if="element.richText !== ''"
          class="element-page__rich-text"
          data-cy="element-rich-text"
          v-html="element.richText"
        />

        <div v-if="element.pdfPath !== null" class="element-page__actions">
          <a
            :href="element.pdfPath"
            class="element-page__pdf-link"
            data-cy="element-pdf-link"
            target="_blank"
            rel="noreferrer"
          >
            View PDF
          </a>
        </div>

        <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"
              >
                <span class="element-page__child-title">
                  {{ childElement.title }}
                </span>
                <span
                  v-if="childElement.description !== ''"
                  class="element-page__child-description"
                >
                  {{ childElement.description }}
                </span>
              </RouterLink>
            </li>
          </ul>
        </nav>
      </section>
    </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__content {
  max-width: 48rem;
  margin: 0 auto;
}

.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;
}

.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__actions {
  display: flex;
  justify-content: center;
  margin-top: 1.75rem;
}

.element-page__pdf-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.7rem 1.15rem;
  color: var(--color-white);
  background: var(--color-olive);
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition:
    background-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.element-page__pdf-link:hover,
.element-page__pdf-link:focus-visible {
  background: #4d5b3c;
  box-shadow: 0 10px 24px rgb(44 44 44 / 12%);
  transform: translateY(-1px);
}

.element-page__pdf-link:focus-visible {
  outline: 3px solid rgb(94 107 76 / 38%);
  outline-offset: 4px;
}

.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-title {
  display: block;
}

.element-page__child-description {
  display: block;
  margin-top: 0.4rem;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.45;
}

.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;
  padding: 1rem 1.25rem;
  color: var(--color-text-muted);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.95rem;
}

.element-page__status--error {
  color: #7c2d2d;
  border-color: #e5b8b8;
}

@media (max-width: 768px) {
  .element-page__main {
    padding: 3rem 1rem;
  }

  .element-page__children {
    margin-top: 2rem;
  }
}
</style>