liesislukas / prime_faces_react_todo_sample

A sample of ToDo application with FullCalendar component

A sample of the ToDo application with the FullCalendar component

This project is an example of the Single Page Web application with React components tailored for the Webcodesk

Specification

• Used libs: PrimeReact
• Search tags on the market: PrimeReact, To-Do_List, FullCalendar
• Url on the market: prime_faces_react_todo_sample
• Live demo: prime-faces-react-todo-sample.firebaseapp.com;

Open the project in Webcodesk:

• clone this project: git clone https://github.com/ipselon/prime_faces_react_todo_sample.git
• install dependencies in the project's directory: yarn install
• open project's directory in Webcodesk
• open project's source in the favorite IDE.

Read about how to open project's source in IDE in Documentation

How to use components in your project - building instruction

1. Run Webcodesk, create new JavaScript project, and open Market

2. Find Absolute_Layouts components: LeftSideSplitterLayout, RightSideSplitterLayout, TopToolbarLayout

3. Install each of them into layouts directory

4. Close Market and find installed components in the layouts dir.

5. Open Market again

6. Find ToDo_List components

7. Install each of them into todo directory

8. Close Market and find newly installed components

9. Double click on the main page

10. Open Structure in the page editor and drag and drop TopToolbarLayout to the root element on the page

11. Drag and drop LeftSideSplitterLayout to content, and ToDoMenuBar to top

12. Drag and drop ToDoList to left, and ToDoCalendar to right

13. Drag and drop ToDoAddDialog to addNewItemDialog, and click the Save button

14. Double click on the start flow, drag and drop initApplication into the flow editor, and connect Application with initApplication

15. Open the main page branch, drag and drop toDoCalendar and toDoList into the flow editor, and connect them with initApplication

16. Click on the plus icon. Create add_new_todo_item flow.

17. Drop toDoCalendar onto the Application element. Add startAddNewToDoItem, and two toDoAddDialog to the flow. Connect them all as shown on the picture.

18. Add stopAddNewToDoItem, and toDoAddDialog to the flow. Connect them.

19. Add addNewToDoItem, stopAddNewToDoItem, toDoAddDialog, toDoList, and toDoCalendar to the flow. Connect them all as shown on the picture.

20. Create new flow: toggle_todo_item

21. Set toDoList instead of Application (drop on it), then add toggleToDoItemDone, toDoCalendar, and again toDoList to the flow. Connect them all as shown on the picture.

22. Create new flow: delete_todo_item

23. Set toDoList instead of Application, then add deleteToDoItem, toDoCalendar, and again toDoList to the flow. Connect them all as shown on the picture.

24. Create new flow: select_todo_item_in_list

25. Set toDoList instead of Application, then add selectListItem, toDoCalendar, and again toDoList to the flow. Connect them all as shown on the picture.

26. Create new flow: select_todo_item_in_calendar

27. Set toDoCalendar instead of Application, then add selectCalendarEvent, toDoCalendar, and toDoList to the flow. Connect them all as shown on the picture.

28. Create new flow: change_todo_item_in_calendar

29. Set toDoCalendar instead of Application, then add changeCalendarEvent, toDoCalendar, and toDoList to the flow. Connect them all as shown on the picture.

30. Create new flow: toggle_filter_in_list

31. Set toDoList instead of Application, then add saveListFilter, getEvents, toDoCalendar, and two toDoList to the flow. Connect them all as shown on the picture.

31. Open Live Preview tab and play with the ToDo list and the FullCalendar.

32. You can build the application bundle from the command line. Go to the project's directory, and run in the command line following command:

 yarn build

After the build process is finished successfully, you can find the application bundle in the build folder.