From 240ab4e7717b621b39c51497a8c1b8431d3fcd48 Mon Sep 17 00:00:00 2001
From: Yisroel Baum <yisroel.d.baum@gmail.com>
Date: Thu, 28 May 2026 20:17:17 +0300
Subject: [PATCH] add admin element editing

---
 .../rabbi_gerzi/src/components/SiteHeader.vue |  54 ++-
 frontend/rabbi_gerzi/src/router/index.ts      |  24 ++
 frontend/rabbi_gerzi/src/stores/elements.ts   |  80 ++++-
 .../src/views/AdminElementPage.vue            | 329 ++++++++++++++++++
 4 files changed, 484 insertions(+), 3 deletions(-)
 create mode 100644 frontend/rabbi_gerzi/src/views/AdminElementPage.vue

diff --git a/frontend/rabbi_gerzi/src/components/SiteHeader.vue b/frontend/rabbi_gerzi/src/components/SiteHeader.vue
index 65497a5..0ecdc90 100644
--- a/frontend/rabbi_gerzi/src/components/SiteHeader.vue
+++ b/frontend/rabbi_gerzi/src/components/SiteHeader.vue
@@ -1,9 +1,15 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { RouterLink } from 'vue-router'
+import { computed, onMounted } from 'vue'
+import { RouterLink, useRoute, type RouteLocationRaw } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 
+interface ContextualNavAction {
+  label: string
+  to: RouteLocationRaw
+}
+
 const authStore = useAuthStore()
+const route = useRoute()
 
 const signatureImage = {
   src: '/assets/signature.png',
@@ -24,6 +30,42 @@ const navItems = [
   { label: 'Contact', href: '/contact', icon: '➤' },
   { label: 'Donate', href: '/donate', icon: '♡' },
 ]
+
+const routeElementId = computed(() => {
+  const currentRouteElementId = route.params.id
+
+  if (Array.isArray(currentRouteElementId)) {
+    return currentRouteElementId.join('/')
+  }
+
+  if (typeof currentRouteElementId === 'string') {
+    return currentRouteElementId
+  }
+
+  return null
+})
+
+const contextualNavAction = computed<ContextualNavAction | null>(() => {
+  if (!authStore.isAuthenticated || routeElementId.value === null) {
+    return null
+  }
+
+  if (route.name === 'element') {
+    return {
+      label: 'Edit Element',
+      to: { name: 'admin-element', params: { id: routeElementId.value } },
+    }
+  }
+
+  if (route.name === 'admin-element') {
+    return {
+      label: 'View Element',
+      to: { name: 'element', params: { id: routeElementId.value } },
+    }
+  }
+
+  return null
+})
 </script>
 
 <template>
@@ -43,6 +85,14 @@ const navItems = [
         </span>
         <span>{{ item.label }}</span>
       </RouterLink>
+      <RouterLink
+        v-if="contextualNavAction !== null"
+        :to="contextualNavAction.to"
+        class="site-header__nav-link"
+        data-cy="navbar-element-mode"
+      >
+        {{ contextualNavAction.label }}
+      </RouterLink>
       <button
         v-if="authStore.isAuthenticated"
         data-cy="navbar-logout"
diff --git a/frontend/rabbi_gerzi/src/router/index.ts b/frontend/rabbi_gerzi/src/router/index.ts
index 3d5962f..90ed225 100644
--- a/frontend/rabbi_gerzi/src/router/index.ts
+++ b/frontend/rabbi_gerzi/src/router/index.ts
@@ -3,6 +3,8 @@ import HomePage from '@/views/HomePage.vue'
 import LoginPage from '@/views/LoginPage.vue'
 import MediaPage from '@/views/MediaPage.vue'
 import ElementPage from '@/views/ElementPage.vue'
+import AdminElementPage from '@/views/AdminElementPage.vue'
+import { useAuthStore } from '@/stores/auth'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -27,7 +29,29 @@ const router = createRouter({
       name: 'element',
       component: ElementPage,
     },
+    {
+      path: '/admin/element/:id',
+      name: 'admin-element',
+      component: AdminElementPage,
+    },
   ],
 })
 
+router.beforeEach(async (to) => {
+  if (to.name !== 'admin-element') {
+    return true
+  }
+
+  const authStore = useAuthStore()
+  if (!authStore.isAuthenticated) {
+    await authStore.fetchUser()
+  }
+
+  if (!authStore.isAuthenticated) {
+    return { name: 'login' }
+  }
+
+  return true
+})
+
 export default router
diff --git a/frontend/rabbi_gerzi/src/stores/elements.ts b/frontend/rabbi_gerzi/src/stores/elements.ts
index 058c607..92d3dc0 100644
--- a/frontend/rabbi_gerzi/src/stores/elements.ts
+++ b/frontend/rabbi_gerzi/src/stores/elements.ts
@@ -19,6 +19,23 @@ interface ElementResponse {
   childElements: ChildElement[]
 }
 
