11import CreateAppButton from "components/CreateAppButton" ;
22import { EmptyContent } from "components/EmptyContent" ;
3- import { ApplicationMeta , AppTypeEnum , FolderMeta } from "constants/applicationConstants" ;
3+ import { ApplicationMeta , AppTypeEnum } from "constants/applicationConstants" ;
44import { APPLICATION_VIEW_URL } from "constants/routesURL" ;
55import {
6- ActiveTextColor ,
7- BorderActiveShadowColor ,
8- BorderColor ,
9- GreyTextColor ,
6+ ActiveTextColor ,
7+ BorderActiveShadowColor ,
8+ BorderColor ,
9+ GreyTextColor ,
1010} from "constants/style" ;
11- import { FolderIcon , ModuleDocIcon } from "lowcoder-design" ;
11+ import { ModuleDocIcon } from "lowcoder-design" ;
1212import { trans } from "i18n" ;
1313import { draggingUtils } from "layout/draggingUtils" ;
14- import { useContext , useEffect , useState } from "react" ;
14+ import { useContext , useEffect } from "react" ;
1515import { useDispatch , useSelector } from "react-redux" ;
1616import { fetchAllModules } from "redux/reduxActions/applicationActions" ;
1717import styled from "styled-components" ;
@@ -21,259 +21,136 @@ import { formatTimestamp } from "util/dateTimeUtils";
2121import { RightContext } from "./rightContext" ;
2222import { modulesSelector } from "../../../redux/selectors/applicationSelector" ;
2323import { ComListTitle , ExtensionContentWrapper } from "./styledComponent" ;
24- import { foldersSelector } from "@lowcoder-ee/redux/selectors/folderSelector" ;
2524
2625const ItemWrapper = styled . div `
27- display: flex;
28- flex-direction: row;
29- margin-bottom: 12px;
30- &:last-child {
31- margin-bottom: 0;
32- }
33- &:hover {
34- cursor: grab;
26+ display: flex;
27+ flex-direction: row;
28+ margin-bottom: 12px;
29+ &:last-child {
30+ margin-bottom: 0;
31+ }
32+ &:hover {
33+ cursor: grab;
34+ .module-icon {
35+ box-shadow: 0 0 5px 0 rgba(49, 94, 251, 0.15);
36+ border-color:${ BorderActiveShadowColor }
37+ transform: scale(1.2);
38+ }
39+ .module-name {
40+ color:${ ActiveTextColor }
41+ }
42+ }
3543 .module-icon {
36- box-shadow: 0 0 5px 0 rgba(49, 94, 251, 0.15);
37- border-color:${ BorderActiveShadowColor }
38- transform: scale(1.2);
44+ transition: all 200ms linear;
45+ margin-right: 8px;
46+ width: 40px;
47+ height: 40px;
48+ display: flex;
49+ justify-content: center;
50+ align-items: center;
51+ border: 1px solid${ BorderColor }
52+ border-radius: 4px;
53+ }
54+ .module-content {
55+ flex: 1;
56+ display: flex;
57+ flex-direction: column;
58+ justify-content: space-around;
59+ overflow: hidden;
3960 }
4061 .module-name {
41- color:${ ActiveTextColor }
62+ line-height: 1.5;
63+ font-size: 13px;
64+ overflow: hidden;
65+ white-space: nowrap;
66+ text-overflow: ellipsis;
4267 }
43- }
44- .module-icon {
45- transition: all 200ms linear;
46- margin-right: 8px;
47- width: 40px;
48- height: 40px;
49- display: flex;
50- justify-content: center;
51- align-items: center;
52- border: 1px solid${ BorderColor }
53- border-radius: 4px;
54- }
55- .module-content {
56- flex: 1;
57- display: flex;
58- flex-direction: column;
59- justify-content: space-around;
60- overflow: hidden;
61- }
62- .module-name {
63- line-height: 1.5;
64- font-size: 13px;
65- overflow: hidden;
66- white-space: nowrap;
67- text-overflow: ellipsis;
68- }
69- .module-desc {
70- line-height: 1.5;
71- font-size: 12px;
72- color:${ GreyTextColor }
73- }
74- ` ;
75-
76- const FolderWrapper = styled . div `
77- display: flex;
78- flex-direction: row;
79- margin-bottom: 12px;
80- &:last-child {
81- margin-bottom: 0;
82- }
83- &:hover {
84- box-shadow: 0 0 5px 0 rgba(49, 94, 251, 0.15);
85- border-color:${ BorderActiveShadowColor }
86- cursor: pointer;
87- transform: scale(1.03);
88- .folder-name {
89- color:${ ActiveTextColor }
68+ .module-desc {
69+ line-height: 1.5;
70+ font-size: 12px;
71+ color:${ GreyTextColor }
9072 }
91- }
92- .folder-icon {
93- transition: all 200ms linear;
94- margin-right: 8px;
95- width: 40px;
96- height: 40px;
97- display: flex;
98- justify-content: center;
99- align-items: center;
100- border-radius: 4px;
101- }
102- .folder-content {
103- flex: 1;
104- display: flex;
105- flex-direction: column;
106- justify-content: space-around;
107- overflow: hidden;
108- }
109- .folder-name {
110- line-height: 1.5;
111- font-size: 13px;
112- overflow: hidden;
113- white-space: nowrap;
114- text-overflow: ellipsis;
115- }
116- .folder-desc {
117- line-height: 1.5;
118- font-size: 12px;
119- color:${ GreyTextColor }
120- }
12173` ;
12274
12375interface ModuleItemProps {
124- meta :ApplicationMeta ;
125- onDrag :( type :string ) => void ;
126- }
127-
128- interface FolderItemProps {
129- meta :FolderMeta ;
76+ meta :ApplicationMeta ;
77+ onDrag :( type :string ) => void ;
13078}
13179
13280function ModuleItem ( props :ModuleItemProps ) {
133- const compType = "module" ;
134- const { meta} = props ;
135- return (
136- < ItemWrapper
137- draggable
138- onDragStart = { ( e ) => {
139- e . dataTransfer . setData ( "compType" , compType ) ;
140- e . dataTransfer . setDragImage ( TransparentImg , 0 , 0 ) ;
141- draggingUtils . setData ( "compType" , compType ) ;
142- draggingUtils . setData (
143- "compLayout" ,
144- meta . containerSize
145- ?{ w :meta . containerSize . width , h :meta . containerSize . height }
146- :undefined
147- ) ;
148- draggingUtils . setData ( "compInitialValue" , {
149- appId :props . meta . applicationId ,
150- } ) ;
151- props . onDrag ( compType ) ;
152- } }
153- >
154- < div className = "module-icon" >
155- < ModuleDocIcon width = "19px" />
156- </ div >
157- < div className = "module-content" >
158- < div className = "module-name" > { props . meta . name } </ div >
159- < div className = "module-desc" > { formatTimestamp ( props . meta . createAt ) } </ div >
160- </ div >
161- </ ItemWrapper >
162- ) ;
81+ const compType = "module" ;
82+ const { meta} = props ;
83+ return (
84+ < ItemWrapper
85+ draggable
86+ onDragStart = { ( e ) => {
87+ e . dataTransfer . setData ( "compType" , compType ) ;
88+ e . dataTransfer . setDragImage ( TransparentImg , 0 , 0 ) ;
89+ draggingUtils . setData ( "compType" , compType ) ;
90+ draggingUtils . setData (
91+ "compLayout" ,
92+ meta . containerSize
93+ { w :meta . containerSize . width , h :meta . containerSize . height }
94+ undefined
95+ ) ;
96+ draggingUtils . setData ( "compInitialValue" , {
97+ appId :props . meta . applicationId ,
98+ } ) ;
99+ props . onDrag ( compType ) ;
100+ } }
101+ >
102+ < div className = "module-icon" >
103+ < ModuleDocIcon width = "19px" />
104+ </ div >
105+ < div className = "module-content" >
106+ < div className = "module-name" > { props . meta . name } </ div >
107+ < div className = "module-desc" > { formatTimestamp ( props . meta . createAt ) } </ div >
108+ </ div >
109+ </ ItemWrapper >
110+ ) ;
163111}
164112
165113export default function ModulePanel ( ) {
166- const dispatch = useDispatch ( ) ;
167- const modules = useSelector ( modulesSelector ) ;
168- const folders = useSelector ( foldersSelector ) ;
169- const { onDrag, searchValue} = useContext ( RightContext ) ;
170- const { applicationId} = useContext ( ExternalEditorContext ) ;
171- const [ isSubItems , setIsSubItems ] = useState ( false ) ;
172- // const [subApplications : ApplicationMeta[], setSubApplications] = useState([]);
173- const [ subModuleApp , setSubModuleApp ] = useState < ApplicationMeta [ ] > ( [ ] ) ;
174-
175- const appArray = ( ) => {
176- const appIdArray :any [ ] = [ ] ;
177- folders . map ( i => ( i . subApplications ?. map ( p => ( appIdArray . push ( p . applicationId ) ) ) ) )
178- return appIdArray ;
179- }
180- function FolderItem ( props :FolderItemProps ) {
181- const { meta} = props ;
182-
183- const handleClick = ( ) => {
184- setIsSubItems ( true ) ;
185- setSubModuleApp ( meta . subApplications || [ ] ) ;
186- console . log ( meta . subApplications ) ;
187- } ;
188- return (
189- < FolderWrapper onClick = { handleClick } >
190- < div className = "folder-icon" >
191- < FolderIcon width = "35px" />
192- </ div >
193- < div className = "folder-content" >
194- < div className = "folder-name" > { meta . name } </ div >
195- </ div >
196- </ FolderWrapper >
197- ) ;
198- }
199-
200-
201- const appIdArray = appArray ( ) ;
202-
203- useEffect ( ( ) => {
204- dispatch ( fetchAllModules ( { } ) ) ;
205- } , [ dispatch ] ) ;
206-
207- const filteredModules = modules . filter ( ( i ) => {
208- if ( appIdArray . includes ( i . applicationId ) )
209- return false ;
210- if ( i . applicationId === applicationId || i . applicationType !== AppTypeEnum . Module ) {
211- return false ;
212- }
213- return i . name ?. toLowerCase ( ) ?. includes ( searchValue . trim ( ) ?. toLowerCase ( ) ) || ! searchValue ?. trim ( ) ;
214- } ) ;
215-
216- const subModules = ( apps :ApplicationMeta [ ] | undefined ) => apps ?. filter ( ( i ) => {
217- if ( i . applicationId === applicationId || i . applicationType !== AppTypeEnum . Module ) {
218- return false ;
219- }
220- return i . name ?. toLowerCase ( ) ?. includes ( searchValue . trim ( ) ?. toLowerCase ( ) ) || ! searchValue ?. trim ( ) ;
221- } ) ;
222-
223-
224- //@ts -ignore
225- const subItems = subModules ( subModuleApp ) . map ( ( i ) => (
226- < ModuleItem onDrag = { onDrag } key = { i . applicationId } meta = { i } />
227- ) ) ;
228-
229- const items = filteredModules . map ( ( i ) => (
230- < ModuleItem onDrag = { onDrag } key = { i . applicationId } meta = { i } />
231- ) ) ;
232-
233- const folderItems = folders . map ( ( i ) => {
234- return < FolderItem key = { i . folderId } meta = { i } />
235- } ) ;
236- const empty = (
237- < EmptyContent
238- text = {
114+ const dispatch = useDispatch ( ) ;
115+ const modules = useSelector ( modulesSelector ) ;
116+ const { onDrag, searchValue} = useContext ( RightContext ) ;
117+ const { applicationId} = useContext ( ExternalEditorContext ) ;
118+
119+ useEffect ( ( ) => {
120+ dispatch ( fetchAllModules ( { } ) ) ;
121+ } , [ dispatch ] ) ;
122+
123+ const filteredModules = modules . filter ( ( i ) => {
124+ if ( i . applicationId === applicationId || i . applicationType !== AppTypeEnum . Module ) {
125+ return false ;
126+ }
127+ return i . name ?. toLowerCase ( ) ?. includes ( searchValue . trim ( ) ?. toLowerCase ( ) ) || ! searchValue ?. trim ( ) ;
128+ } ) ;
129+
130+ const items = filteredModules . map ( ( i ) => (
131+ < ModuleItem onDrag = { onDrag } key = { i . applicationId } meta = { i } />
132+ ) ) ;
133+ const empty = (
134+ < EmptyContent
135+ text = {
136+ < >
137+ < p > { trans ( "rightPanel.emptyModules" ) } </ p >
138+ < CreateAppButton
139+ type = { AppTypeEnum . Module }
140+ onSuccess = { ( app ) => {
141+ const appId = app . applicationInfoView . applicationId ;
142+ const url = APPLICATION_VIEW_URL ( appId , "edit" ) ;
143+ window . open ( url ) ;
144+ } }
145+ />
146+ </ >
147+ }
148+ />
149+ ) ;
150+ return (
239151< >
240- < p > { trans ( "rightPanel.emptyModules" ) } </ p >
241- < CreateAppButton
242- type = { AppTypeEnum . Module }
243- onSuccess = { ( app ) => {
244- const appId = app . applicationInfoView . applicationId ;
245- const url = APPLICATION_VIEW_URL ( appId , "edit" ) ;
246- window . open ( url ) ;
247- } }
248- />
249- </ >
250- }
251- />
252- ) ;
253- return (
254- < >
255- {
256- isSubItems ?< >
257- < ComListTitle > { trans ( "rightPanel.moduleListTitle" ) } </ ComListTitle >
258- < FolderWrapper onClick = { ( ) => ( setIsSubItems ( false ) ) } >
259- < div className = "folder-icon" >
260- < FolderIcon width = "35px" />
261- </ div >
262- < div className = "folder-content" >
263- < div className = "folder-name" > . . .</ div >
264- </ div >
265- </ FolderWrapper >
266- < ExtensionContentWrapper > { subItems . length > 0 ?subItems :null } </ ExtensionContentWrapper >
267- </ > :
268- < ExtensionContentWrapper >
269- { folderItems . length > 0 ?< >
270- < ComListTitle > { trans ( "rightPanel.folderListTitle" ) } </ ComListTitle >
271- { folderItems }
272- </ > :null }
273152< ComListTitle > { trans ( "rightPanel.moduleListTitle" ) } </ ComListTitle >
274- { items . length > 0 ?items :empty }
275- </ ExtensionContentWrapper >
276- }
277- </ >
278- ) ;
153+ < ExtensionContentWrapper > { items . length > 0 ?items :empty } </ ExtensionContentWrapper >
154+ </ >
155+ ) ;
279156}