@myparcel-dev/pdk-admin 1.13.0

package/src/composables/components/useToggleInputContext.ts

@@ -0,0 +1,35 @@
+import {ref, type Ref, toValue, watch, type WritableComputedRef} from 'vue';
+import {booleanToTriState, triStateToBoolean} from '../../utils';
+import {type ToggleInputEmits, type ToggleInputModelValue, type ToggleInputProps} from '../../types';
+import {useElementContext} from './useElementContext';
+
+interface ToggleInputContext {
+  id: string;
+  model: WritableComputedRef<ToggleInputModelValue>;
+  toggleId: string;
+  toggleModel: Ref<boolean>;
+}
+
+type UseToggleInputContext = (props: ToggleInputProps, emit: ToggleInputEmits) => ToggleInputContext;
+
+export const useToggleInputContext: UseToggleInputContext = (props, emit) => {
+  const toggleModel = ref<boolean>(triStateToBoolean(toValue(props.modelValue)));
+  const {id, model} = useElementContext<ToggleInputModelValue>(props, emit);
+
+  // When the toggle is changed, the model is updated to 1/0
+  watch(toggleModel, (toggle) => {
+    model.value = booleanToTriState(toggle);
+  });
+
+  // When the model is changed manually, like from another element, the toggle is updated
+  watch(model, (model) => {
+    toggleModel.value = triStateToBoolean(model);
+  });
+
+  return {
+    id,
+    model,
+    toggleId: `${id}__toggle`,
+    toggleModel,
+  };
+};

package/src/composables/components/useTriStateInputContext.ts

@@ -0,0 +1,117 @@
+import {computed, markRaw, reactive, ref, type Ref, toValue, watch, type WritableComputedRef} from 'vue';
+import {TriState} from '@myparcel-dev/pdk-common';
+import {type FieldConfiguration, defineField, useForm} from '@myparcel-dev/vue-form-builder';
+import {useLanguage} from '../language';
+import {booleanToTriState, triStateToBoolean} from '../../utils';
+import {
+  type ElementInstance,
+  type PdkElementProps,
+  type TriStateInputEmits,
+  type TriStateInputModelValue,
+  type TriStateInputProps,
+} from '../../types';
+import {useElementContext} from './useElementContext';
+
+type BoolElInstance = ElementInstance<boolean, PdkElementProps>;
+
+interface TriStateInputContext {
+  id: string;
+  inheritElement: BoolElInstance;
+  inheritModel: Ref<boolean>;
+  model: WritableComputedRef<TriStateInputModelValue>;
+  toggleElement: BoolElInstance;
+  toggleModel: Ref<boolean>;
+}
+
+type UseTriStateInputContext = (props: TriStateInputProps, emit: TriStateInputEmits) => TriStateInputContext;
+
+/**
+ * A tri-state input can hold a value of 0, 1 or -1. -1 is used to indicate that the value should be inherited .
+ */
+// eslint-disable-next-line max-lines-per-function
+export const useTriStateInputContext: UseTriStateInputContext = (props, emit) => {
+  const {translate} = useLanguage();
+  const form = useForm();
+
+  const inheritModel = ref<boolean>(TriState.Inherit === toValue(props.modelValue));
+  const toggleModel = ref<boolean>(triStateToBoolean(toValue(props.modelValue)));
+
+  const {id, model} = useElementContext<TriStateInputModelValue>(props, emit);
+
+  /**
+   * The value when the element is set to inherit.
+   */
+  const defaultValue = computed(() => {
+    return props.element.props.defaultValue ?? TriState.Inherit;
+  });
+
+  const commonFieldProperties = Object.freeze({
+    component: 'input',
+    wrapper: false,
+    attributes: {
+      hidden: true,
+    },
+  }) satisfies Partial<FieldConfiguration>;
+
+  const inheritElement = reactive(
+    defineField({
+      ...commonFieldProperties,
+      ref: inheritModel,
+      name: `${props.element.name}__inherit`,
+      label: translate('settings_use_default_value'),
+    }),
+  );
+
+  const toggleElement = reactive(
+    defineField({
+      ...commonFieldProperties,
+      name: `${props.element.name}__toggle`,
+      ref: toggleModel,
+      // The toggle is readonly when inherit is enabled or the element itself is set to readonly.
+      isReadOnly: markRaw(computed(() => toValue(inheritModel) || toValue(props.element.isReadOnly))),
+    }),
+  );
+
+  // When the toggle is changed, the model is updated to 1/0 as long as inherit is disabled.
+  watch(toggleModel, (toggle) => {
+    if (inheritModel.value) {
+      return;
+    }
+
+    model.value = booleanToTriState(toggle);
+  });
+
+  // When inherit is disabled, the model is updated to the current toggle value
+  // When inherit is enabled, the model is updated to -1 and the toggle is updated to the default value.
+  watch([inheritModel, defaultValue], ([inherit, defaultValue], [oldInherit, oldDefaultValue]) => {
+    if (inherit === oldInherit && defaultValue === oldDefaultValue) {
+      return;
+    }
+
+    if (!inherit) {
+      model.value = booleanToTriState(toggleModel.value);
+      return;
+    }
+
+    model.value = TriState.Inherit;
+    toggleModel.value = triStateToBoolean(defaultValue ?? TriState.Inherit);
+  });
+
+  // When the model is changed manually, like from another element, the toggle is updated if inherit is disabled.
+  watch(model, (model) => {
+    if (inheritModel.value) {
+      return;
+    }
+
+    toggleModel.value = triStateToBoolean(model);
+  });
+
+  return {
+    id,
+    inheritElement,
+    inheritModel,
+    model,
+    toggleElement,
+    toggleModel,
+  } as unknown as TriStateInputContext;
+};

