@myparcel-dev/pdk-admin 1.13.0

package/src/actions/executors/executeBeforeHandle.ts

@@ -0,0 +1,29 @@
+import {StopActionHandler} from '../stopActionHandler';
+import {type MaybeActionParameters, type MaybeAdminAction} from '../../types';
+import {type ActionContext} from './types';
+
+const BEFORE_HANDLE = 'beforeHandle';
+
+export async function executeBeforeHandle<A extends MaybeAdminAction>(
+  context: ActionContext<A>,
+): Promise<MaybeActionParameters<A> | StopActionHandler> {
+  const {action, instance, parameters} = context;
+
+  try {
+    // @ts-expect-error todo
+    const resolvedParameters = (await action.beforeHandle?.(context)) ?? parameters;
+
+    instance.logger.debug(BEFORE_HANDLE, {parameters, resolvedParameters});
+
+    // @ts-expect-error todo
+    context.parameters = resolvedParameters;
+  } catch (error) {
+    if (error instanceof StopActionHandler) {
+      return error;
+    }
+
+    instance.logger.error(BEFORE_HANDLE, error);
+  }
+
+  return context.parameters as MaybeActionParameters<A>;
+}

package/src/actions/executors/executeHandler.ts

@@ -0,0 +1,34 @@
+import {type ActionResponse, type MaybeAdminAction} from '../../types';
+import {useNotificationStore} from '../../stores';
+import {NotificationCategory} from '../../data';
+import {type ActionContext} from './types';
+
+const HANDLER = 'handler';
+
+export async function executeHandler<A extends MaybeAdminAction>(
+  context: ActionContext<A>,
+): Promise<ActionResponse<A> | undefined> {
+  const {action, notifications, instance} = context;
+  const store = useNotificationStore();
+
+  store.remove(NotificationCategory.Action);
+
+  try {
+    // @ts-expect-error todo
+    const response = await action.handler(context);
+
+    instance.logger.debug(HANDLER, {response});
+
+    if (notifications?.success) {
+      store.add({...notifications.success, timeout: true}, context.parameters);
+    }
+
+    return response as ActionResponse<A>;
+  } catch (error) {
+    if (notifications?.error && error instanceof Error) {
+      store.add({...notifications.error, timeout: false, content: error.message}, context.parameters);
+    }
+
+    instance.logger.error(HANDLER, error);
+  }
+}

package/src/actions/executors/executeNextAction.ts

@@ -0,0 +1,34 @@
+import {
+  type ActionParameters,
+  type AdminContext,
+  type AnyActionDefinition,
+  type MaybeActionResponse,
+  type MaybeAdminAction,
+} from '../../types';
+import {createActionContext, createLogger, getActionIdentifier} from '../../services';
+import {type ActionContextWithResponse} from './types';
+import {executeAction} from './executeAction';
+
+/**
+ * Used to execute the next action in a chain. Propagates the context to the next action.
+ */
+export const executeNextAction = async <Next extends MaybeAdminAction, Prev extends MaybeAdminAction>(
+  context: ActionContextWithResponse<Prev>,
+  nextAction: AnyActionDefinition<Next>,
+  parameters?: ActionParameters<Next>,
+): Promise<MaybeActionResponse<Next>> => {
+  const {instance} = context;
+  const nextActionIdentifier = getActionIdentifier(nextAction);
+
+  instance.logger.debug(`Executing next action: ${nextActionIdentifier}`);
+
+  const newContext = {
+    ...context,
+    ...createActionContext(nextAction, parameters, {
+      ...instance,
+      logger: createLogger(`↳ ${nextActionIdentifier}`, instance.logger.level),
+    }),
+  } as AdminContext<Next>;
+
+  return executeAction(newContext);
+};

package/src/actions/executors/index.ts

