@selkirk-systems/attachments 1.0.4

package/lib/actions/FileActions.js

@@ -0,0 +1,34 @@
+import { FILE_DELETE, FILE_DELETED, FILE_DOWNLOAD, FILE_DOWNLOADED } from "../constants/PhotosConstants";
+import DownloadStore from "../stores/DownloadStore";
+import { fetch } from "@selkirk-systems/fetch";
+import { dispatch } from "@selkirk-systems/state-management";
+
+export const downloadFile = ( url, mimeType, fileName ) => {
+
+    const { downloading } = DownloadStore.getState();
+
+    if ( downloading ) return;
+
+    dispatch( FILE_DOWNLOAD, { url: url, mimeType: mimeType, fileName: fileName } );
+
+    return fetch( url, { contentType: mimeType, downloadFileName: fileName } )
+        .finally( () => {
+            dispatch( FILE_DOWNLOADED )
+        } )
+
+}
+
+export const deleteFile = ( url, fileName ) => {
+
+    const { deleting } = DownloadStore.getState();
+
+    if ( deleting ) return;
+
+    dispatch( FILE_DELETE, { fileName: fileName } );
+
+    return fetch( url, { method: "DELETE" } )
+        .finally( () => {
+            dispatch( FILE_DELETED, { fileName: fileName } )
+        } )
+
+}

package/lib/actions/ImageUploadActions.js

@@ -0,0 +1,134 @@
+/* eslint-disable no-loop-func */
+import { dispatch } from "@selkirk-systems/state-management";
+import { CLEAR_UPLOADS, DELETED_IMAGE, DELETE_IMAGE, HIDE_IMAGE_UPLOAD_DIALOG, IMAGE_UPLOAD_COMPLETE, SET_UPLOAD_PROGRESS, SHOW_IMAGE_UPLOAD_DIALOG } from "../constants/PhotosConstants";
+import { ADD_ERROR, fetch } from "@selkirk-systems/fetch";
+import { createProxiedURL } from "@selkirk-systems/selkirk-utils";
+import PhotoStore from "../stores/PhotosStore";
+import { confirmDialog } from "primereact/confirmdialog";
+import { extractDataArray } from "@selkirk-systems/selkirk-utils";
+
+export const closeImageUploadDialog = () => {
+
+    dispatch( HIDE_IMAGE_UPLOAD_DIALOG );
+    dispatch( CLEAR_UPLOADS );
+
+}
+export const showImageUploadDialog = ( tag ) => {
+
+    dispatch( SHOW_IMAGE_UPLOAD_DIALOG, tag );
+
+};
+
+export const invokeUploadInput = () => {
+
+    const element = document.querySelector( "input[type='file']" );
+
+    if ( !element ) return;
+
+    element.click();
+
+}
+export const deleteImageById = ( id ) => {
+
+    dispatch( DELETE_IMAGE, id )
+
+    return fetch( `/image/${id}`, { method: "DELETE" } )
+        .then( response => {
+            dispatch( DELETED_IMAGE, id );
+        } );
+
+}
+
+export const uploadFiles = ( url, files ) => {
+
+    return new Promise( ( resolve, reject ) => {
+        const uploads = [];
+
+        const { photos } = PhotoStore.getState();
+
+        if ( !url ) return;
+
+        for ( let file of files ) {
+            const exists = photos.find( ( p ) => p.name === file.name );
+
+            if ( exists ) {
+                confirmDialog( {
+                    message: `${file.name} already exists. \n Do you want to replace it?`,
+                    header: 'Confirm Upload',
+                    position: 'center',
+                    accept: () => {
+                        uploadFinalFile( file );
+                    }
+                } );
+            }
+            else {
+                uploadFinalFile( file );
+            }
+        }
+
+        function uploadFinalFile( file ) {
+
+
+            const caption = file.name;
+            const formData = new FormData();
+            const finalURL = new URL( `${url}?force=true&name=${file.name}` );
+
+            formData.append( "file", file, file.name );
+
+            const options = {
+                headers: {
+                    accept: "*/*",
+                    'content-length': file.size
+                },
+                form: formData,
+                method: "POST",
+            };
+
+            dispatch( SET_UPLOAD_PROGRESS, {
+                id: caption,
+                title: caption,
+                mimeType: file.type,
+                progress: 10,
+                response: null
+            } )
+
+            uploads.push(
+                fetch( finalURL, options )
+                    .then( ( [response] ) => {
+                        if ( response.status.code > 299 || response.status.code < 200 ) {
+                            throw response
+                        }
+
+                        response.data = extractDataArray( response.data );
+
+                        dispatch( SET_UPLOAD_PROGRESS, {
+                            id: caption,
+                            title: caption,
+                            mimeType: file.type,
+                            progress: 100,
+                            response: response
+                        } )
+                    } )
+                    .catch( response => {
+                        dispatch( SET_UPLOAD_PROGRESS, {
+                            id: caption,
+                            title: caption,
+                            mimeType: file.type,
+                            progress: 100,
+                            error: response.data
+                        } )
+                        return dispatch( ADD_ERROR, response );
+                    } )
+            )
+        }
+
+        Promise.all( uploads )
+            .finally( () => {
+                dispatch( IMAGE_UPLOAD_COMPLETE );
+                resolve();
+            } )
+
+    } );
+
+
+};

