-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathTODO
490 lines (417 loc) · 45 KB
/
TODO
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
// C:\Windows\System32\cmd.exe /k "C:\Program Files\nodejs\nodevars.bat" // To start from VSC terminal node env
// `ng test --sourceMap=false` // To get the right error messages while testing the app (in NG6+)
// Initial example: http://todomvc.com/examples/angularjs/#/
// To push changes on githubpages
// ng build --prod --base-href "https://Cl3r1k.github.io/angular-to-do-app/"
// angular-cli-ghpages --repo=https://github.com/Cl3r1k/angular-to-do-app.git --name=Cl3r1k --email=cl3r1k2@gmail.com --no-silent
// Colors for modules: tests - `Teal`, components - `Cadetblue`, services - `Salmon`, resolvers - `Royalblue`, pipes - `Purple`
Commit message:
Todos:
New:
Current:
☐ Change UI to prototype view <========================================================= CURRENT TASK
☐ Change 'Header' (Should be like [AppName---Updgrade---------------------------------SyncState---SyncIcon---ProfileMenu])
☐ 'Onhover' on 'AppName' should show current build
☐ Add component 'CurrentTodoComponent'
☐ Reorganize 'MainContent' part, where view should be like [PomoList-----TodoList]
☐ Add component 'StatsComponent'
☐ Change 'Footer' (Should be like [©AppName---LanguageBox---ThemeSwitcher---------------------------------Pro Applications Help Developer Press Terms])
✔ Add tags support (for example #tagName) @done(18-08-05 09:17)
✔ In 'todo Title' show tags as blocks with colors @done(18-07-22 09:48)
✔ Colors for tags should be random, but for the same tag is the same color (tags should be stored in DB with color) @done(18-07-22 09:48)
☐ Add possibility to change #hashtag color (by right click on tag)
✔ Rewrite part with tag list @done(18-07-21 09:51)
✔ Fill tags array in 'TagService' when list of todo is loaded @done(18-06-04 10:19)
✔ Use tags array from 'TagService' in 'ParseTagPipe' when todo showed @done(18-06-05 09:39)
✔ Update tags array in 'TagService', when todo added/updated/deleted @done(18-06-05 10:30)
✔ Add logic to check if tag is not in use anymore (not todos with the tag - check all todos in delete/update and process in 'parseTag()'), then marked as ready to delete @done(18-06-09 09:54)
✔ Update 'clearCompleted()' with new logic with #hashtags (e.g. check if tag is not in use anymore, then marked as ready to delete) @done(18-07-21 09:49)
✔ Use 'cleanHashtags()' method in 'clearCompleted()' @done(18-07-21 09:49)
✔ Fix tags when they deleted in IndexedDb directly @done(18-06-11 10:23)
✔ Fix add new todo with tag @done(18-07-21 09:51)
✔ Fix add new todo with tag and after page refresh color is different (if page updated immediately) @done(18-07-22 09:12)
✔ Add transparency to hashtags background-color @done(18-07-21 10:22)
✔ Use proper colors for tagBlock in header @done(18-07-22 09:44)
✔ Click on tag should add 'tag-block' to 'header' and filter list @done(18-05-23 10:05)
✔ Fix filtering with similar tags (example #tagged1 and #tagged) @done(18-07-23 10:27)
✔ Fix filter, when app reload page with filtered route -> #hashtags are not from IndexedDb @done(18-07-23 09:44)
✔ Check filter with tag #another (if the tag placed in the beginning of title) @done(18-07-23 09:27)
✔ Add URL support in 'todo Title' @done(18-05-23 10:06)
✔ Consider to not show filter route (e.g. use { skipLocationChange: false } in navigate) @done(18-08-02 10:15)
✔ Now 'getTodosWithHashtag()' is redundant @done(18-05-27 09:08)
✔ Fix bug when #hashtag title changed, in db old tag not marked as 'readyToDelete' (add tag and change name multiple times adding some num at end) @done(18-08-11 10:01)
✔ Add tooltip for #hashtag ('Click on tag to filter') @done(18-08-31 10:12)
✔ Fix click on #hashtag when tooltip showed (the issue -> if click on it, tooltip not hides) @done(18-08-31 10:12)
☐ Fix color for tag when direct link for list of todo used (for example paste http://localhost:4200/todos/active and go -> color for #hashtag not from base) (Delayed for some time - possibly won't be necessarily, after changed some part with All/Active/Completed)
✔ Write tests for 'Utils' class @done(18-07-24 10:42)
✔ Write tests for 'Tag' model @done(18-07-24 10:54)
✔ Write tests for 'ParseTagPipe' @done(18-07-26 10:11)
✔ Write tests for 'SafePipe' @done(18-07-27 09:29)
✔ Write tests for 'FilterTagPipe' @done(18-07-27 09:42)
✔ Write tests for 'DynamicContentDirective' @done(18-08-02 09:48)
✔ Update all broken tests @done(18-07-31 10:29)
✔ Rewrite part with resolvers, and return from resolver Object/Class like {activeRouteState, params, todos} @done(18-05-26 11:00)
✔ Update styles for 'completed-todos' span (hover and active looks not proper - inactive?) @done(18-08-05 09:18)
✔ Update CLI to version 6 (look here `https://blog.codewithdan.com/2018/05/03/upgrading-an-application-to-angular-6-step-by-step/?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more`) @done(18-08-07 10:16)
✔ And here `https://habr.com/company/ispsystem/blog/358696/` @done(18-08-07 10:16)
✔ Use `https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md` @done(18-08-07 10:16)
✔ Observable.throw replace by the throwError() function. (`https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md#dep-methods`) @done(18-08-07 10:16)
✔ Use `https://github.com/reactivex/rxjs-tslint` @done(18-08-07 10:16)
✔ Use `https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md#deprecations` @done(18-08-07 10:16)
✔ Bug -> When todo edited and click on trash icon -> just edit canceled @done(18-08-08 10:17)
✔ Update test with new blur behaviour for 'TodoListItemEditComponent' @done(18-08-14 09:59)
✔ Fix dialog message when todo deletes (Are you sure want to delete todo with name: 0???) @done(18-08-08 10:25)
✔ Consider idea for links like in VS code (ctrl click on link, hint for link, and underline for link) @done(18-09-04 09:24)
✔ Styles for link (underline, color) (and pointer should be showed if Ctrl is pressed) @done(18-08-14 09:09)
✔ Update tests for 'TodoListItemViewComponent' @done(18-08-14 09:55)
✔ Ctrl + click on link to follow the link @done(18-08-15 12:00)
✔ Hint for link (hint message 'Ctrl + click to follow link') @done(18-08-31 10:15)
☐ Use Chrome Audit to test the app (and check for error when cancel running process)
✔ Use other type of tooltip (material not looks good) @done(18-09-15 09:34)
✔ Add delay for popups (use another lib for popups, not material) @done(18-09-07 09:44)
✔ Fix color for triangle (a little darker than other part of tooltip) @done(18-08-18 09:14)
✔ Fix - ERROR TypeError: Cannot read property 'parentNode' of null @done(18-08-25 10:17)
✔ Find the way to use 'appTooltipDirective' with 'innerHTML' (look at 'DynamicContentDirective') @done(18-08-29 09:33)
✔ Fix issue, when tooltip showed, and more on it and move to other line now hides @done(18-08-29 10:07)
✔ Fix tooltip when UI changed (for example pin/unpin todo when tooltip showed) @done(18-09-04 09:16)
✔ And another example -> when tooltip showed, and add new item in list @done(18-09-04 09:16)
✔ Change all tooltips from 'matTooltip' to 'appTooltipDirective' @done(18-09-04 09:34)
✔ Fix hiden tooltip for 'Add' todo button (probably add new 'disabled' state to 'TooltipDirective') @done(18-09-05 09:40)
✔ Look at Discord tooltip (Not applicable) @done(18-09-08 09:15)
✔ Add delay for show tooltip in 'TooltipDirective' @done(18-09-13 10:37)
✔ Fix issue when tooltip still appears when unhovered already @done(18-09-14 10:46)
✔ Change 'delay' member in 'TooltipDirective' and 'DynamicContentDirective' to property 'delayAnimation' and set as default value - 500 @done(18-09-14 11:01)
✔ Delete 'delay' prop in html templates @done(18-09-14 11:01)
✔ Replace all members to properties in 'TooltipDirective' @done(18-09-15 09:17)
✔ Refactor variables in 'TooltipDirective' @done(18-09-15 09:17)
✔ Add delay for show tooltip in 'DynamicContentDirective' @done(18-09-15 09:33)
✔ Refactor 'DynamicContentDirective' like 'TooltipDirective' @done(18-09-15 09:33)
☐ Use tooltip behaviour idea like in `http://crystalui.org/components/tooltip` (e.g. if quickly hover and out - tooltip should stay) (Delayed for some time)
☐ Fix fast multiple mouseenter events (for example if you move cursor fast on element, then away and again on it tooltip now showed) (Delayed for some time)
☐ Fix tooltip position (not centered) (grid styles (sticky footer) <-- The cause of wrong tooltip position) (Delayed for some time)
☐ After fix position remove all 'matTooltip' (only on left in todo-list-item-view.component.html for fixing position purpose)
✔ Update tests for 'DynamicContentDirective' @done(18-09-12 10:26)
✔ Write tests for 'TooltipDirective' @done(18-09-12 10:26)
✔ Update 'concurrently' to latest version (4.0.1) @done(18-09-16 09:35)
✔ After implementation authentication -> update patch version (to 1.4.5) @done(18-11-09 10:18)
✔ Switch off debugging styles and update Demo on GH-Pages @done(18-11-09 10:17)
✔ Fix errors 'Property 'data' does not exist on type 'string'' on --prod mode @done(18-11-10 09:25)
✔ Add additional condition in 'SignInComponent' (tst|tst -> shouldn't use json-server and bypass it for GH-Pages) @done(18-11-11 09:43)
✔ Deploy updated build on GH-Pages @done(18-11-11 10:19)
✔ Complete 'Part 5 — Add authentication to protect private content' from `sitepoint.com` @done(18-10-01 09:08)
✔ Fix button.sign-out-button styles with grids @done(18-10-01 09:34)
✔ Fix msg '[DOM] Input elements should have autocomplete attributes (suggested: "current-password"): (More info: https://goo.gl/9p2vKq)' @done(18-10-01 09:42)
✔ Move styles from 'sign-in.component.scss' to '_sign-in.scss' @done(18-10-02 09:26)
✔ The session data is lost when the browser refreshes the page (use sessionStorage or localStorage or consider cookies as a solution) @done(18-10-22 10:07)
✔ Use localStorage (example `https://github.com/gothinkster/angular-realworld-example-app/blob/master/src/app/core/services/user.service.ts#L41`) @done(18-10-22 10:07)
✔ Add 'JwtService' @done(18-10-19 10:02)
✔ Update test for 'JwtService' @done(18-10-24 09:47)
✔ Update test for 'AuthService' @done(18-10-25 10:29)
✔ Update test for 'SessionStorageService' @done(18-10-26 09:40)
✔ Update test for 'SignInComponent' @done(18-10-28 09:54)
✔ Add protection (look here `https://blog.thoughtram.io/angular/2016/07/18/guards-in-angular-2.html`) @done(18-10-08 09:35)
✔ Update broken tests @done(18-10-12 09:52)
✔ Update tests for 'CanActivateTodosGuard' @done(18-10-11 10:06)
✔ Update tests for 'AppComponent' (look here `https://angular.io/guide/testing#components-with-routerlink`) @done(18-10-12 09:21)
✔ Update tests for 'SignInComponent' @done(18-10-12 09:53)
✔ Look example in 'angular-realworld-example-app' on GH ( `https://github.com/gothinkster/angular-realworld-example-app` ) @done(18-10-19 09:20)
✔ Test, can we use their api to get users data? (`https://conduit.productionready.io/api/users/login`) - Nope @done(18-10-17 10:05)
✔ Check `https://angular.realworld.io/profile/Cl3r1k` what kind of data fetched for 'My Posts' @done(18-10-19 09:20)
☐ User firebase as backend? (`https://www.sitepoint.com/authenticating-firebase-angular-auth0-1/`)
☐ And for GH pages (example here `https://medium.com/pan-labs/dynamic-web-apps-on-github-pages-for-free-ffac2b776d45`)
✔ Complete 'Part 6 — How to Update Angular Projects to the latest version' from `sitepoint.com` @done(18-10-09 10:41)
✔ Update CLI to lastest version (6.1.9) @done(18-10-10 10:15)
✔ Fix 'high severity security vulnerability detected in cryptiles' @done(18-10-13 09:24)
✔ Fix issue: when DB in IndexedDb recreated, but in localStorage order is old @done(18-10-22 10:05)
✔ Switch from 'akserg/ng2-dnd' to another dnd-module with ng6 support (for example `https://github.com/beyerleinf/ngx-dnd`) @done(18-11-01 09:46)
✔ Update CLI to v7 @done(18-11-02 10:24)
✔ Fix errors after update @done(18-11-03 10:57)
✔ Fix errors in tests for 'TodoListComponent' @done(18-11-03 11:07)
☐ Consider to implement app structure like in 'angular-realworld-example-app' on GH ( `https://github.com/gothinkster/angular-realworld-example-app` )
☐ Fix cursor type for contaners (example: hover mouse between 'pinned-list' and 'unpinned-list', or between 'pinned-list' and input field for new todo)
✔ Change styles to CSS-grids @done(18-02-26 09:08)
✔ Start grids from TodoListItemViewComponent @done(18-02-18 10:11)
✔ Improve styles for 'checkbox.toggle' (currently not centered in container) @done(18-02-24 09:26)
✔ Fix header min resizing issue (when window width is small, header flows) @done(18-02-24 09:28)
☐ Fix issue -> when todo hovered (and zoom is 90% or 110%) -> buttons shift ---> Delayed for some time (When will be adaption for responsive) (probably margin: 0 auto; will solve it)
☐ Improve styles for action-buttons (hover should work on more area) ---> Delayed for some time (Consider to implement this feature)
☐ Improve styles if window width < 600 (make buttons-block responsive)
✔ Implement grids in TodoListItemEditComponent @done(18-02-18 12:14)
✔ Implement grids in TodoListHeaderComponent @done(18-02-24 09:25)
✔ Fix small issue at bottom of the 'toggleAll' and input.new-todo (look bottom border input.new-todo) @done(18-02-23 10:58)
✔ Improve styles for 'checkbox.toggleAll' (change height to center element and update 'checkbox.toggle' to center) @done(18-02-22 09:59)
✔ Implement grids in TodoListFooterComponent @done(18-02-24 10:19)
☐ Fix footer styles when window size less than 650px ---> Delayed for some time (When will be adaption for responsive)
✔ Implement grids in TodosComponent @done(18-02-25 10:29)
✔ Improve animations for move-Icon, edit-Icon, delete-Icon -> use opacity onHover todo @done(18-02-12 09:25)
☐ Improve animation when 'toggleAll' todos (look for single check and toggleAll -> when toggleAll clicked all data reloaded, so we should use Angular animation when in component)
☐ While editing Todo use next animation - zoom in current Todo and shadowing backgroung (or blur other todos like here `https://developers.google.com/web/updates/2017/10/animated-blur`)
☐ Fix 'toggleAll' checkbox style in Edge (use `http://yoksel.github.io/url-encoder/`)
☐ Fix styles for checkbox.toggle in FF and Edge
✔ Autoresize fields for new todo and editing todo with large text @done(18-02-15 09:07)
✔ Disable width changes for textarea @done(18-02-15 09:41)
✔ Improve processing 'Enter' in textarea (currently Enter adds linebreak and saves todo -> only saves todo should be) @done(18-02-15 09:20)
✔ Improve initial size for textarea (when single line todo.title, and check multiple lines todo.title) @done(18-02-15 10:16)
☐ Rewrite part for initial size for textarea (when single line todo.title, and check multiple lines todo.title) (Current method is a crutch) (look here `https://github.com/stevepapa/ng-autosize/issues/9`)
☐ Rewrite part for DnD (use `https://github.com/atlassian/react-beautiful-dnd` and adopt it to angular)
☐ Use custom cursor for DnD icon (look here `https://github.com/atlassian/react-beautiful-dnd/blob/master/src/view/style-marshal/get-styles.js#L110`)
☐ Consider to use Material 'DragDropModule' (`https://material.angular.io/cdk/drag-drop/overview`) ---> Delayed for some time (Consider to implement this feature, after will be supported DnD for subComponents)
☐ Use behavior and styles from 'Material 'DragDropModule''
☐ Change styles in '_sign-in.scss' to grids
☐ Use some UI ideas for dialog like here `https://comining.io/account/wallets#`
☐ Handle error properly as Observable (look here `http://pradeeploganathan.com/angular/creating-a-service-in-angular-5-with-rxjs-5-5/`)
☐ Rewrite test for 'TodosComponent' (currently not complete)
☐ Rewrite test for 'IndexedDbService' (currently not complete)
☐ Fix bug when todo edited with small text, size of textarea autosized (for example start edit todo with name 'Add more todos!')
☐ Use watcher, and perform deletion after 5 seconds, if user didn't cancel deletion (service worker?) (look in IndexedDbService)
☐ Use Material Snackbar for cancel deleted todo (look here `https://medium.com/codingthesmartway-com-blog/angular-material-part-2-popups-modals-1ed0c2405f18`)
☐ Consider to use time as ID in DB (look here example `https://github.com/chenyaowen123/suishouji/blob/master/src/app/accounting/accounting.component.ts`)
☐ Add filtering by todo name
☐ Use switchMap for filters and search (look here `https://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html` and here `https://codecraft.tv/courses/angular/http/http-with-observables/`)
☐ Add spinner when Angular component loading `(examples: www.muller.tech/post/2017/04/03/angular4-create-modal/ and here https://medium.com/@tomastrajan/how-to-style-angular-application-loading-with-angular-cli-like-a-boss-cdd4f5358554)`
☐ Use Reactive forms
☐ Notify if user blocked notification (look here example `https://codingthesmartway.com/angular-material-introduction/` - left bottom corner)
☐ Use UserGuide on first run like here `discordapp.com` or like in `feedly.com`
☐ Consider to cancel editing, if user clicks on other area ---> Delayed for some time (Back to this later)
☐ Probably should be used 'ViewChild'
☐ After finishing the tutor, improve the app using (`https://github.com/tastejs/todomvc-app-template`)
☐ Fix all TODO in all files
☐ Check the app in 'Internet mail.ru' browser
☐ Add additional page 'upgrade' if browser not supported (for example `https://pomotodo.com/upgrade`)
☐ Add new column in DB with name 'deletePending'
☐ Upgrade indexedDb with new base version
☐ Add watcher (or timer/something else) to delete todo with flag true in 'deletePending' after some time (and show button to cancel deletion)
☐ Read about Service Workers and change the App architecture (`https://habrahabr.ru/company/2gis/blog/345552/`)
☐ Add 'pwa' module
☐ Sync using SW according to some state (like example some idea: `https://github.com/johnpapa/pwa-angular#background-sync-1`)
☐ 1. state = 'tagsOnClient' - update list tags from service to IndexedDb
☐ 2. state = 'tagsOnBack' - update list tags from IndexedDb to BackEnd
☐ Call Sync event when tags updated (look in 'IndexedDbService')
|
|
☐ Use Chrome LightHouse to test the app and get 100%
☐ Improve DnD functionality -> Currently if todos moved to fast the movements not handled propely (posibly disable move posibility until server returns response)
☐ Limit amount of todo by 100 (more will be available in pro)
☐ Possibility to sync DB (look here `https://github.com/dfahlander/Dexie.js/issues/437`)
☐ CleanUp code (delete console.log, comments and other things)
☐ Idea to implement multiple adding items
`сгруппировать/смерджить несколько observable httpClient.post, чтобы каждый последующий отправлялся только после выполнения предыдущего
flatMap ->
post(...).flatMap(result => post(result.data))
....data)).subscribe(finalResult => ....) (`https://t.me/angular_ru/78351`)`
☐ Ideas to implement (example - `https://scotch.io/tutorials/protecting-angular-v2-routes-with-canactivatecanactivatechild-guards`):
☐ Guest page - №1
☐ Admin page - №2
☐ Authorization - №3
`вот вам и роутинг, и авторизация сразу, а тут, сразу же, и гарды под роутинг, вначале простой роутинг между гость и админ, потом гард, а потом уже и авторизация.`
`ваша задача научиться роутингу нормально, потом уже защиту ставить на роутинг, а потом и как ее пройти, для доп извращения - админ роутер на именованный аутлет с отловом ошибки на анонимном доступе, и отображать гостевой + (админ , если авторизован)`
`компоненты, роутинг между ними, гард на блокировку к админке (простой return false ), а потом уже форма авторизации для сбора логинь/пароль, сервис для проверки логина`
`1)верстаю компоненты (шаблон) интерфейса админки, авторизации, регистрации. 2) это организовываю регистрацию пользователей (добавления в БД) 3) Далее авторизацию (проверку данных из БД) 4) предотвращение открытия админки, если сразу хотят перейти в нею по url,если он не было до этого авторизован, как админ`
`локалсторадж для хранения авторизации, форма авторизации: реактивная форма + валидаторы, включая кастомный для сверки паролей, если 2 поля`
☐ Implement MEAN - usefull links below:
`https://www.sitepoint.com/mean-stack-angular-2-angular-cli/`
`https://www.sitepoint.com/user-authentication-mean-stack/`
Future:
☐ Options window:
☐ Add in options value for Multiple/Single adding todo (use `http://dexie.org/docs/Table/Table.bulkAdd()`)
☐ Add in options value for support spec symbols (like ☐ and ✔) in new todo
☐ Add posibility to parse todo with special symbols (like ☐ and ✔) (parse input in service) (server side probably)
☐ Update test for the feature in service and components
☐ Add documentation (look here `https://habrahabr.ru/company/docsvision/blog/341562/`)
☐ Add docs to methods in services like in IndexedDbService createTodo
☐ In IndexedDB parse next events `IDBOpenDBRequest.onblocked` and `IDBOpenDBRequest.onupgradeneeded` (look here `https://developer.mozilla.org/en-US/docs/Web/API/IDBOpenDBRequest`)
Scheduled:
☐ Rewrite dynamic components with NgComponentOutlet (look here `https://angular.io/api/common/NgComponentOutlet` and here `https://github.com/angular/angular/pull/19713`) (return to this point after 01.01.2018)
look example here `https://github.com/thekiba/ngx-component-outlet` and here `https://gist.github.com/thekiba/9b7fc4e32c92353e26890320f255f712`
Done:
✔ Update unit tests for part-2
✔ Update e2e tests for part-3
✔ Update unit tests for part-3
✔ Update unit tests for part-4
✔ Run npm run json-server and ng serve in the same terminal (look here `https://github.com/kimmobrunfeldt/concurrently`)
✔ Rewrite HTTP request to HTTPClient
✔ Update tests for HttpClient
✔ Rewrite unit tests for app.component.ts (exlude NO_ERRORS_SCHEMA)
✔ Write unit tests for events (emit) (look here - `https://angular.io/guide/testing`)
✔ Write tests for TodoListItemComponent
✔ Write tests for TodoListFooterComponent
✔ Write tests for TodoListComponent
✔ Write tests for TodoListHeaderComponent
✔ Editing todos block
✔ On finish editing, if the title of the todo is empty -> delete todo
✔ If todo is edited, cursor not entered in the todo title field
✔ In TodoListItemEditComponent change div class from 'view' to 'editContainer' and style the container
✔ If clicks outside of the editing Todo, cancel editing (look here `http://todomvc.com/examples/angularjs/#/`) (blur event in template used) (use this option, if in prefs value is 'single editing todo')
✔ Add posibility to edit Todo (look here `http://todomvc.com/examples/angularjs/#/` or here `https://angularclass.github.io/NG6-todomvc-starter/`)
✔ Update unit test for TodosComponent (according to editable Todo)
✔ Update unit test for TodoListComponent (according to editable Todo)
✔ Update unit test for TodoListItemComponent (according to editable Todo)
✔ Update unit test for TodoListItemViewComponent (according to editable Todo)
✔ Update unit test for TodoListItemEditComponent (according to editable Todo)
✔ Update project to new CLI version (1.5) @done(17-11-07 09:35)
✔ OnHover checkbox(or whole todo) show more effective @done(17-11-07 09:53)
✔ OnHover todo change bg color to a little darker @done(17-11-07 10:42)
✔ OnHover todo delete change bg color to a color with some red color (like a delete button, but more lighter) @done(17-11-07 10:42)
✔ Add automincremented build info in the header of the app @done(17-11-10 09:54)
✔ In footer - count only unchecked todos @done(17-11-12 08:59)
✔ Set Up Absolute Paths (look here `https://scotch.io/tutorials/reference-angular-imports-absolutely-for-easier-development?utm_source=newsletter&utm_medium=email&utm_campaign=reference_angular_imports_absolutely_for_easier_development&utm_term=2017-11-07`) @done(17-11-12 10:15)
✔ Update all path in the app @done(17-11-12 10:15)
✔ Update unit tests @done(17-11-12 10:24)
✔ Add icon 'edit' with SVG icon (from here `https://icomoon.io`) @done(17-11-16 09:42)
✔ Replace 'destroy' icons with SVG (look here example `https://jsfiddle.net/Cl3r1k/catLzzj9/`) @done(17-11-17 09:13)
✔ Modal window for request on deleting todo @done(17-11-28 09:58)
✔ Center vertically/horizontally modal @done(17-11-23 10:28)
✔ Update UI of the deletion modal window (look here `https://limonte.github.io/sweetalert2/`) @done(17-11-23 09:31)
✔ Icon warning took here (`https://codepen.io/arnaud-ritti/pen/avKNBL?q=sweet+alert&limit=all&type=type-pens`) @done(17-11-22 09:51)
✔ Change behavior of the 'overlay' (change to blur) @done(17-11-22 09:11)
✔ Change modal with another approach (look here `http://www.muller.tech/post/2017/04/03/angular4-create-modal/`) @done(17-11-27 09:05)
✔ Cancel modal when `Esc` pressed (look ModalComponent - HostListener) @done(17-11-27 09:25)
✔ Update tests for modal windows @done(17-11-28 08:47)
✔ After implementation modal windows -> update patch version @done(17-11-28 09:38)
✔ Update test for TodoListItemViewComponent (with new 'edit' button) @done(17-11-28 10:44)
✔ Bug: when calceled modal on deleting, selection does not resets (fixed when TodoListItemViewComponent updated to dumb deletion - modal now called in TodosComponent) @done(17-11-28 09:58)
✔ Update Cli to 1.6.1 @done(17-12-17 10:59)
✔ Add filters in footer (look here `http://todomvc.com/examples/angularjs/#/`) @done(17-12-02 09:09)
✔ Update TodoListFooterComponent tests for 'filter' @done(17-12-11 09:11)
✔ Add 'Clear completed' in footer button (look here `http://todomvc.com/examples/angularjs/#/`) @done(17-12-28 09:52)
✔ Update TodoListFooterComponent tests for 'clear completed' @done(17-12-11 09:11)
✔ Update TodosComponent tests @done(17-12-11 09:42)
✔ In footer, show footer if amount of todos is more than 1, even if all of them are completed @done(17-12-04 08:57)
✔ Btn 'clear all', should be displayed, if there is at least 1 completed todo @done(17-12-05 09:26)
✔ Fix position of the filter buttons, when 'clear completed' hidden @done(17-12-06 12:07)
✔ Refactor observable variables, and add $ to thier names (the app don't have it yet) @done(17-12-29 09:35)
✔ Add toggle all todo button in header (look here `http://todomvc.com/examples/angularjs/#/`) @done(18-01-03 09:14)
✔ Adopt this feature with filtering (routings) @done(18-01-03 09:14)
✔ Update unit test for 'toggleAll' changes @done(18-01-13 09:04)
✔ Improve this part: when editing canceled emit cancelEvent and don't propagate the event to parent, just load view component @done(18-01-13 09:19)
✔ Rewrite stored method to IndexedDB (look here `http://prgssr.ru/development/obzor-sredstv-hraneniya-dannyh-na-klientskoj-storone.html`) @done(18-01-15 09:13)
✘ Reproduce base corruption (probably in debug mode, start adding 10k objects and break the debugging) -> Couldn't reproduce base curruption @cancelled(18-01-14 10:27)
✘ Use DI to change service on-the-fly -> Use another approach (sync db) instead using two services (TypeScript interfaces aren't valid tokens (`https://angular.io/guide/dependency-injection#typescript-interfaces-arent-valid-tokens`)) @cancelled(18-01-14 09:33)
✔ Update tests (IndexedDbService) @done(18-01-13 09:24)
✔ Update tests (ApiService) (AppComponent - with new routes) @done(18-01-12 11:19)
✔ 🔥🎉🎉 After implementation browser store -> update major version @done(18-01-15 09:13)
✔ Consider to use another lib for IndexedDb (`https://github.com/dfahlander/Dexie.js` or `https://www.npmjs.com/package/angular-async-local-storage`) -> Chosen Dexie as more flexible @done(18-01-14 10:36)
✔ Refactor method updateFooterAndToggleAllInfo(), and return from service response as object -> { all: 'number', active: 'number', complete: 'number' } @done(18-01-15 10:08)
✔ Update resolvers (TodosActiveResolver, TodosCompletedResolver) @done(18-01-15 10:50)
✔ Find out, is there any way to use on resolver (transfer filterState variable in router?) (look in sources `https://github.com/angular/angular/tree/master/packages/router/src`) @done(18-01-16 09:02)
✔ It's not a good practice to use one big Resolver @done(18-01-16 09:03)
✔ Change styles to SCSS (look here `https://scotch.io/tutorials/using-sass-with-the-angular-cli` and here `https://www.codementor.io/stevebelovarich/compiling-sass-postcss-with-angular-cli-du107x931`) @done(18-01-18 10:11)
✔ Add animation when hover on 'clearCompleted' highlight completed todos @done(18-01-17 10:05)
✔ Fix animation when 'clearCompleted' clicked (after click the 'clearHoverState' is still true) @done(18-01-19 08:52)
✔ Add animation when 'clearCompleted' hovered -> display trash icons @done(18-01-24 09:47)
✔ Add animation when checkbox of todo hovered -> strikeline the text (look in `&.completed label` style) @done(18-01-23 14:46)
✔ Add animation for 'toggleAll' onHover (strikeline all todos) @done(18-01-24 09:39)
✔ Improve animation for icons 'delete' and 'edit' @done(18-01-24 09:48)
✔ Update all styles files to new scss styles (format styles) @done(18-01-22 09:30)
✔ Update global.scss @done(18-01-18 10:45)
✔ Update todomvc-app.scss @done(18-01-22 09:29)
✔ Update modal.component.scss @done(18-01-19 08:47)
✔ Fix 'toggleAll' for filtered list @done(18-01-22 09:40)
✔ Fix 'toggleAll' checkbox style in FF (look here `http://yoksel.github.io/url-encoder/` and here `http://css.yoksel.ru/svg-angular-firefox/`) @done(18-01-26 09:28)
✔ Update Angular CLI to version 1.6.6 @done(18-01-27 10:26)
✔ Update all modules to latests versions @done(18-01-28 09:47)
✔ Update tests for new karma @done(18-01-31 09:46)
✔ Add drag'n'drop posibility (look here `https://shekhargulati.com/2017/09/21/building-an-angular-4-drag-and-drop-application-in-15-minutes/` and `https://github.com/akserg/ng2-dnd`) @done(18-02-11 09:33)
✔ Update styles for DnD support @done(18-02-08 09:11)
✔ Update unit tests for DnD support @done(18-02-07 09:08)
✔ Change app logic for DnD support @done(18-02-11 09:33)
✔ Fix styles for edit-Icon in todo with large text @done(18-02-08 09:12)
✔ Improve styles for editing todo (decrease space before text) @done(18-02-11 10:17)
✔ Update modal with next examples: @done(18-03-02 10:57)
`https://blog.thoughtram.io/angular/2017/11/27/custom-overlays-with-angulars-cdk-part-two.html`
`http://brianflove.com/2017/07/17/angular-delete-confirmation/`
`https://medium.com/codingthesmartway-com-blog/angular-material-part-2-popups-modals-1ed0c2405f18`
`https://alligator.io/angular/dialogs-angular-material/`
✔ Update tests with new dialog @done(18-03-02 09:35)
☐ Improve tests for DialogComponent (test 'Cancel' click, and 'Esc' event) (look here `https://medium.com/curiouscaloo/testing-angular-components-containing-mddialog-2430144b5894`)
✔ In modal for deletion set focus on 'Cancel' button (cdkFocusRegionstart used) @done(18-03-03 09:10)
✔ Add modal for 'clearCompleted' (with amount of deleted todos) @done(18-03-03 09:41)
✔ Fix issue with textarea, when todo is edited, and another checkbox.toggle hovered -> textarea autosizes (Not catched anymore) @done(18-03-03 09:49)
✔ In header add button with icon 'Enter', which will be visible, when input is focused @done(18-03-05 09:33)
✔ Update tests for new button in header @done(18-03-06 09:58)
✔ Update style for 'toggle' checkbox (use 'pointer' cursor when checkbox hovered) @done(18-03-26 10:09)
✔ Fix issue with 'clearCompleted' dialog (todos deleted when dialog showed) @done(18-03-14 10:17)
✔ Add pin icon and use two categories: pinned(important) and unpinned(not important) @done(18-03-27 09:05)
✔ Reorganize app structure @done(18-03-26 09:58)
✔ Add member 'pin' @done(18-03-11 10:48)
✔ Add additional 'inner_id' field @done(18-03-11 10:48)
✔ In constructor set unique 'inner_id' @done(18-03-15 11:47)
✔ Add field 'deleted_time' @done(18-03-11 10:49)
✔ Add field 'created_time' @done(18-03-11 10:49)
✔ Add field 'completed_time' @done(18-03-11 10:49)
✔ Add field 'updated_time' @done(18-03-11 10:49)
✔ Update tests for the model @done(18-03-16 09:27)
✔ Add logic and styles for pin/unpin todo (some styles(like position and other) will be finished, when buttons will be reorganized) @done(18-03-16 10:25)
✔ Update tests for updated interface and components using this interface @done(18-03-19 09:40)
✔ Update tests for TodoListItemEditComponent @done(18-03-17 09:44)
✔ Update tests for TodoListItemViewComponent @done(18-03-18 10:24)
✔ Update tests for TodoListItemComponent @done(18-03-18 10:27)
✔ Update tests for TodoListComponent @done(18-03-18 10:31)
✔ Update tests for TodosComponent @done(18-03-19 09:39)
✔ Update logic for new members in 'ToDo' model (maded previously) @done(18-03-19 09:53)
✔ Update tests for logic with new fields @done(18-03-20 10:47)
✔ Reorganize DnD logic (use additional list ordered todos (stored in localStorage)) @done(18-03-26 09:58)
✔ Add service to manage todos Order @done(18-03-26 09:54)
✔ Write tests for 'TodoOrderService' @done(18-03-26 09:58)
✔ Fix issue when app first run (the order list is not found and app crashes (look in getAllTodos() method)) @done(18-03-26 09:43)
✔ Update test for 'pin_icon' @done(18-03-26 10:21)
✔ Restyle DnD icon and move from right to left of todo item @done(18-03-29 09:35)
✔ Replace 'edit-icon' and 'delete-icon' by 'icon-more' @done(18-04-12 10:03)
✔ Add 'icon-more' in 'TodoListItemViewComponent' @done(18-03-30 10:48)
✔ Emit 'more' event from 'TodoListItemViewComponent' to 'TodosComponent' @done(18-03-30 11:08)
✔ Deprecate 'edit-icon' and its styles @done(18-04-08 09:51)
✔ Move 'delete-icon' to 'TodoListItemEditComponent' @done(18-04-12 10:03)
✔ Update styles for 'TodoListItemEditComponent' @done(18-04-09 10:47)
✔ Fix autoheight for 'TodoListItemEditComponent' @done(18-04-10 12:26)
✔ Update test @done(18-04-12 09:48)
✔ Update test for 'TodoListItemEditComponent' @done(18-04-11 11:12)
✔ Update test for 'TodoListItemViewComponent' @done(18-04-12 09:46)
✔ Add new dialog for 'more' prefs @done(18-04-06 10:28)
✔ Write tests for 'DialogMoreComponent' @done(18-04-08 09:47)
☐ Change DatePicker to DateTimePicker
✔ Add new fields in the model @done(18-04-06 09:48)
✔ Update tests for the model 'ToDo' @done(18-04-06 09:53)
✔ Update app logic for new fields @done(18-04-06 10:27)
✔ Fix 'clearCompleted' order issue (if 'clearComplete()' called - order resets) @done(18-04-14 10:03)
✔ Add baloon tooltips for buttons @done(18-04-16 09:11)
✔ Add tooltips to 'TodoListItemViewComponent' @done(18-04-15 10:00)
✔ Add tooltips to 'TodoListItemEditComponent' @done(18-04-16 09:05)
✔ Add tooltips to 'TodoListHeaderComponent' @done(18-04-16 09:10)
✔ Add tooltips to 'TodoListFooterComponent' @done(18-04-16 09:12)
✔ Add 'priority-block' with styles between 'drag icon' and 'checkbox.toggle' for todo (if label todo has symbols '!' then use colored block, for example - !!! - the color is red, !!!! - the color is orange, etc) @done(18-04-19 10:17)
✔ Update logic app with 'priority-block' @done(18-04-19 09:57)
✔ Update tests for new logic with 'priority-block' @done(18-04-19 10:17)
✔ Use zones for DnD (for pinned, unpinned, and completed use three different zones) @done(18-05-08 09:37)
✔ Use 'Multi list sortable between containers' in 'ng2-dnd' (look here `http://embed.plnkr.co/JbG8Si`) @done(18-05-08 09:37)
✔ Split list to 3 zones @done(18-05-08 09:19)
✔ Update logic for 'pinnedTodos', 'unpinnedTodos', 'completedTodos' @done(18-04-30 12:19)
✔ Update 'toggleTodoComplete' and 'toggleAll' logic @done(18-04-25 10:12)
✔ Update logic when added new todo, or deleted @done(18-04-25 10:13)
✔ Update logic for DnD for 'pinned' and 'unpinned' order @done(18-04-27 09:46)
✔ Update logic for 'onAddTodo()' method @done(18-04-27 10:20)
✔ Update tests for 'TodoListComponent' (test 'pin' and 'move' emitters) @done(18-04-29 09:46)
✔ Disable additional buttons for completed todos @done(18-04-25 10:11)
✔ Improve styles for disabled buttons (correct width of containers) @done(18-04-30 12:19)
✔ Update view for 'completed' list (use collapse button) @done(18-05-07 11:07)
✔ Add icon 'icon-broom' for 'completed' list (at the end of line) with hint 'Clear recent completed todos' @done(18-05-06 10:16)
✔ Change logic for 'icon-broom' (apply logic 'clearCompleted' to the icon and deprecate 'clearCompleted' in footer) @done(18-05-07 09:22)
✔ Fix 'clearCompleted' with new 'completed' list @done(18-05-04 09:56)
✔ Update tests for 'completed' list (for collapse button) @done(18-05-07 11:05)
✔ Refactor tests for 'clearCompleted' list (more from 'footer' tests to 'list' tests) @done(18-05-07 11:05)
✔ Update test for zones @done(18-05-08 09:31)
✔ Consider to use another behaviour, if todo was pinned, then unpin and place at top of unpinned todos (look in 'TodoService' 'pinTodo()') @done(18-04-24 10:42)
✔ Refactor color of console.log to `Teal` for all tests, and use this color for tests as recommened @done(18-04-29 09:51)
✔ Refactor color of console.log to `Cadetblue` for all components, and use this color for components as recommened @done(18-05-09 10:00)
✔ Refactor color of console.log to `Salmon` for all services, and use this color for services as recommened @done(18-05-09 09:37)
✔ Refactor color of console.log to `Royalblue` for all resolvers, and use this color for resolvers as recommened @done(18-05-09 09:41)
✔ Fix warning ([Deprecation] Using unescaped '#' characters in a data URI body is deprecated and will be removed in M67, around May 2018. Please use '%23' instead. See `https://www.chromestatus.com/features/5656049583390720` for more details.) (User `https://github.com/stylus/stylus/issues/2379` -> changed color for SVG elemnts in styles) @done(18-05-09 10:10)
Canceled:
✘ Combine two storing data method (HTTP and InMemory) -> Not necessarily anymore (Consider this point later)
✘ Find out how stored todos (probably browser store (LocalStorage)) in the example `http://todomvc.com/examples/angularjs/#/` @cancelled(17-11-11 09:36) -> Not applicable, and to simple for a future
✘ Fix saving in db.json data algoritm (previously saved with order Id->title->complete, now saves title->complete->Id) @cancelled(17-12-02 09:48)
✘ Find the way to start json server on gh-pages (look here `https://my-json-server.typicode.com/`) -> No 'Access-Control-Allow-Origin' header is present on the requested resource -> no need in this part still @cancelled(18-01-16 09:06)
✘ Updates styles, for 'TodoListItemEditComponent' (when todo editing, and mouse leaved - bgcolor of the todo is not in 'edit mode') -> After bg-colors will be restored, it won't needed @cancelled(18-08-05 09:08)
✘ Change console color for services from `Salmon` to `Seagreen` (Canceled - similar color used for components) @cancelled(18-09-16 09:38)
Info:
☐ If count of todos is over 10k, performance of the app is very degradate (for example use db.json in db.zip file)
☐ Or create testing method, to add 10k todos in IndexedDb