Skip to content

Commit

Permalink
Merge branch 'feat/data-grid' into develop
Browse files Browse the repository at this point in the history
  • Loading branch information
owenlongbo committed Oct 25, 2023
2 parents f7c9878 + 1790fb4 commit cac73c6
Show file tree
Hide file tree
Showing 54 changed files with 4,459 additions and 204 deletions.
11 changes: 10 additions & 1 deletion apps/builder/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@
"@editorjs/list": "^1.8.0",
"@editorjs/marker": "^1.3.0",
"@emotion/cache": "^11.11.0",
"@emotion/styled": "^11.11.0",
"@illa-design/react": "workspace:*",
"@illa-public/avatar": "workspace:*",
"@illa-public/code-editor": "workspace:*",
Expand Down Expand Up @@ -127,7 +128,15 @@
"toposort": "^2.0.2",
"ts-key-enum": "^2.0.12",
"uuid": "^8.3.2",
"xlsx": "https://cdn.sheetjs.com/xlsx-0.20.0/xlsx-0.20.0.tgz"
"xlsx": "https://cdn.sheetjs.com/xlsx-0.20.0/xlsx-0.20.0.tgz",
"@mui/x-data-grid-premium": "^6.16.3",
"@mui/x-data-grid": "^6.16.3",
"@mui/material": "^5.14.13",
"@mui/icons-material": "^5.14.13",
"@dnd-kit/sortable": "^7.0.2",
"@dnd-kit/core": "^6.0.8",
"@dnd-kit/utilities": "^3.2.1",
"@dnd-kit/modifiers": "^6.0.1"
},
"devDependencies": {
"@mdx-js/rollup": "^2.3.0",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,14 @@ export const CountPart: FC<MongoDbActionPartProps> = (props) => {
lineNumbers
style={{ height: "88px" }}
mode={CODE_LANG.JAVASCRIPT}
placeholder={'{"type":"cheese"}'}
placeholder={
"{\n" +
' "type":"cheese",\n' +
' "_id": {\n' +
' "$oid":"646385ae462e929b7a3d86bc"\n' +
" }\n" +
"}"
}
value={typeContent.query}
onChange={handleValueChange}
expectedType={VALIDATION_TYPES.STRING}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,14 @@ export const DeleteManyPart: FC<MongoDbActionPartProps> = (props) => {
lineNumbers
style={{ height: "88px" }}
mode={CODE_LANG.JAVASCRIPT}
placeholder={'{"type":"cheese"}'}
placeholder={
"{\n" +
' "type":"cheese",\n' +
' "_id": {\n' +
' "$oid":"646385ae462e929b7a3d86bc"\n' +
" }\n" +
"}"
}
value={typeContent.filter}
onChange={handleValueChange}
expectedType={VALIDATION_TYPES.STRING}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,14 @@ export const DeleteOnePart: FC<MongoDbActionPartProps> = (props) => {
lineNumbers
style={{ height: "88px" }}
mode={CODE_LANG.JAVASCRIPT}
placeholder={'{"type":"cheese"}'}
placeholder={
"{\n" +
' "type":"cheese",\n' +
' "_id": {\n' +
' "$oid":"646385ae462e929b7a3d86bc"\n' +
" }\n" +
"}"
}
value={typeContent.filter}
expectedType={VALIDATION_TYPES.STRING}
title={t("editor.action.panel.mongodb.filter")}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,14 @@ export const DistinctPart: FC<MongoDbActionPartProps> = (props) => {
onChange={handleValueChange("query")}
style={{ height: "188px" }}
expectedType={VALIDATION_TYPES.STRING}
placeholder={'{"type":"cheese"}'}
placeholder={
"{\n" +
' "type":"cheese",\n' +
' "_id": {\n' +
' "$oid":"646385ae462e929b7a3d86bc"\n' +
" }\n" +
"}"
}
/>
<InputEditor
title={t("editor.action.panel.mongodb.field")}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,14 @@ export const FindOneAndUpdatePart: FC<MongoDbActionPartProps> = (props) => {
value={typeContent.filter}
onChange={handleValueChange("filter")}
expectedType={VALIDATION_TYPES.STRING}
placeholder={'{"type":"cheese"}'}
placeholder={
"{\n" +
' "type":"cheese",\n' +
' "_id": {\n' +
' "$oid":"646385ae462e929b7a3d86bc"\n' +
" }\n" +
"}"
}
/>
<InputEditor
title={t("editor.action.panel.mongodb.update")}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,14 @@ export const FindOnePart: FC<MongoDbActionPartProps> = (props) => {
value={typeContent.query}
onChange={handleValueChange("query")}
expectedType={VALIDATION_TYPES.STRING}
placeholder={'{"type":"cheese"}'}
placeholder={
"{\n" +
' "type":"cheese",\n' +
' "_id": {\n' +
' "$oid":"646385ae462e929b7a3d86bc"\n' +
" }\n" +
"}"
}
/>
<InputEditor
title={t("editor.action.panel.mongodb.projection")}
Expand All @@ -61,7 +68,13 @@ export const FindOnePart: FC<MongoDbActionPartProps> = (props) => {
value={typeContent.projection}
onChange={handleValueChange("projection")}
expectedType={VALIDATION_TYPES.STRING}
placeholder={'{"_id":1}'}
placeholder={
"{ \n" +
' "_id": {\n' +
' "$oid":"646385ae462e929b7a3d86bc"\n' +
" }\n" +
"}"
}
/>
<InputEditor
title={t("editor.action.panel.mongodb.skip")}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,14 @@ export const FindPart: FC<MongoDbActionPartProps> = (props) => {
value={typeContent.query}
onChange={handleValueChange("query")}
expectedType={VALIDATION_TYPES.STRING}
placeholder={'{"type":"cheese"}'}
placeholder={
"{\n" +
' "type":"cheese",\n' +
' "_id": {\n' +
' "$oid":"646385ae462e929b7a3d86bc"\n' +
" }\n" +
"}"
}
/>
<InputEditor
title={t("editor.action.panel.mongodb.projection")}
Expand All @@ -61,7 +68,13 @@ export const FindPart: FC<MongoDbActionPartProps> = (props) => {
value={typeContent.projection}
onChange={handleValueChange("projection")}
expectedType={VALIDATION_TYPES.STRING}
placeholder={'{"_id":1} '}
placeholder={
"{ \n" +
' "_id": {\n' +
' "$oid":"646385ae462e929b7a3d86bc"\n' +
" }\n" +
"}"
}
/>
<InputEditor
title={t("editor.action.panel.mongodb.sort_by")}
Expand All @@ -71,7 +84,13 @@ export const FindPart: FC<MongoDbActionPartProps> = (props) => {
value={typeContent.sortBy}
onChange={handleValueChange("sortBy")}
expectedType={VALIDATION_TYPES.STRING}
placeholder={'{"_id":1} '}
placeholder={
"{ \n" +
' "_id": {\n' +
' "$oid":"646385ae462e929b7a3d86bc"\n' +
" }\n" +
"}"
}
/>
<InputEditor
title={t("editor.action.panel.mongodb.limit")}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,14 @@ export const UpdateManyPart: FC<MongoDbActionPartProps> = (props) => {
onChange={handleValueChange("filter")}
mode={CODE_LANG.JAVASCRIPT}
expectedType={VALIDATION_TYPES.STRING}
placeholder={'{"type":"cheese"}'}
placeholder={
"{\n" +
' "type":"cheese",\n' +
' "_id": {\n' +
' "$oid":"646385ae462e929b7a3d86bc"\n' +
" }\n" +
"}"
}
/>
<InputEditor
title={t("editor.action.panel.mongodb.update")}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,14 @@ export const UpdateOnePart: FC<MongoDbActionPartProps> = (props) => {
style={{ height: "88px" }}
expectedType={VALIDATION_TYPES.STRING}
mode={CODE_LANG.JAVASCRIPT}
placeholder={'{"type":"cheese"}'}
placeholder={
"{\n" +
' "type":"cheese",\n' +
' "_id": {\n' +
' "$oid":"646385ae462e929b7a3d86bc"\n' +
" }\n" +
"}"
}
/>
<InputEditor
lineNumbers
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ const ColorPickerSetter: FC<ColorPickerSetterProps> = (props) => {
labelDesc,
handleUpdateMultiAttrDSL,
value,
defaultValue,
attrName,
labelSize = "small",
} = props
Expand All @@ -29,7 +30,7 @@ const ColorPickerSetter: FC<ColorPickerSetterProps> = (props) => {
/>
<ColorSetter
handleUpdateColor={handleUpdateBorderColor}
value={value}
value={value ?? defaultValue}
setterSize={labelSize}
/>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
export interface ColorPickerSetterProps {
value: string
defaultValue?: string
handleUpdateMultiAttrDSL?: (updateSlice: Record<string, any>) => void
attrName: string
labelName?: string
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
import { arrayMove } from "@dnd-kit/sortable"
import { get, isString } from "lodash"
import { FC } from "react"
import { useSelector } from "react-redux"
import { v4 } from "uuid"
import { Column } from "@/page/App/components/InspectPanel/PanelSetters/DragMoveComponent/Column"
import { ColumnContainer } from "@/page/App/components/InspectPanel/PanelSetters/DragMoveComponent/ColumnContainer"
import { ColumnEmpty } from "@/page/App/components/InspectPanel/PanelSetters/DragMoveComponent/Empty"
import { getExecutionResult } from "@/redux/currentApp/executionTree/executionSelector"
import { RootState } from "@/store"
import { ColumnButtonGroupSetterProps, GroupButton } from "./interface"

const ColumnButtonGroupSetter: FC<ColumnButtonGroupSetterProps> = (props) => {
const {
attrName,
handleUpdateMultiAttrDSL,
childrenSetter,
value,
widgetDisplayName,
} = props

const targetComponentProps = useSelector<RootState, Record<string, any>>(
(rootState) => {
const executionTree = getExecutionResult(rootState)
return get(executionTree, widgetDisplayName, {})
},
)

const executeValue: GroupButton[] =
get(targetComponentProps, attrName, undefined) ?? []

return (
<ColumnContainer
hideTitle
columnNum={value?.length ?? 0}
onClickNew={() => {
handleUpdateMultiAttrDSL?.({
[attrName]: [
...(value ?? []),
{
id: v4(),
mappedValue: "Button",
colorScheme: "blue",
disabled: false,
} as GroupButton,
],
})
}}
onDragEnd={(event) => {
if (value === undefined) {
return
}
const { active, over } = event
if (active && over && active.id !== over.id) {
const oldIndex = value.findIndex((item) => item.id === active.id)
const newIndex = value.findIndex((item) => item.id === over.id)
const finalColumns = arrayMove(value, oldIndex, newIndex)
handleUpdateMultiAttrDSL?.({
[attrName]: finalColumns,
})
return finalColumns
}
}}
items={value?.map((v) => v.id) ?? []}
>
{value && value.length > 0 ? (
value.map((v, index) => {
return (
<Column
key={v.id}
label={
isString(executeValue[index].mappedValue)
? executeValue[index].mappedValue
: JSON.stringify(executeValue[index].mappedValue)
}
showDelete={true}
showVisible={false}
attrPath={`${attrName}.${index}`}
childrenSetter={childrenSetter}
onDelete={(id) => {
const finalColumns = value.filter((item) => item.id !== id)
handleUpdateMultiAttrDSL?.({
[attrName]: finalColumns,
})
}}
id={v.id}
widgetDisplayName={widgetDisplayName}
/>
)
})
) : (
<ColumnEmpty />
)}
</ColumnContainer>
)
}

ColumnButtonGroupSetter.displayName = "ColumnButtonGroupSetter"

export default ColumnButtonGroupSetter
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { BaseSetter } from "@/page/App/components/InspectPanel/PanelSetters/interface"
import { PanelFieldConfig } from "@/page/App/components/InspectPanel/interface"

export interface ColumnButtonGroupSetterProps extends BaseSetter {
value?: GroupButton[]
childrenSetter?: PanelFieldConfig[]
}

export interface GroupButton {
id: string
mappedValue: string
disabled: boolean
colorScheme: string
}
Loading

0 comments on commit cac73c6

Please sign in to comment.