package/lib/actions/PhotoActions.js

@@ -0,0 +1,65 @@
+import { fetch } from "@selkirk-systems/fetch";
+import { DELETED_IMAGE, DELETE_IMAGE, FETCHED_PHOTOS, FETCH_PHOTOS } from "../constants/PhotosConstants";
+import { dispatch } from "@selkirk-systems/state-management";
+import { hideImageViewerDialog } from "./AttachmentActions";
+import { ADD_IGNORE_ERROR, REMOVE_IGNORE_ERROR_BY_ID } from "../constants/MessageConstants";
+
+
+export const fetchPhotos = ( url ) => {
+
+    dispatch( FETCH_PHOTOS );
+
+    //Filestore requires both of these set to application/json to get json details
+    //Proxy web server defaults to accept:'*/*' which does not work so we have to override here.
+    const options = {
+        skipCache: true,
+        headers: {
+            'Accept': "application/json",
+            'content-type': 'application/json'
+        }
+    };
+
+    dispatch(ADD_IGNORE_ERROR,[{id:url.toString(),statusCodes:[404]}]);
+
+    return fetch( url, options ).then( ( [response] ) => {
+
+        dispatch(REMOVE_IGNORE_ERROR_BY_ID,[{id:url.toString()}]);
+
+        if ( response.status.code > 299 || response.status.code < 200 ) {
+            dispatch( FETCHED_PHOTOS, [] )
+            return;
+        }
+
+        const onlyFiles = getAllFiles( response.data.children );
+
+        dispatch( FETCHED_PHOTOS, onlyFiles )
+
+    } )
+}
+export const clearPhotos = ()=>{
+    dispatch(FETCHED_PHOTOS,[]);
+}
+export const deleteImage = ( url, name ) => {
+
+    dispatch( DELETE_IMAGE, name );
+
+    return fetch( url, { method: "DELETE" } )
+        .then( response => {
+            dispatch( DELETED_IMAGE, name );
+            hideImageViewerDialog();
+        } );
+
+}
+
+function getAllFiles( children ) {
+    let ret = [];
+
+    children.forEach( c => {
+        if ( c.nodeType === 'FILE' ) ret.push( c );
+
+        if ( c.children && c.children.length ) ret = ret.concat( getAllFiles( c.children ) )
+    } )
+
+
+    return ret;
+}

package/lib/components/FileDeleteIcon.jsx

@@ -0,0 +1,42 @@
+import * as React from 'react'
+import { Connect } from '@selkirk-systems/state-management';
+import { Trash2 } from 'lucide-react';
+import { ProgressSpinner } from '@selkirk-systems/selkirk-components';
+import { Button } from 'primereact/button';
+import DownloadStore from '../stores/DownloadStore';
+
+class FileDownloadIcon extends React.Component {
+
+
+    static subscribe = [DownloadStore];
+
+
+    static defaultProps = {
+        deleting: false,
+        name: ''
+    }
+
+
+    static storeStateToProps = {
+        deleting: ( props, state ) => state.deleting
+    }
+
+
+    render() {
+        const { deleting, name, ...other } = this.props;
+
+        const isDeleting = deleting && deleting.fileName === name;
+
+        return (
+            <Button text type='button' {...other} >
+                {isDeleting && <ProgressSpinner />}
+                {!isDeleting && <Trash2 />}
+            </Button>
+        )
+    }
+
+
+}
+
+
+export default Connect( FileDownloadIcon );

