@imposium-hub/components 2.5.11-1 → 2.5.11-10

package/src/components/header/Header.tsx

@@ -19,6 +19,7 @@ import Select, { createFilter } from 'react-select';
 import { setAccessData } from '../../redux/actions/access';
 import { bindActionCreators } from 'redux';
 import { StoryTableTotalRendersCell } from '../assets/StoryTableTotalRendersCell';
+import StoryTableNameFilter from '../assets/StoryTableNameFilter';
 
 export interface IHeaderProps {
     email?: string;
@@ -38,6 +39,7 @@ export interface IHeaderProps {
     hideDocs?: boolean;
     showFTLogo?: boolean;
     access: any;
+    storyFilter: string;
 }
 
 export interface IHeaderState {
@@ -290,6 +292,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                 Header: 'Name',
                 width: 115,
                 minWidth: 115,
+                Search: () => <StoryTableNameFilter />,
                 disableSortBy: false
             },
             {
@@ -533,12 +536,30 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                         ? [{ id: order, desc: orderDirection === 'desc' }]
                         : undefined;
 
-                const sortedStories = _.orderBy(
+                let sortedStories = _.orderBy(
                     activeOrganizationBlob.stories,
                     ['date_modified'],
                     ['desc']
                 );
 
+                if (!!this.props.storyFilter) {
+                    const storyFilter = this.props.storyFilter.toLowerCase();
+
+                    const sortByName = sortedStories.filter((stories) =>
+                        stories.name.toLowerCase().includes(storyFilter)
+                    );
+                    if (sortByName.length > 0) {
+                        sortedStories = sortByName;
+                    } else {
+                        const sortById = sortedStories.filter((stories) =>
+                            stories.id.includes(storyFilter)
+                        );
+                        if (sortById.length > 0) {
+                            sortedStories = sortById;
+                        }
+                    }
+                }
+
                 storyMenuInner = (
                     <DataTable
                         columns={this.getStoriesColumns()}
@@ -548,6 +569,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                         itemsPerPage={activeOrganizationBlob.stories.length}
                         hidePaginator={true}
                         onRowClick={this.changeStory}
+                        keyboardNav={true}
                     />
                 );
             }
@@ -682,7 +704,8 @@ const mapStateToProps = (state): any => {
     return {
         auth: state.auth,
         story: state.story,
-        access: state.access
+        access: state.access,
+        storyFilter: state.storyFilter.name
     };
 };
 

package/src/components/story-previewer/StoryPreviewer.tsx

@@ -1,6 +1,11 @@
 import * as React from 'react';
 import { IImposiumAPI } from '../../services/API';
-import { VARIABLE_TYPES, BOOLEAN_DEFAULT_OPTIONS } from '../../constants/variables';
+import {
+    VARIABLE_TYPES,
+    BOOLEAN_DEFAULT_OPTIONS,
+    colorPresets,
+    formatColor
+} from '../../constants/variables';
 import { OUTPUT_TYPES } from '../../constants/previewer';
 import TextField from '../text-field/TextField';
 import Button from '../button/Button';
@@ -23,6 +28,7 @@ import LogViewer from '../log-viewer/LogViewer';
 import { connect } from 'react-redux';
 import { ICON_DOWNLOAD, ICON_CLIPBOARD } from '../../constants/icons';
 import AudioPlayer from '../players/AudioPlayer';
+import ColorField from '../color-field/ColorField';
 
 interface IStoryPreviewerProps {
     api: IImposiumAPI;
@@ -137,15 +143,14 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
         const { variables } = this.props;
         const inventoryOverrides = this.props.editor?.inventoryOverrides;
         const newInv = {};
-
         for (const i in variables) {
             if (variables.hasOwnProperty(i)) {
                 const override = inventoryOverrides ? inventoryOverrides[i] : null;
                 const inv = variables[i];
-                newInv[inv.id] = override ? override : this.getVariableValue(inv.previewItem);
+                newInv[inv.id] =
+                    override !== null ? override : this.getVariableValue(inv.previewItem);
             }
         }
-
         return newInv;
     }
 
@@ -230,6 +235,11 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
         }
     }
 
+    private colorInputChanged(key, value) {
+        const color = formatColor(value);
+        this.variableInputChanged(key, color);
+    }
+
     private variableInputChanged(key, value) {
         const inventory = { ...this.state.inventory };
         inventory[key] = value;
@@ -397,6 +407,20 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                             </FieldWrapper>
                         );
                         break;
