@isoftdata/svelte-ecommerce 1.0.0-beta.3 → 1.0.0-beta.5

package/dist/EcommercePartTypeConfig.svelte

@@ -1,277 +1,283 @@
-<script lang="ts">
-	import type { i18n } from 'i18next'
-
-	import { getContext } from 'svelte'
-
-	import Table from '@isoftdata/svelte-table'
-	import Button from '@isoftdata/svelte-button'
-	import Select from '@isoftdata/svelte-select'
-	import Modal from '@isoftdata/svelte-modal'
-	import Checkbox from '@isoftdata/svelte-checkbox'
-	import { klona } from 'klona'
-	import { booleanToYesNo } from '@isoftdata/utility-string'
-	import Autocomplete from '@isoftdata/svelte-autocomplete'
-	import EcommerceDefaults from './EcommerceDefaults.svelte'
-	import type {
-		EbayPolicy,
-		EcommerceCondition,
-		EcommercePartnerConfiguration,
-		ExtendedInventoryTypeListingDefaults,
-		InventoryType,
-		InventoryTypeCategory,
-		InventoryTypeListingDefaults,
-		NewInventoryTypeListingDefaults,
-	} from './utils.js'
-
-	import { translate as defaultTranslate } from '@isoftdata/utility-string'
-
-	const { t: translate } = getContext<i18n>('i18next') || { t: defaultTranslate }
-
-	interface Props {
-		// Props
-		ebayPolicyList: Array<EbayPolicy>
-		ecommerceConditionList: Array<EcommerceCondition>
-		inventoryTypeList: Array<InventoryType>
-		inventoryTypeWithDefaultConfigList: Array<ExtendedInventoryTypeListingDefaults>
-		inventoryTypeCategoryList: Array<InventoryTypeCategory>
-		partnerConfigurationList: Array<EcommercePartnerConfiguration>
-		selectedEcommercePartnerId: number
-		partTypeConfigurationChanged: (
-			data: InventoryTypeListingDefaults | NewInventoryTypeListingDefaults,
-		) => Promise<void>
-	}
-
-	let {
-		ebayPolicyList = [],
-		ecommerceConditionList = [],
-		inventoryTypeList = [],
-		inventoryTypeWithDefaultConfigList = $bindable([]),
-		inventoryTypeCategoryList = [],
-		partnerConfigurationList = [],
-		selectedEcommercePartnerId,
-		partTypeConfigurationChanged = async (_: InventoryTypeListingDefaults | NewInventoryTypeListingDefaults) => {},
-	}: Props = $props()
-
-	// Template for new inventory type listing configurations
-	const newInventoryTypeListingConfig: NewInventoryTypeListingDefaults = Object.freeze({
-		active: true,
-		categoryId: undefined,
-		categoryName: '',
-		defaults: {
-			brandMapping: undefined,
-			conditionDescription: undefined,
-			conditionId: undefined,
-			fulfillmentPolicies: undefined,
-			fulfillmentTimeUnit: undefined,
-			fulfillmentTimeValue: undefined,
-			listingDescriptionTemplate: undefined,
-			listingDuration: undefined,
-			listingFormat: undefined,
-			listingTitleTemplate: undefined,
-			manufacturerPartNumberMapping: undefined,
-			oemNumberMapping: undefined,
-			packageType: undefined,
-			paymentPolicies: undefined,
-			pricingModifier: undefined,
-			returnPolicies: undefined,
-			shippingLengthUnit: undefined,
-			shippingWeightUnit: undefined,
-			storePickupAllowed: undefined,
-		},
-		ecommercePartnerId: 0,
-		inventoryTypeId: 0,
-		inventoryTypeListingConfigurationId: null,
-		inventoryTypeName: '',
-		inventoryType: null,
-		descriptionTemplate: null,
-		titleTemplate: null,
-	})
-
-	// Local state
-	let isAddingListingConfig = false
-	let selectedInventoryTypeListingConfig: InventoryTypeListingDefaults | NewInventoryTypeListingDefaults = $state(
-		klona(newInventoryTypeListingConfig),
-	)
-	let show = $state(false)
-	let editInventoryTypeDisabled: boolean = $state(false)
-	let selectedInventoryType = $state<InventoryType | null>(null)
-	// Hard coded temp data for drop downs
-
-	// Automatically update filtered categories when inventoryType changes
-	let filteredCategories = $derived.by(() => {
-		// Use the inventoryType from the selectedInventoryTypeListingConfig if available
-		const typeToUse = selectedInventoryTypeListingConfig?.inventoryTypeId
-
-		// If no inventory type is selected, return empty array
-		if (!typeToUse) {
-			return []
-		}
-
-		// First find any categories with a typeSetId matching the selected inventory type
-		const categoriesByInventoryType = inventoryTypeCategoryList.filter(category => category.typeSetId === typeToUse)
-
-		// Now filter out the ones that aren't already configured by the inventorytype and category combo
-		return categoriesByInventoryType.filter(category => {
-			// Check if this category is already configured for this inventory type
-			const isAlreadyConfigured = inventoryTypeWithDefaultConfigList.some(
-				config => config.inventoryTypeId === typeToUse && config.categoryId === category.categoryId,
-			)
-
-			// Always include the currently selected category (for editing existing records)
-			const isCurrentlySelected = selectedInventoryTypeListingConfig?.categoryId === category.categoryId
-
-			// Return categories that aren't already configured OR are currently selected
-			return !isAlreadyConfigured || isCurrentlySelected
-		})
-	})
-
-	// Called on add or edit inventory type config
-	function editInventoryTypeConfig(row?: InventoryTypeListingDefaults) {
-		selectedInventoryTypeListingConfig = klona(row ?? newInventoryTypeListingConfig)
-		editInventoryTypeDisabled = !!row
-		// Sync the selectedInventoryType from the ID
-		selectedInventoryType =
-			inventoryTypeList.find(type => type.inventoryTypeId === selectedInventoryTypeListingConfig.inventoryTypeId) ??
-			null
-		show = true
-	}
-
-	// Function to prepare data and call for saving
-	async function confirm() {
-		if (!selectedInventoryTypeListingConfig) return
-
-		// Create a copy of the data to avoid mutating state directly
-		const listingConfigCopy = klona(selectedInventoryTypeListingConfig)
-
-		// Call the parent save function with prepared data
-		await partTypeConfigurationChanged(listingConfigCopy)
-
-		// Close the modal after saving
-		close()
-	}
-
-	function close() {
-		// Reset to a completely fresh template to prevent any state contamination
-		selectedInventoryTypeListingConfig = newInventoryTypeListingConfig
-		selectedInventoryType = null
-		editInventoryTypeDisabled = false
-		show = false
-	}
-
-	function isRowSelected(row: ExtendedInventoryTypeListingDefaults): boolean {
-		if (!selectedInventoryTypeListingConfig) return false
-
-		// For existing records, compare IDs
-		if ('inventoryTypeListingConfigurationId' in selectedInventoryTypeListingConfig) {
-			return (
-				selectedInventoryTypeListingConfig.inventoryTypeListingConfigurationId ===
-				row.inventoryTypeListingConfigurationId
-			)
-		}
-
-		// For new records, no row can be selected since they don't exist in the table yet
-		return false
-	}
-</script>
-
-<div class="card">
-	<div class="card-header">
-		<h4 class="mb-0">
-			{translate('ecommerce.configuration.partTypeListingConfiguration', 'Part Type Listing Configuration')}
-		</h4>
-		<p class="text-muted mb-0">
-			{translate(
-				'ecommerce.configuration.configurePartTypeCategory',
-				'Configure part type and category level settings for e-commerce listings',
-			)}
-		</p>
-	</div>
-	<div class="card-body">
-		<Table
-			rows={inventoryTypeWithDefaultConfigList}
-			columns={[
-				{
-					property: 'inventoryTypeId',
-					name: translate('ecommerce.configuration.typeNumber', 'Type #'),
-					defaultSortColumn: true,
-				},
-				{ property: 'inventoryTypeName', name: translate('ecommerce.configuration.name', 'Name') },
-				{ property: 'categoryName', name: translate('ecommerce.configuration.category', 'Category') },
-				{ property: 'active', name: translate('ecommerce.configuration.activeOnEbay', 'Active on eBay') },
-			]}
-		>
-			{#snippet children({ row })}
-				<tr
-					onclick={() => editInventoryTypeConfig(row)}
-					style="cursor: pointer;"
-					class:table-primary={isRowSelected(row)}
-				>
-					<td>{row.inventoryTypeId}</td>
-					<td>{row.inventoryTypeName}</td>
-					<td>{row.categoryName}</td>
-					<td>{booleanToYesNo(row.active, translate)}</td>
-				</tr>
-			{/snippet}
-		</Table>
-	</div>
-	<div class="card-footer">
-		<Button
-			outline
-			color="success"
-			size="sm"
-			icon="plus"
-			onclick={() => editInventoryTypeConfig()}
-			disabled={isAddingListingConfig}
-		>
-			{translate('common:add', 'Add')}...
-		</Button>
-	</div>
-</div>
-<Modal
-	bind:show
-	title={translate('ecommerce.configuration.addEditPartTypeCategory', 'Add/Edit Part Type & Category Configuration')}
-	size="lg"
-	confirmButtonText={translate('ecommerce.configuration.save', 'Save')}
-	{confirm}
-	{close}
->
-	<Checkbox
-		label={translate('ecommerce.configuration.activeOnEbay', 'Active On eBay')}
-		bind:checked={selectedInventoryTypeListingConfig.active}
-	/>
-	<div class="row">
-		<div class="col-lg-4">
-			<Autocomplete
-				label={translate('ecommerce.configuration.partType', 'Part Type')}
-				options={inventoryTypeList}
-				bind:value={selectedInventoryType}
-				getLabel={option => (option ? `${option.inventoryTypeId} - ${option.name}` : '')}
-				change={option => {
-					if (option) {
-						selectedInventoryTypeListingConfig.inventoryTypeId = option.inventoryTypeId
-					}
-				}}
-			/>
-		</div>
-		<div class="col-lg-4">
-			<Select
-				label={translate('ecommerce.configuration.category', 'Category')}
-				emptyText="-- {translate('ecommerce.configuration.selectCategory', 'Selectd Category')} --"
-				disabled={!filteredCategories.length && !selectedInventoryTypeListingConfig.categoryId}
-				bind:value={selectedInventoryTypeListingConfig.categoryId}
-			>
-				{#each filteredCategories as category}
-					<option value={category.categoryId}>{category.name}</option>
-				{/each}
-			</Select>
-		</div>
-	</div>
-	<hr />
-	<EcommerceDefaults
-		defaults={selectedInventoryTypeListingConfig.defaults}
-		{ebayPolicyList}
-		{ecommerceConditionList}
-		{partnerConfigurationList}
-		{selectedEcommercePartnerId}
-	/>
-</Modal>
+<script lang="ts">
+	import type { i18n } from 'i18next'
+
+	import { getContext } from 'svelte'
+
+	import Table from '@isoftdata/svelte-table'
+	import Button from '@isoftdata/svelte-button'
+	import Select from '@isoftdata/svelte-select'
+	import Modal from '@isoftdata/svelte-modal'
+	import Checkbox from '@isoftdata/svelte-checkbox'
+	import { klona } from 'klona'
+	import { booleanToYesNo } from '@isoftdata/utility-string'
+	import Autocomplete from '@isoftdata/svelte-autocomplete'
+	import EcommerceDefaults from './EcommerceDefaults.svelte'
+	import type {
+		EbayPolicy,
+		EcommerceCondition,
+		EcommercePartnerConfiguration,
+		ExtendedInventoryTypeListingDefaults,
+		InventoryType,
+		InventoryTypeCategory,
+		InventoryTypeListingDefaults,
+		NewInventoryTypeListingDefaults,
+	} from './utils.js'
+
+	import { translate as defaultTranslate } from '@isoftdata/utility-string'
+
+	const { t: translate } = getContext<i18n>('i18next') || { t: defaultTranslate }
+
+	interface Props {
+		// Props
+		ebayPolicyList: Array<EbayPolicy>
+		ecommerceConditionList: Array<EcommerceCondition>
+		inventoryTypeList: Array<InventoryType>
+		inventoryTypeWithDefaultConfigList: Array<ExtendedInventoryTypeListingDefaults>
+		inventoryTypeCategoryList: Array<InventoryTypeCategory>
+		partnerConfigurationList: Array<EcommercePartnerConfiguration>
+		selectedEcommercePartnerId: number
+		partTypeConfigurationChanged: (
+			data: InventoryTypeListingDefaults | NewInventoryTypeListingDefaults,
+		) => Promise<void>
+	}
+
+	let {
+		ebayPolicyList = [],
+		ecommerceConditionList = [],
+		inventoryTypeList = [],
+		inventoryTypeWithDefaultConfigList = $bindable([]),
+		inventoryTypeCategoryList = [],
+		partnerConfigurationList = [],
+		selectedEcommercePartnerId,
+		partTypeConfigurationChanged = async (_: InventoryTypeListingDefaults | NewInventoryTypeListingDefaults) => {},
+	}: Props = $props()
+
+	// Template for new inventory type listing configurations
+	const newInventoryTypeListingConfig: NewInventoryTypeListingDefaults = Object.freeze({
+		active: true,
+		categoryId: undefined,
+		categoryName: '',
+		defaults: {
+			brandMapping: undefined,
+			conditionDescription: undefined,
+			conditionId: undefined,
+			fulfillmentPolicies: undefined,
+			fulfillmentTimeUnit: undefined,
+			fulfillmentTimeValue: undefined,
+			listingDescriptionTemplate: undefined,
+			listingDuration: undefined,
+			listingFormat: undefined,
+			listingTitleTemplate: undefined,
+			manufacturerPartNumberMapping: undefined,
+			oemNumberMapping: undefined,
+			packageType: undefined,
+			paymentPolicies: undefined,
+			pricingModifier: undefined,
+			returnPolicies: undefined,
+			shippingLengthUnit: undefined,
+			shippingWeightUnit: undefined,
+			storePickupAllowed: undefined,
+		},
+		ecommercePartnerId: 0,
+		inventoryTypeId: 0,
+		inventoryTypeListingConfigurationId: null,
+		inventoryTypeName: '',
+		inventoryType: null,
+		descriptionTemplate: null,
+		titleTemplate: null,
+	})
+
+	// Local state
+	let isAddingListingConfig = false
+	let selectedInventoryTypeListingConfig: InventoryTypeListingDefaults | NewInventoryTypeListingDefaults = $state(
+		klona(newInventoryTypeListingConfig),
+	)
+	let show = $state(false)
+	let editInventoryTypeDisabled: boolean = $state(false)
+	let selectedInventoryType = $state<InventoryType | null>(null)
+	// Hard coded temp data for drop downs
+
+	// Automatically update filtered categories when inventoryType changes
+	let filteredCategories = $derived.by(() => {
+		// Use the inventoryType from the selectedInventoryTypeListingConfig if available
+		const typeToUse = selectedInventoryTypeListingConfig?.inventoryTypeId
+
+		// If no inventory type is selected, return empty array
+		if (!typeToUse) {
+			return []
+		}
+
+		// First find any categories with a typeSetId matching the selected inventory type
+		const categoriesByInventoryType = inventoryTypeCategoryList.filter(category => category.typeSetId === typeToUse)
+
+		// Now filter out the ones that aren't already configured by the inventorytype and category combo
+		return categoriesByInventoryType.filter(category => {
+			// Check if this category is already configured for this inventory type
+			const isAlreadyConfigured = inventoryTypeWithDefaultConfigList.some(
+				config => config.inventoryTypeId === typeToUse && config.categoryId === category.categoryId,
+			)
+
+			// Always include the currently selected category (for editing existing records)
+			const isCurrentlySelected = selectedInventoryTypeListingConfig?.categoryId === category.categoryId
+
+			// Return categories that aren't already configured OR are currently selected
+			return !isAlreadyConfigured || isCurrentlySelected
+		})
+	})
+
+	// Called on add or edit inventory type config
+	function editInventoryTypeConfig(row?: InventoryTypeListingDefaults) {
+		selectedInventoryTypeListingConfig = klona(row ?? newInventoryTypeListingConfig)
+		
+		// Set ecommercePartnerId to the selected partner when creating a new config
+		if (!row) {
+			selectedInventoryTypeListingConfig.ecommercePartnerId = selectedEcommercePartnerId
+		}
+		
+		editInventoryTypeDisabled = !!row
+		// Sync the selectedInventoryType from the ID
+		selectedInventoryType =
+			inventoryTypeList.find(type => type.inventoryTypeId === selectedInventoryTypeListingConfig.inventoryTypeId) ??
+			null
+		show = true
+	}
+
+	// Function to prepare data and call for saving
+	async function confirm() {
+		if (!selectedInventoryTypeListingConfig) return
+
+		// Create a copy of the data to avoid mutating state directly
+		const listingConfigCopy = klona(selectedInventoryTypeListingConfig)
+
+		// Call the parent save function with prepared data
+		await partTypeConfigurationChanged(listingConfigCopy)
+
+		// Close the modal after saving
+		close()
+	}
+
+	function close() {
+		// Reset to a completely fresh template to prevent any state contamination
+		selectedInventoryTypeListingConfig = newInventoryTypeListingConfig
+		selectedInventoryType = null
+		editInventoryTypeDisabled = false
+		show = false
+	}
+
+	function isRowSelected(row: ExtendedInventoryTypeListingDefaults): boolean {
+		if (!selectedInventoryTypeListingConfig) return false
+
+		// For existing records, compare IDs
+		if ('inventoryTypeListingConfigurationId' in selectedInventoryTypeListingConfig) {
+			return (
+				selectedInventoryTypeListingConfig.inventoryTypeListingConfigurationId ===
+				row.inventoryTypeListingConfigurationId
+			)
+		}
+
+		// For new records, no row can be selected since they don't exist in the table yet
+		return false
+	}
+</script>
+
+<div class="card">
+	<div class="card-header">
+		<h4 class="mb-0">
+			{translate('ecommerce.configuration.partTypeListingConfiguration', 'Part Type Listing Configuration')}
+		</h4>
+		<p class="text-muted mb-0">
+			{translate(
+				'ecommerce.configuration.configurePartTypeCategory',
+				'Configure part type and category level settings for e-commerce listings',
+			)}
+		</p>
+	</div>
+	<div class="card-body">
+		<Table
+			rows={inventoryTypeWithDefaultConfigList}
+			columns={[
+				{
+					property: 'inventoryTypeId',
+					name: translate('ecommerce.configuration.typeNumber', 'Type #'),
+					defaultSortColumn: true,
+				},
+				{ property: 'inventoryTypeName', name: translate('ecommerce.configuration.name', 'Name') },
+				{ property: 'categoryName', name: translate('ecommerce.configuration.category', 'Category') },
+				{ property: 'active', name: translate('ecommerce.configuration.activeOnEbay', 'Active on eBay') },
+			]}
+		>
+			{#snippet children({ row })}
+				<tr
+					onclick={() => editInventoryTypeConfig(row)}
+					style="cursor: pointer;"
+					class:table-primary={isRowSelected(row)}
+				>
+					<td>{row.inventoryTypeId}</td>
+					<td>{row.inventoryTypeName}</td>
+					<td>{row.categoryName}</td>
+					<td>{booleanToYesNo(row.active, translate)}</td>
+				</tr>
+			{/snippet}
+		</Table>
+	</div>
+	<div class="card-footer">
+		<Button
+			outline
+			color="success"
+			size="sm"
+			icon="plus"
+			onclick={() => editInventoryTypeConfig()}
+			disabled={isAddingListingConfig}
+		>
+			{translate('common:add', 'Add')}...
+		</Button>
+	</div>
+</div>
+<Modal
+	bind:show
+	title={translate('ecommerce.configuration.addEditPartTypeCategory', 'Add/Edit Part Type & Category Configuration')}
+	size="lg"
+	confirmButtonText={translate('ecommerce.configuration.save', 'Save')}
+	{confirm}
+	{close}
+>
+	<Checkbox
+		label={translate('ecommerce.configuration.activeOnEbay', 'Active On eBay')}
+		bind:checked={selectedInventoryTypeListingConfig.active}
+	/>
+	<div class="row">
+		<div class="col-lg-4">
+			<Autocomplete
+				label={translate('ecommerce.configuration.partType', 'Part Type')}
+				options={inventoryTypeList}
+				bind:value={selectedInventoryType}
+				getLabel={option => (option ? `${option.inventoryTypeId} - ${option.name}` : '')}
+				change={option => {
+					if (option) {
+						selectedInventoryTypeListingConfig.inventoryTypeId = option.inventoryTypeId
+					}
+				}}
+			/>
+		</div>
+		<div class="col-lg-4">
+			<Select
+				label={translate('ecommerce.configuration.category', 'Category')}
+				emptyText="-- {translate('ecommerce.configuration.selectCategory', 'Selectd Category')} --"
+				disabled={!filteredCategories.length && !selectedInventoryTypeListingConfig.categoryId}
+				bind:value={selectedInventoryTypeListingConfig.categoryId}
+			>
+				{#each filteredCategories as category}
+					<option value={category.categoryId}>{category.name}</option>
+				{/each}
+			</Select>
+		</div>
+	</div>
+	<hr />
+	<EcommerceDefaults
+		bind:defaults={selectedInventoryTypeListingConfig.defaults}
+		{ebayPolicyList}
+		{ecommerceConditionList}
+		{partnerConfigurationList}
+		{selectedEcommercePartnerId}
+	/>
+</Modal>