Add export feature (phase 1)

gm3000 · Mar 20, 2017 · 3a99648 · 3a99648
1 parent ad37ca0
commit 3a99648
Show file tree

Hide file tree

Showing 10 changed files with 158 additions and 55 deletions.
diff --git a/src-client/api/app/serverApi.js b/src-client/api/app/serverApi.js
@@ -134,4 +134,8 @@ export function saveGenerated(files, dependencies) {
 
 export function generateApplication(pagesModel, hasApplicationFiles) {
     return invokeStructor('generateApplication', {pagesModel, hasApplicationFiles});
+}
+
+export function extractNamespace(namespace) {
+	return invokeStructor('extractNamespace', {namespace});
 }
diff --git a/src-client/modules/app/containers/AppContainer/reducer.js b/src-client/modules/app/containers/AppContainer/reducer.js
@@ -30,17 +30,18 @@ const initialState = {
     },
     packageConfig: {},
     proxyURL: undefined,
-    workspaceMode: undefined
+    workspaceMode: undefined,
+    paths: {},
 };
 
 export default (state = initialState, action = {}) => {
 
     const {type, payload} = action;
 
     if(type === actions.SET_PROJECT_INFO){
-
         return Object.assign({}, state, {
             proxyURL: payload.project.conf.proxyURL,
+            paths: payload.project.paths,
             packageConfig: payload.server.packageConf
         });
     }

diff --git a/src-client/modules/app/containers/AppContainer/selectors.js b/src-client/modules/app/containers/AppContainer/selectors.js
@@ -16,6 +16,7 @@
 import { createStructuredSelector } from 'reselect';
 
 export const userAccountSelector = state => state.appContainer.userAccount;
+export const projectPathsSelector = state => state.appContainer.paths;
 
 export const modelSelector = createStructuredSelector({
     componentModel: state => state.appContainer

diff --git a/src-client/modules/workspace/containers/LibraryControls/actions.js b/src-client/modules/workspace/containers/LibraryControls/actions.js
@@ -16,5 +16,16 @@
 
 import { bindActionCreators } from 'redux';
 
+export const EXTRACT_NAMESPACE = "LibraryControls/EXTRACT_NAMESPACE";
+
+export const extractNamespace = (namespace, projectPaths) => (dispatch, getState) => {
+	const {dir} = projectPaths;
+	const extractDirPath = dir + '_' + namespace;
+	if (confirm(`The source code of ${namespace} namespace will be extracted into directory: \n\n ${extractDirPath}`)) {
+		dispatch({type: EXTRACT_NAMESPACE, payload: {namespace}});
+	}
+};
+
 export const containerActions = (dispatch) => bindActionCreators({
+	extractNamespace
 }, dispatch);
diff --git a/src-client/modules/workspace/containers/LibraryControls/index.js b/src-client/modules/workspace/containers/LibraryControls/index.js
@@ -28,20 +28,23 @@ class Container extends Component {
     constructor(props) {
         super(props);
         this.onInstall = this.onInstall.bind(this);
-        this.onPublish = this.onPublish.bind(this);
+        this.onExtract = this.onExtract.bind(this);
     }
 
     onInstall(e) {
         e.stopPropagation();
         e.preventDefault();
     }
 
-    onPublish(e) {
+    onExtract(e) {
         e.stopPropagation();
         e.preventDefault();
+        const {namespace, projectPaths, extractNamespace} = this.props;
+        extractNamespace(namespace, projectPaths);
     }
 
     render(){
+        const {namespace} = this.props;
         return (
             <div
                 style={this.props.style}
@@ -63,12 +66,13 @@ class Container extends Component {
                 <div className="btn-group">
                     <button
                         className="btn btn-default btn-xs"
-                        onClick={this.onPublish}
+                        onClick={this.onExtract}
                         title="Publish components"
+                        disabled={!namespace}
                     >
                     <span style={buttonLabelStyle}>
                         <i className="fa fa-cloud-upload"/>
-                        <span style={{marginLeft: '0.5em'}}>Publish</span>
+                        <span style={{marginLeft: '0.5em'}}>Extract</span>
                     </span>
                     </button>
                 </div>

diff --git a/src-client/modules/workspace/containers/LibraryControls/sagas.js b/src-client/modules/workspace/containers/LibraryControls/sagas.js
@@ -14,8 +14,29 @@
  * limitations under the License.
  */
 
+import { fork, take, call, put, race } from 'redux-saga/effects';
+import * as actions from './actions.js';
+import * as spinnerActions from 'modules/app/containers/AppSpinner/actions';
+import * as messageActions from 'modules/app/containers/AppMessage/actions';
+import { serverApi } from 'api';
+//
+//const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
+//
+function* extractNamespace(){
+	while(true){
+		const {payload: {namespace}} = yield take(actions.EXTRACT_NAMESPACE);
+		yield put(spinnerActions.started('Extracting the source code'));
+		try {
+			yield call(serverApi.extractNamespace, namespace);
+			yield put(messageActions.success('The source code has been extracted successfully.'));
+		} catch(error) {
+			yield put(messageActions.failed('Extracting the source code: ' + (error.message ? error.message : error)));
+		}
+		yield put(spinnerActions.done('Extracting the source code'));
+	}
+}
 // main saga
 export default function* mainSaga() {
-    //yield [fork(getProjectInfo)];
+    yield [fork(extractNamespace)];
 
 };
diff --git a/src-client/modules/workspace/containers/LibraryControls/selectors.js b/src-client/modules/workspace/containers/LibraryControls/selectors.js
@@ -16,7 +16,10 @@
 
 import { createSelector, createStructuredSelector } from 'reselect';
 
+import {projectPathsSelector} from 'modules/app/containers/AppContainer/selectors';
+
 export const modelSelector = createStructuredSelector({
     componentModel: state => state.libraryControls,
+    projectPaths: projectPathsSelector,
 });
 
diff --git a/src-client/modules/workspace/containers/LibraryPanel/index.js b/src-client/modules/workspace/containers/LibraryPanel/index.js
@@ -20,7 +20,7 @@ import {forOwn, isObject, isEmpty} from 'lodash';
 import {utilsStore} from 'api';
 import {modelSelector} from './selectors.js';
 import {containerActions} from './actions.js';
-import {recentGroupKey, noGroupGroupKey, htmlGroupKey, filteredGroupKey} from './constants';
+import {recentGroupKey, noGroupGroupKey, htmlGroupKey} from './constants';
 import LibraryControls from "modules/workspace/containers/LibraryControls";
 
 const topToolbarStyle = {
@@ -56,7 +56,6 @@ const listContainerStyle = {
 };
 
 const labelStyle = {
-	backgroundColor: 'rgb(227, 227, 227)',
 	color: 'rgb(107, 107, 107)',
 	textShadow: '0 1px 0px rgba(255, 255, 255, 0.8)'
 };
@@ -66,6 +65,28 @@ const itemLabelStyle = {
 	width: '1.5em',
 };
 
+const labelContainerStyle = {
+	display: 'flex',
+	flexDirection: 'row',
+	alignItems: 'flex-start',
+};
+
+const labelTextStyle = {
+	margin: 0,
+	whiteSpace: 'wrap',
+	wordBreak: 'break-all'
+};
+
+const checkBoxLabelStyle = {
+	width: '1.5em',
+	minWidth: '1.5em',
+	flexGrow: 0,
+};
+
+let checkBoxStyle = {
+	margin: 0,
+};
+
 const subitemLabelStyle = {display: 'flex', flexDirection: 'row', alignItems: 'center'};
 
 const makeTitle = (componentName) => {
@@ -80,11 +101,12 @@ class Container extends Component {
 
 	constructor(props) {
 		super(props);
-		this.state = {filer: ''};
+		this.state = {filer: '', selectedNamespace: null};
 		this.handleChangeFind = this.handleChangeFind.bind(this);
 		this.handleClearFind = this.handleClearFind.bind(this);
 		this.handleOnKeyDown = this.handleOnKeyDown.bind(this);
 		this.handleToggleGroup = this.handleToggleGroup.bind(this);
+		this.handleSelectGroup = this.handleSelectGroup.bind(this);
 		this.handleToggleItem = this.handleToggleItem.bind(this);
 		this.handleDeleteModel = this.handleDeleteModel.bind(this);
 		this.createGroupingPanel = this.createGroupingPanel.bind(this);
@@ -119,6 +141,10 @@ class Container extends Component {
 		this.props.togglePanelGroup(key);
 	}
 
+	handleSelectGroup(e) {
+		this.setState({selectedNamespace: e.currentTarget.dataset.namespace});
+	}
+
 	handleToggleItem(e) {
 		e.stopPropagation();
 		e.preventDefault();
@@ -147,7 +173,8 @@ class Container extends Component {
 		}
 	}
 
-	createGroupingPanel(key, title, items, collapsedClassName, isDefault = true) {
+	createGroupingPanel(key, title, items, collapsedClassName, isExtractable, isDefault = true) {
+		const {selectedNamespace} = this.state;
 		return (
 			<div
 				key={key}
@@ -158,23 +185,38 @@ class Container extends Component {
 					role="tab"
 					id={key}
 				>
-					<p style={{margin: 0}}>
-						<a
-							style={{outline: '0'}}
-							role="button"
-							data-groupkey={key}
-							href="#"
-							onClick={this.handleToggleGroup}
-						>
-							{title}
-						</a>
-						<span
-							className="label pull-right"
-							style={labelStyle}
-						>
-                            {items.length}
-                        </span>
-					</p>
+					<div style={labelContainerStyle}>
+						<div style={checkBoxLabelStyle}>
+							{isExtractable &&
+								<input
+									type="radio"
+									style={checkBoxStyle}
+									checked={selectedNamespace === title}
+									data-namespace={title}
+									onClick={this.handleSelectGroup}
+								/>
+							}
+						</div>
+						<div style={{flexGrow: 2}}>
+							<a
+								style={{outline: '0'}}
+								role="button"
+								data-groupkey={key}
+								href="#"
+								onClick={this.handleToggleGroup}
+							>
+								<span style={labelTextStyle}>{title}</span>
+							</a>
+						</div>
+						<div style={checkBoxLabelStyle}>
+							<span
+								className="label"
+								style={labelStyle}
+							>
+								{items.length}
+							</span>
+						</div>
+					</div>
 				</div>
 				<div
 					className={"panel-collapse collapse " + collapsedClassName}
@@ -278,7 +320,7 @@ class Container extends Component {
 			}
 		} = this.props;
 
-		const {filter} = this.state;
+		const {filter, selectedNamespace} = this.state;
 
 		let libGroups = [];
 
@@ -305,7 +347,9 @@ class Container extends Component {
 					// do nothing
 				}
 			});
-			libGroups.push(this.createGroupingPanel(recentGroupKey, 'Recently Used', components, collapsed, false));
+			libGroups.push(
+				this.createGroupingPanel(recentGroupKey, 'Recently Used', components, collapsed, false, false)
+			);
 		}
 
 		const {htmlComponents, components, modules} = componentTree;
@@ -328,7 +372,7 @@ class Container extends Component {
 				}
 			});
 			if (noGroupItems.length > 0) {
-				libGroups.push(this.createGroupingPanel(noGroupGroupKey, 'Components', noGroupItems, collapsed));
+				libGroups.push(this.createGroupingPanel(noGroupGroupKey, 'Components', noGroupItems, collapsed, false));
 			}
 		}
 
@@ -354,7 +398,7 @@ class Container extends Component {
 						}
 					});
 					if (groupItems.length > 0) {
-						libGroups.push(this.createGroupingPanel(groupKey, moduleId, groupItems, collapsed));
+						libGroups.push(this.createGroupingPanel(groupKey, moduleId, groupItems, collapsed, true));
 					}
 				}
 			});
@@ -378,15 +422,18 @@ class Container extends Component {
 				}
 			});
 			if (htmlItems.length > 0) {
-				libGroups.push(this.createGroupingPanel(htmlGroupKey, 'HTML', htmlItems, collapsed));
+				libGroups.push(this.createGroupingPanel(htmlGroupKey, 'HTML', htmlItems, collapsed, false));
 			}
 		}
 
 		return (
 			<div style={panelContainerStyle}>
 				<div style={{height: '3em'}}>
 					<div style={topToolbarStyle}>
-						<LibraryControls style={topToolbarGroupStyle} />
+						<LibraryControls
+							style={topToolbarGroupStyle}
+							namespace={selectedNamespace}
+						/>
 					</div>
 				</div>
 				<div className="input-group input-group-sm">

diff --git a/src-client/sagas/saga.js b/src-client/sagas/saga.js
@@ -23,6 +23,7 @@ import generatorSaga from 'modules/generator/containers/Generator/sagas';
 import proxySetupModalSaga from 'modules/app/containers/ProxySetupModal/sagas';
 import saveDefaultModelModalSaga from 'modules/workspace/containers/SaveDefaultModelModal/sagas';
 import pageExportControlsSaga from 'modules/workspace/containers/PageExportControls/sagas';
+import libraryControlsSaga from 'modules/workspace/containers/LibraryControls/sagas';
 
 export default function* mainSaga(){
     yield fork(appContainerSaga);
@@ -34,4 +35,5 @@ export default function* mainSaga(){
     yield fork(proxySetupModalSaga);
     yield fork(saveDefaultModelModalSaga);
     yield fork(pageExportControlsSaga);
+    yield fork(libraryControlsSaga);
 }