Learn #Angular JS2 with Paras Mendiratta in 31 days — Day #11

Goal Editor

Goal Editor
For those who are coming first time to my this blog: We are building an online planner similar to Google Keep. You can see more details over here: Tutorial Series

Yesterday, we created the Goal model. GoalManager is displaying the goals. Allowing us to manage the priorities of goals. But to edit the goal and associated tasks, we need an editor. Let’s create one and call it GoalEditor.

We will creating editor module and associated components and files.

  1. Editor.module.ts
  2. Editor.component.ts
  3. Editor.template.html
  4. Editor.styles.css

[A] — Editor Module

Let’s create editor module. Why we are taking editor as module rather than as individual component? Well, right now we do planning to have only one component in this module but in near future we will be dividing the editor component into sub-components and that time we would like to use import single module rather than importing multiple modules.

This will help us to avoid importing/removing components from different modules. We just need to alter the editor module to add/remove components from it.

Editor module code is very simple and similar to other modules. Let’s import:-

  1. SDCommonModule — contains common module references
  2. PlannerModule — During editing goal, we will be displaying the planner also. User can drag & drop the tasks to planner.
  3. EditorComponent — Editor component needs to be declared and then exported for use.

See the code below for EditorModule

editor.module.ts

[B] — Editor Component

Next thing that we need to do is to define the Editor Component. We will be having one private boolean variable: showCompletedTasks = false Initially it will be set to false. This is needed to maintain that state that whether the completed tasks should be visible on the screen.

Apart from this we will having following functions:-

  • onTapped — Will be called when user taps on the screen.
  • onGoalEditorTapped — Will be called when user taps on GoalEditor
  • toggleShowCompletedTasks — Will be called when user taps on show/hide completed task button.

When user taps on show/hide completed task button then we need to do two things:

  1. Rotate the icon by 90 degree
  2. Show/Hide the task

See the code below for complete functionality:

editor.component.ts

[C] — Editor Template

Module and Component is ready, now let’s create template for our editor. Though explaining CSS and HTML is beyond the scope of this blog series but let’s me try to put the things into words…

Well we are dividing out editor into multiple layers:-

  1. Overlay Layer — which will actually hide the existing goals and planner
  2. Planner & Goal Layer

Goal Layer will further have:-

  1. Title
  2. Pending Task List
  3. Add New Task
  4. Show/Hide Completed Task
  5. Completed Task
  6. Footer

See the HTML code and stylesheet code shown below:-

editor.template.html

[D] — Editor Stylesheet

editor.styles.css

Well that’s all for today. As of now tasks are hard coded and there is no special thing in that. However, you can tap on show/hide completed task button and can see that it is working well. Tomorrow, we will focus on creating Task Model and enhancing Goal Editor to add new task and as well to manage existing tasks. You can download the code from given link.

Download Code for Day #11