+                    case VARIABLE_TYPES.COLOR:
+                        const value = inventory[inv.id] ? inventory[inv.id] : 'rgba(0,0,0,1)';
+                        fields.push(
+                            <ColorField
+                                label={inv.name}
+                                labelPosition='top'
+                                enableAlpha={true}
+                                presetColors={colorPresets}
+                                value={value}
+                                pickerPosition='bottom'
+                                onChange={(v) => this.colorInputChanged(inv.id, v)}
+                            />
+                        );
+                        break;
                 }
             }
         }

package/src/constants/variables.ts

@@ -5,7 +5,8 @@ export const VARIABLE_TYPES = {
     ENUM: 'enum',
     IMAGE: 'image',
     VIDEO: 'video',
-    AUDIO: 'audio'
+    AUDIO: 'audio',
+    COLOR: 'color'
 };
 
 export const BOOLEAN_DEFAULT_OPTIONS = [
@@ -18,3 +19,28 @@ export const BOOLEAN_DEFAULT_OPTIONS = [
         label: 'False'
     }
 ];
+
+export const colorPresets = [
+    '#D0021B',
+    '#F5A623',
+    '#F8E71C',
+    '#8B572A',
+    '#7ED321',
+    '#417505',
+    '#BD10E0',
+    '#9013FE',
+    '#4A90E2',
+    '#50E3C2',
+    '#B8E986',
+    '#000000',
+    '#4A4A4A',
+    '#9B9B9B',
+    '#FFFFFF',
+    'transparent'
+];
+
+export const formatColor = (color) => {
+    const { r, g, b, a } = color.rgb;
+    const alpha = color.source === 'hsv' ? 1 : a;
+    return `rgba(${r},${g},${b},${alpha})`;
+};

package/src/index.ts

@@ -159,7 +159,11 @@ import ContextMenuItem from './components/context-menu/ContextMenuItem';
 import ContextMenuTrigger from './components/context-menu/ContextMenuTrigger';
 import CopyPropIdButton from './components/copy-prop-id-button/CopyPropIdButton';
 import Submenu from './components/context-menu/SubMenu';
+import { ConfirmModal, IConfirmModalProps } from './components/confirm-modal/ConfirmModal';
 import AssetsTableAssetIdCell from './components/assets/AssetsTableAssetIdCell';
