FileAttachmentForm demo page update to include example usage of createWebDavDirectory() (#103)

Author: cnathe

demo/package-lock.json

@@ -12,7 +12,7 @@
     "test": "cross-env NODE_ENV=test jest"
   },
   "dependencies": {
-    "@labkey/components": "2.218.2"
+    "@labkey/components": "2.222.0"
   },
   "devDependencies": {
     "@labkey/build": "6.2.1",

demo/package.json

@@ -0,0 +1,53 @@
+import React, { FC, memo, useCallback, useState } from 'react';
+import { Button, Col, Form, FormControl, Modal, Row } from 'react-bootstrap';
+
+interface Props {
+    close: () => void;
+    submit: (name: string) => void;
+}
+
+export const CreateDirectoryModal : FC<Props> = memo(props => {
+    const { close, submit } = props;
+    const [name, setName] = useState<string>('');
+
+    const onChange = useCallback((evt: any) => {
+        setName(evt.target.value);
+    }, []);
+
+    const _submit = useCallback((evt: any) => {
+        submit(name?.trim());
+    }, [submit, name]);
+
+    return (
+        <Modal show={true} onHide={close}>
+            <Modal.Header>Create Directory</Modal.Header>
+            <Modal.Body>
+                <Form>
+                    <Row className="form-group">
+                        <Col xs={4}>
+                            <div>Directory Name:</div>
+                        </Col>
+                        <Col xs={8}>
+                            <FormControl type="text" id={'directory-name'} name={'directory-name'} onChange={onChange} />
+                        </Col>
+                    </Row>
+                </Form>
+                <Row>
+                    <Col xs={12}>
+                        <Button onClick={close} className="pull-left">
+                            Cancel
+                        </Button>
+                        <Button
+                            className="pull-right"
+                            bsStyle="success"
+                            disabled={name?.trim().length === 0}
+                            onClick={_submit}
+                        >
+                            Submit
+                        </Button>
+                    </Col>
+                </Row>
+            </Modal.Body>
+        </Modal>
+    )
+});

demo/src/client/FileAttachmentPage/CreateDirectoryModal.tsx

@@ -1,19 +1,23 @@
-import React, { FC, memo, useEffect, useState } from 'react';
+import React, { FC, memo, useCallback, useEffect, useState } from 'react';
 import { Draft, produce } from "immer";
 import { ActionURL } from "@labkey/api";
-import { LoadingSpinner } from '@labkey/components';
+import { createWebDavDirectory, LoadingSpinner } from '@labkey/components';
 
 import { MY_ATTACHMENTS_DIR } from "./constants";
 import { FileAttachmentModel, SavedFileModel } from "./models";
 import { getUploadedFiles } from "./actions";
+import { CreateDirectoryModal } from './CreateDirectoryModal';
 
 export const FileDisplayPanel : FC = memo(() => {
     const [loading, setLoading] = useState<boolean>(true);
+    const [showCreateDirectoryModal, setShowCreateDirectoryModal] = useState<boolean>();
     const [fileAttachmentModel, setFileAttachmentModel] = useState<FileAttachmentModel>(new FileAttachmentModel());
 
     //equivalent to componentDidMount and componentDidUpdate
     useEffect(() => {
-        getUploadedFiles(ActionURL.getContainer(), MY_ATTACHMENTS_DIR, false)
+        if (!loading) return;
+
+        getUploadedFiles(ActionURL.getContainer(), MY_ATTACHMENTS_DIR, true)
             .then((files:Array<SavedFileModel>) => {
                 if (files?.length > 0) {
                     const updatedModel = produce(fileAttachmentModel, (draft: Draft<FileAttachmentModel>) => {
@@ -27,8 +31,30 @@ export const FileDisplayPanel : FC = memo(() => {
 
                 setLoading(false);
             });
+    }, [loading]);
+
+    const onCreateDirectory = useCallback(() => {
+        setShowCreateDirectoryModal(true);
     }, []);
 
+    const closeCreateDirectory = useCallback(() => {
+        setShowCreateDirectoryModal(false);
+    }, []);
+
+    const submitCreateDirectory = useCallback((name: string) => {
+        let path = MY_ATTACHMENTS_DIR;
+        if (!name?.startsWith('/')) path = path + '/';
+        path = path + name;
+
+        createWebDavDirectory(ActionURL.getContainer(), path, true)
+            .then(() => {
+                // reset loading state to force refresh of panel savedFiles
+                setLoading(true);
+            });
+
+        closeCreateDirectory();
+    }, [closeCreateDirectory]);
+
     return (
         <div className='panel panel-default'>
             <div className='panel-heading'>
@@ -52,7 +78,7 @@ export const FileDisplayPanel : FC = memo(() => {
                 {
                     !loading && !fileAttachmentModel.savedFiles && (
                         <p>
-                            No files to display. Use the panel above to upload files to this location.
+                            No files or directories to display. Use the panel above to upload files to this location.
                         </p>
                     )
                 }
@@ -63,8 +89,12 @@ export const FileDisplayPanel : FC = memo(() => {
                         })}>
                             Manage Files
                         </a>
+                        <a className='labkey-text-link' onClick={onCreateDirectory}>
+                            Create Directory
+                        </a>
                     </p>
                 )}
+                {showCreateDirectoryModal && <CreateDirectoryModal close={closeCreateDirectory} submit={submitCreateDirectory} />}
             </div>
         </div>
     );