New: Better interface for creating custom formats

frontend/src/Store/Actions/Settings/customFormatSpecifications.js

@@ -0,0 +1,184 @@
+import { createAction } from 'redux-actions';
+import { batchActions } from 'redux-batched-actions';
+import { createThunk } from 'Store/thunks';
+import getSectionState from 'Utilities/State/getSectionState';
+import updateSectionState from 'Utilities/State/updateSectionState';
+import getNextId from 'Utilities/State/getNextId';
+import selectProviderSchema from 'Utilities/State/selectProviderSchema';
+import getProviderState from 'Utilities/State/getProviderState';
+import createSetSettingValueReducer from 'Store/Actions/Creators/Reducers/createSetSettingValueReducer';
+import createSetProviderFieldValueReducer from 'Store/Actions/Creators/Reducers/createSetProviderFieldValueReducer';
+import createClearReducer from 'Store/Actions/Creators/Reducers/createClearReducer';
+import createFetchSchemaHandler from 'Store/Actions/Creators/createFetchSchemaHandler';
+import { set, update, updateItem, removeItem } from '../baseActions';
+
+//
+// Variables
+
+const section = 'settings.customFormatSpecifications';
+
+//
+// Actions Types
+
+export const FETCH_CUSTOM_FORMAT_SPECIFICATIONS = 'settings/customFormatSpecifications/fetchCustomFormatSpecifications';
+export const FETCH_CUSTOM_FORMAT_SPECIFICATION_SCHEMA = 'settings/customFormatSpecifications/fetchCustomFormatSpecificationSchema';
+export const SELECT_CUSTOM_FORMAT_SPECIFICATION_SCHEMA = 'settings/customFormatSpecifications/selectCustomFormatSpecificationSchema';
+export const SET_CUSTOM_FORMAT_SPECIFICATION_VALUE = 'settings/customFormatSpecifications/setCustomFormatSpecificationValue';
+export const SET_CUSTOM_FORMAT_SPECIFICATION_FIELD_VALUE = 'settings/customFormatSpecifications/setCustomFormatSpecificationFieldValue';
+export const SAVE_CUSTOM_FORMAT_SPECIFICATION = 'settings/customFormatSpecifications/saveCustomFormatSpecification';
+export const DELETE_CUSTOM_FORMAT_SPECIFICATION = 'settings/customFormatSpecifications/deleteCustomFormatSpecification';
+export const CLONE_CUSTOM_FORMAT_SPECIFICATION = 'settings/customFormatSpecifications/cloneCustomFormatSpecification';
+export const CLEAR_CUSTOM_FORMAT_SPECIFICATIONS = 'settings/customFormatSpecifications/clearCustomFormatSpecifications';
+export const CLEAR_CUSTOM_FORMAT_SPECIFICATION_PENDING = 'settings/customFormatSpecifications/clearCustomFormatSpecificationPending';
+//
+// Action Creators
+
+export const fetchCustomFormatSpecifications = createThunk(FETCH_CUSTOM_FORMAT_SPECIFICATIONS);
+export const fetchCustomFormatSpecificationSchema = createThunk(FETCH_CUSTOM_FORMAT_SPECIFICATION_SCHEMA);
+export const selectCustomFormatSpecificationSchema = createAction(SELECT_CUSTOM_FORMAT_SPECIFICATION_SCHEMA);
+
+export const saveCustomFormatSpecification = createThunk(SAVE_CUSTOM_FORMAT_SPECIFICATION);
+export const deleteCustomFormatSpecification = createThunk(DELETE_CUSTOM_FORMAT_SPECIFICATION);
+
+export const setCustomFormatSpecificationValue = createAction(SET_CUSTOM_FORMAT_SPECIFICATION_VALUE, (payload) => {
+  return {
+    section,
+    ...payload
+  };
+});
+
+export const setCustomFormatSpecificationFieldValue = createAction(SET_CUSTOM_FORMAT_SPECIFICATION_FIELD_VALUE, (payload) => {
+  return {
+    section,
+    ...payload
+  };
+});
+
+export const cloneCustomFormatSpecification = createAction(CLONE_CUSTOM_FORMAT_SPECIFICATION);
+
+export const clearCustomFormatSpecification = createAction(CLEAR_CUSTOM_FORMAT_SPECIFICATIONS);
+
+export const clearCustomFormatSpecificationPending = createThunk(CLEAR_CUSTOM_FORMAT_SPECIFICATION_PENDING);
+
+//
+// Details
+
+export default {
+
+  //
+  // State
+
+  defaultState: {
+    isPopulated: false,
+    error: null,
+    isSchemaFetching: false,
+    isSchemaPopulated: false,
+    schemaError: null,
+    schema: [],
+    selectedSchema: {},
+    isSaving: false,
+    saveError: null,
+    items: [],
+    pendingChanges: {}
+  },
+
+  //
+  // Action Handlers
+
+  actionHandlers: {
+    [FETCH_CUSTOM_FORMAT_SPECIFICATION_SCHEMA]: createFetchSchemaHandler(section, '/customformat/schema'),
+
+    [FETCH_CUSTOM_FORMAT_SPECIFICATIONS]: (getState, payload, dispatch) => {
+      let tags = [];
+      if (payload.id) {
+        const cfState = getSectionState(getState(), 'settings.customFormats', true);
+        const cf = cfState.items[cfState.itemMap[payload.id]];
+        tags = cf.specifications.map((tag, i) => {
+          return {
+            id: i + 1,
+            ...tag
+          };
+        });
+      }
+
+      dispatch(batchActions([
+        update({ section, data: tags }),
+        set({
+          section,
+          isPopulated: true
+        })
+      ]));
+    },
+
+    [SAVE_CUSTOM_FORMAT_SPECIFICATION]: (getState, payload, dispatch) => {
+      const {
+        id,
+        ...otherPayload
+      } = payload;
+
+      const saveData = getProviderState({ id, ...otherPayload }, getState, section, false);
+
+      // we have to set id since not actually posting to server yet
+      if (!saveData.id) {
+        saveData.id = getNextId(getState().settings.customFormatSpecifications.items);
+      }
+
+      dispatch(batchActions([
+        updateItem({ section, ...saveData }),
+        set({
+          section,
+          pendingChanges: {}
+        })
+      ]));
+    },
+
+    [DELETE_CUSTOM_FORMAT_SPECIFICATION]: (getState, payload, dispatch) => {
+      const id = payload.id;
+      return dispatch(removeItem({ section, id }));
+    },
+
+    [CLEAR_CUSTOM_FORMAT_SPECIFICATION_PENDING]: (getState, payload, dispatch) => {
+      return dispatch(set({
+        section,
+        pendingChanges: {}
+      }));
+    }
+  },
+
+  //
+  // Reducers
+
+  reducers: {
+    [SET_CUSTOM_FORMAT_SPECIFICATION_VALUE]: createSetSettingValueReducer(section),
+    [SET_CUSTOM_FORMAT_SPECIFICATION_FIELD_VALUE]: createSetProviderFieldValueReducer(section),
+
+    [SELECT_CUSTOM_FORMAT_SPECIFICATION_SCHEMA]: (state, { payload }) => {
+      return selectProviderSchema(state, section, payload, (selectedSchema) => {
+        return selectedSchema;
+      });
+    },
+
+    [CLONE_CUSTOM_FORMAT_SPECIFICATION]: function(state, { payload }) {
+      const id = payload.id;
+      const newState = getSectionState(state, section);
+      const items = newState.items;
+      const item = items.find((i) => i.id === id);
+      const newId = getNextId(newState.items);
+      const newItem = {
+        ...item,
+        id: newId,
+        name: `${item.name} - Copy`
+      };
+      newState.items = [...items, newItem];
+      newState.itemMap[newId] = newState.items.length - 1;
+
+      return updateSectionState(state, section, newState);
+    },
+
+    [CLEAR_CUSTOM_FORMAT_SPECIFICATIONS]: createClearReducer(section, {
+      isPopulated: false,
+      error: null,
+      items: []
+    })
+  }
+};

