feat: adds UploadGallery to rich text upload

payloadcms · Sep 27, 2021 · 6f3edf9 · 6f3edf9
1 parent 85c6c30
commit 6f3edf9
Show file tree

Hide file tree

Showing 6 changed files with 162 additions and 158 deletions.
diff --git a/src/admin/components/forms/field-types/RichText/elements/upload/Button/Fields/index.tsx b/src/admin/components/forms/field-types/RichText/elements/upload/Button/Fields/index.tsx
diff --git a/src/admin/components/forms/field-types/RichText/elements/upload/Button/index.scss b/src/admin/components/forms/field-types/RichText/elements/upload/Button/index.scss
@@ -4,30 +4,4 @@
   .btn {
     margin-right: base(1);
   }
-
-  &__modal {
-    display: flex;
-    align-items: center;
-    height: 100%;
-
-    &.payload__modal-item--enterDone {
-      @include blur-bg;
-    }
-  }
-
-  &__header {
-    width: 100%;
-    margin-bottom: $baseline;
-    display: flex;
-    justify-content: space-between;
-
-    h3 {
-      margin: 0;
-    }
-
-    svg {
-      width: base(1.5);
-      height: base(1.5);
-    }
-  }
 }
diff --git a/src/admin/components/forms/field-types/RichText/elements/upload/Button/index.tsx b/src/admin/components/forms/field-types/RichText/elements/upload/Button/index.tsx
@@ -5,19 +5,22 @@ import { ReactEditor, useSlate } from 'slate-react';
 import { useConfig } from '@payloadcms/config-provider';
 import ElementButton from '../../Button';
 import UploadIcon from '../../../../../../icons/Upload';
-import Form from '../../../../../Form';
+import usePayloadAPI from '../../../../../../../hooks/usePayloadAPI';
+import UploadGallery from '../../../../../../elements/UploadGallery';
+import ListControls from '../../../../../../elements/ListControls';
+import ReactSelect from '../../../../../../elements/ReactSelect';
+import Paginator from '../../../../../../elements/Paginator';
+import formatFields from '../../../../../../views/collections/List/formatFields';
+import Label from '../../../../../Label';
 import MinimalTemplate from '../../../../../../templates/Minimal';
 import Button from '../../../../../../elements/Button';
-import Submit from '../../../../../Submit';
-import X from '../../../../../../icons/X';
-import Fields from './Fields';
-import { requests } from '../../../../../../../api';
+import { SanitizedCollectionConfig } from '../../../../../../../../collections/config/types';
 
 import './index.scss';
-
-const initialFormData = {};
+import '../modal.scss';
 
 const baseClass = 'upload-rich-text-button';
