/prime_faces_react_todo_sample

A sample of ToDo application with FullCalendar component

Primary LanguageJavaScript

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

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

  1. Find Absolute_Layouts components: LeftSideSplitterLayout, RightSideSplitterLayout, TopToolbarLayout

  1. Install each of them into layouts directory

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

  1. Open Market again

  1. Find ToDo_List components

  1. Install each of them into todo directory

  1. Close Market and find newly installed components

  1. Double click on the main page

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

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

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

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

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

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

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

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

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

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

  1. Create new flow: toggle_todo_item

  1. 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.

  1. Create new flow: delete_todo_item

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

  1. Create new flow: select_todo_item_in_list

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

  1. Create new flow: select_todo_item_in_calendar

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

  1. Create new flow: change_todo_item_in_calendar

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

  1. Create new flow: toggle_filter_in_list

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

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

  1. 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.