@isoftdata/svelte-ecommerce 1.0.0-beta.4 → 1.0.0-beta.6

package/dist/EcommerceConditionMapConfiguration.svelte

@@ -1,192 +1,192 @@
-<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>
+<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>