@@ -0,0 +1,14 @@
+export * from './createHandlerWithParameters';
+export * from './createMutationHandler';
+export * from './createOrdersMutationHandler';
+export * from './createQueryHandler';
+export * from './createShipmentsMutationHandler';
+export * from './doMutate';
+export * from './executeAction';
+export * from './executeAfterHandle';
+export * from './executeBeforeHandle';
+export * from './executeHandler';
+export * from './executeNextAction';
+export * from './resolveOrderParameters';
+export * from './resolveQuerySuffix';
+export * from './types';

package/src/actions/executors/resolveOrderParameters.ts

@@ -0,0 +1,19 @@
+import {toValue} from 'vue';
+import {useFormBuilder} from '@myparcel-dev/vue-form-builder';
+import {createShipmentFormName, getOrderId} from '../../utils';
+import {type ActionParameters, type OrderAction} from '../../types';
+import {type ActionContext} from './types';
+
+export const resolveOrderParameters = <A extends OrderAction>({
+  parameters,
+  instance,
+}: ActionContext<A>): Promise<ActionParameters<A>> => {
+  const formBuilder = useFormBuilder();
+
+  parameters.orderIds ??= getOrderId(instance);
+
+  // @ts-expect-error todo
+  parameters.form ??= toValue(formBuilder.forms)?.[createShipmentFormName(parameters.orderIds)];
+
+  return Promise.resolve(parameters as ActionParameters<A>);
+};

package/src/actions/executors/resolveQuerySuffix.ts

@@ -0,0 +1,10 @@
+import {type BackendEndpoint} from '@myparcel-dev/pdk-common';
+import {type ActionContext, type PlainModifier, type QueryModifier} from './types';
+
+export const resolveQuerySuffix = <E extends BackendEndpoint>(
+  suffix: QueryModifier<E>,
+  context: ActionContext<E>,
+): PlainModifier => {
+  // @ts-expect-error todo
+  return typeof suffix === 'function' ? suffix(context) : suffix;
+};

package/src/actions/executors/types.ts

@@ -0,0 +1,45 @@
+import {type BackendEndpoint, type Variant} from '@myparcel-dev/pdk-common';
+import {type OneOrMore, type PromiseOr} from '@myparcel-dev/ts-utils';
+import {
+  type ActionParameters,
+  type ActionResponse,
+  type AdminInstance,
+  type AnyActionDefinition,
+  type BackendEndpointResponse,
+  type EndpointAdminActionMap,
+  type MaybeAdminAction,
+  type PdkNotification,
+} from '../../types';
+import {type AdminAction} from '../../data';
+
+export type ResolvedAdminAction<A extends undefined | MaybeAdminAction | BackendEndpoint> = A extends MaybeAdminAction
+  ? A
+  : A extends keyof EndpointAdminActionMap
+  ? EndpointAdminActionMap[A]
+  : never;
+
+export interface ActionContext<
+  A extends MaybeAdminAction | BackendEndpoint = undefined,
+  R extends ResolvedAdminAction<A> = ResolvedAdminAction<A>,
+> {
+  action: AnyActionDefinition<R>;
+  instance: AdminInstance;
+  notifications: Record<Variant, PdkNotification>;
+  parameters: ActionParameters<R>;
+}
+
+export interface ActionContextWithResponse<A extends MaybeAdminAction = undefined> extends ActionContext<A> {
+  response: ActionResponse<A>;
+}
+
+export type PlainModifier = string | number | undefined;
+
+type ModifierCallback<A extends AdminAction | BackendEndpoint> = (context: ActionContext<A>) => PlainModifier;
+
+export type QueryModifier<A extends undefined | AdminAction | BackendEndpoint = AdminAction> =
+  | PlainModifier
+  | (A extends BackendEndpoint ? ModifierCallback<A> : never);
+
+export type QueryHandler<E extends BackendEndpoint = BackendEndpoint> = (
+  context: ActionContext<E>,
+) => PromiseOr<OneOrMore<BackendEndpointResponse<E>> | void>;

package/src/actions/index.ts

@@ -0,0 +1,6 @@
+export * from './composables';
+export * from './defineAction';
+export * from './definitions';
+export * from './executors';
+export * from './print';
+export * from './stopActionHandler';