+const baseModalClass = 'rich-text-upload-modal';
 
 const insertUpload = (editor, { value, relationTo }) => {
   const text = { text: ' ' };
@@ -47,32 +50,58 @@ const insertUpload = (editor, { value, relationTo }) => {
 };
 
 const UploadButton: React.FC<{path: string}> = ({ path }) => {
-  const { open, closeAll } = useModal();
+  const { open, closeAll, currentModal } = useModal();
   const editor = useSlate();
   const { serverURL, routes: { api }, collections } = useConfig();
+  const [availableCollections] = useState(() => collections.filter(({ admin: { enableRichTextRelationship }, upload }) => (Boolean(upload) && enableRichTextRelationship)));
   const [renderModal, setRenderModal] = useState(false);
-  const [loading, setLoading] = useState(false);
+  const [modalCollectionOption, setModalCollectionOption] = useState<{ label: string, value: string}>(() => {
+    const firstAvailableCollection = collections.find(({ admin: { enableRichTextRelationship }, upload }) => (Boolean(upload) && enableRichTextRelationship));
+    return { label: firstAvailableCollection.labels.singular, value: firstAvailableCollection.slug };
+  });
+  const [modalCollection, setModalCollection] = useState<SanitizedCollectionConfig>(() => collections.find(({ admin: { enableRichTextRelationship }, upload }) => (Boolean(upload) && enableRichTextRelationship)));
+  const [listControls, setListControls] = useState<{where?: unknown}>({});
+  const [page, setPage] = useState(null);
+  const [sort, setSort] = useState(null);
+  const [fields, setFields] = useState(formatFields(modalCollection));
   const [hasEnabledCollections] = useState(() => collections.find(({ upload, admin: { enableRichTextRelationship } }) => upload && enableRichTextRelationship));
-  const modalSlug = `${path}-add-upload`;
 
-  const handleAddUpload = useCallback(async (_, { relationTo, value }) => {
-    setLoading(true);
+  const modalSlug = `${path}-add-upload`;
+  const moreThanOneAvailableCollection = availableCollections.length > 1;
+  const isOpen = currentModal === modalSlug;
 
-    const res = await requests.get(`${serverURL}${api}/${relationTo}/${value}?depth=0`);
-    const json = await res.json();
+  // If modal is open, get active page of upload gallery
+  const apiURL = isOpen ? `${serverURL}${api}/${modalCollection.slug}` : null;
+  const [{ data }, { setParams }] = usePayloadAPI(apiURL, {});
 
-    insertUpload(editor, { value: { id: json.id }, relationTo });
-    closeAll();
-    setRenderModal(false);
-    setLoading(false);
-  }, [editor, closeAll, api, serverURL]);
+  useEffect(() => {
+    setFields(formatFields(modalCollection));
+  }, [modalCollection]);
 
   useEffect(() => {
     if (renderModal) {
       open(modalSlug);
     }
   }, [renderModal, open, modalSlug]);
 
+  useEffect(() => {
+    const params: {
+      page?: number
+      sort?: string
+      where?: unknown
+    } = {};
+
+    if (page) params.page = page;
+    if (listControls?.where) params.where = listControls.where;
+    if (sort) params.sort = sort;
+
+    setParams(params);
+  }, [setParams, page, listControls, sort]);
+
+  useEffect(() => {
+    setModalCollection(collections.find(({ slug }) => modalCollectionOption.value === slug));
+  }, [modalCollectionOption, collections]);
+
   if (!hasEnabledCollections) return null;
 
   return (
@@ -86,33 +115,90 @@ const UploadButton: React.FC<{path: string}> = ({ path }) => {
       </ElementButton>
       {renderModal && (
         <Modal
+          className={baseModalClass}
           slug={modalSlug}
-          className={`${baseClass}__modal`}
         >
-          <MinimalTemplate>
-            <header className={`${baseClass}__header`}>
-              <h3>Add Upload</h3>
-              <Button
-                buttonStyle="none"
-                onClick={() => {
-                  closeAll();
+          {isOpen && (
+            <MinimalTemplate width="wide">
+              <header className={`${baseModalClass}__header`}>
+                <h1>
+                  Add
+                  {' '}
+                  {modalCollection.labels.singular}
+                </h1>
+                <Button
+                  icon="x"
+                  round
+                  buttonStyle="icon-label"
+                  iconStyle="with-border"
+                  onClick={() => {
+                    closeAll();
+                    setRenderModal(false);
+                  }}
+                />
+              </header>
+              {moreThanOneAvailableCollection && (
+                <div className={`${baseModalClass}__select-collection-wrap`}>
+                  <Label label="Select a Collection to Browse" />
+                  <ReactSelect
+                    className={`${baseClass}__select-collection`}
+                    value={modalCollectionOption}
+                    onChange={setModalCollectionOption}
+                    options={availableCollections.map((coll) => ({ label: coll.labels.singular, value: coll.slug }))}
+                  />
+                </div>
+              )}
+              <ListControls
+                handleChange={setListControls}
+                collection={{
+                  ...modalCollection,
+                  fields,
+                }}
+                enableColumns={false}
+                setSort={setSort}
+                enableSort
+              />
+              <UploadGallery
+                docs={data?.docs}
+                collection={modalCollection}
+                onCardClick={(doc) => {
+                  insertUpload(editor, {
+                    value: {
+                      id: doc.id,
+                    },
+                    relationTo: modalCollection.slug,
+                  });
                   setRenderModal(false);
+                  closeAll();
                 }}
-              >
-                <X />
-              </Button>
-            </header>
-            <Form
-              onSubmit={handleAddUpload}
-              initialData={initialFormData}
-              disabled={loading}
-            >
-              <Fields />
-              <Submit>
-                Add upload
-              </Submit>
-            </Form>
-          </MinimalTemplate>
+              />
+              <div className={`${baseClass}__page-controls`}>
+                <Paginator
+                  limit={data.limit}
+                  totalPages={data.totalPages}
+                  page={data.page}
+                  hasPrevPage={data.hasPrevPage}
+                  hasNextPage={data.hasNextPage}
+                  prevPage={data.prevPage}
+                  nextPage={data.nextPage}
+                  numberOfNeighbors={1}
+                  onChange={setPage}
+                  disableHistoryChange
+                />
+                {data?.totalDocs > 0 && (
+                  <div className={`${baseClass}__page-info`}>
+                    {data.page}
+                    -
+                    {data.totalPages > 1 ? data.limit : data.totalDocs}
+                    {' '}
+                    of
+                    {' '}
+                    {data.totalDocs}
+                  </div>
+                )}
+              </div>
+            </MinimalTemplate>
+          )}
         </Modal>
       )}
     </Fragment>

diff --git a/src/admin/components/forms/field-types/RichText/elements/upload/Element/index.scss b/src/admin/components/forms/field-types/RichText/elements/upload/Element/index.scss
@@ -40,36 +40,4 @@
     box-shadow: $focus-box-shadow;
     outline: none;
   }
-
-  &__modal {
-    @include blur-bg;
-    display: flex;
-    align-items: center;
-
-    .template-minimal {
-      padding-top: base(4);
-      align-items: flex-start;
-    }
-  }
-
-  &__modal-header {
-    margin-bottom: $baseline;
-    display: flex;
-
-    h1 {
-      margin: 0 auto 0 0;
-    }
-
-    .btn {
-      margin: 0 0 0 $baseline;
-    }
-  }
-
-  &__modal-sub-header {
-    margin-top: base(.25);
-  }
-
-  &__select-collection-wrap {
-    margin-bottom: base(1);
-  }
 }
diff --git a/src/admin/components/forms/field-types/RichText/elements/upload/Element/index.tsx b/src/admin/components/forms/field-types/RichText/elements/upload/Element/index.tsx
@@ -17,8 +17,10 @@ import { SanitizedCollectionConfig } from '../../../../../../../../collections/c
 import Label from '../../../../../Label';
 
 import './index.scss';
+import '../modal.scss';
 
 const baseClass = 'rich-text-upload';
+const baseModalClass = 'rich-text-upload-modal';
 
 const initialParams = {
   depth: 0,
@@ -145,14 +147,13 @@ const Element = ({ attributes, children, element, path }) => {
       {children}
       {renderModal && (
         <Modal
-          className={`${baseClass}__modal`}
+          className={baseModalClass}
           slug={modalSlug}
         >
           {isOpen && (
             <MinimalTemplate width="wide">
-              <header className={`${baseClass}__modal-header`}>
+              <header className={`${baseModalClass}__header`}>
                 <h1>
-                  {' '}
                   Choose
                   {' '}
                   {modalCollection.labels.singular}
@@ -169,7 +170,7 @@ const Element = ({ attributes, children, element, path }) => {
                 />
               </header>
               {moreThanOneAvailableCollection && (
-                <div className={`${baseClass}__select-collection-wrap`}>
+                <div className={`${baseModalClass}__select-collection-wrap`}>
                   <Label label="Select a Collection to Browse" />
                   <ReactSelect
                     className={`${baseClass}__select-collection`}