ProductBarcode: allow passing parameters to Dialog

This commit is contained in:
Crumb Owl
2025-07-06 20:48:56 +02:00
parent 0e1e5ae3f0
commit fc88df0ff0
7 changed files with 25 additions and 13 deletions

View File

@@ -57,7 +57,7 @@
const { t } = useI18n();
const { activeDialog, closeDialog } = useDialog();
const open = computed(() => activeDialog.value === "scanner");
const open = computed(() => activeDialog.value && activeDialog.value.id === "scanner");
const sources = ref<MediaDeviceInfo[]>([]);
const selectedSource = ref<string | null>(null);

View File

@@ -270,7 +270,7 @@
watch(
() => activeDialog.value,
async active => {
if (active === "create-item") {
if (active !== null && active.id === "create-item") {
// needed since URL will be cleared in the next step => ParentId Selection should stay though
subItemCreate.value = subItemCreateParam.value === "y";
let parentItemLocationId = null;

View File

@@ -54,7 +54,7 @@
watch(
() => activeDialog.value,
active => {
if (active === "create-location") {
if (active && active.id === "create-location") {
if (locationId.value) {
const found = locations.value.find(l => l.id === locationId.value);
form.parent = found || null;

View File

@@ -1,19 +1,21 @@
<!-- DialogProvider.vue -->
<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import { provideDialogContext } from "./utils";
import { provideDialogContext, ActiveDialog } from "./utils";
const activeDialog = ref<string | null>(null);
const activeDialog = ref<ActiveDialog | null>(null);
const activeAlerts = reactive<string[]>([]);
const openDialog = (dialogId: string) => {
const openDialog = (dialogId: string, params?: any) => {
if (activeAlerts.length > 0) return;
activeDialog.value = dialogId;
const ad = new ActiveDialog(dialogId, params);
activeDialog.value = ad;
};
const closeDialog = (dialogId?: string) => {
if (dialogId) {
if (activeDialog.value === dialogId) {
if (activeDialog.value && activeDialog.value.id === dialogId) {
activeDialog.value = null;
}
} else {

View File

@@ -2,10 +2,20 @@ import type { ComputedRef } from "vue";
import { createContext } from "reka-ui";
import { useMagicKeys, useActiveElement } from "@vueuse/core";
export class ActiveDialog {
id: string;
params: any;
constructor(id: string, params: any = null) {
this.id = id;
this.params = params;
}
}
export const [useDialog, provideDialogContext] = createContext<{
activeDialog: ComputedRef<string | null>;
activeDialog: ComputedRef<ActiveDialog | null>;
activeAlerts: ComputedRef<string[]>;
openDialog: (dialogId: string) => void;
openDialog: (dialogId: string, params?: any) => void;
closeDialog: (dialogId?: string) => void;
addAlert: (alertId: string) => void;
removeAlert: (alertId: string) => void;

View File

@@ -1,13 +1,13 @@
<script setup lang="ts">
import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from "reka-ui";
import { useDialog } from "../dialog-provider/utils";
import { useDialog, type ActiveDialog } from "../dialog-provider/utils";
const props = defineProps<DialogRootProps & { dialogId: string }>();
const emits = defineEmits<DialogRootEmits>();
const { closeDialog, activeDialog } = useDialog();
const isOpen = computed(() => activeDialog.value === props.dialogId);
const isOpen = computed(() => (activeDialog.value && activeDialog.value.id === props.dialogId));
const onOpenChange = (open: boolean) => {
if (!open) closeDialog(props.dialogId);
};

View File

@@ -12,7 +12,7 @@
const { closeDialog, activeDialog } = useDialog();
const isOpen = computed(() => activeDialog.value === props.dialogId);
const isOpen = computed(() => activeDialog.value !== null && activeDialog.value.id === props.dialogId);
const onOpenChange = (open: boolean) => {
if (!open) closeDialog(props.dialogId);
};