package/src/actions/print/index.ts

@@ -0,0 +1,3 @@
+export * from './openOrPrintPdf';
+export * from './resolvePrintParameters';
+export * from './waitForLabelPrompt';

package/src/actions/print/openOrPrintPdf.ts

@@ -0,0 +1,16 @@
+import {isOfType} from '@myparcel-dev/ts-utils';
+import {type ActionContextWithResponse} from '../executors';
+import {generateLabelFilename} from '../../utils';
+import {type PdfDataResponse, type PrintAction} from '../../types';
+import {downloadFile, openPdfInNewWindow} from '../../services';
+
+export const openOrPrintPdf = async <A extends PrintAction>({
+  response,
+  parameters,
+}: ActionContextWithResponse<A>): Promise<void> => {
+  if (isOfType<PdfDataResponse>(response, 'data')) {
+    return openPdfInNewWindow(response.data);
+  }
+
+  await downloadFile(response.url, generateLabelFilename(parameters));
+};

package/src/actions/print/resolvePrintParameters.ts

@@ -0,0 +1,24 @@
+import {toArray} from '@myparcel-dev/ts-utils';
+import {type ActionContext} from '../executors';
+import {type ActionParameters, type PrintAction} from '../../types';
+import {usePluginSettings} from '../../composables';
+import {waitForLabelPrompt} from './waitForLabelPrompt';
+
+export const resolvePrintParameters = <A extends PrintAction>(
+  context: ActionContext<A>,
+): Promise<ActionParameters<A>> => {
+  const pluginSettings = usePluginSettings();
+
+  if (!pluginSettings.label.prompt) {
+    const {output, position, format} = pluginSettings.label;
+
+    return Promise.resolve({
+      ...(context.parameters as ActionParameters<A>),
+      output,
+      format,
+      position: toArray(position),
+    });
+  }
+
+  return waitForLabelPrompt(context);
+};

package/src/actions/print/waitForLabelPrompt.ts

@@ -0,0 +1,39 @@
+import {markRaw} from 'vue';
+import {FormHook, useFormBuilder} from '@myparcel-dev/vue-form-builder';
+import {StopActionHandler} from '../stopActionHandler';
+import {type ActionContext} from '../executors';
+import {type ActionParameters, type PrintAction} from '../../types';
+import {useModalStore} from '../../stores';
+import {AdminModalKey} from '../../data';
+
+export const waitForLabelPrompt = <A extends PrintAction>({
+  parameters,
+}: ActionContext<A>): Promise<ActionParameters<A>> => {
+  const formBuilder = useFormBuilder();
+  const modalStore = useModalStore();
+
+  return new Promise((resolve, reject) => {
+    formBuilder.on('afterRegister', (form) => {
+      modalStore.context ??= {};
+      // @ts-expect-error infinitely deep instantiation
+      modalStore.context.form = markRaw(form);
+
+      if (form.name !== AdminModalKey.PrintOptions) {
+        return;
+      }
+
+      form.on(FormHook.AfterSubmit, (instance) => {
+        resolve({
+          ...parameters,
+          ...instance.getValues(),
+        } as ActionParameters<A>);
+      });
+    });
+
+    modalStore.onClose(() => {
+      reject(new StopActionHandler());
+    });
+
+    modalStore.open(AdminModalKey.PrintOptions);
+  });
+};

package/src/actions/stopActionHandler.ts

@@ -0,0 +1 @@
+export class StopActionHandler extends Error {}

package/src/components/OrderBox/OrderShipmentsTable.vue

