feat(admin): add shipping methods input

apps/admin-component-tests/src/__tests__/__snapshots__/exports.spec.ts.snap

@@ -33,6 +33,7 @@ exports[`exports > exports from index.ts 1`] = `
   "NotificationsView",
   "OrderBoxView",
   "OrderListItemView",
+  "PackageType",
   "PdkAdmin",
   "PlainElement",
   "PluginSettingsView",
@@ -95,6 +96,7 @@ exports[`exports > exports from index.ts 1`] = `
   "prefixComponent",
   "refreshAccountAction",
   "requiredAdminComponentNames",
+  "resolveFormComponent",
   "resolveOrderParameters",
   "resolvePrintParameters",
   "resolveQuerySuffix",
@@ -116,6 +118,7 @@ exports[`exports > exports from index.ts 1`] = `
   "useDropdownData",
   "useElement",
   "useElementContext",
+  "useElementOptions",
   "useExportOrdersMutation",
   "useExportReturnMutation",
   "useFetchContextQuery",
@@ -130,6 +133,7 @@ exports[`exports > exports from index.ts 1`] = `
   "useGlobalPdkAdmin",
   "useInputWithOptionsContext",
   "useLanguage",
+  "useLoadMore",
   "useLogger",
   "useModalContext",
   "useModalElementContext",
@@ -144,6 +148,7 @@ exports[`exports > exports from index.ts 1`] = `
   "useQueryStore",
   "useRadioGroupContext",
   "useSelectInputContext",
+  "useShippingMethodsInputContext",
   "useStoreQuery",
   "useTriStateInputContext",
   "useUpdateAccountMutation",

apps/admin-component-tests/src/components/index.ts

@@ -24,6 +24,7 @@ export * from './runRadioInputTest';
 export * from './runRowTest';
 export * from './runSelectInputTest';
 export * from './runSettingsDividerTest';
+export * from './runShippingMethodsInputTest';
 export * from './runTabNavButtonTest';
 export * from './runTableColTest';
 export * from './runTableRowTest';

apps/admin-component-tests/src/components/runShippingMethodsInputTest.ts

@@ -0,0 +1,22 @@
+import {type SelectOption} from '@myparcel-pdk/admin';
+import {type AdminComponentTest} from '../tests';
+import {createInputOptions} from '../helpers';
+import {runCommonComponentTests} from '../common';
+
+const SELECT_OPTIONS = Object.freeze([
+  {value: '1', label: 'One'},
+  {value: '2', label: 'Two'},
+  {value: '3', label: 'Three'},
+  {value: '4', label: 'Four'},
+  {value: '5', label: 'Five'},
+] satisfies SelectOption[]);
+
+export const runShippingMethodsInputTest = ((component) => {
+  const options = createInputOptions('2', {props: {options: SELECT_OPTIONS}});
+
+  runCommonComponentTests(component, options);
+  // TODO: figure out why this throws an undefined import error on AdminComponent
+  // runCommonInputTests(component, options, {value: '1'});
+
+  // TODO add more tests
+}) satisfies AdminComponentTest;

apps/admin-component-tests/src/tests/testMap.ts

@@ -27,6 +27,7 @@ import {
   runRowTest,
   runSelectInputTest,
   runSettingsDividerTest,
+  runShippingMethodsInputTest,
   runTableColTest,
   runTableRowTest,
   runTableTest,
@@ -53,6 +54,7 @@ export const testMap: Readonly<Record<AdminComponent, AdminComponentTest>> = Obj
   [AdminComponent.RadioGroup]: runRadioGroupTest,
   [AdminComponent.RadioInput]: runRadioInputTest,
   [AdminComponent.SelectInput]: runSelectInputTest,
+  [AdminComponent.ShippingMethodsInput]: runShippingMethodsInputTest,
   [AdminComponent.TextArea]: runTextAreaTest,
   [AdminComponent.TextInput]: runTextInputTest,
   [AdminComponent.TimeInput]: runTimeInputTest,

apps/admin-demo/src/main.ts

@@ -21,6 +21,7 @@ import {
   DefaultNumberInput,
   DefaultRadioGroup,
   DefaultRadioInput,
+  DefaultShippingMethodsInput,
   DefaultTableCol,
   DefaultTableRow,
   DefaultTextArea,
@@ -126,6 +127,7 @@ void (async () => {
         PdkRadioInput: DefaultRadioInput,
         PdkRow: DemoRow,
         PdkSelectInput: DemoSelectInput,
+        PdkShippingMethodsInput: DefaultShippingMethodsInput,
         PdkTabNavButton: DemoTabNavButton,
         PdkTable: DemoTable,
         PdkTableCol: DefaultTableCol,

apps/admin-js/src/__tests__/__snapshots__/exports.spec.ts.snap

@@ -33,6 +33,7 @@ exports[`exports > exports from index.ts 1`] = `
   "NotificationsView",
   "OrderBoxView",
   "OrderListItemView",
