@codingfactory/inventory-locator-client 0.1.0

package/src/components/locations/LocationTreeNode.vue

@@ -0,0 +1,280 @@
+<template>
+  <div
+    class="tree-node"
+    :data-testid="`tree-node-${location.full_code}`"
+  >
+    <div
+      class="tree-node__row"
+      :class="{
+        'tree-node__row--selected': selectedId === location.id,
+      }"
+      :style="{ paddingLeft: `${depth * 20}px` }"
+      role="treeitem"
+      :aria-expanded="hasChildren ? isExpanded : undefined"
+      :aria-selected="selectedId === location.id"
+      :aria-level="depth + 1"
+      tabindex="0"
+      @click="handleSelect"
+      @keydown="handleKeydown"
+    >
+      <!-- Expand/collapse chevron -->
+      <button
+        v-if="hasChildren"
+        type="button"
+        class="tree-node__toggle"
+        :aria-label="isExpanded ? `Collapse ${location.name}` : `Expand ${location.name}`"
+        tabindex="-1"
+        @click.stop="handleToggle"
+      >
+        <svg
+          v-if="childrenLoading"
+          class="tree-node__spinner"
+          width="14"
+          height="14"
+          viewBox="0 0 16 16"
+          fill="none"
+          aria-hidden="true"
+        >
+          <circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="2" opacity="0.25" />
+          <path d="M14 8A6 6 0 0 0 8 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+        </svg>
+        <svg
+          v-else
+          class="tree-node__chevron"
+          :class="{ 'tree-node__chevron--expanded': isExpanded }"
+          width="14"
+          height="14"
+          viewBox="0 0 16 16"
+          fill="none"
+          aria-hidden="true"
+        >
+          <path
+            d="M6 4L10 8L6 12"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </button>
+      <span v-else class="tree-node__toggle-spacer" aria-hidden="true" />
+
+      <!-- Type icon -->
+      <LocationTypeIcon :type="location.type" size="sm" />
+
+      <!-- Name -->
+      <span class="tree-node__name">{{ location.name }}</span>
+
+      <!-- Code badge -->
+      <LocationCodeBadge :code="location.full_code" truncate :max-segments="2" />
+
+      <!-- Product count -->
+      <span
+        v-if="location.product_count != null && location.product_count > 0"
+        class="tree-node__count"
+        :aria-label="`${location.product_count} products`"
+      >
+        {{ location.product_count }}
+      </span>
+    </div>
+
+    <!-- Recursive children -->
+    <div
+      v-if="isExpanded && loadedChildren.length > 0"
+      role="group"
+    >
+      <LocationTreeNode
+        v-for="child in loadedChildren"
+        :key="child.id"
+        :location="child"
+        :depth="depth + 1"
+        :selected-id="selectedId"
+        @select="(loc) => emit('select', loc)"
+        @toggle="(id) => emit('toggle', id)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import type { Location } from '../../types'
+import { useLocationStore } from '../../stores/locationStore'
+import { useLocations } from '../../composables/useLocations'
+import LocationTypeIcon from './LocationTypeIcon.vue'
+import LocationCodeBadge from './LocationCodeBadge.vue'
+
+const props = withDefaults(defineProps<{
+  location: Location
+  depth?: number
+  selectedId?: number | null
+}>(), {
+  depth: 0,
+  selectedId: null,
+})
+
+const emit = defineEmits<{
+  select: [location: Location]
+  toggle: [id: number]
+}>()
+
+const locationStore = useLocationStore()
+const { fetchChildren } = useLocations()
+
+const childrenLoading = ref(false)
+const loadedChildren = ref<Location[]>(props.location.children || [])
+
+const hasChildren = computed(() => {
+  if (props.location.children && props.location.children.length > 0) return true
+  if (props.location.children_count && props.location.children_count > 0) return true
+  return false
+})
+
+const isExpanded = computed(() => locationStore.isExpanded(props.location.id))
+
+watch(isExpanded, async (expanded) => {
+  if (expanded && loadedChildren.value.length === 0 && hasChildren.value) {
+    childrenLoading.value = true
+    try {
+      loadedChildren.value = await fetchChildren(props.location.id)
+    } catch {
+      // Error handled by composable
+    } finally {
+      childrenLoading.value = false
+    }
+  }
+})
+
+// Sync loaded children when location.children changes
+watch(
+  () => props.location.children,
+  (children) => {
+    if (children && children.length > 0) {
+      loadedChildren.value = children
+    }
+  },
+)
+
+function handleSelect() {
+  emit('select', props.location)
+}
+
+function handleToggle() {
+  locationStore.toggleExpand(props.location.id)
+  emit('toggle', props.location.id)
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  switch (event.key) {
+    case 'Enter':
+    case ' ':
+      event.preventDefault()
+      handleSelect()
+      break
+    case 'ArrowRight':
+      event.preventDefault()
+      if (hasChildren.value && !isExpanded.value) {
+        handleToggle()
+      }
+      break
+    case 'ArrowLeft':
+      event.preventDefault()
+      if (isExpanded.value) {
+        handleToggle()
+      }
+      break
+  }
+}
+</script>
+
+<style scoped>
+.tree-node__row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2, 0.5rem);
+  padding-top: var(--space-1, 0.25rem);
+  padding-bottom: var(--space-1, 0.25rem);
+  padding-right: var(--space-3, 0.75rem);
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background-color 0.1s ease;
+  user-select: none;
+  min-height: 36px;
+}
+
+.tree-node__row:hover {
+  background: var(--admin-table-row-hover);
+}
+
+.tree-node__row--selected {
+  background: var(--admin-sidebar-active-bg, color-mix(in srgb, var(--color-primary, #2563eb) 12%, transparent));
+}
+
+.tree-node__row--selected:hover {
+  background: var(--admin-sidebar-active-bg, color-mix(in srgb, var(--color-primary, #2563eb) 16%, transparent));
+}
+
+.tree-node__row:focus-visible {
+  outline: 2px solid var(--admin-focus-ring, #2563eb);
+  outline-offset: -2px;
+}
+
+.tree-node__toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--admin-text-tertiary);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: color 0.15s ease;
+}
+
+.tree-node__toggle:hover {
+  color: var(--admin-text-primary);
+}
+
+.tree-node__toggle-spacer {
+  display: block;
+  width: 20px;
+  flex-shrink: 0;
+}
+
+.tree-node__chevron {
+  transition: transform 0.2s ease;
+}
+
+.tree-node__chevron--expanded {
+  transform: rotate(90deg);
+}
+
+.tree-node__spinner {
+  animation: tree-node-spin 0.8s linear infinite;
+}
+
+@keyframes tree-node-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.tree-node__name {
+  font-size: var(--text-sm, 0.875rem);
+  color: var(--admin-text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+.tree-node__count {
+  font-size: var(--text-xs, 0.75rem);
+  color: var(--admin-text-tertiary);
+  flex-shrink: 0;
+  margin-left: auto;
+}
+</style>

package/src/components/locations/LocationTypeIcon.vue

@@ -0,0 +1,58 @@
+<template>
+  <svg
+    class="location-type-icon"
+    :class="[`location-type-icon--${size}`]"
+    :width="sizeMap[size]"
+    :height="sizeMap[size]"
+    :viewBox="icon.viewBox"
+    fill="none"
+    aria-hidden="true"
+  >
+    <path :d="icon.path" fill="currentColor" />
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { LocationType } from '../../types'
+import { getLocationIcon } from '../../utils/locationIcons'
+
+const props = withDefaults(defineProps<{
+  type: LocationType
+  size?: 'sm' | 'md' | 'lg'
+}>(), {
+  size: 'md',
+})
+
+const sizeMap: Record<string, number> = {
+  sm: 16,
+  md: 20,
+  lg: 24,
+}
+
+const icon = computed(() => getLocationIcon(props.type))
+</script>
+
+<style scoped>
+.location-type-icon {
+  color: currentColor;
+  flex-shrink: 0;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.location-type-icon--sm {
+  width: 16px;
+  height: 16px;
+}
+
+.location-type-icon--md {
+  width: 20px;
+  height: 20px;
+}
+
+.location-type-icon--lg {
+  width: 24px;
+  height: 24px;
+}
+</style>