feat: rebuild admin image manager per-image controls

2026-09-10 06:15:51 -04:00
parent 7d20aedd14
commit c9f6a58516
5 changed files with 130 additions and 61 deletions
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed, reactive, ref } from 'vue';

 import ConditionBadge from '@/components/atoms/ConditionBadge.vue';
 import ImageGallery from '@/components/molecules/ImageGallery.vue';
@@ -7,25 +7,39 @@ import StatusBadge from '@/components/atoms/StatusBadge.vue';

 const props = defineProps({
  images: { type: Array, required: true },
-  processingStatus: { type: String, default: 'COMPLETED' },
-  errorMessage: { type: String, default: '' },
  isSaving: { type: Boolean, default: false },
 });
-const emit = defineEmits(['upload', '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));
+const emit = defineEmits(['upload', 'move', 'primary', 'alt-text', 'retry', 'delete']);

-function saveAltText() {
-  emit('alt-text', altText.value);
-  isEditingAltText.value = false;
+const orderedImages = computed(() => [...props.images].sort((left, right) => left.sortOrder - right.sortOrder));
+const editingImageId = ref(null);
+const altTextDrafts = reactive({});
+const isDragging = ref(false);
+
+function beginEditAltText(image) {
+  altTextDrafts[image.id] = image.altText ?? '';
+  editingImageId.value = image.id;
+}
+
+function saveAltText(imageId) {
+  emit('alt-text', { id: imageId, altText: altTextDrafts[imageId] ?? '' });
+  editingImageId.value = null;
+}
+
+function queueUpload(fileList) {
+  const files = Array.from(fileList ?? []);
+  if (files.length > 0) emit('upload', files);
 }

 function handleFileChange(event) {
-  const [file] = event.target.files;
-  if (file) emit('upload', file);
+  queueUpload(event.target.files);
  event.target.value = '';
 }
+
+function handleDrop(event) {
+  isDragging.value = false;
+  queueUpload(event.dataTransfer?.files);
+}
 </script>

 <template>
@@ -35,39 +49,50 @@ function handleFileChange(event) {
        <p class="catalog-kicker">Inventory images</p>
        <h2 id="image-manager-title">Image management</h2>
      </div>
-      <StatusBadge :status="processingStatus" />
+      <StatusBadge :status="orderedImages.find((image) => image.processingStatus === 'FAILED') ? 'FAILED' : (orderedImages.find((image) => image.processingStatus === 'PROCESSING') ? 'PROCESSING' : 'COMPLETED')" />
    </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>
-
-    <div class="admin-image-manager__upload">
-      <label class="fixture-label" for="admin-image-upload">Add image</label>
-      <input id="admin-image-upload" class="fixture-input" type="file" accept="image/jpeg,image/png,image/webp" :disabled="isSaving" @change="handleFileChange" />
+    <div
+      class="admin-image-manager__dropzone"
+      :class="{ 'admin-image-manager__dropzone--active': isDragging }"
+      @dragover.prevent="isDragging = true"
+      @dragleave.prevent="isDragging = false"
+      @drop.prevent="handleDrop"
+    >
+      <p>Drag and drop images here, or choose files below.</p>
+      <label class="fixture-label" for="admin-image-upload">Add images</label>
+      <input id="admin-image-upload" class="fixture-input" type="file" accept="image/jpeg,image/png,image/webp" multiple :disabled="isSaving" @change="handleFileChange" />
    </div>

    <ImageGallery :images="orderedImages" />

    <p v-if="isSaving" class="state state--loading" role="status">Saving image changes...</p>
-    <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>
+    <p v-else-if="orderedImages.length === 0" class="state" role="status">No images uploaded yet.</p>
+
+    <ul v-else class="admin-image-manager__list">
+      <li v-for="(image, index) in orderedImages" :key="image.id" class="admin-image-manager__item">
+        <div class="admin-image-manager__row">
+          <ConditionBadge :label="image.altText || `Image ${index + 1}`" :selected="image.isPrimary" />
+          <StatusBadge :status="image.processingStatus" />
+        </div>
+        <p v-if="image.processingStatus === 'FAILED'" class="state state--error" role="alert">Image processing failed.</p>
+
+        <div class="admin-image-manager__row">
+          <label class="fixture-label" :for="`admin-alt-text-${image.id}`">Alt text</label>
+          <input :id="`admin-alt-text-${image.id}`" v-model="altTextDrafts[image.id]" class="fixture-input" :disabled="editingImageId !== image.id" />
+          <button v-if="editingImageId !== image.id" class="button button--secondary" type="button" @click="beginEditAltText(image)">Edit alt text</button>
+          <button v-else class="button button--primary" type="button" @click="saveAltText(image.id)">Save alt text</button>
+        </div>
+
+        <div class="admin-image-manager__row">
+          <button class="button button--secondary" type="button" :disabled="image.isPrimary" @click="emit('primary', image.id)">Make primary</button>
+          <button class="button button--secondary" type="button" :disabled="index === 0" @click="emit('move', { id: image.id, direction: 'up' })">Move up</button>
+          <button class="button button--secondary" type="button" :disabled="index === orderedImages.length - 1" @click="emit('move', { id: image.id, direction: 'down' })">Move down</button>
+          <button v-if="image.processingStatus === 'FAILED'" class="button button--secondary" type="button" @click="emit('retry', image.id)">Retry processing</button>
+          <button class="button button--danger" type="button" @click="emit('delete', image.id)">Delete image</button>
+        </div>
+      </li>
+    </ul>
  </section>
 </template>

@@ -76,7 +101,8 @@ function handleFileChange(event) {
 .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__upload { display: grid; gap: var(--space-2); }
-.admin-image-manager__row--order { align-items: stretch; }
+.admin-image-manager__dropzone { display: grid; gap: var(--space-2); border: var(--border-thin) dashed var(--color-border-strong); border-radius: var(--radius-lg); padding: var(--space-4); text-align: center; }
+.admin-image-manager__dropzone--active { border-color: var(--color-interactive); background: var(--color-surface-muted, var(--color-surface)); }
+.admin-image-manager__list { display: grid; gap: var(--space-4); list-style: none; padding: 0; margin: 0; }
+.admin-image-manager__item { display: grid; gap: var(--space-3); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); }
 </style>