From 59de4f7e82dc4f08240b13d48054589b561688fa Mon Sep 17 00:00:00 2001 From: Jacob Fletcher Date: Tue, 20 Dec 2022 16:40:25 -0500 Subject: [PATCH] fix: updates relationship label on drawer save and prevents stepnav update --- .../elements/DocumentDrawer/index.tsx | 19 ++++++++++++++++--- .../elements/DocumentDrawer/types.ts | 7 ++++++- .../forms/field-types/Relationship/index.tsx | 6 ++++++ .../Relationship/optionsReducer.ts | 16 ++++++++++++++++ .../MultiValueLabel/index.tsx | 3 ++- .../select-components/SingleValue/index.tsx | 3 ++- .../forms/field-types/Relationship/types.ts | 9 ++++++++- .../views/collections/Edit/Default.tsx | 12 +++++++----- 8 files changed, 63 insertions(+), 12 deletions(-) diff --git a/src/admin/components/elements/DocumentDrawer/index.tsx b/src/admin/components/elements/DocumentDrawer/index.tsx index 17080fb2cc..5c2518fe8e 100644 --- a/src/admin/components/elements/DocumentDrawer/index.tsx +++ b/src/admin/components/elements/DocumentDrawer/index.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react'; +import React, { useCallback, useEffect, useId, useMemo, useReducer, useRef, useState } from 'react'; import { useModal } from '@faceless-ui/modal'; import { useTranslation } from 'react-i18next'; import { toast } from 'react-toastify'; @@ -20,6 +20,7 @@ import formatFields from '../../views/collections/Edit/formatFields'; import { useRelatedCollections } from '../../forms/field-types/Relationship/AddNew/useRelatedCollections'; import IDLabel from '../IDLabel'; import { useEditDepth } from '../../utilities/EditDepth'; + import './index.scss'; const baseClass = 'doc-drawer'; @@ -64,7 +65,7 @@ export const DocumentDrawer: React.FC = ({ collectionSlug, id, drawerSlug, - onSave, + onSave: onSaveFromProps, customHeader, }) => { const { serverURL, routes: { api } } = useConfig(); @@ -83,7 +84,8 @@ export const DocumentDrawer: React.FC = ({ setFields(formatFields(collectionConfig, true)); }, [collectionSlug, collectionConfig]); - const [{ data, isLoading: isLoadingDocument, isError }] = usePayloadAPI( + const [cacheBust, dispatchCacheBust] = useReducer((state) => state + 1, 0); // used to rerun the API call even though the URL hasn't changed + const [{ data, isLoading: isLoadingDocument, isError }, { setParams }] = usePayloadAPI( (id ? `${serverURL}${api}/${collectionSlug}/${id}` : null), { initialParams: { 'fallback-locale': 'null', depth: 0, draft: 'true' } }, ); @@ -121,6 +123,17 @@ export const DocumentDrawer: React.FC = ({ } }, [isError, t, isOpen, data, drawerSlug, closeModal, isLoadingDocument]); + const onSave = useCallback((args: { doc: any, message: string }) => { + setParams({ 'fallback-locale': 'null', depth: 0, draft: 'true', cacheBust }); + dispatchCacheBust(); + if (typeof onSaveFromProps === 'function') { + onSaveFromProps({ + ...args, + collectionConfig, + }); + } + }, [onSaveFromProps, cacheBust, setParams, collectionConfig]); + if (isError) return null; if (isOpen) { diff --git a/src/admin/components/elements/DocumentDrawer/types.ts b/src/admin/components/elements/DocumentDrawer/types.ts index 0a5361cb9e..db9a030211 100644 --- a/src/admin/components/elements/DocumentDrawer/types.ts +++ b/src/admin/components/elements/DocumentDrawer/types.ts @@ -1,9 +1,14 @@ import React, { HTMLAttributes } from 'react'; +import { SanitizedCollectionConfig } from '../../../../collections/config/types'; export type DocumentDrawerProps = { collectionSlug: string id?: string - onSave?: (json: Record) => void + onSave?: (args: { + doc: Record + collectionConfig: SanitizedCollectionConfig + message: string, + }) => void customHeader?: React.ReactNode drawerSlug?: string } diff --git a/src/admin/components/forms/field-types/Relationship/index.tsx b/src/admin/components/forms/field-types/Relationship/index.tsx index b2d0422be9..9d912eab94 100644 --- a/src/admin/components/forms/field-types/Relationship/index.tsx +++ b/src/admin/components/forms/field-types/Relationship/index.tsx @@ -25,6 +25,7 @@ import { findOptionsByValue } from './findOptionsByValue'; import { GetFilterOptions } from './GetFilterOptions'; import { SingleValue } from './select-components/SingleValue'; import { MultiValueLabel } from './select-components/MultiValueLabel'; +import { DocumentDrawerProps } from '../../../elements/DocumentDrawer/types'; import './index.scss'; @@ -300,6 +301,10 @@ const Relationship: React.FC = (props) => { setHasLoadedFirstPage(false); }, [relationTo, filterOptionsResult]); + const onSave = useCallback((args) => { + dispatchOptions({ type: 'UPDATE', doc: args.doc, collection: args.collectionConfig, i18n }); + }, [i18n]); + const classes = [ 'field-type', baseClass, @@ -383,6 +388,7 @@ const Relationship: React.FC = (props) => { disableMouseDown: drawerIsOpen, disableKeyDown: drawerIsOpen, setDrawerIsOpen, + onSave, }} onMenuOpen={() => { if (!hasLoadedFirstPage) { diff --git a/src/admin/components/forms/field-types/Relationship/optionsReducer.ts b/src/admin/components/forms/field-types/Relationship/optionsReducer.ts index 587151e5ff..1a5ea0c8f8 100644 --- a/src/admin/components/forms/field-types/Relationship/optionsReducer.ts +++ b/src/admin/components/forms/field-types/Relationship/optionsReducer.ts @@ -29,6 +29,22 @@ const optionsReducer = (state: OptionGroup[], action: Action): OptionGroup[] => return []; } + case 'UPDATE': { + const { collection, doc, i18n } = action; + const relation = collection.slug; + const newOptions = [...state]; + const labelKey = collection.admin.useAsTitle || 'id'; + const foundOptionGroup = newOptions.find((optionGroup) => optionGroup.label === collection.labels.plural); + const foundOption = foundOptionGroup?.options?.find((option) => option.value === doc.id); + + if (foundOption) { + foundOption.label = doc[labelKey] || `${i18n.t('general:untitled')} - ID: ${doc.id}`; + foundOption.relationTo = relation; + } + + return newOptions; + } + case 'ADD': { const { collection, docs, sort, ids = [], i18n } = action; const relation = collection.slug; diff --git a/src/admin/components/forms/field-types/Relationship/select-components/MultiValueLabel/index.tsx b/src/admin/components/forms/field-types/Relationship/select-components/MultiValueLabel/index.tsx index 3e5f10b8f2..a695d7c64d 100644 --- a/src/admin/components/forms/field-types/Relationship/select-components/MultiValueLabel/index.tsx +++ b/src/admin/components/forms/field-types/Relationship/select-components/MultiValueLabel/index.tsx @@ -20,6 +20,7 @@ export const MultiValueLabel: React.FC> = (props) => { selectProps: { setDrawerIsOpen, draggableProps, + onSave, }, } = props; @@ -65,7 +66,7 @@ export const MultiValueLabel: React.FC> = (props) => { - + )} diff --git a/src/admin/components/forms/field-types/Relationship/select-components/SingleValue/index.tsx b/src/admin/components/forms/field-types/Relationship/select-components/SingleValue/index.tsx index 063f6557c3..a09b3f88f0 100644 --- a/src/admin/components/forms/field-types/Relationship/select-components/SingleValue/index.tsx +++ b/src/admin/components/forms/field-types/Relationship/select-components/SingleValue/index.tsx @@ -21,6 +21,7 @@ export const SingleValue: React.FC> = (props) => { selectProps: { selectProps: { setDrawerIsOpen, + onSave, }, }, } = props; @@ -69,7 +70,7 @@ export const SingleValue: React.FC> = (props) => { {relationTo && hasReadPermission && ( - + )} ); diff --git a/src/admin/components/forms/field-types/Relationship/types.ts b/src/admin/components/forms/field-types/Relationship/types.ts index 24f46113ce..30b89daa8d 100644 --- a/src/admin/components/forms/field-types/Relationship/types.ts +++ b/src/admin/components/forms/field-types/Relationship/types.ts @@ -28,6 +28,13 @@ type CLEAR = { type: 'CLEAR' } +type UPDATE = { + type: 'UPDATE' + doc: any + collection: SanitizedCollectionConfig + i18n: typeof i18n +} + type ADD = { type: 'ADD' docs: any[] @@ -37,7 +44,7 @@ type ADD = { i18n: typeof i18n } -export type Action = CLEAR | ADD +export type Action = CLEAR | ADD | UPDATE export type ValueWithRelation = { relationTo: string diff --git a/src/admin/components/views/collections/Edit/Default.tsx b/src/admin/components/views/collections/Edit/Default.tsx index e04db3acdb..c8c7a75957 100644 --- a/src/admin/components/views/collections/Edit/Default.tsx +++ b/src/admin/components/views/collections/Edit/Default.tsx @@ -94,11 +94,13 @@ const DefaultEditView: React.FC = (props) => { disabled={!hasSavePermission} initialState={initialState} > - + {!disableEyebrow && ( + + )}