@codingfactory/inventory-locator-client 0.1.0

package/src/components/products/LocationProductAdd.vue

@@ -0,0 +1,637 @@
+<template>
+  <InvModal
+    :show="show"
+    title="Add Product to Location"
+    size="md"
+    initial-focus-selector=".lpa-search-input"
+    @update:show="handleClose"
+  >
+    <!-- Step 1: Search for product -->
+    <div v-if="step === 1" class="lpa-step">
+      <div class="lpa-search">
+        <label for="lpa-search-field" class="lpa-label">Search products</label>
+        <div class="lpa-search-wrapper">
+          <svg class="lpa-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="lpa-search-field"
+            ref="searchInputRef"
+            v-model="searchQuery"
+            type="search"
+            class="lpa-search-input"
+            placeholder="Search by name or SKU..."
+            autocomplete="off"
+            :aria-expanded="searchResults.length > 0"
+            aria-controls="lpa-search-results"
+            @input="handleSearch"
+          />
+          <button
+            v-if="searchQuery"
+            type="button"
+            class="lpa-search-clear"
+            aria-label="Clear search"
+            @click="clearSearch"
+          >
+            <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>
+      </div>
+
+      <div
+        v-if="searching"
+        class="lpa-loading"
+        role="status"
+        aria-live="polite"
+      >
+        <div class="lpa-spinner" aria-hidden="true" />
+        <span>Searching...</span>
+      </div>
+
+      <ul
+        v-else-if="searchResults.length > 0"
+        id="lpa-search-results"
+        class="lpa-results"
+        role="listbox"
+        aria-label="Search results"
+      >
+        <li
+          v-for="result in searchResults"
+          :key="result.id"
+          class="lpa-result-item"
+          role="option"
+          :aria-selected="false"
+          tabindex="0"
+          @click="selectProduct(result)"
+          @keydown.enter="selectProduct(result)"
+          @keydown.space.prevent="selectProduct(result)"
+        >
+          <div class="lpa-result-info">
+            <span class="lpa-result-name">{{ result.name }}</span>
+            <span v-if="result.sku" class="lpa-result-sku">{{ result.sku }}</span>
+          </div>
+          <svg class="lpa-result-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+            <path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+        </li>
+      </ul>
+
+      <div
+        v-else-if="searchQuery.length >= 2 && !searching"
+        class="lpa-no-results"
+        role="status"
+      >
+        <p class="lpa-no-results-text">No products found for "{{ searchQuery }}"</p>
+      </div>
+
+      <p v-else class="lpa-hint">
+        Type at least 2 characters to search.
+      </p>
+    </div>
+
+    <!-- Step 2: Set quantity + options -->
+    <div v-else class="lpa-step">
+      <button
+        type="button"
+        class="lpa-back-btn"
+        @click="goBackToSearch"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+          <path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+        Back to search
+      </button>
+
+      <div class="lpa-selected">
+        <span class="lpa-selected-label">Selected product</span>
+        <div class="lpa-selected-product">
+          <span class="lpa-selected-name">{{ selectedProduct?.name }}</span>
+          <span v-if="selectedProduct?.sku" class="lpa-selected-sku">{{ selectedProduct.sku }}</span>
+        </div>
+      </div>
+
+      <div class="lpa-form">
+        <InvInput
+          v-model="form.quantity"
+          label="Quantity"
+          type="number"
+          placeholder="1.00"
+          :error="formErrors.quantity"
+        />
+
+        <div class="lpa-checkbox-field">
+          <label class="lpa-checkbox-label">
+            <input
+              v-model="form.isPrimary"
+              type="checkbox"
+              class="lpa-checkbox"
+            />
+            Set as primary location
+          </label>
+        </div>
+
+        <div class="lpa-textarea-field">
+          <label for="lpa-notes" class="lpa-label">Notes (optional)</label>
+          <textarea
+            id="lpa-notes"
+            v-model="form.notes"
+            class="lpa-textarea"
+            placeholder="Optional notes about this placement..."
+            rows="3"
+          />
+        </div>
+      </div>
+
+      <p v-if="submitError" class="lpa-error" role="alert">{{ submitError }}</p>
+    </div>
+
+    <template #footer>
+      <InvButton variant="secondary" @click="handleClose">
+        Cancel
+      </InvButton>
+      <InvButton
+        v-if="step === 2"
+        variant="primary"
+        :loading="submitting"
+        :disabled="!canSubmit"
+        @click="handleSubmit"
+      >
+        Add Product
+      </InvButton>
+    </template>
+  </InvModal>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, nextTick } from 'vue'
+import type { LocationProduct } from '../../types'
+import { useLocationProducts } from '../../composables/useLocationProducts'
+import { getApiClient, apiUrl } from '../../api/client'
+import InvModal from '../shared/InvModal.vue'
+import InvInput from '../shared/InvInput.vue'
+import InvButton from '../shared/InvButton.vue'
+
+interface ProductSearchResult {
+  id: number | string
+  name: string
+  sku: string | null
+  thumbnail?: string | null
+}
+
+const props = defineProps<{
+  locationId: number
+  show: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:show': [value: boolean]
+  added: [lp: LocationProduct]
+}>()
+
+const { addProduct } = useLocationProducts()
+
+// Step management
+const step = ref<1 | 2>(1)
+
+// Search state
+const searchQuery = ref('')
+const searchResults = ref<ProductSearchResult[]>([])
+const searching = ref(false)
+const searchInputRef = ref<HTMLInputElement | null>(null)
+let searchDebounce: ReturnType<typeof setTimeout> | null = null
+
+// Selected product
+const selectedProduct = ref<ProductSearchResult | null>(null)
+
+// Form state
+const form = ref({
+  quantity: 1 as number,
+  isPrimary: false,
+  notes: '',
+})
+
+const formErrors = ref<{ quantity?: string }>({})
+const submitError = ref<string | null>(null)
+const submitting = ref(false)
+
+const canSubmit = computed(() => {
+  return (
+    selectedProduct.value !== null &&
+    form.value.quantity > 0 &&
+    !submitting.value
+  )
+})
+
+function handleSearch() {
+  const q = searchQuery.value.trim()
+
+  if (searchDebounce) clearTimeout(searchDebounce)
+
+  if (q.length < 2) {
+    searchResults.value = []
+    return
+  }
+
+  searchDebounce = setTimeout(async () => {
+    searching.value = true
+    try {
+      const response = await getApiClient().get(apiUrl('/products/search'), {
+        params: { q },
+      })
+      searchResults.value = response.data.data
+    } catch {
+      searchResults.value = []
+    } finally {
+      searching.value = false
+    }
+  }, 300)
+}
+
+function clearSearch() {
+  searchQuery.value = ''
+  searchResults.value = []
+  nextTick(() => {
+    searchInputRef.value?.focus()
+  })
+}
+
+function selectProduct(product: ProductSearchResult) {
+  selectedProduct.value = product
+  step.value = 2
+  formErrors.value = {}
+  submitError.value = null
+}
+
+function goBackToSearch() {
+  step.value = 1
+  selectedProduct.value = null
+  form.value = { quantity: 1, isPrimary: false, notes: '' }
+  formErrors.value = {}
+  submitError.value = null
+}
+
+function handleClose() {
+  emit('update:show', false)
+}
+
+async function handleSubmit() {
+  if (!selectedProduct.value) return
+
+  formErrors.value = {}
+  submitError.value = null
+
+  if (!form.value.quantity || form.value.quantity < 0.01) {
+    formErrors.value.quantity = 'Quantity must be at least 0.01'
+    return
+  }
+
+  submitting.value = true
+
+  try {
+    const result = await addProduct(props.locationId, {
+      product_id: selectedProduct.value.id,
+      quantity: form.value.quantity,
+      is_primary: form.value.isPrimary,
+      notes: form.value.notes || undefined,
+    })
+    emit('added', result)
+    handleClose()
+  } catch (err: any) {
+    submitError.value = err.response?.data?.message || 'Failed to add product'
+  } finally {
+    submitting.value = false
+  }
+}
+
+// Reset state when modal opens/closes
+watch(
+  () => props.show,
+  (visible) => {
+    if (visible) {
+      step.value = 1
+      searchQuery.value = ''
+      searchResults.value = []
+      selectedProduct.value = null
+      form.value = { quantity: 1, isPrimary: false, notes: '' }
+      formErrors.value = {}
+      submitError.value = null
+    } else {
+      if (searchDebounce) clearTimeout(searchDebounce)
+    }
+  },
+)
+</script>
+
+<style scoped>
+.lpa-step {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4, 1rem);
+}
+
+/* Search */
+.lpa-search {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1, 0.25rem);
+}
+
+.lpa-label {
+  font-size: var(--text-sm, 0.875rem);
+  font-weight: 500;
+  color: var(--admin-text-primary);
+  line-height: 1.4;
+}
+
+.lpa-search-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.lpa-search-icon {
+  position: absolute;
+  left: var(--space-3, 0.75rem);
+  color: var(--admin-text-tertiary);
+  pointer-events: none;
+}
+
+.lpa-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;
+}
+
+.lpa-search-input::placeholder {
+  color: var(--admin-text-tertiary);
+}
+
+.lpa-search-input:focus {
+  border-color: var(--color-primary, #2563eb);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
+}
+
+.lpa-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;
+}
+
+.lpa-search-clear:hover {
+  color: var(--admin-text-primary);
+  background: var(--admin-content-bg);
+}
+
+.lpa-search-clear:focus-visible {
+  outline: 2px solid var(--admin-focus-ring, #2563eb);
+  outline-offset: 2px;
+}
+
+/* Loading */
+.lpa-loading {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2, 0.5rem);
+  padding: var(--space-3, 0.75rem);
+  font-size: var(--text-sm, 0.875rem);
+  color: var(--admin-text-secondary);
+}
+
+.lpa-spinner {
+  width: 18px;
+  height: 18px;
+  border: 2px solid var(--admin-border);
+  border-top-color: var(--color-primary, #2563eb);
+  border-radius: 50%;
+  animation: lpa-spin 0.6s linear infinite;
+}
+
+@keyframes lpa-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Results */
+.lpa-results {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--admin-border);
+  border-radius: 6px;
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+.lpa-result-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3, 0.75rem);
+  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
+  min-height: 44px;
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+}
+
+.lpa-result-item:not(:last-child) {
+  border-bottom: 1px solid var(--admin-border);
+}
+
+.lpa-result-item:hover {
+  background: var(--admin-content-bg);
+}
+
+.lpa-result-item:focus-visible {
+  outline: 2px solid var(--admin-focus-ring, #2563eb);
+  outline-offset: -2px;
+}
+
+.lpa-result-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.lpa-result-name {
+  font-size: var(--text-sm, 0.875rem);
+  font-weight: 500;
+  color: var(--admin-text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.lpa-result-sku {
+  font-size: var(--text-xs, 0.75rem);
+  color: var(--admin-text-tertiary);
+}
+
+.lpa-result-arrow {
+  flex-shrink: 0;
+  color: var(--admin-text-tertiary);
+}
+
+.lpa-no-results {
+  padding: var(--space-4, 1rem);
+  text-align: center;
+}
+
+.lpa-no-results-text {
+  margin: 0;
+  font-size: var(--text-sm, 0.875rem);
+  color: var(--admin-text-tertiary);
+}
+
+.lpa-hint {
+  margin: 0;
+  font-size: var(--text-sm, 0.875rem);
+  color: var(--admin-text-tertiary);
+  text-align: center;
+  padding: var(--space-4, 1rem);
+}
+
+/* Back button */
+.lpa-back-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1, 0.25rem);
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--color-primary, #2563eb);
+  font-size: var(--text-sm, 0.875rem);
+  font-weight: 500;
+  cursor: pointer;
+  border-radius: 4px;
+  align-self: flex-start;
+}
+
+.lpa-back-btn:hover {
+  text-decoration: underline;
+}
+
+.lpa-back-btn:focus-visible {
+  outline: 2px solid var(--admin-focus-ring, #2563eb);
+  outline-offset: 2px;
+}
+
+/* Selected product display */
+.lpa-selected {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1, 0.25rem);
+  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
+  border: 1px solid var(--admin-border);
+  border-radius: 6px;
+  background: var(--admin-content-bg);
+}
+
+.lpa-selected-label {
+  font-size: var(--text-xs, 0.75rem);
+  font-weight: 500;
+  color: var(--admin-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.lpa-selected-product {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.lpa-selected-name {
+  font-size: var(--text-sm, 0.875rem);
+  font-weight: 600;
+  color: var(--admin-text-primary);
+}
+
+.lpa-selected-sku {
+  font-size: var(--text-xs, 0.75rem);
+  color: var(--admin-text-secondary);
+}
+
+/* Form fields */
+.lpa-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4, 1rem);
+}
+
+.lpa-checkbox-field {
+  display: flex;
+  align-items: center;
+}
+
+.lpa-checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2, 0.5rem);
+  font-size: var(--text-sm, 0.875rem);
+  color: var(--admin-text-primary);
+  cursor: pointer;
+}
+
+.lpa-checkbox {
+  width: 18px;
+  height: 18px;
+  accent-color: var(--color-primary, #2563eb);
+  cursor: pointer;
+}
+
+.lpa-textarea-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1, 0.25rem);
+}
+
+.lpa-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;
+}
+
+.lpa-textarea::placeholder {
+  color: var(--admin-text-tertiary);
+}
+
+.lpa-textarea:focus {
+  border-color: var(--color-primary, #2563eb);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
+}
+
+.lpa-error {
+  margin: 0;
+  font-size: var(--text-sm, 0.875rem);
+  color: var(--color-error, #dc2626);
+  line-height: 1.4;
+}
+</style>