diff --git a/resources/js/form/components/Field.vue b/resources/js/form/components/Field.vue index fedc8f1de..429ea3c34 100644 --- a/resources/js/form/components/Field.vue +++ b/resources/js/form/components/Field.vue @@ -8,7 +8,7 @@ import Editor from "./fields/editor/Editor.vue"; import Geolocation from "./fields/geolocation/Geolocation.vue"; import Html from "./fields/Html.vue"; - import List from "./fields/List.vue"; + import List from "./fields/list/List.vue"; import Number from "./fields/Number.vue"; import Select from "./fields/select/Select.vue"; import Tags from "./fields/Tags.vue"; diff --git a/resources/js/form/components/Form.vue b/resources/js/form/components/Form.vue index 07c088208..ef55db098 100644 --- a/resources/js/form/components/Form.vue +++ b/resources/js/form/components/Form.vue @@ -29,8 +29,8 @@ import debounce from "lodash/debounce"; import { api } from "@/api/api"; import { route } from "@/utils/url"; - import { useParentCommands } from "@/commands/useCommands"; import merge from 'lodash/merge'; + import { useFieldContainerData } from "@/form/useFieldContainerData"; const props = defineProps<{ form: Form @@ -82,14 +82,11 @@ props.form.setMeta(fieldKey, { uploading }); } - const parentCommands = useParentCommands(); + const fieldContainerData = useFieldContainerData(props.form); const refresh = debounce((data) => { api.post(route('code16.sharp.api.form.refresh.update', { entityKey: props.form.entityKey, - instance_id: props.form.instanceId, - embed_key: props.form.embedKey, - entity_list_command_key: parentCommands?.commandContainer === 'entityList' ? props.form.commandKey : null, - show_command_key: parentCommands?.commandContainer === 'show' ? props.form.commandKey : null, + ...fieldContainerData, }), data) .then(response => { merge(props.form.data, response.data.form.data); diff --git a/resources/js/form/components/fields/Autocomplete.vue b/resources/js/form/components/fields/Autocomplete.vue index 65b5fb18d..a0513defc 100644 --- a/resources/js/form/components/fields/Autocomplete.vue +++ b/resources/js/form/components/fields/Autocomplete.vue @@ -4,7 +4,7 @@ import { FormAutocompleteItemData, FormAutocompleteLocalFieldData, - FormAutocompleteRemoteFieldData, + FormAutocompleteRemoteFieldData } from "@/types"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; import { computed, ref } from "vue"; @@ -21,12 +21,12 @@ import { route } from "@/utils/url"; import { api } from "@/api/api"; import { useParentForm } from "@/form/useParentForm"; - import { isCancel } from "axios"; import { ComboboxItemIndicator } from "reka-ui"; - import { useParentCommands } from "@/commands/useCommands"; import { useIsInDialog } from "@/components/ui/dialog/Dialog.vue"; import { useFullTextSearch } from "@/composables/useFullTextSearch"; import { useRemoteAutocomplete } from "@/composables/useRemoteAutocomplete"; + import { useFieldContainerData } from "@/form/useFieldContainerData"; + import { useParentListField } from "@/form/components/fields/list/useParentListField"; const props = defineProps>(); const emit = defineEmits>(); @@ -36,7 +36,6 @@ const searchTerm = ref(''); const results = ref([]); - const parentCommands = useParentCommands(); const isInDialog = useIsInDialog(); const { fullTextSearch } = useFullTextSearch( () => props.field.mode === 'local' ? props.field.localValues : null, @@ -45,19 +44,19 @@ searchKeys: props.field.mode === 'local' ? props.field.searchKeys : [], } ); + const parentListField = useParentListField(); + const fieldContainerData = useFieldContainerData(form); const { loading, search: remoteSearch } = useRemoteAutocomplete(({ query, signal, onSuccess, onError }) => { const field = props.field as FormAutocompleteRemoteFieldData; return api.post( route('code16.sharp.api.form.autocomplete.index', { entityKey: form.entityKey, - autocompleteFieldKey: props.parentField ? `${props.parentField.key}.${field.key}` : field.key, - embed_key: form.embedKey, - entity_list_command_key: parentCommands?.commandContainer === 'entityList' ? form.commandKey : null, - show_command_key: parentCommands?.commandContainer === 'show' ? form.commandKey : null, - dashboard_command_key: parentCommands?.commandContainer === 'dashboard' ? form.commandKey : null, - instance_id: form.instanceId, + autocompleteFieldKey: parentListField && parentListField.form === form + ? `${parentListField.props.field.key}.${field.key}` + : field.key, endpoint: field.remoteEndpoint, search: query, + ...fieldContainerData, }), { formData: field.callbackLinkedFields ? Object.fromEntries( diff --git a/resources/js/form/components/fields/editor/Editor.vue b/resources/js/form/components/fields/editor/Editor.vue index 48b42cd62..8598db340 100644 --- a/resources/js/form/components/fields/editor/Editor.vue +++ b/resources/js/form/components/fields/editor/Editor.vue @@ -86,7 +86,8 @@ uploadModal, embedManager, embedModal, - } satisfies ParentEditor); + form, + }); watch(() => [embedManager.contentEmbeds, uploadManager.contentUploads], () => { emit('input', { diff --git a/resources/js/form/components/fields/editor/useParentEditor.ts b/resources/js/form/components/fields/editor/useParentEditor.ts index 1e864f972..a087a4386 100644 --- a/resources/js/form/components/fields/editor/useParentEditor.ts +++ b/resources/js/form/components/fields/editor/useParentEditor.ts @@ -8,7 +8,7 @@ import EditorUploadModal from "@/form/components/fields/editor/extensions/upload import EditorEmbedModal from "@/form/components/fields/editor/extensions/embed/EditorEmbedModal.vue"; /** - * @see import('./Editor.vue') -> provide('editor') + * @see import('./Editor.vue') */ export type ParentEditor = { props: FormFieldProps, @@ -16,8 +16,9 @@ export type ParentEditor = { embedModal: Ref> uploadManager: ContentUploadManager
, uploadModal: Ref>, + form: Form, }; export function useParentEditor() { - return inject('editor'); + return inject('editor', null); } diff --git a/resources/js/form/components/fields/List.vue b/resources/js/form/components/fields/list/List.vue similarity index 98% rename from resources/js/form/components/fields/List.vue rename to resources/js/form/components/fields/list/List.vue index ae61e6dd7..d7aa17d2b 100644 --- a/resources/js/form/components/fields/List.vue +++ b/resources/js/form/components/fields/list/List.vue @@ -3,7 +3,7 @@ import { useParentForm } from "@/form/useParentForm"; import { FormFieldData, FormListFieldData, FormUploadFieldData, FormUploadFieldValueData } from "@/types"; import { getDependantFieldsResetData } from "@/form/util"; - import { computed, nextTick, ref, watch, watchEffect } from "vue"; + import { computed, nextTick, provide, ref, watch, watchEffect } from "vue"; import { Button, buttonVariants } from '@/components/ui/button'; import { showAlert } from "@/utils/dialogs"; import { FieldMeta, FieldsMeta, FormFieldEmitInputOptions, FormFieldEmits, FormFieldProps } from "@/form/types"; @@ -22,11 +22,18 @@ import { useSortable } from "@vueuse/integrations/useSortable"; import { useEventListener, watchArray } from "@vueuse/core"; import { FormEvents } from "@/form/Form"; + import { ParentListField } from "@/form/components/fields/list/useParentListField"; const props = defineProps>(); const emit = defineEmits>(); const form = useParentForm(); + + provide('listField', { + props, + form, + }); + const canAddItem = computed(() => { const { field, value } = props; return field.addable && @@ -226,7 +233,6 @@ :field="form.getField(itemFieldLayout.key, field.itemFields, item, props.field.readOnly)" :field-layout="itemFieldLayout" :field-error-key="`${field.key}.${item[errorIndex] ?? item[itemKey]}.${itemFieldLayout.key}`" - :parent-field="field" :value="item[itemFieldLayout.key]" :locale="(form.getMeta(`${field.key}.${item[itemKey]}.${itemFieldLayout.key}`) as FieldMeta)?.locale ?? form.defaultLocale" :parent-data="item" diff --git a/resources/js/form/components/fields/list/useParentListField.ts b/resources/js/form/components/fields/list/useParentListField.ts new file mode 100644 index 000000000..f0ddc031e --- /dev/null +++ b/resources/js/form/components/fields/list/useParentListField.ts @@ -0,0 +1,16 @@ +import { FormFieldProps } from "@/form/types"; +import { FormListFieldData } from "@/types"; +import { inject } from "vue"; +import { Form } from "@/form/Form"; + +export type ParentListField = { + props: FormFieldProps, + form: Form, +} + +/** + * @see import('./List.vue') + */ +export function useParentListField() { + return inject('listField', null); +} diff --git a/resources/js/form/components/fields/upload/Upload.vue b/resources/js/form/components/fields/upload/Upload.vue index 7193a89ad..6950da791 100644 --- a/resources/js/form/components/fields/upload/Upload.vue +++ b/resources/js/form/components/fields/upload/Upload.vue @@ -1,8 +1,7 @@