package/lib/components/FileDownloadIcon.jsx

@@ -0,0 +1,42 @@
+import * as React from 'react'
+import { Connect } from '@selkirk-systems/state-management';
+import { Download } from 'lucide-react';
+import { ProgressSpinner } from '@selkirk-systems/selkirk-components';
+import { Button } from 'primereact/button';
+import DownloadStore from '../stores/DownloadStore';
+
+class FileDownloadIcon extends React.Component {
+
+
+    static subscribe = [DownloadStore];
+
+
+    static defaultProps = {
+        downloading: false,
+        name: ''
+    }
+
+
+    static storeStateToProps = {
+        downloading: ( props, state ) => state.downloading
+    }
+
+
+    render() {
+        const { downloading, name, ...other } = this.props;
+
+        const isDownloading = downloading && downloading.fileName === name;
+
+        return (
+            <Button text type='button' {...other} >
+                {isDownloading && <ProgressSpinner style={{ color: 'inherit' }} />}
+                {!isDownloading && <Download />}
+            </Button>
+        )
+    }
+
+
+}
+
+
+export default Connect( FileDownloadIcon );

package/lib/components/FileList.jsx

@@ -0,0 +1,111 @@
+import React, { Component } from "react";
+import { Connect } from '@selkirk-systems/state-management';
+import PhotoStore from "../stores/PhotosStore";
+import { FileIcon, Trash2 } from "lucide-react";
+import { Column, Row } from "@selkirk-systems/layout";
+import { Skeleton } from "primereact/skeleton";
+import memoizee from "memoizee";
+import { fetchPhotos } from "../actions/PhotoActions";
+import { Typography, Paper } from "@selkirk-systems/selkirk-components";
+import UploadImageDialog from "./UploadImageDialog";
+import { deleteFile, downloadFile } from "../actions/FileActions";
+import { createProxiedURL } from "@selkirk-systems/selkirk-utils";
+import FileDownloadIcon from "./FileDownloadIcon";
+import UnknownFileTypeImage from "./Icons/UnknownFileTypeImage";
+import MIME_TYPE_ICONS from "./MimeTypeIcons";
+import { sortByProp } from "@selkirk-systems/selkirk-utils";
+import { Button } from "primereact/button";
+import FileDeleteIcon from "./FileDeleteIcon";
+
+
+class PhotoGallery extends React.Component {
+
+
+    static subscribe = [PhotoStore];
+
+
+    static defaultProps = {
+        baseURL: "",
+        items: [],
+        fetching: false
+    }
+
+
+    static storeStateToProps = {
+
+        items: ( props, state ) => filesOnly( state.photos ),
+        fetching: ( props, state ) => state.fetching
+
+    }
+
+    handleFileClick = ( file ) => ( e ) => {
+
+        e.stopPropagation();
+
+        downloadFile( createProxiedURL( file._links.self.href ), file.mimeType, file.name );
+
+    }
+
+    handleFileDelete = ( file ) => ( e ) => {
+
+        e.stopPropagation();
+
+        const href = file.links ? file.links[0].href : file._links.self.href;
+
+        deleteFile( createProxiedURL( href ), file.name )
+    }
+
+    render() {
+
+        const { baseURL, items, fetching, ...other } = this.props;
+
+        const count = items.length;
+
+        return (
+            <div className="file-gallery paralax-content" {...other}>
+                {count < 1 && !fetching &&
+                    <Column center className='text-secondary' >
+                        <FileIcon mt="-xxxl" mb='sm' style={{ width: '75px', height: '75px', strokeWidth: 1 }} />
+                        <Typography style={{ fontWeight: 500 }} variant="subtitle2">NO FILES FOUND.</Typography>
+                    </Column>
+                }
+                {fetching && <Skeleton width="100%" height={window.innerHeight - 300} />}
+                {count > 0 &&
+                    <div p='md' style={{ flex: "1 1 auto" }}>
+                        {
+                            items.map( ( f, i ) => {
+                                return (
+                                    <Paper mb='sm' p='sm' key={f.id} elevation={1}  {...other}>
+                                        <Row align='center' xs="auto 1fr auto auto">
+                                            {MIME_TYPE_ICONS[f.mimeType] || <UnknownFileTypeImage />}
+                                            <Column gap='xs' ml='sm'>
+                                                <Typography variant="body1">{f.name}</Typography>
+                                                <Row className='text-secondary' gap='sm' justify='left'>
+                                                    <Typography variant='caption'>Size: </Typography>
+                                                    <Typography variant='caption'>{f.sizeInKB < 1000 ? `${f.sizeInKB.toFixed( 3 )} KB` : `${( f.sizeInKB / 1000 ).toFixed( 3 )} MB`}</Typography>
+                                                </Row>
+                                            </Column>
+                                            <FileDownloadIcon size="small" onClick={this.handleFileClick( f )} name={f.name} />
+                                            <FileDeleteIcon size="small" onClick={this.handleFileDelete( f )} name={f.name} />
+                                        </Row>
+                                    </Paper>
+                                )
+                            } )
+                        }
+                    </div>
+                }
+            </div >
+        )
+    }
+
+
+}
+
+
+const filesOnly = memoizee( ( files ) => {
+    return sortByProp( files.filter( ( f ) => f.mimeType.indexOf( "image" ) < 0 ), "name" ).reverse();
+} )
+
+
+
+export default Connect( PhotoGallery );

