@imposium-hub/components 2.2.16 → 2.2.18

package/src/components/assets/AssetsUploadMenu.tsx

@@ -3,20 +3,41 @@ import { assets as copy } from '../../constants/copy';
 import CheckboxField from '../checkbox-field/CheckboxField';
 import { DeterminateLoader } from '../determinate-loader/DeterminateLoader';
 import {
-    toggleAutoTag,
     toggleAssignToStory,
-    cancelAssetUpload
+    cancelAssetUpload,
+    toggleTagFileName,
+    setDelimiter,
+    toggleTagDelimiter,
+    toggleManualTagging,
+    addManualTag,
+    deleteManualTag,
+    deleteManualTags
 } from '../../redux/actions/asset-uploads';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import Button from '../button/Button';
 import { IImposiumAPI } from '../../services/API';
+import SelectField from '../select-field/SelectField';
+import { DELIMITER_OPTIONS } from '../../constants/assets';
+import TextField from '../text-field/TextField';
+import AssetsTableTagsPivot from './AssetsTableTagsPivot';
+import Tag from '../tag/Tag';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faEraser } from '@fortawesome/free-solid-svg-icons';
 
 interface IAssetsUploadMenuProps {
     assetUploads: any;
+    assetTags: string[];
     api: any;
     toggleAutoTag: (toggle: boolean) => any;
+    toggleTagFileName: (toggle: boolean) => any;
     toggleAssignToStory: (toggle: boolean) => any;
+    toggleTagDelimiter: (togglle: boolean) => any;
+    setDelimiter: (delimiter: string) => any;
+    toggleManualTagging: (togglle: boolean) => any;
+    addManualTag: (tag: string) => any;
+    deleteManualTag: (tag: string) => any;
+    deleteManualTags: () => void;
     cancelAssetUpload: (fileName: string, api: IImposiumAPI) => any;
 }
 
@@ -30,21 +51,30 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps> {
         this.props.cancelAssetUpload(fileName, api);
     }
 