+export interface UpdateElementInput {
+  title: string
+  description: string
+  iconImageUrl: string
+  richText: string
+  pdfPath: string
+  youtubeUrl: string
+}
+
+interface UpdateElementResponse {
+  element: Element
+}
+
+interface ErrorResponse {
+  error?: string
+}
+
 const API_BASE_URL = import.meta.env.VITE_API_BASE_URL as string
 
 export const useElementsStore = defineStore('elements', () => {
@@ -26,11 +43,14 @@ export const useElementsStore = defineStore('elements', () => {
   const childElements = ref<ChildElement[]>([])
   const isLoading = ref(false)
   const error = ref<string | null>(null)
+  const isSaving = ref(false)
+  const saveError = ref<string | null>(null)
 
   async function fetchElement(elementId: string): Promise<void> {
     element.value = null
     childElements.value = []
     error.value = null
+    saveError.value = null
     isLoading.value = true
 
     try {
@@ -59,5 +79,63 @@ export const useElementsStore = defineStore('elements', () => {
     }
   }
 
-  return { element, childElements, isLoading, error, fetchElement }
+  async function updateElement(
+    elementId: string,
+    input: UpdateElementInput,
+  ): Promise<boolean> {
+    saveError.value = null
+    isSaving.value = true
+
+    try {
+      const encodedElementId = encodeURIComponent(elementId)
+      const elementUrl = `${API_BASE_URL}/api/elements/${encodedElementId}`
+      const response = await fetch(elementUrl, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify(input),
+      })
+
+      if (response.status === 401) {
+        saveError.value = 'Please log in again'
+        return false
+      }
+
+      if (response.status === 404) {
+        saveError.value = 'Element not found'
+        return false
+      }
+
+      if (response.status === 400) {
+        const data: ErrorResponse = await response.json()
+        saveError.value = data.error ?? 'Could not save element'
+        return false
+      }
+
+      if (!response.ok) {
+        saveError.value = 'Could not save element'
+        return false
+      }
+
+      const data: UpdateElementResponse = await response.json()
+      element.value = data.element
+      return true
+    } catch {
+      saveError.value = 'Network error - could not save element'
+      return false
+    } finally {
+      isSaving.value = false
+    }
+  }
+
+  return {
+    element,
+    childElements,
+    isLoading,
+    error,
+    isSaving,
+    saveError,
+    fetchElement,
+    updateElement,
+  }
 })
diff --git a/frontend/rabbi_gerzi/src/views/AdminElementPage.vue b/frontend/rabbi_gerzi/src/views/AdminElementPage.vue
new file mode 100644
index 0000000..b65713a
--- /dev/null
+++ b/frontend/rabbi_gerzi/src/views/AdminElementPage.vue
@@ -0,0 +1,329 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { computed, reactive, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import SiteHeader from '@/components/SiteHeader.vue'
+import { useElementsStore } from '@/stores/elements'
+
+interface ElementForm {
+  title: string
+  description: string
+  iconImageUrl: string
+  richText: string
+  pdfPath: string
+  youtubeUrl: string
+}
+
+const route = useRoute()
+const elementsStore = useElementsStore()
+const { element, isLoading, error, isSaving, saveError } = storeToRefs(
+  elementsStore,
+)
+const savedMessage = ref<string | null>(null)
+
+const form = reactive<ElementForm>({
+  title: '',
+  description: '',
+  iconImageUrl: '',
+  richText: '',
+  pdfPath: '',
+  youtubeUrl: '',
+})
+
+const elementId = computed(() => {
+  const routeElementId = route.params.id
+
+  if (Array.isArray(routeElementId)) {
+    return routeElementId.join('/')
+  }
+
+  if (typeof routeElementId === 'string') {
+    return routeElementId
+  }
+
+  return ''
+})
+
+const statusMessage = computed(() => {
+  return saveError.value ?? savedMessage.value
+})
+
+watch(
+  elementId,
+  (currentElementId) => {
+    if (currentElementId === '') {
+      return
+    }
+
+    savedMessage.value = null
+    void elementsStore.fetchElement(currentElementId)
+  },
+  { immediate: true },
+)
+
+watch(element, (currentElement) => {
+  if (currentElement === null) {
+    return
+  }
+
+  form.title = currentElement.title
+  form.description = currentElement.description
+  form.iconImageUrl = currentElement.iconImageUrl ?? ''
+  form.richText = currentElement.richText
+  form.pdfPath = currentElement.pdfPath ?? ''
+  form.youtubeUrl = currentElement.youtubeUrl ?? ''
+})
+
+async function handleSubmit(): Promise<void> {
+  if (elementId.value === '') {
+    return
+  }
+
+  savedMessage.value = null
+  const saved = await elementsStore.updateElement(elementId.value, {
+    title: form.title,
+    description: form.description,
+    iconImageUrl: form.iconImageUrl,
+    richText: form.richText,
+    pdfPath: form.pdfPath,
+    youtubeUrl: form.youtubeUrl,
+  })
+
+  if (saved) {
+    savedMessage.value = 'Saved'
+  }
+}
+</script>
+
+<template>
+  <div class="admin-element-page">
+    <SiteHeader />
+    <main class="admin-element-page__main" data-cy="admin-element-page">
+      <header class="admin-element-page__header">
+        <h1 class="admin-element-page__heading">Edit Element</h1>
+      </header>
+
+      <p v-if="isLoading" class="admin-element-page__status">
+        Loading element...
+      </p>
+      <p
+        v-else-if="error"
+        class="admin-element-page__status admin-element-page__status--error"
+        data-cy="admin-element-load-error"
+      >
+        {{ error }}
+      </p>
+      <form
+        v-else-if="element"
+        class="admin-element-page__form"
+        @submit.prevent="handleSubmit"
+      >
+        <label class="admin-element-page__field">
+          <span class="admin-element-page__label">Title</span>
+          <input
+            v-model="form.title"
+            class="admin-element-page__input"
+            data-cy="admin-element-title"
+            type="text"
+          />
+        </label>
+
+        <label class="admin-element-page__field">
+          <span class="admin-element-page__label">Description</span>
+          <textarea
+            v-model="form.description"
+            class="admin-element-page__textarea"
+            data-cy="admin-element-description"
+            rows="4"
+          />
+        </label>
+
+        <label class="admin-element-page__field">
+          <span class="admin-element-page__label">Icon Image URL</span>
+          <input
+            v-model="form.iconImageUrl"
+            class="admin-element-page__input"
+            data-cy="admin-element-icon-image-url"
+            type="text"
+          />
+        </label>
+
+        <label class="admin-element-page__field">
+          <span class="admin-element-page__label">Rich Text HTML</span>
+          <textarea
+            v-model="form.richText"
+            class="admin-element-page__textarea admin-element-page__code"
+            data-cy="admin-element-rich-text"
+            rows="9"
+          />
+        </label>
+
+        <label class="admin-element-page__field">
+          <span class="admin-element-page__label">PDF Path</span>
+          <input
+            v-model="form.pdfPath"
+            class="admin-element-page__input"
+            data-cy="admin-element-pdf-path"
+            type="text"
+          />
+        </label>
+
+        <label class="admin-element-page__field">
+          <span class="admin-element-page__label">YouTube URL</span>
+          <input
+            v-model="form.youtubeUrl"
+            class="admin-element-page__input"
+            data-cy="admin-element-youtube-url"
+            type="text"
+          />
+        </label>
+
+        <div class="admin-element-page__actions">
+          <button
+            class="admin-element-page__save"
+            data-cy="admin-element-save"
+            type="submit"
+            :disabled="isSaving"
+          >
+            {{ isSaving ? 'Saving...' : 'Save' }}
+          </button>
+          <p
+            v-if="statusMessage !== null"
+            :class="[
+              'admin-element-page__status',
+              'admin-element-page__status--inline',
+            ]"
+            data-cy="admin-element-status"
+            aria-live="polite"
+          >
+            {{ statusMessage }}
+          </p>
+        </div>
+      </form>
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.admin-element-page {
+  min-height: 100vh;
+  background: var(--color-white);
+}
+
+.admin-element-page__main {
+  min-height: 100vh;
+  padding: 4rem 2rem 5rem;
+}
+
+.admin-element-page__header,
+.admin-element-page__form,
+.admin-element-page__status {
+  max-width: 48rem;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.admin-element-page__heading {
+  margin: 0;
+  color: #2c2c2c;
+  font-family: var(--font-serif);
+  font-size: 2rem;
+  font-weight: 400;
+  line-height: 1.2;
+}
+
+.admin-element-page__form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.1rem;
+  margin-top: 2rem;
+}
+
+.admin-element-page__field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.admin-element-page__label {
+  color: var(--color-text-muted);
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.admin-element-page__input,
+.admin-element-page__textarea {
+  width: 100%;
+  padding: 0.7rem 0.8rem;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  color: var(--color-text);
+  background: var(--color-white);
+  font-family: var(--font-sans);
+  font-size: 0.96rem;
+  line-height: 1.5;
+}
+
+.admin-element-page__input:focus,
+.admin-element-page__textarea:focus {
+  border-color: var(--color-slate);
+  outline: none;
+}
+
+.admin-element-page__textarea {
+  resize: vertical;
+}
+
+.admin-element-page__code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+
+.admin-element-page__actions {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-top: 0.5rem;
+}
+
+.admin-element-page__save {
+  padding: 0.7rem 1.4rem;
+  border: 1px solid var(--color-slate);
+  border-radius: 4px;
+  color: var(--color-white);
+  background: var(--color-slate);
+  font-family: var(--font-sans);
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.admin-element-page__save:disabled {
+  cursor: not-allowed;
+  opacity: 0.65;
+}
+
+.admin-element-page__status {
+  margin-top: 2rem;
+  color: var(--color-text-muted);
+}
+
+.admin-element-page__status--inline {
+  margin: 0;
+  color: var(--color-slate);
+}
+
+.admin-element-page__status--error {
+  color: #9f2f2f;
+}
+
+@media (max-width: 768px) {
+  .admin-element-page__main {
+    padding: 2.5rem 1rem 4rem;
+  }
+
+  .admin-element-page__actions {
+    align-items: stretch;
+    flex-direction: column;
+  }
+}
+</style>