1+ import * as React from 'react' ;
2+ import ProjectItem from './project-item.component' ;
3+ import { getDefaultProjectEnums } from "../enums/default-project.enum" ;
4+ import { ProjectService } from "../services/project-service" ;
5+ import { debounce } from "lodash" ;
6+ import { LocalStorageService } from "../services/localStorage-service" ;
7+
8+ const projectService = new ProjectService ( ) ;
9+ const localStorageService = new LocalStorageService ( ) ;
10+ const pageSize = 50 ;
11+
12+ class ProjectList extends React . Component {
13+
14+ constructor ( props ) {
15+ super ( props ) ;
16+
17+ this . state = {
18+ isOpen : false ,
19+ selectedProject : {
20+ name : "Select default project" ,
21+ color : this . getColorForProject ( )
22+ } ,
23+ projectList :
24+ [ {
25+ name : 'Last used project' ,
26+ color : '#999999' ,
27+ tasks : [ ] ,
28+ id : getDefaultProjectEnums ( ) . LAST_USED_PROJECT
29+ } ] ,
30+ page : 1 ,
31+ ready : false ,
32+ loadMore : true ,
33+ title : '' ,
34+ filter : ''
35+ } ;
36+ this . filterProjects = debounce ( this . filterProjects , 500 ) ;
37+ }
38+
39+ componentDidMount ( ) {
40+ this . getProjects ( this . state . page , pageSize ) ;
41+ }
42+
43+ getProjects ( page , pageSize ) {
44+ if ( page === 1 ) {
45+ this . setState ( {
46+ projectList :[ {
47+ id : getDefaultProjectEnums ( ) . LAST_USED_PROJECT ,
48+ name : 'Last used project' ,
49+ color : '#999999' ,
50+ tasks : [ ]
51+ } ]
52+ } )
53+ }
54+ if ( ! JSON . parse ( localStorage . getItem ( 'offline' ) ) ) {
55+ projectService . getProjectsWithFilter ( this . state . filter , page , pageSize )
56+ . then ( response => {
57+ this . setState ( {
58+ projectList : this . state . projectList . concat ( response . data ) ,
59+ page : this . state . page + 1 ,
60+ ready : true
61+ } , ( ) => {
62+ if ( ! this . state . isOpen ) {
63+ this . mapSelectedProject ( ) ;
64+ }
65+ } ) ;
66+ } )
67+ . catch ( ( ) => {
68+ } ) ;
69+ } else {
70+ this . setState ( {
71+ ready : true
72+ } )
73+ }
74+ }
75+
76+ mapSelectedProject ( ) {
77+ const selectedProject = this . props . selectedProject === 'lastUsedProject' ?
78+ {
79+ name : 'Last used project' ,
80+ color : '#999999' ,
81+ tasks : [ ] ,
82+ id : getDefaultProjectEnums ( ) . LAST_USED_PROJECT
83+ } :
84+ this . state . projectList . filter ( p => p . id === this . props . selectedProject ) [ 0 ] ;
85+
86+ if ( this . props . selectedProject && selectedProject ) {
87+ this . setState ( {
88+ selectedProject : selectedProject
89+ } , ( ) => {
90+ this . setState ( {
91+ title : this . createTitle ( )
92+ } ) ;
93+ } )
94+ } else {
95+ if ( this . props . selectedProject ) {
96+ const projectIds = [ ] ;
97+ projectIds . push ( this . props . selectedProject ) ;
98+ projectService . getProjectsByIds ( projectIds ) . then ( response => {
99+ if ( response . data . length > 0 && ! response . data [ 0 ] . archived ) {
100+ this . setState ( {
101+ selectedProject : response . data [ 0 ]
102+ } , ( ) => {
103+ this . setState ( {
104+ title : this . createTitle ( )
105+ } ) ;
106+ } ) ;
107+ }
108+ } ) ;
109+ } else {
110+ this . setState ( {
111+ selectedProject : {
112+ name : 'Select default project' ,
113+ color : this . getColorForProject ( )
114+ }
115+ } , ( ) => {
116+ this . setState ( {
117+ title : this . createTitle ( )
118+ } ) ;
119+ } ) ;
120+ }
121+ }
122+ }
123+
124+ selectProject ( project ) {
125+ this . props . selectProject ( project ) ;
126+
127+ this . setState ( {
128+ selectedProject : project ,
129+ isOpen : false
130+ } , ( ) => this . setState ( {
131+ title : this . createTitle ( )
132+ } )
133+ ) ;
134+ }
135+
136+ openProjectDropdown ( ) {
137+ if ( ! JSON . parse ( localStorage . getItem ( 'offline' ) ) ) {
138+ this . setState ( {
139+ isOpen : true ,
140+ page : 1
141+ } , ( ) => {
142+ document . getElementById ( 'project-filter' ) . focus ( ) ;
143+ this . props . projectListOpened ( ) ;
144+ } ) ;
145+ }
146+ }
147+
148+ closeProjectList ( ) {
149+ document . getElementById ( 'project-dropdown' ) . scroll ( 0 , 0 ) ;
150+ this . setState ( {
151+ isOpen : false ,
152+ page : 1 ,
153+ filter : ''
154+ } , ( ) => {
155+ document . getElementById ( 'project-filter' ) . value = "" ;
156+ this . getProjects ( this . state . page , pageSize ) ;
157+ } ) ;
158+ }
159+
160+ filterProjects ( ) {
161+ this . setState ( {
162+ projectList : [ {
163+ name : 'Last used project' ,
164+ color : '#999999' ,
165+ tasks : [ ] ,
166+ id : getDefaultProjectEnums ( ) . LAST_USED_PROJECT
167+ } ] ,
168+ filter : document . getElementById ( 'project-filter' ) . value . toLowerCase ( ) ,
169+ page : 1
170+ } , ( ) => {
171+ this . getProjects ( this . state . page , pageSize ) ;
172+ } ) ;
173+ }
174+
175+ loadMoreProjects ( ) {
176+ this . getProjects ( this . state . page , pageSize ) ;
177+ }
178+
179+ createTitle ( ) {
180+ let title = 'Select default project' ;
181+ if ( this . state . selectedProject && this . state . selectedProject . id ) {
182+ title = 'Project: ' + this . state . selectedProject . name ;
183+ }
184+
185+ return title ;
186+ }
187+
188+ clearProjectFilter ( ) {
189+ this . setState ( {
190+ projectList :
191+ [ {
192+ name : 'Last used project' ,
193+ color : '#999999' ,
194+ tasks : [ ] ,
195+ id : getDefaultProjectEnums ( ) . LAST_USED_PROJECT
196+ } ] ,
197+ filter : '' ,
198+ page : 1
199+ } , ( ) => {
200+ this . getProjects ( this . state . page , pageSize ) ;
201+ document . getElementById ( 'project-filter' ) . value = null
202+ } ) ;
203+ }
204+
205+ getColorForProject ( ) {
206+ const userId = localStorageService . get ( 'userId' ) ;
207+ const darkModeFromStorage = localStorageService . get ( 'darkMode' ) ?
208+ JSON . parse ( localStorageService . get ( 'darkMode' ) ) : [ ] ;
209+
210+ if ( darkModeFromStorage . length > 0 &&
211+ darkModeFromStorage . filter ( darkMode => darkMode . userId === userId && darkMode . enabled ) . length > 0
212+ ) {
213+ return '#90A4AE' ;
214+ } else {
215+ return '#999999' ;
216+ }
217+ }
218+
219+ render ( ) {
220+ if ( ! this . state . ready ) {
221+ return null ;
222+ } else {
223+ return (
224+ < div className = "projects-list"
225+ title = { this . state . title } >
226+ < div onClick = { this . openProjectDropdown . bind ( this ) }
227+ className = { JSON . parse ( localStorage . getItem ( 'offline' ) ) ?
228+ "project-list-button-offline" : "project-list-button" } >
229+ < span style = { { color : this . state . selectedProject ? this . state . selectedProject . color : "#999999" } }
230+ className = "project-list-name" >
231+ { this . state . selectedProject ? this . state . selectedProject . name : "Select default project" }
232+ </ span >
233+ < span className = "project-list-arrow" >
234+ </ span >
235+ </ div >
236+ < div className = { this . state . isOpen ? "project-list-open" : "disabled" } >
237+ < div onClick = { this . closeProjectList . bind ( this ) } className = "invisible" > </ div >
238+ < div className = "project-list-dropdown"
239+ id = "project-dropdown" >
240+ < div className = "project-list-dropdown--content" >
241+ < div className = "project-list-input" >
242+ < div className = "project-list-input--border" >
243+ < input
244+ placeholder = { "Filter projects" }
245+ className = "project-list-filter"
246+ onChange = { this . filterProjects . bind ( this ) }
247+ id = "project-filter"
248+ />
249+ < span className = { ! ! this . state . filter ? "project-list-filter__clear" : "disabled" }
250+ onClick = { this . clearProjectFilter . bind ( this ) } > </ span >
251+ </ div >
252+ </ div >
253+ {
254+ this . state . projectList . map ( project => {
255+ return (
256+ < ProjectItem
257+ project = { project }
258+ noTasks = { true }
259+ selectProject = { this . selectProject . bind ( this ) }
260+ workspaceSettings = { this . props . workspaceSettings }
261+ isUserOwnerOrAdmin = { this . props . isUserOwnerOrAdmin }
262+ />
263+ )
264+ } )
265+ }
266+ < div className = { this . state . loadMore ? "project-list-load" : "disabled" }
267+ onClick = { this . loadMoreProjects . bind ( this ) } > Load more
268+ </ div >
269+ </ div >
270+ </ div >
271+ </ div >
272+ </ div >
273+ )
274+ }
275+ }
276+ }
277+
278+ export default ProjectList ;
0 commit comments