@@ -0,0 +1,53 @@
+<template>
+  <PdkTable
+    v-test="$.type.__name"
+    class="mb-0">
+    <template #header>
+      <PdkTableRow>
+        <PdkTableCol component="th">
+          <BulkSelectCheckbox
+            v-model="bulkModel"
+            :options="bulkOptions" />
+        </PdkTableCol>
+
+        <PdkTableCol component="th">{{ translate(`${translationPrefix}track_trace`) }}</PdkTableCol>
+
+        <PdkTableCol component="th">{{ translate(`${translationPrefix}status`) }}</PdkTableCol>
+
+        <PdkTableCol component="th">{{ translate(`${translationPrefix}last_update`) }}</PdkTableCol>
+
+        <PdkTableCol
+          align="right"
+          component="th">
+          {{ translate(`${translationPrefix}actions`) }}
+        </PdkTableCol>
+      </PdkTableRow>
+    </template>
+
+    <template #default>
+      <OrderShipmentsTableRow
+        v-for="shipment in data?.shipments"
+        :key="`row_${shipment.id}_${shipment.updated}`"
+        v-model="bulkModel[shipment.id]"
+        :shipment-id="shipment.id" />
+    </template>
+  </PdkTable>
+</template>
+
+<script lang="ts" setup>
+import {computed, toValue} from 'vue';
+import {BulkSelectCheckbox} from '../common';
+import {type PdkBulkSelectCheckboxEmits, useBulkSelectCheckbox, useLanguage, useOrderData} from '../../composables';
+import OrderShipmentsTableRow from './OrderShipmentsTableRow.vue';
+
+const emit = defineEmits<PdkBulkSelectCheckboxEmits>();
+
+const {query} = useOrderData();
+const data = computed(() => toValue(query.data));
+
+const {bulkModel, bulkOptions} = useBulkSelectCheckbox(query.data.value?.shipments?.map(({id}) => id) ?? [], emit);
+
+const {translate} = useLanguage();
+
+const translationPrefix = 'order_labels_column_';
+</script>

package/src/components/OrderBox/OrderShipmentsTableRow.vue

@@ -0,0 +1,81 @@
+<template>
+  <PdkTableRow
+    v-test="[$.type.__name, shipmentId]"
+    :class="classes">
+    <PdkTableCol>
+      <PdkCheckboxInput
+        v-model="selected"
+        :element="checkboxElement"
+        :value="shipmentId" />
+    </PdkTableCol>
+
+    <PdkTableCol>
+      <ShipmentBarcode :shipment-id="shipmentId" />
+    </PdkTableCol>
+
+    <PdkTableCol>
+      <ShipmentStatus :shipment-id="shipmentId" />
+    </PdkTableCol>
+
+    <PdkTableCol>
+      <span
+        :title="shipment.updated?.date"
+        v-text="shipmentUpdatedAt" />
+    </PdkTableCol>
+
+    <PdkTableCol align="right">
+      <PdkDropdownButton :actions="actions" />
+    </PdkTableCol>
+  </PdkTableRow>
+</template>
+
+<script lang="ts" setup>
+import {computed, toRefs} from 'vue';
+import {useVModel} from '@vueuse/core';
+import {type InteractiveElementInstance} from '@myparcel-dev/vue-form-builder';
+import {ShipmentBarcode, ShipmentStatus} from '../common';
+import {createClasses} from '../../utils';
+import {useQueryStore} from '../../stores';
+import {Format, useAdminConfig, useLocalizedFormatter, useShipmentData} from '../../composables';
+
+const props = defineProps<{
+  shipmentId: number;
+  // eslint-disable-next-line vue/no-unused-properties
+  modelValue?: boolean;
+}>();
+
+const {shipmentId} = toRefs(props);
+
+const emit = defineEmits<(event: 'update:modelValue', value: boolean) => void>();
+
+const config = useAdminConfig();
+const formatter = useLocalizedFormatter();
+const queryStore = useQueryStore();
+
+queryStore.registerShipmentQueries(shipmentId);
+
+const {loading, actions, shipment} = useShipmentData(shipmentId);
+
+const selected = useVModel(props, undefined, emit);
+
+const checkboxElement = {
+  id: `shipment_${shipmentId.value}`,
+  ref: selected,
+  form: {
+    name: `shipment-${shipmentId.value}`,
+  },
+} as unknown as InteractiveElementInstance;
+
+const shipmentUpdatedAt = computed(() => {
+  return shipment.value.updated ? formatter.format(Format.DateRelative, shipment.value.updated) : '–';
+});
+
+const classes = computed(() => {
+  return createClasses([
+    {
+      key: config?.cssUtilities?.animationLoading,
+      value: loading.value,
+    },
+  ]);
+});
+</script>