+  "PackageType",
   "PdkAdmin",
   "PlainElement",
   "PluginSettingsView",
@@ -93,6 +94,7 @@ exports[`exports > exports from index.ts 1`] = `
   "prefixComponent",
   "refreshAccountAction",
   "requiredAdminComponentNames",
+  "resolveFormComponent",
   "resolveOrderParameters",
   "resolvePrintParameters",
   "resolveQuerySuffix",
@@ -114,6 +116,7 @@ exports[`exports > exports from index.ts 1`] = `
   "useDropdownData",
   "useElement",
   "useElementContext",
+  "useElementOptions",
   "useExportOrdersMutation",
   "useExportReturnMutation",
   "useFetchContextQuery",
@@ -128,6 +131,7 @@ exports[`exports > exports from index.ts 1`] = `
   "useGlobalPdkAdmin",
   "useInputWithOptionsContext",
   "useLanguage",
+  "useLoadMore",
   "useLogger",
   "useModalContext",
   "useModalElementContext",
@@ -142,6 +146,7 @@ exports[`exports > exports from index.ts 1`] = `
   "useQueryStore",
   "useRadioGroupContext",
   "useSelectInputContext",
+  "useShippingMethodsInputContext",
   "useStoreQuery",
   "useTriStateInputContext",
   "useUpdateAccountMutation",

apps/admin-preset-default/src/__tests__/__snapshots__/exports.spec.ts.snap

