@isoftdata/svelte-ecommerce 1.0.0-beta.0 → 1.0.0-beta.2

package/dist/EcommerceCategoryMapConfiguration.svelte.d.ts

@@ -1,8 +1,10 @@
-import type { EbayCategory, EbayCategoryMap, ExtendedEbayCategoryMap, InventoryType, SelectedEbayCategoryMapRow } from './utils.js';
+import type { EbayCategory, EbayCategoryMap, ExtendedEbayCategoryMap, InventoryType } from './utils.js';
+import type { IndexedRowProps } from '@isoftdata/svelte-table';
+type SelectedEbayCategoryMapRow = ExtendedEbayCategoryMap & IndexedRowProps;
 interface Props {
-    ebayCategoryList: EbayCategory[];
-    ebayCategoryMapList: ExtendedEbayCategoryMap[];
-    inventoryTypeList?: InventoryType[];
+    ebayCategoryList: Array<EbayCategory>;
+    ebayCategoryMapList: Array<ExtendedEbayCategoryMap>;
+    inventoryTypeList?: Array<InventoryType>;
     selectedPartType?: number | null;
     categoryMapChanged: (data: EbayCategoryMap) => Promise<void>;
     selectedEcommerceCategoryMappingRow?: ExtendedEbayCategoryMap | SelectedEbayCategoryMapRow | null;

package/dist/EcommerceConditionMapConfiguration.svelte

@@ -1,214 +1,192 @@
-<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 Input from '@isoftdata/svelte-input'
-	import Select from '@isoftdata/svelte-select'
-	import Modal from '@isoftdata/svelte-modal'
-	import klona from 'klona'
-	import type {
-		EcommerceCondition,
-		EcommerceConditionMap,
-		ExtendedEcommerceConditionMap,
-		NewEcommerceConditionMap,
-		NewConditionMappingState,
-	} from './utils.js'
-
-	import { translate as defaultTranslate } from '@isoftdata/utility-string'
-	const { t: translate } = getContext<i18n>('i18next') || { t: defaultTranslate }
-
-	interface SelectedEcommerceConditionMapRow extends EcommerceConditionMap {
-		originalIndex: number
-		uuid: string
-	}
-
-	// Add index signature to make it compatible with Table component
-	interface TableRow extends ExtendedEcommerceConditionMap {
-		[key: string]: any
-	}
-
-	interface Props {
-		ecommerceConditionMappingList: ExtendedEcommerceConditionMap[] // mapping between itrack and ebay conditions
-		ecommerceConditionList: EcommerceCondition[]
-		inventoryConditionList: string[] // unique conditions from inventory table
-		conditionMapChanged: (data: EcommerceConditionMap) => Promise<void>
-	}
-
-	let {
-		ecommerceConditionMappingList = $bindable([]),
-		ecommerceConditionList = [],
-		inventoryConditionList = [],
-		conditionMapChanged = async (_: EcommerceConditionMap) => {},
-	}: Props = $props()
-
-	// New empty items
-	let newConditionMapping: NewConditionMappingState = Object.freeze({
-		itrackCondition: null,
-		ecommerceConditionId: null,
-		description: null,
-	})
-	// Local state
-	let selectedEcommerceConditionMappingRow: SelectedEcommerceConditionMapRow | NewConditionMappingState =
-		$state(newConditionMapping)
-
-	let editEcommerceConditionDisabled = $state(false)
-	let editItrackConditionDisabled = $state(false)
-	let isEditingConditionMap = $state(false)
-	let showAllOption = $state(true)
-	let show = $state(false)
-
-	let unmappedConditions = $derived(
-		inventoryConditionList.filter(
-			condition =>
-				selectedEcommerceConditionMappingRow?.itrackCondition === condition ||
-				!ecommerceConditionMappingList.some(mapping => mapping.itrackCondition === condition),
-		),
-	)
-
-	function editConditionMapRow(row?: ExtendedEcommerceConditionMap) {
-		// Set selected row
-		selectedEcommerceConditionMappingRow = klona(row || newConditionMapping)
-
-		show = true
-	}
-
-	// Add function to convert condtion row to savable format
-	function convertConditionToSavableFormat(
-		row: SelectedEcommerceConditionMapRow | NewConditionMappingState,
-	): EcommerceConditionMap {
-		// Handle the case where we have a NewConditionMappingState with null values
-		if ('ecommerceConditionMapId' in row && row.ecommerceConditionMapId !== undefined) {
-			// This is an existing record (EcommerceConditionMap or SelectedEcommerceConditionMapRow)
-			return {
-				ecommerceConditionMapId: row.ecommerceConditionMapId,
-				ecommercePartnerId: row.ecommercePartnerId!,
-				itrackCondition: row.itrackCondition!,
-				ecommerceConditionId: row.ecommerceConditionId!,
-				description: row.description || row.itrackCondition!,
-			}
-		} else {
-			// This is a new record - we need to create it without the ID
-			// The API will assign the ID when creating
-			// TODO: is there a way to avoid 'any' here?
-			const newMapping: any = {
-				ecommercePartnerId: row.ecommercePartnerId || 0, // Default value, should be set by parent
-				itrackCondition: row.itrackCondition!,
-				ecommerceConditionId: row.ecommerceConditionId!,
-				description: row.description || row.itrackCondition!,
-			}
-			return newMapping as EcommerceConditionMap
-		}
-	}
-
-	async function confirm() {
-		if (!selectedEcommerceConditionMappingRow) return
-
-		const mappingToSave = convertConditionToSavableFormat(selectedEcommerceConditionMappingRow)
-
-		await conditionMapChanged(mappingToSave)
-		close()
-	}
-	function close() {
-		// Reset related data and flags
-		selectedEcommerceConditionMappingRow = newConditionMapping
-		show = false
-	}
-</script>
-
-<div class="card-header">
-	<h4 class="mb-0">{translate('ecommerce.configuration.conditionMappings', 'Condition Mappings')}</h4>
-	<p class="text-muted mb-0">
-		{translate('ecommerce.configuration.mapConditionValues', 'Map condition values to eBay condition values')}
-	</p>
-</div>
-<div class="card-body">
-	<div class="mb-3">
-		<Button
-			outline
-			color="success"
-			size="sm"
-			iconClass="plus"
-			onclick={() => editConditionMapRow()}
-			disabled={isEditingConditionMap}
-		>
-			{translate('ecommerce.configuration.add', 'Add')}
-		</Button>
-	</div>
-	<Table
-		parentClass="overflow-y-auto mh-500"
-		rows={ecommerceConditionMappingList as TableRow[]}
-		columns={[
-			{
-				property: 'itrackCondition',
-				name: translate('ecommerce.configuration.itrackCondition', 'Itrack Condition'),
-				defaultSortColumn: true,
-			},
-			{ property: 'name', name: translate('ecommerce.configuration.ebayCondition', 'Ebay Condition') },
-			{
-				property: 'description',
-				name: translate('ecommerce.configuration.conditionDescription', 'Condition Description'),
-			},
-		]}
-		stickyHeader
-		responsive
-	>
-		{#snippet children({ row })}
-			<tr
-				onclick={() => editConditionMapRow(row as ExtendedEcommerceConditionMap)}
-				class="cursor-pointer"
-			>
-				<td>{row.itrackCondition}</td>
-				<td>{row.name}</td>
-				<td>{row.description}</td>
-			</tr>
-		{/snippet}
-	</Table>
-</div>
-
-<Modal
-	bind:show
-	title={translate('ecommerce.configuration.addEditConditionMapping', 'Add/Edit New Condition Mapping')}
-	modalSize="lg"
-	confirmButtonText={translate('ecommerce.configuration.save', 'Save')}
-	cancelShown={true}
-	{confirm}
-	{close}
->
-	<div class="card-header">
-		<h4 class="mb-0">{translate('ecommerce.configuration.conditionMapping', 'Condition Mapping')}</h4>
-	</div>
-	<div class="card-body">
-		<Select
-			label={translate('ecommerce.configuration.itrackCondition', 'Itrack Condition')}
-			showEmptyOption={showAllOption}
-			emptyValue={null}
-			emptyText={translate('ecommerce.configuration.selectCondition', 'Select Condition')}
-			disabled={editItrackConditionDisabled}
-			bind:value={selectedEcommerceConditionMappingRow.itrackCondition}
-		>
-			{#each unmappedConditions as itrackCondition}
-				<option value={itrackCondition}>{itrackCondition}</option>
-			{/each}
-		</Select>
-		<Select
-			label={translate('ecommerce.configuration.ecommerceCondition', 'Ecommerce Condition')}
-			showEmptyOption={showAllOption}
-			emptyValue={null}
-			emptyText={translate('ecommerce.configuration.selectCondition', 'Select Condition')}
-			disabled={editEcommerceConditionDisabled}
-			bind:value={selectedEcommerceConditionMappingRow.ecommerceConditionId}
-		>
-			{#each ecommerceConditionList as ecommerceCondition}
-				<option value={ecommerceCondition.ecommerceConditionId ?? null}>{ecommerceCondition.name}</option>
-			{/each}
-		</Select>
-		<Input
-			label={translate('ecommerce.configuration.conditionDescription', 'Condition Description')}
-			maxlength={1000}
-			bind:value={selectedEcommerceConditionMappingRow.description}
-			placeholder=""
-		/>
-	</div>
-</Modal>
+<script lang="ts">
+	import type { i18n } from 'i18next'
+	import { getContext } from 'svelte'
+	import type { IndexedRowProps, UuidRowProps } from '@isoftdata/svelte-table'
+
+	import Button from '@isoftdata/svelte-button'
+	import Input from '@isoftdata/svelte-input'
+	import Select from '@isoftdata/svelte-select'
+	import Modal from '@isoftdata/svelte-modal'
+	import { klona } from 'klona'
+	import Table from '@isoftdata/svelte-table'
+	import type {
+		EcommerceCondition,
+		EcommerceConditionMap,
+		ExtendedEcommerceConditionMap,
+		NewConditionMappingState,
+	} from './utils.js'
+
+	import { translate as defaultTranslate } from '@isoftdata/utility-string'
+	const { t: translate } = getContext<i18n>('i18next') || { t: defaultTranslate }
+
+	interface SelectedEcommerceConditionMapRow extends EcommerceConditionMap, IndexedRowProps {}
+
+	interface Props {
+		ecommerceConditionMappingList: Array<ExtendedEcommerceConditionMap> // mapping between itrack and ebay conditions
+		ecommerceConditionList: Array<EcommerceCondition>
+		inventoryConditionList: Array<string> // unique conditions from inventory table
+		conditionMapChanged: (data: EcommerceConditionMap) => Promise<void>
+	}
+
+	let {
+		ecommerceConditionMappingList = $bindable([]),
+		ecommerceConditionList = [],
+		inventoryConditionList = [],
+		conditionMapChanged = async (_: EcommerceConditionMap) => {},
+	}: Props = $props()
+
+	// New empty items
+	let newConditionMapping: NewConditionMappingState = Object.freeze({
+		itrackCondition: null,
+		ecommerceConditionId: null,
+		description: null,
+	})
+	// Local state
+	let selectedEcommerceConditionMappingRow: SelectedEcommerceConditionMapRow | NewConditionMappingState =
+		$state(newConditionMapping)
+
+	let isEditingConditionMap = $state(false)
+	let show = $state(false)
+
+	let unmappedConditions = $derived(
+		inventoryConditionList.filter(
+			condition =>
+				selectedEcommerceConditionMappingRow?.itrackCondition === condition ||
+				!ecommerceConditionMappingList.some(mapping => mapping.itrackCondition === condition),
+		),
+	)
+
+	function editConditionMapRow(row?: ExtendedEcommerceConditionMap) {
+		// Set selected row
+		selectedEcommerceConditionMappingRow = klona(row || newConditionMapping)
+
+		show = true
+	}
+
+	// Add function to convert condtion row to savable format
+	function convertConditionToSavableFormat(
+		row: SelectedEcommerceConditionMapRow | NewConditionMappingState,
+	): EcommerceConditionMap {
+		// Handle the case where we have a NewConditionMappingState with null values
+		if ('ecommerceConditionMapId' in row && row.ecommerceConditionMapId !== undefined) {
+			// This is an existing record (EcommerceConditionMap or SelectedEcommerceConditionMapRow)
+			return {
+				ecommerceConditionMapId: row.ecommerceConditionMapId,
+				ecommercePartnerId: row.ecommercePartnerId!,
+				itrackCondition: row.itrackCondition!,
+				ecommerceConditionId: row.ecommerceConditionId!,
+				description: row.description || row.itrackCondition!,
+			}
+		} else {
+			// This is a new record - we need to create it without the ID
+			// The API will assign the ID when creating
+			// TODO: is there a way to avoid 'any' here?
+			const newMapping: any = {
+				ecommercePartnerId: row.ecommercePartnerId || 0, // Default value, should be set by parent
+				itrackCondition: row.itrackCondition!,
+				ecommerceConditionId: row.ecommerceConditionId!,
+				description: row.description || row.itrackCondition!,
+			}
+			return newMapping as EcommerceConditionMap
+		}
+	}
+
+	async function confirm() {
+		if (!selectedEcommerceConditionMappingRow) return
+
+		const mappingToSave = convertConditionToSavableFormat(selectedEcommerceConditionMappingRow)
+
+		await conditionMapChanged(mappingToSave)
+		close()
+	}
+	function close() {
+		// Reset related data and flags
+		selectedEcommerceConditionMappingRow = newConditionMapping
+		show = false
+	}
+</script>
+
+<div class="card">
+	<div class="card-header">
+		<h4 class="mb-0">{translate('ecommerce.configuration.conditionMappings', 'Condition Mappings')}</h4>
+		<p class="text-muted mb-0">
+			{translate('ecommerce.configuration.mapConditionValues', 'Map condition values to eBay condition values')}
+		</p>
+	</div>
+	<div class="card-body">
+		<Table
+			parentClass="overflow-y-auto mh-500"
+			rows={ecommerceConditionMappingList}
+			columns={[
+				{
+					property: 'itrackCondition',
+					name: translate('ecommerce.configuration.itrackCondition', 'ITrack Condition'),
+					defaultSortColumn: true,
+				},
+				{ property: 'name', name: translate('ecommerce.configuration.ebayCondition', 'Ebay Condition') },
+				{
+					property: 'description',
+					name: translate('ecommerce.configuration.conditionDescription', 'Condition Description'),
+				},
+			]}
+			stickyHeader
+			responsive
+		>
+			{#snippet children({ row })}
+				<tr
+					onclick={() => editConditionMapRow(row as ExtendedEcommerceConditionMap)}
+					style="cursor: pointer;"
+				>
+					<td>{row.itrackCondition}</td>
+					<td>{row.name}</td>
+					<td>{row.description}</td>
+				</tr>
+			{/snippet}
+		</Table>
+	</div>
+	<div class="card-footer">
+		<Button
+			outline
+			color="success"
+			size="sm"
+			iconClass="plus"
+			onclick={() => editConditionMapRow()}
+			disabled={isEditingConditionMap}
+		>
+			{translate('common:add', 'Add')}...
+		</Button>
+	</div>
+</div>
+<Modal
+	bind:show
+	title={translate('ecommerce.configuration.addEditConditionMapping', 'Add/Edit New Condition Mapping')}
+	modalSize="lg"
+	confirmButtonText={translate('ecommerce.configuration.save', 'Save')}
+	cancelShown
+	{confirm}
+	{close}
+>
+	<Select
+		label={translate('ecommerce.configuration.itrackCondition', 'ITrack Condition')}
+		emptyText="-- {translate('ecommerce.configuration.selectCondition', 'Select Condition')} --"
+		bind:value={selectedEcommerceConditionMappingRow.itrackCondition}
+	>
+		{#each unmappedConditions as itrackCondition}
+			<option value={itrackCondition}>{itrackCondition}</option>
+		{/each}
+	</Select>
+	<Select
+		label={translate('ecommerce.configuration.ecommerceCondition', 'Ecommerce Condition')}
+		emptyText="-- {translate('ecommerce.configuration.selectCondition', 'Select Condition')} --"
+		bind:value={selectedEcommerceConditionMappingRow.ecommerceConditionId}
+	>
+		{#each ecommerceConditionList as ecommerceCondition}
+			<option value={ecommerceCondition.ecommerceConditionId ?? null}>{ecommerceCondition.name}</option>
+		{/each}
+	</Select>
+	<Input
+		label={translate('ecommerce.configuration.conditionDescription', 'Condition Description')}
+		maxlength={1000}
+		bind:value={selectedEcommerceConditionMappingRow.description}
+	/>
+</Modal>

package/dist/EcommerceConditionMapConfiguration.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { EcommerceCondition, EcommerceConditionMap, ExtendedEcommerceConditionMap } from './utils.js';
 interface Props {
-    ecommerceConditionMappingList: ExtendedEcommerceConditionMap[];
-    ecommerceConditionList: EcommerceCondition[];
-    inventoryConditionList: string[];
+    ecommerceConditionMappingList: Array<ExtendedEcommerceConditionMap>;
+    ecommerceConditionList: Array<EcommerceCondition>;
+    inventoryConditionList: Array<string>;
     conditionMapChanged: (data: EcommerceConditionMap) => Promise<void>;
 }
 declare const EcommerceConditionMapConfiguration: import("svelte").Component<Props, {}, "ecommerceConditionMappingList">;