package/src/components/OrderBox/ShipmentOptionsBox.vue

@@ -0,0 +1,74 @@
+<template>
+  <PdkConceptBoxWrapper
+    v-test="[$.type.__name, data?.externalIdentifier]"
+    :actions="actions"
+    :loading="loading">
+    <template #header>
+      <PdkIcon :icon="AdminIcon.Shipment" />
+      <span>{{ translate('shipment_options_title') }} #{{ data?.externalIdentifier }}</span>
+    </template>
+
+    <template #default>
+      <PdkRow>
+        <PdkCol>
+          <template v-if="isExported">
+            {{ translate('notification_order_exported') }}
+          </template>
+
+          <ShipmentOptionsForm
+            v-else
+            :order="data?.externalIdentifier" />
+        </PdkCol>
+      </PdkRow>
+
+      <PdkRow>
+        <PdkCol>
+          <NotificationContainer
+            :category="NotificationCategory.Action" />
+        </PdkCol>
+      </PdkRow>
+    </template>
+  </PdkConceptBoxWrapper>
+</template>
+
+<script lang="ts" setup>
+import {computed, toValue} from 'vue';
+import {ShipmentOptionsForm} from '../common';
+import {instantiateActions} from '../../services';
+import {AdminIcon, NotificationCategory} from '../../data';
+import {useLanguage, useOrderData, usePluginSettings} from '../../composables';
+import {
+  orderExportAction,
+  orderExportToShipmentsAction,
+  ordersExportPrintShipmentsAction,
+  ordersPrintAction,
+  ordersUpdateAction,
+  orderViewInBackofficeAction,
+} from '../../actions';
+import {NotificationContainer} from '../../components';
+
+const {order: data, loading} = useOrderData();
+
+const {translate} = useLanguage();
+const pluginSettings = usePluginSettings();
+
+const {orderMode} = pluginSettings.order;
+
+const isExported = computed(() => pluginSettings.order.orderMode && toValue(data)?.exported);
+
+const actions = computed(() => {
+  if (isExported.value) {
+    return instantiateActions(orderViewInBackofficeAction);
+  }
+
+  return instantiateActions(
+    [
+      ordersUpdateAction,
+      ...(orderMode
+        ? [orderExportAction]
+        : [orderExportToShipmentsAction, ordersPrintAction, ordersExportPrintShipmentsAction]),
+    ],
+    {orderIds: toValue(data)?.externalIdentifier},
+  );
+});
+</script>

package/src/components/OrderBox/ShipmentTableBox.vue

@@ -0,0 +1,51 @@
+<template>
+  <PdkBox v-test="[$.type.__name, order?.externalIdentifier]">
+    <template #header>
+      <PdkIcon :icon="AdminIcon.Shipment" />
+      {{ translate('order_labels_header') }}
+    </template>
+
+    <template #default>
+      <OrderShipmentsTable @select="setSelectedLabels" />
+    </template>
+
+    <template #footer>
+      <PdkDropdownButton
+        :actions="bulkActions"
+        :disabled="!selectedLabels.length">
+        {{ translate('bulk_actions') }}
+
+        <PdkBadge v-if="selectedLabels.length">
+          {{ selectedLabels.length }}
+        </PdkBadge>
+      </PdkDropdownButton>
+    </template>
+  </PdkBox>
+</template>
+
+<script lang="ts" setup>
+import {computed, ref, toRaw, toValue} from 'vue';
+import {isDef} from '@vueuse/core';
+import {instantiateActions} from '../../services';
+import {AdminIcon} from '../../data';
+import {useLanguage, useOrderData} from '../../composables';
+import {shipmentActions} from '../../actions';
+import OrderShipmentsTable from './OrderShipmentsTable.vue';
+
+const {order} = useOrderData();
+
+const selectedLabels = ref<(string | number)[]>([]);
+
+const bulkActions = computed(() => {
+  return instantiateActions(shipmentActions, {
+    orderIds: toValue(order)?.externalIdentifier,
+    shipmentIds: toRaw(selectedLabels.value),
+  });
+});
+
+const setSelectedLabels = (labels: Record<string | number, boolean>): void => {
+  selectedLabels.value = Object.keys(labels).filter((id) => isDef(labels[id]));
+};
+
+const {translate} = useLanguage();
+</script>

