@codingfactory/inventory-locator-client 0.1.0

package/src/components/products/LocationProductList.vue

@@ -0,0 +1,547 @@
+<template>
+  <InvCard :title="title" :loading="loading" no-padding>
+    <template #actions>
+      <InvButton size="sm" @click="emit('add-product')">
+        <template #icon-left>
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+            <path d="M8 3V13M3 8H13" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+          </svg>
+        </template>
+        Add Product
+      </InvButton>
+    </template>
+
+    <template v-if="!loading && products.length === 0">
+      <InvEmptyState
+        title="No products at this location"
+        description="Add products to track their inventory at this location."
+        action-label="Add Product"
+        @action="emit('add-product')"
+      />
+    </template>
+
+    <template v-else-if="!loading">
+      <InvTable
+        :columns="columns"
+        :data="products"
+        empty-message="No products at this location."
+      >
+        <template #cell-product_name="{ row }">
+          <div class="lpl-product-info">
+            <span class="lpl-product-name">{{ row.product_name }}</span>
+            <span v-if="row.product_sku" class="lpl-product-sku">{{ row.product_sku }}</span>
+          </div>
+        </template>
+
+        <template #cell-quantity="{ row }">
+          <div class="lpl-quantity-cell">
+            <template v-if="editingProductId === row.product_id">
+              <input
+                ref="quantityInputRef"
+                type="number"
+                class="lpl-quantity-input"
+                :value="editQuantity"
+                step="0.01"
+                min="0"
+                aria-label="Edit quantity"
+                @input="handleQuantityInput"
+                @keydown.enter="saveQuantity(row)"
+                @keydown.escape="cancelEdit"
+                @blur="saveQuantity(row)"
+              />
+            </template>
+            <template v-else>
+              <button
+                type="button"
+                class="lpl-quantity-display"
+                :aria-label="`Edit quantity for ${row.product_name}, currently ${formatQuantity(row.quantity)}`"
+                @click="startEdit(row)"
+              >
+                {{ formatQuantity(row.quantity) }}
+              </button>
+            </template>
+          </div>
+        </template>
+
+        <template #cell-is_primary="{ row }">
+          <button
+            type="button"
+            class="lpl-star-btn"
+            :class="{ 'lpl-star-btn--active': row.is_primary }"
+            :aria-label="row.is_primary ? `Unset ${row.product_name} primary location` : `Set ${row.product_name} as primary location`"
+            :aria-pressed="row.is_primary"
+            @click="togglePrimary(row)"
+          >
+            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
+              <path
+                d="M9 1.5L11.3 6.2L16.5 6.9L12.75 10.55L13.6 15.75L9 13.3L4.4 15.75L5.25 10.55L1.5 6.9L6.7 6.2L9 1.5Z"
+                :fill="row.is_primary ? 'currentColor' : 'none'"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+        </template>
+
+        <template #cell-actions="{ row }">
+          <div class="lpl-actions">
+            <button
+              type="button"
+              class="lpl-action-btn lpl-action-btn--move"
+              :aria-label="`Move ${row.product_name}`"
+              @click="emit('move-product', row)"
+            >
+              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
+                <path d="M3 9H15M15 9L11 5M15 9L11 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+              </svg>
+            </button>
+            <button
+              type="button"
+              class="lpl-action-btn lpl-action-btn--remove"
+              :aria-label="`Remove ${row.product_name}`"
+              @click="showRemoveConfirmation(row)"
+            >
+              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
+                <path d="M2.25 4.5H15.75M6 4.5V3C6 2.17 6.67 1.5 7.5 1.5H10.5C11.33 1.5 12 2.17 12 3V4.5M14.25 4.5V15C14.25 15.83 13.58 16.5 12.75 16.5H5.25C4.42 16.5 3.75 15.83 3.75 15V4.5H14.25Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+              </svg>
+            </button>
+          </div>
+        </template>
+      </InvTable>
+
+      <div v-if="hasMore" class="lpl-load-more">
+        <InvButton variant="ghost" size="sm" :loading="loadingMore" @click="loadMore">
+          Load more
+        </InvButton>
+      </div>
+    </template>
+  </InvCard>
+
+  <!-- Remove confirmation dialog -->
+  <InvModal
+    :show="removeConfirm.show"
+    :title="`Remove ${removeConfirm.product?.product_name ?? 'Product'}`"
+    size="sm"
+    @update:show="closeRemoveConfirmation"
+  >
+    <div class="lpl-remove-dialog">
+      <p class="lpl-remove-message">
+        Remove
+        <strong>{{ removeConfirm.product?.product_name }}</strong>
+        from this location?
+      </p>
+
+      <div class="lpl-remove-quantity">
+        <label for="remove-qty-toggle" class="lpl-remove-label">
+          <input
+            id="remove-qty-toggle"
+            v-model="removeConfirm.partial"
+            type="checkbox"
+            class="lpl-remove-checkbox"
+          />
+          Remove partial quantity only
+        </label>
+
+        <div v-if="removeConfirm.partial" class="lpl-remove-qty-input">
+          <label for="remove-qty-amount" class="lpl-remove-qty-label">
+            Quantity to remove (max {{ formatQuantity(removeConfirm.product?.quantity ?? 0) }})
+          </label>
+          <input
+            id="remove-qty-amount"
+            v-model.number="removeConfirm.quantity"
+            type="number"
+            class="lpl-quantity-input lpl-quantity-input--wide"
+            step="0.01"
+            min="0.01"
+            :max="removeConfirm.product?.quantity"
+          />
+        </div>
+      </div>
+
+      <p v-if="removeError" class="lpl-remove-error" role="alert">{{ removeError }}</p>
+    </div>
+
+    <template #footer>
+      <InvButton variant="secondary" @click="closeRemoveConfirmation">
+        Cancel
+      </InvButton>
+      <InvButton
+        variant="danger"
+        :loading="removing"
+        :disabled="removeConfirm.partial && (!removeConfirm.quantity || removeConfirm.quantity <= 0)"
+        @click="confirmRemove"
+      >
+        Remove
+      </InvButton>
+    </template>
+  </InvModal>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, nextTick, watch } from 'vue'
+import type { LocationProduct, Column } from '../../types'
+import { useLocationProducts } from '../../composables/useLocationProducts'
+import InvCard from '../shared/InvCard.vue'
+import InvTable from '../shared/InvTable.vue'
+import InvButton from '../shared/InvButton.vue'
+import InvEmptyState from '../shared/InvEmptyState.vue'
+import InvModal from '../shared/InvModal.vue'
+
+const props = defineProps<{
+  locationId: number
+}>()
+
+const emit = defineEmits<{
+  'add-product': []
+  'move-product': [lp: LocationProduct]
+  'remove-product': [lp: LocationProduct]
+}>()
+
+const { products, loading, error, fetchProducts, updateProduct, removeProduct } = useLocationProducts()
+
+const title = computed(() => 'Products')
+
+const columns: Column[] = [
+  { key: 'product_name', label: 'Product', sortable: false },
+  { key: 'quantity', label: 'Qty', sortable: false, width: '100px', align: 'right' },
+  { key: 'is_primary', label: 'Primary', sortable: false, width: '80px', align: 'center' },
+  { key: 'actions', label: 'Actions', sortable: false, width: '100px', align: 'center' },
+]
+
+// Pagination
+const page = ref(1)
+const perPage = 50
+const hasMore = ref(false)
+const loadingMore = ref(false)
+
+// Inline quantity editing
+const editingProductId = ref<number | string | null>(null)
+const editQuantity = ref<number>(0)
+const originalQuantity = ref<number>(0)
+const quantityInputRef = ref<HTMLInputElement | null>(null)
+
+// Remove confirmation
+const removeConfirm = ref<{
+  show: boolean
+  product: LocationProduct | null
+  partial: boolean
+  quantity: number
+}>({
+  show: false,
+  product: null,
+  partial: false,
+  quantity: 0,
+})
+const removing = ref(false)
+const removeError = ref<string | null>(null)
+
+function formatQuantity(qty: number): string {
+  return Number.isInteger(qty) ? qty.toFixed(0) : qty.toFixed(2)
+}
+
+function startEdit(row: LocationProduct) {
+  editingProductId.value = row.product_id
+  editQuantity.value = row.quantity
+  originalQuantity.value = row.quantity
+  nextTick(() => {
+    if (quantityInputRef.value) {
+      quantityInputRef.value.focus()
+      quantityInputRef.value.select()
+    }
+  })
+}
+
+function handleQuantityInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  editQuantity.value = target.valueAsNumber
+}
+
+async function saveQuantity(row: LocationProduct) {
+  const newQty = editQuantity.value
+  editingProductId.value = null
+
+  if (isNaN(newQty) || newQty === originalQuantity.value) {
+    return
+  }
+
+  try {
+    await updateProduct(props.locationId, row.product_id, { quantity: newQty })
+  } catch {
+    // Revert on failure - re-fetch products
+    await fetchProducts(props.locationId)
+  }
+}
+
+function cancelEdit() {
+  editingProductId.value = null
+}
+
+async function togglePrimary(row: LocationProduct) {
+  try {
+    await updateProduct(props.locationId, row.product_id, { is_primary: !row.is_primary })
+  } catch {
+    // error already set by composable
+  }
+}
+
+function showRemoveConfirmation(row: LocationProduct) {
+  removeConfirm.value = {
+    show: true,
+    product: row,
+    partial: false,
+    quantity: row.quantity,
+  }
+  removeError.value = null
+}
+
+function closeRemoveConfirmation() {
+  removeConfirm.value = {
+    show: false,
+    product: null,
+    partial: false,
+    quantity: 0,
+  }
+  removeError.value = null
+}
+
+async function confirmRemove() {
+  const product = removeConfirm.value.product
+  if (!product) return
+
+  removing.value = true
+  removeError.value = null
+
+  try {
+    const quantity = removeConfirm.value.partial ? removeConfirm.value.quantity : undefined
+    await removeProduct(props.locationId, product.product_id, quantity)
+    emit('remove-product', product)
+    closeRemoveConfirmation()
+  } catch (err: any) {
+    removeError.value = err.response?.data?.message || 'Failed to remove product'
+  } finally {
+    removing.value = false
+  }
+}
+
+async function loadMore() {
+  loadingMore.value = true
+  page.value += 1
+  // In practice this would pass page param; for now fetchProducts loads all
+  loadingMore.value = false
+}
+
+// Initial load
+watch(
+  () => props.locationId,
+  (id) => {
+    if (id) {
+      page.value = 1
+      fetchProducts(id)
+    }
+  },
+  { immediate: true },
+)
+</script>
+
+<style scoped>
+.lpl-product-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.lpl-product-name {
+  font-weight: 500;
+  color: var(--admin-text-primary);
+  line-height: 1.3;
+}
+
+.lpl-product-sku {
+  font-size: var(--text-xs, 0.75rem);
+  color: var(--admin-text-tertiary);
+  line-height: 1.3;
+}
+
+.lpl-quantity-cell {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.lpl-quantity-display {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  min-width: 56px;
+  min-height: 32px;
+  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--admin-text-primary);
+  font-size: var(--text-sm, 0.875rem);
+  font-family: inherit;
+  cursor: pointer;
+  transition: border-color 0.15s ease, background-color 0.15s ease;
+}
+
+.lpl-quantity-display:hover {
+  border-color: var(--admin-border);
+  background: var(--admin-content-bg);
+}
+
+.lpl-quantity-display:focus-visible {
+  outline: 2px solid var(--admin-focus-ring, #2563eb);
+  outline-offset: 2px;
+}
+
+.lpl-quantity-input {
+  width: 80px;
+  height: 32px;
+  padding: 0 var(--space-2, 0.5rem);
+  border: 1px solid var(--color-primary, #2563eb);
+  border-radius: 4px;
+  background: var(--admin-card-bg);
+  color: var(--admin-text-primary);
+  font-size: var(--text-sm, 0.875rem);
+  font-family: inherit;
+  text-align: right;
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
+}
+
+.lpl-quantity-input--wide {
+  width: 100%;
+  height: 44px;
+}
+
+.lpl-star-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--admin-text-tertiary);
+  cursor: pointer;
+  transition: color 0.15s ease, background-color 0.15s ease;
+}
+
+.lpl-star-btn:hover {
+  background: var(--admin-content-bg);
+  color: var(--color-warning, #d97706);
+}
+
+.lpl-star-btn--active {
+  color: var(--color-warning, #d97706);
+}
+
+.lpl-star-btn:focus-visible {
+  outline: 2px solid var(--admin-focus-ring, #2563eb);
+  outline-offset: 2px;
+}
+
+.lpl-actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-1, 0.25rem);
+}
+
+.lpl-action-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--admin-text-secondary);
+  cursor: pointer;
+  transition: color 0.15s ease, background-color 0.15s ease;
+}
+
+.lpl-action-btn:hover {
+  background: var(--admin-content-bg);
+}
+
+.lpl-action-btn--move:hover {
+  color: var(--color-primary, #2563eb);
+}
+
+.lpl-action-btn--remove:hover {
+  color: var(--color-error, #dc2626);
+}
+
+.lpl-action-btn:focus-visible {
+  outline: 2px solid var(--admin-focus-ring, #2563eb);
+  outline-offset: 2px;
+}
+
+.lpl-load-more {
+  display: flex;
+  justify-content: center;
+  padding: var(--space-3, 0.75rem);
+  border-top: 1px solid var(--admin-border);
+}
+
+/* Remove confirmation dialog */
+.lpl-remove-dialog {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4, 1rem);
+}
+
+.lpl-remove-message {
+  margin: 0;
+  font-size: var(--text-sm, 0.875rem);
+  color: var(--admin-text-primary);
+  line-height: 1.5;
+}
+
+.lpl-remove-quantity {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3, 0.75rem);
+}
+
+.lpl-remove-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;
+}
+
+.lpl-remove-checkbox {
+  width: 18px;
+  height: 18px;
+  accent-color: var(--color-primary, #2563eb);
+  cursor: pointer;
+}
+
+.lpl-remove-qty-input {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1, 0.25rem);
+}
+
+.lpl-remove-qty-label {
+  font-size: var(--text-xs, 0.75rem);
+  color: var(--admin-text-secondary);
+}
+
+.lpl-remove-error {
+  margin: 0;
+  font-size: var(--text-sm, 0.875rem);
+  color: var(--color-error, #dc2626);
+  line-height: 1.4;
+}
+</style>