package/src/composables/context/index.ts

@@ -0,0 +1,7 @@
+export * from './useAppInfo';
+export * from './useContext';
+export * from './useGlobalContext';
+export * from './useInstanceContext';
+export * from './useModalContext';
+export * from './useModalOrder';
+export * from './usePluginSettings';

package/src/composables/context/useAppInfo.ts

@@ -0,0 +1,6 @@
+import {type AdminContextObject} from '../../types';
+import {useGlobalContext} from './useGlobalContext';
+
+export const useAppInfo = (): AdminContextObject['global']['appInfo'] => {
+  return useGlobalContext().appInfo;
+};

package/src/composables/context/useContext.ts

@@ -0,0 +1,18 @@
+import {toValue} from 'vue';
+import {AdminContextKey} from '@myparcel-dev/pdk-common';
+import {useStoreContextQuery} from '../useStoreContextQuery';
+import {type AdminContext} from '../../types';
+
+export const useContext = <C extends AdminContextKey = AdminContextKey.Dynamic>(
+  // @ts-expect-error typescript is being very pedantic here
+  contextKey: C = AdminContextKey.Dynamic,
+): NonNullable<AdminContext<C>> => {
+  const query = useStoreContextQuery(contextKey);
+  const data = toValue(query.data);
+
+  if (!data) {
+    throw new Error(`Context ${contextKey} not found`);
+  }
+
+  return data as unknown as NonNullable<AdminContext<C>>;
+};

package/src/composables/context/useGlobalContext.ts

@@ -0,0 +1,7 @@
+import {AdminContextKey} from '@myparcel-dev/pdk-common';
+import {type AdminContextObject} from '../../types';
+import {useContext} from './useContext';
+
+export const useGlobalContext = (): AdminContextObject['global'] => {
+  return useContext(AdminContextKey.Global);
+};

package/src/composables/context/useInstanceContext.ts