package/lib/components/Icons/ExcelFileTypeImage.jsx

@@ -0,0 +1,6 @@
+import SRC from '../../img/excel-filetype.png';
+import React from "react";
+
+const ExcelFileTypeImage = ( props ) => ( <img alt="Excel" src={SRC} {...props} /> )
+
+export default ExcelFileTypeImage;

package/lib/components/Icons/HTMLFileTypeImage.jsx

@@ -0,0 +1,5 @@
+import SRC from '../../img/html-filetype.png';
+
+const HTMLFileTypeImage = ( props ) => ( <img alt="HTML" src={SRC} {...props} /> )
+
+export default HTMLFileTypeImage;

package/lib/components/Icons/JSONFileTypeImage.jsx

@@ -0,0 +1,5 @@
+import SRC from '../../img/json-filetype.png';
+
+const JsonFileTypeImage = ( props ) => ( <img alt="JSON" src={SRC} {...props} /> )
+
+export default JsonFileTypeImage;

package/lib/components/Icons/PDFFileTypeImage.jsx

@@ -0,0 +1,5 @@
+import SRC from '../../img/pdf-filetype.png';
+
+const PDFMimeTypeImage = ( props ) => ( <img alt="PDF" src={SRC} {...props} /> )
+
+export default PDFMimeTypeImage;

package/lib/components/Icons/PhotoFileTypeImage.jsx

@@ -0,0 +1,5 @@
+import SRC from '../../img/photo-filetype.png';
+
+const PhotoFileTypeImage = ( props ) => ( <img src={SRC} {...props} /> )
+
+export default PhotoFileTypeImage;

package/lib/components/Icons/PowerPointTypeImage.jsx

@@ -0,0 +1,5 @@
+import SRC from '../../img/PowerPoint-filetype.png';
+
+const PowerPointTypeImage = ( props ) => ( <img alt="Power Point" src={SRC} {...props} /> )
+
+export default PowerPointTypeImage;

package/lib/components/Icons/TextFileTypeImage.jsx

@@ -0,0 +1,5 @@
+import SRC from '../../img/txt-filetype.png';
+
+const TextFileTypeImage = ( props ) => ( <img alt="Text" src={SRC} {...props} /> )
+
+export default TextFileTypeImage;

package/lib/components/Icons/UnknownFileTypeImage.jsx

@@ -0,0 +1,5 @@
+import SRC from '../../img/unknown-filetype.png';
+
+const UnknownFileTypeImage = ( props ) => ( <img alt="Unknown" src={SRC} {...props} /> )
+
+export default UnknownFileTypeImage;

package/lib/components/Icons/WordFileTypeImage.jsx

@@ -0,0 +1,5 @@
+import SRC from '../../img/word-filetype.png';
+
+const WordFileTypeImage = ( props ) => ( <img alt="Word" src={SRC} {...props} /> )
+
+export default WordFileTypeImage;

package/lib/components/Icons/ZipFileTypeImage.jsx

@@ -0,0 +1,5 @@
+import SRC from '../../img/zip-filetype.png';
+
+const ZipFileTypeImage = ( props ) => ( <img alt="Zip" src={SRC} {...props} /> )
+
+export default ZipFileTypeImage;

