@codingfactory/inventory-locator-client 0.1.0

package/src/components/labels/LabelBatchPrint.vue

@@ -0,0 +1,528 @@
+<template>
+  <div class="label-batch">
+    <div class="label-batch__header">
+      <h1 class="label-batch__title">Print Labels</h1>
+    </div>
+
+    <!-- Format selector -->
+    <div class="label-batch__format">
+      <InvSelect
+        v-model="selectedFormat"
+        :options="formatOptions"
+        label="Format"
+      />
+    </div>
+
+    <!-- Quick selectors -->
+    <InvCard title="Select locations to print" class="label-batch__selectors">
+      <div class="label-batch__quick-selectors">
+        <button
+          v-for="selector in quickSelectors"
+          :key="selector.label"
+          type="button"
+          class="label-batch__quick-btn"
+          @click="selector.action"
+        >
+          {{ selector.label }}
+        </button>
+      </div>
+
+      <!-- By building/type dropdowns -->
+      <div class="label-batch__filter-row">
+        <InvSelect
+          v-model="filterBuilding"
+          :options="buildingOptions"
+          placeholder="By Building"
+        />
+        <InvSelect
+          v-model="filterType"
+          :options="typeFilterOptions"
+          placeholder="By Type"
+        />
+      </div>
+    </InvCard>
+
+    <!-- Loading -->
+    <InvCard v-if="loadingLocations" loading />
+
+    <!-- Location list with checkboxes -->
+    <InvCard
+      v-else-if="groupedLocations.length > 0"
+      class="label-batch__locations"
+      no-padding
+    >
+      <div
+        v-for="group in groupedLocations"
+        :key="group.parentName"
+        class="label-batch__group"
+      >
+        <button
+          type="button"
+          class="label-batch__group-header"
+          @click="toggleGroup(group.parentName)"
+        >
+          <input
+            type="checkbox"
+            :checked="isGroupFullySelected(group)"
+            :indeterminate="isGroupPartiallySelected(group)"
+            class="label-batch__checkbox"
+            :aria-label="`Select all in ${group.parentName}`"
+            @click.stop="toggleGroupSelection(group)"
+          />
+          <span class="label-batch__group-name">{{ group.parentName }}</span>
+          <span class="label-batch__group-count">{{ group.locations.length }}</span>
+          <svg
+            class="label-batch__group-chevron"
+            :class="{ 'label-batch__group-chevron--collapsed': !expandedGroups.has(group.parentName) }"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            aria-hidden="true"
+          >
+            <path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+        </button>
+
+        <div
+          v-show="expandedGroups.has(group.parentName)"
+          class="label-batch__group-items"
+        >
+          <label
+            v-for="loc in group.locations"
+            :key="loc.id"
+            class="label-batch__location-row"
+          >
+            <input
+              type="checkbox"
+              :checked="selectedIds.has(loc.id)"
+              class="label-batch__checkbox"
+              @change="toggleLocation(loc.id)"
+            />
+            <LocationCodeBadge :code="loc.full_code" />
+            <span class="label-batch__location-name">{{ loc.name }}</span>
+            <InvBadge variant="muted" size="sm">{{ loc.type_label }}</InvBadge>
+          </label>
+        </div>
+      </div>
+    </InvCard>
+
+    <!-- Empty -->
+    <InvEmptyState
+      v-else-if="!loadingLocations"
+      title="No locations found"
+      description="Create locations first to generate labels."
+    />
+
+    <!-- Footer / print controls -->
+    <div v-if="selectedIds.size > 0" class="label-batch__footer">
+      <span class="label-batch__selected-count">
+        Selected: {{ selectedIds.size }} label{{ selectedIds.size !== 1 ? 's' : '' }}
+      </span>
+      <div class="label-batch__footer-actions">
+        <InvButton
+          variant="secondary"
+          size="md"
+          @click="handlePreview"
+        >
+          Preview All
+        </InvButton>
+        <InvButton
+          variant="primary"
+          size="md"
+          :loading="printing"
+          @click="handlePrint"
+        >
+          <template #icon-left>
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+              <rect x="4" y="1" width="8" height="5" rx="1" stroke="currentColor" stroke-width="1.5" />
+              <rect x="2" y="6" width="12" height="6" rx="1" stroke="currentColor" stroke-width="1.5" />
+              <rect x="5" y="10" width="6" height="5" rx="1" stroke="currentColor" stroke-width="1.5" />
+            </svg>
+          </template>
+          Print {{ selectedIds.size }} Labels
+        </InvButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, reactive } from 'vue'
+import { useLocations } from '../../composables/useLocations'
+import { useLabelPrinting } from '../../composables/useLabelPrinting'
+import type { Location, LabelFormat, LocationType } from '../../types'
+import InvCard from '../shared/InvCard.vue'
+import InvButton from '../shared/InvButton.vue'
+import InvSelect from '../shared/InvSelect.vue'
+import InvBadge from '../shared/InvBadge.vue'
+import InvEmptyState from '../shared/InvEmptyState.vue'
+import LocationCodeBadge from '../locations/LocationCodeBadge.vue'
+
+const { fetchRoots, locations } = useLocations()
+const { printBatch } = useLabelPrinting()
+
+const selectedFormat = ref<string>('standard')
+const selectedIds = reactive(new Set<number>())
+const expandedGroups = reactive(new Set<string>())
+const loadingLocations = ref(true)
+const printing = ref(false)
+const filterBuilding = ref<string>('')
+const filterType = ref<string>('')
+const allLeafLocations = ref<Location[]>([])
+
+const formatOptions = [
+  { value: 'standard', label: 'Standard' },
+  { value: 'small', label: 'Small' },
+  { value: 'pallet', label: 'Pallet' },
+]
+
+const typeFilterOptions = computed(() => {
+  const types = new Set(allLeafLocations.value.map(l => l.type))
+  const options = [{ value: '', label: 'All Types' }]
+  types.forEach(t => {
+    options.push({ value: t, label: t.charAt(0).toUpperCase() + t.slice(1) })
+  })
+  return options
+})
+
+const buildingOptions = computed(() => {
+  const buildings = new Set<string>()
+  allLeafLocations.value.forEach(l => {
+    if (l.path && l.path.length > 0) {
+      buildings.add(l.path[0].name)
+    }
+  })
+  const options = [{ value: '', label: 'All Buildings' }]
+  buildings.forEach(b => {
+    options.push({ value: b, label: b })
+  })
+  return options
+})
+
+interface LocationGroup {
+  parentName: string
+  locations: Location[]
+}
+
+const filteredLocations = computed(() => {
+  let locs = allLeafLocations.value
+  if (filterType.value) {
+    locs = locs.filter(l => l.type === filterType.value)
+  }
+  if (filterBuilding.value) {
+    locs = locs.filter(l =>
+      l.path && l.path.length > 0 && l.path[0].name === filterBuilding.value
+    )
+  }
+  return locs
+})
+
+const groupedLocations = computed<LocationGroup[]>(() => {
+  const groups = new Map<string, Location[]>()
+
+  for (const loc of filteredLocations.value) {
+    const parentName = loc.path && loc.path.length >= 2
+      ? loc.path[loc.path.length - 2].name
+      : loc.path && loc.path.length === 1
+        ? loc.path[0].name
+        : 'Ungrouped'
+    if (!groups.has(parentName)) {
+      groups.set(parentName, [])
+    }
+    groups.get(parentName)!.push(loc)
+  }
+
+  return Array.from(groups.entries())
+    .map(([parentName, locs]) => ({ parentName, locations: locs }))
+    .sort((a, b) => a.parentName.localeCompare(b.parentName))
+})
+
+const quickSelectors = computed(() => [
+  { label: 'All Shelves', action: () => selectByType('shelf') },
+  { label: 'All Racks', action: () => selectByType('rack') },
+  { label: 'All Bins', action: () => selectByType('bin') },
+  { label: 'Select All', action: selectAll },
+  { label: 'Deselect All', action: deselectAll },
+])
+
+onMounted(async () => {
+  loadingLocations.value = true
+  try {
+    await fetchRoots()
+    allLeafLocations.value = flattenLeafLocations(locations.value)
+    // Expand all groups by default
+    groupedLocations.value.forEach(g => expandedGroups.add(g.parentName))
+  } finally {
+    loadingLocations.value = false
+  }
+})
+
+function flattenLeafLocations(locs: Location[]): Location[] {
+  const result: Location[] = []
+  function walk(nodes: Location[], path: Location['path']) {
+    for (const node of nodes) {
+      const currentPath = [...(path || []), {
+        id: node.id,
+        name: node.name,
+        code: node.code,
+        full_code: node.full_code,
+        type: node.type,
+      }]
+      if (node.children && node.children.length > 0) {
+        walk(node.children, currentPath)
+      } else {
+        result.push({ ...node, path: currentPath })
+      }
+    }
+  }
+  walk(locs, [])
+  return result
+}
+
+function toggleGroup(name: string) {
+  if (expandedGroups.has(name)) {
+    expandedGroups.delete(name)
+  } else {
+    expandedGroups.add(name)
+  }
+}
+
+function toggleLocation(id: number) {
+  if (selectedIds.has(id)) {
+    selectedIds.delete(id)
+  } else {
+    selectedIds.add(id)
+  }
+}
+
+function isGroupFullySelected(group: LocationGroup): boolean {
+  return group.locations.every(l => selectedIds.has(l.id))
+}
+
+function isGroupPartiallySelected(group: LocationGroup): boolean {
+  const count = group.locations.filter(l => selectedIds.has(l.id)).length
+  return count > 0 && count < group.locations.length
+}
+
+function toggleGroupSelection(group: LocationGroup) {
+  if (isGroupFullySelected(group)) {
+    group.locations.forEach(l => selectedIds.delete(l.id))
+  } else {
+    group.locations.forEach(l => selectedIds.add(l.id))
+  }
+}
+
+function selectByType(type: LocationType) {
+  filteredLocations.value
+    .filter(l => l.type === type)
+    .forEach(l => selectedIds.add(l.id))
+}
+
+function selectAll() {
+  filteredLocations.value.forEach(l => selectedIds.add(l.id))
+}
+
+function deselectAll() {
+  selectedIds.clear()
+}
+
+async function handlePrint() {
+  if (selectedIds.size === 0) return
+  printing.value = true
+  try {
+    await printBatch(Array.from(selectedIds), selectedFormat.value as LabelFormat)
+  } finally {
+    printing.value = false
+  }
+}
+
+function handlePreview() {
+  // Preview is the same as print but without recording
+  handlePrint()
+}
+</script>
+
+<style scoped>
+.label-batch {
+  max-width: 800px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5, 1.25rem);
+}
+
+.label-batch__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.label-batch__title {
+  margin: 0;
+  font-size: var(--text-xl, 1.25rem);
+  font-weight: 700;
+  color: var(--admin-text-primary);
+}
+
+.label-batch__format {
+  max-width: 200px;
+}
+
+.label-batch__quick-selectors {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2, 0.5rem);
+  margin-bottom: var(--space-4, 1rem);
+}
+
+.label-batch__quick-btn {
+  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);
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease;
+}
+
+.label-batch__quick-btn:hover {
+  background: var(--admin-content-bg);
+  border-color: var(--admin-text-tertiary);
+}
+
+.label-batch__quick-btn:focus-visible {
+  outline: 2px solid var(--admin-focus-ring, #2563eb);
+  outline-offset: 2px;
+}
+
+.label-batch__filter-row {
+  display: flex;
+  gap: var(--space-3, 0.75rem);
+}
+
+.label-batch__filter-row > * {
+  flex: 1;
+}
+
+.label-batch__group {
+  border-bottom: 1px solid var(--admin-border);
+}
+
+.label-batch__group:last-child {
+  border-bottom: none;
+}
+
+.label-batch__group-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3, 0.75rem);
+  width: 100%;
+  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
+  border: none;
+  background: var(--admin-table-header-bg);
+  color: var(--admin-text-primary);
+  font-size: var(--text-sm, 0.875rem);
+  font-weight: 600;
+  cursor: pointer;
+  text-align: left;
+}
+
+.label-batch__group-header:hover {
+  background: var(--admin-content-bg);
+}
+
+.label-batch__group-header:focus-visible {
+  outline: 2px solid var(--admin-focus-ring, #2563eb);
+  outline-offset: -2px;
+}
+
+.label-batch__group-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.label-batch__group-count {
+  font-size: var(--text-xs, 0.75rem);
+  color: var(--admin-text-tertiary);
+  font-weight: 400;
+}
+
+.label-batch__group-chevron {
+  color: var(--admin-text-tertiary);
+  transition: transform 0.2s ease;
+  flex-shrink: 0;
+}
+
+.label-batch__group-chevron--collapsed {
+  transform: rotate(-90deg);
+}
+
+.label-batch__group-items {
+  padding: 0;
+}
+
+.label-batch__location-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3, 0.75rem);
+  padding: var(--space-2, 0.5rem) var(--space-4, 1rem) var(--space-2, 0.5rem) var(--space-8, 2rem);
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+  border-bottom: 1px solid var(--admin-border);
+  font-size: var(--text-sm, 0.875rem);
+}
+
+.label-batch__location-row:last-child {
+  border-bottom: none;
+}
+
+.label-batch__location-row:hover {
+  background: var(--admin-content-bg);
+}
+
+.label-batch__checkbox {
+  width: 18px;
+  height: 18px;
+  accent-color: var(--color-primary, #2563eb);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.label-batch__location-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--admin-text-primary);
+}
+
+.label-batch__footer {
+  position: sticky;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3, 0.75rem);
+  padding: var(--space-4, 1rem);
+  background: var(--admin-card-bg);
+  border: 1px solid var(--admin-border);
+  border-radius: 8px;
+  box-shadow: var(--shadow-md);
+}
+
+.label-batch__selected-count {
+  font-size: var(--text-sm, 0.875rem);
+  font-weight: 600;
+  color: var(--admin-text-primary);
+}
+
+.label-batch__footer-actions {
+  display: flex;
+  gap: var(--space-2, 0.5rem);
+}
+</style>