@@ -0,0 +1,15 @@
+import {inject} from 'vue';
+import {type AdminContext, type AnyAdminContext} from '../../types';
+import {INJECT_ADMIN_INSTANCE} from '../../symbols';
+import {type AdminInstanceContextKey} from '../../data';
+
+interface UseInstanceContext {
+  <Key extends AdminInstanceContextKey>(contextKey: Key): AdminContext<Key>;
+  <Ctx extends AnyAdminContext>(context: Ctx): Ctx;
+}
+
+export const useInstanceContext: UseInstanceContext = (context: AdminInstanceContextKey) => {
+  const foundInstance = inject(INJECT_ADMIN_INSTANCE);
+
+  return foundInstance?.context?.[context] ?? null;
+};

package/src/composables/context/useModalContext.ts

@@ -0,0 +1,52 @@
+import {computed, type ComputedRef, type Ref, ref} from 'vue';
+import {useLoading} from '../useLoading';
+import {useModalStore} from '../../stores';
+import {type AdminModalKey} from '../../data';
+
+type UseModalContext = (
+  modalId?: Ref<null | AdminModalKey>,
+  onSave?: Ref,
+  onCancel?: Ref,
+) => null | {
+  loading: Ref<boolean>;
+  modalData: Ref;
+  onButtonClick: (type: string) => Promise<void>;
+  setLoading: (state: boolean) => void;
+  shown: ComputedRef<boolean>;
+};
+
+export const useModalContext: UseModalContext = (modalId, onSave, onCancel) => {
+  const store = useModalStore();
+  const resolvedId = ref<AdminModalKey>(modalId?.value as AdminModalKey);
+
+  if (!modalId?.value) {
+    if (!store.opened) {
+      return null;
+    }
+
+    resolvedId.value = store.opened;
+  }
+
+  const {loading, setLoading} = useLoading();
+  const modalData = ref();
+  const shown = computed(() => store.opened === resolvedId.value);
+
+  const onButtonClick = async (type: string): Promise<void> => {
+    const callback = type === 'save' ? onSave : onCancel;
+
+    if (callback) {
+      setLoading(true);
+      await callback.value?.(resolvedId.value);
+      setLoading(false);
+    }
+  };
+
+  return {
+    opened: store.opened,
+    loading,
+    modalData,
+    onButtonClick,
+    setLoading,
+    shown,
+  };
+};

package/src/composables/context/useModalOrder.ts

@@ -0,0 +1,13 @@
+import {useModalStore} from '../../stores';
+import {AdminModalKey} from '../../data';
+
+export const useModalOrder = (): string | null => {
+  const store = useModalStore();
+
+  if (store.opened && [AdminModalKey.ShipmentOptions].includes(store.opened)) {
+    // @ts-expect-error works
+    return store.context.orderIds;
+  }
+
+  return null;
+};

package/src/composables/context/usePluginSettings.ts

@@ -0,0 +1,12 @@
+import {type Plugin} from '@myparcel-dev/pdk-common';
+import {useContext} from './useContext';
+
+export const usePluginSettings = (): Plugin.ModelContextDynamicContext['pluginSettings'] => {
+  const context = useContext();
+
+  if (!context.pluginSettings) {
+    throw new Error('No pluginSettings found');
+  }
+
+  return context.pluginSettings;
+};

package/src/composables/formatter/default/createCurrencyFormat.ts

@@ -0,0 +1,6 @@
+export const createCurrencyFormat = (locale: string): Intl.NumberFormat => {
+  return new Intl.NumberFormat(locale, {
+    currency: 'EUR',
+    style: 'currency',
+  });
+};

package/src/composables/formatter/default/createLongDateFormat.ts

@@ -0,0 +1,7 @@
+export const createLongDateFormat = (locale: string): Intl.DateTimeFormat => {
+  return new Intl.DateTimeFormat(locale, {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  });
+};

package/src/composables/formatter/default/createRelativeTimeFormat.ts

@@ -0,0 +1,5 @@
+export const createRelativeTimeFormat = (locale: string): Intl.RelativeTimeFormat => {
+  return new Intl.RelativeTimeFormat(locale, {
+    numeric: 'auto',
+  });
+};

