@morscherlab/mint-sdk 1.0.0-rc.4 → 1.0.0-rc.6

package/src/components/ReagentList.vue

@@ -4,6 +4,16 @@ import { ref, computed } from 'vue'
 import type { ReagentColumn, Reagent } from '../types'
 import { useSortedItems } from '../composables/useSortedItems'
 import { useTextSearch } from '../composables/useTextSearch'
+import {
+  REAGENT_COLUMN_LABELS as columnLabels,
+  formatReagentExpiryDate as formatExpiryDate,
+  getReagentColumnValue,
+  getReagentRowClasses,
+  getReagentStockFillClass as getStockFillClass,
+  getReagentStockLevel as getStockLevel,
+  isReagentExpired as isExpired,
+  isReagentExpiringSoon as isExpiringSoon,
+} from './ReagentList.presentation'
 
 interface Props {
   modelValue?: Reagent[]
@@ -40,18 +50,6 @@ const sortDirection = ref<'asc' | 'desc'>('asc')
 const draggedId = ref<string | null>(null)
 const dragOverId = ref<string | null>(null)
 
-// Column configuration
-const columnLabels: Record<ReagentColumn, string> = {
-  name: 'Name',
-  catalog: 'Catalog #',
-  lot: 'Lot #',
-  expiry: 'Expiry',
-  storage: 'Storage',
-  location: 'Location',
-  stock: 'Stock',
-  supplier: 'Supplier',
-}
-
 const reagentSearch = useTextSearch({
   items: () => props.modelValue || [],
   query: searchQuery,
@@ -76,77 +74,16 @@ const sortedReagents = useSortedItems<Reagent, ReagentColumn>({
   items: reagentSearch.filteredItems,
   sort: reagentSort,
   caseSensitive: false,
-  getValue: (reagent, column) => getColumnValue(reagent, column),
+  getValue: (reagent, column) => getReagentColumnValue(reagent, column),
 })
 const filteredReagents = sortedReagents.sortedItems
 
-function getColumnValue(reagent: Reagent, column: ReagentColumn): unknown {
-  switch (column) {
-    case 'name':
-      return reagent.name
-    case 'catalog':
-      return reagent.catalogNumber
-    case 'lot':
-      return reagent.lotNumber
-    case 'expiry':
-      return reagent.expiryDate ? new Date(reagent.expiryDate).getTime() : null
-    case 'storage':
-      return reagent.storageCondition
-    case 'location':
-      return reagent.location
-    case 'stock':
-      return reagent.stockLevel
-    case 'supplier':
-      return reagent.supplier
-    default:
-      return null
-  }
-}
-
-// Helpers
-function isExpired(reagent: Reagent): boolean {
-  if (!reagent.expiryDate) return false
-  const expiry = new Date(reagent.expiryDate)
-  return expiry < new Date()
-}
-
-function isExpiringSoon(reagent: Reagent, daysThreshold = 30): boolean {
-  if (!reagent.expiryDate) return false
-  const expiry = new Date(reagent.expiryDate)
-  const now = new Date()
-  const daysUntilExpiry = (expiry.getTime() - now.getTime()) / (1000 * 60 * 60 * 24)
-  return daysUntilExpiry > 0 && daysUntilExpiry <= daysThreshold
-}
-
-function isLowStock(reagent: Reagent): boolean {
-  if (reagent.stockLevel === undefined) return false
-  return reagent.stockLevel <= props.lowStockThreshold
-}
-
-function formatExpiryDate(date: Date | string | undefined): string {
-  if (!date) return '-'
-  const d = new Date(date)
-  return d.toLocaleDateString('en-US', { year: 'numeric', month: 'short' })
-}
-
-function getStockLevel(reagent: Reagent): number {
-  return reagent.stockLevel ?? 0
-}
-
-function getStockFillClass(level: number): string {
-  if (level >= 50) return 'mint-reagent-list__stock-fill--good'
-  if (level >= 20) return 'mint-reagent-list__stock-fill--warning'
-  return 'mint-reagent-list__stock-fill--low'
-}
-
 function getRowClass(reagent: Reagent): string[] {
-  const classes: string[] = ['mint-reagent-list__row']
-  if (isExpired(reagent)) classes.push('mint-reagent-list__row--expired')
-  else if (isExpiringSoon(reagent)) classes.push('mint-reagent-list__row--expiring-soon')
-  if (isLowStock(reagent)) classes.push('mint-reagent-list__row--low-stock')
-  if (draggedId.value === reagent.id) classes.push('mint-reagent-list__row--dragging')
-  if (dragOverId.value === reagent.id) classes.push('mint-reagent-list__row--drag-over')
-  return classes
+  return getReagentRowClasses(reagent, {
+    lowStockThreshold: props.lowStockThreshold,
+    draggedId: draggedId.value,
+    dragOverId: dragOverId.value,
+  })
 }
 
 // Actions

package/src/components/SampleSelector.colors.ts

@@ -0,0 +1,43 @@
+import { DEFAULT_COLORS } from '../composables/useAutoGroup'
+import type { SampleGroup } from '../types'
+
+export type ColorEdit =
+  | { kind: 'single'; name: string }
+  | { kind: 'family'; names: string[] }
+
+export const DEFAULT_COLOR_PICKER_SEED = '#3B82F6'
+
+export function applySampleGroupColorEdit(
+  groups: SampleGroup[],
+  edit: ColorEdit,
+  color: string,
+): SampleGroup[] {
+  const targets = edit.kind === 'family' ? new Set(edit.names) : new Set([edit.name])
+  return groups.map(group =>
+    targets.has(group.name) ? { ...group, color } : group,
+  )
+}
+
+export function getSampleGroupColorEditSeed(
+  edit: ColorEdit | null,
+  getGroupColor: (groupName: string) => string,
+): string {
+  if (!edit) return DEFAULT_COLOR_PICKER_SEED
+  return getGroupColor(edit.kind === 'family' ? edit.names[0] : edit.name)
+}
+
+export function pickUnusedSampleGroupColor(groups: SampleGroup[]): string {
+  const usedColors = new Set(groups.map(group => group.color))
+  return DEFAULT_COLORS.find(color => !usedColors.has(color)) || DEFAULT_COLORS[0]
+}
+
+export function createSampleGroup(name: string, existingGroups: SampleGroup[]): SampleGroup | null {
+  const trimmedName = name.trim()
+  if (!trimmedName) return null
+
+  return {
+    name: trimmedName,
+    color: pickUnusedSampleGroupColor(existingGroups),
+    samples: [],
+  }
+}

package/src/components/SampleSelector.drag.ts

@@ -0,0 +1,164 @@
+import { ref } from 'vue'
+import type { SampleGroup } from '../types'
+import {
+  detectSampleGroupSeparator,
+  getSampleGroupMajorPrefix,
+  moveSampleToGroup,
+  reorderSampleGroup,
+  reorderSampleMajorGroup,
+  type GroupDragKind,
+  type GroupReorderPosition,
+} from './SampleSelector.groups'
+
+interface MutableSampleGroups {
+  value: SampleGroup[]
+}
+
+export function useSampleSelectorDrag(groups: MutableSampleGroups) {
+  const draggingSample = ref<string | null>(null)
+  const dragSourceGroup = ref<string | null>(null)
+  const dragOverGroup = ref<string | null>(null)
+
+  const draggingGroup = ref<string | null>(null)
+  const draggingGroupKind = ref<GroupDragKind | null>(null)
+  const reorderTarget = ref<string | null>(null)
+  const reorderPosition = ref<GroupReorderPosition | null>(null)
+
+  function handleDragStart(sample: string, sourceGroup: string | null, event: DragEvent) {
+    draggingSample.value = sample
+    dragSourceGroup.value = sourceGroup
+    if (event.dataTransfer) {
+      event.dataTransfer.effectAllowed = 'move'
+      event.dataTransfer.setData('text/plain', sample)
+    }
+  }
+
+  function resetDragState() {
+    draggingSample.value = null
+    dragSourceGroup.value = null
+    dragOverGroup.value = null
+  }
+
+  function handleDragEnd() {
+    resetDragState()
+  }
+
+  function handleDragOver(groupName: string, event: DragEvent) {
+    // Only accept this drop target when a sample is being dragged; group drags are handled separately.
+    if (!draggingSample.value) return
+    event.preventDefault()
+    if (event.dataTransfer) {
+      event.dataTransfer.dropEffect = 'move'
+    }
+    dragOverGroup.value = groupName
+  }
+
+  function handleDragLeave() {
+    dragOverGroup.value = null
+  }
+
+  function handleDrop(targetGroupName: string, event: DragEvent) {
+    if (!draggingSample.value) return
+    event.preventDefault()
+
+    const sample = draggingSample.value
+    const sourceGroup = dragSourceGroup.value
+
+    if (sourceGroup === targetGroupName) {
+      resetDragState()
+      return
+    }
+
+    groups.value = moveSampleToGroup(groups.value, sample, sourceGroup, targetGroupName)
+    resetDragState()
+  }
+
+  function handleGroupDragStart(name: string, kind: GroupDragKind, event: DragEvent) {
+    draggingGroup.value = name
+    draggingGroupKind.value = kind
+    if (event.dataTransfer) {
+      event.dataTransfer.effectAllowed = 'move'
+      event.dataTransfer.setData('text/plain', `mint-group:${name}`)
+    }
+  }
+
+  function handleGroupDragEnd() {
+    draggingGroup.value = null
+    draggingGroupKind.value = null
+    reorderTarget.value = null
+    reorderPosition.value = null
+  }
+
+  function handleGroupDragOver(name: string, kind: GroupDragKind, event: DragEvent) {
+    if (!draggingGroup.value || draggingGroupKind.value !== kind) return
+    if (draggingGroup.value === name) return
+
+    // Sub-group reorder is restricted to siblings under the same major prefix;
+    // crossing majors would silently rename the group, which is too magical.
+    if (kind === 'sub') {
+      const separator = detectSampleGroupSeparator(groups.value)
+      if (
+        getSampleGroupMajorPrefix(draggingGroup.value, separator) !==
+        getSampleGroupMajorPrefix(name, separator)
+      ) return
+    }
+
+    event.preventDefault()
+    if (event.dataTransfer) event.dataTransfer.dropEffect = 'move'
+
+    const rect = (event.currentTarget as HTMLElement).getBoundingClientRect()
+    reorderTarget.value = name
+    reorderPosition.value = event.clientY < rect.top + rect.height / 2 ? 'before' : 'after'
+  }
+
+  function handleGroupDragLeave(event: DragEvent) {
+    const cur = event.currentTarget as HTMLElement
+    const rel = event.relatedTarget as Node | null
+    if (rel && cur.contains(rel)) return
+    reorderTarget.value = null
+    reorderPosition.value = null
+  }
+
+  function handleGroupDrop(name: string, kind: GroupDragKind, event: DragEvent) {
+    if (!draggingGroup.value || draggingGroupKind.value !== kind) {
+      handleGroupDragEnd()
+      return
+    }
+    const position = reorderPosition.value
+    if (!position || draggingGroup.value === name) {
+      handleGroupDragEnd()
+      return
+    }
+
+    event.preventDefault()
+
+    if (kind === 'major') {
+      const nextGroups = reorderSampleMajorGroup(groups.value, draggingGroup.value, name, position)
+      if (nextGroups !== groups.value) groups.value = nextGroups
+    } else {
+      const nextGroups = reorderSampleGroup(groups.value, draggingGroup.value, name, position)
+      if (nextGroups !== groups.value) groups.value = nextGroups
+    }
+
+    handleGroupDragEnd()
+  }
+
+  return {
+    draggingSample,
+    dragOverGroup,
+    draggingGroup,
+    draggingGroupKind,
+    reorderTarget,
+    reorderPosition,
+    handleDragStart,
+    handleDragEnd,
+    handleDragOver,
+    handleDragLeave,
+    handleDrop,
+    handleGroupDragStart,
+    handleGroupDragEnd,
+    handleGroupDragOver,
+    handleGroupDragLeave,
+    handleGroupDrop,
+  }
+}

package/src/components/SampleSelector.groups.ts

@@ -0,0 +1,109 @@
+import type { SampleGroup } from '../types'
+
+export type GroupDragKind = 'major' | 'sub' | 'flat'
+export type GroupReorderPosition = 'before' | 'after'
+
+export function detectSampleGroupSeparator(groups: SampleGroup[]): string {
+  return groups.some(group => group.name.includes('/')) ? '/' : '_'
+}
+
+export function getSampleGroupMajorPrefix(groupName: string, separator: string): string {
+  const parts = groupName.split(separator)
+  return parts.length > 1 ? parts[0] : groupName
+}
+
+export function moveSampleToGroup(
+  groups: SampleGroup[],
+  sample: string,
+  sourceGroup: string | null,
+  targetGroup: string,
+): SampleGroup[] {
+  if (sourceGroup === targetGroup) return groups
+
+  return groups.map(group => {
+    if (sourceGroup && group.name === sourceGroup) {
+      return { ...group, samples: group.samples.filter(item => item !== sample) }
+    }
+    if (group.name === targetGroup && !group.samples.includes(sample)) {
+      return { ...group, samples: [...group.samples, sample] }
+    }
+    return group
+  })
+}
+
+export function removeSampleGroup(groups: SampleGroup[], groupName: string): SampleGroup[] {
+  return groups.filter(group => group.name !== groupName)
+}
+
+export function removeSampleMajorGroup(
+  groups: SampleGroup[],
+  majorGroup: { subGroups: Array<{ name: string }> },
+): SampleGroup[] {
+  const groupNames = new Set(majorGroup.subGroups.map(group => group.name))
+  return groups.filter(group => !groupNames.has(group.name))
+}
+
+export function removeSampleFromGroup(
+  groups: SampleGroup[],
+  sample: string,
+  groupName: string,
+): SampleGroup[] {
+  return groups.map(group =>
+    group.name === groupName
+      ? { ...group, samples: group.samples.filter(item => item !== sample) }
+      : group,
+  )
+}
+
+export function reorderSampleGroup(
+  groups: SampleGroup[],
+  source: string,
+  target: string,
+  position: GroupReorderPosition,
+): SampleGroup[] {
+  if (source === target) return groups
+
+  const nextGroups = [...groups]
+  const sourceIndex = nextGroups.findIndex(group => group.name === source)
+  if (sourceIndex === -1) return groups
+
+  const [item] = nextGroups.splice(sourceIndex, 1)
+  const targetIndex = nextGroups.findIndex(group => group.name === target)
+  if (targetIndex === -1) return groups
+
+  nextGroups.splice(position === 'before' ? targetIndex : targetIndex + 1, 0, item)
+  return nextGroups
+}
+
+export function reorderSampleMajorGroup(
+  groups: SampleGroup[],
+  source: string,
+  target: string,
+  position: GroupReorderPosition,
+): SampleGroup[] {
+  if (source === target) return groups
+
+  const separator = detectSampleGroupSeparator(groups)
+  const isSource = (group: SampleGroup) => getSampleGroupMajorPrefix(group.name, separator) === source
+  const isTarget = (group: SampleGroup) => getSampleGroupMajorPrefix(group.name, separator) === target
+
+  const sourceGroups = groups.filter(isSource)
+  if (sourceGroups.length === 0) return groups
+
+  const remainingGroups = groups.filter(group => !isSource(group))
+  let firstTargetIndex = -1
+  let lastTargetIndex = -1
+
+  remainingGroups.forEach((group, index) => {
+    if (isTarget(group)) {
+      if (firstTargetIndex === -1) firstTargetIndex = index
+      lastTargetIndex = index
+    }
+  })
+
+  if (firstTargetIndex === -1) return groups
+
+  const insertIndex = position === 'before' ? firstTargetIndex : lastTargetIndex + 1
+  remainingGroups.splice(insertIndex, 0, ...sourceGroups)
+  return remainingGroups
+}

package/src/components/SampleSelector.selection.ts

@@ -0,0 +1,103 @@
+import type { ComputedRef } from 'vue'
+import { useListSelection } from '../composables/useListSelection'
+import type { SampleMajorGroup } from '../composables/useSampleGroups'
+
+interface SampleGroupSelectionSource {
+  samples: string[]
+}
+
+export interface UseSampleSelectorSelectionOptions {
+  selected: () => string[]
+  samples: () => string[]
+  findGroup: (groupName: string) => SampleGroupSelectionSource | undefined
+  emitSelected: (samples: string[]) => void
+}
+
+export interface UseSampleSelectorSelectionReturn {
+  isAllSelected: ComputedRef<boolean>
+  toggleSelectAll: () => void
+  toggleSample: (sample: string) => void
+  toggleGroupSamples: (groupName: string) => void
+  toggleMajorGroupSamples: (majorGroup: SampleMajorGroup) => void
+  isFullySelected: (samples: string[]) => boolean
+  isPartiallySelected: (samples: string[]) => boolean
+  isGroupFullySelected: (groupName: string) => boolean
+  isGroupPartiallySelected: (groupName: string) => boolean
+  isMajorGroupFullySelected: (majorGroup: SampleMajorGroup) => boolean
+  isMajorGroupPartiallySelected: (majorGroup: SampleMajorGroup) => boolean
+}
+
+export function useSampleSelectorSelection(
+  options: UseSampleSelectorSelectionOptions,
+): UseSampleSelectorSelectionReturn {
+  const sampleSelection = useListSelection({
+    selected: options.selected,
+    items: options.samples,
+  })
+
+  function emitSelection(samples: string[]) {
+    options.emitSelected(samples)
+  }
+
+  function toggleSelectAll() {
+    emitSelection(sampleSelection.toggleAll())
+  }
+
+  function toggleSample(sample: string) {
+    emitSelection(sampleSelection.toggleValue(sample))
+  }
+
+  function toggleSamplesSelection(samples: string[]) {
+    emitSelection(sampleSelection.toggleValues(samples))
+  }
+
+  function toggleGroupSamples(groupName: string) {
+    const group = options.findGroup(groupName)
+    if (!group) return
+    toggleSamplesSelection(group.samples)
+  }
+
+  function toggleMajorGroupSamples(majorGroup: SampleMajorGroup) {
+    toggleSamplesSelection(majorGroup.allSamples)
+  }
+
+  function isFullySelected(samples: string[]): boolean {
+    return sampleSelection.isFullySelected(samples)
+  }
+
+  function isPartiallySelected(samples: string[]): boolean {
+    return sampleSelection.isPartiallySelected(samples)
+  }
+
+  function isGroupFullySelected(groupName: string): boolean {
+    const group = options.findGroup(groupName)
+    return group ? isFullySelected(group.samples) : false
+  }
+
+  function isGroupPartiallySelected(groupName: string): boolean {
+    const group = options.findGroup(groupName)
+    return group ? isPartiallySelected(group.samples) : false
+  }
+
+  function isMajorGroupFullySelected(majorGroup: SampleMajorGroup): boolean {
+    return isFullySelected(majorGroup.allSamples)
+  }
+
+  function isMajorGroupPartiallySelected(majorGroup: SampleMajorGroup): boolean {
+    return isPartiallySelected(majorGroup.allSamples)
+  }
+
+  return {
+    isAllSelected: sampleSelection.isAllSelected,
+    toggleSelectAll,
+    toggleSample,
+    toggleGroupSamples,
+    toggleMajorGroupSamples,
+    isFullySelected,
+    isPartiallySelected,
+    isGroupFullySelected,
+    isGroupPartiallySelected,
+    isMajorGroupFullySelected,
+    isMajorGroupPartiallySelected,
+  }
+}