feat: make bulk edit/export/print work

apps/admin-components/src/components/DefaultSelectInput.vue

@@ -23,5 +23,5 @@ import {ElementInstance, OptionsProp, useSelectInputContext} from '@myparcel-pdk
 const props = defineProps<{element: ElementInstance<OptionsProp>; modelValue: string | number}>();
 const emit = defineEmits<(e: 'update:modelValue', value: string | number) => void>();
 
-const {options} = useSelectInputContext(props, emit);
+const {options, id, model} = useSelectInputContext(props, emit);
 </script>

apps/admin/src/common.ts

@@ -1,7 +1,6 @@
 export type {
   Account,
   AdminComponentMap,
-  AdminComponent,
   Base,
   Carrier,
   Form,
@@ -84,4 +83,4 @@ export {
   webhooksDeleteAction,
 } from '@myparcel-pdk/frontend-core/src';
 
-export {AdminView, Size, Status, Variant} from '@myparcel-pdk/common/src';
+export {AdminComponent, AdminView, Size, Status, Variant} from '@myparcel-pdk/common/src';

libs/frontend/core/src/actions/composables/queries/orders/useFetchOrdersQuery.ts

@@ -1,14 +1,14 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import {useQuery, useQueryClient} from '@tanstack/vue-query';
+import {QueryKey, useQuery, useQueryClient} from '@tanstack/vue-query';
 import {BackendEndpoint} from '@myparcel-pdk/common/src';
 import {EndpointResponse} from '../../../../types';
 import {QUERY_KEY_ORDER} from '../queryKeys';
 import {encodeArrayParameter} from '../../../../utils';
 import {fillOrderQueryData} from '../../../../pdk';
 import {usePdkAdminApi} from '../../../../sdk';
 
-export const useFetchOrdersQuery = (externalIdentifier: string) => {
-  const queryKey = [QUERY_KEY_ORDER, {id: externalIdentifier}] as const;
+export const useFetchOrdersQuery = (externalIdentifier?: string) => {
+  const queryKey: QueryKey = [QUERY_KEY_ORDER, ...(externalIdentifier ? [{id: externalIdentifier}] : [])] as const;
   const queryClient = useQueryClient();
 
   return useQuery<EndpointResponse<BackendEndpoint.FetchOrders>>(

libs/frontend/core/src/components/Modals/ShipmentOptionsModal.vue

@@ -7,8 +7,9 @@
   </PdkModal>
 </template>
 
-<script lang="ts">
-import {defineAsyncComponent, defineComponent} from 'vue';
+<script setup lang="ts">
+import {BACKEND_ENDPOINTS_ORDERS, BackendEndpoint} from '@myparcel-pdk/common/src';
+import {computed, defineAsyncComponent} from 'vue';
 import {
   modalCloseAction,
   orderExportAction,
@@ -18,38 +19,33 @@ import {
 } from '../../actions';
 import {usePluginSettings, useStoreQuery} from '../../composables';
 import {AdminModalKey} from '../../types';
-import {BackendEndpoint} from '@myparcel-pdk/common/src';
 import {defineActions} from '../../services';
+import {get} from '@vueuse/core';
 
 /**
  * Shipment options modal. Opened by clicking the "Create" button in the "Labels" column in the orders list.
  */
-export default defineComponent({
-  name: 'ShipmentOptionsModal',
-  components: {
-    ShipmentOptionsModalForm: defineAsyncComponent(() => import('./ShipmentOptionsModalForm.vue')),
-  },
-
-  setup: () => {
-    const pluginSettings = usePluginSettings();
-    const {orderMode} = pluginSettings.general;
-
-    const exportOrdersQuery = useStoreQuery(BackendEndpoint.ExportOrders);
-
-    return {
-      modalKey: AdminModalKey.ShipmentOptions,
-      actions: defineActions([
-        {
-          ...modalCloseAction,
-          disabled: exportOrdersQuery.isLoading,
-        },
-        {
-          ...ordersUpdateAction,
-          disabled: exportOrdersQuery.isLoading,
-        },
-        ...(orderMode ? [orderExportAction] : [orderExportToShipmentsAction, ordersExportPrintShipmentsAction]),
-      ]),
-    };
-  },
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const ShipmentOptionsModalForm = defineAsyncComponent(() => import('./ShipmentOptionsModalForm.vue'));
+
+const pluginSettings = usePluginSettings();
+
+const {orderMode} = pluginSettings.general;
+
+const orderQueries = BACKEND_ENDPOINTS_ORDERS.map((endpoint: BackendEndpoint) => useStoreQuery(endpoint));
+
+const modalKey = AdminModalKey.ShipmentOptions;
+
+const actions = computed(() => {
+  const disabled = orderQueries.some((query) => get(query.isLoading));
+
+  const actions = [
+    modalCloseAction,
+    ordersUpdateAction,
+    ...(orderMode ? [orderExportAction] : [orderExportToShipmentsAction, ordersExportPrintShipmentsAction]),
+  ];
+
+  return defineActions(actions.map((action) => ({...action, disabled})));
 });
 </script>

libs/frontend/core/src/components/Modals/ShipmentOptionsModalForm.vue

@@ -1,28 +1,10 @@
 <template>
-  <ShipmentOptionsForm
-    v-if="order"
-    :order="order" />
+  <ShipmentOptionsForm v-if="queries.some((query) => query.data)" />
 </template>
 
 <script setup lang="ts">
 import ShipmentOptionsForm from '../common/ShipmentOptionsForm.vue';
-import {computed} from 'vue';
-import {useFetchOrdersQuery} from '../../actions';
-import {useModalStore} from '../../stores';
+import {useOrders} from '../../composables/useOrder';
 
-const modalStore = useModalStore();
-
-const order = computed(() => {
-  if (!modalStore.context) {
-    return null;
-  }
-
-  const orderQuery = useFetchOrdersQuery(modalStore.context);
-
-  if (!orderQuery.data.value) {
-    return null;
-  }
-
-  return orderQuery.data.value;
-});
+const queries = useOrders();
 </script>

libs/frontend/core/src/components/OrderBox/OrderShipmentsTableRow.vue

@@ -1,5 +1,5 @@
 <template>
-  <PdkTableRow :loading="loading">
+  <PdkTableRow>
     <PdkTableCol>
       <PdkCheckboxInput
         v-model="selected"

libs/frontend/core/src/components/common/ShipmentOptionsForm.vue

@@ -6,11 +6,10 @@
 import {MagicForm} from '@myparcel/vue-form-builder/src';
 import {createShipmentOptionsForm} from '../../forms';
 import {get} from '@vueuse/core';
-import {markRaw} from 'vue';
-import {useOrder} from '../../composables/useOrder';
+import {useOrders} from '../../composables/useOrder';
 
-const query = useOrder();
+const queries = useOrders();
 
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-const shipmentOptionsForm = createShipmentOptionsForm(markRaw(get(query.data)!));
+const shipmentOptionsForm = createShipmentOptionsForm(queries.map((query) => get(query.data)!));
 </script>

libs/frontend/core/src/composables/useInputWithOptionsContext.ts

@@ -1,10 +1,10 @@
 import {ComputedRef, Ref, WritableComputedRef, computed, onMounted, watch} from 'vue';
 import {ElementInstance, OptionsProp} from '../types';
+import {get, useVModel} from '@vueuse/core';
 import {SelectOptionWithLabel} from '@myparcel-pdk/common';
 import {generateFieldId} from '../utils';
 import {translateSelectOption} from '../helpers';
 import {useLanguage} from './translations';
-import {useVModel} from '@vueuse/core';
 
 export type SelectInputProps<T = unknown> = {
   modelValue: T;
@@ -55,15 +55,15 @@ export const useInputWithOptionsContext: UseInputWithOptionsContext = (props, em
     watch(
       options,
       (newOptions) => {
-        const hasExistingValue = model.value && newOptions.some((option) => option.value === model.value);
+        const hasExistingValue = get(model) && newOptions.some((option) => option.value === get(model));
 
         if (hasExistingValue || newOptions.length === 0) {
           return;
         }
 
         model.value = newOptions[0].value;
       },
-      {immediate: Number(options.value?.length) > 0},
+      {immediate: Number(get(options)?.length) > 0},
     );
   });
 

libs/frontend/core/src/composables/useOrder.ts

@@ -1,10 +1,24 @@
 import {BackendEndpoint} from '@myparcel-pdk/common/src';
 import {ResolvedQuery} from '../stores';
 import {getOrderId} from '../utils';
+import {toArray} from '@myparcel/ts-utils';
 import {useStoreQuery} from './useStoreQuery';
 
 export const useOrder = (externalIdentifier?: string): ResolvedQuery<`${BackendEndpoint.FetchOrders}.${string}`> => {
-  externalIdentifier ??= getOrderId();
+  const resolvedExternalIdentifier = externalIdentifier ?? getOrderId();
 
-  return useStoreQuery(BackendEndpoint.FetchOrders, externalIdentifier);
+  if (Array.isArray(resolvedExternalIdentifier)) {
+    throw new Error('use useOrders for multiple orders');
+  }
+
+  return useStoreQuery(BackendEndpoint.FetchOrders, resolvedExternalIdentifier);
+};
+
+export const useOrders = (
+  externalIdentifiers?: string[],
+): ResolvedQuery<`${BackendEndpoint.FetchOrders}.${string}`>[] => {
+  return toArray(externalIdentifiers ?? getOrderId()).map((externalIdentifier) => {
+    console.log(externalIdentifier);
+    return useOrder(externalIdentifier);
+  });
 };

libs/frontend/core/src/forms/helpers/setFieldProp.ts

@@ -1,5 +1,6 @@
 import {ElementInstance} from '../../types';
 import {FormInstance} from '@myparcel/vue-form-builder/src';
+import {get} from '@vueuse/core';
 import {isOfType} from '@myparcel/ts-utils';
 
 type SetFieldProp = {
@@ -13,7 +14,7 @@ export const setFieldProp: SetFieldProp = (arg1, arg2, arg3, arg4) => {
   let value = arg3;
 
   if (isOfType<FormInstance>(arg1, 'fields')) {
-    const foundField = arg1.fields.value.find((field) => field.name === arg2);
+    const foundField = get(arg1.fields).find((field) => field.name === arg2);
 
     if (!foundField) {
       throw new Error(`Field ${arg2} not found`);
@@ -28,11 +29,5 @@ export const setFieldProp: SetFieldProp = (arg1, arg2, arg3, arg4) => {
     return;
   }
 
-  console.log({
-    field: field.name,
-    key,
-    value,
-  });
-
   field.props[key] = value as never;
 };