package/src/components/OrderListItem/OrderModeOrderListItem.vue

@@ -0,0 +1,45 @@
+<template>
+  <DeliveryOptionsExcerpt v-if="shipments.length === 0" />
+
+  <ShipmentLabel
+    v-for="shipment in data?.shipments ?? []"
+    :key="`${data?.externalIdentifier}_${shipment.id}`"
+    :shipment-id="shipment.id" />
+
+  <PdkButtonGroup v-test="[$.type.__name, order?.externalIdentifier]">
+    <template v-if="order?.exported">
+      <PdkLink :action="showExportedOrderAction" />
+    </template>
+
+    <template v-else>
+      <ActionButton
+        v-for="action in orderActions"
+        :key="action.id"
+        :action="action"
+        :size="Size.Small"
+        hide-text />
+    </template>
+  </PdkButtonGroup>
+</template>
+
+<script lang="ts" setup>
+import {computed, toValue} from 'vue';
+import {Size} from '@myparcel-dev/pdk-common';
+import {ActionButton, DeliveryOptionsExcerpt} from '../common';
+import {instantiateAction, instantiateActions} from '../../services';
+import {useOrderData} from '../../composables';
+import {orderExportAction, ordersEditAction, orderViewInBackofficeAction} from '../../actions';
+import ShipmentLabel from './ShipmentLabel.vue';
+
+const {query, order} = useOrderData();
+
+const data = computed(() => toValue(query.data));
+
+const shipments = computed(() => toValue(data)?.shipments ?? []);
+
+const showExportedOrderAction = instantiateAction(orderViewInBackofficeAction);
+
+const orderActions = instantiateActions([ordersEditAction, orderExportAction], {
+  orderIds: order.value?.externalIdentifier,
+});
+</script>

package/src/components/OrderListItem/ShipmentLabel.vue

@@ -0,0 +1,44 @@
+<template>
+  <PdkShipmentLabelWrapper
+    v-test="[$.type.__name, shipmentId]"
+    :class="config?.cssUtilities?.cursorDefault"
+    :loading="loading"
+    @click.stop>
+    <div :class="config?.cssUtilities?.displayFlex">
+      <ShipmentBarcode :shipment-id="shipmentId" />
+
+      <PdkDropdownButton
+        :actions="actions"
+        :class="config?.cssUtilities?.marginLAuto"
+        :disabled="loading"
+        :hide-text="true"
+        size="xs" />
+    </div>
+
+    <div :class="config?.cssUtilities?.displayFlex">
+      <DeliveryOptionsPackageType
+        :class="config?.cssUtilities?.flexGrow"
+        :shipment-or-order="data" />
+
+      <div :class="config?.cssUtilities?.flexGrow">
+        <ShipmentStatus :shipment-id="shipmentId" />
+      </div>
+    </div>
+  </PdkShipmentLabelWrapper>
+</template>
+
+<script lang="ts" setup>
+import {toRefs} from 'vue';
+import {DeliveryOptionsPackageType, ShipmentBarcode, ShipmentStatus} from '../common';
+import {useQueryStore} from '../../stores';
+import {useAdminConfig, useShipmentData} from '../../composables';
+
+const props = defineProps<{shipmentId: number}>();
+
+const {shipmentId} = toRefs(props);
+
+useQueryStore().registerShipmentQueries(shipmentId);
+
+const {loading, actions, shipment: data} = useShipmentData(shipmentId);
+const config = useAdminConfig();
+</script>