|
1 | | -#### COMPONENTS |
| 1 | +# COMPONENTS |
2 | 2 |
|
3 | | -1. Gantt |
| 3 | +## Gantt |
4 | 4 |
|
5 | | -# GanttBarComponent |
| 5 | +### GanttBarComponent |
6 | 6 |
|
7 | 7 | - The component is used to render the bars for the Gantt chart. It is generic and can be used with any type |
8 | 8 | of task value. The component contains properties and methods for rendering the bars and sub-allocations, formatting the allocation values, and translating labels using the `TranslationService` and `TranslateService`. |
9 | 9 |
|
10 | | -# GanttColumnComponent |
| 10 | +### GanttColumnComponent |
11 | 11 |
|
12 | 12 | - This Component is used to displays a single column of the Gantt chart. It has several input properties |
13 | 13 | like |
|
21 | 21 | - `contextItemFilter`: A function that takes a GanttTaskValue object as input and returns a boolean |
22 | 22 | indicating whether to display the context menu items for that task or not. |
23 | 23 |
|
24 | | -# GanttHeaderComponent |
| 24 | +### GanttHeaderComponent |
25 | 25 |
|
26 | 26 | - The component that represents the header of a Gantt chart. It has several inputs, including |
27 | 27 | `searchPlaceholder` string representing the placeholder text to be displayed in the search box and `showSearch` A boolean value indicating whether the search box should be displayed or not. |
28 | 28 |
|
29 | | -# GanttChartTooltipComponent |
| 29 | +### GanttChartTooltipComponent |
30 | 30 |
|
31 | 31 | - The component which is displayed when hovering over a Gantt chart bar.The tooltip displays information |
32 | 32 | about a SubAllocation object, including its start and end dates, allocation rate, and allocated hours per day. The SubAllocation object is passed to the component using the item input property.The component has methods for formatting the allocation rate and allocated hours per day values into readable strings |
33 | 33 |
|
34 | | -# Service: |
| 34 | +## Service: |
35 | 35 |
|
36 | | -1. GanttService |
| 36 | +### GanttService |
37 | 37 |
|
38 | 38 | - The GanttService class has several private properties, including ` _data`, `_overlays`, `_tooltipOverlay`, |
39 | 39 | `_eventHandlers` etc |
40 | 40 | - The render method takes an ElementRef representing the container containing options to configure the Gantt |
41 | 41 | chart. The method sets several properties such as the `row_height, bar_height, scale_height`, and readonly properties. It also sets up the layout of the Gantt chart and registers event handlers for task clicks and |
42 | 42 | grid header clicks. |
43 | 43 |
|
44 | | -2. Timeline-scale |
| 44 | +### Timeline-scale |
45 | 45 |
|
46 | 46 | - `MonthlyScaleService` : This is an service for generating a monthly scale for a Gantt chart It provides a configuration for displaying the Monthly timeline scale for a Gantt chart. The `config()` method, which returns an array of objects representing the different units in the timeline scale.The `GanttScaleService` interface defines a contract for a service that can be used to generate scale configurations for different timelines. The `MonthlyScaleService` class implements this interface by defining the scale property, which is set to Timelines.Monthly |
47 | 47 |
|
48 | 48 | - `QuarterlyScaleService` : This is an service for generating a quarterly scale for a Gantt chart. The service implements the `GanttScaleService` interface and provides a `config()` method that returns an array of scale configuration objects.The `QuarterlyScaleService` class has a scale property that is set to Timelines.Quarterly, indicating that this service generates a quarterly scale. |
49 | 49 |
|
50 | 50 | - `WeeklyScaleService` : This defines service called `WeeklyScaleService` which implements the `GanttScaleService` interface. The `GanttScaleService` interface defines the contract that all Gantt scale services must adhere to. The `WeeklyScaleService` service provides a configuration for a Gantt chart with a weekly timeline. The configuration includes an array of objects that specify the scale units, step size, and formatting for each unit.The `config()` method returns an array of two objects. The first object represents the weekly scale unit and formats the date using the `_formatWeeklyScale` private method. The second object represents the daily scale unit and formats the date using the `toLocaleString()` |
51 | 51 |
|
52 | | -# GanttModule |
| 52 | +### GanttModule |
53 | 53 |
|
54 | 54 | - This is an Angular module called GanttModule which declares and exports a components and Modules related to Gantt.The module also provides three different `GanttScaleService` implementations as providers using the GANTT_SCALES injection token: `MonthlyScaleService`, `WeeklyScaleService`, and `QuarterlyScaleService`as we discuss above |
55 | 55 |
|
56 | | -2. Resize |
| 56 | +## Resize |
57 | 57 |
|
58 | 58 | - The ResizeService provides reactive programming features in the application. |
59 | 59 | - `filter` allows filtering values emitted by an Observable based on a predicate function. |
|
64 | 64 | - we can say the ResizeService provides a convenient way to listen for and observe changes in the size of an |
65 | 65 | element in an Angular application. |
66 | 66 |
|
67 | | -3. Select |
68 | | - |
69 | | -# ListComponent: |
| 67 | +## ListComponent: |
70 | 68 |
|
71 | 69 | - This component implements the behavior of a search and select component. It has several methods, |
72 | 70 | the methods are creating a Set of removed items, assigning a copy of the options to the visibleList array, sorting the list by groups, and subscribing to changes in the value of a search control. |
|
75 | 73 | - It also retrieves the name of an item by getting the value of the name field of the item,removes an item |
76 | 74 | from the list and emits an event,method checks if an item is a placeholder item,selects the first item in the list if the user presses enter on the search box and there are items in the list and groups the visibleList array according to the groupConfig property. |
77 | 75 |
|
78 | | -# SelectComponent |
| 76 | +## Selector |
| 77 | + |
| 78 | +### SelectComponent |
79 | 79 |
|
80 | 80 | - The component is used to display a list of options that can be selected by the user. The selected options |
81 | 81 | can be displayed as tags. The component has various inputs and outputs |
|
86 | 86 | - The component emits several events, including added, removed, and cleared for changes to the selection |
87 | 87 | (s), and `newAdded` and `newRemoved` for changes to custom values entered by the user.It also provides a valueChange output for two-way binding of the selected value(s). |
88 | 88 |
|
89 | | -# TestComponent |
| 89 | +### TestComponent |
90 | 90 |
|
91 | 91 | - This component defines the behavior of a select dropdown in the UI.The options property is an array of |
92 | 92 | `NameIdRequired` objects that will be displayed as the available options in the dropdown. |
93 | 93 | - The multiple, allowInput, disabled, and search properties are boolean values that control various aspects |
94 | 94 | of the dropdown behavior. `multiple` specifies whether multiple options can be selected at once, `allowInput` specifies whether the user can input a custom option, `disabled` specifies whether the dropdown is disabled or not, and `search` specifies whether a search box is displayed to filter the options. |
95 | 95 |
|
96 | | -4. Auth |
| 96 | +## Auth |
97 | 97 |
|
98 | | -# Login Component: |
| 98 | +### Login Component: |
99 | 99 |
|
100 | 100 | - Login component allows users to authenticate themselves by entering their credentials, such as a username and password and also we can login with google. |
101 | 101 | - The login component typically includes a form with input fields for the user's credentials, as well as a submit button to initiate the login process also gives us option to login via google. |
102 | 102 | - The login component communicates with a backend server to verify the user's credentials and grant access to the application if the user is authorized. Upon successful authentication, the login component typically stores the user's session information, such as a token or cookie, to allow the user to access protected resources without having to login again. |
103 | 103 | - The component is a basically for an Angular login page with a Google login option |
104 | 104 | - The login component may also include features such as password reset, remember me functionality, and social login options. |
105 | 105 |
|
106 | | -# Auth Component: |
| 106 | +### Auth Component: |
107 | 107 |
|
108 | 108 | - Auth component is a module that handles the authentication and authorization of users. It is responsible |
109 | 109 | for managing user sessions, verifying user credentials, and granting access to protected resources based on the user's role and permissions. |
|
115 | 115 | the `@nebular/auth` package. This component is responsible for handling the authentication process in the Angular application. It is using dependency injection to inject the `NbAuthService` and `Location` dependencies into the component's constructor. |
116 | 116 |
|
117 | 117 |
|
118 | | - # Animations |
| 118 | + ### Animations |
119 | 119 |
|
120 | 120 | - These animations could be used to provide visual feedback when elements are added or removed fro DOM, |
121 | 121 | or to animate UI elements such as buttons or icons.and it also defines two Angular animations, dropdownAnimation and rotateAnimation. |
|
0 commit comments