@codingfactory/inventory-locator-client 0.1.0

package/src/components/products/QuickMoveModal.vue

@@ -0,0 +1,592 @@
+<template>
+  <InvModal
+    :show="show"
+    title="Move Product"
+    size="md"
+    @update:show="handleClose"
+  >
+    <div class="qmm-content">
+      <!-- Product info -->
+      <div class="qmm-info">
+        <div class="qmm-info-row">
+          <span class="qmm-info-label">Moving</span>
+          <span class="qmm-info-value qmm-info-value--bold">{{ productName }}</span>
+        </div>
+        <div class="qmm-info-row">
+          <span class="qmm-info-label">From</span>
+          <span class="qmm-info-value">
+            <InvBadge variant="default" size="sm">{{ fromLocationCode }}</InvBadge>
+            <span class="qmm-available">Available: {{ formatQuantity(availableQuantity) }}</span>
+          </span>
+        </div>
+      </div>
+
+      <!-- Destination search -->
+      <div class="qmm-field">
+        <label for="qmm-dest-search" class="qmm-label">To</label>
+        <div class="qmm-search-wrapper">
+          <svg class="qmm-search-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+            <circle cx="7" cy="7" r="5" stroke="currentColor" stroke-width="1.5" />
+            <path d="M11 11L14 14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+          </svg>
+          <input
+            id="qmm-dest-search"
+            ref="searchInputRef"
+            v-model="destinationQuery"
+            type="search"
+            class="qmm-search-input"
+            placeholder="Search destination location..."
+            autocomplete="off"
+            :aria-expanded="locationResults.length > 0"
+            aria-controls="qmm-location-results"
+            @input="handleLocationSearch"
+          />
+          <button
+            v-if="destinationQuery"
+            type="button"
+            class="qmm-search-clear"
+            aria-label="Clear search"
+            @click="clearDestination"
+          >
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+              <path d="M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+            </svg>
+          </button>
+        </div>
+
+        <!-- Selected destination display -->
+        <div v-if="selectedDestination" class="qmm-selected-dest">
+          <span class="qmm-selected-dest-name">{{ selectedDestination.name }}</span>
+          <InvBadge variant="default" size="sm">{{ selectedDestination.full_code || selectedDestination.code }}</InvBadge>
+          <button
+            type="button"
+            class="qmm-selected-dest-remove"
+            aria-label="Remove selected destination"
+            @click="clearDestination"
+          >
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+              <path d="M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+            </svg>
+          </button>
+        </div>
+
+        <!-- Location search results dropdown -->
+        <div v-if="searchingLocations" class="qmm-searching" role="status">
+          <div class="qmm-spinner" aria-hidden="true" />
+          <span>Searching locations...</span>
+        </div>
+
+        <ul
+          v-else-if="locationResults.length > 0 && !selectedDestination"
+          id="qmm-location-results"
+          class="qmm-results"
+          role="listbox"
+          aria-label="Location search results"
+        >
+          <li
+            v-for="loc in filteredLocationResults"
+            :key="loc.id"
+            class="qmm-result-item"
+            role="option"
+            :aria-selected="false"
+            tabindex="0"
+            @click="selectDestination(loc)"
+            @keydown.enter="selectDestination(loc)"
+            @keydown.space.prevent="selectDestination(loc)"
+          >
+            <span class="qmm-result-name">{{ loc.name }}</span>
+            <InvBadge variant="muted" size="sm">{{ loc.full_code || loc.code }}</InvBadge>
+          </li>
+        </ul>
+      </div>
+
+      <!-- Quantity -->
+      <div class="qmm-field">
+        <label for="qmm-quantity" class="qmm-label">
+          Quantity
+          <span class="qmm-max">(max: {{ formatQuantity(availableQuantity) }})</span>
+        </label>
+        <input
+          id="qmm-quantity"
+          v-model.number="moveQuantity"
+          type="number"
+          class="qmm-quantity-input"
+          :class="{ 'qmm-quantity-input--error': !!quantityError }"
+          step="0.01"
+          min="0.01"
+          :max="availableQuantity"
+          :aria-invalid="!!quantityError || undefined"
+          :aria-describedby="quantityError ? 'qmm-qty-error' : undefined"
+        />
+        <p v-if="quantityError" id="qmm-qty-error" class="qmm-error" role="alert">
+          {{ quantityError }}
+        </p>
+      </div>
+
+      <!-- Notes -->
+      <div class="qmm-field">
+        <label for="qmm-notes" class="qmm-label">Notes (optional)</label>
+        <textarea
+          id="qmm-notes"
+          v-model="moveNotes"
+          class="qmm-textarea"
+          placeholder="Reason for move..."
+          rows="2"
+        />
+      </div>
+
+      <p v-if="submitError" class="qmm-error" role="alert">{{ submitError }}</p>
+    </div>
+
+    <template #footer>
+      <InvButton variant="secondary" @click="handleClose">
+        Cancel
+      </InvButton>
+      <InvButton
+        variant="primary"
+        :loading="submitting"
+        :disabled="!canSubmit"
+        @click="handleSubmit"
+      >
+        Move Product
+      </InvButton>
+    </template>
+  </InvModal>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import type { Location } from '../../types'
+import { useLocationProducts } from '../../composables/useLocationProducts'
+import { useLocationSearch } from '../../composables/useLocationSearch'
+import InvModal from '../shared/InvModal.vue'
+import InvButton from '../shared/InvButton.vue'
+import InvBadge from '../shared/InvBadge.vue'
+
+const props = defineProps<{
+  show: boolean
+  productId: number | string
+  productName: string
+  fromLocationId: number
+  fromLocationCode: string
+  availableQuantity: number
+}>()
+
+const emit = defineEmits<{
+  'update:show': [value: boolean]
+  moved: []
+}>()
+
+const { moveProduct } = useLocationProducts()
+const {
+  results: locationResults,
+  loading: searchingLocations,
+  search: searchLocations,
+  clear: clearLocationSearch,
+} = useLocationSearch()
+
+// Form state
+const destinationQuery = ref('')
+const selectedDestination = ref<Location | null>(null)
+const moveQuantity = ref<number>(0)
+const moveNotes = ref('')
+const searchInputRef = ref<HTMLInputElement | null>(null)
+
+// Submission state
+const submitting = ref(false)
+const submitError = ref<string | null>(null)
+
+const quantityError = computed(() => {
+  if (moveQuantity.value <= 0) return 'Quantity must be greater than 0'
+  if (moveQuantity.value > props.availableQuantity) {
+    return `Cannot exceed available quantity (${formatQuantity(props.availableQuantity)})`
+  }
+  return null
+})
+
+const filteredLocationResults = computed(() => {
+  // Exclude the source location from results
+  return locationResults.value.filter((loc) => loc.id !== props.fromLocationId)
+})
+
+const canSubmit = computed(() => {
+  return (
+    selectedDestination.value !== null &&
+    moveQuantity.value > 0 &&
+    moveQuantity.value <= props.availableQuantity &&
+    !submitting.value
+  )
+})
+
+function formatQuantity(qty: number): string {
+  return Number.isInteger(qty) ? qty.toFixed(0) : qty.toFixed(2)
+}
+
+function handleLocationSearch() {
+  selectedDestination.value = null
+  searchLocations(destinationQuery.value)
+}
+
+function selectDestination(location: Location) {
+  selectedDestination.value = location
+  destinationQuery.value = location.name
+  clearLocationSearch()
+}
+
+function clearDestination() {
+  destinationQuery.value = ''
+  selectedDestination.value = null
+  clearLocationSearch()
+  searchInputRef.value?.focus()
+}
+
+function handleClose() {
+  emit('update:show', false)
+}
+
+async function handleSubmit() {
+  if (!selectedDestination.value) return
+  if (quantityError.value) return
+
+  submitting.value = true
+  submitError.value = null
+
+  try {
+    await moveProduct(props.productId, {
+      from_location_id: props.fromLocationId,
+      to_location_id: selectedDestination.value.id,
+      quantity: moveQuantity.value,
+      notes: moveNotes.value || undefined,
+    })
+    emit('moved')
+    handleClose()
+  } catch (err: any) {
+    submitError.value = err.response?.data?.message || 'Failed to move product'
+  } finally {
+    submitting.value = false
+  }
+}
+
+// Reset state when modal opens
+watch(
+  () => props.show,
+  (visible) => {
+    if (visible) {
+      destinationQuery.value = ''
+      selectedDestination.value = null
+      moveQuantity.value = props.availableQuantity
+      moveNotes.value = ''
+      submitError.value = null
+      clearLocationSearch()
+    }
+  },
+)
+</script>
+
+<style scoped>
+.qmm-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5, 1.25rem);
+}
+
+/* Info section */
+.qmm-info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2, 0.5rem);
+  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
+  border: 1px solid var(--admin-border);
+  border-radius: 6px;
+  background: var(--admin-content-bg);
+}
+
+.qmm-info-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3, 0.75rem);
+}
+
+.qmm-info-label {
+  flex-shrink: 0;
+  width: 56px;
+  font-size: var(--text-xs, 0.75rem);
+  font-weight: 600;
+  color: var(--admin-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.qmm-info-value {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2, 0.5rem);
+  font-size: var(--text-sm, 0.875rem);
+  color: var(--admin-text-primary);
+  min-width: 0;
+}
+
+.qmm-info-value--bold {
+  font-weight: 600;
+}
+
+.qmm-available {
+  font-size: var(--text-xs, 0.75rem);
+  color: var(--admin-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Form fields */
+.qmm-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1, 0.25rem);
+}
+
+.qmm-label {
+  font-size: var(--text-sm, 0.875rem);
+  font-weight: 500;
+  color: var(--admin-text-primary);
+  line-height: 1.4;
+}
+
+.qmm-max {
+  font-weight: 400;
+  color: var(--admin-text-tertiary);
+  font-size: var(--text-xs, 0.75rem);
+}
+
+/* Search */
+.qmm-search-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.qmm-search-icon {
+  position: absolute;
+  left: var(--space-3, 0.75rem);
+  color: var(--admin-text-tertiary);
+  pointer-events: none;
+}
+
+.qmm-search-input {
+  width: 100%;
+  height: 44px;
+  padding: 0 var(--space-8, 2rem) 0 var(--space-8, 2rem);
+  border: 1px solid var(--admin-border);
+  border-radius: 6px;
+  background: var(--admin-card-bg);
+  color: var(--admin-text-primary);
+  font-size: var(--text-sm, 0.875rem);
+  outline: none;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.qmm-search-input::placeholder {
+  color: var(--admin-text-tertiary);
+}
+
+.qmm-search-input:focus {
+  border-color: var(--color-primary, #2563eb);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
+}
+
+.qmm-search-clear {
+  position: absolute;
+  right: var(--space-2, 0.5rem);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--admin-text-tertiary);
+  cursor: pointer;
+}
+
+.qmm-search-clear:hover {
+  color: var(--admin-text-primary);
+  background: var(--admin-content-bg);
+}
+
+.qmm-search-clear:focus-visible {
+  outline: 2px solid var(--admin-focus-ring, #2563eb);
+  outline-offset: 2px;
+}
+
+/* Selected destination chip */
+.qmm-selected-dest {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2, 0.5rem);
+  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
+  margin-top: var(--space-1, 0.25rem);
+  border: 1px solid var(--admin-border);
+  border-radius: 6px;
+  background: var(--admin-content-bg);
+}
+
+.qmm-selected-dest-name {
+  flex: 1;
+  font-size: var(--text-sm, 0.875rem);
+  font-weight: 500;
+  color: var(--admin-text-primary);
+}
+
+.qmm-selected-dest-remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--admin-text-tertiary);
+  cursor: pointer;
+}
+
+.qmm-selected-dest-remove:hover {
+  color: var(--color-error, #dc2626);
+  background: color-mix(in srgb, var(--color-error, #dc2626) 8%, transparent);
+}
+
+.qmm-selected-dest-remove:focus-visible {
+  outline: 2px solid var(--admin-focus-ring, #2563eb);
+  outline-offset: 2px;
+}
+
+/* Searching indicator */
+.qmm-searching {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2, 0.5rem);
+  padding: var(--space-2, 0.5rem) 0;
+  font-size: var(--text-sm, 0.875rem);
+  color: var(--admin-text-secondary);
+}
+
+.qmm-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--admin-border);
+  border-top-color: var(--color-primary, #2563eb);
+  border-radius: 50%;
+  animation: qmm-spin 0.6s linear infinite;
+}
+
+@keyframes qmm-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Results dropdown */
+.qmm-results {
+  list-style: none;
+  margin: var(--space-1, 0.25rem) 0 0;
+  padding: 0;
+  border: 1px solid var(--admin-border);
+  border-radius: 6px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.qmm-result-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3, 0.75rem);
+  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
+  min-height: 44px;
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+}
+
+.qmm-result-item:not(:last-child) {
+  border-bottom: 1px solid var(--admin-border);
+}
+
+.qmm-result-item:hover {
+  background: var(--admin-content-bg);
+}
+
+.qmm-result-item:focus-visible {
+  outline: 2px solid var(--admin-focus-ring, #2563eb);
+  outline-offset: -2px;
+}
+
+.qmm-result-name {
+  font-size: var(--text-sm, 0.875rem);
+  color: var(--admin-text-primary);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Quantity input */
+.qmm-quantity-input {
+  width: 100%;
+  height: 44px;
+  padding: 0 var(--space-3, 0.75rem);
+  border: 1px solid var(--admin-border);
+  border-radius: 6px;
+  background: var(--admin-card-bg);
+  color: var(--admin-text-primary);
+  font-size: var(--text-sm, 0.875rem);
+  font-family: inherit;
+  font-variant-numeric: tabular-nums;
+  outline: none;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.qmm-quantity-input:focus {
+  border-color: var(--color-primary, #2563eb);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
+}
+
+.qmm-quantity-input--error {
+  border-color: var(--color-error, #dc2626);
+}
+
+.qmm-quantity-input--error:focus {
+  border-color: var(--color-error, #dc2626);
+  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
+}
+
+/* Notes */
+.qmm-textarea {
+  width: 100%;
+  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
+  border: 1px solid var(--admin-border);
+  border-radius: 6px;
+  background: var(--admin-card-bg);
+  color: var(--admin-text-primary);
+  font-size: var(--text-sm, 0.875rem);
+  font-family: inherit;
+  resize: vertical;
+  outline: none;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.qmm-textarea::placeholder {
+  color: var(--admin-text-tertiary);
+}
+
+.qmm-textarea:focus {
+  border-color: var(--color-primary, #2563eb);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
+}
+
+/* Error */
+.qmm-error {
+  margin: 0;
+  font-size: var(--text-xs, 0.75rem);
+  color: var(--color-error, #dc2626);
+  line-height: 1.4;
+}
+</style>