feat: add admin image workflow

2026-09-08 22:13:47 -04:00
parent efeca42d0f
commit c382852924
3 changed files with 151 additions and 0 deletions
@@ -0,0 +1,68 @@
+<script setup>
+import { computed, ref } from 'vue';
+
+import ConditionBadge from '@/components/atoms/ConditionBadge.vue';
+import ImageGallery from '@/components/molecules/ImageGallery.vue';
+import StatusBadge from '@/components/atoms/StatusBadge.vue';
+
+const props = defineProps({
+  images: { type: Array, required: true },
+  processingStatus: { type: String, default: 'COMPLETED' },
+  errorMessage: { type: String, default: '' },
+});
+const emit = defineEmits(['reorder', 'primary', 'alt-text', 'retry', 'delete']);
+const altText = ref(props.images.find((image) => image.isPrimary)?.altText ?? '');
+const isEditingAltText = ref(false);
+const orderedImages = computed(() => [...props.images].sort((left, right) => left.sortOrder - right.sortOrder));
+
+function saveAltText() {
+  emit('alt-text', altText.value);
+  isEditingAltText.value = false;
+}
+</script>
+
+<template>
+  <section class="admin-image-manager" aria-labelledby="image-manager-title">
+    <div class="admin-image-manager__header">
+      <div>
+        <p class="catalog-kicker">Inventory images</p>
+        <h2 id="image-manager-title">Image management</h2>
+      </div>
+      <StatusBadge :status="processingStatus" />
+    </div>
+
+    <p v-if="processingStatus === 'PROCESSING'" class="state state--loading" role="status">Processing responsive images...</p>
+    <div v-else-if="processingStatus === 'FAILED'" class="state state--error" role="alert">
+      <span>{{ errorMessage || 'Image processing failed.' }}</span>
+      <button class="button button--secondary" type="button" @click="emit('retry')">Retry processing</button>
+    </div>
+
+    <ImageGallery :images="orderedImages" />
+
+    <div class="admin-image-manager__controls">
+      <div class="admin-image-manager__row">
+        <ConditionBadge :label="orderedImages.find((image) => image.isPrimary)?.altText || 'Primary image'" :selected="true" />
+        <button class="button button--secondary" type="button" @click="emit('primary', orderedImages[0]?.id)">Make first primary</button>
+      </div>
+      <div class="admin-image-manager__row">
+        <label class="fixture-label" for="admin-alt-text">Alt text</label>
+        <input id="admin-alt-text" v-model="altText" class="fixture-input" :disabled="!isEditingAltText" />
+        <button v-if="!isEditingAltText" class="button button--secondary" type="button" @click="isEditingAltText = true">Edit alt text</button>
+        <button v-else class="button button--primary" type="button" @click="saveAltText">Save alt text</button>
+      </div>
+      <div class="admin-image-manager__row admin-image-manager__row--order">
+        <button v-for="(image, index) in orderedImages" :key="image.id" class="button button--secondary" type="button" :aria-label="`Move image ${index + 1} down`" :disabled="index === orderedImages.length - 1" @click="emit('reorder', { id: image.id, sortOrder: image.sortOrder + 1 })">Move {{ index + 1 }} down</button>
+      </div>
+      <button class="button button--danger" type="button" @click="emit('delete', orderedImages[0]?.id)">Delete selected image</button>
+    </div>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.admin-image-manager { display: grid; gap: var(--space-6); max-width: 720px; border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-6); background: var(--color-surface); }
+.admin-image-manager__header, .admin-image-manager__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
+.admin-image-manager__header { justify-content: space-between; }
+.admin-image-manager__header h2 { font-size: var(--text-xl); }
+.admin-image-manager__controls { display: grid; gap: var(--space-4); }
+.admin-image-manager__row--order { align-items: stretch; }
+</style>