@@ -28,6 +28,7 @@ exports[`exports > exports from index.ts 1`] = `
   "DefaultRow",
   "DefaultSelectInput",
   "DefaultSettingsDivider",
+  "DefaultShippingMethodsInput",
   "DefaultTabNavButton",
   "DefaultTable",
   "DefaultTableCol",

apps/admin-preset-default/src/__tests__/testComponents.spec.ts

@@ -26,6 +26,7 @@ import {
   DefaultRow,
   DefaultSelectInput,
   DefaultSettingsDivider,
+  DefaultShippingMethodsInput,
   DefaultTable,
   DefaultTableCol,
   DefaultTableRow,
@@ -64,6 +65,7 @@ executePdkComponentTests({
   Row: DefaultRow,
   SelectInput: DefaultSelectInput,
   SettingsDivider: DefaultSettingsDivider,
+  ShippingMethodsInput: DefaultShippingMethodsInput,
   TabNavButton: DefaultTabNavButton,
   Table: DefaultTable,
   TableCol: DefaultTableCol,

apps/admin-preset-default/src/components/DefaultShippingMethodsInput.vue

@@ -0,0 +1,75 @@
+<template>
+  <div v-test="[AdminComponent.ShippingMethodsInput, element]">
+    <PdkTable>
+      <PdkTableRow>
+        <PdkTableCol component="th" />
+
+        <PdkTableCol
+          v-for="shippingMethodType in shippingMethodTypes"
+          :key="shippingMethodType"
+          component="th"
+          :class="config?.cssUtilities?.whitespaceNoWrap">
+          <PackageType
+            v-if="isEnumValue(shippingMethodType.value, PackageTypeName)"
+            :package-type="shippingMethodType.value" />
+
+          <span
+            v-else
+            v-text="translate(shippingMethodType.label)" />
+        </PdkTableCol>
+      </PdkTableRow>
+
+      <PdkTableRow
+        v-for="shippingMethod in items"
+        :key="shippingMethod.value">
+        <PdkTableCol
+          component="th"
+          :class="config?.cssUtilities?.whitespaceNoWrap">
+          {{ shippingMethod.label }}
+        </PdkTableCol>
+
+        <PdkTableCol
+          v-for="shippingMethodType in shippingMethodTypes"
+          :key="`${shippingMethod.value}-${shippingMethodType.value}}`"
+          :class="config?.cssUtilities?.textCenter">
+          <PdkRadioInput
+            v-model="refs[shippingMethod.value]"
+            :element="elements[shippingMethod.value][shippingMethodType.value]" />
+        </PdkTableCol>
+      </PdkTableRow>
+    </PdkTable>
+
+    <a
+      v-if="hasMore"
+      href="#"
+      @click.prevent="loadMore"
+      v-text="translate('load_more')" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  AdminComponent,
+  PackageType,
+  type ShippingMethodsInputEmits,
+  type ShippingMethodsInputProps,
+  useAdminConfig,
+  useLanguage,
+  useLoadMore,
+  useShippingMethodsInputContext,
+} from '@myparcel-pdk/admin';
+import {isEnumValue} from '@myparcel/ts-utils';
+import {PackageTypeName} from '@myparcel/constants';
+
+// eslint-disable-next-line vue/no-unused-properties
+const props = defineProps<ShippingMethodsInputProps>();
+const emit = defineEmits<ShippingMethodsInputEmits>();
+
+const {translate} = useLanguage();
+
+const config = useAdminConfig();
+
+const {shippingMethods, elements, shippingMethodTypes, refs} = useShippingMethodsInputContext(props, emit);
+
+const {items, hasMore, loadMore} = useLoadMore({items: shippingMethods, step: 5});
+</script>

apps/admin-preset-default/src/components/DefaultTable.vue

@@ -6,12 +6,17 @@
     </thead>
 
     <TransitionGroup
-      :name="config?.transitions?.tableRow"
+      v-if="transitionName"
+      :name="transitionName"
       tag="tbody">
       <!-- Table body -->
       <slot />
     </TransitionGroup>
 
+    <tbody v-else>
+      <slot />
+    </tbody>
+
     <tfoot v-if="$slots.footer">
       <!-- Table footer -->
       <slot name="footer" />
@@ -23,7 +28,14 @@
 /**
  * A table component that can be used to render data via slots.
  */
+import {computed} from 'vue';
 import {AdminComponent, useAdminConfig} from '@myparcel-pdk/admin';
 
+const props = defineProps<{transition?: false | string}>();
+
 const config = useAdminConfig();
+
+const transitionName = computed(() => {
+  return props.transition === false ? undefined : props.transition ?? config.transitions?.tableRow;
+});
 </script>

apps/admin-preset-default/src/components/index.ts

@@ -50,6 +50,8 @@ export {default as DefaultSelectInput} from './DefaultSelectInput.vue';
 
 export {default as DefaultSettingsDivider} from './DefaultSettingsDivider.vue';
 
+export {default as DefaultShippingMethodsInput} from './DefaultShippingMethodsInput.vue';
+
 export {default as DefaultTabNavButton} from './DefaultTabNavButton.vue';
 
 export {default as DefaultTable} from './DefaultTable.vue';

apps/admin/src/__tests__/__snapshots__/exports.spec.ts.snap

@@ -33,6 +33,7 @@ exports[`exports > exports from index.ts 1`] = `
   "NotificationsView",
   "OrderBoxView",
   "OrderListItemView",
