add set controls

frontend/rabbi_gerzi/src/stores/mediaSets.ts

@@ -15,11 +15,18 @@ export interface CreateMediaSetInput {
   iconImage: File
 }
 
+export interface UpdateMediaSetInput {
+  id: number
+  name: string
+  description: string
+  iconImage: File | null
+}
+
 interface SetsResponse {
   sets: MediaSet[]
 }
 
-interface CreateSetResponse {
+interface SetResponse {
   set: MediaSet
 }
 
@@ -34,7 +41,11 @@ export const useMediaSetsStore = defineStore('mediaSets', () => {
   const isLoading = ref(false)
   const error = ref<string | null>(null)
   const isCreating = ref(false)
+  const isUpdating = ref(false)
+  const isDeleting = ref(false)
   const createError = ref<string | null>(null)
+  const updateError = ref<string | null>(null)
+  const deleteError = ref<string | null>(null)
 
   async function fetchSets(): Promise<void> {
     error.value = null
@@ -83,7 +94,7 @@ export const useMediaSetsStore = defineStore('mediaSets', () => {
         return null
       }
 
-      const data: CreateSetResponse = await response.json()
+      const data: SetResponse = await response.json()
       sets.value = [...sets.value, data.set]
 
       return data.set
@@ -95,13 +106,112 @@ export const useMediaSetsStore = defineStore('mediaSets', () => {
     }
   }
 
+  async function updateSet(
+    input: UpdateMediaSetInput,
+  ): Promise<MediaSet | null> {
+    updateError.value = null
+    isUpdating.value = true
+
+    const formData = new FormData()
+    formData.append('name', input.name)
+    formData.append('description', input.description)
+    if (input.iconImage !== null) {
+      formData.append('iconImage', input.iconImage)
+    }
+
+    try {
+      const encodedSetId = encodeURIComponent(input.id.toString())
+      const response = await fetch(
+        `${API_BASE_URL}/api/sets/${encodedSetId}/update`,
+        {
+          method: 'POST',
+          credentials: 'include',
+          body: formData,
+        },
+      )
+
+      if (!response.ok) {
+        updateError.value = await errorMessage(
+          response,
+          'Could not update media set',
+        )
+        return null
+      }
+
+      const data: SetResponse = await response.json()
+      sets.value = sets.value.map((mediaSet) => {
+        if (mediaSet.id === data.set.id) {
+          return data.set
+        }
+
+        return mediaSet
+      })
+
+      return data.set
+    } catch {
+      updateError.value = 'Network error - could not update media set'
+      return null
+    } finally {
+      isUpdating.value = false
+    }
+  }
+
+  async function deleteSet(setId: number): Promise<boolean> {
+    deleteError.value = null
+    isDeleting.value = true
+
+    try {
+      const encodedSetId = encodeURIComponent(setId.toString())
+      const response = await fetch(`${API_BASE_URL}/api/sets/${encodedSetId}`, {
+        method: 'DELETE',
+        credentials: 'include',
+      })
+
+      if (!response.ok) {
+        deleteError.value = await errorMessage(
+          response,
+          'Could not delete media set',
+        )
+        return false
+      }
+
+      sets.value = sets.value.filter((mediaSet) => {
+        return mediaSet.id !== setId
+      })
+      return true
+    } catch {
+      deleteError.value = 'Network error - could not delete media set'
+      return false
+    } finally {
+      isDeleting.value = false
+    }
+  }
+
+  async function errorMessage(
+    response: Response,
+    fallbackMessage: string,
+  ): Promise<string> {
+    try {
+      const data: ErrorResponse = await response.json()
+      return data.error ?? fallbackMessage
+    } catch {
+      return fallbackMessage
+    }
+  }
+
   return {
     sets,
     isLoading,
     error,
     isCreating,
+    isUpdating,
+    isDeleting,
     createError,
+    updateError,
+    deleteError,
     fetchSets,
     createSet,
+    updateSet,
+    deleteSet,
   }
 })

frontend/rabbi_gerzi/src/views/MediaPage.vue

@@ -1,11 +1,17 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, reactive, ref } from 'vue'
-import { Plus as PlusIcon, X as XIcon } from 'lucide-vue-next'
+import {
+  AlertTriangle as AlertTriangleIcon,
+  Pencil as PencilIcon,
+  Plus as PlusIcon,
+  Trash2 as TrashIcon,
+  X as XIcon,
+} from 'lucide-vue-next'
 import { useRouter } from 'vue-router'
 import SiteHeader from '@/components/SiteHeader.vue'
 import { useAuthStore } from '@/stores/auth'
-import { useMediaSetsStore } from '@/stores/mediaSets'
+import { type MediaSet, useMediaSetsStore } from '@/stores/mediaSets'
 
 interface CreateSetForm {
   name: string
@@ -15,26 +21,54 @@ interface CreateSetForm {
 const router = useRouter()
 const authStore = useAuthStore()
 const mediaSetsStore = useMediaSetsStore()
-const { sets, isLoading, error, isCreating, createError } =
+const {
-  storeToRefs(mediaSetsStore)
+  sets,
+  isLoading,
+  error,
+  isCreating,
+  isUpdating,
+  isDeleting,
+  createError,
+  updateError,
+  deleteError,
+} = storeToRefs(mediaSetsStore)
 const isCreateModalOpen = ref(false)
+const isEditModalOpen = ref(false)
 const iconImageFile = ref<File | null>(null)
+const editIconImageFile = ref<File | null>(null)
 const iconImageInput = ref<HTMLInputElement | null>(null)
+const editIconImageInput = ref<HTMLInputElement | null>(null)
 const localCreateError = ref<string | null>(null)
+const localEditError = ref<string | null>(null)
+const editingSet = ref<MediaSet | null>(null)
+const deletingSet = ref<MediaSet | null>(null)
 
 const createSetForm = reactive<CreateSetForm>({
   name: '',
   description: '',
 })
 
+const editSetForm = reactive<CreateSetForm>({
+  name: '',
+  description: '',
+})
+
 const createSetError = computed(() => {
   return createError.value ?? localCreateError.value
 })
 
+const editSetError = computed(() => {
+  return updateError.value ?? localEditError.value
+})
+
 const selectedIconName = computed(() => {
   return iconImageFile.value?.name ?? 'No icon selected'
 })
 
+const selectedEditIconName = computed(() => {
+  return editIconImageFile.value?.name ?? 'No new icon selected'
+})
+
 onMounted(() => {
   void mediaSetsStore.fetchSets()
   if (!authStore.isAuthenticated) {
@@ -56,6 +90,42 @@ function closeCreateModal(): void {
   resetCreateSetForm()
 }
 
+function openEditModal(mediaSet: MediaSet): void {
+  editingSet.value = mediaSet
+  editSetForm.name = mediaSet.name
+  editSetForm.description = mediaSet.description
+  editIconImageFile.value = null
+  localEditError.value = null
+  updateError.value = null
+  if (editIconImageInput.value !== null) {
+    editIconImageInput.value.value = ''
+  }
+  isEditModalOpen.value = true
+}
+
+function closeEditModal(): void {
+  if (isUpdating.value) {
+    return
+  }
+
+  isEditModalOpen.value = false
+  resetEditSetForm()
+}
+
+function openDeleteModal(mediaSet: MediaSet): void {
+  deletingSet.value = mediaSet
+  deleteError.value = null
+}
+
+function closeDeleteModal(): void {
+  if (isDeleting.value) {
+    return
+  }
+
+  deletingSet.value = null
+  deleteError.value = null
+}
+
 function handleIconImageChange(changeEvent: Event): void {
   const input = changeEvent.target
   if (!(input instanceof HTMLInputElement)) {
@@ -65,6 +135,15 @@ function handleIconImageChange(changeEvent: Event): void {
   iconImageFile.value = input.files?.[0] ?? null
 }
 
+function handleEditIconImageChange(changeEvent: Event): void {
+  const input = changeEvent.target
+  if (!(input instanceof HTMLInputElement)) {
+    return
+  }
+
+  editIconImageFile.value = input.files?.[0] ?? null
+}
+
 async function handleCreateSet(): Promise<void> {
   const setName = createSetForm.name.trim()
   const setDescription = createSetForm.description.trim()
@@ -106,6 +185,75 @@ async function handleCreateSet(): Promise<void> {
   })
 }
 
+async function handleUpdateSet(): Promise<void> {
+  if (editingSet.value === null) {
+    return
+  }
+
+  const setName = editSetForm.name.trim()
+  const setDescription = editSetForm.description.trim()
+
+  localEditError.value = null
+  if (setName === '') {
+    localEditError.value = 'Name is required'
+    return
+  }
+  if (setDescription === '') {
+    localEditError.value = 'Description is required'
+    return
+  }
+
+  const updatedSet = await mediaSetsStore.updateSet({
+    id: editingSet.value.id,
+    name: setName,
+    description: setDescription,
+    iconImage: editIconImageFile.value,
+  })
+
+  if (updatedSet === null) {
+    return
+  }
+
+  isEditModalOpen.value = false
+  resetEditSetForm()
+}
+
+async function handleDeleteSet(): Promise<void> {
+  if (deletingSet.value === null) {
+    return
+  }
+
+  const deleted = await mediaSetsStore.deleteSet(deletingSet.value.id)
+  if (!deleted) {
+    return
+  }
+
+  deletingSet.value = null
+}
+
+function openSet(mediaSet: MediaSet): void {
+  if (mediaSet.rootElementId === null) {
+    return
+  }
+
+  void router.push({
+    name: 'element',
+    params: { id: mediaSet.rootElementId.toString() },
+  })
+}
+
+function handleManagedCardKeydown(
+  keyboardEvent: KeyboardEvent,
+  mediaSet: MediaSet,
+): void {
+  if (keyboardEvent.key !== 'Enter' && keyboardEvent.key !== ' ') {
+    return
+  }
+
+  keyboardEvent.preventDefault()
+  openSet(mediaSet)
+}
+
 function resetCreateSetForm(): void {
   createSetForm.name = ''
   createSetForm.description = ''
@@ -116,6 +264,18 @@ function resetCreateSetForm(): void {
     iconImageInput.value.value = ''
   }
 }
+
+function resetEditSetForm(): void {
+  editSetForm.name = ''
+  editSetForm.description = ''
+  editIconImageFile.value = null
+  localEditError.value = null
+  updateError.value = null
+  editingSet.value = null
+  if (editIconImageInput.value !== null) {
+    editIconImageInput.value.value = ''
+  }
+}
 </script>
 
 <template>
@@ -143,8 +303,56 @@ function resetCreateSetForm(): void {
         </p>
         <div v-else class="media-page__grid" data-cy="media-set-grid">
           <template v-for="mediaSet in sets" :key="mediaSet.id">
+            <article
+              v-if="authStore.isAuthenticated"
+              class="media-page__card media-page__card--managed"
+              :class="{
+                'media-page__card--disabled': mediaSet.rootElementId === null,
+              }"
+              data-cy="media-set-card"
+              :tabindex="mediaSet.rootElementId !== null ? 0 : undefined"
+              @click="openSet(mediaSet)"
+              @keydown="handleManagedCardKeydown($event, mediaSet)"
+            >
+              <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>
+              <div
+                class="media-page__card-actions"
+                aria-label="Set actions"
+                @click.stop
+              >
+                <button
+                  type="button"
+                  class="media-page__card-action"
+                  data-cy="media-set-edit"
+                  :aria-label="`Edit ${mediaSet.name}`"
+                  :title="`Edit ${mediaSet.name}`"
+                  @click="openEditModal(mediaSet)"
+                >
+                  <PencilIcon :size="18" aria-hidden="true" />
+                </button>
+                <button
+                  type="button"
+                  class="media-page__card-action media-page__card-action--danger"
+                  data-cy="media-set-delete"
+                  :aria-label="`Delete ${mediaSet.name}`"
+                  :title="`Delete ${mediaSet.name}`"
+                  @click="openDeleteModal(mediaSet)"
+                >
+                  <TrashIcon :size="18" aria-hidden="true" />
+                </button>
+              </div>
+            </article>
             <RouterLink
-              v-if="mediaSet.rootElementId !== null"
+              v-else-if="mediaSet.rootElementId !== null"
               :to="{ name: 'element', params: { id: mediaSet.rootElementId } }"
               class="media-page__card"
               data-cy="media-set-card"
@@ -286,6 +494,162 @@ function resetCreateSetForm(): void {
         </form>
       </section>
     </div>
+    <div
+      v-if="isEditModalOpen && editingSet !== null"
+      class="create-set-modal"
+      data-cy="edit-set-modal"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="edit-set-modal-title"
+      @click.self="closeEditModal"
+    >
+      <section class="create-set-modal__panel">
+        <header class="create-set-modal__header">
+          <h2 id="edit-set-modal-title" class="create-set-modal__title">
+            Edit set
+          </h2>
+          <button
+            type="button"
+            class="create-set-modal__close"
+            aria-label="Close edit set modal"
+            :disabled="isUpdating"
+            @click="closeEditModal"
+          >
+            <XIcon :size="20" aria-hidden="true" />
+          </button>
+        </header>
+
+        <form class="create-set-modal__form" @submit.prevent="handleUpdateSet">
+          <label class="create-set-modal__field">
+            <span class="create-set-modal__label">Name</span>
+            <input
+              v-model="editSetForm.name"
+              data-cy="edit-set-name"
+              type="text"
+              class="create-set-modal__input"
+              autocomplete="off"
+            />
+          </label>
+
+          <label class="create-set-modal__field">
+            <span class="create-set-modal__label">Description</span>
+            <textarea
+              v-model="editSetForm.description"
+              data-cy="edit-set-description"
+              class="create-set-modal__textarea"
+              rows="4"
+            ></textarea>
+          </label>
+
+          <label class="create-set-modal__field">
+            <span class="create-set-modal__label">Replace icon image</span>
+            <input
+              ref="editIconImageInput"
+              data-cy="edit-set-icon"
+              type="file"
+              class="create-set-modal__file"
+              accept="image/jpeg,image/png,image/webp"
+              @change="handleEditIconImageChange"
+            />
+            <span class="create-set-modal__file-name">
+              {{ selectedEditIconName }}
+            </span>
+          </label>
+
+          <p
+            v-if="editSetError !== null"
+            class="create-set-modal__error"
+            data-cy="edit-set-error"
+          >
+            {{ editSetError }}
+          </p>
+
+          <div class="create-set-modal__actions">
+            <button
+              type="button"
+              class="create-set-modal__secondary"
+              :disabled="isUpdating"
+              @click="closeEditModal"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              class="create-set-modal__submit"
+              data-cy="edit-set-submit"
+              :disabled="isUpdating"
+            >
+              {{ isUpdating ? 'Saving...' : 'Save set' }}
+            </button>
+          </div>
+        </form>
+      </section>
+    </div>
+    <div
+      v-if="deletingSet !== null"
+      class="create-set-modal"
+      data-cy="delete-set-modal"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="delete-set-modal-title"
+      @click.self="closeDeleteModal"
+    >
+      <section class="create-set-modal__panel">
+        <header class="create-set-modal__header">
+          <h2 id="delete-set-modal-title" class="create-set-modal__title">
+            Delete set
+          </h2>
+          <button
+            type="button"
+            class="create-set-modal__close"
+            aria-label="Close delete set modal"
+            :disabled="isDeleting"
+            @click="closeDeleteModal"
+          >
+            <XIcon :size="20" aria-hidden="true" />
+          </button>
+        </header>
+
+        <div class="delete-set-modal__body">
+          <span class="delete-set-modal__icon">
+            <AlertTriangleIcon :size="28" aria-hidden="true" />
+          </span>
+          <p class="delete-set-modal__warning">
+            Delete "{{ deletingSet.name }}"? This will permanently delete this
+            set and all elements and uploaded files inside it.
+          </p>
+        </div>
+
+        <p
+          v-if="deleteError !== null"
+          class="create-set-modal__error"
+          data-cy="delete-set-error"
+        >
+          {{ deleteError }}
+        </p>
+
+        <div class="create-set-modal__actions">
+          <button
+            type="button"
+            class="create-set-modal__secondary"
+            data-cy="delete-set-cancel"
+            :disabled="isDeleting"
+            @click="closeDeleteModal"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            class="create-set-modal__submit create-set-modal__submit--danger"
+            data-cy="delete-set-confirm"
+            :disabled="isDeleting"
+            @click="handleDeleteSet"
+          >
+            {{ isDeleting ? 'Deleting...' : 'Delete set' }}
+          </button>
+        </div>
+      </section>
+    </div>
   </div>
 </template>
 
@@ -368,10 +732,65 @@ a.media-page__card:focus-visible {
   outline-offset: 4px;
 }
 
+.media-page__card--managed {
+  position: relative;
+  cursor: pointer;
+}
+
+.media-page__card--managed:hover:not(.media-page__card--disabled),
+.media-page__card--managed:focus-visible:not(.media-page__card--disabled) {
+  border-color: #d4ad5f;
+  box-shadow: 0 14px 35px rgb(44 44 44 / 10%);
+  transform: translateY(-2px);
+}
+
+.media-page__card--managed:focus-visible {
+  outline: 3px solid rgb(212 173 95 / 45%);
+  outline-offset: 4px;
+}
+
 .media-page__card--disabled {
+  cursor: default;
   opacity: 0.72;
 }
 
+.media-page__card-actions {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  display: flex;
+  gap: 0.5rem;
+}
+
+.media-page__card-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.4rem;
+  height: 2.4rem;
+  padding: 0;
+  color: var(--color-slate);
+  background: var(--color-white);
+  border: 1px solid #e5cf9f;
+  border-radius: 9999px;
+  box-shadow: 0 8px 18px rgb(44 44 44 / 8%);
+}
+
+.media-page__card-action:hover,
+.media-page__card-action:focus-visible {
+  color: var(--color-olive);
+  border-color: #d4ad5f;
+  outline: 3px solid rgb(212 173 95 / 24%);
+  outline-offset: 2px;
+}
+
+.media-page__card-action--danger:hover,
+.media-page__card-action--danger:focus-visible {
+  color: #9f2d2d;
+  border-color: #d9a3a3;
+  outline-color: rgb(159 45 45 / 18%);
+}
+
 .media-page__card-icon {
   display: block;
   width: 140px;
@@ -590,6 +1009,11 @@ a.media-page__card:focus-visible {
   border: 1px solid var(--color-olive);
 }
 
+.create-set-modal__submit--danger {
+  background: #9f2d2d;
+  border-color: #9f2d2d;
+}
+
 .create-set-modal__secondary:disabled,
 .create-set-modal__submit:disabled,
 .create-set-modal__close:disabled {
@@ -597,6 +1021,33 @@ a.media-page__card:focus-visible {
   opacity: 0.65;
 }
 
+.delete-set-modal__body {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.85rem;
+  margin-top: 1.5rem;
+}
+
+.delete-set-modal__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  flex: 0 0 auto;
+  color: #9f2d2d;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: 9999px;
+}
+
+.delete-set-modal__warning {
+  margin: 0;
+  color: var(--color-text);
+  font-size: 0.98rem;
+  line-height: 1.55;
+}
+
 @media (max-width: 768px) {
   .media-page__main {
     padding: 3rem 1rem;