frontend/src/Store/Actions/Settings/customFormats.js

@@ -4,9 +4,9 @@ import getSectionState from 'Utilities/State/getSectionState';
 import updateSectionState from 'Utilities/State/updateSectionState';
 import createSetSettingValueReducer from 'Store/Actions/Creators/Reducers/createSetSettingValueReducer';
 import createFetchHandler from 'Store/Actions/Creators/createFetchHandler';
-import createFetchSchemaHandler from 'Store/Actions/Creators/createFetchSchemaHandler';
 import createSaveProviderHandler from 'Store/Actions/Creators/createSaveProviderHandler';
 import createRemoveItemHandler from 'Store/Actions/Creators/createRemoveItemHandler';
+import { set } from '../baseActions';
 
 //
 // Variables
@@ -17,7 +17,6 @@ const section = 'settings.customFormats';
 // Actions Types
 
 export const FETCH_CUSTOM_FORMATS = 'settings/customFormats/fetchCustomFormats';
-export const FETCH_CUSTOM_FORMAT_SCHEMA = 'settings/customFormats/fetchCustomFormatSchema';
 export const SAVE_CUSTOM_FORMAT = 'settings/customFormats/saveCustomFormat';
 export const DELETE_CUSTOM_FORMAT = 'settings/customFormats/deleteCustomFormat';
 export const SET_CUSTOM_FORMAT_VALUE = 'settings/customFormats/setCustomFormatValue';
