WIP: Fix merge conflicts with release. Add toast to show saving page activity
This commit is contained in:
Abhinav Jha
commit
3cb582b7d1
4
app/client/.gitignore
vendored
4
app/client/.gitignore
vendored
|
|
@ -24,5 +24,5 @@ yarn-debug.log*
|
|||
yarn-error.log*
|
||||
|
||||
/out
|
||||
/public/fonts
|
||||
/src/assets/icon/fonts
|
||||
/public/fonts/*
|
||||
/src/assets/icons/fonts/*
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
"@blueprintjs/core": "^3.11.0",
|
||||
"@blueprintjs/datetime": "^3.6.0",
|
||||
"@blueprintjs/icons": "^3.5.0",
|
||||
"@blueprintjs/select": "^3.10.0",
|
||||
"@blueprintjs/table": "^3.4.0",
|
||||
"@sentry/browser": "^5.6.3",
|
||||
"@types/axios": "^0.14.0",
|
||||
|
|
@ -52,7 +53,7 @@
|
|||
"redux-saga": "^1.0.0",
|
||||
"styled-components": "^4.1.3",
|
||||
"ts-loader": "^6.0.4",
|
||||
"typescript": "^3.2.4"
|
||||
"typescript": "^3.6.3"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
|
@ -84,7 +85,8 @@
|
|||
"eslint-plugin-prettier": "^3.1.0",
|
||||
"eslint-plugin-react": "^7.14.3",
|
||||
"icon-font-generator": "^2.1.10",
|
||||
"redux-devtools": "^3.5.0"
|
||||
"redux-devtools": "^3.5.0",
|
||||
"redux-devtools-extension": "^2.13.8"
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
|
|
|
|||
25
app/client/src/actions/controlActions.tsx
Normal file
25
app/client/src/actions/controlActions.tsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import {
|
||||
ReduxActionTypes,
|
||||
ReduxAction,
|
||||
} from "../constants/ReduxActionConstants";
|
||||
|
||||
export const updateWidgetProperty = (
|
||||
widgetId: string,
|
||||
propertyName: string,
|
||||
propertyValue: any,
|
||||
): ReduxAction<UpdateWidgetPropertyPayload> => {
|
||||
return {
|
||||
type: ReduxActionTypes.UPDATE_WIDGET_PROPERTY,
|
||||
payload: {
|
||||
widgetId,
|
||||
propertyName,
|
||||
propertyValue,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export interface UpdateWidgetPropertyPayload {
|
||||
widgetId: string;
|
||||
propertyName: string;
|
||||
propertyValue: any;
|
||||
}
|
||||
|
|
@ -59,11 +59,11 @@ export const removeWidget = (
|
|||
};
|
||||
};
|
||||
|
||||
export const loadCanvasWidgets = (
|
||||
export const updateCanvas = (
|
||||
payload: LoadCanvasWidgetsPayload,
|
||||
): ReduxAction<LoadCanvasWidgetsPayload> => {
|
||||
return {
|
||||
type: ReduxActionTypes.LOAD_CANVAS_WIDGETS,
|
||||
type: ReduxActionTypes.UPDATE_CANVAS,
|
||||
payload,
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import API, { HttpMethod } from "./Api";
|
||||
import { ApiResponse } from "./ApiResponses";
|
||||
import { APIRequest } from "./ApiRequests";
|
||||
import _ from "lodash";
|
||||
import { mapToPropList } from "../utils/AppsmithUtils";
|
||||
|
||||
export interface CreateActionRequest<T> extends APIRequest {
|
||||
resourceId: string;
|
||||
|
|
@ -48,7 +48,7 @@ export interface ActionCreateUpdateResponse extends ApiResponse {
|
|||
|
||||
export interface ExecuteActionRequest extends APIRequest {
|
||||
actionId: string;
|
||||
dynamicBindingMap: Record<string, any>;
|
||||
dynamicBindingList?: Property[];
|
||||
}
|
||||
|
||||
export interface ExecuteActionResponse extends ApiResponse {
|
||||
|
|
@ -67,12 +67,8 @@ class ActionAPI extends API {
|
|||
httpMethod: apiConfig.method,
|
||||
path: apiConfig.path,
|
||||
body: apiConfig.body,
|
||||
headers: _.map(apiConfig.requestHeaders, (value, key) => {
|
||||
return { key: key, value: value };
|
||||
}),
|
||||
queryParameters: _.map(apiConfig.queryParams, (value, key) => {
|
||||
return { key: key, value: value };
|
||||
}),
|
||||
headers: mapToPropList(apiConfig.requestHeaders),
|
||||
queryParameters: mapToPropList(apiConfig.queryParams),
|
||||
},
|
||||
};
|
||||
return API.post(ActionAPI.url, createAPI);
|
||||
|
|
@ -87,12 +83,8 @@ class ActionAPI extends API {
|
|||
httpMethod: apiConfig.method,
|
||||
path: apiConfig.path,
|
||||
body: apiConfig.body,
|
||||
headers: _.map(apiConfig.requestHeaders, (value, key) => {
|
||||
return { key: key, value: value };
|
||||
}),
|
||||
queryParameters: _.map(apiConfig.queryParams, (value, key) => {
|
||||
return { key: key, value: value };
|
||||
}),
|
||||
headers: mapToPropList(apiConfig.requestHeaders),
|
||||
queryParameters: mapToPropList(apiConfig.queryParams),
|
||||
},
|
||||
};
|
||||
return API.post(ActionAPI.url, updateAPI);
|
||||
|
|
@ -113,7 +105,7 @@ class ActionAPI extends API {
|
|||
static executeAction(
|
||||
executeAction: ExecuteActionRequest,
|
||||
): Promise<ActionCreateUpdateResponse> {
|
||||
return API.post(ActionAPI.url, executeAction);
|
||||
return API.post(ActionAPI.url + "/execute", executeAction);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ class Api {
|
|||
);
|
||||
}
|
||||
|
||||
static post(url: string, queryParams?: any, body?: any) {
|
||||
static post(url: string, body?: any, queryParams?: any) {
|
||||
return axiosInstance.post(
|
||||
url + this.convertObjectToQueryParams(queryParams),
|
||||
body,
|
||||
|
|
|
|||
|
|
@ -18,8 +18,8 @@ export interface SavePageRequest {
|
|||
|
||||
export interface PageLayout {
|
||||
id: string;
|
||||
dsl: ContainerWidgetProps<any>;
|
||||
actions?: PageAction[];
|
||||
dsl: Partial<ContainerWidgetProps<any>>;
|
||||
actions: PageAction[];
|
||||
}
|
||||
|
||||
export type FetchPageResponse = ApiResponse & {
|
||||
|
|
@ -36,9 +36,9 @@ export interface SavePageResponse {
|
|||
}
|
||||
|
||||
class PageApi extends Api {
|
||||
static url = "/pages";
|
||||
static url = "api/v1/pages";
|
||||
static getLayoutUpdateURL = (pageId: string, layoutId: string) => {
|
||||
return `/layouts/${layoutId}/pages/${pageId}`;
|
||||
return `api/v1/layouts/${layoutId}/pages/${pageId}`;
|
||||
};
|
||||
|
||||
static fetchPage(pageRequest: FetchPageRequest): Promise<FetchPageResponse> {
|
||||
|
|
|
|||
|
|
@ -22,18 +22,11 @@ export type ActionType =
|
|||
| "DOWNLOAD";
|
||||
|
||||
export interface ActionPayload {
|
||||
actionId: string;
|
||||
actionType: ActionType;
|
||||
contextParams: Record<string, string>;
|
||||
}
|
||||
|
||||
export interface APIActionPayload extends ActionPayload {
|
||||
apiId: string;
|
||||
}
|
||||
|
||||
export interface QueryActionPayload extends ActionPayload {
|
||||
queryId: string;
|
||||
}
|
||||
|
||||
export type NavigationType = "NEW_TAB" | "INLINE";
|
||||
|
||||
export interface NavigateActionPayload extends ActionPayload {
|
||||
|
|
@ -71,5 +64,5 @@ export interface PageAction {
|
|||
actionId: string;
|
||||
actionType: ActionType;
|
||||
actionName: string;
|
||||
dynamicBindings: string[];
|
||||
dynamicBindings?: string[];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,9 +9,9 @@ export type EncodingType = "gzip";
|
|||
export const PROD_BASE_URL = "https://mobtools.com/api/";
|
||||
export const MOCK_BASE_URL =
|
||||
"https://f78ff9dd-2c08-45f1-9bf9-8c670a1bb696.mock.pstmn.io";
|
||||
export const STAGE_BASE_URL = "https://appsmith-test.herokuapp.com/api/v1/";
|
||||
export const STAGE_BASE_URL = "https://appsmith-test.herokuapp.com";
|
||||
export const BASE_URL = STAGE_BASE_URL;
|
||||
export const REQUEST_TIMEOUT_MS = 5000;
|
||||
export const REQUEST_TIMEOUT_MS = 2000;
|
||||
export const REQUEST_HEADERS: APIHeaders = {
|
||||
Accept: "application/json",
|
||||
"Content-Type": "application/json",
|
||||
|
|
|
|||
17
app/client/src/constants/PropertyControlConstants.tsx
Normal file
17
app/client/src/constants/PropertyControlConstants.tsx
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
export type ControlType =
|
||||
| "INPUT_TEXT"
|
||||
| "ICON_PICKER"
|
||||
| "SEGMENT_CONTROL"
|
||||
| "SWITCH"
|
||||
| "CHECKBOX"
|
||||
| "DATE_PICKER"
|
||||
| "DROP_DOWN"
|
||||
| "COLOR_PICKER"
|
||||
| "TIMEZONE_PICKER"
|
||||
| "ACTION_SELECTOR"
|
||||
| "RECORD_ACTION_SELECTOR"
|
||||
| "OPTION_INPUT"
|
||||
| "IMAGE_PICKER"
|
||||
| "SHAPE_PICKER"
|
||||
| "VALIDATION_INPUT"
|
||||
| "ZOOM";
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import { WidgetProps, WidgetCardProps } from "../widgets/BaseWidget";
|
||||
|
||||
export const ReduxActionTypes: { [key: string]: string } = {
|
||||
LOAD_CANVAS_WIDGETS: "LOAD_CANVAS_WIDGETS",
|
||||
UPDATE_CANVAS: "UPDATE_CANVAS",
|
||||
FETCH_CANVAS: "FETCH_CANVAS",
|
||||
CLEAR_CANVAS: "CLEAR_CANVAS",
|
||||
FETCH_PAGE: "FETCH_PAGE",
|
||||
|
|
@ -13,6 +13,7 @@ export const ReduxActionTypes: { [key: string]: string } = {
|
|||
UNDO_CANVAS_ACTION: "UNDO_CANVAS_ACTION",
|
||||
REDO_CANVAS_ACTION: "REDO_CANVAS_ACTION",
|
||||
LOAD_WIDGET_CONFIG: "LOAD_WIDGET_CONFIG",
|
||||
LOAD_PROPERTY_CONFIG: "LOAD_PROPERTY_CONFIG",
|
||||
PUBLISH: "PUBLISH",
|
||||
FETCH_WIDGET_CARDS: "FETCH_WIDGET_CARDS",
|
||||
SUCCESS_FETCHING_WIDGET_CARDS: "SUCCESS_FETCHING_WIDGET_CARDS",
|
||||
|
|
@ -33,6 +34,8 @@ export const ReduxActionTypes: { [key: string]: string } = {
|
|||
WIDGET_MOVE: "WIDGET_MOVE",
|
||||
WIDGET_RESIZE: "WIDGET_RESIZE",
|
||||
WIDGET_DELETE: "WIDGET_DELETE",
|
||||
SHOW_PROPERTY_PANE: "SHOW_PROPERTY_PANE",
|
||||
UPDATE_WIDGET_PROPERTY: "UPDATE_WIDGET_PROPERTY",
|
||||
};
|
||||
|
||||
export type ReduxActionType = (typeof ReduxActionTypes)[keyof typeof ReduxActionTypes];
|
||||
|
|
@ -48,8 +51,8 @@ export interface LoadCanvasWidgetsPayload {
|
|||
layoutId: string;
|
||||
}
|
||||
|
||||
export interface LoadWidgetConfigPayload {
|
||||
[widgetId: string]: WidgetProps;
|
||||
export interface ShowPropertyPanePayload {
|
||||
widgetId: string;
|
||||
}
|
||||
|
||||
// export interface LoadAPIResponsePayload extends ExecuteActionResponse {}
|
||||
|
|
|
|||
|
|
@ -10,8 +10,7 @@ export type WidgetType =
|
|||
| "CHECKBOX_WIDGET"
|
||||
| "RADIO_GROUP_WIDGET"
|
||||
| "INPUT_WIDGET"
|
||||
| "SWITCH_WIDGET"
|
||||
| "ALERT_WIDGET";
|
||||
| "SWITCH_WIDGET";
|
||||
|
||||
export const WidgetTypes: { [id: string]: WidgetType } = {
|
||||
BUTTON_WIDGET: "BUTTON_WIDGET",
|
||||
|
|
@ -26,7 +25,6 @@ export const WidgetTypes: { [id: string]: WidgetType } = {
|
|||
DROP_DOWN_WIDGET: "DROP_DOWN_WIDGET",
|
||||
CHECKBOX_WIDGET: "CHECKBOX_WIDGET",
|
||||
RADIO_GROUP_WIDGET: "RADIO_GROUP_WIDGET",
|
||||
ALERT_WIDGET: "ALERT_WIDGET",
|
||||
};
|
||||
|
||||
export type ContainerOrientation = "HORIZONTAL" | "VERTICAL";
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ import * as serviceWorker from "./serviceWorker";
|
|||
import { BrowserRouter, Route, Switch } from "react-router-dom";
|
||||
import { createStore, applyMiddleware } from "redux";
|
||||
import appReducer from "./reducers";
|
||||
import WidgetBuilderRegistry from "./utils/WidgetRegistry";
|
||||
import { ThemeProvider, theme } from "./constants/DefaultTheme";
|
||||
import createSagaMiddleware from "redux-saga";
|
||||
import { rootSaga } from "./sagas";
|
||||
|
|
@ -18,11 +17,14 @@ import { DndProvider } from "react-dnd";
|
|||
import HTML5Backend from "react-dnd-html5-backend";
|
||||
import { appInitializer } from "./utils/AppsmithUtils";
|
||||
import ProtectedRoute from "./pages/common/ProtectedRoute";
|
||||
import { composeWithDevTools } from "redux-devtools-extension/logOnlyInProduction";
|
||||
|
||||
appInitializer();
|
||||
WidgetBuilderRegistry.registerWidgetBuilders();
|
||||
const sagaMiddleware = createSagaMiddleware();
|
||||
const store = createStore(appReducer, applyMiddleware(sagaMiddleware));
|
||||
const store = createStore(
|
||||
appReducer,
|
||||
composeWithDevTools(applyMiddleware(sagaMiddleware)),
|
||||
);
|
||||
sagaMiddleware.run(rootSaga);
|
||||
ReactDOM.render(
|
||||
<DndProvider backend={HTML5Backend}>
|
||||
|
|
|
|||
56
app/client/src/mockResponses/PageMockResponse.tsx
Normal file
56
app/client/src/mockResponses/PageMockResponse.tsx
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
import { FetchPageResponse } from "../api/PageApi";
|
||||
import { generateReactKey } from "../utils/generators";
|
||||
import { WidgetType } from "../constants/WidgetConstants";
|
||||
import { ActionType } from "../constants/ActionConstants";
|
||||
|
||||
const PageMockResponse: FetchPageResponse = {
|
||||
responseMeta: {
|
||||
status: 200,
|
||||
success: true,
|
||||
},
|
||||
data: {
|
||||
id: generateReactKey(),
|
||||
applicationId: generateReactKey(),
|
||||
name: "Mock Page",
|
||||
layouts: [
|
||||
{
|
||||
id: generateReactKey(),
|
||||
dsl: {
|
||||
widgetId: "0",
|
||||
type: "CONTAINER_WIDGET" as WidgetType,
|
||||
topRow: 2,
|
||||
leftColumn: 2,
|
||||
rightColumn: 10,
|
||||
bottomRow: 10,
|
||||
children: [
|
||||
{
|
||||
widgetId: "1",
|
||||
type: "BUTTON_WIDGET" as WidgetType,
|
||||
topRow: 2,
|
||||
leftColumn: 2,
|
||||
text: "submit",
|
||||
rightColumn: 10,
|
||||
bottomRow: 10,
|
||||
onClick: [
|
||||
{
|
||||
actionId: "5d8082e2795dc6000482bc84",
|
||||
actionType: "API",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
actions: [
|
||||
{
|
||||
actionId: "5d8082e2795dc6000482bc84",
|
||||
actionType: "API" as ActionType,
|
||||
actionName: "getUsers",
|
||||
dynamicBindings: ["$.apiData.0.name"],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default PageMockResponse;
|
||||
555
app/client/src/mockResponses/PropertyPaneConfigResponse.tsx
Normal file
555
app/client/src/mockResponses/PropertyPaneConfigResponse.tsx
Normal file
|
|
@ -0,0 +1,555 @@
|
|||
import { PropertyPaneConfigState } from "../reducers/entityReducers/propertyPaneConfigReducer";
|
||||
|
||||
const PropertyPaneConfigResponse: PropertyPaneConfigState = {
|
||||
config: {
|
||||
BUTTON_WIDGET: [
|
||||
{
|
||||
sectionName: "General",
|
||||
id: "1",
|
||||
children: [
|
||||
{
|
||||
id: "1.1",
|
||||
propertyName: "text",
|
||||
label: "Button Text",
|
||||
controlType: "INPUT_TEXT",
|
||||
placeholderText: "Enter button text here",
|
||||
},
|
||||
{
|
||||
id: "1.2",
|
||||
propertyName: "buttonStyle",
|
||||
label: "Button Style",
|
||||
controlType: "DROP_DOWN",
|
||||
options: [
|
||||
{ label: "Primary Button", value: "PRIMARY_BUTTON" },
|
||||
{ label: "Secondary Button", value: "SECONDARY_BUTTON" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "1.3",
|
||||
propertyName: "isDisabled",
|
||||
label: "Disabled",
|
||||
controlType: "SWITCH",
|
||||
},
|
||||
{
|
||||
id: "1.4",
|
||||
propertyName: "isVisible",
|
||||
label: "Visibile",
|
||||
controlType: "SWITCH",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
sectionName: "Actions",
|
||||
id: "2",
|
||||
children: [
|
||||
{
|
||||
id: "2.1",
|
||||
propertyName: "onClick",
|
||||
label: "onClick",
|
||||
controlType: "ACTION_SELECTOR",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
TEXT_WIDGET: [
|
||||
{
|
||||
sectionName: "General",
|
||||
id: "3",
|
||||
children: [
|
||||
{
|
||||
id: "3.1",
|
||||
propertyName: "text",
|
||||
label: "Text",
|
||||
controlType: "INPUT_TEXT",
|
||||
placeholderText: "Enter your text here",
|
||||
},
|
||||
{
|
||||
id: "3.2",
|
||||
propertyName: "textStyle",
|
||||
label: "Text Style",
|
||||
controlType: "DROP_DOWN",
|
||||
options: [
|
||||
{ label: "Heading", value: "HEADING" },
|
||||
{ label: "Label", value: "LABEL" },
|
||||
{ label: "Body", value: "BODY" },
|
||||
{ label: "Sub text", value: "SUB_TEXT" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "3.3",
|
||||
propertyName: "isVisible",
|
||||
label: "Visibile",
|
||||
controlType: "SWITCH",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
IMAGE_WIDGET: [
|
||||
{
|
||||
sectionName: "General",
|
||||
id: "4",
|
||||
children: [
|
||||
{
|
||||
id: "4.1",
|
||||
propertyName: "image",
|
||||
label: "Image",
|
||||
controlType: "IMAGE_PICKER",
|
||||
},
|
||||
{
|
||||
id: "4.2",
|
||||
propertyName: "defaultImage",
|
||||
label: "Default Image",
|
||||
controlType: "IMAGE_PICKER",
|
||||
},
|
||||
{
|
||||
id: "4.3",
|
||||
propertyName: "imageShape",
|
||||
label: "Shape",
|
||||
controlType: "SHAPE_PICKER",
|
||||
},
|
||||
{
|
||||
id: "4.4",
|
||||
propertyName: "isVisible",
|
||||
label: "Visibile",
|
||||
controlType: "SWITCH",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
INPUT_WIDGET: [
|
||||
{
|
||||
sectionName: "General",
|
||||
id: "5",
|
||||
children: [
|
||||
{
|
||||
id: "5.1",
|
||||
propertyName: "label",
|
||||
label: "Label",
|
||||
controlType: "INPUT_TEXT",
|
||||
inputType: "TEXT",
|
||||
placeholderText: "Label the widget",
|
||||
},
|
||||
{
|
||||
id: "5.2",
|
||||
propertyName: "inputType",
|
||||
label: "Data Type",
|
||||
controlType: "DROP_DOWN",
|
||||
options: [
|
||||
{ label: "Text", value: "TEXT" },
|
||||
{ label: "Number", value: "NUMBER" },
|
||||
{ label: "Integer", value: "INTEGER" },
|
||||
{ label: "Phone Number", value: "PHONE_NUMBER" },
|
||||
{ label: "Email", value: "EMAIL" },
|
||||
{ label: "Passwork", value: "PASSWORD" },
|
||||
{ label: "Currency", value: "CURRENCY" },
|
||||
{ label: "Search", value: "SEARCH" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "5.3",
|
||||
propertyName: "placeholderText",
|
||||
label: "Placeholder",
|
||||
controlType: "INPUT_TEXT",
|
||||
placeholderText: "Enter your text here",
|
||||
},
|
||||
{
|
||||
id: "5.4",
|
||||
propertyName: "maxChars",
|
||||
label: "Max Chars",
|
||||
controlType: "INPUT_TEXT",
|
||||
inputType: "INTEGER",
|
||||
placeholderText: "Maximum character length",
|
||||
},
|
||||
{
|
||||
id: "5.5",
|
||||
propertyName: "validators",
|
||||
label: "Validators",
|
||||
controlType: "VALIDATION_INPUT",
|
||||
},
|
||||
{
|
||||
id: "5.6",
|
||||
children: [
|
||||
{
|
||||
id: "5.6.1",
|
||||
propertyName: "focusIndexx",
|
||||
label: "Focus Index",
|
||||
controlType: "INPUT_TEXT",
|
||||
inputType: "INTEGER",
|
||||
placeholderText: "Enter the order of tab focus",
|
||||
},
|
||||
{
|
||||
id: "5.6.2",
|
||||
propertyName: "autoFocus",
|
||||
label: "Auto Focus",
|
||||
controlType: "SWITCH",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "5.7",
|
||||
propertyName: "isVisible",
|
||||
label: "Visibile",
|
||||
controlType: "SWITCH",
|
||||
},
|
||||
{
|
||||
id: "5.8",
|
||||
propertyName: "isDisabled",
|
||||
label: "Disabled",
|
||||
controlType: "SWITCH",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
SWITCH_WIDGET: [
|
||||
{
|
||||
sectionName: "General",
|
||||
id: "6",
|
||||
children: [
|
||||
{
|
||||
id: "6.1",
|
||||
propertyName: "label",
|
||||
label: "Label",
|
||||
controlType: "INPUT_TEXT",
|
||||
inputType: "TEXT",
|
||||
placeholderText: "Label the widget",
|
||||
},
|
||||
{
|
||||
id: "6.2",
|
||||
propertyName: "isOn",
|
||||
label: "Default State",
|
||||
controlType: "SWITCH",
|
||||
},
|
||||
{
|
||||
id: "6.3",
|
||||
propertyName: "isVisible",
|
||||
label: "Visibile",
|
||||
controlType: "SWITCH",
|
||||
},
|
||||
{
|
||||
id: "6.4",
|
||||
propertyName: "isDisabled",
|
||||
label: "Disabled",
|
||||
controlType: "SWITCH",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
CONTAINER_WIDGET: [
|
||||
{
|
||||
sectionName: "General",
|
||||
id: "7",
|
||||
children: [
|
||||
{
|
||||
id: "7.1",
|
||||
propertyName: "backgroundColor",
|
||||
label: "Background Color",
|
||||
controlType: "COLOR_PICKER",
|
||||
},
|
||||
{
|
||||
id: "6.3",
|
||||
propertyName: "isVisible",
|
||||
label: "Visibile",
|
||||
controlType: "SWITCH",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
SPINNER_WIDGET: [
|
||||
{
|
||||
sectionName: "General",
|
||||
id: "8",
|
||||
children: [
|
||||
{
|
||||
id: "8.1",
|
||||
propertyName: "isVisible",
|
||||
label: "Visibile",
|
||||
controlType: "SWITCH",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
DATE_PICKER_WIDGET: [
|
||||
{
|
||||
sectionName: "General",
|
||||
id: "9",
|
||||
children: [
|
||||
{
|
||||
id: "9.1",
|
||||
propertyName: "datePickerType",
|
||||
label: "Picker Type",
|
||||
controlType: "DROP_DOWN",
|
||||
options: [
|
||||
{ label: "Single Date", value: "DATE_PICKER" },
|
||||
{ label: "Date Range", value: "DATE_RANGE_PICKER" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "9.4",
|
||||
propertyName: "label",
|
||||
label: "Enter Date Label",
|
||||
controlType: "INPUT_TEXT",
|
||||
},
|
||||
{
|
||||
id: "9.1",
|
||||
propertyName: "defaultDate",
|
||||
label: "Default Date",
|
||||
controlType: "DATE_PICKER",
|
||||
},
|
||||
{
|
||||
id: "9.2",
|
||||
propertyName: "defaultTimezone",
|
||||
label: "Default Timezone",
|
||||
controlType: "TIMEZONE_PICKER",
|
||||
},
|
||||
{
|
||||
id: "9.3",
|
||||
propertyName: "enableTime",
|
||||
label: "Enable Pick Time",
|
||||
controlType: "SWITCH",
|
||||
},
|
||||
{
|
||||
id: "9.5",
|
||||
propertyName: "isVisible",
|
||||
label: "Visibile",
|
||||
controlType: "SWITCH",
|
||||
},
|
||||
{
|
||||
id: "9.6",
|
||||
propertyName: "isDisabled",
|
||||
label: "Disabled",
|
||||
controlType: "SWITCH",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
sectionName: "Actions",
|
||||
id: "10",
|
||||
children: [
|
||||
{
|
||||
id: "10.1",
|
||||
propertyName: "onDateSelected",
|
||||
label: "onDateSelected",
|
||||
controlType: "ACTION_SELECTOR",
|
||||
},
|
||||
{
|
||||
id: "10.2",
|
||||
propertyName: "onDateRangeSelected",
|
||||
label: "onDateRangeSelected",
|
||||
controlType: "ACTION_SELECTOR",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
TABLE_WIDGET: [
|
||||
{
|
||||
sectionName: "General",
|
||||
id: "11",
|
||||
children: [
|
||||
{
|
||||
id: "11.1",
|
||||
propertyName: "label",
|
||||
label: "Enter Table Label",
|
||||
controlType: "INPUT_TEXT",
|
||||
},
|
||||
{
|
||||
id: "11.2",
|
||||
propertyName: "tableData",
|
||||
label: "Enter data array",
|
||||
controlType: "INPUT_TEXT",
|
||||
},
|
||||
{
|
||||
id: "11.3",
|
||||
propertyName: "nextPageKey",
|
||||
label: "Next Pagination Key",
|
||||
controlType: "INPUT_TEXT",
|
||||
},
|
||||
{
|
||||
id: "11.4",
|
||||
propertyName: "prevPageKey",
|
||||
label: "Previous Pagination Key",
|
||||
controlType: "INPUT_TEXT",
|
||||
},
|
||||
{
|
||||
id: "11.5",
|
||||
propertyName: "isVisible",
|
||||
label: "Visibile",
|
||||
controlType: "SWITCH",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
sectionName: "Actions",
|
||||
id: "12",
|
||||
children: [
|
||||
{
|
||||
id: "12.1",
|
||||
propertyName: "tableActions",
|
||||
label: "Record action",
|
||||
controlType: "RECORD_ACTION_SELECTOR",
|
||||
},
|
||||
{
|
||||
id: "12.2",
|
||||
propertyName: "onRowSelected",
|
||||
label: "onRowSelected",
|
||||
controlType: "ACTION_SELECTOR",
|
||||
},
|
||||
{
|
||||
id: "12.3",
|
||||
propertyName: "onPageChange",
|
||||
label: "onPageChange",
|
||||
controlType: "ACTION_SELECTOR",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
DROP_DOWN_WIDGET: [
|
||||
{
|
||||
sectionName: "General",
|
||||
id: "13",
|
||||
children: [
|
||||
{
|
||||
id: "13.1",
|
||||
propertyName: "type",
|
||||
label: "Selection Type",
|
||||
controlType: "DROP_DOWN",
|
||||
options: [
|
||||
{ label: "Single Select", value: "SINGLE_SELECT" },
|
||||
{ label: "Multi Select", value: "MULTI_SELECT" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "13.2",
|
||||
propertyName: "label",
|
||||
label: "Label",
|
||||
controlType: "INPUT_TEXT",
|
||||
placeholderText: "Enter the label",
|
||||
},
|
||||
{
|
||||
id: "13.3",
|
||||
propertyName: "placeholderText",
|
||||
label: "Placeholder",
|
||||
controlType: "INPUT_TEXT",
|
||||
placeholderText: "Enter the placeholder",
|
||||
},
|
||||
{
|
||||
id: "13.4",
|
||||
propertyName: "options",
|
||||
label: "Options",
|
||||
controlType: "OPTION_INPUT",
|
||||
},
|
||||
{
|
||||
id: "13.5",
|
||||
propertyName: "isVisible",
|
||||
label: "Visibile",
|
||||
controlType: "SWITCH",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
sectionName: "Actions",
|
||||
id: "14",
|
||||
children: [
|
||||
{
|
||||
id: "14.1",
|
||||
propertyName: "onOptionSelected",
|
||||
label: "onOptionSelected",
|
||||
controlType: "ACTION_SELECTOR",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
CHECKBOX_WIDGET: [
|
||||
{
|
||||
sectionName: "General",
|
||||
id: "15",
|
||||
children: [
|
||||
{
|
||||
id: "15.1",
|
||||
propertyName: "label",
|
||||
label: "Label",
|
||||
controlType: "INPUT_TEXT",
|
||||
placeholderText: "Enter the label",
|
||||
},
|
||||
{
|
||||
id: "15.2",
|
||||
propertyName: "defaultCheckedState",
|
||||
label: "Default State",
|
||||
controlType: "SWITCH",
|
||||
},
|
||||
{
|
||||
id: "13.5",
|
||||
propertyName: "isDisabled",
|
||||
label: "Disabled",
|
||||
controlType: "SWITCH",
|
||||
},
|
||||
{
|
||||
id: "13.5",
|
||||
propertyName: "isVisible",
|
||||
label: "Visibile",
|
||||
controlType: "SWITCH",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
sectionName: "Actions",
|
||||
id: "16",
|
||||
children: [
|
||||
{
|
||||
id: "16.1",
|
||||
propertyName: "onCheckChange",
|
||||
label: "onCheckChange",
|
||||
controlType: "ACTION_SELECTOR",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
RADIO_GROUP_WIDGET: [
|
||||
{
|
||||
sectionName: "General",
|
||||
id: "16",
|
||||
children: [
|
||||
{
|
||||
id: "16.1",
|
||||
propertyName: "label",
|
||||
label: "Label",
|
||||
controlType: "INPUT_TEXT",
|
||||
placeholderText: "Enter the label",
|
||||
},
|
||||
{
|
||||
id: "16.2",
|
||||
propertyName: "defaultOptionValue",
|
||||
label: "Default Selected Value",
|
||||
controlType: "SWITCH",
|
||||
},
|
||||
{
|
||||
id: "16.3",
|
||||
propertyName: "options",
|
||||
label: "Options",
|
||||
controlType: "OPTION_INPUT",
|
||||
},
|
||||
{
|
||||
id: "13.5",
|
||||
propertyName: "isVisible",
|
||||
label: "Visibile",
|
||||
controlType: "SWITCH",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
sectionName: "Actions",
|
||||
id: "17",
|
||||
children: [
|
||||
{
|
||||
id: "17.1",
|
||||
propertyName: "onOptionSelected",
|
||||
label: "onOptionSelected",
|
||||
controlType: "ACTION_SELECTOR",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
configVersion: 1,
|
||||
};
|
||||
|
||||
export default PropertyPaneConfigResponse;
|
||||
|
|
@ -1,89 +1,92 @@
|
|||
import { WidgetConfigReducerState } from "../reducers/entityReducers/widgetConfigReducer.tsx";
|
||||
import { WidgetConfigReducerState } from "../reducers/entityReducers/widgetConfigReducer";
|
||||
|
||||
const WidgetConfigResponse: WidgetConfigReducerState = {
|
||||
BUTTON_WIDGET: {
|
||||
text: "Submit",
|
||||
buttonStyle: "PRIMARY_BUTTON",
|
||||
rows: 1,
|
||||
columns: 2,
|
||||
},
|
||||
TEXT_WIDGET: {
|
||||
text: "Not all labels are bad!",
|
||||
textStyle: "LABEL",
|
||||
rows: 1,
|
||||
columns: 3,
|
||||
},
|
||||
IMAGE_WIDGET: {
|
||||
defaultImage: "",
|
||||
imageShape: "RECTANGLE",
|
||||
image: "",
|
||||
rows: 3,
|
||||
columns: 3,
|
||||
},
|
||||
INPUT_WIDGET: {
|
||||
inputType: "TEXT",
|
||||
label: "Label me",
|
||||
rows: 1,
|
||||
columns: 3,
|
||||
},
|
||||
SWITCH_WIDGET: {
|
||||
isOn: false,
|
||||
label: "Turn me on",
|
||||
rows: 1,
|
||||
columns: 4,
|
||||
},
|
||||
CONTAINER_WIDGET: {
|
||||
backgroundColor: "#FFFFFF",
|
||||
rows: 1,
|
||||
columns: 4,
|
||||
},
|
||||
SPINNER_WIDGET: {
|
||||
rows: 1,
|
||||
columns: 1,
|
||||
},
|
||||
DATE_PICKER_WIDGET: {
|
||||
enableTime: false,
|
||||
datePickerType: "DATE_PICKER",
|
||||
rows: 1,
|
||||
columns: 3,
|
||||
label: "Date",
|
||||
},
|
||||
TABLE_WIDGET: {
|
||||
rows: 5,
|
||||
columns: 7,
|
||||
label: "Don't table me!",
|
||||
},
|
||||
DROP_DOWN_WIDGET: {
|
||||
rows: 1,
|
||||
columns: 3,
|
||||
selectionType: "SINGLE_SELECT",
|
||||
label: "Pick me!",
|
||||
},
|
||||
CHECKBOX_WIDGET: {
|
||||
rows: 1,
|
||||
columns: 3,
|
||||
label: "Label - CHECK!",
|
||||
defaultCheckedState: true,
|
||||
},
|
||||
RADIO_GROUP_WIDGET: {
|
||||
rows: 3,
|
||||
columns: 3,
|
||||
label: "Alpha - come in!",
|
||||
options: [
|
||||
{ label: "Alpha", value: "1" },
|
||||
{ label: "Bravo", value: "2" },
|
||||
{ label: "Charlie", value: "3" },
|
||||
],
|
||||
defaultOptionValue: "1",
|
||||
},
|
||||
ALERT_WIDGET: {
|
||||
alertType: "NOTIFICATION",
|
||||
intent: "SUCCESS",
|
||||
rows: 3,
|
||||
columns: 3,
|
||||
header: "",
|
||||
message: "",
|
||||
config: {
|
||||
BUTTON_WIDGET: {
|
||||
text: "Submit",
|
||||
buttonStyle: "PRIMARY_BUTTON",
|
||||
rows: 1,
|
||||
columns: 2,
|
||||
},
|
||||
TEXT_WIDGET: {
|
||||
text: "Not all labels are bad!",
|
||||
textStyle: "LABEL",
|
||||
rows: 1,
|
||||
columns: 3,
|
||||
},
|
||||
IMAGE_WIDGET: {
|
||||
defaultImage: "",
|
||||
imageShape: "RECTANGLE",
|
||||
image: "",
|
||||
rows: 3,
|
||||
columns: 3,
|
||||
},
|
||||
INPUT_WIDGET: {
|
||||
inputType: "TEXT",
|
||||
label: "Label me",
|
||||
rows: 1,
|
||||
columns: 3,
|
||||
},
|
||||
SWITCH_WIDGET: {
|
||||
isOn: false,
|
||||
label: "Turn me on",
|
||||
rows: 1,
|
||||
columns: 4,
|
||||
},
|
||||
CONTAINER_WIDGET: {
|
||||
backgroundColor: "#FFFFFF",
|
||||
rows: 1,
|
||||
columns: 4,
|
||||
},
|
||||
SPINNER_WIDGET: {
|
||||
rows: 1,
|
||||
columns: 1,
|
||||
},
|
||||
DATE_PICKER_WIDGET: {
|
||||
enableTime: false,
|
||||
datePickerType: "DATE_PICKER",
|
||||
rows: 1,
|
||||
columns: 3,
|
||||
label: "Date",
|
||||
},
|
||||
TABLE_WIDGET: {
|
||||
rows: 5,
|
||||
columns: 7,
|
||||
label: "Don't table me!",
|
||||
},
|
||||
DROP_DOWN_WIDGET: {
|
||||
rows: 1,
|
||||
columns: 3,
|
||||
selectionType: "SINGLE_SELECT",
|
||||
label: "Pick me!",
|
||||
},
|
||||
CHECKBOX_WIDGET: {
|
||||
rows: 1,
|
||||
columns: 3,
|
||||
label: "Label - CHECK!",
|
||||
defaultCheckedState: true,
|
||||
},
|
||||
RADIO_GROUP_WIDGET: {
|
||||
rows: 3,
|
||||
columns: 3,
|
||||
label: "Alpha - come in!",
|
||||
options: [
|
||||
{ label: "Alpha", value: "1" },
|
||||
{ label: "Bravo", value: "2" },
|
||||
{ label: "Charlie", value: "3" },
|
||||
],
|
||||
defaultOptionValue: "1",
|
||||
},
|
||||
ALERT_WIDGET: {
|
||||
alertType: "NOTIFICATION",
|
||||
intent: "SUCCESS",
|
||||
rows: 3,
|
||||
columns: 3,
|
||||
header: "",
|
||||
message: "",
|
||||
},
|
||||
},
|
||||
configVersion: 1,
|
||||
};
|
||||
|
||||
export default WidgetConfigResponse;
|
||||
|
|
|
|||
121
app/client/src/pages/Editor/PropertyPane.tsx
Normal file
121
app/client/src/pages/Editor/PropertyPane.tsx
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
import React, { Component } from "react";
|
||||
import { connect } from "react-redux";
|
||||
import { AppState } from "../../reducers";
|
||||
import PropertyControlFactory from "../../utils/PropertyControlFactory";
|
||||
import _ from "lodash";
|
||||
import { ControlProps } from "../propertyControls/BaseControl";
|
||||
import { PropertySection } from "../../reducers/entityReducers/propertyPaneConfigReducer";
|
||||
import { updateWidgetProperty } from "../../actions/controlActions";
|
||||
|
||||
class PropertyPane extends Component<
|
||||
PropertyPaneProps & PropertyPaneFunctions
|
||||
> {
|
||||
constructor(props: PropertyPaneProps & PropertyPaneFunctions) {
|
||||
super(props);
|
||||
this.onPropertyChange = this.onPropertyChange.bind(this);
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.props.isVisible) {
|
||||
return (
|
||||
<div>
|
||||
{!_.isNil(this.props.propertySections)
|
||||
? _.map(
|
||||
this.props.propertySections,
|
||||
(propertySection: PropertySection) => {
|
||||
return this.renderPropertySection(
|
||||
propertySection,
|
||||
propertySection.id,
|
||||
);
|
||||
},
|
||||
)
|
||||
: undefined}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
renderPropertySection(propertySection: PropertySection, key: string) {
|
||||
return (
|
||||
<div key={key}>
|
||||
{!_.isNil(propertySection) ? (
|
||||
<div>{propertySection.sectionName}</div>
|
||||
) : (
|
||||
undefined
|
||||
)}
|
||||
<div
|
||||
style={
|
||||
propertySection.orientation === "HORIZONTAL"
|
||||
? { flexDirection: "row" }
|
||||
: { flexDirection: "column" }
|
||||
}
|
||||
>
|
||||
{_.map(
|
||||
propertySection.children,
|
||||
(propertyControlOrSection: ControlProps | PropertySection) => {
|
||||
if ("children" in propertyControlOrSection) {
|
||||
return this.renderPropertySection(
|
||||
propertyControlOrSection,
|
||||
propertyControlOrSection.id,
|
||||
);
|
||||
} else {
|
||||
return PropertyControlFactory.createControl(
|
||||
propertyControlOrSection,
|
||||
{ onPropertyChange: this.onPropertyChange },
|
||||
);
|
||||
}
|
||||
},
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
onPropertyChange(propertyName: string, propertyValue: any) {
|
||||
this.props.updateWidgetProperty(
|
||||
this.props.widgetId,
|
||||
propertyName,
|
||||
propertyValue,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state: AppState): PropertyPaneProps => {
|
||||
let propertyConfig = undefined;
|
||||
if (!_.isNil(state.ui.propertyPane.widgetId)) {
|
||||
const widget = state.entities.canvasWidgets[state.ui.propertyPane.widgetId];
|
||||
propertyConfig = state.entities.propertyConfig.config[widget.type];
|
||||
}
|
||||
return {
|
||||
propertySections: propertyConfig,
|
||||
widgetId: state.ui.propertyPane.widgetId,
|
||||
isVisible: state.ui.propertyPane.isVisible,
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch: any): PropertyPaneFunctions => {
|
||||
return {
|
||||
updateWidgetProperty: (
|
||||
widgetId: string,
|
||||
propertyName: string,
|
||||
propertyValue: any,
|
||||
) => dispatch(updateWidgetProperty(widgetId, propertyName, propertyValue)),
|
||||
};
|
||||
};
|
||||
|
||||
export interface PropertyPaneProps {
|
||||
propertySections?: PropertySection[];
|
||||
widgetId?: string;
|
||||
isVisible: boolean;
|
||||
}
|
||||
|
||||
export interface PropertyPaneFunctions {
|
||||
updateWidgetProperty: Function;
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps,
|
||||
)(PropertyPane);
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import React, { Component } from "react";
|
||||
import { Position, Toaster } from "@blueprintjs/core";
|
||||
import { connect } from "react-redux";
|
||||
import styled from "styled-components";
|
||||
import Canvas from "./Canvas";
|
||||
|
|
@ -17,6 +18,11 @@ import { fetchPage, updateWidget, savePage } from "../../actions/pageActions";
|
|||
import { RenderModes } from "../../constants/WidgetConstants";
|
||||
import { executeAction } from "../../actions/widgetActions";
|
||||
import { ActionPayload } from "../../constants/ActionConstants";
|
||||
import PropertyPane from "./PropertyPane";
|
||||
|
||||
const SaveToast = Toaster.create({
|
||||
position: Position.TOP,
|
||||
});
|
||||
|
||||
const CanvasContainer = styled.section`
|
||||
height: 100%;
|
||||
|
|
@ -58,6 +64,7 @@ type EditorProps = {
|
|||
page: string;
|
||||
currentPageId: string;
|
||||
currentLayoutId: string;
|
||||
isSaving: boolean;
|
||||
};
|
||||
|
||||
class Editor extends Component<EditorProps> {
|
||||
|
|
@ -65,6 +72,19 @@ class Editor extends Component<EditorProps> {
|
|||
this.props.fetchCanvasWidgets(this.props.currentPageId);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: EditorProps) {
|
||||
if (this.props.isSaving && prevProps.isSaving !== this.props.isSaving) {
|
||||
SaveToast.clear();
|
||||
SaveToast.show({ message: "Saving Page..." });
|
||||
} else if (
|
||||
!this.props.isSaving &&
|
||||
prevProps.isSaving !== this.props.isSaving
|
||||
) {
|
||||
SaveToast.clear();
|
||||
SaveToast.show({ message: "Page Saved" });
|
||||
}
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
|
|
@ -82,6 +102,7 @@ class Editor extends Component<EditorProps> {
|
|||
}}
|
||||
/>
|
||||
</CanvasContainer>
|
||||
<PropertyPane />
|
||||
</EditorWrapper>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
|
@ -99,6 +120,7 @@ const mapStateToProps = (state: AppState): EditorReduxState => {
|
|||
pageWidgetId: state.ui.editor.pageWidgetId,
|
||||
currentPageId: state.ui.editor.currentPageId,
|
||||
currentLayoutId: state.ui.editor.currentLayoutId,
|
||||
isSaving: state.ui.editor.isSaving,
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
|||
37
app/client/src/pages/propertyControls/BaseControl.tsx
Normal file
37
app/client/src/pages/propertyControls/BaseControl.tsx
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
/***
|
||||
* Controls are rendered in the property panel from the property config
|
||||
* Controls are higher order components that update a widgets property
|
||||
*/
|
||||
import { Component } from "react";
|
||||
import { ControlType } from "../../constants/PropertyControlConstants";
|
||||
import _ from "lodash";
|
||||
|
||||
abstract class BaseControl<T extends ControlProps> extends Component<T> {
|
||||
updateProperty(propertyName: string, propertyValue: any) {
|
||||
if (!_.isNil(this.props.onPropertyChange))
|
||||
this.props.onPropertyChange(propertyName, propertyValue);
|
||||
}
|
||||
|
||||
abstract getControlType(): ControlType;
|
||||
}
|
||||
|
||||
export interface ControlBuilder<T extends ControlProps> {
|
||||
buildPropertyControl(controlProps: T): JSX.Element;
|
||||
}
|
||||
|
||||
export interface ControlProps extends ControlData, ControlFunctions {
|
||||
key?: string;
|
||||
}
|
||||
|
||||
export interface ControlData {
|
||||
id: string;
|
||||
label: string;
|
||||
propertyName: string;
|
||||
controlType: ControlType;
|
||||
}
|
||||
|
||||
export interface ControlFunctions {
|
||||
onPropertyChange?: (propertyName: string, propertyValue: string) => void;
|
||||
}
|
||||
|
||||
export default BaseControl;
|
||||
74
app/client/src/pages/propertyControls/DropDownControl.tsx
Normal file
74
app/client/src/pages/propertyControls/DropDownControl.tsx
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
import React, { SyntheticEvent } from "react";
|
||||
import BaseControl, { ControlProps } from "./BaseControl";
|
||||
import { ControlType } from "../../constants/PropertyControlConstants";
|
||||
import { Button, MenuItem } from "@blueprintjs/core";
|
||||
import { Select, IItemRendererProps } from "@blueprintjs/select";
|
||||
|
||||
class DropDownControl extends BaseControl<DropDownControlProps> {
|
||||
constructor(props: DropDownControlProps) {
|
||||
super(props);
|
||||
this.onItemSelect = this.onItemSelect.bind(this);
|
||||
}
|
||||
|
||||
render() {
|
||||
const DropDown = Select.ofType<DropdownOption>();
|
||||
return (
|
||||
<DropDown
|
||||
items={this.props.options}
|
||||
itemPredicate={this.filterOption}
|
||||
itemRenderer={this.renderItem}
|
||||
onItemSelect={this.onItemSelect}
|
||||
noResults={<MenuItem disabled={true} text="No results." />}
|
||||
>
|
||||
<Button
|
||||
text={this.props.options[0].label}
|
||||
rightIcon="double-caret-vertical"
|
||||
/>
|
||||
</DropDown>
|
||||
);
|
||||
}
|
||||
|
||||
onItemSelect(
|
||||
item: DropdownOption,
|
||||
event?: SyntheticEvent<HTMLElement>,
|
||||
): void {
|
||||
this.updateProperty(this.props.propertyName, item.value);
|
||||
}
|
||||
|
||||
renderItem(option: DropdownOption, itemProps: IItemRendererProps) {
|
||||
if (!itemProps.modifiers.matchesPredicate) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<MenuItem
|
||||
active={itemProps.modifiers.active}
|
||||
key={option.value}
|
||||
label={option.label}
|
||||
onClick={itemProps.handleClick}
|
||||
text={option.label}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
filterOption(query: string, option: DropdownOption): boolean {
|
||||
return (
|
||||
option.label.toLowerCase().indexOf(query.toLowerCase()) >= 0 ||
|
||||
option.value.toLowerCase().indexOf(query.toLowerCase()) >= 0
|
||||
);
|
||||
}
|
||||
|
||||
getControlType(): ControlType {
|
||||
return "DROP_DOWN";
|
||||
}
|
||||
}
|
||||
|
||||
export interface DropdownOption {
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
export interface DropDownControlProps extends ControlProps {
|
||||
options: DropdownOption[];
|
||||
}
|
||||
|
||||
export default DropDownControl;
|
||||
27
app/client/src/pages/propertyControls/InputTextControl.tsx
Normal file
27
app/client/src/pages/propertyControls/InputTextControl.tsx
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import React from "react";
|
||||
import BaseControl, { ControlProps } from "./BaseControl";
|
||||
import { ControlType } from "../../constants/PropertyControlConstants";
|
||||
import { InputGroup } from "@blueprintjs/core";
|
||||
import { InputType } from "../../widgets/InputWidget";
|
||||
|
||||
class InputTextControl extends BaseControl<InputControlProps> {
|
||||
render() {
|
||||
return <InputGroup onChange={this.onTextChange} />;
|
||||
}
|
||||
|
||||
onTextChange(event: React.ChangeEvent<HTMLInputElement>) {
|
||||
this.updateProperty(this.props.propertyName, event.target.value);
|
||||
}
|
||||
|
||||
getControlType(): ControlType {
|
||||
return "INPUT_TEXT";
|
||||
}
|
||||
}
|
||||
|
||||
export interface InputControlProps extends ControlProps {
|
||||
placeholderText: string;
|
||||
inputType: InputType;
|
||||
isDisabled?: boolean;
|
||||
}
|
||||
|
||||
export default InputTextControl;
|
||||
|
|
@ -6,6 +6,7 @@ import {
|
|||
} from "../../constants/ReduxActionConstants";
|
||||
import { WidgetProps } from "../../widgets/BaseWidget";
|
||||
import { ContainerWidgetProps } from "../../widgets/ContainerWidget";
|
||||
import { UpdateWidgetPropertyPayload } from "../../actions/controlActions";
|
||||
|
||||
const initialState: CanvasWidgetsReduxState = {};
|
||||
|
||||
|
|
@ -14,7 +15,7 @@ export type FlattenedWidgetProps = ContainerWidgetProps<WidgetProps> & {
|
|||
};
|
||||
|
||||
const canvasWidgetsReducer = createReducer(initialState, {
|
||||
[ReduxActionTypes.LOAD_CANVAS_WIDGETS]: (
|
||||
[ReduxActionTypes.UPDATE_CANVAS]: (
|
||||
state: CanvasWidgetsReduxState,
|
||||
action: ReduxAction<LoadCanvasWidgetsPayload>,
|
||||
) => {
|
||||
|
|
@ -26,6 +27,19 @@ const canvasWidgetsReducer = createReducer(initialState, {
|
|||
) => {
|
||||
return { ...action.payload.widgets };
|
||||
},
|
||||
[ReduxActionTypes.UPDATE_WIDGET_PROPERTY]: (
|
||||
state: CanvasWidgetsReduxState,
|
||||
action: ReduxAction<UpdateWidgetPropertyPayload>,
|
||||
) => {
|
||||
const widget = state[action.payload.widgetId];
|
||||
return {
|
||||
state,
|
||||
[action.payload.widgetId]: {
|
||||
...widget,
|
||||
[action.payload.propertyName]: action.payload.propertyValue,
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
export interface CanvasWidgetsReduxState {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { combineReducers } from "redux";
|
|||
import canvasWidgetsReducer from "./canvasWidgetsReducer";
|
||||
import apiDataReducer from "./apiDataReducer";
|
||||
import queryDataReducer from "./queryDataReducer";
|
||||
import widgetConfigReducer from "./widgetConfigReducer.tsx";
|
||||
import widgetConfigReducer from "./widgetConfigReducer";
|
||||
import actionsReducer from "./actionsReducer";
|
||||
|
||||
const entityReducer = combineReducers({
|
||||
|
|
|
|||
|
|
@ -0,0 +1,57 @@
|
|||
import { createReducer } from "../../utils/AppsmithUtils";
|
||||
import {
|
||||
ReduxActionTypes,
|
||||
ReduxAction,
|
||||
} from "../../constants/ReduxActionConstants";
|
||||
import PropertyPaneConfigResponse from "../../mockResponses/PropertyPaneConfigResponse";
|
||||
import { InputControlProps } from "../../pages/propertyControls/InputTextControl";
|
||||
import { DropDownControlProps } from "../../pages/propertyControls/DropDownControl";
|
||||
import { ControlProps } from "../../pages/propertyControls/BaseControl";
|
||||
|
||||
const initialState: PropertyPaneConfigState = PropertyPaneConfigResponse;
|
||||
|
||||
export type ControlConfig =
|
||||
| InputControlProps
|
||||
| DropDownControlProps
|
||||
| InputControlProps
|
||||
| ControlProps;
|
||||
|
||||
export type SectionOrientation = "HORIZONTAL" | "VERTICAL";
|
||||
|
||||
export interface PropertySection {
|
||||
id: string;
|
||||
sectionName?: string;
|
||||
orientation?: SectionOrientation;
|
||||
children: (ControlConfig | PropertySection)[];
|
||||
}
|
||||
|
||||
export interface PropertyConfig {
|
||||
BUTTON_WIDGET: PropertySection[];
|
||||
TEXT_WIDGET: PropertySection[];
|
||||
IMAGE_WIDGET: PropertySection[];
|
||||
INPUT_WIDGET: PropertySection[];
|
||||
SWITCH_WIDGET: PropertySection[];
|
||||
CONTAINER_WIDGET: PropertySection[];
|
||||
SPINNER_WIDGET: PropertySection[];
|
||||
DATE_PICKER_WIDGET: PropertySection[];
|
||||
TABLE_WIDGET: PropertySection[];
|
||||
DROP_DOWN_WIDGET: PropertySection[];
|
||||
CHECKBOX_WIDGET: PropertySection[];
|
||||
RADIO_GROUP_WIDGET: PropertySection[];
|
||||
}
|
||||
|
||||
export interface PropertyPaneConfigState {
|
||||
config: PropertyConfig;
|
||||
configVersion: number;
|
||||
}
|
||||
|
||||
const widgetConfigReducer = createReducer(initialState, {
|
||||
[ReduxActionTypes.LOAD_PROPERTY_CONFIG]: (
|
||||
state: PropertyPaneConfigState,
|
||||
action: ReduxAction<PropertyPaneConfigState>,
|
||||
) => {
|
||||
return { ...action.payload };
|
||||
},
|
||||
});
|
||||
|
||||
export default widgetConfigReducer;
|
||||
|
|
@ -2,7 +2,6 @@ import { createReducer } from "../../utils/AppsmithUtils";
|
|||
import {
|
||||
ReduxActionTypes,
|
||||
ReduxAction,
|
||||
LoadWidgetConfigPayload,
|
||||
} from "../../constants/ReduxActionConstants";
|
||||
import { WidgetProps } from "../../widgets/BaseWidget";
|
||||
import WidgetConfigResponse from "../../mockResponses/WidgetConfigResponse";
|
||||
|
|
@ -28,26 +27,29 @@ export interface WidgetConfigProps {
|
|||
}
|
||||
|
||||
export interface WidgetConfigReducerState {
|
||||
BUTTON_WIDGET: Partial<ButtonWidgetProps> & WidgetConfigProps;
|
||||
TEXT_WIDGET: Partial<TextWidgetProps> & WidgetConfigProps;
|
||||
IMAGE_WIDGET: Partial<ImageWidgetProps> & WidgetConfigProps;
|
||||
INPUT_WIDGET: Partial<InputWidgetProps> & WidgetConfigProps;
|
||||
SWITCH_WIDGET: Partial<SwitchWidgetProps> & WidgetConfigProps;
|
||||
CONTAINER_WIDGET: Partial<ContainerWidgetProps<WidgetProps>> &
|
||||
WidgetConfigProps;
|
||||
SPINNER_WIDGET: Partial<SpinnerWidgetProps> & WidgetConfigProps;
|
||||
DATE_PICKER_WIDGET: Partial<DatePickerWidgetProps> & WidgetConfigProps;
|
||||
TABLE_WIDGET: Partial<TableWidgetProps> & WidgetConfigProps;
|
||||
DROP_DOWN_WIDGET: Partial<DropdownWidgetProps> & WidgetConfigProps;
|
||||
CHECKBOX_WIDGET: Partial<CheckboxWidgetProps> & WidgetConfigProps;
|
||||
RADIO_GROUP_WIDGET: Partial<RadioGroupWidgetProps> & WidgetConfigProps;
|
||||
ALERT_WIDGET: Partial<AlertWidgetProps> & WidgetConfigProps;
|
||||
config: {
|
||||
BUTTON_WIDGET: Partial<ButtonWidgetProps> & WidgetConfigProps;
|
||||
TEXT_WIDGET: Partial<TextWidgetProps> & WidgetConfigProps;
|
||||
IMAGE_WIDGET: Partial<ImageWidgetProps> & WidgetConfigProps;
|
||||
INPUT_WIDGET: Partial<InputWidgetProps> & WidgetConfigProps;
|
||||
SWITCH_WIDGET: Partial<SwitchWidgetProps> & WidgetConfigProps;
|
||||
CONTAINER_WIDGET: Partial<ContainerWidgetProps<WidgetProps>> &
|
||||
WidgetConfigProps;
|
||||
SPINNER_WIDGET: Partial<SpinnerWidgetProps> & WidgetConfigProps;
|
||||
DATE_PICKER_WIDGET: Partial<DatePickerWidgetProps> & WidgetConfigProps;
|
||||
TABLE_WIDGET: Partial<TableWidgetProps> & WidgetConfigProps;
|
||||
DROP_DOWN_WIDGET: Partial<DropdownWidgetProps> & WidgetConfigProps;
|
||||
CHECKBOX_WIDGET: Partial<CheckboxWidgetProps> & WidgetConfigProps;
|
||||
RADIO_GROUP_WIDGET: Partial<RadioGroupWidgetProps> & WidgetConfigProps;
|
||||
ALERT_WIDGET: Partial<AlertWidgetProps> & WidgetConfigProps;
|
||||
};
|
||||
configVersion: number;
|
||||
}
|
||||
|
||||
const widgetConfigReducer = createReducer(initialState, {
|
||||
[ReduxActionTypes.LOAD_WIDGET_CONFIG]: (
|
||||
state: WidgetConfigReducerState,
|
||||
action: ReduxAction<LoadWidgetConfigPayload>,
|
||||
action: ReduxAction<WidgetConfigReducerState>,
|
||||
) => {
|
||||
return { ...action.payload };
|
||||
},
|
||||
|
|
@ -7,6 +7,8 @@ import { EditorReduxState } from "./uiReducers/editorReducer";
|
|||
import { APIDataState } from "./entityReducers/apiDataReducer";
|
||||
import { QueryDataState } from "./entityReducers/queryDataReducer";
|
||||
import { ActionDataState } from "./entityReducers/actionsReducer";
|
||||
import { PropertyPaneConfigState } from "./entityReducers/propertyPaneConfigReducer";
|
||||
import { PropertyPaneReduxState } from "./uiReducers/propertyPaneReducer";
|
||||
|
||||
const appReducer = combineReducers({
|
||||
entities: entityReducer,
|
||||
|
|
@ -19,11 +21,13 @@ export interface AppState {
|
|||
ui: {
|
||||
widgetCardsPane: WidgetCardsPaneReduxState;
|
||||
editor: EditorReduxState;
|
||||
propertyPane: PropertyPaneReduxState;
|
||||
};
|
||||
entities: {
|
||||
canvasWidgets: CanvasWidgetsReduxState;
|
||||
apiData: APIDataState;
|
||||
queryData: QueryDataState;
|
||||
actions: ActionDataState;
|
||||
propertyConfig: PropertyPaneConfigState;
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ const initialState: EditorReduxState = {
|
|||
pageWidgetId: "0",
|
||||
currentPageId: "5d807e76795dc6000482bc76",
|
||||
currentLayoutId: "5d807e76795dc6000482bc75",
|
||||
isSaving: false,
|
||||
};
|
||||
|
||||
const editorReducer = createReducer(initialState, {
|
||||
|
|
@ -27,6 +28,17 @@ const editorReducer = createReducer(initialState, {
|
|||
) => {
|
||||
return { ...state, pageWidgetId: action.payload.pageWidgetId };
|
||||
},
|
||||
[ReduxActionTypes.SAVE_PAGE_INIT]: (state: EditorReduxState) => {
|
||||
return { ...state, isSaving: true };
|
||||
},
|
||||
[ReduxActionTypes.SAVE_PAGE_SUCCESS]: (state: EditorReduxState) => {
|
||||
return { ...state, isSaving: false };
|
||||
},
|
||||
[ReduxActionTypes.SAVE_PAGE_ERROR]: (state: EditorReduxState) => {
|
||||
// TODO(abhinav): It will be painful to handle all errors like this
|
||||
// make this generic and global toasts to show messages on error.
|
||||
return { ...state, isSaving: false };
|
||||
},
|
||||
});
|
||||
|
||||
export interface EditorReduxState {
|
||||
|
|
@ -37,6 +49,7 @@ export interface EditorReduxState {
|
|||
pageWidgetId: string;
|
||||
currentPageId: string;
|
||||
currentLayoutId: string;
|
||||
isSaving: boolean;
|
||||
}
|
||||
|
||||
export default editorReducer;
|
||||
|
|
|
|||
|
|
@ -2,10 +2,12 @@ import { combineReducers } from "redux";
|
|||
import widgetCardsPaneReducer from "./widgetCardsPaneReducer";
|
||||
import editorHeaderReducer from "./editorHeaderReducer";
|
||||
import editorReducer from "./editorReducer";
|
||||
import propertyPaneReducer from "./propertyPaneReducer";
|
||||
|
||||
const uiReducer = combineReducers({
|
||||
widgetCardsPane: widgetCardsPaneReducer,
|
||||
editorHeader: editorHeaderReducer,
|
||||
editor: editorReducer,
|
||||
propertyPane: propertyPaneReducer,
|
||||
});
|
||||
export default uiReducer;
|
||||
|
|
|
|||
26
app/client/src/reducers/uiReducers/propertyPaneReducer.tsx
Normal file
26
app/client/src/reducers/uiReducers/propertyPaneReducer.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import { createReducer } from "../../utils/AppsmithUtils";
|
||||
import {
|
||||
ReduxActionTypes,
|
||||
ReduxAction,
|
||||
ShowPropertyPanePayload,
|
||||
} from "../../constants/ReduxActionConstants";
|
||||
|
||||
const initialState: PropertyPaneReduxState = {
|
||||
isVisible: false,
|
||||
};
|
||||
|
||||
const propertyPaneReducer = createReducer(initialState, {
|
||||
[ReduxActionTypes.SHOW_PROPERTY_PANE]: (
|
||||
state: PropertyPaneReduxState,
|
||||
action: ReduxAction<ShowPropertyPanePayload>,
|
||||
) => {
|
||||
return { widgetId: action.payload };
|
||||
},
|
||||
});
|
||||
|
||||
export interface PropertyPaneReduxState {
|
||||
widgetId?: string;
|
||||
isVisible: boolean;
|
||||
}
|
||||
|
||||
export default propertyPaneReducer;
|
||||
|
|
@ -3,16 +3,15 @@ import {
|
|||
ReduxAction,
|
||||
} from "../constants/ReduxActionConstants";
|
||||
import { call, takeEvery, select, all } from "redux-saga/effects";
|
||||
import {
|
||||
APIActionPayload,
|
||||
QueryActionPayload,
|
||||
PageAction,
|
||||
ActionPayload,
|
||||
} from "../constants/ActionConstants";
|
||||
import ActionAPI, { ActionCreateUpdateResponse } from "../api/ActionAPI";
|
||||
import { PageAction, ActionPayload } from "../constants/ActionConstants";
|
||||
import ActionAPI, {
|
||||
ActionCreateUpdateResponse,
|
||||
ExecuteActionRequest,
|
||||
} from "../api/ActionAPI";
|
||||
import { AppState } from "../reducers";
|
||||
import { JSONPath } from "jsonpath-plus";
|
||||
import _ from "lodash";
|
||||
import { mapToPropList } from "../utils/AppsmithUtils";
|
||||
|
||||
const getDataTree = (state: AppState) => {
|
||||
return state.entities;
|
||||
|
|
@ -31,52 +30,37 @@ export function* evaluateJSONPathSaga(jsonPath: string): any {
|
|||
return result;
|
||||
}
|
||||
|
||||
export function* executeAPIActionSaga(apiAction: APIActionPayload) {
|
||||
const api: PageAction = yield select(getAction, apiAction.apiId);
|
||||
const responses: any = yield all(
|
||||
api.dynamicBindings.map((jsonPath: string) => {
|
||||
return call(evaluateJSONPathSaga, jsonPath);
|
||||
}),
|
||||
);
|
||||
const dynamicBindingMap: Record<string, any> = _.keyBy(
|
||||
responses,
|
||||
(response: string, index: number) => {
|
||||
return api.dynamicBindings[index];
|
||||
},
|
||||
);
|
||||
yield ActionAPI.executeAction({
|
||||
actionId: apiAction.apiId,
|
||||
dynamicBindingMap: dynamicBindingMap,
|
||||
});
|
||||
}
|
||||
|
||||
export function* executeQueryActionSaga(queryAction: QueryActionPayload) {
|
||||
const query: PageAction = yield select(getAction, queryAction.queryId);
|
||||
const responses: any = yield all(
|
||||
query.dynamicBindings.map((jsonPath: string) => {
|
||||
return call(evaluateJSONPathSaga, jsonPath);
|
||||
}),
|
||||
);
|
||||
const dynamicBindingMap: Record<string, any> = _.keyBy(
|
||||
responses,
|
||||
(response: string, index: number) => {
|
||||
return query.dynamicBindings[index];
|
||||
},
|
||||
);
|
||||
yield ActionAPI.executeAction({
|
||||
actionId: query.actionId,
|
||||
dynamicBindingMap: dynamicBindingMap,
|
||||
});
|
||||
export function* executeAPIQueryActionSaga(apiAction: ActionPayload) {
|
||||
const api: PageAction = yield select(getAction, apiAction.actionId);
|
||||
const executeActionRequest: ExecuteActionRequest = {
|
||||
actionId: apiAction.actionId,
|
||||
};
|
||||
if (!_.isNil(api.dynamicBindings)) {
|
||||
const responses: any = yield all(
|
||||
api.dynamicBindings.map((jsonPath: string) => {
|
||||
return call(evaluateJSONPathSaga, jsonPath);
|
||||
}),
|
||||
);
|
||||
const dynamicBindingMap: Record<string, any> = _.keyBy(
|
||||
responses,
|
||||
(response: string, index: number) => {
|
||||
return api.dynamicBindings ? api.dynamicBindings[index] : undefined;
|
||||
},
|
||||
);
|
||||
executeActionRequest.dynamicBindingList = mapToPropList(dynamicBindingMap);
|
||||
}
|
||||
yield ActionAPI.executeAction(executeActionRequest);
|
||||
}
|
||||
|
||||
export function* executeActionSaga(action: ReduxAction<ActionPayload[]>) {
|
||||
if (!_.isNil(action.payload)) {
|
||||
yield all(
|
||||
action.payload.map((actionPayload: ActionPayload) => {
|
||||
_.map(action.payload, (actionPayload: ActionPayload) => {
|
||||
switch (actionPayload.actionType) {
|
||||
case "API":
|
||||
const apiActionPaylod: APIActionPayload = actionPayload as APIActionPayload;
|
||||
return call(executeAPIActionSaga, apiActionPaylod);
|
||||
return call(executeAPIQueryActionSaga, actionPayload);
|
||||
case "QUERY":
|
||||
return call(executeAPIQueryActionSaga, actionPayload);
|
||||
}
|
||||
return undefined;
|
||||
}),
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import {
|
|||
LoadCanvasWidgetsPayload,
|
||||
} from "../constants/ReduxActionConstants";
|
||||
import {
|
||||
loadCanvasWidgets,
|
||||
updateCanvas,
|
||||
savePageError,
|
||||
savePageSuccess,
|
||||
fetchPageError,
|
||||
|
|
@ -44,19 +44,19 @@ export function* fetchPageSaga(
|
|||
const canvasWidgetsPayload: LoadCanvasWidgetsPayload = {
|
||||
pageWidgetId: normalizedResponse.result,
|
||||
widgets: normalizedResponse.entities.canvasWidgets,
|
||||
layoutId: fetchPageResponse.data.layouts[0].id,
|
||||
layoutId: fetchPageResponse.data.layouts[0].id, // TODO(abhinav): Handle for multiple layouts
|
||||
};
|
||||
yield put(loadCanvasWidgets(canvasWidgetsPayload));
|
||||
yield put({
|
||||
type: ReduxActionTypes.LOAD_CANVAS_ACTIONS,
|
||||
payload: fetchPageResponse.data.layouts[0].actions, // TODO: Refactor
|
||||
});
|
||||
} else {
|
||||
yield put(fetchPageError(fetchPageResponse.responseMeta));
|
||||
yield all([
|
||||
put(updateCanvas(canvasWidgetsPayload)),
|
||||
put({
|
||||
type: ReduxActionTypes.LOAD_CANVAS_ACTIONS,
|
||||
payload: fetchPageResponse.data.layouts[0].actions, // TODO(abhinav): Handle for multiple layouts
|
||||
}),
|
||||
]);
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
//TODO(abhinav): REFACTOR THIS
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
yield put(fetchPageError(error));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,10 @@ import * as Sentry from "@sentry/browser";
|
|||
import AnalyticsUtil from "./AnalyticsUtil";
|
||||
import netlifyIdentity from "netlify-identity-widget";
|
||||
import FontFaceObserver from "fontfaceobserver";
|
||||
import PropertyControlRegistry from "./PropertyControlRegistry";
|
||||
import WidgetBuilderRegistry from "./WidgetRegistry";
|
||||
import { Property } from "../api/ActionAPI";
|
||||
import _ from "lodash";
|
||||
|
||||
export const createReducer = (
|
||||
initialState: any,
|
||||
|
|
@ -24,6 +28,8 @@ export const createReducer = (
|
|||
};
|
||||
|
||||
export const appInitializer = () => {
|
||||
WidgetBuilderRegistry.registerWidgetBuilders();
|
||||
PropertyControlRegistry.registerPropertyControlBuilders();
|
||||
netlifyIdentity.init();
|
||||
switch (process.env.REACT_APP_ENVIRONMENT) {
|
||||
case "PRODUCTION":
|
||||
|
|
@ -48,3 +54,9 @@ export const appInitializer = () => {
|
|||
console.log(err);
|
||||
});
|
||||
};
|
||||
|
||||
export const mapToPropList = (map: Record<string, string>): Property[] => {
|
||||
return _.map(map, (value, key) => {
|
||||
return { key: key, value: value };
|
||||
});
|
||||
};
|
||||
|
|
|
|||
51
app/client/src/utils/PropertyControlFactory.tsx
Normal file
51
app/client/src/utils/PropertyControlFactory.tsx
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
import { ControlType } from "../constants/PropertyControlConstants";
|
||||
import {
|
||||
ControlBuilder,
|
||||
ControlProps,
|
||||
ControlData,
|
||||
ControlFunctions,
|
||||
} from "../pages/propertyControls/BaseControl";
|
||||
|
||||
class PropertyControlFactory {
|
||||
static controlMap: Map<ControlType, ControlBuilder<ControlProps>> = new Map();
|
||||
|
||||
static registerControlBuilder(
|
||||
controlType: ControlType,
|
||||
controlBuilder: ControlBuilder<ControlProps>,
|
||||
) {
|
||||
this.controlMap.set(controlType, controlBuilder);
|
||||
}
|
||||
|
||||
static createControl(
|
||||
controlData: ControlData,
|
||||
controlFunctions: ControlFunctions,
|
||||
): JSX.Element {
|
||||
const controlBuilder = this.controlMap.get(controlData.controlType);
|
||||
if (controlBuilder) {
|
||||
const controlProps: ControlProps = {
|
||||
...controlData,
|
||||
...controlFunctions,
|
||||
key: controlData.id,
|
||||
};
|
||||
const control = controlBuilder.buildPropertyControl(controlProps);
|
||||
return control;
|
||||
} else {
|
||||
const ex: ControlCreationException = {
|
||||
message:
|
||||
"Control Builder not registered for control type" +
|
||||
controlData.controlType,
|
||||
};
|
||||
throw ex;
|
||||
}
|
||||
}
|
||||
|
||||
static getControlTypes(): ControlType[] {
|
||||
return Array.from(this.controlMap.keys());
|
||||
}
|
||||
}
|
||||
|
||||
export interface ControlCreationException {
|
||||
message: string;
|
||||
}
|
||||
|
||||
export default PropertyControlFactory;
|
||||
25
app/client/src/utils/PropertyControlRegistry.tsx
Normal file
25
app/client/src/utils/PropertyControlRegistry.tsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import React from "react";
|
||||
import PropertyControlFactory from "./PropertyControlFactory";
|
||||
import InputTextControl, {
|
||||
InputControlProps,
|
||||
} from "../pages/propertyControls/InputTextControl";
|
||||
import DropDownControl, {
|
||||
DropDownControlProps,
|
||||
} from "../pages/propertyControls/DropDownControl";
|
||||
|
||||
class PropertyControlRegistry {
|
||||
static registerPropertyControlBuilders() {
|
||||
PropertyControlFactory.registerControlBuilder("INPUT_TEXT", {
|
||||
buildPropertyControl(controlProps: InputControlProps): JSX.Element {
|
||||
return <InputTextControl {...controlProps} />;
|
||||
},
|
||||
});
|
||||
PropertyControlFactory.registerControlBuilder("DROP_DOWN", {
|
||||
buildPropertyControl(controlProps: DropDownControlProps): JSX.Element {
|
||||
return <DropDownControl {...controlProps} />;
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default PropertyControlRegistry;
|
||||
|
|
@ -1,16 +1,12 @@
|
|||
import React from "react";
|
||||
import React, { Component } from "react";
|
||||
import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
|
||||
import { WidgetType } from "../constants/WidgetConstants";
|
||||
import { ActionPayload } from "../constants/ActionConstants";
|
||||
|
||||
class AlertWidget extends BaseWidget<AlertWidgetProps, WidgetState> {
|
||||
class AlertWidget extends Component {
|
||||
getPageView() {
|
||||
return <div />;
|
||||
}
|
||||
|
||||
getWidgetType(): WidgetType {
|
||||
return "ALERT_WIDGET";
|
||||
}
|
||||
}
|
||||
|
||||
export type AlertType = "DIALOG" | "NOTIFICATION";
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@ export interface ButtonWidgetProps extends WidgetProps {
|
|||
text?: string;
|
||||
buttonStyle?: ButtonStyle;
|
||||
onClick?: ActionPayload[];
|
||||
isDisabled?: boolean;
|
||||
}
|
||||
|
||||
export default ButtonWidget;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export type DatePickerType = "DATE_PICKER" | "DATE_RANGE_PICKER";
|
|||
|
||||
export interface DatePickerWidgetProps extends WidgetProps {
|
||||
defaultDate?: Date;
|
||||
timezone?: TimeZone;
|
||||
defaultTimezone?: TimeZone;
|
||||
enableTime: boolean;
|
||||
label: string;
|
||||
datePickerType: DatePickerType;
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export interface DropdownOption {
|
|||
}
|
||||
|
||||
export interface DropdownWidgetProps extends WidgetProps {
|
||||
placeholder?: string;
|
||||
placeholderText?: string;
|
||||
label?: string;
|
||||
selectionType: SelectionType;
|
||||
options?: DropdownOption[];
|
||||
|
|
|
|||
|
|
@ -22,13 +22,19 @@ export type InputType =
|
|||
| "CURRENCY"
|
||||
| "SEARCH";
|
||||
|
||||
export interface InputValidator {
|
||||
validationRegex: string;
|
||||
errorMessage: string;
|
||||
}
|
||||
export interface InputWidgetProps extends WidgetProps {
|
||||
errorMessage?: string;
|
||||
inputType: InputType;
|
||||
defaultText?: string;
|
||||
placeholder?: string;
|
||||
placeholderText?: string;
|
||||
maxChars?: number;
|
||||
label: string;
|
||||
inputValidators: InputValidator[];
|
||||
focusIndex?: number;
|
||||
isAutoFocusEnabled?: boolean;
|
||||
}
|
||||
|
||||
export default InputWidget;
|
||||
|
|
|
|||
|
|
@ -15,13 +15,18 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
|
|||
|
||||
export type PaginationType = "PAGES" | "INFINITE_SCROLL";
|
||||
|
||||
export interface TableAction extends ActionPayload {
|
||||
actionName: string;
|
||||
}
|
||||
|
||||
export interface TableWidgetProps extends WidgetProps {
|
||||
pageKey?: string;
|
||||
nextPageKey?: string;
|
||||
prevPageKey?: string;
|
||||
label: string;
|
||||
tableData?: object[];
|
||||
recordActions?: TableAction[];
|
||||
onPageChange?: ActionPayload[];
|
||||
onRowSelected?: ActionPayload[];
|
||||
onColumnActionClick?: Record<string, ActionPayload[]>;
|
||||
}
|
||||
|
||||
export default TableWidget;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@ class TextWidget extends BaseWidget<TextWidgetProps, WidgetState> {
|
|||
widgetId={this.props.widgetId}
|
||||
key={this.props.widgetId}
|
||||
text={this.props.text}
|
||||
tagName={this.props.tagName}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -26,7 +25,6 @@ export type TextStyle = "BODY" | "HEADING" | "LABEL" | "SUB_TEXT";
|
|||
export interface TextWidgetProps extends WidgetProps {
|
||||
text?: string;
|
||||
textStyle?: TextStyle;
|
||||
tagName?: keyof JSX.IntrinsicElements;
|
||||
}
|
||||
|
||||
export default TextWidget;
|
||||
|
|
|
|||
|
|
@ -894,7 +894,7 @@
|
|||
lodash "^4.17.13"
|
||||
to-fast-properties "^2.0.0"
|
||||
|
||||
"@blueprintjs/core@^3.11.0", "@blueprintjs/core@^3.18.1":
|
||||
"@blueprintjs/core@^3.11.0", "@blueprintjs/core@^3.18.0", "@blueprintjs/core@^3.18.1":
|
||||
version "3.18.1"
|
||||
resolved "https://registry.yarnpkg.com/@blueprintjs/core/-/core-3.18.1.tgz#cf180d470710a0e9123fb2449113be06cf0d81ce"
|
||||
integrity sha512-G+IhJsN006Mb32NLOrne5TLScxyyd3Id9g2MvfYFq9zuyBcBA5+V/uQy3pTO9vkmuKEz0GLLy8ZbrQ7Us/+zTw==
|
||||
|
|
@ -928,6 +928,15 @@
|
|||
classnames "^2.2"
|
||||
tslib "~1.9.0"
|
||||
|
||||
"@blueprintjs/select@^3.10.0":
|
||||
version "3.10.0"
|
||||
resolved "https://registry.yarnpkg.com/@blueprintjs/select/-/select-3.10.0.tgz#e5711a25416e62d236afb8a3062af45b3b4206ef"
|
||||
integrity sha512-Akm/L5tndrOUuf05od9IJ0WSQgHdbJ4/i2RRoLLH5ZiI8s1OZiCbKJYDSCbCOTviCdZSuL0qkJsBcYhOI/Czeg==
|
||||
dependencies:
|
||||
"@blueprintjs/core" "^3.18.0"
|
||||
classnames "^2.2"
|
||||
tslib "~1.9.0"
|
||||
|
||||
"@blueprintjs/table@^3.4.0":
|
||||
version "3.7.1"
|
||||
resolved "https://registry.yarnpkg.com/@blueprintjs/table/-/table-3.7.1.tgz#3e3e876a2f0b8bebfc26d4bf8350a120614c88aa"
|
||||
|
|
@ -9944,6 +9953,11 @@ redent@^1.0.0:
|
|||
indent-string "^2.1.0"
|
||||
strip-indent "^1.0.1"
|
||||
|
||||
redux-devtools-extension@^2.13.8:
|
||||
version "2.13.8"
|
||||
resolved "https://registry.yarnpkg.com/redux-devtools-extension/-/redux-devtools-extension-2.13.8.tgz#37b982688626e5e4993ff87220c9bbb7cd2d96e1"
|
||||
integrity sha512-8qlpooP2QqPtZHQZRhx3x3OP5skEV1py/zUdMY28WNAocbafxdG2tRD1MWE7sp8obGMNYuLWanhhQ7EQvT1FBg==
|
||||
|
||||
redux-devtools-instrument@^1.9.0:
|
||||
version "1.9.6"
|
||||
resolved "https://registry.yarnpkg.com/redux-devtools-instrument/-/redux-devtools-instrument-1.9.6.tgz#6b412595f74b9d48cfd4ecc13e585b1588ed6e7e"
|
||||
|
|
@ -11751,7 +11765,7 @@ typescript-tuple@^2.1.0:
|
|||
dependencies:
|
||||
typescript-compare "^0.0.2"
|
||||
|
||||
typescript@^3.2.4, typescript@^3.4.5:
|
||||
typescript@^3.4.5, typescript@^3.6.3:
|
||||
version "3.6.3"
|
||||
resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.6.3.tgz#fea942fabb20f7e1ca7164ff626f1a9f3f70b4da"
|
||||
integrity sha512-N7bceJL1CtRQ2RiG0AQME13ksR7DiuQh/QehubYcghzv20tnh+MQnQIuJddTmsbqYj+dztchykemz0zFzlvdQw==
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user