tabshift/payload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: renders rte upload drawer #2178

Browse Source
This commit is contained in:
Jacob Fletcher
2023-02-28 09:08:16 -05:00
committed by GitHub
parent b0b82e1f57
commit 523d9d4952
32 changed files with 201 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/admin/components/elements/Button/index.tsx
View File

@@ -7,6 +7,7 @@ import x from '../../icons/X';
import chevron from '../../icons/Chevron';
import edit from '../../icons/Edit';
import swap from '../../icons/Swap';
import linkIcon from '../../icons/Link';
import Tooltip from '../Tooltip';
import './index.scss';
@@ -17,6 +18,7 @@ const icons = {
chevron,
edit,
swap,
link: linkIcon,
};
const baseClass = 'btn';

10
src/admin/components/forms/field-types/RichText/elements/relationship/Element/index.scss
View File

@@ -49,16 +49,18 @@
outline: none;
}
.rich-text-relationship__doc-drawer-toggler {
text-decoration: underline;
pointer-events: all;
line-height: inherit;
}
&__actions {
display: flex;
align-items: center;
flex-shrink: 0;
margin-left: base(0.5);
.rich-text-relationship__doc-drawer-toggler {
pointer-events: all;
}
& > *:not(:last-child) {
margin-right: base(.25);
}

22
src/admin/components/forms/field-types/RichText/elements/relationship/Element/index.tsx
View File

@@ -146,25 +146,13 @@ const Element: React.FC<Props> = (props) => {
<p className={`${baseClass}__label`}>
{t('labelRelationship', { label: getTranslation(relatedCollection.labels.singular, i18n) })}
</p>
<p className={`${baseClass}__title`}>
{data[relatedCollection?.admin?.useAsTitle || 'id']}
</p>
<DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>
<p className={`${baseClass}__title`}>
{data[relatedCollection?.admin?.useAsTitle || 'id']}
</p>
</DocumentDrawerToggler>
</div>
<div className={`${baseClass}__actions`}>
{value?.id && (
<DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>
<Button
icon="edit"
round
buttonStyle="icon-label"
el="div"
onClick={(e) => {
e.preventDefault();
}}
tooltip={t('general:editLabel', { label: getTranslation(relatedCollection.labels.singular, i18n) })}
/>
</DocumentDrawerToggler>
)}
<ListDrawerToggler
disabled={fieldProps?.admin?.readOnly}
className={`${baseClass}__list-drawer-toggler`}

82
src/admin/components/forms/field-types/RichText/elements/upload/Element/UploadDrawer/index.tsx Normal file
View File

@@ -0,0 +1,82 @@
import { useModal } from '@faceless-ui/modal';
import { Transforms } from 'slate';
import { ReactEditor, useSlateStatic } from 'slate-react';
import React, { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { ElementProps } from '..';
import fieldTypes from '../../../../..';
import { SanitizedCollectionConfig } from '../../../../../../../../../collections/config/types';
import { Drawer } from '../../../../../../../elements/Drawer';
import { useAuth } from '../../../../../../../utilities/Auth';
import { useLocale } from '../../../../../../../utilities/Locale';
import Form from '../../../../../../Form';
import RenderFields from '../../../../../../RenderFields';
import FormSubmit from '../../../../../../Submit';
import buildStateFromSchema from '../../../../../../Form/buildStateFromSchema';
import { getTranslation } from '../../../../../../../../../utilities/getTranslation';
export const UploadDrawer: React.FC<ElementProps & {
drawerSlug: string
relatedCollection: SanitizedCollectionConfig
}> = (props) => {
const editor = useSlateStatic();
const {
fieldProps,
relatedCollection,
drawerSlug,
element,
} = props;
const { t, i18n } = useTranslation();
const locale = useLocale();
const { user } = useAuth();
const { closeModal } = useModal();
const [initialState, setInitialState] = useState({});
const fieldSchema = fieldProps?.admin?.upload?.collections?.[relatedCollection.slug]?.fields;
const handleUpdateEditData = useCallback((_, data) => {
const newNode = {
fields: data,
};
const elementPath = ReactEditor.findPath(editor, element);
Transforms.setNodes(
editor,
newNode,
{ at: elementPath },
);
closeModal(drawerSlug);
}, [closeModal, editor, element, drawerSlug]);
useEffect(() => {
const awaitInitialState = async () => {
const state = await buildStateFromSchema({ fieldSchema, data: { ...element?.fields || {} }, user, operation: 'update', locale, t });
setInitialState(state);
};
awaitInitialState();
}, [fieldSchema, element.fields, user, locale, t]);
return (
<Drawer
slug={drawerSlug}
title={t('general:editLabel', { label: getTranslation(relatedCollection.labels.singular, i18n) })}
>
<Form
onSubmit={handleUpdateEditData}
initialState={initialState}
>
<RenderFields
readOnly={false}
fieldTypes={fieldTypes}
fieldSchema={fieldSchema}
/>
<FormSubmit>
{t('fields:saveChanges')}
</FormSubmit>
</Form>
</Drawer>
);
};

16
src/admin/components/forms/field-types/RichText/elements/upload/Element/index.scss
View File

@@ -84,8 +84,22 @@
}
}
&__upload-drawer-toggler {
background-color: transparent;
border: none;
padding: 0;
margin: 0;
outline: none;
line-height: inherit;
}
&__doc-drawer-toggler {
text-decoration: underline;
}
&__doc-drawer-toggler,
&__list-drawer-toggler {
&__list-drawer-toggler,
&__upload-drawer-toggler {
& > * {
margin: 0;
}

34
src/admin/components/forms/field-types/RichText/elements/upload/Element/index.tsx
View File

@@ -13,6 +13,9 @@ import { useListDrawer } from '../../../../../../elements/ListDrawer';
import { SanitizedCollectionConfig } from '../../../../../../../../collections/config/types';
import { Props as RichTextProps } from '../../../types';
import { EnabledRelationshipsCondition } from '../../EnabledRelationshipsCondition';
import { useDrawerSlug } from '../../../../../../elements/Drawer/useDrawerSlug';
import { UploadDrawer } from './UploadDrawer';
import { DrawerToggler } from '../../../../../../elements/Drawer';
import './index.scss';
@@ -22,7 +25,7 @@ const initialParams = {
depth: 0,
};
type ElementProps = {
export type ElementProps = {
attributes: HTMLAttributes<HTMLDivElement>
children: React.ReactNode
element: any
@@ -48,6 +51,8 @@ const Element: React.FC<ElementProps> = (props) => {
const [cacheBust, dispatchCacheBust] = useReducer((state) => state + 1, 0);
const [relatedCollection, setRelatedCollection] = useState<SanitizedCollectionConfig>(() => collections.find((coll) => coll.slug === relationTo));
const drawerSlug = useDrawerSlug('upload-drawer');
const [
ListDrawer,
ListDrawerToggler,
@@ -142,6 +147,8 @@ const Element: React.FC<ElementProps> = (props) => {
closeListDrawer();
}, [closeListDrawer, editor, element, collections]);
const customFields = fieldProps?.admin?.upload?.collections?.[relatedCollection.slug]?.fields;
return (
<div
className={[
@@ -168,8 +175,12 @@ const Element: React.FC<ElementProps> = (props) => {
{getTranslation(relatedCollection.labels.singular, i18n)}
</div>
<div className={`${baseClass}__actions`}>
{value?.id && (
<DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>
{customFields?.length > 0 && (
<DrawerToggler
slug={drawerSlug}
className={`${baseClass}__upload-drawer-toggler`}
disabled={fieldProps?.admin?.readOnly}
>
<Button
icon="edit"
round
@@ -178,9 +189,9 @@ const Element: React.FC<ElementProps> = (props) => {
onClick={(e) => {
e.preventDefault();
}}
tooltip={t('general:editLabel', { label: relatedCollection.labels.singular })}
tooltip={t('fields:editRelationship')}
/>
</DocumentDrawerToggler>
</DrawerToggler>
)}
<ListDrawerToggler
className={`${baseClass}__list-drawer-toggler`}
@@ -214,9 +225,11 @@ const Element: React.FC<ElementProps> = (props) => {
</div>
</div>
<div className={`${baseClass}__bottomRow`}>
<strong>
{data?.filename}
</strong>
<DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>
<strong>
{data?.filename}
</strong>
</DocumentDrawerToggler>
</div>
</div>
{children}
@@ -224,6 +237,11 @@ const Element: React.FC<ElementProps> = (props) => {
<DocumentDrawer onSave={updateUpload} />
)}
<ListDrawer onSelect={swapUpload} />
<UploadDrawer
drawerSlug={drawerSlug}
relatedCollection={relatedCollection}
{...props}
/>
</div>
);
};

11
src/admin/components/icons/Link/index.scss Normal file
View File

@@ -0,0 +1,11 @@
@import '../../../scss/styles';
.icon--link {
width: $baseline;
height: $baseline;
.stroke {
stroke: var(--theme-elevation-800);
stroke-width: $style-stroke-width;
}
}

4
src/admin/components/icons/Link/index.tsx
View File

@@ -1,5 +1,7 @@
import React from 'react';
import './index.scss';
const LinkIcon: React.FC = () => (
<svg
viewBox="0 0 24 24"
@@ -7,7 +9,7 @@ const LinkIcon: React.FC = () => (
focusable="false"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
className="graphic link"
className="graphic link icon icon--link"
>
<path
fill="none"

1
src/translations/cs.json
View File

@@ -106,6 +106,7 @@
"customURL": "Vlastní URL",
"editLabelData": "Upravit data {{label}}",
"editLink": "Upravit odkaz",
"editRelationship": "Upravit vztah",
"enterURL": "Zadejte URL",
"internalLink": "Interní odkaz",
"itemsAndMore": "{{items}} a {{count}} dalších",

1
src/translations/de.json
View File

@@ -105,6 +105,7 @@
"collapseAll": "Alle einklappen",
"customURL": "Eigene URL",
"editLink": "Bearbeite Link",
"editRelationship": "Beziehung Hinzufügen",
"editLabelData": "{{label}} bearbeiten",
"enterURL": "URL eingeben",
"internalLink": "Interner Link",

1
src/translations/en.json
View File

@@ -107,6 +107,7 @@
"customURL": "Custom URL",
"editLabelData": "Edit {{label}} data",
"editLink": "Edit Link",
"editRelationship": "Edit Relationship",
"enterURL": "Enter a URL",
"internalLink": "Internal Link",
"itemsAndMore": "{{items}} and {{count}} more",

1
src/translations/es.json
View File

@@ -107,6 +107,7 @@
"customURL": "URL Personalizado",
"editLabelData": "Editar información de {{label}}",
"editLink": "Editar Enlace",
"editRelationship": "Editar Relación",
"enterURL": "Ingresar URL",
"internalLink": "Enlace Interno",
"itemsAndMore": "{{items}} y {{count}} más",

2
src/translations/fr.json
View File

@@ -103,6 +103,8 @@
"chooseLabel": "Choisir un(e) {{label}}",
"collapseAll": "Tout réduire",
"editLabelData": "Modifier les données de ou du {{label}}",
"editLink": "Modifier le lien",
"editRelationship": "Modifier la relation",
"itemsAndMore": "{{items}} et {{count}} de plus",
"labelRelationship": "Relation de ou du {{label}} ",
"latitude": "Latitude",

1
src/translations/hr.json
View File

@@ -107,6 +107,7 @@
"customURL": "Prilagođeni URL",
"editLabelData": "Uredi {{label}} podatke",
"editLink": "Uredi poveznicu",
"editRelationship": "Uredi odnos",
"enterURL": "Unesi URL",
"internalLink": "Interna poveznika",
"itemsAndMore": "{{items}} i {{count}} više",

3
src/translations/hu.json
View File

@@ -107,6 +107,7 @@
"customURL": "Egyéni URL",
"editLabelData": "{{label}} adatok szerkesztése",
"editLink": "Link szerkesztése",
"editRelationship": "Kapcsolat hozzáadása",
"enterURL": "Adjon meg egy URL-t",
"internalLink": "Belső link",
"itemsAndMore": "{{items}} és további {{count}}",
@@ -324,4 +325,4 @@
"viewingVersions": "A {{entityLabel}} {{documentTitle}} verzióinak megtekintése",
"viewingVersionsGlobal": "A globális {{entityLabel}} verzióinak megtekintése"
}
}
}

2
src/translations/index.ts
View File

@@ -3,7 +3,7 @@ import de from './de.json';
import en from './en.json';
import es from './es.json';
import fr from './fr.json';
import hr from "./hr.json";
import hr from './hr.json';
import it from './it.json';
import ja from './ja.json';
import my from './my.json';

2
src/translations/it.json
View File

@@ -103,6 +103,8 @@
"chooseLabel": "Scegli {{label}}",
"collapseAll": "Comprimi tutto",
"editLabelData": "Modifica i dati di {{label}}",
"editLink": "Modifica Collegamento",
"editRelationship": "Modifica Relazione",
"itemsAndMore": "{{items}} e altri {{count}}",
"labelRelationship": "Relazione {{label}}",
"latitude": "Latitudine",

2
src/translations/ja.json
View File

@@ -102,6 +102,8 @@
"chooseLabel": "{{label}} を選択",
"collapseAll": "すべて閉じる",
"editLabelData": "{{label}} データを編集",
"editLink": "リンクを編集",
"editRelationship": "リレーションシップを編集",
"itemsAndMore": "{{items}} 他{{count}}件",
"labelRelationship": "{{label}} リレーションシップ",
"latitude": "緯度",

2
src/translations/my.json
View File

@@ -102,6 +102,8 @@
"chooseLabel": "{{label}} အားရွေးချယ်ပါ။",
"collapseAll": "အားလုံးကို ခေါက်သိမ်းပါ။",
"editLabelData": "ဒေတာ {{label}} ကို တည်းဖြတ်ပါ။",
"editLink": "လင့်ခ်ကို တည်းဖြတ်ပါ။",
"editRelationship": "Relationship ကို တည်းဖြတ်ပါ။",
"itemsAndMore": "{{items}} နှင့် နောက်ထပ် {{count}} ခု",
"labelRelationship": "{{label}} Relationship",
"latitude": "vĩ độ",

1
src/translations/nb.json
View File

@@ -107,6 +107,7 @@
"customURL": "Egendefinert URL",
"editLabelData": "Rediger {{label}}-data",
"editLink": "Rediger lenke",
"editRelationship": "Rediger relasjon",
"enterURL": "Skriv inn en URL",
"internalLink": "Intern lenke",
"itemsAndMore": "{{items}} og {{count}} flere",

2
src/translations/nl.json
View File

@@ -103,6 +103,8 @@
"chooseLabel": "Kies {{label}}",
"collapseAll": "Alles samenvouwen",
"editLabelData": "Bewerk gegevens van {{label}}",
"editLink": "Link bewerken",
"editRelationship": "Relatie Relatie",
"itemsAndMore": "{{items}} en {{count}} meer",
"labelRelationship": "{{label}} relatie",
"latitude": "Breedtegraad",

2
src/translations/pl.json
View File

@@ -102,6 +102,8 @@
"chooseLabel": "Wybierz {{label}}",
"collapseAll": "Zwiń wszystko",
"editLabelData": "Edytuj dane {{label}}",
"editLink": "Edytuj Link",
"editRelationship": "Edytuj Relacje",
"itemsAndMore": "{{items}} i {{count}} więcej",
"labelRelationship": "Relacja {{label}}",
"latitude": "Szerokość",

2
src/translations/pt.json
View File

@@ -102,6 +102,8 @@
"chooseLabel": "Escolher {{label}}",
"collapseAll": "Recolher todos",
"editLabelData": "Editar dados de {{label}}",
"editLink": "Editar Link",
"editRelationship": "Editar Relacionamento",
"itemsAndMore": "{{items}} e mais {{count}}",
"labelRelationship": "Relacionado a {{label}}",
"latitude": "Latitude",

1
src/translations/ru.json
View File

@@ -107,6 +107,7 @@
"customURL": "Пользовательский URL",
"editLabelData": "Редактировать данные {{label}}",
"editLink": "Редактировать ссылку",
"editRelationship": "Редактировать Отношения",
"enterURL": "Введите URL",
"internalLink": "Внутренняя ссылка",
"itemsAndMore": "{{items}} и ещё {{count}}",

2
src/translations/sv.json
View File

@@ -103,6 +103,8 @@
"chooseLabel": "Välj {{label}}",
"collapseAll": "kollapsa Alla",
"editLabelData": "Redigera {{label}} data",
"editLink": "Redigera Länk",
"editRelationship": "Redigera Relation",
"itemsAndMore": "{{items}} och {{count}} mer",
"labelRelationship": "{{label}} Relation",
"latitude": "Latitud",

1
src/translations/th.json
View File

@@ -107,6 +107,7 @@
"customURL": "URL ที่กำหนดเอง",
"editLabelData": "แก้ไขข้อมูล {{label}}",
"editLink": "แก้ไขลิงก์",
"editRelationship": "แก้ไขความสัมพันธ์",
"enterURL": "ระบุ URL",
"internalLink": "ลิงก์ภายใน",
"itemsAndMore": "{{items}} และเพิ่มเติมอีก {{count}}",

1
src/translations/tr.json
View File

@@ -94,6 +94,7 @@
"chooseDocumentToLink": "Bağlantı verilecek bir döküman seçin.",
"customURL": "Özel URL",
"editLink": "Bağlantıyı Düzenle",
"editRelationship": "İlişkiyi Ekle",
"enterURL": "Bir URL girin",
"internalLink": "İç bağlantı",
"linkType": "Bağlantı türü",

4
src/translations/translation-schema.json
View File

@@ -384,6 +384,9 @@
"editLink": {
"type": "string"
},
"editRelationship": {
"type": "string"
},
"enterURL": {
"type": "string"
},
@@ -497,6 +500,7 @@
"chooseDocumentToLink",
"customURL",
"editLink",
"editRelationship",
"enterURL",
"internalLink",
"linkType",

1
src/translations/ua.json
View File

@@ -105,6 +105,7 @@
"customURL": "Власний URL",
"editLabelData": "Редагувати данні {{label}}",
"editLink": "Редагувати посилання",
"editRelationship": "Редагувати взаємозв'язок",
"enterURL": "Введіть URL",
"internalLink": "Внутрішнє посилання",
"itemsAndMore": "{{items}} і ще {{count}}",

2
src/translations/vi.json
View File

@@ -103,6 +103,8 @@
"chooseLabel": "Chọn: {{label}}",
"collapseAll": "Ẩn toàn bộ",
"editLabelData": "Chỉnh sửa nội dung của: {{label}}",
"editLink": "Chỉnh sửa liên kết",
"editRelationship": "Chỉnh sửa mối quan hệ",
"itemsAndMore": "{{items}} và {{count}} món nữa",
"labelRelationship": "Mối quan hệ của {{label}} (Relationship)",
"latitude": "Vĩ độ",

1
src/translations/zh.json
View File

@@ -107,6 +107,7 @@
"customURL": "自定义URL",
"editLabelData": "编辑{{label}}数据",
"editLink": "编辑链接",
"editRelationship": "编辑关系",
"enterURL": "输入一个URL",
"internalLink": "内部链接",
"itemsAndMore": "{{items}}和{{count}}更多",

17
test/fields/e2e.spec.ts
View File

@@ -480,7 +480,20 @@ describe('fields', () => {
await expect(editLinkModal).toBeHidden();
});
test('should open uploads drawer from read-only field', async () => {
test('should open upload drawer and render custom relationship fields', async () => {
navigateToRichTextFields();
const field = await page.locator('#field-richText');
const button = await field.locator('button.rich-text-upload__upload-drawer-toggler');
await button.click();
const documentDrawer = await page.locator('[id^=drawer_1_upload-drawer-]');
await expect(documentDrawer).toBeVisible();
const caption = await documentDrawer.locator('#field-caption');
await expect(caption).toBeVisible();
});
test('should open upload document drawer from read-only field', async () => {
navigateToRichTextFields();
const field = await page.locator('#field-richTextReadOnly');
const button = await field.locator('button.rich-text-upload__doc-drawer-toggler.doc-drawer__toggler');
@@ -491,7 +504,7 @@ describe('fields', () => {
await expect(documentDrawer).toBeVisible();
});
test('should open relationship drawer from read-only field', async () => {
test('should open relationship document drawer from read-only field', async () => {
navigateToRichTextFields();
const field = await page.locator('#field-richTextReadOnly');
const button = await field.locator('button.rich-text-relationship__doc-drawer-toggler.doc-drawer__toggler');