package/src/composables/formatter/default/defaultCurrencyFormatters.ts

@@ -0,0 +1,16 @@
+import {type FormatterFunction} from '../formatter.types';
+import {createCurrencyFormat} from './createCurrencyFormat';
+
+let formatCurrency: Intl.NumberFormat;
+
+export const createDefaultCurrencyFormatter = (locale: string): FormatterFunction => {
+  formatCurrency ??= createCurrencyFormat(locale);
+
+  return (input) => {
+    if (typeof input === 'number') {
+      return formatCurrency.format(input);
+    }
+
+    return '';
+  };
+};

package/src/composables/formatter/default/defaultDateFormatters.ts

@@ -0,0 +1,83 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import {upperFirst} from 'lodash-unified';
+import {type FormatterFunction, type FormatterTranslateFunction} from '../formatter.types';
+import {parseDate} from './parseDate';
+import {createRelativeTimeFormat} from './createRelativeTimeFormat';
+import {createLongDateFormat} from './createLongDateFormat';
+
+let formatDateLong: Intl.DateTimeFormat;
+
+let formatDateRelative: Intl.RelativeTimeFormat;
+
+export const createDefaultDateLongFormatter = (locale: string): FormatterFunction => {
+  formatDateLong ??= createLongDateFormat(locale);
+  return (input) => {
+    return formatDateLong.format(parseDate(input));
+  };
+};
+
+export const createDefaultDateRelativeFormatter = (
+  locale: string,
+  translate: FormatterTranslateFunction,
+): FormatterFunction => {
+  formatDateLong ??= createLongDateFormat(locale);
+  formatDateRelative ??= createRelativeTimeFormat(locale);
+
+  const getFormattedDate: FormatterFunction = (input) => {
+    const parsedDate = parseDate(input);
+    const diff = parsedDate.getTime() - Date.now();
+
+    const minutes = Math.round(diff / 1000 / 60);
+    const hours = Math.round(minutes / 60);
+    const days = Math.round(hours / 24);
+
+    if (Math.abs(days) >= 14) {
+      return formatDateLong.format(parsedDate);
+    }
+
+    if (Math.abs(hours) >= 24) {
+      return formatDateRelative.format(days, 'day');
+    }
+
+    if (Math.abs(minutes) >= 60) {
+      return formatDateRelative.format(hours, 'hour');
+    }
+
+    if (Math.abs(minutes) >= 1) {
+      return formatDateRelative.format(minutes, 'minute');
+    }
+
+    return translate(`time_seconds_${diff > 0 ? 'future' : 'past'}`);
+  };
+
+  return (input) => {
+    return upperFirst(getFormattedDate(input));
+  };
+};
+
+export const createDefaultWeekdayFormatter = (locale: string): FormatterFunction => {
+  return (input) => {
+    // const date = parseDate(input);
+    // return date.toLocaleDateString(locale, {weekday: 'long'});
+
+    switch (input) {
+      case 0:
+        return 'Sunday';
+      case 1:
+        return 'Monday';
+      case 2:
+        return 'Tuesday';
+      case 3:
+        return 'Wednesday';
+      case 4:
+        return 'Thursday';
+      case 5:
+        return 'Friday';
+      case 6:
+        return 'Saturday';
+
+      default:
+        return 'Unknown';
+    }
+  };
+};

package/src/composables/formatter/default/index.ts

@@ -0,0 +1,6 @@
+export * from './createCurrencyFormat';
+export * from './createLongDateFormat';
+export * from './createRelativeTimeFormat';
+export * from './defaultCurrencyFormatters';
+export * from './defaultDateFormatters';
+export * from './parseDate';

package/src/composables/formatter/default/parseDate.ts

@@ -0,0 +1,12 @@
+export const parseDate = (date: unknown): Date => {
+  if (typeof date === 'string') {
+    return new Date(date);
+  }
+
+  if (date instanceof Date) {
+    return date;
+  }
+
+  // eslint-disable-next-line no-console
+  throw new Error(`Invalid date. Expected string or Date, got ${typeof date}`);
+};

