show set order errors

frontend/rabbi_gerzi/src/stores/mediaSets.ts

@@ -47,6 +47,7 @@ export const useMediaSetsStore = defineStore('mediaSets', () => {
   const createError = ref<string | null>(null)
   const updateError = ref<string | null>(null)
   const deleteError = ref<string | null>(null)
+  const reorderError = ref<string | null>(null)
 
   async function fetchSets(): Promise<void> {
     error.value = null
@@ -189,6 +190,7 @@ export const useMediaSetsStore = defineStore('mediaSets', () => {
   }
 
   async function reorderSets(setIds: number[]): Promise<boolean> {
+    reorderError.value = null
     isReordering.value = true
 
     try {
@@ -200,6 +202,16 @@ export const useMediaSetsStore = defineStore('mediaSets', () => {
       })
 
       if (!response.ok) {
+        if (response.status === 401) {
+          reorderError.value = 'Please log in again'
+        } else if (response.status === 400) {
+          reorderError.value = await errorMessage(
+            response,
+            'Could not save set order',
+          )
+        } else {
+          reorderError.value = 'Could not save set order'
+        }
         return false
       }
 
@@ -207,6 +219,7 @@ export const useMediaSetsStore = defineStore('mediaSets', () => {
       sets.value = data.sets
       return true
     } catch {
+      reorderError.value = 'Network error - could not save set order'
       return false
     } finally {
       isReordering.value = false
@@ -236,6 +249,7 @@ export const useMediaSetsStore = defineStore('mediaSets', () => {
     createError,
     updateError,
     deleteError,
+    reorderError,
     fetchSets,
     createSet,
     updateSet,

frontend/rabbi_gerzi/src/views/MediaPage.vue

@@ -36,6 +36,7 @@ const {
   createError,
   updateError,
   deleteError,
+  reorderError,
 } = storeToRefs(mediaSetsStore)
 const isCreateModalOpen = ref(false)
 const isEditModalOpen = ref(false)
@@ -331,12 +332,28 @@ function resetEditSetForm(): void {
       <section class="media-page__sets" aria-label="Featured sets">
         <p
           v-if="setOrderStatus !== null"
-          class="media-page__status media-page__order-status"
+          :class="[
+            'media-page__status',
+            'media-page__status--success',
+            'media-page__order-message',
+          ]"
           data-cy="media-set-order-status"
           aria-live="polite"
         >
           {{ setOrderStatus }}
         </p>
+        <p
+          v-if="reorderError !== null"
+          :class="[
+            'media-page__status',
+            'media-page__status--error',
+            'media-page__order-message',
+          ]"
+          data-cy="media-set-order-error"
+          role="alert"
+        >
+          {{ reorderError }}
+        </p>
         <p v-if="isLoading" class="media-page__status">Loading media sets...</p>
         <p
           v-else-if="error"
@@ -775,12 +792,15 @@ function resetEditSetForm(): void {
   border-color: #e5b8b8;
 }
 
-.media-page__order-status {
+.media-page__status--success {
-  margin-bottom: 1.25rem;
   color: var(--color-olive);
   border-color: #c8d0ba;
 }
 
+.media-page__order-message {
+  margin-bottom: 1.25rem;
+}
+
 .media-page__grid {
   display: grid;
   max-width: 1745px;