+  "PackageType",
   "PdkAdmin",
   "PlainElement",
   "PluginSettingsView",
@@ -93,6 +94,7 @@ exports[`exports > exports from index.ts 1`] = `
   "prefixComponent",
   "refreshAccountAction",
   "requiredAdminComponentNames",
+  "resolveFormComponent",
   "resolveOrderParameters",
   "resolvePrintParameters",
   "resolveQuerySuffix",
@@ -114,6 +116,7 @@ exports[`exports > exports from index.ts 1`] = `
   "useDropdownData",
   "useElement",
   "useElementContext",
+  "useElementOptions",
   "useExportOrdersMutation",
   "useExportReturnMutation",
   "useFetchContextQuery",
@@ -128,6 +131,7 @@ exports[`exports > exports from index.ts 1`] = `
   "useGlobalPdkAdmin",
   "useInputWithOptionsContext",
   "useLanguage",
+  "useLoadMore",
   "useLogger",
   "useModalContext",
   "useModalElementContext",
@@ -142,6 +146,7 @@ exports[`exports > exports from index.ts 1`] = `
   "useQueryStore",
   "useRadioGroupContext",
   "useSelectInputContext",
+  "useShippingMethodsInputContext",
   "useStoreQuery",
   "useTriStateInputContext",
   "useUpdateAccountMutation",

apps/admin/src/components/common/DeliveryOptionsPackageType.vue

@@ -2,14 +2,10 @@
   <span
     v-if="resolved.deliveryOptions?.packageType"
     v-test="[$.type.__name, resolved.deliveryOptions.packageType]">
-    <PdkIcon :icon="resolved.deliveryOptions.packageType" />
-
-    <span
-      :title="translate(getPackageTypeTranslation())"
-      v-text="translate(getPackageTypeTranslation(resolved.deliveryOptions.packageType))" />
+    <PackageType :package-type="resolved.deliveryOptions.packageType" />
 
     <DigitalStampWeightRange
-      v-if="weight && resolved.deliveryOptions?.packageType === PackageTypeName.DigitalStamp"
+      v-if="weight && resolved.deliveryOptions.packageType === PackageTypeName.DigitalStamp"
       :weight="weight" />
   </span>
 </template>
@@ -20,14 +16,11 @@
 import {type Plugin, type Shipment} from '@myparcel-pdk/common';
 import {isOfType} from '@myparcel/ts-utils';
 import {PackageTypeName} from '@myparcel/constants';
-import {getPackageTypeTranslation} from '../../utils';
-import {useLanguage} from '../../composables';
+import PackageType from './PackageType.vue';
 import DigitalStampWeightRange from './DigitalStampWeightRange.vue';
 
 const props = defineProps<{shipmentOrOrder: MaybeRef<Shipment.ModelShipment | Plugin.ModelPdkOrder>}>();
 
-const {translate} = useLanguage();
-
 const resolved = computed(() => get(props.shipmentOrOrder));
 
 const weight = computed(() => {

apps/admin/src/components/common/PackageType.vue

@@ -0,0 +1,16 @@
+<template>
+  <PdkIcon :icon="packageType" />
+  <span
+    :title="translate(getPackageTypeTranslation())"
+    v-text="translate(getPackageTypeTranslation(packageType))" />
+</template>
+
+<script lang="ts" setup>
+import {type PackageTypeName} from '@myparcel/constants';
+import {getPackageTypeTranslation} from '../../utils';
+import {useLanguage} from '../../composables';
+
+const props = defineProps<{packageType: PackageTypeName | string}>();
+
+const {translate} = useLanguage();
+</script>

apps/admin/src/components/common/index.ts

@@ -4,6 +4,8 @@ export {default as BulkSelectCheckbox} from './BulkSelectCheckbox.vue';
 
 export {default as NotificationContainer} from './NotificationContainer.vue';
 
+export {default as PackageType} from './PackageType.vue';
+
 export {default as PlainElement} from './PlainElement';
 
 export {default as ResetButton} from './ResetButton.vue';