package/src/composables/formatter/formatter.types.ts

@@ -0,0 +1,32 @@
+import {type Ref} from 'vue';
+
+export enum Format {
+  Currency = 'currency',
+  DateLong = 'dateLong',
+  DateRelative = 'dateRelative',
+  Weekday = 'weekday',
+}
+
+export type FormatName = Format | string;
+
+export type FormatterFunction = (input: unknown, ...args: unknown[]) => string;
+
+export type FormatterObject = Record<FormatName, FormatterFunction>;
+
+export type LocaleFormatterObject = Record<string, FormatterObject>;
+
+export type Formatter = {
+  /**
+   * Get all registered formatters
+   */
+  getFormatters(locale: string): FormatterObject;
+
+  /**
+   * Format a value into a string using the given format.
+   */
+  format(format: FormatName, input: unknown): string;
+
+  formats: Ref<LocaleFormatterObject>;
+};
+
+export type FormatterTranslateFunction = (string?: string) => string;

package/src/composables/formatter/index.ts

@@ -0,0 +1,4 @@
+export * from './default';
+export * from './formatter.types';
+export * from './useFormatter';
+export * from './useLocalizedFormatter';

package/src/composables/formatter/useFormatter.spec.ts

@@ -0,0 +1,147 @@
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {INJECT_ADMIN_INSTANCE} from '../../symbols';
+import {createLogger} from '../../services';
+import {createAdminConfig} from '../../pdk';
+import {useFormatter} from './useFormatter';
+import {Format, type FormatterTranslateFunction} from './formatter.types';
+
+describe('format strings', () => {
+  const fakeDate = new Date('2022-12-05T12:00:00.000Z');
+
+  beforeEach(() => {
+    vi.mock('vue', async () => {
+      const realVue: any = await vi.importActual('vue');
+
+      return {
+        ...realVue,
+
+        inject(key: symbol) {
+          if (INJECT_ADMIN_INSTANCE === key) {
+            return {
+              appName: 'test',
+              context: {},
+              // @ts-expect-error no need for components
+              config: createAdminConfig({components: {}}),
+              logger: createLogger('test'),
+            };
+          }
+        },
+      };
+    });
+  });
+
+  afterEach(() => {
+    const formatter = useFormatter('');
+    formatter.formats.value = {};
+    vi.restoreAllMocks();
+  });
+
+  it.each([
+    {
+      date: new Date('2022-11-05T12:00:00.000Z'),
+      expectation: '5 november 2022',
+    },
+    {
+      date: new Date('2022-11-28T12:00:00.000Z'),
+      expectation: '7 dagen geleden',
+    },
+    {
+      date: new Date('2022-12-01T12:00:00.000Z'),
+      expectation: '4 dagen geleden',
+    },
+    {
+      date: new Date('2022-12-04T12:00:00.000Z'),
+      expectation: 'Gisteren',
+    },
+    {
+      date: new Date('2022-12-05T09:00:00.000Z'),
+      expectation: '3 uur geleden',
+    },
+    {
+      date: new Date('2022-12-05T11:44:00.000Z'),
+      expectation: '16 minuten geleden',
+    },
+    {
+      date: new Date('2022-12-05T11:58:00.000Z'),
+      expectation: '2 minuten geleden',
+    },
+    {
+      date: new Date('2022-12-05T11:59:29.000Z'),
+      expectation: '1 minuut geleden',
+    },
+    {
+      date: new Date('2022-12-05T11:59:30.000Z'),
+      expectation: 'Time_seconds_past',
+    },
+    {
+      date: new Date('2022-12-05T12:00:00.001Z'),
+      expectation: 'Time_seconds_future',
+    },
+    {
+      date: new Date('2022-12-05T12:01:00.000Z'),
+      expectation: 'Over 1 minuut',
+    },
+    {
+      date: new Date('2022-12-05T12:30:00.000Z'),
+      expectation: 'Over 30 minuten',
+    },
+    {
+      date: new Date('2022-12-05T13:00:00.000Z'),
+      expectation: 'Over 1 uur',
+    },
+    {
+      date: new Date('2022-12-11T12:00:00.000Z'),
+      expectation: 'Over 6 dagen',
+    },
+    {
+      date: new Date('2022-12-12T12:00:00.000Z'),
+      expectation: 'Over 7 dagen',
+    },
+    {
+      date: new Date('2022-12-19T12:00:00.000Z'),
+      expectation: '19 december 2022',
+    },
+  ])("formats date relative to '$date' as $expectation", ({date, expectation}) => {
+    const dateSpy = vi.spyOn(global.Date, 'now');
+    dateSpy.mockImplementation(() => fakeDate.getTime());
+
+    const formatter = useFormatter('nl-NL');
+
+    expect(formatter.format(Format.DateRelative, date)).toBe(expectation);
+
+    dateSpy.mockRestore();
+  });
+
+  it.each([
+    {
+      date: new Date('2022-12-05T11:59:30.000Z'),
+      expectation: 'A few seconds ago',
+    },
+    {
+      date: new Date('2022-12-05T12:00:00.001Z'),
+      expectation: 'In a few seconds',
+    },
+  ])('can translate strings', ({date, expectation}) => {
+    const dateSpy = vi.spyOn(global.Date, 'now');
+    dateSpy.mockImplementation(() => fakeDate.getTime());
+
+    const translations: Record<string, string> = {
+      time_seconds_past: 'A few seconds ago',
+      time_seconds_future: 'In a few seconds',
+    };
+
+    const translateFunction: FormatterTranslateFunction = (string) => (string ? translations[string] : '');
+
+    const formatter = useFormatter('nl-NL', translateFunction);
+
+    expect(formatter.format(Format.DateRelative, date)).toBe(expectation);
+
+    dateSpy.mockRestore();
+  });
+
+  it('formats date', () => {
+    const formatter = useFormatter('nl-NL');
+
+    expect(formatter.format(Format.DateLong, fakeDate)).toBe('5 december 2022');
+  });
+});