+import { resetStoryFilter, updateStoryFilter } from './redux/actions/story-filter';
+import storyFilter from './redux/reducers/story-filter';
+import StoryTableNameFilter from './components/assets/StoryTableNameFilter';
 
 export {
     AppWrapper,
@@ -218,6 +222,7 @@ export {
     AssetsTableGlobalCell,
     AssetsTableStatusCell,
     AssetsTableNameFilter,
+    StoryTableNameFilter,
     AssetsTableAssetIdFilter,
     AssetsTableAssetIdCell,
     AssetsTableNameCell,
@@ -245,6 +250,8 @@ export {
     storyDeleted,
     updateFilters,
     resetFilters,
+    updateStoryFilter,
+    resetStoryFilter,
     getAssets,
     deleteAssets,
     downloadAssets,
@@ -259,6 +266,7 @@ export {
     deselectAsset,
     resetSelection,
     assetFilters,
+    storyFilter,
     assetList,
     assetUploads,
     selectedAssets,
@@ -315,5 +323,7 @@ export {
     ContextMenuItem,
     ContextMenuTrigger,
     Submenu,
-    CopyPropIdButton
+    CopyPropIdButton,
+    ConfirmModal,
+    IConfirmModalProps
 };

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

@@ -78,22 +78,18 @@ export const getAssets = (api: IImposiumAPI, storyId: string): any => {
 
 export const deleteAssets = (api: IImposiumAPI, ids: string[], storyId: string): any => {
     return (dispatch) => {
-        if (window.confirm(`Are you sure you want to delete ${ids.length} assets?`)) {
-            return new Promise<boolean>((resolve, reject) => {
-                dispatch(toggleLoading(true));
-                api.deleteAssets(ids)
-                    .then(() => {
-                        dispatch(getAssets(api, storyId));
-                        resolve(true);
-                    })
-                    .catch((errors: Error[]) => {
-                        dispatch(toggleLoading(false));
-                        reject(false);
-                    });
-            });
-        } else {
-            return Promise.resolve(false);
-        }
+        return new Promise<boolean>((resolve, reject) => {
+            dispatch(toggleLoading(true));
+            api.deleteAssets(ids)
+                .then(() => {
+                    dispatch(getAssets(api, storyId));
+                    resolve(true);
+                })
+                .catch((errors: Error[]) => {
+                    dispatch(toggleLoading(false));
+                    reject(false);
+                });
+        });
     };
 };
 
@@ -194,20 +190,18 @@ export const deleteAssetTags = (api: IImposiumAPI, id: string): any => {
 
 export const deleteAssetsTags = (api: IImposiumAPI, ids: string[], storyId: string): any => {
     return (dispatch) => {
-        if (window.confirm(`Are you sure you want to remove all tags from ${ids.length} assets?`)) {
-            return new Promise<void>((resolve, reject) => {
-                dispatch(toggleLoading(true));
-                api.deleteAssetsTags(ids)
-                    .then(() => {
-                        dispatch(getAssets(api, storyId));
-                        resolve();
-                    })
-                    .catch((errors: Error[]) => {
-                        dispatch(toggleLoading(false));
-                        reject();
-                    });
-            });
-        }
+        return new Promise<void>((resolve, reject) => {
+            dispatch(toggleLoading(true));
+            api.deleteAssetsTags(ids)
+                .then(() => {
+                    dispatch(getAssets(api, storyId));
+                    resolve();
+                })
+                .catch((errors: Error[]) => {
+                    dispatch(toggleLoading(false));
+                    reject();
+                });
+        });
     };
 };
 
@@ -245,20 +239,18 @@ export const updateAssetStory = (api: IImposiumAPI, id: string, storyId: string)
 
 export const decoupleAssets = (api: IImposiumAPI, ids: string[], storyId: string): any => {
     return (dispatch) => {
-        if (window.confirm(`Are you sure you want to decouple ${ids.length} assets?`)) {
-            return new Promise<void>((resolve, reject) => {
-                dispatch(toggleLoading(true));
-                api.decoupleAssets(ids)
-                    .then(() => {
-                        dispatch(getAssets(api, storyId));
-                        resolve();
-                    })
-                    .catch((errors: Error[]) => {
-                        dispatch(toggleLoading(false));
-                        reject();
-                    });
-            });
-        }
+        return new Promise<void>((resolve, reject) => {
+            dispatch(toggleLoading(true));
+            api.decoupleAssets(ids)
+                .then(() => {
+                    dispatch(getAssets(api, storyId));
+                    resolve();
+                })
+                .catch((errors: Error[]) => {
+                    dispatch(toggleLoading(false));
+                    reject();
+                });
+        });
     };
 };
 

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

@@ -364,6 +364,15 @@ export const replaceAsset = (
                         if (axios.isCancel(e) && currentQueue !== queueLength - 1) {
                             currentQueue = currentQueue + 1;
                             createPromise(currentQueue);
+                        } else {
+                            const error: any = { ...e };
+                            const errorMsg = error.response.data.error.split(':')[0];
+                            dispatch({
+                                type: assetUploadsActions.ERROR,
+                                filename: replacedFileBlobs[activeIndex].filename,
+                                errorMsg
+                            });
+                            doAssetTableHydration(api, storyId);
                         }
                     });
             };

package/src/redux/actions/story-filter.ts

@@ -0,0 +1,15 @@
+const storyFilterActions: any = {
+    UPDATE: 'storyFilter/UPDATE',
+    RESET: 'storyFilter/RESET'
+};
+
+export const updateStoryFilter = (newFilters: any): any => ({
+    type: storyFilterActions.UPDATE,
+    newFilters
+});
+
+export const resetStoryFilter = (): any => ({
+    type: storyFilterActions.RESET
+});
+
+export default storyFilterActions;

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

@@ -52,10 +52,8 @@ const assetUploads = (state = initialState, action): any => {
                 if (u.filename === action.filename) {
                     return { ...u, error: action.errorMsg };
                 }
-
                 return u;
             });
-
             return {
                 ...state,
                 uploads: newError

package/src/redux/reducers/story-filter.ts

@@ -0,0 +1,18 @@
+import storyFilterActions from '../actions/story-filter';
+
+const initialState: any = {
+    name: ''
+};
+
+const storyFilter = (state = initialState, action): any => {
+    switch (action.type) {
+        case storyFilterActions.UPDATE:
+            return { ...state, ...action.newFilters };
+        case storyFilterActions.RESET:
+            return { ...initialState };
+        default:
+            return state;
+    }
+};
+
+export default storyFilter;