@codingfactory/inventory-locator-client 0.1.0

package/src/components/locations/LocationForm.vue

@@ -0,0 +1,360 @@
+<template>
+  <InvModal
+    :show="show"
+    :title="isEdit ? 'Edit Location' : 'Create Location'"
+    :description="isEdit ? 'Update this location\'s details.' : 'Add a new location to your inventory hierarchy.'"
+    size="md"
+    initial-focus-selector="input[data-field='name']"
+    @update:show="emit('update:show', $event)"
+    @close="handleClose"
+  >
+    <form
+      class="location-form"
+      @submit.prevent="handleSubmit"
+    >
+      <!-- Name -->
+      <InvInput
+        v-model="form.name"
+        label="Name"
+        placeholder="e.g. Warehouse 1, Rack A, Shelf 01"
+        :error="errors.name"
+        data-field="name"
+        @update:model-value="clearError('name')"
+      />
+
+      <!-- Type -->
+      <InvSelect
+        v-model="form.type"
+        label="Type"
+        placeholder="Select location type..."
+        :options="typeOptions"
+        :error="errors.type"
+        :disabled="isEdit"
+        @update:model-value="clearError('type')"
+      />
+
+      <!-- Code -->
+      <div class="location-form__field">
+        <InvInput
+          v-model="form.code"
+          label="Code (optional)"
+          placeholder="Auto-generated if blank"
+          :error="errors.code"
+          @update:model-value="handleCodeInput"
+        />
+        <p v-if="codePreview" class="location-form__code-preview">
+          Full code: <code>{{ codePreview }}</code>
+        </p>
+      </div>
+
+      <!-- Description -->
+      <div class="location-form__field">
+        <label :for="descriptionId" class="location-form__label">
+          Description
+        </label>
+        <textarea
+          :id="descriptionId"
+          v-model="form.description"
+          class="location-form__textarea"
+          placeholder="Optional notes about this location..."
+          rows="3"
+        />
+      </div>
+
+      <!-- Sort order -->
+      <InvInput
+        v-model="form.sort_order"
+        label="Sort order"
+        type="number"
+        placeholder="0"
+      />
+    </form>
+
+    <template #footer>
+      <InvButton
+        variant="secondary"
+        @click="handleClose"
+      >
+        Cancel
+      </InvButton>
+      <InvButton
+        variant="primary"
+        :loading="saving"
+        :disabled="saving"
+        @click="handleSubmit"
+      >
+        {{ isEdit ? 'Save Changes' : 'Create Location' }}
+      </InvButton>
+    </template>
+  </InvModal>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, reactive, useId } from 'vue'
+import type { Location, LocationType, LocationTypeInfo, CreateLocationData, UpdateLocationData } from '../../types'
+import { useLocations } from '../../composables/useLocations'
+import InvModal from '../shared/InvModal.vue'
+import InvInput from '../shared/InvInput.vue'
+import InvSelect from '../shared/InvSelect.vue'
+import InvButton from '../shared/InvButton.vue'
+
+const props = withDefaults(defineProps<{
+  show: boolean
+  location?: Location | null
+  parentId?: number | null
+}>(), {
+  location: null,
+  parentId: null,
+})
+
+const emit = defineEmits<{
+  'update:show': [value: boolean]
+  saved: [location: Location]
+}>()
+
+const uid = useId()
+const descriptionId = `location-form-desc-${uid}`
+
+const { create, update, fetchTypes } = useLocations()
+
+const saving = ref(false)
+const allTypes = ref<LocationTypeInfo[]>([])
+
+const form = reactive({
+  name: '',
+  type: '' as string,
+  code: '',
+  description: '',
+  sort_order: 0 as number,
+})
+
+const errors = reactive({
+  name: '',
+  type: '',
+  code: '',
+})
+
+const isEdit = computed(() => !!props.location)
+
+// Compute parent code for the full code preview
+const parentCode = computed(() => {
+  if (props.location?.full_code && props.location?.code) {
+    // For edit mode, strip the location's own code from the end
+    const fc = props.location.full_code
+    const ownCode = props.location.code
+    if (fc.endsWith(ownCode)) {
+      const prefix = fc.slice(0, fc.length - ownCode.length)
+      // Remove trailing separator
+      return prefix.replace(/-$/, '')
+    }
+  }
+  // For create mode, we would need parent's full_code - show a partial preview
+  return null
+})
+
+const codePreview = computed(() => {
+  const codeVal = form.code.trim()
+  if (!codeVal) return ''
+  if (parentCode.value) {
+    return `${parentCode.value}-${codeVal}`
+  }
+  return codeVal
+})
+
+const typeOptions = computed(() => {
+  return allTypes.value.map(t => ({
+    value: t.value,
+    label: t.label,
+  }))
+})
+
+// Validate code: alphanumeric + hyphens only
+const CODE_REGEX = /^[a-zA-Z0-9-]*$/
+
+function handleCodeInput(value: string | number) {
+  const strVal = String(value)
+  if (!CODE_REGEX.test(strVal)) {
+    errors.code = 'Only letters, numbers, and hyphens allowed'
+  } else {
+    errors.code = ''
+  }
+}
+
+function clearError(field: keyof typeof errors) {
+  errors[field] = ''
+}
+
+function validate(): boolean {
+  let valid = true
+
+  if (!form.name.trim()) {
+    errors.name = 'Name is required'
+    valid = false
+  } else if (form.name.trim().length > 255) {
+    errors.name = 'Name must be 255 characters or less'
+    valid = false
+  }
+
+  if (!isEdit.value && !form.type) {
+    errors.type = 'Type is required'
+    valid = false
+  }
+
+  if (form.code && !CODE_REGEX.test(form.code)) {
+    errors.code = 'Only letters, numbers, and hyphens allowed'
+    valid = false
+  }
+
+  return valid
+}
+
+async function handleSubmit() {
+  if (!validate()) return
+
+  saving.value = true
+  try {
+    let result: Location
+
+    if (isEdit.value && props.location) {
+      const data: UpdateLocationData = {
+        name: form.name.trim(),
+        description: form.description.trim() || undefined,
+        sort_order: form.sort_order,
+      }
+      if (form.code.trim()) {
+        data.code = form.code.trim()
+      }
+      result = await update(props.location.id, data)
+    } else {
+      const data: CreateLocationData = {
+        name: form.name.trim(),
+        type: form.type as LocationType,
+        code: form.code.trim() || undefined,
+        description: form.description.trim() || undefined,
+        parent_id: props.parentId,
+        sort_order: form.sort_order,
+      }
+      result = await create(data)
+    }
+
+    emit('saved', result)
+    emit('update:show', false)
+    resetForm()
+  } catch (err: any) {
+    // Handle server-side validation errors
+    if (err.response?.data?.errors) {
+      const serverErrors = err.response.data.errors
+      if (serverErrors.name) errors.name = serverErrors.name[0]
+      if (serverErrors.type) errors.type = serverErrors.type[0]
+      if (serverErrors.code) errors.code = serverErrors.code[0]
+    }
+  } finally {
+    saving.value = false
+  }
+}
+
+function handleClose() {
+  emit('update:show', false)
+  resetForm()
+}
+
+function resetForm() {
+  form.name = ''
+  form.type = ''
+  form.code = ''
+  form.description = ''
+  form.sort_order = 0
+  errors.name = ''
+  errors.type = ''
+  errors.code = ''
+}
+
+function populateFromLocation(loc: Location) {
+  form.name = loc.name
+  form.type = loc.type
+  form.code = loc.code
+  form.description = loc.description || ''
+  form.sort_order = loc.sort_order
+}
+
+// Watch for show changes to load types and populate form
+watch(() => props.show, async (isVisible) => {
+  if (isVisible) {
+    // Load types
+    if (allTypes.value.length === 0) {
+      try {
+        allTypes.value = await fetchTypes()
+      } catch {
+        // Error handled by composable
+      }
+    }
+
+    // Populate form for edit
+    if (props.location) {
+      populateFromLocation(props.location)
+    } else {
+      resetForm()
+    }
+  }
+})
+</script>
+
+<style scoped>
+.location-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4, 1rem);
+}
+
+.location-form__field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1, 0.25rem);
+}
+
+.location-form__label {
+  font-size: var(--text-sm, 0.875rem);
+  font-weight: 500;
+  color: var(--admin-text-primary);
+  line-height: 1.4;
+}
+
+.location-form__textarea {
+  padding: 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;
+  line-height: 1.5;
+  resize: vertical;
+  outline: none;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  min-height: 80px;
+}
+
+.location-form__textarea::placeholder {
+  color: var(--admin-text-tertiary);
+}
+
+.location-form__textarea:focus {
+  border-color: var(--color-primary, #2563eb);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
+}
+
+.location-form__code-preview {
+  margin: var(--space-1, 0.25rem) 0 0;
+  font-size: var(--text-xs, 0.75rem);
+  color: var(--admin-text-tertiary);
+  line-height: 1.4;
+}
+
+.location-form__code-preview code {
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  padding: 1px 4px;
+  border-radius: 3px;
+  background: var(--admin-content-bg);
+  color: var(--admin-text-secondary);
+}
+</style>