package/src/composables/formatter/useFormatter.ts

@@ -0,0 +1,51 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import {type Ref, ref} from 'vue';
+import {useAdminConfig} from '../useAdminConfig';
+import {type Formatter, type FormatterTranslateFunction, type LocaleFormatterObject} from './formatter.types';
+import {
+  createDefaultCurrencyFormatter,
+  createDefaultDateLongFormatter,
+  createDefaultDateRelativeFormatter,
+  createDefaultWeekdayFormatter,
+} from './default';
+
+let formats: Ref<LocaleFormatterObject>;
+
+export const useFormatter = (
+  locale: string,
+  translate: FormatterTranslateFunction = (string) => string ?? '',
+): Formatter => {
+  formats ??= ref({});
+
+  const config = useAdminConfig();
+
+  const getFormatters: Formatter['getFormatters'] = (locale) => {
+    if (!formats.value[locale]) {
+      formats.value[locale] = {
+        currency: config.formatters?.currency ?? createDefaultCurrencyFormatter(locale),
+        dateLong: config.formatters?.dateLong ?? createDefaultDateLongFormatter(locale),
+        dateRelative: config.formatters?.dateRelative ?? createDefaultDateRelativeFormatter(locale, translate),
+        weekday: config.formatters?.weekday ?? createDefaultWeekdayFormatter(locale),
+      };
+    }
+
+    return formats.value[locale];
+  };
+
+  return {
+    format: (format, input) => {
+      const formatters = getFormatters(locale);
+      const formatter = formatters[format];
+
+      if (!formatter) {
+        return '';
+      }
+
+      return formatter(input);
+    },
+
+    formats,
+
+    getFormatters,
+  };
+};