-    public render = (): JSX.Element => {
+    public render() {
         const {
-            assetUploads: { uploads, autoTag, assignToStory }
+            assetUploads: {
+                uploads,
+                assignToStory,
+                tagByFileName,
+                tagByDelimiter,
+                delimiter,
+                tagManually,
+                manualTags
+            },
+            assetTags
         } = this.props;
-        let uploadsListInner: JSX.Element[] | JSX.Element;
+        let uploadsListInner;
         if (uploads.length > 0) {
             uploadsListInner = uploads.map((u: any) => {
                 const { filename, percent } = u;
-                const loader: JSX.Element =
+                const loader =
                     percent < 100 ? (
                         <DeterminateLoader progress={u.percent} />
                     ) : (
                         <span>{copy.uploads.preparePhase}</span>
                     );
-                const closeButton: JSX.Element = percent < 100 && (
+                const closeButton = percent < 100 && (
                     <Button
                         key='btn-cancel'
                         onClick={() => this.handleCancelAssetUpload(filename)}
@@ -70,14 +100,68 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps> {
             uploadsListInner = <div className='no-ongoing-uploads'>{copy.uploads.noUploads}</div>;
         }
 
+        const delimiterSelector = tagByDelimiter && (
+            <SelectField
+                width='35%'
+                options={DELIMITER_OPTIONS}
+                value={delimiter}
+                onChange={(c) => this.props.setDelimiter(c)}
+            />
+        );
+        const tagsArray = [...new Set(manualTags)];
+        const tagsMarkup = tagsArray.map((tag: string) => (
+            <Tag
+                key={tag}
+                copy={tag}
+                colorize={AssetsTableTagsPivot.COLORIZE_TAGS}
+                removeHandler={() => this.props.deleteManualTag(tag)}
+            />
+        ));
+        const removeTagsBtn =
+            tagsArray.length > 0 ? (
+                <Button
+                    tooltip='Remove All Tags'
+                    style='sublte'
+                    onClick={() => this.props.deleteManualTags()}>
+                    <FontAwesomeIcon icon={faEraser} />
+                </Button>
+            ) : null;
+        const tagsColumn = tagManually && (
+            <div className='tags-column'>
+                <TextField
+                    submittable
+                    submittableType='add'
+                    suggestions={assetTags}
+                    label={copy.tags.add}
+                    width={AssetsTableTagsPivot.ADD_TAG_INPUT_WIDTH}
+                    doSubmit={(t) => this.props.addManualTag(t)}
+                />
+                {tagsMarkup}
+                {removeTagsBtn}
+            </div>
+        );
+
         return (
             <div className='uploads-menu'>
                 <div className='uploads-controls'>
                     <CheckboxField
                         width='50%'
-                        label={copy.uploads.autoTagInput}
-                        value={autoTag}
-                        onChange={() => this.props.toggleAutoTag(!autoTag)}
+                        label={copy.uploads.autoTagDelimiter}
+                        value={tagByDelimiter}
+                        onChange={() => this.props.toggleTagDelimiter(!tagByDelimiter)}
+                    />
+                    {delimiterSelector}
+                    <CheckboxField
+                        width='50%'
+                        label={copy.uploads.manualTagging}
+                        value={tagManually}
+                        onChange={() => this.props.toggleManualTagging(!tagManually)}
+                    />
+                    <CheckboxField
+                        width='50%'
+                        label={copy.uploads.autoTagFilname}
+                        value={tagByFileName}
+                        onChange={() => this.props.toggleTagFileName(!tagByFileName)}
                     />
                     <CheckboxField
                         width='50%'
@@ -87,19 +171,35 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps> {
                         onChange={() => this.props.toggleAssignToStory(!assignToStory)}
                     />
                 </div>
-
+                {tagsColumn}
                 <div className='uploads-list'>{uploadsListInner}</div>
             </div>
         );
-    };
+    }
 }
 
 const mapDispatchToProps = (dispatch): any => {
-    return bindActionCreators({ toggleAutoTag, toggleAssignToStory, cancelAssetUpload }, dispatch);
+    return bindActionCreators(
+        {
+            toggleAssignToStory,
+            toggleTagFileName,
+            cancelAssetUpload,
+            toggleTagDelimiter,
+            setDelimiter,
+            toggleManualTagging,
+            addManualTag,
+            deleteManualTag,
+            deleteManualTags
+        },
+        dispatch
+    );
 };
 
 const mapStateToProps = (state): any => {
-    return { assetUploads: state.assetUploads };
+    return {
+        assetUploads: state.assetUploads,
+        assetTags: state.assetTags
+    };
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(AssetsUploadMenu);

package/src/components/header/Header.tsx

@@ -88,9 +88,9 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
         {
             accessor: 'date_modified',
             Header: 'Last Modified',
-            width: 45,
-            minWidth: 45,
-            maxWidth: 45,
+            width: 60,
+            minWidth: 60,
+            maxWidth: 60,
             disableSortBy: false,
             Cell: (cell: any) => (
                 <AssetsTableDateCell
@@ -102,9 +102,9 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
         {
             accessor: 'date_created',
             Header: 'Created Date',
-            width: 45,
-            minWidth: 45,
-            maxWidth: 45,
+            width: 60,
+            minWidth: 60,
+            maxWidth: 60,
             disableSortBy: false,
             Cell: (cell: any) => (
                 <AssetsTableDateCell
@@ -116,9 +116,9 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
         {
             accessor: 'last_modified_by',
             Header: 'Last Modified By',
-            width: 50,
-            minWidth: 50,
-            maxWidth: 50,
+            width: 55,
+            minWidth: 55,
+            maxWidth: 55,
             disableSortBy: true
         }
     ];

package/src/components/tag/Tag.tsx

@@ -14,7 +14,7 @@ const Tag: React.FC<ITagProps> = (p: ITagProps) => {
     }
 
     const borderLeftColor: string = p.colorize ? `${string2HexCode(p.copy)}` : '';
-    const remove: JSX.Element = typeof p.removeHandler === 'function' && (
+    const remove = typeof p.removeHandler === 'function' && (
         <div
             className='remove-tag'
             onClick={p.removeHandler}>

package/src/constants/assets.ts

@@ -46,3 +46,18 @@ export const PREVIEW_MAX_WIDTH: number = 400;
 export const PREVIEW_MAX_HEIGHT: number = 400;
 
 export const HEADER_HEIGHT: number = 30;
+
+export const DELIMITER_OPTIONS = [
+    {
+        label: `Underscore: '_'`,
+        value: '_'
+    },
+    {
+        label: `Dash: '-'`,
+        value: '-'
+    },
+    {
+        label: `Space: ' '`,
+        value: ' '
+    }
+];

package/src/constants/copy.ts

@@ -19,7 +19,10 @@ export const assets = {
     uploads: {
         noUploads: 'There are currently no assets uploading...',
         preparePhase: 'Preparing asset...',
-        autoTagInput: 'Tag by filename',
+        autoTagFilname: 'Tag by file name',
+        autoTagDelimiter: 'Tag by Delimiter',
+        delimiterOptions: 'Delimiter Options',
+        manualTagging: 'Tag Manually',
         assignToProjectInput: 'Assign to Project',
         assignToProjectInfo:
             'If selected, any assets uploaded will only be available to use with the currently selected project.',

package/src/index.ts

@@ -102,7 +102,7 @@ import {
     updateAssetStory
 } from './redux/actions/asset-list';
 import { getAssetTagList, addAssetTagToList } from './redux/actions/asset-tags';
-import { cancelAssetUpload, toggleAutoTag, uploadAssets } from './redux/actions/asset-uploads';
+import { cancelAssetUpload, toggleTagFileName, uploadAssets } from './redux/actions/asset-uploads';
 import { selectAsset, deselectAsset, resetSelection } from './redux/actions/selected-assets';
 import assetFilters from './redux/reducers/asset-filters';
 import assetList from './redux/reducers/asset-list';
@@ -234,7 +234,7 @@ export {
     updateAssetName,
     updateAssetData,
     doAssetTableHydration,
-    toggleAutoTag,
+    toggleTagFileName,
     uploadAssets,
     selectAsset,
     deselectAsset,

package/src/redux/actions/asset-uploads.ts

@@ -4,6 +4,13 @@ import axios from 'axios';
 
 const assetUploadsActions: any = {
     TOGGLE_AUTO_TAG: 'assetUploads/TOGGLE_AUTO_TAG',
+    TOGGLE_TAG_BY_FILENAME: 'assetUploads/TOGGLE_TAG_BY_FILENAME',
+    TOGGLE_TAG_BY_DELIMITER: 'assetUploads/TOGGLE_TAG_BY_DELIMITER',
+    SET_DELIMITER: 'assetUploads/SET_DELIMITER',
+    TOGGLE_MANUAL_TAGGING: 'assetUploads/TOGGLE_MANUAL_TAGGING',
+    ADD_MANUAL_TAG: 'assetUploads/ADD_MANUAL_TAG',
+    DELETE_MANUAL_TAG: 'assetUploads/DELETE_MANUAL_TAG',
+    DELETE_MANUAL_TAGS: 'assetUploads/DELETE_MANUAL_TAGS',
     TOGGLE_ASSIGN_TO_STORY: 'assetUploads/TOGGLE_ASSIGN_TO_STORY',
     ADD_UPLOAD: 'assetUploads/ADD_UPLOAD',
     UPDATE_PERCENT_UPLOADED: 'assetUploads/UPDATE_PERCENT_UPLOADED',
@@ -12,8 +19,8 @@ const assetUploadsActions: any = {
 
 const POLL_INTERVAL: number = 5000;
 
-export const toggleAutoTag = (toggle: boolean): any => ({
-    type: assetUploadsActions.TOGGLE_AUTO_TAG,
+export const toggleTagFileName = (toggle: boolean): any => ({
+    type: assetUploadsActions.TOGGLE_TAG_BY_FILENAME,
     toggle
 });
 
@@ -22,6 +29,35 @@ export const toggleAssignToStory = (toggle: boolean): any => ({
     toggle
 });
 
+export const toggleTagDelimiter = (toggle: boolean): any => ({
+    type: assetUploadsActions.TOGGLE_TAG_BY_DELIMITER,
+    toggle
+});
+
+export const setDelimiter = (delimiter: string): any => ({
+    type: assetUploadsActions.SET_DELIMITER,
+    delimiter
+});
+
+export const toggleManualTagging = (toggle: boolean): any => ({
+    type: assetUploadsActions.TOGGLE_MANUAL_TAGGING,
+    toggle
+});
+
+export const addManualTag = (tag: string): any => ({
+    type: assetUploadsActions.ADD_MANUAL_TAG,
+    tag
+});
+
+export const deleteManualTag = (tag: string): any => ({
+    type: assetUploadsActions.DELETE_MANUAL_TAG,
+    tag
+});
+
+export const deleteManualTags = (): any => ({
+    type: assetUploadsActions.DELETE_MANUAL_TAGS
+});
+
 export const uploadAssets = (
     api: IImposiumAPI,
     files: File[],
@@ -30,7 +66,15 @@ export const uploadAssets = (
 ): any => {
     return (dispatch, getStore) => {
         const {
-            assetUploads: { autoTag, uploads, assignToStory }
+            assetUploads: {
+                uploads,
+                assignToStory,
+                tagByFileName,
+                tagByDelimiter,
+                delimiter,
+                tagManually,
+                manualTags
+            }
         } = getStore();
         let currentQueue: number = 0;
         let ongoingJobs: any[] = [];
@@ -44,9 +88,22 @@ export const uploadAssets = (
                 uploadsWithSameName.length > 0
                     ? `${file.name} (${uploadsWithSameName.length})`
                     : file.name;
-            const tags: string = autoTag
-                ? file.name.substr(0, file.name.lastIndexOf('.')).split('_').join(',')
-                : '';
+
+            let tags = [];
+
+            if (tagByFileName) {
+                tags = tags.concat(file.name.substr(0, file.name.lastIndexOf('.')));
+            }
+
+            if (tagByDelimiter) {
+                const tag = file.name.substr(0, file.name.lastIndexOf('.')).split(delimiter);
+                tags = [...new Set([...tags, ...tag])];
+            }
+
+            if (tagManually) {
+                tags = [...new Set([...tags, ...manualTags])];
+            }
+
             const uploadMeta: any = { filename, percent: 0 };
 
             const onUploadProgress = (progress: any): void => {

package/src/redux/reducers/asset-uploads.ts

@@ -1,17 +1,53 @@
 import assetUploadsActions from '../actions/asset-uploads';
 
 const initialState: any = {
-    autoTag: true,
+    tagByDelimiter: true,
+    delimiter: '_',
+    tagManually: false,
+    manualTags: [],
+    tagByFileName: false,
     assignToStory: true,
     uploads: []
 };
 
 const assetUploads = (state = initialState, action): any => {
     switch (action.type) {
-        case assetUploadsActions.TOGGLE_AUTO_TAG:
+        case assetUploadsActions.TOGGLE_TAG_BY_FILENAME:
             return {
                 ...state,
-                autoTag: action.toggle
+                tagByFileName: action.toggle
+            };
+        case assetUploadsActions.TOGGLE_TAG_BY_DELIMITER:
+            return {
+                ...state,
+                tagByDelimiter: action.toggle
+            };
+        case assetUploadsActions.SET_DELIMITER:
+            return {
+                ...state,
+                delimiter: action.delimiter
+            };
+        case assetUploadsActions.TOGGLE_MANUAL_TAGGING:
+            return {
+                ...state,
+                tagManually: action.toggle
+            };
+        case assetUploadsActions.ADD_MANUAL_TAG:
+            const newManualTags = [...state.manualTags];
+            newManualTags.push(action.tag);
+            return {
+                ...state,
+                manualTags: newManualTags
+            };
+        case assetUploadsActions.DELETE_MANUAL_TAG:
+            return {
+                ...state,
+                manualTags: state.manualTags.filter((t: string) => t !== action.tag)
+            };
+        case assetUploadsActions.DELETE_MANUAL_TAGS:
+            return {
+                ...state,
+                manualTags: []
             };
         case assetUploadsActions.TOGGLE_ASSIGN_TO_STORY:
             return {

package/src/services/API.ts

@@ -1114,7 +1114,7 @@ export default class API {
             }
 
             if (fastRender) {
-                formData.append('fastRender', 'true');
+                formData.append('fast_render', 'true');
             }
 
             return this.doRequest({