package/lib/components/ImageViewerDialog.jsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { deleteImage } from '../actions/PhotoActions';
+import PhotosStore from '../stores/PhotosStore';
+import { Connect } from '@selkirk-systems/state-management';
+import { Dialog } from 'primereact/dialog';
+import { Trash2, XIcon } from 'lucide-react';
+import { Button } from 'primereact/button';
+import { ProgressSpinner, Typography } from '@selkirk-systems/selkirk-components';
+
+import '../css/image-viewer.css';
+import { Row } from '@selkirk-systems/layout';
+import { hideImageViewerDialog } from '../actions/AttachmentActions';
+
+class ImageViewerDialog extends React.Component {
+
+
+    static subscribe = [PhotosStore];
+
+
+    static defaultProps = {
+        imageViewer: {},
+        deleting: false
+    }
+
+
+    static storeStateToProps = {
+        imageViewer: ( props, state ) => state.imageViewer,
+        deleting: ( props, state ) => state.deleting
+    }
+
+
+    render() {
+
+        const { imageViewer, deleting, ...other } = this.props;
+
+        return (
+            <Dialog
+                visible={imageViewer.name}
+                maximized
+                onHide={hideImageViewerDialog}
+                transitionOptions={
+                    {
+                        onExited: this.handledExited
+                    }
+                }
+                {...other}
+            >
+                <div className="image-viewer">
+                    <Row className="top actions" align="center" xs="1fr auto" gap="md" fill={false}>
+                        <Typography ml='sm' className="title" variant="body1">{imageViewer.name}</Typography>
+                        <Button mr='-sm' type='button' style={{ color: 'inherit' }} onClick={hideImageViewerDialog} text><XIcon /></Button>
+                    </Row>
+                    <Row className="bottom actions" center fill={false}>
+                        <Button disabled={deleting} type='button' onClick={() => deleteImage( imageViewer.url, imageViewer.name )} text className="delete icon">
+                            {deleting ?
+                                <ProgressSpinner style={{ width: 18, height: 18, color: 'white' }} />
+                                :
+                                <Trash2 />
+                            }
+                        </Button>
+                    </Row>
+                    <img alt="test" src={imageViewer.url} />
+                </div>
+            </Dialog>
+        )
+    }
+
+
+}
+
+
+export default Connect( ImageViewerDialog );

package/lib/components/MimeTypeIcons.jsx

@@ -0,0 +1,30 @@
+import PDFFileTypeImage from "./Icons/PDFFileTypeImage";
+import TextFileTypeImage from "./Icons/TextFileTypeImage";
+import WordFileTypeImage from "./Icons/WordFileTypeImage";
+import ExcelFileTypeImage from "./Icons/ExcelFileTypeImage";
+import PowerPointTypeImage from "./Icons/PowerPointTypeImage";
+import HTMLFileTypeImage from "./Icons/HTMLFileTypeImage";
+import JsonFileTypeImage from "./Icons/JSONFileTypeImage";
+import ZipFileTypeImage from "./Icons/ZipFileTypeImage";
+import React from "react";
+
+const MIME_TYPE_ICONS = {
+    'application/pdf': <PDFFileTypeImage />,
+    'application/msword': <WordFileTypeImage />,
+    'application/vnd.ms-word': <WordFileTypeImage />,
+    'application/vnd.oasis.opendocument.text': <WordFileTypeImage />,
+    'application/vnd.openxmlformats-officedocument.wordprocessingml': <WordFileTypeImage />,
+    'application/vnd.ms-excel': <ExcelFileTypeImage />,
+    'application/vnd.openxmlformats-officedocument.spreadsheetml': <ExcelFileTypeImage />,
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': <ExcelFileTypeImage />,
+    'application/vnd.oasis.opendocument.spreadsheet': <ExcelFileTypeImage />,
+    'application/vnd.ms-powerpoint': <PowerPointTypeImage />,
+    'application/vnd.openxmlformats-officedocument.presentationml': <PowerPointTypeImage />,
+    'application/vnd.oasis.opendocument.presentation': <PowerPointTypeImage />,
+    'text/plain': <TextFileTypeImage />,
+    'text/html': <HTMLFileTypeImage />,
+    'application/json': <JsonFileTypeImage />,
+    'application/zip': <ZipFileTypeImage />
+}
+
+export default MIME_TYPE_ICONS;