@@ -27,7 +26,6 @@ export const CLONE_CUSTOM_FORMAT = 'settings/customFormats/cloneCustomFormat';
 // Action Creators
 
 export const fetchCustomFormats = createThunk(FETCH_CUSTOM_FORMATS);
-export const fetchCustomFormatSchema = createThunk(FETCH_CUSTOM_FORMAT_SCHEMA);
 export const saveCustomFormat = createThunk(SAVE_CUSTOM_FORMAT);
 export const deleteCustomFormat = createThunk(DELETE_CUSTOM_FORMAT);
 
@@ -49,15 +47,13 @@ export default {
   // State
 
   defaultState: {
+    isSchemaFetching: false,
+    isSchemaPopulated: false,
     isFetching: false,
     isPopulated: false,
     error: null,
     isDeleting: false,
     deleteError: null,
-    isSchemaFetching: false,
-    isSchemaPopulated: false,
-    schemaError: null,
-    schema: {},
     isSaving: false,
     saveError: null,
     items: [],
@@ -69,9 +65,21 @@ export default {
 
   actionHandlers: {
     [FETCH_CUSTOM_FORMATS]: createFetchHandler(section, '/customformat'),
-    [FETCH_CUSTOM_FORMAT_SCHEMA]: createFetchSchemaHandler(section, '/customformat/schema'),
-    [SAVE_CUSTOM_FORMAT]: createSaveProviderHandler(section, '/customformat'),
-    [DELETE_CUSTOM_FORMAT]: createRemoveItemHandler(section, '/customformat')
+
+    [DELETE_CUSTOM_FORMAT]: createRemoveItemHandler(section, '/customformat'),
+
+    [SAVE_CUSTOM_FORMAT]: (getState, payload, dispatch) => {
+      // move the format tags in as a pending change
+      const state = getState();
+      const pendingChanges = state.settings.customFormats.pendingChanges;
+      pendingChanges.specifications = state.settings.customFormatSpecifications.items;
+      dispatch(set({
+        section,
+        pendingChanges
+      }));
+
+      createSaveProviderHandler(section, '/customformat')(getState, payload, dispatch);
+    }
   },
 
   //

frontend/src/Store/Actions/settingsActions.js

@@ -1,6 +1,7 @@
 import { createAction } from 'redux-actions';
 import { handleThunks } from 'Store/thunks';
 import createHandleActions from './Creators/createHandleActions';
+import customFormatSpecifications from './Settings/customFormatSpecifications';
 import customFormats from './Settings/customFormats';
 import delayProfiles from './Settings/delayProfiles';
 import downloadClients from './Settings/downloadClients';
@@ -23,6 +24,7 @@ import remotePathMappings from './Settings/remotePathMappings';
 import restrictions from './Settings/restrictions';
 import ui from './Settings/ui';
 
+export * from './Settings/customFormatSpecifications.js';
 export * from './Settings/customFormats';
 export * from './Settings/delayProfiles';
 export * from './Settings/downloadClients';
@@ -56,6 +58,7 @@ export const section = 'settings';
 export const defaultState = {
   advancedSettings: false,
 
+  customFormatSpecifications: customFormatSpecifications.defaultState,
   customFormats: customFormats.defaultState,
   delayProfiles: delayProfiles.defaultState,
   downloadClients: downloadClients.defaultState,
@@ -97,6 +100,7 @@ export const toggleAdvancedSettings = createAction(TOGGLE_ADVANCED_SETTINGS);
 // Action Handlers
 
 export const actionHandlers = handleThunks({
+  ...customFormatSpecifications.actionHandlers,
   ...customFormats.actionHandlers,
   ...delayProfiles.actionHandlers,
   ...downloadClients.actionHandlers,
@@ -129,6 +133,7 @@ export const reducers = createHandleActions({
     return Object.assign({}, state, { advancedSettings: !state.advancedSettings });
   },
 
+  ...customFormatSpecifications.reducers,
   ...customFormats.reducers,
   ...delayProfiles.reducers,
   ...downloadClients.reducers,