From 3d483b5a4b724eafba0d7b3ef276520fdfa192f0 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Fri, 18 May 2018 17:18:30 +0300 Subject: [PATCH 01/75] Started building the new layout system along with the new layouts --- src/@fuse/components/index.ts | 1 + .../components/layouts/layouts.module.ts | 19 ++++++ .../vertical-nav/basic/basic.component.html} | 0 .../vertical-nav/basic/basic.component.scss} | 2 +- .../vertical-nav/basic/basic.component.ts | 14 +++++ .../theme-options.component.html | 8 +++ src/app/app.component.html | 9 ++- src/app/app.module.ts | 18 +++--- src/app/fuse-config.ts | 9 ++- src/app/layout/content/content.component.html | 6 ++ .../content/content.component.scss | 0 .../content/content.component.ts | 0 .../content/content.module.ts | 2 +- .../footer/footer.component.html | 0 .../footer/footer.component.scss | 0 .../footer/footer.component.ts | 0 .../{main => layout}/footer/footer.module.ts | 2 +- .../navbar/navbar.component.html | 0 .../navbar/navbar.component.scss | 2 +- .../navbar/navbar.component.ts | 0 .../{main => layout}/navbar/navbar.module.ts | 2 +- .../quick-panel/quick-panel.component.html | 0 .../quick-panel/quick-panel.component.scss | 0 .../quick-panel/quick-panel.component.ts | 0 .../quick-panel/quick-panel.module.ts | 2 +- .../toolbar/toolbar.component.html | 0 .../toolbar/toolbar.component.scss | 2 +- .../toolbar/toolbar.component.ts | 0 .../toolbar/toolbar.module.ts | 2 +- .../apps/academy/academy.module.ts | 0 .../apps/academy/course.service.ts | 0 .../apps/academy/course/course.component.html | 0 .../apps/academy/course/course.component.scss | 0 .../apps/academy/course/course.component.ts | 0 .../apps/academy/courses.service.ts | 0 .../academy/courses/courses.component.html | 0 .../academy/courses/courses.component.scss | 0 .../apps/academy/courses/courses.component.ts | 0 .../main/{content => }/apps/apps.module.ts | 0 .../apps/calendar/calendar.component.html | 0 .../apps/calendar/calendar.component.scss | 0 .../apps/calendar/calendar.component.ts | 0 .../apps/calendar/calendar.module.ts | 0 .../apps/calendar/calendar.service.ts | 0 .../event-form/event-form.component.html | 0 .../event-form/event-form.component.scss | 0 .../event-form/event-form.component.ts | 0 .../apps/calendar/event.model.ts | 0 .../chat/chat-start/chat-start.component.html | 0 .../chat/chat-start/chat-start.component.scss | 0 .../chat/chat-start/chat-start.component.ts | 0 .../chat/chat-view/chat-view.component.html | 0 .../chat/chat-view/chat-view.component.scss | 0 .../chat/chat-view/chat-view.component.ts | 0 .../apps/chat/chat.component.html | 0 .../apps/chat/chat.component.scss | 0 .../{content => }/apps/chat/chat.component.ts | 0 .../{content => }/apps/chat/chat.module.ts | 0 .../{content => }/apps/chat/chat.service.ts | 0 .../sidenavs/left/chats/chats.component.html | 0 .../sidenavs/left/chats/chats.component.scss | 0 .../sidenavs/left/chats/chats.component.ts | 0 .../chat/sidenavs/left/left.component.html | 0 .../chat/sidenavs/left/left.component.scss | 0 .../apps/chat/sidenavs/left/left.component.ts | 0 .../sidenavs/left/user/user.component.html | 0 .../sidenavs/left/user/user.component.scss | 0 .../chat/sidenavs/left/user/user.component.ts | 0 .../right/contact/contact.component.html | 0 .../right/contact/contact.component.scss | 0 .../right/contact/contact.component.ts | 0 .../chat/sidenavs/right/right.component.html | 0 .../chat/sidenavs/right/right.component.scss | 0 .../chat/sidenavs/right/right.component.ts | 0 .../contact-form/contact-form.component.html | 0 .../contact-form/contact-form.component.scss | 0 .../contact-form/contact-form.component.ts | 0 .../contact-list/contact-list.component.html | 0 .../contact-list/contact-list.component.scss | 0 .../contact-list/contact-list.component.ts | 0 .../apps/contacts/contact.model.ts | 0 .../apps/contacts/contacts.component.html | 0 .../apps/contacts/contacts.component.scss | 0 .../apps/contacts/contacts.component.ts | 0 .../apps/contacts/contacts.module.ts | 0 .../apps/contacts/contacts.service.ts | 0 .../selected-bar/selected-bar.component.html | 0 .../selected-bar/selected-bar.component.scss | 0 .../selected-bar/selected-bar.component.ts | 0 .../sidenavs/main/main.component.html | 0 .../sidenavs/main/main.component.scss | 0 .../contacts/sidenavs/main/main.component.ts | 0 .../analytics/analytics.component.html | 0 .../analytics/analytics.component.scss | 0 .../analytics/analytics.component.ts | 0 .../dashboards/analytics/analytics.module.ts | 0 .../dashboards/analytics/analytics.service.ts | 0 .../dashboards/project/project.component.html | 0 .../dashboards/project/project.component.scss | 0 .../dashboards/project/project.component.ts | 0 .../apps/dashboards/project/project.module.ts | 0 .../dashboards/project/project.service.ts | 0 .../dashboard/dashboard.component.html | 0 .../dashboard/dashboard.component.scss | 0 .../dashboard/dashboard.component.ts | 0 .../e-commerce/dashboard/dashboard.service.ts | 0 .../apps/e-commerce/e-commerce.module.ts | 0 .../apps/e-commerce/order/order-statuses.ts | 0 .../e-commerce/order/order.component.html | 0 .../e-commerce/order/order.component.scss | 0 .../apps/e-commerce/order/order.component.ts | 0 .../apps/e-commerce/order/order.model.ts | 0 .../apps/e-commerce/order/order.service.ts | 0 .../e-commerce/orders/orders.component.html | 0 .../e-commerce/orders/orders.component.scss | 0 .../e-commerce/orders/orders.component.ts | 0 .../apps/e-commerce/orders/orders.service.ts | 0 .../e-commerce/product/product.component.html | 0 .../e-commerce/product/product.component.scss | 0 .../e-commerce/product/product.component.ts | 0 .../apps/e-commerce/product/product.model.ts | 0 .../e-commerce/product/product.service.ts | 0 .../products/products.component.html | 0 .../products/products.component.scss | 0 .../e-commerce/products/products.component.ts | 0 .../e-commerce/products/products.service.ts | 0 .../file-list/file-list.component.html | 0 .../file-list/file-list.component.scss | 0 .../file-list/file-list.component.ts | 0 .../file-manager/file-manager.component.html | 0 .../file-manager/file-manager.component.scss | 0 .../file-manager/file-manager.component.ts | 0 .../apps/file-manager/file-manager.module.ts | 0 .../apps/file-manager/file-manager.service.ts | 0 .../sidenavs/details/details.component.html | 0 .../sidenavs/details/details.component.scss | 0 .../sidenavs/details/details.component.ts | 0 .../sidenavs/main/main.component.html | 0 .../sidenavs/main/main.component.scss | 0 .../sidenavs/main/main.component.ts | 0 .../dialogs/compose/compose.component.html | 0 .../dialogs/compose/compose.component.scss | 0 .../dialogs/compose/compose.component.ts | 0 .../{content => }/apps/mail-ngrx/i18n/en.ts | 0 .../{content => }/apps/mail-ngrx/i18n/tr.ts | 0 .../mail-details/mail-details.component.html | 0 .../mail-details/mail-details.component.scss | 0 .../mail-details/mail-details.component.ts | 0 .../mail-list-item.component.html | 0 .../mail-list-item.component.scss | 0 .../mail-list-item.component.ts | 0 .../mail-list/mail-list.component.html | 0 .../mail-list/mail-list.component.scss | 0 .../mail-list/mail-list.component.ts | 0 .../apps/mail-ngrx/mail.component.html | 0 .../apps/mail-ngrx/mail.component.scss | 0 .../apps/mail-ngrx/mail.component.ts | 0 .../apps/mail-ngrx/mail.model.ts | 0 .../apps/mail-ngrx/mail.module.ts | 0 .../apps/mail-ngrx/mail.service.ts | 0 .../sidenavs/main/main-sidenav.component.html | 0 .../sidenavs/main/main-sidenav.component.scss | 0 .../sidenavs/main/main-sidenav.component.ts | 0 .../store/actions/filters.actions.ts | 0 .../store/actions/folders.actions.ts | 0 .../apps/mail-ngrx/store/actions/index.ts | 0 .../mail-ngrx/store/actions/labels.actions.ts | 0 .../mail-ngrx/store/actions/mails.actions.ts | 0 .../store/effects/filters.effects.ts | 0 .../store/effects/folders.effects.ts | 0 .../apps/mail-ngrx/store/effects/index.ts | 0 .../mail-ngrx/store/effects/labels.effects.ts | 0 .../mail-ngrx/store/effects/mails.effects.ts | 0 .../apps/mail-ngrx/store/guards/index.ts | 0 .../mail-ngrx/store/guards/resolve.guard.ts | 0 .../apps/mail-ngrx/store/index.ts | 0 .../store/reducers/filters.reducer.ts | 0 .../store/reducers/folders.reducer.ts | 0 .../apps/mail-ngrx/store/reducers/index.ts | 0 .../store/reducers/labels.reducer.ts | 0 .../mail-ngrx/store/reducers/mails.reducer.ts | 0 .../store/selectors/filters.selectors.ts | 0 .../store/selectors/folders.selectors.ts | 0 .../apps/mail-ngrx/store/selectors/index.ts | 0 .../store/selectors/labels.selectors.ts | 0 .../store/selectors/mails.selectors.ts | 0 .../apps/mail-ngrx/store/store.module.ts | 0 .../dialogs/compose/compose.component.html | 0 .../dialogs/compose/compose.component.scss | 0 .../mail/dialogs/compose/compose.component.ts | 0 .../main/{content => }/apps/mail/i18n/en.ts | 0 .../main/{content => }/apps/mail/i18n/tr.ts | 0 .../mail-details/mail-details.component.html | 0 .../mail-details/mail-details.component.scss | 0 .../mail-details/mail-details.component.ts | 0 .../mail-list-item.component.html | 0 .../mail-list-item.component.scss | 0 .../mail-list-item.component.ts | 0 .../mail/mail-list/mail-list.component.html | 0 .../mail/mail-list/mail-list.component.scss | 0 .../mail/mail-list/mail-list.component.ts | 0 .../apps/mail/mail.component.html | 0 .../apps/mail/mail.component.scss | 0 .../{content => }/apps/mail/mail.component.ts | 0 .../{content => }/apps/mail/mail.model.ts | 0 .../{content => }/apps/mail/mail.module.ts | 0 .../{content => }/apps/mail/mail.service.ts | 0 .../sidenavs/main/main-sidenav.component.html | 0 .../sidenavs/main/main-sidenav.component.scss | 0 .../sidenavs/main/main-sidenav.component.ts | 0 .../apps/scrumboard/board.model.ts | 0 .../board/add-list/add-list.component.html | 0 .../board/add-list/add-list.component.scss | 0 .../board/add-list/add-list.component.ts | 0 .../scrumboard/board/board.component.html | 0 .../scrumboard/board/board.component.scss | 0 .../apps/scrumboard/board/board.component.ts | 0 .../board/dialogs/card/card.component.html | 0 .../board/dialogs/card/card.component.scss | 0 .../board/dialogs/card/card.component.ts | 0 .../label-selector.component.html | 0 .../label-selector.component.scss | 0 .../label-selector.component.ts | 0 .../edit-board-name.component.html | 0 .../edit-board-name.component.scss | 0 .../edit-board-name.component.ts | 0 .../list/add-card/add-card.component.html | 0 .../list/add-card/add-card.component.scss | 0 .../board/list/add-card/add-card.component.ts | 0 .../board/list/card/card.component.html | 0 .../board/list/card/card.component.scss | 0 .../board/list/card/card.component.ts | 0 .../edit-list-name.component.html | 0 .../edit-list-name.component.scss | 0 .../edit-list-name.component.ts | 0 .../scrumboard/board/list/list.component.html | 0 .../scrumboard/board/list/list.component.scss | 0 .../scrumboard/board/list/list.component.ts | 0 .../board-color-selector.component.html | 0 .../board-color-selector.component.scss | 0 .../board-color-selector.component.ts | 0 .../sidenavs/settings/settings.component.html | 0 .../sidenavs/settings/settings.component.scss | 0 .../sidenavs/settings/settings.component.ts | 0 .../apps/scrumboard/card.model.ts | 0 .../apps/scrumboard/list.model.ts | 0 .../apps/scrumboard/scrumboard.component.html | 0 .../apps/scrumboard/scrumboard.component.scss | 0 .../apps/scrumboard/scrumboard.component.ts | 0 .../apps/scrumboard/scrumboard.module.ts | 0 .../apps/scrumboard/scrumboard.service.ts | 0 .../sidenavs/main/main-sidenav.component.html | 0 .../sidenavs/main/main-sidenav.component.scss | 0 .../sidenavs/main/main-sidenav.component.ts | 0 .../todo-details/todo-details.component.html | 0 .../todo-details/todo-details.component.scss | 0 .../todo-details/todo-details.component.ts | 0 .../todo-list-item.component.html | 0 .../todo-list-item.component.scss | 0 .../todo-list-item.component.ts | 0 .../todo/todo-list/todo-list.component.html | 0 .../todo/todo-list/todo-list.component.scss | 0 .../todo/todo-list/todo-list.component.ts | 0 .../apps/todo/todo.component.html | 0 .../apps/todo/todo.component.scss | 0 .../{content => }/apps/todo/todo.component.ts | 0 .../{content => }/apps/todo/todo.model.ts | 0 .../{content => }/apps/todo/todo.module.ts | 0 .../{content => }/apps/todo/todo.service.ts | 0 .../components-third-party.module.ts | 0 .../datatable/ngx-datatable.component.html | 0 .../datatable/ngx-datatable.component.scss | 0 .../datatable/ngx-datatable.component.ts | 0 .../google-maps/google-maps.component.html | 0 .../google-maps/google-maps.component.scss | 0 .../google-maps/google-maps.component.ts | 0 .../google-maps/google-maps.module.ts | 0 .../angular-material.component.html | 0 .../angular-material.component.scss | 0 .../angular-material.component.ts | 0 .../angular-material.module.ts | 0 .../angular-material/example-components.ts | 0 .../example-viewer/example-viewer.html | 0 .../example-viewer/example-viewer.scss | 0 .../example-viewer/example-viewer.ts | 0 .../angular-material/material.module.ts | 0 .../components/cards/cards.component.html | 0 .../components/cards/cards.component.scss | 0 .../components/cards/cards.component.ts | 0 .../components/components.module.ts | 0 .../countdown/countdown.component.html | 0 .../countdown/countdown.component.scss | 0 .../countdown/countdown.component.ts | 0 .../highlight/highlight.component.html | 0 .../highlight/highlight.component.scss | 0 .../highlight/highlight.component.ts | 0 .../material-color-picker.component.html | 0 .../material-color-picker.component.scss | 0 .../material-color-picker.component.ts | 0 .../multi-language.component.html | 0 .../multi-language.component.scss | 0 .../multi-language.component.ts | 0 .../navigation/navigation.component.html | 0 .../navigation/navigation.component.scss | 0 .../navigation/navigation.component.ts | 0 .../search-bar/search-bar.component.html | 0 .../search-bar/search-bar.component.scss | 0 .../search-bar/search-bar.component.ts | 0 .../shortcuts/shortcuts.component.html | 0 .../shortcuts/shortcuts.component.scss | 0 .../shortcuts/shortcuts.component.ts | 0 .../components/sidebar/sidebar.component.html | 0 .../components/sidebar/sidebar.component.scss | 0 .../components/sidebar/sidebar.component.ts | 0 .../components/widget/widget.component.html | 0 .../components/widget/widget.component.scss | 0 .../components/widget/widget.component.ts | 0 src/app/main/content/content.component.html | 1 - src/app/main/main.component.ts | 63 ------------------- src/app/main/main.module.ts | 46 -------------- .../forgot-password-2.component.html | 0 .../forgot-password-2.component.scss | 0 .../forgot-password-2.component.ts | 0 .../forgot-password-2.module.ts | 0 .../forgot-password.component.html | 0 .../forgot-password.component.scss | 0 .../forgot-password.component.ts | 0 .../forgot-password/forgot-password.module.ts | 0 .../authentication/lock/lock.component.html | 0 .../authentication/lock/lock.component.scss | 0 .../authentication/lock/lock.component.ts | 0 .../pages/authentication/lock/lock.module.ts | 0 .../login-2/login-2.component.html | 0 .../login-2/login-2.component.scss | 0 .../login-2/login-2.component.ts | 0 .../authentication/login-2/login-2.module.ts | 0 .../authentication/login/login.component.html | 0 .../authentication/login/login.component.scss | 0 .../authentication/login/login.component.ts | 0 .../authentication/login/login.module.ts | 0 .../mail-confirm/mail-confirm.component.html | 0 .../mail-confirm/mail-confirm.component.scss | 0 .../mail-confirm/mail-confirm.component.ts | 0 .../mail-confirm/mail-confirm.module.ts | 0 .../register-2/register-2.component.html | 0 .../register-2/register-2.component.scss | 0 .../register-2/register-2.component.ts | 0 .../register-2/register-2.module.ts | 0 .../register/register.component.html | 0 .../register/register.component.scss | 0 .../register/register.component.ts | 0 .../register/register.module.ts | 0 .../reset-password-2.component.html | 0 .../reset-password-2.component.scss | 0 .../reset-password-2.component.ts | 0 .../reset-password-2.module.ts | 0 .../reset-password.component.html | 0 .../reset-password.component.scss | 0 .../reset-password.component.ts | 0 .../reset-password/reset-password.module.ts | 0 .../coming-soon/coming-soon.component.html | 0 .../coming-soon/coming-soon.component.scss | 0 .../coming-soon/coming-soon.component.ts | 0 .../pages/coming-soon/coming-soon.module.ts | 0 .../pages/errors/404/error-404.component.html | 0 .../pages/errors/404/error-404.component.scss | 0 .../pages/errors/404/error-404.component.ts | 0 .../pages/errors/404/error-404.module.ts | 0 .../pages/errors/500/error-500.component.html | 0 .../pages/errors/500/error-500.component.scss | 0 .../pages/errors/500/error-500.component.ts | 0 .../pages/errors/500/error-500.module.ts | 0 .../pages/faq/faq.component.html | 0 .../pages/faq/faq.component.scss | 0 .../{content => }/pages/faq/faq.component.ts | 0 .../{content => }/pages/faq/faq.module.ts | 0 .../{content => }/pages/faq/faq.service.ts | 0 .../invoices/compact/compact.component.html | 0 .../invoices/compact/compact.component.scss | 0 .../invoices/compact/compact.component.ts | 0 .../pages/invoices/compact/compact.module.ts | 0 .../pages/invoices/invoice.service.ts | 0 .../invoices/modern/modern.component.html | 0 .../invoices/modern/modern.component.scss | 0 .../pages/invoices/modern/modern.component.ts | 0 .../pages/invoices/modern/modern.module.ts | 0 .../dialogs/article/article.component.html | 0 .../dialogs/article/article.component.scss | 0 .../dialogs/article/article.component.ts | 0 .../knowledge-base.component.html | 0 .../knowledge-base.component.scss | 0 .../knowledge-base.component.ts | 0 .../knowledge-base/knowledge-base.module.ts | 0 .../knowledge-base/knowledge-base.service.ts | 0 .../maintenance/maintenance.component.html | 0 .../maintenance/maintenance.component.scss | 0 .../maintenance/maintenance.component.ts | 0 .../pages/maintenance/maintenence.module.ts | 0 .../main/{content => }/pages/pages.module.ts | 0 .../pages/pricing/pricing.module.ts | 0 .../pricing/style-1/style-1.component.html | 0 .../pricing/style-1/style-1.component.scss | 0 .../pricing/style-1/style-1.component.ts | 0 .../pricing/style-2/style-2.component.html | 0 .../pricing/style-2/style-2.component.scss | 0 .../pricing/style-2/style-2.component.ts | 0 .../pricing/style-3/style-3.component.html | 0 .../pricing/style-3/style-3.component.scss | 0 .../pricing/style-3/style-3.component.ts | 0 .../pages/profile/profile.component.html | 0 .../pages/profile/profile.component.scss | 0 .../pages/profile/profile.component.ts | 0 .../pages/profile/profile.module.ts | 0 .../pages/profile/profile.service.ts | 0 .../profile/tabs/about/about.component.html | 0 .../profile/tabs/about/about.component.scss | 0 .../profile/tabs/about/about.component.ts | 0 .../photos-videos.component.html | 0 .../photos-videos.component.scss | 0 .../photos-videos/photos-videos.component.ts | 0 .../tabs/timeline/timeline.component.html | 0 .../tabs/timeline/timeline.component.scss | 0 .../tabs/timeline/timeline.component.ts | 0 .../pages/search/search.component.html | 0 .../pages/search/search.component.scss | 0 .../pages/search/search.component.ts | 0 .../pages/search/search.module.ts | 0 .../pages/search/search.service.ts | 0 .../tabs/classic/classic.component.html | 0 .../tabs/classic/classic.component.scss | 0 .../search/tabs/classic/classic.component.ts | 0 .../search/tabs/table/table.component.html | 0 .../search/tabs/table/table.component.scss | 0 .../search/tabs/table/table.component.ts | 0 .../services/config/config.component.html | 0 .../services/config/config.component.scss | 0 .../services/config/config.component.ts | 0 .../{content => }/services/services.module.ts | 0 .../splash-screen.component.html | 0 .../splash-screen.component.scss | 0 .../splash-screen/splash-screen.component.ts | 0 .../ui/colors/colors.component.html | 0 .../ui/colors/colors.component.scss | 0 .../ui/colors/colors.component.ts | 0 .../{content => }/ui/colors/colors.module.ts | 0 .../ui/forms/forms.component.html | 0 .../ui/forms/forms.component.scss | 0 .../{content => }/ui/forms/forms.component.ts | 0 .../{content => }/ui/forms/forms.module.ts | 0 .../helper-classes.component.html | 0 .../helper-classes.component.scss | 0 .../helper-classes.component.ts | 0 .../helper-classes/helper-classes.module.ts | 0 .../padding-margin.component.html | 0 .../padding-margin.component.scss | 0 .../padding-margin.component.ts | 0 .../width-height/width-height.component.html | 0 .../width-height/width-height.component.scss | 0 .../width-height/width-height.component.ts | 0 .../ui/icons/icons.component.html | 0 .../ui/icons/icons.component.scss | 0 .../{content => }/ui/icons/icons.component.ts | 0 .../{content => }/ui/icons/icons.module.ts | 0 .../page-layouts/blank/blank.component.html | 0 .../page-layouts/blank/blank.component.scss | 0 .../ui/page-layouts/blank/blank.component.ts | 0 .../fullwidth-2/fullwidth-2.component.html | 0 .../fullwidth-2/fullwidth-2.component.scss | 0 .../fullwidth-2/fullwidth-2.component.ts | 0 .../carded/fullwidth/fullwidth.component.html | 0 .../carded/fullwidth/fullwidth.component.scss | 0 .../carded/fullwidth/fullwidth.component.ts | 0 .../left-sidenav-2-tabbed.component.html | 0 .../left-sidenav-2-tabbed.component.scss | 0 .../left-sidenav-2-tabbed.component.ts | 0 .../left-sidenav-2.component.html | 0 .../left-sidenav-2.component.scss | 0 .../left-sidenav-2.component.ts | 0 .../left-sidenav-tabbed.component.html | 0 .../left-sidenav-tabbed.component.scss | 0 .../left-sidenav-tabbed.component.ts | 0 .../left-sidenav/left-sidenav.component.html | 0 .../left-sidenav/left-sidenav.component.scss | 0 .../left-sidenav/left-sidenav.component.ts | 0 .../right-sidenav-2-tabbed.component.html | 0 .../right-sidenav-2-tabbed.component.scss | 0 .../right-sidenav-2-tabbed.component.ts | 0 .../right-sidenav-2.component.html | 0 .../right-sidenav-2.component.scss | 0 .../right-sidenav-2.component.ts | 0 .../right-sidenav-tabbed.component.html | 0 .../right-sidenav-tabbed.component.scss | 0 .../right-sidenav-tabbed.component.ts | 0 .../right-sidenav.component.html | 0 .../right-sidenav.component.scss | 0 .../right-sidenav/right-sidenav.component.ts | 0 .../ui/page-layouts/page-layouts.module.ts | 0 .../simple/fullwidth/fullwidth.component.html | 0 .../simple/fullwidth/fullwidth.component.scss | 0 .../simple/fullwidth/fullwidth.component.ts | 0 .../left-sidenav-2.component.html | 0 .../left-sidenav-2.component.scss | 0 .../left-sidenav-2.component.ts | 0 .../left-sidenav-3.component.html | 0 .../left-sidenav-3.component.scss | 0 .../left-sidenav-3.component.ts | 0 .../left-sidenav/left-sidenav.component.html | 0 .../left-sidenav/left-sidenav.component.scss | 0 .../left-sidenav/left-sidenav.component.ts | 0 .../right-sidenav-2.component.html | 0 .../right-sidenav-2.component.scss | 0 .../right-sidenav-2.component.ts | 0 .../right-sidenav-3.component.html | 0 .../right-sidenav-3.component.scss | 0 .../right-sidenav-3.component.ts | 0 .../right-sidenav.component.html | 0 .../right-sidenav.component.scss | 0 .../right-sidenav/right-sidenav.component.ts | 0 .../simple/tabbed/tabbed.component.html | 0 .../simple/tabbed/tabbed.component.scss | 0 .../simple/tabbed/tabbed.component.ts | 0 .../blockquotes-lists.component.html | 0 .../blockquotes-lists.component.scss | 0 .../blockquotes-lists.component.ts | 0 .../tabs/headings/headings.component.html | 0 .../tabs/headings/headings.component.scss | 0 .../tabs/headings/headings.component.ts | 0 .../tabs/helpers/helpers.component.html | 0 .../tabs/helpers/helpers.component.scss | 0 .../tabs/helpers/helpers.component.ts | 0 .../inline-text-elements.component.html | 0 .../inline-text-elements.component.scss | 0 .../inline-text-elements.component.ts | 0 .../ui/typography/typography.component.html | 0 .../ui/typography/typography.component.scss | 0 .../ui/typography/typography.component.ts | 0 .../ui/typography/typography.module.ts | 0 src/app/main/{content => }/ui/ui.module.ts | 0 538 files changed, 80 insertions(+), 130 deletions(-) create mode 100644 src/@fuse/components/layouts/layouts.module.ts rename src/{app/main/main.component.html => @fuse/components/layouts/vertical-nav/basic/basic.component.html} (100%) rename src/{app/main/main.component.scss => @fuse/components/layouts/vertical-nav/basic/basic.component.scss} (98%) create mode 100644 src/@fuse/components/layouts/vertical-nav/basic/basic.component.ts create mode 100644 src/app/layout/content/content.component.html rename src/app/{main => layout}/content/content.component.scss (100%) rename src/app/{main => layout}/content/content.component.ts (100%) rename src/app/{main => layout}/content/content.module.ts (83%) rename src/app/{main => layout}/footer/footer.component.html (100%) rename src/app/{main => layout}/footer/footer.component.scss (100%) rename src/app/{main => layout}/footer/footer.component.ts (100%) rename src/app/{main => layout}/footer/footer.module.ts (88%) rename src/app/{main => layout}/navbar/navbar.component.html (100%) rename src/app/{main => layout}/navbar/navbar.component.scss (98%) rename src/app/{main => layout}/navbar/navbar.component.ts (100%) rename src/app/{main => layout}/navbar/navbar.module.ts (88%) rename src/app/{main => layout}/quick-panel/quick-panel.component.html (100%) rename src/app/{main => layout}/quick-panel/quick-panel.component.scss (100%) rename src/app/{main => layout}/quick-panel/quick-panel.component.ts (100%) rename src/app/{main => layout}/quick-panel/quick-panel.module.ts (86%) rename src/app/{main => layout}/toolbar/toolbar.component.html (100%) rename src/app/{main => layout}/toolbar/toolbar.component.scss (96%) rename src/app/{main => layout}/toolbar/toolbar.component.ts (100%) rename src/app/{main => layout}/toolbar/toolbar.module.ts (90%) rename src/app/main/{content => }/apps/academy/academy.module.ts (100%) rename src/app/main/{content => }/apps/academy/course.service.ts (100%) rename src/app/main/{content => }/apps/academy/course/course.component.html (100%) rename src/app/main/{content => }/apps/academy/course/course.component.scss (100%) rename src/app/main/{content => }/apps/academy/course/course.component.ts (100%) rename src/app/main/{content => }/apps/academy/courses.service.ts (100%) rename src/app/main/{content => }/apps/academy/courses/courses.component.html (100%) rename src/app/main/{content => }/apps/academy/courses/courses.component.scss (100%) rename src/app/main/{content => }/apps/academy/courses/courses.component.ts (100%) rename src/app/main/{content => }/apps/apps.module.ts (100%) rename src/app/main/{content => }/apps/calendar/calendar.component.html (100%) rename src/app/main/{content => }/apps/calendar/calendar.component.scss (100%) rename src/app/main/{content => }/apps/calendar/calendar.component.ts (100%) rename src/app/main/{content => }/apps/calendar/calendar.module.ts (100%) rename src/app/main/{content => }/apps/calendar/calendar.service.ts (100%) rename src/app/main/{content => }/apps/calendar/event-form/event-form.component.html (100%) rename src/app/main/{content => }/apps/calendar/event-form/event-form.component.scss (100%) rename src/app/main/{content => }/apps/calendar/event-form/event-form.component.ts (100%) rename src/app/main/{content => }/apps/calendar/event.model.ts (100%) rename src/app/main/{content => }/apps/chat/chat-start/chat-start.component.html (100%) rename src/app/main/{content => }/apps/chat/chat-start/chat-start.component.scss (100%) rename src/app/main/{content => }/apps/chat/chat-start/chat-start.component.ts (100%) rename src/app/main/{content => }/apps/chat/chat-view/chat-view.component.html (100%) rename src/app/main/{content => }/apps/chat/chat-view/chat-view.component.scss (100%) rename src/app/main/{content => }/apps/chat/chat-view/chat-view.component.ts (100%) rename src/app/main/{content => }/apps/chat/chat.component.html (100%) rename src/app/main/{content => }/apps/chat/chat.component.scss (100%) rename src/app/main/{content => }/apps/chat/chat.component.ts (100%) rename src/app/main/{content => }/apps/chat/chat.module.ts (100%) rename src/app/main/{content => }/apps/chat/chat.service.ts (100%) rename src/app/main/{content => }/apps/chat/sidenavs/left/chats/chats.component.html (100%) rename src/app/main/{content => }/apps/chat/sidenavs/left/chats/chats.component.scss (100%) rename src/app/main/{content => }/apps/chat/sidenavs/left/chats/chats.component.ts (100%) rename src/app/main/{content => }/apps/chat/sidenavs/left/left.component.html (100%) rename src/app/main/{content => }/apps/chat/sidenavs/left/left.component.scss (100%) rename src/app/main/{content => }/apps/chat/sidenavs/left/left.component.ts (100%) rename src/app/main/{content => }/apps/chat/sidenavs/left/user/user.component.html (100%) rename src/app/main/{content => }/apps/chat/sidenavs/left/user/user.component.scss (100%) rename src/app/main/{content => }/apps/chat/sidenavs/left/user/user.component.ts (100%) rename src/app/main/{content => }/apps/chat/sidenavs/right/contact/contact.component.html (100%) rename src/app/main/{content => }/apps/chat/sidenavs/right/contact/contact.component.scss (100%) rename src/app/main/{content => }/apps/chat/sidenavs/right/contact/contact.component.ts (100%) rename src/app/main/{content => }/apps/chat/sidenavs/right/right.component.html (100%) rename src/app/main/{content => }/apps/chat/sidenavs/right/right.component.scss (100%) rename src/app/main/{content => }/apps/chat/sidenavs/right/right.component.ts (100%) rename src/app/main/{content => }/apps/contacts/contact-form/contact-form.component.html (100%) rename src/app/main/{content => }/apps/contacts/contact-form/contact-form.component.scss (100%) rename src/app/main/{content => }/apps/contacts/contact-form/contact-form.component.ts (100%) rename src/app/main/{content => }/apps/contacts/contact-list/contact-list.component.html (100%) rename src/app/main/{content => }/apps/contacts/contact-list/contact-list.component.scss (100%) rename src/app/main/{content => }/apps/contacts/contact-list/contact-list.component.ts (100%) rename src/app/main/{content => }/apps/contacts/contact.model.ts (100%) rename src/app/main/{content => }/apps/contacts/contacts.component.html (100%) rename src/app/main/{content => }/apps/contacts/contacts.component.scss (100%) rename src/app/main/{content => }/apps/contacts/contacts.component.ts (100%) rename src/app/main/{content => }/apps/contacts/contacts.module.ts (100%) rename src/app/main/{content => }/apps/contacts/contacts.service.ts (100%) rename src/app/main/{content => }/apps/contacts/selected-bar/selected-bar.component.html (100%) rename src/app/main/{content => }/apps/contacts/selected-bar/selected-bar.component.scss (100%) rename src/app/main/{content => }/apps/contacts/selected-bar/selected-bar.component.ts (100%) rename src/app/main/{content => }/apps/contacts/sidenavs/main/main.component.html (100%) rename src/app/main/{content => }/apps/contacts/sidenavs/main/main.component.scss (100%) rename src/app/main/{content => }/apps/contacts/sidenavs/main/main.component.ts (100%) rename src/app/main/{content => }/apps/dashboards/analytics/analytics.component.html (100%) rename src/app/main/{content => }/apps/dashboards/analytics/analytics.component.scss (100%) rename src/app/main/{content => }/apps/dashboards/analytics/analytics.component.ts (100%) rename src/app/main/{content => }/apps/dashboards/analytics/analytics.module.ts (100%) rename src/app/main/{content => }/apps/dashboards/analytics/analytics.service.ts (100%) rename src/app/main/{content => }/apps/dashboards/project/project.component.html (100%) rename src/app/main/{content => }/apps/dashboards/project/project.component.scss (100%) rename src/app/main/{content => }/apps/dashboards/project/project.component.ts (100%) rename src/app/main/{content => }/apps/dashboards/project/project.module.ts (100%) rename src/app/main/{content => }/apps/dashboards/project/project.service.ts (100%) rename src/app/main/{content => }/apps/e-commerce/dashboard/dashboard.component.html (100%) rename src/app/main/{content => }/apps/e-commerce/dashboard/dashboard.component.scss (100%) rename src/app/main/{content => }/apps/e-commerce/dashboard/dashboard.component.ts (100%) rename src/app/main/{content => }/apps/e-commerce/dashboard/dashboard.service.ts (100%) rename src/app/main/{content => }/apps/e-commerce/e-commerce.module.ts (100%) rename src/app/main/{content => }/apps/e-commerce/order/order-statuses.ts (100%) rename src/app/main/{content => }/apps/e-commerce/order/order.component.html (100%) rename src/app/main/{content => }/apps/e-commerce/order/order.component.scss (100%) rename src/app/main/{content => }/apps/e-commerce/order/order.component.ts (100%) rename src/app/main/{content => }/apps/e-commerce/order/order.model.ts (100%) rename src/app/main/{content => }/apps/e-commerce/order/order.service.ts (100%) rename src/app/main/{content => }/apps/e-commerce/orders/orders.component.html (100%) rename src/app/main/{content => }/apps/e-commerce/orders/orders.component.scss (100%) rename src/app/main/{content => }/apps/e-commerce/orders/orders.component.ts (100%) rename src/app/main/{content => }/apps/e-commerce/orders/orders.service.ts (100%) rename src/app/main/{content => }/apps/e-commerce/product/product.component.html (100%) rename src/app/main/{content => }/apps/e-commerce/product/product.component.scss (100%) rename src/app/main/{content => }/apps/e-commerce/product/product.component.ts (100%) rename src/app/main/{content => }/apps/e-commerce/product/product.model.ts (100%) rename src/app/main/{content => }/apps/e-commerce/product/product.service.ts (100%) rename src/app/main/{content => }/apps/e-commerce/products/products.component.html (100%) rename src/app/main/{content => }/apps/e-commerce/products/products.component.scss (100%) rename src/app/main/{content => }/apps/e-commerce/products/products.component.ts (100%) rename src/app/main/{content => }/apps/e-commerce/products/products.service.ts (100%) rename src/app/main/{content => }/apps/file-manager/file-list/file-list.component.html (100%) rename src/app/main/{content => }/apps/file-manager/file-list/file-list.component.scss (100%) rename src/app/main/{content => }/apps/file-manager/file-list/file-list.component.ts (100%) rename src/app/main/{content => }/apps/file-manager/file-manager.component.html (100%) rename src/app/main/{content => }/apps/file-manager/file-manager.component.scss (100%) rename src/app/main/{content => }/apps/file-manager/file-manager.component.ts (100%) rename src/app/main/{content => }/apps/file-manager/file-manager.module.ts (100%) rename src/app/main/{content => }/apps/file-manager/file-manager.service.ts (100%) rename src/app/main/{content => }/apps/file-manager/sidenavs/details/details.component.html (100%) rename src/app/main/{content => }/apps/file-manager/sidenavs/details/details.component.scss (100%) rename src/app/main/{content => }/apps/file-manager/sidenavs/details/details.component.ts (100%) rename src/app/main/{content => }/apps/file-manager/sidenavs/main/main.component.html (100%) rename src/app/main/{content => }/apps/file-manager/sidenavs/main/main.component.scss (100%) rename src/app/main/{content => }/apps/file-manager/sidenavs/main/main.component.ts (100%) rename src/app/main/{content => }/apps/mail-ngrx/dialogs/compose/compose.component.html (100%) rename src/app/main/{content => }/apps/mail-ngrx/dialogs/compose/compose.component.scss (100%) rename src/app/main/{content => }/apps/mail-ngrx/dialogs/compose/compose.component.ts (100%) rename src/app/main/{content => }/apps/mail-ngrx/i18n/en.ts (100%) rename src/app/main/{content => }/apps/mail-ngrx/i18n/tr.ts (100%) rename src/app/main/{content => }/apps/mail-ngrx/mail-details/mail-details.component.html (100%) rename src/app/main/{content => }/apps/mail-ngrx/mail-details/mail-details.component.scss (100%) rename src/app/main/{content => }/apps/mail-ngrx/mail-details/mail-details.component.ts (100%) rename src/app/main/{content => }/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.html (100%) rename src/app/main/{content => }/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.scss (100%) rename src/app/main/{content => }/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.ts (100%) rename src/app/main/{content => }/apps/mail-ngrx/mail-list/mail-list.component.html (100%) rename src/app/main/{content => }/apps/mail-ngrx/mail-list/mail-list.component.scss (100%) rename src/app/main/{content => }/apps/mail-ngrx/mail-list/mail-list.component.ts (100%) rename src/app/main/{content => }/apps/mail-ngrx/mail.component.html (100%) rename src/app/main/{content => }/apps/mail-ngrx/mail.component.scss (100%) rename src/app/main/{content => }/apps/mail-ngrx/mail.component.ts (100%) rename src/app/main/{content => }/apps/mail-ngrx/mail.model.ts (100%) rename src/app/main/{content => }/apps/mail-ngrx/mail.module.ts (100%) rename src/app/main/{content => }/apps/mail-ngrx/mail.service.ts (100%) rename src/app/main/{content => }/apps/mail-ngrx/sidenavs/main/main-sidenav.component.html (100%) rename src/app/main/{content => }/apps/mail-ngrx/sidenavs/main/main-sidenav.component.scss (100%) rename src/app/main/{content => }/apps/mail-ngrx/sidenavs/main/main-sidenav.component.ts (100%) rename src/app/main/{content => }/apps/mail-ngrx/store/actions/filters.actions.ts (100%) rename src/app/main/{content => }/apps/mail-ngrx/store/actions/folders.actions.ts (100%) rename src/app/main/{content => }/apps/mail-ngrx/store/actions/index.ts (100%) rename src/app/main/{content => }/apps/mail-ngrx/store/actions/labels.actions.ts (100%) rename src/app/main/{content => }/apps/mail-ngrx/store/actions/mails.actions.ts (100%) rename src/app/main/{content => }/apps/mail-ngrx/store/effects/filters.effects.ts (100%) rename src/app/main/{content => }/apps/mail-ngrx/store/effects/folders.effects.ts (100%) rename src/app/main/{content => }/apps/mail-ngrx/store/effects/index.ts (100%) rename src/app/main/{content => }/apps/mail-ngrx/store/effects/labels.effects.ts (100%) rename src/app/main/{content => }/apps/mail-ngrx/store/effects/mails.effects.ts (100%) rename src/app/main/{content => }/apps/mail-ngrx/store/guards/index.ts (100%) rename src/app/main/{content => }/apps/mail-ngrx/store/guards/resolve.guard.ts (100%) rename src/app/main/{content => }/apps/mail-ngrx/store/index.ts (100%) rename src/app/main/{content => }/apps/mail-ngrx/store/reducers/filters.reducer.ts (100%) rename src/app/main/{content => }/apps/mail-ngrx/store/reducers/folders.reducer.ts (100%) rename src/app/main/{content => }/apps/mail-ngrx/store/reducers/index.ts (100%) rename src/app/main/{content => }/apps/mail-ngrx/store/reducers/labels.reducer.ts (100%) rename src/app/main/{content => }/apps/mail-ngrx/store/reducers/mails.reducer.ts (100%) rename src/app/main/{content => }/apps/mail-ngrx/store/selectors/filters.selectors.ts (100%) rename src/app/main/{content => }/apps/mail-ngrx/store/selectors/folders.selectors.ts (100%) rename src/app/main/{content => }/apps/mail-ngrx/store/selectors/index.ts (100%) rename src/app/main/{content => }/apps/mail-ngrx/store/selectors/labels.selectors.ts (100%) rename src/app/main/{content => }/apps/mail-ngrx/store/selectors/mails.selectors.ts (100%) rename src/app/main/{content => }/apps/mail-ngrx/store/store.module.ts (100%) rename src/app/main/{content => }/apps/mail/dialogs/compose/compose.component.html (100%) rename src/app/main/{content => }/apps/mail/dialogs/compose/compose.component.scss (100%) rename src/app/main/{content => }/apps/mail/dialogs/compose/compose.component.ts (100%) rename src/app/main/{content => }/apps/mail/i18n/en.ts (100%) rename src/app/main/{content => }/apps/mail/i18n/tr.ts (100%) rename src/app/main/{content => }/apps/mail/mail-details/mail-details.component.html (100%) rename src/app/main/{content => }/apps/mail/mail-details/mail-details.component.scss (100%) rename src/app/main/{content => }/apps/mail/mail-details/mail-details.component.ts (100%) rename src/app/main/{content => }/apps/mail/mail-list/mail-list-item/mail-list-item.component.html (100%) rename src/app/main/{content => }/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss (100%) rename src/app/main/{content => }/apps/mail/mail-list/mail-list-item/mail-list-item.component.ts (100%) rename src/app/main/{content => }/apps/mail/mail-list/mail-list.component.html (100%) rename src/app/main/{content => }/apps/mail/mail-list/mail-list.component.scss (100%) rename src/app/main/{content => }/apps/mail/mail-list/mail-list.component.ts (100%) rename src/app/main/{content => }/apps/mail/mail.component.html (100%) rename src/app/main/{content => }/apps/mail/mail.component.scss (100%) rename src/app/main/{content => }/apps/mail/mail.component.ts (100%) rename src/app/main/{content => }/apps/mail/mail.model.ts (100%) rename src/app/main/{content => }/apps/mail/mail.module.ts (100%) rename src/app/main/{content => }/apps/mail/mail.service.ts (100%) rename src/app/main/{content => }/apps/mail/sidenavs/main/main-sidenav.component.html (100%) rename src/app/main/{content => }/apps/mail/sidenavs/main/main-sidenav.component.scss (100%) rename src/app/main/{content => }/apps/mail/sidenavs/main/main-sidenav.component.ts (100%) rename src/app/main/{content => }/apps/scrumboard/board.model.ts (100%) rename src/app/main/{content => }/apps/scrumboard/board/add-list/add-list.component.html (100%) rename src/app/main/{content => }/apps/scrumboard/board/add-list/add-list.component.scss (100%) rename src/app/main/{content => }/apps/scrumboard/board/add-list/add-list.component.ts (100%) rename src/app/main/{content => }/apps/scrumboard/board/board.component.html (100%) rename src/app/main/{content => }/apps/scrumboard/board/board.component.scss (100%) rename src/app/main/{content => }/apps/scrumboard/board/board.component.ts (100%) rename src/app/main/{content => }/apps/scrumboard/board/dialogs/card/card.component.html (100%) rename src/app/main/{content => }/apps/scrumboard/board/dialogs/card/card.component.scss (100%) rename src/app/main/{content => }/apps/scrumboard/board/dialogs/card/card.component.ts (100%) rename src/app/main/{content => }/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.html (100%) rename src/app/main/{content => }/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.scss (100%) rename src/app/main/{content => }/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.ts (100%) rename src/app/main/{content => }/apps/scrumboard/board/edit-board-name/edit-board-name.component.html (100%) rename src/app/main/{content => }/apps/scrumboard/board/edit-board-name/edit-board-name.component.scss (100%) rename src/app/main/{content => }/apps/scrumboard/board/edit-board-name/edit-board-name.component.ts (100%) rename src/app/main/{content => }/apps/scrumboard/board/list/add-card/add-card.component.html (100%) rename src/app/main/{content => }/apps/scrumboard/board/list/add-card/add-card.component.scss (100%) rename src/app/main/{content => }/apps/scrumboard/board/list/add-card/add-card.component.ts (100%) rename src/app/main/{content => }/apps/scrumboard/board/list/card/card.component.html (100%) rename src/app/main/{content => }/apps/scrumboard/board/list/card/card.component.scss (100%) rename src/app/main/{content => }/apps/scrumboard/board/list/card/card.component.ts (100%) rename src/app/main/{content => }/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.html (100%) rename src/app/main/{content => }/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.scss (100%) rename src/app/main/{content => }/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.ts (100%) rename src/app/main/{content => }/apps/scrumboard/board/list/list.component.html (100%) rename src/app/main/{content => }/apps/scrumboard/board/list/list.component.scss (100%) rename src/app/main/{content => }/apps/scrumboard/board/list/list.component.ts (100%) rename src/app/main/{content => }/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.html (100%) rename src/app/main/{content => }/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.scss (100%) rename src/app/main/{content => }/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.ts (100%) rename src/app/main/{content => }/apps/scrumboard/board/sidenavs/settings/settings.component.html (100%) rename src/app/main/{content => }/apps/scrumboard/board/sidenavs/settings/settings.component.scss (100%) rename src/app/main/{content => }/apps/scrumboard/board/sidenavs/settings/settings.component.ts (100%) rename src/app/main/{content => }/apps/scrumboard/card.model.ts (100%) rename src/app/main/{content => }/apps/scrumboard/list.model.ts (100%) rename src/app/main/{content => }/apps/scrumboard/scrumboard.component.html (100%) rename src/app/main/{content => }/apps/scrumboard/scrumboard.component.scss (100%) rename src/app/main/{content => }/apps/scrumboard/scrumboard.component.ts (100%) rename src/app/main/{content => }/apps/scrumboard/scrumboard.module.ts (100%) rename src/app/main/{content => }/apps/scrumboard/scrumboard.service.ts (100%) rename src/app/main/{content => }/apps/todo/sidenavs/main/main-sidenav.component.html (100%) rename src/app/main/{content => }/apps/todo/sidenavs/main/main-sidenav.component.scss (100%) rename src/app/main/{content => }/apps/todo/sidenavs/main/main-sidenav.component.ts (100%) rename src/app/main/{content => }/apps/todo/todo-details/todo-details.component.html (100%) rename src/app/main/{content => }/apps/todo/todo-details/todo-details.component.scss (100%) rename src/app/main/{content => }/apps/todo/todo-details/todo-details.component.ts (100%) rename src/app/main/{content => }/apps/todo/todo-list/todo-list-item/todo-list-item.component.html (100%) rename src/app/main/{content => }/apps/todo/todo-list/todo-list-item/todo-list-item.component.scss (100%) rename src/app/main/{content => }/apps/todo/todo-list/todo-list-item/todo-list-item.component.ts (100%) rename src/app/main/{content => }/apps/todo/todo-list/todo-list.component.html (100%) rename src/app/main/{content => }/apps/todo/todo-list/todo-list.component.scss (100%) rename src/app/main/{content => }/apps/todo/todo-list/todo-list.component.ts (100%) rename src/app/main/{content => }/apps/todo/todo.component.html (100%) rename src/app/main/{content => }/apps/todo/todo.component.scss (100%) rename src/app/main/{content => }/apps/todo/todo.component.ts (100%) rename src/app/main/{content => }/apps/todo/todo.model.ts (100%) rename src/app/main/{content => }/apps/todo/todo.module.ts (100%) rename src/app/main/{content => }/apps/todo/todo.service.ts (100%) rename src/app/main/{content => }/components-third-party/components-third-party.module.ts (100%) rename src/app/main/{content => }/components-third-party/datatable/ngx-datatable.component.html (100%) rename src/app/main/{content => }/components-third-party/datatable/ngx-datatable.component.scss (100%) rename src/app/main/{content => }/components-third-party/datatable/ngx-datatable.component.ts (100%) rename src/app/main/{content => }/components-third-party/google-maps/google-maps.component.html (100%) rename src/app/main/{content => }/components-third-party/google-maps/google-maps.component.scss (100%) rename src/app/main/{content => }/components-third-party/google-maps/google-maps.component.ts (100%) rename src/app/main/{content => }/components-third-party/google-maps/google-maps.module.ts (100%) rename src/app/main/{content => }/components/angular-material/angular-material.component.html (100%) rename src/app/main/{content => }/components/angular-material/angular-material.component.scss (100%) rename src/app/main/{content => }/components/angular-material/angular-material.component.ts (100%) rename src/app/main/{content => }/components/angular-material/angular-material.module.ts (100%) rename src/app/main/{content => }/components/angular-material/example-components.ts (100%) rename src/app/main/{content => }/components/angular-material/example-viewer/example-viewer.html (100%) rename src/app/main/{content => }/components/angular-material/example-viewer/example-viewer.scss (100%) rename src/app/main/{content => }/components/angular-material/example-viewer/example-viewer.ts (100%) rename src/app/main/{content => }/components/angular-material/material.module.ts (100%) rename src/app/main/{content => }/components/cards/cards.component.html (100%) rename src/app/main/{content => }/components/cards/cards.component.scss (100%) rename src/app/main/{content => }/components/cards/cards.component.ts (100%) rename src/app/main/{content => }/components/components.module.ts (100%) rename src/app/main/{content => }/components/countdown/countdown.component.html (100%) rename src/app/main/{content => }/components/countdown/countdown.component.scss (100%) rename src/app/main/{content => }/components/countdown/countdown.component.ts (100%) rename src/app/main/{content => }/components/highlight/highlight.component.html (100%) rename src/app/main/{content => }/components/highlight/highlight.component.scss (100%) rename src/app/main/{content => }/components/highlight/highlight.component.ts (100%) rename src/app/main/{content => }/components/material-color-picker/material-color-picker.component.html (100%) rename src/app/main/{content => }/components/material-color-picker/material-color-picker.component.scss (100%) rename src/app/main/{content => }/components/material-color-picker/material-color-picker.component.ts (100%) rename src/app/main/{content => }/components/multi-language/multi-language.component.html (100%) rename src/app/main/{content => }/components/multi-language/multi-language.component.scss (100%) rename src/app/main/{content => }/components/multi-language/multi-language.component.ts (100%) rename src/app/main/{content => }/components/navigation/navigation.component.html (100%) rename src/app/main/{content => }/components/navigation/navigation.component.scss (100%) rename src/app/main/{content => }/components/navigation/navigation.component.ts (100%) rename src/app/main/{content => }/components/search-bar/search-bar.component.html (100%) rename src/app/main/{content => }/components/search-bar/search-bar.component.scss (100%) rename src/app/main/{content => }/components/search-bar/search-bar.component.ts (100%) rename src/app/main/{content => }/components/shortcuts/shortcuts.component.html (100%) rename src/app/main/{content => }/components/shortcuts/shortcuts.component.scss (100%) rename src/app/main/{content => }/components/shortcuts/shortcuts.component.ts (100%) rename src/app/main/{content => }/components/sidebar/sidebar.component.html (100%) rename src/app/main/{content => }/components/sidebar/sidebar.component.scss (100%) rename src/app/main/{content => }/components/sidebar/sidebar.component.ts (100%) rename src/app/main/{content => }/components/widget/widget.component.html (100%) rename src/app/main/{content => }/components/widget/widget.component.scss (100%) rename src/app/main/{content => }/components/widget/widget.component.ts (100%) delete mode 100644 src/app/main/content/content.component.html delete mode 100644 src/app/main/main.component.ts delete mode 100644 src/app/main/main.module.ts rename src/app/main/{content => }/pages/authentication/forgot-password-2/forgot-password-2.component.html (100%) rename src/app/main/{content => }/pages/authentication/forgot-password-2/forgot-password-2.component.scss (100%) rename src/app/main/{content => }/pages/authentication/forgot-password-2/forgot-password-2.component.ts (100%) rename src/app/main/{content => }/pages/authentication/forgot-password-2/forgot-password-2.module.ts (100%) rename src/app/main/{content => }/pages/authentication/forgot-password/forgot-password.component.html (100%) rename src/app/main/{content => }/pages/authentication/forgot-password/forgot-password.component.scss (100%) rename src/app/main/{content => }/pages/authentication/forgot-password/forgot-password.component.ts (100%) rename src/app/main/{content => }/pages/authentication/forgot-password/forgot-password.module.ts (100%) rename src/app/main/{content => }/pages/authentication/lock/lock.component.html (100%) rename src/app/main/{content => }/pages/authentication/lock/lock.component.scss (100%) rename src/app/main/{content => }/pages/authentication/lock/lock.component.ts (100%) rename src/app/main/{content => }/pages/authentication/lock/lock.module.ts (100%) rename src/app/main/{content => }/pages/authentication/login-2/login-2.component.html (100%) rename src/app/main/{content => }/pages/authentication/login-2/login-2.component.scss (100%) rename src/app/main/{content => }/pages/authentication/login-2/login-2.component.ts (100%) rename src/app/main/{content => }/pages/authentication/login-2/login-2.module.ts (100%) rename src/app/main/{content => }/pages/authentication/login/login.component.html (100%) rename src/app/main/{content => }/pages/authentication/login/login.component.scss (100%) rename src/app/main/{content => }/pages/authentication/login/login.component.ts (100%) rename src/app/main/{content => }/pages/authentication/login/login.module.ts (100%) rename src/app/main/{content => }/pages/authentication/mail-confirm/mail-confirm.component.html (100%) rename src/app/main/{content => }/pages/authentication/mail-confirm/mail-confirm.component.scss (100%) rename src/app/main/{content => }/pages/authentication/mail-confirm/mail-confirm.component.ts (100%) rename src/app/main/{content => }/pages/authentication/mail-confirm/mail-confirm.module.ts (100%) rename src/app/main/{content => }/pages/authentication/register-2/register-2.component.html (100%) rename src/app/main/{content => }/pages/authentication/register-2/register-2.component.scss (100%) rename src/app/main/{content => }/pages/authentication/register-2/register-2.component.ts (100%) rename src/app/main/{content => }/pages/authentication/register-2/register-2.module.ts (100%) rename src/app/main/{content => }/pages/authentication/register/register.component.html (100%) rename src/app/main/{content => }/pages/authentication/register/register.component.scss (100%) rename src/app/main/{content => }/pages/authentication/register/register.component.ts (100%) rename src/app/main/{content => }/pages/authentication/register/register.module.ts (100%) rename src/app/main/{content => }/pages/authentication/reset-password-2/reset-password-2.component.html (100%) rename src/app/main/{content => }/pages/authentication/reset-password-2/reset-password-2.component.scss (100%) rename src/app/main/{content => }/pages/authentication/reset-password-2/reset-password-2.component.ts (100%) rename src/app/main/{content => }/pages/authentication/reset-password-2/reset-password-2.module.ts (100%) rename src/app/main/{content => }/pages/authentication/reset-password/reset-password.component.html (100%) rename src/app/main/{content => }/pages/authentication/reset-password/reset-password.component.scss (100%) rename src/app/main/{content => }/pages/authentication/reset-password/reset-password.component.ts (100%) rename src/app/main/{content => }/pages/authentication/reset-password/reset-password.module.ts (100%) rename src/app/main/{content => }/pages/coming-soon/coming-soon.component.html (100%) rename src/app/main/{content => }/pages/coming-soon/coming-soon.component.scss (100%) rename src/app/main/{content => }/pages/coming-soon/coming-soon.component.ts (100%) rename src/app/main/{content => }/pages/coming-soon/coming-soon.module.ts (100%) rename src/app/main/{content => }/pages/errors/404/error-404.component.html (100%) rename src/app/main/{content => }/pages/errors/404/error-404.component.scss (100%) rename src/app/main/{content => }/pages/errors/404/error-404.component.ts (100%) rename src/app/main/{content => }/pages/errors/404/error-404.module.ts (100%) rename src/app/main/{content => }/pages/errors/500/error-500.component.html (100%) rename src/app/main/{content => }/pages/errors/500/error-500.component.scss (100%) rename src/app/main/{content => }/pages/errors/500/error-500.component.ts (100%) rename src/app/main/{content => }/pages/errors/500/error-500.module.ts (100%) rename src/app/main/{content => }/pages/faq/faq.component.html (100%) rename src/app/main/{content => }/pages/faq/faq.component.scss (100%) rename src/app/main/{content => }/pages/faq/faq.component.ts (100%) rename src/app/main/{content => }/pages/faq/faq.module.ts (100%) rename src/app/main/{content => }/pages/faq/faq.service.ts (100%) rename src/app/main/{content => }/pages/invoices/compact/compact.component.html (100%) rename src/app/main/{content => }/pages/invoices/compact/compact.component.scss (100%) rename src/app/main/{content => }/pages/invoices/compact/compact.component.ts (100%) rename src/app/main/{content => }/pages/invoices/compact/compact.module.ts (100%) rename src/app/main/{content => }/pages/invoices/invoice.service.ts (100%) rename src/app/main/{content => }/pages/invoices/modern/modern.component.html (100%) rename src/app/main/{content => }/pages/invoices/modern/modern.component.scss (100%) rename src/app/main/{content => }/pages/invoices/modern/modern.component.ts (100%) rename src/app/main/{content => }/pages/invoices/modern/modern.module.ts (100%) rename src/app/main/{content => }/pages/knowledge-base/dialogs/article/article.component.html (100%) rename src/app/main/{content => }/pages/knowledge-base/dialogs/article/article.component.scss (100%) rename src/app/main/{content => }/pages/knowledge-base/dialogs/article/article.component.ts (100%) rename src/app/main/{content => }/pages/knowledge-base/knowledge-base.component.html (100%) rename src/app/main/{content => }/pages/knowledge-base/knowledge-base.component.scss (100%) rename src/app/main/{content => }/pages/knowledge-base/knowledge-base.component.ts (100%) rename src/app/main/{content => }/pages/knowledge-base/knowledge-base.module.ts (100%) rename src/app/main/{content => }/pages/knowledge-base/knowledge-base.service.ts (100%) rename src/app/main/{content => }/pages/maintenance/maintenance.component.html (100%) rename src/app/main/{content => }/pages/maintenance/maintenance.component.scss (100%) rename src/app/main/{content => }/pages/maintenance/maintenance.component.ts (100%) rename src/app/main/{content => }/pages/maintenance/maintenence.module.ts (100%) rename src/app/main/{content => }/pages/pages.module.ts (100%) rename src/app/main/{content => }/pages/pricing/pricing.module.ts (100%) rename src/app/main/{content => }/pages/pricing/style-1/style-1.component.html (100%) rename src/app/main/{content => }/pages/pricing/style-1/style-1.component.scss (100%) rename src/app/main/{content => }/pages/pricing/style-1/style-1.component.ts (100%) rename src/app/main/{content => }/pages/pricing/style-2/style-2.component.html (100%) rename src/app/main/{content => }/pages/pricing/style-2/style-2.component.scss (100%) rename src/app/main/{content => }/pages/pricing/style-2/style-2.component.ts (100%) rename src/app/main/{content => }/pages/pricing/style-3/style-3.component.html (100%) rename src/app/main/{content => }/pages/pricing/style-3/style-3.component.scss (100%) rename src/app/main/{content => }/pages/pricing/style-3/style-3.component.ts (100%) rename src/app/main/{content => }/pages/profile/profile.component.html (100%) rename src/app/main/{content => }/pages/profile/profile.component.scss (100%) rename src/app/main/{content => }/pages/profile/profile.component.ts (100%) rename src/app/main/{content => }/pages/profile/profile.module.ts (100%) rename src/app/main/{content => }/pages/profile/profile.service.ts (100%) rename src/app/main/{content => }/pages/profile/tabs/about/about.component.html (100%) rename src/app/main/{content => }/pages/profile/tabs/about/about.component.scss (100%) rename src/app/main/{content => }/pages/profile/tabs/about/about.component.ts (100%) rename src/app/main/{content => }/pages/profile/tabs/photos-videos/photos-videos.component.html (100%) rename src/app/main/{content => }/pages/profile/tabs/photos-videos/photos-videos.component.scss (100%) rename src/app/main/{content => }/pages/profile/tabs/photos-videos/photos-videos.component.ts (100%) rename src/app/main/{content => }/pages/profile/tabs/timeline/timeline.component.html (100%) rename src/app/main/{content => }/pages/profile/tabs/timeline/timeline.component.scss (100%) rename src/app/main/{content => }/pages/profile/tabs/timeline/timeline.component.ts (100%) rename src/app/main/{content => }/pages/search/search.component.html (100%) rename src/app/main/{content => }/pages/search/search.component.scss (100%) rename src/app/main/{content => }/pages/search/search.component.ts (100%) rename src/app/main/{content => }/pages/search/search.module.ts (100%) rename src/app/main/{content => }/pages/search/search.service.ts (100%) rename src/app/main/{content => }/pages/search/tabs/classic/classic.component.html (100%) rename src/app/main/{content => }/pages/search/tabs/classic/classic.component.scss (100%) rename src/app/main/{content => }/pages/search/tabs/classic/classic.component.ts (100%) rename src/app/main/{content => }/pages/search/tabs/table/table.component.html (100%) rename src/app/main/{content => }/pages/search/tabs/table/table.component.scss (100%) rename src/app/main/{content => }/pages/search/tabs/table/table.component.ts (100%) rename src/app/main/{content => }/services/config/config.component.html (100%) rename src/app/main/{content => }/services/config/config.component.scss (100%) rename src/app/main/{content => }/services/config/config.component.ts (100%) rename src/app/main/{content => }/services/services.module.ts (100%) rename src/app/main/{content => }/services/splash-screen/splash-screen.component.html (100%) rename src/app/main/{content => }/services/splash-screen/splash-screen.component.scss (100%) rename src/app/main/{content => }/services/splash-screen/splash-screen.component.ts (100%) rename src/app/main/{content => }/ui/colors/colors.component.html (100%) rename src/app/main/{content => }/ui/colors/colors.component.scss (100%) rename src/app/main/{content => }/ui/colors/colors.component.ts (100%) rename src/app/main/{content => }/ui/colors/colors.module.ts (100%) rename src/app/main/{content => }/ui/forms/forms.component.html (100%) rename src/app/main/{content => }/ui/forms/forms.component.scss (100%) rename src/app/main/{content => }/ui/forms/forms.component.ts (100%) rename src/app/main/{content => }/ui/forms/forms.module.ts (100%) rename src/app/main/{content => }/ui/helper-classes/helper-classes.component.html (100%) rename src/app/main/{content => }/ui/helper-classes/helper-classes.component.scss (100%) rename src/app/main/{content => }/ui/helper-classes/helper-classes.component.ts (100%) rename src/app/main/{content => }/ui/helper-classes/helper-classes.module.ts (100%) rename src/app/main/{content => }/ui/helper-classes/tabs/padding-margin/padding-margin.component.html (100%) rename src/app/main/{content => }/ui/helper-classes/tabs/padding-margin/padding-margin.component.scss (100%) rename src/app/main/{content => }/ui/helper-classes/tabs/padding-margin/padding-margin.component.ts (100%) rename src/app/main/{content => }/ui/helper-classes/tabs/width-height/width-height.component.html (100%) rename src/app/main/{content => }/ui/helper-classes/tabs/width-height/width-height.component.scss (100%) rename src/app/main/{content => }/ui/helper-classes/tabs/width-height/width-height.component.ts (100%) rename src/app/main/{content => }/ui/icons/icons.component.html (100%) rename src/app/main/{content => }/ui/icons/icons.component.scss (100%) rename src/app/main/{content => }/ui/icons/icons.component.ts (100%) rename src/app/main/{content => }/ui/icons/icons.module.ts (100%) rename src/app/main/{content => }/ui/page-layouts/blank/blank.component.html (100%) rename src/app/main/{content => }/ui/page-layouts/blank/blank.component.scss (100%) rename src/app/main/{content => }/ui/page-layouts/blank/blank.component.ts (100%) rename src/app/main/{content => }/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html (100%) rename src/app/main/{content => }/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.scss (100%) rename src/app/main/{content => }/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.ts (100%) rename src/app/main/{content => }/ui/page-layouts/carded/fullwidth/fullwidth.component.html (100%) rename src/app/main/{content => }/ui/page-layouts/carded/fullwidth/fullwidth.component.scss (100%) rename src/app/main/{content => }/ui/page-layouts/carded/fullwidth/fullwidth.component.ts (100%) rename src/app/main/{content => }/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.html (100%) rename src/app/main/{content => }/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.scss (100%) rename src/app/main/{content => }/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.ts (100%) rename src/app/main/{content => }/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html (100%) rename src/app/main/{content => }/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.scss (100%) rename src/app/main/{content => }/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.ts (100%) rename src/app/main/{content => }/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.html (100%) rename src/app/main/{content => }/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.scss (100%) rename src/app/main/{content => }/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.ts (100%) rename src/app/main/{content => }/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html (100%) rename src/app/main/{content => }/ui/page-layouts/carded/left-sidenav/left-sidenav.component.scss (100%) rename src/app/main/{content => }/ui/page-layouts/carded/left-sidenav/left-sidenav.component.ts (100%) rename src/app/main/{content => }/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.html (100%) rename src/app/main/{content => }/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.scss (100%) rename src/app/main/{content => }/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.ts (100%) rename src/app/main/{content => }/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html (100%) rename src/app/main/{content => }/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.scss (100%) rename src/app/main/{content => }/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.ts (100%) rename src/app/main/{content => }/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.html (100%) rename src/app/main/{content => }/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.scss (100%) rename src/app/main/{content => }/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.ts (100%) rename src/app/main/{content => }/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html (100%) rename src/app/main/{content => }/ui/page-layouts/carded/right-sidenav/right-sidenav.component.scss (100%) rename src/app/main/{content => }/ui/page-layouts/carded/right-sidenav/right-sidenav.component.ts (100%) rename src/app/main/{content => }/ui/page-layouts/page-layouts.module.ts (100%) rename src/app/main/{content => }/ui/page-layouts/simple/fullwidth/fullwidth.component.html (100%) rename src/app/main/{content => }/ui/page-layouts/simple/fullwidth/fullwidth.component.scss (100%) rename src/app/main/{content => }/ui/page-layouts/simple/fullwidth/fullwidth.component.ts (100%) rename src/app/main/{content => }/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html (100%) rename src/app/main/{content => }/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.scss (100%) rename src/app/main/{content => }/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.ts (100%) rename src/app/main/{content => }/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.html (100%) rename src/app/main/{content => }/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.scss (100%) rename src/app/main/{content => }/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.ts (100%) rename src/app/main/{content => }/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html (100%) rename src/app/main/{content => }/ui/page-layouts/simple/left-sidenav/left-sidenav.component.scss (100%) rename src/app/main/{content => }/ui/page-layouts/simple/left-sidenav/left-sidenav.component.ts (100%) rename src/app/main/{content => }/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html (100%) rename src/app/main/{content => }/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.scss (100%) rename src/app/main/{content => }/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.ts (100%) rename src/app/main/{content => }/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.html (100%) rename src/app/main/{content => }/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.scss (100%) rename src/app/main/{content => }/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.ts (100%) rename src/app/main/{content => }/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html (100%) rename src/app/main/{content => }/ui/page-layouts/simple/right-sidenav/right-sidenav.component.scss (100%) rename src/app/main/{content => }/ui/page-layouts/simple/right-sidenav/right-sidenav.component.ts (100%) rename src/app/main/{content => }/ui/page-layouts/simple/tabbed/tabbed.component.html (100%) rename src/app/main/{content => }/ui/page-layouts/simple/tabbed/tabbed.component.scss (100%) rename src/app/main/{content => }/ui/page-layouts/simple/tabbed/tabbed.component.ts (100%) rename src/app/main/{content => }/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.html (100%) rename src/app/main/{content => }/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.scss (100%) rename src/app/main/{content => }/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.ts (100%) rename src/app/main/{content => }/ui/typography/tabs/headings/headings.component.html (100%) rename src/app/main/{content => }/ui/typography/tabs/headings/headings.component.scss (100%) rename src/app/main/{content => }/ui/typography/tabs/headings/headings.component.ts (100%) rename src/app/main/{content => }/ui/typography/tabs/helpers/helpers.component.html (100%) rename src/app/main/{content => }/ui/typography/tabs/helpers/helpers.component.scss (100%) rename src/app/main/{content => }/ui/typography/tabs/helpers/helpers.component.ts (100%) rename src/app/main/{content => }/ui/typography/tabs/inline-text-elements/inline-text-elements.component.html (100%) rename src/app/main/{content => }/ui/typography/tabs/inline-text-elements/inline-text-elements.component.scss (100%) rename src/app/main/{content => }/ui/typography/tabs/inline-text-elements/inline-text-elements.component.ts (100%) rename src/app/main/{content => }/ui/typography/typography.component.html (100%) rename src/app/main/{content => }/ui/typography/typography.component.scss (100%) rename src/app/main/{content => }/ui/typography/typography.component.ts (100%) rename src/app/main/{content => }/ui/typography/typography.module.ts (100%) rename src/app/main/{content => }/ui/ui.module.ts (100%) diff --git a/src/@fuse/components/index.ts b/src/@fuse/components/index.ts index 0a8fb885..1cbd9d98 100644 --- a/src/@fuse/components/index.ts +++ b/src/@fuse/components/index.ts @@ -2,6 +2,7 @@ export * from './confirm-dialog/confirm-dialog.module'; export * from './countdown/countdown.module'; export * from './demo/demo.module'; export * from './highlight/highlight.module'; +export * from './layouts/layouts.module'; export * from './material-color-picker/material-color-picker.module'; export * from './navigation/navigation.module'; export * from './search-bar/search-bar.module'; diff --git a/src/@fuse/components/layouts/layouts.module.ts b/src/@fuse/components/layouts/layouts.module.ts new file mode 100644 index 00000000..c63b7335 --- /dev/null +++ b/src/@fuse/components/layouts/layouts.module.ts @@ -0,0 +1,19 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { FuseVerticalNavBasicLayoutComponent } from '@fuse/components/layouts/vertical-nav/basic/basic.component'; + +@NgModule({ + declarations: [ + FuseVerticalNavBasicLayoutComponent + ], + imports : [ + CommonModule + ], + exports : [ + FuseVerticalNavBasicLayoutComponent + ] +}) +export class FuseLayoutsModule +{ +} diff --git a/src/app/main/main.component.html b/src/@fuse/components/layouts/vertical-nav/basic/basic.component.html similarity index 100% rename from src/app/main/main.component.html rename to src/@fuse/components/layouts/vertical-nav/basic/basic.component.html diff --git a/src/app/main/main.component.scss b/src/@fuse/components/layouts/vertical-nav/basic/basic.component.scss similarity index 98% rename from src/app/main/main.component.scss rename to src/@fuse/components/layouts/vertical-nav/basic/basic.component.scss index c677d9e3..793e79b4 100644 --- a/src/app/main/main.component.scss +++ b/src/@fuse/components/layouts/vertical-nav/basic/basic.component.scss @@ -1,6 +1,6 @@ @import "src/@fuse/scss/fuse"; -fuse-main { +fuse-vertical-nav-basic-layout { display: flex; flex-direction: column; width: 100%; diff --git a/src/@fuse/components/layouts/vertical-nav/basic/basic.component.ts b/src/@fuse/components/layouts/vertical-nav/basic/basic.component.ts new file mode 100644 index 00000000..17a17f17 --- /dev/null +++ b/src/@fuse/components/layouts/vertical-nav/basic/basic.component.ts @@ -0,0 +1,14 @@ +import { Component, ViewEncapsulation } from '@angular/core'; + +@Component({ + selector : 'fuse-vertical-nav-basic-layout', + templateUrl : './basic.component.html', + styleUrls : ['./basic.component.scss'], + encapsulation: ViewEncapsulation.None +}) +export class FuseVerticalNavBasicLayoutComponent +{ + constructor() + { + } +} diff --git a/src/@fuse/components/theme-options/theme-options.component.html b/src/@fuse/components/theme-options/theme-options.component.html index 71b95e66..57d63d2d 100644 --- a/src/@fuse/components/theme-options/theme-options.component.html +++ b/src/@fuse/components/theme-options/theme-options.component.html @@ -12,6 +12,14 @@
+

Layout:

+ + Vertical + Horizontal + None + +

Navigation:

diff --git a/src/app/app.component.html b/src/app/app.component.html index fe7f33a6..720092b3 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1 +1,8 @@ - + + + + + + + + \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 44ea53db..a9b4fa1b 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -8,39 +8,39 @@ import { TranslateModule } from '@ngx-translate/core'; import 'hammerjs'; import { FuseModule } from '@fuse/fuse.module'; +import { FuseLayoutsModule } from '@fuse/components'; import { FuseSharedModule } from '@fuse/shared.module'; import { fuseConfig } from './fuse-config'; import { AppComponent } from './app.component'; import { FuseFakeDbService } from './fuse-fake-db/fuse-fake-db.service'; -import { FuseMainModule } from './main/main.module'; import { AppStoreModule } from './store/store.module'; const appRoutes: Routes = [ { path : 'apps', - loadChildren: './main/content/apps/apps.module#FuseAppsModule' + loadChildren: './main/apps/apps.module#FuseAppsModule' }, { path : 'pages', - loadChildren: './main/content/pages/pages.module#FusePagesModule' + loadChildren: './main/pages/pages.module#FusePagesModule' }, { path : 'ui', - loadChildren: './main/content/ui/ui.module#FuseUIModule' + loadChildren: './main/ui/ui.module#FuseUIModule' }, { path : 'services', - loadChildren: './main/content/services/services.module#FuseServicesModule' + loadChildren: './main/services/services.module#FuseServicesModule' }, { path : 'components', - loadChildren: './main/content/components/components.module#FuseComponentsModule' + loadChildren: './main/components/components.module#FuseComponentsModule' }, { path : 'components-third-party', - loadChildren: './main/content/components-third-party/components-third-party.module#FuseComponentsThirdPartyModule' + loadChildren: './main/components-third-party/components-third-party.module#FuseComponentsThirdPartyModule' }, { path : '**', @@ -66,10 +66,10 @@ const appRoutes: Routes = [ // Fuse Main and Shared modules FuseModule.forRoot(fuseConfig), + FuseLayoutsModule, FuseSharedModule, - AppStoreModule, - FuseMainModule + AppStoreModule ], bootstrap : [ AppComponent diff --git a/src/app/fuse-config.ts b/src/app/fuse-config.ts index 0cdd3de8..15c37aa7 100644 --- a/src/app/fuse-config.ts +++ b/src/app/fuse-config.ts @@ -7,8 +7,13 @@ */ export const fuseConfig = { layout : { - navigation : 'left', // 'right', 'left', 'top', 'none' - navigationFolded: false, // true, false + style : 'vertical', + navigation: { + position: 'left', + folded : false + }, + // navigation : 'left', // 'right', 'left', 'top', 'none' + // navigationFolded: false, // true, false toolbar : 'below', // 'above', 'below', 'none' footer : 'below', // 'above', 'below', 'none' mode : 'fullwidth' // 'boxed', 'fullwidth' diff --git a/src/app/layout/content/content.component.html b/src/app/layout/content/content.component.html new file mode 100644 index 00000000..3a361ae6 --- /dev/null +++ b/src/app/layout/content/content.component.html @@ -0,0 +1,6 @@ + + \ No newline at end of file diff --git a/src/app/main/content/content.component.scss b/src/app/layout/content/content.component.scss similarity index 100% rename from src/app/main/content/content.component.scss rename to src/app/layout/content/content.component.scss diff --git a/src/app/main/content/content.component.ts b/src/app/layout/content/content.component.ts similarity index 100% rename from src/app/main/content/content.component.ts rename to src/app/layout/content/content.component.ts diff --git a/src/app/main/content/content.module.ts b/src/app/layout/content/content.module.ts similarity index 83% rename from src/app/main/content/content.module.ts rename to src/app/layout/content/content.module.ts index bbccf91f..2be7d794 100644 --- a/src/app/main/content/content.module.ts +++ b/src/app/layout/content/content.module.ts @@ -3,7 +3,7 @@ import { RouterModule } from '@angular/router'; import { FuseSharedModule } from '@fuse/shared.module'; -import { FuseContentComponent } from 'app/main/content/content.component'; +import { FuseContentComponent } from 'app/layout/content/content.component'; @NgModule({ declarations: [ diff --git a/src/app/main/footer/footer.component.html b/src/app/layout/footer/footer.component.html similarity index 100% rename from src/app/main/footer/footer.component.html rename to src/app/layout/footer/footer.component.html diff --git a/src/app/main/footer/footer.component.scss b/src/app/layout/footer/footer.component.scss similarity index 100% rename from src/app/main/footer/footer.component.scss rename to src/app/layout/footer/footer.component.scss diff --git a/src/app/main/footer/footer.component.ts b/src/app/layout/footer/footer.component.ts similarity index 100% rename from src/app/main/footer/footer.component.ts rename to src/app/layout/footer/footer.component.ts diff --git a/src/app/main/footer/footer.module.ts b/src/app/layout/footer/footer.module.ts similarity index 88% rename from src/app/main/footer/footer.module.ts rename to src/app/layout/footer/footer.module.ts index a7c26d66..10b7c9e1 100644 --- a/src/app/main/footer/footer.module.ts +++ b/src/app/layout/footer/footer.module.ts @@ -4,7 +4,7 @@ import { MatButtonModule, MatIconModule, MatToolbarModule } from '@angular/mater import { FuseSharedModule } from '@fuse/shared.module'; -import { FuseFooterComponent } from 'app/main/footer/footer.component'; +import { FuseFooterComponent } from 'app/layout/footer/footer.component'; @NgModule({ declarations: [ diff --git a/src/app/main/navbar/navbar.component.html b/src/app/layout/navbar/navbar.component.html similarity index 100% rename from src/app/main/navbar/navbar.component.html rename to src/app/layout/navbar/navbar.component.html diff --git a/src/app/main/navbar/navbar.component.scss b/src/app/layout/navbar/navbar.component.scss similarity index 98% rename from src/app/main/navbar/navbar.component.scss rename to src/app/layout/navbar/navbar.component.scss index bc12ef87..0a09af21 100644 --- a/src/app/main/navbar/navbar.component.scss +++ b/src/app/layout/navbar/navbar.component.scss @@ -1,4 +1,4 @@ -@import "src/@fuse/scss/fuse"; +@import "../../../@fuse/scss/fuse"; body { diff --git a/src/app/main/navbar/navbar.component.ts b/src/app/layout/navbar/navbar.component.ts similarity index 100% rename from src/app/main/navbar/navbar.component.ts rename to src/app/layout/navbar/navbar.component.ts diff --git a/src/app/main/navbar/navbar.module.ts b/src/app/layout/navbar/navbar.module.ts similarity index 88% rename from src/app/main/navbar/navbar.module.ts rename to src/app/layout/navbar/navbar.module.ts index c3da75e6..589de6d9 100644 --- a/src/app/main/navbar/navbar.module.ts +++ b/src/app/layout/navbar/navbar.module.ts @@ -5,7 +5,7 @@ import { MatButtonModule, MatIconModule } from '@angular/material'; import { FuseSharedModule } from '@fuse/shared.module'; -import { FuseNavbarComponent } from 'app/main/navbar/navbar.component'; +import { FuseNavbarComponent } from 'app/layout/navbar/navbar.component'; import { FuseNavigationModule } from '@fuse/components'; @NgModule({ diff --git a/src/app/main/quick-panel/quick-panel.component.html b/src/app/layout/quick-panel/quick-panel.component.html similarity index 100% rename from src/app/main/quick-panel/quick-panel.component.html rename to src/app/layout/quick-panel/quick-panel.component.html diff --git a/src/app/main/quick-panel/quick-panel.component.scss b/src/app/layout/quick-panel/quick-panel.component.scss similarity index 100% rename from src/app/main/quick-panel/quick-panel.component.scss rename to src/app/layout/quick-panel/quick-panel.component.scss diff --git a/src/app/main/quick-panel/quick-panel.component.ts b/src/app/layout/quick-panel/quick-panel.component.ts similarity index 100% rename from src/app/main/quick-panel/quick-panel.component.ts rename to src/app/layout/quick-panel/quick-panel.component.ts diff --git a/src/app/main/quick-panel/quick-panel.module.ts b/src/app/layout/quick-panel/quick-panel.module.ts similarity index 86% rename from src/app/main/quick-panel/quick-panel.module.ts rename to src/app/layout/quick-panel/quick-panel.module.ts index 716461e3..0a863545 100644 --- a/src/app/main/quick-panel/quick-panel.module.ts +++ b/src/app/layout/quick-panel/quick-panel.module.ts @@ -4,7 +4,7 @@ import { MatDividerModule, MatListModule, MatSlideToggleModule } from '@angular/ import { FuseSharedModule } from '@fuse/shared.module'; -import { FuseQuickPanelComponent } from 'app/main/quick-panel/quick-panel.component'; +import { FuseQuickPanelComponent } from 'app/layout/quick-panel/quick-panel.component'; @NgModule({ declarations: [ diff --git a/src/app/main/toolbar/toolbar.component.html b/src/app/layout/toolbar/toolbar.component.html similarity index 100% rename from src/app/main/toolbar/toolbar.component.html rename to src/app/layout/toolbar/toolbar.component.html diff --git a/src/app/main/toolbar/toolbar.component.scss b/src/app/layout/toolbar/toolbar.component.scss similarity index 96% rename from src/app/main/toolbar/toolbar.component.scss rename to src/app/layout/toolbar/toolbar.component.scss index f1bd3177..25abc217 100644 --- a/src/app/main/toolbar/toolbar.component.scss +++ b/src/app/layout/toolbar/toolbar.component.scss @@ -1,4 +1,4 @@ -@import 'src/@fuse/scss/fuse'; +@import '../../../@fuse/scss/fuse'; :host { position: relative; diff --git a/src/app/main/toolbar/toolbar.component.ts b/src/app/layout/toolbar/toolbar.component.ts similarity index 100% rename from src/app/main/toolbar/toolbar.component.ts rename to src/app/layout/toolbar/toolbar.component.ts diff --git a/src/app/main/toolbar/toolbar.module.ts b/src/app/layout/toolbar/toolbar.module.ts similarity index 90% rename from src/app/main/toolbar/toolbar.module.ts rename to src/app/layout/toolbar/toolbar.module.ts index 4d61d960..57272437 100644 --- a/src/app/main/toolbar/toolbar.module.ts +++ b/src/app/layout/toolbar/toolbar.module.ts @@ -4,7 +4,7 @@ import { MatButtonModule, MatIconModule, MatMenuModule, MatProgressBarModule, Ma import { FuseSharedModule } from '@fuse/shared.module'; -import { FuseToolbarComponent } from 'app/main/toolbar/toolbar.component'; +import { FuseToolbarComponent } from 'app/layout/toolbar/toolbar.component'; import { FuseSearchBarModule, FuseShortcutsModule } from '@fuse/components'; @NgModule({ diff --git a/src/app/main/content/apps/academy/academy.module.ts b/src/app/main/apps/academy/academy.module.ts similarity index 100% rename from src/app/main/content/apps/academy/academy.module.ts rename to src/app/main/apps/academy/academy.module.ts diff --git a/src/app/main/content/apps/academy/course.service.ts b/src/app/main/apps/academy/course.service.ts similarity index 100% rename from src/app/main/content/apps/academy/course.service.ts rename to src/app/main/apps/academy/course.service.ts diff --git a/src/app/main/content/apps/academy/course/course.component.html b/src/app/main/apps/academy/course/course.component.html similarity index 100% rename from src/app/main/content/apps/academy/course/course.component.html rename to src/app/main/apps/academy/course/course.component.html diff --git a/src/app/main/content/apps/academy/course/course.component.scss b/src/app/main/apps/academy/course/course.component.scss similarity index 100% rename from src/app/main/content/apps/academy/course/course.component.scss rename to src/app/main/apps/academy/course/course.component.scss diff --git a/src/app/main/content/apps/academy/course/course.component.ts b/src/app/main/apps/academy/course/course.component.ts similarity index 100% rename from src/app/main/content/apps/academy/course/course.component.ts rename to src/app/main/apps/academy/course/course.component.ts diff --git a/src/app/main/content/apps/academy/courses.service.ts b/src/app/main/apps/academy/courses.service.ts similarity index 100% rename from src/app/main/content/apps/academy/courses.service.ts rename to src/app/main/apps/academy/courses.service.ts diff --git a/src/app/main/content/apps/academy/courses/courses.component.html b/src/app/main/apps/academy/courses/courses.component.html similarity index 100% rename from src/app/main/content/apps/academy/courses/courses.component.html rename to src/app/main/apps/academy/courses/courses.component.html diff --git a/src/app/main/content/apps/academy/courses/courses.component.scss b/src/app/main/apps/academy/courses/courses.component.scss similarity index 100% rename from src/app/main/content/apps/academy/courses/courses.component.scss rename to src/app/main/apps/academy/courses/courses.component.scss diff --git a/src/app/main/content/apps/academy/courses/courses.component.ts b/src/app/main/apps/academy/courses/courses.component.ts similarity index 100% rename from src/app/main/content/apps/academy/courses/courses.component.ts rename to src/app/main/apps/academy/courses/courses.component.ts diff --git a/src/app/main/content/apps/apps.module.ts b/src/app/main/apps/apps.module.ts similarity index 100% rename from src/app/main/content/apps/apps.module.ts rename to src/app/main/apps/apps.module.ts diff --git a/src/app/main/content/apps/calendar/calendar.component.html b/src/app/main/apps/calendar/calendar.component.html similarity index 100% rename from src/app/main/content/apps/calendar/calendar.component.html rename to src/app/main/apps/calendar/calendar.component.html diff --git a/src/app/main/content/apps/calendar/calendar.component.scss b/src/app/main/apps/calendar/calendar.component.scss similarity index 100% rename from src/app/main/content/apps/calendar/calendar.component.scss rename to src/app/main/apps/calendar/calendar.component.scss diff --git a/src/app/main/content/apps/calendar/calendar.component.ts b/src/app/main/apps/calendar/calendar.component.ts similarity index 100% rename from src/app/main/content/apps/calendar/calendar.component.ts rename to src/app/main/apps/calendar/calendar.component.ts diff --git a/src/app/main/content/apps/calendar/calendar.module.ts b/src/app/main/apps/calendar/calendar.module.ts similarity index 100% rename from src/app/main/content/apps/calendar/calendar.module.ts rename to src/app/main/apps/calendar/calendar.module.ts diff --git a/src/app/main/content/apps/calendar/calendar.service.ts b/src/app/main/apps/calendar/calendar.service.ts similarity index 100% rename from src/app/main/content/apps/calendar/calendar.service.ts rename to src/app/main/apps/calendar/calendar.service.ts diff --git a/src/app/main/content/apps/calendar/event-form/event-form.component.html b/src/app/main/apps/calendar/event-form/event-form.component.html similarity index 100% rename from src/app/main/content/apps/calendar/event-form/event-form.component.html rename to src/app/main/apps/calendar/event-form/event-form.component.html diff --git a/src/app/main/content/apps/calendar/event-form/event-form.component.scss b/src/app/main/apps/calendar/event-form/event-form.component.scss similarity index 100% rename from src/app/main/content/apps/calendar/event-form/event-form.component.scss rename to src/app/main/apps/calendar/event-form/event-form.component.scss diff --git a/src/app/main/content/apps/calendar/event-form/event-form.component.ts b/src/app/main/apps/calendar/event-form/event-form.component.ts similarity index 100% rename from src/app/main/content/apps/calendar/event-form/event-form.component.ts rename to src/app/main/apps/calendar/event-form/event-form.component.ts diff --git a/src/app/main/content/apps/calendar/event.model.ts b/src/app/main/apps/calendar/event.model.ts similarity index 100% rename from src/app/main/content/apps/calendar/event.model.ts rename to src/app/main/apps/calendar/event.model.ts diff --git a/src/app/main/content/apps/chat/chat-start/chat-start.component.html b/src/app/main/apps/chat/chat-start/chat-start.component.html similarity index 100% rename from src/app/main/content/apps/chat/chat-start/chat-start.component.html rename to src/app/main/apps/chat/chat-start/chat-start.component.html diff --git a/src/app/main/content/apps/chat/chat-start/chat-start.component.scss b/src/app/main/apps/chat/chat-start/chat-start.component.scss similarity index 100% rename from src/app/main/content/apps/chat/chat-start/chat-start.component.scss rename to src/app/main/apps/chat/chat-start/chat-start.component.scss diff --git a/src/app/main/content/apps/chat/chat-start/chat-start.component.ts b/src/app/main/apps/chat/chat-start/chat-start.component.ts similarity index 100% rename from src/app/main/content/apps/chat/chat-start/chat-start.component.ts rename to src/app/main/apps/chat/chat-start/chat-start.component.ts diff --git a/src/app/main/content/apps/chat/chat-view/chat-view.component.html b/src/app/main/apps/chat/chat-view/chat-view.component.html similarity index 100% rename from src/app/main/content/apps/chat/chat-view/chat-view.component.html rename to src/app/main/apps/chat/chat-view/chat-view.component.html diff --git a/src/app/main/content/apps/chat/chat-view/chat-view.component.scss b/src/app/main/apps/chat/chat-view/chat-view.component.scss similarity index 100% rename from src/app/main/content/apps/chat/chat-view/chat-view.component.scss rename to src/app/main/apps/chat/chat-view/chat-view.component.scss diff --git a/src/app/main/content/apps/chat/chat-view/chat-view.component.ts b/src/app/main/apps/chat/chat-view/chat-view.component.ts similarity index 100% rename from src/app/main/content/apps/chat/chat-view/chat-view.component.ts rename to src/app/main/apps/chat/chat-view/chat-view.component.ts diff --git a/src/app/main/content/apps/chat/chat.component.html b/src/app/main/apps/chat/chat.component.html similarity index 100% rename from src/app/main/content/apps/chat/chat.component.html rename to src/app/main/apps/chat/chat.component.html diff --git a/src/app/main/content/apps/chat/chat.component.scss b/src/app/main/apps/chat/chat.component.scss similarity index 100% rename from src/app/main/content/apps/chat/chat.component.scss rename to src/app/main/apps/chat/chat.component.scss diff --git a/src/app/main/content/apps/chat/chat.component.ts b/src/app/main/apps/chat/chat.component.ts similarity index 100% rename from src/app/main/content/apps/chat/chat.component.ts rename to src/app/main/apps/chat/chat.component.ts diff --git a/src/app/main/content/apps/chat/chat.module.ts b/src/app/main/apps/chat/chat.module.ts similarity index 100% rename from src/app/main/content/apps/chat/chat.module.ts rename to src/app/main/apps/chat/chat.module.ts diff --git a/src/app/main/content/apps/chat/chat.service.ts b/src/app/main/apps/chat/chat.service.ts similarity index 100% rename from src/app/main/content/apps/chat/chat.service.ts rename to src/app/main/apps/chat/chat.service.ts diff --git a/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.html b/src/app/main/apps/chat/sidenavs/left/chats/chats.component.html similarity index 100% rename from src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.html rename to src/app/main/apps/chat/sidenavs/left/chats/chats.component.html diff --git a/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.scss b/src/app/main/apps/chat/sidenavs/left/chats/chats.component.scss similarity index 100% rename from src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.scss rename to src/app/main/apps/chat/sidenavs/left/chats/chats.component.scss diff --git a/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.ts b/src/app/main/apps/chat/sidenavs/left/chats/chats.component.ts similarity index 100% rename from src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.ts rename to src/app/main/apps/chat/sidenavs/left/chats/chats.component.ts diff --git a/src/app/main/content/apps/chat/sidenavs/left/left.component.html b/src/app/main/apps/chat/sidenavs/left/left.component.html similarity index 100% rename from src/app/main/content/apps/chat/sidenavs/left/left.component.html rename to src/app/main/apps/chat/sidenavs/left/left.component.html diff --git a/src/app/main/content/apps/chat/sidenavs/left/left.component.scss b/src/app/main/apps/chat/sidenavs/left/left.component.scss similarity index 100% rename from src/app/main/content/apps/chat/sidenavs/left/left.component.scss rename to src/app/main/apps/chat/sidenavs/left/left.component.scss diff --git a/src/app/main/content/apps/chat/sidenavs/left/left.component.ts b/src/app/main/apps/chat/sidenavs/left/left.component.ts similarity index 100% rename from src/app/main/content/apps/chat/sidenavs/left/left.component.ts rename to src/app/main/apps/chat/sidenavs/left/left.component.ts diff --git a/src/app/main/content/apps/chat/sidenavs/left/user/user.component.html b/src/app/main/apps/chat/sidenavs/left/user/user.component.html similarity index 100% rename from src/app/main/content/apps/chat/sidenavs/left/user/user.component.html rename to src/app/main/apps/chat/sidenavs/left/user/user.component.html diff --git a/src/app/main/content/apps/chat/sidenavs/left/user/user.component.scss b/src/app/main/apps/chat/sidenavs/left/user/user.component.scss similarity index 100% rename from src/app/main/content/apps/chat/sidenavs/left/user/user.component.scss rename to src/app/main/apps/chat/sidenavs/left/user/user.component.scss diff --git a/src/app/main/content/apps/chat/sidenavs/left/user/user.component.ts b/src/app/main/apps/chat/sidenavs/left/user/user.component.ts similarity index 100% rename from src/app/main/content/apps/chat/sidenavs/left/user/user.component.ts rename to src/app/main/apps/chat/sidenavs/left/user/user.component.ts diff --git a/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.html b/src/app/main/apps/chat/sidenavs/right/contact/contact.component.html similarity index 100% rename from src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.html rename to src/app/main/apps/chat/sidenavs/right/contact/contact.component.html diff --git a/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.scss b/src/app/main/apps/chat/sidenavs/right/contact/contact.component.scss similarity index 100% rename from src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.scss rename to src/app/main/apps/chat/sidenavs/right/contact/contact.component.scss diff --git a/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.ts b/src/app/main/apps/chat/sidenavs/right/contact/contact.component.ts similarity index 100% rename from src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.ts rename to src/app/main/apps/chat/sidenavs/right/contact/contact.component.ts diff --git a/src/app/main/content/apps/chat/sidenavs/right/right.component.html b/src/app/main/apps/chat/sidenavs/right/right.component.html similarity index 100% rename from src/app/main/content/apps/chat/sidenavs/right/right.component.html rename to src/app/main/apps/chat/sidenavs/right/right.component.html diff --git a/src/app/main/content/apps/chat/sidenavs/right/right.component.scss b/src/app/main/apps/chat/sidenavs/right/right.component.scss similarity index 100% rename from src/app/main/content/apps/chat/sidenavs/right/right.component.scss rename to src/app/main/apps/chat/sidenavs/right/right.component.scss diff --git a/src/app/main/content/apps/chat/sidenavs/right/right.component.ts b/src/app/main/apps/chat/sidenavs/right/right.component.ts similarity index 100% rename from src/app/main/content/apps/chat/sidenavs/right/right.component.ts rename to src/app/main/apps/chat/sidenavs/right/right.component.ts diff --git a/src/app/main/content/apps/contacts/contact-form/contact-form.component.html b/src/app/main/apps/contacts/contact-form/contact-form.component.html similarity index 100% rename from src/app/main/content/apps/contacts/contact-form/contact-form.component.html rename to src/app/main/apps/contacts/contact-form/contact-form.component.html diff --git a/src/app/main/content/apps/contacts/contact-form/contact-form.component.scss b/src/app/main/apps/contacts/contact-form/contact-form.component.scss similarity index 100% rename from src/app/main/content/apps/contacts/contact-form/contact-form.component.scss rename to src/app/main/apps/contacts/contact-form/contact-form.component.scss diff --git a/src/app/main/content/apps/contacts/contact-form/contact-form.component.ts b/src/app/main/apps/contacts/contact-form/contact-form.component.ts similarity index 100% rename from src/app/main/content/apps/contacts/contact-form/contact-form.component.ts rename to src/app/main/apps/contacts/contact-form/contact-form.component.ts diff --git a/src/app/main/content/apps/contacts/contact-list/contact-list.component.html b/src/app/main/apps/contacts/contact-list/contact-list.component.html similarity index 100% rename from src/app/main/content/apps/contacts/contact-list/contact-list.component.html rename to src/app/main/apps/contacts/contact-list/contact-list.component.html diff --git a/src/app/main/content/apps/contacts/contact-list/contact-list.component.scss b/src/app/main/apps/contacts/contact-list/contact-list.component.scss similarity index 100% rename from src/app/main/content/apps/contacts/contact-list/contact-list.component.scss rename to src/app/main/apps/contacts/contact-list/contact-list.component.scss diff --git a/src/app/main/content/apps/contacts/contact-list/contact-list.component.ts b/src/app/main/apps/contacts/contact-list/contact-list.component.ts similarity index 100% rename from src/app/main/content/apps/contacts/contact-list/contact-list.component.ts rename to src/app/main/apps/contacts/contact-list/contact-list.component.ts diff --git a/src/app/main/content/apps/contacts/contact.model.ts b/src/app/main/apps/contacts/contact.model.ts similarity index 100% rename from src/app/main/content/apps/contacts/contact.model.ts rename to src/app/main/apps/contacts/contact.model.ts diff --git a/src/app/main/content/apps/contacts/contacts.component.html b/src/app/main/apps/contacts/contacts.component.html similarity index 100% rename from src/app/main/content/apps/contacts/contacts.component.html rename to src/app/main/apps/contacts/contacts.component.html diff --git a/src/app/main/content/apps/contacts/contacts.component.scss b/src/app/main/apps/contacts/contacts.component.scss similarity index 100% rename from src/app/main/content/apps/contacts/contacts.component.scss rename to src/app/main/apps/contacts/contacts.component.scss diff --git a/src/app/main/content/apps/contacts/contacts.component.ts b/src/app/main/apps/contacts/contacts.component.ts similarity index 100% rename from src/app/main/content/apps/contacts/contacts.component.ts rename to src/app/main/apps/contacts/contacts.component.ts diff --git a/src/app/main/content/apps/contacts/contacts.module.ts b/src/app/main/apps/contacts/contacts.module.ts similarity index 100% rename from src/app/main/content/apps/contacts/contacts.module.ts rename to src/app/main/apps/contacts/contacts.module.ts diff --git a/src/app/main/content/apps/contacts/contacts.service.ts b/src/app/main/apps/contacts/contacts.service.ts similarity index 100% rename from src/app/main/content/apps/contacts/contacts.service.ts rename to src/app/main/apps/contacts/contacts.service.ts diff --git a/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.html b/src/app/main/apps/contacts/selected-bar/selected-bar.component.html similarity index 100% rename from src/app/main/content/apps/contacts/selected-bar/selected-bar.component.html rename to src/app/main/apps/contacts/selected-bar/selected-bar.component.html diff --git a/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.scss b/src/app/main/apps/contacts/selected-bar/selected-bar.component.scss similarity index 100% rename from src/app/main/content/apps/contacts/selected-bar/selected-bar.component.scss rename to src/app/main/apps/contacts/selected-bar/selected-bar.component.scss diff --git a/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.ts b/src/app/main/apps/contacts/selected-bar/selected-bar.component.ts similarity index 100% rename from src/app/main/content/apps/contacts/selected-bar/selected-bar.component.ts rename to src/app/main/apps/contacts/selected-bar/selected-bar.component.ts diff --git a/src/app/main/content/apps/contacts/sidenavs/main/main.component.html b/src/app/main/apps/contacts/sidenavs/main/main.component.html similarity index 100% rename from src/app/main/content/apps/contacts/sidenavs/main/main.component.html rename to src/app/main/apps/contacts/sidenavs/main/main.component.html diff --git a/src/app/main/content/apps/contacts/sidenavs/main/main.component.scss b/src/app/main/apps/contacts/sidenavs/main/main.component.scss similarity index 100% rename from src/app/main/content/apps/contacts/sidenavs/main/main.component.scss rename to src/app/main/apps/contacts/sidenavs/main/main.component.scss diff --git a/src/app/main/content/apps/contacts/sidenavs/main/main.component.ts b/src/app/main/apps/contacts/sidenavs/main/main.component.ts similarity index 100% rename from src/app/main/content/apps/contacts/sidenavs/main/main.component.ts rename to src/app/main/apps/contacts/sidenavs/main/main.component.ts diff --git a/src/app/main/content/apps/dashboards/analytics/analytics.component.html b/src/app/main/apps/dashboards/analytics/analytics.component.html similarity index 100% rename from src/app/main/content/apps/dashboards/analytics/analytics.component.html rename to src/app/main/apps/dashboards/analytics/analytics.component.html diff --git a/src/app/main/content/apps/dashboards/analytics/analytics.component.scss b/src/app/main/apps/dashboards/analytics/analytics.component.scss similarity index 100% rename from src/app/main/content/apps/dashboards/analytics/analytics.component.scss rename to src/app/main/apps/dashboards/analytics/analytics.component.scss diff --git a/src/app/main/content/apps/dashboards/analytics/analytics.component.ts b/src/app/main/apps/dashboards/analytics/analytics.component.ts similarity index 100% rename from src/app/main/content/apps/dashboards/analytics/analytics.component.ts rename to src/app/main/apps/dashboards/analytics/analytics.component.ts diff --git a/src/app/main/content/apps/dashboards/analytics/analytics.module.ts b/src/app/main/apps/dashboards/analytics/analytics.module.ts similarity index 100% rename from src/app/main/content/apps/dashboards/analytics/analytics.module.ts rename to src/app/main/apps/dashboards/analytics/analytics.module.ts diff --git a/src/app/main/content/apps/dashboards/analytics/analytics.service.ts b/src/app/main/apps/dashboards/analytics/analytics.service.ts similarity index 100% rename from src/app/main/content/apps/dashboards/analytics/analytics.service.ts rename to src/app/main/apps/dashboards/analytics/analytics.service.ts diff --git a/src/app/main/content/apps/dashboards/project/project.component.html b/src/app/main/apps/dashboards/project/project.component.html similarity index 100% rename from src/app/main/content/apps/dashboards/project/project.component.html rename to src/app/main/apps/dashboards/project/project.component.html diff --git a/src/app/main/content/apps/dashboards/project/project.component.scss b/src/app/main/apps/dashboards/project/project.component.scss similarity index 100% rename from src/app/main/content/apps/dashboards/project/project.component.scss rename to src/app/main/apps/dashboards/project/project.component.scss diff --git a/src/app/main/content/apps/dashboards/project/project.component.ts b/src/app/main/apps/dashboards/project/project.component.ts similarity index 100% rename from src/app/main/content/apps/dashboards/project/project.component.ts rename to src/app/main/apps/dashboards/project/project.component.ts diff --git a/src/app/main/content/apps/dashboards/project/project.module.ts b/src/app/main/apps/dashboards/project/project.module.ts similarity index 100% rename from src/app/main/content/apps/dashboards/project/project.module.ts rename to src/app/main/apps/dashboards/project/project.module.ts diff --git a/src/app/main/content/apps/dashboards/project/project.service.ts b/src/app/main/apps/dashboards/project/project.service.ts similarity index 100% rename from src/app/main/content/apps/dashboards/project/project.service.ts rename to src/app/main/apps/dashboards/project/project.service.ts diff --git a/src/app/main/content/apps/e-commerce/dashboard/dashboard.component.html b/src/app/main/apps/e-commerce/dashboard/dashboard.component.html similarity index 100% rename from src/app/main/content/apps/e-commerce/dashboard/dashboard.component.html rename to src/app/main/apps/e-commerce/dashboard/dashboard.component.html diff --git a/src/app/main/content/apps/e-commerce/dashboard/dashboard.component.scss b/src/app/main/apps/e-commerce/dashboard/dashboard.component.scss similarity index 100% rename from src/app/main/content/apps/e-commerce/dashboard/dashboard.component.scss rename to src/app/main/apps/e-commerce/dashboard/dashboard.component.scss diff --git a/src/app/main/content/apps/e-commerce/dashboard/dashboard.component.ts b/src/app/main/apps/e-commerce/dashboard/dashboard.component.ts similarity index 100% rename from src/app/main/content/apps/e-commerce/dashboard/dashboard.component.ts rename to src/app/main/apps/e-commerce/dashboard/dashboard.component.ts diff --git a/src/app/main/content/apps/e-commerce/dashboard/dashboard.service.ts b/src/app/main/apps/e-commerce/dashboard/dashboard.service.ts similarity index 100% rename from src/app/main/content/apps/e-commerce/dashboard/dashboard.service.ts rename to src/app/main/apps/e-commerce/dashboard/dashboard.service.ts diff --git a/src/app/main/content/apps/e-commerce/e-commerce.module.ts b/src/app/main/apps/e-commerce/e-commerce.module.ts similarity index 100% rename from src/app/main/content/apps/e-commerce/e-commerce.module.ts rename to src/app/main/apps/e-commerce/e-commerce.module.ts diff --git a/src/app/main/content/apps/e-commerce/order/order-statuses.ts b/src/app/main/apps/e-commerce/order/order-statuses.ts similarity index 100% rename from src/app/main/content/apps/e-commerce/order/order-statuses.ts rename to src/app/main/apps/e-commerce/order/order-statuses.ts diff --git a/src/app/main/content/apps/e-commerce/order/order.component.html b/src/app/main/apps/e-commerce/order/order.component.html similarity index 100% rename from src/app/main/content/apps/e-commerce/order/order.component.html rename to src/app/main/apps/e-commerce/order/order.component.html diff --git a/src/app/main/content/apps/e-commerce/order/order.component.scss b/src/app/main/apps/e-commerce/order/order.component.scss similarity index 100% rename from src/app/main/content/apps/e-commerce/order/order.component.scss rename to src/app/main/apps/e-commerce/order/order.component.scss diff --git a/src/app/main/content/apps/e-commerce/order/order.component.ts b/src/app/main/apps/e-commerce/order/order.component.ts similarity index 100% rename from src/app/main/content/apps/e-commerce/order/order.component.ts rename to src/app/main/apps/e-commerce/order/order.component.ts diff --git a/src/app/main/content/apps/e-commerce/order/order.model.ts b/src/app/main/apps/e-commerce/order/order.model.ts similarity index 100% rename from src/app/main/content/apps/e-commerce/order/order.model.ts rename to src/app/main/apps/e-commerce/order/order.model.ts diff --git a/src/app/main/content/apps/e-commerce/order/order.service.ts b/src/app/main/apps/e-commerce/order/order.service.ts similarity index 100% rename from src/app/main/content/apps/e-commerce/order/order.service.ts rename to src/app/main/apps/e-commerce/order/order.service.ts diff --git a/src/app/main/content/apps/e-commerce/orders/orders.component.html b/src/app/main/apps/e-commerce/orders/orders.component.html similarity index 100% rename from src/app/main/content/apps/e-commerce/orders/orders.component.html rename to src/app/main/apps/e-commerce/orders/orders.component.html diff --git a/src/app/main/content/apps/e-commerce/orders/orders.component.scss b/src/app/main/apps/e-commerce/orders/orders.component.scss similarity index 100% rename from src/app/main/content/apps/e-commerce/orders/orders.component.scss rename to src/app/main/apps/e-commerce/orders/orders.component.scss diff --git a/src/app/main/content/apps/e-commerce/orders/orders.component.ts b/src/app/main/apps/e-commerce/orders/orders.component.ts similarity index 100% rename from src/app/main/content/apps/e-commerce/orders/orders.component.ts rename to src/app/main/apps/e-commerce/orders/orders.component.ts diff --git a/src/app/main/content/apps/e-commerce/orders/orders.service.ts b/src/app/main/apps/e-commerce/orders/orders.service.ts similarity index 100% rename from src/app/main/content/apps/e-commerce/orders/orders.service.ts rename to src/app/main/apps/e-commerce/orders/orders.service.ts diff --git a/src/app/main/content/apps/e-commerce/product/product.component.html b/src/app/main/apps/e-commerce/product/product.component.html similarity index 100% rename from src/app/main/content/apps/e-commerce/product/product.component.html rename to src/app/main/apps/e-commerce/product/product.component.html diff --git a/src/app/main/content/apps/e-commerce/product/product.component.scss b/src/app/main/apps/e-commerce/product/product.component.scss similarity index 100% rename from src/app/main/content/apps/e-commerce/product/product.component.scss rename to src/app/main/apps/e-commerce/product/product.component.scss diff --git a/src/app/main/content/apps/e-commerce/product/product.component.ts b/src/app/main/apps/e-commerce/product/product.component.ts similarity index 100% rename from src/app/main/content/apps/e-commerce/product/product.component.ts rename to src/app/main/apps/e-commerce/product/product.component.ts diff --git a/src/app/main/content/apps/e-commerce/product/product.model.ts b/src/app/main/apps/e-commerce/product/product.model.ts similarity index 100% rename from src/app/main/content/apps/e-commerce/product/product.model.ts rename to src/app/main/apps/e-commerce/product/product.model.ts diff --git a/src/app/main/content/apps/e-commerce/product/product.service.ts b/src/app/main/apps/e-commerce/product/product.service.ts similarity index 100% rename from src/app/main/content/apps/e-commerce/product/product.service.ts rename to src/app/main/apps/e-commerce/product/product.service.ts diff --git a/src/app/main/content/apps/e-commerce/products/products.component.html b/src/app/main/apps/e-commerce/products/products.component.html similarity index 100% rename from src/app/main/content/apps/e-commerce/products/products.component.html rename to src/app/main/apps/e-commerce/products/products.component.html diff --git a/src/app/main/content/apps/e-commerce/products/products.component.scss b/src/app/main/apps/e-commerce/products/products.component.scss similarity index 100% rename from src/app/main/content/apps/e-commerce/products/products.component.scss rename to src/app/main/apps/e-commerce/products/products.component.scss diff --git a/src/app/main/content/apps/e-commerce/products/products.component.ts b/src/app/main/apps/e-commerce/products/products.component.ts similarity index 100% rename from src/app/main/content/apps/e-commerce/products/products.component.ts rename to src/app/main/apps/e-commerce/products/products.component.ts diff --git a/src/app/main/content/apps/e-commerce/products/products.service.ts b/src/app/main/apps/e-commerce/products/products.service.ts similarity index 100% rename from src/app/main/content/apps/e-commerce/products/products.service.ts rename to src/app/main/apps/e-commerce/products/products.service.ts diff --git a/src/app/main/content/apps/file-manager/file-list/file-list.component.html b/src/app/main/apps/file-manager/file-list/file-list.component.html similarity index 100% rename from src/app/main/content/apps/file-manager/file-list/file-list.component.html rename to src/app/main/apps/file-manager/file-list/file-list.component.html diff --git a/src/app/main/content/apps/file-manager/file-list/file-list.component.scss b/src/app/main/apps/file-manager/file-list/file-list.component.scss similarity index 100% rename from src/app/main/content/apps/file-manager/file-list/file-list.component.scss rename to src/app/main/apps/file-manager/file-list/file-list.component.scss diff --git a/src/app/main/content/apps/file-manager/file-list/file-list.component.ts b/src/app/main/apps/file-manager/file-list/file-list.component.ts similarity index 100% rename from src/app/main/content/apps/file-manager/file-list/file-list.component.ts rename to src/app/main/apps/file-manager/file-list/file-list.component.ts diff --git a/src/app/main/content/apps/file-manager/file-manager.component.html b/src/app/main/apps/file-manager/file-manager.component.html similarity index 100% rename from src/app/main/content/apps/file-manager/file-manager.component.html rename to src/app/main/apps/file-manager/file-manager.component.html diff --git a/src/app/main/content/apps/file-manager/file-manager.component.scss b/src/app/main/apps/file-manager/file-manager.component.scss similarity index 100% rename from src/app/main/content/apps/file-manager/file-manager.component.scss rename to src/app/main/apps/file-manager/file-manager.component.scss diff --git a/src/app/main/content/apps/file-manager/file-manager.component.ts b/src/app/main/apps/file-manager/file-manager.component.ts similarity index 100% rename from src/app/main/content/apps/file-manager/file-manager.component.ts rename to src/app/main/apps/file-manager/file-manager.component.ts diff --git a/src/app/main/content/apps/file-manager/file-manager.module.ts b/src/app/main/apps/file-manager/file-manager.module.ts similarity index 100% rename from src/app/main/content/apps/file-manager/file-manager.module.ts rename to src/app/main/apps/file-manager/file-manager.module.ts diff --git a/src/app/main/content/apps/file-manager/file-manager.service.ts b/src/app/main/apps/file-manager/file-manager.service.ts similarity index 100% rename from src/app/main/content/apps/file-manager/file-manager.service.ts rename to src/app/main/apps/file-manager/file-manager.service.ts diff --git a/src/app/main/content/apps/file-manager/sidenavs/details/details.component.html b/src/app/main/apps/file-manager/sidenavs/details/details.component.html similarity index 100% rename from src/app/main/content/apps/file-manager/sidenavs/details/details.component.html rename to src/app/main/apps/file-manager/sidenavs/details/details.component.html diff --git a/src/app/main/content/apps/file-manager/sidenavs/details/details.component.scss b/src/app/main/apps/file-manager/sidenavs/details/details.component.scss similarity index 100% rename from src/app/main/content/apps/file-manager/sidenavs/details/details.component.scss rename to src/app/main/apps/file-manager/sidenavs/details/details.component.scss diff --git a/src/app/main/content/apps/file-manager/sidenavs/details/details.component.ts b/src/app/main/apps/file-manager/sidenavs/details/details.component.ts similarity index 100% rename from src/app/main/content/apps/file-manager/sidenavs/details/details.component.ts rename to src/app/main/apps/file-manager/sidenavs/details/details.component.ts diff --git a/src/app/main/content/apps/file-manager/sidenavs/main/main.component.html b/src/app/main/apps/file-manager/sidenavs/main/main.component.html similarity index 100% rename from src/app/main/content/apps/file-manager/sidenavs/main/main.component.html rename to src/app/main/apps/file-manager/sidenavs/main/main.component.html diff --git a/src/app/main/content/apps/file-manager/sidenavs/main/main.component.scss b/src/app/main/apps/file-manager/sidenavs/main/main.component.scss similarity index 100% rename from src/app/main/content/apps/file-manager/sidenavs/main/main.component.scss rename to src/app/main/apps/file-manager/sidenavs/main/main.component.scss diff --git a/src/app/main/content/apps/file-manager/sidenavs/main/main.component.ts b/src/app/main/apps/file-manager/sidenavs/main/main.component.ts similarity index 100% rename from src/app/main/content/apps/file-manager/sidenavs/main/main.component.ts rename to src/app/main/apps/file-manager/sidenavs/main/main.component.ts diff --git a/src/app/main/content/apps/mail-ngrx/dialogs/compose/compose.component.html b/src/app/main/apps/mail-ngrx/dialogs/compose/compose.component.html similarity index 100% rename from src/app/main/content/apps/mail-ngrx/dialogs/compose/compose.component.html rename to src/app/main/apps/mail-ngrx/dialogs/compose/compose.component.html diff --git a/src/app/main/content/apps/mail-ngrx/dialogs/compose/compose.component.scss b/src/app/main/apps/mail-ngrx/dialogs/compose/compose.component.scss similarity index 100% rename from src/app/main/content/apps/mail-ngrx/dialogs/compose/compose.component.scss rename to src/app/main/apps/mail-ngrx/dialogs/compose/compose.component.scss diff --git a/src/app/main/content/apps/mail-ngrx/dialogs/compose/compose.component.ts b/src/app/main/apps/mail-ngrx/dialogs/compose/compose.component.ts similarity index 100% rename from src/app/main/content/apps/mail-ngrx/dialogs/compose/compose.component.ts rename to src/app/main/apps/mail-ngrx/dialogs/compose/compose.component.ts diff --git a/src/app/main/content/apps/mail-ngrx/i18n/en.ts b/src/app/main/apps/mail-ngrx/i18n/en.ts similarity index 100% rename from src/app/main/content/apps/mail-ngrx/i18n/en.ts rename to src/app/main/apps/mail-ngrx/i18n/en.ts diff --git a/src/app/main/content/apps/mail-ngrx/i18n/tr.ts b/src/app/main/apps/mail-ngrx/i18n/tr.ts similarity index 100% rename from src/app/main/content/apps/mail-ngrx/i18n/tr.ts rename to src/app/main/apps/mail-ngrx/i18n/tr.ts diff --git a/src/app/main/content/apps/mail-ngrx/mail-details/mail-details.component.html b/src/app/main/apps/mail-ngrx/mail-details/mail-details.component.html similarity index 100% rename from src/app/main/content/apps/mail-ngrx/mail-details/mail-details.component.html rename to src/app/main/apps/mail-ngrx/mail-details/mail-details.component.html diff --git a/src/app/main/content/apps/mail-ngrx/mail-details/mail-details.component.scss b/src/app/main/apps/mail-ngrx/mail-details/mail-details.component.scss similarity index 100% rename from src/app/main/content/apps/mail-ngrx/mail-details/mail-details.component.scss rename to src/app/main/apps/mail-ngrx/mail-details/mail-details.component.scss diff --git a/src/app/main/content/apps/mail-ngrx/mail-details/mail-details.component.ts b/src/app/main/apps/mail-ngrx/mail-details/mail-details.component.ts similarity index 100% rename from src/app/main/content/apps/mail-ngrx/mail-details/mail-details.component.ts rename to src/app/main/apps/mail-ngrx/mail-details/mail-details.component.ts diff --git a/src/app/main/content/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.html b/src/app/main/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.html similarity index 100% rename from src/app/main/content/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.html rename to src/app/main/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.html diff --git a/src/app/main/content/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.scss b/src/app/main/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.scss similarity index 100% rename from src/app/main/content/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.scss rename to src/app/main/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.scss diff --git a/src/app/main/content/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.ts b/src/app/main/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.ts similarity index 100% rename from src/app/main/content/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.ts rename to src/app/main/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.ts diff --git a/src/app/main/content/apps/mail-ngrx/mail-list/mail-list.component.html b/src/app/main/apps/mail-ngrx/mail-list/mail-list.component.html similarity index 100% rename from src/app/main/content/apps/mail-ngrx/mail-list/mail-list.component.html rename to src/app/main/apps/mail-ngrx/mail-list/mail-list.component.html diff --git a/src/app/main/content/apps/mail-ngrx/mail-list/mail-list.component.scss b/src/app/main/apps/mail-ngrx/mail-list/mail-list.component.scss similarity index 100% rename from src/app/main/content/apps/mail-ngrx/mail-list/mail-list.component.scss rename to src/app/main/apps/mail-ngrx/mail-list/mail-list.component.scss diff --git a/src/app/main/content/apps/mail-ngrx/mail-list/mail-list.component.ts b/src/app/main/apps/mail-ngrx/mail-list/mail-list.component.ts similarity index 100% rename from src/app/main/content/apps/mail-ngrx/mail-list/mail-list.component.ts rename to src/app/main/apps/mail-ngrx/mail-list/mail-list.component.ts diff --git a/src/app/main/content/apps/mail-ngrx/mail.component.html b/src/app/main/apps/mail-ngrx/mail.component.html similarity index 100% rename from src/app/main/content/apps/mail-ngrx/mail.component.html rename to src/app/main/apps/mail-ngrx/mail.component.html diff --git a/src/app/main/content/apps/mail-ngrx/mail.component.scss b/src/app/main/apps/mail-ngrx/mail.component.scss similarity index 100% rename from src/app/main/content/apps/mail-ngrx/mail.component.scss rename to src/app/main/apps/mail-ngrx/mail.component.scss diff --git a/src/app/main/content/apps/mail-ngrx/mail.component.ts b/src/app/main/apps/mail-ngrx/mail.component.ts similarity index 100% rename from src/app/main/content/apps/mail-ngrx/mail.component.ts rename to src/app/main/apps/mail-ngrx/mail.component.ts diff --git a/src/app/main/content/apps/mail-ngrx/mail.model.ts b/src/app/main/apps/mail-ngrx/mail.model.ts similarity index 100% rename from src/app/main/content/apps/mail-ngrx/mail.model.ts rename to src/app/main/apps/mail-ngrx/mail.model.ts diff --git a/src/app/main/content/apps/mail-ngrx/mail.module.ts b/src/app/main/apps/mail-ngrx/mail.module.ts similarity index 100% rename from src/app/main/content/apps/mail-ngrx/mail.module.ts rename to src/app/main/apps/mail-ngrx/mail.module.ts diff --git a/src/app/main/content/apps/mail-ngrx/mail.service.ts b/src/app/main/apps/mail-ngrx/mail.service.ts similarity index 100% rename from src/app/main/content/apps/mail-ngrx/mail.service.ts rename to src/app/main/apps/mail-ngrx/mail.service.ts diff --git a/src/app/main/content/apps/mail-ngrx/sidenavs/main/main-sidenav.component.html b/src/app/main/apps/mail-ngrx/sidenavs/main/main-sidenav.component.html similarity index 100% rename from src/app/main/content/apps/mail-ngrx/sidenavs/main/main-sidenav.component.html rename to src/app/main/apps/mail-ngrx/sidenavs/main/main-sidenav.component.html diff --git a/src/app/main/content/apps/mail-ngrx/sidenavs/main/main-sidenav.component.scss b/src/app/main/apps/mail-ngrx/sidenavs/main/main-sidenav.component.scss similarity index 100% rename from src/app/main/content/apps/mail-ngrx/sidenavs/main/main-sidenav.component.scss rename to src/app/main/apps/mail-ngrx/sidenavs/main/main-sidenav.component.scss diff --git a/src/app/main/content/apps/mail-ngrx/sidenavs/main/main-sidenav.component.ts b/src/app/main/apps/mail-ngrx/sidenavs/main/main-sidenav.component.ts similarity index 100% rename from src/app/main/content/apps/mail-ngrx/sidenavs/main/main-sidenav.component.ts rename to src/app/main/apps/mail-ngrx/sidenavs/main/main-sidenav.component.ts diff --git a/src/app/main/content/apps/mail-ngrx/store/actions/filters.actions.ts b/src/app/main/apps/mail-ngrx/store/actions/filters.actions.ts similarity index 100% rename from src/app/main/content/apps/mail-ngrx/store/actions/filters.actions.ts rename to src/app/main/apps/mail-ngrx/store/actions/filters.actions.ts diff --git a/src/app/main/content/apps/mail-ngrx/store/actions/folders.actions.ts b/src/app/main/apps/mail-ngrx/store/actions/folders.actions.ts similarity index 100% rename from src/app/main/content/apps/mail-ngrx/store/actions/folders.actions.ts rename to src/app/main/apps/mail-ngrx/store/actions/folders.actions.ts diff --git a/src/app/main/content/apps/mail-ngrx/store/actions/index.ts b/src/app/main/apps/mail-ngrx/store/actions/index.ts similarity index 100% rename from src/app/main/content/apps/mail-ngrx/store/actions/index.ts rename to src/app/main/apps/mail-ngrx/store/actions/index.ts diff --git a/src/app/main/content/apps/mail-ngrx/store/actions/labels.actions.ts b/src/app/main/apps/mail-ngrx/store/actions/labels.actions.ts similarity index 100% rename from src/app/main/content/apps/mail-ngrx/store/actions/labels.actions.ts rename to src/app/main/apps/mail-ngrx/store/actions/labels.actions.ts diff --git a/src/app/main/content/apps/mail-ngrx/store/actions/mails.actions.ts b/src/app/main/apps/mail-ngrx/store/actions/mails.actions.ts similarity index 100% rename from src/app/main/content/apps/mail-ngrx/store/actions/mails.actions.ts rename to src/app/main/apps/mail-ngrx/store/actions/mails.actions.ts diff --git a/src/app/main/content/apps/mail-ngrx/store/effects/filters.effects.ts b/src/app/main/apps/mail-ngrx/store/effects/filters.effects.ts similarity index 100% rename from src/app/main/content/apps/mail-ngrx/store/effects/filters.effects.ts rename to src/app/main/apps/mail-ngrx/store/effects/filters.effects.ts diff --git a/src/app/main/content/apps/mail-ngrx/store/effects/folders.effects.ts b/src/app/main/apps/mail-ngrx/store/effects/folders.effects.ts similarity index 100% rename from src/app/main/content/apps/mail-ngrx/store/effects/folders.effects.ts rename to src/app/main/apps/mail-ngrx/store/effects/folders.effects.ts diff --git a/src/app/main/content/apps/mail-ngrx/store/effects/index.ts b/src/app/main/apps/mail-ngrx/store/effects/index.ts similarity index 100% rename from src/app/main/content/apps/mail-ngrx/store/effects/index.ts rename to src/app/main/apps/mail-ngrx/store/effects/index.ts diff --git a/src/app/main/content/apps/mail-ngrx/store/effects/labels.effects.ts b/src/app/main/apps/mail-ngrx/store/effects/labels.effects.ts similarity index 100% rename from src/app/main/content/apps/mail-ngrx/store/effects/labels.effects.ts rename to src/app/main/apps/mail-ngrx/store/effects/labels.effects.ts diff --git a/src/app/main/content/apps/mail-ngrx/store/effects/mails.effects.ts b/src/app/main/apps/mail-ngrx/store/effects/mails.effects.ts similarity index 100% rename from src/app/main/content/apps/mail-ngrx/store/effects/mails.effects.ts rename to src/app/main/apps/mail-ngrx/store/effects/mails.effects.ts diff --git a/src/app/main/content/apps/mail-ngrx/store/guards/index.ts b/src/app/main/apps/mail-ngrx/store/guards/index.ts similarity index 100% rename from src/app/main/content/apps/mail-ngrx/store/guards/index.ts rename to src/app/main/apps/mail-ngrx/store/guards/index.ts diff --git a/src/app/main/content/apps/mail-ngrx/store/guards/resolve.guard.ts b/src/app/main/apps/mail-ngrx/store/guards/resolve.guard.ts similarity index 100% rename from src/app/main/content/apps/mail-ngrx/store/guards/resolve.guard.ts rename to src/app/main/apps/mail-ngrx/store/guards/resolve.guard.ts diff --git a/src/app/main/content/apps/mail-ngrx/store/index.ts b/src/app/main/apps/mail-ngrx/store/index.ts similarity index 100% rename from src/app/main/content/apps/mail-ngrx/store/index.ts rename to src/app/main/apps/mail-ngrx/store/index.ts diff --git a/src/app/main/content/apps/mail-ngrx/store/reducers/filters.reducer.ts b/src/app/main/apps/mail-ngrx/store/reducers/filters.reducer.ts similarity index 100% rename from src/app/main/content/apps/mail-ngrx/store/reducers/filters.reducer.ts rename to src/app/main/apps/mail-ngrx/store/reducers/filters.reducer.ts diff --git a/src/app/main/content/apps/mail-ngrx/store/reducers/folders.reducer.ts b/src/app/main/apps/mail-ngrx/store/reducers/folders.reducer.ts similarity index 100% rename from src/app/main/content/apps/mail-ngrx/store/reducers/folders.reducer.ts rename to src/app/main/apps/mail-ngrx/store/reducers/folders.reducer.ts diff --git a/src/app/main/content/apps/mail-ngrx/store/reducers/index.ts b/src/app/main/apps/mail-ngrx/store/reducers/index.ts similarity index 100% rename from src/app/main/content/apps/mail-ngrx/store/reducers/index.ts rename to src/app/main/apps/mail-ngrx/store/reducers/index.ts diff --git a/src/app/main/content/apps/mail-ngrx/store/reducers/labels.reducer.ts b/src/app/main/apps/mail-ngrx/store/reducers/labels.reducer.ts similarity index 100% rename from src/app/main/content/apps/mail-ngrx/store/reducers/labels.reducer.ts rename to src/app/main/apps/mail-ngrx/store/reducers/labels.reducer.ts diff --git a/src/app/main/content/apps/mail-ngrx/store/reducers/mails.reducer.ts b/src/app/main/apps/mail-ngrx/store/reducers/mails.reducer.ts similarity index 100% rename from src/app/main/content/apps/mail-ngrx/store/reducers/mails.reducer.ts rename to src/app/main/apps/mail-ngrx/store/reducers/mails.reducer.ts diff --git a/src/app/main/content/apps/mail-ngrx/store/selectors/filters.selectors.ts b/src/app/main/apps/mail-ngrx/store/selectors/filters.selectors.ts similarity index 100% rename from src/app/main/content/apps/mail-ngrx/store/selectors/filters.selectors.ts rename to src/app/main/apps/mail-ngrx/store/selectors/filters.selectors.ts diff --git a/src/app/main/content/apps/mail-ngrx/store/selectors/folders.selectors.ts b/src/app/main/apps/mail-ngrx/store/selectors/folders.selectors.ts similarity index 100% rename from src/app/main/content/apps/mail-ngrx/store/selectors/folders.selectors.ts rename to src/app/main/apps/mail-ngrx/store/selectors/folders.selectors.ts diff --git a/src/app/main/content/apps/mail-ngrx/store/selectors/index.ts b/src/app/main/apps/mail-ngrx/store/selectors/index.ts similarity index 100% rename from src/app/main/content/apps/mail-ngrx/store/selectors/index.ts rename to src/app/main/apps/mail-ngrx/store/selectors/index.ts diff --git a/src/app/main/content/apps/mail-ngrx/store/selectors/labels.selectors.ts b/src/app/main/apps/mail-ngrx/store/selectors/labels.selectors.ts similarity index 100% rename from src/app/main/content/apps/mail-ngrx/store/selectors/labels.selectors.ts rename to src/app/main/apps/mail-ngrx/store/selectors/labels.selectors.ts diff --git a/src/app/main/content/apps/mail-ngrx/store/selectors/mails.selectors.ts b/src/app/main/apps/mail-ngrx/store/selectors/mails.selectors.ts similarity index 100% rename from src/app/main/content/apps/mail-ngrx/store/selectors/mails.selectors.ts rename to src/app/main/apps/mail-ngrx/store/selectors/mails.selectors.ts diff --git a/src/app/main/content/apps/mail-ngrx/store/store.module.ts b/src/app/main/apps/mail-ngrx/store/store.module.ts similarity index 100% rename from src/app/main/content/apps/mail-ngrx/store/store.module.ts rename to src/app/main/apps/mail-ngrx/store/store.module.ts diff --git a/src/app/main/content/apps/mail/dialogs/compose/compose.component.html b/src/app/main/apps/mail/dialogs/compose/compose.component.html similarity index 100% rename from src/app/main/content/apps/mail/dialogs/compose/compose.component.html rename to src/app/main/apps/mail/dialogs/compose/compose.component.html diff --git a/src/app/main/content/apps/mail/dialogs/compose/compose.component.scss b/src/app/main/apps/mail/dialogs/compose/compose.component.scss similarity index 100% rename from src/app/main/content/apps/mail/dialogs/compose/compose.component.scss rename to src/app/main/apps/mail/dialogs/compose/compose.component.scss diff --git a/src/app/main/content/apps/mail/dialogs/compose/compose.component.ts b/src/app/main/apps/mail/dialogs/compose/compose.component.ts similarity index 100% rename from src/app/main/content/apps/mail/dialogs/compose/compose.component.ts rename to src/app/main/apps/mail/dialogs/compose/compose.component.ts diff --git a/src/app/main/content/apps/mail/i18n/en.ts b/src/app/main/apps/mail/i18n/en.ts similarity index 100% rename from src/app/main/content/apps/mail/i18n/en.ts rename to src/app/main/apps/mail/i18n/en.ts diff --git a/src/app/main/content/apps/mail/i18n/tr.ts b/src/app/main/apps/mail/i18n/tr.ts similarity index 100% rename from src/app/main/content/apps/mail/i18n/tr.ts rename to src/app/main/apps/mail/i18n/tr.ts diff --git a/src/app/main/content/apps/mail/mail-details/mail-details.component.html b/src/app/main/apps/mail/mail-details/mail-details.component.html similarity index 100% rename from src/app/main/content/apps/mail/mail-details/mail-details.component.html rename to src/app/main/apps/mail/mail-details/mail-details.component.html diff --git a/src/app/main/content/apps/mail/mail-details/mail-details.component.scss b/src/app/main/apps/mail/mail-details/mail-details.component.scss similarity index 100% rename from src/app/main/content/apps/mail/mail-details/mail-details.component.scss rename to src/app/main/apps/mail/mail-details/mail-details.component.scss diff --git a/src/app/main/content/apps/mail/mail-details/mail-details.component.ts b/src/app/main/apps/mail/mail-details/mail-details.component.ts similarity index 100% rename from src/app/main/content/apps/mail/mail-details/mail-details.component.ts rename to src/app/main/apps/mail/mail-details/mail-details.component.ts diff --git a/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.html b/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.html similarity index 100% rename from src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.html rename to src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.html diff --git a/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss b/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss similarity index 100% rename from src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss rename to src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss diff --git a/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.ts b/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.ts similarity index 100% rename from src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.ts rename to src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.ts diff --git a/src/app/main/content/apps/mail/mail-list/mail-list.component.html b/src/app/main/apps/mail/mail-list/mail-list.component.html similarity index 100% rename from src/app/main/content/apps/mail/mail-list/mail-list.component.html rename to src/app/main/apps/mail/mail-list/mail-list.component.html diff --git a/src/app/main/content/apps/mail/mail-list/mail-list.component.scss b/src/app/main/apps/mail/mail-list/mail-list.component.scss similarity index 100% rename from src/app/main/content/apps/mail/mail-list/mail-list.component.scss rename to src/app/main/apps/mail/mail-list/mail-list.component.scss diff --git a/src/app/main/content/apps/mail/mail-list/mail-list.component.ts b/src/app/main/apps/mail/mail-list/mail-list.component.ts similarity index 100% rename from src/app/main/content/apps/mail/mail-list/mail-list.component.ts rename to src/app/main/apps/mail/mail-list/mail-list.component.ts diff --git a/src/app/main/content/apps/mail/mail.component.html b/src/app/main/apps/mail/mail.component.html similarity index 100% rename from src/app/main/content/apps/mail/mail.component.html rename to src/app/main/apps/mail/mail.component.html diff --git a/src/app/main/content/apps/mail/mail.component.scss b/src/app/main/apps/mail/mail.component.scss similarity index 100% rename from src/app/main/content/apps/mail/mail.component.scss rename to src/app/main/apps/mail/mail.component.scss diff --git a/src/app/main/content/apps/mail/mail.component.ts b/src/app/main/apps/mail/mail.component.ts similarity index 100% rename from src/app/main/content/apps/mail/mail.component.ts rename to src/app/main/apps/mail/mail.component.ts diff --git a/src/app/main/content/apps/mail/mail.model.ts b/src/app/main/apps/mail/mail.model.ts similarity index 100% rename from src/app/main/content/apps/mail/mail.model.ts rename to src/app/main/apps/mail/mail.model.ts diff --git a/src/app/main/content/apps/mail/mail.module.ts b/src/app/main/apps/mail/mail.module.ts similarity index 100% rename from src/app/main/content/apps/mail/mail.module.ts rename to src/app/main/apps/mail/mail.module.ts diff --git a/src/app/main/content/apps/mail/mail.service.ts b/src/app/main/apps/mail/mail.service.ts similarity index 100% rename from src/app/main/content/apps/mail/mail.service.ts rename to src/app/main/apps/mail/mail.service.ts diff --git a/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html b/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.html similarity index 100% rename from src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html rename to src/app/main/apps/mail/sidenavs/main/main-sidenav.component.html diff --git a/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.scss b/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.scss similarity index 100% rename from src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.scss rename to src/app/main/apps/mail/sidenavs/main/main-sidenav.component.scss diff --git a/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.ts b/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.ts similarity index 100% rename from src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.ts rename to src/app/main/apps/mail/sidenavs/main/main-sidenav.component.ts diff --git a/src/app/main/content/apps/scrumboard/board.model.ts b/src/app/main/apps/scrumboard/board.model.ts similarity index 100% rename from src/app/main/content/apps/scrumboard/board.model.ts rename to src/app/main/apps/scrumboard/board.model.ts diff --git a/src/app/main/content/apps/scrumboard/board/add-list/add-list.component.html b/src/app/main/apps/scrumboard/board/add-list/add-list.component.html similarity index 100% rename from src/app/main/content/apps/scrumboard/board/add-list/add-list.component.html rename to src/app/main/apps/scrumboard/board/add-list/add-list.component.html diff --git a/src/app/main/content/apps/scrumboard/board/add-list/add-list.component.scss b/src/app/main/apps/scrumboard/board/add-list/add-list.component.scss similarity index 100% rename from src/app/main/content/apps/scrumboard/board/add-list/add-list.component.scss rename to src/app/main/apps/scrumboard/board/add-list/add-list.component.scss diff --git a/src/app/main/content/apps/scrumboard/board/add-list/add-list.component.ts b/src/app/main/apps/scrumboard/board/add-list/add-list.component.ts similarity index 100% rename from src/app/main/content/apps/scrumboard/board/add-list/add-list.component.ts rename to src/app/main/apps/scrumboard/board/add-list/add-list.component.ts diff --git a/src/app/main/content/apps/scrumboard/board/board.component.html b/src/app/main/apps/scrumboard/board/board.component.html similarity index 100% rename from src/app/main/content/apps/scrumboard/board/board.component.html rename to src/app/main/apps/scrumboard/board/board.component.html diff --git a/src/app/main/content/apps/scrumboard/board/board.component.scss b/src/app/main/apps/scrumboard/board/board.component.scss similarity index 100% rename from src/app/main/content/apps/scrumboard/board/board.component.scss rename to src/app/main/apps/scrumboard/board/board.component.scss diff --git a/src/app/main/content/apps/scrumboard/board/board.component.ts b/src/app/main/apps/scrumboard/board/board.component.ts similarity index 100% rename from src/app/main/content/apps/scrumboard/board/board.component.ts rename to src/app/main/apps/scrumboard/board/board.component.ts diff --git a/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html b/src/app/main/apps/scrumboard/board/dialogs/card/card.component.html similarity index 100% rename from src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html rename to src/app/main/apps/scrumboard/board/dialogs/card/card.component.html diff --git a/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.scss b/src/app/main/apps/scrumboard/board/dialogs/card/card.component.scss similarity index 100% rename from src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.scss rename to src/app/main/apps/scrumboard/board/dialogs/card/card.component.scss diff --git a/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.ts b/src/app/main/apps/scrumboard/board/dialogs/card/card.component.ts similarity index 100% rename from src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.ts rename to src/app/main/apps/scrumboard/board/dialogs/card/card.component.ts diff --git a/src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.html b/src/app/main/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.html similarity index 100% rename from src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.html rename to src/app/main/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.html diff --git a/src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.scss b/src/app/main/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.scss similarity index 100% rename from src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.scss rename to src/app/main/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.scss diff --git a/src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.ts b/src/app/main/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.ts similarity index 100% rename from src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.ts rename to src/app/main/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.ts diff --git a/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.html b/src/app/main/apps/scrumboard/board/edit-board-name/edit-board-name.component.html similarity index 100% rename from src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.html rename to src/app/main/apps/scrumboard/board/edit-board-name/edit-board-name.component.html diff --git a/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.scss b/src/app/main/apps/scrumboard/board/edit-board-name/edit-board-name.component.scss similarity index 100% rename from src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.scss rename to src/app/main/apps/scrumboard/board/edit-board-name/edit-board-name.component.scss diff --git a/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.ts b/src/app/main/apps/scrumboard/board/edit-board-name/edit-board-name.component.ts similarity index 100% rename from src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.ts rename to src/app/main/apps/scrumboard/board/edit-board-name/edit-board-name.component.ts diff --git a/src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.html b/src/app/main/apps/scrumboard/board/list/add-card/add-card.component.html similarity index 100% rename from src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.html rename to src/app/main/apps/scrumboard/board/list/add-card/add-card.component.html diff --git a/src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.scss b/src/app/main/apps/scrumboard/board/list/add-card/add-card.component.scss similarity index 100% rename from src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.scss rename to src/app/main/apps/scrumboard/board/list/add-card/add-card.component.scss diff --git a/src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.ts b/src/app/main/apps/scrumboard/board/list/add-card/add-card.component.ts similarity index 100% rename from src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.ts rename to src/app/main/apps/scrumboard/board/list/add-card/add-card.component.ts diff --git a/src/app/main/content/apps/scrumboard/board/list/card/card.component.html b/src/app/main/apps/scrumboard/board/list/card/card.component.html similarity index 100% rename from src/app/main/content/apps/scrumboard/board/list/card/card.component.html rename to src/app/main/apps/scrumboard/board/list/card/card.component.html diff --git a/src/app/main/content/apps/scrumboard/board/list/card/card.component.scss b/src/app/main/apps/scrumboard/board/list/card/card.component.scss similarity index 100% rename from src/app/main/content/apps/scrumboard/board/list/card/card.component.scss rename to src/app/main/apps/scrumboard/board/list/card/card.component.scss diff --git a/src/app/main/content/apps/scrumboard/board/list/card/card.component.ts b/src/app/main/apps/scrumboard/board/list/card/card.component.ts similarity index 100% rename from src/app/main/content/apps/scrumboard/board/list/card/card.component.ts rename to src/app/main/apps/scrumboard/board/list/card/card.component.ts diff --git a/src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.html b/src/app/main/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.html similarity index 100% rename from src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.html rename to src/app/main/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.html diff --git a/src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.scss b/src/app/main/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.scss similarity index 100% rename from src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.scss rename to src/app/main/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.scss diff --git a/src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.ts b/src/app/main/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.ts similarity index 100% rename from src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.ts rename to src/app/main/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.ts diff --git a/src/app/main/content/apps/scrumboard/board/list/list.component.html b/src/app/main/apps/scrumboard/board/list/list.component.html similarity index 100% rename from src/app/main/content/apps/scrumboard/board/list/list.component.html rename to src/app/main/apps/scrumboard/board/list/list.component.html diff --git a/src/app/main/content/apps/scrumboard/board/list/list.component.scss b/src/app/main/apps/scrumboard/board/list/list.component.scss similarity index 100% rename from src/app/main/content/apps/scrumboard/board/list/list.component.scss rename to src/app/main/apps/scrumboard/board/list/list.component.scss diff --git a/src/app/main/content/apps/scrumboard/board/list/list.component.ts b/src/app/main/apps/scrumboard/board/list/list.component.ts similarity index 100% rename from src/app/main/content/apps/scrumboard/board/list/list.component.ts rename to src/app/main/apps/scrumboard/board/list/list.component.ts diff --git a/src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.html b/src/app/main/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.html similarity index 100% rename from src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.html rename to src/app/main/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.html diff --git a/src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.scss b/src/app/main/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.scss similarity index 100% rename from src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.scss rename to src/app/main/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.scss diff --git a/src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.ts b/src/app/main/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.ts similarity index 100% rename from src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.ts rename to src/app/main/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.ts diff --git a/src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.html b/src/app/main/apps/scrumboard/board/sidenavs/settings/settings.component.html similarity index 100% rename from src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.html rename to src/app/main/apps/scrumboard/board/sidenavs/settings/settings.component.html diff --git a/src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.scss b/src/app/main/apps/scrumboard/board/sidenavs/settings/settings.component.scss similarity index 100% rename from src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.scss rename to src/app/main/apps/scrumboard/board/sidenavs/settings/settings.component.scss diff --git a/src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.ts b/src/app/main/apps/scrumboard/board/sidenavs/settings/settings.component.ts similarity index 100% rename from src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.ts rename to src/app/main/apps/scrumboard/board/sidenavs/settings/settings.component.ts diff --git a/src/app/main/content/apps/scrumboard/card.model.ts b/src/app/main/apps/scrumboard/card.model.ts similarity index 100% rename from src/app/main/content/apps/scrumboard/card.model.ts rename to src/app/main/apps/scrumboard/card.model.ts diff --git a/src/app/main/content/apps/scrumboard/list.model.ts b/src/app/main/apps/scrumboard/list.model.ts similarity index 100% rename from src/app/main/content/apps/scrumboard/list.model.ts rename to src/app/main/apps/scrumboard/list.model.ts diff --git a/src/app/main/content/apps/scrumboard/scrumboard.component.html b/src/app/main/apps/scrumboard/scrumboard.component.html similarity index 100% rename from src/app/main/content/apps/scrumboard/scrumboard.component.html rename to src/app/main/apps/scrumboard/scrumboard.component.html diff --git a/src/app/main/content/apps/scrumboard/scrumboard.component.scss b/src/app/main/apps/scrumboard/scrumboard.component.scss similarity index 100% rename from src/app/main/content/apps/scrumboard/scrumboard.component.scss rename to src/app/main/apps/scrumboard/scrumboard.component.scss diff --git a/src/app/main/content/apps/scrumboard/scrumboard.component.ts b/src/app/main/apps/scrumboard/scrumboard.component.ts similarity index 100% rename from src/app/main/content/apps/scrumboard/scrumboard.component.ts rename to src/app/main/apps/scrumboard/scrumboard.component.ts diff --git a/src/app/main/content/apps/scrumboard/scrumboard.module.ts b/src/app/main/apps/scrumboard/scrumboard.module.ts similarity index 100% rename from src/app/main/content/apps/scrumboard/scrumboard.module.ts rename to src/app/main/apps/scrumboard/scrumboard.module.ts diff --git a/src/app/main/content/apps/scrumboard/scrumboard.service.ts b/src/app/main/apps/scrumboard/scrumboard.service.ts similarity index 100% rename from src/app/main/content/apps/scrumboard/scrumboard.service.ts rename to src/app/main/apps/scrumboard/scrumboard.service.ts diff --git a/src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.html b/src/app/main/apps/todo/sidenavs/main/main-sidenav.component.html similarity index 100% rename from src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.html rename to src/app/main/apps/todo/sidenavs/main/main-sidenav.component.html diff --git a/src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.scss b/src/app/main/apps/todo/sidenavs/main/main-sidenav.component.scss similarity index 100% rename from src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.scss rename to src/app/main/apps/todo/sidenavs/main/main-sidenav.component.scss diff --git a/src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.ts b/src/app/main/apps/todo/sidenavs/main/main-sidenav.component.ts similarity index 100% rename from src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.ts rename to src/app/main/apps/todo/sidenavs/main/main-sidenav.component.ts diff --git a/src/app/main/content/apps/todo/todo-details/todo-details.component.html b/src/app/main/apps/todo/todo-details/todo-details.component.html similarity index 100% rename from src/app/main/content/apps/todo/todo-details/todo-details.component.html rename to src/app/main/apps/todo/todo-details/todo-details.component.html diff --git a/src/app/main/content/apps/todo/todo-details/todo-details.component.scss b/src/app/main/apps/todo/todo-details/todo-details.component.scss similarity index 100% rename from src/app/main/content/apps/todo/todo-details/todo-details.component.scss rename to src/app/main/apps/todo/todo-details/todo-details.component.scss diff --git a/src/app/main/content/apps/todo/todo-details/todo-details.component.ts b/src/app/main/apps/todo/todo-details/todo-details.component.ts similarity index 100% rename from src/app/main/content/apps/todo/todo-details/todo-details.component.ts rename to src/app/main/apps/todo/todo-details/todo-details.component.ts diff --git a/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.html b/src/app/main/apps/todo/todo-list/todo-list-item/todo-list-item.component.html similarity index 100% rename from src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.html rename to src/app/main/apps/todo/todo-list/todo-list-item/todo-list-item.component.html diff --git a/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.scss b/src/app/main/apps/todo/todo-list/todo-list-item/todo-list-item.component.scss similarity index 100% rename from src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.scss rename to src/app/main/apps/todo/todo-list/todo-list-item/todo-list-item.component.scss diff --git a/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.ts b/src/app/main/apps/todo/todo-list/todo-list-item/todo-list-item.component.ts similarity index 100% rename from src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.ts rename to src/app/main/apps/todo/todo-list/todo-list-item/todo-list-item.component.ts diff --git a/src/app/main/content/apps/todo/todo-list/todo-list.component.html b/src/app/main/apps/todo/todo-list/todo-list.component.html similarity index 100% rename from src/app/main/content/apps/todo/todo-list/todo-list.component.html rename to src/app/main/apps/todo/todo-list/todo-list.component.html diff --git a/src/app/main/content/apps/todo/todo-list/todo-list.component.scss b/src/app/main/apps/todo/todo-list/todo-list.component.scss similarity index 100% rename from src/app/main/content/apps/todo/todo-list/todo-list.component.scss rename to src/app/main/apps/todo/todo-list/todo-list.component.scss diff --git a/src/app/main/content/apps/todo/todo-list/todo-list.component.ts b/src/app/main/apps/todo/todo-list/todo-list.component.ts similarity index 100% rename from src/app/main/content/apps/todo/todo-list/todo-list.component.ts rename to src/app/main/apps/todo/todo-list/todo-list.component.ts diff --git a/src/app/main/content/apps/todo/todo.component.html b/src/app/main/apps/todo/todo.component.html similarity index 100% rename from src/app/main/content/apps/todo/todo.component.html rename to src/app/main/apps/todo/todo.component.html diff --git a/src/app/main/content/apps/todo/todo.component.scss b/src/app/main/apps/todo/todo.component.scss similarity index 100% rename from src/app/main/content/apps/todo/todo.component.scss rename to src/app/main/apps/todo/todo.component.scss diff --git a/src/app/main/content/apps/todo/todo.component.ts b/src/app/main/apps/todo/todo.component.ts similarity index 100% rename from src/app/main/content/apps/todo/todo.component.ts rename to src/app/main/apps/todo/todo.component.ts diff --git a/src/app/main/content/apps/todo/todo.model.ts b/src/app/main/apps/todo/todo.model.ts similarity index 100% rename from src/app/main/content/apps/todo/todo.model.ts rename to src/app/main/apps/todo/todo.model.ts diff --git a/src/app/main/content/apps/todo/todo.module.ts b/src/app/main/apps/todo/todo.module.ts similarity index 100% rename from src/app/main/content/apps/todo/todo.module.ts rename to src/app/main/apps/todo/todo.module.ts diff --git a/src/app/main/content/apps/todo/todo.service.ts b/src/app/main/apps/todo/todo.service.ts similarity index 100% rename from src/app/main/content/apps/todo/todo.service.ts rename to src/app/main/apps/todo/todo.service.ts diff --git a/src/app/main/content/components-third-party/components-third-party.module.ts b/src/app/main/components-third-party/components-third-party.module.ts similarity index 100% rename from src/app/main/content/components-third-party/components-third-party.module.ts rename to src/app/main/components-third-party/components-third-party.module.ts diff --git a/src/app/main/content/components-third-party/datatable/ngx-datatable.component.html b/src/app/main/components-third-party/datatable/ngx-datatable.component.html similarity index 100% rename from src/app/main/content/components-third-party/datatable/ngx-datatable.component.html rename to src/app/main/components-third-party/datatable/ngx-datatable.component.html diff --git a/src/app/main/content/components-third-party/datatable/ngx-datatable.component.scss b/src/app/main/components-third-party/datatable/ngx-datatable.component.scss similarity index 100% rename from src/app/main/content/components-third-party/datatable/ngx-datatable.component.scss rename to src/app/main/components-third-party/datatable/ngx-datatable.component.scss diff --git a/src/app/main/content/components-third-party/datatable/ngx-datatable.component.ts b/src/app/main/components-third-party/datatable/ngx-datatable.component.ts similarity index 100% rename from src/app/main/content/components-third-party/datatable/ngx-datatable.component.ts rename to src/app/main/components-third-party/datatable/ngx-datatable.component.ts diff --git a/src/app/main/content/components-third-party/google-maps/google-maps.component.html b/src/app/main/components-third-party/google-maps/google-maps.component.html similarity index 100% rename from src/app/main/content/components-third-party/google-maps/google-maps.component.html rename to src/app/main/components-third-party/google-maps/google-maps.component.html diff --git a/src/app/main/content/components-third-party/google-maps/google-maps.component.scss b/src/app/main/components-third-party/google-maps/google-maps.component.scss similarity index 100% rename from src/app/main/content/components-third-party/google-maps/google-maps.component.scss rename to src/app/main/components-third-party/google-maps/google-maps.component.scss diff --git a/src/app/main/content/components-third-party/google-maps/google-maps.component.ts b/src/app/main/components-third-party/google-maps/google-maps.component.ts similarity index 100% rename from src/app/main/content/components-third-party/google-maps/google-maps.component.ts rename to src/app/main/components-third-party/google-maps/google-maps.component.ts diff --git a/src/app/main/content/components-third-party/google-maps/google-maps.module.ts b/src/app/main/components-third-party/google-maps/google-maps.module.ts similarity index 100% rename from src/app/main/content/components-third-party/google-maps/google-maps.module.ts rename to src/app/main/components-third-party/google-maps/google-maps.module.ts diff --git a/src/app/main/content/components/angular-material/angular-material.component.html b/src/app/main/components/angular-material/angular-material.component.html similarity index 100% rename from src/app/main/content/components/angular-material/angular-material.component.html rename to src/app/main/components/angular-material/angular-material.component.html diff --git a/src/app/main/content/components/angular-material/angular-material.component.scss b/src/app/main/components/angular-material/angular-material.component.scss similarity index 100% rename from src/app/main/content/components/angular-material/angular-material.component.scss rename to src/app/main/components/angular-material/angular-material.component.scss diff --git a/src/app/main/content/components/angular-material/angular-material.component.ts b/src/app/main/components/angular-material/angular-material.component.ts similarity index 100% rename from src/app/main/content/components/angular-material/angular-material.component.ts rename to src/app/main/components/angular-material/angular-material.component.ts diff --git a/src/app/main/content/components/angular-material/angular-material.module.ts b/src/app/main/components/angular-material/angular-material.module.ts similarity index 100% rename from src/app/main/content/components/angular-material/angular-material.module.ts rename to src/app/main/components/angular-material/angular-material.module.ts diff --git a/src/app/main/content/components/angular-material/example-components.ts b/src/app/main/components/angular-material/example-components.ts similarity index 100% rename from src/app/main/content/components/angular-material/example-components.ts rename to src/app/main/components/angular-material/example-components.ts diff --git a/src/app/main/content/components/angular-material/example-viewer/example-viewer.html b/src/app/main/components/angular-material/example-viewer/example-viewer.html similarity index 100% rename from src/app/main/content/components/angular-material/example-viewer/example-viewer.html rename to src/app/main/components/angular-material/example-viewer/example-viewer.html diff --git a/src/app/main/content/components/angular-material/example-viewer/example-viewer.scss b/src/app/main/components/angular-material/example-viewer/example-viewer.scss similarity index 100% rename from src/app/main/content/components/angular-material/example-viewer/example-viewer.scss rename to src/app/main/components/angular-material/example-viewer/example-viewer.scss diff --git a/src/app/main/content/components/angular-material/example-viewer/example-viewer.ts b/src/app/main/components/angular-material/example-viewer/example-viewer.ts similarity index 100% rename from src/app/main/content/components/angular-material/example-viewer/example-viewer.ts rename to src/app/main/components/angular-material/example-viewer/example-viewer.ts diff --git a/src/app/main/content/components/angular-material/material.module.ts b/src/app/main/components/angular-material/material.module.ts similarity index 100% rename from src/app/main/content/components/angular-material/material.module.ts rename to src/app/main/components/angular-material/material.module.ts diff --git a/src/app/main/content/components/cards/cards.component.html b/src/app/main/components/cards/cards.component.html similarity index 100% rename from src/app/main/content/components/cards/cards.component.html rename to src/app/main/components/cards/cards.component.html diff --git a/src/app/main/content/components/cards/cards.component.scss b/src/app/main/components/cards/cards.component.scss similarity index 100% rename from src/app/main/content/components/cards/cards.component.scss rename to src/app/main/components/cards/cards.component.scss diff --git a/src/app/main/content/components/cards/cards.component.ts b/src/app/main/components/cards/cards.component.ts similarity index 100% rename from src/app/main/content/components/cards/cards.component.ts rename to src/app/main/components/cards/cards.component.ts diff --git a/src/app/main/content/components/components.module.ts b/src/app/main/components/components.module.ts similarity index 100% rename from src/app/main/content/components/components.module.ts rename to src/app/main/components/components.module.ts diff --git a/src/app/main/content/components/countdown/countdown.component.html b/src/app/main/components/countdown/countdown.component.html similarity index 100% rename from src/app/main/content/components/countdown/countdown.component.html rename to src/app/main/components/countdown/countdown.component.html diff --git a/src/app/main/content/components/countdown/countdown.component.scss b/src/app/main/components/countdown/countdown.component.scss similarity index 100% rename from src/app/main/content/components/countdown/countdown.component.scss rename to src/app/main/components/countdown/countdown.component.scss diff --git a/src/app/main/content/components/countdown/countdown.component.ts b/src/app/main/components/countdown/countdown.component.ts similarity index 100% rename from src/app/main/content/components/countdown/countdown.component.ts rename to src/app/main/components/countdown/countdown.component.ts diff --git a/src/app/main/content/components/highlight/highlight.component.html b/src/app/main/components/highlight/highlight.component.html similarity index 100% rename from src/app/main/content/components/highlight/highlight.component.html rename to src/app/main/components/highlight/highlight.component.html diff --git a/src/app/main/content/components/highlight/highlight.component.scss b/src/app/main/components/highlight/highlight.component.scss similarity index 100% rename from src/app/main/content/components/highlight/highlight.component.scss rename to src/app/main/components/highlight/highlight.component.scss diff --git a/src/app/main/content/components/highlight/highlight.component.ts b/src/app/main/components/highlight/highlight.component.ts similarity index 100% rename from src/app/main/content/components/highlight/highlight.component.ts rename to src/app/main/components/highlight/highlight.component.ts diff --git a/src/app/main/content/components/material-color-picker/material-color-picker.component.html b/src/app/main/components/material-color-picker/material-color-picker.component.html similarity index 100% rename from src/app/main/content/components/material-color-picker/material-color-picker.component.html rename to src/app/main/components/material-color-picker/material-color-picker.component.html diff --git a/src/app/main/content/components/material-color-picker/material-color-picker.component.scss b/src/app/main/components/material-color-picker/material-color-picker.component.scss similarity index 100% rename from src/app/main/content/components/material-color-picker/material-color-picker.component.scss rename to src/app/main/components/material-color-picker/material-color-picker.component.scss diff --git a/src/app/main/content/components/material-color-picker/material-color-picker.component.ts b/src/app/main/components/material-color-picker/material-color-picker.component.ts similarity index 100% rename from src/app/main/content/components/material-color-picker/material-color-picker.component.ts rename to src/app/main/components/material-color-picker/material-color-picker.component.ts diff --git a/src/app/main/content/components/multi-language/multi-language.component.html b/src/app/main/components/multi-language/multi-language.component.html similarity index 100% rename from src/app/main/content/components/multi-language/multi-language.component.html rename to src/app/main/components/multi-language/multi-language.component.html diff --git a/src/app/main/content/components/multi-language/multi-language.component.scss b/src/app/main/components/multi-language/multi-language.component.scss similarity index 100% rename from src/app/main/content/components/multi-language/multi-language.component.scss rename to src/app/main/components/multi-language/multi-language.component.scss diff --git a/src/app/main/content/components/multi-language/multi-language.component.ts b/src/app/main/components/multi-language/multi-language.component.ts similarity index 100% rename from src/app/main/content/components/multi-language/multi-language.component.ts rename to src/app/main/components/multi-language/multi-language.component.ts diff --git a/src/app/main/content/components/navigation/navigation.component.html b/src/app/main/components/navigation/navigation.component.html similarity index 100% rename from src/app/main/content/components/navigation/navigation.component.html rename to src/app/main/components/navigation/navigation.component.html diff --git a/src/app/main/content/components/navigation/navigation.component.scss b/src/app/main/components/navigation/navigation.component.scss similarity index 100% rename from src/app/main/content/components/navigation/navigation.component.scss rename to src/app/main/components/navigation/navigation.component.scss diff --git a/src/app/main/content/components/navigation/navigation.component.ts b/src/app/main/components/navigation/navigation.component.ts similarity index 100% rename from src/app/main/content/components/navigation/navigation.component.ts rename to src/app/main/components/navigation/navigation.component.ts diff --git a/src/app/main/content/components/search-bar/search-bar.component.html b/src/app/main/components/search-bar/search-bar.component.html similarity index 100% rename from src/app/main/content/components/search-bar/search-bar.component.html rename to src/app/main/components/search-bar/search-bar.component.html diff --git a/src/app/main/content/components/search-bar/search-bar.component.scss b/src/app/main/components/search-bar/search-bar.component.scss similarity index 100% rename from src/app/main/content/components/search-bar/search-bar.component.scss rename to src/app/main/components/search-bar/search-bar.component.scss diff --git a/src/app/main/content/components/search-bar/search-bar.component.ts b/src/app/main/components/search-bar/search-bar.component.ts similarity index 100% rename from src/app/main/content/components/search-bar/search-bar.component.ts rename to src/app/main/components/search-bar/search-bar.component.ts diff --git a/src/app/main/content/components/shortcuts/shortcuts.component.html b/src/app/main/components/shortcuts/shortcuts.component.html similarity index 100% rename from src/app/main/content/components/shortcuts/shortcuts.component.html rename to src/app/main/components/shortcuts/shortcuts.component.html diff --git a/src/app/main/content/components/shortcuts/shortcuts.component.scss b/src/app/main/components/shortcuts/shortcuts.component.scss similarity index 100% rename from src/app/main/content/components/shortcuts/shortcuts.component.scss rename to src/app/main/components/shortcuts/shortcuts.component.scss diff --git a/src/app/main/content/components/shortcuts/shortcuts.component.ts b/src/app/main/components/shortcuts/shortcuts.component.ts similarity index 100% rename from src/app/main/content/components/shortcuts/shortcuts.component.ts rename to src/app/main/components/shortcuts/shortcuts.component.ts diff --git a/src/app/main/content/components/sidebar/sidebar.component.html b/src/app/main/components/sidebar/sidebar.component.html similarity index 100% rename from src/app/main/content/components/sidebar/sidebar.component.html rename to src/app/main/components/sidebar/sidebar.component.html diff --git a/src/app/main/content/components/sidebar/sidebar.component.scss b/src/app/main/components/sidebar/sidebar.component.scss similarity index 100% rename from src/app/main/content/components/sidebar/sidebar.component.scss rename to src/app/main/components/sidebar/sidebar.component.scss diff --git a/src/app/main/content/components/sidebar/sidebar.component.ts b/src/app/main/components/sidebar/sidebar.component.ts similarity index 100% rename from src/app/main/content/components/sidebar/sidebar.component.ts rename to src/app/main/components/sidebar/sidebar.component.ts diff --git a/src/app/main/content/components/widget/widget.component.html b/src/app/main/components/widget/widget.component.html similarity index 100% rename from src/app/main/content/components/widget/widget.component.html rename to src/app/main/components/widget/widget.component.html diff --git a/src/app/main/content/components/widget/widget.component.scss b/src/app/main/components/widget/widget.component.scss similarity index 100% rename from src/app/main/content/components/widget/widget.component.scss rename to src/app/main/components/widget/widget.component.scss diff --git a/src/app/main/content/components/widget/widget.component.ts b/src/app/main/components/widget/widget.component.ts similarity index 100% rename from src/app/main/content/components/widget/widget.component.ts rename to src/app/main/components/widget/widget.component.ts diff --git a/src/app/main/content/content.component.html b/src/app/main/content/content.component.html deleted file mode 100644 index 90c6b646..00000000 --- a/src/app/main/content/content.component.html +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/app/main/main.component.ts b/src/app/main/main.component.ts deleted file mode 100644 index add7433a..00000000 --- a/src/app/main/main.component.ts +++ /dev/null @@ -1,63 +0,0 @@ -import { Component, ElementRef, HostBinding, Inject, OnDestroy, Renderer2, ViewEncapsulation } from '@angular/core'; -import { DOCUMENT } from '@angular/common'; -import { Platform } from '@angular/cdk/platform'; -import { Subscription } from 'rxjs'; - -import { FuseConfigService } from '@fuse/services/config.service'; - -import { navigation } from 'app/navigation/navigation'; - -@Component({ - selector : 'fuse-main', - templateUrl : './main.component.html', - styleUrls : ['./main.component.scss'], - encapsulation: ViewEncapsulation.None -}) -export class FuseMainComponent implements OnDestroy -{ - onConfigChanged: Subscription; - fuseSettings: any; - navigation: any; - - @HostBinding('attr.fuse-layout-mode') layoutMode; - - constructor( - private _renderer: Renderer2, - private _elementRef: ElementRef, - private fuseConfig: FuseConfigService, - private platform: Platform, - @Inject(DOCUMENT) private document: any - ) - { - this.onConfigChanged = - this.fuseConfig.onConfigChanged - .subscribe( - (newSettings) => { - this.fuseSettings = newSettings; - this.layoutMode = this.fuseSettings.layout.mode; - } - ); - - if ( this.platform.ANDROID || this.platform.IOS ) - { - this.document.body.className += ' is-mobile'; - } - - this.navigation = navigation; - } - - ngOnDestroy() - { - this.onConfigChanged.unsubscribe(); - } - - addClass(className: string) - { - this._renderer.addClass(this._elementRef.nativeElement, className); - } - - removeClass(className: string) - { - this._renderer.removeClass(this._elementRef.nativeElement, className); - } -} diff --git a/src/app/main/main.module.ts b/src/app/main/main.module.ts deleted file mode 100644 index f7c03c72..00000000 --- a/src/app/main/main.module.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; -import { MatSidenavModule } from '@angular/material'; - -import { FuseSharedModule } from '@fuse/shared.module'; -import { FuseNavigationModule, FuseSearchBarModule, FuseShortcutsModule, FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components'; - -import { FuseContentModule } from 'app/main/content/content.module'; -import { FuseFooterModule } from 'app/main/footer/footer.module'; -import { FuseNavbarModule } from 'app/main/navbar/navbar.module'; -import { FuseQuickPanelModule } from 'app/main/quick-panel/quick-panel.module'; -import { FuseToolbarModule } from 'app/main/toolbar/toolbar.module'; - -import { FuseMainComponent } from './main.component'; - - -@NgModule({ - declarations: [ - FuseMainComponent, - ], - imports : [ - RouterModule, - - MatSidenavModule, - - FuseSharedModule, - - FuseThemeOptionsModule, - FuseNavigationModule, - FuseSearchBarModule, - FuseShortcutsModule, - FuseSidebarModule, - - FuseContentModule, - FuseFooterModule, - FuseNavbarModule, - FuseQuickPanelModule, - FuseToolbarModule, - ], - exports : [ - FuseMainComponent - ] -}) -export class FuseMainModule -{ -} diff --git a/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.html b/src/app/main/pages/authentication/forgot-password-2/forgot-password-2.component.html similarity index 100% rename from src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.html rename to src/app/main/pages/authentication/forgot-password-2/forgot-password-2.component.html diff --git a/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.scss b/src/app/main/pages/authentication/forgot-password-2/forgot-password-2.component.scss similarity index 100% rename from src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.scss rename to src/app/main/pages/authentication/forgot-password-2/forgot-password-2.component.scss diff --git a/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.ts b/src/app/main/pages/authentication/forgot-password-2/forgot-password-2.component.ts similarity index 100% rename from src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.ts rename to src/app/main/pages/authentication/forgot-password-2/forgot-password-2.component.ts diff --git a/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.module.ts b/src/app/main/pages/authentication/forgot-password-2/forgot-password-2.module.ts similarity index 100% rename from src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.module.ts rename to src/app/main/pages/authentication/forgot-password-2/forgot-password-2.module.ts diff --git a/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.html b/src/app/main/pages/authentication/forgot-password/forgot-password.component.html similarity index 100% rename from src/app/main/content/pages/authentication/forgot-password/forgot-password.component.html rename to src/app/main/pages/authentication/forgot-password/forgot-password.component.html diff --git a/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.scss b/src/app/main/pages/authentication/forgot-password/forgot-password.component.scss similarity index 100% rename from src/app/main/content/pages/authentication/forgot-password/forgot-password.component.scss rename to src/app/main/pages/authentication/forgot-password/forgot-password.component.scss diff --git a/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.ts b/src/app/main/pages/authentication/forgot-password/forgot-password.component.ts similarity index 100% rename from src/app/main/content/pages/authentication/forgot-password/forgot-password.component.ts rename to src/app/main/pages/authentication/forgot-password/forgot-password.component.ts diff --git a/src/app/main/content/pages/authentication/forgot-password/forgot-password.module.ts b/src/app/main/pages/authentication/forgot-password/forgot-password.module.ts similarity index 100% rename from src/app/main/content/pages/authentication/forgot-password/forgot-password.module.ts rename to src/app/main/pages/authentication/forgot-password/forgot-password.module.ts diff --git a/src/app/main/content/pages/authentication/lock/lock.component.html b/src/app/main/pages/authentication/lock/lock.component.html similarity index 100% rename from src/app/main/content/pages/authentication/lock/lock.component.html rename to src/app/main/pages/authentication/lock/lock.component.html diff --git a/src/app/main/content/pages/authentication/lock/lock.component.scss b/src/app/main/pages/authentication/lock/lock.component.scss similarity index 100% rename from src/app/main/content/pages/authentication/lock/lock.component.scss rename to src/app/main/pages/authentication/lock/lock.component.scss diff --git a/src/app/main/content/pages/authentication/lock/lock.component.ts b/src/app/main/pages/authentication/lock/lock.component.ts similarity index 100% rename from src/app/main/content/pages/authentication/lock/lock.component.ts rename to src/app/main/pages/authentication/lock/lock.component.ts diff --git a/src/app/main/content/pages/authentication/lock/lock.module.ts b/src/app/main/pages/authentication/lock/lock.module.ts similarity index 100% rename from src/app/main/content/pages/authentication/lock/lock.module.ts rename to src/app/main/pages/authentication/lock/lock.module.ts diff --git a/src/app/main/content/pages/authentication/login-2/login-2.component.html b/src/app/main/pages/authentication/login-2/login-2.component.html similarity index 100% rename from src/app/main/content/pages/authentication/login-2/login-2.component.html rename to src/app/main/pages/authentication/login-2/login-2.component.html diff --git a/src/app/main/content/pages/authentication/login-2/login-2.component.scss b/src/app/main/pages/authentication/login-2/login-2.component.scss similarity index 100% rename from src/app/main/content/pages/authentication/login-2/login-2.component.scss rename to src/app/main/pages/authentication/login-2/login-2.component.scss diff --git a/src/app/main/content/pages/authentication/login-2/login-2.component.ts b/src/app/main/pages/authentication/login-2/login-2.component.ts similarity index 100% rename from src/app/main/content/pages/authentication/login-2/login-2.component.ts rename to src/app/main/pages/authentication/login-2/login-2.component.ts diff --git a/src/app/main/content/pages/authentication/login-2/login-2.module.ts b/src/app/main/pages/authentication/login-2/login-2.module.ts similarity index 100% rename from src/app/main/content/pages/authentication/login-2/login-2.module.ts rename to src/app/main/pages/authentication/login-2/login-2.module.ts diff --git a/src/app/main/content/pages/authentication/login/login.component.html b/src/app/main/pages/authentication/login/login.component.html similarity index 100% rename from src/app/main/content/pages/authentication/login/login.component.html rename to src/app/main/pages/authentication/login/login.component.html diff --git a/src/app/main/content/pages/authentication/login/login.component.scss b/src/app/main/pages/authentication/login/login.component.scss similarity index 100% rename from src/app/main/content/pages/authentication/login/login.component.scss rename to src/app/main/pages/authentication/login/login.component.scss diff --git a/src/app/main/content/pages/authentication/login/login.component.ts b/src/app/main/pages/authentication/login/login.component.ts similarity index 100% rename from src/app/main/content/pages/authentication/login/login.component.ts rename to src/app/main/pages/authentication/login/login.component.ts diff --git a/src/app/main/content/pages/authentication/login/login.module.ts b/src/app/main/pages/authentication/login/login.module.ts similarity index 100% rename from src/app/main/content/pages/authentication/login/login.module.ts rename to src/app/main/pages/authentication/login/login.module.ts diff --git a/src/app/main/content/pages/authentication/mail-confirm/mail-confirm.component.html b/src/app/main/pages/authentication/mail-confirm/mail-confirm.component.html similarity index 100% rename from src/app/main/content/pages/authentication/mail-confirm/mail-confirm.component.html rename to src/app/main/pages/authentication/mail-confirm/mail-confirm.component.html diff --git a/src/app/main/content/pages/authentication/mail-confirm/mail-confirm.component.scss b/src/app/main/pages/authentication/mail-confirm/mail-confirm.component.scss similarity index 100% rename from src/app/main/content/pages/authentication/mail-confirm/mail-confirm.component.scss rename to src/app/main/pages/authentication/mail-confirm/mail-confirm.component.scss diff --git a/src/app/main/content/pages/authentication/mail-confirm/mail-confirm.component.ts b/src/app/main/pages/authentication/mail-confirm/mail-confirm.component.ts similarity index 100% rename from src/app/main/content/pages/authentication/mail-confirm/mail-confirm.component.ts rename to src/app/main/pages/authentication/mail-confirm/mail-confirm.component.ts diff --git a/src/app/main/content/pages/authentication/mail-confirm/mail-confirm.module.ts b/src/app/main/pages/authentication/mail-confirm/mail-confirm.module.ts similarity index 100% rename from src/app/main/content/pages/authentication/mail-confirm/mail-confirm.module.ts rename to src/app/main/pages/authentication/mail-confirm/mail-confirm.module.ts diff --git a/src/app/main/content/pages/authentication/register-2/register-2.component.html b/src/app/main/pages/authentication/register-2/register-2.component.html similarity index 100% rename from src/app/main/content/pages/authentication/register-2/register-2.component.html rename to src/app/main/pages/authentication/register-2/register-2.component.html diff --git a/src/app/main/content/pages/authentication/register-2/register-2.component.scss b/src/app/main/pages/authentication/register-2/register-2.component.scss similarity index 100% rename from src/app/main/content/pages/authentication/register-2/register-2.component.scss rename to src/app/main/pages/authentication/register-2/register-2.component.scss diff --git a/src/app/main/content/pages/authentication/register-2/register-2.component.ts b/src/app/main/pages/authentication/register-2/register-2.component.ts similarity index 100% rename from src/app/main/content/pages/authentication/register-2/register-2.component.ts rename to src/app/main/pages/authentication/register-2/register-2.component.ts diff --git a/src/app/main/content/pages/authentication/register-2/register-2.module.ts b/src/app/main/pages/authentication/register-2/register-2.module.ts similarity index 100% rename from src/app/main/content/pages/authentication/register-2/register-2.module.ts rename to src/app/main/pages/authentication/register-2/register-2.module.ts diff --git a/src/app/main/content/pages/authentication/register/register.component.html b/src/app/main/pages/authentication/register/register.component.html similarity index 100% rename from src/app/main/content/pages/authentication/register/register.component.html rename to src/app/main/pages/authentication/register/register.component.html diff --git a/src/app/main/content/pages/authentication/register/register.component.scss b/src/app/main/pages/authentication/register/register.component.scss similarity index 100% rename from src/app/main/content/pages/authentication/register/register.component.scss rename to src/app/main/pages/authentication/register/register.component.scss diff --git a/src/app/main/content/pages/authentication/register/register.component.ts b/src/app/main/pages/authentication/register/register.component.ts similarity index 100% rename from src/app/main/content/pages/authentication/register/register.component.ts rename to src/app/main/pages/authentication/register/register.component.ts diff --git a/src/app/main/content/pages/authentication/register/register.module.ts b/src/app/main/pages/authentication/register/register.module.ts similarity index 100% rename from src/app/main/content/pages/authentication/register/register.module.ts rename to src/app/main/pages/authentication/register/register.module.ts diff --git a/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.html b/src/app/main/pages/authentication/reset-password-2/reset-password-2.component.html similarity index 100% rename from src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.html rename to src/app/main/pages/authentication/reset-password-2/reset-password-2.component.html diff --git a/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.scss b/src/app/main/pages/authentication/reset-password-2/reset-password-2.component.scss similarity index 100% rename from src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.scss rename to src/app/main/pages/authentication/reset-password-2/reset-password-2.component.scss diff --git a/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.ts b/src/app/main/pages/authentication/reset-password-2/reset-password-2.component.ts similarity index 100% rename from src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.ts rename to src/app/main/pages/authentication/reset-password-2/reset-password-2.component.ts diff --git a/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.module.ts b/src/app/main/pages/authentication/reset-password-2/reset-password-2.module.ts similarity index 100% rename from src/app/main/content/pages/authentication/reset-password-2/reset-password-2.module.ts rename to src/app/main/pages/authentication/reset-password-2/reset-password-2.module.ts diff --git a/src/app/main/content/pages/authentication/reset-password/reset-password.component.html b/src/app/main/pages/authentication/reset-password/reset-password.component.html similarity index 100% rename from src/app/main/content/pages/authentication/reset-password/reset-password.component.html rename to src/app/main/pages/authentication/reset-password/reset-password.component.html diff --git a/src/app/main/content/pages/authentication/reset-password/reset-password.component.scss b/src/app/main/pages/authentication/reset-password/reset-password.component.scss similarity index 100% rename from src/app/main/content/pages/authentication/reset-password/reset-password.component.scss rename to src/app/main/pages/authentication/reset-password/reset-password.component.scss diff --git a/src/app/main/content/pages/authentication/reset-password/reset-password.component.ts b/src/app/main/pages/authentication/reset-password/reset-password.component.ts similarity index 100% rename from src/app/main/content/pages/authentication/reset-password/reset-password.component.ts rename to src/app/main/pages/authentication/reset-password/reset-password.component.ts diff --git a/src/app/main/content/pages/authentication/reset-password/reset-password.module.ts b/src/app/main/pages/authentication/reset-password/reset-password.module.ts similarity index 100% rename from src/app/main/content/pages/authentication/reset-password/reset-password.module.ts rename to src/app/main/pages/authentication/reset-password/reset-password.module.ts diff --git a/src/app/main/content/pages/coming-soon/coming-soon.component.html b/src/app/main/pages/coming-soon/coming-soon.component.html similarity index 100% rename from src/app/main/content/pages/coming-soon/coming-soon.component.html rename to src/app/main/pages/coming-soon/coming-soon.component.html diff --git a/src/app/main/content/pages/coming-soon/coming-soon.component.scss b/src/app/main/pages/coming-soon/coming-soon.component.scss similarity index 100% rename from src/app/main/content/pages/coming-soon/coming-soon.component.scss rename to src/app/main/pages/coming-soon/coming-soon.component.scss diff --git a/src/app/main/content/pages/coming-soon/coming-soon.component.ts b/src/app/main/pages/coming-soon/coming-soon.component.ts similarity index 100% rename from src/app/main/content/pages/coming-soon/coming-soon.component.ts rename to src/app/main/pages/coming-soon/coming-soon.component.ts diff --git a/src/app/main/content/pages/coming-soon/coming-soon.module.ts b/src/app/main/pages/coming-soon/coming-soon.module.ts similarity index 100% rename from src/app/main/content/pages/coming-soon/coming-soon.module.ts rename to src/app/main/pages/coming-soon/coming-soon.module.ts diff --git a/src/app/main/content/pages/errors/404/error-404.component.html b/src/app/main/pages/errors/404/error-404.component.html similarity index 100% rename from src/app/main/content/pages/errors/404/error-404.component.html rename to src/app/main/pages/errors/404/error-404.component.html diff --git a/src/app/main/content/pages/errors/404/error-404.component.scss b/src/app/main/pages/errors/404/error-404.component.scss similarity index 100% rename from src/app/main/content/pages/errors/404/error-404.component.scss rename to src/app/main/pages/errors/404/error-404.component.scss diff --git a/src/app/main/content/pages/errors/404/error-404.component.ts b/src/app/main/pages/errors/404/error-404.component.ts similarity index 100% rename from src/app/main/content/pages/errors/404/error-404.component.ts rename to src/app/main/pages/errors/404/error-404.component.ts diff --git a/src/app/main/content/pages/errors/404/error-404.module.ts b/src/app/main/pages/errors/404/error-404.module.ts similarity index 100% rename from src/app/main/content/pages/errors/404/error-404.module.ts rename to src/app/main/pages/errors/404/error-404.module.ts diff --git a/src/app/main/content/pages/errors/500/error-500.component.html b/src/app/main/pages/errors/500/error-500.component.html similarity index 100% rename from src/app/main/content/pages/errors/500/error-500.component.html rename to src/app/main/pages/errors/500/error-500.component.html diff --git a/src/app/main/content/pages/errors/500/error-500.component.scss b/src/app/main/pages/errors/500/error-500.component.scss similarity index 100% rename from src/app/main/content/pages/errors/500/error-500.component.scss rename to src/app/main/pages/errors/500/error-500.component.scss diff --git a/src/app/main/content/pages/errors/500/error-500.component.ts b/src/app/main/pages/errors/500/error-500.component.ts similarity index 100% rename from src/app/main/content/pages/errors/500/error-500.component.ts rename to src/app/main/pages/errors/500/error-500.component.ts diff --git a/src/app/main/content/pages/errors/500/error-500.module.ts b/src/app/main/pages/errors/500/error-500.module.ts similarity index 100% rename from src/app/main/content/pages/errors/500/error-500.module.ts rename to src/app/main/pages/errors/500/error-500.module.ts diff --git a/src/app/main/content/pages/faq/faq.component.html b/src/app/main/pages/faq/faq.component.html similarity index 100% rename from src/app/main/content/pages/faq/faq.component.html rename to src/app/main/pages/faq/faq.component.html diff --git a/src/app/main/content/pages/faq/faq.component.scss b/src/app/main/pages/faq/faq.component.scss similarity index 100% rename from src/app/main/content/pages/faq/faq.component.scss rename to src/app/main/pages/faq/faq.component.scss diff --git a/src/app/main/content/pages/faq/faq.component.ts b/src/app/main/pages/faq/faq.component.ts similarity index 100% rename from src/app/main/content/pages/faq/faq.component.ts rename to src/app/main/pages/faq/faq.component.ts diff --git a/src/app/main/content/pages/faq/faq.module.ts b/src/app/main/pages/faq/faq.module.ts similarity index 100% rename from src/app/main/content/pages/faq/faq.module.ts rename to src/app/main/pages/faq/faq.module.ts diff --git a/src/app/main/content/pages/faq/faq.service.ts b/src/app/main/pages/faq/faq.service.ts similarity index 100% rename from src/app/main/content/pages/faq/faq.service.ts rename to src/app/main/pages/faq/faq.service.ts diff --git a/src/app/main/content/pages/invoices/compact/compact.component.html b/src/app/main/pages/invoices/compact/compact.component.html similarity index 100% rename from src/app/main/content/pages/invoices/compact/compact.component.html rename to src/app/main/pages/invoices/compact/compact.component.html diff --git a/src/app/main/content/pages/invoices/compact/compact.component.scss b/src/app/main/pages/invoices/compact/compact.component.scss similarity index 100% rename from src/app/main/content/pages/invoices/compact/compact.component.scss rename to src/app/main/pages/invoices/compact/compact.component.scss diff --git a/src/app/main/content/pages/invoices/compact/compact.component.ts b/src/app/main/pages/invoices/compact/compact.component.ts similarity index 100% rename from src/app/main/content/pages/invoices/compact/compact.component.ts rename to src/app/main/pages/invoices/compact/compact.component.ts diff --git a/src/app/main/content/pages/invoices/compact/compact.module.ts b/src/app/main/pages/invoices/compact/compact.module.ts similarity index 100% rename from src/app/main/content/pages/invoices/compact/compact.module.ts rename to src/app/main/pages/invoices/compact/compact.module.ts diff --git a/src/app/main/content/pages/invoices/invoice.service.ts b/src/app/main/pages/invoices/invoice.service.ts similarity index 100% rename from src/app/main/content/pages/invoices/invoice.service.ts rename to src/app/main/pages/invoices/invoice.service.ts diff --git a/src/app/main/content/pages/invoices/modern/modern.component.html b/src/app/main/pages/invoices/modern/modern.component.html similarity index 100% rename from src/app/main/content/pages/invoices/modern/modern.component.html rename to src/app/main/pages/invoices/modern/modern.component.html diff --git a/src/app/main/content/pages/invoices/modern/modern.component.scss b/src/app/main/pages/invoices/modern/modern.component.scss similarity index 100% rename from src/app/main/content/pages/invoices/modern/modern.component.scss rename to src/app/main/pages/invoices/modern/modern.component.scss diff --git a/src/app/main/content/pages/invoices/modern/modern.component.ts b/src/app/main/pages/invoices/modern/modern.component.ts similarity index 100% rename from src/app/main/content/pages/invoices/modern/modern.component.ts rename to src/app/main/pages/invoices/modern/modern.component.ts diff --git a/src/app/main/content/pages/invoices/modern/modern.module.ts b/src/app/main/pages/invoices/modern/modern.module.ts similarity index 100% rename from src/app/main/content/pages/invoices/modern/modern.module.ts rename to src/app/main/pages/invoices/modern/modern.module.ts diff --git a/src/app/main/content/pages/knowledge-base/dialogs/article/article.component.html b/src/app/main/pages/knowledge-base/dialogs/article/article.component.html similarity index 100% rename from src/app/main/content/pages/knowledge-base/dialogs/article/article.component.html rename to src/app/main/pages/knowledge-base/dialogs/article/article.component.html diff --git a/src/app/main/content/pages/knowledge-base/dialogs/article/article.component.scss b/src/app/main/pages/knowledge-base/dialogs/article/article.component.scss similarity index 100% rename from src/app/main/content/pages/knowledge-base/dialogs/article/article.component.scss rename to src/app/main/pages/knowledge-base/dialogs/article/article.component.scss diff --git a/src/app/main/content/pages/knowledge-base/dialogs/article/article.component.ts b/src/app/main/pages/knowledge-base/dialogs/article/article.component.ts similarity index 100% rename from src/app/main/content/pages/knowledge-base/dialogs/article/article.component.ts rename to src/app/main/pages/knowledge-base/dialogs/article/article.component.ts diff --git a/src/app/main/content/pages/knowledge-base/knowledge-base.component.html b/src/app/main/pages/knowledge-base/knowledge-base.component.html similarity index 100% rename from src/app/main/content/pages/knowledge-base/knowledge-base.component.html rename to src/app/main/pages/knowledge-base/knowledge-base.component.html diff --git a/src/app/main/content/pages/knowledge-base/knowledge-base.component.scss b/src/app/main/pages/knowledge-base/knowledge-base.component.scss similarity index 100% rename from src/app/main/content/pages/knowledge-base/knowledge-base.component.scss rename to src/app/main/pages/knowledge-base/knowledge-base.component.scss diff --git a/src/app/main/content/pages/knowledge-base/knowledge-base.component.ts b/src/app/main/pages/knowledge-base/knowledge-base.component.ts similarity index 100% rename from src/app/main/content/pages/knowledge-base/knowledge-base.component.ts rename to src/app/main/pages/knowledge-base/knowledge-base.component.ts diff --git a/src/app/main/content/pages/knowledge-base/knowledge-base.module.ts b/src/app/main/pages/knowledge-base/knowledge-base.module.ts similarity index 100% rename from src/app/main/content/pages/knowledge-base/knowledge-base.module.ts rename to src/app/main/pages/knowledge-base/knowledge-base.module.ts diff --git a/src/app/main/content/pages/knowledge-base/knowledge-base.service.ts b/src/app/main/pages/knowledge-base/knowledge-base.service.ts similarity index 100% rename from src/app/main/content/pages/knowledge-base/knowledge-base.service.ts rename to src/app/main/pages/knowledge-base/knowledge-base.service.ts diff --git a/src/app/main/content/pages/maintenance/maintenance.component.html b/src/app/main/pages/maintenance/maintenance.component.html similarity index 100% rename from src/app/main/content/pages/maintenance/maintenance.component.html rename to src/app/main/pages/maintenance/maintenance.component.html diff --git a/src/app/main/content/pages/maintenance/maintenance.component.scss b/src/app/main/pages/maintenance/maintenance.component.scss similarity index 100% rename from src/app/main/content/pages/maintenance/maintenance.component.scss rename to src/app/main/pages/maintenance/maintenance.component.scss diff --git a/src/app/main/content/pages/maintenance/maintenance.component.ts b/src/app/main/pages/maintenance/maintenance.component.ts similarity index 100% rename from src/app/main/content/pages/maintenance/maintenance.component.ts rename to src/app/main/pages/maintenance/maintenance.component.ts diff --git a/src/app/main/content/pages/maintenance/maintenence.module.ts b/src/app/main/pages/maintenance/maintenence.module.ts similarity index 100% rename from src/app/main/content/pages/maintenance/maintenence.module.ts rename to src/app/main/pages/maintenance/maintenence.module.ts diff --git a/src/app/main/content/pages/pages.module.ts b/src/app/main/pages/pages.module.ts similarity index 100% rename from src/app/main/content/pages/pages.module.ts rename to src/app/main/pages/pages.module.ts diff --git a/src/app/main/content/pages/pricing/pricing.module.ts b/src/app/main/pages/pricing/pricing.module.ts similarity index 100% rename from src/app/main/content/pages/pricing/pricing.module.ts rename to src/app/main/pages/pricing/pricing.module.ts diff --git a/src/app/main/content/pages/pricing/style-1/style-1.component.html b/src/app/main/pages/pricing/style-1/style-1.component.html similarity index 100% rename from src/app/main/content/pages/pricing/style-1/style-1.component.html rename to src/app/main/pages/pricing/style-1/style-1.component.html diff --git a/src/app/main/content/pages/pricing/style-1/style-1.component.scss b/src/app/main/pages/pricing/style-1/style-1.component.scss similarity index 100% rename from src/app/main/content/pages/pricing/style-1/style-1.component.scss rename to src/app/main/pages/pricing/style-1/style-1.component.scss diff --git a/src/app/main/content/pages/pricing/style-1/style-1.component.ts b/src/app/main/pages/pricing/style-1/style-1.component.ts similarity index 100% rename from src/app/main/content/pages/pricing/style-1/style-1.component.ts rename to src/app/main/pages/pricing/style-1/style-1.component.ts diff --git a/src/app/main/content/pages/pricing/style-2/style-2.component.html b/src/app/main/pages/pricing/style-2/style-2.component.html similarity index 100% rename from src/app/main/content/pages/pricing/style-2/style-2.component.html rename to src/app/main/pages/pricing/style-2/style-2.component.html diff --git a/src/app/main/content/pages/pricing/style-2/style-2.component.scss b/src/app/main/pages/pricing/style-2/style-2.component.scss similarity index 100% rename from src/app/main/content/pages/pricing/style-2/style-2.component.scss rename to src/app/main/pages/pricing/style-2/style-2.component.scss diff --git a/src/app/main/content/pages/pricing/style-2/style-2.component.ts b/src/app/main/pages/pricing/style-2/style-2.component.ts similarity index 100% rename from src/app/main/content/pages/pricing/style-2/style-2.component.ts rename to src/app/main/pages/pricing/style-2/style-2.component.ts diff --git a/src/app/main/content/pages/pricing/style-3/style-3.component.html b/src/app/main/pages/pricing/style-3/style-3.component.html similarity index 100% rename from src/app/main/content/pages/pricing/style-3/style-3.component.html rename to src/app/main/pages/pricing/style-3/style-3.component.html diff --git a/src/app/main/content/pages/pricing/style-3/style-3.component.scss b/src/app/main/pages/pricing/style-3/style-3.component.scss similarity index 100% rename from src/app/main/content/pages/pricing/style-3/style-3.component.scss rename to src/app/main/pages/pricing/style-3/style-3.component.scss diff --git a/src/app/main/content/pages/pricing/style-3/style-3.component.ts b/src/app/main/pages/pricing/style-3/style-3.component.ts similarity index 100% rename from src/app/main/content/pages/pricing/style-3/style-3.component.ts rename to src/app/main/pages/pricing/style-3/style-3.component.ts diff --git a/src/app/main/content/pages/profile/profile.component.html b/src/app/main/pages/profile/profile.component.html similarity index 100% rename from src/app/main/content/pages/profile/profile.component.html rename to src/app/main/pages/profile/profile.component.html diff --git a/src/app/main/content/pages/profile/profile.component.scss b/src/app/main/pages/profile/profile.component.scss similarity index 100% rename from src/app/main/content/pages/profile/profile.component.scss rename to src/app/main/pages/profile/profile.component.scss diff --git a/src/app/main/content/pages/profile/profile.component.ts b/src/app/main/pages/profile/profile.component.ts similarity index 100% rename from src/app/main/content/pages/profile/profile.component.ts rename to src/app/main/pages/profile/profile.component.ts diff --git a/src/app/main/content/pages/profile/profile.module.ts b/src/app/main/pages/profile/profile.module.ts similarity index 100% rename from src/app/main/content/pages/profile/profile.module.ts rename to src/app/main/pages/profile/profile.module.ts diff --git a/src/app/main/content/pages/profile/profile.service.ts b/src/app/main/pages/profile/profile.service.ts similarity index 100% rename from src/app/main/content/pages/profile/profile.service.ts rename to src/app/main/pages/profile/profile.service.ts diff --git a/src/app/main/content/pages/profile/tabs/about/about.component.html b/src/app/main/pages/profile/tabs/about/about.component.html similarity index 100% rename from src/app/main/content/pages/profile/tabs/about/about.component.html rename to src/app/main/pages/profile/tabs/about/about.component.html diff --git a/src/app/main/content/pages/profile/tabs/about/about.component.scss b/src/app/main/pages/profile/tabs/about/about.component.scss similarity index 100% rename from src/app/main/content/pages/profile/tabs/about/about.component.scss rename to src/app/main/pages/profile/tabs/about/about.component.scss diff --git a/src/app/main/content/pages/profile/tabs/about/about.component.ts b/src/app/main/pages/profile/tabs/about/about.component.ts similarity index 100% rename from src/app/main/content/pages/profile/tabs/about/about.component.ts rename to src/app/main/pages/profile/tabs/about/about.component.ts diff --git a/src/app/main/content/pages/profile/tabs/photos-videos/photos-videos.component.html b/src/app/main/pages/profile/tabs/photos-videos/photos-videos.component.html similarity index 100% rename from src/app/main/content/pages/profile/tabs/photos-videos/photos-videos.component.html rename to src/app/main/pages/profile/tabs/photos-videos/photos-videos.component.html diff --git a/src/app/main/content/pages/profile/tabs/photos-videos/photos-videos.component.scss b/src/app/main/pages/profile/tabs/photos-videos/photos-videos.component.scss similarity index 100% rename from src/app/main/content/pages/profile/tabs/photos-videos/photos-videos.component.scss rename to src/app/main/pages/profile/tabs/photos-videos/photos-videos.component.scss diff --git a/src/app/main/content/pages/profile/tabs/photos-videos/photos-videos.component.ts b/src/app/main/pages/profile/tabs/photos-videos/photos-videos.component.ts similarity index 100% rename from src/app/main/content/pages/profile/tabs/photos-videos/photos-videos.component.ts rename to src/app/main/pages/profile/tabs/photos-videos/photos-videos.component.ts diff --git a/src/app/main/content/pages/profile/tabs/timeline/timeline.component.html b/src/app/main/pages/profile/tabs/timeline/timeline.component.html similarity index 100% rename from src/app/main/content/pages/profile/tabs/timeline/timeline.component.html rename to src/app/main/pages/profile/tabs/timeline/timeline.component.html diff --git a/src/app/main/content/pages/profile/tabs/timeline/timeline.component.scss b/src/app/main/pages/profile/tabs/timeline/timeline.component.scss similarity index 100% rename from src/app/main/content/pages/profile/tabs/timeline/timeline.component.scss rename to src/app/main/pages/profile/tabs/timeline/timeline.component.scss diff --git a/src/app/main/content/pages/profile/tabs/timeline/timeline.component.ts b/src/app/main/pages/profile/tabs/timeline/timeline.component.ts similarity index 100% rename from src/app/main/content/pages/profile/tabs/timeline/timeline.component.ts rename to src/app/main/pages/profile/tabs/timeline/timeline.component.ts diff --git a/src/app/main/content/pages/search/search.component.html b/src/app/main/pages/search/search.component.html similarity index 100% rename from src/app/main/content/pages/search/search.component.html rename to src/app/main/pages/search/search.component.html diff --git a/src/app/main/content/pages/search/search.component.scss b/src/app/main/pages/search/search.component.scss similarity index 100% rename from src/app/main/content/pages/search/search.component.scss rename to src/app/main/pages/search/search.component.scss diff --git a/src/app/main/content/pages/search/search.component.ts b/src/app/main/pages/search/search.component.ts similarity index 100% rename from src/app/main/content/pages/search/search.component.ts rename to src/app/main/pages/search/search.component.ts diff --git a/src/app/main/content/pages/search/search.module.ts b/src/app/main/pages/search/search.module.ts similarity index 100% rename from src/app/main/content/pages/search/search.module.ts rename to src/app/main/pages/search/search.module.ts diff --git a/src/app/main/content/pages/search/search.service.ts b/src/app/main/pages/search/search.service.ts similarity index 100% rename from src/app/main/content/pages/search/search.service.ts rename to src/app/main/pages/search/search.service.ts diff --git a/src/app/main/content/pages/search/tabs/classic/classic.component.html b/src/app/main/pages/search/tabs/classic/classic.component.html similarity index 100% rename from src/app/main/content/pages/search/tabs/classic/classic.component.html rename to src/app/main/pages/search/tabs/classic/classic.component.html diff --git a/src/app/main/content/pages/search/tabs/classic/classic.component.scss b/src/app/main/pages/search/tabs/classic/classic.component.scss similarity index 100% rename from src/app/main/content/pages/search/tabs/classic/classic.component.scss rename to src/app/main/pages/search/tabs/classic/classic.component.scss diff --git a/src/app/main/content/pages/search/tabs/classic/classic.component.ts b/src/app/main/pages/search/tabs/classic/classic.component.ts similarity index 100% rename from src/app/main/content/pages/search/tabs/classic/classic.component.ts rename to src/app/main/pages/search/tabs/classic/classic.component.ts diff --git a/src/app/main/content/pages/search/tabs/table/table.component.html b/src/app/main/pages/search/tabs/table/table.component.html similarity index 100% rename from src/app/main/content/pages/search/tabs/table/table.component.html rename to src/app/main/pages/search/tabs/table/table.component.html diff --git a/src/app/main/content/pages/search/tabs/table/table.component.scss b/src/app/main/pages/search/tabs/table/table.component.scss similarity index 100% rename from src/app/main/content/pages/search/tabs/table/table.component.scss rename to src/app/main/pages/search/tabs/table/table.component.scss diff --git a/src/app/main/content/pages/search/tabs/table/table.component.ts b/src/app/main/pages/search/tabs/table/table.component.ts similarity index 100% rename from src/app/main/content/pages/search/tabs/table/table.component.ts rename to src/app/main/pages/search/tabs/table/table.component.ts diff --git a/src/app/main/content/services/config/config.component.html b/src/app/main/services/config/config.component.html similarity index 100% rename from src/app/main/content/services/config/config.component.html rename to src/app/main/services/config/config.component.html diff --git a/src/app/main/content/services/config/config.component.scss b/src/app/main/services/config/config.component.scss similarity index 100% rename from src/app/main/content/services/config/config.component.scss rename to src/app/main/services/config/config.component.scss diff --git a/src/app/main/content/services/config/config.component.ts b/src/app/main/services/config/config.component.ts similarity index 100% rename from src/app/main/content/services/config/config.component.ts rename to src/app/main/services/config/config.component.ts diff --git a/src/app/main/content/services/services.module.ts b/src/app/main/services/services.module.ts similarity index 100% rename from src/app/main/content/services/services.module.ts rename to src/app/main/services/services.module.ts diff --git a/src/app/main/content/services/splash-screen/splash-screen.component.html b/src/app/main/services/splash-screen/splash-screen.component.html similarity index 100% rename from src/app/main/content/services/splash-screen/splash-screen.component.html rename to src/app/main/services/splash-screen/splash-screen.component.html diff --git a/src/app/main/content/services/splash-screen/splash-screen.component.scss b/src/app/main/services/splash-screen/splash-screen.component.scss similarity index 100% rename from src/app/main/content/services/splash-screen/splash-screen.component.scss rename to src/app/main/services/splash-screen/splash-screen.component.scss diff --git a/src/app/main/content/services/splash-screen/splash-screen.component.ts b/src/app/main/services/splash-screen/splash-screen.component.ts similarity index 100% rename from src/app/main/content/services/splash-screen/splash-screen.component.ts rename to src/app/main/services/splash-screen/splash-screen.component.ts diff --git a/src/app/main/content/ui/colors/colors.component.html b/src/app/main/ui/colors/colors.component.html similarity index 100% rename from src/app/main/content/ui/colors/colors.component.html rename to src/app/main/ui/colors/colors.component.html diff --git a/src/app/main/content/ui/colors/colors.component.scss b/src/app/main/ui/colors/colors.component.scss similarity index 100% rename from src/app/main/content/ui/colors/colors.component.scss rename to src/app/main/ui/colors/colors.component.scss diff --git a/src/app/main/content/ui/colors/colors.component.ts b/src/app/main/ui/colors/colors.component.ts similarity index 100% rename from src/app/main/content/ui/colors/colors.component.ts rename to src/app/main/ui/colors/colors.component.ts diff --git a/src/app/main/content/ui/colors/colors.module.ts b/src/app/main/ui/colors/colors.module.ts similarity index 100% rename from src/app/main/content/ui/colors/colors.module.ts rename to src/app/main/ui/colors/colors.module.ts diff --git a/src/app/main/content/ui/forms/forms.component.html b/src/app/main/ui/forms/forms.component.html similarity index 100% rename from src/app/main/content/ui/forms/forms.component.html rename to src/app/main/ui/forms/forms.component.html diff --git a/src/app/main/content/ui/forms/forms.component.scss b/src/app/main/ui/forms/forms.component.scss similarity index 100% rename from src/app/main/content/ui/forms/forms.component.scss rename to src/app/main/ui/forms/forms.component.scss diff --git a/src/app/main/content/ui/forms/forms.component.ts b/src/app/main/ui/forms/forms.component.ts similarity index 100% rename from src/app/main/content/ui/forms/forms.component.ts rename to src/app/main/ui/forms/forms.component.ts diff --git a/src/app/main/content/ui/forms/forms.module.ts b/src/app/main/ui/forms/forms.module.ts similarity index 100% rename from src/app/main/content/ui/forms/forms.module.ts rename to src/app/main/ui/forms/forms.module.ts diff --git a/src/app/main/content/ui/helper-classes/helper-classes.component.html b/src/app/main/ui/helper-classes/helper-classes.component.html similarity index 100% rename from src/app/main/content/ui/helper-classes/helper-classes.component.html rename to src/app/main/ui/helper-classes/helper-classes.component.html diff --git a/src/app/main/content/ui/helper-classes/helper-classes.component.scss b/src/app/main/ui/helper-classes/helper-classes.component.scss similarity index 100% rename from src/app/main/content/ui/helper-classes/helper-classes.component.scss rename to src/app/main/ui/helper-classes/helper-classes.component.scss diff --git a/src/app/main/content/ui/helper-classes/helper-classes.component.ts b/src/app/main/ui/helper-classes/helper-classes.component.ts similarity index 100% rename from src/app/main/content/ui/helper-classes/helper-classes.component.ts rename to src/app/main/ui/helper-classes/helper-classes.component.ts diff --git a/src/app/main/content/ui/helper-classes/helper-classes.module.ts b/src/app/main/ui/helper-classes/helper-classes.module.ts similarity index 100% rename from src/app/main/content/ui/helper-classes/helper-classes.module.ts rename to src/app/main/ui/helper-classes/helper-classes.module.ts diff --git a/src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.html b/src/app/main/ui/helper-classes/tabs/padding-margin/padding-margin.component.html similarity index 100% rename from src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.html rename to src/app/main/ui/helper-classes/tabs/padding-margin/padding-margin.component.html diff --git a/src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.scss b/src/app/main/ui/helper-classes/tabs/padding-margin/padding-margin.component.scss similarity index 100% rename from src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.scss rename to src/app/main/ui/helper-classes/tabs/padding-margin/padding-margin.component.scss diff --git a/src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.ts b/src/app/main/ui/helper-classes/tabs/padding-margin/padding-margin.component.ts similarity index 100% rename from src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.ts rename to src/app/main/ui/helper-classes/tabs/padding-margin/padding-margin.component.ts diff --git a/src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.html b/src/app/main/ui/helper-classes/tabs/width-height/width-height.component.html similarity index 100% rename from src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.html rename to src/app/main/ui/helper-classes/tabs/width-height/width-height.component.html diff --git a/src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.scss b/src/app/main/ui/helper-classes/tabs/width-height/width-height.component.scss similarity index 100% rename from src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.scss rename to src/app/main/ui/helper-classes/tabs/width-height/width-height.component.scss diff --git a/src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.ts b/src/app/main/ui/helper-classes/tabs/width-height/width-height.component.ts similarity index 100% rename from src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.ts rename to src/app/main/ui/helper-classes/tabs/width-height/width-height.component.ts diff --git a/src/app/main/content/ui/icons/icons.component.html b/src/app/main/ui/icons/icons.component.html similarity index 100% rename from src/app/main/content/ui/icons/icons.component.html rename to src/app/main/ui/icons/icons.component.html diff --git a/src/app/main/content/ui/icons/icons.component.scss b/src/app/main/ui/icons/icons.component.scss similarity index 100% rename from src/app/main/content/ui/icons/icons.component.scss rename to src/app/main/ui/icons/icons.component.scss diff --git a/src/app/main/content/ui/icons/icons.component.ts b/src/app/main/ui/icons/icons.component.ts similarity index 100% rename from src/app/main/content/ui/icons/icons.component.ts rename to src/app/main/ui/icons/icons.component.ts diff --git a/src/app/main/content/ui/icons/icons.module.ts b/src/app/main/ui/icons/icons.module.ts similarity index 100% rename from src/app/main/content/ui/icons/icons.module.ts rename to src/app/main/ui/icons/icons.module.ts diff --git a/src/app/main/content/ui/page-layouts/blank/blank.component.html b/src/app/main/ui/page-layouts/blank/blank.component.html similarity index 100% rename from src/app/main/content/ui/page-layouts/blank/blank.component.html rename to src/app/main/ui/page-layouts/blank/blank.component.html diff --git a/src/app/main/content/ui/page-layouts/blank/blank.component.scss b/src/app/main/ui/page-layouts/blank/blank.component.scss similarity index 100% rename from src/app/main/content/ui/page-layouts/blank/blank.component.scss rename to src/app/main/ui/page-layouts/blank/blank.component.scss diff --git a/src/app/main/content/ui/page-layouts/blank/blank.component.ts b/src/app/main/ui/page-layouts/blank/blank.component.ts similarity index 100% rename from src/app/main/content/ui/page-layouts/blank/blank.component.ts rename to src/app/main/ui/page-layouts/blank/blank.component.ts diff --git a/src/app/main/content/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html b/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html similarity index 100% rename from src/app/main/content/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html rename to src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html diff --git a/src/app/main/content/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.scss b/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.scss similarity index 100% rename from src/app/main/content/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.scss rename to src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.scss diff --git a/src/app/main/content/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.ts b/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.ts similarity index 100% rename from src/app/main/content/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.ts rename to src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.ts diff --git a/src/app/main/content/ui/page-layouts/carded/fullwidth/fullwidth.component.html b/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.html similarity index 100% rename from src/app/main/content/ui/page-layouts/carded/fullwidth/fullwidth.component.html rename to src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.html diff --git a/src/app/main/content/ui/page-layouts/carded/fullwidth/fullwidth.component.scss b/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.scss similarity index 100% rename from src/app/main/content/ui/page-layouts/carded/fullwidth/fullwidth.component.scss rename to src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.scss diff --git a/src/app/main/content/ui/page-layouts/carded/fullwidth/fullwidth.component.ts b/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.ts similarity index 100% rename from src/app/main/content/ui/page-layouts/carded/fullwidth/fullwidth.component.ts rename to src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.ts diff --git a/src/app/main/content/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.html b/src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.html similarity index 100% rename from src/app/main/content/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.html rename to src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.html diff --git a/src/app/main/content/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.scss b/src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.scss similarity index 100% rename from src/app/main/content/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.scss rename to src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.scss diff --git a/src/app/main/content/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.ts b/src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.ts similarity index 100% rename from src/app/main/content/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.ts rename to src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.ts diff --git a/src/app/main/content/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html b/src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html similarity index 100% rename from src/app/main/content/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html rename to src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html diff --git a/src/app/main/content/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.scss b/src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.scss similarity index 100% rename from src/app/main/content/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.scss rename to src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.scss diff --git a/src/app/main/content/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.ts b/src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.ts similarity index 100% rename from src/app/main/content/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.ts rename to src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.ts diff --git a/src/app/main/content/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.html b/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.html similarity index 100% rename from src/app/main/content/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.html rename to src/app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.html diff --git a/src/app/main/content/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.scss b/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.scss similarity index 100% rename from src/app/main/content/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.scss rename to src/app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.scss diff --git a/src/app/main/content/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.ts b/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.ts similarity index 100% rename from src/app/main/content/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.ts rename to src/app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.ts diff --git a/src/app/main/content/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html b/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html similarity index 100% rename from src/app/main/content/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html rename to src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html diff --git a/src/app/main/content/ui/page-layouts/carded/left-sidenav/left-sidenav.component.scss b/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.scss similarity index 100% rename from src/app/main/content/ui/page-layouts/carded/left-sidenav/left-sidenav.component.scss rename to src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.scss diff --git a/src/app/main/content/ui/page-layouts/carded/left-sidenav/left-sidenav.component.ts b/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.ts similarity index 100% rename from src/app/main/content/ui/page-layouts/carded/left-sidenav/left-sidenav.component.ts rename to src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.ts diff --git a/src/app/main/content/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.html b/src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.html similarity index 100% rename from src/app/main/content/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.html rename to src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.html diff --git a/src/app/main/content/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.scss b/src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.scss similarity index 100% rename from src/app/main/content/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.scss rename to src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.scss diff --git a/src/app/main/content/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.ts b/src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.ts similarity index 100% rename from src/app/main/content/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.ts rename to src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.ts diff --git a/src/app/main/content/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html b/src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html similarity index 100% rename from src/app/main/content/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html rename to src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html diff --git a/src/app/main/content/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.scss b/src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.scss similarity index 100% rename from src/app/main/content/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.scss rename to src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.scss diff --git a/src/app/main/content/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.ts b/src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.ts similarity index 100% rename from src/app/main/content/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.ts rename to src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.ts diff --git a/src/app/main/content/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.html b/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.html similarity index 100% rename from src/app/main/content/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.html rename to src/app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.html diff --git a/src/app/main/content/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.scss b/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.scss similarity index 100% rename from src/app/main/content/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.scss rename to src/app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.scss diff --git a/src/app/main/content/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.ts b/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.ts similarity index 100% rename from src/app/main/content/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.ts rename to src/app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.ts diff --git a/src/app/main/content/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html b/src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html similarity index 100% rename from src/app/main/content/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html rename to src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html diff --git a/src/app/main/content/ui/page-layouts/carded/right-sidenav/right-sidenav.component.scss b/src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.scss similarity index 100% rename from src/app/main/content/ui/page-layouts/carded/right-sidenav/right-sidenav.component.scss rename to src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.scss diff --git a/src/app/main/content/ui/page-layouts/carded/right-sidenav/right-sidenav.component.ts b/src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.ts similarity index 100% rename from src/app/main/content/ui/page-layouts/carded/right-sidenav/right-sidenav.component.ts rename to src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.ts diff --git a/src/app/main/content/ui/page-layouts/page-layouts.module.ts b/src/app/main/ui/page-layouts/page-layouts.module.ts similarity index 100% rename from src/app/main/content/ui/page-layouts/page-layouts.module.ts rename to src/app/main/ui/page-layouts/page-layouts.module.ts diff --git a/src/app/main/content/ui/page-layouts/simple/fullwidth/fullwidth.component.html b/src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.html similarity index 100% rename from src/app/main/content/ui/page-layouts/simple/fullwidth/fullwidth.component.html rename to src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.html diff --git a/src/app/main/content/ui/page-layouts/simple/fullwidth/fullwidth.component.scss b/src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.scss similarity index 100% rename from src/app/main/content/ui/page-layouts/simple/fullwidth/fullwidth.component.scss rename to src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.scss diff --git a/src/app/main/content/ui/page-layouts/simple/fullwidth/fullwidth.component.ts b/src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.ts similarity index 100% rename from src/app/main/content/ui/page-layouts/simple/fullwidth/fullwidth.component.ts rename to src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.ts diff --git a/src/app/main/content/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html b/src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html similarity index 100% rename from src/app/main/content/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html rename to src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html diff --git a/src/app/main/content/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.scss b/src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.scss similarity index 100% rename from src/app/main/content/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.scss rename to src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.scss diff --git a/src/app/main/content/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.ts b/src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.ts similarity index 100% rename from src/app/main/content/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.ts rename to src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.ts diff --git a/src/app/main/content/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.html b/src/app/main/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.html similarity index 100% rename from src/app/main/content/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.html rename to src/app/main/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.html diff --git a/src/app/main/content/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.scss b/src/app/main/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.scss similarity index 100% rename from src/app/main/content/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.scss rename to src/app/main/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.scss diff --git a/src/app/main/content/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.ts b/src/app/main/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.ts similarity index 100% rename from src/app/main/content/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.ts rename to src/app/main/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.ts diff --git a/src/app/main/content/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html b/src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html similarity index 100% rename from src/app/main/content/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html rename to src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html diff --git a/src/app/main/content/ui/page-layouts/simple/left-sidenav/left-sidenav.component.scss b/src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.scss similarity index 100% rename from src/app/main/content/ui/page-layouts/simple/left-sidenav/left-sidenav.component.scss rename to src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.scss diff --git a/src/app/main/content/ui/page-layouts/simple/left-sidenav/left-sidenav.component.ts b/src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.ts similarity index 100% rename from src/app/main/content/ui/page-layouts/simple/left-sidenav/left-sidenav.component.ts rename to src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.ts diff --git a/src/app/main/content/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html b/src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html similarity index 100% rename from src/app/main/content/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html rename to src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html diff --git a/src/app/main/content/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.scss b/src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.scss similarity index 100% rename from src/app/main/content/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.scss rename to src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.scss diff --git a/src/app/main/content/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.ts b/src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.ts similarity index 100% rename from src/app/main/content/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.ts rename to src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.ts diff --git a/src/app/main/content/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.html b/src/app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.html similarity index 100% rename from src/app/main/content/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.html rename to src/app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.html diff --git a/src/app/main/content/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.scss b/src/app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.scss similarity index 100% rename from src/app/main/content/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.scss rename to src/app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.scss diff --git a/src/app/main/content/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.ts b/src/app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.ts similarity index 100% rename from src/app/main/content/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.ts rename to src/app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.ts diff --git a/src/app/main/content/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html b/src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html similarity index 100% rename from src/app/main/content/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html rename to src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html diff --git a/src/app/main/content/ui/page-layouts/simple/right-sidenav/right-sidenav.component.scss b/src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.scss similarity index 100% rename from src/app/main/content/ui/page-layouts/simple/right-sidenav/right-sidenav.component.scss rename to src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.scss diff --git a/src/app/main/content/ui/page-layouts/simple/right-sidenav/right-sidenav.component.ts b/src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.ts similarity index 100% rename from src/app/main/content/ui/page-layouts/simple/right-sidenav/right-sidenav.component.ts rename to src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.ts diff --git a/src/app/main/content/ui/page-layouts/simple/tabbed/tabbed.component.html b/src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.html similarity index 100% rename from src/app/main/content/ui/page-layouts/simple/tabbed/tabbed.component.html rename to src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.html diff --git a/src/app/main/content/ui/page-layouts/simple/tabbed/tabbed.component.scss b/src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.scss similarity index 100% rename from src/app/main/content/ui/page-layouts/simple/tabbed/tabbed.component.scss rename to src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.scss diff --git a/src/app/main/content/ui/page-layouts/simple/tabbed/tabbed.component.ts b/src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.ts similarity index 100% rename from src/app/main/content/ui/page-layouts/simple/tabbed/tabbed.component.ts rename to src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.ts diff --git a/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.html b/src/app/main/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.html similarity index 100% rename from src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.html rename to src/app/main/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.html diff --git a/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.scss b/src/app/main/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.scss similarity index 100% rename from src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.scss rename to src/app/main/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.scss diff --git a/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.ts b/src/app/main/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.ts similarity index 100% rename from src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.ts rename to src/app/main/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.ts diff --git a/src/app/main/content/ui/typography/tabs/headings/headings.component.html b/src/app/main/ui/typography/tabs/headings/headings.component.html similarity index 100% rename from src/app/main/content/ui/typography/tabs/headings/headings.component.html rename to src/app/main/ui/typography/tabs/headings/headings.component.html diff --git a/src/app/main/content/ui/typography/tabs/headings/headings.component.scss b/src/app/main/ui/typography/tabs/headings/headings.component.scss similarity index 100% rename from src/app/main/content/ui/typography/tabs/headings/headings.component.scss rename to src/app/main/ui/typography/tabs/headings/headings.component.scss diff --git a/src/app/main/content/ui/typography/tabs/headings/headings.component.ts b/src/app/main/ui/typography/tabs/headings/headings.component.ts similarity index 100% rename from src/app/main/content/ui/typography/tabs/headings/headings.component.ts rename to src/app/main/ui/typography/tabs/headings/headings.component.ts diff --git a/src/app/main/content/ui/typography/tabs/helpers/helpers.component.html b/src/app/main/ui/typography/tabs/helpers/helpers.component.html similarity index 100% rename from src/app/main/content/ui/typography/tabs/helpers/helpers.component.html rename to src/app/main/ui/typography/tabs/helpers/helpers.component.html diff --git a/src/app/main/content/ui/typography/tabs/helpers/helpers.component.scss b/src/app/main/ui/typography/tabs/helpers/helpers.component.scss similarity index 100% rename from src/app/main/content/ui/typography/tabs/helpers/helpers.component.scss rename to src/app/main/ui/typography/tabs/helpers/helpers.component.scss diff --git a/src/app/main/content/ui/typography/tabs/helpers/helpers.component.ts b/src/app/main/ui/typography/tabs/helpers/helpers.component.ts similarity index 100% rename from src/app/main/content/ui/typography/tabs/helpers/helpers.component.ts rename to src/app/main/ui/typography/tabs/helpers/helpers.component.ts diff --git a/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.html b/src/app/main/ui/typography/tabs/inline-text-elements/inline-text-elements.component.html similarity index 100% rename from src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.html rename to src/app/main/ui/typography/tabs/inline-text-elements/inline-text-elements.component.html diff --git a/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.scss b/src/app/main/ui/typography/tabs/inline-text-elements/inline-text-elements.component.scss similarity index 100% rename from src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.scss rename to src/app/main/ui/typography/tabs/inline-text-elements/inline-text-elements.component.scss diff --git a/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.ts b/src/app/main/ui/typography/tabs/inline-text-elements/inline-text-elements.component.ts similarity index 100% rename from src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.ts rename to src/app/main/ui/typography/tabs/inline-text-elements/inline-text-elements.component.ts diff --git a/src/app/main/content/ui/typography/typography.component.html b/src/app/main/ui/typography/typography.component.html similarity index 100% rename from src/app/main/content/ui/typography/typography.component.html rename to src/app/main/ui/typography/typography.component.html diff --git a/src/app/main/content/ui/typography/typography.component.scss b/src/app/main/ui/typography/typography.component.scss similarity index 100% rename from src/app/main/content/ui/typography/typography.component.scss rename to src/app/main/ui/typography/typography.component.scss diff --git a/src/app/main/content/ui/typography/typography.component.ts b/src/app/main/ui/typography/typography.component.ts similarity index 100% rename from src/app/main/content/ui/typography/typography.component.ts rename to src/app/main/ui/typography/typography.component.ts diff --git a/src/app/main/content/ui/typography/typography.module.ts b/src/app/main/ui/typography/typography.module.ts similarity index 100% rename from src/app/main/content/ui/typography/typography.module.ts rename to src/app/main/ui/typography/typography.module.ts diff --git a/src/app/main/content/ui/ui.module.ts b/src/app/main/ui/ui.module.ts similarity index 100% rename from src/app/main/content/ui/ui.module.ts rename to src/app/main/ui/ui.module.ts From ced0853af80044e43e6f6cba75c7a47860101518 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Fri, 18 May 2018 17:40:57 +0300 Subject: [PATCH 02/75] (mail-ngrx) Use absolute paths on imports --- src/app/main/apps/mail-ngrx/mail.component.ts | 12 +++++------ src/app/main/apps/mail-ngrx/mail.module.ts | 21 ++++++++----------- src/app/main/apps/mail-ngrx/mail.service.ts | 6 +++--- .../mail-ngrx/store/actions/mails.actions.ts | 2 +- .../store/effects/filters.effects.ts | 4 ++-- .../store/effects/folders.effects.ts | 4 ++-- .../mail-ngrx/store/effects/labels.effects.ts | 2 +- .../mail-ngrx/store/effects/mails.effects.ts | 10 ++++----- .../mail-ngrx/store/guards/resolve.guard.ts | 8 +++---- .../store/reducers/filters.reducer.ts | 2 +- .../store/reducers/folders.reducer.ts | 2 +- .../store/reducers/labels.reducer.ts | 2 +- .../mail-ngrx/store/reducers/mails.reducer.ts | 4 ++-- .../store/selectors/filters.selectors.ts | 2 +- .../store/selectors/folders.selectors.ts | 2 +- .../store/selectors/labels.selectors.ts | 2 +- .../store/selectors/mails.selectors.ts | 2 +- .../main/apps/mail-ngrx/store/store.module.ts | 5 +++-- 18 files changed, 44 insertions(+), 48 deletions(-) diff --git a/src/app/main/apps/mail-ngrx/mail.component.ts b/src/app/main/apps/mail-ngrx/mail.component.ts index ad1f6952..c218a5d0 100644 --- a/src/app/main/apps/mail-ngrx/mail.component.ts +++ b/src/app/main/apps/mail-ngrx/mail.component.ts @@ -1,19 +1,17 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core'; import { FormControl } from '@angular/forms'; - import { Store } from '@ngrx/store'; - import { Observable } from 'rxjs'; import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; import { FuseTranslationLoaderService } from '@fuse/services/translation-loader.service'; import { FuseConfigService } from '@fuse/services/config.service'; -import { MailNgrxService } from './mail.service'; -import { Mail } from './mail.model'; -import * as fromStore from './store'; -import { locale as english } from './i18n/en'; -import { locale as turkish } from './i18n/tr'; +import { Mail } from 'app/main/apps/mail-ngrx/mail.model'; +import { MailNgrxService } from 'app/main/apps/mail-ngrx/mail.service'; +import * as fromStore from 'app/main/apps/mail-ngrx/store'; +import { locale as english } from 'app/main/apps/mail-ngrx/i18n/en'; +import { locale as turkish } from 'app/main/apps/mail-ngrx/i18n/tr'; @Component({ selector : 'fuse-mail', diff --git a/src/app/main/apps/mail-ngrx/mail.module.ts b/src/app/main/apps/mail-ngrx/mail.module.ts index 63456592..84653891 100644 --- a/src/app/main/apps/mail-ngrx/mail.module.ts +++ b/src/app/main/apps/mail-ngrx/mail.module.ts @@ -1,22 +1,19 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; - import { MatButtonModule, MatCheckboxModule, MatDialogModule, MatFormFieldModule, MatIconModule, MatInputModule, MatMenuModule, MatRippleModule, MatSelectModule, MatSidenavModule, MatToolbarModule } from '@angular/material'; - import { TranslateModule } from '@ngx-translate/core'; import { FuseSharedModule } from '@fuse/shared.module'; -import { MailAppStoreModule } from './store/store.module'; -import * as fromGuards from './store/guards/index'; - -import { FuseMailNgrxComponent } from './mail.component'; -import { FuseMailNgrxMainSidenavComponent } from './sidenavs/main/main-sidenav.component'; -import { FuseMailNgrxListItemComponent } from './mail-list/mail-list-item/mail-list-item.component'; -import { FuseMailNgrxListComponent } from './mail-list/mail-list.component'; -import { FuseMailNgrxDetailsComponent } from './mail-details/mail-details.component'; -import { MailNgrxService } from './mail.service'; -import { FuseMailNgrxComposeDialogComponent } from './dialogs/compose/compose.component'; +import { MailAppStoreModule } from 'app/main/apps/mail-ngrx/store/store.module'; +import * as fromGuards from 'app/main/apps/mail-ngrx/store/guards/index'; +import { FuseMailNgrxComponent } from 'app/main/apps/mail-ngrx/mail.component'; +import { FuseMailNgrxListComponent } from 'app/main/apps/mail-ngrx/mail-list/mail-list.component'; +import { FuseMailNgrxListItemComponent } from 'app/main/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component'; +import { FuseMailNgrxDetailsComponent } from 'app/main/apps/mail-ngrx/mail-details/mail-details.component'; +import { FuseMailNgrxMainSidenavComponent } from 'app/main/apps/mail-ngrx/sidenavs/main/main-sidenav.component'; +import { FuseMailNgrxComposeDialogComponent } from 'app/main/apps/mail-ngrx/dialogs/compose/compose.component'; +import { MailNgrxService } from 'app/main/apps/mail-ngrx/mail.service'; const routes: Routes = [ { diff --git a/src/app/main/apps/mail-ngrx/mail.service.ts b/src/app/main/apps/mail-ngrx/mail.service.ts index 99776059..26cbd9a8 100644 --- a/src/app/main/apps/mail-ngrx/mail.service.ts +++ b/src/app/main/apps/mail-ngrx/mail.service.ts @@ -3,9 +3,9 @@ import { HttpClient } from '@angular/common/http'; import { Store } from '@ngrx/store'; import { Observable } from 'rxjs'; -import { Mail } from './mail.model'; -import { MailAppState } from './store/reducers'; -import { getFiltersArr, getFoldersArr, getLabelsArr, getMailsArr } from './store/selectors'; +import { Mail } from 'app/main/apps/mail-ngrx/mail.model'; +import { MailAppState } from 'app/main/apps/mail-ngrx/store/reducers'; +import { getFiltersArr, getFoldersArr, getLabelsArr, getMailsArr } from 'app/main/apps/mail-ngrx/store/selectors'; @Injectable() export class MailNgrxService diff --git a/src/app/main/apps/mail-ngrx/store/actions/mails.actions.ts b/src/app/main/apps/mail-ngrx/store/actions/mails.actions.ts index 007c39d5..fc1f03f4 100644 --- a/src/app/main/apps/mail-ngrx/store/actions/mails.actions.ts +++ b/src/app/main/apps/mail-ngrx/store/actions/mails.actions.ts @@ -1,5 +1,5 @@ import { Action } from '@ngrx/store'; -import { Mail } from '../../mail.model'; +import { Mail } from 'app/main/apps/mail-ngrx/mail.model'; export const GET_MAILS = '[MAILS] GET MAILS'; export const GET_MAILS_SUCCESS = '[MAILS] GET MAILS SUCCESS'; diff --git a/src/app/main/apps/mail-ngrx/store/effects/filters.effects.ts b/src/app/main/apps/mail-ngrx/store/effects/filters.effects.ts index 6caaa85a..2d3832b4 100644 --- a/src/app/main/apps/mail-ngrx/store/effects/filters.effects.ts +++ b/src/app/main/apps/mail-ngrx/store/effects/filters.effects.ts @@ -4,8 +4,8 @@ import { Actions, Effect } from '@ngrx/effects'; import { Observable, of } from 'rxjs'; import { catchError, map, switchMap } from 'rxjs/operators'; -import * as FiltersActions from '../actions/filters.actions'; -import { MailNgrxService } from '../../mail.service'; +import * as FiltersActions from 'app/main/apps/mail-ngrx/store/actions/filters.actions'; +import { MailNgrxService } from 'app/main/apps/mail-ngrx/mail.service'; @Injectable() export class FiltersEffect diff --git a/src/app/main/apps/mail-ngrx/store/effects/folders.effects.ts b/src/app/main/apps/mail-ngrx/store/effects/folders.effects.ts index a3d439b4..aad0cdf1 100644 --- a/src/app/main/apps/mail-ngrx/store/effects/folders.effects.ts +++ b/src/app/main/apps/mail-ngrx/store/effects/folders.effects.ts @@ -4,8 +4,8 @@ import { Actions, Effect } from '@ngrx/effects'; import { Observable, of } from 'rxjs'; import { catchError, map, switchMap } from 'rxjs/operators'; -import * as FoldersActions from '../actions/folders.actions'; -import { MailNgrxService } from '../../mail.service'; +import * as FoldersActions from 'app/main/apps/mail-ngrx/store/actions/folders.actions'; +import { MailNgrxService } from 'app/main/apps/mail-ngrx/mail.service'; @Injectable() export class FoldersEffect diff --git a/src/app/main/apps/mail-ngrx/store/effects/labels.effects.ts b/src/app/main/apps/mail-ngrx/store/effects/labels.effects.ts index f755b28b..7f12bf28 100644 --- a/src/app/main/apps/mail-ngrx/store/effects/labels.effects.ts +++ b/src/app/main/apps/mail-ngrx/store/effects/labels.effects.ts @@ -5,7 +5,7 @@ import { Observable, of } from 'rxjs'; import { catchError, map, switchMap } from 'rxjs/operators'; import * as LabelsActions from '../actions/labels.actions'; -import { MailNgrxService } from '../../mail.service'; +import { MailNgrxService } from 'app/main/apps/mail-ngrx/mail.service'; @Injectable() export class LabelsEffect diff --git a/src/app/main/apps/mail-ngrx/store/effects/mails.effects.ts b/src/app/main/apps/mail-ngrx/store/effects/mails.effects.ts index beeef436..66c9ccc1 100644 --- a/src/app/main/apps/mail-ngrx/store/effects/mails.effects.ts +++ b/src/app/main/apps/mail-ngrx/store/effects/mails.effects.ts @@ -6,12 +6,12 @@ import { Observable, of, forkJoin } from 'rxjs'; import { catchError, debounceTime, map, mergeMap, exhaustMap, withLatestFrom } from 'rxjs/operators'; import { getRouterState, State } from 'app/store/reducers'; -import { getMailsState } from '../selectors'; -import * as MailsActions from '../actions/mails.actions'; -import * as fromRoot from '../../../../../../store'; +import { getMailsState } from 'app/main/apps/mail-ngrx/store/selectors'; +import * as MailsActions from 'app/main/apps/mail-ngrx/store/actions/mails.actions'; +import * as fromRoot from 'app/store'; -import { MailNgrxService } from '../../mail.service'; -import { Mail } from '../../mail.model'; +import { Mail } from 'app/main/apps/mail-ngrx/mail.model'; +import { MailNgrxService } from 'app/main/apps/mail-ngrx/mail.service'; @Injectable() export class MailsEffect diff --git a/src/app/main/apps/mail-ngrx/store/guards/resolve.guard.ts b/src/app/main/apps/mail-ngrx/store/guards/resolve.guard.ts index 2102ec33..6fa3324d 100644 --- a/src/app/main/apps/mail-ngrx/store/guards/resolve.guard.ts +++ b/src/app/main/apps/mail-ngrx/store/guards/resolve.guard.ts @@ -1,14 +1,14 @@ import { Injectable } from '@angular/core'; import { ActivatedRouteSnapshot, CanActivate } from '@angular/router'; +import { RouterStateSnapshot } from '@angular/router/src/router_state'; import { Store } from '@ngrx/store'; import { Observable, forkJoin, of } from 'rxjs'; import { map, switchMap, catchError, tap, take, filter } from 'rxjs/operators'; -import { MailAppState } from '../reducers'; -import * as fromStore from '../index'; -import { getFiltersLoaded, getFoldersLoaded, getLabelsLoaded, getMailsLoaded } from '../selectors'; -import { RouterStateSnapshot } from '@angular/router/src/router_state'; +import { MailAppState } from 'app/main/apps/mail-ngrx/store/reducers'; +import * as fromStore from 'app/main/apps/mail-ngrx/store'; +import { getFiltersLoaded, getFoldersLoaded, getLabelsLoaded, getMailsLoaded } from 'app/main/apps/mail-ngrx/store/selectors'; import { getRouterState } from 'app/store/reducers'; @Injectable() diff --git a/src/app/main/apps/mail-ngrx/store/reducers/filters.reducer.ts b/src/app/main/apps/mail-ngrx/store/reducers/filters.reducer.ts index eef4eb5f..1251a19d 100644 --- a/src/app/main/apps/mail-ngrx/store/reducers/filters.reducer.ts +++ b/src/app/main/apps/mail-ngrx/store/reducers/filters.reducer.ts @@ -1,4 +1,4 @@ -import * as FiltersActions from '../actions/filters.actions'; +import * as FiltersActions from 'app/main/apps/mail-ngrx/store/actions/filters.actions'; export interface FiltersState { diff --git a/src/app/main/apps/mail-ngrx/store/reducers/folders.reducer.ts b/src/app/main/apps/mail-ngrx/store/reducers/folders.reducer.ts index 91efb30e..9fe04dc5 100644 --- a/src/app/main/apps/mail-ngrx/store/reducers/folders.reducer.ts +++ b/src/app/main/apps/mail-ngrx/store/reducers/folders.reducer.ts @@ -1,4 +1,4 @@ -import * as FoldersActions from '../actions/folders.actions'; +import * as FoldersActions from 'app/main/apps/mail-ngrx/store/actions/folders.actions'; export interface FoldersState { diff --git a/src/app/main/apps/mail-ngrx/store/reducers/labels.reducer.ts b/src/app/main/apps/mail-ngrx/store/reducers/labels.reducer.ts index 147b4f3c..f6052b5b 100644 --- a/src/app/main/apps/mail-ngrx/store/reducers/labels.reducer.ts +++ b/src/app/main/apps/mail-ngrx/store/reducers/labels.reducer.ts @@ -1,4 +1,4 @@ -import * as LabelsActions from '../actions/labels.actions'; +import * as LabelsActions from 'app/main/apps/mail-ngrx/store/actions/labels.actions'; export interface LabelsState { diff --git a/src/app/main/apps/mail-ngrx/store/reducers/mails.reducer.ts b/src/app/main/apps/mail-ngrx/store/reducers/mails.reducer.ts index 9095d7c4..cd62c048 100644 --- a/src/app/main/apps/mail-ngrx/store/reducers/mails.reducer.ts +++ b/src/app/main/apps/mail-ngrx/store/reducers/mails.reducer.ts @@ -1,5 +1,5 @@ -import * as MailsActions from '../actions/mails.actions'; -import { Mail } from '../../mail.model'; +import * as MailsActions from 'app/main/apps/mail-ngrx/store/actions/mails.actions'; +import { Mail } from 'app/main/apps/mail-ngrx/mail.model'; export interface MailsState { diff --git a/src/app/main/apps/mail-ngrx/store/selectors/filters.selectors.ts b/src/app/main/apps/mail-ngrx/store/selectors/filters.selectors.ts index 5b740ff8..24b013e2 100644 --- a/src/app/main/apps/mail-ngrx/store/selectors/filters.selectors.ts +++ b/src/app/main/apps/mail-ngrx/store/selectors/filters.selectors.ts @@ -1,5 +1,5 @@ import { createSelector } from '@ngrx/store'; -import { FiltersState, getMailAppState, MailAppState } from '../reducers'; +import { FiltersState, getMailAppState, MailAppState } from 'app/main/apps/mail-ngrx/store/reducers'; export const getFiltersState = createSelector( getMailAppState, diff --git a/src/app/main/apps/mail-ngrx/store/selectors/folders.selectors.ts b/src/app/main/apps/mail-ngrx/store/selectors/folders.selectors.ts index 814f0113..e7153ec5 100644 --- a/src/app/main/apps/mail-ngrx/store/selectors/folders.selectors.ts +++ b/src/app/main/apps/mail-ngrx/store/selectors/folders.selectors.ts @@ -1,5 +1,5 @@ import { createSelector } from '@ngrx/store'; -import { FoldersState, getMailAppState, MailAppState } from '../reducers'; +import { FoldersState, getMailAppState, MailAppState } from 'app/main/apps/mail-ngrx/store/reducers'; export const getFoldersState = createSelector( getMailAppState, diff --git a/src/app/main/apps/mail-ngrx/store/selectors/labels.selectors.ts b/src/app/main/apps/mail-ngrx/store/selectors/labels.selectors.ts index c5ae21f5..94423ff6 100644 --- a/src/app/main/apps/mail-ngrx/store/selectors/labels.selectors.ts +++ b/src/app/main/apps/mail-ngrx/store/selectors/labels.selectors.ts @@ -1,5 +1,5 @@ import { createSelector } from '@ngrx/store'; -import { LabelsState, getMailAppState, MailAppState } from '../reducers'; +import { LabelsState, getMailAppState, MailAppState } from 'app/main/apps/mail-ngrx/store/reducers'; export const getLabelsState = createSelector( getMailAppState, diff --git a/src/app/main/apps/mail-ngrx/store/selectors/mails.selectors.ts b/src/app/main/apps/mail-ngrx/store/selectors/mails.selectors.ts index 27d4c19f..42dfed3a 100644 --- a/src/app/main/apps/mail-ngrx/store/selectors/mails.selectors.ts +++ b/src/app/main/apps/mail-ngrx/store/selectors/mails.selectors.ts @@ -1,7 +1,7 @@ import { FuseUtils } from '@fuse/utils'; import { createSelector } from '@ngrx/store'; -import { getMailAppState, MailAppState, MailsState } from '../reducers'; +import { getMailAppState, MailAppState, MailsState } from 'app/main/apps/mail-ngrx/store/reducers'; export const getMailsState = createSelector( getMailAppState, diff --git a/src/app/main/apps/mail-ngrx/store/store.module.ts b/src/app/main/apps/mail-ngrx/store/store.module.ts index 32b0a5d0..0a955f92 100644 --- a/src/app/main/apps/mail-ngrx/store/store.module.ts +++ b/src/app/main/apps/mail-ngrx/store/store.module.ts @@ -1,8 +1,9 @@ import { StoreModule } from '@ngrx/store'; import { NgModule } from '@angular/core'; import { EffectsModule } from '@ngrx/effects'; -import { reducers } from './reducers'; -import { effects } from './effects'; + +import { reducers } from 'app/main/apps/mail-ngrx/store/reducers'; +import { effects } from 'app/main/apps/mail-ngrx/store/effects'; @NgModule({ imports : [ From 0039f4493664a926b47e8c7c2c4dc3c6f1dc2566 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Sun, 20 May 2018 10:12:31 +0300 Subject: [PATCH 03/75] Improving the codebase (wip) --- angular.json | 2 +- .../confirm-dialog.component.ts | 9 +- .../countdown/countdown.component.ts | 84 +++++--- .../demo-content/demo-content.component.ts | 3 + .../demo-sidenav/demo-sidenav.component.ts | 3 + .../highlight/highlight.component.ts | 83 ++++++-- src/@fuse/components/index.ts | 1 - .../components/layouts/layouts.module.ts | 19 -- .../vertical-nav/basic/basic.component.html | 77 ------- .../vertical-nav/basic/basic.component.ts | 14 -- .../nav-horizontal-collapse.component.ts | 93 ++++++--- .../nav-item/nav-horizontal-item.component.ts | 15 +- .../navigation/navigation.component.ts | 10 +- .../navigation/navigation.service.ts | 10 +- .../nav-vertical-collapse.component.ts | 127 ++++++++---- .../nav-group/nav-vertical-group.component.ts | 10 +- .../nav-item/nav-vertical-item.component.ts | 10 +- .../search-bar/search-bar.component.ts | 84 ++++++-- .../shortcuts/shortcuts.component.ts | 143 +++++++++---- .../components/sidebar/sidebar.component.ts | 143 +++++++------ .../theme-options.component.html | 28 +-- .../theme-options/theme-options.component.ts | 121 +++++++---- .../widget/widget-toggle.directive.ts | 9 +- .../components/widget/widget.component.ts | 42 +++- .../fuse-if-on-dom.directive.ts | 30 ++- .../fuse-mat-sidenav.directive.ts | 119 +++++++---- .../fuse-mat-sidenav.service.ts | 23 ++- .../fuse-perfect-scrollbar.directive.ts | 146 +++++++++++--- src/@fuse/pipes/camelCaseToDash.pipe.ts | 9 +- src/@fuse/pipes/filter.pipe.ts | 8 + src/@fuse/pipes/getById.pipe.ts | 8 + src/@fuse/pipes/htmlToPlaintext.pipe.ts | 9 +- src/@fuse/pipes/keys.pipe.ts | 7 + src/@fuse/services/config.service.ts | 133 ++++++------ src/@fuse/services/copier.service.ts | 22 +- src/@fuse/services/match-media.service.ts | 41 +++- src/@fuse/services/splash-screen.service.ts | 54 ++++- .../services/translation-loader.service.ts | 22 +- src/@fuse/utils/index.ts | 61 +++++- src/app/app.component.html | 9 +- src/app/app.component.ts | 34 +++- src/app/app.module.ts | 25 +-- .../{fuse-config.ts => fuse-config/index.ts} | 4 +- .../content/content.component.html | 0 .../content/content.component.scss | 0 .../blocks/content/content.component.ts | 110 ++++++++++ .../{ => blocks}/content/content.module.ts | 9 +- .../{ => blocks}/footer/footer.component.html | 0 .../{ => blocks}/footer/footer.component.scss | 0 .../{ => blocks}/footer/footer.component.ts | 8 +- .../{ => blocks}/footer/footer.module.ts | 11 +- .../{ => blocks}/navbar/navbar.component.html | 0 .../{ => blocks}/navbar/navbar.component.scss | 4 +- .../layout/blocks/navbar/navbar.component.ts | 133 ++++++++++++ .../{ => blocks}/navbar/navbar.module.ts | 14 +- .../quick-panel/quick-panel.component.html | 0 .../quick-panel/quick-panel.component.scss | 2 +- .../quick-panel/quick-panel.component.ts | 76 +++++++ .../quick-panel/quick-panel.module.ts | 11 +- .../toolbar/toolbar.component.html | 2 + .../toolbar/toolbar.component.scss | 2 +- .../blocks/toolbar/toolbar.component.ts | 182 +++++++++++++++++ .../{ => blocks}/toolbar/toolbar.module.ts | 11 +- src/app/layout/content/content.component.ts | 70 ------- src/app/layout/layout.module.ts | 15 ++ src/app/layout/navbar/navbar.component.ts | 95 --------- .../quick-panel/quick-panel.component.ts | 41 ---- src/app/layout/toolbar/toolbar.component.ts | 119 ----------- .../vertical/basic/basic.component.html | 77 +++++++ .../vertical}/basic/basic.component.scss | 6 +- .../layout/vertical/basic/basic.component.ts | 64 ++++++ src/app/layout/vertical/basic/basic.module.ts | 38 ++++ src/app/main/apps/academy/academy.module.ts | 19 +- src/app/main/apps/academy/course.service.ts | 24 ++- .../apps/academy/course/course.component.ts | 100 ++++++--- src/app/main/apps/academy/courses.service.ts | 29 ++- .../apps/academy/courses/courses.component.ts | 86 +++++--- src/app/main/apps/apps.module.ts | 26 +-- .../main/apps/calendar/calendar.component.ts | 72 ++++--- src/app/main/apps/calendar/calendar.module.ts | 24 +-- .../main/apps/calendar/calendar.service.ts | 39 +++- .../event-form/event-form.component.ts | 48 +++-- src/app/main/apps/calendar/event.model.ts | 5 + .../chat/chat-start/chat-start.component.ts | 4 +- .../chat/chat-view/chat-view.component.html | 8 +- .../chat/chat-view/chat-view.component.scss | 3 +- .../chat/chat-view/chat-view.component.ts | 101 ++++++++-- src/app/main/apps/chat/chat.component.html | 8 +- src/app/main/apps/chat/chat.component.ts | 45 ++++- src/app/main/apps/chat/chat.module.ts | 38 ++-- .../sidenavs/left/chats/chats.component.ts | 118 ++++++++--- .../chat/sidenavs/left/left.component.html | 16 +- .../apps/chat/sidenavs/left/left.component.ts | 52 ++++- .../chat/sidenavs/left/user/user.component.ts | 83 ++++++-- .../right/contact/contact.component.ts | 47 ++++- .../chat/sidenavs/right/right.component.html | 8 +- .../chat/sidenavs/right/right.component.ts | 48 ++++- .../contact-form/contact-form.component.ts | 43 ++-- .../contact-list/contact-list.component.scss | 2 +- .../contact-list/contact-list.component.ts | 145 ++++++++----- src/app/main/apps/contacts/contact.model.ts | 5 + .../apps/contacts/contacts.component.html | 6 +- .../main/apps/contacts/contacts.component.ts | 107 ++++++---- src/app/main/apps/contacts/contacts.module.ts | 30 +-- .../main/apps/contacts/contacts.service.ts | 92 ++++++--- .../selected-bar/selected-bar.component.ts | 97 ++++++--- .../contacts/sidenavs/main/main.component.ts | 74 +++++-- .../analytics/analytics.component.ts | 40 +++- .../dashboards/analytics/analytics.module.ts | 13 +- .../dashboards/analytics/analytics.service.ts | 17 +- .../dashboards/project/project.component.ts | 53 +++-- .../apps/dashboards/project/project.module.ts | 12 +- .../dashboards/project/project.service.ts | 24 ++- .../dashboard/dashboard.component.ts | 30 ++- .../e-commerce/dashboard/dashboard.service.ts | 25 ++- .../main/apps/e-commerce/e-commerce.module.ts | 49 +++-- .../apps/e-commerce/order/order.component.ts | 73 +++++-- .../main/apps/e-commerce/order/order.model.ts | 5 + .../apps/e-commerce/order/order.service.ts | 38 +++- .../e-commerce/orders/orders.component.ts | 165 ++++++++++----- .../apps/e-commerce/orders/orders.service.ts | 18 +- .../e-commerce/product/product.component.ts | 127 ++++++++---- .../apps/e-commerce/product/product.model.ts | 29 ++- .../e-commerce/product/product.service.ts | 38 +++- .../e-commerce/products/products.component.ts | 190 ++++++++++++------ .../e-commerce/products/products.service.ts | 18 +- .../file-list/file-list.component.ts | 102 ++++++++-- .../file-manager/file-manager.component.html | 6 +- .../file-manager/file-manager.component.ts | 47 ++++- .../apps/file-manager/file-manager.module.ts | 23 +-- .../apps/file-manager/file-manager.service.ts | 19 +- .../sidenavs/details/details.component.ts | 54 +++-- .../sidenavs/main/main.component.ts | 4 +- src/app/main/apps/mail-ngrx/mail.component.ts | 4 +- .../components-third-party.module.ts | 9 +- .../angular-material.module.ts | 9 +- src/app/main/components/components.module.ts | 26 +-- .../forgot-password-2.component.ts | 68 +++++-- .../forgot-password-2.module.ts | 7 +- .../forgot-password.component.ts | 68 +++++-- .../forgot-password/forgot-password.module.ts | 9 +- .../authentication/lock/lock.component.ts | 68 +++++-- .../pages/authentication/lock/lock.module.ts | 7 +- .../login-2/login-2.component.ts | 68 +++++-- .../authentication/login-2/login-2.module.ts | 7 +- .../authentication/login/login.component.ts | 68 +++++-- .../authentication/login/login.module.ts | 7 +- .../mail-confirm/mail-confirm.component.ts | 15 +- .../mail-confirm/mail-confirm.module.ts | 7 +- .../register-2/register-2.component.ts | 72 +++++-- .../register-2/register-2.module.ts | 7 +- .../register/register.component.ts | 70 +++++-- .../register/register.module.ts | 7 +- .../reset-password-2.component.ts | 70 +++++-- .../reset-password-2.module.ts | 7 +- .../reset-password.component.ts | 76 +++++-- .../reset-password/reset-password.module.ts | 7 +- .../coming-soon/coming-soon.component.ts | 4 +- .../pages/errors/404/error-404.component.ts | 4 +- .../pages/errors/500/error-500.component.ts | 4 +- .../maintenance/maintenance.component.ts | 4 +- src/app/main/pages/pages.module.ts | 46 ++--- src/app/main/services/services.module.ts | 7 +- src/app/main/ui/ui.module.ts | 12 +- src/app/store/actions/router.action.ts | 5 + src/app/store/effects/router.effect.ts | 23 ++- src/app/store/reducers/index.ts | 7 +- src/app/store/store.module.ts | 5 +- src/tslint.json | 15 +- tslint.json | 5 + 170 files changed, 4715 insertions(+), 2064 deletions(-) delete mode 100644 src/@fuse/components/layouts/layouts.module.ts delete mode 100644 src/@fuse/components/layouts/vertical-nav/basic/basic.component.html delete mode 100644 src/@fuse/components/layouts/vertical-nav/basic/basic.component.ts rename src/app/{fuse-config.ts => fuse-config/index.ts} (86%) rename src/app/layout/{ => blocks}/content/content.component.html (100%) rename src/app/layout/{ => blocks}/content/content.component.scss (100%) create mode 100644 src/app/layout/blocks/content/content.component.ts rename src/app/layout/{ => blocks}/content/content.module.ts (63%) rename src/app/layout/{ => blocks}/footer/footer.component.html (100%) rename src/app/layout/{ => blocks}/footer/footer.component.scss (100%) rename src/app/layout/{ => blocks}/footer/footer.component.ts (66%) rename src/app/layout/{ => blocks}/footer/footer.module.ts (62%) rename src/app/layout/{ => blocks}/navbar/navbar.component.html (100%) rename src/app/layout/{ => blocks}/navbar/navbar.component.scss (97%) create mode 100644 src/app/layout/blocks/navbar/navbar.component.ts rename src/app/layout/{ => blocks}/navbar/navbar.module.ts (64%) rename src/app/layout/{ => blocks}/quick-panel/quick-panel.component.html (100%) rename src/app/layout/{ => blocks}/quick-panel/quick-panel.component.scss (90%) create mode 100644 src/app/layout/blocks/quick-panel/quick-panel.component.ts rename src/app/layout/{ => blocks}/quick-panel/quick-panel.module.ts (60%) rename src/app/layout/{ => blocks}/toolbar/toolbar.component.html (99%) rename src/app/layout/{ => blocks}/toolbar/toolbar.component.scss (96%) create mode 100644 src/app/layout/blocks/toolbar/toolbar.component.ts rename src/app/layout/{ => blocks}/toolbar/toolbar.module.ts (80%) delete mode 100644 src/app/layout/content/content.component.ts create mode 100644 src/app/layout/layout.module.ts delete mode 100644 src/app/layout/navbar/navbar.component.ts delete mode 100644 src/app/layout/quick-panel/quick-panel.component.ts delete mode 100644 src/app/layout/toolbar/toolbar.component.ts create mode 100644 src/app/layout/vertical/basic/basic.component.html rename src/{@fuse/components/layouts/vertical-nav => app/layout/vertical}/basic/basic.component.scss (94%) create mode 100644 src/app/layout/vertical/basic/basic.component.ts create mode 100644 src/app/layout/vertical/basic/basic.module.ts diff --git a/angular.json b/angular.json index b3d10f35..aa359a2c 100644 --- a/angular.json +++ b/angular.json @@ -25,7 +25,7 @@ "assets": [ "src/favicon.ico", "src/assets", - "src/app/main/content/components/angular-material" + "src/app/main/components/angular-material" ], "styles": [ "src/styles.scss" diff --git a/src/@fuse/components/confirm-dialog/confirm-dialog.component.ts b/src/@fuse/components/confirm-dialog/confirm-dialog.component.ts index 90eac6e5..0730cb1e 100644 --- a/src/@fuse/components/confirm-dialog/confirm-dialog.component.ts +++ b/src/@fuse/components/confirm-dialog/confirm-dialog.component.ts @@ -10,7 +10,14 @@ export class FuseConfirmDialogComponent { public confirmMessage: string; - constructor(public dialogRef: MatDialogRef) + /** + * Constructor + * + * @param {MatDialogRef} dialogRef + */ + constructor( + public dialogRef: MatDialogRef + ) { } diff --git a/src/@fuse/components/countdown/countdown.component.ts b/src/@fuse/components/countdown/countdown.component.ts index b00ad897..b519f64a 100644 --- a/src/@fuse/components/countdown/countdown.component.ts +++ b/src/@fuse/components/countdown/countdown.component.ts @@ -1,8 +1,6 @@ -import { Component, Input, OnInit } from '@angular/core'; - -import { interval } from 'rxjs'; -import { map } from 'rxjs/operators'; - +import { Component, Input, OnDestroy, OnInit } from '@angular/core'; +import { interval, Subject } from 'rxjs'; +import { map, takeUntil } from 'rxjs/operators'; import * as moment from 'moment'; @Component({ @@ -10,46 +8,82 @@ import * as moment from 'moment'; templateUrl: './countdown.component.html', styleUrls : ['./countdown.component.scss'] }) -export class FuseCountdownComponent implements OnInit +export class FuseCountdownComponent implements OnInit, OnDestroy { - @Input('eventDate') eventDate; + // Event date + @Input('eventDate') + eventDate; + countdown: any; + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + */ constructor() { + // Set the defaults this.countdown = { days : '', hours : '', minutes: '', seconds: '' }; + + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { const currDate = moment(); const eventDate = moment(this.eventDate); + // Get the difference in between the current date and event date let diff = eventDate.diff(currDate, 'seconds'); - const countDown = interval(1000).pipe( - map(value => { - return diff = diff - 1; - }), - map(value => { - const timeLeft = moment.duration(value, 'seconds'); + // Create a subscribable interval + const countDown = interval(1000) + .pipe( + map(value => { + return diff = diff - 1; + }), + map(value => { + const timeLeft = moment.duration(value, 'seconds'); - return { - days : timeLeft.asDays().toFixed(0), - hours : timeLeft.hours(), - minutes: timeLeft.minutes(), - seconds: timeLeft.seconds() - }; - }) - ); + return { + days : timeLeft.asDays().toFixed(0), + hours : timeLeft.hours(), + minutes: timeLeft.minutes(), + seconds: timeLeft.seconds() + }; + }) + ); - countDown.subscribe(value => { - this.countdown = value; - }); + // Subscribe to the countdown interval + countDown + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(value => { + this.countdown = value; + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); } } diff --git a/src/@fuse/components/demo/demo-content/demo-content.component.ts b/src/@fuse/components/demo/demo-content/demo-content.component.ts index 1e697894..eca3708b 100644 --- a/src/@fuse/components/demo/demo-content/demo-content.component.ts +++ b/src/@fuse/components/demo/demo-content/demo-content.component.ts @@ -7,6 +7,9 @@ import { Component } from '@angular/core'; }) export class FuseDemoContentComponent { + /** + * Constructor + */ constructor() { } diff --git a/src/@fuse/components/demo/demo-sidenav/demo-sidenav.component.ts b/src/@fuse/components/demo/demo-sidenav/demo-sidenav.component.ts index dde5b68f..9fb575e6 100644 --- a/src/@fuse/components/demo/demo-sidenav/demo-sidenav.component.ts +++ b/src/@fuse/components/demo/demo-sidenav/demo-sidenav.component.ts @@ -7,6 +7,9 @@ import { Component } from '@angular/core'; }) export class FuseDemoSidenavComponent { + /** + * Constructor + */ constructor() { } diff --git a/src/@fuse/components/highlight/highlight.component.ts b/src/@fuse/components/highlight/highlight.component.ts index e58be26d..69f8d0da 100644 --- a/src/@fuse/components/highlight/highlight.component.ts +++ b/src/@fuse/components/highlight/highlight.component.ts @@ -1,28 +1,55 @@ -import { Component, ContentChild, ElementRef, Input, OnInit } from '@angular/core'; +import { Component, ContentChild, ElementRef, Input, OnDestroy, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; - +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import * as Prism from 'prismjs/prism'; -import './prism-languages'; +import '@fuse/components/highlight/prism-languages'; @Component({ selector : 'fuse-highlight', - template : ' ', + template : '', styleUrls: ['./highlight.component.scss'] }) -export class FuseHighlightComponent implements OnInit +export class FuseHighlightComponent implements OnInit, OnDestroy { - @ContentChild('source') source: ElementRef; - @Input('lang') lang: string; - @Input('path') path: string; + // Source + @ContentChild('source') + source: ElementRef; + // Lang + @Input('lang') + lang: string; + + // Path + @Input('path') + path: string; + + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {ElementRef} _elementRef + * @param {HttpClient} _httpClient + */ constructor( - private elementRef: ElementRef, - private http: HttpClient + private _elementRef: ElementRef, + private _httpClient: HttpClient ) { + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { // If there is no language defined, return... if ( !this.lang ) @@ -34,11 +61,13 @@ export class FuseHighlightComponent implements OnInit if ( this.path ) { // Get the source - this.http.get(this.path, {responseType: 'text'}).subscribe((response) => { + this._httpClient.get(this.path, {responseType: 'text'}) + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((response) => { - // Highlight it - this.highlight(response); - }); + // Highlight it + this.highlight(response); + }); } // If the path is not defined and the source element exists... @@ -49,7 +78,26 @@ export class FuseHighlightComponent implements OnInit } } - highlight(sourceCode) + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Highlight the given source code + * + * @param sourceCode + */ + highlight(sourceCode): void { // Split the source into lines const sourceLines = sourceCode.split('\n'); @@ -94,9 +142,8 @@ export class FuseHighlightComponent implements OnInit const highlightedCode = Prism.highlight(source, Prism.languages[this.lang]); // Replace the innerHTML of the component with the highlighted code - this.elementRef.nativeElement.innerHTML = + this._elementRef.nativeElement.innerHTML = '
' + highlightedCode + '
'; - } } diff --git a/src/@fuse/components/index.ts b/src/@fuse/components/index.ts index 1cbd9d98..0a8fb885 100644 --- a/src/@fuse/components/index.ts +++ b/src/@fuse/components/index.ts @@ -2,7 +2,6 @@ export * from './confirm-dialog/confirm-dialog.module'; export * from './countdown/countdown.module'; export * from './demo/demo.module'; export * from './highlight/highlight.module'; -export * from './layouts/layouts.module'; export * from './material-color-picker/material-color-picker.module'; export * from './navigation/navigation.module'; export * from './search-bar/search-bar.module'; diff --git a/src/@fuse/components/layouts/layouts.module.ts b/src/@fuse/components/layouts/layouts.module.ts deleted file mode 100644 index c63b7335..00000000 --- a/src/@fuse/components/layouts/layouts.module.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; - -import { FuseVerticalNavBasicLayoutComponent } from '@fuse/components/layouts/vertical-nav/basic/basic.component'; - -@NgModule({ - declarations: [ - FuseVerticalNavBasicLayoutComponent - ], - imports : [ - CommonModule - ], - exports : [ - FuseVerticalNavBasicLayoutComponent - ] -}) -export class FuseLayoutsModule -{ -} diff --git a/src/@fuse/components/layouts/vertical-nav/basic/basic.component.html b/src/@fuse/components/layouts/vertical-nav/basic/basic.component.html deleted file mode 100644 index a2cc7980..00000000 --- a/src/@fuse/components/layouts/vertical-nav/basic/basic.component.html +++ /dev/null @@ -1,77 +0,0 @@ - - -
- - - - - - - - - - - - -
- - - - - - - -
- - - - - - - - - - - - - - - -
- - - - - - - -
- - - - - - - -
- - - - - - - - - - diff --git a/src/@fuse/components/layouts/vertical-nav/basic/basic.component.ts b/src/@fuse/components/layouts/vertical-nav/basic/basic.component.ts deleted file mode 100644 index 17a17f17..00000000 --- a/src/@fuse/components/layouts/vertical-nav/basic/basic.component.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Component, ViewEncapsulation } from '@angular/core'; - -@Component({ - selector : 'fuse-vertical-nav-basic-layout', - templateUrl : './basic.component.html', - styleUrls : ['./basic.component.scss'], - encapsulation: ViewEncapsulation.None -}) -export class FuseVerticalNavBasicLayoutComponent -{ - constructor() - { - } -} diff --git a/src/@fuse/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.ts b/src/@fuse/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.ts index e24976bc..f0fe6903 100644 --- a/src/@fuse/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.ts +++ b/src/@fuse/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.ts @@ -1,8 +1,9 @@ -import { Component, HostBinding, HostListener, Input, OnDestroy } from '@angular/core'; -import { Subscription } from 'rxjs'; +import { Component, HostBinding, HostListener, Input, OnDestroy, OnInit } from '@angular/core'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; -import { fuseAnimations } from '../../../../animations/index'; -import { FuseConfigService } from '../../../../services/config.service'; +import { fuseAnimations } from '@fuse/animations'; +import { FuseConfigService } from '@fuse/services/config.service'; @Component({ selector : 'fuse-nav-horizontal-collapse', @@ -10,42 +11,76 @@ import { FuseConfigService } from '../../../../services/config.service'; styleUrls : ['./nav-horizontal-collapse.component.scss'], animations : fuseAnimations }) -export class FuseNavHorizontalCollapseComponent implements OnDestroy +export class FuseNavHorizontalCollapseComponent implements OnInit, OnDestroy { - onConfigChanged: Subscription; - fuseSettings: any; + fuseConfig: any; isOpen = false; - @HostBinding('class') classes = 'nav-item nav-collapse'; - @Input() item: any; + @HostBinding('class') + classes = 'nav-item nav-collapse'; + @Input() + item: any; + + // Private + private _unsubscribeAll: Subject; + + constructor( + private _fuseConfigService: FuseConfigService + ) + { + // Set the private defaults + this._unsubscribeAll = new Subject(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + // Subscribe to config changes + this._fuseConfigService.config + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe( + (config) => { + this.fuseConfig = config; + } + ); + } + + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Open + */ @HostListener('mouseenter') - open() + open(): void { this.isOpen = true; } + /** + * Close + */ @HostListener('mouseleave') - close() + close(): void { this.isOpen = false; } - - constructor( - private fuseConfig: FuseConfigService - ) - { - this.onConfigChanged = - this.fuseConfig.onConfigChanged - .subscribe( - (newSettings) => { - this.fuseSettings = newSettings; - } - ); - } - - ngOnDestroy() - { - this.onConfigChanged.unsubscribe(); - } } diff --git a/src/@fuse/components/navigation/horizontal/nav-item/nav-horizontal-item.component.ts b/src/@fuse/components/navigation/horizontal/nav-item/nav-horizontal-item.component.ts index 8f9d0b25..58e3dab5 100644 --- a/src/@fuse/components/navigation/horizontal/nav-item/nav-horizontal-item.component.ts +++ b/src/@fuse/components/navigation/horizontal/nav-item/nav-horizontal-item.component.ts @@ -7,6 +7,17 @@ import { Component, HostBinding, Input } from '@angular/core'; }) export class FuseNavHorizontalItemComponent { - @HostBinding('class') classes = 'nav-item'; - @Input() item: any; + @HostBinding('class') + classes = 'nav-item'; + + @Input() + item: any; + + /** + * Constructor + */ + constructor() + { + + } } diff --git a/src/@fuse/components/navigation/navigation.component.ts b/src/@fuse/components/navigation/navigation.component.ts index 9a2e5a5c..82a2409c 100644 --- a/src/@fuse/components/navigation/navigation.component.ts +++ b/src/@fuse/components/navigation/navigation.component.ts @@ -8,9 +8,15 @@ import { Component, Input, ViewEncapsulation } from '@angular/core'; }) export class FuseNavigationComponent { - @Input() layout = 'vertical'; - @Input() navigation: any; + @Input() + layout = 'vertical'; + @Input() + navigation: any; + + /** + * Constructor + */ constructor() { diff --git a/src/@fuse/components/navigation/navigation.service.ts b/src/@fuse/components/navigation/navigation.service.ts index cbf2e11e..677c5ca3 100644 --- a/src/@fuse/components/navigation/navigation.service.ts +++ b/src/@fuse/components/navigation/navigation.service.ts @@ -9,16 +9,24 @@ export class FuseNavigationService onItemCollapsed: Subject = new Subject; onItemCollapseToggled: Subject = new Subject; + /** + * Constructor + */ constructor() { } + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + /** * Get flattened navigation array + * * @param navigation * @returns {any[]} */ - getFlatNavigation(navigation) + getFlatNavigation(navigation): any { for ( const navItem of navigation ) { diff --git a/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts b/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts index 65afb2c8..ad046c1f 100644 --- a/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts +++ b/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts @@ -1,7 +1,10 @@ -import { Component, HostBinding, Input, OnInit } from '@angular/core'; -import { FuseNavigationService } from '../../navigation.service'; +import { Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core'; import { NavigationEnd, Router } from '@angular/router'; -import { fuseAnimations } from '../../../../animations/index'; +import { Subject } from 'rxjs'; +import { filter, takeUntil } from 'rxjs/operators'; + +import { FuseNavigationService } from '../../navigation.service'; +import { fuseAnimations } from '@fuse/animations'; @Component({ selector : 'fuse-nav-vertical-collapse', @@ -9,38 +12,67 @@ import { fuseAnimations } from '../../../../animations/index'; styleUrls : ['./nav-vertical-collapse.component.scss'], animations : fuseAnimations }) -export class FuseNavVerticalCollapseComponent implements OnInit +export class FuseNavVerticalCollapseComponent implements OnInit, OnDestroy { - @Input() item: any; - @HostBinding('class') classes = 'nav-collapse nav-item'; - @HostBinding('class.open') public isOpen = false; + @Input() + item: any; + @HostBinding('class') + classes = 'nav-collapse nav-item'; + + @HostBinding('class.open') + public isOpen = false; + + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {FuseNavigationService} _fuseNavigationService + * @param {Router} _router + */ constructor( - private navigationService: FuseNavigationService, - private router: Router + private _fuseNavigationService: FuseNavigationService, + private _router: Router ) { - // Listen for route changes - router.events.subscribe( - (event) => { - if ( event instanceof NavigationEnd ) + // Set the private defaults + this._unsubscribeAll = new Subject(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + // Listen for router events + this._router.events + .pipe( + filter(event => event instanceof NavigationEnd), + takeUntil(this._unsubscribeAll) + ) + .subscribe((event: NavigationEnd) => { + + // Check if the url can be found in + // one of the children of this item + if ( this.isUrlInChildren(this.item, event.urlAfterRedirects) ) { - // Check if the url can be found in - // one of the children of this item - if ( this.isUrlInChildren(this.item, event.urlAfterRedirects) ) - { - this.expand(); - } - else - { - this.collapse(); - } + this.expand(); } - } - ); + else + { + this.collapse(); + } + }); // Listen for collapsing of any navigation item - this.navigationService.onItemCollapsed + this._fuseNavigationService.onItemCollapsed + .pipe(takeUntil(this._unsubscribeAll)) .subscribe( (clickedItem) => { if ( clickedItem && clickedItem.children ) @@ -54,7 +86,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit // Check if the url can be found in // one of the children of this item - if ( this.isUrlInChildren(this.item, this.router.url) ) + if ( this.isUrlInChildren(this.item, this._router.url) ) { return; } @@ -67,13 +99,10 @@ export class FuseNavVerticalCollapseComponent implements OnInit } } ); - } - ngOnInit() - { // Check if the url can be found in // one of the children of this item - if ( this.isUrlInChildren(this.item, this.router.url) ) + if ( this.isUrlInChildren(this.item, this._router.url) ) { this.expand(); } @@ -83,26 +112,40 @@ export class FuseNavVerticalCollapseComponent implements OnInit } } + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + /** * Toggle collapse * * @param ev */ - toggleOpen(ev) + toggleOpen(ev): void { ev.preventDefault(); this.isOpen = !this.isOpen; // Navigation collapse toggled... - this.navigationService.onItemCollapsed.next(this.item); - this.navigationService.onItemCollapseToggled.next(); + this._fuseNavigationService.onItemCollapsed.next(this.item); + this._fuseNavigationService.onItemCollapseToggled.next(); } /** * Expand the collapsable navigation */ - expand() + expand(): void { if ( this.isOpen ) { @@ -110,13 +153,13 @@ export class FuseNavVerticalCollapseComponent implements OnInit } this.isOpen = true; - this.navigationService.onItemCollapseToggled.next(); + this._fuseNavigationService.onItemCollapseToggled.next(); } /** * Collapse the collapsable navigation */ - collapse() + collapse(): void { if ( !this.isOpen ) { @@ -124,7 +167,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit } this.isOpen = false; - this.navigationService.onItemCollapseToggled.next(); + this._fuseNavigationService.onItemCollapseToggled.next(); } /** @@ -133,9 +176,9 @@ export class FuseNavVerticalCollapseComponent implements OnInit * * @param parent * @param item - * @return {any} + * @returns {boolean} */ - isChildrenOf(parent, item) + isChildrenOf(parent, item): boolean { if ( !parent.children ) { @@ -162,9 +205,9 @@ export class FuseNavVerticalCollapseComponent implements OnInit * * @param parent * @param url - * @returns {any} + * @returns {boolean} */ - isUrlInChildren(parent, url) + isUrlInChildren(parent, url): boolean { if ( !parent.children ) { diff --git a/src/@fuse/components/navigation/vertical/nav-group/nav-vertical-group.component.ts b/src/@fuse/components/navigation/vertical/nav-group/nav-vertical-group.component.ts index 56151d6f..8ec510e2 100644 --- a/src/@fuse/components/navigation/vertical/nav-group/nav-vertical-group.component.ts +++ b/src/@fuse/components/navigation/vertical/nav-group/nav-vertical-group.component.ts @@ -7,9 +7,15 @@ import { Component, HostBinding, Input } from '@angular/core'; }) export class FuseNavVerticalGroupComponent { - @HostBinding('class') classes = 'nav-group nav-item'; - @Input() item: any; + @HostBinding('class') + classes = 'nav-group nav-item'; + @Input() + item: any; + + /** + * Constructor + */ constructor() { } diff --git a/src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.ts b/src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.ts index 071ed1ee..481628c0 100644 --- a/src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.ts +++ b/src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.ts @@ -7,9 +7,15 @@ import { Component, HostBinding, Input } from '@angular/core'; }) export class FuseNavVerticalItemComponent { - @HostBinding('class') classes = 'nav-item'; - @Input() item: any; + @HostBinding('class') + classes = 'nav-item'; + @Input() + item: any; + + /** + * Constructor + */ constructor() { } diff --git a/src/@fuse/components/search-bar/search-bar.component.ts b/src/@fuse/components/search-bar/search-bar.component.ts index 16fa6ed6..eb80bba9 100644 --- a/src/@fuse/components/search-bar/search-bar.component.ts +++ b/src/@fuse/components/search-bar/search-bar.component.ts @@ -1,5 +1,6 @@ -import { Component, EventEmitter, Output } from '@angular/core'; -import { Subscription } from 'rxjs'; +import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { FuseConfigService } from '@fuse/services/config.service'; @@ -8,38 +9,89 @@ import { FuseConfigService } from '@fuse/services/config.service'; templateUrl: './search-bar.component.html', styleUrls : ['./search-bar.component.scss'] }) -export class FuseSearchBarComponent +export class FuseSearchBarComponent implements OnInit, OnDestroy { collapsed: boolean; + fuseConfig: any; toolbarColor: string; - @Output() onInput: EventEmitter = new EventEmitter(); - onConfigChanged: Subscription; + @Output() + onInput: EventEmitter = new EventEmitter(); + + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {FuseConfigService} _fuseConfigService + */ constructor( - private fuseConfig: FuseConfigService + private _fuseConfigService: FuseConfigService ) { + // Set the defaults this.collapsed = true; - this.onConfigChanged = - this.fuseConfig.onConfigChanged - .subscribe( - (newSettings) => { - this.toolbarColor = newSettings.colorClasses.toolbar; - } - ); + + // Set the private defaults + this._unsubscribeAll = new Subject(); } - collapse() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + // Subscribe to config changes + this._fuseConfigService.config + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe( + (config) => { + this.toolbarColor = config.colorClasses.toolbar; + } + ); + } + + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Collapse + */ + collapse(): void { this.collapsed = true; } - expand() + /** + * Expand + */ + expand(): void { this.collapsed = false; } - search(event) + /** + * Search + * + * @param event + */ + search(event): void { const value = event.target.value; diff --git a/src/@fuse/components/shortcuts/shortcuts.component.ts b/src/@fuse/components/shortcuts/shortcuts.component.ts index 0e33d8ef..42db3bcb 100644 --- a/src/@fuse/components/shortcuts/shortcuts.component.ts +++ b/src/@fuse/components/shortcuts/shortcuts.component.ts @@ -1,7 +1,7 @@ import { Component, ElementRef, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core'; import { ObservableMedia } from '@angular/flex-layout'; - -import { Subscription } from 'rxjs'; +import { Subject, Subscription } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { CookieService } from 'ngx-cookie-service'; import { FuseMatchMediaService } from '@fuse/services/match-media.service'; @@ -21,42 +21,67 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy searching = false; mobileShortcutsPanelActive = false; toolbarColor: string; - matchMediaSubscription: Subscription; - onConfigChanged: Subscription; - @Input() navigation: any; + @Input() + navigation: any; - @ViewChild('searchInput') searchInputField; - @ViewChild('shortcuts') shortcutsEl: ElementRef; + @ViewChild('searchInput') + searchInputField; + @ViewChild('shortcuts') + shortcutsEl: ElementRef; + + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {Renderer2} _renderer + * @param {CookieService} _cookieService + * @param {FuseMatchMediaService} _fuseMatchMediaService + * @param {FuseNavigationService} _fuseNavigationService + * @param {FuseConfigService} _fuseConfigService + * @param {ObservableMedia} _observableMedia + */ constructor( - private renderer: Renderer2, - private observableMedia: ObservableMedia, - private fuseMatchMedia: FuseMatchMediaService, - private fuseNavigationService: FuseNavigationService, - private fuseConfig: FuseConfigService, - private cookieService: CookieService + private _renderer: Renderer2, + private _cookieService: CookieService, + private _fuseMatchMediaService: FuseMatchMediaService, + private _fuseNavigationService: FuseNavigationService, + private _fuseConfigService: FuseConfigService, + private _observableMedia: ObservableMedia ) { - this.onConfigChanged = - this.fuseConfig.onConfigChanged - .subscribe( - (newSettings) => { - this.toolbarColor = newSettings.colorClasses.toolbar; - } - ); + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() - { - // Get the navigation items and flatten them - this.filteredNavigationItems = this.navigationItems = this.fuseNavigationService.getFlatNavigation(this.navigation); + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- - const cookieExists = this.cookieService.check('FUSE2.shortcuts'); + /** + * On init + */ + ngOnInit(): void + { + // Subscribe to config changes + this._fuseConfigService.config + .subscribe( + (config) => { + this.toolbarColor = config.colorClasses.toolbar; + } + ); + + // Get the navigation items and flatten them + this.filteredNavigationItems = this.navigationItems = this._fuseNavigationService.getFlatNavigation(this.navigation); + + const cookieExists = this._cookieService.check('FUSE2.shortcuts'); if ( cookieExists ) { - this.shortcutItems = JSON.parse(this.cookieService.get('FUSE2.shortcuts')); + this.shortcutItems = JSON.parse(this._cookieService.get('FUSE2.shortcuts')); } else { @@ -89,21 +114,36 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy ]; } - this.matchMediaSubscription = - this.fuseMatchMedia.onMediaChange.subscribe(() => { - if ( this.observableMedia.isActive('gt-sm') ) + this._fuseMatchMediaService.onMediaChange + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(() => { + if ( this._observableMedia.isActive('gt-sm') ) { this.hideMobileShortcutsPanel(); } }); } - ngOnDestroy() + /** + * On destroy + */ + ngOnDestroy(): void { - this.matchMediaSubscription.unsubscribe(); + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); } - search(event) + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Search + * + * @param event + */ + search(event): void { const value = event.target.value.toLowerCase(); @@ -122,7 +162,13 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy }); } - toggleShortcut(event, itemToToggle) + /** + * Toggle shortcut + * + * @param event + * @param itemToToggle + */ + toggleShortcut(event, itemToToggle): void { event.stopPropagation(); @@ -133,7 +179,7 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy this.shortcutItems.splice(i, 1); // Save to the cookies - this.cookieService.set('FUSE2.shortcuts', JSON.stringify(this.shortcutItems)); + this._cookieService.set('FUSE2.shortcuts', JSON.stringify(this.shortcutItems)); return; } @@ -142,32 +188,47 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy this.shortcutItems.push(itemToToggle); // Save to the cookies - this.cookieService.set('FUSE2.shortcuts', JSON.stringify(this.shortcutItems)); + this._cookieService.set('FUSE2.shortcuts', JSON.stringify(this.shortcutItems)); } - isInShortcuts(navigationItem) + /** + * Is in shortcuts? + * + * @param navigationItem + * @returns {any} + */ + isInShortcuts(navigationItem): any { return this.shortcutItems.find(item => { return item.url === navigationItem.url; }); } - onMenuOpen() + /** + * On menu open + */ + onMenuOpen(): void { setTimeout(() => { this.searchInputField.nativeElement.focus(); }); } - showMobileShortcutsPanel() + /** + * Show mobile shortcuts + */ + showMobileShortcutsPanel(): void { this.mobileShortcutsPanelActive = true; - this.renderer.addClass(this.shortcutsEl.nativeElement, 'show-mobile-panel'); + this._renderer.addClass(this.shortcutsEl.nativeElement, 'show-mobile-panel'); } - hideMobileShortcutsPanel() + /** + * Hide mobile shortcuts + */ + hideMobileShortcutsPanel(): void { this.mobileShortcutsPanelActive = false; - this.renderer.removeClass(this.shortcutsEl.nativeElement, 'show-mobile-panel'); + this._renderer.removeClass(this.shortcutsEl.nativeElement, 'show-mobile-panel'); } } diff --git a/src/@fuse/components/sidebar/sidebar.component.ts b/src/@fuse/components/sidebar/sidebar.component.ts index 16c90880..5462686d 100644 --- a/src/@fuse/components/sidebar/sidebar.component.ts +++ b/src/@fuse/components/sidebar/sidebar.component.ts @@ -1,11 +1,12 @@ import { Component, ElementRef, HostBinding, HostListener, Input, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core'; import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations'; import { ObservableMedia } from '@angular/flex-layout'; -import { Subscription } from 'rxjs'; +import { Subject, Subscription } from 'rxjs'; import { FuseSidebarService } from './sidebar.service'; import { FuseMatchMediaService } from '@fuse/services/match-media.service'; import { FuseConfigService } from '@fuse/services/config.service'; +import { takeUntil } from 'rxjs/internal/operators'; @Component({ selector : 'fuse-sidebar', @@ -35,6 +36,52 @@ export class FuseSidebarComponent implements OnInit, OnDestroy @HostBinding('class.locked-open') isLockedOpen: boolean; + // Folded unfolded + @HostBinding('class.unfolded') + unfolded: boolean; + + // Private + private _folded: boolean; + private _fuseConfig: any; + private _wasActive: boolean; + private _backdrop: HTMLElement | null = null; + private _player: AnimationPlayer; + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {AnimationBuilder} _animationBuilder + * @param {ElementRef} _elementRef + * @param {FuseConfigService} _fuseConfigService + * @param {FuseMatchMediaService} _fuseMatchMediaService + * @param {FuseSidebarService} _fuseSidebarService + * @param {ObservableMedia} _observableMedia + * @param {Renderer2} _renderer + */ + constructor( + private _animationBuilder: AnimationBuilder, + private _elementRef: ElementRef, + private _fuseConfigService: FuseConfigService, + private _fuseMatchMediaService: FuseMatchMediaService, + private _fuseSidebarService: FuseSidebarService, + private _observableMedia: ObservableMedia, + private _renderer: Renderer2 + ) + { + // Set the defaults + this.opened = false; + this.folded = false; + this.align = 'left'; + + // Set the private defaults + this._unsubscribeAll = new Subject(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + // Folded @HostBinding('class.folded') @Input() @@ -59,12 +106,12 @@ export class FuseSidebarComponent implements OnInit, OnDestroy // Get the sibling and set the style rule if ( this.align === 'left' ) { - sibling = this.elementRef.nativeElement.nextElementSibling; + sibling = this._elementRef.nativeElement.nextElementSibling; styleRule = 'marginLeft'; } else { - sibling = this.elementRef.nativeElement.previousElementSibling; + sibling = this._elementRef.nativeElement.previousElementSibling; styleRule = 'marginRight'; } @@ -78,13 +125,13 @@ export class FuseSidebarComponent implements OnInit, OnDestroy if ( value ) { // Set the style - this.renderer.setStyle(sibling, styleRule, styleValue); + this._renderer.setStyle(sibling, styleRule, styleValue); } // If unfolded... else { // Remove the style - this.renderer.removeStyle(sibling, styleRule); + this._renderer.removeStyle(sibling, styleRule); } } @@ -93,51 +140,24 @@ export class FuseSidebarComponent implements OnInit, OnDestroy return this._folded; } - // Folded unfolded - @HostBinding('class.unfolded') - unfolded: boolean; - - // Private - private _folded: boolean; - private _wasActive: boolean; - private _backdrop: HTMLElement | null = null; - private _player: AnimationPlayer; - private _onMediaChangeSubscription: Subscription; - - /** - * Constructor - * - * @param {Renderer2} renderer - * @param {ElementRef} elementRef - * @param {AnimationBuilder} animationBuilder - * @param {ObservableMedia} observableMedia - * @param {FuseConfigService} fuseConfigService - * @param {FuseSidebarService} fuseSidebarService - * @param {FuseMatchMediaService} fuseMatchMediaService - */ - constructor( - private renderer: Renderer2, - private elementRef: ElementRef, - private animationBuilder: AnimationBuilder, - private observableMedia: ObservableMedia, - private fuseConfigService: FuseConfigService, - private fuseSidebarService: FuseSidebarService, - private fuseMatchMediaService: FuseMatchMediaService - ) - { - // Set the defaults - this.opened = false; - this.folded = false; - this.align = 'left'; - } + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- /** * On init */ ngOnInit(): void { + // Subscribe to config changes + this._fuseConfigService.config + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((config) => { + this._fuseConfig = config; + }); + // Register the sidebar - this.fuseSidebarService.register(this.name, this); + this._fuseSidebarService.register(this.name, this); // Setup alignment this._setupAlignment(); @@ -158,12 +178,17 @@ export class FuseSidebarComponent implements OnInit, OnDestroy } // Unregister the sidebar - this.fuseSidebarService.unregister(this.name); + this._fuseSidebarService.unregister(this.name); - // Unsubscribe from the media watcher subscription - this._onMediaChangeSubscription.unsubscribe(); + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); } + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + /** * Set the sidebar alignment * @@ -175,11 +200,11 @@ export class FuseSidebarComponent implements OnInit, OnDestroy // element depending on the align attribute if ( this.align === 'right' ) { - this.renderer.addClass(this.elementRef.nativeElement, 'right-aligned'); + this._renderer.addClass(this._elementRef.nativeElement, 'right-aligned'); } else { - this.renderer.addClass(this.elementRef.nativeElement, 'left-aligned'); + this._renderer.addClass(this._elementRef.nativeElement, 'left-aligned'); } } @@ -200,12 +225,12 @@ export class FuseSidebarComponent implements OnInit, OnDestroy this._wasActive = false; // Act on every media change - this._onMediaChangeSubscription = - - this.fuseMatchMediaService.onMediaChange.subscribe(() => { + this._fuseMatchMediaService.onMediaChange + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(() => { // Get the active status - const isActive = this.observableMedia.isActive(this.lockedOpen); + const isActive = this._observableMedia.isActive(this.lockedOpen); // If the both status are the same, don't act if ( this._wasActive === isActive ) @@ -224,7 +249,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy // Read the folded setting from the config // and fold the sidebar if it's true - if ( this.fuseConfigService.config.layout.navigationFolded ) + if ( this._fuseConfig.layout.navigation.folded ) { this.fold(); } @@ -250,6 +275,10 @@ export class FuseSidebarComponent implements OnInit, OnDestroy }); } + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + /** * Open the sidebar */ @@ -382,17 +411,17 @@ export class FuseSidebarComponent implements OnInit, OnDestroy showBackdrop(): void { // Create the backdrop element - this._backdrop = this.renderer.createElement('div'); + this._backdrop = this._renderer.createElement('div'); // Add a class to the backdrop element this._backdrop.classList.add('fuse-sidebar-overlay'); // Append the backdrop to the parent of the sidebar - this.renderer.appendChild(this.elementRef.nativeElement.parentElement, this._backdrop); + this._renderer.appendChild(this._elementRef.nativeElement.parentElement, this._backdrop); // Create the enter animation and attach it to the player this._player = - this.animationBuilder + this._animationBuilder .build([ animate('300ms ease', style({opacity: 1})) ]).create(this._backdrop); @@ -419,7 +448,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy // Create the leave animation and attach it to the player this._player = - this.animationBuilder + this._animationBuilder .build([ animate('300ms ease', style({opacity: 0})) ]).create(this._backdrop); diff --git a/src/@fuse/components/theme-options/theme-options.component.html b/src/@fuse/components/theme-options/theme-options.component.html index 57d63d2d..1e0f8ac7 100644 --- a/src/@fuse/components/theme-options/theme-options.component.html +++ b/src/@fuse/components/theme-options/theme-options.component.html @@ -13,7 +13,7 @@

Layout:

- Vertical Horizontal @@ -21,7 +21,7 @@

Navigation:

- Top Left @@ -30,13 +30,13 @@

Navigation Fold (for vertical navigation):

- + Folded

Toolbar:

- Below Above @@ -44,7 +44,7 @@

Footer:

- Below Above @@ -52,7 +52,7 @@

Layout Mode:

- Boxed Fullwidth @@ -65,20 +65,20 @@

Toolbar Color

- +

Navigation Bar Color

- +

Footer Color

- +
@@ -87,7 +87,7 @@

Router Animation:

- + None diff --git a/src/@fuse/components/theme-options/theme-options.component.ts b/src/@fuse/components/theme-options/theme-options.component.ts index 1e817c91..8eb0a39b 100644 --- a/src/@fuse/components/theme-options/theme-options.component.ts +++ b/src/@fuse/components/theme-options/theme-options.component.ts @@ -1,6 +1,7 @@ import { Component, ElementRef, HostBinding, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core'; import { style, animate, AnimationBuilder, AnimationPlayer } from '@angular/animations'; -import { Subscription } from 'rxjs'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { fuseAnimations } from '@fuse/animations'; import { FuseConfigService } from '@fuse/services/config.service'; @@ -14,39 +15,59 @@ import { FuseNavigationService } from '@fuse/components/navigation/navigation.se }) export class FuseThemeOptionsComponent implements OnInit, OnDestroy { - @Input() navigation; - @ViewChild('openButton') openButton; - @ViewChild('panel') panel; - @ViewChild('overlay') overlay: ElementRef; + @Input() + navigation; - public player: AnimationPlayer; - config: any; + @ViewChild('openButton') + openButton; - onConfigChanged: Subscription; + @ViewChild('panel') + panel; + + @ViewChild('overlay') + overlay: ElementRef; + + player: AnimationPlayer; + fuseConfig: any; @HostBinding('class.bar-closed') barClosed: boolean; + // Private + private _unsubscribeAll: Subject; + constructor( - private animationBuilder: AnimationBuilder, - private fuseConfig: FuseConfigService, - private navigationService: FuseNavigationService, - private renderer: Renderer2 + private _animationBuilder: AnimationBuilder, + private _fuseConfigService: FuseConfigService, + private _fuseNavigationService: FuseNavigationService, + private _renderer: Renderer2 ) { + // Set the defaults this.barClosed = true; - this.onConfigChanged = - this.fuseConfig.onConfigChanged - .subscribe( - (newConfig) => { - this.config = newConfig; - } - ); + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.renderer.listen(this.overlay.nativeElement, 'click', () => { + // Subscribe to the config changes + this._fuseConfigService.config + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((config) => { + this.fuseConfig = config; + } + ); + + // Listen for the overlay's click event + this._renderer.listen(this.overlay.nativeElement, 'click', () => { this.closeBar(); }); @@ -72,20 +93,52 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy }); } - ngOnDestroy() + /** + * On destroy + */ + ngOnDestroy(): void { - this.onConfigChanged.unsubscribe(); + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); } - onSettingsChange() + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * On config change + */ + onConfigChange(): void { - this.fuseConfig.setConfig(this.config); + this._fuseConfigService.config = this.fuseConfig; } - closeBar() + /** + * Open the bar + */ + openBar(): void + { + this.barClosed = false; + + this.player = + this._animationBuilder + .build([ + style({transform: 'translate3d(100%,0,0)'}), + animate('400ms ease', style({transform: 'translate3d(0,0,0)'})) + ]).create(this.panel.nativeElement); + + this.player.play(); + } + + /** + * Close the bar + */ + closeBar(): void { this.player = - this.animationBuilder + this._animationBuilder .build([ style({transform: 'translate3d(0,0,0)'}), animate('400ms ease', style({transform: 'translate3d(100%,0,0)'})) @@ -97,18 +150,4 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy this.barClosed = true; }); } - - openBar() - { - this.barClosed = false; - - this.player = - this.animationBuilder - .build([ - style({transform: 'translate3d(100%,0,0)'}), - animate('400ms ease', style({transform: 'translate3d(0,0,0)'})) - ]).create(this.panel.nativeElement); - - this.player.play(); - } } diff --git a/src/@fuse/components/widget/widget-toggle.directive.ts b/src/@fuse/components/widget/widget-toggle.directive.ts index 0c278925..7b5f81c8 100644 --- a/src/@fuse/components/widget/widget-toggle.directive.ts +++ b/src/@fuse/components/widget/widget-toggle.directive.ts @@ -5,7 +5,14 @@ import { Directive, ElementRef } from '@angular/core'; }) export class FuseWidgetToggleDirective { - constructor(public el: ElementRef) + /** + * Constructor + * + * @param {ElementRef} elementRef + */ + constructor( + public elementRef: ElementRef + ) { } } diff --git a/src/@fuse/components/widget/widget.component.ts b/src/@fuse/components/widget/widget.component.ts index 46ecdbb2..7246fc85 100644 --- a/src/@fuse/components/widget/widget.component.ts +++ b/src/@fuse/components/widget/widget.component.ts @@ -10,19 +10,38 @@ import { FuseWidgetToggleDirective } from './widget-toggle.directive'; export class FuseWidgetComponent implements AfterContentInit { - @HostBinding('class.flipped') flipped = false; - @ContentChildren(FuseWidgetToggleDirective, {descendants: true}) toggleButtons: QueryList; + @HostBinding('class.flipped') + flipped = false; - constructor(private el: ElementRef, private renderer: Renderer2) + @ContentChildren(FuseWidgetToggleDirective, {descendants: true}) + toggleButtons: QueryList; + + /** + * Constructor + * + * @param {ElementRef} _elementRef + * @param {Renderer2} _renderer + */ + constructor( + private _elementRef: ElementRef, + private _renderer: Renderer2 + ) { } - ngAfterContentInit() - { - setTimeout(() => { + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + /** + * After content init + */ + ngAfterContentInit(): void + { + // Listen for the flip button click + setTimeout(() => { this.toggleButtons.forEach(flipButton => { - this.renderer.listen(flipButton.el.nativeElement, 'click', (event) => { + this._renderer.listen(flipButton.elementRef.nativeElement, 'click', (event) => { event.preventDefault(); event.stopPropagation(); this.toggle(); @@ -31,7 +50,14 @@ export class FuseWidgetComponent implements AfterContentInit }); } - toggle() + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Toggle the flipped status + */ + toggle(): void { this.flipped = !this.flipped; } diff --git a/src/@fuse/directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts b/src/@fuse/directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts index 403bce13..cfe1cfb3 100644 --- a/src/@fuse/directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts +++ b/src/@fuse/directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts @@ -7,26 +7,40 @@ export class FuseIfOnDomDirective implements AfterContentChecked { isCreated = false; + /** + * Constructor + * + * @param {ElementRef} _elementRef + * @param {TemplateRef} _templateRef + * @param {ViewContainerRef} _viewContainerRef + */ constructor( - private templateRef: TemplateRef, - private viewContainer: ViewContainerRef, - private element: ElementRef + private _elementRef: ElementRef, + private _templateRef: TemplateRef, + private _viewContainerRef: ViewContainerRef ) { } - ngAfterContentChecked() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * After content checked + */ + ngAfterContentChecked(): void { - if ( document.body.contains(this.element.nativeElement) && !this.isCreated ) + if ( document.body.contains(this._elementRef.nativeElement) && !this.isCreated ) { setTimeout(() => { - this.viewContainer.createEmbeddedView(this.templateRef); + this._viewContainerRef.createEmbeddedView(this._templateRef); }, 300); this.isCreated = true; } - else if ( this.isCreated && !document.body.contains(this.element.nativeElement) ) + else if ( this.isCreated && !document.body.contains(this._elementRef.nativeElement) ) { - this.viewContainer.clear(); + this._viewContainerRef.clear(); this.isCreated = false; } } diff --git a/src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.directive.ts b/src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.directive.ts index 52efd771..52570a7b 100644 --- a/src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.directive.ts +++ b/src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.directive.ts @@ -1,7 +1,8 @@ import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '@angular/core'; import { MatSidenav } from '@angular/material'; import { ObservableMedia } from '@angular/flex-layout'; -import { Subscription } from 'rxjs'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { FuseMatchMediaService } from '@fuse/services/match-media.service'; import { FuseMatSidenavHelperService } from '@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.service'; @@ -11,56 +12,88 @@ import { FuseMatSidenavHelperService } from '@fuse/directives/fuse-mat-sidenav/f }) export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy { - matchMediaSubscription: Subscription; - @HostBinding('class.mat-is-locked-open') isLockedOpen = true; - @Input('fuseMatSidenavHelper') id: string; - @Input('mat-is-locked-open') matIsLockedOpenBreakpoint: string; + @HostBinding('class.mat-is-locked-open') + isLockedOpen = true; + @Input('fuseMatSidenavHelper') + id: string; + + @Input('mat-is-locked-open') + matIsLockedOpenBreakpoint: string; + + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {FuseMatchMediaService} _fuseMatchMediaService + * @param {FuseMatSidenavHelperService} _fuseMatSidenavHelperService + * @param {MatSidenav} _matSidenav + * @param {ObservableMedia} _observableMedia + */ constructor( - private fuseMatSidenavService: FuseMatSidenavHelperService, - private fuseMatchMedia: FuseMatchMediaService, - private observableMedia: ObservableMedia, - private matSidenav: MatSidenav + private _fuseMatchMediaService: FuseMatchMediaService, + private _fuseMatSidenavHelperService: FuseMatSidenavHelperService, + private _matSidenav: MatSidenav, + private _observableMedia: ObservableMedia ) { + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() - { - this.fuseMatSidenavService.setSidenav(this.id, this.matSidenav); + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- - if ( this.observableMedia.isActive(this.matIsLockedOpenBreakpoint) ) + /** + * On init + */ + ngOnInit(): void + { + // Register the sidenav to the service + this._fuseMatSidenavHelperService.setSidenav(this.id, this._matSidenav); + + if ( this._observableMedia.isActive(this.matIsLockedOpenBreakpoint) ) { this.isLockedOpen = true; - this.matSidenav.mode = 'side'; - this.matSidenav.toggle(true); + this._matSidenav.mode = 'side'; + this._matSidenav.toggle(true); } else { this.isLockedOpen = false; - this.matSidenav.mode = 'over'; - this.matSidenav.toggle(false); + this._matSidenav.mode = 'over'; + this._matSidenav.toggle(false); } - this.matchMediaSubscription = this.fuseMatchMedia.onMediaChange.subscribe(() => { - if ( this.observableMedia.isActive(this.matIsLockedOpenBreakpoint) ) - { - this.isLockedOpen = true; - this.matSidenav.mode = 'side'; - this.matSidenav.toggle(true); - } - else - { - this.isLockedOpen = false; - this.matSidenav.mode = 'over'; - this.matSidenav.toggle(false); - } - }); + this._fuseMatchMediaService.onMediaChange + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(() => { + if ( this._observableMedia.isActive(this.matIsLockedOpenBreakpoint) ) + { + this.isLockedOpen = true; + this._matSidenav.mode = 'side'; + this._matSidenav.toggle(true); + } + else + { + this.isLockedOpen = false; + this._matSidenav.mode = 'over'; + this._matSidenav.toggle(false); + } + }); } - ngOnDestroy() + /** + * On destroy + */ + ngOnDestroy(): void { - this.matchMediaSubscription.unsubscribe(); + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); } } @@ -69,15 +102,29 @@ export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy }) export class FuseMatSidenavTogglerDirective { - @Input('fuseMatSidenavToggler') id; + @Input('fuseMatSidenavToggler') + id; - constructor(private fuseMatSidenavService: FuseMatSidenavHelperService) + /** + * Constructor + * + * @param {FuseMatSidenavHelperService} _fuseMatSidenavHelperService + */ + constructor( + private _fuseMatSidenavHelperService: FuseMatSidenavHelperService) { } + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * On click + */ @HostListener('click') onClick() { - this.fuseMatSidenavService.getSidenav(this.id).toggle(); + this._fuseMatSidenavHelperService.getSidenav(this.id).toggle(); } } diff --git a/src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.service.ts b/src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.service.ts index 748d9480..893c7fd4 100644 --- a/src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.service.ts +++ b/src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.service.ts @@ -6,17 +6,36 @@ export class FuseMatSidenavHelperService { sidenavInstances: MatSidenav[]; + /** + * Constructor + */ constructor() { this.sidenavInstances = []; } - setSidenav(id, instance) + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Set sidenav + * + * @param id + * @param instance + */ + setSidenav(id, instance): void { this.sidenavInstances[id] = instance; } - getSidenav(id) + /** + * Get sidenav + * + * @param id + * @returns {any} + */ + getSidenav(id): any { return this.sidenavInstances[id]; } diff --git a/src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts b/src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts index 89c3dea2..9e4a7c9a 100644 --- a/src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts +++ b/src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts @@ -1,6 +1,7 @@ import { AfterViewInit, Directive, ElementRef, HostListener, OnDestroy, OnInit } from '@angular/core'; import { Platform } from '@angular/cdk/platform'; -import { Subscription } from 'rxjs'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import PerfectScrollbar from 'perfect-scrollbar'; @@ -11,36 +12,58 @@ import { FuseConfigService } from '@fuse/services/config.service'; }) export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnDestroy { - onConfigChanged: Subscription; isDisableCustomScrollbars = false; isMobile = false; isInitialized = true; ps: PerfectScrollbar; + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {ElementRef} elementRef + * @param {FuseConfigService} _fuseConfigService + * @param {Platform} _platform + */ constructor( - public element: ElementRef, - private fuseConfig: FuseConfigService, - private platform: Platform + public elementRef: ElementRef, + private _fuseConfigService: FuseConfigService, + private _platform: Platform ) { + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.onConfigChanged = - this.fuseConfig.onConfigChanged.subscribe( + this._fuseConfigService.config + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe( (settings) => { this.isDisableCustomScrollbars = !settings.customScrollbars; } ); - if ( this.platform.ANDROID || this.platform.IOS ) + if ( this._platform.ANDROID || this._platform.IOS ) { this.isMobile = true; } } - ngAfterViewInit() + /** + * After view init + */ + ngAfterViewInit(): void { if ( this.isMobile || this.isDisableCustomScrollbars ) { @@ -49,24 +72,38 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD } // Initialize the perfect-scrollbar - this.ps = new PerfectScrollbar(this.element.nativeElement, { + this.ps = new PerfectScrollbar(this.elementRef.nativeElement, { wheelPropagation: true }); } - ngOnDestroy() + /** + * On destroy + */ + ngOnDestroy(): void { if ( !this.isInitialized || !this.ps ) { return; } - this.onConfigChanged.unsubscribe(); + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); // Destroy the perfect-scrollbar this.ps.destroy(); } + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Document click + * + * @param {Event} event + */ @HostListener('document:click', ['$event']) documentClick(event: Event): void { @@ -82,7 +119,10 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD this.ps.update(); } - update() + /** + * Update the scrollbar + */ + update(): void { if ( !this.isInitialized ) { @@ -93,62 +133,108 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD this.ps.update(); } - destroy() + /** + * Destroy the scrollbar + */ + destroy(): void { this.ngOnDestroy(); } - scrollToX(x: number, speed?: number) + /** + * Scroll to X + * + * @param {number} x + * @param {number} speed + */ + scrollToX(x: number, speed?: number): void { this.animateScrolling('scrollLeft', x, speed); } - scrollToY(y: number, speed?: number) + /** + * Scroll to Y + * + * @param {number} y + * @param {number} speed + */ + scrollToY(y: number, speed?: number): void { this.animateScrolling('scrollTop', y, speed); } - scrollToTop(offset?: number, speed?: number) + /** + * Scroll to top + * + * @param {number} offset + * @param {number} speed + */ + scrollToTop(offset?: number, speed?: number): void { this.animateScrolling('scrollTop', (offset || 0), speed); } - scrollToLeft(offset?: number, speed?: number) + /** + * Scroll to left + * + * @param {number} offset + * @param {number} speed + */ + scrollToLeft(offset?: number, speed?: number): void { this.animateScrolling('scrollLeft', (offset || 0), speed); } - scrollToRight(offset?: number, speed?: number) + /** + * Scroll to right + * + * @param {number} offset + * @param {number} speed + */ + scrollToRight(offset?: number, speed?: number): void { - const width = this.element.nativeElement.scrollWidth; + const width = this.elementRef.nativeElement.scrollWidth; this.animateScrolling('scrollLeft', width - (offset || 0), speed); } - scrollToBottom(offset?: number, speed?: number) + /** + * Scroll to bottom + * + * @param {number} offset + * @param {number} speed + */ + scrollToBottom(offset?: number, speed?: number): void { - const height = this.element.nativeElement.scrollHeight; + const height = this.elementRef.nativeElement.scrollHeight; this.animateScrolling('scrollTop', height - (offset || 0), speed); } - animateScrolling(target: string, value: number, speed?: number) + /** + * Animate scrolling + * + * @param {string} target + * @param {number} value + * @param {number} speed + */ + animateScrolling(target: string, value: number, speed?: number): void { if ( !speed ) { - this.element.nativeElement[target] = value; + this.elementRef.nativeElement[target] = value; // PS has weird event sending order, this is a workaround for that this.update(); this.update(); } - else if ( value !== this.element.nativeElement[target] ) + else if ( value !== this.elementRef.nativeElement[target] ) { let newValue = 0; let scrollCount = 0; let oldTimestamp = performance.now(); - let oldValue = this.element.nativeElement[target]; + let oldValue = this.elementRef.nativeElement[target]; const cosParameter = (oldValue - value) / 2; @@ -158,11 +244,11 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD newValue = Math.round(value + cosParameter + cosParameter * Math.cos(scrollCount)); // Only continue animation if scroll position has not changed - if ( this.element.nativeElement[target] === oldValue ) + if ( this.elementRef.nativeElement[target] === oldValue ) { if ( scrollCount >= Math.PI ) { - this.element.nativeElement[target] = value; + this.elementRef.nativeElement[target] = value; // PS has weird event sending order, this is a workaround for that this.update(); @@ -171,7 +257,7 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD } else { - this.element.nativeElement[target] = oldValue = newValue; + this.elementRef.nativeElement[target] = oldValue = newValue; oldTimestamp = newTimestamp; diff --git a/src/@fuse/pipes/camelCaseToDash.pipe.ts b/src/@fuse/pipes/camelCaseToDash.pipe.ts index edac85b0..1b184300 100644 --- a/src/@fuse/pipes/camelCaseToDash.pipe.ts +++ b/src/@fuse/pipes/camelCaseToDash.pipe.ts @@ -3,7 +3,14 @@ import { Pipe, PipeTransform } from '@angular/core'; @Pipe({name: 'camelCaseToDash'}) export class CamelCaseToDashPipe implements PipeTransform { - transform(value: string, args: any[] = []) + /** + * Transform + * + * @param {string} value + * @param {any[]} args + * @returns {string} + */ + transform(value: string, args: any[] = []): string { return value ? String(value).replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`) : ''; } diff --git a/src/@fuse/pipes/filter.pipe.ts b/src/@fuse/pipes/filter.pipe.ts index dc709edf..40772a79 100644 --- a/src/@fuse/pipes/filter.pipe.ts +++ b/src/@fuse/pipes/filter.pipe.ts @@ -4,6 +4,14 @@ import { FuseUtils } from '@fuse/utils'; @Pipe({name: 'filter'}) export class FilterPipe implements PipeTransform { + /** + * Transform + * + * @param {any[]} mainArr + * @param {string} searchText + * @param {string} property + * @returns {any} + */ transform(mainArr: any[], searchText: string, property: string): any { return FuseUtils.filterArrayByString(mainArr, searchText); diff --git a/src/@fuse/pipes/getById.pipe.ts b/src/@fuse/pipes/getById.pipe.ts index 5993697f..46887158 100644 --- a/src/@fuse/pipes/getById.pipe.ts +++ b/src/@fuse/pipes/getById.pipe.ts @@ -6,6 +6,14 @@ import { Pipe, PipeTransform } from '@angular/core'; }) export class GetByIdPipe implements PipeTransform { + /** + * Transform + * + * @param {any[]} value + * @param {number} id + * @param {string} property + * @returns {any} + */ transform(value: any[], id: number, property: string): any { const foundItem = value.find(item => { diff --git a/src/@fuse/pipes/htmlToPlaintext.pipe.ts b/src/@fuse/pipes/htmlToPlaintext.pipe.ts index e7c5d56c..e1058fd3 100644 --- a/src/@fuse/pipes/htmlToPlaintext.pipe.ts +++ b/src/@fuse/pipes/htmlToPlaintext.pipe.ts @@ -3,7 +3,14 @@ import { Pipe, PipeTransform } from '@angular/core'; @Pipe({name: 'htmlToPlaintext'}) export class HtmlToPlaintextPipe implements PipeTransform { - transform(value: string, args: any[] = []) + /** + * Transform + * + * @param {string} value + * @param {any[]} args + * @returns {string} + */ + transform(value: string, args: any[] = []): string { return value ? String(value).replace(/<[^>]+>/gm, '') : ''; } diff --git a/src/@fuse/pipes/keys.pipe.ts b/src/@fuse/pipes/keys.pipe.ts index 03b6355a..9e6426a9 100644 --- a/src/@fuse/pipes/keys.pipe.ts +++ b/src/@fuse/pipes/keys.pipe.ts @@ -3,6 +3,13 @@ import { Pipe, PipeTransform } from '@angular/core'; @Pipe({name: 'keys'}) export class KeysPipe implements PipeTransform { + /** + * Transform + * + * @param value + * @param {string[]} args + * @returns {any} + */ transform(value: any, args: string[]): any { const keys: any[] = []; diff --git a/src/@fuse/services/config.service.ts b/src/@fuse/services/config.service.ts index 385ae3fe..8f07ee15 100644 --- a/src/@fuse/services/config.service.ts +++ b/src/@fuse/services/config.service.ts @@ -1,93 +1,96 @@ import { Inject, Injectable, InjectionToken } from '@angular/core'; -import { NavigationEnd, NavigationStart, Router } from '@angular/router'; +import { NavigationStart, Router } from '@angular/router'; import { Platform } from '@angular/cdk/platform'; -import { BehaviorSubject } from 'rxjs'; - +import { BehaviorSubject, Observable } from 'rxjs'; +import { filter } from 'rxjs/operators'; import * as _ from 'lodash'; -// Create the injection token for the custom config +// Create the injection token for the custom settings export const FUSE_CONFIG = new InjectionToken('fuseCustomConfig'); @Injectable() export class FuseConfigService { - config: any; - defaultConfig: any; - isSetConfigRan = false; - - onConfigChanged: BehaviorSubject; + // Private + private _configSubject: BehaviorSubject; + private readonly _defaultConfig: any; /** * Constructor * - * @param router - * @param platform - * @param config + * @param {Platform} _platform + * @param {Router} _router + * @param _config */ constructor( - private router: Router, - public platform: Platform, - @Inject(FUSE_CONFIG) config + private _platform: Platform, + private _router: Router, + @Inject(FUSE_CONFIG) private _config ) { - // Set the default config from the user provided one (forRoot) - this.defaultConfig = config; + // Set the default config from the user provided config (from forRoot) + this._defaultConfig = _config; - /** - * Disable Custom Scrollbars if Browser is Mobile - */ - if ( this.platform.ANDROID || this.platform.IOS ) - { - this.defaultConfig.customScrollbars = false; - } - - // Set the config from the default config - this.config = _.cloneDeep(this.defaultConfig); - - // Reload the default settings for the - // layout on every navigation start - router.events.subscribe( - (event) => { - - if ( event instanceof NavigationStart ) - { - this.isSetConfigRan = false; - } - - if ( event instanceof NavigationEnd ) - { - if ( this.isSetConfigRan ) - { - return; - } - - this.setConfig({ - layout: this.defaultConfig.layout - } - ); - } - } - ); - - // Create the behavior subject - this.onConfigChanged = new BehaviorSubject(this.config); + // Initialize the service + this._init(); } + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + /** - * Set the new config from given object - * - * @param config + * Set and get the config */ - setConfig(config): void + set config(value) { - // Set the SetConfigRan true - this.isSetConfigRan = true; + // Get the value from the behavior subject + let config = this._configSubject.getValue(); - // Merge the config - this.config = _.merge({}, this.config, config); + // Merge the new config + config = _.merge({}, config, value); - // Trigger the event - this.onConfigChanged.next(this.config); + // Notify the observers + this._configSubject.next(config); + } + + get config(): any | Observable + { + return this._configSubject.asObservable(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Initialize + * + * @private + */ + private _init(): void + { + /** + * Disable custom scrollbars if browser is mobile + */ + if ( this._platform.ANDROID || this._platform.IOS ) + { + this._defaultConfig.customScrollbars = false; + } + + // Set the settings from the default settings + this._configSubject = new BehaviorSubject(_.cloneDeep(this._defaultConfig)); + + // Reload the default settings on every navigation start if + // the current settings are different from defaults + this._router.events + .pipe(filter(event => event instanceof NavigationStart)) + .subscribe(() => { + if ( !_.isEqual(this._configSubject.getValue(), this._defaultConfig) ) + { + this._configSubject.next(_.cloneDeep(this._defaultConfig)); + } + }); } } diff --git a/src/@fuse/services/copier.service.ts b/src/@fuse/services/copier.service.ts index 99880d4e..1b431b0b 100644 --- a/src/@fuse/services/copier.service.ts +++ b/src/@fuse/services/copier.service.ts @@ -11,16 +11,20 @@ import { Injectable } from '@angular/core'; @Injectable() export class FuseCopierService { - private textarea: HTMLTextAreaElement; - /** Copy the text value to the clipboard. */ + /** + * Copy the text value to the clipboard + * + * @param {string} text + * @returns {boolean} + */ copyText(text: string): boolean { this.createTextareaAndSelect(text); const copySuccessful = document.execCommand('copy'); - this.removeFake(); + this._removeFake(); return copySuccessful; } @@ -28,8 +32,10 @@ export class FuseCopierService /** * Creates a hidden textarea element, sets its value from `text` property, * and makes a selection on it. + * + * @param {string} text */ - private createTextareaAndSelect(text: string) + private createTextareaAndSelect(text: string): void { // Create a fake element to hold the contents to copy this.textarea = document.createElement('textarea'); @@ -53,8 +59,12 @@ export class FuseCopierService this.textarea.setSelectionRange(0, this.textarea.value.length); } - /** Remove the text area from the DOM. */ - private removeFake() + /** + * Remove the text area from the DOM + * + * @private + */ + private _removeFake(): void { if ( this.textarea ) { diff --git a/src/@fuse/services/match-media.service.ts b/src/@fuse/services/match-media.service.ts index 2121e8be..22159936 100644 --- a/src/@fuse/services/match-media.service.ts +++ b/src/@fuse/services/match-media.service.ts @@ -8,16 +8,41 @@ export class FuseMatchMediaService activeMediaQuery: string; onMediaChange: BehaviorSubject = new BehaviorSubject(''); - constructor(private observableMedia: ObservableMedia) + /** + * Constructor + * + * @param {ObservableMedia} _observableMedia + */ + constructor( + private _observableMedia: ObservableMedia + ) { + // Set the defaults this.activeMediaQuery = ''; - this.observableMedia.subscribe((change: MediaChange) => { - if ( this.activeMediaQuery !== change.mqAlias ) - { - this.activeMediaQuery = change.mqAlias; - this.onMediaChange.next(change.mqAlias); - } - }); + // Initialize + this._init(); + + } + + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Initialize + * + * @private + */ + private _init(): void + { + this._observableMedia + .subscribe((change: MediaChange) => { + if ( this.activeMediaQuery !== change.mqAlias ) + { + this.activeMediaQuery = change.mqAlias; + this.onMediaChange.next(change.mqAlias); + } + }); } } diff --git a/src/@fuse/services/splash-screen.service.ts b/src/@fuse/services/splash-screen.service.ts index fe85cde8..6ad009d9 100644 --- a/src/@fuse/services/splash-screen.service.ts +++ b/src/@fuse/services/splash-screen.service.ts @@ -6,23 +6,45 @@ import { NavigationEnd, Router } from '@angular/router'; @Injectable() export class FuseSplashScreenService { - splashScreenEl; - public player: AnimationPlayer; + splashScreenEl: any; + player: AnimationPlayer; + /** + * Constructor + * + * @param {AnimationBuilder} _animationBuilder + * @param _document + * @param {Router} _router + */ constructor( - private animationBuilder: AnimationBuilder, - @Inject(DOCUMENT) private document: any, - private router: Router + private _animationBuilder: AnimationBuilder, + @Inject(DOCUMENT) private _document: any, + private _router: Router ) + { + // Initialize + this._init(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Initialize + * + * @private + */ + private _init(): void { // Get the splash screen element - this.splashScreenEl = this.document.body.querySelector('#fuse-splash-screen'); + this.splashScreenEl = this._document.body.querySelector('#fuse-splash-screen'); // If the splash screen element exists... if ( this.splashScreenEl ) { // Hide it on the first NavigationEnd event - const hideOnLoad = this.router.events.subscribe((event) => { + const hideOnLoad = this._router.events.subscribe((event) => { if ( event instanceof NavigationEnd ) { setTimeout(() => { @@ -38,10 +60,17 @@ export class FuseSplashScreenService } } - show() + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Show the splash screen + */ + show(): void { this.player = - this.animationBuilder + this._animationBuilder .build([ style({ opacity: '0', @@ -55,10 +84,13 @@ export class FuseSplashScreenService }, 0); } - hide() + /** + * Hide the splash screen + */ + hide(): void { this.player = - this.animationBuilder + this._animationBuilder .build([ style({opacity: '1'}), animate('400ms ease', style({ diff --git a/src/@fuse/services/translation-loader.service.ts b/src/@fuse/services/translation-loader.service.ts index 27283713..a26d7027 100644 --- a/src/@fuse/services/translation-loader.service.ts +++ b/src/@fuse/services/translation-loader.service.ts @@ -10,18 +10,34 @@ export interface Locale @Injectable() export class FuseTranslationLoaderService { - constructor(private translate: TranslateService) + /** + * Constructor + * + * @param {TranslateService} _translateService + */ + constructor( + private _translateService: TranslateService + ) { } - public loadTranslations(...args: Locale[]): void + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Load translations + * + * @param {Locale} args + */ + loadTranslations(...args: Locale[]): void { const locales = [...args]; locales.forEach((locale) => { // use setTranslation() with the third argument set to true // to append translations instead of replacing them - this.translate.setTranslation(locale.lang, locale.data, true); + this._translateService.setTranslation(locale.lang, locale.data, true); }); } } diff --git a/src/@fuse/utils/index.ts b/src/@fuse/utils/index.ts index c246c033..5d1cb06a 100644 --- a/src/@fuse/utils/index.ts +++ b/src/@fuse/utils/index.ts @@ -1,6 +1,13 @@ export class FuseUtils { - public static filterArrayByString(mainArr, searchText) + /** + * Filter array by string + * + * @param mainArr + * @param searchText + * @returns {any} + */ + public static filterArrayByString(mainArr, searchText): any { if ( searchText === '' ) { @@ -14,7 +21,14 @@ export class FuseUtils }); } - public static searchInObj(itemObj, searchText) + /** + * Search in object + * + * @param itemObj + * @param searchText + * @returns {boolean} + */ + public static searchInObj(itemObj, searchText): boolean { for ( const prop in itemObj ) { @@ -51,7 +65,14 @@ export class FuseUtils } } - public static searchInArray(arr, searchText) + /** + * Search in array + * + * @param arr + * @param searchText + * @returns {boolean} + */ + public static searchInArray(arr, searchText): boolean { for ( const value of arr ) { @@ -73,14 +94,26 @@ export class FuseUtils } } - public static searchInString(value, searchText) + /** + * Search in string + * + * @param value + * @param searchText + * @returns {any} + */ + public static searchInString(value, searchText): any { return value.toLowerCase().includes(searchText); } - public static generateGUID() + /** + * Generate a unique GUID + * + * @returns {string} + */ + public static generateGUID(): string { - function S4() + function S4(): string { return Math.floor((1 + Math.random()) * 0x10000) .toString(16) @@ -90,7 +123,13 @@ export class FuseUtils return S4() + S4(); } - public static toggleInArray(item, array) + /** + * Toggle in array + * + * @param item + * @param array + */ + public static toggleInArray(item, array): void { if ( array.indexOf(item) === -1 ) { @@ -102,7 +141,13 @@ export class FuseUtils } } - public static handleize(text) + /** + * Handleize + * + * @param text + * @returns {string} + */ + public static handleize(text): string { return text.toString().toLowerCase() .replace(/\s+/g, '-') // Replace spaces with - diff --git a/src/app/app.component.html b/src/app/app.component.html index 720092b3..1281ba0b 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,8 +1 @@ - - - - - - - - \ No newline at end of file + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 9a7d71d2..06408631 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -5,8 +5,9 @@ import { FuseSplashScreenService } from '@fuse/services/splash-screen.service'; import { FuseTranslationLoaderService } from '@fuse/services/translation-loader.service'; import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; -import { locale as navigationEnglish } from './navigation/i18n/en'; -import { locale as navigationTurkish } from './navigation/i18n/tr'; +import { navigation } from 'app/navigation/navigation'; +import { locale as navigationEnglish } from 'app/navigation/i18n/en'; +import { locale as navigationTurkish } from 'app/navigation/i18n/tr'; @Component({ selector : 'fuse-root', @@ -15,23 +16,36 @@ import { locale as navigationTurkish } from './navigation/i18n/tr'; }) export class AppComponent { + navigation: any; + + /** + * Constructor + * + * @param {FuseNavigationService} _fuseNavigationService + * @param {FuseSplashScreenService} _fuseSplashScreenService + * @param {FuseTranslationLoaderService} _fuseTranslationLoaderService + * @param {TranslateService} _translateService + */ constructor( - private translate: TranslateService, - private fuseNavigationService: FuseNavigationService, - private fuseSplashScreen: FuseSplashScreenService, - private fuseTranslationLoader: FuseTranslationLoaderService + private _fuseNavigationService: FuseNavigationService, + private _fuseSplashScreenService: FuseSplashScreenService, + private _fuseTranslationLoaderService: FuseTranslationLoaderService, + private _translateService: TranslateService ) { + // Navigation + this.navigation = navigation; + // Add languages - this.translate.addLangs(['en', 'tr']); + this._translateService.addLangs(['en', 'tr']); // Set the default language - this.translate.setDefaultLang('en'); + this._translateService.setDefaultLang('en'); // Set the navigation translations - this.fuseTranslationLoader.loadTranslations(navigationEnglish, navigationTurkish); + this._fuseTranslationLoaderService.loadTranslations(navigationEnglish, navigationTurkish); // Use a language - this.translate.use('en'); + this._translateService.use('en'); } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index a9b4fa1b..de296e12 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -8,23 +8,23 @@ import { TranslateModule } from '@ngx-translate/core'; import 'hammerjs'; import { FuseModule } from '@fuse/fuse.module'; -import { FuseLayoutsModule } from '@fuse/components'; import { FuseSharedModule } from '@fuse/shared.module'; -import { fuseConfig } from './fuse-config'; +import { fuseConfig } from 'app/fuse-config'; -import { AppComponent } from './app.component'; -import { FuseFakeDbService } from './fuse-fake-db/fuse-fake-db.service'; -import { AppStoreModule } from './store/store.module'; +import { FuseFakeDbService } from 'app/fuse-fake-db/fuse-fake-db.service'; +import { AppComponent } from 'app/app.component'; +import { AppStoreModule } from 'app/store/store.module'; +import { LayoutModule } from 'app/layout/layout.module'; const appRoutes: Routes = [ { path : 'apps', - loadChildren: './main/apps/apps.module#FuseAppsModule' + loadChildren: './main/apps/apps.module#AppsModule' }, { path : 'pages', - loadChildren: './main/pages/pages.module#FusePagesModule' + loadChildren: './main/pages/pages.module#PagesModule' }, { path : 'ui', @@ -32,15 +32,15 @@ const appRoutes: Routes = [ }, { path : 'services', - loadChildren: './main/services/services.module#FuseServicesModule' + loadChildren: './main/services/services.module#ServicesModule' }, { path : 'components', - loadChildren: './main/components/components.module#FuseComponentsModule' + loadChildren: './main/components/components.module#ComponentsModule' }, { path : 'components-third-party', - loadChildren: './main/components-third-party/components-third-party.module#FuseComponentsThirdPartyModule' + loadChildren: './main/components-third-party/components-third-party.module#ComponentsThirdPartyModule' }, { path : '**', @@ -64,11 +64,12 @@ const appRoutes: Routes = [ passThruUnknownUrl: true }), - // Fuse Main and Shared modules + // Fuse modules FuseModule.forRoot(fuseConfig), - FuseLayoutsModule, FuseSharedModule, + // App modules + LayoutModule, AppStoreModule ], bootstrap : [ diff --git a/src/app/fuse-config.ts b/src/app/fuse-config/index.ts similarity index 86% rename from src/app/fuse-config.ts rename to src/app/fuse-config/index.ts index 15c37aa7..7bb7e6bb 100644 --- a/src/app/fuse-config.ts +++ b/src/app/fuse-config/index.ts @@ -2,12 +2,12 @@ * Default Fuse Configuration * * You can edit these options to change the default options. All these options also can be changed per component - * basis. See `app/main/content/pages/authentication/login/login.component.ts` constructor method to learn more + * basis. See `app/main/pages/authentication/login/login.component.ts` constructor method to learn more * about changing these options per component basis. */ export const fuseConfig = { layout : { - style : 'vertical', + style : 'vertical-basic', navigation: { position: 'left', folded : false diff --git a/src/app/layout/content/content.component.html b/src/app/layout/blocks/content/content.component.html similarity index 100% rename from src/app/layout/content/content.component.html rename to src/app/layout/blocks/content/content.component.html diff --git a/src/app/layout/content/content.component.scss b/src/app/layout/blocks/content/content.component.scss similarity index 100% rename from src/app/layout/content/content.component.scss rename to src/app/layout/blocks/content/content.component.scss diff --git a/src/app/layout/blocks/content/content.component.ts b/src/app/layout/blocks/content/content.component.ts new file mode 100644 index 00000000..481247a5 --- /dev/null +++ b/src/app/layout/blocks/content/content.component.ts @@ -0,0 +1,110 @@ +import { Component, HostBinding, OnDestroy, OnInit } from '@angular/core'; +import { ActivatedRoute, NavigationEnd, Router } from '@angular/router'; +import { Subject } from 'rxjs'; +import { filter, map } from 'rxjs/operators'; +import { takeUntil } from 'rxjs/operators'; + +import { fuseAnimations } from '@fuse/animations'; +import { FuseConfigService } from '@fuse/services/config.service'; + +@Component({ + selector : 'content', + templateUrl: './content.component.html', + styleUrls : ['./content.component.scss'], + animations : fuseAnimations +}) +export class ContentComponent implements OnInit, OnDestroy +{ + fuseConfig: any; + + @HostBinding('@routerTransitionUp') + routeAnimationUp = false; + + @HostBinding('@routerTransitionDown') + routeAnimationDown = false; + + @HostBinding('@routerTransitionRight') + routeAnimationRight = false; + + @HostBinding('@routerTransitionLeft') + routeAnimationLeft = false; + + @HostBinding('@routerTransitionFade') + routeAnimationFade = false; + + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {ActivatedRoute} _activatedRoute + * @param {FuseConfigService} _fuseConfigService + * @param {Router} _router + */ + constructor( + private _activatedRoute: ActivatedRoute, + private _fuseConfigService: FuseConfigService, + private _router: Router + ) + { + // Set the private defaults + this._unsubscribeAll = new Subject(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + // Subscribe to the router events for router animations + this._router.events + .pipe( + filter((event) => event instanceof NavigationEnd), + map(() => this._activatedRoute) + ) + .subscribe(() => { + switch ( this.fuseConfig.routerAnimation ) + { + case 'fadeIn': + this.routeAnimationFade = !this.routeAnimationFade; + break; + case 'slideUp': + this.routeAnimationUp = !this.routeAnimationUp; + break; + case 'slideDown': + this.routeAnimationDown = !this.routeAnimationDown; + break; + case 'slideRight': + this.routeAnimationRight = !this.routeAnimationRight; + break; + case 'slideLeft': + this.routeAnimationLeft = !this.routeAnimationLeft; + break; + } + }); + + // Subscribe to config changes + this._fuseConfigService.config + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe( + (config) => { + this.fuseConfig = config; + } + ); + } + + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } +} diff --git a/src/app/layout/content/content.module.ts b/src/app/layout/blocks/content/content.module.ts similarity index 63% rename from src/app/layout/content/content.module.ts rename to src/app/layout/blocks/content/content.module.ts index 2be7d794..5b2c42d7 100644 --- a/src/app/layout/content/content.module.ts +++ b/src/app/layout/blocks/content/content.module.ts @@ -3,21 +3,20 @@ import { RouterModule } from '@angular/router'; import { FuseSharedModule } from '@fuse/shared.module'; -import { FuseContentComponent } from 'app/layout/content/content.component'; +import { ContentComponent } from 'app/layout/blocks/content/content.component'; @NgModule({ declarations: [ - FuseContentComponent + ContentComponent ], imports : [ RouterModule, - FuseSharedModule, ], exports: [ - FuseContentComponent + ContentComponent ] }) -export class FuseContentModule +export class ContentModule { } diff --git a/src/app/layout/footer/footer.component.html b/src/app/layout/blocks/footer/footer.component.html similarity index 100% rename from src/app/layout/footer/footer.component.html rename to src/app/layout/blocks/footer/footer.component.html diff --git a/src/app/layout/footer/footer.component.scss b/src/app/layout/blocks/footer/footer.component.scss similarity index 100% rename from src/app/layout/footer/footer.component.scss rename to src/app/layout/blocks/footer/footer.component.scss diff --git a/src/app/layout/footer/footer.component.ts b/src/app/layout/blocks/footer/footer.component.ts similarity index 66% rename from src/app/layout/footer/footer.component.ts rename to src/app/layout/blocks/footer/footer.component.ts index 4065e363..0a12144e 100644 --- a/src/app/layout/footer/footer.component.ts +++ b/src/app/layout/blocks/footer/footer.component.ts @@ -1,13 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-footer', + selector : 'footer', templateUrl: './footer.component.html', styleUrls : ['./footer.component.scss'] }) -export class FuseFooterComponent +export class FooterComponent { - + /** + * Constructor + */ constructor() { } diff --git a/src/app/layout/footer/footer.module.ts b/src/app/layout/blocks/footer/footer.module.ts similarity index 62% rename from src/app/layout/footer/footer.module.ts rename to src/app/layout/blocks/footer/footer.module.ts index 10b7c9e1..058b7aad 100644 --- a/src/app/layout/footer/footer.module.ts +++ b/src/app/layout/blocks/footer/footer.module.ts @@ -1,18 +1,15 @@ import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; import { MatButtonModule, MatIconModule, MatToolbarModule } from '@angular/material'; import { FuseSharedModule } from '@fuse/shared.module'; -import { FuseFooterComponent } from 'app/layout/footer/footer.component'; +import { FooterComponent } from 'app/layout/blocks/footer/footer.component'; @NgModule({ declarations: [ - FuseFooterComponent + FooterComponent ], imports : [ - RouterModule, - MatButtonModule, MatIconModule, MatToolbarModule, @@ -20,9 +17,9 @@ import { FuseFooterComponent } from 'app/layout/footer/footer.component'; FuseSharedModule ], exports : [ - FuseFooterComponent + FooterComponent ] }) -export class FuseFooterModule +export class FooterModule { } diff --git a/src/app/layout/navbar/navbar.component.html b/src/app/layout/blocks/navbar/navbar.component.html similarity index 100% rename from src/app/layout/navbar/navbar.component.html rename to src/app/layout/blocks/navbar/navbar.component.html diff --git a/src/app/layout/navbar/navbar.component.scss b/src/app/layout/blocks/navbar/navbar.component.scss similarity index 97% rename from src/app/layout/navbar/navbar.component.scss rename to src/app/layout/blocks/navbar/navbar.component.scss index 0a09af21..09837358 100644 --- a/src/app/layout/navbar/navbar.component.scss +++ b/src/app/layout/blocks/navbar/navbar.component.scss @@ -1,4 +1,4 @@ -@import "../../../@fuse/scss/fuse"; +@import "src/@fuse/scss/fuse"; body { @@ -44,7 +44,7 @@ fuse-sidebar { } } -fuse-navbar { +navbar { &:not(.top-navbar) { height: 100%; diff --git a/src/app/layout/blocks/navbar/navbar.component.ts b/src/app/layout/blocks/navbar/navbar.component.ts new file mode 100644 index 00000000..0ef3d7a3 --- /dev/null +++ b/src/app/layout/blocks/navbar/navbar.component.ts @@ -0,0 +1,133 @@ +import { Component, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; +import { NavigationEnd, Router } from '@angular/router'; +import { Subject } from 'rxjs'; +import { filter, takeUntil } from 'rxjs/operators'; + +import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive'; +import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service'; + +import { navigation } from 'app/navigation/navigation'; +import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; + +@Component({ + selector : 'navbar', + templateUrl : './navbar.component.html', + styleUrls : ['./navbar.component.scss'], + encapsulation: ViewEncapsulation.None +}) +export class NavbarComponent implements OnInit, OnDestroy +{ + // Layout + @Input() + layout; + + fusePerfectScrollbarUpdateTimeout: any; + navigation: any; + + // Private + private _fusePerfectScrollbar: FusePerfectScrollbarDirective; + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {FuseNavigationService} _fuseNavigationService + * @param {FuseSidebarService} _fuseSidebarService + * @param {Router} _router + */ + constructor( + private _fuseNavigationService: FuseNavigationService, + private _fuseSidebarService: FuseSidebarService, + private _router: Router + ) + { + // Set the defaults + this.layout = 'vertical'; + this.navigation = navigation; + + // Set the private defaults + this._unsubscribeAll = new Subject(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + // Directive + @ViewChild(FusePerfectScrollbarDirective) + set directive(theDirective: FusePerfectScrollbarDirective) + { + if ( !theDirective ) + { + return; + } + + this._fusePerfectScrollbar = theDirective; + + this._fuseNavigationService.onItemCollapseToggled + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(() => { + this.fusePerfectScrollbarUpdateTimeout = setTimeout(() => { + this._fusePerfectScrollbar.update(); + }, 310); + }); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + this._router.events + .pipe( + filter((event) => event instanceof NavigationEnd), + takeUntil(this._unsubscribeAll) + ) + .subscribe(() => { + if ( this._fuseSidebarService.getSidebar('navbar') ) + { + this._fuseSidebarService.getSidebar('navbar').close(); + } + } + ); + } + + /** + * On destroy + */ + ngOnDestroy(): void + { + if ( this.fusePerfectScrollbarUpdateTimeout ) + { + clearTimeout(this.fusePerfectScrollbarUpdateTimeout); + } + + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Toggle sidebar opened status + */ + toggleSidebarOpened(): void + { + this._fuseSidebarService.getSidebar('navbar').toggleOpen(); + } + + /** + * Toggle sidebar folded status + */ + toggleSidebarFolded(): void + { + this._fuseSidebarService.getSidebar('navbar').toggleFold(); + } +} diff --git a/src/app/layout/navbar/navbar.module.ts b/src/app/layout/blocks/navbar/navbar.module.ts similarity index 64% rename from src/app/layout/navbar/navbar.module.ts rename to src/app/layout/blocks/navbar/navbar.module.ts index 589de6d9..03d2e2a7 100644 --- a/src/app/layout/navbar/navbar.module.ts +++ b/src/app/layout/blocks/navbar/navbar.module.ts @@ -1,20 +1,16 @@ import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; - import { MatButtonModule, MatIconModule } from '@angular/material'; +import { FuseNavigationModule } from '@fuse/components'; import { FuseSharedModule } from '@fuse/shared.module'; -import { FuseNavbarComponent } from 'app/layout/navbar/navbar.component'; -import { FuseNavigationModule } from '@fuse/components'; +import { NavbarComponent } from 'app/layout/blocks/navbar/navbar.component'; @NgModule({ declarations: [ - FuseNavbarComponent + NavbarComponent ], imports : [ - RouterModule, - MatButtonModule, MatIconModule, @@ -22,9 +18,9 @@ import { FuseNavigationModule } from '@fuse/components'; FuseNavigationModule ], exports : [ - FuseNavbarComponent + NavbarComponent ] }) -export class FuseNavbarModule +export class NavbarModule { } diff --git a/src/app/layout/quick-panel/quick-panel.component.html b/src/app/layout/blocks/quick-panel/quick-panel.component.html similarity index 100% rename from src/app/layout/quick-panel/quick-panel.component.html rename to src/app/layout/blocks/quick-panel/quick-panel.component.html diff --git a/src/app/layout/quick-panel/quick-panel.component.scss b/src/app/layout/blocks/quick-panel/quick-panel.component.scss similarity index 90% rename from src/app/layout/quick-panel/quick-panel.component.scss rename to src/app/layout/blocks/quick-panel/quick-panel.component.scss index be16d852..2b116c1a 100644 --- a/src/app/layout/quick-panel/quick-panel.component.scss +++ b/src/app/layout/blocks/quick-panel/quick-panel.component.scss @@ -1,4 +1,4 @@ -fuse-quick-panel { +quick-panel { display: flex; width: 280px; min-width: 280px; diff --git a/src/app/layout/blocks/quick-panel/quick-panel.component.ts b/src/app/layout/blocks/quick-panel/quick-panel.component.ts new file mode 100644 index 00000000..ba235aa4 --- /dev/null +++ b/src/app/layout/blocks/quick-panel/quick-panel.component.ts @@ -0,0 +1,76 @@ +import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; + +@Component({ + selector : 'quick-panel', + templateUrl : './quick-panel.component.html', + styleUrls : ['./quick-panel.component.scss'], + encapsulation: ViewEncapsulation.None +}) +export class QuickPanelComponent implements OnInit, OnDestroy +{ + date: Date; + events: any[]; + notes: any[]; + settings: any; + + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {HttpClient} _httpClient + */ + constructor( + private _httpClient: HttpClient + ) + { + // Set the defaults + this.date = new Date(); + this.settings = { + notify: true, + cloud : false, + retro : true + }; + + // Set the private defaults + this._unsubscribeAll = new Subject(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + // Subscribe to the events + this._httpClient.get('api/quick-panel-events') + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((response: any) => { + this.events = response; + }); + + // Subscribe to the notes + this._httpClient.get('api/quick-panel-notes') + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((response: any) => { + this.notes = response; + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } +} diff --git a/src/app/layout/quick-panel/quick-panel.module.ts b/src/app/layout/blocks/quick-panel/quick-panel.module.ts similarity index 60% rename from src/app/layout/quick-panel/quick-panel.module.ts rename to src/app/layout/blocks/quick-panel/quick-panel.module.ts index 0a863545..0d4062cc 100644 --- a/src/app/layout/quick-panel/quick-panel.module.ts +++ b/src/app/layout/blocks/quick-panel/quick-panel.module.ts @@ -1,18 +1,15 @@ import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; import { MatDividerModule, MatListModule, MatSlideToggleModule } from '@angular/material'; import { FuseSharedModule } from '@fuse/shared.module'; -import { FuseQuickPanelComponent } from 'app/layout/quick-panel/quick-panel.component'; +import { QuickPanelComponent } from 'app/layout/blocks/quick-panel/quick-panel.component'; @NgModule({ declarations: [ - FuseQuickPanelComponent + QuickPanelComponent ], imports : [ - RouterModule, - MatDividerModule, MatListModule, MatSlideToggleModule, @@ -20,9 +17,9 @@ import { FuseQuickPanelComponent } from 'app/layout/quick-panel/quick-panel.comp FuseSharedModule, ], exports: [ - FuseQuickPanelComponent + QuickPanelComponent ] }) -export class FuseQuickPanelModule +export class QuickPanelModule { } diff --git a/src/app/layout/toolbar/toolbar.component.html b/src/app/layout/blocks/toolbar/toolbar.component.html similarity index 99% rename from src/app/layout/toolbar/toolbar.component.html rename to src/app/layout/blocks/toolbar/toolbar.component.html index e39c26f2..d1d3cf8e 100644 --- a/src/app/layout/toolbar/toolbar.component.html +++ b/src/app/layout/blocks/toolbar/toolbar.component.html @@ -98,5 +98,7 @@
+ + diff --git a/src/app/layout/toolbar/toolbar.component.scss b/src/app/layout/blocks/toolbar/toolbar.component.scss similarity index 96% rename from src/app/layout/toolbar/toolbar.component.scss rename to src/app/layout/blocks/toolbar/toolbar.component.scss index 25abc217..ea7692af 100644 --- a/src/app/layout/toolbar/toolbar.component.scss +++ b/src/app/layout/blocks/toolbar/toolbar.component.scss @@ -1,4 +1,4 @@ -@import '../../../@fuse/scss/fuse'; +@import "src/@fuse/scss/fuse"; :host { position: relative; diff --git a/src/app/layout/blocks/toolbar/toolbar.component.ts b/src/app/layout/blocks/toolbar/toolbar.component.ts new file mode 100644 index 00000000..34ab33fc --- /dev/null +++ b/src/app/layout/blocks/toolbar/toolbar.component.ts @@ -0,0 +1,182 @@ +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { NavigationEnd, NavigationStart, Router } from '@angular/router'; +import { Subject } from 'rxjs'; +import { filter, takeUntil } from 'rxjs/operators'; +import { TranslateService } from '@ngx-translate/core'; +import * as _ from 'lodash'; + +import { FuseConfigService } from '@fuse/services/config.service'; +import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service'; + +import { navigation } from 'app/navigation/navigation'; + +@Component({ + selector : 'toolbar', + templateUrl: './toolbar.component.html', + styleUrls : ['./toolbar.component.scss'] +}) + +export class ToolbarComponent implements OnInit, OnDestroy +{ + horizontalNav: boolean; + languages: any; + noNav: boolean; + navigation: any; + selectedLanguage: any; + showLoadingBar: boolean; + userStatusOptions: any[]; + + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {FuseConfigService} _fuseConfigService + * @param {FuseSidebarService} _fuseSidebarService + * @param {Router} _router + * @param {TranslateService} _translateService + */ + constructor( + private _fuseConfigService: FuseConfigService, + private _fuseSidebarService: FuseSidebarService, + private _router: Router, + private _translateService: TranslateService + ) + { + // Set the defaults + this.userStatusOptions = [ + { + 'title': 'Online', + 'icon' : 'icon-checkbox-marked-circle', + 'color': '#4CAF50' + }, + { + 'title': 'Away', + 'icon' : 'icon-clock', + 'color': '#FFC107' + }, + { + 'title': 'Do not Disturb', + 'icon' : 'icon-minus-circle', + 'color': '#F44336' + }, + { + 'title': 'Invisible', + 'icon' : 'icon-checkbox-blank-circle-outline', + 'color': '#BDBDBD' + }, + { + 'title': 'Offline', + 'icon' : 'icon-checkbox-blank-circle-outline', + 'color': '#616161' + } + ]; + + this.languages = [ + { + id : 'en', + title: 'English', + flag : 'us' + }, + { + id : 'tr', + title: 'Turkish', + flag : 'tr' + } + ]; + + this.navigation = navigation; + + // Set the private defaults + this._unsubscribeAll = new Subject(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + // Subscribe to the router events to show/hide the loading bar + this._router.events + .pipe( + filter((event) => event instanceof NavigationStart), + takeUntil(this._unsubscribeAll) + ) + .subscribe((event) => { + this.showLoadingBar = true; + }); + + this._router.events + .pipe( + filter((event) => event instanceof NavigationEnd) + ) + .subscribe((event) => { + this.showLoadingBar = false; + }); + + // Subscribe to the config changes + this._fuseConfigService.config + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((settings) => { + this.horizontalNav = settings.layout.navigation.position === 'top'; + this.noNav = settings.layout.navigation.position === 'none'; + }); + + // Set the selected language from default languages + this.selectedLanguage = _.find(this.languages, {'id': this._translateService.currentLang}); + } + + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Toggle sidebar opened + * + * @param key + */ + toggleSidebarOpened(key): void + { + this._fuseSidebarService.getSidebar(key).toggleOpen(); + } + + /** + * Search + * + * @param value + */ + search(value): void + { + // Do your search here... + console.log(value); + } + + /** + * Set the language + * + * @param langId + */ + setLanguage(langId): void + { + // Set the selected language for toolbar + this.selectedLanguage = _.find(this.languages, {'id': langId}); + + // Use the selected language for translations + this._translateService.use(langId); + } +} diff --git a/src/app/layout/toolbar/toolbar.module.ts b/src/app/layout/blocks/toolbar/toolbar.module.ts similarity index 80% rename from src/app/layout/toolbar/toolbar.module.ts rename to src/app/layout/blocks/toolbar/toolbar.module.ts index 57272437..4217e99a 100644 --- a/src/app/layout/toolbar/toolbar.module.ts +++ b/src/app/layout/blocks/toolbar/toolbar.module.ts @@ -2,18 +2,17 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { MatButtonModule, MatIconModule, MatMenuModule, MatProgressBarModule, MatToolbarModule } from '@angular/material'; +import { FuseSearchBarModule, FuseShortcutsModule } from '@fuse/components'; import { FuseSharedModule } from '@fuse/shared.module'; -import { FuseToolbarComponent } from 'app/layout/toolbar/toolbar.component'; -import { FuseSearchBarModule, FuseShortcutsModule } from '@fuse/components'; +import { ToolbarComponent } from 'app/layout/blocks/toolbar/toolbar.component'; @NgModule({ declarations: [ - FuseToolbarComponent + ToolbarComponent ], imports : [ RouterModule, - MatButtonModule, MatIconModule, MatMenuModule, @@ -25,9 +24,9 @@ import { FuseSearchBarModule, FuseShortcutsModule } from '@fuse/components'; FuseShortcutsModule ], exports : [ - FuseToolbarComponent + ToolbarComponent ] }) -export class FuseToolbarModule +export class ToolbarModule { } diff --git a/src/app/layout/content/content.component.ts b/src/app/layout/content/content.component.ts deleted file mode 100644 index 1f2aedee..00000000 --- a/src/app/layout/content/content.component.ts +++ /dev/null @@ -1,70 +0,0 @@ -import { Component, HostBinding, OnDestroy } from '@angular/core'; -import { ActivatedRoute, NavigationEnd, Router } from '@angular/router'; - -import { Subscription } from 'rxjs'; -import { filter, map } from 'rxjs/operators'; - -import { fuseAnimations } from '@fuse/animations/index'; -import { FuseConfigService } from '@fuse/services/config.service'; - -@Component({ - selector : 'fuse-content', - templateUrl: './content.component.html', - styleUrls : ['./content.component.scss'], - animations : fuseAnimations -}) -export class FuseContentComponent implements OnDestroy -{ - onConfigChanged: Subscription; - fuseSettings: any; - - @HostBinding('@routerTransitionUp') routeAnimationUp = false; - @HostBinding('@routerTransitionDown') routeAnimationDown = false; - @HostBinding('@routerTransitionRight') routeAnimationRight = false; - @HostBinding('@routerTransitionLeft') routeAnimationLeft = false; - @HostBinding('@routerTransitionFade') routeAnimationFade = false; - - constructor( - private router: Router, - private activatedRoute: ActivatedRoute, - private fuseConfig: FuseConfigService - ) - { - this.router.events.pipe( - filter((event) => event instanceof NavigationEnd), - map(() => this.activatedRoute) - ).subscribe((event) => { - switch ( this.fuseSettings.routerAnimation ) - { - case 'fadeIn': - this.routeAnimationFade = !this.routeAnimationFade; - break; - case 'slideUp': - this.routeAnimationUp = !this.routeAnimationUp; - break; - case 'slideDown': - this.routeAnimationDown = !this.routeAnimationDown; - break; - case 'slideRight': - this.routeAnimationRight = !this.routeAnimationRight; - break; - case 'slideLeft': - this.routeAnimationLeft = !this.routeAnimationLeft; - break; - } - }); - - this.onConfigChanged = - this.fuseConfig.onConfigChanged - .subscribe( - (newSettings) => { - this.fuseSettings = newSettings; - } - ); - } - - ngOnDestroy() - { - this.onConfigChanged.unsubscribe(); - } -} diff --git a/src/app/layout/layout.module.ts b/src/app/layout/layout.module.ts new file mode 100644 index 00000000..0d168275 --- /dev/null +++ b/src/app/layout/layout.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; + +import { VerticalNavBasicLayoutModule } from 'app/layout/vertical/basic/basic.module'; + +@NgModule({ + imports: [ + VerticalNavBasicLayoutModule + ], + exports: [ + VerticalNavBasicLayoutModule + ] +}) +export class LayoutModule +{ +} diff --git a/src/app/layout/navbar/navbar.component.ts b/src/app/layout/navbar/navbar.component.ts deleted file mode 100644 index 340ba35d..00000000 --- a/src/app/layout/navbar/navbar.component.ts +++ /dev/null @@ -1,95 +0,0 @@ -import { Component, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; -import { NavigationEnd, Router } from '@angular/router'; - -import { Subscription } from 'rxjs'; - -import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive'; -import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service'; - -import { navigation } from 'app/navigation/navigation'; -import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; -import { FuseSidebarComponent } from '@fuse/components/sidebar/sidebar.component'; - -@Component({ - selector : 'fuse-navbar', - templateUrl : './navbar.component.html', - styleUrls : ['./navbar.component.scss'], - encapsulation: ViewEncapsulation.None -}) -export class FuseNavbarComponent implements OnInit, OnDestroy -{ - private fusePerfectScrollbar: FusePerfectScrollbarDirective; - - @ViewChild(FusePerfectScrollbarDirective) set directive(theDirective: FusePerfectScrollbarDirective) - { - if ( !theDirective ) - { - return; - } - - this.fusePerfectScrollbar = theDirective; - - this.navigationServiceWatcher = - this.navigationService.onItemCollapseToggled.subscribe(() => { - this.fusePerfectScrollbarUpdateTimeout = setTimeout(() => { - this.fusePerfectScrollbar.update(); - }, 310); - }); - } - - @Input() layout; - navigation: any; - navigationServiceWatcher: Subscription; - fusePerfectScrollbarUpdateTimeout; - - constructor( - private sidebarService: FuseSidebarService, - private navigationService: FuseNavigationService, - private router: Router - ) - { - // Navigation data - this.navigation = navigation; - - // Default layout - this.layout = 'vertical'; - } - - ngOnInit() - { - this.router.events.subscribe( - (event) => { - if ( event instanceof NavigationEnd ) - { - if ( this.sidebarService.getSidebar('navbar') ) - { - this.sidebarService.getSidebar('navbar').close(); - } - } - } - ); - } - - ngOnDestroy() - { - if ( this.fusePerfectScrollbarUpdateTimeout ) - { - clearTimeout(this.fusePerfectScrollbarUpdateTimeout); - } - - if ( this.navigationServiceWatcher ) - { - this.navigationServiceWatcher.unsubscribe(); - } - } - - toggleSidebarOpened() - { - this.sidebarService.getSidebar('navbar').toggleOpen(); - } - - toggleSidebarFolded() - { - this.sidebarService.getSidebar('navbar').toggleFold(); - } -} diff --git a/src/app/layout/quick-panel/quick-panel.component.ts b/src/app/layout/quick-panel/quick-panel.component.ts deleted file mode 100644 index 6163e058..00000000 --- a/src/app/layout/quick-panel/quick-panel.component.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { Component, OnInit, ViewEncapsulation } from '@angular/core'; -import { HttpClient } from '@angular/common/http'; - -@Component({ - selector : 'fuse-quick-panel', - templateUrl : './quick-panel.component.html', - styleUrls : ['./quick-panel.component.scss'], - encapsulation: ViewEncapsulation.None -}) -export class FuseQuickPanelComponent implements OnInit -{ - date: Date; - settings: any; - notes: any[]; - events: any[]; - - constructor(private http: HttpClient) - { - this.date = new Date(); - this.settings = { - notify: true, - cloud : false, - retro : true - }; - } - - ngOnInit() - { - this.http.get('api/quick-panel-notes') - .subscribe((response: any) => { - this.notes = response; - }); - - this.http.get('api/quick-panel-events') - .subscribe((response: any) => { - this.events = response; - }); - - } - -} diff --git a/src/app/layout/toolbar/toolbar.component.ts b/src/app/layout/toolbar/toolbar.component.ts deleted file mode 100644 index f5cab4b4..00000000 --- a/src/app/layout/toolbar/toolbar.component.ts +++ /dev/null @@ -1,119 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { NavigationEnd, NavigationStart, Router } from '@angular/router'; -import { TranslateService } from '@ngx-translate/core'; -import * as _ from 'lodash'; - -import { FuseConfigService } from '@fuse/services/config.service'; -import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service'; - -import { navigation } from 'app/navigation/navigation'; - -@Component({ - selector : 'fuse-toolbar', - templateUrl: './toolbar.component.html', - styleUrls : ['./toolbar.component.scss'] -}) - -export class FuseToolbarComponent implements OnInit -{ - userStatusOptions: any[]; - languages: any; - selectedLanguage: any; - showLoadingBar: boolean; - horizontalNav: boolean; - noNav: boolean; - navigation: any; - - constructor( - private router: Router, - private fuseConfig: FuseConfigService, - private sidebarService: FuseSidebarService, - private translate: TranslateService - ) - { - this.userStatusOptions = [ - { - 'title': 'Online', - 'icon' : 'icon-checkbox-marked-circle', - 'color': '#4CAF50' - }, - { - 'title': 'Away', - 'icon' : 'icon-clock', - 'color': '#FFC107' - }, - { - 'title': 'Do not Disturb', - 'icon' : 'icon-minus-circle', - 'color': '#F44336' - }, - { - 'title': 'Invisible', - 'icon' : 'icon-checkbox-blank-circle-outline', - 'color': '#BDBDBD' - }, - { - 'title': 'Offline', - 'icon' : 'icon-checkbox-blank-circle-outline', - 'color': '#616161' - } - ]; - - this.languages = [ - { - id : 'en', - title: 'English', - flag : 'us' - }, - { - id : 'tr', - title: 'Turkish', - flag : 'tr' - } - ]; - - router.events.subscribe( - (event) => { - if ( event instanceof NavigationStart ) - { - this.showLoadingBar = true; - } - if ( event instanceof NavigationEnd ) - { - this.showLoadingBar = false; - } - }); - - this.fuseConfig.onConfigChanged.subscribe((settings) => { - this.horizontalNav = settings.layout.navigation === 'top'; - this.noNav = settings.layout.navigation === 'none'; - }); - - this.navigation = navigation; - } - - ngOnInit() - { - this.selectedLanguage = _.find(this.languages, {'id': this.translate.currentLang}); - } - - toggleSidebarOpened(key) - { - this.sidebarService.getSidebar(key).toggleOpen(); - } - - search(value) - { - // Do your search here... - console.log(value); - } - - setLanguage(langId) - { - // Set the selected language for toolbar - this.selectedLanguage = _.find(this.languages, {'id': langId}); - - // Use the selected language for translations - this.translate.use(langId); - } -} diff --git a/src/app/layout/vertical/basic/basic.component.html b/src/app/layout/vertical/basic/basic.component.html new file mode 100644 index 00000000..a12d2561 --- /dev/null +++ b/src/app/layout/vertical/basic/basic.component.html @@ -0,0 +1,77 @@ + + +
+ + + + + + + + + + + + +
+ + + + + + + +
+ + + + + + + + + + + +
+ + + +
+ + + + + + + +
+ + + +
+ + + +
+ + + + + + + + + + \ No newline at end of file diff --git a/src/@fuse/components/layouts/vertical-nav/basic/basic.component.scss b/src/app/layout/vertical/basic/basic.component.scss similarity index 94% rename from src/@fuse/components/layouts/vertical-nav/basic/basic.component.scss rename to src/app/layout/vertical/basic/basic.component.scss index 793e79b4..3220c433 100644 --- a/src/@fuse/components/layouts/vertical-nav/basic/basic.component.scss +++ b/src/app/layout/vertical/basic/basic.component.scss @@ -1,6 +1,6 @@ @import "src/@fuse/scss/fuse"; -fuse-vertical-nav-basic-layout { +vertical-nav-basic-layout { display: flex; flex-direction: column; width: 100%; @@ -21,7 +21,7 @@ fuse-vertical-nav-basic-layout { height: auto !important; } - #fuse-main-content { + #main-content { display: flex; flex: 1; flex-direction: column; @@ -39,7 +39,7 @@ fuse-vertical-nav-basic-layout { flex: 1; overflow: hidden; - fuse-content { + content { position: relative; display: flex; flex: 1; diff --git a/src/app/layout/vertical/basic/basic.component.ts b/src/app/layout/vertical/basic/basic.component.ts new file mode 100644 index 00000000..ad498b0e --- /dev/null +++ b/src/app/layout/vertical/basic/basic.component.ts @@ -0,0 +1,64 @@ +import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; + +import { FuseConfigService } from '@fuse/services/config.service'; +import { navigation } from 'app/navigation/navigation'; + +@Component({ + selector : 'vertical-nav-basic-layout', + templateUrl : './basic.component.html', + styleUrls : ['./basic.component.scss'], + encapsulation: ViewEncapsulation.None +}) +export class VerticalNavBasicLayoutComponent implements OnInit, OnDestroy +{ + fuseConfig: any; + navigation: any; + + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {FuseConfigService} _fuseConfigService + */ + constructor( + private _fuseConfigService: FuseConfigService + ) + { + // Set the defaults + this.navigation = navigation; + + // Set the private defaults + this._unsubscribeAll = new Subject(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + // Subscribe to config changes + this._fuseConfigService.config + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((config) => { + this.fuseConfig = config; + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } +} diff --git a/src/app/layout/vertical/basic/basic.module.ts b/src/app/layout/vertical/basic/basic.module.ts new file mode 100644 index 00000000..1f7a8949 --- /dev/null +++ b/src/app/layout/vertical/basic/basic.module.ts @@ -0,0 +1,38 @@ +import { NgModule } from '@angular/core'; +import { MatSidenavModule } from '@angular/material'; + +import { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components'; +import { FuseSharedModule } from '@fuse/shared.module'; + +import { ContentModule } from 'app/layout/blocks/content/content.module'; +import { FooterModule } from 'app/layout/blocks/footer/footer.module'; +import { NavbarModule } from 'app/layout/blocks/navbar/navbar.module'; +import { QuickPanelModule } from 'app/layout/blocks/quick-panel/quick-panel.module'; +import { ToolbarModule } from 'app/layout/blocks/toolbar/toolbar.module'; + +import { VerticalNavBasicLayoutComponent } from 'app/layout/vertical/basic/basic.component'; + +@NgModule({ + declarations: [ + VerticalNavBasicLayoutComponent + ], + imports : [ + MatSidenavModule, + + FuseSharedModule, + FuseSidebarModule, + FuseThemeOptionsModule, + + ContentModule, + FooterModule, + NavbarModule, + QuickPanelModule, + ToolbarModule + ], + exports : [ + VerticalNavBasicLayoutComponent + ] +}) +export class VerticalNavBasicLayoutModule +{ +} diff --git a/src/app/main/apps/academy/academy.module.ts b/src/app/main/apps/academy/academy.module.ts index e1935402..277cf520 100644 --- a/src/app/main/apps/academy/academy.module.ts +++ b/src/app/main/apps/academy/academy.module.ts @@ -5,22 +5,23 @@ import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, Mat import { FuseSharedModule } from '@fuse/shared.module'; -import { FuseAcademyCoursesComponent } from './courses/courses.component'; -import { FuseAcademyCourseComponent } from './course/course.component'; -import { AcademyCoursesService } from './courses.service'; -import { AcademyCourseService } from './course.service'; +import { AcademyCoursesComponent } from 'app/main/apps/academy/courses/courses.component'; +import { AcademyCourseComponent } from 'app/main/apps/academy/course/course.component'; +import { AcademyCoursesService } from 'app/main/apps/academy/courses.service'; +import { AcademyCourseService } from 'app/main/apps/academy/course.service'; + const routes = [ { path : 'courses', - component: FuseAcademyCoursesComponent, + component: AcademyCoursesComponent, resolve : { academy: AcademyCoursesService } }, { path : 'courses/:courseId/:courseSlug', - component: FuseAcademyCourseComponent, + component: AcademyCourseComponent, resolve : { academy: AcademyCourseService } @@ -33,8 +34,8 @@ const routes = [ @NgModule({ declarations: [ - FuseAcademyCoursesComponent, - FuseAcademyCourseComponent + AcademyCoursesComponent, + AcademyCourseComponent ], imports : [ RouterModule.forChild(routes), @@ -53,6 +54,6 @@ const routes = [ AcademyCourseService ] }) -export class FuseAcademyModule +export class AcademyModule { } diff --git a/src/app/main/apps/academy/course.service.ts b/src/app/main/apps/academy/course.service.ts index 1d007e82..024a65cd 100644 --- a/src/app/main/apps/academy/course.service.ts +++ b/src/app/main/apps/academy/course.service.ts @@ -8,12 +8,23 @@ export class AcademyCourseService implements Resolve { onCourseChanged: BehaviorSubject = new BehaviorSubject({}); - constructor(private http: HttpClient) + /** + * Constructor + * + * @param {HttpClient} _httpClient + */ + constructor( + private _httpClient: HttpClient + ) { } + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + /** - * The Academy App Main Resolver + * Resolver * * @param {ActivatedRouteSnapshot} route * @param {RouterStateSnapshot} state @@ -34,10 +45,17 @@ export class AcademyCourseService implements Resolve }); } + /** + * Get course + * + * @param courseId + * @param courseSlug + * @returns {Promise} + */ getCourse(courseId, courseSlug): Promise { return new Promise((resolve, reject) => { - this.http.get('api/academy-course/' + courseId + '/' + courseSlug) + this._httpClient.get('api/academy-course/' + courseId + '/' + courseSlug) .subscribe((response: any) => { this.onCourseChanged.next(response); resolve(response); diff --git a/src/app/main/apps/academy/course/course.component.ts b/src/app/main/apps/academy/course/course.component.ts index ab249eae..a3970fa5 100644 --- a/src/app/main/apps/academy/course/course.component.ts +++ b/src/app/main/apps/academy/course/course.component.ts @@ -1,71 +1,114 @@ import { AfterViewInit, ChangeDetectorRef, Component, OnDestroy, OnInit, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core'; -import { Subscription } from 'rxjs'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive'; import { fuseAnimations } from '@fuse/animations'; -import { AcademyCourseService } from '../course.service'; +import { AcademyCourseService } from 'app/main/apps/academy/course.service'; @Component({ - selector : 'fuse-academy-course', + selector : 'academy-course', templateUrl : './course.component.html', styleUrls : ['./course.component.scss'], encapsulation: ViewEncapsulation.None, animations : fuseAnimations }) -export class FuseAcademyCourseComponent implements OnInit, OnDestroy, AfterViewInit +export class AcademyCourseComponent implements OnInit, OnDestroy, AfterViewInit { + animationDirection: 'left' | 'right' | 'none'; course: any; - courseSubscription: Subscription; - currentStep = 0; - courseStepContent; - animationDirection: 'left' | 'right' | 'none' = 'none'; - @ViewChildren(FusePerfectScrollbarDirective) fuseScrollbarDirectives: QueryList; + courseStepContent: any; + currentStep: number; + @ViewChildren(FusePerfectScrollbarDirective) + fuseScrollbarDirectives: QueryList; + + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {AcademyCourseService} _academyCourseService + * @param {ChangeDetectorRef} _changeDetectorRef + */ constructor( - private courseService: AcademyCourseService, - private changeDetectorRef: ChangeDetectorRef + private _academyCourseService: AcademyCourseService, + private _changeDetectorRef: ChangeDetectorRef ) { + // Set the defaults + this.animationDirection = 'none'; + this.currentStep = 0; + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { // Subscribe to courses - this.courseSubscription = - this.courseService.onCourseChanged - .subscribe(course => { - this.course = course; - }); + this._academyCourseService.onCourseChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(course => { + this.course = course; + }); } - ngAfterViewInit() + /** + * After view init + */ + ngAfterViewInit(): void { this.courseStepContent = this.fuseScrollbarDirectives.find((fuseScrollbarDirective) => { - return fuseScrollbarDirective.element.nativeElement.id === 'course-step-content'; + return fuseScrollbarDirective.elementRef.nativeElement.id === 'course-step-content'; }); } - ngOnDestroy() + /** + * On destroy + */ + ngOnDestroy(): void { - this.courseSubscription.unsubscribe(); + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); } - gotoStep(step) + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Go to step + * + * @param step + */ + gotoStep(step): void { // Decide the animation direction this.animationDirection = this.currentStep < step ? 'left' : 'right'; // Run change detection so the change // in the animation direction registered - this.changeDetectorRef.detectChanges(); + this._changeDetectorRef.detectChanges(); // Set the current step this.currentStep = step; } - gotoNextStep() + /** + * Go to next step + */ + gotoNextStep(): void { if ( this.currentStep === this.course.totalSteps - 1 ) { @@ -77,13 +120,16 @@ export class FuseAcademyCourseComponent implements OnInit, OnDestroy, AfterViewI // Run change detection so the change // in the animation direction registered - this.changeDetectorRef.detectChanges(); + this._changeDetectorRef.detectChanges(); // Increase the current step this.currentStep++; } - gotoPreviousStep() + /** + * Go to previous step + */ + gotoPreviousStep(): void { if ( this.currentStep === 0 ) { @@ -95,7 +141,7 @@ export class FuseAcademyCourseComponent implements OnInit, OnDestroy, AfterViewI // Run change detection so the change // in the animation direction registered - this.changeDetectorRef.detectChanges(); + this._changeDetectorRef.detectChanges(); // Decrease the current step this.currentStep--; diff --git a/src/app/main/apps/academy/courses.service.ts b/src/app/main/apps/academy/courses.service.ts index 59356eca..5f8776cb 100644 --- a/src/app/main/apps/academy/courses.service.ts +++ b/src/app/main/apps/academy/courses.service.ts @@ -9,12 +9,23 @@ export class AcademyCoursesService implements Resolve onCategoriesChanged: BehaviorSubject = new BehaviorSubject({}); onCoursesChanged: BehaviorSubject = new BehaviorSubject({}); - constructor(private http: HttpClient) + /** + * Constructor + * + * @param {HttpClient} _httpClient + */ + constructor( + private _httpClient: HttpClient + ) { } + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + /** - * The Academy App Main Resolver + * Resolver * * @param {ActivatedRouteSnapshot} route * @param {RouterStateSnapshot} state @@ -36,10 +47,15 @@ export class AcademyCoursesService implements Resolve }); } + /** + * Get categories + * + * @returns {Promise} + */ getCategories(): Promise { return new Promise((resolve, reject) => { - this.http.get('api/academy-categories') + this._httpClient.get('api/academy-categories') .subscribe((response: any) => { this.onCategoriesChanged.next(response); resolve(response); @@ -47,10 +63,15 @@ export class AcademyCoursesService implements Resolve }); } + /** + * Get courses + * + * @returns {Promise} + */ getCourses(): Promise { return new Promise((resolve, reject) => { - this.http.get('api/academy-courses') + this._httpClient.get('api/academy-courses') .subscribe((response: any) => { this.onCoursesChanged.next(response); resolve(response); diff --git a/src/app/main/apps/academy/courses/courses.component.ts b/src/app/main/apps/academy/courses/courses.component.ts index 58b82cfb..defd378d 100644 --- a/src/app/main/apps/academy/courses/courses.component.ts +++ b/src/app/main/apps/academy/courses/courses.component.ts @@ -1,59 +1,88 @@ import { Component, OnDestroy, OnInit } from '@angular/core'; -import { Subscription } from 'rxjs'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { fuseAnimations } from '@fuse/animations'; -import { AcademyCoursesService } from '../courses.service'; +import { AcademyCoursesService } from 'app/main/apps/academy/courses.service'; @Component({ - selector : 'fuse-academy-courses', + selector : 'academy-courses', templateUrl: './courses.component.html', styleUrls : ['./courses.component.scss'], - animations : fuseAnimations + animations : fuseAnimations }) -export class FuseAcademyCoursesComponent implements OnInit, OnDestroy +export class AcademyCoursesComponent implements OnInit, OnDestroy { categories: any[]; courses: any[]; coursesFilteredByCategory: any[]; filteredCourses: any[]; + currentCategory: string; + searchTerm: string; - categoriesSubscription: Subscription; - coursesSubscription: Subscription; - - currentCategory = 'all'; - searchTerm = ''; + // Private + private _unsubscribeAll: Subject; + /** + * Constructor + * + * @param {AcademyCoursesService} _academyCoursesService + */ constructor( - private coursesService: AcademyCoursesService + private _academyCoursesService: AcademyCoursesService ) { + // Set the defaults + this.currentCategory = 'all'; + this.searchTerm = ''; + + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { // Subscribe to categories - this.categoriesSubscription = - this.coursesService.onCategoriesChanged - .subscribe(categories => { - this.categories = categories; - }); + this._academyCoursesService.onCategoriesChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(categories => { + this.categories = categories; + }); // Subscribe to courses - this.coursesSubscription = - this.coursesService.onCoursesChanged - .subscribe(courses => { - this.filteredCourses = this.coursesFilteredByCategory = this.courses = courses; - }); + this._academyCoursesService.onCoursesChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(courses => { + this.filteredCourses = this.coursesFilteredByCategory = this.courses = courses; + }); } - ngOnDestroy() + /** + * On destroy + */ + ngOnDestroy(): void { - this.categoriesSubscription.unsubscribe(); - this.coursesSubscription.unsubscribe(); + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); } - filterCoursesByCategory() + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Filter courses by category + */ + filterCoursesByCategory(): void { // Filter if ( this.currentCategory === 'all' ) @@ -75,7 +104,10 @@ export class FuseAcademyCoursesComponent implements OnInit, OnDestroy this.filterCoursesByTerm(); } - filterCoursesByTerm() + /** + * Filter courses by term + */ + filterCoursesByTerm(): void { const searchTerm = this.searchTerm.toLowerCase(); diff --git a/src/app/main/apps/apps.module.ts b/src/app/main/apps/apps.module.ts index 63671052..98a60a34 100644 --- a/src/app/main/apps/apps.module.ts +++ b/src/app/main/apps/apps.module.ts @@ -1,18 +1,16 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { FuseAngularMaterialModule } from '../components/angular-material/angular-material.module'; - import { FuseSharedModule } from '@fuse/shared.module'; const routes = [ { path : 'dashboards/analytics', - loadChildren: './dashboards/analytics/analytics.module#FuseAnalyticsDashboardModule' + loadChildren: './dashboards/analytics/analytics.module#AnalyticsDashboardModule' }, { path : 'dashboards/project', - loadChildren: './dashboards/project/project.module#FuseProjectDashboardModule' + loadChildren: './dashboards/project/project.module#ProjectDashboardModule' }, { path : 'mail', @@ -24,19 +22,19 @@ const routes = [ }, { path : 'chat', - loadChildren: './chat/chat.module#FuseChatModule' + loadChildren: './chat/chat.module#ChatModule' }, { path : 'calendar', - loadChildren: './calendar/calendar.module#FuseCalendarModule' + loadChildren: './calendar/calendar.module#CalendarModule' }, { path : 'e-commerce', - loadChildren: './e-commerce/e-commerce.module#FuseEcommerceModule' + loadChildren: './e-commerce/e-commerce.module#EcommerceModule' }, { path : 'academy', - loadChildren: './academy/academy.module#FuseAcademyModule' + loadChildren: './academy/academy.module#AcademyModule' }, { path : 'todo', @@ -44,11 +42,11 @@ const routes = [ }, { path : 'file-manager', - loadChildren: './file-manager/file-manager.module#FuseFileManagerModule' + loadChildren: './file-manager/file-manager.module#FileManagerModule' }, { path : 'contacts', - loadChildren: './contacts/contacts.module#FuseContactsModule' + loadChildren: './contacts/contacts.module#ContactsModule' }, { path : 'scrumboard', @@ -58,12 +56,10 @@ const routes = [ @NgModule({ imports : [ - FuseSharedModule, RouterModule.forChild(routes), - FuseAngularMaterialModule - ], - declarations: [] + FuseSharedModule + ] }) -export class FuseAppsModule +export class AppsModule { } diff --git a/src/app/main/apps/calendar/calendar.component.ts b/src/app/main/apps/calendar/calendar.component.ts index 998bab05..94074ddd 100644 --- a/src/app/main/apps/calendar/calendar.component.ts +++ b/src/app/main/apps/calendar/calendar.component.ts @@ -8,34 +8,35 @@ import { CalendarEvent, CalendarEventAction, CalendarEventTimesChangedEvent, Cal import { FuseConfirmDialogComponent } from '@fuse/components/confirm-dialog/confirm-dialog.component'; import { fuseAnimations } from '@fuse/animations'; -import { FuseCalendarEventFormDialogComponent } from './event-form/event-form.component'; -import { CalendarEventModel } from './event.model'; -import { CalendarService } from './calendar.service'; +import { CalendarService } from 'app/main/apps/calendar/calendar.service'; +import { CalendarEventModel } from 'app/main/apps/calendar/event.model'; +import { CalendarEventFormDialogComponent } from 'app/main/apps/calendar/event-form/event-form.component'; @Component({ - selector : 'fuse-calendar', + selector : 'calendar', templateUrl : './calendar.component.html', styleUrls : ['./calendar.component.scss'], encapsulation: ViewEncapsulation.None, animations : fuseAnimations }) -export class FuseCalendarComponent implements OnInit +export class CalendarComponent implements OnInit { + actions: CalendarEventAction[]; + activeDayIsOpen: boolean; + confirmDialogRef: MatDialogRef; + dialogRef: any; + events: CalendarEvent[]; + refresh: Subject = new Subject(); + selectedDay: any; view: string; viewDate: Date; - events: CalendarEvent[]; - public actions: CalendarEventAction[]; - activeDayIsOpen: boolean; - refresh: Subject = new Subject(); - dialogRef: any; - confirmDialogRef: MatDialogRef; - selectedDay: any; constructor( - public dialog: MatDialog, - public calendarService: CalendarService + private _matDialog: MatDialog, + private _calendarService: CalendarService ) { + // Set the defaults this.view = 'month'; this.viewDate = new Date(); this.activeDayIsOpen = true; @@ -62,29 +63,41 @@ export class FuseCalendarComponent implements OnInit this.setEvents(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { /** * Watch re-render-refresh for updating db */ this.refresh.subscribe(updateDB => { - // console.warn('REFRESH'); if ( updateDB ) { - // console.warn('UPDATE DB'); - this.calendarService.updateEvents(this.events); + this._calendarService.updateEvents(this.events); } }); - this.calendarService.onEventsUpdated.subscribe(events => { + this._calendarService.onEventsUpdated.subscribe(events => { this.setEvents(); this.refresh.next(); }); } - setEvents() + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Set events + */ + setEvents(): void { - this.events = this.calendarService.events.map(item => { + this.events = this._calendarService.events.map(item => { item.actions = this.actions; return new CalendarEventModel(item); }); @@ -92,10 +105,11 @@ export class FuseCalendarComponent implements OnInit /** * Before View Renderer + * * @param {any} header * @param {any} body */ - beforeMonthViewRender({header, body}) + beforeMonthViewRender({header, body}): void { // console.info('beforeMonthViewRender'); /** @@ -118,6 +132,7 @@ export class FuseCalendarComponent implements OnInit /** * Day clicked + * * @param {MonthViewDay} day */ dayClicked(day: CalendarMonthViewDay): void @@ -144,6 +159,7 @@ export class FuseCalendarComponent implements OnInit /** * Event times changed * Event dropped or resized + * * @param {CalendarEvent} event * @param {Date} newStart * @param {Date} newEnd @@ -158,11 +174,12 @@ export class FuseCalendarComponent implements OnInit /** * Delete Event + * * @param event */ - deleteEvent(event) + deleteEvent(event): void { - this.confirmDialogRef = this.dialog.open(FuseConfirmDialogComponent, { + this.confirmDialogRef = this._matDialog.open(FuseConfirmDialogComponent, { disableClose: false }); @@ -182,14 +199,15 @@ export class FuseCalendarComponent implements OnInit /** * Edit Event + * * @param {string} action * @param {CalendarEvent} event */ - editEvent(action: string, event: CalendarEvent) + editEvent(action: string, event: CalendarEvent): void { const eventIndex = this.events.indexOf(event); - this.dialogRef = this.dialog.open(FuseCalendarEventFormDialogComponent, { + this.dialogRef = this._matDialog.open(CalendarEventFormDialogComponent, { panelClass: 'event-form-dialog', data : { event : event, @@ -233,7 +251,7 @@ export class FuseCalendarComponent implements OnInit */ addEvent(): void { - this.dialogRef = this.dialog.open(FuseCalendarEventFormDialogComponent, { + this.dialogRef = this._matDialog.open(CalendarEventFormDialogComponent, { panelClass: 'event-form-dialog', data : { action: 'new', diff --git a/src/app/main/apps/calendar/calendar.module.ts b/src/app/main/apps/calendar/calendar.module.ts index 769f78d5..e72231d6 100644 --- a/src/app/main/apps/calendar/calendar.module.ts +++ b/src/app/main/apps/calendar/calendar.module.ts @@ -1,22 +1,20 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; - import { MatButtonModule, MatDatepickerModule, MatFormFieldModule, MatIconModule, MatInputModule, MatSlideToggleModule, MatToolbarModule } from '@angular/material'; - -import { CalendarModule } from 'angular-calendar'; import { ColorPickerModule } from 'ngx-color-picker'; +import { CalendarModule as AngularCalendarModule } from 'angular-calendar'; import { FuseSharedModule } from '@fuse/shared.module'; import { FuseConfirmDialogModule } from '@fuse/components'; -import { CalendarService } from './calendar.service'; -import { FuseCalendarComponent } from './calendar.component'; -import { FuseCalendarEventFormDialogComponent } from './event-form/event-form.component'; +import { CalendarComponent } from 'app/main/apps/calendar/calendar.component'; +import { CalendarService } from 'app/main/apps/calendar/calendar.service'; +import { CalendarEventFormDialogComponent } from 'app/main/apps/calendar/event-form/event-form.component'; const routes: Routes = [ { path : '**', - component: FuseCalendarComponent, + component: CalendarComponent, children : [], resolve : { chat: CalendarService @@ -26,8 +24,8 @@ const routes: Routes = [ @NgModule({ declarations : [ - FuseCalendarComponent, - FuseCalendarEventFormDialogComponent + CalendarComponent, + CalendarEventFormDialogComponent ], imports : [ RouterModule.forChild(routes), @@ -40,7 +38,7 @@ const routes: Routes = [ MatSlideToggleModule, MatToolbarModule, - CalendarModule.forRoot(), + AngularCalendarModule.forRoot(), ColorPickerModule, FuseSharedModule, @@ -49,8 +47,10 @@ const routes: Routes = [ providers : [ CalendarService ], - entryComponents: [FuseCalendarEventFormDialogComponent] + entryComponents: [ + CalendarEventFormDialogComponent + ] }) -export class FuseCalendarModule +export class CalendarModule { } diff --git a/src/app/main/apps/calendar/calendar.service.ts b/src/app/main/apps/calendar/calendar.service.ts index bdd8e4d4..3d0554c3 100644 --- a/src/app/main/apps/calendar/calendar.service.ts +++ b/src/app/main/apps/calendar/calendar.service.ts @@ -9,11 +9,29 @@ export class CalendarService implements Resolve events: any; onEventsUpdated = new Subject(); - constructor(private http: HttpClient) + /** + * Constructor + * + * @param {HttpClient} _httpClient + */ + constructor( + private _httpClient: HttpClient + ) { } + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Resolver + * + * @param {ActivatedRouteSnapshot} route + * @param {RouterStateSnapshot} state + * @returns {Observable | Promise | any} + */ resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable | Promise | any { return new Promise((resolve, reject) => { @@ -28,11 +46,16 @@ export class CalendarService implements Resolve }); } - getEvents() + /** + * Get events + * + * @returns {Promise} + */ + getEvents(): Promise { return new Promise((resolve, reject) => { - this.http.get('api/calendar/events') + this._httpClient.get('api/calendar/events') .subscribe((response: any) => { this.events = response.data; this.onEventsUpdated.next(this.events); @@ -41,10 +64,16 @@ export class CalendarService implements Resolve }); } - updateEvents(events) + /** + * Update events + * + * @param events + * @returns {Promise} + */ + updateEvents(events): Promise { return new Promise((resolve, reject) => { - this.http.post('api/calendar/events', { + this._httpClient.post('api/calendar/events', { id : 'events', data: [...events] }) diff --git a/src/app/main/apps/calendar/event-form/event-form.component.ts b/src/app/main/apps/calendar/event-form/event-form.component.ts index 0730e7b9..95c4c181 100644 --- a/src/app/main/apps/calendar/event-form/event-form.component.ts +++ b/src/app/main/apps/calendar/event-form/event-form.component.ts @@ -1,11 +1,11 @@ import { Component, Inject, ViewEncapsulation } from '@angular/core'; import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material'; +import { CalendarEvent } from 'angular-calendar'; import { MatColors } from '@fuse/mat-colors'; -import { CalendarEvent } from 'angular-calendar'; -import { CalendarEventModel } from '../event.model'; +import { CalendarEventModel } from 'app/main/apps/calendar/event.model'; @Component({ selector : 'fuse-calendar-event-form-dialog', @@ -14,22 +14,29 @@ import { CalendarEventModel } from '../event.model'; encapsulation: ViewEncapsulation.None }) -export class FuseCalendarEventFormDialogComponent +export class CalendarEventFormDialogComponent { - event: CalendarEvent; - dialogTitle: string; - eventForm: FormGroup; action: string; + event: CalendarEvent; + eventForm: FormGroup; + dialogTitle: string; presetColors = MatColors.presets; + /** + * Constructor + * + * @param {MatDialogRef} dialogRef + * @param _data + * @param {FormBuilder} _formBuilder + */ constructor( - public dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) private data: any, - private formBuilder: FormBuilder + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) private _data: any, + private _formBuilder: FormBuilder ) { - this.event = data.event; - this.action = data.action; + this.event = _data.event; + this.action = _data.action; if ( this.action === 'edit' ) { @@ -39,27 +46,36 @@ export class FuseCalendarEventFormDialogComponent { this.dialogTitle = 'New Event'; this.event = new CalendarEventModel({ - start: data.date, - end : data.date + start: _data.date, + end : _data.date }); } this.eventForm = this.createEventForm(); } - createEventForm() + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Create the event form + * + * @returns {FormGroup} + */ + createEventForm(): FormGroup { return new FormGroup({ title : new FormControl(this.event.title), start : new FormControl(this.event.start), end : new FormControl(this.event.end), allDay: new FormControl(this.event.allDay), - color : this.formBuilder.group({ + color : this._formBuilder.group({ primary : new FormControl(this.event.color.primary), secondary: new FormControl(this.event.color.secondary) }), meta : - this.formBuilder.group({ + this._formBuilder.group({ location: new FormControl(this.event.meta.location), notes : new FormControl(this.event.meta.notes) }) diff --git a/src/app/main/apps/calendar/event.model.ts b/src/app/main/apps/calendar/event.model.ts index 6e121f2e..4fe605e6 100644 --- a/src/app/main/apps/calendar/event.model.ts +++ b/src/app/main/apps/calendar/event.model.ts @@ -23,6 +23,11 @@ export class CalendarEventModel notes: string }; + /** + * Constructor + * + * @param data + */ constructor(data?) { data = data || {}; diff --git a/src/app/main/apps/chat/chat-start/chat-start.component.ts b/src/app/main/apps/chat/chat-start/chat-start.component.ts index 2651c617..adc689ea 100644 --- a/src/app/main/apps/chat/chat-start/chat-start.component.ts +++ b/src/app/main/apps/chat/chat-start/chat-start.component.ts @@ -3,12 +3,12 @@ import { Component } from '@angular/core'; import { fuseAnimations } from '@fuse/animations'; @Component({ - selector : 'fuse-chat-start', + selector : 'chat-start', templateUrl: './chat-start.component.html', styleUrls : ['./chat-start.component.scss'], animations : fuseAnimations }) -export class FuseChatStartComponent +export class ChatStartComponent { constructor() { diff --git a/src/app/main/apps/chat/chat-view/chat-view.component.html b/src/app/main/apps/chat/chat-view/chat-view.component.html index 62e1e32b..747600d3 100644 --- a/src/app/main/apps/chat/chat-view/chat-view.component.html +++ b/src/app/main/apps/chat/chat-view/chat-view.component.html @@ -87,7 +87,7 @@ -
+
- + - +
+
diff --git a/src/app/main/apps/chat/chat-view/chat-view.component.scss b/src/app/main/apps/chat/chat-view/chat-view.component.scss index 362b701d..3d8efac0 100644 --- a/src/app/main/apps/chat/chat-view/chat-view.component.scss +++ b/src/app/main/apps/chat/chat-view/chat-view.component.scss @@ -99,7 +99,7 @@ } .chat-footer { - min-height: 64px; + min-height: 72px; max-height: 96px; background-color: #F3F4F5; color: rgba(0, 0, 0, 0.87); @@ -116,6 +116,7 @@ overflow: auto; max-height: 80px; transition: height 200ms ease; + &.grow { height: 80px; } diff --git a/src/app/main/apps/chat/chat-view/chat-view.component.ts b/src/app/main/apps/chat/chat-view/chat-view.component.ts index bf687945..4f40e8fe 100644 --- a/src/app/main/apps/chat/chat-view/chat-view.component.ts +++ b/src/app/main/apps/chat/chat-view/chat-view.component.ts @@ -1,16 +1,18 @@ -import { AfterViewInit, Component, OnInit, ViewChild, ViewChildren } from '@angular/core'; +import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild, ViewChildren } from '@angular/core'; import { NgForm } from '@angular/forms'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive'; -import { ChatService } from '../chat.service'; +import { ChatService } from 'app/main/apps/chat/chat.service'; @Component({ - selector : 'fuse-chat-view', + selector : 'chat-view', templateUrl: './chat-view.component.html', styleUrls : ['./chat-view.component.scss'] }) -export class FuseChatViewComponent implements OnInit, AfterViewInit +export class ChatViewComponent implements OnInit, OnDestroy, AfterViewInit { user: any; chat: any; @@ -18,18 +20,44 @@ export class FuseChatViewComponent implements OnInit, AfterViewInit contact: any; replyInput: any; selectedChat: any; - @ViewChild(FusePerfectScrollbarDirective) directiveScroll: FusePerfectScrollbarDirective; - @ViewChildren('replyInput') replyInputField; - @ViewChild('replyForm') replyForm: NgForm; - constructor(private chatService: ChatService) + @ViewChild(FusePerfectScrollbarDirective) + directiveScroll: FusePerfectScrollbarDirective; + + @ViewChildren('replyInput') + replyInputField; + + @ViewChild('replyForm') + replyForm: NgForm; + + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {ChatService} _chatService + */ + constructor( + private _chatService: ChatService + ) { + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.user = this.chatService.user; - this.chatService.onChatSelected + this.user = this._chatService.user; + this._chatService.onChatSelected + .pipe(takeUntil(this._unsubscribeAll)) .subscribe(chatData => { if ( chatData ) { @@ -41,18 +69,41 @@ export class FuseChatViewComponent implements OnInit, AfterViewInit }); } - ngAfterViewInit() + /** + * After view init + */ + ngAfterViewInit(): void { this.replyInput = this.replyInputField.first.nativeElement; this.readyToReply(); } - selectContact() + /** + * On destroy + */ + ngOnDestroy(): void { - this.chatService.selectContact(this.contact); + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); } - readyToReply() + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Select contact + */ + selectContact(): void + { + this._chatService.selectContact(this.contact); + } + + /** + * Ready to reply + */ + readyToReply(): void { setTimeout(() => { this.replyForm.reset(); @@ -62,14 +113,22 @@ export class FuseChatViewComponent implements OnInit, AfterViewInit } - focusReplyInput() + /** + * Focus to the reply input + */ + focusReplyInput(): void { setTimeout(() => { this.replyInput.focus(); }); } - scrollToBottom(speed?: number) + /** + * Scroll to the bottom + * + * @param {number} speed + */ + scrollToBottom(speed?: number): void { speed = speed || 400; if ( this.directiveScroll ) @@ -82,7 +141,10 @@ export class FuseChatViewComponent implements OnInit, AfterViewInit } } - reply(event) + /** + * Reply + */ + reply(): void { // Message const message = { @@ -95,9 +157,8 @@ export class FuseChatViewComponent implements OnInit, AfterViewInit this.dialog.push(message); // Update the server - this.chatService.updateDialog(this.selectedChat.chatId, this.dialog).then(response => { + this._chatService.updateDialog(this.selectedChat.chatId, this.dialog).then(response => { this.readyToReply(); }); - } } diff --git a/src/app/main/apps/chat/chat.component.html b/src/app/main/apps/chat/chat.component.html index 2a903f8f..6967d337 100644 --- a/src/app/main/apps/chat/chat.component.html +++ b/src/app/main/apps/chat/chat.component.html @@ -15,20 +15,20 @@ - + - + - + - + diff --git a/src/app/main/apps/chat/chat.component.ts b/src/app/main/apps/chat/chat.component.ts index 31005479..fba6d3cb 100644 --- a/src/app/main/apps/chat/chat.component.ts +++ b/src/app/main/apps/chat/chat.component.ts @@ -1,30 +1,61 @@ -import { Component, OnInit, ViewEncapsulation } from '@angular/core'; +import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { fuseAnimations } from '@fuse/animations'; -import { ChatService } from './chat.service'; +import { ChatService } from 'app/main/apps/chat/chat.service'; @Component({ - selector : 'fuse-chat', + selector : 'chat', templateUrl : './chat.component.html', styleUrls : ['./chat.component.scss'], encapsulation: ViewEncapsulation.None, animations : fuseAnimations }) -export class FuseChatComponent implements OnInit +export class ChatComponent implements OnInit, OnDestroy { selectedChat: any; - constructor(private chatService: ChatService) + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {ChatService} _chatService + */ + constructor( + private _chatService: ChatService + ) { + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.chatService.onChatSelected + this._chatService.onChatSelected + .pipe(takeUntil(this._unsubscribeAll)) .subscribe(chatData => { this.selectedChat = chatData; }); } + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } } diff --git a/src/app/main/apps/chat/chat.module.ts b/src/app/main/apps/chat/chat.module.ts index 2b80c69b..a54b46e5 100644 --- a/src/app/main/apps/chat/chat.module.ts +++ b/src/app/main/apps/chat/chat.module.ts @@ -5,20 +5,20 @@ import { MatButtonModule, MatCardModule, MatFormFieldModule, MatIconModule, MatI import { FuseSharedModule } from '@fuse/shared.module'; -import { ChatService } from './chat.service'; -import { FuseChatComponent } from './chat.component'; -import { FuseChatViewComponent } from './chat-view/chat-view.component'; -import { FuseChatStartComponent } from './chat-start/chat-start.component'; -import { FuseChatChatsSidenavComponent } from './sidenavs/left/chats/chats.component'; -import { FuseChatUserSidenavComponent } from './sidenavs/left/user/user.component'; -import { FuseChatLeftSidenavComponent } from './sidenavs/left/left.component'; -import { FuseChatRightSidenavComponent } from './sidenavs/right/right.component'; -import { FuseChatContactSidenavComponent } from './sidenavs/right/contact/contact.component'; +import { ChatService } from 'app/main/apps/chat/chat.service'; +import { ChatComponent } from 'app/main/apps/chat/chat.component'; +import { ChatStartComponent } from 'app/main/apps/chat/chat-start/chat-start.component'; +import { ChatViewComponent } from 'app/main/apps/chat/chat-view/chat-view.component'; +import { ChatChatsSidenavComponent } from 'app/main/apps/chat/sidenavs/left/chats/chats.component'; +import { ChatUserSidenavComponent } from 'app/main/apps/chat/sidenavs/left/user/user.component'; +import { ChatLeftSidenavComponent } from 'app/main/apps/chat/sidenavs/left/left.component'; +import { ChatRightSidenavComponent } from 'app/main/apps/chat/sidenavs/right/right.component'; +import { ChatContactSidenavComponent } from 'app/main/apps/chat/sidenavs/right/contact/contact.component'; const routes: Routes = [ { path : '**', - component: FuseChatComponent, + component: ChatComponent, children : [], resolve : { chat: ChatService @@ -28,14 +28,14 @@ const routes: Routes = [ @NgModule({ declarations: [ - FuseChatComponent, - FuseChatViewComponent, - FuseChatStartComponent, - FuseChatChatsSidenavComponent, - FuseChatUserSidenavComponent, - FuseChatLeftSidenavComponent, - FuseChatRightSidenavComponent, - FuseChatContactSidenavComponent + ChatComponent, + ChatViewComponent, + ChatStartComponent, + ChatChatsSidenavComponent, + ChatUserSidenavComponent, + ChatLeftSidenavComponent, + ChatRightSidenavComponent, + ChatContactSidenavComponent ], imports : [ RouterModule.forChild(routes), @@ -57,6 +57,6 @@ const routes: Routes = [ ChatService ] }) -export class FuseChatModule +export class ChatModule { } diff --git a/src/app/main/apps/chat/sidenavs/left/chats/chats.component.ts b/src/app/main/apps/chat/sidenavs/left/chats/chats.component.ts index d2261bfd..98a8c3a6 100644 --- a/src/app/main/apps/chat/sidenavs/left/chats/chats.component.ts +++ b/src/app/main/apps/chat/sidenavs/left/chats/chats.component.ts @@ -1,72 +1,132 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { ObservableMedia } from '@angular/flex-layout'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { fuseAnimations } from '@fuse/animations'; import { FuseMatSidenavHelperService } from '@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.service'; -import { ChatService } from '../../../chat.service'; +import { ChatService } from 'app/main/apps/chat/chat.service'; @Component({ - selector : 'fuse-chat-chats-sidenav', + selector : 'chat-chats-sidenav', templateUrl: './chats.component.html', styleUrls : ['./chats.component.scss'], animations : fuseAnimations }) -export class FuseChatChatsSidenavComponent implements OnInit +export class ChatChatsSidenavComponent implements OnInit, OnDestroy { - user: any; chats: any[]; - contacts: any[]; chatSearch: any; - searchText = ''; + contacts: any[]; + searchText: string; + user: any; + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {ChatService} _chatService + * @param {FuseMatSidenavHelperService} _fuseMatSidenavHelperService + * @param {ObservableMedia} _observableMedia + */ constructor( - private chatService: ChatService, - private fuseMatSidenavService: FuseMatSidenavHelperService, - public media: ObservableMedia + private _chatService: ChatService, + private _fuseMatSidenavHelperService: FuseMatSidenavHelperService, + public _observableMedia: ObservableMedia ) { + // Set the defaults this.chatSearch = { name: '' }; + this.searchText = ''; + + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.user = this.chatService.user; - this.chats = this.chatService.chats; - this.contacts = this.chatService.contacts; + this.user = this._chatService.user; + this.chats = this._chatService.chats; + this.contacts = this._chatService.contacts; - this.chatService.onChatsUpdated.subscribe(updatedChats => { - this.chats = updatedChats; - }); + this._chatService.onChatsUpdated + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(updatedChats => { + this.chats = updatedChats; + }); - this.chatService.onUserUpdated.subscribe(updatedUser => { - this.user = updatedUser; - }); + this._chatService.onUserUpdated + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(updatedUser => { + this.user = updatedUser; + }); } - getChat(contact) + /** + * On destroy + */ + ngOnDestroy(): void { - this.chatService.getChat(contact); + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } - if ( !this.media.isActive('gt-md') ) + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Get chat + * + * @param contact + */ + getChat(contact): void + { + this._chatService.getChat(contact); + + if ( !this._observableMedia.isActive('gt-md') ) { - this.fuseMatSidenavService.getSidenav('chat-left-sidenav').toggle(); + this._fuseMatSidenavHelperService.getSidenav('chat-left-sidenav').toggle(); } } - setUserStatus(status) + /** + * Set user status + * + * @param status + */ + setUserStatus(status): void { - this.chatService.setUserStatus(status); + this._chatService.setUserStatus(status); } - changeLeftSidenavView(view) + /** + * Change left sidenav view + * + * @param view + */ + changeLeftSidenavView(view): void { - this.chatService.onLeftSidenavViewChanged.next(view); + this._chatService.onLeftSidenavViewChanged.next(view); } - logout() + /** + * Logout + */ + logout(): void { console.log('logout triggered'); } diff --git a/src/app/main/apps/chat/sidenavs/left/left.component.html b/src/app/main/apps/chat/sidenavs/left/left.component.html index 5595a45f..3c23e7eb 100644 --- a/src/app/main/apps/chat/sidenavs/left/left.component.html +++ b/src/app/main/apps/chat/sidenavs/left/left.component.html @@ -1,11 +1,11 @@
- - + + - - + +
diff --git a/src/app/main/apps/chat/sidenavs/left/left.component.ts b/src/app/main/apps/chat/sidenavs/left/left.component.ts index 0854b6b3..a3f988a3 100644 --- a/src/app/main/apps/chat/sidenavs/left/left.component.ts +++ b/src/app/main/apps/chat/sidenavs/left/left.component.ts @@ -1,29 +1,63 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { fuseAnimations } from '@fuse/animations'; -import { ChatService } from '../../chat.service'; +import { ChatService } from 'app/main/apps/chat/chat.service'; @Component({ - selector : 'fuse-chat-left-sidenav', + selector : 'chat-left-sidenav', templateUrl: './left.component.html', styleUrls : ['./left.component.scss'], animations : fuseAnimations }) -export class FuseChatLeftSidenavComponent implements OnInit +export class ChatLeftSidenavComponent implements OnInit, OnDestroy { view: string; - constructor(private chatService: ChatService) + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {ChatService} _chatService + */ + constructor( + private _chatService: ChatService + ) { + // Set the defaults this.view = 'chats'; + + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.chatService.onLeftSidenavViewChanged.subscribe(view => { - this.view = view; - }); + this._chatService.onLeftSidenavViewChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(view => { + this.view = view; + }); } + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } } diff --git a/src/app/main/apps/chat/sidenavs/left/user/user.component.ts b/src/app/main/apps/chat/sidenavs/left/user/user.component.ts index 7250c2b8..8cbf54e1 100644 --- a/src/app/main/apps/chat/sidenavs/left/user/user.component.ts +++ b/src/app/main/apps/chat/sidenavs/left/user/user.component.ts @@ -1,48 +1,87 @@ import { Component, OnDestroy, OnInit } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; -import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; +import { Subject } from 'rxjs'; +import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators'; -import { ChatService } from '../../../chat.service'; +import { ChatService } from 'app/main/apps/chat/chat.service'; @Component({ - selector : 'fuse-chat-user-sidenav', + selector : 'chat-user-sidenav', templateUrl: './user.component.html', styleUrls : ['./user.component.scss'] }) -export class FuseChatUserSidenavComponent implements OnInit, OnDestroy +export class ChatUserSidenavComponent implements OnInit, OnDestroy { user: any; - onFormChange: any; userForm: FormGroup; - constructor(private chatService: ChatService) + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {ChatService} _chatService + */ + constructor( + private _chatService: ChatService + ) { - this.user = this.chatService.user; + // Set the private defaults + this._unsubscribeAll = new Subject(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + this.user = this._chatService.user; + this.userForm = new FormGroup({ mood : new FormControl(this.user.mood), status: new FormControl(this.user.status) }); + + this.userForm.valueChanges + .pipe( + takeUntil(this._unsubscribeAll), + debounceTime(500), + distinctUntilChanged() + ) + .subscribe(data => { + this.user.mood = data.mood; + this.user.status = data.status; + this._chatService.updateUserData(this.user); + }); } - ngOnInit() + /** + * On destroy + */ + ngOnDestroy(): void { - this.onFormChange = this.userForm.valueChanges.pipe( - debounceTime(500), - distinctUntilChanged() - ).subscribe(data => { - this.user.mood = data.mood; - this.user.status = data.status; - this.chatService.updateUserData(this.user); - }); + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); } - changeLeftSidenavView(view) + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Change left sidenav view + * + * @param view + */ + changeLeftSidenavView(view): void { - this.chatService.onLeftSidenavViewChanged.next(view); + this._chatService.onLeftSidenavViewChanged.next(view); } - ngOnDestroy() - { - this.onFormChange.unsubscribe(); - } } diff --git a/src/app/main/apps/chat/sidenavs/right/contact/contact.component.ts b/src/app/main/apps/chat/sidenavs/right/contact/contact.component.ts index be6a10a2..85f25438 100644 --- a/src/app/main/apps/chat/sidenavs/right/contact/contact.component.ts +++ b/src/app/main/apps/chat/sidenavs/right/contact/contact.component.ts @@ -1,26 +1,57 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; -import { ChatService } from '../../../chat.service'; +import { ChatService } from 'app/main/apps/chat/chat.service'; @Component({ - selector : 'fuse-chat-contact-sidenav', + selector : 'chat-contact-sidenav', templateUrl: './contact.component.html', styleUrls : ['./contact.component.scss'] }) -export class FuseChatContactSidenavComponent implements OnInit +export class ChatContactSidenavComponent implements OnInit, OnDestroy { contact: any; - constructor(private chatService: ChatService) - { + // Private + private _unsubscribeAll: Subject; + /** + * Constructor + * + * @param {ChatService} _chatService + */ + constructor( + private _chatService: ChatService + ) + { + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.chatService.onContactSelected.subscribe(contact => { + this._chatService.onContactSelected + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(contact => { this.contact = contact; }); } + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } } diff --git a/src/app/main/apps/chat/sidenavs/right/right.component.html b/src/app/main/apps/chat/sidenavs/right/right.component.html index 35e7b937..1b28582a 100644 --- a/src/app/main/apps/chat/sidenavs/right/right.component.html +++ b/src/app/main/apps/chat/sidenavs/right/right.component.html @@ -1,8 +1,8 @@
- - + +
diff --git a/src/app/main/apps/chat/sidenavs/right/right.component.ts b/src/app/main/apps/chat/sidenavs/right/right.component.ts index 7ed97497..cb08c0c6 100644 --- a/src/app/main/apps/chat/sidenavs/right/right.component.ts +++ b/src/app/main/apps/chat/sidenavs/right/right.component.ts @@ -1,29 +1,59 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { fuseAnimations } from '@fuse/animations'; -import { ChatService } from '../../chat.service'; +import { ChatService } from 'app/main/apps/chat/chat.service'; @Component({ - selector : 'fuse-chat-right-sidenav', + selector : 'chat-right-sidenav', templateUrl: './right.component.html', styleUrls : ['./right.component.scss'], animations : fuseAnimations }) -export class FuseChatRightSidenavComponent implements OnInit +export class ChatRightSidenavComponent implements OnInit, OnDestroy { view: string; - constructor(private chatService: ChatService) + // Private + private _unsubscribeAll: Subject; + + constructor( + private _chatService: ChatService + ) { + // Set the defaults this.view = 'contact'; + + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.chatService.onRightSidenavViewChanged.subscribe(view => { - this.view = view; - }); + this._chatService.onRightSidenavViewChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(view => { + this.view = view; + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); } } diff --git a/src/app/main/apps/contacts/contact-form/contact-form.component.ts b/src/app/main/apps/contacts/contact-form/contact-form.component.ts index 767024b5..81cb180e 100644 --- a/src/app/main/apps/contacts/contact-form/contact-form.component.ts +++ b/src/app/main/apps/contacts/contact-form/contact-form.component.ts @@ -2,37 +2,41 @@ import { Component, Inject, ViewEncapsulation } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material'; -import { CalendarEvent } from 'angular-calendar'; - -import { Contact } from '../contact.model'; +import { Contact } from 'app/main/apps/contacts/contact.model'; @Component({ - selector : 'fuse-contacts-contact-form-dialog', + selector : 'contacts-contact-form-dialog', templateUrl : './contact-form.component.html', styleUrls : ['./contact-form.component.scss'], encapsulation: ViewEncapsulation.None }) -export class FuseContactsContactFormDialogComponent +export class ContactsContactFormDialogComponent { - event: CalendarEvent; - dialogTitle: string; - contactForm: FormGroup; action: string; contact: Contact; + contactForm: FormGroup; + dialogTitle: string; + /** + * Constructor + * + * @param {MatDialogRef} _dialogRef + * @param _data + * @param {FormBuilder} _formBuilder + */ constructor( - public dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) private data: any, - private formBuilder: FormBuilder + private _dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) private _data: any, + private _formBuilder: FormBuilder ) { - this.action = data.action; + this.action = _data.action; if ( this.action === 'edit' ) { this.dialogTitle = 'Edit Contact'; - this.contact = data.contact; + this.contact = _data.contact; } else { @@ -43,9 +47,18 @@ export class FuseContactsContactFormDialogComponent this.contactForm = this.createContactForm(); } - createContactForm() + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Create contact form + * + * @returns {FormGroup} + */ + createContactForm(): FormGroup { - return this.formBuilder.group({ + return this._formBuilder.group({ id : [this.contact.id], name : [this.contact.name], lastName: [this.contact.lastName], diff --git a/src/app/main/apps/contacts/contact-list/contact-list.component.scss b/src/app/main/apps/contacts/contact-list/contact-list.component.scss index 14510b4a..a8b26b96 100644 --- a/src/app/main/apps/contacts/contact-list/contact-list.component.scss +++ b/src/app/main/apps/contacts/contact-list/contact-list.component.scss @@ -1,6 +1,6 @@ @import "src/@fuse/scss/fuse"; -fuse-contacts-contact-list { +contacts-contact-list { display: flex; flex: 1 1 auto; width: 100%; diff --git a/src/app/main/apps/contacts/contact-list/contact-list.component.ts b/src/app/main/apps/contacts/contact-list/contact-list.component.ts index b41d1693..2443be7a 100644 --- a/src/app/main/apps/contacts/contact-list/contact-list.component.ts +++ b/src/app/main/apps/contacts/contact-list/contact-list.component.ts @@ -2,24 +2,26 @@ import { Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewEncapsulation import { FormGroup } from '@angular/forms'; import { MatDialog, MatDialogRef } from '@angular/material'; import { DataSource } from '@angular/cdk/collections'; -import { Observable, Subscription } from 'rxjs'; +import { Observable, Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { fuseAnimations } from '@fuse/animations'; import { FuseConfirmDialogComponent } from '@fuse/components/confirm-dialog/confirm-dialog.component'; -import { FuseContactsContactFormDialogComponent } from '../contact-form/contact-form.component'; -import { ContactsService } from '../contacts.service'; +import { ContactsService } from 'app/main/apps/contacts/contacts.service'; +import { ContactsContactFormDialogComponent } from 'app/main/apps/contacts/contact-form/contact-form.component'; @Component({ - selector : 'fuse-contacts-contact-list', + selector : 'contacts-contact-list', templateUrl : './contact-list.component.html', styleUrls : ['./contact-list.component.scss'], encapsulation: ViewEncapsulation.None, animations : fuseAnimations }) -export class FuseContactsContactListComponent implements OnInit, OnDestroy +export class ContactsContactListComponent implements OnInit, OnDestroy { - @ViewChild('dialogContent') dialogContent: TemplateRef; + @ViewChild('dialogContent') + dialogContent: TemplateRef; contacts: any; user: any; @@ -27,24 +29,41 @@ export class FuseContactsContactListComponent implements OnInit, OnDestroy displayedColumns = ['checkbox', 'avatar', 'name', 'email', 'phone', 'jobTitle', 'buttons']; selectedContacts: any[]; checkboxes: {}; - - onContactsChangedSubscription: Subscription; - onFilterChangedSubscription: Subscription; - onSelectedContactsChangedSubscription: Subscription; - onUserDataChangedSubscription: Subscription; - dialogRef: any; - confirmDialogRef: MatDialogRef; + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {ContactsService} _contactsService + * @param {MatDialog} _matDialog + */ constructor( - private contactsService: ContactsService, - public dialog: MatDialog + private _contactsService: ContactsService, + public _matDialog: MatDialog ) { - this.onContactsChangedSubscription = - this.contactsService.onContactsChanged.subscribe(contacts => { + // Set the private defaults + this._unsubscribeAll = new Subject(); + } + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + this.dataSource = new FilesDataSource(this._contactsService); + + this._contactsService.onContactsChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(contacts => { this.contacts = contacts; this.checkboxes = {}; @@ -53,8 +72,9 @@ export class FuseContactsContactListComponent implements OnInit, OnDestroy }); }); - this.onSelectedContactsChangedSubscription = - this.contactsService.onSelectedContactsChanged.subscribe(selectedContacts => { + this._contactsService.onSelectedContactsChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(selectedContacts => { for ( const id in this.checkboxes ) { if ( !this.checkboxes.hasOwnProperty(id) ) @@ -67,33 +87,41 @@ export class FuseContactsContactListComponent implements OnInit, OnDestroy this.selectedContacts = selectedContacts; }); - this.onUserDataChangedSubscription = - this.contactsService.onUserDataChanged.subscribe(user => { + this._contactsService.onUserDataChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(user => { this.user = user; }); - this.onFilterChangedSubscription = - this.contactsService.onFilterChanged.subscribe(() => { - this.contactsService.deselectContacts(); + this._contactsService.onFilterChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(() => { + this._contactsService.deselectContacts(); }); } - ngOnInit() + /** + * On destroy + */ + ngOnDestroy(): void { - this.dataSource = new FilesDataSource(this.contactsService); + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); } - ngOnDestroy() - { - this.onContactsChangedSubscription.unsubscribe(); - this.onFilterChangedSubscription.unsubscribe(); - this.onSelectedContactsChangedSubscription.unsubscribe(); - this.onUserDataChangedSubscription.unsubscribe(); - } + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- - editContact(contact) + /** + * Edit contact + * + * @param contact + */ + editContact(contact): void { - this.dialogRef = this.dialog.open(FuseContactsContactFormDialogComponent, { + this.dialogRef = this._matDialog.open(ContactsContactFormDialogComponent, { panelClass: 'contact-form-dialog', data : { contact: contact, @@ -116,7 +144,7 @@ export class FuseContactsContactListComponent implements OnInit, OnDestroy */ case 'save': - this.contactsService.updateContact(formData.getRawValue()); + this._contactsService.updateContact(formData.getRawValue()); break; /** @@ -134,9 +162,9 @@ export class FuseContactsContactListComponent implements OnInit, OnDestroy /** * Delete Contact */ - deleteContact(contact) + deleteContact(contact): void { - this.confirmDialogRef = this.dialog.open(FuseConfirmDialogComponent, { + this.confirmDialogRef = this._matDialog.open(FuseConfirmDialogComponent, { disableClose: false }); @@ -145,19 +173,29 @@ export class FuseContactsContactListComponent implements OnInit, OnDestroy this.confirmDialogRef.afterClosed().subscribe(result => { if ( result ) { - this.contactsService.deleteContact(contact); + this._contactsService.deleteContact(contact); } this.confirmDialogRef = null; }); } - onSelectedChange(contactId) + /** + * On selected change + * + * @param contactId + */ + onSelectedChange(contactId): void { - this.contactsService.toggleSelectedContact(contactId); + this._contactsService.toggleSelectedContact(contactId); } - toggleStar(contactId) + /** + * Toggle star + * + * @param contactId + */ + toggleStar(contactId): void { if ( this.user.starred.includes(contactId) ) { @@ -168,24 +206,37 @@ export class FuseContactsContactListComponent implements OnInit, OnDestroy this.user.starred.push(contactId); } - this.contactsService.updateUserData(this.user); + this._contactsService.updateUserData(this.user); } } export class FilesDataSource extends DataSource { - constructor(private contactsService: ContactsService) + /** + * Constructor + * + * @param {ContactsService} _contactsService + */ + constructor( + private _contactsService: ContactsService + ) { super(); } - /** Connect function called by the table to retrieve one stream containing the data to render. */ + /** + * Connect function called by the table to retrieve one stream containing the data to render. + * @returns {Observable} + */ connect(): Observable { - return this.contactsService.onContactsChanged; + return this._contactsService.onContactsChanged; } - disconnect() + /** + * Disconnect + */ + disconnect(): void { } } diff --git a/src/app/main/apps/contacts/contact.model.ts b/src/app/main/apps/contacts/contact.model.ts index efc5e687..3a5df6c6 100644 --- a/src/app/main/apps/contacts/contact.model.ts +++ b/src/app/main/apps/contacts/contact.model.ts @@ -15,6 +15,11 @@ export class Contact birthday: string; notes: string; + /** + * Constructor + * + * @param contact + */ constructor(contact) { { diff --git a/src/app/main/apps/contacts/contacts.component.html b/src/app/main/apps/contacts/contacts.component.html index 56f9661c..8c7b73f4 100644 --- a/src/app/main/apps/contacts/contacts.component.html +++ b/src/app/main/apps/contacts/contacts.component.html @@ -36,7 +36,7 @@ - + @@ -45,7 +45,7 @@ - + @@ -56,7 +56,7 @@
- +
diff --git a/src/app/main/apps/contacts/contacts.component.ts b/src/app/main/apps/contacts/contacts.component.ts index da705aad..dea74ea6 100644 --- a/src/app/main/apps/contacts/contacts.component.ts +++ b/src/app/main/apps/contacts/contacts.component.ts @@ -1,40 +1,94 @@ import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; import { MatDialog } from '@angular/material'; - -import { Subscription } from 'rxjs'; -import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; +import { Subject } from 'rxjs'; +import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators'; import { fuseAnimations } from '@fuse/animations'; -import { FuseContactsContactFormDialogComponent } from './contact-form/contact-form.component'; -import { ContactsService } from './contacts.service'; +import { ContactsService } from 'app/main/apps/contacts/contacts.service'; +import { ContactsContactFormDialogComponent } from 'app/main/apps/contacts/contact-form/contact-form.component'; @Component({ - selector : 'fuse-contacts', + selector : 'contacts', templateUrl : './contacts.component.html', styleUrls : ['./contacts.component.scss'], encapsulation: ViewEncapsulation.None, animations : fuseAnimations }) -export class FuseContactsComponent implements OnInit, OnDestroy +export class ContactsComponent implements OnInit, OnDestroy { + dialogRef: any; hasSelectedContacts: boolean; searchInput: FormControl; - dialogRef: any; - onSelectedContactsChangedSubscription: Subscription; + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {ContactsService} _contactsService + * @param {MatDialog} _matDialog + */ constructor( - private contactsService: ContactsService, - public dialog: MatDialog + private _contactsService: ContactsService, + public _matDialog: MatDialog ) { + // Set the defaults this.searchInput = new FormControl(''); + + // Set the private defaults + this._unsubscribeAll = new Subject(); } - newContact() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.dialogRef = this.dialog.open(FuseContactsContactFormDialogComponent, { + this._contactsService.onSelectedContactsChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(selectedContacts => { + this.hasSelectedContacts = selectedContacts.length > 0; + }); + + this.searchInput.valueChanges + .pipe( + takeUntil(this._unsubscribeAll), + debounceTime(300), + distinctUntilChanged() + ) + .subscribe(searchText => { + this._contactsService.onSearchTextChanged.next(searchText); + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * New contact + */ + newContact(): void + { + this.dialogRef = this._matDialog.open(ContactsContactFormDialogComponent, { panelClass: 'contact-form-dialog', data : { action: 'new' @@ -48,32 +102,7 @@ export class FuseContactsComponent implements OnInit, OnDestroy return; } - this.contactsService.updateContact(response.getRawValue()); - + this._contactsService.updateContact(response.getRawValue()); }); - - } - - ngOnInit() - { - this.onSelectedContactsChangedSubscription = - this.contactsService.onSelectedContactsChanged - .subscribe(selectedContacts => { - this.hasSelectedContacts = selectedContacts.length > 0; - }); - - this.searchInput.valueChanges - .pipe( - debounceTime(300), - distinctUntilChanged() - ) - .subscribe(searchText => { - this.contactsService.onSearchTextChanged.next(searchText); - }); - } - - ngOnDestroy() - { - this.onSelectedContactsChangedSubscription.unsubscribe(); } } diff --git a/src/app/main/apps/contacts/contacts.module.ts b/src/app/main/apps/contacts/contacts.module.ts index fd3a1a5a..e1125816 100644 --- a/src/app/main/apps/contacts/contacts.module.ts +++ b/src/app/main/apps/contacts/contacts.module.ts @@ -7,17 +7,17 @@ import { MatButtonModule, MatCheckboxModule, MatDatepickerModule, MatFormFieldMo import { FuseSharedModule } from '@fuse/shared.module'; import { FuseConfirmDialogModule } from '@fuse/components'; -import { FuseContactsMainSidenavComponent } from './sidenavs/main/main.component'; -import { FuseContactsComponent } from './contacts.component'; -import { ContactsService } from './contacts.service'; -import { FuseContactsContactListComponent } from './contact-list/contact-list.component'; -import { FuseContactsSelectedBarComponent } from './selected-bar/selected-bar.component'; -import { FuseContactsContactFormDialogComponent } from './contact-form/contact-form.component'; +import { ContactsComponent } from 'app/main/apps/contacts/contacts.component'; +import { ContactsService } from 'app/main/apps/contacts/contacts.service'; +import { ContactsContactListComponent } from 'app/main/apps/contacts/contact-list/contact-list.component'; +import { ContactsSelectedBarComponent } from 'app/main/apps/contacts/selected-bar/selected-bar.component'; +import { ContactsMainSidenavComponent } from 'app/main/apps/contacts/sidenavs/main/main.component'; +import { ContactsContactFormDialogComponent } from 'app/main/apps/contacts/contact-form/contact-form.component'; const routes: Routes = [ { path : '**', - component: FuseContactsComponent, + component: ContactsComponent, resolve : { contacts: ContactsService } @@ -26,11 +26,11 @@ const routes: Routes = [ @NgModule({ declarations : [ - FuseContactsComponent, - FuseContactsContactListComponent, - FuseContactsSelectedBarComponent, - FuseContactsMainSidenavComponent, - FuseContactsContactFormDialogComponent + ContactsComponent, + ContactsContactListComponent, + ContactsSelectedBarComponent, + ContactsMainSidenavComponent, + ContactsContactFormDialogComponent ], imports : [ RouterModule.forChild(routes), @@ -54,8 +54,10 @@ const routes: Routes = [ providers : [ ContactsService ], - entryComponents: [FuseContactsContactFormDialogComponent] + entryComponents: [ + ContactsContactFormDialogComponent + ] }) -export class FuseContactsModule +export class ContactsModule { } diff --git a/src/app/main/apps/contacts/contacts.service.ts b/src/app/main/apps/contacts/contacts.service.ts index 66563638..35da8fbd 100644 --- a/src/app/main/apps/contacts/contacts.service.ts +++ b/src/app/main/apps/contacts/contacts.service.ts @@ -5,7 +5,7 @@ import { BehaviorSubject, Observable, Subject } from 'rxjs'; import { FuseUtils } from '@fuse/utils'; -import { Contact } from './contact.model'; +import { Contact } from 'app/main/apps/contacts/contact.model'; @Injectable() export class ContactsService implements Resolve @@ -23,12 +23,24 @@ export class ContactsService implements Resolve searchText: string; filterBy: string; - constructor(private http: HttpClient) + /** + * Constructor + * + * @param {HttpClient} _httpClient + */ + constructor( + private _httpClient: HttpClient + ) { } + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + /** - * The Contacts App Main Resolver + * Resolver + * * @param {ActivatedRouteSnapshot} route * @param {RouterStateSnapshot} state * @returns {Observable | Promise | any} @@ -61,10 +73,15 @@ export class ContactsService implements Resolve }); } + /** + * Get contacts + * + * @returns {Promise} + */ getContacts(): Promise { return new Promise((resolve, reject) => { - this.http.get('api/contacts-contacts') + this._httpClient.get('api/contacts-contacts') .subscribe((response: any) => { this.contacts = response; @@ -99,10 +116,15 @@ export class ContactsService implements Resolve ); } + /** + * Get user data + * + * @returns {Promise} + */ getUserData(): Promise { return new Promise((resolve, reject) => { - this.http.get('api/contacts-user/5725a6802d10e277a0f35724') + this._httpClient.get('api/contacts-user/5725a6802d10e277a0f35724') .subscribe((response: any) => { this.user = response; this.onUserDataChanged.next(this.user); @@ -114,9 +136,10 @@ export class ContactsService implements Resolve /** * Toggle selected contact by id + * * @param id */ - toggleSelectedContact(id) + toggleSelectedContact(id): void { // First, check if we already have that contact as selected... if ( this.selectedContacts.length > 0 ) @@ -145,7 +168,7 @@ export class ContactsService implements Resolve /** * Toggle select all */ - toggleSelectAll() + toggleSelectAll(): void { if ( this.selectedContacts.length > 0 ) { @@ -157,11 +180,17 @@ export class ContactsService implements Resolve } } - selectContacts(filterParameter?, filterValue?) + /** + * Select contacts + * + * @param filterParameter + * @param filterValue + */ + selectContacts(filterParameter?, filterValue?): void { this.selectedContacts = []; - // If there is no filter, select all todos + // If there is no filter, select all contacts if ( filterParameter === undefined || filterValue === undefined ) { this.selectedContacts = []; @@ -169,24 +198,22 @@ export class ContactsService implements Resolve this.selectedContacts.push(contact.id); }); } - else - { - /* this.selectedContacts.push(... - this.contacts.filter(todo => { - return todo[filterParameter] === filterValue; - }) - );*/ - } // Trigger the next event this.onSelectedContactsChanged.next(this.selectedContacts); } - updateContact(contact) + /** + * Update contact + * + * @param contact + * @returns {Promise} + */ + updateContact(contact): Promise { return new Promise((resolve, reject) => { - this.http.post('api/contacts-contacts/' + contact.id, {...contact}) + this._httpClient.post('api/contacts-contacts/' + contact.id, {...contact}) .subscribe(response => { this.getContacts(); resolve(response); @@ -194,10 +221,16 @@ export class ContactsService implements Resolve }); } - updateUserData(userData) + /** + * Update user data + * + * @param userData + * @returns {Promise} + */ + updateUserData(userData): Promise { return new Promise((resolve, reject) => { - this.http.post('api/contacts-user/' + this.user.id, {...userData}) + this._httpClient.post('api/contacts-user/' + this.user.id, {...userData}) .subscribe(response => { this.getUserData(); this.getContacts(); @@ -206,7 +239,10 @@ export class ContactsService implements Resolve }); } - deselectContacts() + /** + * Deselect contacts + */ + deselectContacts(): void { this.selectedContacts = []; @@ -214,14 +250,22 @@ export class ContactsService implements Resolve this.onSelectedContactsChanged.next(this.selectedContacts); } - deleteContact(contact) + /** + * Delete contact + * + * @param contact + */ + deleteContact(contact): void { const contactIndex = this.contacts.indexOf(contact); this.contacts.splice(contactIndex, 1); this.onContactsChanged.next(this.contacts); } - deleteSelectedContacts() + /** + * Delete selected contacts + */ + deleteSelectedContacts(): void { for ( const contactId of this.selectedContacts ) { diff --git a/src/app/main/apps/contacts/selected-bar/selected-bar.component.ts b/src/app/main/apps/contacts/selected-bar/selected-bar.component.ts index d9c09a5b..fa499a69 100644 --- a/src/app/main/apps/contacts/selected-bar/selected-bar.component.ts +++ b/src/app/main/apps/contacts/selected-bar/selected-bar.component.ts @@ -1,63 +1,110 @@ -import { Component } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { MatDialog, MatDialogRef } from '@angular/material'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { FuseConfirmDialogComponent } from '@fuse/components/confirm-dialog/confirm-dialog.component'; -import { ContactsService } from '../contacts.service'; +import { ContactsService } from 'app/main/apps/contacts/contacts.service'; @Component({ - selector : 'fuse-selected-bar', + selector : 'selected-bar', templateUrl: './selected-bar.component.html', styleUrls : ['./selected-bar.component.scss'] }) -export class FuseContactsSelectedBarComponent +export class ContactsSelectedBarComponent implements OnInit, OnDestroy { - selectedContacts: string[]; + confirmDialogRef: MatDialogRef; hasSelectedContacts: boolean; isIndeterminate: boolean; - confirmDialogRef: MatDialogRef; + selectedContacts: string[]; + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {ContactsService} _contactsService + * @param {MatDialog} _matDialog + */ constructor( - private contactsService: ContactsService, - public dialog: MatDialog + private _contactsService: ContactsService, + public _matDialog: MatDialog ) { - this.contactsService.onSelectedContactsChanged + // Set the private defaults + this._unsubscribeAll = new Subject(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + this._contactsService.onSelectedContactsChanged + .pipe(takeUntil(this._unsubscribeAll)) .subscribe(selectedContacts => { this.selectedContacts = selectedContacts; setTimeout(() => { this.hasSelectedContacts = selectedContacts.length > 0; - this.isIndeterminate = (selectedContacts.length !== this.contactsService.contacts.length && selectedContacts.length > 0); + this.isIndeterminate = (selectedContacts.length !== this._contactsService.contacts.length && selectedContacts.length > 0); }, 0); }); - } - selectAll() + /** + * On destroy + */ + ngOnDestroy(): void { - this.contactsService.selectContacts(); + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); } - deselectAll() + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Select all + */ + selectAll(): void { - this.contactsService.deselectContacts(); + this._contactsService.selectContacts(); } - deleteSelectedContacts() + /** + * Deselect all + */ + deselectAll(): void { - this.confirmDialogRef = this.dialog.open(FuseConfirmDialogComponent, { + this._contactsService.deselectContacts(); + } + + /** + * Delete selected contacts + */ + deleteSelectedContacts(): void + { + this.confirmDialogRef = this._matDialog.open(FuseConfirmDialogComponent, { disableClose: false }); this.confirmDialogRef.componentInstance.confirmMessage = 'Are you sure you want to delete all selected contacts?'; - this.confirmDialogRef.afterClosed().subscribe(result => { - if ( result ) - { - this.contactsService.deleteSelectedContacts(); - } - this.confirmDialogRef = null; - }); + this.confirmDialogRef.afterClosed() + .subscribe(result => { + if ( result ) + { + this._contactsService.deleteSelectedContacts(); + } + this.confirmDialogRef = null; + }); } - } diff --git a/src/app/main/apps/contacts/sidenavs/main/main.component.ts b/src/app/main/apps/contacts/sidenavs/main/main.component.ts index de4b2275..a9196309 100644 --- a/src/app/main/apps/contacts/sidenavs/main/main.component.ts +++ b/src/app/main/apps/contacts/sidenavs/main/main.component.ts @@ -1,37 +1,75 @@ -import { Component, OnDestroy } from '@angular/core'; -import { Subscription } from 'rxjs'; +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; -import { ContactsService } from '../../contacts.service'; +import { ContactsService } from 'app/main/apps/contacts/contacts.service'; @Component({ - selector : 'fuse-contacts-main-sidenav', + selector : 'contacts-main-sidenav', templateUrl: './main.component.html', styleUrls : ['./main.component.scss'] }) -export class FuseContactsMainSidenavComponent implements OnDestroy +export class ContactsMainSidenavComponent implements OnInit, OnDestroy { user: any; filterBy: string; - - onUserDataChangedSubscription: Subscription; - constructor(private contactsService: ContactsService) + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {ContactsService} _contactsService + */ + constructor( + private _contactsService: ContactsService + ) { - this.filterBy = this.contactsService.filterBy || 'all'; - this.onUserDataChangedSubscription = - this.contactsService.onUserDataChanged.subscribe(user => { + // Set the private defaults + this._unsubscribeAll = new Subject(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + this.filterBy = this._contactsService.filterBy || 'all'; + + this._contactsService.onUserDataChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(user => { this.user = user; }); } - changeFilter(filter) - { - this.filterBy = filter; - this.contactsService.onFilterChanged.next(this.filterBy); - } - + /** + * On destroy + */ ngOnDestroy() { - this.onUserDataChangedSubscription.unsubscribe(); + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Change the filter + * + * @param filter + */ + changeFilter(filter): void + { + this.filterBy = filter; + this._contactsService.onFilterChanged.next(this.filterBy); } } diff --git a/src/app/main/apps/dashboards/analytics/analytics.component.ts b/src/app/main/apps/dashboards/analytics/analytics.component.ts index c1b78979..41829f65 100644 --- a/src/app/main/apps/dashboards/analytics/analytics.component.ts +++ b/src/app/main/apps/dashboards/analytics/analytics.component.ts @@ -1,36 +1,56 @@ -import { Component, ViewEncapsulation } from '@angular/core'; +import { Component, OnInit, ViewEncapsulation } from '@angular/core'; -import { AnalyticsDashboardService } from './analytics.service'; import { fuseAnimations } from '@fuse/animations'; +import { AnalyticsDashboardService } from 'app/main/apps/dashboards/analytics/analytics.service'; + @Component({ - selector : 'fuse-analytics-dashboard', + selector : 'analytics-dashboard', templateUrl : './analytics.component.html', styleUrls : ['./analytics.component.scss'], encapsulation: ViewEncapsulation.None, animations : fuseAnimations }) -export class FuseAnalyticsDashboardComponent +export class AnalyticsDashboardComponent implements OnInit { widgets: any; widget1SelectedYear = '2016'; widget5SelectedDay = 'today'; + /** + * Constructor + * + * @param {AnalyticsDashboardService} _analyticsDashboardService + */ constructor( - private analyticsDashboardService: AnalyticsDashboardService + private _analyticsDashboardService: AnalyticsDashboardService ) { - // Get the widgets from the service - this.widgets = this.analyticsDashboardService.widgets; - // Register the custom chart.js plugin - this.registerCustomChartJSPlugin(); + this._registerCustomChartJSPlugin(); } + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + // Get the widgets from the service + this.widgets = this._analyticsDashboardService.widgets; + } + + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + /** * Register a custom plugin */ - registerCustomChartJSPlugin() + private _registerCustomChartJSPlugin(): void { (window).Chart.plugins.register({ afterDatasetsDraw: function (chart, easing) { diff --git a/src/app/main/apps/dashboards/analytics/analytics.module.ts b/src/app/main/apps/dashboards/analytics/analytics.module.ts index 710521ca..6e4cd406 100644 --- a/src/app/main/apps/dashboards/analytics/analytics.module.ts +++ b/src/app/main/apps/dashboards/analytics/analytics.module.ts @@ -1,8 +1,6 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; - import { MatButtonModule, MatFormFieldModule, MatIconModule, MatMenuModule, MatSelectModule, MatTabsModule } from '@angular/material'; - import { AgmCoreModule } from '@agm/core'; import { ChartsModule } from 'ng2-charts'; import { NgxChartsModule } from '@swimlane/ngx-charts'; @@ -10,14 +8,13 @@ import { NgxChartsModule } from '@swimlane/ngx-charts'; import { FuseSharedModule } from '@fuse/shared.module'; import { FuseWidgetModule } from '@fuse/components/widget/widget.module'; -import { FuseAnalyticsDashboardComponent } from './analytics.component'; -import { AnalyticsDashboardService } from './analytics.service'; - +import { AnalyticsDashboardComponent } from 'app/main/apps/dashboards/analytics/analytics.component'; +import { AnalyticsDashboardService } from 'app/main/apps/dashboards/analytics/analytics.service'; const routes: Routes = [ { path : '**', - component: FuseAnalyticsDashboardComponent, + component: AnalyticsDashboardComponent, resolve : { data: AnalyticsDashboardService } @@ -26,7 +23,7 @@ const routes: Routes = [ @NgModule({ declarations: [ - FuseAnalyticsDashboardComponent + AnalyticsDashboardComponent ], imports : [ RouterModule.forChild(routes), @@ -51,7 +48,7 @@ const routes: Routes = [ AnalyticsDashboardService ] }) -export class FuseAnalyticsDashboardModule +export class AnalyticsDashboardModule { } diff --git a/src/app/main/apps/dashboards/analytics/analytics.service.ts b/src/app/main/apps/dashboards/analytics/analytics.service.ts index 47d3097c..69f1fddb 100644 --- a/src/app/main/apps/dashboards/analytics/analytics.service.ts +++ b/src/app/main/apps/dashboards/analytics/analytics.service.ts @@ -8,14 +8,20 @@ export class AnalyticsDashboardService implements Resolve { widgets: any[]; + /** + * Constructor + * + * @param {HttpClient} _httpClient + */ constructor( - private http: HttpClient + private _httpClient: HttpClient ) { } /** - * Resolve + * Resolver + * * @param {ActivatedRouteSnapshot} route * @param {RouterStateSnapshot} state * @returns {Observable | Promise | any} @@ -35,10 +41,15 @@ export class AnalyticsDashboardService implements Resolve }); } + /** + * Get widgets + * + * @returns {Promise} + */ getWidgets(): Promise { return new Promise((resolve, reject) => { - this.http.get('api/analytics-dashboard-widgets') + this._httpClient.get('api/analytics-dashboard-widgets') .subscribe((response: any) => { this.widgets = response; resolve(response); diff --git a/src/app/main/apps/dashboards/project/project.component.ts b/src/app/main/apps/dashboards/project/project.component.ts index deeadfff..fb26613c 100644 --- a/src/app/main/apps/dashboards/project/project.component.ts +++ b/src/app/main/apps/dashboards/project/project.component.ts @@ -1,21 +1,20 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { DataSource } from '@angular/cdk/collections'; import { BehaviorSubject, Observable } from 'rxjs'; - import * as shape from 'd3-shape'; import { fuseAnimations } from '@fuse/animations'; -import { ProjectDashboardService } from './project.service'; +import { ProjectDashboardService } from 'app/main/apps/dashboards/project/project.service'; @Component({ - selector : 'fuse-project-dashboard', + selector : 'project-dashboard', templateUrl : './project.component.html', styleUrls : ['./project.component.scss'], encapsulation: ViewEncapsulation.None, animations : fuseAnimations }) -export class FuseProjectDashboardComponent implements OnInit +export class ProjectDashboardComponent implements OnInit { projects: any[]; selectedProject: any; @@ -30,12 +29,15 @@ export class FuseProjectDashboardComponent implements OnInit dateNow = Date.now(); - constructor(private projectDashboardService: ProjectDashboardService) + /** + * Constructor + * + * @param {ProjectDashboardService} _projectDashboardService + */ + constructor( + private _projectDashboardService: ProjectDashboardService + ) { - this.projects = this.projectDashboardService.projects; - this.selectedProject = this.projects[0]; - this.widgets = this.projectDashboardService.widgets; - /** * Widget 5 */ @@ -139,8 +141,19 @@ export class FuseProjectDashboardComponent implements OnInit } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + this.projects = this._projectDashboardService.projects; + this.selectedProject = this.projects[0]; + this.widgets = this._projectDashboardService.widgets; + /** * Widget 11 */ @@ -152,18 +165,30 @@ export class FuseProjectDashboardComponent implements OnInit export class FilesDataSource extends DataSource { - constructor(private widget11) + /** + * Constructor + * + * @param _widget11 + */ + constructor(private _widget11) { super(); } - /** Connect function called by the table to retrieve one stream containing the data to render. */ + /** + * Connect function called by the table to retrieve one stream containing the data to render. + * + * @returns {Observable} + */ connect(): Observable { - return this.widget11.onContactsChanged; + return this._widget11.onContactsChanged; } - disconnect() + /** + * Disconnect + */ + disconnect(): void { } } diff --git a/src/app/main/apps/dashboards/project/project.module.ts b/src/app/main/apps/dashboards/project/project.module.ts index 23dcf8d9..88290f27 100644 --- a/src/app/main/apps/dashboards/project/project.module.ts +++ b/src/app/main/apps/dashboards/project/project.module.ts @@ -1,21 +1,19 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { CdkTableModule } from '@angular/cdk/table'; - import { MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatMenuModule, MatSelectModule, MatSidenavModule, MatTableModule, MatTabsModule } from '@angular/material'; - import { NgxChartsModule } from '@swimlane/ngx-charts'; import { FuseSharedModule } from '@fuse/shared.module'; import { FuseWidgetModule } from '@fuse/components/widget/widget.module'; -import { FuseProjectDashboardComponent } from './project.component'; -import { ProjectDashboardService } from './project.service'; +import { ProjectDashboardComponent } from 'app/main/apps/dashboards/project/project.component'; +import { ProjectDashboardService } from 'app/main/apps/dashboards/project/project.service'; const routes: Routes = [ { path : '**', - component: FuseProjectDashboardComponent, + component: ProjectDashboardComponent, resolve : { data: ProjectDashboardService } @@ -24,7 +22,7 @@ const routes: Routes = [ @NgModule({ declarations: [ - FuseProjectDashboardComponent + ProjectDashboardComponent ], imports : [ RouterModule.forChild(routes), @@ -49,7 +47,7 @@ const routes: Routes = [ ProjectDashboardService ] }) -export class FuseProjectDashboardModule +export class ProjectDashboardModule { } diff --git a/src/app/main/apps/dashboards/project/project.service.ts b/src/app/main/apps/dashboards/project/project.service.ts index a1ee2128..d697fd32 100644 --- a/src/app/main/apps/dashboards/project/project.service.ts +++ b/src/app/main/apps/dashboards/project/project.service.ts @@ -9,14 +9,20 @@ export class ProjectDashboardService implements Resolve projects: any[]; widgets: any[]; + /** + * Constructor + * + * @param {HttpClient} _httpClient + */ constructor( - private http: HttpClient + private _httpClient: HttpClient ) { } /** - * Resolve + * Resolver + * * @param {ActivatedRouteSnapshot} route * @param {RouterStateSnapshot} state * @returns {Observable | Promise | any} @@ -38,10 +44,15 @@ export class ProjectDashboardService implements Resolve }); } + /** + * Get projects + * + * @returns {Promise} + */ getProjects(): Promise { return new Promise((resolve, reject) => { - this.http.get('api/project-dashboard-projects') + this._httpClient.get('api/project-dashboard-projects') .subscribe((response: any) => { this.projects = response; resolve(response); @@ -49,10 +60,15 @@ export class ProjectDashboardService implements Resolve }); } + /** + * Get widgets + * + * @returns {Promise} + */ getWidgets(): Promise { return new Promise((resolve, reject) => { - this.http.get('api/project-dashboard-widgets') + this._httpClient.get('api/project-dashboard-widgets') .subscribe((response: any) => { this.widgets = response; resolve(response); diff --git a/src/app/main/apps/e-commerce/dashboard/dashboard.component.ts b/src/app/main/apps/e-commerce/dashboard/dashboard.component.ts index 5039c66f..684c021f 100644 --- a/src/app/main/apps/e-commerce/dashboard/dashboard.component.ts +++ b/src/app/main/apps/e-commerce/dashboard/dashboard.component.ts @@ -1,17 +1,17 @@ -import { Component, ViewEncapsulation } from '@angular/core'; +import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { fuseAnimations } from '@fuse/animations'; -import { EcommerceDashboardService } from './dashboard.service'; +import { EcommerceDashboardService } from 'app/main/apps/e-commerce/dashboard/dashboard.service'; @Component({ - selector : 'fuse-e-commerce-dashboard', + selector : 'e-commerce-dashboard', templateUrl : './dashboard.component.html', styleUrls : ['./dashboard.component.scss'], encapsulation: ViewEncapsulation.None, animations : fuseAnimations }) -export class FuseEcommerceDashboardComponent +export class EcommerceDashboardComponent implements OnInit { projects: any[]; selectedProject: any; @@ -21,12 +21,10 @@ export class FuseEcommerceDashboardComponent widget6: any = {}; widget7: any = {}; - constructor(private projectsDashboardService: EcommerceDashboardService) + constructor( + private _eCommerceDashboardService: EcommerceDashboardService + ) { - this.projects = this.projectsDashboardService.projects; - this.selectedProject = this.projects[0]; - this.widgets = this.projectsDashboardService.widgets; - /** * Widget 5 */ @@ -74,4 +72,18 @@ export class FuseEcommerceDashboardComponent }; } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + this.projects = this._eCommerceDashboardService.projects; + this.selectedProject = this.projects[0]; + this.widgets = this._eCommerceDashboardService.widgets; + } } diff --git a/src/app/main/apps/e-commerce/dashboard/dashboard.service.ts b/src/app/main/apps/e-commerce/dashboard/dashboard.service.ts index 8810da76..625a215b 100644 --- a/src/app/main/apps/e-commerce/dashboard/dashboard.service.ts +++ b/src/app/main/apps/e-commerce/dashboard/dashboard.service.ts @@ -9,21 +9,26 @@ export class EcommerceDashboardService implements Resolve projects: any[]; widgets: any[]; + /** + * Constructor + * + * @param {HttpClient} _httpClient + */ constructor( - private http: HttpClient + private _httpClient: HttpClient ) { } /** - * Resolve + * Resolver + * * @param {ActivatedRouteSnapshot} route * @param {RouterStateSnapshot} state * @returns {Observable | Promise | any} */ resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable | Promise | any { - return new Promise((resolve, reject) => { Promise.all([ @@ -38,10 +43,15 @@ export class EcommerceDashboardService implements Resolve }); } + /** + * Get projects + * + * @returns {Promise} + */ getProjects(): Promise { return new Promise((resolve, reject) => { - this.http.get('api/project-dashboard-projects') + this._httpClient.get('api/project-dashboard-projects') .subscribe((response: any) => { this.projects = response; resolve(response); @@ -49,10 +59,15 @@ export class EcommerceDashboardService implements Resolve }); } + /** + * Get widgets + * + * @returns {Promise} + */ getWidgets(): Promise { return new Promise((resolve, reject) => { - this.http.get('api/e-commerce-dashboard') + this._httpClient.get('api/e-commerce-dashboard') .subscribe((response: any) => { this.widgets = response; resolve(response); diff --git a/src/app/main/apps/e-commerce/e-commerce.module.ts b/src/app/main/apps/e-commerce/e-commerce.module.ts index f6a09c35..b01a6ff2 100644 --- a/src/app/main/apps/e-commerce/e-commerce.module.ts +++ b/src/app/main/apps/e-commerce/e-commerce.module.ts @@ -1,65 +1,63 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { CdkTableModule } from '@angular/cdk/table'; - -import { MatButtonModule, MatChipsModule, MatFormFieldModule, MatIconModule, MatInputModule, MatPaginatorModule, MatRippleModule, MatSelectModule, MatSortModule, MatTableModule, MatTabsModule } from '@angular/material'; - +import { MatButtonModule, MatChipsModule, MatFormFieldModule, MatIconModule, MatInputModule, MatPaginatorModule, MatRippleModule, MatSelectModule, MatSnackBarModule, MatSortModule, MatTableModule, MatTabsModule } from '@angular/material'; import { NgxChartsModule } from '@swimlane/ngx-charts'; import { AgmCoreModule } from '@agm/core'; import { FuseSharedModule } from '@fuse/shared.module'; import { FuseWidgetModule } from '@fuse/components/widget/widget.module'; -import { FuseEcommerceDashboardComponent } from './dashboard/dashboard.component'; -import { EcommerceDashboardService } from './dashboard/dashboard.service'; -import { FuseEcommerceProductsComponent } from './products/products.component'; -import { EcommerceProductsService } from './products/products.service'; -import { FuseEcommerceProductComponent } from './product/product.component'; -import { EcommerceProductService } from './product/product.service'; -import { FuseEcommerceOrdersComponent } from './orders/orders.component'; -import { EcommerceOrdersService } from './orders/orders.service'; -import { FuseEcommerceOrderComponent } from './order/order.component'; -import { EcommerceOrderService } from './order/order.service'; +import { EcommerceDashboardComponent } from 'app/main/apps/e-commerce/dashboard/dashboard.component'; +import { EcommerceDashboardService } from 'app/main/apps/e-commerce/dashboard/dashboard.service'; +import { EcommerceProductsComponent } from 'app/main/apps/e-commerce/products/products.component'; +import { EcommerceProductsService } from 'app/main/apps/e-commerce/products/products.service'; +import { EcommerceProductComponent } from 'app/main/apps/e-commerce/product/product.component'; +import { EcommerceProductService } from 'app/main/apps/e-commerce/product/product.service'; +import { EcommerceOrdersComponent } from 'app/main/apps/e-commerce/orders/orders.component'; +import { EcommerceOrdersService } from 'app/main/apps/e-commerce/orders/orders.service'; +import { EcommerceOrderComponent } from 'app/main/apps/e-commerce/order/order.component'; +import { EcommerceOrderService } from 'app/main/apps/e-commerce/order/order.service'; const routes: Routes = [ { path : 'dashboard', - component: FuseEcommerceDashboardComponent, + component: EcommerceDashboardComponent, resolve : { data: EcommerceDashboardService } }, { path : 'products', - component: FuseEcommerceProductsComponent, + component: EcommerceProductsComponent, resolve : { data: EcommerceProductsService } }, { path : 'products/:id', - component: FuseEcommerceProductComponent, + component: EcommerceProductComponent, resolve : { data: EcommerceProductService } }, { path : 'products/:id/:handle', - component: FuseEcommerceProductComponent, + component: EcommerceProductComponent, resolve : { data: EcommerceProductService } }, { path : 'orders', - component: FuseEcommerceOrdersComponent, + component: EcommerceOrdersComponent, resolve : { data: EcommerceOrdersService } }, { path : 'orders/:id', - component: FuseEcommerceOrderComponent, + component: EcommerceOrderComponent, resolve : { data: EcommerceOrderService } @@ -68,11 +66,11 @@ const routes: Routes = [ @NgModule({ declarations: [ - FuseEcommerceDashboardComponent, - FuseEcommerceProductsComponent, - FuseEcommerceProductComponent, - FuseEcommerceOrdersComponent, - FuseEcommerceOrderComponent + EcommerceDashboardComponent, + EcommerceProductsComponent, + EcommerceProductComponent, + EcommerceOrdersComponent, + EcommerceOrderComponent ], imports : [ RouterModule.forChild(routes), @@ -87,6 +85,7 @@ const routes: Routes = [ MatRippleModule, MatSelectModule, MatSortModule, + MatSnackBarModule, MatTableModule, MatTabsModule, @@ -106,6 +105,6 @@ const routes: Routes = [ EcommerceOrderService ] }) -export class FuseEcommerceModule +export class EcommerceModule { } diff --git a/src/app/main/apps/e-commerce/order/order.component.ts b/src/app/main/apps/e-commerce/order/order.component.ts index be7260a3..e51c56e8 100644 --- a/src/app/main/apps/e-commerce/order/order.component.ts +++ b/src/app/main/apps/e-commerce/order/order.component.ts @@ -1,12 +1,13 @@ import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; -import { Subscription } from 'rxjs'; +import { Subject} from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { fuseAnimations } from '@fuse/animations'; -import { Order } from './order.model'; -import { EcommerceOrderService } from './order.service'; -import { orderStatuses } from './order-statuses'; +import { orderStatuses } from 'app/main/apps/e-commerce/order/order-statuses'; +import { Order } from 'app/main/apps/e-commerce/order/order.model'; +import { EcommerceOrderService } from 'app/main/apps/e-commerce/order/order.service'; @Component({ selector : 'fuse-e-commerce-order', @@ -15,41 +16,73 @@ import { orderStatuses } from './order-statuses'; encapsulation: ViewEncapsulation.None, animations : fuseAnimations }) -export class FuseEcommerceOrderComponent implements OnInit, OnDestroy +export class EcommerceOrderComponent implements OnInit, OnDestroy { - order = new Order(); - onOrderChanged: Subscription; + order: Order; + orderStatuses: any; statusForm: FormGroup; - orderStatuses = orderStatuses; + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {EcommerceOrderService} _ecommerceOrderService + * @param {FormBuilder} _formBuilder + */ constructor( - private orderService: EcommerceOrderService, - private formBuilder: FormBuilder, + private _ecommerceOrderService: EcommerceOrderService, + private _formBuilder: FormBuilder ) { + // Set the defaults + this.order = new Order(); + this.orderStatuses = orderStatuses; + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { // Subscribe to update order on changes - this.onOrderChanged = - this.orderService.onOrderChanged - .subscribe(order => { - this.order = new Order(order); - }); + this._ecommerceOrderService.onOrderChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(order => { + this.order = new Order(order); + }); - this.statusForm = this.formBuilder.group({ + this.statusForm = this._formBuilder.group({ newStatus: [''] }); } - ngOnDestroy() + /** + * On destroy + */ + ngOnDestroy(): void { - this.onOrderChanged.unsubscribe(); + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); } - updateStatus() + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Update status + */ + updateStatus(): void { const newStatusId = Number.parseInt(this.statusForm.get('newStatus').value); diff --git a/src/app/main/apps/e-commerce/order/order.model.ts b/src/app/main/apps/e-commerce/order/order.model.ts index 9c2fb68d..dd3d4a39 100644 --- a/src/app/main/apps/e-commerce/order/order.model.ts +++ b/src/app/main/apps/e-commerce/order/order.model.ts @@ -15,6 +15,11 @@ export class Order payment: any; shippingDetails: any[]; + /** + * Constructor + * + * @param order + */ constructor(order?) { order = order || {}; diff --git a/src/app/main/apps/e-commerce/order/order.service.ts b/src/app/main/apps/e-commerce/order/order.service.ts index b1f74180..46a7f2fc 100644 --- a/src/app/main/apps/e-commerce/order/order.service.ts +++ b/src/app/main/apps/e-commerce/order/order.service.ts @@ -10,21 +10,26 @@ export class EcommerceOrderService implements Resolve order: any; onOrderChanged: BehaviorSubject = new BehaviorSubject({}); + /** + * Constructor + * + * @param {HttpClient} _httpClient + */ constructor( - private http: HttpClient + private _httpClient: HttpClient ) { } /** - * Resolve + * Resolver + * * @param {ActivatedRouteSnapshot} route * @param {RouterStateSnapshot} state * @returns {Observable | Promise | any} */ resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable | Promise | any { - this.routeParams = route.params; return new Promise((resolve, reject) => { @@ -40,10 +45,15 @@ export class EcommerceOrderService implements Resolve }); } + /** + * Get order + * + * @returns {Promise} + */ getOrder(): Promise { return new Promise((resolve, reject) => { - this.http.get('api/e-commerce-orders/' + this.routeParams.id) + this._httpClient.get('api/e-commerce-orders/' + this.routeParams.id) .subscribe((response: any) => { this.order = response; this.onOrderChanged.next(this.order); @@ -52,20 +62,32 @@ export class EcommerceOrderService implements Resolve }); } - saveOrder(order) + /** + * Save order + * + * @param order + * @returns {Promise} + */ + saveOrder(order): Promise { return new Promise((resolve, reject) => { - this.http.post('api/e-commerce-orders/' + order.id, order) + this._httpClient.post('api/e-commerce-orders/' + order.id, order) .subscribe((response: any) => { resolve(response); }, reject); }); } - addOrder(order) + /** + * Add order + * + * @param order + * @returns {Promise} + */ + addOrder(order): Promise { return new Promise((resolve, reject) => { - this.http.post('api/e-commerce-orders/', order) + this._httpClient.post('api/e-commerce-orders/', order) .subscribe((response: any) => { resolve(response); }, reject); diff --git a/src/app/main/apps/e-commerce/orders/orders.component.ts b/src/app/main/apps/e-commerce/orders/orders.component.ts index abc86808..5b1582ab 100644 --- a/src/app/main/apps/e-commerce/orders/orders.component.ts +++ b/src/app/main/apps/e-commerce/orders/orders.component.ts @@ -1,58 +1,117 @@ -import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'; +import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { MatPaginator, MatSort } from '@angular/material'; import { DataSource } from '@angular/cdk/collections'; - -import { merge, Observable, BehaviorSubject, fromEvent } from 'rxjs'; +import { merge, Observable, BehaviorSubject, fromEvent, Subject } from 'rxjs'; import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators'; import { fuseAnimations } from '@fuse/animations'; import { FuseUtils } from '@fuse/utils'; -import { EcommerceOrdersService } from './orders.service'; +import { EcommerceOrdersService } from 'app/main/apps/e-commerce/orders/orders.service'; +import { takeUntil } from 'rxjs/internal/operators'; @Component({ - selector : 'fuse-e-commerce-orders', + selector : 'e-commerce-orders', templateUrl: './orders.component.html', styleUrls : ['./orders.component.scss'], animations : fuseAnimations }) -export class FuseEcommerceOrdersComponent implements OnInit +export class EcommerceOrdersComponent implements OnInit, OnDestroy { dataSource: FilesDataSource | null; displayedColumns = ['id', 'reference', 'customer', 'total', 'payment', 'status', 'date']; - @ViewChild(MatPaginator) paginator: MatPaginator; - @ViewChild('filter') filter: ElementRef; - @ViewChild(MatSort) sort: MatSort; + @ViewChild(MatPaginator) + paginator: MatPaginator; + @ViewChild('filter') + filter: ElementRef; + + @ViewChild(MatSort) + sort: MatSort; + + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {EcommerceOrdersService} _ecommerceOrdersService + */ constructor( - private ordersService: EcommerceOrdersService + private _ecommerceOrdersService: EcommerceOrdersService ) { + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() - { - this.dataSource = new FilesDataSource(this.ordersService, this.paginator, this.sort); + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- - fromEvent(this.filter.nativeElement, 'keyup').pipe( - debounceTime(150), - distinctUntilChanged() - ).subscribe(() => { - if ( !this.dataSource ) - { - return; - } - this.dataSource.filter = this.filter.nativeElement.value; - }); + /** + * On init + */ + ngOnInit(): void + { + this.dataSource = new FilesDataSource(this._ecommerceOrdersService, this.paginator, this.sort); + + fromEvent(this.filter.nativeElement, 'keyup') + .pipe( + takeUntil(this._unsubscribeAll), + debounceTime(150), + distinctUntilChanged() + ) + .subscribe(() => { + if ( !this.dataSource ) + { + return; + } + this.dataSource.filter = this.filter.nativeElement.value; + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); } } export class FilesDataSource extends DataSource { - _filterChange = new BehaviorSubject(''); - _filteredDataChange = new BehaviorSubject(''); + // Private + private _filterChange = new BehaviorSubject(''); + private _filteredDataChange = new BehaviorSubject(''); + /** + * Constructor + * + * @param {EcommerceOrdersService} _ecommerceOrdersService + * @param {MatPaginator} _matPaginator + * @param {MatSort} _matSort + */ + constructor( + private _ecommerceOrdersService: EcommerceOrdersService, + private _matPaginator: MatPaginator, + private _matSort: MatSort + ) + { + super(); + + this.filteredData = this._ecommerceOrdersService.orders; + } + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + // Filtered data get filteredData(): any { return this._filteredDataChange.value; @@ -63,6 +122,7 @@ export class FilesDataSource extends DataSource this._filteredDataChange.next(value); } + // Filter get filter(): string { return this._filterChange.value; @@ -73,29 +133,27 @@ export class FilesDataSource extends DataSource this._filterChange.next(filter); } - constructor( - private ordersService: EcommerceOrdersService, - private _paginator: MatPaginator, - private _sort: MatSort - ) - { - super(); - this.filteredData = this.ordersService.orders; - } + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- - /** Connect function called by the table to retrieve one stream containing the data to render. */ + /** + * Connect function called by the table to retrieve one stream containing the data to render. + * + * @returns {Observable} + */ connect(): Observable { const displayDataChanges = [ - this.ordersService.onOrdersChanged, - this._paginator.page, + this._ecommerceOrdersService.onOrdersChanged, + this._matPaginator.page, this._filterChange, - this._sort.sortChange + this._matSort.sortChange ]; return merge(...displayDataChanges).pipe(map(() => { - let data = this.ordersService.orders.slice(); + let data = this._ecommerceOrdersService.orders.slice(); data = this.filterData(data); @@ -104,14 +162,20 @@ export class FilesDataSource extends DataSource data = this.sortData(data); // Grab the page's slice of data. - const startIndex = this._paginator.pageIndex * this._paginator.pageSize; - return data.splice(startIndex, this._paginator.pageSize); + const startIndex = this._matPaginator.pageIndex * this._matPaginator.pageSize; + return data.splice(startIndex, this._matPaginator.pageSize); }) ); } - filterData(data) + /** + * Filter data + * + * @param data + * @returns {any} + */ + filterData(data): any { if ( !this.filter ) { @@ -120,9 +184,15 @@ export class FilesDataSource extends DataSource return FuseUtils.filterArrayByString(data, this.filter); } + /** + * Sort data + * + * @param data + * @returns {any[]} + */ sortData(data): any[] { - if ( !this._sort.active || this._sort.direction === '' ) + if ( !this._matSort.active || this._matSort.direction === '' ) { return data; } @@ -131,7 +201,7 @@ export class FilesDataSource extends DataSource let propertyA: number | string = ''; let propertyB: number | string = ''; - switch ( this._sort.active ) + switch ( this._matSort.active ) { case 'id': [propertyA, propertyB] = [a.id, b.id]; @@ -159,11 +229,14 @@ export class FilesDataSource extends DataSource const valueA = isNaN(+propertyA) ? propertyA : +propertyA; const valueB = isNaN(+propertyB) ? propertyB : +propertyB; - return (valueA < valueB ? -1 : 1) * (this._sort.direction === 'asc' ? 1 : -1); + return (valueA < valueB ? -1 : 1) * (this._matSort.direction === 'asc' ? 1 : -1); }); } - disconnect() + /** + * Disconnect + */ + disconnect(): void { } } diff --git a/src/app/main/apps/e-commerce/orders/orders.service.ts b/src/app/main/apps/e-commerce/orders/orders.service.ts index 4ade65c8..e557807a 100644 --- a/src/app/main/apps/e-commerce/orders/orders.service.ts +++ b/src/app/main/apps/e-commerce/orders/orders.service.ts @@ -9,21 +9,26 @@ export class EcommerceOrdersService implements Resolve orders: any[]; onOrdersChanged: BehaviorSubject = new BehaviorSubject({}); + /** + * Constructor + * + * @param {HttpClient} _httpClient + */ constructor( - private http: HttpClient + private _httpClient: HttpClient ) { } /** - * Resolve + * Resolver + * * @param {ActivatedRouteSnapshot} route * @param {RouterStateSnapshot} state * @returns {Observable | Promise | any} */ resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable | Promise | any { - return new Promise((resolve, reject) => { Promise.all([ @@ -37,10 +42,15 @@ export class EcommerceOrdersService implements Resolve }); } + /** + * Get orders + * + * @returns {Promise} + */ getOrders(): Promise { return new Promise((resolve, reject) => { - this.http.get('api/e-commerce-orders') + this._httpClient.get('api/e-commerce-orders') .subscribe((response: any) => { this.orders = response; this.onOrdersChanged.next(this.orders); diff --git a/src/app/main/apps/e-commerce/product/product.component.ts b/src/app/main/apps/e-commerce/product/product.component.ts index 76eba648..01a9918a 100644 --- a/src/app/main/apps/e-commerce/product/product.component.ts +++ b/src/app/main/apps/e-commerce/product/product.component.ts @@ -1,68 +1,105 @@ import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; +import { Location } from '@angular/common'; import { MatSnackBar } from '@angular/material'; -import { Subscription } from 'rxjs'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { fuseAnimations } from '@fuse/animations'; import { FuseUtils } from '@fuse/utils'; -import { Product } from './product.model'; -import { EcommerceProductService } from './product.service'; -import { Location } from '@angular/common'; +import { Product } from 'app/main/apps/e-commerce/product/product.model'; +import { EcommerceProductService } from 'app/main/apps/e-commerce/product/product.service'; @Component({ - selector : 'fuse-e-commerce-product', + selector : 'e-commerce-product', templateUrl : './product.component.html', styleUrls : ['./product.component.scss'], encapsulation: ViewEncapsulation.None, animations : fuseAnimations }) -export class FuseEcommerceProductComponent implements OnInit, OnDestroy +export class EcommerceProductComponent implements OnInit, OnDestroy { - product = new Product(); - onProductChanged: Subscription; + product: Product; pageType: string; productForm: FormGroup; + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {EcommerceProductService} _ecommerceProductService + * @param {FormBuilder} _formBuilder + * @param {Location} _location + * @param {MatSnackBar} _matSnackBar + */ constructor( - private productService: EcommerceProductService, - private formBuilder: FormBuilder, - public snackBar: MatSnackBar, - private location: Location + private _ecommerceProductService: EcommerceProductService, + private _formBuilder: FormBuilder, + private _location: Location, + private _matSnackBar: MatSnackBar ) { + // Set the default + this.product = new Product(); + + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { // Subscribe to update product on changes - this.onProductChanged = - this.productService.onProductChanged - .subscribe(product => { + this._ecommerceProductService.onProductChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(product => { - if ( product ) - { - this.product = new Product(product); - this.pageType = 'edit'; - } - else - { - this.pageType = 'new'; - this.product = new Product(); - } + if ( product ) + { + this.product = new Product(product); + this.pageType = 'edit'; + } + else + { + this.pageType = 'new'; + this.product = new Product(); + } - this.productForm = this.createProductForm(); - }); + this.productForm = this.createProductForm(); + }); } - ngOnDestroy() + /** + * On destroy + */ + ngOnDestroy(): void { - this.onProductChanged.unsubscribe(); + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); } - createProductForm() + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Create product form + * + * @returns {FormGroup} + */ + createProductForm(): FormGroup { - return this.formBuilder.group({ + return this._formBuilder.group({ id : [this.product.id], name : [this.product.name], handle : [this.product.handle], @@ -85,42 +122,50 @@ export class FuseEcommerceProductComponent implements OnInit, OnDestroy }); } - saveProduct() + /** + * Save product + */ + saveProduct(): void { const data = this.productForm.getRawValue(); data.handle = FuseUtils.handleize(data.name); - this.productService.saveProduct(data) + + this._ecommerceProductService.saveProduct(data) .then(() => { // Trigger the subscription with new data - this.productService.onProductChanged.next(data); + this._ecommerceProductService.onProductChanged.next(data); // Show the success message - this.snackBar.open('Product saved', 'OK', { + this._matSnackBar.open('Product saved', 'OK', { verticalPosition: 'top', duration : 2000 }); }); } - addProduct() + /** + * Add product + */ + addProduct(): void { const data = this.productForm.getRawValue(); data.handle = FuseUtils.handleize(data.name); - this.productService.addProduct(data) + + this._ecommerceProductService.addProduct(data) .then(() => { // Trigger the subscription with new data - this.productService.onProductChanged.next(data); + this._ecommerceProductService.onProductChanged.next(data); // Show the success message - this.snackBar.open('Product added', 'OK', { + this._matSnackBar.open('Product added', 'OK', { verticalPosition: 'top', duration : 2000 }); // Change the location with new one - this.location.go('apps/e-commerce/products/' + this.product.id + '/' + this.product.handle); + this._location.go('apps/e-commerce/products/' + this.product.id + '/' + this.product.handle); }); } } diff --git a/src/app/main/apps/e-commerce/product/product.model.ts b/src/app/main/apps/e-commerce/product/product.model.ts index a77e2596..3195482e 100644 --- a/src/app/main/apps/e-commerce/product/product.model.ts +++ b/src/app/main/apps/e-commerce/product/product.model.ts @@ -29,6 +29,11 @@ export class Product extraShippingFee: number; active: boolean; + /** + * Constructor + * + * @param product + */ constructor(product?) { product = product || {}; @@ -53,6 +58,11 @@ export class Product this.active = product.active || true; } + /** + * Add category + * + * @param {MatChipInputEvent} event + */ addCategory(event: MatChipInputEvent): void { const input = event.input; @@ -71,7 +81,12 @@ export class Product } } - removeCategory(category) + /** + * Remove category + * + * @param category + */ + removeCategory(category): void { const index = this.categories.indexOf(category); @@ -81,6 +96,11 @@ export class Product } } + /** + * Add tag + * + * @param {MatChipInputEvent} event + */ addTag(event: MatChipInputEvent): void { const input = event.input; @@ -99,7 +119,12 @@ export class Product } } - removeTag(tag) + /** + * Remove tag + * + * @param tag + */ + removeTag(tag): void { const index = this.tags.indexOf(tag); diff --git a/src/app/main/apps/e-commerce/product/product.service.ts b/src/app/main/apps/e-commerce/product/product.service.ts index 50f4aa73..70e79e47 100644 --- a/src/app/main/apps/e-commerce/product/product.service.ts +++ b/src/app/main/apps/e-commerce/product/product.service.ts @@ -10,21 +10,26 @@ export class EcommerceProductService implements Resolve product: any; onProductChanged: BehaviorSubject = new BehaviorSubject({}); + /** + * Constructor + * + * @param {HttpClient} _httpClient + */ constructor( - private http: HttpClient + private _httpClient: HttpClient ) { } /** - * Resolve + * Resolver + * * @param {ActivatedRouteSnapshot} route * @param {RouterStateSnapshot} state * @returns {Observable | Promise | any} */ resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable | Promise | any { - this.routeParams = route.params; return new Promise((resolve, reject) => { @@ -40,6 +45,11 @@ export class EcommerceProductService implements Resolve }); } + /** + * Get product + * + * @returns {Promise} + */ getProduct(): Promise { return new Promise((resolve, reject) => { @@ -50,7 +60,7 @@ export class EcommerceProductService implements Resolve } else { - this.http.get('api/e-commerce-products/' + this.routeParams.id) + this._httpClient.get('api/e-commerce-products/' + this.routeParams.id) .subscribe((response: any) => { this.product = response; this.onProductChanged.next(this.product); @@ -60,20 +70,32 @@ export class EcommerceProductService implements Resolve }); } - saveProduct(product) + /** + * Save product + * + * @param product + * @returns {Promise} + */ + saveProduct(product): Promise { return new Promise((resolve, reject) => { - this.http.post('api/e-commerce-products/' + product.id, product) + this._httpClient.post('api/e-commerce-products/' + product.id, product) .subscribe((response: any) => { resolve(response); }, reject); }); } - addProduct(product) + /** + * Add product + * + * @param product + * @returns {Promise} + */ + addProduct(product): Promise { return new Promise((resolve, reject) => { - this.http.post('api/e-commerce-products/', product) + this._httpClient.post('api/e-commerce-products/', product) .subscribe((response: any) => { resolve(response); }, reject); diff --git a/src/app/main/apps/e-commerce/products/products.component.ts b/src/app/main/apps/e-commerce/products/products.component.ts index 4b36e25f..7a3df669 100644 --- a/src/app/main/apps/e-commerce/products/products.component.ts +++ b/src/app/main/apps/e-commerce/products/products.component.ts @@ -1,59 +1,134 @@ import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'; import { MatPaginator, MatSort } from '@angular/material'; import { DataSource } from '@angular/cdk/collections'; - -import { merge, Observable, BehaviorSubject, fromEvent } from 'rxjs'; +import { merge, Observable, BehaviorSubject, fromEvent, Subject } from 'rxjs'; import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators'; import { fuseAnimations } from '@fuse/animations'; import { FuseUtils } from '@fuse/utils'; -import { EcommerceProductsService } from './products.service'; +import { EcommerceProductsService } from 'app/main/apps/e-commerce/products/products.service'; +import { takeUntil } from 'rxjs/internal/operators'; @Component({ - selector : 'fuse-e-commerce-products', + selector : 'e-commerce-products', templateUrl: './products.component.html', styleUrls : ['./products.component.scss'], animations : fuseAnimations }) -export class FuseEcommerceProductsComponent implements OnInit +export class EcommerceProductsComponent implements OnInit { dataSource: FilesDataSource | null; displayedColumns = ['id', 'image', 'name', 'category', 'price', 'quantity', 'active']; - @ViewChild(MatPaginator) paginator: MatPaginator; - @ViewChild('filter') filter: ElementRef; - @ViewChild(MatSort) sort: MatSort; + @ViewChild(MatPaginator) + paginator: MatPaginator; + + @ViewChild(MatSort) + sort: MatSort; + + @ViewChild('filter') + filter: ElementRef; + + // Private + private _unsubscribeAll: Subject; constructor( - private productsService: EcommerceProductsService + private _ecommerceProductsService: EcommerceProductsService ) { + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.dataSource = new FilesDataSource(this.productsService, this.paginator, this.sort); + this.dataSource = new FilesDataSource(this._ecommerceProductsService, this.paginator, this.sort); - fromEvent(this.filter.nativeElement, 'keyup').pipe( - debounceTime(150), - distinctUntilChanged() - ).subscribe(() => { - if ( !this.dataSource ) - { - return; - } + fromEvent(this.filter.nativeElement, 'keyup') + .pipe( + takeUntil(this._unsubscribeAll), + debounceTime(150), + distinctUntilChanged() + ) + .subscribe(() => { + if ( !this.dataSource ) + { + return; + } - this.dataSource.filter = this.filter.nativeElement.value; - }); + this.dataSource.filter = this.filter.nativeElement.value; + }); } } export class FilesDataSource extends DataSource { - _filterChange = new BehaviorSubject(''); - _filteredDataChange = new BehaviorSubject(''); + private _filterChange = new BehaviorSubject(''); + private _filteredDataChange = new BehaviorSubject(''); + /** + * Constructor + * + * @param {EcommerceProductsService} _ecommerceProductsService + * @param {MatPaginator} _matPaginator + * @param {MatSort} _matSort + */ + constructor( + private _ecommerceProductsService: EcommerceProductsService, + private _matPaginator: MatPaginator, + private _matSort: MatSort + ) + { + super(); + + this.filteredData = this._ecommerceProductsService.products; + } + + /** + * Connect function called by the table to retrieve one stream containing the data to render. + * + * @returns {Observable} + */ + connect(): Observable + { + const displayDataChanges = [ + this._ecommerceProductsService.onProductsChanged, + this._matPaginator.page, + this._filterChange, + this._matSort.sortChange + ]; + + return merge(...displayDataChanges) + .pipe( + map(() => { + let data = this._ecommerceProductsService.products.slice(); + + data = this.filterData(data); + + this.filteredData = [...data]; + + data = this.sortData(data); + + // Grab the page's slice of data. + const startIndex = this._matPaginator.pageIndex * this._matPaginator.pageSize; + return data.splice(startIndex, this._matPaginator.pageSize); + } + )); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + // Filtered data get filteredData(): any { return this._filteredDataChange.value; @@ -64,6 +139,7 @@ export class FilesDataSource extends DataSource this._filteredDataChange.next(value); } + // Filter get filter(): string { return this._filterChange.value; @@ -74,44 +150,17 @@ export class FilesDataSource extends DataSource this._filterChange.next(filter); } - constructor( - private productsService: EcommerceProductsService, - private _paginator: MatPaginator, - private _sort: MatSort - ) - { - super(); - this.filteredData = this.productsService.products; - } + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- - /** Connect function called by the table to retrieve one stream containing the data to render. */ - connect(): Observable - { - const displayDataChanges = [ - this.productsService.onProductsChanged, - this._paginator.page, - this._filterChange, - this._sort.sortChange - ]; - - return merge(...displayDataChanges).pipe(map(() => { - - let data = this.productsService.products.slice(); - - data = this.filterData(data); - - this.filteredData = [...data]; - - data = this.sortData(data); - - // Grab the page's slice of data. - const startIndex = this._paginator.pageIndex * this._paginator.pageSize; - return data.splice(startIndex, this._paginator.pageSize); - } - )); - } - - filterData(data) + /** + * Filter data + * + * @param data + * @returns {any} + */ + filterData(data): any { if ( !this.filter ) { @@ -120,11 +169,15 @@ export class FilesDataSource extends DataSource return FuseUtils.filterArrayByString(data, this.filter); } - sortData(data) - : - any[] + /** + * Sort data + * + * @param data + * @returns {any[]} + */ + sortData(data): any[] { - if ( !this._sort.active || this._sort.direction === '' ) + if ( !this._matSort.active || this._matSort.direction === '' ) { return data; } @@ -133,7 +186,7 @@ export class FilesDataSource extends DataSource let propertyA: number | string = ''; let propertyB: number | string = ''; - switch ( this._sort.active ) + switch ( this._matSort.active ) { case 'id': [propertyA, propertyB] = [a.id, b.id]; @@ -158,11 +211,14 @@ export class FilesDataSource extends DataSource const valueA = isNaN(+propertyA) ? propertyA : +propertyA; const valueB = isNaN(+propertyB) ? propertyB : +propertyB; - return (valueA < valueB ? -1 : 1) * (this._sort.direction === 'asc' ? 1 : -1); + return (valueA < valueB ? -1 : 1) * (this._matSort.direction === 'asc' ? 1 : -1); }); } - disconnect() + /** + * Disconnect + */ + disconnect(): void { } } diff --git a/src/app/main/apps/e-commerce/products/products.service.ts b/src/app/main/apps/e-commerce/products/products.service.ts index 7b48839f..8c691e2e 100644 --- a/src/app/main/apps/e-commerce/products/products.service.ts +++ b/src/app/main/apps/e-commerce/products/products.service.ts @@ -9,21 +9,26 @@ export class EcommerceProductsService implements Resolve products: any[]; onProductsChanged: BehaviorSubject = new BehaviorSubject({}); + /** + * Constructor + * + * @param {HttpClient} _httpClient + */ constructor( - private http: HttpClient + private _httpClient: HttpClient ) { } /** - * Resolve + * Resolver + * * @param {ActivatedRouteSnapshot} route * @param {RouterStateSnapshot} state * @returns {Observable | Promise | any} */ resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable | Promise | any { - return new Promise((resolve, reject) => { Promise.all([ @@ -37,10 +42,15 @@ export class EcommerceProductsService implements Resolve }); } + /** + * Get products + * + * @returns {Promise} + */ getProducts(): Promise { return new Promise((resolve, reject) => { - this.http.get('api/e-commerce-products') + this._httpClient.get('api/e-commerce-products') .subscribe((response: any) => { this.products = response; this.onProductsChanged.next(this.products); diff --git a/src/app/main/apps/file-manager/file-list/file-list.component.ts b/src/app/main/apps/file-manager/file-list/file-list.component.ts index e60a133e..1ae8d725 100644 --- a/src/app/main/apps/file-manager/file-list/file-list.component.ts +++ b/src/app/main/apps/file-manager/file-list/file-list.component.ts @@ -1,58 +1,118 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { DataSource } from '@angular/cdk/collections'; -import { Observable } from 'rxjs'; +import { Observable, Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; -import { FileManagerService } from '../file-manager.service'; -import { fuseAnimations } from '@fuse/animations/index'; +import { fuseAnimations } from '@fuse/animations'; + +import { FileManagerService } from 'app/main/apps/file-manager/file-manager.service'; @Component({ - selector : 'fuse-file-list', + selector : 'file-list', templateUrl: './file-list.component.html', styleUrls : ['./file-list.component.scss'], animations : fuseAnimations }) -export class FuseFileManagerFileListComponent implements OnInit +export class FileManagerFileListComponent implements OnInit, OnDestroy { files: any; dataSource: FilesDataSource | null; displayedColumns = ['icon', 'name', 'type', 'owner', 'size', 'modified', 'detail-button']; selected: any; - constructor(private fileManagerService: FileManagerService) + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {FileManagerService} _fileManagerService + */ + constructor( + private _fileManagerService: FileManagerService + ) { - this.fileManagerService.onFilesChanged.subscribe(files => { - this.files = files; - }); - this.fileManagerService.onFileSelected.subscribe(selected => { - this.selected = selected; - }); + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.dataSource = new FilesDataSource(this.fileManagerService); + this.dataSource = new FilesDataSource(this._fileManagerService); + + this._fileManagerService.onFilesChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(files => { + this.files = files; + }); + + this._fileManagerService.onFileSelected + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(selected => { + this.selected = selected; + }); } - onSelect(selected) + /** + * On destroy + */ + ngOnDestroy(): void { - this.fileManagerService.onFileSelected.next(selected); + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * On select + * + * @param selected + */ + onSelect(selected): void + { + this._fileManagerService.onFileSelected.next(selected); } } export class FilesDataSource extends DataSource { - constructor(private fileManagerService: FileManagerService) + /** + * Constructor + * + * @param {FileManagerService} _fileManagerService + */ + constructor( + private _fileManagerService: FileManagerService + ) { super(); } - /** Connect function called by the table to retrieve one stream containing the data to render. */ + /** + * Connect function called by the table to retrieve one stream containing the data to render. + * + * @returns {Observable} + */ connect(): Observable { - return this.fileManagerService.onFilesChanged; + return this._fileManagerService.onFilesChanged; } - disconnect() + /** + * Disconnect + */ + disconnect(): void { } } diff --git a/src/app/main/apps/file-manager/file-manager.component.html b/src/app/main/apps/file-manager/file-manager.component.html index 8c45ef3d..c8edfce0 100644 --- a/src/app/main/apps/file-manager/file-manager.component.html +++ b/src/app/main/apps/file-manager/file-manager.component.html @@ -5,7 +5,7 @@ - + @@ -61,7 +61,7 @@
- +
@@ -71,7 +71,7 @@ - + diff --git a/src/app/main/apps/file-manager/file-manager.component.ts b/src/app/main/apps/file-manager/file-manager.component.ts index d7a76819..16ac95f0 100644 --- a/src/app/main/apps/file-manager/file-manager.component.ts +++ b/src/app/main/apps/file-manager/file-manager.component.ts @@ -1,30 +1,63 @@ -import { Component, OnInit, ViewEncapsulation } from '@angular/core'; +import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { fuseAnimations } from '@fuse/animations'; -import { FileManagerService } from './file-manager.service'; +import { FileManagerService } from 'app/main/apps/file-manager/file-manager.service'; @Component({ - selector : 'fuse-file-manager', + selector : 'file-manager', templateUrl : './file-manager.component.html', styleUrls : ['./file-manager.component.scss'], encapsulation: ViewEncapsulation.None, animations : fuseAnimations }) -export class FuseFileManagerComponent implements OnInit +export class FileManagerComponent implements OnInit, OnDestroy { selected: any; pathArr: string[]; - constructor(private fileManagerService: FileManagerService) + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {FileManagerService} _fileManagerService + */ + constructor( + private _fileManagerService: FileManagerService + ) { + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.fileManagerService.onFileSelected.subscribe(selected => { + this._fileManagerService.onFileSelected + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(selected => { this.selected = selected; this.pathArr = selected.location.split('>'); }); } + + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } } diff --git a/src/app/main/apps/file-manager/file-manager.module.ts b/src/app/main/apps/file-manager/file-manager.module.ts index ed33ee01..b6f0d7bf 100644 --- a/src/app/main/apps/file-manager/file-manager.module.ts +++ b/src/app/main/apps/file-manager/file-manager.module.ts @@ -1,21 +1,20 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { CdkTableModule } from '@angular/cdk/table'; - import { MatButtonModule, MatIconModule, MatRippleModule, MatSidenavModule, MatSlideToggleModule, MatTableModule } from '@angular/material'; import { FuseSharedModule } from '@fuse/shared.module'; -import { FuseFileManagerComponent } from './file-manager.component'; -import { FileManagerService } from './file-manager.service'; -import { FuseFileManagerFileListComponent } from './file-list/file-list.component'; -import { FuseFileManagerMainSidenavComponent } from './sidenavs/main/main.component'; -import { FuseFileManagerDetailsSidenavComponent } from './sidenavs/details/details.component'; +import { FileManagerService } from 'app/main/apps/file-manager/file-manager.service'; +import { FileManagerComponent } from 'app/main/apps/file-manager/file-manager.component'; +import { FileManagerDetailsSidenavComponent } from 'app/main/apps/file-manager/sidenavs/details/details.component'; +import { FileManagerFileListComponent } from 'app/main/apps/file-manager/file-list/file-list.component'; +import { FileManagerMainSidenavComponent } from 'app/main/apps/file-manager/sidenavs/main/main.component'; const routes: Routes = [ { path : '**', - component: FuseFileManagerComponent, + component: FileManagerComponent, children : [], resolve : { files: FileManagerService @@ -25,10 +24,10 @@ const routes: Routes = [ @NgModule({ declarations: [ - FuseFileManagerComponent, - FuseFileManagerFileListComponent, - FuseFileManagerMainSidenavComponent, - FuseFileManagerDetailsSidenavComponent + FileManagerComponent, + FileManagerFileListComponent, + FileManagerMainSidenavComponent, + FileManagerDetailsSidenavComponent ], imports : [ RouterModule.forChild(routes), @@ -47,6 +46,6 @@ const routes: Routes = [ FileManagerService ] }) -export class FuseFileManagerModule +export class FileManagerModule { } diff --git a/src/app/main/apps/file-manager/file-manager.service.ts b/src/app/main/apps/file-manager/file-manager.service.ts index 0ef8bf8d..d8affd98 100644 --- a/src/app/main/apps/file-manager/file-manager.service.ts +++ b/src/app/main/apps/file-manager/file-manager.service.ts @@ -9,12 +9,19 @@ export class FileManagerService implements Resolve onFilesChanged: BehaviorSubject = new BehaviorSubject({}); onFileSelected: BehaviorSubject = new BehaviorSubject({}); - constructor(private http: HttpClient) + /** + * Constructor + * + * @param {HttpClient} _httpClient + */ + constructor( + private _httpClient: HttpClient + ) { } /** - * The File Manager App Main Resolver + * Resolver * * @param {ActivatedRouteSnapshot} route * @param {RouterStateSnapshot} state @@ -22,7 +29,6 @@ export class FileManagerService implements Resolve */ resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable | Promise | any { - return new Promise((resolve, reject) => { Promise.all([ @@ -36,10 +42,15 @@ export class FileManagerService implements Resolve }); } + /** + * Get files + * + * @returns {Promise} + */ getFiles(): Promise { return new Promise((resolve, reject) => { - this.http.get('api/file-manager') + this._httpClient.get('api/file-manager') .subscribe((response: any) => { this.onFilesChanged.next(response); this.onFileSelected.next(response[0]); diff --git a/src/app/main/apps/file-manager/sidenavs/details/details.component.ts b/src/app/main/apps/file-manager/sidenavs/details/details.component.ts index 61385322..b6327e9b 100644 --- a/src/app/main/apps/file-manager/sidenavs/details/details.component.ts +++ b/src/app/main/apps/file-manager/sidenavs/details/details.component.ts @@ -1,30 +1,60 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; -import { fuseAnimations } from '@fuse/animations/index'; +import { fuseAnimations } from '@fuse/animations'; -import { FileManagerService } from '../../file-manager.service'; +import { FileManagerService } from 'app/main/apps/file-manager/file-manager.service'; @Component({ - selector : 'fuse-file-manager-details-sidenav', + selector : 'file-manager-details-sidenav', templateUrl: './details.component.html', styleUrls : ['./details.component.scss'], animations : fuseAnimations }) -export class FuseFileManagerDetailsSidenavComponent implements OnInit +export class FileManagerDetailsSidenavComponent implements OnInit, OnDestroy { - selected: any; - constructor(private fileManagerService: FileManagerService) - { + // Private + private _unsubscribeAll: Subject; + /** + * Constructor + * + * @param {FileManagerService} _fileManagerService + */ + constructor( + private _fileManagerService: FileManagerService + ) + { + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.fileManagerService.onFileSelected.subscribe(selected => { - this.selected = selected; - }); + this._fileManagerService.onFileSelected + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(selected => { + this.selected = selected; + }); } + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } } diff --git a/src/app/main/apps/file-manager/sidenavs/main/main.component.ts b/src/app/main/apps/file-manager/sidenavs/main/main.component.ts index eea05124..817f6fb3 100644 --- a/src/app/main/apps/file-manager/sidenavs/main/main.component.ts +++ b/src/app/main/apps/file-manager/sidenavs/main/main.component.ts @@ -1,11 +1,11 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-file-manager-main-sidenav', + selector : 'file-manager-main-sidenav', templateUrl: './main.component.html', styleUrls : ['./main.component.scss'] }) -export class FuseFileManagerMainSidenavComponent +export class FileManagerMainSidenavComponent { selected: any; diff --git a/src/app/main/apps/mail-ngrx/mail.component.ts b/src/app/main/apps/mail-ngrx/mail.component.ts index c218a5d0..9fbbcad6 100644 --- a/src/app/main/apps/mail-ngrx/mail.component.ts +++ b/src/app/main/apps/mail-ngrx/mail.component.ts @@ -52,9 +52,9 @@ export class FuseMailNgrxComponent implements OnInit, OnDestroy this.mails = []; this.selectedMailIds = []; - this.configService.setConfig({ + this.configService.config = { routerAnimation: 'none' - }); + }; } ngOnInit() diff --git a/src/app/main/components-third-party/components-third-party.module.ts b/src/app/main/components-third-party/components-third-party.module.ts index afd4ef64..0b9ae8c9 100644 --- a/src/app/main/components-third-party/components-third-party.module.ts +++ b/src/app/main/components-third-party/components-third-party.module.ts @@ -1,15 +1,12 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; - import { MatButtonModule, MatCheckboxModule, MatIconModule } from '@angular/material'; - import { NgxDatatableModule } from '@swimlane/ngx-datatable'; import { FuseSharedModule } from '@fuse/shared.module'; -import { GoogleMapsModule } from './google-maps/google-maps.module'; - -import { FuseNgxDatatableComponent } from './datatable/ngx-datatable.component'; +import { GoogleMapsModule } from 'app/main/components-third-party/google-maps/google-maps.module'; +import { FuseNgxDatatableComponent } from 'app/main/components-third-party/datatable/ngx-datatable.component'; const routes = [ { @@ -36,6 +33,6 @@ const routes = [ GoogleMapsModule ], }) -export class FuseComponentsThirdPartyModule +export class ComponentsThirdPartyModule { } diff --git a/src/app/main/components/angular-material/angular-material.module.ts b/src/app/main/components/angular-material/angular-material.module.ts index da8cee00..2d7420d3 100644 --- a/src/app/main/components/angular-material/angular-material.module.ts +++ b/src/app/main/components/angular-material/angular-material.module.ts @@ -1,15 +1,14 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import { MaterialModule } from 'app/main/content/components/angular-material/material.module'; - import { FuseSharedModule } from '@fuse/shared.module'; import { FuseHighlightModule } from '@fuse/components'; import { FuseWidgetModule } from '@fuse/components/widget/widget.module'; -import { EXAMPLE_LIST } from './example-components'; -import { FuseExampleViewerComponent } from './example-viewer/example-viewer'; -import { FuseAngularMaterialComponent } from './angular-material.component'; +import { MaterialModule } from 'app/main/components/angular-material/material.module'; +import { EXAMPLE_LIST } from 'app/main/components/angular-material/example-components'; +import { FuseAngularMaterialComponent } from 'app/main/components/angular-material/angular-material.component'; +import { FuseExampleViewerComponent } from 'app/main/components/angular-material/example-viewer/example-viewer'; const routes: Routes = [ { diff --git a/src/app/main/components/components.module.ts b/src/app/main/components/components.module.ts index cbd8af11..e324f324 100644 --- a/src/app/main/components/components.module.ts +++ b/src/app/main/components/components.module.ts @@ -1,24 +1,20 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; - import { MatButtonModule, MatButtonToggleModule, MatFormFieldModule, MatIconModule, MatListModule, MatMenuModule, MatSelectModule, MatSlideToggleModule, MatTabsModule } from '@angular/material'; - import { NgxChartsModule } from '@swimlane/ngx-charts'; import { FuseSharedModule } from '@fuse/shared.module'; import { FuseCountdownModule, FuseHighlightModule, FuseMaterialColorPickerModule, FuseWidgetModule } from '@fuse/components'; - -import { FuseAngularMaterialModule } from './angular-material/angular-material.module'; -import { FuseCardsDocsComponent } from './cards/cards.component'; -import { FuseCountdownDocsComponent } from './countdown/countdown.component'; -import { FuseHighlightDocsComponent } from './highlight/highlight.component'; -import { FuseMaterialColorPickerDocsComponent } from './material-color-picker/material-color-picker.component'; -import { FuseMultiLanguageDocsComponent } from './multi-language/multi-language.component'; -import { FuseNavigationDocsComponent } from './navigation/navigation.component'; -import { FuseSearchBarDocsComponent } from './search-bar/search-bar.component'; -import { FuseSidebarDocsComponent } from './sidebar/sidebar.component'; -import { FuseShortcutsDocsComponent } from './shortcuts/shortcuts.component'; -import { FuseWidgetDocsComponent } from './widget/widget.component'; +import { FuseCardsDocsComponent } from 'app/main/components/cards/cards.component'; +import { FuseCountdownDocsComponent } from 'app/main/components/countdown/countdown.component'; +import { FuseHighlightDocsComponent } from 'app/main/components/highlight/highlight.component'; +import { FuseMaterialColorPickerDocsComponent } from 'app/main/components/material-color-picker/material-color-picker.component'; +import { FuseMultiLanguageDocsComponent } from 'app/main/components/multi-language/multi-language.component'; +import { FuseNavigationDocsComponent } from 'app/main/components/navigation/navigation.component'; +import { FuseSearchBarDocsComponent } from 'app/main/components/search-bar/search-bar.component'; +import { FuseSidebarDocsComponent } from 'app/main/components/sidebar/sidebar.component'; +import { FuseShortcutsDocsComponent } from 'app/main/components/shortcuts/shortcuts.component'; +import { FuseWidgetDocsComponent } from 'app/main/components/widget/widget.component'; const routes = [ { @@ -99,6 +95,6 @@ const routes = [ FuseAngularMaterialModule ] }) -export class FuseComponentsModule +export class ComponentsModule { } diff --git a/src/app/main/pages/authentication/forgot-password-2/forgot-password-2.component.ts b/src/app/main/pages/authentication/forgot-password-2/forgot-password-2.component.ts index 18752dc5..ec751674 100644 --- a/src/app/main/pages/authentication/forgot-password-2/forgot-password-2.component.ts +++ b/src/app/main/pages/authentication/forgot-password-2/forgot-password-2.component.ts @@ -1,50 +1,92 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { FuseConfigService } from '@fuse/services/config.service'; import { fuseAnimations } from '@fuse/animations'; @Component({ - selector : 'fuse-forgot-password-2', + selector : 'forgot-password-2', templateUrl: './forgot-password-2.component.html', styleUrls : ['./forgot-password-2.component.scss'], animations : fuseAnimations }) -export class FuseForgotPassword2Component implements OnInit +export class ForgotPassword2Component implements OnInit, OnDestroy { forgotPasswordForm: FormGroup; forgotPasswordFormErrors: any; + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {FuseConfigService} _fuseConfigService + * @param {FormBuilder} _formBuilder + */ constructor( - private fuseConfig: FuseConfigService, - private formBuilder: FormBuilder + private _fuseConfigService: FuseConfigService, + private _formBuilder: FormBuilder ) { - this.fuseConfig.setConfig({ + // Configure the layout + this._fuseConfigService.config = { layout: { navigation: 'none', toolbar : 'none', footer : 'none' } - }); + }; + // Set the defaults this.forgotPasswordFormErrors = { email: {} }; + + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.forgotPasswordForm = this.formBuilder.group({ + this.forgotPasswordForm = this._formBuilder.group({ email: ['', [Validators.required, Validators.email]] }); - this.forgotPasswordForm.valueChanges.subscribe(() => { - this.onForgotPasswordFormValuesChanged(); - }); + this.forgotPasswordForm.valueChanges + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(() => { + this.onForgotPasswordFormValuesChanged(); + }); } - onForgotPasswordFormValuesChanged() + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * On form values changed + */ + onForgotPasswordFormValuesChanged(): void { for ( const field in this.forgotPasswordFormErrors ) { diff --git a/src/app/main/pages/authentication/forgot-password-2/forgot-password-2.module.ts b/src/app/main/pages/authentication/forgot-password-2/forgot-password-2.module.ts index 8192d5d0..bc985e94 100644 --- a/src/app/main/pages/authentication/forgot-password-2/forgot-password-2.module.ts +++ b/src/app/main/pages/authentication/forgot-password-2/forgot-password-2.module.ts @@ -1,22 +1,21 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; - import { MatButtonModule, MatFormFieldModule, MatInputModule } from '@angular/material'; import { FuseSharedModule } from '@fuse/shared.module'; -import { FuseForgotPassword2Component } from './forgot-password-2.component'; +import { ForgotPassword2Component } from 'app/main/pages/authentication/forgot-password-2/forgot-password-2.component'; const routes = [ { path : 'auth/forgot-password-2', - component: FuseForgotPassword2Component + component: ForgotPassword2Component } ]; @NgModule({ declarations: [ - FuseForgotPassword2Component + ForgotPassword2Component ], imports : [ RouterModule.forChild(routes), diff --git a/src/app/main/pages/authentication/forgot-password/forgot-password.component.ts b/src/app/main/pages/authentication/forgot-password/forgot-password.component.ts index eebeacf7..f27a85dd 100644 --- a/src/app/main/pages/authentication/forgot-password/forgot-password.component.ts +++ b/src/app/main/pages/authentication/forgot-password/forgot-password.component.ts @@ -1,50 +1,92 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { FuseConfigService } from '@fuse/services/config.service'; import { fuseAnimations } from '@fuse/animations'; @Component({ - selector : 'fuse-forgot-password', + selector : 'forgot-password', templateUrl: './forgot-password.component.html', styleUrls : ['./forgot-password.component.scss'], animations : fuseAnimations }) -export class FuseForgotPasswordComponent implements OnInit +export class ForgotPasswordComponent implements OnInit, OnDestroy { forgotPasswordForm: FormGroup; forgotPasswordFormErrors: any; + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {FuseConfigService} _fuseConfigService + * @param {FormBuilder} _formBuilder + */ constructor( - private fuseConfig: FuseConfigService, - private formBuilder: FormBuilder + private _fuseConfigService: FuseConfigService, + private _formBuilder: FormBuilder ) { - this.fuseConfig.setConfig({ + // Configure the layout + this._fuseConfigService.config = { layout: { navigation: 'none', toolbar : 'none', footer : 'none' } - }); + }; + // Set the defaults this.forgotPasswordFormErrors = { email: {} }; + + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.forgotPasswordForm = this.formBuilder.group({ + this.forgotPasswordForm = this._formBuilder.group({ email: ['', [Validators.required, Validators.email]] }); - this.forgotPasswordForm.valueChanges.subscribe(() => { - this.onForgotPasswordFormValuesChanged(); - }); + this.forgotPasswordForm.valueChanges + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(() => { + this.onForgotPasswordFormValuesChanged(); + }); } - onForgotPasswordFormValuesChanged() + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * On form values changed + */ + onForgotPasswordFormValuesChanged(): void { for ( const field in this.forgotPasswordFormErrors ) { diff --git a/src/app/main/pages/authentication/forgot-password/forgot-password.module.ts b/src/app/main/pages/authentication/forgot-password/forgot-password.module.ts index 719e4496..c9ac1439 100644 --- a/src/app/main/pages/authentication/forgot-password/forgot-password.module.ts +++ b/src/app/main/pages/authentication/forgot-password/forgot-password.module.ts @@ -1,22 +1,21 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; - import { MatButtonModule, MatFormFieldModule, MatInputModule } from '@angular/material'; import { FuseSharedModule } from '@fuse/shared.module'; -import { FuseForgotPasswordComponent } from './forgot-password.component'; +import { ForgotPasswordComponent } from 'app/main/pages/authentication/forgot-password/forgot-password.component'; const routes = [ { path : 'auth/forgot-password', - component: FuseForgotPasswordComponent + component: ForgotPasswordComponent } ]; @NgModule({ declarations: [ - FuseForgotPasswordComponent + ForgotPasswordComponent ], imports : [ RouterModule.forChild(routes), @@ -25,7 +24,7 @@ const routes = [ MatFormFieldModule, MatInputModule, - FuseSharedModule, + FuseSharedModule ] }) export class ForgotPasswordModule diff --git a/src/app/main/pages/authentication/lock/lock.component.ts b/src/app/main/pages/authentication/lock/lock.component.ts index 11bd2125..ac1398a4 100644 --- a/src/app/main/pages/authentication/lock/lock.component.ts +++ b/src/app/main/pages/authentication/lock/lock.component.ts @@ -1,42 +1,65 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { FuseConfigService } from '@fuse/services/config.service'; import { fuseAnimations } from '@fuse/animations'; @Component({ - selector : 'fuse-lock', + selector : 'lock', templateUrl: './lock.component.html', styleUrls : ['./lock.component.scss'], animations : fuseAnimations }) -export class FuseLockComponent implements OnInit +export class LockComponent implements OnInit, OnDestroy { lockForm: FormGroup; lockFormErrors: any; + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {FuseConfigService} _fuseConfigService + * @param {FormBuilder} _formBuilder + */ constructor( - private fuseConfig: FuseConfigService, - private formBuilder: FormBuilder + private _fuseConfigService: FuseConfigService, + private _formBuilder: FormBuilder ) { - this.fuseConfig.setConfig({ + // Configure the layout + this._fuseConfigService.config = { layout: { navigation: 'none', toolbar : 'none', footer : 'none' } - }); + }; + // Set the defaults this.lockFormErrors = { username: {}, password: {} }; + + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.lockForm = this.formBuilder.group({ + this.lockForm = this._formBuilder.group({ username: [ { value : 'Katherine', @@ -46,12 +69,31 @@ export class FuseLockComponent implements OnInit password: ['', Validators.required] }); - this.lockForm.valueChanges.subscribe(() => { - this.onLockFormValuesChanged(); - }); + this.lockForm.valueChanges + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(() => { + this.onLockFormValuesChanged(); + }); } - onLockFormValuesChanged() + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * On form values changed + */ + onLockFormValuesChanged(): void { for ( const field in this.lockFormErrors ) { diff --git a/src/app/main/pages/authentication/lock/lock.module.ts b/src/app/main/pages/authentication/lock/lock.module.ts index 0488d20b..22b267f2 100644 --- a/src/app/main/pages/authentication/lock/lock.module.ts +++ b/src/app/main/pages/authentication/lock/lock.module.ts @@ -1,22 +1,21 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; - import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule } from '@angular/material'; import { FuseSharedModule } from '@fuse/shared.module'; -import { FuseLockComponent } from './lock.component'; +import { LockComponent } from 'app/main/pages/authentication/lock/lock.component'; const routes = [ { path : 'auth/lock', - component: FuseLockComponent + component: LockComponent } ]; @NgModule({ declarations: [ - FuseLockComponent + LockComponent ], imports : [ RouterModule.forChild(routes), diff --git a/src/app/main/pages/authentication/login-2/login-2.component.ts b/src/app/main/pages/authentication/login-2/login-2.component.ts index bc735783..0531a0e2 100644 --- a/src/app/main/pages/authentication/login-2/login-2.component.ts +++ b/src/app/main/pages/authentication/login-2/login-2.component.ts @@ -1,52 +1,94 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { FuseConfigService } from '@fuse/services/config.service'; import { fuseAnimations } from '@fuse/animations'; @Component({ - selector : 'fuse-login-2', + selector : 'login-2', templateUrl: './login-2.component.html', styleUrls : ['./login-2.component.scss'], animations : fuseAnimations }) -export class FuseLogin2Component implements OnInit +export class Login2Component implements OnInit, OnDestroy { loginForm: FormGroup; loginFormErrors: any; + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {FuseConfigService} _fuseConfigService + * @param {FormBuilder} _formBuilder + */ constructor( - private fuseConfig: FuseConfigService, - private formBuilder: FormBuilder + private _fuseConfigService: FuseConfigService, + private _formBuilder: FormBuilder ) { - this.fuseConfig.setConfig({ + // Configure the layout + this._fuseConfigService.config = { layout: { navigation: 'none', toolbar : 'none', footer : 'none' } - }); + }; + // Set the defaults this.loginFormErrors = { email : {}, password: {} }; + + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.loginForm = this.formBuilder.group({ + this.loginForm = this._formBuilder.group({ email : ['', [Validators.required, Validators.email]], password: ['', Validators.required] }); - this.loginForm.valueChanges.subscribe(() => { - this.onLoginFormValuesChanged(); - }); + this.loginForm.valueChanges + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(() => { + this.onLoginFormValuesChanged(); + }); } - onLoginFormValuesChanged() + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * On form values changed + */ + onLoginFormValuesChanged(): void { for ( const field in this.loginFormErrors ) { diff --git a/src/app/main/pages/authentication/login-2/login-2.module.ts b/src/app/main/pages/authentication/login-2/login-2.module.ts index 9f7f932d..d8f653a7 100644 --- a/src/app/main/pages/authentication/login-2/login-2.module.ts +++ b/src/app/main/pages/authentication/login-2/login-2.module.ts @@ -1,22 +1,21 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; - import { MatButtonModule, MatCheckboxModule, MatFormFieldModule, MatInputModule } from '@angular/material'; import { FuseSharedModule } from '@fuse/shared.module'; -import { FuseLogin2Component } from './login-2.component'; +import { Login2Component } from 'app/main/pages/authentication/login-2/login-2.component'; const routes = [ { path : 'auth/login-2', - component: FuseLogin2Component + component: Login2Component } ]; @NgModule({ declarations: [ - FuseLogin2Component + Login2Component ], imports : [ RouterModule.forChild(routes), diff --git a/src/app/main/pages/authentication/login/login.component.ts b/src/app/main/pages/authentication/login/login.component.ts index 85e8a952..6f272924 100644 --- a/src/app/main/pages/authentication/login/login.component.ts +++ b/src/app/main/pages/authentication/login/login.component.ts @@ -1,52 +1,94 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { FuseConfigService } from '@fuse/services/config.service'; import { fuseAnimations } from '@fuse/animations'; @Component({ - selector : 'fuse-login', + selector : 'login', templateUrl: './login.component.html', styleUrls : ['./login.component.scss'], animations : fuseAnimations }) -export class FuseLoginComponent implements OnInit +export class LoginComponent implements OnInit, OnDestroy { loginForm: FormGroup; loginFormErrors: any; + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {FuseConfigService} _fuseConfigService + * @param {FormBuilder} _formBuilder + */ constructor( - private fuseConfig: FuseConfigService, - private formBuilder: FormBuilder + private _fuseConfigService: FuseConfigService, + private _formBuilder: FormBuilder ) { - this.fuseConfig.setConfig({ + // Configure the layout + this._fuseConfigService.config = { layout: { navigation: 'none', toolbar : 'none', footer : 'none' } - }); + }; + // Set the defaults this.loginFormErrors = { email : {}, password: {} }; + + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.loginForm = this.formBuilder.group({ + this.loginForm = this._formBuilder.group({ email : ['', [Validators.required, Validators.email]], password: ['', Validators.required] }); - this.loginForm.valueChanges.subscribe(() => { - this.onLoginFormValuesChanged(); - }); + this.loginForm.valueChanges + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(() => { + this.onLoginFormValuesChanged(); + }); } - onLoginFormValuesChanged() + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * On form values changed + */ + onLoginFormValuesChanged(): void { for ( const field in this.loginFormErrors ) { diff --git a/src/app/main/pages/authentication/login/login.module.ts b/src/app/main/pages/authentication/login/login.module.ts index e5ea2e03..12d5eebd 100644 --- a/src/app/main/pages/authentication/login/login.module.ts +++ b/src/app/main/pages/authentication/login/login.module.ts @@ -1,22 +1,21 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; - import { MatButtonModule, MatCheckboxModule, MatFormFieldModule, MatInputModule } from '@angular/material'; import { FuseSharedModule } from '@fuse/shared.module'; -import { FuseLoginComponent } from './login.component'; +import { LoginComponent } from 'app/main/pages/authentication/login/login.component'; const routes = [ { path : 'auth/login', - component: FuseLoginComponent + component: LoginComponent } ]; @NgModule({ declarations: [ - FuseLoginComponent + LoginComponent ], imports : [ RouterModule.forChild(routes), diff --git a/src/app/main/pages/authentication/mail-confirm/mail-confirm.component.ts b/src/app/main/pages/authentication/mail-confirm/mail-confirm.component.ts index 8430d99d..56b6788e 100644 --- a/src/app/main/pages/authentication/mail-confirm/mail-confirm.component.ts +++ b/src/app/main/pages/authentication/mail-confirm/mail-confirm.component.ts @@ -9,19 +9,24 @@ import { fuseAnimations } from '@fuse/animations'; styleUrls : ['./mail-confirm.component.scss'], animations : fuseAnimations }) -export class FuseMailConfirmComponent +export class MailConfirmComponent { - + /** + * Constructor + * + * @param {FuseConfigService} _fuseConfigService + */ constructor( - private fuseConfig: FuseConfigService + private _fuseConfigService: FuseConfigService ) { - this.fuseConfig.setConfig({ + // Configure the layout + this._fuseConfigService.config = { layout: { navigation: 'none', toolbar : 'none', footer : 'none' } - }); + }; } } diff --git a/src/app/main/pages/authentication/mail-confirm/mail-confirm.module.ts b/src/app/main/pages/authentication/mail-confirm/mail-confirm.module.ts index 1c56c4a9..bdd2df19 100644 --- a/src/app/main/pages/authentication/mail-confirm/mail-confirm.module.ts +++ b/src/app/main/pages/authentication/mail-confirm/mail-confirm.module.ts @@ -1,22 +1,21 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; - import { MatIconModule } from '@angular/material'; import { FuseSharedModule } from '@fuse/shared.module'; -import { FuseMailConfirmComponent } from './mail-confirm.component'; +import { MailConfirmComponent } from 'app/main/pages/authentication/mail-confirm/mail-confirm.component'; const routes = [ { path : 'auth/mail-confirm', - component: FuseMailConfirmComponent + component: MailConfirmComponent } ]; @NgModule({ declarations: [ - FuseMailConfirmComponent + MailConfirmComponent ], imports : [ RouterModule.forChild(routes), diff --git a/src/app/main/pages/authentication/register-2/register-2.component.ts b/src/app/main/pages/authentication/register-2/register-2.component.ts index 2c2f3350..fb403b1f 100644 --- a/src/app/main/pages/authentication/register-2/register-2.component.ts +++ b/src/app/main/pages/authentication/register-2/register-2.component.ts @@ -1,56 +1,98 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { FuseConfigService } from '@fuse/services/config.service'; import { fuseAnimations } from '@fuse/animations'; @Component({ - selector : 'fuse-register-2', + selector : 'register-2', templateUrl: './register-2.component.html', styleUrls : ['./register-2.component.scss'], animations : fuseAnimations }) -export class FuseRegister2Component implements OnInit +export class Register2Component implements OnInit, OnDestroy { registerForm: FormGroup; registerFormErrors: any; + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {FuseConfigService} _fuseConfigService + * @param {FormBuilder} _formBuilder + */ constructor( - private fuseConfig: FuseConfigService, - private formBuilder: FormBuilder + private _fuseConfigService: FuseConfigService, + private _formBuilder: FormBuilder ) { - this.fuseConfig.setConfig({ + // Configure the layout + this._fuseConfigService.config = { layout: { navigation: 'none', toolbar : 'none', footer : 'none' } - }); + }; + // Set the defaults this.registerFormErrors = { name : {}, email : {}, password : {}, passwordConfirm: {} }; + + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.registerForm = this.formBuilder.group({ + this.registerForm = this._formBuilder.group({ name : ['', Validators.required], email : ['', [Validators.required, Validators.email]], password : ['', Validators.required], passwordConfirm: ['', [Validators.required, confirmPassword]] }); - this.registerForm.valueChanges.subscribe(() => { + this.registerForm.valueChanges + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(() => { this.onRegisterFormValuesChanged(); }); } - onRegisterFormValuesChanged() + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * On form values changed + */ + onRegisterFormValuesChanged(): void { for ( const field in this.registerFormErrors ) { @@ -73,7 +115,13 @@ export class FuseRegister2Component implements OnInit } } -function confirmPassword(control: AbstractControl) +/** + * Confirm password + * + * @param {AbstractControl} control + * @returns {{passwordsNotMatch: boolean}} + */ +function confirmPassword(control: AbstractControl): any { if ( !control.parent || !control ) { diff --git a/src/app/main/pages/authentication/register-2/register-2.module.ts b/src/app/main/pages/authentication/register-2/register-2.module.ts index 68458fb5..3b689cb3 100644 --- a/src/app/main/pages/authentication/register-2/register-2.module.ts +++ b/src/app/main/pages/authentication/register-2/register-2.module.ts @@ -1,22 +1,21 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; - import { MatButtonModule, MatCheckboxModule, MatFormFieldModule, MatInputModule } from '@angular/material'; import { FuseSharedModule } from '@fuse/shared.module'; -import { FuseRegister2Component } from './register-2.component'; +import { Register2Component } from 'app/main/pages/authentication/register-2/register-2.component'; const routes = [ { path : 'auth/register-2', - component: FuseRegister2Component + component: Register2Component } ]; @NgModule({ declarations: [ - FuseRegister2Component + Register2Component ], imports : [ RouterModule.forChild(routes), diff --git a/src/app/main/pages/authentication/register/register.component.ts b/src/app/main/pages/authentication/register/register.component.ts index fea8d9ec..0002f0cd 100644 --- a/src/app/main/pages/authentication/register/register.component.ts +++ b/src/app/main/pages/authentication/register/register.component.ts @@ -1,56 +1,92 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms'; import { FuseConfigService } from '@fuse/services/config.service'; import { fuseAnimations } from '@fuse/animations'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/internal/operators'; @Component({ - selector : 'fuse-register', + selector : 'register', templateUrl: './register.component.html', styleUrls : ['./register.component.scss'], animations : fuseAnimations }) -export class FuseRegisterComponent implements OnInit +export class RegisterComponent implements OnInit, OnDestroy { registerForm: FormGroup; registerFormErrors: any; + // Private + private _unsubscribeAll: Subject; + constructor( - private fuseConfig: FuseConfigService, - private formBuilder: FormBuilder + private _fuseConfigService: FuseConfigService, + private _formBuilder: FormBuilder ) { - this.fuseConfig.setConfig({ + // Configure the layout + this._fuseConfigService.config = { layout: { navigation: 'none', toolbar : 'none', footer : 'none' } - }); + }; + // Set the defaults this.registerFormErrors = { name : {}, email : {}, password : {}, passwordConfirm: {} }; + + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.registerForm = this.formBuilder.group({ + this.registerForm = this._formBuilder.group({ name : ['', Validators.required], email : ['', [Validators.required, Validators.email]], password : ['', Validators.required], passwordConfirm: ['', [Validators.required, confirmPassword]] }); - this.registerForm.valueChanges.subscribe(() => { - this.onRegisterFormValuesChanged(); - }); + this.registerForm.valueChanges + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(() => { + this.onRegisterFormValuesChanged(); + }); } - onRegisterFormValuesChanged() + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * On form values changed + */ + onRegisterFormValuesChanged(): void { for ( const field in this.registerFormErrors ) { @@ -73,7 +109,13 @@ export class FuseRegisterComponent implements OnInit } } -function confirmPassword(control: AbstractControl) +/** + * Confirm password + * + * @param {AbstractControl} control + * @returns {{passwordsNotMatch: boolean}} + */ +function confirmPassword(control: AbstractControl): any { if ( !control.parent || !control ) { diff --git a/src/app/main/pages/authentication/register/register.module.ts b/src/app/main/pages/authentication/register/register.module.ts index f2c80a88..117198e9 100644 --- a/src/app/main/pages/authentication/register/register.module.ts +++ b/src/app/main/pages/authentication/register/register.module.ts @@ -1,22 +1,21 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; - import { MatButtonModule, MatCheckboxModule, MatFormFieldModule, MatInputModule } from '@angular/material'; import { FuseSharedModule } from '@fuse/shared.module'; -import { FuseRegisterComponent } from './register.component'; +import { RegisterComponent } from 'app/main/pages/authentication/register/register.component'; const routes = [ { path : 'auth/register', - component: FuseRegisterComponent + component: RegisterComponent } ]; @NgModule({ declarations: [ - FuseRegisterComponent + RegisterComponent ], imports : [ RouterModule.forChild(routes), diff --git a/src/app/main/pages/authentication/reset-password-2/reset-password-2.component.ts b/src/app/main/pages/authentication/reset-password-2/reset-password-2.component.ts index dea9e605..da812b29 100644 --- a/src/app/main/pages/authentication/reset-password-2/reset-password-2.component.ts +++ b/src/app/main/pages/authentication/reset-password-2/reset-password-2.component.ts @@ -1,54 +1,90 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms'; import { FuseConfigService } from '@fuse/services/config.service'; import { fuseAnimations } from '@fuse/animations'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/internal/operators'; @Component({ - selector : 'fuse-reset-password-2', + selector : 'reset-password-2', templateUrl: './reset-password-2.component.html', styleUrls : ['./reset-password-2.component.scss'], animations : fuseAnimations }) -export class FuseResetPassword2Component implements OnInit +export class ResetPassword2Component implements OnInit, OnDestroy { resetPasswordForm: FormGroup; resetPasswordFormErrors: any; + // Private + private _unsubscribeAll: Subject; + constructor( - private fuseConfig: FuseConfigService, - private formBuilder: FormBuilder + private _fuseConfigService: FuseConfigService, + private _formBuilder: FormBuilder ) { - this.fuseConfig.setConfig({ + // Configure the layout + this._fuseConfigService.config = { layout: { navigation: 'none', toolbar : 'none', footer : 'none' } - }); + }; + // Set the defaults this.resetPasswordFormErrors = { email : {}, password : {}, passwordConfirm: {} }; + + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.resetPasswordForm = this.formBuilder.group({ + this.resetPasswordForm = this._formBuilder.group({ email : ['', [Validators.required, Validators.email]], password : ['', Validators.required], passwordConfirm: ['', [Validators.required, confirmPassword]] }); - this.resetPasswordForm.valueChanges.subscribe(() => { - this.onResetPasswordFormValuesChanged(); - }); + this.resetPasswordForm.valueChanges + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(() => { + this.onResetPasswordFormValuesChanged(); + }); } - onResetPasswordFormValuesChanged() + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * On form values changed + */ + onResetPasswordFormValuesChanged(): void { for ( const field in this.resetPasswordFormErrors ) { @@ -71,7 +107,13 @@ export class FuseResetPassword2Component implements OnInit } } -function confirmPassword(control: AbstractControl) +/** + * Confirm password + * + * @param {AbstractControl} control + * @returns {{passwordsNotMatch: boolean}} + */ +function confirmPassword(control: AbstractControl): any { if ( !control.parent || !control ) { diff --git a/src/app/main/pages/authentication/reset-password-2/reset-password-2.module.ts b/src/app/main/pages/authentication/reset-password-2/reset-password-2.module.ts index ef10b6f8..5d70a2a0 100644 --- a/src/app/main/pages/authentication/reset-password-2/reset-password-2.module.ts +++ b/src/app/main/pages/authentication/reset-password-2/reset-password-2.module.ts @@ -1,22 +1,21 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; - import { MatButtonModule, MatFormFieldModule, MatInputModule } from '@angular/material'; import { FuseSharedModule } from '@fuse/shared.module'; -import { FuseResetPassword2Component } from './reset-password-2.component'; +import { ResetPassword2Component } from 'app/main/pages/authentication/reset-password-2/reset-password-2.component'; const routes = [ { path : 'auth/reset-password-2', - component: FuseResetPassword2Component + component: ResetPassword2Component } ]; @NgModule({ declarations: [ - FuseResetPassword2Component + ResetPassword2Component ], imports : [ RouterModule.forChild(routes), diff --git a/src/app/main/pages/authentication/reset-password/reset-password.component.ts b/src/app/main/pages/authentication/reset-password/reset-password.component.ts index 3c86a632..749d5a4b 100644 --- a/src/app/main/pages/authentication/reset-password/reset-password.component.ts +++ b/src/app/main/pages/authentication/reset-password/reset-password.component.ts @@ -1,54 +1,96 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { FuseConfigService } from '@fuse/services/config.service'; import { fuseAnimations } from '@fuse/animations'; @Component({ - selector : 'fuse-reset-password', + selector : 'reset-password', templateUrl: './reset-password.component.html', styleUrls : ['./reset-password.component.scss'], animations : fuseAnimations }) -export class FuseResetPasswordComponent implements OnInit +export class ResetPasswordComponent implements OnInit, OnDestroy { resetPasswordForm: FormGroup; resetPasswordFormErrors: any; + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {FuseConfigService} _fuseConfigService + * @param {FormBuilder} _formBuilder + */ constructor( - private fuseConfig: FuseConfigService, - private formBuilder: FormBuilder + private _fuseConfigService: FuseConfigService, + private _formBuilder: FormBuilder ) { - this.fuseConfig.setConfig({ + // Configure the layout + this._fuseConfigService.config = { layout: { navigation: 'none', toolbar : 'none', footer : 'none' } - }); + }; + // Set the defaults this.resetPasswordFormErrors = { email : {}, password : {}, passwordConfirm: {} }; + + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.resetPasswordForm = this.formBuilder.group({ + this.resetPasswordForm = this._formBuilder.group({ email : ['', [Validators.required, Validators.email]], password : ['', Validators.required], passwordConfirm: ['', [Validators.required, confirmPassword]] }); - this.resetPasswordForm.valueChanges.subscribe(() => { - this.onResetPasswordFormValuesChanged(); - }); + this.resetPasswordForm.valueChanges + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(() => { + this.onResetPasswordFormValuesChanged(); + }); } - onResetPasswordFormValuesChanged() + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * On form values changed + */ + onResetPasswordFormValuesChanged(): void { for ( const field in this.resetPasswordFormErrors ) { @@ -71,7 +113,13 @@ export class FuseResetPasswordComponent implements OnInit } } -function confirmPassword(control: AbstractControl) +/** + * Confirm password + * + * @param {AbstractControl} control + * @returns {{passwordsNotMatch: boolean}} + */ +function confirmPassword(control: AbstractControl): any { if ( !control.parent || !control ) { diff --git a/src/app/main/pages/authentication/reset-password/reset-password.module.ts b/src/app/main/pages/authentication/reset-password/reset-password.module.ts index 21f8e358..ed454e5d 100644 --- a/src/app/main/pages/authentication/reset-password/reset-password.module.ts +++ b/src/app/main/pages/authentication/reset-password/reset-password.module.ts @@ -1,22 +1,21 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; - import { MatButtonModule, MatFormFieldModule, MatInputModule } from '@angular/material'; import { FuseSharedModule } from '@fuse/shared.module'; -import { FuseResetPasswordComponent } from './reset-password.component'; +import { ResetPasswordComponent } from 'app/main/pages/authentication/reset-password/reset-password.component'; const routes = [ { path : 'auth/reset-password', - component: FuseResetPasswordComponent + component: ResetPasswordComponent } ]; @NgModule({ declarations: [ - FuseResetPasswordComponent + ResetPasswordComponent ], imports : [ RouterModule.forChild(routes), diff --git a/src/app/main/pages/coming-soon/coming-soon.component.ts b/src/app/main/pages/coming-soon/coming-soon.component.ts index 53b252c1..ba95f31c 100644 --- a/src/app/main/pages/coming-soon/coming-soon.component.ts +++ b/src/app/main/pages/coming-soon/coming-soon.component.ts @@ -20,13 +20,13 @@ export class FuseComingSoonComponent implements OnInit private formBuilder: FormBuilder ) { - this.fuseConfig.setConfig({ + this.fuseConfig.config = { layout: { navigation: 'none', toolbar : 'none', footer : 'none' } - }); + }; this.comingSoonFormErrors = { email: {} diff --git a/src/app/main/pages/errors/404/error-404.component.ts b/src/app/main/pages/errors/404/error-404.component.ts index 135c99da..d1e1f17c 100644 --- a/src/app/main/pages/errors/404/error-404.component.ts +++ b/src/app/main/pages/errors/404/error-404.component.ts @@ -13,12 +13,12 @@ export class FuseError404Component private fuseConfig: FuseConfigService ) { - this.fuseConfig.setConfig({ + this.fuseConfig.config = { layout: { navigation: 'none', toolbar : 'none', footer : 'none' } - }); + }; } } diff --git a/src/app/main/pages/errors/500/error-500.component.ts b/src/app/main/pages/errors/500/error-500.component.ts index b4014e47..4225f9a9 100644 --- a/src/app/main/pages/errors/500/error-500.component.ts +++ b/src/app/main/pages/errors/500/error-500.component.ts @@ -13,12 +13,12 @@ export class FuseError500Component private fuseConfig: FuseConfigService ) { - this.fuseConfig.setConfig({ + this.fuseConfig.config = { layout: { navigation: 'none', toolbar : 'none', footer : 'none' } - }); + }; } } diff --git a/src/app/main/pages/maintenance/maintenance.component.ts b/src/app/main/pages/maintenance/maintenance.component.ts index 8ba28d25..cdedd8f7 100644 --- a/src/app/main/pages/maintenance/maintenance.component.ts +++ b/src/app/main/pages/maintenance/maintenance.component.ts @@ -15,12 +15,12 @@ export class FuseMaintenanceComponent private fuseConfig: FuseConfigService ) { - this.fuseConfig.setConfig({ + this.fuseConfig.config = { layout: { navigation: 'none', toolbar : 'none', footer : 'none' } - }); + }; } } diff --git a/src/app/main/pages/pages.module.ts b/src/app/main/pages/pages.module.ts index 96a6ba58..8cef2f0e 100644 --- a/src/app/main/pages/pages.module.ts +++ b/src/app/main/pages/pages.module.ts @@ -1,30 +1,30 @@ import { NgModule } from '@angular/core'; -import { LoginModule } from './authentication/login/login.module'; -import { Login2Module } from './authentication/login-2/login-2.module'; -import { RegisterModule } from './authentication/register/register.module'; -import { Register2Module } from './authentication/register-2/register-2.module'; -import { ForgotPasswordModule } from './authentication/forgot-password/forgot-password.module'; -import { ForgotPassword2Module } from './authentication/forgot-password-2/forgot-password-2.module'; -import { ResetPasswordModule } from './authentication/reset-password/reset-password.module'; -import { ResetPassword2Module } from './authentication/reset-password-2/reset-password-2.module'; -import { LockModule } from './authentication/lock/lock.module'; -import { MailConfirmModule } from './authentication/mail-confirm/mail-confirm.module'; -import { ComingSoonModule } from './coming-soon/coming-soon.module'; -import { Error404Module } from './errors/404/error-404.module'; -import { Error500Module } from './errors/500/error-500.module'; -import { InvoiceCompactModule } from './invoices/compact/compact.module'; -import { InvoiceModernModule } from './invoices/modern/modern.module'; -import { MaintenanceModule } from './maintenance/maintenence.module'; -import { PricingModule } from './pricing/pricing.module'; -import { ProfileModule } from './profile/profile.module'; -import { SearchModule } from './search/search.module'; -import { FaqModule } from './faq/faq.module'; -import { KnowledgeBaseModule } from './knowledge-base/knowledge-base.module'; +import { LoginModule } from 'app/main/pages/authentication/login/login.module'; +import { Login2Module } from 'app/main/pages/authentication/login-2/login-2.module'; +import { RegisterModule } from 'app/main/pages/authentication/register/register.module'; +import { Register2Module } from 'app/main/pages/authentication/register-2/register-2.module'; +import { ForgotPasswordModule } from 'app/main/pages/authentication/forgot-password/forgot-password.module'; +import { ForgotPassword2Module } from 'app/main/pages/authentication/forgot-password-2/forgot-password-2.module'; +import { ResetPasswordModule } from 'app/main/pages/authentication/reset-password/reset-password.module'; +import { ResetPassword2Module } from 'app/main/pages/authentication/reset-password-2/reset-password-2.module'; +import { LockModule } from 'app/main/pages/authentication/lock/lock.module'; +import { MailConfirmModule } from 'app/main/pages/authentication/mail-confirm/mail-confirm.module'; +import { ComingSoonModule } from 'app/main/pages/coming-soon/coming-soon.module'; +import { Error404Module } from 'app/main/pages/errors/404/error-404.module'; +import { Error500Module } from 'app/main/pages/errors/500/error-500.module'; +import { InvoiceModernModule } from 'app/main/pages/invoices/modern/modern.module'; +import { InvoiceCompactModule } from 'app/main/pages/invoices/compact/compact.module'; +import { MaintenanceModule } from 'app/main/pages/maintenance/maintenence.module'; +import { PricingModule } from 'app/main/pages/pricing/pricing.module'; +import { ProfileModule } from 'app/main/pages/profile/profile.module'; +import { SearchModule } from 'app/main/pages/search/search.module'; +import { FaqModule } from 'app/main/pages/faq/faq.module'; +import { KnowledgeBaseModule } from 'app/main/pages/knowledge-base/knowledge-base.module'; @NgModule({ imports: [ - // Auth + // Authentication LoginModule, Login2Module, RegisterModule, @@ -66,7 +66,7 @@ import { KnowledgeBaseModule } from './knowledge-base/knowledge-base.module'; KnowledgeBaseModule ] }) -export class FusePagesModule +export class PagesModule { } diff --git a/src/app/main/services/services.module.ts b/src/app/main/services/services.module.ts index 6c44c3b3..202d3b15 100644 --- a/src/app/main/services/services.module.ts +++ b/src/app/main/services/services.module.ts @@ -1,13 +1,12 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; - import { MatIconModule } from '@angular/material'; import { FuseSharedModule } from '@fuse/shared.module'; import { FuseHighlightModule } from '@fuse/components'; -import { FuseConfigServiceDocsComponent } from './config/config.component'; -import { FuseSplashScreenServiceDocsComponent } from './splash-screen/splash-screen.component'; +import { FuseConfigServiceDocsComponent } from 'app/main/services/config/config.component'; +import { FuseSplashScreenServiceDocsComponent } from 'app/main/services/splash-screen/splash-screen.component'; const routes = [ { @@ -35,6 +34,6 @@ const routes = [ ], }) -export class FuseServicesModule +export class ServicesModule { } diff --git a/src/app/main/ui/ui.module.ts b/src/app/main/ui/ui.module.ts index 31acd6a4..f6798a1c 100644 --- a/src/app/main/ui/ui.module.ts +++ b/src/app/main/ui/ui.module.ts @@ -1,11 +1,11 @@ import { NgModule } from '@angular/core'; -import { UIFormsModule } from './forms/forms.module'; -import { UIIconsModule } from './icons/icons.module'; -import { UITypographyModule } from './typography/typography.module'; -import { UIHelperClassesModule } from './helper-classes/helper-classes.module'; -import { UIPageLayoutsModule } from './page-layouts/page-layouts.module'; -import { UIColorsModule } from './colors/colors.module'; +import { UIFormsModule } from 'app/main/ui/forms/forms.module'; +import { UIIconsModule } from 'app/main/ui/icons/icons.module'; +import { UITypographyModule } from 'app/main/ui/typography/typography.module'; +import { UIHelperClassesModule } from 'app/main/ui/helper-classes/helper-classes.module'; +import { UIPageLayoutsModule } from 'app/main/ui/page-layouts/page-layouts.module'; +import { UIColorsModule } from 'app/main/ui/colors/colors.module'; @NgModule({ imports: [ diff --git a/src/app/store/actions/router.action.ts b/src/app/store/actions/router.action.ts index 52fcf954..169d86d6 100644 --- a/src/app/store/actions/router.action.ts +++ b/src/app/store/actions/router.action.ts @@ -9,6 +9,11 @@ export class Go implements Action { readonly type = GO; + /** + * Constructor + * + * @param {{path: any[]; query?: object; extras?: NavigationExtras}} payload + */ constructor( public payload: { path: any[]; diff --git a/src/app/store/effects/router.effect.ts b/src/app/store/effects/router.effect.ts index f0935b78..a9cbf25e 100644 --- a/src/app/store/effects/router.effect.ts +++ b/src/app/store/effects/router.effect.ts @@ -1,15 +1,21 @@ import { Injectable } from '@angular/core'; import { Router } from '@angular/router'; import { Location } from '@angular/common'; - import { Effect, Actions } from '@ngrx/effects'; -import * as RouterActions from '../actions/router.action'; - import { tap, map } from 'rxjs/operators'; +import * as RouterActions from 'app/store/actions/router.action'; + @Injectable() export class RouterEffects { + /** + * Constructor + * + * @param {Actions} actions$ + * @param {Router} router + * @param {Location} location + */ constructor( private actions$: Actions, private router: Router, @@ -18,6 +24,9 @@ export class RouterEffects { } + /** + * Navigate + */ @Effect({dispatch: false}) navigate$ = this.actions$.ofType(RouterActions.GO).pipe( map((action: RouterActions.Go) => action.payload), @@ -26,11 +35,19 @@ export class RouterEffects }) ); + /** + * Navigate back + * @type {Observable} + */ @Effect({dispatch: false}) navigateBack$ = this.actions$ .ofType(RouterActions.BACK) .pipe(tap(() => this.location.back())); + /** + * Navigate forward + * @type {Observable} + */ @Effect({dispatch: false}) navigateForward$ = this.actions$ .ofType(RouterActions.FORWARD) diff --git a/src/app/store/reducers/index.ts b/src/app/store/reducers/index.ts index 42278dca..d8d0c987 100644 --- a/src/app/store/reducers/index.ts +++ b/src/app/store/reducers/index.ts @@ -1,10 +1,5 @@ -import { - ActivatedRouteSnapshot, - RouterStateSnapshot, - Params -} from '@angular/router'; +import { ActivatedRouteSnapshot, RouterStateSnapshot, Params } from '@angular/router'; import { createFeatureSelector, ActionReducerMap } from '@ngrx/store'; - import * as fromRouter from '@ngrx/router-store'; export interface RouterStateUrl diff --git a/src/app/store/store.module.ts b/src/app/store/store.module.ts index 29e51c04..1db8e786 100644 --- a/src/app/store/store.module.ts +++ b/src/app/store/store.module.ts @@ -3,9 +3,10 @@ import { EffectsModule } from '@ngrx/effects'; import { MetaReducer, StoreModule } from '@ngrx/store'; import { NgModule } from '@angular/core'; import { storeFreeze } from 'ngrx-store-freeze'; -import { environment } from '../../environments/environment'; import { RouterStateSerializer, StoreRouterConnectingModule } from '@ngrx/router-store'; -import { reducers, effects, CustomSerializer } from './index'; + +import { environment } from 'environments/environment'; +import { reducers, effects, CustomSerializer } from 'app/store'; export const metaReducers: MetaReducer[] = !environment.production ? [storeFreeze] diff --git a/src/tslint.json b/src/tslint.json index 04494aa2..d88db874 100644 --- a/src/tslint.json +++ b/src/tslint.json @@ -4,14 +4,23 @@ "directive-selector": [ true, "attribute", - "fuse", + [ + "fuse", + "" + ], "camelCase" ], "component-selector": [ true, "element", - "fuse", - "kebab-case" + [ + "fuse", + "" + ], + [ + "kebab-case", + "camelCase" + ] ] } } diff --git a/tslint.json b/tslint.json index 6583c181..eca56dcb 100644 --- a/tslint.json +++ b/tslint.json @@ -90,6 +90,11 @@ true, "allow-null-check" ], + "typedef": [ + true, + "call-signature", + "property-declaration" + ], "typedef-whitespace": [ true, { From 742da904da0d4a4c0fb6e5af536f4947e4747b35 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Mon, 21 May 2018 15:42:34 +0300 Subject: [PATCH 04/75] Improving the codebase (wip) --- src/app/app.module.ts | 4 + src/app/main/apps/academy/course.service.ts | 4 +- src/app/main/apps/academy/courses.service.ts | 7 +- src/app/main/apps/apps.module.ts | 2 +- src/app/main/apps/calendar/calendar.module.ts | 3 +- .../main/apps/calendar/calendar.service.ts | 5 +- .../event-form/event-form.component.html | 8 +- .../event-form/event-form.component.ts | 6 +- src/app/main/apps/chat/chat.service.ts | 124 ++++++----- .../contact-form/contact-form.component.html | 8 +- .../contact-form/contact-form.component.ts | 5 +- .../main/apps/contacts/contacts.component.ts | 2 +- .../main/apps/contacts/contacts.service.ts | 16 +- .../apps/e-commerce/order/order.component.ts | 2 +- .../apps/e-commerce/order/order.service.ts | 4 +- .../apps/e-commerce/orders/orders.service.ts | 4 +- .../e-commerce/product/product.service.ts | 4 +- .../e-commerce/products/products.service.ts | 4 +- .../apps/file-manager/file-manager.service.ts | 9 +- .../dialogs/compose/compose.component.html | 6 +- .../dialogs/compose/compose.component.ts | 33 ++- .../mail-details/mail-details.component.ts | 80 +++++-- .../mail-list-item.component.ts | 4 +- .../mail-list/mail-list.component.html | 6 +- .../mail-list/mail-list.component.ts | 47 ++-- .../main/apps/mail-ngrx/mail.component.html | 8 +- .../main/apps/mail-ngrx/mail.component.scss | 12 +- src/app/main/apps/mail-ngrx/mail.component.ts | 135 ++++++++---- src/app/main/apps/mail-ngrx/mail.model.ts | 25 ++- src/app/main/apps/mail-ngrx/mail.module.ts | 50 ++--- src/app/main/apps/mail-ngrx/mail.service.ts | 66 ++++-- .../sidenavs/main/main-sidenav.component.ts | 45 ++-- .../mail-ngrx/store/guards/resolve.guard.ts | 68 ++++-- .../store/reducers/filters.reducer.ts | 2 +- .../store/reducers/folders.reducer.ts | 2 +- .../store/reducers/labels.reducer.ts | 2 +- .../mail-ngrx/store/reducers/mails.reducer.ts | 2 +- .../main/apps/mail-ngrx/store/store.module.ts | 2 +- .../dialogs/compose/compose.component.html | 6 +- .../mail/dialogs/compose/compose.component.ts | 34 ++- .../mail-details/mail-details.component.ts | 90 +++++--- .../mail-list-item.component.ts | 101 ++++++--- .../mail/mail-list/mail-list.component.html | 8 +- .../mail/mail-list/mail-list.component.ts | 139 +++++++----- src/app/main/apps/mail/mail.component.html | 8 +- src/app/main/apps/mail/mail.component.scss | 12 +- src/app/main/apps/mail/mail.component.ts | 201 ++++++++++------- src/app/main/apps/mail/mail.model.ts | 5 + src/app/main/apps/mail/mail.module.ts | 46 ++-- src/app/main/apps/mail/mail.service.ts | 93 +++++--- .../sidenavs/main/main-sidenav.component.ts | 95 +++++--- src/app/main/apps/scrumboard/board.model.ts | 5 + .../board/add-list/add-list.component.ts | 54 +++-- .../scrumboard/board/board.component.html | 18 +- .../apps/scrumboard/board/board.component.ts | 85 ++++--- .../board/dialogs/card/card.component.html | 6 +- .../board/dialogs/card/card.component.ts | 161 ++++++++------ .../label-selector.component.ts | 100 ++++++--- .../edit-board-name.component.ts | 46 +++- .../board/list/add-card/add-card.component.ts | 52 ++++- .../board/list/card/card.component.ts | 33 ++- .../edit-list-name.component.ts | 55 +++-- .../scrumboard/board/list/list.component.html | 22 +- .../scrumboard/board/list/list.component.ts | 118 +++++++--- .../board-color-selector.component.ts | 66 ++++-- .../sidenavs/settings/settings.component.html | 4 +- .../sidenavs/settings/settings.component.ts | 66 ++++-- src/app/main/apps/scrumboard/card.model.ts | 5 + src/app/main/apps/scrumboard/list.model.ts | 5 + .../apps/scrumboard/scrumboard.component.ts | 69 ++++-- .../main/apps/scrumboard/scrumboard.module.ts | 59 +++-- .../apps/scrumboard/scrumboard.service.ts | 116 ++++++++-- .../sidenavs/main/main-sidenav.component.ts | 84 ++++--- .../todo-details/todo-details.component.ts | 208 +++++++++++------- .../todo-list-item.component.ts | 122 ++++++---- .../todo/todo-list/todo-list.component.html | 18 +- .../todo/todo-list/todo-list.component.ts | 137 +++++++----- src/app/main/apps/todo/todo.component.html | 8 +- src/app/main/apps/todo/todo.component.scss | 12 +- src/app/main/apps/todo/todo.component.ts | 172 +++++++++------ src/app/main/apps/todo/todo.model.ts | 25 ++- src/app/main/apps/todo/todo.module.ts | 38 ++-- src/app/main/apps/todo/todo.service.ts | 112 +++++++--- src/app/main/components/components.module.ts | 3 +- .../multi-language.component.html | 2 +- .../coming-soon/coming-soon.component.ts | 66 +++++- .../pages/coming-soon/coming-soon.module.ts | 6 +- .../pages/errors/404/error-404.component.ts | 12 +- .../main/pages/errors/404/error-404.module.ts | 7 +- .../pages/errors/500/error-500.component.ts | 5 +- .../main/pages/errors/500/error-500.module.ts | 6 +- src/app/main/pages/faq/faq.component.ts | 99 ++++++--- src/app/main/pages/faq/faq.module.ts | 8 +- src/app/main/pages/faq/faq.service.ts | 19 +- .../invoices/compact/compact.component.ts | 42 +++- .../pages/invoices/compact/compact.module.ts | 8 +- .../main/pages/invoices/invoice.service.ts | 19 +- .../pages/invoices/modern/modern.component.ts | 48 +++- .../pages/invoices/modern/modern.module.ts | 8 +- .../dialogs/article/article.component.html | 6 +- .../dialogs/article/article.component.ts | 8 +- .../knowledge-base.component.ts | 73 ++++-- .../knowledge-base/knowledge-base.module.ts | 15 +- .../knowledge-base/knowledge-base.service.ts | 18 +- .../maintenance/maintenance.component.ts | 14 +- .../pages/maintenance/maintenence.module.ts | 6 +- src/app/main/pages/pricing/pricing.module.ts | 19 +- .../pricing/style-1/style-1.component.ts | 7 +- .../pricing/style-2/style-2.component.ts | 7 +- .../pricing/style-3/style-3.component.ts | 7 +- .../main/pages/profile/profile.component.html | 4 +- .../main/pages/profile/profile.component.ts | 8 +- src/app/main/pages/profile/profile.module.ts | 20 +- src/app/main/pages/profile/profile.service.ts | 28 ++- .../profile/tabs/about/about.component.ts | 50 ++++- .../photos-videos/photos-videos.component.ts | 53 ++++- .../tabs/timeline/timeline.component.ts | 45 +++- .../main/pages/search/search.component.html | 4 +- src/app/main/pages/search/search.component.ts | 7 +- src/app/main/pages/search/search.module.ts | 18 +- src/app/main/pages/search/search.service.ts | 23 +- .../search/tabs/classic/classic.component.ts | 53 ++++- .../search/tabs/table/table.component.ts | 77 +++++-- src/app/navigation/navigation.ts | 2 + 124 files changed, 3174 insertions(+), 1491 deletions(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index de296e12..b664f2fb 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,6 +3,7 @@ import { BrowserModule } from '@angular/platform-browser'; import { HttpClientModule } from '@angular/common/http'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { RouterModule, Routes } from '@angular/router'; +import { MatMomentDateModule } from '@angular/material-moment-adapter'; import { InMemoryWebApiModule } from 'angular-in-memory-web-api'; import { TranslateModule } from '@ngx-translate/core'; import 'hammerjs'; @@ -64,6 +65,9 @@ const appRoutes: Routes = [ passThruUnknownUrl: true }), + // Material moment date module + MatMomentDateModule, + // Fuse modules FuseModule.forRoot(fuseConfig), FuseSharedModule, diff --git a/src/app/main/apps/academy/course.service.ts b/src/app/main/apps/academy/course.service.ts index 024a65cd..4143dd4e 100644 --- a/src/app/main/apps/academy/course.service.ts +++ b/src/app/main/apps/academy/course.service.ts @@ -6,7 +6,7 @@ import { BehaviorSubject, Observable } from 'rxjs'; @Injectable() export class AcademyCourseService implements Resolve { - onCourseChanged: BehaviorSubject = new BehaviorSubject({}); + onCourseChanged: BehaviorSubject; /** * Constructor @@ -17,6 +17,8 @@ export class AcademyCourseService implements Resolve private _httpClient: HttpClient ) { + // Set the defaults + this.onCourseChanged = new BehaviorSubject({}); } // ----------------------------------------------------------------------------------------------------- diff --git a/src/app/main/apps/academy/courses.service.ts b/src/app/main/apps/academy/courses.service.ts index 5f8776cb..06613028 100644 --- a/src/app/main/apps/academy/courses.service.ts +++ b/src/app/main/apps/academy/courses.service.ts @@ -6,8 +6,8 @@ import { BehaviorSubject, Observable } from 'rxjs'; @Injectable() export class AcademyCoursesService implements Resolve { - onCategoriesChanged: BehaviorSubject = new BehaviorSubject({}); - onCoursesChanged: BehaviorSubject = new BehaviorSubject({}); + onCategoriesChanged: BehaviorSubject; + onCoursesChanged: BehaviorSubject; /** * Constructor @@ -18,6 +18,9 @@ export class AcademyCoursesService implements Resolve private _httpClient: HttpClient ) { + // Set the defaults + this.onCategoriesChanged = new BehaviorSubject({}); + this.onCoursesChanged = new BehaviorSubject({}); } // ----------------------------------------------------------------------------------------------------- diff --git a/src/app/main/apps/apps.module.ts b/src/app/main/apps/apps.module.ts index 98a60a34..8ead8245 100644 --- a/src/app/main/apps/apps.module.ts +++ b/src/app/main/apps/apps.module.ts @@ -14,7 +14,7 @@ const routes = [ }, { path : 'mail', - loadChildren: './mail/mail.module#FuseMailModule' + loadChildren: './mail/mail.module#MailModule' }, { path : 'mail-ngrx', diff --git a/src/app/main/apps/calendar/calendar.module.ts b/src/app/main/apps/calendar/calendar.module.ts index e72231d6..dd9c0c0b 100644 --- a/src/app/main/apps/calendar/calendar.module.ts +++ b/src/app/main/apps/calendar/calendar.module.ts @@ -1,6 +1,6 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import { MatButtonModule, MatDatepickerModule, MatFormFieldModule, MatIconModule, MatInputModule, MatSlideToggleModule, MatToolbarModule } from '@angular/material'; +import { MatButtonModule, MatDatepickerModule, MatDialogModule, MatFormFieldModule, MatIconModule, MatInputModule, MatSlideToggleModule, MatToolbarModule } from '@angular/material'; import { ColorPickerModule } from 'ngx-color-picker'; import { CalendarModule as AngularCalendarModule } from 'angular-calendar'; @@ -32,6 +32,7 @@ const routes: Routes = [ MatButtonModule, MatDatepickerModule, + MatDialogModule, MatFormFieldModule, MatIconModule, MatInputModule, diff --git a/src/app/main/apps/calendar/calendar.service.ts b/src/app/main/apps/calendar/calendar.service.ts index 3d0554c3..21dc56e9 100644 --- a/src/app/main/apps/calendar/calendar.service.ts +++ b/src/app/main/apps/calendar/calendar.service.ts @@ -7,7 +7,7 @@ import { Observable, Subject } from 'rxjs'; export class CalendarService implements Resolve { events: any; - onEventsUpdated = new Subject(); + onEventsUpdated: Subject; /** * Constructor @@ -18,7 +18,8 @@ export class CalendarService implements Resolve private _httpClient: HttpClient ) { - + // Set the defaults + this.onEventsUpdated = new Subject(); } // ----------------------------------------------------------------------------------------------------- diff --git a/src/app/main/apps/calendar/event-form/event-form.component.html b/src/app/main/apps/calendar/event-form/event-form.component.html index 32a805f4..40deeb94 100644 --- a/src/app/main/apps/calendar/event-form/event-form.component.html +++ b/src/app/main/apps/calendar/event-form/event-form.component.html @@ -2,7 +2,7 @@ {{dialogTitle}} - @@ -117,7 +117,7 @@ @@ -98,7 +98,7 @@ @@ -86,7 +86,7 @@
- diff --git a/src/app/main/apps/mail-ngrx/dialogs/compose/compose.component.ts b/src/app/main/apps/mail-ngrx/dialogs/compose/compose.component.ts index 65286173..4e3d6d6f 100644 --- a/src/app/main/apps/mail-ngrx/dialogs/compose/compose.component.ts +++ b/src/app/main/apps/mail-ngrx/dialogs/compose/compose.component.ts @@ -3,27 +3,44 @@ import { FormBuilder, FormGroup } from '@angular/forms'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material'; @Component({ - selector : 'fuse-mail-compose', + selector : 'mail-compose', templateUrl : './compose.component.html', styleUrls : ['./compose.component.scss'], encapsulation: ViewEncapsulation.None }) -export class FuseMailNgrxComposeDialogComponent +export class MailNgrxComposeDialogComponent { composeForm: FormGroup; + /** + * Constructor + * + * @param {MatDialogRef} _matDialogRef + * @param _data + * @param {FormBuilder} _formBuilder + */ constructor( - public dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) private data: any, - private formBuilder: FormBuilder + private _matDialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) private _data: any, + private _formBuilder: FormBuilder ) { + // Set the defaults this.composeForm = this.createComposeForm(); } - - createComposeForm() + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Create compose form + * + * @returns {FormGroup} + */ + createComposeForm(): FormGroup { - return this.formBuilder.group({ + return this._formBuilder.group({ from : { value : ['johndoe@creapond.com'], disabled: [true] diff --git a/src/app/main/apps/mail-ngrx/mail-details/mail-details.component.ts b/src/app/main/apps/mail-ngrx/mail-details/mail-details.component.ts index f3640888..3c80a9e1 100644 --- a/src/app/main/apps/mail-ngrx/mail-details/mail-details.component.ts +++ b/src/app/main/apps/mail-ngrx/mail-details/mail-details.component.ts @@ -2,38 +2,62 @@ import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/c import { Store } from '@ngrx/store'; import { Observable } from 'rxjs'; -import { Mail } from '../mail.model'; -import * as fromStore from '../store'; -import { MailNgrxService } from '../mail.service'; +import { Mail } from 'app/main/apps/mail-ngrx/mail.model'; +import * as fromStore from 'app/main/apps/mail-ngrx/store'; +import { MailNgrxService } from 'app/main/apps/mail-ngrx/mail.service'; @Component({ - selector : 'fuse-mail-details', + selector : 'mail-details', templateUrl : './mail-details.component.html', styleUrls : ['./mail-details.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) -export class FuseMailNgrxDetailsComponent implements OnChanges +export class MailNgrxDetailsComponent implements OnChanges { - labels$: Observable; - @Input('mail') mailInput: Mail; - mail: Mail; - showDetails = false; + @Input('mail') + mailInput: Mail; + labels$: Observable; + mail: Mail; + showDetails: boolean; + + /** + * Constructor + * + * @param {MailNgrxService} _mailNgrxService + * @param {Store} _store + */ constructor( - private mailService: MailNgrxService, - private store: Store + private _mailNgrxService: MailNgrxService, + private _store: Store ) { - this.labels$ = this.store.select(fromStore.getLabelsArr); + // Set the defaults + this.labels$ = this._store.select(fromStore.getLabelsArr); + this.showDetails = false; } - ngOnChanges() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On changes + */ + ngOnChanges(): void { this.updateModel(this.mailInput); this.markAsRead(); } - markAsRead() + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Mark as read + */ + markAsRead(): void { if ( this.mail && !this.mail.read ) { @@ -42,28 +66,46 @@ export class FuseMailNgrxDetailsComponent implements OnChanges } } - toggleStar(event) + /** + * Toggle star + * + * @param event + */ + toggleStar(event): void { event.stopPropagation(); this.mail.toggleStar(); this.updateMail(); } - toggleImportant(event) + /** + * Toggle important + * + * @param event + */ + toggleImportant(event): void { event.stopPropagation(); this.mail.toggleImportant(); this.updateMail(); } - updateModel(data) + /** + * Update model + * + * @param data + */ + updateModel(data): void { this.mail = !data ? null : new Mail({...data}); } - updateMail() + /** + * Update the mail + */ + updateMail(): void { - this.store.dispatch(new fromStore.UpdateMail(this.mail)); + this._store.dispatch(new fromStore.UpdateMail(this.mail)); this.updateModel(this.mail); } } diff --git a/src/app/main/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.ts b/src/app/main/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.ts index f4a2d719..4ec6b611 100644 --- a/src/app/main/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.ts +++ b/src/app/main/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.ts @@ -7,12 +7,12 @@ import { Mail } from '../../mail.model'; import * as fromStore from '../../store'; @Component({ - selector : 'fuse-mail-list-item', + selector : 'mail-list-item', templateUrl : './mail-list-item.component.html', styleUrls : ['./mail-list-item.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) -export class FuseMailNgrxListItemComponent implements OnInit +export class MailNgrxListItemComponent implements OnInit { @Input() mail: Mail; @HostBinding('class.selected') selected: boolean; diff --git a/src/app/main/apps/mail-ngrx/mail-list/mail-list.component.html b/src/app/main/apps/mail-ngrx/mail-list/mail-list.component.html index bb5903db..94e1ff3b 100644 --- a/src/app/main/apps/mail-ngrx/mail-list/mail-list.component.html +++ b/src/app/main/apps/mail-ngrx/mail-list/mail-list.component.html @@ -3,7 +3,7 @@
- - + +
diff --git a/src/app/main/apps/mail-ngrx/mail-list/mail-list.component.ts b/src/app/main/apps/mail-ngrx/mail-list/mail-list.component.ts index 0b1c0ac7..54237b1e 100644 --- a/src/app/main/apps/mail-ngrx/mail-list/mail-list.component.ts +++ b/src/app/main/apps/mail-ngrx/mail-list/mail-list.component.ts @@ -1,49 +1,64 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; -import { Mail } from '../mail.model'; -import { MailNgrxService } from '../mail.service'; +import { Mail } from 'app/main/apps/mail-ngrx/mail.model'; +import { MailNgrxService } from 'app/main/apps/mail-ngrx/mail.service'; @Component({ - selector : 'fuse-mail-list', + selector : 'mail-list', templateUrl : './mail-list.component.html', styleUrls : ['./mail-list.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) -export class FuseMailNgrxListComponent +export class MailNgrxListComponent { - @Input() mails: Mail[]; - @Input() currentMail: Mail[]; + @Input() + mails: Mail[]; + @Input() + currentMail: Mail[]; + + /** + * Constructor + * + * @param {ActivatedRoute} _activatedRoute + * @param {MailNgrxService} _mailNgrxService + * @param {Router} _router + */ constructor( - private route: ActivatedRoute, - private mailService: MailNgrxService, - private router: Router + private _activatedRoute: ActivatedRoute, + private _mailNgrxService: MailNgrxService, + private _router: Router ) { } + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + /** * Read mail + * * @param mailId */ - readMail(mailId) + readMail(mailId): void { - const labelHandle = this.route.snapshot.params.labelHandle, - filterHandle = this.route.snapshot.params.filterHandle, - folderHandle = this.route.snapshot.params.folderHandle; + const labelHandle = this._activatedRoute.snapshot.params.labelHandle, + filterHandle = this._activatedRoute.snapshot.params.filterHandle, + folderHandle = this._activatedRoute.snapshot.params.folderHandle; if ( labelHandle ) { - this.router.navigate(['apps/mail-ngrx/label/' + labelHandle + '/' + mailId]); + this._router.navigate(['apps/mail-ngrx/label/' + labelHandle + '/' + mailId]); } else if ( filterHandle ) { - this.router.navigate(['apps/mail-ngrx/filter/' + filterHandle + '/' + mailId]); + this._router.navigate(['apps/mail-ngrx/filter/' + filterHandle + '/' + mailId]); } else { - this.router.navigate(['apps/mail-ngrx/' + folderHandle + '/' + mailId]); + this._router.navigate(['apps/mail-ngrx/' + folderHandle + '/' + mailId]); } } } diff --git a/src/app/main/apps/mail-ngrx/mail.component.html b/src/app/main/apps/mail-ngrx/mail.component.html index 13a31fbc..701983ae 100644 --- a/src/app/main/apps/mail-ngrx/mail.component.html +++ b/src/app/main/apps/mail-ngrx/mail.component.html @@ -9,7 +9,7 @@ - + @@ -88,7 +88,7 @@
-
@@ -98,8 +98,8 @@
- - + +
diff --git a/src/app/main/apps/mail-ngrx/mail.component.scss b/src/app/main/apps/mail-ngrx/mail.component.scss index cca33765..f401db44 100644 --- a/src/app/main/apps/mail-ngrx/mail.component.scss +++ b/src/app/main/apps/mail-ngrx/mail.component.scss @@ -40,16 +40,16 @@ @include media-breakpoint(xs) { - fuse-mail-list { + mail-list { border-right: none; } - fuse-mail-list, - fuse-mail-details { + mail-list, + mail-details { flex: 1 0 100%; } - fuse-mail-details { + mail-details { display: none !important; } @@ -65,11 +65,11 @@ .content { - fuse-mail-list { + mail-list { display: none !important; } - fuse-mail-details { + mail-details { display: flex !important; } } diff --git a/src/app/main/apps/mail-ngrx/mail.component.ts b/src/app/main/apps/mail-ngrx/mail.component.ts index 9fbbcad6..51833271 100644 --- a/src/app/main/apps/mail-ngrx/mail.component.ts +++ b/src/app/main/apps/mail-ngrx/mail.component.ts @@ -10,16 +10,17 @@ import { FuseConfigService } from '@fuse/services/config.service'; import { Mail } from 'app/main/apps/mail-ngrx/mail.model'; import { MailNgrxService } from 'app/main/apps/mail-ngrx/mail.service'; import * as fromStore from 'app/main/apps/mail-ngrx/store'; + import { locale as english } from 'app/main/apps/mail-ngrx/i18n/en'; import { locale as turkish } from 'app/main/apps/mail-ngrx/i18n/tr'; @Component({ - selector : 'fuse-mail', + selector : 'mail-ngrx', templateUrl : './mail.component.html', styleUrls : ['./mail.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) -export class FuseMailNgrxComponent implements OnInit, OnDestroy +export class MailNgrxComponent implements OnInit, OnDestroy { hasSelectedMails: boolean; isIndeterminate: boolean; @@ -33,31 +34,49 @@ export class FuseMailNgrxComponent implements OnInit, OnDestroy mails: Mail[]; selectedMailIds: string[]; + /** + * Constructor + * + * @param {FuseConfigService} _fuseConfigService + * @param {MailNgrxService} _mailNgrxService + * @param {FuseTranslationLoaderService} _fuseTranslationLoaderService + * @param {Store} _store + * @param {ChangeDetectorRef} _changeDetectorRef + */ constructor( - private configService: FuseConfigService, - private mailService: MailNgrxService, - private translationLoader: FuseTranslationLoaderService, - private store: Store, - private cd: ChangeDetectorRef + private _fuseConfigService: FuseConfigService, + private _mailNgrxService: MailNgrxService, + private _fuseTranslationLoaderService: FuseTranslationLoaderService, + private _store: Store, + private _changeDetectorRef: ChangeDetectorRef ) { - this.searchInput = new FormControl(''); - this.translationLoader.loadTranslations(english, turkish); - this.currentMail$ = this.store.select(fromStore.getCurrentMail); - this.mails$ = this.store.select(fromStore.getMailsArr); - this.folders$ = this.store.select(fromStore.getFoldersArr); - this.labels$ = this.store.select(fromStore.getLabelsArr); - this.selectedMailIds$ = this.store.select(fromStore.getSelectedMailIds); - this.searchText$ = this.store.select(fromStore.getSearchText); - this.mails = []; - this.selectedMailIds = []; - - this.configService.config = { + // Configure the layout + this._fuseConfigService.config = { routerAnimation: 'none' }; + + // Set the defaults + this.searchInput = new FormControl(''); + this._fuseTranslationLoaderService.loadTranslations(english, turkish); + this.currentMail$ = this._store.select(fromStore.getCurrentMail); + this.mails$ = this._store.select(fromStore.getMailsArr); + this.folders$ = this._store.select(fromStore.getFoldersArr); + this.labels$ = this._store.select(fromStore.getLabelsArr); + this.selectedMailIds$ = this._store.select(fromStore.getSelectedMailIds); + this.searchText$ = this._store.select(fromStore.getSearchText); + this.mails = []; + this.selectedMailIds = []; } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { this.mails$.subscribe(mails => { this.mails = mails; @@ -79,16 +98,28 @@ export class FuseMailNgrxComponent implements OnInit, OnDestroy debounceTime(300), distinctUntilChanged() ).subscribe(searchText => { - this.store.dispatch(new fromStore.SetSearchText(searchText)); + this._store.dispatch(new fromStore.SetSearchText(searchText)); }); } - ngOnDestroy() + /** + * On destroy + */ + ngOnDestroy(): void { - this.cd.detach(); + this._changeDetectorRef.detach(); } - toggleSelectAll(ev) + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Toggle select all + * + * @param ev + */ + toggleSelectAll(ev): void { ev.preventDefault(); @@ -102,41 +133,69 @@ export class FuseMailNgrxComponent implements OnInit, OnDestroy } } - selectAllMails() + /** + * Select all mails + */ + selectAllMails(): void { - this.store.dispatch(new fromStore.SelectAllMails()); + this._store.dispatch(new fromStore.SelectAllMails()); } - deselectAllMails() + /** + * Deselect all mails + */ + deselectAllMails(): void { - this.store.dispatch(new fromStore.DeselectAllMails()); + this._store.dispatch(new fromStore.DeselectAllMails()); } - selectMailsByParameter(parameter, value) + /** + * Select mails by parameter + * + * @param parameter + * @param value + */ + selectMailsByParameter(parameter, value): void { - this.store.dispatch(new fromStore.SelectMailsByParameter({ + this._store.dispatch(new fromStore.SelectMailsByParameter({ parameter, value })); } - toggleLabelOnSelectedMails(labelId) + /** + * Toggle label on selected mails + * + * @param labelId + */ + toggleLabelOnSelectedMails(labelId): void { - this.store.dispatch(new fromStore.AddLabelOnSelectedMails(labelId)); + this._store.dispatch(new fromStore.AddLabelOnSelectedMails(labelId)); } - setFolderOnSelectedMails(folderId) + /** + * Set folder on selected mails + * + * @param folderId + */ + setFolderOnSelectedMails(folderId): void { - this.store.dispatch(new fromStore.SetFolderOnSelectedMails(folderId)); + this._store.dispatch(new fromStore.SetFolderOnSelectedMails(folderId)); } - deSelectCurrentMail() + /** + * Deselect current mail + */ + deselectCurrentMail(): void { - this.store.dispatch(new fromStore.SetCurrentMail('')); + this._store.dispatch(new fromStore.SetCurrentMail('')); } - refresh() + /** + * Refresh + */ + refresh(): void { - this.cd.markForCheck(); + this._changeDetectorRef.markForCheck(); } } diff --git a/src/app/main/apps/mail-ngrx/mail.model.ts b/src/app/main/apps/mail-ngrx/mail.model.ts index 725bc915..0c015c30 100644 --- a/src/app/main/apps/mail-ngrx/mail.model.ts +++ b/src/app/main/apps/mail-ngrx/mail.model.ts @@ -27,6 +27,11 @@ export class Mail labels: string[]; folder: string; + /** + * Constructor + * + * @param mail + */ constructor(mail) { this.id = mail.id; @@ -44,22 +49,34 @@ export class Mail this.folder = mail.folder; } - toggleStar() + /** + * Toggle star + */ + toggleStar(): void { this.starred = !this.starred; } - toggleImportant() + /** + * Toggle important + */ + toggleImportant(): void { this.important = !this.important; } - markRead() + /** + * Mark as read + */ + markRead(): void { this.read = true; } - markUnRead() + /** + * Mark as unread + */ + markUnread(): void { this.read = false; } diff --git a/src/app/main/apps/mail-ngrx/mail.module.ts b/src/app/main/apps/mail-ngrx/mail.module.ts index 84653891..78ca98e7 100644 --- a/src/app/main/apps/mail-ngrx/mail.module.ts +++ b/src/app/main/apps/mail-ngrx/mail.module.ts @@ -5,45 +5,45 @@ import { TranslateModule } from '@ngx-translate/core'; import { FuseSharedModule } from '@fuse/shared.module'; -import { MailAppStoreModule } from 'app/main/apps/mail-ngrx/store/store.module'; import * as fromGuards from 'app/main/apps/mail-ngrx/store/guards/index'; -import { FuseMailNgrxComponent } from 'app/main/apps/mail-ngrx/mail.component'; -import { FuseMailNgrxListComponent } from 'app/main/apps/mail-ngrx/mail-list/mail-list.component'; -import { FuseMailNgrxListItemComponent } from 'app/main/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component'; -import { FuseMailNgrxDetailsComponent } from 'app/main/apps/mail-ngrx/mail-details/mail-details.component'; -import { FuseMailNgrxMainSidenavComponent } from 'app/main/apps/mail-ngrx/sidenavs/main/main-sidenav.component'; -import { FuseMailNgrxComposeDialogComponent } from 'app/main/apps/mail-ngrx/dialogs/compose/compose.component'; +import { MailNgrxStoreModule } from 'app/main/apps/mail-ngrx/store/store.module'; +import { MailNgrxComponent } from 'app/main/apps/mail-ngrx/mail.component'; +import { MailNgrxListComponent } from 'app/main/apps/mail-ngrx/mail-list/mail-list.component'; +import { MailNgrxListItemComponent } from 'app/main/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component'; +import { MailNgrxDetailsComponent } from 'app/main/apps/mail-ngrx/mail-details/mail-details.component'; +import { MailNgrxMainSidenavComponent } from 'app/main/apps/mail-ngrx/sidenavs/main/main-sidenav.component'; +import { MailNgrxComposeDialogComponent } from 'app/main/apps/mail-ngrx/dialogs/compose/compose.component'; import { MailNgrxService } from 'app/main/apps/mail-ngrx/mail.service'; const routes: Routes = [ { path : 'label/:labelHandle', - component : FuseMailNgrxComponent, + component : MailNgrxComponent, canActivate: [fromGuards.ResolveGuard] }, { path : 'label/:labelHandle/:mailId', - component : FuseMailNgrxComponent, + component : MailNgrxComponent, canActivate: [fromGuards.ResolveGuard] }, { - path : 'filter/:filterHandle', - component: FuseMailNgrxComponent, + path : 'filter/:filterHandle', + component : MailNgrxComponent, canActivate: [fromGuards.ResolveGuard] }, { - path : 'filter/:filterHandle/:mailId', - component: FuseMailNgrxComponent, + path : 'filter/:filterHandle/:mailId', + component : MailNgrxComponent, canActivate: [fromGuards.ResolveGuard] }, { - path : ':folderHandle', - component: FuseMailNgrxComponent, + path : ':folderHandle', + component : MailNgrxComponent, canActivate: [fromGuards.ResolveGuard] }, { - path : ':folderHandle/:mailId', - component: FuseMailNgrxComponent, + path : ':folderHandle/:mailId', + component : MailNgrxComponent, canActivate: [fromGuards.ResolveGuard] }, { @@ -54,12 +54,12 @@ const routes: Routes = [ @NgModule({ declarations : [ - FuseMailNgrxComponent, - FuseMailNgrxListComponent, - FuseMailNgrxListItemComponent, - FuseMailNgrxDetailsComponent, - FuseMailNgrxMainSidenavComponent, - FuseMailNgrxComposeDialogComponent + MailNgrxComponent, + MailNgrxListComponent, + MailNgrxListItemComponent, + MailNgrxDetailsComponent, + MailNgrxMainSidenavComponent, + MailNgrxComposeDialogComponent ], imports : [ RouterModule.forChild(routes), @@ -80,13 +80,13 @@ const routes: Routes = [ FuseSharedModule, - MailAppStoreModule + MailNgrxStoreModule ], providers : [ MailNgrxService, fromGuards.ResolveGuard ], - entryComponents: [FuseMailNgrxComposeDialogComponent] + entryComponents: [MailNgrxComposeDialogComponent] }) export class FuseMailNgrxModule { diff --git a/src/app/main/apps/mail-ngrx/mail.service.ts b/src/app/main/apps/mail-ngrx/mail.service.ts index 26cbd9a8..ec1a6aad 100644 --- a/src/app/main/apps/mail-ngrx/mail.service.ts +++ b/src/app/main/apps/mail-ngrx/mail.service.ts @@ -16,72 +16,108 @@ export class MailNgrxService selectedMails: Mail[]; mails: Mail[]; + /** + * Constructor + * + * @param {HttpClient} _httpClient + * @param {Store} _store + */ constructor( - private http: HttpClient, - private store: Store + private _httpClient: HttpClient, + private _store: Store ) { - this.store.select(getFoldersArr).subscribe(folders => { + this._store.select(getFoldersArr).subscribe(folders => { this.foldersArr = folders; }); - this.store.select(getFiltersArr).subscribe(filters => { + + this._store.select(getFiltersArr).subscribe(filters => { this.filtersArr = filters; }); - this.store.select(getLabelsArr).subscribe(labels => { + + this._store.select(getLabelsArr).subscribe(labels => { this.labelsArr = labels; }); - this.store.select(getMailsArr).subscribe(mails => { + + this._store.select(getMailsArr).subscribe(mails => { this.mails = mails; }); this.selectedMails = []; } + /** + * Get all mails + * + * @returns {Observable} + */ getAllMails(): Observable { - return this.http.get('api/mail-mails'); + return this._httpClient.get('api/mail-mails'); } + /** + * Get folders + * + * @returns {Observable} + */ getFolders(): Observable { - return this.http.get('api/mail-folders'); + return this._httpClient.get('api/mail-folders'); } + /** + * Get filters + * + * @returns {Observable} + */ getFilters(): Observable { - return this.http.get('api/mail-filters'); + return this._httpClient.get('api/mail-filters'); } + /** + * Get labels + * + * @returns {Observable} + */ getLabels(): Observable { - return this.http.get('api/mail-labels'); + return this._httpClient.get('api/mail-labels'); } + /** + * Get mails + * + * @param handle + * @returns {Observable} + */ getMails(handle): Observable { if ( handle.id === 'labelHandle' ) { const labelId = this.labelsArr.find(label => label.handle === handle.value).id; - return this.http.get('api/mail-mails?labels=' + labelId); + return this._httpClient.get('api/mail-mails?labels=' + labelId); } else if ( handle.id === 'filterHandle' ) { - return this.http.get('api/mail-mails?' + handle.value + '=true'); + return this._httpClient.get('api/mail-mails?' + handle.value + '=true'); } else // folderHandle { const folderId = this.foldersArr.find(folder => folder.handle === handle.value).id; - return this.http.get('api/mail-mails?folder=' + folderId); + return this._httpClient.get('api/mail-mails?folder=' + folderId); } } /** * Update the mail + * * @param mail * @returns {Promise} */ - updateMail(mail) + updateMail(mail): any { - return this.http.post('api/mail-mails/' + mail.id, {...mail}); + return this._httpClient.post('api/mail-mails/' + mail.id, {...mail}); } } diff --git a/src/app/main/apps/mail-ngrx/sidenavs/main/main-sidenav.component.ts b/src/app/main/apps/mail-ngrx/sidenavs/main/main-sidenav.component.ts index 742a497d..11dfcfab 100644 --- a/src/app/main/apps/mail-ngrx/sidenavs/main/main-sidenav.component.ts +++ b/src/app/main/apps/mail-ngrx/sidenavs/main/main-sidenav.component.ts @@ -4,17 +4,17 @@ import { FormGroup } from '@angular/forms'; import { Store } from '@ngrx/store'; import { Observable } from 'rxjs'; -import { MailNgrxService } from '../../mail.service'; -import * as fromStore from './../../store'; -import { FuseMailNgrxComposeDialogComponent } from '../../dialogs/compose/compose.component'; +import { MailNgrxService } from 'app/main/apps/mail-ngrx/mail.service'; +import * as fromStore from 'app/main/apps/mail-ngrx/store'; +import { MailNgrxComposeDialogComponent } from 'app/main/apps/mail-ngrx/dialogs/compose/compose.component'; @Component({ - selector : 'fuse-mail-main-sidenav', + selector : 'mail-main-sidenav', templateUrl : './main-sidenav.component.html', styleUrls : ['./main-sidenav.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) -export class FuseMailNgrxMainSidenavComponent +export class MailNgrxMainSidenavComponent { labels: any[]; accounts: object; @@ -25,30 +25,43 @@ export class FuseMailNgrxMainSidenavComponent filters$: Observable; labels$: Observable; + /** + * Constructor + * + * @param {MailNgrxService} _mailNgrxService + * @param {MatDialog} _matDialog + * @param {Store} _store + */ constructor( - private mailService: MailNgrxService, - public dialog: MatDialog, - private store: Store + private _mailNgrxService: MailNgrxService, + private _matDialog: MatDialog, + private _store: Store ) { - // Data + // Set the defaults this.accounts = { 'creapond' : 'johndoe@creapond.com', 'withinpixels': 'johndoe@withinpixels.com' }; - this.selectedAccount = 'creapond'; - - this.folders$ = this.store.select(fromStore.getFoldersArr); - this.filters$ = this.store.select(fromStore.getFiltersArr); - this.labels$ = this.store.select(fromStore.getLabelsArr); + this.folders$ = this._store.select(fromStore.getFoldersArr); + this.filters$ = this._store.select(fromStore.getFiltersArr); + this.labels$ = this._store.select(fromStore.getLabelsArr); } - composeDialog() + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Compose dialog + */ + composeDialog(): void { - this.dialogRef = this.dialog.open(FuseMailNgrxComposeDialogComponent, { + this.dialogRef = this._matDialog.open(MailNgrxComposeDialogComponent, { panelClass: 'mail-compose-dialog' }); + this.dialogRef.afterClosed() .subscribe(response => { if ( !response ) diff --git a/src/app/main/apps/mail-ngrx/store/guards/resolve.guard.ts b/src/app/main/apps/mail-ngrx/store/guards/resolve.guard.ts index 6fa3324d..a563cd62 100644 --- a/src/app/main/apps/mail-ngrx/store/guards/resolve.guard.ts +++ b/src/app/main/apps/mail-ngrx/store/guards/resolve.guard.ts @@ -16,11 +16,16 @@ export class ResolveGuard implements CanActivate { routerState: any; + /** + * Constructor + * + * @param {Store} _store + */ constructor( - private store: Store + private _store: Store ) { - this.store.select(getRouterState).subscribe(routerState => { + this._store.select(getRouterState).subscribe(routerState => { if ( routerState ) { this.routerState = routerState.state; @@ -28,6 +33,13 @@ export class ResolveGuard implements CanActivate }); } + /** + * Can activate + * + * @param {ActivatedRouteSnapshot} route + * @param {RouterStateSnapshot} state + * @returns {Observable} + */ canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable { return this.checkStore().pipe( @@ -36,32 +48,42 @@ export class ResolveGuard implements CanActivate ); } + /** + * Check store + * + * @returns {Observable} + */ checkStore(): Observable { return forkJoin( - this.getFolders(), - this.getFilters(), - this.getLabels() - ) + this.getFolders(), + this.getFilters(), + this.getLabels() + ) .pipe( - filter(([foldersLoaded, filtersLoaded, labelsLoaded]) => filtersLoaded && foldersLoaded && labelsLoaded), + filter(([foldersLoaded, filtersLoaded, labelsLoaded]) => !!(foldersLoaded && filtersLoaded && labelsLoaded)), take(1), switchMap(() => this.getMails() ), take(1), - map(() => this.store.dispatch(new fromStore.SetCurrentMail(this.routerState.params.mailId))) + map(() => this._store.dispatch(new fromStore.SetCurrentMail(this.routerState.params.mailId))) ); } - getFolders() + /** + * Get folders + * + * @returns {Observable} + */ + getFolders(): any { - return this.store.select(getFoldersLoaded) + return this._store.select(getFoldersLoaded) .pipe( tap(loaded => { if ( !loaded ) { - this.store.dispatch(new fromStore.GetFolders([])); + this._store.dispatch(new fromStore.GetFolders([])); } }), filter(loaded => loaded), @@ -71,16 +93,17 @@ export class ResolveGuard implements CanActivate /** * Get Filters + * * @returns {Observable} */ - getFilters() + getFilters(): any { - return this.store.select(getFiltersLoaded) + return this._store.select(getFiltersLoaded) .pipe( tap(loaded => { if ( !loaded ) { - this.store.dispatch(new fromStore.GetFilters([])); + this._store.dispatch(new fromStore.GetFilters([])); } }), filter(loaded => loaded), @@ -92,14 +115,14 @@ export class ResolveGuard implements CanActivate * Get Labels * @returns {Observable} */ - getLabels() + getLabels(): any { - return this.store.select(getLabelsLoaded) + return this._store.select(getLabelsLoaded) .pipe( tap(loaded => { if ( !loaded ) { - this.store.dispatch(new fromStore.GetLabels([])); + this._store.dispatch(new fromStore.GetLabels([])); } }), filter(loaded => loaded), @@ -109,19 +132,20 @@ export class ResolveGuard implements CanActivate /** * Get Mails + * * @returns {Observable} */ - getMails() + getMails(): any { - return this.store.select(getMailsLoaded) + return this._store.select(getMailsLoaded) .pipe( tap((loaded: any) => { if ( !this.routerState.params[loaded.id] || this.routerState.params[loaded.id] !== loaded.value ) { - this.store.dispatch(new fromStore.GetMails()); - this.store.dispatch(new fromStore.SetSearchText('')); - this.store.dispatch(new fromStore.DeselectAllMails()); + this._store.dispatch(new fromStore.GetMails()); + this._store.dispatch(new fromStore.SetSearchText('')); + this._store.dispatch(new fromStore.DeselectAllMails()); } }), filter((loaded: any) => { diff --git a/src/app/main/apps/mail-ngrx/store/reducers/filters.reducer.ts b/src/app/main/apps/mail-ngrx/store/reducers/filters.reducer.ts index 1251a19d..ed8e8e05 100644 --- a/src/app/main/apps/mail-ngrx/store/reducers/filters.reducer.ts +++ b/src/app/main/apps/mail-ngrx/store/reducers/filters.reducer.ts @@ -2,7 +2,7 @@ import * as FiltersActions from 'app/main/apps/mail-ngrx/store/actions/filters.a export interface FiltersState { - entities: { [id: number]: any }; + entities?: { [id: number]: any }; loading: boolean; loaded: boolean; } diff --git a/src/app/main/apps/mail-ngrx/store/reducers/folders.reducer.ts b/src/app/main/apps/mail-ngrx/store/reducers/folders.reducer.ts index 9fe04dc5..37056ad5 100644 --- a/src/app/main/apps/mail-ngrx/store/reducers/folders.reducer.ts +++ b/src/app/main/apps/mail-ngrx/store/reducers/folders.reducer.ts @@ -2,7 +2,7 @@ import * as FoldersActions from 'app/main/apps/mail-ngrx/store/actions/folders.a export interface FoldersState { - entities: { [id: number]: any }; + entities?: { [id: number]: any }; loading: boolean; loaded: boolean; } diff --git a/src/app/main/apps/mail-ngrx/store/reducers/labels.reducer.ts b/src/app/main/apps/mail-ngrx/store/reducers/labels.reducer.ts index f6052b5b..af819e67 100644 --- a/src/app/main/apps/mail-ngrx/store/reducers/labels.reducer.ts +++ b/src/app/main/apps/mail-ngrx/store/reducers/labels.reducer.ts @@ -2,7 +2,7 @@ import * as LabelsActions from 'app/main/apps/mail-ngrx/store/actions/labels.act export interface LabelsState { - entities: { [id: number]: any }; + entities?: { [id: number]: any }; loading: boolean; loaded: boolean; } diff --git a/src/app/main/apps/mail-ngrx/store/reducers/mails.reducer.ts b/src/app/main/apps/mail-ngrx/store/reducers/mails.reducer.ts index cd62c048..d33cbf2b 100644 --- a/src/app/main/apps/mail-ngrx/store/reducers/mails.reducer.ts +++ b/src/app/main/apps/mail-ngrx/store/reducers/mails.reducer.ts @@ -3,7 +3,7 @@ import { Mail } from 'app/main/apps/mail-ngrx/mail.model'; export interface MailsState { - entities: { [id: number]: Mail }; + entities?: { [id: number]: Mail }; currentMail: any; selectedMailIds: string[]; searchText: string; diff --git a/src/app/main/apps/mail-ngrx/store/store.module.ts b/src/app/main/apps/mail-ngrx/store/store.module.ts index 0a955f92..bc9c41a2 100644 --- a/src/app/main/apps/mail-ngrx/store/store.module.ts +++ b/src/app/main/apps/mail-ngrx/store/store.module.ts @@ -12,6 +12,6 @@ import { effects } from 'app/main/apps/mail-ngrx/store/effects'; ], providers: [] }) -export class MailAppStoreModule +export class MailNgrxStoreModule { } diff --git a/src/app/main/apps/mail/dialogs/compose/compose.component.html b/src/app/main/apps/mail/dialogs/compose/compose.component.html index b6e132d8..7a8971bd 100644 --- a/src/app/main/apps/mail/dialogs/compose/compose.component.html +++ b/src/app/main/apps/mail/dialogs/compose/compose.component.html @@ -2,7 +2,7 @@ New Message - @@ -91,7 +91,7 @@
-
- - + +
diff --git a/src/app/main/apps/mail/mail-list/mail-list.component.ts b/src/app/main/apps/mail/mail-list/mail-list.component.ts index be4341d5..b59ec11e 100644 --- a/src/app/main/apps/mail/mail-list/mail-list.component.ts +++ b/src/app/main/apps/mail/mail-list/mail-list.component.ts @@ -1,109 +1,134 @@ import { Component, OnDestroy, OnInit } from '@angular/core'; import { Location } from '@angular/common'; import { ActivatedRoute } from '@angular/router'; -import { Subscription } from 'rxjs'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { fuseAnimations } from '@fuse/animations'; -import { Mail } from '../mail.model'; -import { MailService } from '../mail.service'; +import { Mail } from 'app/main/apps/mail/mail.model'; +import { MailService } from 'app/main/apps/mail/mail.service'; @Component({ - selector : 'fuse-mail-list', + selector : 'mail-list', templateUrl: './mail-list.component.html', styleUrls : ['./mail-list.component.scss'], animations : fuseAnimations }) -export class FuseMailListComponent implements OnInit, OnDestroy +export class MailListComponent implements OnInit, OnDestroy { mails: Mail[]; currentMail: Mail; - onMailsChanged: Subscription; - onCurrentMailChanged: Subscription; + // Private + private _unsubscribeAll: Subject; + /** + * Constructor + * + * @param {ActivatedRoute} _activatedRoute + * @param {MailService} _mailService + * @param {Location} _location + */ constructor( - private route: ActivatedRoute, - private mailService: MailService, - private location: Location + private _activatedRoute: ActivatedRoute, + private _mailService: MailService, + private _location: Location ) { + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { // Subscribe to update mails on changes - this.onMailsChanged = - this.mailService.onMailsChanged - .subscribe(mails => { - this.mails = mails; - }); + this._mailService.onMailsChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(mails => { + this.mails = mails; + }); // Subscribe to update current mail on changes - this.onCurrentMailChanged = - this.mailService.onCurrentMailChanged - .subscribe(currentMail => { - if ( !currentMail ) + this._mailService.onCurrentMailChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(currentMail => { + if ( !currentMail ) + { + // Set the current mail id to null to deselect the current mail + this.currentMail = null; + + // Handle the location changes + const labelHandle = this._activatedRoute.snapshot.params.labelHandle, + filterHandle = this._activatedRoute.snapshot.params.filterHandle, + folderHandle = this._activatedRoute.snapshot.params.folderHandle; + + if ( labelHandle ) { - // Set the current mail id to null to deselect the current mail - this.currentMail = null; - - // Handle the location changes - const labelHandle = this.route.snapshot.params.labelHandle, - filterHandle = this.route.snapshot.params.filterHandle, - folderHandle = this.route.snapshot.params.folderHandle; - - if ( labelHandle ) - { - this.location.go('apps/mail/label/' + labelHandle); - } - else if ( filterHandle ) - { - this.location.go('apps/mail/filter/' + filterHandle); - } - else - { - this.location.go('apps/mail/' + folderHandle); - } + this._location.go('apps/mail/label/' + labelHandle); + } + else if ( filterHandle ) + { + this._location.go('apps/mail/filter/' + filterHandle); } else { - this.currentMail = currentMail; + this._location.go('apps/mail/' + folderHandle); } - }); - } - - ngOnDestroy() - { - this.onMailsChanged.unsubscribe(); - this.onCurrentMailChanged.unsubscribe(); + } + else + { + this.currentMail = currentMail; + } + }); } + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + /** * Read mail + * * @param mailId */ - readMail(mailId) + readMail(mailId): void { - const labelHandle = this.route.snapshot.params.labelHandle, - filterHandle = this.route.snapshot.params.filterHandle, - folderHandle = this.route.snapshot.params.folderHandle; + const labelHandle = this._activatedRoute.snapshot.params.labelHandle, + filterHandle = this._activatedRoute.snapshot.params.filterHandle, + folderHandle = this._activatedRoute.snapshot.params.folderHandle; if ( labelHandle ) { - this.location.go('apps/mail/label/' + labelHandle + '/' + mailId); + this._location.go('apps/mail/label/' + labelHandle + '/' + mailId); } else if ( filterHandle ) { - this.location.go('apps/mail/filter/' + filterHandle + '/' + mailId); + this._location.go('apps/mail/filter/' + filterHandle + '/' + mailId); } else { - this.location.go('apps/mail/' + folderHandle + '/' + mailId); + this._location.go('apps/mail/' + folderHandle + '/' + mailId); } // Set current mail - this.mailService.setCurrentMail(mailId); + this._mailService.setCurrentMail(mailId); } - } diff --git a/src/app/main/apps/mail/mail.component.html b/src/app/main/apps/mail/mail.component.html index 004880f8..570edba8 100644 --- a/src/app/main/apps/mail/mail.component.html +++ b/src/app/main/apps/mail/mail.component.html @@ -9,7 +9,7 @@ - + @@ -86,7 +86,7 @@
-
@@ -96,8 +96,8 @@
- - + +
diff --git a/src/app/main/apps/mail/mail.component.scss b/src/app/main/apps/mail/mail.component.scss index cca33765..f401db44 100644 --- a/src/app/main/apps/mail/mail.component.scss +++ b/src/app/main/apps/mail/mail.component.scss @@ -40,16 +40,16 @@ @include media-breakpoint(xs) { - fuse-mail-list { + mail-list { border-right: none; } - fuse-mail-list, - fuse-mail-details { + mail-list, + mail-details { flex: 1 0 100%; } - fuse-mail-details { + mail-details { display: none !important; } @@ -65,11 +65,11 @@ .content { - fuse-mail-list { + mail-list { display: none !important; } - fuse-mail-details { + mail-details { display: flex !important; } } diff --git a/src/app/main/apps/mail/mail.component.ts b/src/app/main/apps/mail/mail.component.ts index c8bdc84c..2142b9c3 100644 --- a/src/app/main/apps/mail/mail.component.ts +++ b/src/app/main/apps/mail/mail.component.ts @@ -1,22 +1,23 @@ import { Component, OnDestroy, OnInit } from '@angular/core'; import { FormControl } from '@angular/forms'; - -import { Subscription } from 'rxjs'; -import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; +import { Subject } from 'rxjs'; +import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators'; import { FuseTranslationLoaderService } from '@fuse/services/translation-loader.service'; -import { Mail } from './mail.model'; -import { MailService } from './mail.service'; -import { locale as english } from './i18n/en'; -import { locale as turkish } from './i18n/tr'; +import { Mail } from 'app/main/apps/mail/mail.model'; +import { MailService } from 'app/main/apps/mail/mail.service'; + +import { locale as english } from 'app/main/apps/mail//i18n/en'; +import { locale as turkish } from 'app/main/apps/mail//i18n/tr'; +import { FuseConfigService } from '@fuse/services/config.service'; @Component({ - selector : 'fuse-mail', + selector : 'mail', templateUrl: './mail.component.html', styleUrls : ['./mail.component.scss'] }) -export class FuseMailComponent implements OnInit, OnDestroy +export class MailComponent implements OnInit, OnDestroy { hasSelectedMails: boolean; isIndeterminate: boolean; @@ -26,110 +27,162 @@ export class FuseMailComponent implements OnInit, OnDestroy searchInput: FormControl; currentMail: Mail; - onSelectedMailsChanged: Subscription; - onFoldersChanged: Subscription; - onFiltersChanged: Subscription; - onLabelsChanged: Subscription; - onCurrentMailChanged: Subscription; + // Private + private _unsubscribeAll: Subject; + /** + * Constructor + * + * @param {MailService} _mailService + * @param {FuseConfigService} _fuseConfigService + * @param {FuseTranslationLoaderService} _fuseTranslationLoaderService + */ constructor( - private mailService: MailService, - private fuseTranslationLoader: FuseTranslationLoaderService + private _mailService: MailService, + private _fuseConfigService: FuseConfigService, + private _fuseTranslationLoaderService: FuseTranslationLoaderService ) { + // Configure the layout + this._fuseConfigService.config = { + routerAnimation: 'none' + }; + + // Load the translations + this._fuseTranslationLoaderService.loadTranslations(english, turkish); + + // Set the defaults this.searchInput = new FormControl(''); - this.fuseTranslationLoader.loadTranslations(english, turkish); + + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.onSelectedMailsChanged = - this.mailService.onSelectedMailsChanged - .subscribe(selectedMails => { + this._mailService.onSelectedMailsChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(selectedMails => { + setTimeout(() => { + this.hasSelectedMails = selectedMails.length > 0; + this.isIndeterminate = (selectedMails.length !== this._mailService.mails.length && selectedMails.length > 0); + }, 0); + }); - setTimeout(() => { - this.hasSelectedMails = selectedMails.length > 0; - this.isIndeterminate = (selectedMails.length !== this.mailService.mails.length && selectedMails.length > 0); - }, 0); - }); + this._mailService.onFoldersChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(folders => { + this.folders = this._mailService.folders; + }); - this.onFoldersChanged = - this.mailService.onFoldersChanged - .subscribe(folders => { - this.folders = this.mailService.folders; - }); + this._mailService.onFiltersChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(folders => { + this.filters = this._mailService.filters; + }); - this.onFiltersChanged = - this.mailService.onFiltersChanged - .subscribe(folders => { - this.filters = this.mailService.filters; - }); + this._mailService.onLabelsChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(labels => { + this.labels = this._mailService.labels; + }); - this.onLabelsChanged = - this.mailService.onLabelsChanged - .subscribe(labels => { - this.labels = this.mailService.labels; - }); - - this.onCurrentMailChanged = - this.mailService.onCurrentMailChanged - .subscribe(currentMail => { - if ( !currentMail ) - { - this.currentMail = null; - } - else - { - this.currentMail = currentMail; - } - }); + this._mailService.onCurrentMailChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(currentMail => { + if ( !currentMail ) + { + this.currentMail = null; + } + else + { + this.currentMail = currentMail; + } + }); this.searchInput.valueChanges.pipe( + takeUntil(this._unsubscribeAll), debounceTime(300), distinctUntilChanged() ) .subscribe(searchText => { - this.mailService.onSearchTextChanged.next(searchText); + this._mailService.onSearchTextChanged.next(searchText); }); } - ngOnDestroy() + /** + * On destroy + */ + ngOnDestroy(): void { - this.onSelectedMailsChanged.unsubscribe(); - this.onFoldersChanged.unsubscribe(); - this.onFiltersChanged.unsubscribe(); - this.onLabelsChanged.unsubscribe(); - this.onCurrentMailChanged.unsubscribe(); - + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); } - toggleSelectAll() + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Toggle select all + */ + toggleSelectAll(): void { - this.mailService.toggleSelectAll(); + this._mailService.toggleSelectAll(); } - selectMails(filterParameter?, filterValue?) + /** + * Select mails + * + * @param filterParameter + * @param filterValue + */ + selectMails(filterParameter?, filterValue?): void { - this.mailService.selectMails(filterParameter, filterValue); + this._mailService.selectMails(filterParameter, filterValue); } - deselectMails() + /** + * Deselect mails + */ + deselectMails(): void { - this.mailService.deselectMails(); + this._mailService.deselectMails(); } - deSelectCurrentMail() + /** + * Deselect current mail + */ + deselectCurrentMail(): void { - this.mailService.onCurrentMailChanged.next(null); + this._mailService.onCurrentMailChanged.next(null); } - toggleLabelOnSelectedMails(labelId) + /** + * Toggle label on selected mails + * + * @param labelId + */ + toggleLabelOnSelectedMails(labelId): void { - this.mailService.toggleLabelOnSelectedMails(labelId); + this._mailService.toggleLabelOnSelectedMails(labelId); } - setFolderOnSelectedMails(folderId) + /** + * Set folder on selected mails + * + * @param folderId + */ + setFolderOnSelectedMails(folderId): void { - this.mailService.setFolderOnSelectedMails(folderId); + this._mailService.setFolderOnSelectedMails(folderId); } } diff --git a/src/app/main/apps/mail/mail.model.ts b/src/app/main/apps/mail/mail.model.ts index 42ff6cf5..7b36a600 100644 --- a/src/app/main/apps/mail/mail.model.ts +++ b/src/app/main/apps/mail/mail.model.ts @@ -27,6 +27,11 @@ export class Mail labels: string[]; folder: string; + /** + * Constructor + * + * @param mail + */ constructor(mail) { this.id = mail.id; diff --git a/src/app/main/apps/mail/mail.module.ts b/src/app/main/apps/mail/mail.module.ts index a9b177f9..4066b864 100644 --- a/src/app/main/apps/mail/mail.module.ts +++ b/src/app/main/apps/mail/mail.module.ts @@ -1,59 +1,57 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; - import { MatButtonModule, MatCheckboxModule, MatDialogModule, MatFormFieldModule, MatIconModule, MatInputModule, MatMenuModule, MatRippleModule, MatSelectModule, MatSidenavModule, MatToolbarModule } from '@angular/material'; - import { TranslateModule } from '@ngx-translate/core'; import { FuseSharedModule } from '@fuse/shared.module'; -import { MailService } from './mail.service'; -import { FuseMailComponent } from './mail.component'; -import { FuseMailMainSidenavComponent } from './sidenavs/main/main-sidenav.component'; -import { FuseMailListItemComponent } from './mail-list/mail-list-item/mail-list-item.component'; -import { FuseMailListComponent } from './mail-list/mail-list.component'; -import { FuseMailDetailsComponent } from './mail-details/mail-details.component'; -import { FuseMailComposeDialogComponent } from './dialogs/compose/compose.component'; +import { MailService } from 'app/main/apps/mail/mail.service'; +import { MailComponent } from 'app/main/apps/mail/mail.component'; +import { MailListComponent } from 'app/main/apps/mail/mail-list/mail-list.component'; +import { MailListItemComponent } from 'app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component'; +import { MailDetailsComponent } from 'app/main/apps/mail/mail-details/mail-details.component'; +import { MailMainSidenavComponent } from 'app/main/apps/mail/sidenavs/main/main-sidenav.component'; +import { MailComposeDialogComponent } from 'app/main/apps/mail/dialogs/compose/compose.component'; const routes: Routes = [ { path : 'label/:labelHandle', - component: FuseMailComponent, + component: MailComponent, resolve : { mail: MailService } }, { path : 'label/:labelHandle/:mailId', - component: FuseMailComponent, + component: MailComponent, resolve : { mail: MailService } }, { path : 'filter/:filterHandle', - component: FuseMailComponent, + component: MailComponent, resolve : { mail: MailService } }, { path : 'filter/:filterHandle/:mailId', - component: FuseMailComponent, + component: MailComponent, resolve : { mail: MailService } }, { path : ':folderHandle', - component: FuseMailComponent, + component: MailComponent, resolve : { mail: MailService } }, { path : ':folderHandle/:mailId', - component: FuseMailComponent, + component: MailComponent, resolve : { mail: MailService } @@ -66,12 +64,12 @@ const routes: Routes = [ @NgModule({ declarations : [ - FuseMailComponent, - FuseMailListComponent, - FuseMailListItemComponent, - FuseMailDetailsComponent, - FuseMailMainSidenavComponent, - FuseMailComposeDialogComponent + MailComponent, + MailListComponent, + MailListItemComponent, + MailDetailsComponent, + MailMainSidenavComponent, + MailComposeDialogComponent ], imports : [ RouterModule.forChild(routes), @@ -95,8 +93,10 @@ const routes: Routes = [ providers : [ MailService ], - entryComponents: [FuseMailComposeDialogComponent] + entryComponents: [ + MailComposeDialogComponent + ] }) -export class FuseMailModule +export class MailModule { } diff --git a/src/app/main/apps/mail/mail.service.ts b/src/app/main/apps/mail/mail.service.ts index de0c7d50..95dcdca8 100644 --- a/src/app/main/apps/mail/mail.service.ts +++ b/src/app/main/apps/mail/mail.service.ts @@ -5,7 +5,7 @@ import { BehaviorSubject, Observable } from 'rxjs'; import { FuseUtils } from '@fuse/utils'; -import { Mail } from './mail.model'; +import { Mail } from 'app/main/apps/mail/mail.model'; @Injectable() export class MailService implements Resolve @@ -20,22 +20,37 @@ export class MailService implements Resolve labels: any[]; routeParams: any; - onMailsChanged: BehaviorSubject = new BehaviorSubject([]); - onSelectedMailsChanged: BehaviorSubject = new BehaviorSubject([]); - onCurrentMailChanged: BehaviorSubject = new BehaviorSubject([]); + onMailsChanged: BehaviorSubject; + onSelectedMailsChanged: BehaviorSubject; + onCurrentMailChanged: BehaviorSubject; + onFoldersChanged: BehaviorSubject; + onFiltersChanged: BehaviorSubject; + onLabelsChanged: BehaviorSubject; + onSearchTextChanged: BehaviorSubject; - onFoldersChanged: BehaviorSubject = new BehaviorSubject([]); - onFiltersChanged: BehaviorSubject = new BehaviorSubject([]); - onLabelsChanged: BehaviorSubject = new BehaviorSubject([]); - onSearchTextChanged: BehaviorSubject = new BehaviorSubject(''); - - constructor(private http: HttpClient) + /** + * Constructor + * + * @param {HttpClient} _httpClient + */ + constructor( + private _httpClient: HttpClient + ) { + // Set the defaults this.selectedMails = []; + this.onMailsChanged = new BehaviorSubject([]); + this.onSelectedMailsChanged = new BehaviorSubject([]); + this.onCurrentMailChanged = new BehaviorSubject([]); + this.onFoldersChanged = new BehaviorSubject([]); + this.onFiltersChanged = new BehaviorSubject([]); + this.onLabelsChanged = new BehaviorSubject([]); + this.onSearchTextChanged = new BehaviorSubject(''); } /** - * Resolve + * Resolver + * * @param {ActivatedRouteSnapshot} route * @param {RouterStateSnapshot} state * @returns {Observable | Promise | any} @@ -83,12 +98,13 @@ export class MailService implements Resolve /** * Get all folders + * * @returns {Promise} */ getFolders(): Promise { return new Promise((resolve, reject) => { - this.http.get('api/mail-folders') + this._httpClient.get('api/mail-folders') .subscribe((response: any) => { this.folders = response; this.onFoldersChanged.next(this.folders); @@ -99,12 +115,13 @@ export class MailService implements Resolve /** * Get all filters + * * @returns {Promise} */ getFilters(): Promise { return new Promise((resolve, reject) => { - this.http.get('api/mail-filters') + this._httpClient.get('api/mail-filters') .subscribe((response: any) => { this.filters = response; this.onFiltersChanged.next(this.filters); @@ -115,12 +132,13 @@ export class MailService implements Resolve /** * Get all labels + * * @returns {Promise} */ getLabels(): Promise { return new Promise((resolve, reject) => { - this.http.get('api/mail-labels') + this._httpClient.get('api/mail-labels') .subscribe((response: any) => { this.labels = response; this.onLabelsChanged.next(this.labels); @@ -131,6 +149,7 @@ export class MailService implements Resolve /** * Get all mails + * * @returns {Promise} */ getMails(): Promise @@ -150,6 +169,7 @@ export class MailService implements Resolve /** * Get mails by folder + * * @param handle * @returns {Promise} */ @@ -157,12 +177,12 @@ export class MailService implements Resolve { return new Promise((resolve, reject) => { - this.http.get('api/mail-folders?handle=' + handle) + this._httpClient.get('api/mail-folders?handle=' + handle) .subscribe((folders: any) => { const folderId = folders[0].id; - this.http.get('api/mail-mails?folder=' + folderId) + this._httpClient.get('api/mail-mails?folder=' + folderId) .subscribe((mails: any) => { this.mails = mails.map(mail => { @@ -182,6 +202,7 @@ export class MailService implements Resolve /** * Get mails by filter + * * @param handle * @returns {Promise} */ @@ -189,7 +210,7 @@ export class MailService implements Resolve { return new Promise((resolve, reject) => { - this.http.get('api/mail-mails?' + handle + '=true') + this._httpClient.get('api/mail-mails?' + handle + '=true') .subscribe((mails: any) => { this.mails = mails.map(mail => { @@ -208,18 +229,19 @@ export class MailService implements Resolve /** * Get mails by label + * * @param handle * @returns {Promise} */ getMailsByLabel(handle): Promise { return new Promise((resolve, reject) => { - this.http.get('api/mail-labels?handle=' + handle) + this._httpClient.get('api/mail-labels?handle=' + handle) .subscribe((labels: any) => { const labelId = labels[0].id; - this.http.get('api/mail-mails?labels=' + labelId) + this._httpClient.get('api/mail-mails?labels=' + labelId) .subscribe((mails: any) => { this.mails = mails.map(mail => { @@ -239,9 +261,10 @@ export class MailService implements Resolve /** * Toggle selected mail by id + * * @param id */ - toggleSelectedMail(id) + toggleSelectedMail(id): void { // First, check if we already have that mail as selected... if ( this.selectedMails.length > 0 ) @@ -281,7 +304,7 @@ export class MailService implements Resolve /** * Toggle select all */ - toggleSelectAll() + toggleSelectAll(): void { if ( this.selectedMails.length > 0 ) { @@ -294,7 +317,13 @@ export class MailService implements Resolve } - selectMails(filterParameter?, filterValue?) + /** + * Select mails + * + * @param filterParameter + * @param filterValue + */ + selectMails(filterParameter?, filterValue?): void { this.selectedMails = []; @@ -316,7 +345,10 @@ export class MailService implements Resolve this.onSelectedMailsChanged.next(this.selectedMails); } - deselectMails() + /** + * Deselect mails + */ + deselectMails(): void { this.selectedMails = []; @@ -326,9 +358,10 @@ export class MailService implements Resolve /** * Set current mail by id + * * @param id */ - setCurrentMail(id) + setCurrentMail(id): void { this.currentMail = this.mails.find(mail => { return mail.id === id; @@ -339,9 +372,10 @@ export class MailService implements Resolve /** * Toggle label on selected mails + * * @param labelId */ - toggleLabelOnSelectedMails(labelId) + toggleLabelOnSelectedMails(labelId): void { this.selectedMails.map(mail => { @@ -362,9 +396,10 @@ export class MailService implements Resolve /** * Set folder on selected mails + * * @param folderId */ - setFolderOnSelectedMails(folderId) + setFolderOnSelectedMails(folderId): void { this.selectedMails.map(mail => { mail.folder = folderId; @@ -377,14 +412,15 @@ export class MailService implements Resolve /** * Update the mail + * * @param mail * @returns {Promise} */ - updateMail(mail) + updateMail(mail): Promise { return new Promise((resolve, reject) => { - this.http.post('api/mail-mails/' + mail.id, {...mail}) + this._httpClient.post('api/mail-mails/' + mail.id, {...mail}) .subscribe(response => { this.getMails().then(mails => { @@ -400,5 +436,4 @@ export class MailService implements Resolve }); }); } - } diff --git a/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.ts b/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.ts index f086c281..dab4d5b5 100644 --- a/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.ts +++ b/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.ts @@ -1,20 +1,21 @@ import { Component, OnDestroy, OnInit } from '@angular/core'; import { FormGroup } from '@angular/forms'; import { MatDialog } from '@angular/material'; -import { Subscription } from 'rxjs'; import { fuseAnimations } from '@fuse/animations'; -import { MailService } from '../../mail.service'; -import { FuseMailComposeDialogComponent } from '../../dialogs/compose/compose.component'; +import { MailService } from 'app/main/apps/mail/mail.service'; +import { MailComposeDialogComponent } from 'app/main/apps/mail/dialogs/compose/compose.component'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; @Component({ - selector : 'fuse-mail-main-sidenav', + selector : 'mail-main-sidenav', templateUrl: './main-sidenav.component.html', styleUrls : ['./main-sidenav.component.scss'], animations : fuseAnimations }) -export class FuseMailMainSidenavComponent implements OnInit, OnDestroy +export class MailMainSidenavComponent implements OnInit, OnDestroy { folders: any[]; filters: any[]; @@ -23,55 +24,79 @@ export class FuseMailMainSidenavComponent implements OnInit, OnDestroy selectedAccount: string; dialogRef: any; - onFoldersChanged: Subscription; - onFiltersChanged: Subscription; - onLabelsChanged: Subscription; + // Private + private _unsubscribeAll: Subject; + /** + * Constructor + * + * @param {MailService} _mailService + * @param {MatDialog} _matDialog + */ constructor( - private mailService: MailService, - public dialog: MatDialog + private _mailService: MailService, + public _matDialog: MatDialog ) { - // Data + // Set the defaults this.accounts = { 'creapond' : 'johndoe@creapond.com', 'withinpixels': 'johndoe@withinpixels.com' }; - this.selectedAccount = 'creapond'; + + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.onFoldersChanged = - this.mailService.onFoldersChanged - .subscribe(folders => { - this.folders = folders; - }); + this._mailService.onFoldersChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(folders => { + this.folders = folders; + }); - this.onFiltersChanged = - this.mailService.onFiltersChanged - .subscribe(filters => { - this.filters = filters; - }); + this._mailService.onFiltersChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(filters => { + this.filters = filters; + }); - this.onLabelsChanged = - this.mailService.onLabelsChanged - .subscribe(labels => { - this.labels = labels; - }); + this._mailService.onLabelsChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(labels => { + this.labels = labels; + }); } - ngOnDestroy() + /** + * On destroy + */ + ngOnDestroy(): void { - this.onFoldersChanged.unsubscribe(); - this.onFiltersChanged.unsubscribe(); - this.onLabelsChanged.unsubscribe(); + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); } - - composeDialog() + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Compose dialog + */ + composeDialog(): void { - this.dialogRef = this.dialog.open(FuseMailComposeDialogComponent, { + this.dialogRef = this._matDialog.open(MailComposeDialogComponent, { panelClass: 'mail-compose-dialog' }); this.dialogRef.afterClosed() diff --git a/src/app/main/apps/scrumboard/board.model.ts b/src/app/main/apps/scrumboard/board.model.ts index 3f061428..3b987661 100644 --- a/src/app/main/apps/scrumboard/board.model.ts +++ b/src/app/main/apps/scrumboard/board.model.ts @@ -67,6 +67,11 @@ export class Board color: string }[]; + /** + * Constructor + * + * @param board + */ constructor(board) { this.name = board.name || 'Untitled Board'; diff --git a/src/app/main/apps/scrumboard/board/add-list/add-list.component.ts b/src/app/main/apps/scrumboard/board/add-list/add-list.component.ts index fc0fcddb..bf74e6b1 100644 --- a/src/app/main/apps/scrumboard/board/add-list/add-list.component.ts +++ b/src/app/main/apps/scrumboard/board/add-list/add-list.component.ts @@ -2,49 +2,77 @@ import { Component, EventEmitter, Output, ViewChild } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; @Component({ - selector : 'fuse-scrumboard-board-add-list', + selector : 'scrumboard-board-add-list', templateUrl: './add-list.component.html', styleUrls : ['./add-list.component.scss'] }) -export class FuseScrumboardBoardAddListComponent +export class ScrumboardBoardAddListComponent { - formActive = false; + formActive: boolean; form: FormGroup; - @Output() onlistAdd = new EventEmitter(); - @ViewChild('nameInput') nameInputField; + @Output() + onListAdd: EventEmitter; + + @ViewChild('nameInput') + nameInputField; + + /** + * Constructor + * + * @param {FormBuilder} _formBuilder + */ constructor( - private formBuilder: FormBuilder + private _formBuilder: FormBuilder ) { + // Set the defaults + this.formActive = false; + this.onListAdd = new EventEmitter(); } - - openForm() + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Open form + */ + openForm(): void { - this.form = this.formBuilder.group({ + this.form = this._formBuilder.group({ name: [''] }); this.formActive = true; this.focusNameField(); } - closeForm() + /** + * Close form + */ + closeForm(): void { this.formActive = false; } - focusNameField() + /** + * Focus to the name field + */ + focusNameField(): void { setTimeout(() => { this.nameInputField.nativeElement.focus(); }); } - onFormSubmit() + /** + * On form submit + */ + onFormSubmit(): void { if ( this.form.valid ) { - this.onlistAdd.next(this.form.getRawValue().name); + this.onListAdd.next(this.form.getRawValue().name); this.formActive = false; } } diff --git a/src/app/main/apps/scrumboard/board/board.component.html b/src/app/main/apps/scrumboard/board/board.component.html index f2d4cfae..e98bb873 100644 --- a/src/app/main/apps/scrumboard/board/board.component.html +++ b/src/app/main/apps/scrumboard/board/board.component.html @@ -26,10 +26,10 @@ fxFlex="1 0 100%" fxFlex.gt-xs="1 0 auto" fxFlexOrder="1" fxFlexOrder.gt-xs="2"> remove_red_eye - - + @@ -58,21 +58,21 @@ *fuseIfOnDom [@animateStagger]="{value:'50'}"> - - + - - + + @@ -82,7 +82,7 @@ - + diff --git a/src/app/main/apps/scrumboard/board/board.component.ts b/src/app/main/apps/scrumboard/board/board.component.ts index 85ac0bc8..d225089c 100644 --- a/src/app/main/apps/scrumboard/board/board.component.ts +++ b/src/app/main/apps/scrumboard/board/board.component.ts @@ -1,65 +1,100 @@ import { Component, OnDestroy, OnInit } from '@angular/core'; import { Location } from '@angular/common'; import { ActivatedRoute } from '@angular/router'; - -import { Subscription } from 'rxjs'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { fuseAnimations } from '@fuse/animations'; -import { List } from '../list.model'; -import { ScrumboardService } from '../scrumboard.service'; +import { ScrumboardService } from 'app/main/apps/scrumboard/scrumboard.service'; +import { List } from 'app/main/apps/scrumboard/list.model'; @Component({ - selector : 'fuse-scrumboard-board', + selector : 'scrumboard-board', templateUrl: './board.component.html', styleUrls : ['./board.component.scss'], animations : fuseAnimations }) -export class FuseScrumboardBoardComponent implements OnInit, OnDestroy +export class ScrumboardBoardComponent implements OnInit, OnDestroy { board: any; - onBoardChanged: Subscription; + + // Private + private _unsubscribeAll: Subject; constructor( - private route: ActivatedRoute, - private location: Location, - private scrumboardService: ScrumboardService + private _activatedRoute: ActivatedRoute, + private _location: Location, + private _scrumboardService: ScrumboardService ) { + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.onBoardChanged = - this.scrumboardService.onBoardChanged - .subscribe(board => { - this.board = board; - }); + this._scrumboardService.onBoardChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(board => { + this.board = board; + }); } - ngOnDestroy() + /** + * On destroy + */ + ngOnDestroy(): void { - this.onBoardChanged.unsubscribe(); + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); } - onListAdd(newListName) + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * On list add + * + * @param newListName + */ + onListAdd(newListName): void { if ( newListName === '' ) { return; } - this.scrumboardService.addList(new List({name: newListName})); + this._scrumboardService.addList(new List({name: newListName})); } - onBoardNameChanged(newName) + /** + * On board name changed + * + * @param newName + */ + onBoardNameChanged(newName): void { - this.scrumboardService.updateBoard(); - this.location.go('/apps/scrumboard/boards/' + this.board.id + '/' + this.board.uri); + this._scrumboardService.updateBoard(); + this._location.go('/apps/scrumboard/boards/' + this.board.id + '/' + this.board.uri); } - onDrop(ev) + /** + * On drop + * + * @param ev + */ + onDrop(ev): void { - this.scrumboardService.updateBoard(); + this._scrumboardService.updateBoard(); } } diff --git a/src/app/main/apps/scrumboard/board/dialogs/card/card.component.html b/src/app/main/apps/scrumboard/board/dialogs/card/card.component.html index caa2f1b3..3dbb896a 100644 --- a/src/app/main/apps/scrumboard/board/dialogs/card/card.component.html +++ b/src/app/main/apps/scrumboard/board/dialogs/card/card.component.html @@ -35,8 +35,8 @@ - + @@ -130,7 +130,7 @@ - diff --git a/src/app/main/apps/scrumboard/board/dialogs/card/card.component.ts b/src/app/main/apps/scrumboard/board/dialogs/card/card.component.ts index a8c8dff9..4bc04c73 100644 --- a/src/app/main/apps/scrumboard/board/dialogs/card/card.component.ts +++ b/src/app/main/apps/scrumboard/board/dialogs/card/card.component.ts @@ -1,74 +1,108 @@ import { Component, Inject, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; import { NgForm } from '@angular/forms/src/forms'; import { MAT_DIALOG_DATA, MatDialog, MatDialogRef, MatMenuTrigger } from '@angular/material'; - -import { Subscription } from 'rxjs'; +import { Subject } from 'rxjs'; import { FuseConfirmDialogComponent } from '@fuse/components/confirm-dialog/confirm-dialog.component'; import { FuseUtils } from '@fuse/utils'; -import { ScrumboardService } from '../../../scrumboard.service'; +import { ScrumboardService } from 'app/main/apps/scrumboard/scrumboard.service'; +import { takeUntil } from 'rxjs/operators'; @Component({ - selector : 'fuse-scrumboard-board-card-dialog', + selector : 'scrumboard-board-card-dialog', templateUrl : './card.component.html', styleUrls : ['./card.component.scss'], encapsulation: ViewEncapsulation.None }) -export class FuseScrumboardCardDialogComponent implements OnInit, OnDestroy +export class ScrumboardCardDialogComponent implements OnInit, OnDestroy { card: any; board: any; list: any; - onBoardChanged: Subscription; toggleInArray = FuseUtils.toggleInArray; - - @ViewChild('checklistMenuTrigger') checklistMenu: MatMenuTrigger; - @ViewChild('newCheckListTitleField') newCheckListTitleField; - confirmDialogRef: MatDialogRef; + @ViewChild('checklistMenuTrigger') + checklistMenu: MatMenuTrigger; + + @ViewChild('newCheckListTitleField') + newCheckListTitleField; + + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {MatDialogRef} _matDialogRef + * @param _data + * @param {MatDialog} _matDialog + * @param {ScrumboardService} _scrumboardService + */ constructor( - public dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) private data: any, - public dialog: MatDialog, - private scrumboardService: ScrumboardService + private _matDialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) private _data: any, + private _matDialog: MatDialog, + private _scrumboardService: ScrumboardService ) { - + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.onBoardChanged = - this.scrumboardService.onBoardChanged - .subscribe(board => { - this.board = board; + this._scrumboardService.onBoardChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(board => { + this.board = board; - this.card = this.board.cards.find((_card) => { - return this.data.cardId === _card.id; - }); - - this.list = this.board.lists.find((_list) => { - return this.data.listId === _list.id; - }); + this.card = this.board.cards.find((_card) => { + return this._data.cardId === _card.id; }); + + this.list = this.board.lists.find((_list) => { + return this._data.listId === _list.id; + }); + }); } /** - * Remove Due date + * On destroy */ - removeDueDate() + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Remove due date + */ + removeDueDate(): void { this.card.due = ''; this.updateCard(); } /** - * Toggle Subscribe + * Toggle subscribe */ - toggleSubscribe() + toggleSubscribe(): void { this.card.subscribed = !this.card.subscribed; @@ -76,10 +110,11 @@ export class FuseScrumboardCardDialogComponent implements OnInit, OnDestroy } /** - * Toggle Cover Image + * Toggle cover image + * * @param attachmentId */ - toggleCoverImage(attachmentId) + toggleCoverImage(attachmentId): void { if ( this.card.idAttachmentCover === attachmentId ) { @@ -94,10 +129,11 @@ export class FuseScrumboardCardDialogComponent implements OnInit, OnDestroy } /** - * Remove Attachment + * Remove attachment + * * @param attachment */ - removeAttachment(attachment) + removeAttachment(attachment): void { if ( attachment.id === this.card.idAttachmentCover ) { @@ -110,10 +146,11 @@ export class FuseScrumboardCardDialogComponent implements OnInit, OnDestroy } /** - * Remove Checklist + * Remove checklist + * * @param checklist */ - removeChecklist(checklist) + removeChecklist(checklist): void { this.card.checklists.splice(this.card.checklists.indexOf(checklist), 1); @@ -121,10 +158,11 @@ export class FuseScrumboardCardDialogComponent implements OnInit, OnDestroy } /** - * Update Checked Count + * Update checked count + * * @param list */ - updateCheckedCount(list) + updateCheckedCount(list): void { const checkItems = list.checkItems; let checkedItems = 0; @@ -154,11 +192,12 @@ export class FuseScrumboardCardDialogComponent implements OnInit, OnDestroy } /** - * Remove Checklist Item + * Remove checklist item + * * @param checkItem * @param checklist */ - removeChecklistItem(checkItem, checklist) + removeChecklistItem(checkItem, checklist): void { checklist.checkItems.splice(checklist.checkItems.indexOf(checkItem), 1); @@ -168,11 +207,12 @@ export class FuseScrumboardCardDialogComponent implements OnInit, OnDestroy } /** - * Add Check Item + * Add check item + * * @param {NgForm} form * @param checkList */ - addCheckItem(form: NgForm, checkList) + addCheckItem(form: NgForm, checkList): void { const checkItemVal = form.value.checkItem; @@ -196,10 +236,11 @@ export class FuseScrumboardCardDialogComponent implements OnInit, OnDestroy } /** - * Add Checklist + * Add checklist + * * @param {NgForm} form */ - addChecklist(form: NgForm) + addChecklist(form: NgForm): void { this.card.checklists.push({ id : FuseUtils.generateGUID(), @@ -215,9 +256,9 @@ export class FuseScrumboardCardDialogComponent implements OnInit, OnDestroy } /** - * On Checklist Menu Open + * On checklist menu open */ - onChecklistMenuOpen() + onChecklistMenuOpen(): void { setTimeout(() => { this.newCheckListTitleField.nativeElement.focus(); @@ -225,10 +266,11 @@ export class FuseScrumboardCardDialogComponent implements OnInit, OnDestroy } /** - * Add New Comment + * Add new comment + * * @param {NgForm} form */ - addNewComment(form: NgForm) + addNewComment(form: NgForm): void { const newCommentText = form.value.newComment; @@ -246,11 +288,11 @@ export class FuseScrumboardCardDialogComponent implements OnInit, OnDestroy } /** - * Remove Card + * Remove card */ - removeCard() + removeCard(): void { - this.confirmDialogRef = this.dialog.open(FuseConfirmDialogComponent, { + this.confirmDialogRef = this._matDialog.open(FuseConfirmDialogComponent, { disableClose: false }); @@ -259,22 +301,17 @@ export class FuseScrumboardCardDialogComponent implements OnInit, OnDestroy this.confirmDialogRef.afterClosed().subscribe(result => { if ( result ) { - this.dialogRef.close(); - this.scrumboardService.removeCard(this.card.id, this.list.id); + this._matDialogRef.close(); + this._scrumboardService.removeCard(this.card.id, this.list.id); } }); } /** - * Update Card + * Update card */ - updateCard() + updateCard(): void { - this.scrumboardService.updateCard(this.card); - } - - ngOnDestroy() - { - this.onBoardChanged.unsubscribe(); + this._scrumboardService.updateCard(this.card); } } diff --git a/src/app/main/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.ts b/src/app/main/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.ts index 3008a485..46cb3bca 100644 --- a/src/app/main/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.ts +++ b/src/app/main/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.ts @@ -1,68 +1,110 @@ import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewEncapsulation } from '@angular/core'; - -import { Subscription } from 'rxjs'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { fuseAnimations } from '@fuse/animations'; import { FuseUtils } from '@fuse/utils'; -import { ScrumboardService } from '../../../../scrumboard.service'; +import { ScrumboardService } from 'app/main/apps/scrumboard/scrumboard.service'; @Component({ - selector : 'fuse-scrumboard-label-selector', + selector : 'scrumboard-label-selector', templateUrl : './label-selector.component.html', styleUrls : ['./label-selector.component.scss'], encapsulation: ViewEncapsulation.None, animations : fuseAnimations }) -export class FuseScrumboardLabelSelectorComponent implements OnInit, OnDestroy +export class ScrumboardLabelSelectorComponent implements OnInit, OnDestroy { + @Input('card') + card: any; + + @Output() + onCardLabelsChange: EventEmitter; + board: any; - @Input('card') card: any; - @Output() onCardLabelsChange = new EventEmitter(); - - labelsMenuView = 'labels'; + labelsMenuView: string; selectedLabel: any; - newLabel = { - 'id' : '', - 'name' : '', - 'color': 'mat-blue-400-bg' - }; - toggleInArray = FuseUtils.toggleInArray; + newLabel: any; + toggleInArray: any; - onBoardChanged: Subscription; + // Private + private _unsubscribeAll: Subject; + /** + * Constructor + * + * @param {ScrumboardService} _scrumboardService + */ constructor( - private scrumboardService: ScrumboardService + private _scrumboardService: ScrumboardService ) { + // Set the defaults + this.onCardLabelsChange = new EventEmitter(); + this.labelsMenuView = 'labels'; + this.newLabel = { + 'id' : '', + 'name' : '', + 'color': 'mat-blue-400-bg' + }; + this.toggleInArray = FuseUtils.toggleInArray; + + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.onBoardChanged = - this.scrumboardService.onBoardChanged - .subscribe(board => { - this.board = board; - }); + this._scrumboardService.onBoardChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(board => { + this.board = board; + }); } - ngOnDestroy() + /** + * On destroy + */ + ngOnDestroy(): void { - this.onBoardChanged.unsubscribe(); + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); } - cardLabelsChanged() + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Card labels changed + */ + cardLabelsChanged(): void { this.onCardLabelsChange.next(); } - onLabelChange() + /** + * On label change + */ + onLabelChange(): void { - this.scrumboardService.updateBoard(); + this._scrumboardService.updateBoard(); } - addNewLabel() + /** + * Add new label + */ + addNewLabel(): void { this.newLabel.id = FuseUtils.generateGUID(); this.board.labels.push(Object.assign({}, this.newLabel)); diff --git a/src/app/main/apps/scrumboard/board/edit-board-name/edit-board-name.component.ts b/src/app/main/apps/scrumboard/board/edit-board-name/edit-board-name.component.ts index 68f67b92..66ab3c71 100644 --- a/src/app/main/apps/scrumboard/board/edit-board-name/edit-board-name.component.ts +++ b/src/app/main/apps/scrumboard/board/edit-board-name/edit-board-name.component.ts @@ -2,25 +2,41 @@ import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core import { FormBuilder, FormGroup } from '@angular/forms'; @Component({ - selector : 'fuse-scrumboard-edit-board-name', + selector : 'scrumboard-edit-board-name', templateUrl: './edit-board-name.component.html', styleUrls : ['./edit-board-name.component.scss'] }) -export class FuseScrumboardEditBoardNameComponent +export class ScrumboardEditBoardNameComponent { - formActive = false; + formActive: boolean; form: FormGroup; - @Input() board; - @Output() onNameChanged = new EventEmitter(); - @ViewChild('nameInput') nameInputField; + + @Input() + board; + + @Output() + onNameChanged: EventEmitter; + + @ViewChild('nameInput') + nameInputField; constructor( private formBuilder: FormBuilder ) { + // Set the defaults + this.formActive = false; + this.onNameChanged = new EventEmitter(); } - openForm() + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Open form + */ + openForm(): void { this.form = this.formBuilder.group({ name: [this.board.name] @@ -29,19 +45,28 @@ export class FuseScrumboardEditBoardNameComponent this.focusNameField(); } - closeForm() + /** + * Close form + */ + closeForm(): void { this.formActive = false; } - focusNameField() + /** + * Focus to the name field + */ + focusNameField(): void { setTimeout(() => { this.nameInputField.nativeElement.focus(); }); } - onFormSubmit() + /** + * On form submit + */ + onFormSubmit(): void { if ( this.form.valid ) { @@ -52,5 +77,4 @@ export class FuseScrumboardEditBoardNameComponent this.formActive = false; } } - } diff --git a/src/app/main/apps/scrumboard/board/list/add-card/add-card.component.ts b/src/app/main/apps/scrumboard/board/list/add-card/add-card.component.ts index e3381072..4a2268d3 100644 --- a/src/app/main/apps/scrumboard/board/list/add-card/add-card.component.ts +++ b/src/app/main/apps/scrumboard/board/list/add-card/add-card.component.ts @@ -2,45 +2,73 @@ import { Component, EventEmitter, Output, ViewChild } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; @Component({ - selector : 'fuse-scrumboard-board-add-card', + selector : 'scrumboard-board-add-card', templateUrl: './add-card.component.html', styleUrls : ['./add-card.component.scss'] }) -export class FuseScrumboardBoardAddCardComponent +export class ScrumboardBoardAddCardComponent { - formActive = false; + formActive: boolean; form: FormGroup; - @Output() onCardAdd = new EventEmitter(); - @ViewChild('nameInput') nameInputField; + @Output() + onCardAdd: EventEmitter; + + @ViewChild('nameInput') + nameInputField; + + /** + * Constructor + * + * @param {FormBuilder} _formBuilder + */ constructor( - private formBuilder: FormBuilder + private _formBuilder: FormBuilder ) { + // Set the defaults + this.formActive = false; + this.onCardAdd = new EventEmitter(); } - - openForm() + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Open the form + */ + openForm(): void { - this.form = this.formBuilder.group({ + this.form = this._formBuilder.group({ name: '' }); this.formActive = true; this.focusNameField(); } - closeForm() + /** + * Close the form + */ + closeForm(): void { this.formActive = false; } - focusNameField() + /** + * Focus to the name field + */ + focusNameField(): void { setTimeout(() => { this.nameInputField.nativeElement.focus(); }); } - onFormSubmit() + /** + * On form submit + */ + onFormSubmit(): void { if ( this.form.valid ) { diff --git a/src/app/main/apps/scrumboard/board/list/card/card.component.ts b/src/app/main/apps/scrumboard/board/list/card/card.component.ts index 9ec11bd9..0c47bf23 100644 --- a/src/app/main/apps/scrumboard/board/list/card/card.component.ts +++ b/src/app/main/apps/scrumboard/board/list/card/card.component.ts @@ -3,40 +3,57 @@ import { ActivatedRoute } from '@angular/router'; import * as moment from 'moment'; @Component({ - selector : 'fuse-scrumboard-board-card', + selector : 'scrumboard-board-card', templateUrl : './card.component.html', styleUrls : ['./card.component.scss'], encapsulation: ViewEncapsulation.None }) -export class FuseScrumboardBoardCardComponent implements OnInit +export class ScrumboardBoardCardComponent implements OnInit { - @Input() cardId; + @Input() + cardId; + card: any; board: any; + /** + * Constructor + * + * @param {ActivatedRoute} _activatedRoute + */ constructor( - private route: ActivatedRoute, + private _activatedRoute: ActivatedRoute ) { } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.board = this.route.snapshot.data.board; + this.board = this._activatedRoute.snapshot.data.board; this.card = this.board.cards.filter((card) => { return this.cardId === card.id; })[0]; } + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + /** * Is the card overdue? * * @param cardDate * @returns {boolean} */ - isOverdue(cardDate) + isOverdue(cardDate): boolean { return moment() > moment(new Date(cardDate)); } - } diff --git a/src/app/main/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.ts b/src/app/main/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.ts index 56591cb1..55cf831d 100644 --- a/src/app/main/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.ts +++ b/src/app/main/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.ts @@ -2,46 +2,76 @@ import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core import { FormBuilder, FormGroup } from '@angular/forms'; @Component({ - selector : 'fuse-scrumboard-board-edit-list-name', + selector : 'scrumboard-board-edit-list-name', templateUrl: './edit-list-name.component.html', styleUrls : ['./edit-list-name.component.scss'] }) -export class FuseScrumboardBoardEditListNameComponent +export class ScrumboardBoardEditListNameComponent { - formActive = false; + formActive: boolean; form: FormGroup; - @Input() list; - @Output() onNameChanged = new EventEmitter(); - @ViewChild('nameInput') nameInputField; + @Input() + list; + + @Output() + onNameChanged: EventEmitter; + + @ViewChild('nameInput') + nameInputField; + + /** + * Constructor + * + * @param {FormBuilder} _formBuilder + */ constructor( - private formBuilder: FormBuilder + private _formBuilder: FormBuilder ) { + // Set the defaults + this.formActive = false; + this.onNameChanged = new EventEmitter(); } - openForm() + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Open the form + */ + openForm(): void { - this.form = this.formBuilder.group({ + this.form = this._formBuilder.group({ name: [this.list.name] }); this.formActive = true; this.focusNameField(); } - closeForm() + /** + * Close the form + */ + closeForm(): void { this.formActive = false; } - focusNameField() + /** + * Focus to the name field + */ + focusNameField(): void { setTimeout(() => { this.nameInputField.nativeElement.focus(); }); } - onFormSubmit() + /** + * On form submit + */ + onFormSubmit(): void { if ( this.form.valid ) { @@ -50,5 +80,4 @@ export class FuseScrumboardBoardEditListNameComponent this.formActive = false; } } - } diff --git a/src/app/main/apps/scrumboard/board/list/list.component.html b/src/app/main/apps/scrumboard/board/list/list.component.html index 2899c33c..33324778 100644 --- a/src/app/main/apps/scrumboard/board/list/list.component.html +++ b/src/app/main/apps/scrumboard/board/list/list.component.html @@ -3,11 +3,11 @@
- - +
- - + +
diff --git a/src/app/main/apps/scrumboard/board/list/list.component.ts b/src/app/main/apps/scrumboard/board/list/list.component.ts index d90ecc5e..15093f75 100644 --- a/src/app/main/apps/scrumboard/board/list/list.component.ts +++ b/src/app/main/apps/scrumboard/board/list/list.component.ts @@ -1,78 +1,122 @@ import { Component, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { MatDialog, MatDialogRef } from '@angular/material'; - -import { Subscription } from 'rxjs'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { FuseConfirmDialogComponent } from '@fuse/components/confirm-dialog/confirm-dialog.component'; import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive'; -import { Card } from '../../card.model'; -import { ScrumboardService } from '../../scrumboard.service'; -import { FuseScrumboardCardDialogComponent } from '../dialogs/card/card.component'; +import { ScrumboardService } from 'app/main/apps/scrumboard/scrumboard.service'; +import { Card } from 'app/main/apps/scrumboard/card.model'; +import { ScrumboardCardDialogComponent } from 'app/main/apps/scrumboard/board/dialogs/card/card.component'; @Component({ - selector : 'fuse-scrumboard-board-list', + selector : 'scrumboard-board-list', templateUrl : './list.component.html', styleUrls : ['./list.component.scss'], encapsulation: ViewEncapsulation.None }) -export class FuseScrumboardBoardListComponent implements OnInit, OnDestroy +export class ScrumboardBoardListComponent implements OnInit, OnDestroy { board: any; dialogRef: any; - @Input() list; - @ViewChild(FusePerfectScrollbarDirective) listScroll: FusePerfectScrollbarDirective; + @Input() + list; + + @ViewChild(FusePerfectScrollbarDirective) + listScroll: FusePerfectScrollbarDirective; - onBoardChanged: Subscription; confirmDialogRef: MatDialogRef; + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {ActivatedRoute} _activatedRoute + * @param {ScrumboardService} _scrumboardService + * @param {MatDialog} _matDialog + */ constructor( - private route: ActivatedRoute, - private scrumboardService: ScrumboardService, - public dialog: MatDialog + private _activatedRoute: ActivatedRoute, + private _scrumboardService: ScrumboardService, + private _matDialog: MatDialog ) { + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.onBoardChanged = - this.scrumboardService.onBoardChanged - .subscribe(board => { - this.board = board; - }); + this._scrumboardService.onBoardChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(board => { + this.board = board; + }); } - ngOnDestroy() + /** + * On destroy + */ + ngOnDestroy(): void { - this.onBoardChanged.unsubscribe(); + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); } - onListNameChanged(newListName) + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * On list name changed + * + * @param newListName + */ + onListNameChanged(newListName): void { this.list.name = newListName; } - onCardAdd(newCardName) + /** + * On card added + * + * @param newCardName + */ + onCardAdd(newCardName): void { if ( newCardName === '' ) { return; } - this.scrumboardService.addCard(this.list.id, new Card({name: newCardName})); + this._scrumboardService.addCard(this.list.id, new Card({name: newCardName})); setTimeout(() => { this.listScroll.scrollToBottom(0, 400); }); - } - removeList(listId) + /** + * Remove list + * + * @param listId + */ + removeList(listId): void { - this.confirmDialogRef = this.dialog.open(FuseConfirmDialogComponent, { + this.confirmDialogRef = this._matDialog.open(FuseConfirmDialogComponent, { disableClose: false }); @@ -81,14 +125,19 @@ export class FuseScrumboardBoardListComponent implements OnInit, OnDestroy this.confirmDialogRef.afterClosed().subscribe(result => { if ( result ) { - this.scrumboardService.removeList(listId); + this._scrumboardService.removeList(listId); } }); } - openCardDialog(cardId) + /** + * Open card dialog + * + * @param cardId + */ + openCardDialog(cardId): void { - this.dialogRef = this.dialog.open(FuseScrumboardCardDialogComponent, { + this.dialogRef = this._matDialog.open(ScrumboardCardDialogComponent, { panelClass: 'scrumboard-card-dialog', data : { cardId: cardId, @@ -101,8 +150,13 @@ export class FuseScrumboardBoardListComponent implements OnInit, OnDestroy }); } - onDrop(ev) + /** + * On drop + * + * @param ev + */ + onDrop(ev): void { - this.scrumboardService.updateBoard(); + this._scrumboardService.updateBoard(); } } diff --git a/src/app/main/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.ts b/src/app/main/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.ts index f5f0f0f6..239ee075 100644 --- a/src/app/main/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.ts +++ b/src/app/main/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.ts @@ -1,46 +1,78 @@ import { Component, OnDestroy, OnInit } from '@angular/core'; - -import { Subscription } from 'rxjs'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { MatColors } from '@fuse/mat-colors'; -import { ScrumboardService } from '../../../../scrumboard.service'; +import { ScrumboardService } from 'app/main/apps/scrumboard/scrumboard.service'; @Component({ - selector : 'fuse-scrumboard-board-color-selector', + selector : 'scrumboard-board-color-selector', templateUrl: './board-color-selector.component.html', styleUrls : ['./board-color-selector.component.scss'] }) -export class FuseScrumboardBoardColorSelectorComponent implements OnInit, OnDestroy +export class ScrumboardBoardColorSelectorComponent implements OnInit, OnDestroy { colors: any; board: any; - onBoardChanged: Subscription; + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {ScrumboardService} _scrumboardService + */ constructor( - private scrumboardService: ScrumboardService + private _scrumboardService: ScrumboardService ) { + // Set the defaults this.colors = MatColors.all; + + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.onBoardChanged = - this.scrumboardService.onBoardChanged - .subscribe(board => { - this.board = board; - }); + this._scrumboardService.onBoardChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(board => { + this.board = board; + }); } - ngOnDestroy() + /** + * On destroy + */ + ngOnDestroy(): void { - this.onBoardChanged.unsubscribe(); + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); } - setColor(color) + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Set the color + * + * @param color + */ + setColor(color): void { this.board.settings.color = color; - this.scrumboardService.updateBoard(); + this._scrumboardService.updateBoard(); } } diff --git a/src/app/main/apps/scrumboard/board/sidenavs/settings/settings.component.html b/src/app/main/apps/scrumboard/board/sidenavs/settings/settings.component.html index e407b7ec..effbb249 100644 --- a/src/app/main/apps/scrumboard/board/sidenavs/settings/settings.component.html +++ b/src/app/main/apps/scrumboard/board/sidenavs/settings/settings.component.html @@ -28,7 +28,7 @@
-
+
remove_red_eye

Subscribe

check @@ -68,7 +68,7 @@
- +
diff --git a/src/app/main/apps/scrumboard/board/sidenavs/settings/settings.component.ts b/src/app/main/apps/scrumboard/board/sidenavs/settings/settings.component.ts index f7ead963..95d3b273 100644 --- a/src/app/main/apps/scrumboard/board/sidenavs/settings/settings.component.ts +++ b/src/app/main/apps/scrumboard/board/sidenavs/settings/settings.component.ts @@ -1,50 +1,78 @@ import { Component, OnDestroy, OnInit } from '@angular/core'; -import { Subscription } from 'rxjs'; - import { fuseAnimations } from '@fuse/animations'; - -import { ScrumboardService } from '../../../scrumboard.service'; +import { ScrumboardService } from 'app/main/apps/scrumboard/scrumboard.service'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; @Component({ - selector : 'fuse-scrumboard-board-settings', + selector : 'scrumboard-board-settings', templateUrl: './settings.component.html', styleUrls : ['./settings.component.scss'], animations : fuseAnimations }) -export class FuseScrumboardBoardSettingsSidenavComponent implements OnInit, OnDestroy +export class ScrumboardBoardSettingsSidenavComponent implements OnInit, OnDestroy { board: any; - view = 'main'; - onBoardChanged: Subscription; + view: string; + + // Private + private _unsubscribeAll: Subject; constructor( private scrumboardService: ScrumboardService ) { + // Set the defaults + this.view = 'main'; + + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.onBoardChanged = - this.scrumboardService.onBoardChanged - .subscribe(board => { - this.board = board; - }); + this.scrumboardService.onBoardChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(board => { + this.board = board; + }); } - ngOnDestroy() + /** + * On destroy + */ + ngOnDestroy(): void { - this.onBoardChanged.unsubscribe(); + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); } - - toggleCardCover() + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Toggle card cover + */ + toggleCardCover(): void { this.board.settings.cardCoverImages = !this.board.settings.cardCoverImages; this.scrumboardService.updateBoard(); } - toggleSubcription() + /** + * Toggle subscription + */ + toggleSubscription(): void { this.board.settings.subscribed = !this.board.settings.subscribed; this.scrumboardService.updateBoard(); diff --git a/src/app/main/apps/scrumboard/card.model.ts b/src/app/main/apps/scrumboard/card.model.ts index ddd84436..69b2bd5b 100644 --- a/src/app/main/apps/scrumboard/card.model.ts +++ b/src/app/main/apps/scrumboard/card.model.ts @@ -17,6 +17,11 @@ export class Card activities: any[]; due: string; + /** + * Constructor + * + * @param card + */ constructor(card) { this.id = card.id || FuseUtils.generateGUID(); diff --git a/src/app/main/apps/scrumboard/list.model.ts b/src/app/main/apps/scrumboard/list.model.ts index 44d1fa59..987f6535 100644 --- a/src/app/main/apps/scrumboard/list.model.ts +++ b/src/app/main/apps/scrumboard/list.model.ts @@ -6,6 +6,11 @@ export class List name: string; idCards: string[]; + /** + * Constructor + * + * @param list + */ constructor(list) { this.id = list.id || FuseUtils.generateGUID(); diff --git a/src/app/main/apps/scrumboard/scrumboard.component.ts b/src/app/main/apps/scrumboard/scrumboard.component.ts index f06d1b04..b35fc570 100644 --- a/src/app/main/apps/scrumboard/scrumboard.component.ts +++ b/src/app/main/apps/scrumboard/scrumboard.component.ts @@ -1,50 +1,79 @@ import { Component, OnDestroy, OnInit } from '@angular/core'; import { Router } from '@angular/router'; - -import { Subscription } from 'rxjs'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { fuseAnimations } from '@fuse/animations'; -import { Board } from './board.model'; -import { ScrumboardService } from './scrumboard.service'; +import { ScrumboardService } from 'app/main/apps/scrumboard/scrumboard.service'; +import { Board } from 'app/main/apps/scrumboard/board.model'; @Component({ - selector : 'fuse-scrumboard', + selector : 'scrumboard', templateUrl: './scrumboard.component.html', styleUrls : ['./scrumboard.component.scss'], animations : fuseAnimations }) -export class FuseScrumboardComponent implements OnInit, OnDestroy +export class ScrumboardComponent implements OnInit, OnDestroy { boards: any[]; - onBoardsChanged: Subscription; + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {Router} _router + * @param {ScrumboardService} _scrumboardService + */ constructor( - private router: Router, - private scrumboardService: ScrumboardService + private _router: Router, + private _scrumboardService: ScrumboardService ) { + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.onBoardsChanged = - this.scrumboardService.onBoardsChanged - .subscribe(boards => { - this.boards = boards; - }); + this._scrumboardService.onBoardsChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(boards => { + this.boards = boards; + }); } - ngOnDestroy() + /** + * On destroy + */ + ngOnDestroy(): void { - this.onBoardsChanged.unsubscribe(); + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); } - newBoard() + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * New board + */ + newBoard(): void { const newBoard = new Board({}); - this.scrumboardService.createNewBoard(newBoard).then(() => { - this.router.navigate(['/apps/scrumboard/boards/' + newBoard.id + '/' + newBoard.uri]); + this._scrumboardService.createNewBoard(newBoard).then(() => { + this._router.navigate(['/apps/scrumboard/boards/' + newBoard.id + '/' + newBoard.uri]); }); } } diff --git a/src/app/main/apps/scrumboard/scrumboard.module.ts b/src/app/main/apps/scrumboard/scrumboard.module.ts index a50ee324..eb495b35 100644 --- a/src/app/main/apps/scrumboard/scrumboard.module.ts +++ b/src/app/main/apps/scrumboard/scrumboard.module.ts @@ -1,37 +1,36 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; - import { MatButtonModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule, MatDialogModule, MatFormFieldModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatProgressBarModule, MatRippleModule, MatSidenavModule, MatToolbarModule, MatTooltipModule } from '@angular/material'; +import { NgxDnDModule } from '@swimlane/ngx-dnd'; import { FuseSharedModule } from '@fuse/shared.module'; import { FuseConfirmDialogModule, FuseMaterialColorPickerModule } from '@fuse/components'; -import { BoardResolve, ScrumboardService } from './scrumboard.service'; -import { FuseScrumboardComponent } from './scrumboard.component'; -import { FuseScrumboardBoardComponent } from './board/board.component'; -import { FuseScrumboardBoardListComponent } from './board/list/list.component'; -import { FuseScrumboardBoardCardComponent } from './board/list/card/card.component'; -import { FuseScrumboardBoardEditListNameComponent } from './board/list/edit-list-name/edit-list-name.component'; -import { FuseScrumboardBoardAddCardComponent } from './board/list/add-card/add-card.component'; -import { FuseScrumboardBoardAddListComponent } from './board/add-list/add-list.component'; -import { FuseScrumboardCardDialogComponent } from './board/dialogs/card/card.component'; -import { FuseScrumboardLabelSelectorComponent } from './board/dialogs/card/label-selector/label-selector.component'; -import { FuseScrumboardEditBoardNameComponent } from './board/edit-board-name/edit-board-name.component'; -import { FuseScrumboardBoardSettingsSidenavComponent } from './board/sidenavs/settings/settings.component'; -import { FuseScrumboardBoardColorSelectorComponent } from './board/sidenavs/settings/board-color-selector/board-color-selector.component'; -import { NgxDnDModule } from '@swimlane/ngx-dnd'; +import { BoardResolve, ScrumboardService } from 'app/main/apps/scrumboard/scrumboard.service'; +import { ScrumboardComponent } from 'app/main/apps/scrumboard/scrumboard.component'; +import { ScrumboardBoardComponent } from 'app/main/apps/scrumboard/board/board.component'; +import { ScrumboardBoardListComponent } from 'app/main/apps/scrumboard/board/list/list.component'; +import { ScrumboardBoardCardComponent } from 'app/main/apps/scrumboard/board/list/card/card.component'; +import { ScrumboardBoardEditListNameComponent } from 'app/main/apps/scrumboard/board/list/edit-list-name/edit-list-name.component'; +import { ScrumboardBoardAddCardComponent } from 'app/main/apps/scrumboard/board/list/add-card/add-card.component'; +import { ScrumboardBoardAddListComponent } from 'app/main/apps/scrumboard/board/add-list/add-list.component'; +import { ScrumboardCardDialogComponent } from 'app/main/apps/scrumboard/board/dialogs/card/card.component'; +import { ScrumboardLabelSelectorComponent } from 'app/main/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component'; +import { ScrumboardEditBoardNameComponent } from 'app/main/apps/scrumboard/board/edit-board-name/edit-board-name.component'; +import { ScrumboardBoardSettingsSidenavComponent } from 'app/main/apps/scrumboard/board/sidenavs/settings/settings.component'; +import { ScrumboardBoardColorSelectorComponent } from 'app/main/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component'; const routes: Routes = [ { path : 'boards', - component: FuseScrumboardComponent, + component: ScrumboardComponent, resolve : { scrumboard: ScrumboardService } }, { path : 'boards/:boardId/:boardUri', - component: FuseScrumboardBoardComponent, + component: ScrumboardBoardComponent, resolve : { board: BoardResolve } @@ -44,18 +43,18 @@ const routes: Routes = [ @NgModule({ declarations : [ - FuseScrumboardComponent, - FuseScrumboardBoardComponent, - FuseScrumboardBoardListComponent, - FuseScrumboardBoardCardComponent, - FuseScrumboardBoardEditListNameComponent, - FuseScrumboardBoardAddCardComponent, - FuseScrumboardBoardAddListComponent, - FuseScrumboardCardDialogComponent, - FuseScrumboardLabelSelectorComponent, - FuseScrumboardEditBoardNameComponent, - FuseScrumboardBoardSettingsSidenavComponent, - FuseScrumboardBoardColorSelectorComponent + ScrumboardComponent, + ScrumboardBoardComponent, + ScrumboardBoardListComponent, + ScrumboardBoardCardComponent, + ScrumboardBoardEditListNameComponent, + ScrumboardBoardAddCardComponent, + ScrumboardBoardAddListComponent, + ScrumboardCardDialogComponent, + ScrumboardLabelSelectorComponent, + ScrumboardEditBoardNameComponent, + ScrumboardBoardSettingsSidenavComponent, + ScrumboardBoardColorSelectorComponent ], imports : [ RouterModule.forChild(routes), @@ -86,7 +85,7 @@ const routes: Routes = [ ScrumboardService, BoardResolve ], - entryComponents: [FuseScrumboardCardDialogComponent] + entryComponents: [ScrumboardCardDialogComponent] }) export class FuseScrumboardModule { diff --git a/src/app/main/apps/scrumboard/scrumboard.service.ts b/src/app/main/apps/scrumboard/scrumboard.service.ts index f541dce1..cd9f0617 100644 --- a/src/app/main/apps/scrumboard/scrumboard.service.ts +++ b/src/app/main/apps/scrumboard/scrumboard.service.ts @@ -1,7 +1,6 @@ import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router'; - import { Observable, BehaviorSubject } from 'rxjs'; @Injectable() @@ -11,15 +10,26 @@ export class ScrumboardService implements Resolve routeParams: any; board: any; - onBoardsChanged: BehaviorSubject = new BehaviorSubject([]); - onBoardChanged: BehaviorSubject = new BehaviorSubject([]); + onBoardsChanged: BehaviorSubject; + onBoardChanged: BehaviorSubject; - constructor(private http: HttpClient) + /** + * Constructor + * + * @param {HttpClient} _httpClient + */ + constructor( + private _httpClient: HttpClient + ) { + // Set the defaults + this.onBoardsChanged = new BehaviorSubject([]); + this.onBoardChanged = new BehaviorSubject([]); } /** - * Resolve + * Resolver + * * @param {ActivatedRouteSnapshot} route * @param {RouterStateSnapshot} state * @returns {Observable | Promise | any} @@ -40,10 +50,15 @@ export class ScrumboardService implements Resolve }); } + /** + * Get boards + * + * @returns {Promise} + */ getBoards(): Promise { return new Promise((resolve, reject) => { - this.http.get('api/scrumboard-boards') + this._httpClient.get('api/scrumboard-boards') .subscribe((response: any) => { this.boards = response; this.onBoardsChanged.next(this.boards); @@ -52,10 +67,16 @@ export class ScrumboardService implements Resolve }); } + /** + * Get board + * + * @param boardId + * @returns {Promise} + */ getBoard(boardId): Promise { return new Promise((resolve, reject) => { - this.http.get('api/scrumboard-boards/' + boardId) + this._httpClient.get('api/scrumboard-boards/' + boardId) .subscribe((response: any) => { this.board = response; this.onBoardChanged.next(this.board); @@ -64,7 +85,14 @@ export class ScrumboardService implements Resolve }); } - addCard(listId, newCard) + /** + * Add card + * + * @param listId + * @param newCard + * @returns {Promise} + */ + addCard(listId, newCard): Promise { this.board.lists.map((list) => { if ( list.id === listId ) @@ -78,16 +106,26 @@ export class ScrumboardService implements Resolve return this.updateBoard(); } - addList(newList) + /** + * Add list + * + * @param newList + * @returns {Promise} + */ + addList(newList): Promise { - this.board.lists.push(newList); return this.updateBoard(); - } - removeList(listId) + /** + * Remove list + * + * @param listId + * @returns {Promise} + */ + removeList(listId): Promise { const list = this.board.lists.find((_list) => { return _list.id === listId; @@ -105,9 +143,14 @@ export class ScrumboardService implements Resolve return this.updateBoard(); } - removeCard(cardId, listId?) + /** + * Remove card + * + * @param cardId + * @param listId + */ + removeCard(cardId, listId?): void { - const card = this.board.cards.find((_card) => { return _card.id === cardId; }); @@ -125,10 +168,15 @@ export class ScrumboardService implements Resolve this.updateBoard(); } - updateBoard() + /** + * Update board + * + * @returns {Promise} + */ + updateBoard(): Promise { return new Promise((resolve, reject) => { - this.http.post('api/scrumboard-boards/' + this.board.id, this.board) + this._httpClient.post('api/scrumboard-boards/' + this.board.id, this.board) .subscribe(response => { this.onBoardChanged.next(this.board); resolve(this.board); @@ -136,7 +184,12 @@ export class ScrumboardService implements Resolve }); } - updateCard(newCard) + /** + * Update card + * + * @param newCard + */ + updateCard(newCard): void { this.board.cards.map((_card) => { if ( _card.id === newCard.id ) @@ -148,10 +201,16 @@ export class ScrumboardService implements Resolve this.updateBoard(); } - createNewBoard(board) + /** + * Create new board + * + * @param board + * @returns {Promise} + */ + createNewBoard(board): Promise { return new Promise((resolve, reject) => { - this.http.post('api/scrumboard-boards/' + board.id, board) + this._httpClient.post('api/scrumboard-boards/' + board.id, board) .subscribe(response => { resolve(board); }, reject); @@ -162,12 +221,25 @@ export class ScrumboardService implements Resolve @Injectable() export class BoardResolve implements Resolve { - constructor(private scrumboardService: ScrumboardService) + /** + * Constructor + * + * @param {ScrumboardService} _scrumboardService + */ + constructor( + private _scrumboardService: ScrumboardService + ) { } - resolve(route: ActivatedRouteSnapshot) + /** + * Resolver + * + * @param {ActivatedRouteSnapshot} route + * @returns {Promise} + */ + resolve(route: ActivatedRouteSnapshot): Promise { - return this.scrumboardService.getBoard(route.paramMap.get('boardId')); + return this._scrumboardService.getBoard(route.paramMap.get('boardId')); } } diff --git a/src/app/main/apps/todo/sidenavs/main/main-sidenav.component.ts b/src/app/main/apps/todo/sidenavs/main/main-sidenav.component.ts index 6ec21dc7..eedee49d 100644 --- a/src/app/main/apps/todo/sidenavs/main/main-sidenav.component.ts +++ b/src/app/main/apps/todo/sidenavs/main/main-sidenav.component.ts @@ -1,18 +1,19 @@ import { Component, OnDestroy, OnInit } from '@angular/core'; import { Router } from '@angular/router'; -import { Subscription } from 'rxjs'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { fuseAnimations } from '@fuse/animations'; -import { TodoService } from '../../todo.service'; +import { TodoService } from 'app/main/apps/todo/todo.service'; @Component({ - selector : 'fuse-todo-main-sidenav', + selector : 'todo-main-sidenav', templateUrl: './main-sidenav.component.html', styleUrls : ['./main-sidenav.component.scss'], animations : fuseAnimations }) -export class FuseTodoMainSidenavComponent implements OnInit, OnDestroy +export class TodoMainSidenavComponent implements OnInit, OnDestroy { folders: any[]; filters: any[]; @@ -20,46 +21,75 @@ export class FuseTodoMainSidenavComponent implements OnInit, OnDestroy accounts: object; selectedAccount: string; - onFiltersChanged: Subscription; - onTagsChanged: Subscription; + // Private + private _unsubscribeAll: Subject; - constructor(private todoService: TodoService, private router: Router) + /** + * Constructor + * + * @param {TodoService} _todoService + * @param {Router} _router + */ + constructor( + private _todoService: TodoService, + private _router: Router + ) { - // Data + // Set the defaults this.accounts = { 'creapond' : 'johndoe@creapond.com', 'withinpixels': 'johndoe@withinpixels.com' }; - this.selectedAccount = 'creapond'; + + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() - { - this.onFiltersChanged = - this.todoService.onFiltersChanged - .subscribe(filters => { - this.filters = filters; - }); + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- - this.onTagsChanged = - this.todoService.onTagsChanged - .subscribe(tags => { - this.tags = tags; - }); + /** + * On init + */ + ngOnInit(): void + { + this._todoService.onFiltersChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(filters => { + this.filters = filters; + }); + + this._todoService.onTagsChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(tags => { + this.tags = tags; + }); } - ngOnDestroy() + /** + * On destroy + */ + ngOnDestroy(): void { - this.onFiltersChanged.unsubscribe(); - this.onTagsChanged.unsubscribe(); + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); } - newTodo() + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * New todo + */ + newTodo(): void { - this.router.navigate(['/apps/todo/all']).then(() => { + this._router.navigate(['/apps/todo/all']).then(() => { setTimeout(() => { - this.todoService.onNewTodoClicked.next(''); + this._todoService.onNewTodoClicked.next(''); }); }); } diff --git a/src/app/main/apps/todo/todo-details/todo-details.component.ts b/src/app/main/apps/todo/todo-details/todo-details.component.ts index ca4fe2af..07f6b6fc 100644 --- a/src/app/main/apps/todo/todo-details/todo-details.component.ts +++ b/src/app/main/apps/todo/todo-details/todo-details.component.ts @@ -1,108 +1,132 @@ import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; - -import { Subscription } from 'rxjs'; -import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; +import { Subject } from 'rxjs'; +import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators'; import { FuseUtils } from '@fuse/utils'; import { fuseAnimations } from '@fuse/animations'; -import { Todo } from '../todo.model'; -import { TodoService } from '../todo.service'; +import { Todo } from 'app/main/apps/todo/todo.model'; +import { TodoService } from 'app/main/apps/todo/todo.service'; @Component({ - selector : 'fuse-todo-details', + selector : 'todo-details', templateUrl: './todo-details.component.html', styleUrls : ['./todo-details.component.scss'], animations : fuseAnimations }) -export class FuseTodoDetailsComponent implements OnInit, OnDestroy +export class TodoDetailsComponent implements OnInit, OnDestroy { todo: Todo; tags: any[]; formType: string; todoForm: FormGroup; - @ViewChild('titleInput') titleInputField; - onFormChange: any; - onCurrentTodoChanged: Subscription; - onTagsChanged: Subscription; - onNewTodoClicked: Subscription; + @ViewChild('titleInput') + titleInputField; + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {TodoService} _todoService + * @param {FormBuilder} _formBuilder + */ constructor( - private todoService: TodoService, - private formBuilder: FormBuilder + private _todoService: TodoService, + private _formBuilder: FormBuilder ) { - + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { // Subscribe to update the current todo - this.onCurrentTodoChanged = - this.todoService.onCurrentTodoChanged - .subscribe(([todo, formType]) => { + this._todoService.onCurrentTodoChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(([todo, formType]) => { - if ( todo && formType === 'edit' ) - { - this.formType = 'edit'; - - this.todo = todo; - - this.todoForm = this.createTodoForm(); - - this.onFormChange = - this.todoForm.valueChanges.pipe( - debounceTime(500), - distinctUntilChanged() - ).subscribe(data => { - this.todoService.updateTodo(data); - }); - } - }); - - // Subscribe to update on tag change - this.onTagsChanged = - this.todoService.onTagsChanged - .subscribe(labels => { - this.tags = labels; - }); - - // Subscribe to update on tag change - this.onNewTodoClicked = - this.todoService.onNewTodoClicked - .subscribe(() => { - this.todo = new Todo({}); - this.todo.id = FuseUtils.generateGUID(); - this.formType = 'new'; + if ( todo && formType === 'edit' ) + { + this.formType = 'edit'; + this.todo = todo; this.todoForm = this.createTodoForm(); - this.focusTitleField(); - this.todoService.onCurrentTodoChanged.next([this.todo, 'new']); - }); + + this.todoForm.valueChanges + .pipe( + takeUntil(this._unsubscribeAll), + debounceTime(500), + distinctUntilChanged() + ) + .subscribe(data => { + this._todoService.updateTodo(data); + }); + } + }); + + // Subscribe to update on tag change + this._todoService.onTagsChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(labels => { + this.tags = labels; + }); + + // Subscribe to update on tag change + this._todoService.onNewTodoClicked + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(() => { + this.todo = new Todo({}); + this.todo.id = FuseUtils.generateGUID(); + this.formType = 'new'; + this.todoForm = this.createTodoForm(); + this.focusTitleField(); + this._todoService.onCurrentTodoChanged.next([this.todo, 'new']); + }); } - ngOnDestroy() + /** + * On destroy + */ + ngOnDestroy(): void { - if ( this.onFormChange ) - { - this.onFormChange.unsubscribe(); - } - - this.onCurrentTodoChanged.unsubscribe(); - this.onNewTodoClicked.unsubscribe(); + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); } - focusTitleField() + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Focus title field + */ + focusTitleField(): void { setTimeout(() => { this.titleInputField.nativeElement.focus(); }); } - createTodoForm() + /** + * Create todo form + * + * @returns {FormGroup} + */ + createTodoForm(): FormGroup { - return this.formBuilder.group({ + return this._formBuilder.group({ 'id' : [this.todo.id], 'title' : [this.todo.title], 'notes' : [this.todo.notes], @@ -116,54 +140,80 @@ export class FuseTodoDetailsComponent implements OnInit, OnDestroy }); } - toggleStar(event) + /** + * Toggle star + * + * @param event + */ + toggleStar(event): void { event.stopPropagation(); this.todo.toggleStar(); - this.todoService.updateTodo(this.todo); + this._todoService.updateTodo(this.todo); } - toggleImportant(event) + /** + * Toggle important + * + * @param event + */ + toggleImportant(event): void { event.stopPropagation(); this.todo.toggleImportant(); - this.todoService.updateTodo(this.todo); + this._todoService.updateTodo(this.todo); } /** * Toggle Completed + * * @param event */ - toggleCompleted(event) + toggleCompleted(event): void { event.stopPropagation(); this.todo.toggleCompleted(); - this.todoService.updateTodo(this.todo); + this._todoService.updateTodo(this.todo); } /** * Toggle Deleted + * * @param event */ - toggleDeleted(event) + toggleDeleted(event): void { event.stopPropagation(); this.todo.toggleDeleted(); - this.todoService.updateTodo(this.todo); + this._todoService.updateTodo(this.todo); } - toggleTagOnTodo(tagId) + /** + * Toggle tag on todo + * + * @param tagId + */ + toggleTagOnTodo(tagId): void { - this.todoService.toggleTagOnTodo(tagId, this.todo); + this._todoService.toggleTagOnTodo(tagId, this.todo); } - hasTag(tagId) + /** + * Has tag? + * + * @param tagId + * @returns {any} + */ + hasTag(tagId): any { - return this.todoService.hasTag(tagId, this.todo); + return this._todoService.hasTag(tagId, this.todo); } - addTodo() + /** + * Add todo + */ + addTodo(): void { - this.todoService.updateTodo(this.todoForm.getRawValue()); + this._todoService.updateTodo(this.todoForm.getRawValue()); } } diff --git a/src/app/main/apps/todo/todo-list/todo-list-item/todo-list-item.component.ts b/src/app/main/apps/todo/todo-list/todo-list-item/todo-list-item.component.ts index c5e7caf5..75d9a1ef 100644 --- a/src/app/main/apps/todo/todo-list/todo-list-item/todo-list-item.component.ts +++ b/src/app/main/apps/todo/todo-list/todo-list-item/todo-list-item.component.ts @@ -1,112 +1,148 @@ import { Component, HostBinding, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; -import { Subscription } from 'rxjs'; - -import { Todo } from '../../todo.model'; -import { TodoService } from '../../todo.service'; +import { Subject, Subscription } from 'rxjs'; +import { Todo } from 'app/main/apps/todo/todo.model'; +import { TodoService } from 'app/main/apps/todo/todo.service'; +import { takeUntil } from 'rxjs/operators'; @Component({ - selector : 'fuse-todo-list-item', + selector : 'todo-list-item', templateUrl : './todo-list-item.component.html', styleUrls : ['./todo-list-item.component.scss'], encapsulation: ViewEncapsulation.None }) -export class FuseTodoListItemComponent implements OnInit, OnDestroy +export class TodoListItemComponent implements OnInit, OnDestroy { - @Input() todo: Todo; tags: any[]; - @HostBinding('class.selected') selected: boolean; - @HostBinding('class.completed') completed: boolean; - @HostBinding('class.move-disabled') moveDisabled: boolean; - onSelectedTodosChanged: Subscription; - onTagsChanged: Subscription; + @Input() + todo: Todo; + @HostBinding('class.selected') + selected: boolean; + + @HostBinding('class.completed') + completed: boolean; + + @HostBinding('class.move-disabled') + moveDisabled: boolean; + + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {TodoService} _todoService + * @param {ActivatedRoute} _activatedRoute + */ constructor( - private todoService: TodoService, - private route: ActivatedRoute + private _todoService: TodoService, + private _activatedRoute: ActivatedRoute ) { // Disable move if path is not /all - if ( route.snapshot.url[0].path !== 'all' ) + if ( _activatedRoute.snapshot.url[0].path !== 'all' ) { this.moveDisabled = true; } + + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { // Set the initial values this.todo = new Todo(this.todo); this.completed = this.todo.completed; // Subscribe to update on selected todo change - this.onSelectedTodosChanged = - this.todoService.onSelectedTodosChanged - .subscribe(selectedTodos => { - this.selected = false; + this._todoService.onSelectedTodosChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(selectedTodos => { + this.selected = false; - if ( selectedTodos.length > 0 ) + if ( selectedTodos.length > 0 ) + { + for ( const todo of selectedTodos ) { - for ( const todo of selectedTodos ) + if ( todo.id === this.todo.id ) { - if ( todo.id === this.todo.id ) - { - this.selected = true; - break; - } + this.selected = true; + break; } } - }); + } + }); // Subscribe to update on tag change - this.onTagsChanged = - this.todoService.onTagsChanged - .subscribe(tags => { - this.tags = tags; - }); + this._todoService.onTagsChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(tags => { + this.tags = tags; + }); } - ngOnDestroy() + /** + * On destroy + */ + ngOnDestroy(): void { - this.onSelectedTodosChanged.unsubscribe(); + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); } - onSelectedChange() + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * On selected change + */ + onSelectedChange(): void { - this.todoService.toggleSelectedTodo(this.todo.id); + this._todoService.toggleSelectedTodo(this.todo.id); } /** * Toggle star */ - toggleStar(event) + toggleStar(event): void { event.stopPropagation(); this.todo.toggleStar(); - this.todoService.updateTodo(this.todo); + this._todoService.updateTodo(this.todo); } /** * Toggle Important */ - toggleImportant(event) + toggleImportant(event): void { event.stopPropagation(); this.todo.toggleImportant(); - this.todoService.updateTodo(this.todo); + this._todoService.updateTodo(this.todo); } /** * Toggle Completed */ - toggleCompleted(event) + toggleCompleted(event): void { event.stopPropagation(); this.todo.toggleCompleted(); - this.todoService.updateTodo(this.todo); + this._todoService.updateTodo(this.todo); } } diff --git a/src/app/main/apps/todo/todo-list/todo-list.component.html b/src/app/main/apps/todo/todo-list/todo-list.component.html index ed4890d3..02e5de2d 100644 --- a/src/app/main/apps/todo/todo-list/todo-list.component.html +++ b/src/app/main/apps/todo/todo-list/todo-list.component.html @@ -2,13 +2,13 @@ There are no todos!
- - + +
diff --git a/src/app/main/apps/todo/todo-list/todo-list.component.ts b/src/app/main/apps/todo/todo-list/todo-list.component.ts index 57bcccbb..3f006da4 100644 --- a/src/app/main/apps/todo/todo-list/todo-list.component.ts +++ b/src/app/main/apps/todo/todo-list/todo-list.component.ts @@ -1,94 +1,125 @@ import { Component, OnDestroy, OnInit } from '@angular/core'; import { Location } from '@angular/common'; import { ActivatedRoute } from '@angular/router'; -import { Subscription } from 'rxjs'; +import { Subject } from 'rxjs'; import { fuseAnimations } from '@fuse/animations'; -import { Todo } from '../todo.model'; -import { TodoService } from '../todo.service'; +import { Todo } from 'app/main/apps/todo/todo.model'; +import { TodoService } from 'app/main/apps/todo/todo.service'; +import { takeUntil } from 'rxjs/operators'; @Component({ - selector : 'fuse-todo-list', + selector : 'todo-list', templateUrl: './todo-list.component.html', styleUrls : ['./todo-list.component.scss'], animations : fuseAnimations }) -export class FuseTodoListComponent implements OnInit, OnDestroy +export class TodoListComponent implements OnInit, OnDestroy { todos: Todo[]; currentTodo: Todo; - onTodosChanged: Subscription; - onCurrentTodoChanged: Subscription; + // Private + private _unsubscribeAll: Subject; + /** + * Constructor + * + * @param {ActivatedRoute} _activatedRoute + * @param {TodoService} _todoService + * @param {Location} _location + */ constructor( - private route: ActivatedRoute, - private todoService: TodoService, - private location: Location + private _activatedRoute: ActivatedRoute, + private _todoService: TodoService, + private _location: Location ) { + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { // Subscribe to update todos on changes - this.onTodosChanged = - this.todoService.onTodosChanged - .subscribe(todos => { - this.todos = todos; - }); + this._todoService.onTodosChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(todos => { + this.todos = todos; + }); // Subscribe to update current todo on changes - this.onCurrentTodoChanged = - this.todoService.onCurrentTodoChanged - .subscribe(currentTodo => { - if ( !currentTodo ) + this._todoService.onCurrentTodoChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(currentTodo => { + if ( !currentTodo ) + { + // Set the current todo id to null to deselect the current todo + this.currentTodo = null; + + // Handle the location changes + const tagHandle = this._activatedRoute.snapshot.params.tagHandle, + filterHandle = this._activatedRoute.snapshot.params.filterHandle; + + if ( tagHandle ) { - // Set the current todo id to null to deselect the current todo - this.currentTodo = null; - - // Handle the location changes - const tagHandle = this.route.snapshot.params.tagHandle, - filterHandle = this.route.snapshot.params.filterHandle; - - if ( tagHandle ) - { - this.location.go('apps/todo/tag/' + tagHandle); - } - else if ( filterHandle ) - { - this.location.go('apps/todo/filter/' + filterHandle); - } - else - { - this.location.go('apps/todo/all'); - } + this._location.go('apps/todo/tag/' + tagHandle); + } + else if ( filterHandle ) + { + this._location.go('apps/todo/filter/' + filterHandle); } else { - this.currentTodo = currentTodo; + this._location.go('apps/todo/all'); } - }); - } - - ngOnDestroy() - { - this.onTodosChanged.unsubscribe(); - this.onCurrentTodoChanged.unsubscribe(); + } + else + { + this.currentTodo = currentTodo; + } + }); } /** - * Read todo - * @param todoId + * On destroy */ - readTodo(todoId) + ngOnDestroy(): void { - // Set current todo - this.todoService.setCurrentTodo(todoId); + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); } - onDrop(ev) + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Read todo + * + * @param todoId + */ + readTodo(todoId): void + { + // Set current todo + this._todoService.setCurrentTodo(todoId); + } + + /** + * On drop + * + * @param ev + */ + onDrop(ev): void { } diff --git a/src/app/main/apps/todo/todo.component.html b/src/app/main/apps/todo/todo.component.html index d729f783..1216ed34 100644 --- a/src/app/main/apps/todo/todo.component.html +++ b/src/app/main/apps/todo/todo.component.html @@ -9,7 +9,7 @@ - + @@ -73,7 +73,7 @@
-
@@ -84,9 +84,9 @@
- + - +
diff --git a/src/app/main/apps/todo/todo.component.scss b/src/app/main/apps/todo/todo.component.scss index 74148b26..9ba8b4b1 100644 --- a/src/app/main/apps/todo/todo.component.scss +++ b/src/app/main/apps/todo/todo.component.scss @@ -39,16 +39,16 @@ @include media-breakpoint-down(lg) { - fuse-todo-list { + todo-list { border-right: 0; } - fuse-todo-list, - fuse-todo-details { + todo-list, + todo-details { flex: 1 0 100%; } - fuse-todo-details { + todo-details { display: none !important; } @@ -64,11 +64,11 @@ .content { - fuse-todo-list { + todo-list { display: none !important; } - fuse-todo-details { + todo-details { display: flex !important; } } diff --git a/src/app/main/apps/todo/todo.component.ts b/src/app/main/apps/todo/todo.component.ts index 72088b7f..8a44ff94 100644 --- a/src/app/main/apps/todo/todo.component.ts +++ b/src/app/main/apps/todo/todo.component.ts @@ -1,21 +1,20 @@ import { Component, OnDestroy, OnInit } from '@angular/core'; import { FormControl } from '@angular/forms'; - -import { Subscription } from 'rxjs'; -import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; +import { Subject } from 'rxjs'; +import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators'; import { fuseAnimations } from '@fuse/animations'; -import { Todo } from './todo.model'; -import { TodoService } from './todo.service'; +import { Todo } from 'app/main/apps/todo/todo.model'; +import { TodoService } from 'app/main/apps/todo/todo.service'; @Component({ - selector : 'fuse-todo', + selector : 'todo', templateUrl: './todo.component.html', styleUrls : ['./todo.component.scss'], animations : fuseAnimations }) -export class FuseTodoComponent implements OnInit, OnDestroy +export class TodoComponent implements OnInit, OnDestroy { hasSelectedTodos: boolean; isIndeterminate: boolean; @@ -24,91 +23,136 @@ export class FuseTodoComponent implements OnInit, OnDestroy searchInput: FormControl; currentTodo: Todo; - onSelectedTodosChanged: Subscription; - onFiltersChanged: Subscription; - onTagsChanged: Subscription; - onCurrentTodoChanged: Subscription; + // Private + private _unsubscribeAll: Subject; - constructor(private todoService: TodoService) + /** + * Constructor + * + * @param {TodoService} _todoService + */ + constructor( + private _todoService: TodoService + ) { + // Set the defaults this.searchInput = new FormControl(''); + + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.onSelectedTodosChanged = - this.todoService.onSelectedTodosChanged - .subscribe(selectedTodos => { + this._todoService.onSelectedTodosChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(selectedTodos => { - setTimeout(() => { - this.hasSelectedTodos = selectedTodos.length > 0; - this.isIndeterminate = (selectedTodos.length !== this.todoService.todos.length && selectedTodos.length > 0); - }, 0); - }); + setTimeout(() => { + this.hasSelectedTodos = selectedTodos.length > 0; + this.isIndeterminate = (selectedTodos.length !== this._todoService.todos.length && selectedTodos.length > 0); + }, 0); + }); - this.onFiltersChanged = - this.todoService.onFiltersChanged - .subscribe(folders => { - this.filters = this.todoService.filters; - }); + this._todoService.onFiltersChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(folders => { + this.filters = this._todoService.filters; + }); - this.onTagsChanged = - this.todoService.onTagsChanged - .subscribe(tags => { - this.tags = this.todoService.tags; - }); + this._todoService.onTagsChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(tags => { + this.tags = this._todoService.tags; + }); - this.searchInput.valueChanges.pipe( - debounceTime(300), - distinctUntilChanged() - ).subscribe(searchText => { - this.todoService.onSearchTextChanged.next(searchText); - }); + this.searchInput.valueChanges + .pipe( + takeUntil(this._unsubscribeAll), + debounceTime(300), + distinctUntilChanged() + ) + .subscribe(searchText => { + this._todoService.onSearchTextChanged.next(searchText); + }); - this.onCurrentTodoChanged = - this.todoService.onCurrentTodoChanged - .subscribe(([currentTodo, formType]) => { - if ( !currentTodo ) - { - this.currentTodo = null; - } - else - { - this.currentTodo = currentTodo; - } - }); + this._todoService.onCurrentTodoChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(([currentTodo, formType]) => { + if ( !currentTodo ) + { + this.currentTodo = null; + } + else + { + this.currentTodo = currentTodo; + } + }); } - ngOnDestroy() + /** + * On destroy + */ + ngOnDestroy(): void { - this.onSelectedTodosChanged.unsubscribe(); - this.onFiltersChanged.unsubscribe(); - this.onTagsChanged.unsubscribe(); - this.onCurrentTodoChanged.unsubscribe(); + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); } - deSelectCurrentTodo() + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Deselect current todo + */ + deselectCurrentTodo(): void { - this.todoService.onCurrentTodoChanged.next([null, null]); + this._todoService.onCurrentTodoChanged.next([null, null]); } - toggleSelectAll() + /** + * Toggle select all + */ + toggleSelectAll(): void { - this.todoService.toggleSelectAll(); + this._todoService.toggleSelectAll(); } - selectTodos(filterParameter?, filterValue?) + /** + * Select todos + * + * @param filterParameter + * @param filterValue + */ + selectTodos(filterParameter?, filterValue?): void { - this.todoService.selectTodos(filterParameter, filterValue); + this._todoService.selectTodos(filterParameter, filterValue); } - deselectTodos() + /** + * Deselect todos + */ + deselectTodos(): void { - this.todoService.deselectTodos(); + this._todoService.deselectTodos(); } - toggleTagOnSelectedTodos(tagId) + /** + * Toggle tag on selected todos + * + * @param tagId + */ + toggleTagOnSelectedTodos(tagId): void { - this.todoService.toggleTagOnSelectedTodos(tagId); + this._todoService.toggleTagOnSelectedTodos(tagId); } } diff --git a/src/app/main/apps/todo/todo.model.ts b/src/app/main/apps/todo/todo.model.ts index 0d3b3878..09960862 100644 --- a/src/app/main/apps/todo/todo.model.ts +++ b/src/app/main/apps/todo/todo.model.ts @@ -18,6 +18,11 @@ export class Todo } ]; + /** + * Constructor + * + * @param todo + */ constructor(todo) { { @@ -34,22 +39,34 @@ export class Todo } } - toggleStar() + /** + * Toggle star + */ + toggleStar(): void { this.starred = !this.starred; } - toggleImportant() + /** + * Toggle important + */ + toggleImportant(): void { this.important = !this.important; } - toggleCompleted() + /** + * Toggle completed + */ + toggleCompleted(): void { this.completed = !this.completed; } - toggleDeleted() + /** + * Toggle deleted + */ + toggleDeleted(): void { this.deleted = !this.deleted; } diff --git a/src/app/main/apps/todo/todo.module.ts b/src/app/main/apps/todo/todo.module.ts index 22d91ace..5a704c09 100644 --- a/src/app/main/apps/todo/todo.module.ts +++ b/src/app/main/apps/todo/todo.module.ts @@ -1,58 +1,56 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; - import { MatButtonModule, MatCheckboxModule, MatDatepickerModule, MatFormFieldModule, MatIconModule, MatInputModule, MatMenuModule, MatRippleModule, MatSelectModule, MatSidenavModule } from '@angular/material'; - import { NgxDnDModule } from '@swimlane/ngx-dnd'; import { FuseSharedModule } from '@fuse/shared.module'; -import { TodoService } from './todo.service'; -import { FuseTodoComponent } from './todo.component'; -import { FuseTodoMainSidenavComponent } from './sidenavs/main/main-sidenav.component'; -import { FuseTodoListItemComponent } from './todo-list/todo-list-item/todo-list-item.component'; -import { FuseTodoListComponent } from './todo-list/todo-list.component'; -import { FuseTodoDetailsComponent } from './todo-details/todo-details.component'; +import { TodoService } from 'app/main/apps/todo/todo.service'; +import { TodoComponent } from 'app/main/apps/todo/todo.component'; +import { TodoMainSidenavComponent } from 'app/main/apps/todo/sidenavs/main/main-sidenav.component'; +import { TodoListItemComponent } from 'app/main/apps/todo/todo-list/todo-list-item/todo-list-item.component'; +import { TodoListComponent } from 'app/main/apps/todo/todo-list/todo-list.component'; +import { TodoDetailsComponent } from 'app/main/apps/todo/todo-details/todo-details.component'; const routes: Routes = [ { path : 'all', - component: FuseTodoComponent, + component: TodoComponent, resolve : { todo: TodoService } }, { path : 'all/:todoId', - component: FuseTodoComponent, + component: TodoComponent, resolve : { todo: TodoService } }, { path : 'tag/:tagHandle', - component: FuseTodoComponent, + component: TodoComponent, resolve : { todo: TodoService } }, { path : 'tag/:tagHandle/:todoId', - component: FuseTodoComponent, + component: TodoComponent, resolve : { todo: TodoService } }, { path : 'filter/:filterHandle', - component: FuseTodoComponent, + component: TodoComponent, resolve : { todo: TodoService } }, { path : 'filter/:filterHandle/:todoId', - component: FuseTodoComponent, + component: TodoComponent, resolve : { todo: TodoService } @@ -65,11 +63,11 @@ const routes: Routes = [ @NgModule({ declarations: [ - FuseTodoComponent, - FuseTodoMainSidenavComponent, - FuseTodoListItemComponent, - FuseTodoListComponent, - FuseTodoDetailsComponent + TodoComponent, + TodoMainSidenavComponent, + TodoListItemComponent, + TodoListComponent, + TodoDetailsComponent ], imports : [ RouterModule.forChild(routes), @@ -87,7 +85,7 @@ const routes: Routes = [ NgxDnDModule, - FuseSharedModule, + FuseSharedModule ], providers : [ TodoService diff --git a/src/app/main/apps/todo/todo.service.ts b/src/app/main/apps/todo/todo.service.ts index 198fb484..0dcb843f 100644 --- a/src/app/main/apps/todo/todo.service.ts +++ b/src/app/main/apps/todo/todo.service.ts @@ -6,7 +6,7 @@ import { BehaviorSubject, Observable, Subject } from 'rxjs'; import { FuseUtils } from '@fuse/utils'; -import { Todo } from './todo.model'; +import { Todo } from 'app/main/apps/todo/todo.model'; @Injectable() export class TodoService implements Resolve @@ -14,31 +14,45 @@ export class TodoService implements Resolve todos: Todo[]; selectedTodos: Todo[]; currentTodo: Todo; - searchText = ''; - + searchText: string; filters: any[]; tags: any[]; routeParams: any; - onTodosChanged: BehaviorSubject = new BehaviorSubject([]); - onSelectedTodosChanged: BehaviorSubject = new BehaviorSubject([]); - onCurrentTodoChanged: BehaviorSubject = new BehaviorSubject([]); - - onFiltersChanged: BehaviorSubject = new BehaviorSubject([]); - onTagsChanged: BehaviorSubject = new BehaviorSubject([]); - onSearchTextChanged: BehaviorSubject = new BehaviorSubject(''); - onNewTodoClicked: Subject = new Subject(); + onTodosChanged: BehaviorSubject; + onSelectedTodosChanged: BehaviorSubject; + onCurrentTodoChanged: BehaviorSubject; + onFiltersChanged: BehaviorSubject; + onTagsChanged: BehaviorSubject; + onSearchTextChanged: BehaviorSubject; + onNewTodoClicked: Subject; + /** + * Constructor + * + * @param {HttpClient} _httpClient + * @param {Location} _location + */ constructor( - private http: HttpClient, - private location: Location // Set current todo + private _httpClient: HttpClient, + private _location: Location ) { + // Set the defaults this.selectedTodos = []; + this.searchText = ''; + this.onTodosChanged = new BehaviorSubject([]); + this.onSelectedTodosChanged = new BehaviorSubject([]); + this.onCurrentTodoChanged = new BehaviorSubject([]); + this.onFiltersChanged = new BehaviorSubject([]); + this.onTagsChanged = new BehaviorSubject([]); + this.onSearchTextChanged = new BehaviorSubject(''); + this.onNewTodoClicked = new Subject(); } /** - * Resolve + * Resolver + * * @param {ActivatedRouteSnapshot} route * @param {RouterStateSnapshot} state * @returns {Observable | Promise | any} @@ -85,12 +99,13 @@ export class TodoService implements Resolve /** * Get all filters + * * @returns {Promise} */ getFilters(): Promise { return new Promise((resolve, reject) => { - this.http.get('api/todo-filters') + this._httpClient.get('api/todo-filters') .subscribe((response: any) => { this.filters = response; this.onFiltersChanged.next(this.filters); @@ -101,12 +116,13 @@ export class TodoService implements Resolve /** * Get all tags + * * @returns {Promise} */ getTags(): Promise { return new Promise((resolve, reject) => { - this.http.get('api/todo-tags') + this._httpClient.get('api/todo-tags') .subscribe((response: any) => { this.tags = response; this.onTagsChanged.next(this.tags); @@ -117,6 +133,7 @@ export class TodoService implements Resolve /** * Get todos + * * @returns {Promise} */ getTodos(): Promise @@ -136,6 +153,7 @@ export class TodoService implements Resolve /** * Get todos by params + * * @param handle * @returns {Promise} */ @@ -143,7 +161,7 @@ export class TodoService implements Resolve { return new Promise((resolve, reject) => { - this.http.get('api/todo-todos') + this._httpClient.get('api/todo-todos') .subscribe((todos: any) => { this.todos = todos.map(todo => { return new Todo(todo); @@ -160,6 +178,7 @@ export class TodoService implements Resolve /** * Get todos by filter + * * @param handle * @returns {Promise} */ @@ -175,7 +194,7 @@ export class TodoService implements Resolve return new Promise((resolve, reject) => { - this.http.get('api/todo-todos?' + param) + this._httpClient.get('api/todo-todos?' + param) .subscribe((todos: any) => { this.todos = todos.map(todo => { @@ -194,18 +213,19 @@ export class TodoService implements Resolve /** * Get todos by tag + * * @param handle * @returns {Promise} */ getTodosByTag(handle): Promise { return new Promise((resolve, reject) => { - this.http.get('api/todo-tags?handle=' + handle) + this._httpClient.get('api/todo-tags?handle=' + handle) .subscribe((tags: any) => { const tagId = tags[0].id; - this.http.get('api/todo-todos?tags=' + tagId) + this._httpClient.get('api/todo-todos?tags=' + tagId) .subscribe((todos: any) => { this.todos = todos.map(todo => { @@ -225,9 +245,10 @@ export class TodoService implements Resolve /** * Toggle selected todo by id + * * @param id */ - toggleSelectedTodo(id) + toggleSelectedTodo(id): void { // First, check if we already have that todo as selected... if ( this.selectedTodos.length > 0 ) @@ -267,7 +288,7 @@ export class TodoService implements Resolve /** * Toggle select all */ - toggleSelectAll() + toggleSelectAll(): void { if ( this.selectedTodos.length > 0 ) { @@ -280,7 +301,13 @@ export class TodoService implements Resolve } - selectTodos(filterParameter?, filterValue?) + /** + * Select todos + * + * @param filterParameter + * @param filterValue + */ + selectTodos(filterParameter?, filterValue?): void { this.selectedTodos = []; @@ -302,7 +329,10 @@ export class TodoService implements Resolve this.onSelectedTodosChanged.next(this.selectedTodos); } - deselectTodos() + /** + * Deselect todos + */ + deselectTodos(): void { this.selectedTodos = []; @@ -312,9 +342,10 @@ export class TodoService implements Resolve /** * Set current todo by id + * * @param id */ - setCurrentTodo(id) + setCurrentTodo(id): void { this.currentTodo = this.todos.find(todo => { return todo.id === id; @@ -327,30 +358,37 @@ export class TodoService implements Resolve if ( tagHandle ) { - this.location.go('apps/todo/tag/' + tagHandle + '/' + id); + this._location.go('apps/todo/tag/' + tagHandle + '/' + id); } else if ( filterHandle ) { - this.location.go('apps/todo/filter/' + filterHandle + '/' + id); + this._location.go('apps/todo/filter/' + filterHandle + '/' + id); } else { - this.location.go('apps/todo/all/' + id); + this._location.go('apps/todo/all/' + id); } } /** * Toggle tag on selected todos + * * @param tagId */ - toggleTagOnSelectedTodos(tagId) + toggleTagOnSelectedTodos(tagId): void { this.selectedTodos.map(todo => { this.toggleTagOnTodo(tagId, todo); }); } - toggleTagOnTodo(tagId, todo) + /** + * Toggle tag on todo + * + * @param tagId + * @param todo + */ + toggleTagOnTodo(tagId, todo): void { const index = todo.tags.indexOf(tagId); @@ -366,7 +404,14 @@ export class TodoService implements Resolve this.updateTodo(todo); } - hasTag(tagId, todo) + /** + * Has tag? + * + * @param tagId + * @param todo + * @returns {boolean} + */ + hasTag(tagId, todo): any { if ( !todo.tags ) { @@ -378,14 +423,15 @@ export class TodoService implements Resolve /** * Update the todo + * * @param todo * @returns {Promise} */ - updateTodo(todo) + updateTodo(todo): any { return new Promise((resolve, reject) => { - this.http.post('api/todo-todos/' + todo.id, {...todo}) + this._httpClient.post('api/todo-todos/' + todo.id, {...todo}) .subscribe(response => { this.getTodos().then(todos => { diff --git a/src/app/main/components/components.module.ts b/src/app/main/components/components.module.ts index e324f324..89eb62f7 100644 --- a/src/app/main/components/components.module.ts +++ b/src/app/main/components/components.module.ts @@ -91,8 +91,7 @@ const routes = [ FuseCountdownModule, FuseHighlightModule, FuseMaterialColorPickerModule, - FuseWidgetModule, - FuseAngularMaterialModule + FuseWidgetModule ] }) export class ComponentsModule diff --git a/src/app/main/components/multi-language/multi-language.component.html b/src/app/main/components/multi-language/multi-language.component.html index 1745347f..7b7c2f51 100644 --- a/src/app/main/components/multi-language/multi-language.component.html +++ b/src/app/main/components/multi-language/multi-language.component.html @@ -90,7 +90,7 @@ templateUrl: './mail.component.html', styleUrls : ['./mail.component.scss'] }) - export class FuseMailComponent + export class MailComponent { constructor(private translationLoader: FuseTranslationLoaderService) { diff --git a/src/app/main/pages/coming-soon/coming-soon.component.ts b/src/app/main/pages/coming-soon/coming-soon.component.ts index ba95f31c..5fdfdd2c 100644 --- a/src/app/main/pages/coming-soon/coming-soon.component.ts +++ b/src/app/main/pages/coming-soon/coming-soon.component.ts @@ -1,26 +1,38 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { FuseConfigService } from '@fuse/services/config.service'; import { fuseAnimations } from '@fuse/animations'; @Component({ - selector : 'fuse-coming-soon', + selector : 'coming-soon', templateUrl: './coming-soon.component.html', styleUrls : ['./coming-soon.component.scss'], animations : fuseAnimations }) -export class FuseComingSoonComponent implements OnInit +export class ComingSoonComponent implements OnInit, OnDestroy { comingSoonForm: FormGroup; comingSoonFormErrors: any; + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {FuseConfigService} _fuseConfigService + * @param {FormBuilder} _formBuilder + */ constructor( - private fuseConfig: FuseConfigService, - private formBuilder: FormBuilder + private _fuseConfigService: FuseConfigService, + private _formBuilder: FormBuilder ) { - this.fuseConfig.config = { + // Configure the layout + this._fuseConfigService.config = { layout: { navigation: 'none', toolbar : 'none', @@ -28,23 +40,53 @@ export class FuseComingSoonComponent implements OnInit } }; + // Set the defaults this.comingSoonFormErrors = { email: {} }; + + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.comingSoonForm = this.formBuilder.group({ + this.comingSoonForm = this._formBuilder.group({ email: ['', [Validators.required, Validators.email]] }); - this.comingSoonForm.valueChanges.subscribe(() => { - this.onRegisterFormValuesChanged(); - }); + this.comingSoonForm.valueChanges + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(() => { + this.onRegisterFormValuesChanged(); + }); } - onRegisterFormValuesChanged() + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * On form values changed + */ + onRegisterFormValuesChanged(): void { for ( const field in this.comingSoonFormErrors ) { diff --git a/src/app/main/pages/coming-soon/coming-soon.module.ts b/src/app/main/pages/coming-soon/coming-soon.module.ts index 57350e51..f891fd1b 100644 --- a/src/app/main/pages/coming-soon/coming-soon.module.ts +++ b/src/app/main/pages/coming-soon/coming-soon.module.ts @@ -6,18 +6,18 @@ import { MatButtonModule, MatFormFieldModule, MatInputModule } from '@angular/ma import { FuseSharedModule } from '@fuse/shared.module'; import { FuseCountdownModule } from '@fuse/components'; -import { FuseComingSoonComponent } from './coming-soon.component'; +import { ComingSoonComponent } from 'app/main/pages/coming-soon/coming-soon.component'; const routes = [ { path : 'coming-soon', - component: FuseComingSoonComponent + component: ComingSoonComponent } ]; @NgModule({ declarations: [ - FuseComingSoonComponent + ComingSoonComponent ], imports : [ RouterModule.forChild(routes), diff --git a/src/app/main/pages/errors/404/error-404.component.ts b/src/app/main/pages/errors/404/error-404.component.ts index d1e1f17c..3544b2a9 100644 --- a/src/app/main/pages/errors/404/error-404.component.ts +++ b/src/app/main/pages/errors/404/error-404.component.ts @@ -7,13 +7,19 @@ import { FuseConfigService } from '@fuse/services/config.service'; templateUrl: './error-404.component.html', styleUrls : ['./error-404.component.scss'] }) -export class FuseError404Component +export class Error404Component { + /** + * Constructor + * + * @param {FuseConfigService} _fuseConfigService + */ constructor( - private fuseConfig: FuseConfigService + private _fuseConfigService: FuseConfigService ) { - this.fuseConfig.config = { + // Configure the layout + this._fuseConfigService.config = { layout: { navigation: 'none', toolbar : 'none', diff --git a/src/app/main/pages/errors/404/error-404.module.ts b/src/app/main/pages/errors/404/error-404.module.ts index 620a628a..5275fb7a 100644 --- a/src/app/main/pages/errors/404/error-404.module.ts +++ b/src/app/main/pages/errors/404/error-404.module.ts @@ -1,22 +1,21 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; - import { MatIconModule } from '@angular/material'; import { FuseSharedModule } from '@fuse/shared.module'; -import { FuseError404Component } from './error-404.component'; +import { Error404Component } from 'app/main/pages/errors/404/error-404.component'; const routes = [ { path : 'errors/error-404', - component: FuseError404Component + component: Error404Component } ]; @NgModule({ declarations: [ - FuseError404Component + Error404Component ], imports : [ RouterModule.forChild(routes), diff --git a/src/app/main/pages/errors/500/error-500.component.ts b/src/app/main/pages/errors/500/error-500.component.ts index 4225f9a9..8303f8b5 100644 --- a/src/app/main/pages/errors/500/error-500.component.ts +++ b/src/app/main/pages/errors/500/error-500.component.ts @@ -3,16 +3,17 @@ import { Component } from '@angular/core'; import { FuseConfigService } from '@fuse/services/config.service'; @Component({ - selector : 'fuse-error-500', + selector : 'error-500', templateUrl: './error-500.component.html', styleUrls : ['./error-500.component.scss'] }) -export class FuseError500Component +export class Error500Component { constructor( private fuseConfig: FuseConfigService ) { + // Configure the layout this.fuseConfig.config = { layout: { navigation: 'none', diff --git a/src/app/main/pages/errors/500/error-500.module.ts b/src/app/main/pages/errors/500/error-500.module.ts index 6e4ada57..87ee65d2 100644 --- a/src/app/main/pages/errors/500/error-500.module.ts +++ b/src/app/main/pages/errors/500/error-500.module.ts @@ -3,18 +3,18 @@ import { RouterModule } from '@angular/router'; import { FuseSharedModule } from '@fuse/shared.module'; -import { FuseError500Component } from './error-500.component'; +import { Error500Component } from 'app/main/pages/errors/500/error-500.component'; const routes = [ { path : 'errors/error-500', - component: FuseError500Component + component: Error500Component } ]; @NgModule({ declarations: [ - FuseError500Component + Error500Component ], imports : [ RouterModule.forChild(routes), diff --git a/src/app/main/pages/faq/faq.component.ts b/src/app/main/pages/faq/faq.component.ts index 8967098b..749aaa3a 100644 --- a/src/app/main/pages/faq/faq.component.ts +++ b/src/app/main/pages/faq/faq.component.ts @@ -1,64 +1,107 @@ import { Component, OnInit, OnDestroy } from '@angular/core'; import { FormControl } from '@angular/forms'; - -import { Subscription } from 'rxjs'; -import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; +import { Subject } from 'rxjs'; +import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators'; import { FuseUtils } from '@fuse/utils'; -import { FaqService } from './faq.service'; +import { FaqService } from 'app/main/pages/faq/faq.service'; @Component({ - selector : 'fuse-faq', + selector : 'faq', templateUrl: './faq.component.html', styleUrls : ['./faq.component.scss'] }) -export class FuseFaqComponent implements OnInit, OnDestroy +export class FaqComponent implements OnInit, OnDestroy { faqs: any; faqsFiltered: any; - step = 0; - searchInput; - onFaqsChanged: Subscription; + step: number; + searchInput: any; - constructor(private faqService: FaqService) + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {FaqService} _faqService + */ + constructor( + private _faqService: FaqService + ) { + // Set the defaults this.searchInput = new FormControl(''); + this.step = 0; + + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.onFaqsChanged = - this.faqService.onFaqsChanged - .subscribe(response => { - this.faqs = response; - this.faqsFiltered = response; - }); + this._faqService.onFaqsChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(response => { + this.faqs = response; + this.faqsFiltered = response; + }); - this.searchInput.valueChanges.pipe( - debounceTime(300), - distinctUntilChanged() - ).subscribe(searchText => { - this.faqsFiltered = FuseUtils.filterArrayByString(this.faqs, searchText); - }); + this.searchInput.valueChanges + .pipe( + takeUntil(this._unsubscribeAll), + debounceTime(300), + distinctUntilChanged() + ) + .subscribe(searchText => { + this.faqsFiltered = FuseUtils.filterArrayByString(this.faqs, searchText); + }); } - ngOnDestroy() + /** + * On destroy + */ + ngOnDestroy(): void { - this.onFaqsChanged.unsubscribe(); + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); } - setStep(index: number) + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Set step + * + * @param {number} index + */ + setStep(index: number): void { this.step = index; } - nextStep() + /** + * Next step + */ + nextStep(): void { this.step++; } - prevStep() + /** + * Previous step + */ + prevStep(): void { this.step--; } diff --git a/src/app/main/pages/faq/faq.module.ts b/src/app/main/pages/faq/faq.module.ts index 37980eb9..ac672e4d 100644 --- a/src/app/main/pages/faq/faq.module.ts +++ b/src/app/main/pages/faq/faq.module.ts @@ -5,13 +5,13 @@ import { MatExpansionModule, MatIconModule } from '@angular/material'; import { FuseSharedModule } from '@fuse/shared.module'; -import { FaqService } from './faq.service'; -import { FuseFaqComponent } from './faq.component'; +import { FaqService } from 'app/main/pages/faq/faq.service'; +import { FaqComponent } from 'app/main/pages/faq/faq.component'; const routes = [ { path : 'faq', - component: FuseFaqComponent, + component: FaqComponent, resolve : { faq: FaqService } @@ -20,7 +20,7 @@ const routes = [ @NgModule({ declarations: [ - FuseFaqComponent + FaqComponent ], imports : [ RouterModule.forChild(routes), diff --git a/src/app/main/pages/faq/faq.service.ts b/src/app/main/pages/faq/faq.service.ts index 4096ce1d..23946a6b 100644 --- a/src/app/main/pages/faq/faq.service.ts +++ b/src/app/main/pages/faq/faq.service.ts @@ -7,15 +7,24 @@ import { BehaviorSubject, Observable } from 'rxjs'; export class FaqService implements Resolve { faqs: any; + onFaqsChanged: BehaviorSubject; - onFaqsChanged: BehaviorSubject = new BehaviorSubject({}); - - constructor(private http: HttpClient) + /** + * Constructor + * + * @param {HttpClient} _httpClient + */ + constructor( + private _httpClient: HttpClient + ) { + // Set the defaults + this.onFaqsChanged = new BehaviorSubject({}); } /** - * Resolve + * Resolver + * * @param {ActivatedRouteSnapshot} route * @param {RouterStateSnapshot} state * @returns {Observable | Promise | any} @@ -41,7 +50,7 @@ export class FaqService implements Resolve { return new Promise((resolve, reject) => { - this.http.get('api/faq') + this._httpClient.get('api/faq') .subscribe((response: any) => { this.faqs = response; this.onFaqsChanged.next(this.faqs); diff --git a/src/app/main/pages/invoices/compact/compact.component.ts b/src/app/main/pages/invoices/compact/compact.component.ts index 3dd9ec24..46e5366b 100644 --- a/src/app/main/pages/invoices/compact/compact.component.ts +++ b/src/app/main/pages/invoices/compact/compact.component.ts @@ -1,22 +1,52 @@ -import { Component } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; -import { InvoiceService } from '../invoice.service'; +import { InvoiceService } from 'app/main/pages/invoices/invoice.service'; @Component({ - selector : 'fuse-invoice-compact', + selector : 'invoice-compact', templateUrl: './compact.component.html', styleUrls : ['./compact.component.scss'] }) -export class FuseInvoiceCompactComponent +export class InvoiceCompactComponent implements OnInit, OnDestroy { invoice: any; - constructor(private invoiceService: InvoiceService) + // Private + private _unsubscribeAll: Subject; + + constructor( + private _invoiceService: InvoiceService + ) { - this.invoiceService.invoiceOnChanged + // Set the private defaults + this._unsubscribeAll = new Subject(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + this._invoiceService.invoiceOnChanged + .pipe(takeUntil(this._unsubscribeAll)) .subscribe((invoice) => { this.invoice = invoice; }); } + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } } diff --git a/src/app/main/pages/invoices/compact/compact.module.ts b/src/app/main/pages/invoices/compact/compact.module.ts index fa37fa95..e0237a07 100644 --- a/src/app/main/pages/invoices/compact/compact.module.ts +++ b/src/app/main/pages/invoices/compact/compact.module.ts @@ -3,13 +3,13 @@ import { RouterModule } from '@angular/router'; import { FuseSharedModule } from '@fuse/shared.module'; -import { InvoiceService } from '../invoice.service'; -import { FuseInvoiceCompactComponent } from './compact.component'; +import { InvoiceService } from 'app/main/pages/invoices/invoice.service'; +import { InvoiceCompactComponent } from 'app/main/pages/invoices/compact/compact.component'; const routes = [ { path : 'invoices/compact', - component: FuseInvoiceCompactComponent, + component: InvoiceCompactComponent, resolve : { search: InvoiceService } @@ -18,7 +18,7 @@ const routes = [ @NgModule({ declarations: [ - FuseInvoiceCompactComponent + InvoiceCompactComponent ], imports : [ RouterModule.forChild(routes), diff --git a/src/app/main/pages/invoices/invoice.service.ts b/src/app/main/pages/invoices/invoice.service.ts index 3971bbc6..d461b2e3 100644 --- a/src/app/main/pages/invoices/invoice.service.ts +++ b/src/app/main/pages/invoices/invoice.service.ts @@ -3,19 +3,28 @@ import { HttpClient } from '@angular/common/http'; import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router'; import { BehaviorSubject, Observable } from 'rxjs'; - @Injectable() export class InvoiceService implements Resolve { invoice: any; - invoiceOnChanged: BehaviorSubject = new BehaviorSubject({}); + invoiceOnChanged: BehaviorSubject; - constructor(private http: HttpClient) + /** + * Constructor + * + * @param {HttpClient} _httpClient + */ + constructor( + private _httpClient: HttpClient + ) { + // Set the defaults + this.invoiceOnChanged = new BehaviorSubject({}); } /** - * Resolve + * Resolver + * * @param {ActivatedRouteSnapshot} route * @param {RouterStateSnapshot} state * @returns {Observable | Promise | any} @@ -41,7 +50,7 @@ export class InvoiceService implements Resolve { return new Promise((resolve, reject) => { - this.http.get('api/invoice') + this._httpClient.get('api/invoice') .subscribe((timeline: any) => { this.invoice = timeline; this.invoiceOnChanged.next(this.invoice); diff --git a/src/app/main/pages/invoices/modern/modern.component.ts b/src/app/main/pages/invoices/modern/modern.component.ts index 850561dd..9757bec2 100644 --- a/src/app/main/pages/invoices/modern/modern.component.ts +++ b/src/app/main/pages/invoices/modern/modern.component.ts @@ -1,22 +1,58 @@ -import { Component } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; -import { InvoiceService } from '../invoice.service'; +import { InvoiceService } from 'app/main/pages/invoices/invoice.service'; @Component({ - selector : 'fuse-invoice-modern', + selector : 'invoice-modern', templateUrl: './modern.component.html', styleUrls : ['./modern.component.scss'] }) -export class FuseInvoiceModernComponent +export class InvoiceModernComponent implements OnInit, OnDestroy { invoice: any; - constructor(private invoiceService: InvoiceService) + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {InvoiceService} _invoiceService + */ + constructor( + private _invoiceService: InvoiceService + ) { - this.invoiceService.invoiceOnChanged + // Set the private defaults + this._unsubscribeAll = new Subject(); + + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + this._invoiceService.invoiceOnChanged + .pipe(takeUntil(this._unsubscribeAll)) .subscribe((invoice) => { this.invoice = invoice; }); } + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } } diff --git a/src/app/main/pages/invoices/modern/modern.module.ts b/src/app/main/pages/invoices/modern/modern.module.ts index 45f89281..18f5ba5a 100644 --- a/src/app/main/pages/invoices/modern/modern.module.ts +++ b/src/app/main/pages/invoices/modern/modern.module.ts @@ -3,13 +3,13 @@ import { RouterModule } from '@angular/router'; import { FuseSharedModule } from '@fuse/shared.module'; -import { InvoiceService } from '../invoice.service'; -import { FuseInvoiceModernComponent } from './modern.component'; +import { InvoiceService } from 'app/main/pages/invoices/invoice.service'; +import { InvoiceModernComponent } from 'app/main/pages/invoices/modern/modern.component'; const routes = [ { path : 'invoices/modern', - component: FuseInvoiceModernComponent, + component: InvoiceModernComponent, resolve : { search: InvoiceService } @@ -18,7 +18,7 @@ const routes = [ @NgModule({ declarations: [ - FuseInvoiceModernComponent + InvoiceModernComponent ], imports : [ RouterModule.forChild(routes), diff --git a/src/app/main/pages/knowledge-base/dialogs/article/article.component.html b/src/app/main/pages/knowledge-base/dialogs/article/article.component.html index 10717189..5a19347c 100644 --- a/src/app/main/pages/knowledge-base/dialogs/article/article.component.html +++ b/src/app/main/pages/knowledge-base/dialogs/article/article.component.html @@ -2,16 +2,16 @@ - {{data.article.title}} + {{_data.article.title}}
-
+
-
diff --git a/src/app/main/pages/knowledge-base/dialogs/article/article.component.ts b/src/app/main/pages/knowledge-base/dialogs/article/article.component.ts index 0808a977..b0bddc29 100644 --- a/src/app/main/pages/knowledge-base/dialogs/article/article.component.ts +++ b/src/app/main/pages/knowledge-base/dialogs/article/article.component.ts @@ -2,18 +2,18 @@ import { Component, ViewEncapsulation, Inject } from '@angular/core'; import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; @Component({ - selector : 'fuse-knowledge-base-article', + selector : 'knowledge-base-article', templateUrl : './article.component.html', styleUrls : ['./article.component.scss'], encapsulation: ViewEncapsulation.None }) -export class FuseKnowledgeBaseArticleComponent +export class KnowledgeBaseArticleComponent { article: any; constructor( - public dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) public data: any + private _matDialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public _data: any ) { } diff --git a/src/app/main/pages/knowledge-base/knowledge-base.component.ts b/src/app/main/pages/knowledge-base/knowledge-base.component.ts index 8d34064e..2f0040da 100644 --- a/src/app/main/pages/knowledge-base/knowledge-base.component.ts +++ b/src/app/main/pages/knowledge-base/knowledge-base.component.ts @@ -1,48 +1,79 @@ -import { Component, OnInit, OnDestroy, ViewEncapsulation} from '@angular/core'; +import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core'; import { MatDialog } from '@angular/material'; -import { Subscription } from 'rxjs'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; -import { KnowledgeBaseService } from './knowledge-base.service'; -import { FuseKnowledgeBaseArticleComponent } from './dialogs/article/article.component'; +import { KnowledgeBaseService } from 'app/main/pages/knowledge-base/knowledge-base.service'; +import { KnowledgeBaseArticleComponent } from 'app/main/pages/knowledge-base/dialogs/article/article.component'; @Component({ - selector : 'fuse-knowledge-base', + selector : 'knowledge-base', templateUrl : './knowledge-base.component.html', styleUrls : ['./knowledge-base.component.scss'], encapsulation: ViewEncapsulation.None }) -export class FuseKnowledgeBaseComponent implements OnInit, OnDestroy +export class KnowledgeBaseComponent implements OnInit, OnDestroy { knowledgeBase: any; - onKnowledgeBaseChanged: Subscription; + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {KnowledgeBaseService} _knowledgeBaseService + * @param {MatDialog} _matDialog + */ constructor( - private knowledgeBaseService: KnowledgeBaseService, - private matDialog: MatDialog + private _knowledgeBaseService: KnowledgeBaseService, + private _matDialog: MatDialog ) { - + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.onKnowledgeBaseChanged = - this.knowledgeBaseService.onKnowledgeBaseChanged - .subscribe(response => { - this.knowledgeBase = response; - }); + this._knowledgeBaseService.onKnowledgeBaseChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(response => { + this.knowledgeBase = response; + }); } - ngOnDestroy() + /** + * On destroy + */ + ngOnDestroy(): void { - this.onKnowledgeBaseChanged.unsubscribe(); + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); } - readArticle(article) + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Read article + * + * @param article + */ + readArticle(article): void { - this.matDialog.open(FuseKnowledgeBaseArticleComponent, { + this._matDialog.open(KnowledgeBaseArticleComponent, { panelClass: 'knowledgebase-article-dialog', - data : {article: article} + data : {article: article} }); } } diff --git a/src/app/main/pages/knowledge-base/knowledge-base.module.ts b/src/app/main/pages/knowledge-base/knowledge-base.module.ts index f6659c74..c139c920 100644 --- a/src/app/main/pages/knowledge-base/knowledge-base.module.ts +++ b/src/app/main/pages/knowledge-base/knowledge-base.module.ts @@ -1,18 +1,17 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; - import { MatButtonModule, MatDialogModule, MatIconModule, MatListModule, MatToolbarModule } from '@angular/material'; import { FuseSharedModule } from '@fuse/shared.module'; -import { KnowledgeBaseService } from './knowledge-base.service'; -import { FuseKnowledgeBaseComponent } from './knowledge-base.component'; -import { FuseKnowledgeBaseArticleComponent } from './dialogs/article/article.component'; +import { KnowledgeBaseService } from 'app/main/pages/knowledge-base/knowledge-base.service'; +import { KnowledgeBaseComponent } from 'app/main/pages/knowledge-base/knowledge-base.component'; +import { KnowledgeBaseArticleComponent } from 'app/main/pages/knowledge-base/dialogs/article/article.component'; const routes = [ { path : 'knowledge-base', - component: FuseKnowledgeBaseComponent, + component: KnowledgeBaseComponent, resolve : { knowledgeBase: KnowledgeBaseService } @@ -21,8 +20,8 @@ const routes = [ @NgModule({ declarations : [ - FuseKnowledgeBaseComponent, - FuseKnowledgeBaseArticleComponent + KnowledgeBaseComponent, + KnowledgeBaseArticleComponent ], imports : [ RouterModule.forChild(routes), @@ -39,7 +38,7 @@ const routes = [ KnowledgeBaseService ], entryComponents: [ - FuseKnowledgeBaseArticleComponent + KnowledgeBaseArticleComponent ] }) export class KnowledgeBaseModule diff --git a/src/app/main/pages/knowledge-base/knowledge-base.service.ts b/src/app/main/pages/knowledge-base/knowledge-base.service.ts index b935464d..bfda8bd5 100644 --- a/src/app/main/pages/knowledge-base/knowledge-base.service.ts +++ b/src/app/main/pages/knowledge-base/knowledge-base.service.ts @@ -7,14 +7,24 @@ import { BehaviorSubject, Observable } from 'rxjs'; export class KnowledgeBaseService implements Resolve { knowledgeBase: any; - onKnowledgeBaseChanged: BehaviorSubject = new BehaviorSubject({}); + onKnowledgeBaseChanged: BehaviorSubject; - constructor(private http: HttpClient) + /** + * Constructor + * + * @param {HttpClient} _httpClient + */ + constructor( + private _httpClient: HttpClient + ) { + // Set the defaults + this.onKnowledgeBaseChanged = new BehaviorSubject({}); } /** - * Resolve + * Resolver + * * @param {ActivatedRouteSnapshot} route * @param {RouterStateSnapshot} state * @returns {Observable | Promise | any} @@ -40,7 +50,7 @@ export class KnowledgeBaseService implements Resolve { return new Promise((resolve, reject) => { - this.http.get('api/knowledge-base') + this._httpClient.get('api/knowledge-base') .subscribe((response: any) => { this.knowledgeBase = response; this.onKnowledgeBaseChanged.next(this.knowledgeBase); diff --git a/src/app/main/pages/maintenance/maintenance.component.ts b/src/app/main/pages/maintenance/maintenance.component.ts index cdedd8f7..37e3451d 100644 --- a/src/app/main/pages/maintenance/maintenance.component.ts +++ b/src/app/main/pages/maintenance/maintenance.component.ts @@ -4,18 +4,24 @@ import { FuseConfigService } from '@fuse/services/config.service'; import { fuseAnimations } from '@fuse/animations'; @Component({ - selector : 'fuse-maintenance', + selector : 'maintenance', templateUrl: './maintenance.component.html', styleUrls : ['./maintenance.component.scss'], animations : fuseAnimations }) -export class FuseMaintenanceComponent +export class MaintenanceComponent { + /** + * Constructor + * + * @param {FuseConfigService} _fuseConfigService + */ constructor( - private fuseConfig: FuseConfigService + private _fuseConfigService: FuseConfigService ) { - this.fuseConfig.config = { + // Configure the layout + this._fuseConfigService.config = { layout: { navigation: 'none', toolbar : 'none', diff --git a/src/app/main/pages/maintenance/maintenence.module.ts b/src/app/main/pages/maintenance/maintenence.module.ts index c47b4b34..ee715ae5 100644 --- a/src/app/main/pages/maintenance/maintenence.module.ts +++ b/src/app/main/pages/maintenance/maintenence.module.ts @@ -3,18 +3,18 @@ import { RouterModule } from '@angular/router'; import { FuseSharedModule } from '@fuse/shared.module'; -import { FuseMaintenanceComponent } from './maintenance.component'; +import { MaintenanceComponent } from 'app/main/pages/maintenance/maintenance.component'; const routes = [ { path : 'maintenance', - component: FuseMaintenanceComponent + component: MaintenanceComponent } ]; @NgModule({ declarations: [ - FuseMaintenanceComponent + MaintenanceComponent ], imports : [ RouterModule.forChild(routes), diff --git a/src/app/main/pages/pricing/pricing.module.ts b/src/app/main/pages/pricing/pricing.module.ts index d0c2b8bc..7a83a419 100644 --- a/src/app/main/pages/pricing/pricing.module.ts +++ b/src/app/main/pages/pricing/pricing.module.ts @@ -1,34 +1,33 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; - import { MatButtonModule, MatDividerModule } from '@angular/material'; import { FuseSharedModule } from '@fuse/shared.module'; -import { FusePricingStyle1Component } from './style-1/style-1.component'; -import { FusePricingStyle2Component } from './style-2/style-2.component'; -import { FusePricingStyle3Component } from './style-3/style-3.component'; +import { PricingStyle1Component } from 'app/main/pages/pricing/style-1/style-1.component'; +import { PricingStyle2Component } from 'app/main/pages/pricing/style-2/style-2.component'; +import { PricingStyle3Component } from 'app/main/pages/pricing/style-3/style-3.component'; const routes = [ { path : 'pricing/style-1', - component: FusePricingStyle1Component + component: PricingStyle1Component }, { path : 'pricing/style-2', - component: FusePricingStyle2Component + component: PricingStyle2Component }, { path : 'pricing/style-3', - component: FusePricingStyle3Component + component: PricingStyle3Component } ]; @NgModule({ declarations: [ - FusePricingStyle1Component, - FusePricingStyle2Component, - FusePricingStyle3Component + PricingStyle1Component, + PricingStyle2Component, + PricingStyle3Component ], imports : [ RouterModule.forChild(routes), diff --git a/src/app/main/pages/pricing/style-1/style-1.component.ts b/src/app/main/pages/pricing/style-1/style-1.component.ts index 67cc8863..61f4ddb8 100644 --- a/src/app/main/pages/pricing/style-1/style-1.component.ts +++ b/src/app/main/pages/pricing/style-1/style-1.component.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-pricing-style-1', + selector : 'pricing-style-1', templateUrl: './style-1.component.html', styleUrls : ['./style-1.component.scss'] }) -export class FusePricingStyle1Component +export class PricingStyle1Component { + /** + * Constructor + */ constructor() { diff --git a/src/app/main/pages/pricing/style-2/style-2.component.ts b/src/app/main/pages/pricing/style-2/style-2.component.ts index acabe660..9a0235ba 100644 --- a/src/app/main/pages/pricing/style-2/style-2.component.ts +++ b/src/app/main/pages/pricing/style-2/style-2.component.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-pricing-style-2', + selector : 'pricing-style-2', templateUrl: './style-2.component.html', styleUrls : ['./style-2.component.scss'] }) -export class FusePricingStyle2Component +export class PricingStyle2Component { + /** + * Constructor + */ constructor() { diff --git a/src/app/main/pages/pricing/style-3/style-3.component.ts b/src/app/main/pages/pricing/style-3/style-3.component.ts index 9327e82d..78561983 100644 --- a/src/app/main/pages/pricing/style-3/style-3.component.ts +++ b/src/app/main/pages/pricing/style-3/style-3.component.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-pricing-style-3', + selector : 'pricing-style-3', templateUrl: './style-3.component.html', styleUrls : ['./style-3.component.scss'] }) -export class FusePricingStyle3Component +export class PricingStyle3Component { + /** + * Constructor + */ constructor() { diff --git a/src/app/main/pages/profile/profile.component.html b/src/app/main/pages/profile/profile.component.html index dce26f98..8be37f77 100644 --- a/src/app/main/pages/profile/profile.component.html +++ b/src/app/main/pages/profile/profile.component.html @@ -31,11 +31,11 @@ - + - + diff --git a/src/app/main/pages/profile/profile.component.ts b/src/app/main/pages/profile/profile.component.ts index 4b01e1cc..02364ba0 100644 --- a/src/app/main/pages/profile/profile.component.ts +++ b/src/app/main/pages/profile/profile.component.ts @@ -3,15 +3,17 @@ import { Component, ViewEncapsulation } from '@angular/core'; import { fuseAnimations } from '@fuse/animations'; @Component({ - selector : 'fuse-profile', + selector : 'profile', templateUrl : './profile.component.html', styleUrls : ['./profile.component.scss'], encapsulation: ViewEncapsulation.None, animations : fuseAnimations }) -export class FuseProfileComponent +export class ProfileComponent { - + /** + * Constructor + */ constructor() { diff --git a/src/app/main/pages/profile/profile.module.ts b/src/app/main/pages/profile/profile.module.ts index 39bd5122..6cb704d3 100644 --- a/src/app/main/pages/profile/profile.module.ts +++ b/src/app/main/pages/profile/profile.module.ts @@ -1,20 +1,20 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; - import { MatButtonModule, MatDividerModule, MatIconModule, MatTabsModule } from '@angular/material'; import { FuseSharedModule } from '@fuse/shared.module'; -import { ProfileService } from './profile.service'; -import { FuseProfileComponent } from './profile.component'; -import { FuseProfileTimelineComponent } from './tabs/timeline/timeline.component'; -import { FuseProfileAboutComponent } from './tabs/about/about.component'; -import { FuseProfilePhotosVideosComponent } from './tabs/photos-videos/photos-videos.component'; +import { ProfileService } from 'app/main/pages/profile/profile.service'; +import { ProfileComponent } from 'app/main/pages/profile/profile.component'; +import { FuseProfileTimelineComponent } from 'app/main/pages/profile/tabs/timeline/timeline.component'; +import { ProfileAboutComponent } from 'app/main/pages/profile/tabs/about/about.component'; +import { ProfilePhotosVideosComponent } from 'app/main/pages/profile/tabs/photos-videos/photos-videos.component'; + const routes = [ { path : 'profile', - component: FuseProfileComponent, + component: ProfileComponent, resolve : { profile: ProfileService } @@ -23,10 +23,10 @@ const routes = [ @NgModule({ declarations: [ - FuseProfileComponent, + ProfileComponent, FuseProfileTimelineComponent, - FuseProfileAboutComponent, - FuseProfilePhotosVideosComponent + ProfileAboutComponent, + ProfilePhotosVideosComponent ], imports : [ RouterModule.forChild(routes), diff --git a/src/app/main/pages/profile/profile.service.ts b/src/app/main/pages/profile/profile.service.ts index da019606..c6b7671f 100644 --- a/src/app/main/pages/profile/profile.service.ts +++ b/src/app/main/pages/profile/profile.service.ts @@ -10,16 +10,28 @@ export class ProfileService implements Resolve about: any; photosVideos: any; - timelineOnChanged: BehaviorSubject = new BehaviorSubject({}); - aboutOnChanged: BehaviorSubject = new BehaviorSubject({}); - photosVideosOnChanged: BehaviorSubject = new BehaviorSubject({}); + timelineOnChanged: BehaviorSubject; + aboutOnChanged: BehaviorSubject; + photosVideosOnChanged: BehaviorSubject; - constructor(private http: HttpClient) + /** + * Constructor + * + * @param {HttpClient} _httpClient + */ + constructor( + private _httpClient: HttpClient + ) { + // Set the defaults + this.timelineOnChanged = new BehaviorSubject({}); + this.aboutOnChanged = new BehaviorSubject({}); + this.photosVideosOnChanged = new BehaviorSubject({}); } /** - * Resolve + * Resolver + * * @param {ActivatedRouteSnapshot} route * @param {RouterStateSnapshot} state * @returns {Observable | Promise | any} @@ -47,7 +59,7 @@ export class ProfileService implements Resolve { return new Promise((resolve, reject) => { - this.http.get('api/profile-timeline') + this._httpClient.get('api/profile-timeline') .subscribe((timeline: any) => { this.timeline = timeline; this.timelineOnChanged.next(this.timeline); @@ -63,7 +75,7 @@ export class ProfileService implements Resolve { return new Promise((resolve, reject) => { - this.http.get('api/profile-about') + this._httpClient.get('api/profile-about') .subscribe((about: any) => { this.about = about; this.aboutOnChanged.next(this.about); @@ -79,7 +91,7 @@ export class ProfileService implements Resolve { return new Promise((resolve, reject) => { - this.http.get('api/profile-photos-videos') + this._httpClient.get('api/profile-photos-videos') .subscribe((photosVideos: any) => { this.photosVideos = photosVideos; this.photosVideosOnChanged.next(this.photosVideos); diff --git a/src/app/main/pages/profile/tabs/about/about.component.ts b/src/app/main/pages/profile/tabs/about/about.component.ts index 60ba81b2..f0f2c414 100644 --- a/src/app/main/pages/profile/tabs/about/about.component.ts +++ b/src/app/main/pages/profile/tabs/about/about.component.ts @@ -1,23 +1,59 @@ -import { Component } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { fuseAnimations } from '@fuse/animations'; - -import { ProfileService } from '../../profile.service'; +import { ProfileService } from 'app/main/pages/profile/profile.service'; @Component({ - selector : 'fuse-profile-about', + selector : 'profile-about', templateUrl: './about.component.html', styleUrls : ['./about.component.scss'], animations : fuseAnimations }) -export class FuseProfileAboutComponent +export class ProfileAboutComponent implements OnInit, OnDestroy { about: any; - constructor(private profileService: ProfileService) + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {ProfileService} _profileService + */ + constructor( + private _profileService: ProfileService + ) { - this.profileService.aboutOnChanged.subscribe(about => { + // Set the private defaults + this._unsubscribeAll = new Subject(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + this._profileService.aboutOnChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(about => { this.about = about; }); } + + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } } diff --git a/src/app/main/pages/profile/tabs/photos-videos/photos-videos.component.ts b/src/app/main/pages/profile/tabs/photos-videos/photos-videos.component.ts index f30f2ecf..c6a62320 100644 --- a/src/app/main/pages/profile/tabs/photos-videos/photos-videos.component.ts +++ b/src/app/main/pages/profile/tabs/photos-videos/photos-videos.component.ts @@ -1,23 +1,60 @@ -import { Component } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { fuseAnimations } from '@fuse/animations'; -import { ProfileService } from '../../profile.service'; +import { ProfileService } from 'app/main/pages/profile/profile.service'; +import { takeUntil } from 'rxjs/operators'; +import { Subject } from 'rxjs'; @Component({ - selector : 'fuse-profile-photos-videos', + selector : 'profile-photos-videos', templateUrl: './photos-videos.component.html', styleUrls : ['./photos-videos.component.scss'], animations : fuseAnimations }) -export class FuseProfilePhotosVideosComponent +export class ProfilePhotosVideosComponent implements OnInit, OnDestroy { photosVideos: any; - constructor(private profileService: ProfileService) + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {ProfileService} _profileService + */ + constructor( + private _profileService: ProfileService + ) { - this.profileService.photosVideosOnChanged.subscribe(photosVideos => { - this.photosVideos = photosVideos; - }); + // Set the private defaults + this._unsubscribeAll = new Subject(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + this._profileService.photosVideosOnChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(photosVideos => { + this.photosVideos = photosVideos; + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); } } diff --git a/src/app/main/pages/profile/tabs/timeline/timeline.component.ts b/src/app/main/pages/profile/tabs/timeline/timeline.component.ts index a82c2d00..886b24ed 100644 --- a/src/app/main/pages/profile/tabs/timeline/timeline.component.ts +++ b/src/app/main/pages/profile/tabs/timeline/timeline.component.ts @@ -1,8 +1,10 @@ -import { Component } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { fuseAnimations } from '@fuse/animations'; import { ProfileService } from '../../profile.service'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; @Component({ selector : 'fuse-profile-timeline', @@ -10,14 +12,49 @@ import { ProfileService } from '../../profile.service'; styleUrls : ['./timeline.component.scss'], animations : fuseAnimations }) -export class FuseProfileTimelineComponent +export class FuseProfileTimelineComponent implements OnInit, OnDestroy { timeline: any; - constructor(private profileService: ProfileService) + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {ProfileService} _profileService + */ + constructor( + private _profileService: ProfileService + ) { - this.profileService.timelineOnChanged.subscribe(timeline => { + // Set the private defaults + this._unsubscribeAll = new Subject(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + this._profileService.timelineOnChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(timeline => { this.timeline = timeline; }); } + + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } } diff --git a/src/app/main/pages/search/search.component.html b/src/app/main/pages/search/search.component.html index 217b9b15..abc38e17 100644 --- a/src/app/main/pages/search/search.component.html +++ b/src/app/main/pages/search/search.component.html @@ -17,11 +17,11 @@ - + - + diff --git a/src/app/main/pages/search/search.component.ts b/src/app/main/pages/search/search.component.ts index 394ee543..ec9dbb98 100644 --- a/src/app/main/pages/search/search.component.ts +++ b/src/app/main/pages/search/search.component.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-search', + selector : 'search', templateUrl: './search.component.html', styleUrls : ['./search.component.scss'] }) -export class FuseSearchComponent +export class SearchComponent { + /** + * Constructor + */ constructor() { } diff --git a/src/app/main/pages/search/search.module.ts b/src/app/main/pages/search/search.module.ts index 97eff0fe..c5266f31 100644 --- a/src/app/main/pages/search/search.module.ts +++ b/src/app/main/pages/search/search.module.ts @@ -1,20 +1,20 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { CdkTableModule } from '@angular/cdk/table'; - import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatTableModule, MatTabsModule } from '@angular/material'; import { FuseSharedModule } from '@fuse/shared.module'; -import { SearchService } from './search.service'; -import { FuseSearchClassicComponent } from './tabs/classic/classic.component'; -import { FuseSearchTableComponent } from './tabs/table/table.component'; -import { FuseSearchComponent } from './search.component'; +import { SearchService } from 'app/main/pages/search/search.service'; +import { SearchComponent } from 'app/main/pages/search/search.component'; +import { SearchClassicComponent } from 'app/main/pages/search/tabs/classic/classic.component'; +import { SearchTableComponent } from 'app/main/pages/search/tabs/table/table.component'; + const routes = [ { path : 'search', - component: FuseSearchComponent, + component: SearchComponent, resolve : { search: SearchService } @@ -23,9 +23,9 @@ const routes = [ @NgModule({ declarations: [ - FuseSearchComponent, - FuseSearchClassicComponent, - FuseSearchTableComponent + SearchComponent, + SearchClassicComponent, + SearchTableComponent ], imports : [ RouterModule.forChild(routes), diff --git a/src/app/main/pages/search/search.service.ts b/src/app/main/pages/search/search.service.ts index f328e7c7..fcb92d54 100644 --- a/src/app/main/pages/search/search.service.ts +++ b/src/app/main/pages/search/search.service.ts @@ -9,15 +9,26 @@ export class SearchService implements Resolve classic: any; table: any; - classicOnChanged: BehaviorSubject = new BehaviorSubject({}); - tableOnChanged: BehaviorSubject = new BehaviorSubject({}); + classicOnChanged: BehaviorSubject; + tableOnChanged: BehaviorSubject; - constructor(private http: HttpClient) + /** + * Constructor + * + * @param {HttpClient} _httpClient + */ + constructor( + private _httpClient: HttpClient + ) { + // Set the defaults + this.classicOnChanged = new BehaviorSubject({}); + this.tableOnChanged = new BehaviorSubject({}); } /** - * Resolve + * Resolver + * * @param {ActivatedRouteSnapshot} route * @param {RouterStateSnapshot} state * @returns {Observable | Promise | any} @@ -44,7 +55,7 @@ export class SearchService implements Resolve { return new Promise((resolve, reject) => { - this.http.get('api/search-classic') + this._httpClient.get('api/search-classic') .subscribe((classic: any) => { this.classic = classic; this.classicOnChanged.next(this.classic); @@ -60,7 +71,7 @@ export class SearchService implements Resolve { return new Promise((resolve, reject) => { - this.http.get('api/search-table') + this._httpClient.get('api/search-table') .subscribe((table: any) => { this.table = table; this.tableOnChanged.next(this.table); diff --git a/src/app/main/pages/search/tabs/classic/classic.component.ts b/src/app/main/pages/search/tabs/classic/classic.component.ts index e197597c..eab6fdaf 100644 --- a/src/app/main/pages/search/tabs/classic/classic.component.ts +++ b/src/app/main/pages/search/tabs/classic/classic.component.ts @@ -1,20 +1,57 @@ -import { Component } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; -import { SearchService } from '../../search.service'; +import { SearchService } from 'app/main/pages/search/search.service'; @Component({ - selector : 'fuse-search-classic', + selector : 'search-classic', templateUrl: './classic.component.html', styleUrls : ['./classic.component.scss'] }) -export class FuseSearchClassicComponent +export class SearchClassicComponent implements OnInit, OnDestroy { classic: any; - constructor(private searchService: SearchService) + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {SearchService} _searchService + */ + constructor( + private _searchService: SearchService + ) { - this.searchService.classicOnChanged.subscribe(classic => { - this.classic = classic; - }); + // Set the private defaults + this._unsubscribeAll = new Subject(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + this._searchService.classicOnChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(classic => { + this.classic = classic; + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); } } diff --git a/src/app/main/pages/search/tabs/table/table.component.ts b/src/app/main/pages/search/tabs/table/table.component.ts index 321227ee..30207d1d 100644 --- a/src/app/main/pages/search/tabs/table/table.component.ts +++ b/src/app/main/pages/search/tabs/table/table.component.ts @@ -1,46 +1,97 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { DataSource } from '@angular/cdk/collections'; +import { takeUntil } from 'rxjs/operators'; +import { BehaviorSubject, Subject } from 'rxjs'; -import { SearchService } from '../../search.service'; +import { SearchService } from 'app/main/pages/search/search.service'; @Component({ - selector : 'fuse-search-table', + selector : 'search-table', templateUrl: './table.component.html', styleUrls : ['./table.component.scss'] }) -export class FuseSearchTableComponent implements OnInit +export class SearchTableComponent implements OnInit, OnDestroy { table: any; dataSource: SearchTableDataSource; - displayedColumns = ['name', 'position', 'office', 'salary']; + displayedColumns: string[]; - constructor(private searchService: SearchService) + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {SearchService} _searchService + */ + constructor( + private _searchService: SearchService + ) { - this.searchService.tableOnChanged + // Set the defaults + this.displayedColumns = ['name', 'position', 'office', 'salary']; + + // Set the private defaults + this._unsubscribeAll = new Subject(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + this.dataSource = new SearchTableDataSource(this._searchService); + + this._searchService.tableOnChanged + .pipe(takeUntil(this._unsubscribeAll)) .subscribe(table => { this.table = table; }); } - ngOnInit() + /** + * On destroy + */ + ngOnDestroy(): void { - this.dataSource = new SearchTableDataSource(this.searchService); + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); } } export class SearchTableDataSource extends DataSource { - constructor(private searchService: SearchService) + /** + * Constructor + * + * @param {SearchService} _searchService + */ + constructor( + private _searchService: SearchService + ) { super(); } - connect() + /** + * Connect + * + * @returns {BehaviorSubject} + */ + connect(): BehaviorSubject { - return this.searchService.tableOnChanged; + return this._searchService.tableOnChanged; } - disconnect() + /** + * Disconnect + */ + disconnect(): void { } diff --git a/src/app/navigation/navigation.ts b/src/app/navigation/navigation.ts index 32ccb211..63427768 100644 --- a/src/app/navigation/navigation.ts +++ b/src/app/navigation/navigation.ts @@ -340,12 +340,14 @@ export const navigation = [ 'url' : '/pages/search' }, { + 'id' : 'faq', 'title': 'Faq', 'type' : 'item', 'icon' : 'help', 'url' : '/pages/faq' }, { + 'id' : 'knowledge-base', 'title': 'Knowledge Base', 'type' : 'item', 'icon' : 'import_contacts', From 07341c5ffa3bab49abe0996ad27d5536431a34a4 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Wed, 23 May 2018 12:35:08 +0300 Subject: [PATCH 05/75] Improving the codebase (99% completed) Updated Angular, Angular Material and couple other packages --- angular.json | 4 +- package-lock.json | 645 +++++++++++++----- package.json | 48 +- .../material-color-picker.component.ts | 143 +++- .../material-color-picker.module.ts | 1 - .../shortcuts/shortcuts.component.ts | 5 +- src/@fuse/scss/partials/_print.scss | 2 +- src/app/app.component.ts | 2 +- src/app/app.module.ts | 6 +- src/app/{fuse-fake-db => fake-db}/academy.ts | 0 src/app/{fuse-fake-db => fake-db}/calendar.ts | 0 src/app/{fuse-fake-db => fake-db}/chat.ts | 0 src/app/{fuse-fake-db => fake-db}/contacts.ts | 0 .../dashboard-analytics.ts | 0 .../dashboard-project.ts | 0 .../{fuse-fake-db => fake-db}/e-commerce.ts | 0 .../fake-db.service.ts} | 40 +- src/app/{fuse-fake-db => fake-db}/faq.ts | 0 .../{fuse-fake-db => fake-db}/file-manager.ts | 0 src/app/{fuse-fake-db => fake-db}/icons.ts | 0 src/app/{fuse-fake-db => fake-db}/invoice.ts | 0 .../knowledge-base.ts | 0 src/app/{fuse-fake-db => fake-db}/mail.ts | 0 src/app/{fuse-fake-db => fake-db}/profile.ts | 0 .../{fuse-fake-db => fake-db}/quick-panel.ts | 0 .../{fuse-fake-db => fake-db}/scrumboard.ts | 0 src/app/{fuse-fake-db => fake-db}/search.ts | 0 src/app/{fuse-fake-db => fake-db}/todo.ts | 0 src/app/main/apps/apps.module.ts | 6 +- src/app/main/apps/mail-ngrx/mail.module.ts | 2 +- .../main/apps/scrumboard/scrumboard.module.ts | 2 +- src/app/main/apps/todo/todo.module.ts | 2 +- .../components-third-party.module.ts | 8 +- .../datatable/ngx-datatable.component.ts | 52 +- .../google-maps/google-maps.component.ts | 15 +- .../google-maps/google-maps.module.ts | 6 +- .../angular-material.component.html | 2 +- .../angular-material.component.ts | 51 +- .../angular-material.module.ts | 12 +- .../example-viewer/example-viewer.scss | 2 +- .../example-viewer/example-viewer.ts | 148 ++-- .../main/components/cards/cards.component.ts | 385 ++++++----- src/app/main/components/components.module.ts | 62 +- .../countdown/countdown.component.ts | 7 +- .../highlight/highlight.component.ts | 7 +- .../material-color-picker.component.ts | 7 +- .../multi-language.component.html | 2 +- .../multi-language.component.ts | 7 +- .../navigation/navigation.component.ts | 35 +- .../search-bar/search-bar.component.ts | 7 +- .../shortcuts/shortcuts.component.ts | 7 +- .../components/sidebar/sidebar.component.ts | 7 +- .../components/widget/widget.component.ts | 7 +- .../mail-confirm/mail-confirm.component.ts | 2 +- .../pages/errors/404/error-404.component.ts | 2 +- .../main/pages/profile/profile.component.html | 2 +- src/app/main/pages/profile/profile.module.ts | 4 +- .../tabs/timeline/timeline.component.ts | 4 +- .../main/services/config/config.component.ts | 7 +- src/app/main/services/services.module.ts | 12 +- .../splash-screen/splash-screen.component.ts | 7 +- src/app/main/ui/colors/colors.component.ts | 31 +- src/app/main/ui/colors/colors.module.ts | 7 +- src/app/main/ui/forms/forms.component.ts | 131 +++- src/app/main/ui/forms/forms.module.ts | 7 +- .../helper-classes.component.html | 4 +- .../helper-classes.component.ts | 7 +- .../helper-classes/helper-classes.module.ts | 15 +- .../padding-margin.component.ts | 8 +- .../width-height/width-height.component.ts | 8 +- src/app/main/ui/icons/icons.component.ts | 60 +- src/app/main/ui/icons/icons.module.ts | 7 +- .../ui/page-layouts/blank/blank.component.ts | 7 +- .../fullwidth-2/fullwidth-2.component.ts | 7 +- .../carded/fullwidth/fullwidth.component.ts | 7 +- .../left-sidenav-2-tabbed.component.ts | 7 +- .../left-sidenav-2.component.ts | 7 +- .../left-sidenav-tabbed.component.ts | 7 +- .../left-sidenav/left-sidenav.component.ts | 7 +- .../right-sidenav-2-tabbed.component.ts | 7 +- .../right-sidenav-2.component.ts | 7 +- .../right-sidenav-tabbed.component.ts | 7 +- .../right-sidenav/right-sidenav.component.ts | 7 +- .../ui/page-layouts/page-layouts.module.ts | 115 ++-- .../simple/fullwidth/fullwidth.component.ts | 7 +- .../left-sidenav-2.component.ts | 7 +- .../left-sidenav-3.component.ts | 7 +- .../left-sidenav/left-sidenav.component.ts | 7 +- .../right-sidenav-2.component.ts | 7 +- .../right-sidenav-3.component.ts | 7 +- .../right-sidenav/right-sidenav.component.ts | 7 +- .../simple/tabbed/tabbed.component.ts | 7 +- .../blockquotes-lists.component.ts | 8 +- .../tabs/headings/headings.component.ts | 8 +- .../tabs/helpers/helpers.component.ts | 8 +- .../inline-text-elements.component.ts | 8 +- .../ui/typography/typography.component.html | 8 +- .../ui/typography/typography.component.ts | 7 +- .../main/ui/typography/typography.module.ts | 23 +- src/app/main/ui/ui.module.ts | 2 +- src/index.html | 2 +- 101 files changed, 1564 insertions(+), 827 deletions(-) rename src/app/{fuse-fake-db => fake-db}/academy.ts (100%) rename src/app/{fuse-fake-db => fake-db}/calendar.ts (100%) rename src/app/{fuse-fake-db => fake-db}/chat.ts (100%) rename src/app/{fuse-fake-db => fake-db}/contacts.ts (100%) rename src/app/{fuse-fake-db => fake-db}/dashboard-analytics.ts (100%) rename src/app/{fuse-fake-db => fake-db}/dashboard-project.ts (100%) rename src/app/{fuse-fake-db => fake-db}/e-commerce.ts (100%) rename src/app/{fuse-fake-db/fuse-fake-db.service.ts => fake-db/fake-db.service.ts} (69%) rename src/app/{fuse-fake-db => fake-db}/faq.ts (100%) rename src/app/{fuse-fake-db => fake-db}/file-manager.ts (100%) rename src/app/{fuse-fake-db => fake-db}/icons.ts (100%) rename src/app/{fuse-fake-db => fake-db}/invoice.ts (100%) rename src/app/{fuse-fake-db => fake-db}/knowledge-base.ts (100%) rename src/app/{fuse-fake-db => fake-db}/mail.ts (100%) rename src/app/{fuse-fake-db => fake-db}/profile.ts (100%) rename src/app/{fuse-fake-db => fake-db}/quick-panel.ts (100%) rename src/app/{fuse-fake-db => fake-db}/scrumboard.ts (100%) rename src/app/{fuse-fake-db => fake-db}/search.ts (100%) rename src/app/{fuse-fake-db => fake-db}/todo.ts (100%) diff --git a/angular.json b/angular.json index aa359a2c..4f9ad3dc 100644 --- a/angular.json +++ b/angular.json @@ -104,7 +104,7 @@ ], "exclude": [ "**/node_modules/**", - "**/src/app/fuse-fake-db/**/*", + "**/src/app/fake-db/**/*", "**/src/assets/angular-material-examples/**/*" ] } @@ -128,7 +128,7 @@ "tsConfig": "e2e/tsconfig.e2e.json", "exclude": [ "**/node_modules/**", - "**/src/app/fuse-fake-db/**/*", + "**/src/app/fake-db/**/*", "**/src/assets/angular-material-examples/**/*" ] } diff --git a/package-lock.json b/package-lock.json index a830dc31..25c63050 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,27 +10,27 @@ "integrity": "sha512-3bdfvkWDmJszpj/F6Fzgv7sks0cs/cUEQPfs37tcJFz3jc62SsXy4TGb/WJT8FpH2nSGE6DonP8lXuFxB0lblQ==" }, "@angular-devkit/architect": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.6.1.tgz", - "integrity": "sha512-sYoqm3d7UlCsGJLL/UIanxctNl6JP/QK89mCcBClU4AO6hbpdKydov+A159Zg082RUJoy1JYplh1uUx0HstrJg==", + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.6.3.tgz", + "integrity": "sha512-w9tK3VACU+CnOQQZT6o7QO2brn/OVNDf2Y11rI+ZQH7UIn6N0ZFoMl9WyFB//K2Gkoa7hAobykhRTtP8lrTF1g==", "dev": true, "requires": { - "@angular-devkit/core": "0.6.1", + "@angular-devkit/core": "0.6.3", "rxjs": "^6.0.0" } }, "@angular-devkit/build-angular": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-0.6.1.tgz", - "integrity": "sha512-pXMjwdWkhEDAt3JVmwdpzwj+4KELsH6htP9W55vkjVHzPnq4Ps/w0mDzDifLsiV9u3FILTacu+X6foMfDJylzw==", + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-0.6.3.tgz", + "integrity": "sha512-ce+uAXQXyuMy6IxSnsGKeHlLVjsI77DblNvkcO1NilP7iYxujEJx6qDq/Hrf1uhuqRpm+8pt5zY6QD90gQrDcg==", "dev": true, "requires": { - "@angular-devkit/architect": "0.6.1", - "@angular-devkit/build-optimizer": "0.6.1", - "@angular-devkit/core": "0.6.1", - "@ngtools/webpack": "6.0.1", + "@angular-devkit/architect": "0.6.3", + "@angular-devkit/build-optimizer": "0.6.3", + "@angular-devkit/core": "0.6.3", + "@ngtools/webpack": "6.0.3", "ajv": "~6.4.0", - "autoprefixer": "^8.1.0", + "autoprefixer": "^8.4.1", "cache-loader": "^1.2.2", "chalk": "~2.2.2", "circular-dependency-plugin": "^5.0.2", @@ -42,21 +42,21 @@ "istanbul": "^0.4.5", "istanbul-instrumenter-loader": "^3.0.1", "karma-source-map-support": "^1.2.0", - "less": "^3.0.2", + "less": "^3.0.4", "less-loader": "^4.1.0", "license-webpack-plugin": "^1.3.1", "lodash": "^4.17.4", "memory-fs": "^0.4.1", "mini-css-extract-plugin": "~0.4.0", "minimatch": "^3.0.4", - "node-sass": "^4.8.3", + "node-sass": "^4.9.0", "opn": "^5.1.0", "parse5": "^4.0.0", "portfinder": "^1.0.13", - "postcss": "^6.0.19", + "postcss": "^6.0.22", "postcss-import": "^11.1.0", - "postcss-loader": "^2.1.4", - "postcss-url": "^7.3.1", + "postcss-loader": "^2.1.5", + "postcss-url": "^7.3.2", "raw-loader": "^0.5.1", "resolve": "^1.5.0", "rxjs": "^6.0.0", @@ -70,7 +70,7 @@ "tree-kill": "^1.2.0", "uglifyjs-webpack-plugin": "^1.2.5", "url-loader": "^1.0.1", - "webpack": "~4.6.0", + "webpack": "~4.8.1", "webpack-dev-middleware": "^3.1.3", "webpack-dev-server": "^3.1.4", "webpack-merge": "^4.1.2", @@ -79,9 +79,9 @@ } }, "@angular-devkit/build-optimizer": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/@angular-devkit/build-optimizer/-/build-optimizer-0.6.1.tgz", - "integrity": "sha512-7jfSrjMkEArTtHEStxQQYaApAigQh4PlKy0+utH/6AYEt1F9+ENSksKSb2Q5E0wSq2CMHBtrpHjyYHNpASl0ng==", + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/@angular-devkit/build-optimizer/-/build-optimizer-0.6.3.tgz", + "integrity": "sha512-C0LGWh7+rYjpE1T1guaq9EMovwhEJ1QR25qjJxUoYvN+sM+MfVpMhoa6ruqnxh+eQCfRiMdIsnbOboiZxNHTQw==", "dev": true, "requires": { "loader-utils": "^1.1.0", @@ -91,9 +91,9 @@ } }, "@angular-devkit/core": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.6.1.tgz", - "integrity": "sha512-wRsuc1zuW57IQdx7dVOut7AUgAMIxnmIk3DKzLeNhLEKpMaGbwpznULbQWJtEZetwPbZ7pMeKT0nkXMIsQ92Gg==", + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.6.3.tgz", + "integrity": "sha512-97hFVW6in8oYJUEqjmUP0Tb/mPlTG3sc0THpe5MCGEkDPjlp2cObt9rUCAVOjugBlScV8rzTpVQ+95PT60Py8A==", "dev": true, "requires": { "ajv": "~6.4.0", @@ -103,42 +103,42 @@ } }, "@angular-devkit/schematics": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-0.6.1.tgz", - "integrity": "sha512-SF+S+T446u/outrRzsSd6rh5gxGIx2Zpu21msDJCxa1AKuN06QRtuvP0Hlb+34XKXzui4HkRBgLdKjoJgvFtrw==", + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-0.6.3.tgz", + "integrity": "sha512-dXlyVNuFRhiOnhAk0NojEUThLrZBpVZmWvEQ4h/pnyHS0P9CfnHqJ8DCcCrjOwYkzdBwBrYchXOCYfo8zuxYGw==", "dev": true, "requires": { - "@angular-devkit/core": "0.6.1", + "@angular-devkit/core": "0.6.3", "rxjs": "^6.0.0" } }, "@angular/animations": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-6.0.1.tgz", - "integrity": "sha512-L/8v0j50VPKX08gvdHpzYnkKzqvBJ/RDH74aqOGV637Nsa3hxe0yyq7FNg0t7pRsGk3k0b6RXeBlosKo7Sj7rA==", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-6.0.3.tgz", + "integrity": "sha512-X8ey0dvh2ielxPCJOCcdNPAmKW5toCpzHdbjdZqlR9o6uP1UmzEKHd7Un7jVIINRtq9ZB7vnFWIJl0BA7C8U0g==", "requires": { "tslib": "^1.9.0" } }, "@angular/cdk": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-6.0.2.tgz", - "integrity": "sha512-UY+S0FZkyDoxn5aaj5Ue3fGlOQKEnNBJXasaUQbSYKZiUkyFJkgmcSHRJlJuCAunJAtW3IIOhPSFxLZIj7lCHA==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-6.1.0.tgz", + "integrity": "sha512-IrM+cjeUW0TmFIZb7nMtARa9dKOVU9vXlwzllcwcBYHJNb9YcnLPaWqB2LqDQFuH/JQyt+oAG+VyfMmU+yk9uw==", "requires": { "tslib": "^1.7.1" } }, "@angular/cli": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-6.0.1.tgz", - "integrity": "sha512-jS2CZl5Kk2tFvEzU7BJjOqTrMt4ogjxuvB7rxwl/TMHVhCpvlSg5FtJtc2pVw+3HAH9nwMSkjKL75HSXcg7eDg==", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-6.0.3.tgz", + "integrity": "sha512-G8jfgJublsRjveX1P+F5awHvpC07mKAF7f5lebowIs+QAHSOD6HxQ/JhMbJTwz/aj20iWgZOygA5LhkP0Wr+UQ==", "dev": true, "requires": { - "@angular-devkit/architect": "0.6.1", - "@angular-devkit/core": "0.6.1", - "@angular-devkit/schematics": "0.6.1", - "@schematics/angular": "0.6.1", - "@schematics/update": "0.6.1", + "@angular-devkit/architect": "0.6.3", + "@angular-devkit/core": "0.6.3", + "@angular-devkit/schematics": "0.6.3", + "@schematics/angular": "0.6.3", + "@schematics/update": "0.6.3", "opn": "~5.3.0", "resolve": "^1.1.7", "rxjs": "^6.0.0", @@ -166,25 +166,25 @@ } }, "@angular/common": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/@angular/common/-/common-6.0.1.tgz", - "integrity": "sha512-okxtOHE05Eaa7w6YCL2idXUHPTwrea5CEVXjA36zSZ9qtlB/IYcjYI9Opo5l8SE5Qy/eqpDdoanax1NM6xbtqw==", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/@angular/common/-/common-6.0.3.tgz", + "integrity": "sha512-tqEYeEXoaw2kzSUfTrmC3ruJ87trS61SHayIf56f/jtEVn+4pbgJDTNvLSnB6QEaMTn7sX6QBroauMWmdTVSvA==", "requires": { "tslib": "^1.9.0" } }, "@angular/compiler": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-6.0.1.tgz", - "integrity": "sha512-yGucUdNo/8gWIWScpMu9gDYh9wOse+OXJapqBR7JtUowW24PWgICTslWbre4d0PAcueaWhLQo4YqqF689UDfhQ==", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-6.0.3.tgz", + "integrity": "sha512-nS65UI6f7grs2k+ggtkwXSBUQ1D/LVSFfXjWR5olxATx25QbIKABec90JphPE4FfhhVm1uonQ/vaSVCjh83Euw==", "requires": { "tslib": "^1.9.0" } }, "@angular/compiler-cli": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-6.0.1.tgz", - "integrity": "sha512-P34AwBlnIIwreWhoi8CpEtM3Rxo/eiPKKszF9FRFDihbKZamXQP7mITONSW5Pj6lVqnfP0fiFXTwnfmnxXDUIg==", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-6.0.3.tgz", + "integrity": "sha512-n7L/g2leGSl1LffZ3ZuB5bY4sJoZWjkG5tg9IafXQ8nAIUtKPl+ovoiNUhAaA4CvlUlgYHMcbezKpc9285LnyQ==", "dev": true, "requires": { "chokidar": "^1.4.2", @@ -327,9 +327,9 @@ } }, "@angular/core": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/@angular/core/-/core-6.0.1.tgz", - "integrity": "sha512-w9fYaWSk0WrtdvKOvH5KDoRaZ3FhleKVgbbJ0skMsgmro1vrO5j2iIO88AJdbT7k+FAyC+eTtNS8Koqd4ranQg==", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/@angular/core/-/core-6.0.3.tgz", + "integrity": "sha512-YJk0kS/V9C2JFKMHfiw6TNxmfkYWGW4HzqGOm/VoPkvj9O4Erkz/OtOOc8hYGmXFmQz1UpOAByzY2XIlEi72XQ==", "requires": { "tslib": "^1.9.0" } @@ -343,63 +343,63 @@ } }, "@angular/forms": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-6.0.1.tgz", - "integrity": "sha512-YCKTxWh1HmYhXXyFYR/V+pxMqD+02Q5TjDOlzBond5uQUSxC+oJEfhUWUuCYi4QmnTsfWnaI0RKwKsBQvmDzIA==", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-6.0.3.tgz", + "integrity": "sha512-YAjRMERggkzb3cIo8iKOz1xB89Ko4fSh4A1suqrv9o2Xu41Qxs6LwrWVW+6x+N5kBzvbKFZyADqSz1otMQP83Q==", "requires": { "tslib": "^1.9.0" } }, "@angular/http": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/@angular/http/-/http-6.0.1.tgz", - "integrity": "sha512-h60MgZg8/m6Rh0X9NTqwzBVDArXwoEOxz79FvQ29tppZejAHPdv0fQyck+3U6I+wOEGvJq03z8unl1Szji2rXg==", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/@angular/http/-/http-6.0.3.tgz", + "integrity": "sha512-9GF4hEsm/mK/kk+skn1y54IpsSGcgGnFxHctEFSSyUKTub9gFirkbuLOx9T9fXIKtXqCxnXolHCE7ncfOfS7GA==", "requires": { "tslib": "^1.9.0" } }, "@angular/language-service": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-6.0.1.tgz", - "integrity": "sha512-T8FcxeD5nOaIWa23CJVR3tUzapiiHWHttA9PD1Jl/OwFSibxCtPyuTN/H+sHzxXwPNBz/TI3gES5Pcn6FzMt4w==", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-6.0.3.tgz", + "integrity": "sha512-yeEMS8GwEhyMKD4nlzg/0Ug56k5Zb58uShjVlh+kr6WWHMRzAtecvNHePlakPjxyWzf/EIDWnMJV31HGOGQYZg==", "dev": true }, "@angular/material": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/@angular/material/-/material-6.0.2.tgz", - "integrity": "sha512-928g7cnnRIJJx9/pC5GWqypcxrKkfijTCrCC6yeypvcgab1pmsk7m+1uE8VSFGIsUb6x8W3CF5nJUT1viuBIZg==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-6.1.0.tgz", + "integrity": "sha512-9FLWjVnHFzAoGSWU5dz8X/QYeBtZGijMJIp1k94QDYz+2xA10IbesEgnv8I5Ri3EPnjV/gCspeSkt1ClLc95CA==", "requires": { "tslib": "^1.7.1" } }, "@angular/material-moment-adapter": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-6.0.2.tgz", - "integrity": "sha512-tOWQcnio4Yk5hs83mZEdvz85fK3QbGHGzpR5YjcHFFybs6KSKi/BXkHoDC5bC1pcLE6sn2/btq9+Jt1tknGhiw==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-6.1.0.tgz", + "integrity": "sha512-36PDeYk8h1ZQAtpj92ehPLQmtphOwTIuSzSb17vuS4Gm2meD+NC2ARcdv2fsNbwnKSO7l+LMY5rB8g4/VwWOkA==", "requires": { "tslib": "^1.7.1" } }, "@angular/platform-browser": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-6.0.1.tgz", - "integrity": "sha512-F5eu2kHBtd7CqEuYI8CArEY8qYVBIQIYxEAmczyNOv3CLqxdEq23GLVFMDiVT7RpzaZPIxFoGvhEhnUhDeaVDw==", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-6.0.3.tgz", + "integrity": "sha512-OTgOE6WzytV9fnnCwvoyyXI4Avzmfu9RbBUhVRVontov6LlN9XL8BrzLidT7/lPAEQmHuoRCuNrSSY8TokPJCA==", "requires": { "tslib": "^1.9.0" } }, "@angular/platform-browser-dynamic": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-6.0.1.tgz", - "integrity": "sha512-eKZRua98kEC0THSEeGXSk7j9wGn3AtrvElsY59bt7gnWWU4nY6y7Dem6kVjXb+MDkH9ESPyC0uavARdUq2kYuw==", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-6.0.3.tgz", + "integrity": "sha512-OSaBiog3jH52c+pJhG6qsZjVipzw3ThTcFaymetlBwdRkZ9ch7eIQFhlIXPe4oM3wJt39LTG7peRymWPbnx4uw==", "requires": { "tslib": "^1.9.0" } }, "@angular/router": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/@angular/router/-/router-6.0.1.tgz", - "integrity": "sha512-NcVCLCEhV+999/RvED/JwKjAVi288V3wF5SNS/E4NiLU13FCDy6jO32+BhVRgJt/XLNY4IxnXUISukkMBGPI8Q==", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/@angular/router/-/router-6.0.3.tgz", + "integrity": "sha512-7pQYu5DnNXwZ8nZrKtTpBo3HQoirKSP2hGAoHA0rPsqZvavBfuhUzsksYVvKvFEtoPmBe69uEYydhr115MTTNQ==", "requires": { "tslib": "^1.9.0" } @@ -431,43 +431,43 @@ "integrity": "sha512-KwmMELWY+WA1fL/myhQGiqM1uvRIjQ7yUaViVwknhRf7UsBPlWTMrSiFqUIb3QkwGYnVdqRjdYVQrJTIdJpolQ==" }, "@ngtools/webpack": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-6.0.1.tgz", - "integrity": "sha512-PV3UNQINVxHZA1kkWaVds4GJaNXjMCJep0otkHP6ODZ3NNMnrKS8RS9HeqFUxQ+r4GnKj4qctbsdm3awRr1DsA==", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-6.0.3.tgz", + "integrity": "sha512-wrhSFItcZp4Yzp6lgSuy23YdhaUs9D+KdGZPjwzzXtJIJCSzGkWuXzwlCwyKSFRQ6thyH/T3nffpHNaS3dWn2A==", "dev": true, "requires": { - "@angular-devkit/core": "0.6.1", + "@angular-devkit/core": "0.6.3", "tree-kill": "^1.0.0", "webpack-sources": "^1.1.0" } }, "@ngx-translate/core": { - "version": "10.0.1", - "resolved": "https://registry.npmjs.org/@ngx-translate/core/-/core-10.0.1.tgz", - "integrity": "sha1-nzo+0HfoR90NKVGmZNpu40igbSI=", + "version": "10.0.2", + "resolved": "https://registry.npmjs.org/@ngx-translate/core/-/core-10.0.2.tgz", + "integrity": "sha512-7nM3DrJaqKswwtJlbu2kuKNl+hE8Isr18sKsKvGGpSxQk+G0gO0reDlx2PhUNus7TJTkA1C59vU/JoN8hIvZ4g==", "requires": { "tslib": "^1.9.0" } }, "@schematics/angular": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-0.6.1.tgz", - "integrity": "sha512-onvYJtpqwwaqDlqrJ6RPNN2uj5Y1DzRhYQeLHEUFYROHXC/JYrIRf1f1pV4VAPYVqsPq8ELa9Ts431/HdTjCEA==", + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-0.6.3.tgz", + "integrity": "sha512-YhldE1K6x/8D0PxFusjtB32iOAayyD1PSxPCx/q7I7T6x/lG7l35ZDV6ZZE6bDvIaxQBsjhIm8ACy2n+xwFxTA==", "dev": true, "requires": { - "@angular-devkit/core": "0.6.1", - "@angular-devkit/schematics": "0.6.1", + "@angular-devkit/core": "0.6.3", + "@angular-devkit/schematics": "0.6.3", "typescript": ">=2.6.2 <2.8" } }, "@schematics/update": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/@schematics/update/-/update-0.6.1.tgz", - "integrity": "sha512-hywO6GmvjhubNkZqMweUER0IIKkauEQpVBg3TTUG9mR5sDa95dp/wsuU98wVGXYcO/dD6cw8MrwQYNV3YtqCUw==", + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/@schematics/update/-/update-0.6.3.tgz", + "integrity": "sha512-UsKrg02+jwdsz9BdMVxDMeAZCF+c+dvHRWww4D2RcNzWdCTVWeBqRAmlreJJ0TGE54r7PEBnmQe0t5mS4F3d4w==", "dev": true, "requires": { - "@angular-devkit/core": "0.6.1", - "@angular-devkit/schematics": "0.6.1", + "@angular-devkit/core": "0.6.3", + "@angular-devkit/schematics": "0.6.3", "npm-registry-client": "^8.5.1", "rxjs": "^6.0.0", "semver": "^5.3.0", @@ -484,9 +484,9 @@ } }, "@swimlane/ngx-charts": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/@swimlane/ngx-charts/-/ngx-charts-8.0.0.tgz", - "integrity": "sha512-6MfHXlnE2mHZsSGhSchY6vV4gshgZ2y3RImys2GWporao7ZRh8+kDFo9osdYMyOwleCGRA1LQOW8XNXzDTey7g==", + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/@swimlane/ngx-charts/-/ngx-charts-8.0.1.tgz", + "integrity": "sha512-YiCKol5JiOZ8o6IuQxJ9FRlbjkeKVrdLc8QEQqYANpXbV72H9n59qNeZBwLsEvxl3bkmXDWY0G4xW00NnWCN8w==", "requires": { "d3-array": "^1.2.1", "d3-brush": "^1.0.4", @@ -502,9 +502,9 @@ } }, "@swimlane/ngx-datatable": { - "version": "12.0.0", - "resolved": "https://registry.npmjs.org/@swimlane/ngx-datatable/-/ngx-datatable-12.0.0.tgz", - "integrity": "sha512-JT7fxtzvUP5gVYlP1VHxgtGVrn/0UlW8TzzFjAc9w25Yc9RppJ1Xsdzg8eyBb8H/e+Qa+Y0p2y6LvMUNFNJjsw==" + "version": "13.0.0", + "resolved": "https://registry.npmjs.org/@swimlane/ngx-datatable/-/ngx-datatable-13.0.0.tgz", + "integrity": "sha512-77iNYReNBsPg/cbXxSaOP6JkG3hcuETn/pW/Gy62PlMxH9Oxgs+Gv3oSUQ5nVY3ePBP44JyidG/iP1CMaICGOA==" }, "@swimlane/ngx-dnd": { "version": "4.0.1", @@ -536,9 +536,9 @@ } }, "@types/lodash": { - "version": "4.14.108", - "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.108.tgz", - "integrity": "sha512-WD2vUOKfBBVHxWUV9iMR9RMfpuf8HquxWeAq2yqGVL7Nc4JW2+sQama0pREMqzNI3Tutj0PyxYUJwuoxxvX+xA==", + "version": "4.14.109", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.109.tgz", + "integrity": "sha512-hop8SdPUEzbcJm6aTsmuwjIYQo1tqLseKCM+s2bBqTU2gErwI4fE+aqUVOlscPSQbKHKgtMMPoC+h4AIGOJYvw==", "dev": true }, "@types/node": { @@ -564,6 +564,219 @@ "integrity": "sha512-UBYHWph6P3tutkbXpW6XYg9ZPbTKjw/YC2hGG1/GEvWwTbvezBUv3h+mmUFw79T3RFPnmedpiXdOBbXX+4l0jg==", "dev": true }, + "@webassemblyjs/ast": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.4.3.tgz", + "integrity": "sha512-S6npYhPcTHDYe9nlsKa9CyWByFi8Vj8HovcAgtmMAQZUOczOZbQ8CnwMYKYC5HEZzxEE+oY0jfQk4cVlI3J59Q==", + "dev": true, + "requires": { + "@webassemblyjs/helper-wasm-bytecode": "1.4.3", + "@webassemblyjs/wast-parser": "1.4.3", + "debug": "^3.1.0", + "webassemblyjs": "1.4.3" + }, + "dependencies": { + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "dev": true, + "requires": { + "ms": "2.0.0" + } + } + } + }, + "@webassemblyjs/floating-point-hex-parser": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.4.3.tgz", + "integrity": "sha512-3zTkSFswwZOPNHnzkP9ONq4bjJSeKVMcuahGXubrlLmZP8fmTIJ58dW7h/zOVWiFSuG2em3/HH3BlCN7wyu9Rw==", + "dev": true + }, + "@webassemblyjs/helper-buffer": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.4.3.tgz", + "integrity": "sha512-e8+KZHh+RV8MUvoSRtuT1sFXskFnWG9vbDy47Oa166xX+l0dD5sERJ21g5/tcH8Yo95e9IN3u7Jc3NbhnUcSkw==", + "dev": true, + "requires": { + "debug": "^3.1.0" + }, + "dependencies": { + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "dev": true, + "requires": { + "ms": "2.0.0" + } + } + } + }, + "@webassemblyjs/helper-code-frame": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.4.3.tgz", + "integrity": "sha512-9FgHEtNsZQYaKrGCtsjswBil48Qp1agrzRcPzCbQloCoaTbOXLJ9IRmqT+uEZbenpULLRNFugz3I4uw18hJM8w==", + "dev": true, + "requires": { + "@webassemblyjs/wast-printer": "1.4.3" + } + }, + "@webassemblyjs/helper-fsm": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-fsm/-/helper-fsm-1.4.3.tgz", + "integrity": "sha512-JINY76U+702IRf7ePukOt037RwmtH59JHvcdWbTTyHi18ixmQ+uOuNhcdCcQHTquDAH35/QgFlp3Y9KqtyJsCQ==", + "dev": true + }, + "@webassemblyjs/helper-wasm-bytecode": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.4.3.tgz", + "integrity": "sha512-I7bS+HaO0K07Io89qhJv+z1QipTpuramGwUSDkwEaficbSvCcL92CUZEtgykfNtk5wb0CoLQwWlmXTwGbNZUeQ==", + "dev": true + }, + "@webassemblyjs/helper-wasm-section": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.4.3.tgz", + "integrity": "sha512-p0yeeO/h2r30PyjnJX9xXSR6EDcvJd/jC6xa/Pxg4lpfcNi7JUswOpqDToZQ55HMMVhXDih/yqkaywHWGLxqyQ==", + "dev": true, + "requires": { + "@webassemblyjs/ast": "1.4.3", + "@webassemblyjs/helper-buffer": "1.4.3", + "@webassemblyjs/helper-wasm-bytecode": "1.4.3", + "@webassemblyjs/wasm-gen": "1.4.3", + "debug": "^3.1.0" + }, + "dependencies": { + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "dev": true, + "requires": { + "ms": "2.0.0" + } + } + } + }, + "@webassemblyjs/leb128": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.4.3.tgz", + "integrity": "sha512-4u0LJLSPzuRDWHwdqsrThYn+WqMFVqbI2ltNrHvZZkzFPO8XOZ0HFQ5eVc4jY/TNHgXcnwrHjONhPGYuuf//KQ==", + "dev": true, + "requires": { + "leb": "^0.3.0" + } + }, + "@webassemblyjs/validation": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/@webassemblyjs/validation/-/validation-1.4.3.tgz", + "integrity": "sha512-R+rRMKfhd9mq0rj2mhU9A9NKI2l/Rw65vIYzz4lui7eTKPcCu1l7iZNi4b9Gen8D42Sqh/KGiaQNk/x5Tn/iBQ==", + "dev": true, + "requires": { + "@webassemblyjs/ast": "1.4.3" + } + }, + "@webassemblyjs/wasm-edit": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.4.3.tgz", + "integrity": "sha512-qzuwUn771PV6/LilqkXcS0ozJYAeY/OKbXIWU3a8gexuqb6De2p4ya/baBeH5JQ2WJdfhWhSvSbu86Vienttpw==", + "dev": true, + "requires": { + "@webassemblyjs/ast": "1.4.3", + "@webassemblyjs/helper-buffer": "1.4.3", + "@webassemblyjs/helper-wasm-bytecode": "1.4.3", + "@webassemblyjs/helper-wasm-section": "1.4.3", + "@webassemblyjs/wasm-gen": "1.4.3", + "@webassemblyjs/wasm-opt": "1.4.3", + "@webassemblyjs/wasm-parser": "1.4.3", + "@webassemblyjs/wast-printer": "1.4.3", + "debug": "^3.1.0" + }, + "dependencies": { + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "dev": true, + "requires": { + "ms": "2.0.0" + } + } + } + }, + "@webassemblyjs/wasm-gen": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.4.3.tgz", + "integrity": "sha512-eR394T8dHZfpLJ7U/Z5pFSvxl1L63JdREebpv9gYc55zLhzzdJPAuxjBYT4XqevUdW67qU2s0nNA3kBuNJHbaQ==", + "dev": true, + "requires": { + "@webassemblyjs/ast": "1.4.3", + "@webassemblyjs/helper-wasm-bytecode": "1.4.3", + "@webassemblyjs/leb128": "1.4.3" + } + }, + "@webassemblyjs/wasm-opt": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.4.3.tgz", + "integrity": "sha512-7Gp+nschuKiDuAL1xmp4Xz0rgEbxioFXw4nCFYEmy+ytynhBnTeGc9W9cB1XRu1w8pqRU2lbj2VBBA4cL5Z2Kw==", + "dev": true, + "requires": { + "@webassemblyjs/ast": "1.4.3", + "@webassemblyjs/helper-buffer": "1.4.3", + "@webassemblyjs/wasm-gen": "1.4.3", + "@webassemblyjs/wasm-parser": "1.4.3", + "debug": "^3.1.0" + }, + "dependencies": { + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "dev": true, + "requires": { + "ms": "2.0.0" + } + } + } + }, + "@webassemblyjs/wasm-parser": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.4.3.tgz", + "integrity": "sha512-KXBjtlwA3BVukR/yWHC9GF+SCzBcgj0a7lm92kTOaa4cbjaTaa47bCjXw6cX4SGQpkncB9PU2hHGYVyyI7wFRg==", + "dev": true, + "requires": { + "@webassemblyjs/ast": "1.4.3", + "@webassemblyjs/helper-wasm-bytecode": "1.4.3", + "@webassemblyjs/leb128": "1.4.3", + "@webassemblyjs/wasm-parser": "1.4.3", + "webassemblyjs": "1.4.3" + } + }, + "@webassemblyjs/wast-parser": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-parser/-/wast-parser-1.4.3.tgz", + "integrity": "sha512-QhCsQzqV0CpsEkRYyTzQDilCNUZ+5j92f+g35bHHNqS22FppNTywNFfHPq8ZWZfYCgbectc+PoghD+xfzVFh1Q==", + "dev": true, + "requires": { + "@webassemblyjs/ast": "1.4.3", + "@webassemblyjs/floating-point-hex-parser": "1.4.3", + "@webassemblyjs/helper-code-frame": "1.4.3", + "@webassemblyjs/helper-fsm": "1.4.3", + "long": "^3.2.0", + "webassemblyjs": "1.4.3" + } + }, + "@webassemblyjs/wast-printer": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.4.3.tgz", + "integrity": "sha512-EgXk4anf8jKmuZJsqD8qy5bz2frEQhBvZruv+bqwNoLWUItjNSFygk8ywL3JTEz9KtxTlAmqTXNrdD1d9gNDtg==", + "dev": true, + "requires": { + "@webassemblyjs/ast": "1.4.3", + "@webassemblyjs/wast-parser": "1.4.3", + "long": "^3.2.0" + } + }, "abbrev": { "version": "1.0.9", "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.9.tgz", @@ -918,7 +1131,8 @@ "version": "0.1.3", "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz", "integrity": "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=", - "dev": true + "dev": true, + "optional": true }, "async-limiter": { "version": "1.0.0", @@ -1234,6 +1448,7 @@ "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz", "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=", "dev": true, + "optional": true, "requires": { "inherits": "~2.0.0" } @@ -1444,13 +1659,13 @@ } }, "browserslist": { - "version": "3.2.7", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-3.2.7.tgz", - "integrity": "sha512-oYVLxFVqpX9uMhOIQBLtZL+CX4uY8ZpWcjNTaxyWl5rO8yA9SSNikFnAfvk8J3P/7z3BZwNmEqFKaJoYltj3MQ==", + "version": "3.2.8", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-3.2.8.tgz", + "integrity": "sha512-WHVocJYavUwVgVViC0ORikPHQquXwVh939TaelZ4WDqpWgTX/FsGhl/+P4qBUAGcRvtOgDgC+xftNWWp2RUTAQ==", "dev": true, "requires": { - "caniuse-lite": "^1.0.30000835", - "electron-to-chromium": "^1.3.45" + "caniuse-lite": "^1.0.30000844", + "electron-to-chromium": "^1.3.47" } }, "buffer": { @@ -1603,9 +1818,9 @@ } }, "caniuse-lite": { - "version": "1.0.30000840", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000840.tgz", - "integrity": "sha512-Lw6AaouV6lh7TgIdQtLiUFKKO2mtDnZFkzCq5/V6tqs4ZI0OGVSDCEt1uegZ3OOBEBUYuVw3Hhr9DQSbgVofFA==", + "version": "1.0.30000844", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000844.tgz", + "integrity": "sha512-UpKQE7y6dLHhlv75UyBCRiun34Q+bmxyX3zS+ve9M07YG52tRafOvop9N9d5jC+sikKuG7UMweJKJNts4FVehA==", "dev": true }, "caseless": { @@ -1902,9 +2117,9 @@ "dev": true }, "compare-versions": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-3.1.0.tgz", - "integrity": "sha512-4hAxDSBypT/yp2ySFD346So6Ragw5xmBn/e/agIGl3bZr6DLUqnoRZPusxKrXdYRZpgexO9daejmIenlq/wrIQ==", + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-3.2.1.tgz", + "integrity": "sha512-2y2nHcopMG/NAyk6vWXlLs86XeM9sik4jmx1tKIgzMi9/RQ2eo758RGpxQO3ErihHmg0RlQITPqgz73y6s7quA==", "dev": true }, "component-bind": { @@ -2188,6 +2403,7 @@ "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz", "integrity": "sha1-ElYDfsufDF9549bvE14wdwGEuYI=", "dev": true, + "optional": true, "requires": { "lru-cache": "^4.0.1", "which": "^1.2.9" @@ -2992,9 +3208,9 @@ "dev": true }, "electron-to-chromium": { - "version": "1.3.45", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.45.tgz", - "integrity": "sha1-RYrBscXHYM6IEaFtK/vZfsMLr7g=", + "version": "1.3.48", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.48.tgz", + "integrity": "sha1-07DYWTgUBE4JLs4hCPw6ya6kuQA=", "dev": true }, "elliptic": { @@ -4503,10 +4719,11 @@ } }, "gaze": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.2.tgz", - "integrity": "sha1-hHIkZ3rbiHDWeSV+0ziP22HkAQU=", + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.3.tgz", + "integrity": "sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==", "dev": true, + "optional": true, "requires": { "globule": "^1.0.0" } @@ -4515,13 +4732,15 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.0.0.tgz", "integrity": "sha1-aFj+fAlpt9TpCTM3ZHrHn2DfvnQ=", - "dev": true + "dev": true, + "optional": true }, "generate-object-property": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/generate-object-property/-/generate-object-property-1.2.0.tgz", "integrity": "sha1-nA4cQDCM6AT0eDYYuTf6iPmdUNA=", "dev": true, + "optional": true, "requires": { "is-property": "^1.0.0" } @@ -4655,6 +4874,7 @@ "resolved": "https://registry.npmjs.org/globule/-/globule-1.2.0.tgz", "integrity": "sha1-HcScaCLdnoovoAuiopUAboZkvQk=", "dev": true, + "optional": true, "requires": { "glob": "~7.1.1", "lodash": "~4.17.4", @@ -4942,9 +5162,9 @@ "dev": true }, "html-minifier": { - "version": "3.5.15", - "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-3.5.15.tgz", - "integrity": "sha512-OZa4rfb6tZOZ3Z8Xf0jKxXkiDcFWldQePGYFDcgKqES2sXeWaEv9y6QQvWUtX3ySI3feApQi5uCsHLINQ6NoAw==", + "version": "3.5.16", + "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-3.5.16.tgz", + "integrity": "sha512-zP5EfLSpiLRp0aAgud4CQXPQZm9kXwWjR/cF0PfdOj+jjWnOaCgeZcll4kYXSvIBPeUMmyaSc7mM4IDtA+kboA==", "dev": true, "requires": { "camel-case": "3.0.x", @@ -5051,9 +5271,9 @@ } }, "http-parser-js": { - "version": "0.4.12", - "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.4.12.tgz", - "integrity": "sha1-uc+/Sizybw/DSxDKFImid3HjR08=", + "version": "0.4.13", + "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.4.13.tgz", + "integrity": "sha1-O9bW/ebjFyyTNMOzO2wZPYD+ETc=", "dev": true }, "http-proxy": { @@ -5176,7 +5396,8 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz", "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E=", - "dev": true + "dev": true, + "optional": true }, "indent-string": { "version": "2.1.0", @@ -5416,13 +5637,15 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-my-ip-valid/-/is-my-ip-valid-1.0.0.tgz", "integrity": "sha512-gmh/eWXROncUzRnIa1Ubrt5b8ep/MGSnfAUI3aRp+sqTCs1tv1Isl8d8F6JmkN3dXKc3ehZMrtiPN9eL03NuaQ==", - "dev": true + "dev": true, + "optional": true }, "is-my-json-valid": { "version": "2.17.2", "resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.17.2.tgz", "integrity": "sha512-IBhBslgngMQN8DDSppmgDv7RNrlFotuuDsKcrCP3+HbFaVivIBU7u9oiiErw8sH4ynx3+gOGQ3q2otkgiSi6kg==", "dev": true, + "optional": true, "requires": { "generate-function": "^2.0.0", "generate-object-property": "^1.1.0", @@ -5517,7 +5740,8 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz", "integrity": "sha1-V/4cTkhHTt1lsJkR8msc1Ald2oQ=", - "dev": true + "dev": true, + "optional": true }, "is-regex": { "version": "1.0.4", @@ -5673,12 +5897,12 @@ }, "dependencies": { "async": { - "version": "2.6.0", - "resolved": "https://registry.npmjs.org/async/-/async-2.6.0.tgz", - "integrity": "sha512-xAfGg1/NTLBBKlHFmnd7PlmUW9KhVQIUuSrYem9xzFUZy13ScvtyGGejaae9iAVRiRq9+Cx7DPFaAAhCpyxyPw==", + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.1.tgz", + "integrity": "sha512-fNEiL2+AZt6AlAw/29Cr0UDe4sRAHCpEHh54WMz+Bb7QfNcFw4h3loofyJpLeQs4Yx7yuqu/2dLgM5hKOs6HlQ==", "dev": true, "requires": { - "lodash": "^4.14.0" + "lodash": "^4.17.10" } } } @@ -5851,10 +6075,11 @@ "dev": true }, "js-base64": { - "version": "2.4.3", - "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.3.tgz", - "integrity": "sha512-H7ErYLM34CvDMto3GbD6xD0JLUGYXR3QTcH6B/tr4Hi/QpSThnCsIp+Sy5FRTw3B0d6py4HcNkW7nO/wdtGWEw==", - "dev": true + "version": "2.4.5", + "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.5.tgz", + "integrity": "sha512-aUnNwqMOXw3yvErjMPSQu6qIIzUmT1e5KcU1OZxRDU1g/am6mzBvcrmLAYwzmB59BHPrh5/tKaiF4OPhqRWESQ==", + "dev": true, + "optional": true }, "js-tokens": { "version": "3.0.2", @@ -5927,7 +6152,8 @@ "version": "4.0.1", "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-4.0.1.tgz", "integrity": "sha1-T9kss04OnbPInIYi7PUfm5eMbLk=", - "dev": true + "dev": true, + "optional": true }, "jsprim": { "version": "1.4.1", @@ -6173,12 +6399,12 @@ } }, "karma-coverage-istanbul-reporter": { - "version": "1.4.2", - "resolved": "https://registry.npmjs.org/karma-coverage-istanbul-reporter/-/karma-coverage-istanbul-reporter-1.4.2.tgz", - "integrity": "sha512-sQHexslLF+QHzaKfK8+onTYMyvSwv+p5cDayVxhpEELGa3z0QuB+l0IMsicIkkBNMOJKQaqueiRoW7iuo7lsog==", + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/karma-coverage-istanbul-reporter/-/karma-coverage-istanbul-reporter-1.4.3.tgz", + "integrity": "sha1-O13/RmT6W41RlrmInj9hwforgNk=", "dev": true, "requires": { - "istanbul-api": "^1.1.14", + "istanbul-api": "^1.3.1", "minimatch": "^3.0.4" } }, @@ -6234,6 +6460,12 @@ "invert-kv": "^1.0.0" } }, + "leb": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/leb/-/leb-0.3.0.tgz", + "integrity": "sha1-Mr7p+tFoMo1q6oUi2DP0GA7tHaM=", + "dev": true + }, "less": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/less/-/less-3.0.4.tgz", @@ -6355,7 +6587,8 @@ "version": "4.2.0", "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz", "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc=", - "dev": true + "dev": true, + "optional": true }, "lodash.clonedeep": { "version": "4.5.0", @@ -6367,7 +6600,8 @@ "version": "4.6.1", "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz", "integrity": "sha512-eWw5r+PYICtEBgrBE5hhlT6aAa75f411bgDz/ZL2KZqYV03USvucsxcHUIlGTDTECs1eunpI7HOV7U+WLDvNdQ==", - "dev": true + "dev": true, + "optional": true }, "lodash.tail": { "version": "4.1.1", @@ -6442,6 +6676,12 @@ "object.assign": "^4.1.0" } }, + "long": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/long/-/long-3.2.0.tgz", + "integrity": "sha1-2CG3E4yhy1gcFymQ7xTbIAtcR0s=", + "dev": true + }, "longest": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz", @@ -6804,7 +7044,8 @@ "version": "2.10.0", "resolved": "https://registry.npmjs.org/nan/-/nan-2.10.0.tgz", "integrity": "sha512-bAdJv7fBLhWC+/Bls0Oza+mvTaNQtP+1RyhhhvD95pgUJz6XM5IzgmxOkItJ9tkoCiplvAnXI1tNmmUD/eScyA==", - "dev": true + "dev": true, + "optional": true }, "nanomatch": { "version": "1.2.9", @@ -6853,17 +7094,17 @@ } }, "ngrx-store-freeze": { - "version": "0.2.2", - "resolved": "https://registry.npmjs.org/ngrx-store-freeze/-/ngrx-store-freeze-0.2.2.tgz", - "integrity": "sha512-t3e6yanpqFv+nsLulh9vz0WBSefjjKtv9ZPd0CylW+mTmylBQgAb+VRWPrbmp78HCsKU0d0lZNbYD8Qd6edcGA==", + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/ngrx-store-freeze/-/ngrx-store-freeze-0.2.3.tgz", + "integrity": "sha512-IO2zBWMAyAWZgK6zbPhmR3tNRgW+jfi/Z+Xkvaa42w6eYNQ8bEwYv7uxZo/3MQJ5RglxZ+6KsDLXPzjN+ZUEZw==", "requires": { "deep-freeze-strict": "^1.1.1" } }, "ngx-color-picker": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/ngx-color-picker/-/ngx-color-picker-6.1.0.tgz", - "integrity": "sha512-qt7dczjKRSNZbFwBP7NAoX/bSsOTX5soOHTk+YHLaFEp0s51hb1GnWUBtNQ4foFUTAloG3MZsSqsraoVeDHRUg==" + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/ngx-color-picker/-/ngx-color-picker-6.2.0.tgz", + "integrity": "sha512-Rm7rhr9I4LvjbtZLLvWgGlY0yFAcc5VCaGhd9TZr24NFtQhGgxmqmQNr3YD4UEdojSMh2kJm22Flenjb5TYQYw==" }, "ngx-cookie-service": { "version": "1.0.10", @@ -6890,6 +7131,7 @@ "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.6.2.tgz", "integrity": "sha1-m/vlRWIoYoSDjnUOrAUpWFP6HGA=", "dev": true, + "optional": true, "requires": { "fstream": "^1.0.0", "glob": "^7.0.3", @@ -6910,7 +7152,8 @@ "version": "5.3.0", "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz", "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=", - "dev": true + "dev": true, + "optional": true } } }, @@ -6958,6 +7201,7 @@ "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.9.0.tgz", "integrity": "sha512-QFHfrZl6lqRU3csypwviz2XLgGNOoWQbo2GOvtsfQqOfL4cy1BtWnhx/XUeAO9LT3ahBzSRXcEO6DdvAH9DzSg==", "dev": true, + "optional": true, "requires": { "async-foreach": "^0.1.3", "chalk": "^1.1.1", @@ -6990,13 +7234,15 @@ "version": "0.2.0", "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz", "integrity": "sha1-104bh+ev/A24qttwIfP+SBAasjQ=", - "dev": true + "dev": true, + "optional": true }, "aws-sign2": { "version": "0.6.0", "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz", "integrity": "sha1-FDQt0428yU0OW4fXY81jYSwOeU8=", - "dev": true + "dev": true, + "optional": true }, "boom": { "version": "2.10.1", @@ -7011,7 +7257,8 @@ "version": "0.11.0", "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.11.0.tgz", "integrity": "sha1-cVuW6phBWTzDMGeSP17GDr2k99c=", - "dev": true + "dev": true, + "optional": true }, "chalk": { "version": "1.1.3", @@ -7031,6 +7278,7 @@ "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz", "integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=", "dev": true, + "optional": true, "requires": { "boom": "2.x.x" } @@ -7040,6 +7288,7 @@ "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz", "integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=", "dev": true, + "optional": true, "requires": { "asynckit": "^0.4.0", "combined-stream": "^1.0.5", @@ -7051,6 +7300,7 @@ "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-2.0.6.tgz", "integrity": "sha1-zcvAgYgmWtEZtqWnyKtw7s+10n0=", "dev": true, + "optional": true, "requires": { "chalk": "^1.1.1", "commander": "^2.9.0", @@ -7063,6 +7313,7 @@ "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz", "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=", "dev": true, + "optional": true, "requires": { "boom": "2.x.x", "cryptiles": "2.x.x", @@ -7081,6 +7332,7 @@ "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz", "integrity": "sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=", "dev": true, + "optional": true, "requires": { "assert-plus": "^0.2.0", "jsprim": "^1.2.2", @@ -7091,13 +7343,15 @@ "version": "6.3.2", "resolved": "https://registry.npmjs.org/qs/-/qs-6.3.2.tgz", "integrity": "sha1-51vV9uJoEioqDgvaYwslUMFmUCw=", - "dev": true + "dev": true, + "optional": true }, "request": { "version": "2.79.0", "resolved": "https://registry.npmjs.org/request/-/request-2.79.0.tgz", "integrity": "sha1-Tf5b9r6LjNw3/Pk+BLZVd3InEN4=", "dev": true, + "optional": true, "requires": { "aws-sign2": "~0.6.0", "aws4": "^1.2.1", @@ -7126,6 +7380,7 @@ "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz", "integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=", "dev": true, + "optional": true, "requires": { "hoek": "2.x.x" } @@ -7140,7 +7395,8 @@ "version": "0.4.3", "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.3.tgz", "integrity": "sha1-Y3PbdpCf5XDgjXNYM2Xtgop07us=", - "dev": true + "dev": true, + "optional": true } } }, @@ -7485,6 +7741,7 @@ "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz", "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=", "dev": true, + "optional": true, "requires": { "lcid": "^1.0.0" } @@ -8136,9 +8393,9 @@ } }, "pumpify": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/pumpify/-/pumpify-1.5.0.tgz", - "integrity": "sha512-UWi0klDoq8xtVzlMRgENV9F7iCTZExaJQSQL187UXsxpk9NnrKGqTqqUNYAKGOzucSOxs2+jUnRNI+rLviPhJg==", + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/pumpify/-/pumpify-1.5.1.tgz", + "integrity": "sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==", "dev": true, "requires": { "duplexify": "^3.6.0", @@ -8662,9 +8919,9 @@ "integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q=" }, "rxjs": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.1.0.tgz", - "integrity": "sha512-lMZdl6xbHJCSb5lmnb6nOhsoBVCyoDC5LDJQK9WWyq+tsI7KnlDIZ0r0AZAlBpRPLbwQA9kzSBAZwNIZEZ+hcw==", + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.2.0.tgz", + "integrity": "sha512-qBzf5uu6eOKiCZuAE0SgZ0/Qp+l54oeVxFfC2t+mJ2SFI6IB8gmMdJHs5DUMu5kqifqcCtsKS2XHjhZu6RKvAw==", "requires": { "tslib": "^1.9.0" } @@ -8699,6 +8956,7 @@ "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.4.tgz", "integrity": "sha1-E/vWPNHK8JCLn9k0dq1DpR0eC0k=", "dev": true, + "optional": true, "requires": { "glob": "^7.0.0", "lodash": "^4.0.0", @@ -8710,13 +8968,15 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz", "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=", - "dev": true + "dev": true, + "optional": true }, "cliui": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz", "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=", "dev": true, + "optional": true, "requires": { "string-width": "^1.0.1", "strip-ansi": "^3.0.1", @@ -8727,13 +8987,15 @@ "version": "3.2.1", "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz", "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=", - "dev": true + "dev": true, + "optional": true }, "yargs": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.0.tgz", "integrity": "sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=", "dev": true, + "optional": true, "requires": { "camelcase": "^3.0.0", "cliui": "^3.2.0", @@ -8795,6 +9057,7 @@ "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz", "integrity": "sha1-jrBtualyMzOCTT9VMGQRSYR85dE=", "dev": true, + "optional": true, "requires": { "js-base64": "^2.1.8", "source-map": "^0.4.2" @@ -8805,6 +9068,7 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz", "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=", "dev": true, + "optional": true, "requires": { "amdefine": ">=0.0.4" } @@ -9543,6 +9807,7 @@ "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.0.tgz", "integrity": "sha1-osfIWH5U2UJ+qe2zrD8s1SLfN4s=", "dev": true, + "optional": true, "requires": { "readable-stream": "^2.0.1" } @@ -9731,6 +9996,7 @@ "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz", "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=", "dev": true, + "optional": true, "requires": { "block-stream": "*", "fstream": "^1.0.2", @@ -9894,6 +10160,7 @@ "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-1.0.2.tgz", "integrity": "sha1-fskRMJJHZsf1c74wIMNPj9/QDWI=", "dev": true, + "optional": true, "requires": { "glob": "^6.0.4" }, @@ -9903,6 +10170,7 @@ "resolved": "https://registry.npmjs.org/glob/-/glob-6.0.4.tgz", "integrity": "sha1-DwiGD2oVUSey+t1PnOJLGqtuTSI=", "dev": true, + "optional": true, "requires": { "inflight": "^1.0.4", "inherits": "2", @@ -10081,9 +10349,9 @@ "dev": true }, "uglify-js": { - "version": "3.3.25", - "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.3.25.tgz", - "integrity": "sha512-hobogryjDV36VrLK3Y69ou4REyrTApzUblVFmdQOYRe8cYaSmFJXMb4dR9McdvYDSbeNdzUgYr2YVukJaErJcA==", + "version": "3.3.27", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.3.27.tgz", + "integrity": "sha512-O94wxMSb3td/TlofkITYvYIlvIVdldvNXDVRekzK13CQZuL37ua4nrdXX0Ro7MapfUVzglRHs0/+imPRUdOghg==", "dev": true, "requires": { "commander": "~2.15.0", @@ -10251,9 +10519,9 @@ } }, "upath": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/upath/-/upath-1.0.5.tgz", - "integrity": "sha512-qbKn90aDQ0YEwvXoLqj0oiuUYroLX2lVHZ+b+xwjozFasAOC4GneDq5+OaIG5Zj+jFmbz/uO+f7a9qxjktJQww==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/upath/-/upath-1.1.0.tgz", + "integrity": "sha512-bzpH/oBhoS/QI/YtbkqCg6VEiPYjSZtrHQM6/QnJS6OL9pKUFLqb3aFh4Scvwm45+7iAgiMkLhSbaZxUqmrprw==", "dev": true }, "upper-case": { @@ -10476,6 +10744,19 @@ "resolved": "https://registry.npmjs.org/web-animations-js/-/web-animations-js-2.3.1.tgz", "integrity": "sha1-Om2bwVGWN3qQ+OKAP6UmIWWwRRA=" }, + "webassemblyjs": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/webassemblyjs/-/webassemblyjs-1.4.3.tgz", + "integrity": "sha512-4lOV1Lv6olz0PJkDGQEp82HempAn147e6BXijWDzz9g7/2nSebVP9GVg62Fz5ZAs55mxq13GA0XLyvY8XkyDjg==", + "dev": true, + "requires": { + "@webassemblyjs/ast": "1.4.3", + "@webassemblyjs/validation": "1.4.3", + "@webassemblyjs/wasm-parser": "1.4.3", + "@webassemblyjs/wast-parser": "1.4.3", + "long": "^3.2.0" + } + }, "webdriver-js-extender": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/webdriver-js-extender/-/webdriver-js-extender-1.0.0.tgz", @@ -10524,11 +10805,14 @@ } }, "webpack": { - "version": "4.6.0", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.6.0.tgz", - "integrity": "sha512-Fu/k/3fZeGtIhuFkiYpIy1UDHhMiGKjG4FFPVuvG+5Os2lWA1ttWpmi9Qnn6AgfZqj9MvhZW/rmj/ip+nHr06g==", + "version": "4.8.3", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.8.3.tgz", + "integrity": "sha512-/hfAjBISycdK597lxONjKEFX7dSIU1PsYwC3XlXUXoykWBlv9QV5HnO+ql3HvrrgfBJ7WXdnjO9iGPR2aAc5sw==", "dev": true, "requires": { + "@webassemblyjs/ast": "1.4.3", + "@webassemblyjs/wasm-edit": "1.4.3", + "@webassemblyjs/wasm-parser": "1.4.3", "acorn": "^5.0.0", "acorn-dynamic-import": "^3.0.0", "ajv": "^6.1.0", @@ -10886,7 +11170,8 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/which-module/-/which-module-1.0.0.tgz", "integrity": "sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8=", - "dev": true + "dev": true, + "optional": true }, "wide-align": { "version": "1.1.2", @@ -11026,6 +11311,7 @@ "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.0.tgz", "integrity": "sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=", "dev": true, + "optional": true, "requires": { "camelcase": "^3.0.0" }, @@ -11034,7 +11320,8 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz", "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=", - "dev": true + "dev": true, + "optional": true } } }, diff --git a/package.json b/package.json index c0a44ef7..a0aab823 100644 --- a/package.json +++ b/package.json @@ -19,26 +19,26 @@ "private": true, "dependencies": { "@agm/core": "1.0.0-beta.2", - "@angular/animations": "6.0.1", - "@angular/cdk": "6.0.2", - "@angular/common": "6.0.1", - "@angular/compiler": "6.0.1", - "@angular/core": "6.0.1", + "@angular/animations": "6.0.3", + "@angular/cdk": "6.1.0", + "@angular/common": "6.0.3", + "@angular/compiler": "6.0.3", + "@angular/core": "6.0.3", "@angular/flex-layout": "6.0.0-beta.15", - "@angular/forms": "6.0.1", - "@angular/http": "6.0.1", - "@angular/material": "6.0.2", - "@angular/material-moment-adapter": "6.0.2", - "@angular/platform-browser": "6.0.1", - "@angular/platform-browser-dynamic": "6.0.1", - "@angular/router": "6.0.1", + "@angular/forms": "6.0.3", + "@angular/http": "6.0.3", + "@angular/material": "6.1.0", + "@angular/material-moment-adapter": "6.1.0", + "@angular/platform-browser": "6.0.3", + "@angular/platform-browser-dynamic": "6.0.3", + "@angular/router": "6.0.3", "@ngrx/effects": "6.0.0-beta.3", "@ngrx/router-store": "6.0.0-beta.3", "@ngrx/store": "6.0.0-beta.3", "@ngrx/store-devtools": "6.0.0-beta.3", - "@ngx-translate/core": "10.0.1", - "@swimlane/ngx-charts": "8.0.0", - "@swimlane/ngx-datatable": "12.0.0", + "@ngx-translate/core": "10.0.2", + "@swimlane/ngx-charts": "8.0.1", + "@swimlane/ngx-datatable": "13.0.0", "@swimlane/ngx-dnd": "4.0.1", "@types/prismjs": "1.9.0", "angular-calendar": "0.25.2", @@ -51,32 +51,32 @@ "lodash": "4.17.10", "moment": "2.22.1", "ng2-charts": "1.6.0", - "ngrx-store-freeze": "0.2.2", - "ngx-color-picker": "6.1.0", + "ngrx-store-freeze": "0.2.3", + "ngx-color-picker": "6.2.0", "ngx-cookie-service": "1.0.10", "perfect-scrollbar": "1.3.0", "prismjs": "1.14.0", - "rxjs": "6.1.0", + "rxjs": "6.2.0", "rxjs-compat": "6.1.0", "web-animations-js": "2.3.1", "zone.js": "0.8.26" }, "devDependencies": { - "@angular/cli": "6.0.1", - "@angular/compiler-cli": "6.0.1", - "@angular/language-service": "6.0.1", - "@angular-devkit/build-angular": "0.6.1", + "@angular/cli": "6.0.3", + "@angular/compiler-cli": "6.0.3", + "@angular/language-service": "6.0.3", + "@angular-devkit/build-angular": "0.6.3", "@angularclass/hmr": "2.1.3", "@types/jasmine": "2.8.7", "@types/jasminewd2": "2.0.3", - "@types/lodash": "4.14.108", + "@types/lodash": "4.14.109", "@types/node": "8.9.5", "codelyzer": "4.2.1", "jasmine-core": "2.99.1", "jasmine-spec-reporter": "4.2.1", "karma": "1.7.1", "karma-chrome-launcher": "2.2.0", - "karma-coverage-istanbul-reporter": "1.4.2", + "karma-coverage-istanbul-reporter": "1.4.3", "karma-jasmine": "1.1.2", "karma-jasmine-html-reporter": "0.2.2", "protractor": "5.3.2", diff --git a/src/@fuse/components/material-color-picker/material-color-picker.component.ts b/src/@fuse/components/material-color-picker/material-color-picker.component.ts index 08671cdb..f914fa4e 100644 --- a/src/@fuse/components/material-color-picker/material-color-picker.component.ts +++ b/src/@fuse/components/material-color-picker/material-color-picker.component.ts @@ -13,22 +13,78 @@ import { MatColors } from '@fuse/mat-colors'; export class FuseMaterialColorPickerComponent implements OnChanges { colors: any; - selectedColor: any; hues: string[]; - view = 'palettes'; + selectedColor: any; + view: string; - @Input() selectedPalette = ''; - @Input() selectedHue = ''; - @Input() selectedFg = ''; - @Input() value: any; - @Output() onValueChange = new EventEmitter(); - @Output() selectedPaletteChange = new EventEmitter(); - @Output() selectedHueChange = new EventEmitter(); - @Output() selectedClassChange = new EventEmitter(); - @Output() selectedBgChange = new EventEmitter(); - @Output() selectedFgChange = new EventEmitter(); + @Input() + selectedPalette: string; - _selectedClass = ''; + @Input() + selectedHue: string; + + @Input() + selectedFg: string; + + @Input() + value: any; + + @Output() + onValueChange: EventEmitter; + + @Output() + selectedPaletteChange: EventEmitter; + + @Output() + selectedHueChange: EventEmitter; + + @Output() + selectedClassChange: EventEmitter; + + @Output() + selectedBgChange: EventEmitter; + + @Output() + selectedFgChange: EventEmitter; + + // Private + _selectedClass: string; + _selectedBg: string; + + /** + * Constructor + */ + constructor() + { + // Set the defaults + this.colors = MatColors.all; + this.hues = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700']; + this.selectedFg = ''; + this.selectedHue = ''; + this.selectedPalette = ''; + this.view = 'palettes'; + + this.onValueChange = new EventEmitter(); + this.selectedPaletteChange = new EventEmitter(); + this.selectedHueChange = new EventEmitter(); + this.selectedClassChange = new EventEmitter(); + this.selectedBgChange = new EventEmitter(); + this.selectedFgChange = new EventEmitter(); + + // Set the private defaults + this._selectedClass = ''; + this._selectedBg = ''; + } + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Selected class + * + * @param value + */ @Input() set selectedClass(value) { @@ -54,7 +110,11 @@ export class FuseMaterialColorPickerComponent implements OnChanges return this._selectedClass; } - _selectedBg = ''; + /** + * Selected bg + * + * @param value + */ @Input() set selectedBg(value) { @@ -86,13 +146,16 @@ export class FuseMaterialColorPickerComponent implements OnChanges return this._selectedBg; } - constructor() - { - this.colors = MatColors.all; - this.hues = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700']; - } + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- - ngOnChanges(changes: any) + /** + * On changes + * + * @param changes + */ + ngOnChanges(changes: any): void { if ( changes.selectedBg && changes.selectedBg.currentValue === '' || changes.selectedClass && changes.selectedClass.currentValue === '' || @@ -106,21 +169,38 @@ export class FuseMaterialColorPickerComponent implements OnChanges this.updateSelectedColor(); } } - - selectPalette(palette) + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Select palette + * + * @param palette + */ + selectPalette(palette): void { this.selectedPalette = palette; this.updateSelectedColor(); this.view = 'hues'; } - selectHue(hue) + /** + * Select hue + * + * @param hue + */ + selectHue(hue): void { this.selectedHue = hue; this.updateSelectedColor(); } - removeColor() + /** + * Remove color + */ + removeColor(): void { this.selectedPalette = ''; this.selectedHue = ''; @@ -128,7 +208,10 @@ export class FuseMaterialColorPickerComponent implements OnChanges this.view = 'palettes'; } - updateSelectedColor() + /** + * Update selected color + */ + updateSelectedColor(): void { setTimeout(() => { @@ -168,12 +251,18 @@ export class FuseMaterialColorPickerComponent implements OnChanges }); } - backToPaletteSelection() + /** + * Go back to palette selection + */ + backToPaletteSelection(): void { this.view = 'palettes'; } - onMenuOpen() + /** + * On menu open + */ + onMenuOpen(): void { if ( this.selectedPalette === '' ) { diff --git a/src/@fuse/components/material-color-picker/material-color-picker.module.ts b/src/@fuse/components/material-color-picker/material-color-picker.module.ts index 94db7875..6562e678 100644 --- a/src/@fuse/components/material-color-picker/material-color-picker.module.ts +++ b/src/@fuse/components/material-color-picker/material-color-picker.module.ts @@ -1,7 +1,6 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FlexLayoutModule } from '@angular/flex-layout'; - import { MatButtonModule, MatIconModule, MatMenuModule, MatRippleModule } from '@angular/material'; import { FusePipesModule } from '@fuse/pipes/pipes.module'; diff --git a/src/@fuse/components/shortcuts/shortcuts.component.ts b/src/@fuse/components/shortcuts/shortcuts.component.ts index 42db3bcb..5e001980 100644 --- a/src/@fuse/components/shortcuts/shortcuts.component.ts +++ b/src/@fuse/components/shortcuts/shortcuts.component.ts @@ -1,8 +1,8 @@ import { Component, ElementRef, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core'; import { ObservableMedia } from '@angular/flex-layout'; -import { Subject, Subscription } from 'rxjs'; -import { takeUntil } from 'rxjs/operators'; import { CookieService } from 'ngx-cookie-service'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { FuseMatchMediaService } from '@fuse/services/match-media.service'; import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; @@ -68,6 +68,7 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy { // Subscribe to config changes this._fuseConfigService.config + .pipe(takeUntil(this._unsubscribeAll)) .subscribe( (config) => { this.toolbarColor = config.colorClasses.toolbar; diff --git a/src/@fuse/scss/partials/_print.scss b/src/@fuse/scss/partials/_print.scss index 4e81f02c..14517e4f 100644 --- a/src/@fuse/scss/partials/_print.scss +++ b/src/@fuse/scss/partials/_print.scss @@ -34,7 +34,7 @@ } /* General styles */ - fuse-root { + app { fuse-navbar-vertical, fuse-navbar-horizontal, diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 06408631..4deed6b7 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -10,7 +10,7 @@ import { locale as navigationEnglish } from 'app/navigation/i18n/en'; import { locale as navigationTurkish } from 'app/navigation/i18n/tr'; @Component({ - selector : 'fuse-root', + selector : 'app', templateUrl: './app.component.html', styleUrls : ['./app.component.scss'] }) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index b664f2fb..b7cc2196 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -13,7 +13,7 @@ import { FuseSharedModule } from '@fuse/shared.module'; import { fuseConfig } from 'app/fuse-config'; -import { FuseFakeDbService } from 'app/fuse-fake-db/fuse-fake-db.service'; +import { FakeDbService } from 'app/fake-db/fake-db.service'; import { AppComponent } from 'app/app.component'; import { AppStoreModule } from 'app/store/store.module'; import { LayoutModule } from 'app/layout/layout.module'; @@ -29,7 +29,7 @@ const appRoutes: Routes = [ }, { path : 'ui', - loadChildren: './main/ui/ui.module#FuseUIModule' + loadChildren: './main/ui/ui.module#UIModule' }, { path : 'services', @@ -60,7 +60,7 @@ const appRoutes: Routes = [ RouterModule.forRoot(appRoutes), TranslateModule.forRoot(), - InMemoryWebApiModule.forRoot(FuseFakeDbService, { + InMemoryWebApiModule.forRoot(FakeDbService, { delay : 0, passThruUnknownUrl: true }), diff --git a/src/app/fuse-fake-db/academy.ts b/src/app/fake-db/academy.ts similarity index 100% rename from src/app/fuse-fake-db/academy.ts rename to src/app/fake-db/academy.ts diff --git a/src/app/fuse-fake-db/calendar.ts b/src/app/fake-db/calendar.ts similarity index 100% rename from src/app/fuse-fake-db/calendar.ts rename to src/app/fake-db/calendar.ts diff --git a/src/app/fuse-fake-db/chat.ts b/src/app/fake-db/chat.ts similarity index 100% rename from src/app/fuse-fake-db/chat.ts rename to src/app/fake-db/chat.ts diff --git a/src/app/fuse-fake-db/contacts.ts b/src/app/fake-db/contacts.ts similarity index 100% rename from src/app/fuse-fake-db/contacts.ts rename to src/app/fake-db/contacts.ts diff --git a/src/app/fuse-fake-db/dashboard-analytics.ts b/src/app/fake-db/dashboard-analytics.ts similarity index 100% rename from src/app/fuse-fake-db/dashboard-analytics.ts rename to src/app/fake-db/dashboard-analytics.ts diff --git a/src/app/fuse-fake-db/dashboard-project.ts b/src/app/fake-db/dashboard-project.ts similarity index 100% rename from src/app/fuse-fake-db/dashboard-project.ts rename to src/app/fake-db/dashboard-project.ts diff --git a/src/app/fuse-fake-db/e-commerce.ts b/src/app/fake-db/e-commerce.ts similarity index 100% rename from src/app/fuse-fake-db/e-commerce.ts rename to src/app/fake-db/e-commerce.ts diff --git a/src/app/fuse-fake-db/fuse-fake-db.service.ts b/src/app/fake-db/fake-db.service.ts similarity index 69% rename from src/app/fuse-fake-db/fuse-fake-db.service.ts rename to src/app/fake-db/fake-db.service.ts index e54dd9bc..32027ba6 100644 --- a/src/app/fuse-fake-db/fuse-fake-db.service.ts +++ b/src/app/fake-db/fake-db.service.ts @@ -1,27 +1,27 @@ import { InMemoryDbService } from 'angular-in-memory-web-api'; -import { ProjectDashboardDb } from './dashboard-project'; -import { AnalyticsDashboardDb } from './dashboard-analytics'; -import { CalendarFakeDb } from './calendar'; -import { ECommerceFakeDb } from './e-commerce'; -import { AcademyFakeDb } from './academy'; -import { MailFakeDb } from './mail'; -import { ChatFakeDb } from './chat'; -import { FileManagerFakeDb } from './file-manager'; -import { ContactsFakeDb } from './contacts'; -import { TodoFakeDb } from './todo'; -import { ScrumboardFakeDb } from './scrumboard'; -import { InvoiceFakeDb } from './invoice'; -import { ProfileFakeDb } from './profile'; -import { SearchFakeDb } from './search'; -import { FaqFakeDb } from './faq'; -import { KnowledgeBaseFakeDb } from './knowledge-base'; -import { IconsFakeDb } from './icons'; -import { QuickPanelFakeDb } from './quick-panel'; +import { ProjectDashboardDb } from 'app/fake-db/dashboard-project'; +import { AnalyticsDashboardDb } from 'app/fake-db/dashboard-analytics'; +import { CalendarFakeDb } from 'app/fake-db/calendar'; +import { ECommerceFakeDb } from 'app/fake-db/e-commerce'; +import { AcademyFakeDb } from 'app/fake-db/academy'; +import { MailFakeDb } from 'app/fake-db/mail'; +import { ChatFakeDb } from 'app/fake-db/chat'; +import { FileManagerFakeDb } from 'app/fake-db/file-manager'; +import { ContactsFakeDb } from 'app/fake-db/contacts'; +import { TodoFakeDb } from 'app/fake-db/todo'; +import { ScrumboardFakeDb } from 'app/fake-db/scrumboard'; +import { InvoiceFakeDb } from 'app/fake-db/invoice'; +import { ProfileFakeDb } from 'app/fake-db/profile'; +import { SearchFakeDb } from 'app/fake-db/search'; +import { FaqFakeDb } from 'app/fake-db/faq'; +import { KnowledgeBaseFakeDb } from 'app/fake-db/knowledge-base'; +import { IconsFakeDb } from 'app/fake-db/icons'; +import { QuickPanelFakeDb } from 'app/fake-db/quick-panel'; -export class FuseFakeDbService implements InMemoryDbService +export class FakeDbService implements InMemoryDbService { - createDb() + createDb(): any { return { // Dashboards diff --git a/src/app/fuse-fake-db/faq.ts b/src/app/fake-db/faq.ts similarity index 100% rename from src/app/fuse-fake-db/faq.ts rename to src/app/fake-db/faq.ts diff --git a/src/app/fuse-fake-db/file-manager.ts b/src/app/fake-db/file-manager.ts similarity index 100% rename from src/app/fuse-fake-db/file-manager.ts rename to src/app/fake-db/file-manager.ts diff --git a/src/app/fuse-fake-db/icons.ts b/src/app/fake-db/icons.ts similarity index 100% rename from src/app/fuse-fake-db/icons.ts rename to src/app/fake-db/icons.ts diff --git a/src/app/fuse-fake-db/invoice.ts b/src/app/fake-db/invoice.ts similarity index 100% rename from src/app/fuse-fake-db/invoice.ts rename to src/app/fake-db/invoice.ts diff --git a/src/app/fuse-fake-db/knowledge-base.ts b/src/app/fake-db/knowledge-base.ts similarity index 100% rename from src/app/fuse-fake-db/knowledge-base.ts rename to src/app/fake-db/knowledge-base.ts diff --git a/src/app/fuse-fake-db/mail.ts b/src/app/fake-db/mail.ts similarity index 100% rename from src/app/fuse-fake-db/mail.ts rename to src/app/fake-db/mail.ts diff --git a/src/app/fuse-fake-db/profile.ts b/src/app/fake-db/profile.ts similarity index 100% rename from src/app/fuse-fake-db/profile.ts rename to src/app/fake-db/profile.ts diff --git a/src/app/fuse-fake-db/quick-panel.ts b/src/app/fake-db/quick-panel.ts similarity index 100% rename from src/app/fuse-fake-db/quick-panel.ts rename to src/app/fake-db/quick-panel.ts diff --git a/src/app/fuse-fake-db/scrumboard.ts b/src/app/fake-db/scrumboard.ts similarity index 100% rename from src/app/fuse-fake-db/scrumboard.ts rename to src/app/fake-db/scrumboard.ts diff --git a/src/app/fuse-fake-db/search.ts b/src/app/fake-db/search.ts similarity index 100% rename from src/app/fuse-fake-db/search.ts rename to src/app/fake-db/search.ts diff --git a/src/app/fuse-fake-db/todo.ts b/src/app/fake-db/todo.ts similarity index 100% rename from src/app/fuse-fake-db/todo.ts rename to src/app/fake-db/todo.ts diff --git a/src/app/main/apps/apps.module.ts b/src/app/main/apps/apps.module.ts index 8ead8245..37e4ea28 100644 --- a/src/app/main/apps/apps.module.ts +++ b/src/app/main/apps/apps.module.ts @@ -18,7 +18,7 @@ const routes = [ }, { path : 'mail-ngrx', - loadChildren: './mail-ngrx/mail.module#FuseMailNgrxModule' + loadChildren: './mail-ngrx/mail.module#MailNgrxModule' }, { path : 'chat', @@ -38,7 +38,7 @@ const routes = [ }, { path : 'todo', - loadChildren: './todo/todo.module#FuseTodoModule' + loadChildren: './todo/todo.module#TodoModule' }, { path : 'file-manager', @@ -50,7 +50,7 @@ const routes = [ }, { path : 'scrumboard', - loadChildren: './scrumboard/scrumboard.module#FuseScrumboardModule' + loadChildren: './scrumboard/scrumboard.module#ScrumboardModule' } ]; diff --git a/src/app/main/apps/mail-ngrx/mail.module.ts b/src/app/main/apps/mail-ngrx/mail.module.ts index 78ca98e7..9651d7f0 100644 --- a/src/app/main/apps/mail-ngrx/mail.module.ts +++ b/src/app/main/apps/mail-ngrx/mail.module.ts @@ -88,6 +88,6 @@ const routes: Routes = [ ], entryComponents: [MailNgrxComposeDialogComponent] }) -export class FuseMailNgrxModule +export class MailNgrxModule { } diff --git a/src/app/main/apps/scrumboard/scrumboard.module.ts b/src/app/main/apps/scrumboard/scrumboard.module.ts index eb495b35..eba8e392 100644 --- a/src/app/main/apps/scrumboard/scrumboard.module.ts +++ b/src/app/main/apps/scrumboard/scrumboard.module.ts @@ -87,6 +87,6 @@ const routes: Routes = [ ], entryComponents: [ScrumboardCardDialogComponent] }) -export class FuseScrumboardModule +export class ScrumboardModule { } diff --git a/src/app/main/apps/todo/todo.module.ts b/src/app/main/apps/todo/todo.module.ts index 5a704c09..adb404f2 100644 --- a/src/app/main/apps/todo/todo.module.ts +++ b/src/app/main/apps/todo/todo.module.ts @@ -91,6 +91,6 @@ const routes: Routes = [ TodoService ] }) -export class FuseTodoModule +export class TodoModule { } diff --git a/src/app/main/components-third-party/components-third-party.module.ts b/src/app/main/components-third-party/components-third-party.module.ts index 0b9ae8c9..028e8771 100644 --- a/src/app/main/components-third-party/components-third-party.module.ts +++ b/src/app/main/components-third-party/components-third-party.module.ts @@ -6,18 +6,18 @@ import { NgxDatatableModule } from '@swimlane/ngx-datatable'; import { FuseSharedModule } from '@fuse/shared.module'; import { GoogleMapsModule } from 'app/main/components-third-party/google-maps/google-maps.module'; -import { FuseNgxDatatableComponent } from 'app/main/components-third-party/datatable/ngx-datatable.component'; +import { NgxDatatableDocsComponent } from 'app/main/components-third-party/datatable/ngx-datatable.component'; const routes = [ { path : 'datatables/ngx-datatable', - component: FuseNgxDatatableComponent + component: NgxDatatableDocsComponent } ]; @NgModule({ declarations: [ - FuseNgxDatatableComponent + NgxDatatableDocsComponent ], imports : [ RouterModule.forChild(routes), @@ -31,7 +31,7 @@ const routes = [ FuseSharedModule, GoogleMapsModule - ], + ] }) export class ComponentsThirdPartyModule { diff --git a/src/app/main/components-third-party/datatable/ngx-datatable.component.ts b/src/app/main/components-third-party/datatable/ngx-datatable.component.ts index 003dbc7f..80a3b3ae 100644 --- a/src/app/main/components-third-party/datatable/ngx-datatable.component.ts +++ b/src/app/main/components-third-party/datatable/ngx-datatable.component.ts @@ -1,27 +1,63 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; @Component({ - selector : 'fuse-ngx-datatable', + selector : 'ngx-datatable-docs', templateUrl: './ngx-datatable.component.html', styleUrls : ['./ngx-datatable.component.scss'] }) -export class FuseNgxDatatableComponent implements OnInit +export class NgxDatatableDocsComponent implements OnInit, OnDestroy { rows: any[]; - loadingIndicator = true; - reorderable = true; + loadingIndicator: boolean; + reorderable: boolean; - constructor(private http: HttpClient) + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {HttpClient} _httpClient + */ + constructor( + private _httpClient: HttpClient + ) { + // Set the defaults + this.loadingIndicator = true; + this.reorderable = true; + + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.http.get('api/contacts-contacts') + this._httpClient.get('api/contacts-contacts') + .pipe(takeUntil(this._unsubscribeAll)) .subscribe((contacts: any) => { this.rows = contacts; this.loadingIndicator = false; }); } + + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } } diff --git a/src/app/main/components-third-party/google-maps/google-maps.component.ts b/src/app/main/components-third-party/google-maps/google-maps.component.ts index 2425f0ab..8f31a0ef 100644 --- a/src/app/main/components-third-party/google-maps/google-maps.component.ts +++ b/src/app/main/components-third-party/google-maps/google-maps.component.ts @@ -1,17 +1,22 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-google-maps-docs', + selector : 'google-maps-docs', templateUrl: './google-maps.component.html', styleUrls : ['./google-maps.component.scss'] }) -export class FuseGoogleMapsDocsComponent +export class GoogleMapsDocsComponent { - lat = -34.397; - lng = 150.644; + lat: number; + lng: number; + /** + * Constructor + */ constructor() { - + // Set the defaults + this.lat = -34.397; + this.lng = 150.644; } } diff --git a/src/app/main/components-third-party/google-maps/google-maps.module.ts b/src/app/main/components-third-party/google-maps/google-maps.module.ts index 92a7b60b..a47d10d3 100644 --- a/src/app/main/components-third-party/google-maps/google-maps.module.ts +++ b/src/app/main/components-third-party/google-maps/google-maps.module.ts @@ -8,18 +8,18 @@ import { AgmCoreModule } from '@agm/core'; import { FuseSharedModule } from '@fuse/shared.module'; import { FuseHighlightModule } from '@fuse/components'; -import { FuseGoogleMapsDocsComponent } from './google-maps.component'; +import { GoogleMapsDocsComponent } from './google-maps.component'; const routes = [ { path : 'google-maps', - component: FuseGoogleMapsDocsComponent + component: GoogleMapsDocsComponent } ]; @NgModule({ declarations: [ - FuseGoogleMapsDocsComponent + GoogleMapsDocsComponent ], imports : [ RouterModule.forChild(routes), diff --git a/src/app/main/components/angular-material/angular-material.component.html b/src/app/main/components/angular-material/angular-material.component.html index 65a705dd..2339f025 100644 --- a/src/app/main/components/angular-material/angular-material.component.html +++ b/src/app/main/components/angular-material/angular-material.component.html @@ -24,7 +24,7 @@
- +
diff --git a/src/app/main/components/angular-material/angular-material.component.ts b/src/app/main/components/angular-material/angular-material.component.ts index 6f511c5a..4e56c1f2 100644 --- a/src/app/main/components/angular-material/angular-material.component.ts +++ b/src/app/main/components/angular-material/angular-material.component.ts @@ -1,33 +1,60 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; -import { COMPONENT_MAP } from './example-components'; +import { COMPONENT_MAP } from 'app/main/components/angular-material/example-components'; @Component({ - selector : 'fuse-angular-material', + selector : 'angular-material', templateUrl: './angular-material.component.html', styleUrls : ['./angular-material.component.scss'] }) -export class FuseAngularMaterialComponent implements OnInit +export class AngularMaterialComponent implements OnInit, OnDestroy { id: string; title: string; examples: any; + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {ActivatedRoute} _activatedRoute + */ constructor( - private route: ActivatedRoute + private _activatedRoute: ActivatedRoute ) { + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + /** + * On init + */ + ngOnInit(): void { - this.route.params.subscribe(params => { - this.id = params['id']; - const _title = this.id.replace('-', ' '); - this.title = _title.charAt(0).toUpperCase() + _title.substring(1); - this.examples = COMPONENT_MAP[this.id]; - }); + this._activatedRoute.params + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(params => { + this.id = params['id']; + const _title = this.id.replace('-', ' '); + this.title = _title.charAt(0).toUpperCase() + _title.substring(1); + this.examples = COMPONENT_MAP[this.id]; + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); } } diff --git a/src/app/main/components/angular-material/angular-material.module.ts b/src/app/main/components/angular-material/angular-material.module.ts index 2d7420d3..c82a0729 100644 --- a/src/app/main/components/angular-material/angular-material.module.ts +++ b/src/app/main/components/angular-material/angular-material.module.ts @@ -7,8 +7,8 @@ import { FuseWidgetModule } from '@fuse/components/widget/widget.module'; import { MaterialModule } from 'app/main/components/angular-material/material.module'; import { EXAMPLE_LIST } from 'app/main/components/angular-material/example-components'; -import { FuseAngularMaterialComponent } from 'app/main/components/angular-material/angular-material.component'; -import { FuseExampleViewerComponent } from 'app/main/components/angular-material/example-viewer/example-viewer'; +import { AngularMaterialComponent } from 'app/main/components/angular-material/angular-material.component'; +import { ExampleViewerComponent } from 'app/main/components/angular-material/example-viewer/example-viewer'; const routes: Routes = [ { @@ -16,7 +16,7 @@ const routes: Routes = [ children: [ { path : ':id', - component: FuseAngularMaterialComponent + component: AngularMaterialComponent } ] } @@ -25,8 +25,8 @@ const routes: Routes = [ @NgModule({ declarations : [ [...EXAMPLE_LIST], - FuseAngularMaterialComponent, - FuseExampleViewerComponent + AngularMaterialComponent, + ExampleViewerComponent ], imports : [ RouterModule.forChild(routes), @@ -39,7 +39,7 @@ const routes: Routes = [ ], entryComponents: EXAMPLE_LIST, }) -export class FuseAngularMaterialModule +export class AngularMaterialModule { } diff --git a/src/app/main/components/angular-material/example-viewer/example-viewer.scss b/src/app/main/components/angular-material/example-viewer/example-viewer.scss index 90324b70..244aed9c 100644 --- a/src/app/main/components/angular-material/example-viewer/example-viewer.scss +++ b/src/app/main/components/angular-material/example-viewer/example-viewer.scss @@ -1,6 +1,6 @@ @import "src/@fuse/scss/fuse"; -fuse-example-viewer { +example-viewer { display: block; padding: 24px 0; diff --git a/src/app/main/components/angular-material/example-viewer/example-viewer.ts b/src/app/main/components/angular-material/example-viewer/example-viewer.ts index 1ba7cda1..8bbfac1c 100644 --- a/src/app/main/components/angular-material/example-viewer/example-viewer.ts +++ b/src/app/main/components/angular-material/example-viewer/example-viewer.ts @@ -1,14 +1,13 @@ import { AfterViewInit, Component, ComponentFactoryResolver, ComponentRef, Input, OnDestroy, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core'; import { MatSnackBar } from '@angular/material'; - import 'prismjs/components/prism-scss'; import 'prismjs/components/prism-typescript'; -import { EXAMPLE_COMPONENTS } from '../example-components'; - import { fuseAnimations } from '@fuse/animations'; import { FuseCopierService } from '@fuse/services/copier.service'; +import { EXAMPLE_COMPONENTS } from 'app/main/components/angular-material/example-components'; + export interface LiveExample { title: string; @@ -18,65 +17,65 @@ export interface LiveExample } @Component({ - selector : 'fuse-example-viewer', + selector : 'example-viewer', templateUrl : './example-viewer.html', styleUrls : ['./example-viewer.scss'], encapsulation: ViewEncapsulation.None, animations : fuseAnimations }) -export class FuseExampleViewerComponent implements AfterViewInit, OnDestroy +export class ExampleViewerComponent implements AfterViewInit, OnDestroy { + _example: string; + exampleData: LiveExample; + showSource: boolean; previewRef: ComponentRef; - selectedIndex = 0; + selectedIndex: number; + + @ViewChild('previewContainer', {read: ViewContainerRef}) + private _previewContainer: ViewContainerRef; + + /** + * Constructor + * + * @param {MatSnackBar} _matSnackBar + * @param {FuseCopierService} _fuseCopierService + * @param {ComponentFactoryResolver} _componentFactoryResolver + */ + constructor( + private _matSnackBar: MatSnackBar, + private _fuseCopierService: FuseCopierService, + private _componentFactoryResolver: ComponentFactoryResolver + ) + { + // Set the defaults + this.selectedIndex = 0; + this.showSource = false; + } + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Container + * + * @param {ViewContainerRef} value + */ + set container(value: ViewContainerRef) + { + this._previewContainer = value; + } get container(): ViewContainerRef { return this._previewContainer; } - set container(value: ViewContainerRef) - { - this._previewContainer = value; - } - - @ViewChild('previewContainer', {read: ViewContainerRef}) private _previewContainer: ViewContainerRef; - - /** String key of the currently displayed example. */ - _example: string; - exampleData: LiveExample; - - /** Whether the source for the example is being displayed. */ - showSource = false; - - constructor( - private snackbar: MatSnackBar, - private copier: FuseCopierService, - private _resolver: ComponentFactoryResolver - ) - { - } - - ngAfterViewInit() - { - setTimeout(() => { - const cmpFactory = this._resolver.resolveComponentFactory(this.exampleData.component); - this.previewRef = this._previewContainer.createComponent(cmpFactory); - }, 0); - } - - ngOnDestroy() - { - if ( this.previewRef ) - { - this.previewRef.destroy(); - } - } - - get example() - { - return this._example; - } - + /** + * Example + * + * @param {string} example + */ @Input() set example(example: string) { @@ -91,20 +90,63 @@ export class FuseExampleViewerComponent implements AfterViewInit, OnDestroy } } + get example(): string + { + return this._example; + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * After view init + */ + ngAfterViewInit(): void + { + setTimeout(() => { + const cmpFactory = this._componentFactoryResolver.resolveComponentFactory(this.exampleData.component); + this.previewRef = this._previewContainer.createComponent(cmpFactory); + }, 0); + } + + /** + * On destroy + */ + ngOnDestroy(): void + { + if ( this.previewRef ) + { + this.previewRef.destroy(); + } + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Toggle source view + */ toggleSourceView(): void { this.showSource = !this.showSource; } - copySource(text: string) + /** + * Copy the source + * + * @param {string} text + */ + copySource(text: string): void { - if ( this.copier.copyText(text) ) + if ( this._fuseCopierService.copyText(text) ) { - this.snackbar.open('Code copied', '', {duration: 2500}); + this._matSnackBar.open('Code copied', '', {duration: 2500}); } else { - this.snackbar.open('Copy failed. Please try again!', '', {duration: 2500}); + this._matSnackBar.open('Copy failed. Please try again!', '', {duration: 2500}); } } } diff --git a/src/app/main/components/cards/cards.component.ts b/src/app/main/components/cards/cards.component.ts index 4fe7bd7b..4f0578b9 100644 --- a/src/app/main/components/cards/cards.component.ts +++ b/src/app/main/components/cards/cards.component.ts @@ -4,206 +4,213 @@ import * as shape from 'd3-shape'; import { fuseAnimations } from '@fuse/animations'; @Component({ - selector : 'fuse-cards-docs', + selector : 'cards-docs', templateUrl: './cards.component.html', styleUrls : ['./cards.component.scss'], animations : fuseAnimations }) -export class FuseCardsDocsComponent +export class CardsDocsComponent { - view = 'preview'; - - // Card 9 - card9Expanded = false; - - // Card 10 - card10Expanded = false; - - // Card 19 - card19 = { - scheme: { - domain: ['#5c84f1'] - }, - data : [ - { - 'name' : 'GOOG', - 'series': [ - { - 'name' : 'Jan 1', - 'value': 540.2 - }, - { - 'name' : 'Jan 2', - 'value': 539.4 - }, - { - 'name' : 'Jan 3', - 'value': 538.9 - }, - { - 'name' : 'Jan 4', - 'value': 539.6 - }, - { - 'name' : 'Jan 5', - 'value': 540 - }, - { - 'name' : 'Jan 6', - 'value': 540.2 - }, - { - 'name' : 'Jan 7', - 'value': 540.48 - } - ] - } - ], - curve : shape.curveBasis - }; - - // Card 24 - card24 = { - scheme : { - domain: ['#4867d2', '#5c84f1', '#89a9f4'] - }, - devices: [ - { - 'name' : 'Desktop', - 'value' : 92.8, - 'change': -0.6 - }, - { - 'name' : 'Mobile', - 'value' : 6.1, - 'change': 0.7 - }, - { - 'name' : 'Tablet', - 'value' : 1.1, - 'change': 0.1 - } - ] - }; - - // Card 25 - card25 = { - scheme: { - domain: ['#5c84f1'] - }, - data : [ - { - 'name' : 'Monday', - 'value': 221 - }, - { - 'name' : 'Tuesday', - 'value': 428 - }, - { - 'name' : 'Wednesday', - 'value': 492 - }, - { - 'name' : 'Thursday', - 'value': 471 - }, - { - 'name' : 'Friday', - 'value': 413 - }, - { - 'name' : 'Saturday', - 'value': 344 - }, - { - 'name' : 'Sunday', - 'value': 294 - } - ] - }; - - // Card 26 - card26 = { - scheme: { - domain: ['#5c84f1'] - }, - data : [ - { - 'name' : 'Impressions', - 'series': [ - { - 'name' : 'Jan 1', - 'value': 670000 - }, - { - 'name' : 'Jan 2', - 'value': 540000 - }, - { - 'name' : 'Jan 3', - 'value': 820000 - }, - { - 'name' : 'Jan 4', - 'value': 570000 - }, - { - 'name' : 'Jan 5', - 'value': 720000 - }, - { - 'name' : 'Jan 6', - 'value': 570000 - }, - { - 'name' : 'Jan 7', - 'value': 870000 - }, - { - 'name' : 'Jan 8', - 'value': 720000 - }, - { - 'name' : 'Jan 9', - 'value': 890000 - }, - { - 'name' : 'Jan 10', - 'value': 987000 - }, - { - 'name' : 'Jan 11', - 'value': 1120000 - }, - { - 'name' : 'Jan 12', - 'value': 1360000 - }, - { - 'name' : 'Jan 13', - 'value': 1100000 - }, - { - 'name' : 'Jan 14', - 'value': 1490000 - }, - { - 'name' : 'Jan 15', - 'value': 980000 - } - ] - } - ], - curve : shape.curveBasis - }; + view: string; + card9Expanded: boolean; + card10Expanded: boolean; + card19: any; + card24: any; + card25: any; + card26: any; constructor() { + // Set the defaults + this.view = 'preview'; + + this.card9Expanded = false; + this.card10Expanded = false; + this.card19 = { + scheme: { + domain: ['#5c84f1'] + }, + data : [ + { + 'name' : 'GOOG', + 'series': [ + { + 'name' : 'Jan 1', + 'value': 540.2 + }, + { + 'name' : 'Jan 2', + 'value': 539.4 + }, + { + 'name' : 'Jan 3', + 'value': 538.9 + }, + { + 'name' : 'Jan 4', + 'value': 539.6 + }, + { + 'name' : 'Jan 5', + 'value': 540 + }, + { + 'name' : 'Jan 6', + 'value': 540.2 + }, + { + 'name' : 'Jan 7', + 'value': 540.48 + } + ] + } + ], + curve : shape.curveBasis + }; + + this.card24 = { + scheme : { + domain: ['#4867d2', '#5c84f1', '#89a9f4'] + }, + devices: [ + { + 'name' : 'Desktop', + 'value' : 92.8, + 'change': -0.6 + }, + { + 'name' : 'Mobile', + 'value' : 6.1, + 'change': 0.7 + }, + { + 'name' : 'Tablet', + 'value' : 1.1, + 'change': 0.1 + } + ] + }; + + this.card25 = { + scheme: { + domain: ['#5c84f1'] + }, + data : [ + { + 'name' : 'Monday', + 'value': 221 + }, + { + 'name' : 'Tuesday', + 'value': 428 + }, + { + 'name' : 'Wednesday', + 'value': 492 + }, + { + 'name' : 'Thursday', + 'value': 471 + }, + { + 'name' : 'Friday', + 'value': 413 + }, + { + 'name' : 'Saturday', + 'value': 344 + }, + { + 'name' : 'Sunday', + 'value': 294 + } + ] + }; + + this.card26 = { + scheme: { + domain: ['#5c84f1'] + }, + data : [ + { + 'name' : 'Impressions', + 'series': [ + { + 'name' : 'Jan 1', + 'value': 670000 + }, + { + 'name' : 'Jan 2', + 'value': 540000 + }, + { + 'name' : 'Jan 3', + 'value': 820000 + }, + { + 'name' : 'Jan 4', + 'value': 570000 + }, + { + 'name' : 'Jan 5', + 'value': 720000 + }, + { + 'name' : 'Jan 6', + 'value': 570000 + }, + { + 'name' : 'Jan 7', + 'value': 870000 + }, + { + 'name' : 'Jan 8', + 'value': 720000 + }, + { + 'name' : 'Jan 9', + 'value': 890000 + }, + { + 'name' : 'Jan 10', + 'value': 987000 + }, + { + 'name' : 'Jan 11', + 'value': 1120000 + }, + { + 'name' : 'Jan 12', + 'value': 1360000 + }, + { + 'name' : 'Jan 13', + 'value': 1100000 + }, + { + 'name' : 'Jan 14', + 'value': 1490000 + }, + { + 'name' : 'Jan 15', + 'value': 980000 + } + ] + } + ], + curve : shape.curveBasis + }; } - toggleView() + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Toggle the view + */ + toggleView(): void { if ( this.view === 'preview' ) { diff --git a/src/app/main/components/components.module.ts b/src/app/main/components/components.module.ts index 89eb62f7..0a53c9a7 100644 --- a/src/app/main/components/components.module.ts +++ b/src/app/main/components/components.module.ts @@ -4,73 +4,74 @@ import { MatButtonModule, MatButtonToggleModule, MatFormFieldModule, MatIconModu import { NgxChartsModule } from '@swimlane/ngx-charts'; import { FuseSharedModule } from '@fuse/shared.module'; + import { FuseCountdownModule, FuseHighlightModule, FuseMaterialColorPickerModule, FuseWidgetModule } from '@fuse/components'; -import { FuseCardsDocsComponent } from 'app/main/components/cards/cards.component'; -import { FuseCountdownDocsComponent } from 'app/main/components/countdown/countdown.component'; -import { FuseHighlightDocsComponent } from 'app/main/components/highlight/highlight.component'; -import { FuseMaterialColorPickerDocsComponent } from 'app/main/components/material-color-picker/material-color-picker.component'; -import { FuseMultiLanguageDocsComponent } from 'app/main/components/multi-language/multi-language.component'; -import { FuseNavigationDocsComponent } from 'app/main/components/navigation/navigation.component'; -import { FuseSearchBarDocsComponent } from 'app/main/components/search-bar/search-bar.component'; -import { FuseSidebarDocsComponent } from 'app/main/components/sidebar/sidebar.component'; -import { FuseShortcutsDocsComponent } from 'app/main/components/shortcuts/shortcuts.component'; -import { FuseWidgetDocsComponent } from 'app/main/components/widget/widget.component'; +import { CardsDocsComponent } from 'app/main/components/cards/cards.component'; +import { CountdownDocsComponent } from 'app/main/components/countdown/countdown.component'; +import { HighlightDocsComponent } from 'app/main/components/highlight/highlight.component'; +import { MaterialColorPickerDocsComponent } from 'app/main/components/material-color-picker/material-color-picker.component'; +import { MultiLanguageDocsComponent } from 'app/main/components/multi-language/multi-language.component'; +import { NavigationDocsComponent } from 'app/main/components/navigation/navigation.component'; +import { SearchBarDocsComponent } from 'app/main/components/search-bar/search-bar.component'; +import { SidebarDocsComponent } from 'app/main/components/sidebar/sidebar.component'; +import { ShortcutsDocsComponent } from 'app/main/components/shortcuts/shortcuts.component'; +import { WidgetDocsComponent } from 'app/main/components/widget/widget.component'; const routes = [ { path : 'cards', - component: FuseCardsDocsComponent + component: CardsDocsComponent }, { path : 'countdown', - component: FuseCountdownDocsComponent + component: CountdownDocsComponent }, { path : 'highlight', - component: FuseHighlightDocsComponent + component: HighlightDocsComponent }, { path : 'material-color-picker', - component: FuseMaterialColorPickerDocsComponent + component: MaterialColorPickerDocsComponent }, { path : 'multi-language', - component: FuseMultiLanguageDocsComponent + component: MultiLanguageDocsComponent }, { path : 'navigation', - component: FuseNavigationDocsComponent + component: NavigationDocsComponent }, { path : 'search-bar', - component: FuseSearchBarDocsComponent + component: SearchBarDocsComponent }, { path : 'sidebar', - component: FuseSidebarDocsComponent + component: SidebarDocsComponent }, { path : 'shortcuts', - component: FuseShortcutsDocsComponent + component: ShortcutsDocsComponent }, { path : 'widget', - component: FuseWidgetDocsComponent + component: WidgetDocsComponent } ]; @NgModule({ declarations: [ - FuseCardsDocsComponent, - FuseCountdownDocsComponent, - FuseHighlightDocsComponent, - FuseMaterialColorPickerDocsComponent, - FuseMultiLanguageDocsComponent, - FuseNavigationDocsComponent, - FuseSearchBarDocsComponent, - FuseSidebarDocsComponent, - FuseShortcutsDocsComponent, - FuseWidgetDocsComponent + CardsDocsComponent, + CountdownDocsComponent, + HighlightDocsComponent, + MaterialColorPickerDocsComponent, + MultiLanguageDocsComponent, + NavigationDocsComponent, + SearchBarDocsComponent, + SidebarDocsComponent, + ShortcutsDocsComponent, + WidgetDocsComponent ], imports : [ RouterModule.forChild(routes), @@ -88,6 +89,7 @@ const routes = [ NgxChartsModule, FuseSharedModule, + FuseCountdownModule, FuseHighlightModule, FuseMaterialColorPickerModule, diff --git a/src/app/main/components/countdown/countdown.component.ts b/src/app/main/components/countdown/countdown.component.ts index 94378858..6c525efa 100644 --- a/src/app/main/components/countdown/countdown.component.ts +++ b/src/app/main/components/countdown/countdown.component.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-countdown-docs', + selector : 'countdown-docs', templateUrl: './countdown.component.html', styleUrls : ['./countdown.component.scss'] }) -export class FuseCountdownDocsComponent +export class CountdownDocsComponent { + /** + * Constructor + */ constructor() { diff --git a/src/app/main/components/highlight/highlight.component.ts b/src/app/main/components/highlight/highlight.component.ts index 46b3f84e..d78b0004 100644 --- a/src/app/main/components/highlight/highlight.component.ts +++ b/src/app/main/components/highlight/highlight.component.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-highlight-docs', + selector : 'highlight-docs', templateUrl: './highlight.component.html', styleUrls : ['./highlight.component.scss'] }) -export class FuseHighlightDocsComponent +export class HighlightDocsComponent { + /** + * Constructor + */ constructor() { diff --git a/src/app/main/components/material-color-picker/material-color-picker.component.ts b/src/app/main/components/material-color-picker/material-color-picker.component.ts index cdfdfe5a..11fd9d1d 100644 --- a/src/app/main/components/material-color-picker/material-color-picker.component.ts +++ b/src/app/main/components/material-color-picker/material-color-picker.component.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-material-color-picker-docs', + selector : 'material-color-picker-docs', templateUrl: './material-color-picker.component.html', styleUrls : ['./material-color-picker.component.scss'] }) -export class FuseMaterialColorPickerDocsComponent +export class MaterialColorPickerDocsComponent { + /** + * Constructor + */ constructor() { diff --git a/src/app/main/components/multi-language/multi-language.component.html b/src/app/main/components/multi-language/multi-language.component.html index 7b7c2f51..5032fe83 100644 --- a/src/app/main/components/multi-language/multi-language.component.html +++ b/src/app/main/components/multi-language/multi-language.component.html @@ -86,7 +86,7 @@ import { locale as turkish } from './i18n/tr'; @Component({ - selector : 'fuse-mail', + selector : 'mail', templateUrl: './mail.component.html', styleUrls : ['./mail.component.scss'] }) diff --git a/src/app/main/components/multi-language/multi-language.component.ts b/src/app/main/components/multi-language/multi-language.component.ts index fc9385a4..f12c82e7 100644 --- a/src/app/main/components/multi-language/multi-language.component.ts +++ b/src/app/main/components/multi-language/multi-language.component.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-multi-language-docs', + selector : 'multi-language-docs', templateUrl: './multi-language.component.html', styleUrls : ['./multi-language.component.scss'] }) -export class FuseMultiLanguageDocsComponent +export class MultiLanguageDocsComponent { + /** + * Constructor + */ constructor() { } diff --git a/src/app/main/components/navigation/navigation.component.ts b/src/app/main/components/navigation/navigation.component.ts index 7a1181f9..2f34bbd1 100644 --- a/src/app/main/components/navigation/navigation.component.ts +++ b/src/app/main/components/navigation/navigation.component.ts @@ -3,21 +3,33 @@ import { Component } from '@angular/core'; import { navigation } from 'app/navigation/navigation'; @Component({ - selector : 'fuse-navigation-docs', + selector : 'navigation-docs', templateUrl: './navigation.component.html', styleUrls : ['./navigation.component.scss'] }) -export class FuseNavigationDocsComponent +export class NavigationDocsComponent { navigation: any; - hidden = false; + hidden: boolean; + /** + * Constructor + */ constructor() { + // Set the defaults this.navigation = navigation; + this.hidden = false; } - showHideCalendarMenuItem() + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Show/hide calendar menu item + */ + showHideCalendarMenuItem(): void { // Get the calendar item from the navigation const calendarNavItem = this.navigation[0].children[1]; @@ -27,7 +39,10 @@ export class FuseNavigationDocsComponent calendarNavItem.hidden = this.hidden; } - updateMailBadge() + /** + * Update mail badge + */ + updateMailBadge(): void { // Get the mail nav item const mailNavItem = this.navigation[0].children[4]; @@ -36,7 +51,10 @@ export class FuseNavigationDocsComponent mailNavItem.badge.title = 35; } - addSubitemToCalendar() + /** + * Add subitem to the calendar + */ + addSubitemToCalendar(): void { // Prepare the new nav item const newNavItem = { @@ -59,7 +77,10 @@ export class FuseNavigationDocsComponent calendarNavItem.children.push(newNavItem); } - addNavItemWithCustomFunction() + /** + * Add a nav item with custom function + */ + addNavItemWithCustomFunction(): void { // Prepare the new nav item const newNavItem = { diff --git a/src/app/main/components/search-bar/search-bar.component.ts b/src/app/main/components/search-bar/search-bar.component.ts index f9856b2e..130f179f 100644 --- a/src/app/main/components/search-bar/search-bar.component.ts +++ b/src/app/main/components/search-bar/search-bar.component.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-search-bar-docs', + selector : 'search-bar-docs', templateUrl: './search-bar.component.html', styleUrls : ['./search-bar.component.scss'] }) -export class FuseSearchBarDocsComponent +export class SearchBarDocsComponent { + /** + * Constructor + */ constructor() { diff --git a/src/app/main/components/shortcuts/shortcuts.component.ts b/src/app/main/components/shortcuts/shortcuts.component.ts index 69cc9890..d34619a6 100644 --- a/src/app/main/components/shortcuts/shortcuts.component.ts +++ b/src/app/main/components/shortcuts/shortcuts.component.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-shortcuts-docs', + selector : 'shortcuts-docs', templateUrl: './shortcuts.component.html', styleUrls : ['./shortcuts.component.scss'] }) -export class FuseShortcutsDocsComponent +export class ShortcutsDocsComponent { + /** + * Constructor + */ constructor() { diff --git a/src/app/main/components/sidebar/sidebar.component.ts b/src/app/main/components/sidebar/sidebar.component.ts index ed91b597..0eeda631 100644 --- a/src/app/main/components/sidebar/sidebar.component.ts +++ b/src/app/main/components/sidebar/sidebar.component.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-sidebar-docs', + selector : 'sidebar-docs', templateUrl: './sidebar.component.html', styleUrls : ['./sidebar.component.scss'] }) -export class FuseSidebarDocsComponent +export class SidebarDocsComponent { + /** + * Constructor + */ constructor() { } diff --git a/src/app/main/components/widget/widget.component.ts b/src/app/main/components/widget/widget.component.ts index 3fbb3bd2..b581012e 100644 --- a/src/app/main/components/widget/widget.component.ts +++ b/src/app/main/components/widget/widget.component.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-widget-docs', + selector : 'widget-docs', templateUrl: './widget.component.html', styleUrls : ['./widget.component.scss'] }) -export class FuseWidgetDocsComponent +export class WidgetDocsComponent { + /** + * Constructor + */ constructor() { diff --git a/src/app/main/pages/authentication/mail-confirm/mail-confirm.component.ts b/src/app/main/pages/authentication/mail-confirm/mail-confirm.component.ts index 56b6788e..35495d64 100644 --- a/src/app/main/pages/authentication/mail-confirm/mail-confirm.component.ts +++ b/src/app/main/pages/authentication/mail-confirm/mail-confirm.component.ts @@ -4,7 +4,7 @@ import { FuseConfigService } from '@fuse/services/config.service'; import { fuseAnimations } from '@fuse/animations'; @Component({ - selector : 'fuse-mail-confirm', + selector : 'mail-confirm', templateUrl: './mail-confirm.component.html', styleUrls : ['./mail-confirm.component.scss'], animations : fuseAnimations diff --git a/src/app/main/pages/errors/404/error-404.component.ts b/src/app/main/pages/errors/404/error-404.component.ts index 3544b2a9..04c0048b 100644 --- a/src/app/main/pages/errors/404/error-404.component.ts +++ b/src/app/main/pages/errors/404/error-404.component.ts @@ -3,7 +3,7 @@ import { Component } from '@angular/core'; import { FuseConfigService } from '@fuse/services/config.service'; @Component({ - selector : 'fuse-error-404', + selector : 'error-404', templateUrl: './error-404.component.html', styleUrls : ['./error-404.component.scss'] }) diff --git a/src/app/main/pages/profile/profile.component.html b/src/app/main/pages/profile/profile.component.html index 8be37f77..35f630bc 100644 --- a/src/app/main/pages/profile/profile.component.html +++ b/src/app/main/pages/profile/profile.component.html @@ -27,7 +27,7 @@ - + diff --git a/src/app/main/pages/profile/profile.module.ts b/src/app/main/pages/profile/profile.module.ts index 6cb704d3..7d0a35fd 100644 --- a/src/app/main/pages/profile/profile.module.ts +++ b/src/app/main/pages/profile/profile.module.ts @@ -6,7 +6,7 @@ import { FuseSharedModule } from '@fuse/shared.module'; import { ProfileService } from 'app/main/pages/profile/profile.service'; import { ProfileComponent } from 'app/main/pages/profile/profile.component'; -import { FuseProfileTimelineComponent } from 'app/main/pages/profile/tabs/timeline/timeline.component'; +import { ProfileTimelineComponent } from 'app/main/pages/profile/tabs/timeline/timeline.component'; import { ProfileAboutComponent } from 'app/main/pages/profile/tabs/about/about.component'; import { ProfilePhotosVideosComponent } from 'app/main/pages/profile/tabs/photos-videos/photos-videos.component'; @@ -24,7 +24,7 @@ const routes = [ @NgModule({ declarations: [ ProfileComponent, - FuseProfileTimelineComponent, + ProfileTimelineComponent, ProfileAboutComponent, ProfilePhotosVideosComponent ], diff --git a/src/app/main/pages/profile/tabs/timeline/timeline.component.ts b/src/app/main/pages/profile/tabs/timeline/timeline.component.ts index 886b24ed..9c905b66 100644 --- a/src/app/main/pages/profile/tabs/timeline/timeline.component.ts +++ b/src/app/main/pages/profile/tabs/timeline/timeline.component.ts @@ -7,12 +7,12 @@ import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @Component({ - selector : 'fuse-profile-timeline', + selector : 'profile-timeline', templateUrl: './timeline.component.html', styleUrls : ['./timeline.component.scss'], animations : fuseAnimations }) -export class FuseProfileTimelineComponent implements OnInit, OnDestroy +export class ProfileTimelineComponent implements OnInit, OnDestroy { timeline: any; diff --git a/src/app/main/services/config/config.component.ts b/src/app/main/services/config/config.component.ts index 8eea59a5..d2fe116a 100644 --- a/src/app/main/services/config/config.component.ts +++ b/src/app/main/services/config/config.component.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-config-service-docs', + selector : 'config-service-docs', templateUrl: './config.component.html', styleUrls : ['./config.component.scss'] }) -export class FuseConfigServiceDocsComponent +export class ConfigServiceDocsComponent { + /** + * Constructor + */ constructor() { diff --git a/src/app/main/services/services.module.ts b/src/app/main/services/services.module.ts index 202d3b15..d4a4d036 100644 --- a/src/app/main/services/services.module.ts +++ b/src/app/main/services/services.module.ts @@ -5,24 +5,24 @@ import { MatIconModule } from '@angular/material'; import { FuseSharedModule } from '@fuse/shared.module'; import { FuseHighlightModule } from '@fuse/components'; -import { FuseConfigServiceDocsComponent } from 'app/main/services/config/config.component'; -import { FuseSplashScreenServiceDocsComponent } from 'app/main/services/splash-screen/splash-screen.component'; +import { ConfigServiceDocsComponent } from 'app/main/services/config/config.component'; +import { SplashScreenServiceDocsComponent } from 'app/main/services/splash-screen/splash-screen.component'; const routes = [ { path : 'config', - component: FuseConfigServiceDocsComponent + component: ConfigServiceDocsComponent }, { path : 'splash-screen', - component: FuseSplashScreenServiceDocsComponent + component: SplashScreenServiceDocsComponent } ]; @NgModule({ declarations: [ - FuseConfigServiceDocsComponent, - FuseSplashScreenServiceDocsComponent + ConfigServiceDocsComponent, + SplashScreenServiceDocsComponent ], imports : [ RouterModule.forChild(routes), diff --git a/src/app/main/services/splash-screen/splash-screen.component.ts b/src/app/main/services/splash-screen/splash-screen.component.ts index d28b2d01..cefe9e52 100644 --- a/src/app/main/services/splash-screen/splash-screen.component.ts +++ b/src/app/main/services/splash-screen/splash-screen.component.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-splash-screen-service-docs', + selector : 'splash-screen-service-docs', templateUrl: './splash-screen.component.html', styleUrls : ['./splash-screen.component.scss'] }) -export class FuseSplashScreenServiceDocsComponent +export class SplashScreenServiceDocsComponent { + /** + * Constructor + */ constructor() { diff --git a/src/app/main/ui/colors/colors.component.ts b/src/app/main/ui/colors/colors.component.ts index 65a38fe9..f336f69d 100644 --- a/src/app/main/ui/colors/colors.component.ts +++ b/src/app/main/ui/colors/colors.component.ts @@ -3,28 +3,47 @@ import { Component, OnInit } from '@angular/core'; import { MatColors } from '@fuse/mat-colors'; @Component({ - selector : 'fuse-colors', + selector : 'colors', templateUrl: './colors.component.html', styleUrls : ['./colors.component.scss'] }) -export class FuseColorsComponent +export class ColorsComponent { colors: {}; selectedColor: string; selectedColorDefaultValue: string; + /** + * Constructor + */ constructor() { + // Set the defaults this.colors = MatColors.all; - this.updateSelectedColor('primary'); + this._updateSelectedColor('primary'); } - selectColor(selected) + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Select color + * + * @param selected + */ + selectColor(selected): void { - this.updateSelectedColor(selected.tab.textLabel); + this._updateSelectedColor(selected.tab.textLabel); } - private updateSelectedColor(colorName) + /** + * Update selected color + * + * @param colorName + * @private + */ + private _updateSelectedColor(colorName): void { this.selectedColor = colorName; this.selectedColorDefaultValue = MatColors.getColor(this.selectedColor)[500]; diff --git a/src/app/main/ui/colors/colors.module.ts b/src/app/main/ui/colors/colors.module.ts index 2c8a6379..72f377ae 100644 --- a/src/app/main/ui/colors/colors.module.ts +++ b/src/app/main/ui/colors/colors.module.ts @@ -1,23 +1,22 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; - import { MatButtonModule, MatIconModule, MatTabsModule } from '@angular/material'; import { FuseSharedModule } from '@fuse/shared.module'; import { FuseDemoModule } from '@fuse/components/demo/demo.module'; -import { FuseColorsComponent } from './colors.component'; +import { ColorsComponent } from 'app/main/ui/colors/colors.component'; const routes: Routes = [ { path : 'colors', - component: FuseColorsComponent + component: ColorsComponent } ]; @NgModule({ declarations: [ - FuseColorsComponent + ColorsComponent ], imports : [ RouterModule.forChild(routes), diff --git a/src/app/main/ui/forms/forms.component.ts b/src/app/main/ui/forms/forms.component.ts index 297701ed..ca09a013 100644 --- a/src/app/main/ui/forms/forms.component.ts +++ b/src/app/main/ui/forms/forms.component.ts @@ -1,12 +1,14 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; @Component({ - selector : 'fuse-forms', + selector : 'forms', templateUrl: './forms.component.html', styleUrls : ['./forms.component.scss'] }) -export class FuseFormsComponent implements OnInit +export class FormsComponent implements OnInit, OnDestroy { form: FormGroup; formErrors: any; @@ -27,7 +29,17 @@ export class FuseFormsComponent implements OnInit verticalStepperStep2Errors: any; verticalStepperStep3Errors: any; - constructor(private formBuilder: FormBuilder) + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {FormBuilder} _formBuilder + */ + constructor( + private _formBuilder: FormBuilder + ) { // Reactive form errors this.formErrors = { @@ -73,12 +85,22 @@ export class FuseFormsComponent implements OnInit state : {}, postalCode: {} }; + + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { // Reactive Form - this.form = this.formBuilder.group({ + this.form = this._formBuilder.group({ company : [ { value : 'Google', @@ -95,68 +117,99 @@ export class FuseFormsComponent implements OnInit country : ['', Validators.required] }); - this.form.valueChanges.subscribe(() => { - this.onFormValuesChanged(); - }); + this.form.valueChanges + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(() => { + this.onFormValuesChanged(); + }); // Horizontal Stepper form steps - this.horizontalStepperStep1 = this.formBuilder.group({ + this.horizontalStepperStep1 = this._formBuilder.group({ firstName: ['', Validators.required], lastName : ['', Validators.required] }); - this.horizontalStepperStep2 = this.formBuilder.group({ + this.horizontalStepperStep2 = this._formBuilder.group({ address: ['', Validators.required] }); - this.horizontalStepperStep3 = this.formBuilder.group({ + this.horizontalStepperStep3 = this._formBuilder.group({ city : ['', Validators.required], state : ['', Validators.required], postalCode: ['', [Validators.required, Validators.maxLength(5)]] }); - this.horizontalStepperStep1.valueChanges.subscribe(() => { - this.onFormValuesChanged(); - }); + this.horizontalStepperStep1.valueChanges + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(() => { + this.onFormValuesChanged(); + }); - this.horizontalStepperStep2.valueChanges.subscribe(() => { - this.onFormValuesChanged(); - }); + this.horizontalStepperStep2.valueChanges + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(() => { + this.onFormValuesChanged(); + }); - this.horizontalStepperStep3.valueChanges.subscribe(() => { - this.onFormValuesChanged(); - }); + this.horizontalStepperStep3.valueChanges + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(() => { + this.onFormValuesChanged(); + }); // Vertical Stepper form stepper - this.verticalStepperStep1 = this.formBuilder.group({ + this.verticalStepperStep1 = this._formBuilder.group({ firstName: ['', Validators.required], lastName : ['', Validators.required] }); - this.verticalStepperStep2 = this.formBuilder.group({ + this.verticalStepperStep2 = this._formBuilder.group({ address: ['', Validators.required] }); - this.verticalStepperStep3 = this.formBuilder.group({ + this.verticalStepperStep3 = this._formBuilder.group({ city : ['', Validators.required], state : ['', Validators.required], postalCode: ['', [Validators.required, Validators.maxLength(5)]] }); - this.verticalStepperStep1.valueChanges.subscribe(() => { - this.onFormValuesChanged(); - }); + this.verticalStepperStep1.valueChanges + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(() => { + this.onFormValuesChanged(); + }); - this.verticalStepperStep2.valueChanges.subscribe(() => { - this.onFormValuesChanged(); - }); + this.verticalStepperStep2.valueChanges + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(() => { + this.onFormValuesChanged(); + }); - this.verticalStepperStep3.valueChanges.subscribe(() => { - this.onFormValuesChanged(); - }); + this.verticalStepperStep3.valueChanges + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(() => { + this.onFormValuesChanged(); + }); } - onFormValuesChanged() + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * On form values changed + */ + onFormValuesChanged(): void { for ( const field in this.formErrors ) { @@ -178,12 +231,18 @@ export class FuseFormsComponent implements OnInit } } - finishHorizontalStepper() + /** + * Finish the horizontal stepper + */ + finishHorizontalStepper(): void { alert('You have finished the horizontal stepper!'); } - finishVerticalStepper() + /** + * Finish the vertical stepper + */ + finishVerticalStepper(): void { alert('You have finished the vertical stepper!'); } diff --git a/src/app/main/ui/forms/forms.module.ts b/src/app/main/ui/forms/forms.module.ts index c9fc1d6e..bd667254 100644 --- a/src/app/main/ui/forms/forms.module.ts +++ b/src/app/main/ui/forms/forms.module.ts @@ -1,22 +1,21 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; - import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatSelectModule, MatStepperModule } from '@angular/material'; import { FuseSharedModule } from '@fuse/shared.module'; -import { FuseFormsComponent } from './forms.component'; +import { FormsComponent } from 'app/main/ui/forms/forms.component'; const routes: Routes = [ { path : 'forms', - component: FuseFormsComponent + component: FormsComponent } ]; @NgModule({ declarations: [ - FuseFormsComponent + FormsComponent ], imports : [ RouterModule.forChild(routes), diff --git a/src/app/main/ui/helper-classes/helper-classes.component.html b/src/app/main/ui/helper-classes/helper-classes.component.html index 5bd37fc4..a470baa4 100644 --- a/src/app/main/ui/helper-classes/helper-classes.component.html +++ b/src/app/main/ui/helper-classes/helper-classes.component.html @@ -20,13 +20,13 @@ - + - + diff --git a/src/app/main/ui/helper-classes/helper-classes.component.ts b/src/app/main/ui/helper-classes/helper-classes.component.ts index 7372b0a3..036abefb 100644 --- a/src/app/main/ui/helper-classes/helper-classes.component.ts +++ b/src/app/main/ui/helper-classes/helper-classes.component.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-helper-classes', + selector : 'helper-classes', templateUrl: './helper-classes.component.html', styleUrls : ['./helper-classes.component.scss'] }) -export class FuseHelperClassesComponent +export class HelperClassesComponent { + /** + * Constructor + */ constructor() { } diff --git a/src/app/main/ui/helper-classes/helper-classes.module.ts b/src/app/main/ui/helper-classes/helper-classes.module.ts index 31ee6c1f..0b09b802 100644 --- a/src/app/main/ui/helper-classes/helper-classes.module.ts +++ b/src/app/main/ui/helper-classes/helper-classes.module.ts @@ -1,27 +1,26 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; - import { MatIconModule, MatTabsModule } from '@angular/material'; import { FuseSharedModule } from '@fuse/shared.module'; import { FuseHighlightModule } from '@fuse/components'; -import { FuseHelperClassesComponent } from './helper-classes.component'; -import { FuseHelperClassesPaddingMarginComponent } from './tabs/padding-margin/padding-margin.component'; -import { FuseHelperClassesWidthHeightComponent } from './tabs/width-height/width-height.component'; +import { HelperClassesComponent } from 'app/main/ui/helper-classes/helper-classes.component'; +import { HelperClassesPaddingMarginComponent } from 'app/main/ui/helper-classes/tabs/padding-margin/padding-margin.component'; +import { HelperClassesWidthHeightComponent } from 'app/main/ui/helper-classes/tabs/width-height/width-height.component'; const routes: Routes = [ { path : 'helper-classes', - component: FuseHelperClassesComponent + component: HelperClassesComponent } ]; @NgModule({ declarations: [ - FuseHelperClassesComponent, - FuseHelperClassesPaddingMarginComponent, - FuseHelperClassesWidthHeightComponent + HelperClassesComponent, + HelperClassesPaddingMarginComponent, + HelperClassesWidthHeightComponent ], imports : [ RouterModule.forChild(routes), diff --git a/src/app/main/ui/helper-classes/tabs/padding-margin/padding-margin.component.ts b/src/app/main/ui/helper-classes/tabs/padding-margin/padding-margin.component.ts index e4a02a32..387c9753 100644 --- a/src/app/main/ui/helper-classes/tabs/padding-margin/padding-margin.component.ts +++ b/src/app/main/ui/helper-classes/tabs/padding-margin/padding-margin.component.ts @@ -1,13 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-helper-classes-padding-margin', + selector : 'helper-classes-padding-margin', templateUrl: './padding-margin.component.html', styleUrls : ['./padding-margin.component.scss'] }) -export class FuseHelperClassesPaddingMarginComponent +export class HelperClassesPaddingMarginComponent { - + /** + * Constructor + */ constructor() { diff --git a/src/app/main/ui/helper-classes/tabs/width-height/width-height.component.ts b/src/app/main/ui/helper-classes/tabs/width-height/width-height.component.ts index fe5b14cf..323b733f 100644 --- a/src/app/main/ui/helper-classes/tabs/width-height/width-height.component.ts +++ b/src/app/main/ui/helper-classes/tabs/width-height/width-height.component.ts @@ -1,13 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-helper-classes-width-height', + selector : 'helper-classes-width-height', templateUrl: './width-height.component.html', styleUrls : ['./width-height.component.scss'] }) -export class FuseHelperClassesWidthHeightComponent +export class HelperClassesWidthHeightComponent { - + /** + * Constructor + */ constructor() { diff --git a/src/app/main/ui/icons/icons.component.ts b/src/app/main/ui/icons/icons.component.ts index 188de0dd..e289964a 100644 --- a/src/app/main/ui/icons/icons.component.ts +++ b/src/app/main/ui/icons/icons.component.ts @@ -1,24 +1,49 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; +import { takeUntil } from 'rxjs/operators'; +import { Subject } from 'rxjs'; @Component({ - selector : 'fuse-icons', + selector : 'icons', templateUrl: './icons.component.html', styleUrls : ['./icons.component.scss'] }) -export class FuseIconsComponent implements OnInit +export class IconsComponent implements OnInit, OnDestroy { icons: string[]; filteredIcons: string[]; - loading = true; + loading: boolean; - constructor(private http: HttpClient) + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {HttpClient} _httpClient + */ + constructor( + private _httpClient: HttpClient + ) { + // Set the defaults + this.loading = true; + + // Set the private defaults + this._unsubscribeAll = new Subject(); } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { - this.http.get('api/icons') + this._httpClient.get('api/icons') + .pipe(takeUntil(this._unsubscribeAll)) .subscribe((icons: any) => { this.icons = icons; this.filteredIcons = this.icons; @@ -26,7 +51,26 @@ export class FuseIconsComponent implements OnInit }); } - filterIcons(event) + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Filter icons + * + * @param event + */ + filterIcons(event): void { const value = event.target.value; diff --git a/src/app/main/ui/icons/icons.module.ts b/src/app/main/ui/icons/icons.module.ts index 8e14e039..464185b5 100644 --- a/src/app/main/ui/icons/icons.module.ts +++ b/src/app/main/ui/icons/icons.module.ts @@ -1,22 +1,21 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; - import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatProgressSpinnerModule } from '@angular/material'; import { FuseSharedModule } from '@fuse/shared.module'; -import { FuseIconsComponent } from './icons.component'; +import { IconsComponent } from 'app/main/ui/icons/icons.component'; const routes: Routes = [ { path : 'icons', - component: FuseIconsComponent + component: IconsComponent } ]; @NgModule({ declarations: [ - FuseIconsComponent + IconsComponent ], imports : [ RouterModule.forChild(routes), diff --git a/src/app/main/ui/page-layouts/blank/blank.component.ts b/src/app/main/ui/page-layouts/blank/blank.component.ts index 9b47592b..cfbf76b0 100644 --- a/src/app/main/ui/page-layouts/blank/blank.component.ts +++ b/src/app/main/ui/page-layouts/blank/blank.component.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-blank', + selector : 'blank', templateUrl: './blank.component.html', styleUrls : ['./blank.component.scss'] }) -export class FuseBlankComponent +export class BlankComponent { + /** + * Constructor + */ constructor() { } diff --git a/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.ts b/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.ts index 3b886572..f05d08d6 100644 --- a/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.ts +++ b/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-carded-fullwidth-2', + selector : 'carded-fullwidth-2', templateUrl: './fullwidth-2.component.html', styleUrls : ['./fullwidth-2.component.scss'] }) -export class FuseCardedFullWidth2Component +export class CardedFullWidth2Component { + /** + * Constructor + */ constructor() { } diff --git a/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.ts b/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.ts index b6862012..7128f849 100644 --- a/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.ts +++ b/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-carded-fullwidth', + selector : 'carded-fullwidth', templateUrl: './fullwidth.component.html', styleUrls : ['./fullwidth.component.scss'] }) -export class FuseCardedFullWidthComponent +export class CardedFullWidthComponent { + /** + * Constructor + */ constructor() { } diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.ts b/src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.ts index 8c03df33..e715bb04 100644 --- a/src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.ts +++ b/src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-carded-left-sidenav-2-tabbed', + selector : 'carded-left-sidenav-2-tabbed', templateUrl: './left-sidenav-2-tabbed.component.html', styleUrls : ['./left-sidenav-2-tabbed.component.scss'] }) -export class FuseCardedLeftSidenav2TabbedComponent +export class CardedLeftSidenav2TabbedComponent { + /** + * Constructor + */ constructor() { } diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.ts b/src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.ts index 2e51b725..6ef5d61a 100644 --- a/src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.ts +++ b/src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-carded-left-sidenav-2', + selector : 'carded-left-sidenav-2', templateUrl: './left-sidenav-2.component.html', styleUrls : ['./left-sidenav-2.component.scss'] }) -export class FuseCardedLeftSidenav2Component +export class CardedLeftSidenav2Component { + /** + * Constructor + */ constructor() { } diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.ts b/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.ts index 0a44a54a..e1cc2130 100644 --- a/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.ts +++ b/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-carded-left-sidenav-tabbed', + selector : 'carded-left-sidenav-tabbed', templateUrl: './left-sidenav-tabbed.component.html', styleUrls : ['./left-sidenav-tabbed.component.scss'] }) -export class FuseCardedLeftSidenavTabbedComponent +export class CardedLeftSidenavTabbedComponent { + /** + * Constructor + */ constructor() { } diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.ts b/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.ts index f92c2514..babe06ef 100644 --- a/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.ts +++ b/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-carded-left-sidenav', + selector : 'carded-left-sidenav', templateUrl: './left-sidenav.component.html', styleUrls : ['./left-sidenav.component.scss'] }) -export class FuseCardedLeftSidenavComponent +export class CardedLeftSidenavComponent { + /** + * Constructor + */ constructor() { } diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.ts b/src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.ts index ceaec07f..83585df2 100644 --- a/src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.ts +++ b/src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-carded-right-sidenav-2-tabbed', + selector : 'carded-right-sidenav-2-tabbed', templateUrl: './right-sidenav-2-tabbed.component.html', styleUrls : ['./right-sidenav-2-tabbed.component.scss'] }) -export class FuseCardedRightSidenav2TabbedComponent +export class CardedRightSidenav2TabbedComponent { + /** + * Constructor + */ constructor() { } diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.ts b/src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.ts index 001d16f1..8b1c9d9c 100644 --- a/src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.ts +++ b/src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-carded-right-sidenav-2', + selector : 'carded-right-sidenav-2', templateUrl: './right-sidenav-2.component.html', styleUrls : ['./right-sidenav-2.component.scss'] }) -export class FuseCardedRightSidenav2Component +export class CardedRightSidenav2Component { + /** + * Constructor + */ constructor() { } diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.ts b/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.ts index 371cb1ef..2e5dedfe 100644 --- a/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.ts +++ b/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-carded-right-sidenav-tabbed', + selector : 'carded-right-sidenav-tabbed', templateUrl: './right-sidenav-tabbed.component.html', styleUrls : ['./right-sidenav-tabbed.component.scss'] }) -export class FuseCardedRightSidenavTabbedComponent +export class CardedRightSidenavTabbedComponent { + /** + * Constructor + */ constructor() { } diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.ts b/src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.ts index abe45083..7ea8b054 100644 --- a/src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.ts +++ b/src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-carded-right-sidenav', + selector : 'carded-right-sidenav', templateUrl: './right-sidenav.component.html', styleUrls : ['./right-sidenav.component.scss'] }) -export class FuseCardedRightSidenavComponent +export class CardedRightSidenavComponent { + /** + * Constructor + */ constructor() { } diff --git a/src/app/main/ui/page-layouts/page-layouts.module.ts b/src/app/main/ui/page-layouts/page-layouts.module.ts index f300822f..45041b57 100644 --- a/src/app/main/ui/page-layouts/page-layouts.module.ts +++ b/src/app/main/ui/page-layouts/page-layouts.module.ts @@ -1,131 +1,130 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; - import { MatButtonModule, MatIconModule, MatSidenavModule, MatTabsModule } from '@angular/material'; import { FuseSharedModule } from '@fuse/shared.module'; import { FuseDemoModule } from '@fuse/components/demo/demo.module'; -import { FuseCardedFullWidthComponent } from './carded/fullwidth/fullwidth.component'; -import { FuseCardedFullWidth2Component } from './carded/fullwidth-2/fullwidth-2.component'; -import { FuseCardedLeftSidenavComponent } from './carded/left-sidenav/left-sidenav.component'; -import { FuseCardedLeftSidenavTabbedComponent } from './carded/left-sidenav-tabbed/left-sidenav-tabbed.component'; -import { FuseCardedLeftSidenav2Component } from './carded/left-sidenav-2/left-sidenav-2.component'; -import { FuseCardedLeftSidenav2TabbedComponent } from './carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component'; -import { FuseCardedRightSidenavComponent } from './carded/right-sidenav/right-sidenav.component'; -import { FuseCardedRightSidenavTabbedComponent } from './carded/right-sidenav-tabbed/right-sidenav-tabbed.component'; -import { FuseCardedRightSidenav2Component } from './carded/right-sidenav-2/right-sidenav-2.component'; -import { FuseCardedRightSidenav2TabbedComponent } from './carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component'; -import { FuseSimpleFullWidthComponent } from './simple/fullwidth/fullwidth.component'; -import { FuseSimpleLeftSidenavComponent } from './simple/left-sidenav/left-sidenav.component'; -import { FuseSimpleLeftSidenav2Component } from './simple/left-sidenav-2/left-sidenav-2.component'; -import { FuseSimpleLeftSidenav3Component } from './simple/left-sidenav-3/left-sidenav-3.component'; -import { FuseSimpleRightSidenavComponent } from './simple/right-sidenav/right-sidenav.component'; -import { FuseSimpleRightSidenav2Component } from './simple/right-sidenav-2/right-sidenav-2.component'; -import { FuseSimpleRightSidenav3Component } from './simple/right-sidenav-3/right-sidenav-3.component'; -import { FuseTabbedComponent } from './simple/tabbed/tabbed.component'; -import { FuseBlankComponent } from './blank/blank.component'; +import { CardedFullWidthComponent } from 'app/main/ui/page-layouts/carded/fullwidth/fullwidth.component'; +import { CardedFullWidth2Component } from 'app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component'; +import { CardedLeftSidenavComponent } from 'app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component'; +import { CardedLeftSidenavTabbedComponent } from 'app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component'; +import { CardedLeftSidenav2Component } from 'app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component'; +import { CardedLeftSidenav2TabbedComponent } from 'app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component'; +import { CardedRightSidenavComponent } from 'app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component'; +import { CardedRightSidenavTabbedComponent } from 'app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component'; +import { CardedRightSidenav2Component } from 'app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component'; +import { CardedRightSidenav2TabbedComponent } from 'app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component'; +import { SimpleFullWidthComponent } from 'app/main/ui/page-layouts/simple/fullwidth/fullwidth.component'; +import { SimpleLeftSidenavComponent } from 'app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component'; +import { SimpleLeftSidenav2Component } from 'app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component'; +import { SimpleLeftSidenav3Component } from 'app/main/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component'; +import { SimpleRightSidenavComponent } from 'app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component'; +import { SimpleRightSidenav2Component } from 'app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component'; +import { SimpleRightSidenav3Component } from 'app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component'; +import { TabbedComponent } from 'app/main/ui/page-layouts/simple/tabbed/tabbed.component'; +import { BlankComponent } from 'app/main/ui/page-layouts/blank/blank.component'; const routes: Routes = [ { path : 'page-layouts/carded/full-width', - component: FuseCardedFullWidthComponent + component: CardedFullWidthComponent }, { path : 'page-layouts/carded/full-width-2', - component: FuseCardedFullWidth2Component + component: CardedFullWidth2Component }, { path : 'page-layouts/carded/left-sidenav', - component: FuseCardedLeftSidenavComponent + component: CardedLeftSidenavComponent }, { path : 'page-layouts/carded/left-sidenav-tabbed', - component: FuseCardedLeftSidenavTabbedComponent + component: CardedLeftSidenavTabbedComponent }, { path : 'page-layouts/carded/left-sidenav-2', - component: FuseCardedLeftSidenav2Component + component: CardedLeftSidenav2Component }, { path : 'page-layouts/carded/left-sidenav-2-tabbed', - component: FuseCardedLeftSidenav2TabbedComponent + component: CardedLeftSidenav2TabbedComponent }, { path : 'page-layouts/carded/right-sidenav', - component: FuseCardedRightSidenavComponent + component: CardedRightSidenavComponent }, { path : 'page-layouts/carded/right-sidenav-tabbed', - component: FuseCardedRightSidenavTabbedComponent + component: CardedRightSidenavTabbedComponent }, { path : 'page-layouts/carded/right-sidenav-2', - component: FuseCardedRightSidenav2Component + component: CardedRightSidenav2Component }, { path : 'page-layouts/carded/right-sidenav-2-tabbed', - component: FuseCardedRightSidenav2TabbedComponent + component: CardedRightSidenav2TabbedComponent }, { path : 'page-layouts/simple/full-width', - component: FuseSimpleFullWidthComponent + component: SimpleFullWidthComponent }, { path : 'page-layouts/simple/left-sidenav', - component: FuseSimpleLeftSidenavComponent + component: SimpleLeftSidenavComponent }, { path : 'page-layouts/simple/left-sidenav-2', - component: FuseSimpleLeftSidenav2Component + component: SimpleLeftSidenav2Component }, { path : 'page-layouts/simple/left-sidenav-3', - component: FuseSimpleLeftSidenav3Component + component: SimpleLeftSidenav3Component }, { path : 'page-layouts/simple/right-sidenav', - component: FuseSimpleRightSidenavComponent + component: SimpleRightSidenavComponent }, { path : 'page-layouts/simple/right-sidenav-2', - component: FuseSimpleRightSidenav2Component + component: SimpleRightSidenav2Component }, { path : 'page-layouts/simple/right-sidenav-3', - component: FuseSimpleRightSidenav3Component + component: SimpleRightSidenav3Component }, { path : 'page-layouts/simple/tabbed', - component: FuseTabbedComponent + component: TabbedComponent }, { path : 'page-layouts/blank', - component: FuseBlankComponent + component: BlankComponent } ]; @NgModule({ declarations: [ - FuseCardedFullWidthComponent, - FuseCardedFullWidth2Component, - FuseCardedLeftSidenavComponent, - FuseCardedLeftSidenavTabbedComponent, - FuseCardedLeftSidenav2Component, - FuseCardedLeftSidenav2TabbedComponent, - FuseCardedRightSidenavComponent, - FuseCardedRightSidenavTabbedComponent, - FuseCardedRightSidenav2Component, - FuseCardedRightSidenav2TabbedComponent, - FuseSimpleFullWidthComponent, - FuseSimpleLeftSidenavComponent, - FuseSimpleLeftSidenav2Component, - FuseSimpleLeftSidenav3Component, - FuseSimpleRightSidenavComponent, - FuseSimpleRightSidenav2Component, - FuseSimpleRightSidenav3Component, - FuseTabbedComponent, - FuseBlankComponent + CardedFullWidthComponent, + CardedFullWidth2Component, + CardedLeftSidenavComponent, + CardedLeftSidenavTabbedComponent, + CardedLeftSidenav2Component, + CardedLeftSidenav2TabbedComponent, + CardedRightSidenavComponent, + CardedRightSidenavTabbedComponent, + CardedRightSidenav2Component, + CardedRightSidenav2TabbedComponent, + SimpleFullWidthComponent, + SimpleLeftSidenavComponent, + SimpleLeftSidenav2Component, + SimpleLeftSidenav3Component, + SimpleRightSidenavComponent, + SimpleRightSidenav2Component, + SimpleRightSidenav3Component, + TabbedComponent, + BlankComponent ], imports : [ RouterModule.forChild(routes), diff --git a/src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.ts b/src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.ts index 074ad5d1..d0c7414d 100644 --- a/src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.ts +++ b/src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-simple-fullwidth', + selector : 'simple-fullwidth', templateUrl: './fullwidth.component.html', styleUrls : ['./fullwidth.component.scss'] }) -export class FuseSimpleFullWidthComponent +export class SimpleFullWidthComponent { + /** + * Constructor + */ constructor() { } diff --git a/src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.ts b/src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.ts index d6805429..3d1b0aa2 100644 --- a/src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.ts +++ b/src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-simple-left-sidenav-2', + selector : 'simple-left-sidenav-2', templateUrl: './left-sidenav-2.component.html', styleUrls : ['./left-sidenav-2.component.scss'] }) -export class FuseSimpleLeftSidenav2Component +export class SimpleLeftSidenav2Component { + /** + * Constructor + */ constructor() { } diff --git a/src/app/main/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.ts b/src/app/main/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.ts index 2a86f582..ad6b586f 100644 --- a/src/app/main/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.ts +++ b/src/app/main/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-simple-left-sidenav-3', + selector : 'simple-left-sidenav-3', templateUrl: './left-sidenav-3.component.html', styleUrls : ['./left-sidenav-3.component.scss'] }) -export class FuseSimpleLeftSidenav3Component +export class SimpleLeftSidenav3Component { + /** + * Constructor + */ constructor() { } diff --git a/src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.ts b/src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.ts index 9d07e40b..682b638a 100644 --- a/src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.ts +++ b/src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-simple-left-sidenav', + selector : 'simple-left-sidenav', templateUrl: './left-sidenav.component.html', styleUrls : ['./left-sidenav.component.scss'] }) -export class FuseSimpleLeftSidenavComponent +export class SimpleLeftSidenavComponent { + /** + * Constructor + */ constructor() { } diff --git a/src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.ts b/src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.ts index 7f32155d..bd43f140 100644 --- a/src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.ts +++ b/src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-simple-right-sidenav-2', + selector : 'simple-right-sidenav-2', templateUrl: './right-sidenav-2.component.html', styleUrls : ['./right-sidenav-2.component.scss'] }) -export class FuseSimpleRightSidenav2Component +export class SimpleRightSidenav2Component { + /** + * Constructor + */ constructor() { } diff --git a/src/app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.ts b/src/app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.ts index bb2b476e..446da2de 100644 --- a/src/app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.ts +++ b/src/app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-simple-right-sidenav-3', + selector : 'simple-right-sidenav-3', templateUrl: './right-sidenav-3.component.html', styleUrls : ['./right-sidenav-3.component.scss'] }) -export class FuseSimpleRightSidenav3Component +export class SimpleRightSidenav3Component { + /** + * Constructor + */ constructor() { } diff --git a/src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.ts b/src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.ts index 186cfa71..bd3ab81d 100644 --- a/src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.ts +++ b/src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-simple-right-sidenav', + selector : 'simple-right-sidenav', templateUrl: './right-sidenav.component.html', styleUrls : ['./right-sidenav.component.scss'] }) -export class FuseSimpleRightSidenavComponent +export class SimpleRightSidenavComponent { + /** + * Constructor + */ constructor() { } diff --git a/src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.ts b/src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.ts index 70e6cdf1..6e01380f 100644 --- a/src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.ts +++ b/src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-tabbed', + selector : 'tabbed', templateUrl: './tabbed.component.html', styleUrls : ['./tabbed.component.scss'] }) -export class FuseTabbedComponent +export class TabbedComponent { + /** + * Constructor + */ constructor() { } diff --git a/src/app/main/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.ts b/src/app/main/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.ts index 5ed7aa4d..c3954e51 100644 --- a/src/app/main/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.ts +++ b/src/app/main/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.ts @@ -1,13 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-typography-blockquotes-lists', + selector : 'typography-blockquotes-lists', templateUrl: './blockquotes-lists.component.html', styleUrls : ['./blockquotes-lists.component.scss'] }) -export class FuseTypographyBlockquotesListsComponent +export class TypographyBlockquotesListsComponent { - + /** + * Constructor + */ constructor() { diff --git a/src/app/main/ui/typography/tabs/headings/headings.component.ts b/src/app/main/ui/typography/tabs/headings/headings.component.ts index eaee877b..c4cac991 100644 --- a/src/app/main/ui/typography/tabs/headings/headings.component.ts +++ b/src/app/main/ui/typography/tabs/headings/headings.component.ts @@ -1,13 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-typography-headings', + selector : 'typography-headings', templateUrl: './headings.component.html', styleUrls : ['./headings.component.scss'] }) -export class FuseTypographyHeadingsComponent +export class TypographyHeadingsComponent { - + /** + * Constructor + */ constructor() { diff --git a/src/app/main/ui/typography/tabs/helpers/helpers.component.ts b/src/app/main/ui/typography/tabs/helpers/helpers.component.ts index 77a27901..b2867300 100644 --- a/src/app/main/ui/typography/tabs/helpers/helpers.component.ts +++ b/src/app/main/ui/typography/tabs/helpers/helpers.component.ts @@ -1,13 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-typography-helpers', + selector : 'typography-helpers', templateUrl: './helpers.component.html', styleUrls : ['./helpers.component.scss'] }) -export class FuseTypographyHelpersComponent +export class TypographyHelpersComponent { - + /** + * Constructor + */ constructor() { diff --git a/src/app/main/ui/typography/tabs/inline-text-elements/inline-text-elements.component.ts b/src/app/main/ui/typography/tabs/inline-text-elements/inline-text-elements.component.ts index 47e078e9..f5aa289c 100644 --- a/src/app/main/ui/typography/tabs/inline-text-elements/inline-text-elements.component.ts +++ b/src/app/main/ui/typography/tabs/inline-text-elements/inline-text-elements.component.ts @@ -1,13 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-typography-inline-text-elements', + selector : 'typography-inline-text-elements', templateUrl: './inline-text-elements.component.html', styleUrls : ['./inline-text-elements.component.scss'] }) -export class FuseTypographyInlineTextElementsComponent +export class TypographyInlineTextElementsComponent { - + /** + * Constructor + */ constructor() { diff --git a/src/app/main/ui/typography/typography.component.html b/src/app/main/ui/typography/typography.component.html index d20c1f29..7762f434 100644 --- a/src/app/main/ui/typography/typography.component.html +++ b/src/app/main/ui/typography/typography.component.html @@ -20,25 +20,25 @@ - + - + - + - + diff --git a/src/app/main/ui/typography/typography.component.ts b/src/app/main/ui/typography/typography.component.ts index 44e979b7..6c1de786 100644 --- a/src/app/main/ui/typography/typography.component.ts +++ b/src/app/main/ui/typography/typography.component.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; @Component({ - selector : 'fuse-typography', + selector : 'typography', templateUrl: './typography.component.html', styleUrls : ['./typography.component.scss'] }) -export class FuseTypographyComponent +export class TypographyComponent { + /** + * Constructor + */ constructor() { } diff --git a/src/app/main/ui/typography/typography.module.ts b/src/app/main/ui/typography/typography.module.ts index bf4e2321..34ba3129 100644 --- a/src/app/main/ui/typography/typography.module.ts +++ b/src/app/main/ui/typography/typography.module.ts @@ -1,31 +1,30 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; - import { MatIconModule, MatTabsModule } from '@angular/material'; import { FuseSharedModule } from '@fuse/shared.module'; import { FuseHighlightModule } from '@fuse/components'; -import { FuseTypographyComponent } from './typography.component'; -import { FuseTypographyHeadingsComponent } from './tabs/headings/headings.component'; -import { FuseTypographyInlineTextElementsComponent } from './tabs/inline-text-elements/inline-text-elements.component'; -import { FuseTypographyBlockquotesListsComponent } from './tabs/blockquotes-lists/blockquotes-lists.component'; -import { FuseTypographyHelpersComponent } from './tabs/helpers/helpers.component'; +import { TypographyComponent } from 'app/main/ui/typography/typography.component'; +import { TypographyHeadingsComponent } from 'app/main/ui/typography/tabs/headings/headings.component'; +import { TypographyInlineTextElementsComponent } from 'app/main/ui/typography/tabs/inline-text-elements/inline-text-elements.component'; +import { TypographyBlockquotesListsComponent } from 'app/main/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component'; +import { TypographyHelpersComponent } from 'app/main/ui/typography/tabs/helpers/helpers.component'; const routes: Routes = [ { path : 'typography', - component: FuseTypographyComponent + component: TypographyComponent } ]; @NgModule({ declarations: [ - FuseTypographyComponent, - FuseTypographyHeadingsComponent, - FuseTypographyInlineTextElementsComponent, - FuseTypographyBlockquotesListsComponent, - FuseTypographyHelpersComponent + TypographyComponent, + TypographyHeadingsComponent, + TypographyInlineTextElementsComponent, + TypographyBlockquotesListsComponent, + TypographyHelpersComponent ], imports : [ RouterModule.forChild(routes), diff --git a/src/app/main/ui/ui.module.ts b/src/app/main/ui/ui.module.ts index f6798a1c..1d594101 100644 --- a/src/app/main/ui/ui.module.ts +++ b/src/app/main/ui/ui.module.ts @@ -17,6 +17,6 @@ import { UIColorsModule } from 'app/main/ui/colors/colors.module'; UIColorsModule ] }) -export class FuseUIModule +export class UIModule { } diff --git a/src/index.html b/src/index.html index 865a7105..cbb463c6 100644 --- a/src/index.html +++ b/src/index.html @@ -213,7 +213,7 @@ - + From 5d000a849dfe39f8535c8a5d5a82921dd5abfcbd Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Sun, 27 May 2018 16:54:20 +0300 Subject: [PATCH 06/75] Updated couple packages --- package-lock.json | 188 +++++++++++++++++++++++----------------------- package.json | 26 +++---- 2 files changed, 107 insertions(+), 107 deletions(-) diff --git a/package-lock.json b/package-lock.json index 25c63050..e7f6bd3a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,30 +5,30 @@ "requires": true, "dependencies": { "@agm/core": { - "version": "1.0.0-beta.2", - "resolved": "https://registry.npmjs.org/@agm/core/-/core-1.0.0-beta.2.tgz", - "integrity": "sha512-3bdfvkWDmJszpj/F6Fzgv7sks0cs/cUEQPfs37tcJFz3jc62SsXy4TGb/WJT8FpH2nSGE6DonP8lXuFxB0lblQ==" + "version": "1.0.0-beta.3", + "resolved": "https://registry.npmjs.org/@agm/core/-/core-1.0.0-beta.3.tgz", + "integrity": "sha512-nsyergarmMB4JCw7KGujj86ulgRYhEk8zXKRiJZdnju/irLvazQ/9Anlfsf1Rc5yph8sZrmQDwqLGZ6AqHhnzA==" }, "@angular-devkit/architect": { - "version": "0.6.3", - "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.6.3.tgz", - "integrity": "sha512-w9tK3VACU+CnOQQZT6o7QO2brn/OVNDf2Y11rI+ZQH7UIn6N0ZFoMl9WyFB//K2Gkoa7hAobykhRTtP8lrTF1g==", + "version": "0.6.5", + "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.6.5.tgz", + "integrity": "sha512-HlCCnpg301XGbNAycPCadZlSVCOHlFtw2qz2zzNBIWW2Cbi9q3eazWCg/OeD237qgJ8hxvGSkOi7vWG2AoYkIg==", "dev": true, "requires": { - "@angular-devkit/core": "0.6.3", + "@angular-devkit/core": "0.6.5", "rxjs": "^6.0.0" } }, "@angular-devkit/build-angular": { - "version": "0.6.3", - "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-0.6.3.tgz", - "integrity": "sha512-ce+uAXQXyuMy6IxSnsGKeHlLVjsI77DblNvkcO1NilP7iYxujEJx6qDq/Hrf1uhuqRpm+8pt5zY6QD90gQrDcg==", + "version": "0.6.5", + "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-0.6.5.tgz", + "integrity": "sha512-+ikh/nntfIgpIV5meunbWKdQQ0nlx/hR94UDo0YwpZjJPScEBrd3i3nhoAw6iTK1PfoGwYXSzZTnTJyQAGMUAg==", "dev": true, "requires": { - "@angular-devkit/architect": "0.6.3", - "@angular-devkit/build-optimizer": "0.6.3", - "@angular-devkit/core": "0.6.3", - "@ngtools/webpack": "6.0.3", + "@angular-devkit/architect": "0.6.5", + "@angular-devkit/build-optimizer": "0.6.5", + "@angular-devkit/core": "0.6.5", + "@ngtools/webpack": "6.0.5", "ajv": "~6.4.0", "autoprefixer": "^8.4.1", "cache-loader": "^1.2.2", @@ -79,9 +79,9 @@ } }, "@angular-devkit/build-optimizer": { - "version": "0.6.3", - "resolved": "https://registry.npmjs.org/@angular-devkit/build-optimizer/-/build-optimizer-0.6.3.tgz", - "integrity": "sha512-C0LGWh7+rYjpE1T1guaq9EMovwhEJ1QR25qjJxUoYvN+sM+MfVpMhoa6ruqnxh+eQCfRiMdIsnbOboiZxNHTQw==", + "version": "0.6.5", + "resolved": "https://registry.npmjs.org/@angular-devkit/build-optimizer/-/build-optimizer-0.6.5.tgz", + "integrity": "sha512-GXV3XLHvzmXwBRcpaXKiMrAFq0t8VTq9GwsQk9W1diUstlNCnuNSmwj1fpJxR23pPsH+5mvrrfWYdoXt8TWzHw==", "dev": true, "requires": { "loader-utils": "^1.1.0", @@ -91,9 +91,9 @@ } }, "@angular-devkit/core": { - "version": "0.6.3", - "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.6.3.tgz", - "integrity": "sha512-97hFVW6in8oYJUEqjmUP0Tb/mPlTG3sc0THpe5MCGEkDPjlp2cObt9rUCAVOjugBlScV8rzTpVQ+95PT60Py8A==", + "version": "0.6.5", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.6.5.tgz", + "integrity": "sha512-DpowzV6ObjVJb6ccElAD5rlqL9BN32ZGspg14YVyXf9mlmcNw3gm+P9BGIhuwJ8rt9fqmse87W59/Z2MLUTVkQ==", "dev": true, "requires": { "ajv": "~6.4.0", @@ -103,12 +103,12 @@ } }, "@angular-devkit/schematics": { - "version": "0.6.3", - "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-0.6.3.tgz", - "integrity": "sha512-dXlyVNuFRhiOnhAk0NojEUThLrZBpVZmWvEQ4h/pnyHS0P9CfnHqJ8DCcCrjOwYkzdBwBrYchXOCYfo8zuxYGw==", + "version": "0.6.5", + "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-0.6.5.tgz", + "integrity": "sha512-clyw0IBe0i257r35E/BHIYdwERwOwYwLD/PXMCb3bd1thD75S4sxHmLV5NHnn2S32y+mqm12/Q7006XUD/yi1g==", "dev": true, "requires": { - "@angular-devkit/core": "0.6.3", + "@angular-devkit/core": "0.6.5", "rxjs": "^6.0.0" } }, @@ -129,16 +129,16 @@ } }, "@angular/cli": { - "version": "6.0.3", - "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-6.0.3.tgz", - "integrity": "sha512-G8jfgJublsRjveX1P+F5awHvpC07mKAF7f5lebowIs+QAHSOD6HxQ/JhMbJTwz/aj20iWgZOygA5LhkP0Wr+UQ==", + "version": "6.0.5", + "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-6.0.5.tgz", + "integrity": "sha512-aJXdLe8IELMtAhrEm9bU5bIKXr7E6LkNQXZfdpFuoTnh8S8EYRHD/QO6RhS/IpuRWMnLN2C7hsgRIQr1uBzNlg==", "dev": true, "requires": { - "@angular-devkit/architect": "0.6.3", - "@angular-devkit/core": "0.6.3", - "@angular-devkit/schematics": "0.6.3", - "@schematics/angular": "0.6.3", - "@schematics/update": "0.6.3", + "@angular-devkit/architect": "0.6.5", + "@angular-devkit/core": "0.6.5", + "@angular-devkit/schematics": "0.6.5", + "@schematics/angular": "0.6.5", + "@schematics/update": "0.6.5", "opn": "~5.3.0", "resolve": "^1.1.7", "rxjs": "^6.0.0", @@ -411,32 +411,32 @@ "dev": true }, "@ngrx/effects": { - "version": "6.0.0-beta.3", - "resolved": "https://registry.npmjs.org/@ngrx/effects/-/effects-6.0.0-beta.3.tgz", - "integrity": "sha512-THTjnYUKFxPJCtxaKZepTnwGm0Zn5826qbNIpcTITjfIDXstOufAtb5CGH07zXrfJ8Ipdir/7bPE46kAdU4lkg==" + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/@ngrx/effects/-/effects-6.0.1.tgz", + "integrity": "sha512-YS68D7E1qKbbOIzV6Iyfv6BY3CrTNi8nBgGJ6whTi6f7Y0apXySvNj9aOQyzuJsePWziu6h0uJhy2ZFT/iELyg==" }, "@ngrx/router-store": { - "version": "6.0.0-beta.3", - "resolved": "https://registry.npmjs.org/@ngrx/router-store/-/router-store-6.0.0-beta.3.tgz", - "integrity": "sha512-x5Z9G0H/3HTh+1UDceflGhk/2gfzbDTyOg6yhrzxAp9daD7wUPr21Jk+ecw3NqKMvqn3SDQIkWjwPdO756xrYw==" + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/@ngrx/router-store/-/router-store-6.0.1.tgz", + "integrity": "sha512-Nz6HI6cGcWZtRP8Z1eWH0jhkmukQYSpH5AptCcXMjOP2MorHv23Ddw1O+0W6hF8SYX1JvGdaQ2BUJS00MaKfKw==" }, "@ngrx/store": { - "version": "6.0.0-beta.3", - "resolved": "https://registry.npmjs.org/@ngrx/store/-/store-6.0.0-beta.3.tgz", - "integrity": "sha512-LOQdv2bt3KsFHEYBcNZdVoRZGSBlHBF9C51siPABSWfAenwrNiOz9Ga/qe4hl3cfM3UoCNIYtdsbZ2N/ZCY5RQ==" + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/@ngrx/store/-/store-6.0.1.tgz", + "integrity": "sha512-cSgfT8CgpOr6BOQac9M3DH6QQC5gxCVjdEcZH//Zn/kwdse86X73iK7KWv6B6AiIEdyVbFfggXNZwd/HiyLGOA==" }, "@ngrx/store-devtools": { - "version": "6.0.0-beta.3", - "resolved": "https://registry.npmjs.org/@ngrx/store-devtools/-/store-devtools-6.0.0-beta.3.tgz", - "integrity": "sha512-KwmMELWY+WA1fL/myhQGiqM1uvRIjQ7yUaViVwknhRf7UsBPlWTMrSiFqUIb3QkwGYnVdqRjdYVQrJTIdJpolQ==" + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/@ngrx/store-devtools/-/store-devtools-6.0.1.tgz", + "integrity": "sha512-eZyguQvIltJuhCVgPPR1IyMAztykRuvGalwCH1G2ODWKGZPNrWlJbxVMqzUeSJTBS268RIFIkMTwEDKi/xCQoQ==" }, "@ngtools/webpack": { - "version": "6.0.3", - "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-6.0.3.tgz", - "integrity": "sha512-wrhSFItcZp4Yzp6lgSuy23YdhaUs9D+KdGZPjwzzXtJIJCSzGkWuXzwlCwyKSFRQ6thyH/T3nffpHNaS3dWn2A==", + "version": "6.0.5", + "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-6.0.5.tgz", + "integrity": "sha512-bJwsBW9X9mX8nk8JJDyNZuglL8Ym/RQVM1kmLvUztgQSAMnBo046zDWEkjamXxxiTvznwHpwQTVgUzEEVdAQjg==", "dev": true, "requires": { - "@angular-devkit/core": "0.6.3", + "@angular-devkit/core": "0.6.5", "tree-kill": "^1.0.0", "webpack-sources": "^1.1.0" } @@ -450,24 +450,24 @@ } }, "@schematics/angular": { - "version": "0.6.3", - "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-0.6.3.tgz", - "integrity": "sha512-YhldE1K6x/8D0PxFusjtB32iOAayyD1PSxPCx/q7I7T6x/lG7l35ZDV6ZZE6bDvIaxQBsjhIm8ACy2n+xwFxTA==", + "version": "0.6.5", + "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-0.6.5.tgz", + "integrity": "sha512-oB9j+IqVtoSn3kEV6mnBslG8pxaOlUW2Kw7aCVf9DzEqTZEH5awKuPuhRkAVyiXdwHPDn21xoUGVRLy4y/BafA==", "dev": true, "requires": { - "@angular-devkit/core": "0.6.3", - "@angular-devkit/schematics": "0.6.3", + "@angular-devkit/core": "0.6.5", + "@angular-devkit/schematics": "0.6.5", "typescript": ">=2.6.2 <2.8" } }, "@schematics/update": { - "version": "0.6.3", - "resolved": "https://registry.npmjs.org/@schematics/update/-/update-0.6.3.tgz", - "integrity": "sha512-UsKrg02+jwdsz9BdMVxDMeAZCF+c+dvHRWww4D2RcNzWdCTVWeBqRAmlreJJ0TGE54r7PEBnmQe0t5mS4F3d4w==", + "version": "0.6.5", + "resolved": "https://registry.npmjs.org/@schematics/update/-/update-0.6.5.tgz", + "integrity": "sha512-Gpp3d7KPmheM61WLJ4YEse4YpR5l0PZm/pR1cy8LfA+s6y3SiX/uHy9rtrmLMa4mUZeNwu2M8j8Eu5aPgtsCWw==", "dev": true, "requires": { - "@angular-devkit/core": "0.6.3", - "@angular-devkit/schematics": "0.6.3", + "@angular-devkit/core": "0.6.5", + "@angular-devkit/schematics": "0.6.5", "npm-registry-client": "^8.5.1", "rxjs": "^6.0.0", "semver": "^5.3.0", @@ -484,9 +484,9 @@ } }, "@swimlane/ngx-charts": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/@swimlane/ngx-charts/-/ngx-charts-8.0.1.tgz", - "integrity": "sha512-YiCKol5JiOZ8o6IuQxJ9FRlbjkeKVrdLc8QEQqYANpXbV72H9n59qNeZBwLsEvxl3bkmXDWY0G4xW00NnWCN8w==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/@swimlane/ngx-charts/-/ngx-charts-8.0.2.tgz", + "integrity": "sha512-6n5YzsmDrS6d2Aqdo/5ZJ068P8ENBGKyYDq11Be6Ned/TQg1yE5YhoDICmZEKbbKs4fmRZf2ipVFsclCkRWrIg==", "requires": { "d3-array": "^1.2.1", "d3-brush": "^1.0.4", @@ -507,9 +507,9 @@ "integrity": "sha512-77iNYReNBsPg/cbXxSaOP6JkG3hcuETn/pW/Gy62PlMxH9Oxgs+Gv3oSUQ5nVY3ePBP44JyidG/iP1CMaICGOA==" }, "@swimlane/ngx-dnd": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/@swimlane/ngx-dnd/-/ngx-dnd-4.0.1.tgz", - "integrity": "sha512-Ya2zKD3p/XSMLOctnFIXD3Gg+M2lF90ocxnD6ibNcUeKKKpuWkG3ThzcwXuUpTyW6k45VwmeWHDWlgn8qp40Qw==", + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/@swimlane/ngx-dnd/-/ngx-dnd-4.0.2.tgz", + "integrity": "sha512-bjujqo1mfztxBefu9pDD6o2Ut11b8PLnmaHpOB3RkyIsrfYnmMhfwOUNdx0nuhUH7PI2qIK5JK+HXxSL8eKgGA==", "requires": { "@swimlane/dragula": "^3.7.3", "@types/dragula": "^2.1.33" @@ -973,9 +973,9 @@ "dev": true }, "are-we-there-yet": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz", - "integrity": "sha1-u13KOCu5TwXhUZQ3PRb9O6HKEQ0=", + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz", + "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==", "dev": true, "requires": { "delegates": "^1.0.0", @@ -1158,13 +1158,13 @@ "dev": true }, "autoprefixer": { - "version": "8.5.0", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-8.5.0.tgz", - "integrity": "sha512-buY1XxFoBrXvLsoFb0jP+niSu1tCj2RwMwHj96+RfQ8DJTgb0vUhh0dg6wjJT3JzsFYBrkSj8/sGtarNdlxTFw==", + "version": "8.5.1", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-8.5.1.tgz", + "integrity": "sha512-0zXQ6OqbnVaplQKkKTASxHFPMNy6WfrXS5QRDJ4zTDxEBB3r7NPDSK4h9KCyQi1tq0tX5MsN4RdzChVBn2k/aw==", "dev": true, "requires": { - "browserslist": "^3.2.7", - "caniuse-lite": "^1.0.30000839", + "browserslist": "^3.2.8", + "caniuse-lite": "^1.0.30000846", "normalize-range": "^0.1.2", "num2fraction": "^1.2.2", "postcss": "^6.0.22", @@ -1818,9 +1818,9 @@ } }, "caniuse-lite": { - "version": "1.0.30000844", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000844.tgz", - "integrity": "sha512-UpKQE7y6dLHhlv75UyBCRiun34Q+bmxyX3zS+ve9M07YG52tRafOvop9N9d5jC+sikKuG7UMweJKJNts4FVehA==", + "version": "1.0.30000846", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000846.tgz", + "integrity": "sha512-qxUOHr5mTaadWH1ap0ueivHd8x42Bnemcn+JutVr7GWmm2bU4zoBhjuv5QdXgALQnnT626lOQros7cCDf8PwCg==", "dev": true }, "caseless": { @@ -2328,9 +2328,9 @@ } }, "core-js": { - "version": "2.5.6", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.6.tgz", - "integrity": "sha512-lQUVfQi0aLix2xpyjrrJEvfuYCqPc/HwmTKsC/VNf8q0zsjX7SQZtp4+oRONN5Tsur9GDETPjj+Ub2iDiGZfSQ==" + "version": "2.5.7", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.7.tgz", + "integrity": "sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw==" }, "core-util-is": { "version": "1.0.2", @@ -7102,9 +7102,9 @@ } }, "ngx-color-picker": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/ngx-color-picker/-/ngx-color-picker-6.2.0.tgz", - "integrity": "sha512-Rm7rhr9I4LvjbtZLLvWgGlY0yFAcc5VCaGhd9TZr24NFtQhGgxmqmQNr3YD4UEdojSMh2kJm22Flenjb5TYQYw==" + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/ngx-color-picker/-/ngx-color-picker-6.3.2.tgz", + "integrity": "sha512-d44v2a9GrYFiW/pkwr0gFhPL0rUF9N7pDtS8HwZjgmygrw+Zb0IeyHc7ewsl0ewwA3xrPOwmPRs5Z7rSwxcIfQ==" }, "ngx-cookie-service": { "version": "1.0.10", @@ -8404,9 +8404,9 @@ } }, "punycode": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.0.tgz", - "integrity": "sha1-X4Y+3Im5bbCQdLrXlHvwkFbKTn0=", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz", + "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==", "dev": true }, "q": { @@ -8927,9 +8927,9 @@ } }, "rxjs-compat": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/rxjs-compat/-/rxjs-compat-6.1.0.tgz", - "integrity": "sha512-x5L1KQy1RqDRpPadN5iDOx71TV9Wqmlmu6OOEn3tFFgaTCB0/N+Lmby/rZHgJ6JEPzzt0nD9Zv+kS53E5JIR5g==" + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/rxjs-compat/-/rxjs-compat-6.2.0.tgz", + "integrity": "sha512-kFX7NSIgyzqn3+J5F/w75R72wDOICXwArbXyPU1neE4laOEwxkMTm+2oAZXN82yb+yli+j+c5USgbGLfphTCTA==" }, "safe-buffer": { "version": "5.1.2", @@ -10835,9 +10835,9 @@ } }, "webpack-bundle-analyzer": { - "version": "2.11.3", - "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.11.3.tgz", - "integrity": "sha512-MaHZkX9mNGeJLbVT70bNfftSBBdl3w9Q1ThnrH7SESF47SollWm12MwDgjhf8C16R/Ur56PInrLYf0FJIOg24g==", + "version": "2.13.1", + "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.13.1.tgz", + "integrity": "sha512-rwxyfecTAxoarCC9VlHlIpfQCmmJ/qWD5bpbjkof+7HrNhTNZIwZITxN6CdlYL2axGmwNUQ+tFgcSOiNXMf/sQ==", "dev": true, "requires": { "acorn": "^5.3.0", @@ -11174,12 +11174,12 @@ "optional": true }, "wide-align": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.2.tgz", - "integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==", + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz", + "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==", "dev": true, "requires": { - "string-width": "^1.0.2" + "string-width": "^1.0.2 || 2" } }, "window-size": { diff --git a/package.json b/package.json index a0aab823..931d5168 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ }, "private": true, "dependencies": { - "@agm/core": "1.0.0-beta.2", + "@agm/core": "1.0.0-beta.3", "@angular/animations": "6.0.3", "@angular/cdk": "6.1.0", "@angular/common": "6.0.3", @@ -32,40 +32,40 @@ "@angular/platform-browser": "6.0.3", "@angular/platform-browser-dynamic": "6.0.3", "@angular/router": "6.0.3", - "@ngrx/effects": "6.0.0-beta.3", - "@ngrx/router-store": "6.0.0-beta.3", - "@ngrx/store": "6.0.0-beta.3", - "@ngrx/store-devtools": "6.0.0-beta.3", + "@ngrx/effects": "6.0.1", + "@ngrx/router-store": "6.0.1", + "@ngrx/store": "6.0.1", + "@ngrx/store-devtools": "6.0.1", "@ngx-translate/core": "10.0.2", - "@swimlane/ngx-charts": "8.0.1", + "@swimlane/ngx-charts": "8.0.2", "@swimlane/ngx-datatable": "13.0.0", - "@swimlane/ngx-dnd": "4.0.1", + "@swimlane/ngx-dnd": "4.0.2", "@types/prismjs": "1.9.0", "angular-calendar": "0.25.2", "angular-in-memory-web-api": "0.6.0", "chart.js": "2.7.2", "classlist.js": "1.1.20150312", - "core-js": "2.5.6", + "core-js": "2.5.7", "d3": "5.4.0", "hammerjs": "2.0.8", "lodash": "4.17.10", "moment": "2.22.1", "ng2-charts": "1.6.0", "ngrx-store-freeze": "0.2.3", - "ngx-color-picker": "6.2.0", + "ngx-color-picker": "6.3.2", "ngx-cookie-service": "1.0.10", "perfect-scrollbar": "1.3.0", "prismjs": "1.14.0", "rxjs": "6.2.0", - "rxjs-compat": "6.1.0", + "rxjs-compat": "6.2.0", "web-animations-js": "2.3.1", "zone.js": "0.8.26" }, "devDependencies": { - "@angular/cli": "6.0.3", + "@angular/cli": "6.0.5", "@angular/compiler-cli": "6.0.3", "@angular/language-service": "6.0.3", - "@angular-devkit/build-angular": "0.6.3", + "@angular-devkit/build-angular": "0.6.5", "@angularclass/hmr": "2.1.3", "@types/jasmine": "2.8.7", "@types/jasminewd2": "2.0.3", @@ -83,6 +83,6 @@ "ts-node": "5.0.1", "tslint": "5.9.1", "typescript": "2.7.2", - "webpack-bundle-analyzer": "2.11.3" + "webpack-bundle-analyzer": "2.13.1" } } From 27197a55dcdc20072b261dc4f2dde16b84069f9d Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Sun, 27 May 2018 16:55:46 +0300 Subject: [PATCH 07/75] Improving the codebase --- .../directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts | 4 +++- .../fuse-mat-sidenav/fuse-mat-sidenav.directive.ts | 5 ++++- src/@fuse/services/match-media.service.ts | 1 + .../{blocks => components}/content/content.component.html | 0 4 files changed, 8 insertions(+), 2 deletions(-) rename src/app/layout/{blocks => components}/content/content.component.html (100%) diff --git a/src/@fuse/directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts b/src/@fuse/directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts index cfe1cfb3..73b4af5d 100644 --- a/src/@fuse/directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts +++ b/src/@fuse/directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts @@ -5,7 +5,7 @@ import { AfterContentChecked, Directive, ElementRef, TemplateRef, ViewContainerR }) export class FuseIfOnDomDirective implements AfterContentChecked { - isCreated = false; + isCreated: boolean; /** * Constructor @@ -20,6 +20,8 @@ export class FuseIfOnDomDirective implements AfterContentChecked private _viewContainerRef: ViewContainerRef ) { + // Set the defaults + this.isCreated = false; } // ----------------------------------------------------------------------------------------------------- diff --git a/src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.directive.ts b/src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.directive.ts index 52570a7b..7b79144c 100644 --- a/src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.directive.ts +++ b/src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.directive.ts @@ -13,7 +13,7 @@ import { FuseMatSidenavHelperService } from '@fuse/directives/fuse-mat-sidenav/f export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy { @HostBinding('class.mat-is-locked-open') - isLockedOpen = true; + isLockedOpen: boolean; @Input('fuseMatSidenavHelper') id: string; @@ -39,6 +39,9 @@ export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy private _observableMedia: ObservableMedia ) { + // Set the defaults + this.isLockedOpen = true; + // Set the private defaults this._unsubscribeAll = new Subject(); } diff --git a/src/@fuse/services/match-media.service.ts b/src/@fuse/services/match-media.service.ts index 22159936..fdaa1f3c 100644 --- a/src/@fuse/services/match-media.service.ts +++ b/src/@fuse/services/match-media.service.ts @@ -45,4 +45,5 @@ export class FuseMatchMediaService } }); } + } diff --git a/src/app/layout/blocks/content/content.component.html b/src/app/layout/components/content/content.component.html similarity index 100% rename from src/app/layout/blocks/content/content.component.html rename to src/app/layout/components/content/content.component.html From 02f305be1f441bba28302c0b3e4db86854ae5747 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Sun, 27 May 2018 16:56:50 +0300 Subject: [PATCH 08/75] Improved the FusePerfectScrollbar directive, not directives can be controlled individually by adding a boolean value to them --- .../fuse-perfect-scrollbar.directive.ts | 158 ++++++++++++++---- 1 file changed, 121 insertions(+), 37 deletions(-) diff --git a/src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts b/src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts index 9e4a7c9a..135e65c8 100644 --- a/src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts +++ b/src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts @@ -1,4 +1,4 @@ -import { AfterViewInit, Directive, ElementRef, HostListener, OnDestroy, OnInit } from '@angular/core'; +import { AfterViewInit, Directive, ElementRef, HostListener, Input, OnDestroy } from '@angular/core'; import { Platform } from '@angular/cdk/platform'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -10,14 +10,14 @@ import { FuseConfigService } from '@fuse/services/config.service'; @Directive({ selector: '[fusePerfectScrollbar]' }) -export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnDestroy +export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy { - isDisableCustomScrollbars = false; - isMobile = false; - isInitialized = true; + isInitialized: boolean; + isMobile: boolean; ps: PerfectScrollbar; // Private + private _enabled: boolean | ''; private _unsubscribeAll: Subject; /** @@ -33,66 +33,150 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD private _platform: Platform ) { + // Set the defaults + this.isInitialized = false; + this.isMobile = false; + // Set the private defaults + this._enabled = false; this._unsubscribeAll = new Subject(); } + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Is enabled + * + * @param {boolean | ""} value + */ + @Input('fusePerfectScrollbar') + set enabled(value: boolean | '') + { + // If nothing is provided with the directive (empty string), + // we will take that as a true + if ( value === '' ) + { + value = true; + } + + // Return, if both values are the same + if ( this.enabled === value ) + { + return; + } + + // Store the value + this._enabled = value; + + // If enabled... + if ( this.enabled ) + { + // Init the directive + this._init(); + } + else + { + // Otherwise destroy it + this._destroy(); + } + } + + get enabled(): boolean | '' + { + return this._enabled; + } + // ----------------------------------------------------------------------------------------------------- // @ Lifecycle hooks // ----------------------------------------------------------------------------------------------------- - /** - * On init - */ - ngOnInit(): void - { - this._fuseConfigService.config - .pipe(takeUntil(this._unsubscribeAll)) - .subscribe( - (settings) => { - this.isDisableCustomScrollbars = !settings.customScrollbars; - } - ); - - if ( this._platform.ANDROID || this._platform.IOS ) - { - this.isMobile = true; - } - } - /** * After view init */ ngAfterViewInit(): void { - if ( this.isMobile || this.isDisableCustomScrollbars ) - { - this.isInitialized = false; - return; - } + // Check if scrollbars enabled or not from the main config + this._fuseConfigService.config + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe( + (settings) => { + this.enabled = settings.customScrollbars; + } + ); - // Initialize the perfect-scrollbar - this.ps = new PerfectScrollbar(this.elementRef.nativeElement, { - wheelPropagation: true - }); + // this._init(); } /** * On destroy */ ngOnDestroy(): void + { + this._destroy(); + + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Initialize + * + * @private + */ + _init(): void + { + // Return, if already initialized + if ( this.isInitialized ) + { + return; + } + + // Check if is mobile + if ( this._platform.ANDROID || this._platform.IOS ) + { + this.isMobile = true; + } + + // Return if it's mobile + if ( this.isMobile ) + { + // Return... + return; + } + + // Initialize the perfect-scrollbar + this.isInitialized = true; + + this.ps = new PerfectScrollbar(this.elementRef.nativeElement, { + wheelPropagation: true + }); + } + + /** + * Destroy + * + * @private + */ + _destroy(): void { if ( !this.isInitialized || !this.ps ) { return; } - // Unsubscribe from all subscriptions - this._unsubscribeAll.next(); - this._unsubscribeAll.complete(); - // Destroy the perfect-scrollbar this.ps.destroy(); + + // Clean up + this.ps = null; + this.isInitialized = false; } // ----------------------------------------------------------------------------------------------------- From 96351653168c81c97a92e18bf6ba96eab8a4866b Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Sun, 27 May 2018 16:57:54 +0300 Subject: [PATCH 09/75] (Config Service) Added ability to access to the default config and reset to it --- src/@fuse/services/config.service.ts | 29 +++++++++++++++++++++++++--- 1 file changed, 26 insertions(+), 3 deletions(-) diff --git a/src/@fuse/services/config.service.ts b/src/@fuse/services/config.service.ts index 8f07ee15..e753f337 100644 --- a/src/@fuse/services/config.service.ts +++ b/src/@fuse/services/config.service.ts @@ -59,6 +59,16 @@ export class FuseConfigService return this._configSubject.asObservable(); } + /** + * Get default config + * + * @returns {any} + */ + get defaultConfig(): any + { + return this._defaultConfig; + } + // ----------------------------------------------------------------------------------------------------- // @ Private methods // ----------------------------------------------------------------------------------------------------- @@ -78,11 +88,11 @@ export class FuseConfigService this._defaultConfig.customScrollbars = false; } - // Set the settings from the default settings + // Set the config from the default config this._configSubject = new BehaviorSubject(_.cloneDeep(this._defaultConfig)); - // Reload the default settings on every navigation start if - // the current settings are different from defaults + // Reload the default config on every navigation start if + // the current config is different from the default one this._router.events .pipe(filter(event => event instanceof NavigationStart)) .subscribe(() => { @@ -92,5 +102,18 @@ export class FuseConfigService } }); } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Reset to the default config + */ + resetToDefaults(): void + { + // Set the config from the default config + this._configSubject.next(_.cloneDeep(this._defaultConfig)); + } } From 745c51878d16495e3cab43534fd5f826a893141d Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Sun, 27 May 2018 16:58:26 +0300 Subject: [PATCH 10/75] Small color adjustments --- src/@fuse/components/sidebar/sidebar.component.scss | 1 + src/app/main/apps/e-commerce/dashboard/dashboard.component.html | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/@fuse/components/sidebar/sidebar.component.scss b/src/@fuse/components/sidebar/sidebar.component.scss index 1ba10735..25b9b5ef 100644 --- a/src/@fuse/components/sidebar/sidebar.component.scss +++ b/src/@fuse/components/sidebar/sidebar.component.scss @@ -15,6 +15,7 @@ fuse-sidebar { transition-duration: 150ms; transition-timing-function: ease-in-out; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35); + background: white; &.left-aligned { left: 0; diff --git a/src/app/main/apps/e-commerce/dashboard/dashboard.component.html b/src/app/main/apps/e-commerce/dashboard/dashboard.component.html index 49164a6b..6e2054fc 100644 --- a/src/app/main/apps/e-commerce/dashboard/dashboard.component.html +++ b/src/app/main/apps/e-commerce/dashboard/dashboard.component.html @@ -1,4 +1,4 @@ -
+
From c6969cf9dfae38164c435a5cad7914f4f8f5772b Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Mon, 28 May 2018 12:31:54 +0300 Subject: [PATCH 11/75] (Navigation) Improved navigation service for easier navigation management --- .../navigation/navigation.service.ts | 246 +++++++++++++++++- 1 file changed, 239 insertions(+), 7 deletions(-) diff --git a/src/@fuse/components/navigation/navigation.service.ts b/src/@fuse/components/navigation/navigation.service.ts index 677c5ca3..490f895c 100644 --- a/src/@fuse/components/navigation/navigation.service.ts +++ b/src/@fuse/components/navigation/navigation.service.ts @@ -1,25 +1,139 @@ import { Injectable } from '@angular/core'; -import { Subject } from 'rxjs'; +import { BehaviorSubject, Observable, Subject } from 'rxjs'; @Injectable() export class FuseNavigationService { flatNavigation: any[] = []; - onItemCollapsed: Subject = new Subject; - onItemCollapseToggled: Subject = new Subject; + onItemCollapsed: Subject; + onItemCollapseToggled: Subject; + + // Private + private _onNavigationChanged: BehaviorSubject; + private _onNavigationRegistered: BehaviorSubject; + private _onNavigationUnregistered: BehaviorSubject; + + private _currentNavigationKey: string; + private _registry: { [key: string]: any } = {}; /** * Constructor */ constructor() { + // Set the defaults + this.onItemCollapsed = new Subject(); + this.onItemCollapseToggled = new Subject(); + + // Set the private defaults + this._currentNavigationKey = null; + this._onNavigationChanged = new BehaviorSubject(null); + this._onNavigationRegistered = new BehaviorSubject(null); + this._onNavigationUnregistered = new BehaviorSubject(null); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Get onNavigationChanged + * + * @returns {Observable} + */ + get onNavigationChanged(): Observable + { + return this._onNavigationChanged.asObservable(); + } + + /** + * Get onNavigationRegistered + * + * @returns {Observable} + */ + get onNavigationRegistered(): Observable + { + return this._onNavigationRegistered.asObservable(); + } + + /** + * Get onNavigationUnregistered + * + * @returns {Observable} + */ + get onNavigationUnregistered(): Observable + { + return this._onNavigationUnregistered.asObservable(); } // ----------------------------------------------------------------------------------------------------- // @ Public methods // ----------------------------------------------------------------------------------------------------- + /** + * Register the given navigation + * with the given key + * + * @param key + * @param navigation + */ + register(key, navigation): void + { + // Check if the key already being used + if ( this._registry[key] ) + { + console.error(`The navigation with the key '${key}' already exists. Either unregister it first or use a unique key.`); + + return; + } + + // Add to the registry + this._registry[key] = navigation; + + // Notify the subject + this._onNavigationRegistered.next([key, navigation]); + } + + /** + * Unregister the navigation from the registry + * @param key + */ + unregister(key): void + { + // Check if the navigation exists + if ( !this._registry[key] ) + { + console.warn(`The navigation with the key '${key}' doesn't exist in the registry.`); + } + + // Unregister the sidebar + delete this._registry[key]; + + // Notify the subject + this._onNavigationUnregistered.next(key); + } + + /** + * Get navigation from registry by key + * + * @param key + * @returns {any} + */ + getNavigation(key): any + { + // Check if the navigation exists + if ( !this._registry[key] ) + { + console.warn(`The navigation with the key '${key}' doesn't exist in the registry.`); + + return; + } + + // Return the sidebar + return this._registry[key]; + } + /** * Get flattened navigation array * @@ -33,10 +147,15 @@ export class FuseNavigationService if ( navItem.type === 'item' ) { this.flatNavigation.push({ - title: navItem.title, - type : navItem.type, - icon : navItem.icon || false, - url : navItem.url + id : navItem.id || null, + title : navItem.title || null, + translate : navItem.translate || null, + type : navItem.type, + icon : navItem.icon || null, + url : navItem.url || null, + function : navItem.function || null, + exactMatch: navItem.exactMatch || false, + badge : navItem.badge || null }); continue; @@ -53,4 +172,117 @@ export class FuseNavigationService return this.flatNavigation; } + + /** + * Get the current navigation + * + * @returns {any} + */ + getCurrentNavigation(): any + { + if ( !this._currentNavigationKey ) + { + console.warn(`The current navigation is not set.`); + + return; + } + + return this.getNavigation(this._currentNavigationKey); + } + + /** + * Set the navigation with the key + * as the current navigation + * + * @param key + */ + setCurrentNavigation(key): void + { + // Check if the sidebar exists + if ( !this._registry[key] ) + { + console.warn(`The navigation with the key '${key}' doesn't exist in the registry.`); + + return; + } + + // Set the current navigation key + this._currentNavigationKey = key; + + // Notify the subject + this._onNavigationChanged.next(key); + } + + /** + * Get navigation item by id from the + * current navigation + * + * @param id + * @param {any} navigation + * @returns {any | boolean} + */ + getNavigationItem(id, navigation = null): any | boolean + { + if ( !navigation ) + { + navigation = this.getCurrentNavigation(); + } + + for ( const item of navigation ) + { + if ( item.id === id ) + { + return item; + } + + if ( item.children ) + { + this.getNavigationItem(id, item.children); + } + } + + return false; + } + + /** + * Add a navigation item to the specified location + * + * @param item + * @param id + */ + addNavigationItem(item, id): void + { + // Get the current navigation + const navigation: any[] = this.getCurrentNavigation(); + + // Add to the end of the navigation + if ( id === 'end' ) + { + navigation.push(item); + + return; + } + + // Add to the start of the navigation + if ( id === 'start' ) + { + navigation.unshift(item); + } + + // Add it to a specific location + const parent: any = this.getNavigationItem(id); + + if ( parent ) + { + // Check if parent has a children entry, + // and add it if it doesn't + if ( !parent.children ) + { + parent.children = []; + } + + // Add the item + parent.children.push(item); + } + } } From 1e6bd8139c4a19b4b289a973116cba97717a7a88 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Mon, 28 May 2018 12:32:29 +0300 Subject: [PATCH 12/75] Removed bg color from body --- src/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.html b/src/index.html index cbb463c6..534f3c25 100644 --- a/src/index.html +++ b/src/index.html @@ -181,7 +181,7 @@ - + From 850e43c6538e15c68641f3b34a0e0d748ec4b183 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Mon, 28 May 2018 16:04:27 +0300 Subject: [PATCH 13/75] (Navigation) Improved navigation service --- .../navigation/navigation.service.ts | 71 ++++++++++++++++++- 1 file changed, 70 insertions(+), 1 deletion(-) diff --git a/src/@fuse/components/navigation/navigation.service.ts b/src/@fuse/components/navigation/navigation.service.ts index 490f895c..49995acb 100644 --- a/src/@fuse/components/navigation/navigation.service.ts +++ b/src/@fuse/components/navigation/navigation.service.ts @@ -237,7 +237,49 @@ export class FuseNavigationService if ( item.children ) { - this.getNavigationItem(id, item.children); + const childItem = this.getNavigationItem(id, item.children); + + if ( childItem ) + { + return childItem; + } + } + } + + return false; + } + + /** + * Get the parent of the navigation item + * with the id + * + * @param id + * @param {any} navigation + * @param parent + */ + getNavigationItemParent(id, navigation = null, parent = null): any + { + if ( !navigation ) + { + navigation = this.getCurrentNavigation(); + parent = navigation; + } + + for ( const item of navigation ) + { + if ( item.id === id ) + { + return parent; + } + + if ( item.children ) + { + const childItem = this.getNavigationItemParent(id, item.children, item); + + if ( childItem ) + { + return childItem; + } } } @@ -285,4 +327,31 @@ export class FuseNavigationService parent.children.push(item); } } + + /** + * Remove navigation item with the given id + * + * @param id + */ + removeNavigationItem(id): void + { + const item = this.getNavigationItem(id); + + // Return, if there is not such an item + if ( !item ) + { + return; + } + + // Get the parent of the item + let parent = this.getNavigationItemParent(id); + + // This check is required because of the first level + // of the navigation, since the first level is not + // inside the 'children' array + parent = parent.children || parent; + + // Remove the item + parent.splice(parent.indexOf(item), 1); + } } From 0ac4e6c220484d6117c3adde39f172889f4f4ca5 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Mon, 28 May 2018 17:41:33 +0300 Subject: [PATCH 14/75] (Academy app) Small shadow adjustment --- src/app/main/apps/academy/courses/courses.component.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/main/apps/academy/courses/courses.component.scss b/src/app/main/apps/academy/courses/courses.component.scss index b1af425f..9340c26b 100644 --- a/src/app/main/apps/academy/courses/courses.component.scss +++ b/src/app/main/apps/academy/courses/courses.component.scss @@ -112,7 +112,7 @@ min-height: 240px; transition: box-shadow 150ms ease-in-out; - @include mat-elevation(1); + @include mat-elevation(3); .header { color: white; From 70d895c6ed623cd58f8446ccafe742318a26764f Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Tue, 29 May 2018 14:58:48 +0300 Subject: [PATCH 15/75] New layout system (wip) --- .editorconfig | 17 +- .../search-bar/search-bar.component.ts | 2 +- .../shortcuts/shortcuts.component.ts | 2 +- .../theme-options.component.html | 222 +++++++++++------- .../theme-options/theme-options.component.ts | 101 +++++++- .../theme-options/theme-options.module.ts | 3 +- src/@fuse/scss/partials/_global.scss | 16 +- src/@fuse/types/fuse-config.ts | 22 ++ src/@fuse/types/index.ts | 1 + src/app/app.component.html | 15 +- src/app/app.component.scss | 6 + src/app/app.component.ts | 53 ++++- src/app/fuse-config/index.ts | 31 +-- .../blocks/content/content.component.scss | 3 - .../components/content/content.component.scss | 11 + .../content/content.component.ts | 11 +- .../content/content.module.ts | 2 +- .../footer/footer.component.html | 0 .../footer/footer.component.scss | 2 +- .../footer/footer.component.ts | 0 .../footer/footer.module.ts | 2 +- .../navbar/navbar.component.html | 0 .../navbar/navbar.component.scss | 0 .../navbar/navbar.component.ts | 12 +- .../navbar/navbar.module.ts | 2 +- .../quick-panel/quick-panel.component.html | 0 .../quick-panel/quick-panel.component.scss | 0 .../quick-panel/quick-panel.component.ts | 0 .../quick-panel/quick-panel.module.ts | 2 +- .../toolbar/toolbar.component.html | 4 +- .../toolbar/toolbar.component.scss | 0 .../toolbar/toolbar.component.ts | 4 +- .../toolbar/toolbar.module.ts | 2 +- .../layout-1/layout-1.component.html | 91 +++++++ .../layout-1/layout-1.component.scss | 131 +++++++++++ .../layout-1/layout-1.component.ts} | 8 +- .../horizontal/layout-1/layout-1.module.ts | 38 +++ src/app/layout/layout.module.ts | 12 +- .../vertical/basic/basic.component.html | 77 ------ .../vertical/basic/basic.component.scss | 75 ------ src/app/layout/vertical/basic/basic.module.ts | 38 --- .../vertical/layout-1/layout-1.component.html | 83 +++++++ .../vertical/layout-1/layout-1.component.scss | 117 +++++++++ .../vertical/layout-1/layout-1.component.ts | 64 +++++ .../vertical/layout-1/layout-1.module.ts | 35 +++ .../vertical/layout-2/layout-2.component.html | 83 +++++++ .../vertical/layout-2/layout-2.component.scss | 53 +++++ .../vertical/layout-2/layout-2.component.ts | 64 +++++ .../vertical/layout-2/layout-2.module.ts | 35 +++ .../vertical/layout-3/layout-3.component.html | 83 +++++++ .../vertical/layout-3/layout-3.component.scss | 45 ++++ .../vertical/layout-3/layout-3.component.ts | 64 +++++ .../vertical/layout-3/layout-3.module.ts | 35 +++ .../fullwidth-2/fullwidth-2.component.html | 4 +- .../carded/fullwidth/fullwidth.component.ts | 76 +++++- .../left-sidenav-2-tabbed.component.html | 2 +- .../left-sidenav-2.component.html | 2 +- .../right-sidenav-2-tabbed.component.html | 2 +- .../right-sidenav-2.component.html | 2 +- .../left-sidenav-2.component.html | 2 +- .../right-sidenav-2.component.html | 2 +- 61 files changed, 1508 insertions(+), 363 deletions(-) create mode 100644 src/@fuse/types/fuse-config.ts create mode 100644 src/@fuse/types/index.ts delete mode 100644 src/app/layout/blocks/content/content.component.scss create mode 100644 src/app/layout/components/content/content.component.scss rename src/app/layout/{blocks => components}/content/content.component.ts (91%) rename src/app/layout/{blocks => components}/content/content.module.ts (81%) rename src/app/layout/{blocks => components}/footer/footer.component.html (100%) rename src/app/layout/{blocks => components}/footer/footer.component.scss (94%) rename src/app/layout/{blocks => components}/footer/footer.component.ts (100%) rename src/app/layout/{blocks => components}/footer/footer.module.ts (85%) rename src/app/layout/{blocks => components}/navbar/navbar.component.html (100%) rename src/app/layout/{blocks => components}/navbar/navbar.component.scss (100%) rename src/app/layout/{blocks => components}/navbar/navbar.component.ts (93%) rename src/app/layout/{blocks => components}/navbar/navbar.module.ts (86%) rename src/app/layout/{blocks => components}/quick-panel/quick-panel.component.html (100%) rename src/app/layout/{blocks => components}/quick-panel/quick-panel.component.scss (100%) rename src/app/layout/{blocks => components}/quick-panel/quick-panel.component.ts (100%) rename src/app/layout/{blocks => components}/quick-panel/quick-panel.module.ts (83%) rename src/app/layout/{blocks => components}/toolbar/toolbar.component.html (96%) rename src/app/layout/{blocks => components}/toolbar/toolbar.component.scss (100%) rename src/app/layout/{blocks => components}/toolbar/toolbar.component.ts (98%) rename src/app/layout/{blocks => components}/toolbar/toolbar.module.ts (90%) create mode 100644 src/app/layout/horizontal/layout-1/layout-1.component.html create mode 100644 src/app/layout/horizontal/layout-1/layout-1.component.scss rename src/app/layout/{vertical/basic/basic.component.ts => horizontal/layout-1/layout-1.component.ts} (87%) create mode 100644 src/app/layout/horizontal/layout-1/layout-1.module.ts delete mode 100644 src/app/layout/vertical/basic/basic.component.html delete mode 100644 src/app/layout/vertical/basic/basic.component.scss delete mode 100644 src/app/layout/vertical/basic/basic.module.ts create mode 100644 src/app/layout/vertical/layout-1/layout-1.component.html create mode 100644 src/app/layout/vertical/layout-1/layout-1.component.scss create mode 100644 src/app/layout/vertical/layout-1/layout-1.component.ts create mode 100644 src/app/layout/vertical/layout-1/layout-1.module.ts create mode 100644 src/app/layout/vertical/layout-2/layout-2.component.html create mode 100644 src/app/layout/vertical/layout-2/layout-2.component.scss create mode 100644 src/app/layout/vertical/layout-2/layout-2.component.ts create mode 100644 src/app/layout/vertical/layout-2/layout-2.module.ts create mode 100644 src/app/layout/vertical/layout-3/layout-3.component.html create mode 100644 src/app/layout/vertical/layout-3/layout-3.component.scss create mode 100644 src/app/layout/vertical/layout-3/layout-3.component.ts create mode 100644 src/app/layout/vertical/layout-3/layout-3.module.ts diff --git a/.editorconfig b/.editorconfig index 6e87a003..ec967c61 100644 --- a/.editorconfig +++ b/.editorconfig @@ -1,13 +1,6 @@ -# Editor configuration, see http://editorconfig.org -root = true - [*] -charset = utf-8 -indent_style = space -indent_size = 2 -insert_final_newline = true -trim_trailing_whitespace = true - -[*.md] -max_line_length = off -trim_trailing_whitespace = false +charset=utf-8 +end_of_line=lf +insert_final_newline=false +indent_style=space +indent_size=4 diff --git a/src/@fuse/components/search-bar/search-bar.component.ts b/src/@fuse/components/search-bar/search-bar.component.ts index eb80bba9..8c7180d7 100644 --- a/src/@fuse/components/search-bar/search-bar.component.ts +++ b/src/@fuse/components/search-bar/search-bar.component.ts @@ -51,7 +51,7 @@ export class FuseSearchBarComponent implements OnInit, OnDestroy .pipe(takeUntil(this._unsubscribeAll)) .subscribe( (config) => { - this.toolbarColor = config.colorClasses.toolbar; + this.toolbarColor = config.layout.toolbar.background; } ); } diff --git a/src/@fuse/components/shortcuts/shortcuts.component.ts b/src/@fuse/components/shortcuts/shortcuts.component.ts index 5e001980..58e743a0 100644 --- a/src/@fuse/components/shortcuts/shortcuts.component.ts +++ b/src/@fuse/components/shortcuts/shortcuts.component.ts @@ -71,7 +71,7 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy .pipe(takeUntil(this._unsubscribeAll)) .subscribe( (config) => { - this.toolbarColor = config.colorClasses.toolbar; + this.toolbarColor = config.layout.toolbar.background; } ); diff --git a/src/@fuse/components/theme-options/theme-options.component.html b/src/@fuse/components/theme-options/theme-options.component.html index 1e0f8ac7..ffe16bcb 100644 --- a/src/@fuse/components/theme-options/theme-options.component.html +++ b/src/@fuse/components/theme-options/theme-options.component.html @@ -12,102 +12,162 @@
-

Layout:

- - Vertical - Horizontal - None - +
-

Navigation:

- - Top - Left - Right - None - + + +
-

Navigation Fold (for vertical navigation):

- - Folded - + +

Vertical Layout Styles:

+ + Layout 1 + Layout 2 + Layout 3 + -

Toolbar:

- - Below - Above - None - + +

Horizontal Layout Styles:

+ + Layout 1 + Layout 2 + -

Footer:

- - Below - Above - None - -

Layout Mode:

- - Boxed - Fullwidth - +
- + +

Navigation Position:

-

Colors:

-
+ + + Left + Right + None + + + + + Top + None + + + + +

Navigation Fold:

+ + Folded + + + +
+ +
+ + +

Toolbar:

+ + Above + Below + Below Sticky + None + + +
+ +
+ + +

Footer:

+ + Above + Below + Below Sticky + None + + +
+ + +

Layout Mode:

+ + Boxed + Fullwidth + -
-

Toolbar Color

-
-
-

Navigation Bar Color

- + + +

Custom scrollbars:

+ + Enable custom scrollbars + + + + +

Colors:

+
+ +
+

Toolbar Color

+ +
+ +
+

Navigation Bar Color

+ +
+ +
+

Footer Color

+ +
+
-
-

Footer Color

- -
+ -
+

Router Animation:

+ + + + None + + + Slide up + + + Slide down + + + Slide right + + + Slide left + + + Fade in + + + - + -

Router Animation:

- - - - None - - - Slide up - - - Slide down - - - Slide right - - - Slide left - - - Fade in - - -
diff --git a/src/@fuse/components/theme-options/theme-options.component.ts b/src/@fuse/components/theme-options/theme-options.component.ts index 8eb0a39b..6e6ac9a9 100644 --- a/src/@fuse/components/theme-options/theme-options.component.ts +++ b/src/@fuse/components/theme-options/theme-options.component.ts @@ -1,5 +1,6 @@ import { Component, ElementRef, HostBinding, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core'; import { style, animate, AnimationBuilder, AnimationPlayer } from '@angular/animations'; +import { FormBuilder, FormGroup } from '@angular/forms'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -15,8 +16,9 @@ import { FuseNavigationService } from '@fuse/components/navigation/navigation.se }) export class FuseThemeOptionsComponent implements OnInit, OnDestroy { - @Input() - navigation; + fuseConfig: any; + fuseConfigForm: FormGroup; + player: AnimationPlayer; @ViewChild('openButton') openButton; @@ -27,16 +29,15 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy @ViewChild('overlay') overlay: ElementRef; - player: AnimationPlayer; - fuseConfig: any; - - @HostBinding('class.bar-closed') barClosed: boolean; + @HostBinding('class.bar-closed') + barClosed: boolean; // Private private _unsubscribeAll: Subject; constructor( private _animationBuilder: AnimationBuilder, + private _formBuilder: FormBuilder, private _fuseConfigService: FuseConfigService, private _fuseNavigationService: FuseNavigationService, private _renderer: Renderer2 @@ -66,16 +67,44 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy } ); + // Build the config form + // noinspection TypeScriptValidateTypes + this.fuseConfigForm = this._formBuilder.group({ + layout : this._formBuilder.group({ + style : this.fuseConfig.layout.style, + navigation: this._formBuilder.group({ + position : this.fuseConfig.layout.navigation.position, + folded : this.fuseConfig.layout.navigation.folded, + background: this.fuseConfig.layout.navigation.background + }), + toolbar : this._formBuilder.group({ + position : this.fuseConfig.layout.toolbar.position, + background: this.fuseConfig.layout.toolbar.background + }), + footer : this._formBuilder.group({ + position : this.fuseConfig.layout.footer.position, + background: this.fuseConfig.layout.footer.background + }), + mode : this.fuseConfig.layout.mode + }), + customScrollbars: this.fuseConfig.customScrollbars, + routerAnimation : this.fuseConfig.routerAnimation + }); + + // Subscribe to the form value changes + this.fuseConfigForm.valueChanges.subscribe((config) => { + + // Update the config + this._fuseConfigService.config = config; + }); + // Listen for the overlay's click event this._renderer.listen(this.overlay.nativeElement, 'click', () => { this.closeBar(); }); - // Get the nav model and add customize nav item - // that opens the bar programmatically - const nav: any = this.navigation; - - nav.push({ + // Add customize nav item that opens the bar programmatically + const customFunctionNavItem = { 'id' : 'custom-function', 'title' : 'Custom Function', 'type' : 'group', @@ -90,7 +119,9 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy } } ] - }); + }; + + this._fuseNavigationService.addNavigationItem(customFunctionNavItem, 'end'); } /** @@ -101,6 +132,9 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy // Unsubscribe from all subscriptions this._unsubscribeAll.next(); this._unsubscribeAll.complete(); + + // Remove the custom function menu + this._fuseNavigationService.removeNavigationItem('custom-function'); } // ----------------------------------------------------------------------------------------------------- @@ -110,9 +144,50 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy /** * On config change */ - onConfigChange(): void + onConfigChange(layoutChanged = false): void { this._fuseConfigService.config = this.fuseConfig; + + // If the layout changed, reset the settings + if ( layoutChanged ) + { + this.resetConfig(); + } + } + + /** + * Reset the config correctly + */ + resetConfig(): void + { + // Check the layout style and reset the + // configuration properly so we don't end + // up with options that don't work with + // selected layout style + switch ( this.fuseConfig.layout.style ) + { + // Vertical + + // Layout 1 + case 'vertical-layout-1': + { + this._fuseConfigService.config = { + layout: { + style : 'vertical-layout-1', + navigation: { + position: 'left' + } + } + }; + + break; + } + + default : + { + break; + } + } } /** diff --git a/src/@fuse/components/theme-options/theme-options.module.ts b/src/@fuse/components/theme-options/theme-options.module.ts index 5aa58c8d..d49050cb 100644 --- a/src/@fuse/components/theme-options/theme-options.module.ts +++ b/src/@fuse/components/theme-options/theme-options.module.ts @@ -1,6 +1,6 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { FormsModule } from '@angular/forms'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FlexLayoutModule } from '@angular/flex-layout'; import { MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule } from '@angular/material'; @@ -14,6 +14,7 @@ import { FuseThemeOptionsComponent } from '@fuse/components/theme-options/theme- imports : [ CommonModule, FormsModule, + ReactiveFormsModule, FlexLayoutModule, diff --git a/src/@fuse/scss/partials/_global.scss b/src/@fuse/scss/partials/_global.scss index f7b93621..fad46620 100644 --- a/src/@fuse/scss/partials/_global.scss +++ b/src/@fuse/scss/partials/_global.scss @@ -1,6 +1,12 @@ +html, body { - - > mat-sidenav-container { - height: 100%; - } -} + display: flex; + flex: 1 0 auto; + width: 100%; + height: 100%; + max-height: 100%; + min-height: 100%; + margin: 0; + padding: 0; + overflow: hidden; +} \ No newline at end of file diff --git a/src/@fuse/types/fuse-config.ts b/src/@fuse/types/fuse-config.ts new file mode 100644 index 00000000..5cdf067a --- /dev/null +++ b/src/@fuse/types/fuse-config.ts @@ -0,0 +1,22 @@ +export interface FuseConfig +{ + layout: { + style: string, + navigation: { + position: 'left' | 'right' | 'top' | 'none', + folded: boolean, + background: string + }, + toolbar: { + position: 'above' | 'above-sticky' | 'below' | 'below-sticky' | 'none', + background: string + } + footer: { + position: 'above' | 'below' | 'below-sticky' | 'none', + background: string + }, + mode: 'fullwidth' | 'boxed' + }; + customScrollbars: boolean; + routerAnimation: string; +} diff --git a/src/@fuse/types/index.ts b/src/@fuse/types/index.ts new file mode 100644 index 00000000..f47ab6aa --- /dev/null +++ b/src/@fuse/types/index.ts @@ -0,0 +1 @@ +export * from './fuse-config'; diff --git a/src/app/app.component.html b/src/app/app.component.html index 1281ba0b..1e6ab5c9 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1 +1,14 @@ - + + + + + + + + + + + + + + diff --git a/src/app/app.component.scss b/src/app/app.component.scss index e69de29b..189729a0 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -0,0 +1,6 @@ +:host { + display: flex; + flex: 1 1 auto; + width: 100%; + min-width: 0; +} \ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 4deed6b7..2c15072b 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,9 +1,12 @@ -import { Component } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { TranslateService } from '@ngx-translate/core'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; +import { FuseConfigService } from '@fuse/services/config.service'; +import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; import { FuseSplashScreenService } from '@fuse/services/splash-screen.service'; import { FuseTranslationLoaderService } from '@fuse/services/translation-loader.service'; -import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; import { navigation } from 'app/navigation/navigation'; import { locale as navigationEnglish } from 'app/navigation/i18n/en'; @@ -14,28 +17,40 @@ import { locale as navigationTurkish } from 'app/navigation/i18n/tr'; templateUrl: './app.component.html', styleUrls : ['./app.component.scss'] }) -export class AppComponent +export class AppComponent implements OnInit, OnDestroy { navigation: any; + fuseConfig: any; + + // Private + private _unsubscribeAll: Subject; /** * Constructor * + * @param {FuseConfigService} _fuseConfigService * @param {FuseNavigationService} _fuseNavigationService * @param {FuseSplashScreenService} _fuseSplashScreenService * @param {FuseTranslationLoaderService} _fuseTranslationLoaderService * @param {TranslateService} _translateService */ constructor( + private _fuseConfigService: FuseConfigService, private _fuseNavigationService: FuseNavigationService, private _fuseSplashScreenService: FuseSplashScreenService, private _fuseTranslationLoaderService: FuseTranslationLoaderService, private _translateService: TranslateService ) { - // Navigation + // Get default navigation this.navigation = navigation; + // Register the navigation to the service + this._fuseNavigationService.register('main', this.navigation); + + // Set the main navigation as our current navigation + this._fuseNavigationService.setCurrentNavigation('main'); + // Add languages this._translateService.addLangs(['en', 'tr']); @@ -47,5 +62,35 @@ export class AppComponent // Use a language this._translateService.use('en'); + + // Set the private defaults + this._unsubscribeAll = new Subject(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + // Subscribe to config changes + this._fuseConfigService.config + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((config) => { + this.fuseConfig = config; + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); } } diff --git a/src/app/fuse-config/index.ts b/src/app/fuse-config/index.ts index 7bb7e6bb..8b1c2af2 100644 --- a/src/app/fuse-config/index.ts +++ b/src/app/fuse-config/index.ts @@ -1,3 +1,5 @@ +import { FuseConfig } from '@fuse/types'; + /** * Default Fuse Configuration * @@ -5,23 +7,24 @@ * basis. See `app/main/pages/authentication/login/login.component.ts` constructor method to learn more * about changing these options per component basis. */ -export const fuseConfig = { + +export const fuseConfig: FuseConfig = { layout : { - style : 'vertical-basic', + style : 'vertical-layout-1', navigation: { - position: 'left', - folded : false + position : 'left', + folded : false, + background: 'mat-fuse-dark-700-bg' }, - // navigation : 'left', // 'right', 'left', 'top', 'none' - // navigationFolded: false, // true, false - toolbar : 'below', // 'above', 'below', 'none' - footer : 'below', // 'above', 'below', 'none' - mode : 'fullwidth' // 'boxed', 'fullwidth' - }, - colorClasses : { - toolbar: 'mat-white-500-bg', - navbar : 'mat-fuse-dark-700-bg', - footer : 'mat-fuse-dark-900-bg' + toolbar : { + position : 'below', + background: 'mat-white-500-bg' + }, + footer : { + position : 'below', + background: 'mat-fuse-dark-900-bg' + }, + mode : 'fullwidth' }, customScrollbars: true, routerAnimation : 'fadeIn' // fadeIn, slideUp, slideDown, slideRight, slideLeft, none diff --git a/src/app/layout/blocks/content/content.component.scss b/src/app/layout/blocks/content/content.component.scss deleted file mode 100644 index 64b48f72..00000000 --- a/src/app/layout/blocks/content/content.component.scss +++ /dev/null @@ -1,3 +0,0 @@ -:host { - z-index: 1; -} \ No newline at end of file diff --git a/src/app/layout/components/content/content.component.scss b/src/app/layout/components/content/content.component.scss new file mode 100644 index 00000000..32e80fa3 --- /dev/null +++ b/src/app/layout/components/content/content.component.scss @@ -0,0 +1,11 @@ +content { + display: flex; + flex-direction: column; + flex: 1 1 auto; + z-index: 1; + + > *:not(router-outlet) { + display: flex; + flex: 1 1 auto; + } +} \ No newline at end of file diff --git a/src/app/layout/blocks/content/content.component.ts b/src/app/layout/components/content/content.component.ts similarity index 91% rename from src/app/layout/blocks/content/content.component.ts rename to src/app/layout/components/content/content.component.ts index 481247a5..86fedeaf 100644 --- a/src/app/layout/blocks/content/content.component.ts +++ b/src/app/layout/components/content/content.component.ts @@ -1,4 +1,4 @@ -import { Component, HostBinding, OnDestroy, OnInit } from '@angular/core'; +import { Component, HostBinding, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { ActivatedRoute, NavigationEnd, Router } from '@angular/router'; import { Subject } from 'rxjs'; import { filter, map } from 'rxjs/operators'; @@ -8,10 +8,11 @@ import { fuseAnimations } from '@fuse/animations'; import { FuseConfigService } from '@fuse/services/config.service'; @Component({ - selector : 'content', - templateUrl: './content.component.html', - styleUrls : ['./content.component.scss'], - animations : fuseAnimations + selector : 'content', + templateUrl : './content.component.html', + styleUrls : ['./content.component.scss'], + encapsulation: ViewEncapsulation.None, + animations : fuseAnimations }) export class ContentComponent implements OnInit, OnDestroy { diff --git a/src/app/layout/blocks/content/content.module.ts b/src/app/layout/components/content/content.module.ts similarity index 81% rename from src/app/layout/blocks/content/content.module.ts rename to src/app/layout/components/content/content.module.ts index 5b2c42d7..410b821c 100644 --- a/src/app/layout/blocks/content/content.module.ts +++ b/src/app/layout/components/content/content.module.ts @@ -3,7 +3,7 @@ import { RouterModule } from '@angular/router'; import { FuseSharedModule } from '@fuse/shared.module'; -import { ContentComponent } from 'app/layout/blocks/content/content.component'; +import { ContentComponent } from 'app/layout/components/content/content.component'; @NgModule({ declarations: [ diff --git a/src/app/layout/blocks/footer/footer.component.html b/src/app/layout/components/footer/footer.component.html similarity index 100% rename from src/app/layout/blocks/footer/footer.component.html rename to src/app/layout/components/footer/footer.component.html diff --git a/src/app/layout/blocks/footer/footer.component.scss b/src/app/layout/components/footer/footer.component.scss similarity index 94% rename from src/app/layout/blocks/footer/footer.component.scss rename to src/app/layout/components/footer/footer.component.scss index 54033040..d684b80b 100644 --- a/src/app/layout/blocks/footer/footer.component.scss +++ b/src/app/layout/components/footer/footer.component.scss @@ -1,6 +1,6 @@ :host { display: flex; - flex: 0 1 auto; + flex: 0 0 auto; z-index: 3; .mat-toolbar { diff --git a/src/app/layout/blocks/footer/footer.component.ts b/src/app/layout/components/footer/footer.component.ts similarity index 100% rename from src/app/layout/blocks/footer/footer.component.ts rename to src/app/layout/components/footer/footer.component.ts diff --git a/src/app/layout/blocks/footer/footer.module.ts b/src/app/layout/components/footer/footer.module.ts similarity index 85% rename from src/app/layout/blocks/footer/footer.module.ts rename to src/app/layout/components/footer/footer.module.ts index 058b7aad..d0d6b7de 100644 --- a/src/app/layout/blocks/footer/footer.module.ts +++ b/src/app/layout/components/footer/footer.module.ts @@ -3,7 +3,7 @@ import { MatButtonModule, MatIconModule, MatToolbarModule } from '@angular/mater import { FuseSharedModule } from '@fuse/shared.module'; -import { FooterComponent } from 'app/layout/blocks/footer/footer.component'; +import { FooterComponent } from 'app/layout/components/footer/footer.component'; @NgModule({ declarations: [ diff --git a/src/app/layout/blocks/navbar/navbar.component.html b/src/app/layout/components/navbar/navbar.component.html similarity index 100% rename from src/app/layout/blocks/navbar/navbar.component.html rename to src/app/layout/components/navbar/navbar.component.html diff --git a/src/app/layout/blocks/navbar/navbar.component.scss b/src/app/layout/components/navbar/navbar.component.scss similarity index 100% rename from src/app/layout/blocks/navbar/navbar.component.scss rename to src/app/layout/components/navbar/navbar.component.scss diff --git a/src/app/layout/blocks/navbar/navbar.component.ts b/src/app/layout/components/navbar/navbar.component.ts similarity index 93% rename from src/app/layout/blocks/navbar/navbar.component.ts rename to src/app/layout/components/navbar/navbar.component.ts index 0ef3d7a3..c611f7c9 100644 --- a/src/app/layout/blocks/navbar/navbar.component.ts +++ b/src/app/layout/components/navbar/navbar.component.ts @@ -3,12 +3,10 @@ import { NavigationEnd, Router } from '@angular/router'; import { Subject } from 'rxjs'; import { filter, takeUntil } from 'rxjs/operators'; +import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive'; import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service'; -import { navigation } from 'app/navigation/navigation'; -import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; - @Component({ selector : 'navbar', templateUrl : './navbar.component.html', @@ -43,7 +41,6 @@ export class NavbarComponent implements OnInit, OnDestroy { // Set the defaults this.layout = 'vertical'; - this.navigation = navigation; // Set the private defaults this._unsubscribeAll = new Subject(); @@ -94,6 +91,13 @@ export class NavbarComponent implements OnInit, OnDestroy } } ); + + // Get current navigation + this._fuseNavigationService.onNavigationChanged + .pipe(filter(value => value !== null)) + .subscribe(() => { + this.navigation = this._fuseNavigationService.getCurrentNavigation(); + }); } /** diff --git a/src/app/layout/blocks/navbar/navbar.module.ts b/src/app/layout/components/navbar/navbar.module.ts similarity index 86% rename from src/app/layout/blocks/navbar/navbar.module.ts rename to src/app/layout/components/navbar/navbar.module.ts index 03d2e2a7..acb91738 100644 --- a/src/app/layout/blocks/navbar/navbar.module.ts +++ b/src/app/layout/components/navbar/navbar.module.ts @@ -4,7 +4,7 @@ import { MatButtonModule, MatIconModule } from '@angular/material'; import { FuseNavigationModule } from '@fuse/components'; import { FuseSharedModule } from '@fuse/shared.module'; -import { NavbarComponent } from 'app/layout/blocks/navbar/navbar.component'; +import { NavbarComponent } from 'app/layout/components/navbar/navbar.component'; @NgModule({ declarations: [ diff --git a/src/app/layout/blocks/quick-panel/quick-panel.component.html b/src/app/layout/components/quick-panel/quick-panel.component.html similarity index 100% rename from src/app/layout/blocks/quick-panel/quick-panel.component.html rename to src/app/layout/components/quick-panel/quick-panel.component.html diff --git a/src/app/layout/blocks/quick-panel/quick-panel.component.scss b/src/app/layout/components/quick-panel/quick-panel.component.scss similarity index 100% rename from src/app/layout/blocks/quick-panel/quick-panel.component.scss rename to src/app/layout/components/quick-panel/quick-panel.component.scss diff --git a/src/app/layout/blocks/quick-panel/quick-panel.component.ts b/src/app/layout/components/quick-panel/quick-panel.component.ts similarity index 100% rename from src/app/layout/blocks/quick-panel/quick-panel.component.ts rename to src/app/layout/components/quick-panel/quick-panel.component.ts diff --git a/src/app/layout/blocks/quick-panel/quick-panel.module.ts b/src/app/layout/components/quick-panel/quick-panel.module.ts similarity index 83% rename from src/app/layout/blocks/quick-panel/quick-panel.module.ts rename to src/app/layout/components/quick-panel/quick-panel.module.ts index 0d4062cc..48009f2e 100644 --- a/src/app/layout/blocks/quick-panel/quick-panel.module.ts +++ b/src/app/layout/components/quick-panel/quick-panel.module.ts @@ -3,7 +3,7 @@ import { MatDividerModule, MatListModule, MatSlideToggleModule } from '@angular/ import { FuseSharedModule } from '@fuse/shared.module'; -import { QuickPanelComponent } from 'app/layout/blocks/quick-panel/quick-panel.component'; +import { QuickPanelComponent } from 'app/layout/components/quick-panel/quick-panel.component'; @NgModule({ declarations: [ diff --git a/src/app/layout/blocks/toolbar/toolbar.component.html b/src/app/layout/components/toolbar/toolbar.component.html similarity index 96% rename from src/app/layout/blocks/toolbar/toolbar.component.html rename to src/app/layout/components/toolbar/toolbar.component.html index d1d3cf8e..d8f7e2b6 100644 --- a/src/app/layout/blocks/toolbar/toolbar.component.html +++ b/src/app/layout/components/toolbar/toolbar.component.html @@ -8,7 +8,7 @@ @@ -92,7 +92,7 @@ diff --git a/src/app/layout/blocks/toolbar/toolbar.component.scss b/src/app/layout/components/toolbar/toolbar.component.scss similarity index 100% rename from src/app/layout/blocks/toolbar/toolbar.component.scss rename to src/app/layout/components/toolbar/toolbar.component.scss diff --git a/src/app/layout/blocks/toolbar/toolbar.component.ts b/src/app/layout/components/toolbar/toolbar.component.ts similarity index 98% rename from src/app/layout/blocks/toolbar/toolbar.component.ts rename to src/app/layout/components/toolbar/toolbar.component.ts index 34ab33fc..b2fdf441 100644 --- a/src/app/layout/blocks/toolbar/toolbar.component.ts +++ b/src/app/layout/components/toolbar/toolbar.component.ts @@ -146,11 +146,11 @@ export class ToolbarComponent implements OnInit, OnDestroy // ----------------------------------------------------------------------------------------------------- /** - * Toggle sidebar opened + * Toggle sidebar open * * @param key */ - toggleSidebarOpened(key): void + toggleSidebarOpen(key): void { this._fuseSidebarService.getSidebar(key).toggleOpen(); } diff --git a/src/app/layout/blocks/toolbar/toolbar.module.ts b/src/app/layout/components/toolbar/toolbar.module.ts similarity index 90% rename from src/app/layout/blocks/toolbar/toolbar.module.ts rename to src/app/layout/components/toolbar/toolbar.module.ts index 4217e99a..17e36e0c 100644 --- a/src/app/layout/blocks/toolbar/toolbar.module.ts +++ b/src/app/layout/components/toolbar/toolbar.module.ts @@ -5,7 +5,7 @@ import { MatButtonModule, MatIconModule, MatMenuModule, MatProgressBarModule, Ma import { FuseSearchBarModule, FuseShortcutsModule } from '@fuse/components'; import { FuseSharedModule } from '@fuse/shared.module'; -import { ToolbarComponent } from 'app/layout/blocks/toolbar/toolbar.component'; +import { ToolbarComponent } from 'app/layout/components/toolbar/toolbar.component'; @NgModule({ declarations: [ diff --git a/src/app/layout/horizontal/layout-1/layout-1.component.html b/src/app/layout/horizontal/layout-1/layout-1.component.html new file mode 100644 index 00000000..1294d2da --- /dev/null +++ b/src/app/layout/horizontal/layout-1/layout-1.component.html @@ -0,0 +1,91 @@ +
+ + + + + + + + + + + +
+ + + + + + + +
+ + + + + + + +
+ + + + + + + + + + + + + +
+ + + +
+ + + +
+ + + +
+ + + + + + + +
+ + + +
+ + + +
+ + + + + + + + \ No newline at end of file diff --git a/src/app/layout/horizontal/layout-1/layout-1.component.scss b/src/app/layout/horizontal/layout-1/layout-1.component.scss new file mode 100644 index 00000000..1d854f63 --- /dev/null +++ b/src/app/layout/horizontal/layout-1/layout-1.component.scss @@ -0,0 +1,131 @@ +@import "src/@fuse/scss/fuse"; + +horizontal-layout-1 { + display: flex; + flex: 1 1 auto; + width: 100%; + + #main { + position: relative; + display: flex; + flex: 1 1 auto; + flex-direction: column; + width: 100%; + z-index: 1; + + // Container 1 + > .container { + position: relative; + display: flex; + flex: 1 1 auto; + width: 100%; + + // Container 2 + > .container { + position: relative; + display: flex; + flex: 1 1 auto; + flex-direction: column; + min-width: 0; + + // Container 3 (Scrollable) + > .container { + position: relative; + display: flex; + flex: 1 1 auto; + flex-direction: column; + transform: translateZ(0); + + &.container-scroll { + overflow-x: hidden; + overflow-y: auto; + + // Content component + content { + flex: 1 0 auto; + + > *:not(router-outlet) { + flex: 1 0 auto; + } + } + } + } + } + } + } +} + +vertical-layout-111 { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + + /* > .mat-sidenav-container { + display: flex; + flex: 1; + + > .mat-sidenav-content, + > .mat-drawer-content { + display: flex; + flex: 1; + overflow: hidden; + height: 100vh;*/ + + @include media-breakpoint-down('sm') { + height: auto !important; + } + + #main-content { + display: flex; + flex: 1; + flex-direction: column; + overflow: hidden; + background: #FAFAFA; + + #wrapper { + display: flex; + position: relative; + flex: 1; + overflow: hidden; + + .content-wrapper { + display: flex; + flex-direction: column; + flex: 1; + overflow: hidden; + + content { + position: relative; + display: flex; + flex: 1; + flex-direction: row; + width: 100%; + overflow: hidden; + + > *:not(router-outlet):not(.ps__scrollbar-x-rail):not(.ps__scrollbar-y-rail) { + display: flex; + flex: 1; + width: 100%; + min-width: 100%; + } + + > *.ng-animating { + + .mat-tab-body { + height: 100vh; + } + } + } + } + //} + //} + } + } + + &[fuse-layout-mode="boxed"] { + max-width: 1200px; + margin: 0 auto; + @include mat-elevation(8); + } +} diff --git a/src/app/layout/vertical/basic/basic.component.ts b/src/app/layout/horizontal/layout-1/layout-1.component.ts similarity index 87% rename from src/app/layout/vertical/basic/basic.component.ts rename to src/app/layout/horizontal/layout-1/layout-1.component.ts index ad498b0e..9b2868c0 100644 --- a/src/app/layout/vertical/basic/basic.component.ts +++ b/src/app/layout/horizontal/layout-1/layout-1.component.ts @@ -6,12 +6,12 @@ import { FuseConfigService } from '@fuse/services/config.service'; import { navigation } from 'app/navigation/navigation'; @Component({ - selector : 'vertical-nav-basic-layout', - templateUrl : './basic.component.html', - styleUrls : ['./basic.component.scss'], + selector : 'horizontal-layout-1', + templateUrl : './layout-1.component.html', + styleUrls : ['./layout-1.component.scss'], encapsulation: ViewEncapsulation.None }) -export class VerticalNavBasicLayoutComponent implements OnInit, OnDestroy +export class HorizontalLayout1Component implements OnInit, OnDestroy { fuseConfig: any; navigation: any; diff --git a/src/app/layout/horizontal/layout-1/layout-1.module.ts b/src/app/layout/horizontal/layout-1/layout-1.module.ts new file mode 100644 index 00000000..ee92e4b6 --- /dev/null +++ b/src/app/layout/horizontal/layout-1/layout-1.module.ts @@ -0,0 +1,38 @@ +import { NgModule } from '@angular/core'; +import { MatSidenavModule } from '@angular/material'; + +import { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components'; +import { FuseSharedModule } from '@fuse/shared.module'; + +import { ContentModule } from 'app/layout/components/content/content.module'; +import { FooterModule } from 'app/layout/components/footer/footer.module'; +import { NavbarModule } from 'app/layout/components/navbar/navbar.module'; +import { QuickPanelModule } from 'app/layout/components/quick-panel/quick-panel.module'; +import { ToolbarModule } from 'app/layout/components/toolbar/toolbar.module'; + +import { HorizontalLayout1Component } from 'app/layout/horizontal/layout-1/layout-1.component'; + +@NgModule({ + declarations: [ + HorizontalLayout1Component + ], + imports : [ + MatSidenavModule, + + FuseSharedModule, + FuseSidebarModule, + FuseThemeOptionsModule, + + ContentModule, + FooterModule, + NavbarModule, + QuickPanelModule, + ToolbarModule + ], + exports : [ + HorizontalLayout1Component + ] +}) +export class HorizontalLayout1Module +{ +} diff --git a/src/app/layout/layout.module.ts b/src/app/layout/layout.module.ts index 0d168275..0030580c 100644 --- a/src/app/layout/layout.module.ts +++ b/src/app/layout/layout.module.ts @@ -1,13 +1,19 @@ import { NgModule } from '@angular/core'; -import { VerticalNavBasicLayoutModule } from 'app/layout/vertical/basic/basic.module'; +import { VerticalLayout1Module } from 'app/layout/vertical/layout-1/layout-1.module'; +import { VerticalLayout2Module } from 'app/layout/vertical/layout-2/layout-2.module'; +import { VerticalLayout3Module } from 'app/layout/vertical/layout-3/layout-3.module'; @NgModule({ imports: [ - VerticalNavBasicLayoutModule + VerticalLayout1Module, + VerticalLayout2Module, + VerticalLayout3Module ], exports: [ - VerticalNavBasicLayoutModule + VerticalLayout1Module, + VerticalLayout2Module, + VerticalLayout3Module ] }) export class LayoutModule diff --git a/src/app/layout/vertical/basic/basic.component.html b/src/app/layout/vertical/basic/basic.component.html deleted file mode 100644 index a12d2561..00000000 --- a/src/app/layout/vertical/basic/basic.component.html +++ /dev/null @@ -1,77 +0,0 @@ - - -
- - - - - - - - - - - - -
- - - - - - - -
- - - - - - - - - - - -
- - - -
- - - - - - - -
- - - -
- - - -
- - - - - - - - - - \ No newline at end of file diff --git a/src/app/layout/vertical/basic/basic.component.scss b/src/app/layout/vertical/basic/basic.component.scss deleted file mode 100644 index 3220c433..00000000 --- a/src/app/layout/vertical/basic/basic.component.scss +++ /dev/null @@ -1,75 +0,0 @@ -@import "src/@fuse/scss/fuse"; - -vertical-nav-basic-layout { - display: flex; - flex-direction: column; - width: 100%; - height: 100%; - - > .mat-sidenav-container { - display: flex; - flex: 1; - - > .mat-sidenav-content, - > .mat-drawer-content { - display: flex; - flex: 1; - overflow: hidden; - height: 100vh; - - @include media-breakpoint-down('sm') { - height: auto !important; - } - - #main-content { - display: flex; - flex: 1; - flex-direction: column; - overflow: hidden; - - #wrapper { - display: flex; - position: relative; - flex: 1; - overflow: hidden; - - .content-wrapper { - display: flex; - flex-direction: column; - flex: 1; - overflow: hidden; - - content { - position: relative; - display: flex; - flex: 1; - flex-direction: row; - width: 100%; - overflow: hidden; - - > *:not(router-outlet):not(.ps__scrollbar-x-rail):not(.ps__scrollbar-y-rail) { - display: flex; - flex: 1; - width: 100%; - min-width: 100%; - } - - > *.ng-animating { - - .mat-tab-body { - height: 100vh; - } - } - } - } - } - } - } - } - - &[fuse-layout-mode="boxed"] { - max-width: 1200px; - margin: 0 auto; - @include mat-elevation(8); - } -} diff --git a/src/app/layout/vertical/basic/basic.module.ts b/src/app/layout/vertical/basic/basic.module.ts deleted file mode 100644 index 1f7a8949..00000000 --- a/src/app/layout/vertical/basic/basic.module.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { NgModule } from '@angular/core'; -import { MatSidenavModule } from '@angular/material'; - -import { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components'; -import { FuseSharedModule } from '@fuse/shared.module'; - -import { ContentModule } from 'app/layout/blocks/content/content.module'; -import { FooterModule } from 'app/layout/blocks/footer/footer.module'; -import { NavbarModule } from 'app/layout/blocks/navbar/navbar.module'; -import { QuickPanelModule } from 'app/layout/blocks/quick-panel/quick-panel.module'; -import { ToolbarModule } from 'app/layout/blocks/toolbar/toolbar.module'; - -import { VerticalNavBasicLayoutComponent } from 'app/layout/vertical/basic/basic.component'; - -@NgModule({ - declarations: [ - VerticalNavBasicLayoutComponent - ], - imports : [ - MatSidenavModule, - - FuseSharedModule, - FuseSidebarModule, - FuseThemeOptionsModule, - - ContentModule, - FooterModule, - NavbarModule, - QuickPanelModule, - ToolbarModule - ], - exports : [ - VerticalNavBasicLayoutComponent - ] -}) -export class VerticalNavBasicLayoutModule -{ -} diff --git a/src/app/layout/vertical/layout-1/layout-1.component.html b/src/app/layout/vertical/layout-1/layout-1.component.html new file mode 100644 index 00000000..5492fe03 --- /dev/null +++ b/src/app/layout/vertical/layout-1/layout-1.component.html @@ -0,0 +1,83 @@ +
+ + + + + + + +
+ + + + + + + +
+ + + + + + + +
+ + + + + + + + + + + + + +
+ + + +
+ + + +
+ + + +
+ + + + + + + +
+ + + +
+ + + +
+ + + + + + + + \ No newline at end of file diff --git a/src/app/layout/vertical/layout-1/layout-1.component.scss b/src/app/layout/vertical/layout-1/layout-1.component.scss new file mode 100644 index 00000000..b0990b8a --- /dev/null +++ b/src/app/layout/vertical/layout-1/layout-1.component.scss @@ -0,0 +1,117 @@ +@import "src/@fuse/scss/fuse"; + +vertical-layout-1 { + display: flex; + flex: 1 1 auto; + width: 100%; + + #main { + position: relative; + display: flex; + flex: 1 1 auto; + flex-direction: column; + width: 100%; + z-index: 1; + + // Container 1 + > .container { + position: relative; + display: flex; + flex: 1 1 auto; + width: 100%; + + // Container 2 + > .container { + position: relative; + display: flex; + flex: 1 1 auto; + flex-direction: column; + min-width: 0; + + // Container 3 (Scrollable) + > .container { + position: relative; + display: flex; + flex: 1 1 auto; + flex-direction: column; + transform: translateZ(0); + } + } + } + } +} + +vertical-layout-111 { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + + /* > .mat-sidenav-container { + display: flex; + flex: 1; + + > .mat-sidenav-content, + > .mat-drawer-content { + display: flex; + flex: 1; + overflow: hidden; + height: 100vh;*/ + + @include media-breakpoint-down('sm') { + height: auto !important; + } + + #main-content { + display: flex; + flex: 1; + flex-direction: column; + overflow: hidden; + background: #FAFAFA; + + #wrapper { + display: flex; + position: relative; + flex: 1; + overflow: hidden; + + .content-wrapper { + display: flex; + flex-direction: column; + flex: 1; + overflow: hidden; + + content { + position: relative; + display: flex; + flex: 1; + flex-direction: row; + width: 100%; + overflow: hidden; + + > *:not(router-outlet):not(.ps__scrollbar-x-rail):not(.ps__scrollbar-y-rail) { + display: flex; + flex: 1; + width: 100%; + min-width: 100%; + } + + > *.ng-animating { + + .mat-tab-body { + height: 100vh; + } + } + } + } + //} + //} + } + } + + &[fuse-layout-mode="boxed"] { + max-width: 1200px; + margin: 0 auto; + @include mat-elevation(8); + } +} diff --git a/src/app/layout/vertical/layout-1/layout-1.component.ts b/src/app/layout/vertical/layout-1/layout-1.component.ts new file mode 100644 index 00000000..07c58e02 --- /dev/null +++ b/src/app/layout/vertical/layout-1/layout-1.component.ts @@ -0,0 +1,64 @@ +import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; + +import { FuseConfigService } from '@fuse/services/config.service'; +import { navigation } from 'app/navigation/navigation'; + +@Component({ + selector : 'vertical-layout-1', + templateUrl : './layout-1.component.html', + styleUrls : ['./layout-1.component.scss'], + encapsulation: ViewEncapsulation.None +}) +export class VerticalLayout1Component implements OnInit, OnDestroy +{ + fuseConfig: any; + navigation: any; + + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {FuseConfigService} _fuseConfigService + */ + constructor( + private _fuseConfigService: FuseConfigService + ) + { + // Set the defaults + this.navigation = navigation; + + // Set the private defaults + this._unsubscribeAll = new Subject(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + // Subscribe to config changes + this._fuseConfigService.config + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((config) => { + this.fuseConfig = config; + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } +} diff --git a/src/app/layout/vertical/layout-1/layout-1.module.ts b/src/app/layout/vertical/layout-1/layout-1.module.ts new file mode 100644 index 00000000..b6e77784 --- /dev/null +++ b/src/app/layout/vertical/layout-1/layout-1.module.ts @@ -0,0 +1,35 @@ +import { NgModule } from '@angular/core'; + +import { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components'; +import { FuseSharedModule } from '@fuse/shared.module'; + +import { ContentModule } from 'app/layout/components/content/content.module'; +import { FooterModule } from 'app/layout/components/footer/footer.module'; +import { NavbarModule } from 'app/layout/components/navbar/navbar.module'; +import { QuickPanelModule } from 'app/layout/components/quick-panel/quick-panel.module'; +import { ToolbarModule } from 'app/layout/components/toolbar/toolbar.module'; + +import { VerticalLayout1Component } from 'app/layout/vertical/layout-1/layout-1.component'; + +@NgModule({ + declarations: [ + VerticalLayout1Component + ], + imports : [ + FuseSharedModule, + FuseSidebarModule, + FuseThemeOptionsModule, + + ContentModule, + FooterModule, + NavbarModule, + QuickPanelModule, + ToolbarModule + ], + exports : [ + VerticalLayout1Component + ] +}) +export class VerticalLayout1Module +{ +} diff --git a/src/app/layout/vertical/layout-2/layout-2.component.html b/src/app/layout/vertical/layout-2/layout-2.component.html new file mode 100644 index 00000000..b95d2d4a --- /dev/null +++ b/src/app/layout/vertical/layout-2/layout-2.component.html @@ -0,0 +1,83 @@ +
+ + + + + + + +
+ + + + + + + +
+ + + + + + + +
+ + + + + + + + + + + + + +
+ + + +
+ + + +
+ + + +
+ + + + + + + +
+ + + +
+ + + +
+ + + + + + + + \ No newline at end of file diff --git a/src/app/layout/vertical/layout-2/layout-2.component.scss b/src/app/layout/vertical/layout-2/layout-2.component.scss new file mode 100644 index 00000000..d1496150 --- /dev/null +++ b/src/app/layout/vertical/layout-2/layout-2.component.scss @@ -0,0 +1,53 @@ +@import "src/@fuse/scss/fuse"; + +vertical-layout-2 { + display: flex; + flex: 1 1 auto; + width: 100%; + + #main { + position: relative; + display: flex; + flex: 1 1 auto; + flex-direction: column; + width: 100%; + z-index: 1; + + // Container 1 + > .container { + position: relative; + display: flex; + flex: 1 1 auto; + width: 100%; + + // Container 2 + > .container { + position: relative; + display: flex; + flex: 1 1 auto; + flex-direction: column; + min-width: 0; + + // Container 3 (Scrollable) + > .container { + position: relative; + display: flex; + flex: 1 1 auto; + flex-direction: column; + transform: translateZ(0); + overflow-x: hidden; + overflow-y: auto; + + // Content component + content { + flex: 1 0 auto; + + > *:not(router-outlet) { + flex: 1 0 auto; + } + } + } + } + } + } +} diff --git a/src/app/layout/vertical/layout-2/layout-2.component.ts b/src/app/layout/vertical/layout-2/layout-2.component.ts new file mode 100644 index 00000000..82fb5d8a --- /dev/null +++ b/src/app/layout/vertical/layout-2/layout-2.component.ts @@ -0,0 +1,64 @@ +import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; + +import { FuseConfigService } from '@fuse/services/config.service'; +import { navigation } from 'app/navigation/navigation'; + +@Component({ + selector : 'vertical-layout-2', + templateUrl : './layout-2.component.html', + styleUrls : ['./layout-2.component.scss'], + encapsulation: ViewEncapsulation.None +}) +export class VerticalLayout2Component implements OnInit, OnDestroy +{ + fuseConfig: any; + navigation: any; + + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {FuseConfigService} _fuseConfigService + */ + constructor( + private _fuseConfigService: FuseConfigService + ) + { + // Set the defaults + this.navigation = navigation; + + // Set the private defaults + this._unsubscribeAll = new Subject(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + // Subscribe to config changes + this._fuseConfigService.config + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((config) => { + this.fuseConfig = config; + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } +} diff --git a/src/app/layout/vertical/layout-2/layout-2.module.ts b/src/app/layout/vertical/layout-2/layout-2.module.ts new file mode 100644 index 00000000..30b96fc8 --- /dev/null +++ b/src/app/layout/vertical/layout-2/layout-2.module.ts @@ -0,0 +1,35 @@ +import { NgModule } from '@angular/core'; + +import { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components'; +import { FuseSharedModule } from '@fuse/shared.module'; + +import { ContentModule } from 'app/layout/components/content/content.module'; +import { FooterModule } from 'app/layout/components/footer/footer.module'; +import { NavbarModule } from 'app/layout/components/navbar/navbar.module'; +import { QuickPanelModule } from 'app/layout/components/quick-panel/quick-panel.module'; +import { ToolbarModule } from 'app/layout/components/toolbar/toolbar.module'; + +import { VerticalLayout2Component } from 'app/layout/vertical/layout-2/layout-2.component'; + +@NgModule({ + declarations: [ + VerticalLayout2Component + ], + imports : [ + FuseSharedModule, + FuseSidebarModule, + FuseThemeOptionsModule, + + ContentModule, + FooterModule, + NavbarModule, + QuickPanelModule, + ToolbarModule + ], + exports : [ + VerticalLayout2Component + ] +}) +export class VerticalLayout2Module +{ +} diff --git a/src/app/layout/vertical/layout-3/layout-3.component.html b/src/app/layout/vertical/layout-3/layout-3.component.html new file mode 100644 index 00000000..4a823b85 --- /dev/null +++ b/src/app/layout/vertical/layout-3/layout-3.component.html @@ -0,0 +1,83 @@ +
+ + + + + + + +
+ + + + + + + +
+ + + + + + + +
+ + + + + + + + + + + + + +
+ + + +
+ + + + + + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + + + + + + \ No newline at end of file diff --git a/src/app/layout/vertical/layout-3/layout-3.component.scss b/src/app/layout/vertical/layout-3/layout-3.component.scss new file mode 100644 index 00000000..a6d52354 --- /dev/null +++ b/src/app/layout/vertical/layout-3/layout-3.component.scss @@ -0,0 +1,45 @@ +@import "src/@fuse/scss/fuse"; + +vertical-layout-3 { + display: flex; + flex: 1 1 auto; + width: 100%; + + #main { + position: relative; + display: flex; + flex: 1 1 auto; + flex-direction: column; + width: 100%; + z-index: 1; + + // Container 1 (Scrollable) + > .container { + position: relative; + display: flex; + flex: 1 1 auto; + flex-direction: column; + width: 100%; + overflow-x: hidden; + overflow-y: auto; + transform: translateZ(0); + + // Container 2 + > .container { + position: relative; + display: flex; + flex: 1 0 auto; + width: 100%; + + // Container 3 + > .container { + position: relative; + display: flex; + flex: 1 1 auto; + flex-direction: column; + min-width: 0; + } + } + } + } +} diff --git a/src/app/layout/vertical/layout-3/layout-3.component.ts b/src/app/layout/vertical/layout-3/layout-3.component.ts new file mode 100644 index 00000000..d99091b4 --- /dev/null +++ b/src/app/layout/vertical/layout-3/layout-3.component.ts @@ -0,0 +1,64 @@ +import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; + +import { FuseConfigService } from '@fuse/services/config.service'; +import { navigation } from 'app/navigation/navigation'; + +@Component({ + selector : 'vertical-layout-3', + templateUrl : './layout-3.component.html', + styleUrls : ['./layout-3.component.scss'], + encapsulation: ViewEncapsulation.None +}) +export class VerticalLayout3Component implements OnInit, OnDestroy +{ + fuseConfig: any; + navigation: any; + + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + * + * @param {FuseConfigService} _fuseConfigService + */ + constructor( + private _fuseConfigService: FuseConfigService + ) + { + // Set the defaults + this.navigation = navigation; + + // Set the private defaults + this._unsubscribeAll = new Subject(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + // Subscribe to config changes + this._fuseConfigService.config + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((config) => { + this.fuseConfig = config; + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } +} diff --git a/src/app/layout/vertical/layout-3/layout-3.module.ts b/src/app/layout/vertical/layout-3/layout-3.module.ts new file mode 100644 index 00000000..b2bd25cf --- /dev/null +++ b/src/app/layout/vertical/layout-3/layout-3.module.ts @@ -0,0 +1,35 @@ +import { NgModule } from '@angular/core'; + +import { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components'; +import { FuseSharedModule } from '@fuse/shared.module'; + +import { ContentModule } from 'app/layout/components/content/content.module'; +import { FooterModule } from 'app/layout/components/footer/footer.module'; +import { NavbarModule } from 'app/layout/components/navbar/navbar.module'; +import { QuickPanelModule } from 'app/layout/components/quick-panel/quick-panel.module'; +import { ToolbarModule } from 'app/layout/components/toolbar/toolbar.module'; + +import { VerticalLayout3Component } from 'app/layout/vertical/layout-3/layout-3.component'; + +@NgModule({ + declarations: [ + VerticalLayout3Component + ], + imports : [ + FuseSharedModule, + FuseSidebarModule, + FuseThemeOptionsModule, + + ContentModule, + FooterModule, + NavbarModule, + QuickPanelModule, + ToolbarModule + ], + exports : [ + VerticalLayout3Component + ] +}) +export class VerticalLayout3Module +{ +} diff --git a/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html b/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html index 52281b63..803bdda8 100644 --- a/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html +++ b/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html @@ -1,4 +1,4 @@ -
+
@@ -9,7 +9,7 @@
-

Fullwidth with page scroll

+

Fullwidth with container scroll

diff --git a/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.ts b/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.ts index 7128f849..7e1616e6 100644 --- a/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.ts +++ b/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.ts @@ -1,16 +1,86 @@ -import { Component } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { takeUntil } from 'rxjs/operators'; +import { Subject } from 'rxjs'; + +import { FuseConfigService } from '@fuse/services/config.service'; +import { FuseMatchMediaService } from '@fuse/services/match-media.service'; @Component({ selector : 'carded-fullwidth', templateUrl: './fullwidth.component.html', styleUrls : ['./fullwidth.component.scss'] }) -export class CardedFullWidthComponent +export class CardedFullWidthComponent implements OnInit, OnDestroy { + // Private + private _unsubscribeAll: Subject; + /** * Constructor + * + * @param {FuseConfigService} _fuseConfigService + * @param {FuseMatchMediaService} _fuseMatchMediaService */ - constructor() + constructor( + private _fuseConfigService: FuseConfigService, + private _fuseMatchMediaService: FuseMatchMediaService + ) { + // Configure the layout + this._fuseConfigService.config = { + layout: { + containerScroll: false + } + }; + + // Set the private defaults + this._unsubscribeAll = new Subject(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + // Enable the containerScroll on small screen + // devices to get more screen real estate + this._fuseMatchMediaService.onMediaChange + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((alias) => { + + // If 'xs' + if ( alias === 'xs' ) + { + // Set the containerScroll to true + this._fuseConfigService.config = { + layout: { + containerScroll: true + } + }; + } + else + { + // Set the containerScroll to false (route default) + this._fuseConfigService.config = { + layout: { + containerScroll: false + } + }; + } + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); } } diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.html b/src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.html index 3246adca..575e5515 100644 --- a/src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.html +++ b/src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.html @@ -40,7 +40,7 @@ menu -

Left sidenav with tabs and page scroll

+

Left sidenav with tabs and container scroll

diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html b/src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html index fb85cfe5..faa84817 100644 --- a/src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html +++ b/src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html @@ -32,7 +32,7 @@
-

Left sidenav with page scroll

+

Left sidenav with container scroll

diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.html b/src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.html index 376eff20..056ae1cf 100644 --- a/src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.html +++ b/src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.html @@ -19,7 +19,7 @@ menu -

Right sidenav with tabs and page scroll

+

Right sidenav with tabs and container scroll

diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html b/src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html index aac6936a..7e080983 100644 --- a/src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html +++ b/src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html @@ -11,7 +11,7 @@
-

Right sidenav with page scroll

+

Right sidenav with container scroll

diff --git a/src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html b/src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html index 7a991be9..bc6a8ff9 100644 --- a/src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html +++ b/src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html @@ -24,7 +24,7 @@
-

Left sidenav with page scroll

+

Left sidenav with container scroll

diff --git a/src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html b/src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html index e1832c0b..e4454157 100644 --- a/src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html +++ b/src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html @@ -15,7 +15,7 @@
-

Right sidenav with page scroll

+

Right sidenav with container scroll

From 387077882b2272407bc71723021626585b575ebd Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Tue, 29 May 2018 15:07:13 +0300 Subject: [PATCH 16/75] Codebase improvements --- .../search-bar/search-bar.component.ts | 3 ++- .../components/shortcuts/shortcuts.component.ts | 17 +++++++++++------ 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/src/@fuse/components/search-bar/search-bar.component.ts b/src/@fuse/components/search-bar/search-bar.component.ts index 8c7180d7..aa75bee7 100644 --- a/src/@fuse/components/search-bar/search-bar.component.ts +++ b/src/@fuse/components/search-bar/search-bar.component.ts @@ -16,7 +16,7 @@ export class FuseSearchBarComponent implements OnInit, OnDestroy toolbarColor: string; @Output() - onInput: EventEmitter = new EventEmitter(); + onInput: EventEmitter; // Private private _unsubscribeAll: Subject; @@ -31,6 +31,7 @@ export class FuseSearchBarComponent implements OnInit, OnDestroy ) { // Set the defaults + this.onInput = new EventEmitter(); this.collapsed = true; // Set the private defaults diff --git a/src/@fuse/components/shortcuts/shortcuts.component.ts b/src/@fuse/components/shortcuts/shortcuts.component.ts index 58e743a0..9275ae1a 100644 --- a/src/@fuse/components/shortcuts/shortcuts.component.ts +++ b/src/@fuse/components/shortcuts/shortcuts.component.ts @@ -15,11 +15,11 @@ import { FuseConfigService } from '@fuse/services/config.service'; }) export class FuseShortcutsComponent implements OnInit, OnDestroy { - shortcutItems: any[] = []; + shortcutItems: any[]; navigationItems: any[]; filteredNavigationItems: any[]; - searching = false; - mobileShortcutsPanelActive = false; + searching: boolean; + mobileShortcutsPanelActive: boolean; toolbarColor: string; @Input() @@ -45,14 +45,19 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy * @param {ObservableMedia} _observableMedia */ constructor( - private _renderer: Renderer2, private _cookieService: CookieService, + private _fuseConfigService: FuseConfigService, private _fuseMatchMediaService: FuseMatchMediaService, private _fuseNavigationService: FuseNavigationService, - private _fuseConfigService: FuseConfigService, - private _observableMedia: ObservableMedia + private _observableMedia: ObservableMedia, + private _renderer: Renderer2 ) { + // Set the defaults + this.shortcutItems = []; + this.searching = false; + this.mobileShortcutsPanelActive = false; + // Set the private defaults this._unsubscribeAll = new Subject(); } From 83c395b8664c4cf94d81f064dc8b06d78adac2d1 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Wed, 30 May 2018 11:49:30 +0300 Subject: [PATCH 17/75] (Sidebar) Make the sidebar invisible when it's not open Made the backdrop methods private --- .../components/sidebar/sidebar.component.ts | 208 ++++++++++++------ 1 file changed, 140 insertions(+), 68 deletions(-) diff --git a/src/@fuse/components/sidebar/sidebar.component.ts b/src/@fuse/components/sidebar/sidebar.component.ts index 5462686d..d44d1c77 100644 --- a/src/@fuse/components/sidebar/sidebar.component.ts +++ b/src/@fuse/components/sidebar/sidebar.component.ts @@ -1,7 +1,7 @@ import { Component, ElementRef, HostBinding, HostListener, Input, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core'; import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations'; import { ObservableMedia } from '@angular/flex-layout'; -import { Subject, Subscription } from 'rxjs'; +import { Subject } from 'rxjs'; import { FuseSidebarService } from './sidebar.service'; import { FuseMatchMediaService } from '@fuse/services/match-media.service'; @@ -159,6 +159,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy // Register the sidebar this._fuseSidebarService.register(this.name, this); + // Setup visibility + this._setupVisibility(); + // Setup alignment this._setupAlignment(); @@ -224,6 +227,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy // Set the wasActive for the first time this._wasActive = false; + // Show the sidebar + this._showSidebar(); + // Act on every media change this._fuseMatchMediaService.onMediaChange .pipe(takeUntil(this._unsubscribeAll)) @@ -244,6 +250,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy // Set the lockedOpen status this.isLockedOpen = true; + // Show the sidebar + this._showSidebar(); + // Force the the opened status to true this.opened = true; @@ -255,7 +264,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy } // Hide the backdrop if any exists - this.hideBackdrop(); + this._hideBackdrop(); } // De-Activate the lockedOpen else @@ -268,6 +277,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy // Force the the opened status to close this.opened = false; + + // Hide the sidebar + this._hideSidebar(); } // Store the new active status @@ -275,6 +287,124 @@ export class FuseSidebarComponent implements OnInit, OnDestroy }); } + /** + * Setup the visibility of the sidebar + * + * @private + */ + private _setupVisibility(): void + { + // Remove the existing box-shadow + this._renderer.setStyle(this._elementRef.nativeElement, 'box-shadow', 'none'); + + // Make the sidebar invisible + this._renderer.setStyle(this._elementRef.nativeElement, 'visibility', 'hidden'); + } + + /** + * Show the backdrop + * + * @private + */ + private _showBackdrop(): void + { + // Create the backdrop element + this._backdrop = this._renderer.createElement('div'); + + // Add a class to the backdrop element + this._backdrop.classList.add('fuse-sidebar-overlay'); + + // Append the backdrop to the parent of the sidebar + this._renderer.appendChild(this._elementRef.nativeElement.parentElement, this._backdrop); + + // Create the enter animation and attach it to the player + this._player = + this._animationBuilder + .build([ + animate('300ms ease', style({opacity: 1})) + ]).create(this._backdrop); + + // Play the animation + this._player.play(); + + // Add an event listener to the overlay + this._backdrop.addEventListener('click', () => { + this.close(); + } + ); + } + + /** + * Hide the backdrop + * + * @private + */ + private _hideBackdrop(): void + { + if ( !this._backdrop ) + { + return; + } + + // Create the leave animation and attach it to the player + this._player = + this._animationBuilder + .build([ + animate('300ms ease', style({opacity: 0})) + ]).create(this._backdrop); + + // Play the animation + this._player.play(); + + // Once the animation is done... + this._player.onDone(() => { + + // If the backdrop still exists... + if ( this._backdrop ) + { + // Remove the backdrop + this._backdrop.parentNode.removeChild(this._backdrop); + this._backdrop = null; + } + }); + } + + /** + * Change some properties of the sidebar + * and make it visible + * + * @private + */ + private _showSidebar(): void + { + // Remove the box-shadow style + this._renderer.removeStyle(this._elementRef.nativeElement, 'box-shadow'); + + // Make the sidebar invisible + this._renderer.removeStyle(this._elementRef.nativeElement, 'visibility'); + } + + /** + * Change some properties of the sidebar + * and make it invisible + * + * @private + */ + private _hideSidebar(delay = true): void + { + const delayAmount = delay ? 300 : 0; + + // Add a delay so close animation can play + setTimeout(() => { + + // Remove the box-shadow + this._renderer.setStyle(this._elementRef.nativeElement, 'box-shadow', 'none'); + + // Make the sidebar invisible + this._renderer.setStyle(this._elementRef.nativeElement, 'visibility', 'hidden'); + }, delayAmount); + } + // ----------------------------------------------------------------------------------------------------- // @ Public methods // ----------------------------------------------------------------------------------------------------- @@ -289,8 +419,11 @@ export class FuseSidebarComponent implements OnInit, OnDestroy return; } + // Show the sidebar + this._showSidebar(); + // Show the backdrop - this.showBackdrop(); + this._showBackdrop(); // Set the opened status this.opened = true; @@ -307,10 +440,13 @@ export class FuseSidebarComponent implements OnInit, OnDestroy } // Hide the backdrop - this.hideBackdrop(); + this._hideBackdrop(); // Set the opened status this.opened = false; + + // Hide the sidebar + this._hideSidebar(); } /** @@ -404,68 +540,4 @@ export class FuseSidebarComponent implements OnInit, OnDestroy this.fold(); } } - - /** - * Show the backdrop - */ - showBackdrop(): void - { - // Create the backdrop element - this._backdrop = this._renderer.createElement('div'); - - // Add a class to the backdrop element - this._backdrop.classList.add('fuse-sidebar-overlay'); - - // Append the backdrop to the parent of the sidebar - this._renderer.appendChild(this._elementRef.nativeElement.parentElement, this._backdrop); - - // Create the enter animation and attach it to the player - this._player = - this._animationBuilder - .build([ - animate('300ms ease', style({opacity: 1})) - ]).create(this._backdrop); - - // Play the animation - this._player.play(); - - // Add an event listener to the overlay - this._backdrop.addEventListener('click', () => { - this.close(); - } - ); - } - - /** - * Hide the backdrop - */ - hideBackdrop(): void - { - if ( !this._backdrop ) - { - return; - } - - // Create the leave animation and attach it to the player - this._player = - this._animationBuilder - .build([ - animate('300ms ease', style({opacity: 0})) - ]).create(this._backdrop); - - // Play the animation - this._player.play(); - - // Once the animation is done... - this._player.onDone(() => { - - // If the backdrop still exists... - if ( this._backdrop ) - { - // Remove the backdrop - this._backdrop.parentNode.removeChild(this._backdrop); - this._backdrop = null; - } - }); - } } From b918fa4122bd76158d7822c29183d195cd1d70fc Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Wed, 30 May 2018 12:22:19 +0300 Subject: [PATCH 18/75] (Sidebar) Changed align to position since align is a native HTML attribute Added invisibleOverlay option --- .../components/sidebar/sidebar.component.scss | 8 +++- .../components/sidebar/sidebar.component.ts | 39 ++++++++++++------- 2 files changed, 31 insertions(+), 16 deletions(-) diff --git a/src/@fuse/components/sidebar/sidebar.component.scss b/src/@fuse/components/sidebar/sidebar.component.scss index 25b9b5ef..66a6b2cc 100644 --- a/src/@fuse/components/sidebar/sidebar.component.scss +++ b/src/@fuse/components/sidebar/sidebar.component.scss @@ -17,12 +17,12 @@ fuse-sidebar { box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35); background: white; - &.left-aligned { + &.left-positioned { left: 0; transform: translateX(-100%); } - &.right-aligned { + &.right-positioned { right: 0; transform: translateX(100%); } @@ -58,4 +58,8 @@ fuse-sidebar { z-index: 3; background-color: rgba(0, 0, 0, 0.6); opacity: 0; + + &.fuse-sidebar-overlay-invisible { + background-color: transparent; + } } \ No newline at end of file diff --git a/src/@fuse/components/sidebar/sidebar.component.ts b/src/@fuse/components/sidebar/sidebar.component.ts index d44d1c77..bf398ac5 100644 --- a/src/@fuse/components/sidebar/sidebar.component.ts +++ b/src/@fuse/components/sidebar/sidebar.component.ts @@ -20,9 +20,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy @Input() name: string; - // Align + // Position @Input() - align: 'left' | 'right'; + position: 'left' | 'right'; // Open @HostBinding('class.open') @@ -40,6 +40,10 @@ export class FuseSidebarComponent implements OnInit, OnDestroy @HostBinding('class.unfolded') unfolded: boolean; + // Invisible overlay + @Input() + invisibleOverlay: boolean; + // Private private _folded: boolean; private _fuseConfig: any; @@ -70,9 +74,10 @@ export class FuseSidebarComponent implements OnInit, OnDestroy ) { // Set the defaults - this.opened = false; this.folded = false; - this.align = 'left'; + this.opened = false; + this.position = 'left'; + this.invisibleOverlay = false; // Set the private defaults this._unsubscribeAll = new Subject(); @@ -97,14 +102,14 @@ export class FuseSidebarComponent implements OnInit, OnDestroy this._folded = value; // Programmatically add/remove margin to the element - // that comes after or before based on the alignment + // that comes after or before based on the position let sibling, styleRule; const styleValue = '64px'; // Get the sibling and set the style rule - if ( this.align === 'left' ) + if ( this.position === 'left' ) { sibling = this._elementRef.nativeElement.nextElementSibling; styleRule = 'marginLeft'; @@ -162,8 +167,8 @@ export class FuseSidebarComponent implements OnInit, OnDestroy // Setup visibility this._setupVisibility(); - // Setup alignment - this._setupAlignment(); + // Setup position + this._setupPosition(); // Setup lockedOpen this._setupLockedOpen(); @@ -193,21 +198,21 @@ export class FuseSidebarComponent implements OnInit, OnDestroy // ----------------------------------------------------------------------------------------------------- /** - * Set the sidebar alignment + * Setup the sidebar position * * @private */ - private _setupAlignment(): void + private _setupPosition(): void { // Add the correct class name to the sidebar - // element depending on the align attribute - if ( this.align === 'right' ) + // element depending on the position attribute + if ( this.position === 'right' ) { - this._renderer.addClass(this._elementRef.nativeElement, 'right-aligned'); + this._renderer.addClass(this._elementRef.nativeElement, 'right-positioned'); } else { - this._renderer.addClass(this._elementRef.nativeElement, 'left-aligned'); + this._renderer.addClass(this._elementRef.nativeElement, 'left-positioned'); } } @@ -314,6 +319,12 @@ export class FuseSidebarComponent implements OnInit, OnDestroy // Add a class to the backdrop element this._backdrop.classList.add('fuse-sidebar-overlay'); + // Add a class depending on the invisibleOverlay option + if ( this.invisibleOverlay ) + { + this._backdrop.classList.add('fuse-sidebar-overlay-invisible'); + } + // Append the backdrop to the parent of the sidebar this._renderer.appendChild(this._elementRef.nativeElement.parentElement, this._backdrop); From 232b4de752596e7632b1cf15410ebff955c849e4 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Wed, 30 May 2018 12:23:09 +0300 Subject: [PATCH 19/75] Moved ThemeOptions to the Fuse Sidebar Replaced align with position on Fuse Sidebar components --- .../theme-options.component.html | 29 +-- .../theme-options.component.scss | 69 +------ .../theme-options/theme-options.component.ts | 171 ++++++++++-------- .../theme-options/theme-options.module.ts | 7 +- src/app/app.component.html | 10 + src/app/app.component.scss | 25 +++ src/app/app.component.ts | 18 ++ src/app/app.module.ts | 8 + .../vertical/layout-1/layout-1.component.html | 8 +- .../vertical/layout-1/layout-1.module.ts | 3 +- .../vertical/layout-2/layout-2.component.html | 8 +- .../vertical/layout-2/layout-2.module.ts | 3 +- .../vertical/layout-3/layout-3.component.html | 8 +- .../vertical/layout-3/layout-3.module.ts | 3 +- 14 files changed, 190 insertions(+), 180 deletions(-) diff --git a/src/@fuse/components/theme-options/theme-options.component.html b/src/@fuse/components/theme-options/theme-options.component.html index ffe16bcb..6928fbff 100644 --- a/src/@fuse/components/theme-options/theme-options.component.html +++ b/src/@fuse/components/theme-options/theme-options.component.html @@ -1,12 +1,6 @@ - +
-
- -
- - @@ -26,11 +20,11 @@
-

Vertical Layout Styles:

+

Scrollable Area:

- Layout 1 - Layout 2 - Layout 3 + Content + Wrapper + Body @@ -79,8 +73,15 @@

Toolbar:

Above + + Above Sticky + Below - Below Sticky + + Below Sticky + None @@ -170,4 +171,4 @@
-
+
\ No newline at end of file diff --git a/src/@fuse/components/theme-options/theme-options.component.scss b/src/@fuse/components/theme-options/theme-options.component.scss index 2e2c7c75..1fc3442c 100644 --- a/src/@fuse/components/theme-options/theme-options.component.scss +++ b/src/@fuse/components/theme-options/theme-options.component.scss @@ -10,33 +10,14 @@ } :host { - position: fixed; - display: block; - right: 0; - top: 160px; - z-index: 998; - - &.bar-closed .theme-options-panel { - display: none; - } + display: flex; .theme-options-panel { - position: absolute; - right: 0; - top: 0; - width: 360px; - transform: translate3d(100%, 0, 0); - z-index: 999; - max-height: calc(100vh - 200px); + display: flex; + flex: 1 0 auto; padding: 24px; overflow: auto; - @include media-breakpoint-down('xs') { - top: -120px; - max-height: calc(100vh - 100px); - width: 90vw; - } - .close-button { position: absolute; top: 8px; @@ -61,25 +42,6 @@ } } - .theme-options-panel-overlay { - position: fixed; - display: block; - background: rgba(0, 0, 0, 0); - top: 0; - right: 0; - left: 0; - bottom: 0; - z-index: 998; - - @include media-breakpoint-down('sm') { - background: rgba(0, 0, 0, 0.37); - } - - &.hidden { - display: none; - } - } - .mat-list .mat-list-item { font-size: 15px; } @@ -87,29 +49,4 @@ .mat-divider { margin: 16px; } - - .open-button { - position: absolute; - top: 0; - left: -48px; - width: 48px; - height: 48px; - line-height: 48px; - text-align: center; - cursor: pointer; - border-radius: 0; - margin: 0; - pointer-events: auto; - opacity: .75; - z-index: 998; - - mat-icon { - animation: rotating 3s linear infinite; - } - - &:hover { - opacity: 1; - } - } - } diff --git a/src/@fuse/components/theme-options/theme-options.component.ts b/src/@fuse/components/theme-options/theme-options.component.ts index 6e6ac9a9..aa61360a 100644 --- a/src/@fuse/components/theme-options/theme-options.component.ts +++ b/src/@fuse/components/theme-options/theme-options.component.ts @@ -1,5 +1,4 @@ -import { Component, ElementRef, HostBinding, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core'; -import { style, animate, AnimationBuilder, AnimationPlayer } from '@angular/animations'; +import { Component, HostBinding, OnDestroy, OnInit, Renderer2 } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -7,6 +6,7 @@ import { takeUntil } from 'rxjs/operators'; import { fuseAnimations } from '@fuse/animations'; import { FuseConfigService } from '@fuse/services/config.service'; import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; +import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service'; @Component({ selector : 'fuse-theme-options', @@ -18,16 +18,6 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy { fuseConfig: any; fuseConfigForm: FormGroup; - player: AnimationPlayer; - - @ViewChild('openButton') - openButton; - - @ViewChild('panel') - panel; - - @ViewChild('overlay') - overlay: ElementRef; @HostBinding('class.bar-closed') barClosed: boolean; @@ -35,11 +25,20 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy // Private private _unsubscribeAll: Subject; + /** + * Constructor + * + * @param {FormBuilder} _formBuilder + * @param {FuseConfigService} _fuseConfigService + * @param {FuseNavigationService} _fuseNavigationService + * @param {FuseSidebarService} _fuseSidebarService + * @param {Renderer2} _renderer + */ constructor( - private _animationBuilder: AnimationBuilder, private _formBuilder: FormBuilder, private _fuseConfigService: FuseConfigService, private _fuseNavigationService: FuseNavigationService, + private _fuseSidebarService: FuseSidebarService, private _renderer: Renderer2 ) { @@ -92,16 +91,23 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy }); // Subscribe to the form value changes - this.fuseConfigForm.valueChanges.subscribe((config) => { + this.fuseConfigForm.valueChanges + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((config) => { - // Update the config - this._fuseConfigService.config = config; - }); + // Update the config + this._fuseConfigService.config = config; + }); - // Listen for the overlay's click event - this._renderer.listen(this.overlay.nativeElement, 'click', () => { - this.closeBar(); - }); + // Subscribe to the layout style value changes + const layoutControls: any = this.fuseConfigForm.controls.layout; + layoutControls.controls.style.valueChanges + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((layout) => { + + // Reset the config + this.resetConfig(layout); + }); // Add customize nav item that opens the bar programmatically const customFunctionNavItem = { @@ -115,7 +121,7 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy 'type' : 'item', 'icon' : 'settings', 'function': () => { - this.openBar(); + this._toggleSidebarOpen('themeOptionsPanel'); } } ] @@ -137,48 +143,93 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy this._fuseNavigationService.removeNavigationItem('custom-function'); } + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Toggle sidebar open + * + * @param key + * @private + */ + private _toggleSidebarOpen(key): void + { + this._fuseSidebarService.getSidebar(key).toggleOpen(); + } + + // ----------------------------------------------------------------------------------------------------- // @ Public methods // ----------------------------------------------------------------------------------------------------- - /** - * On config change - */ - onConfigChange(layoutChanged = false): void - { - this._fuseConfigService.config = this.fuseConfig; - - // If the layout changed, reset the settings - if ( layoutChanged ) - { - this.resetConfig(); - } - } - /** * Reset the config correctly */ - resetConfig(): void + resetConfig(layout): void { + console.log(layout); + // Check the layout style and reset the // configuration properly so we don't end // up with options that don't work with // selected layout style - switch ( this.fuseConfig.layout.style ) + switch ( layout ) { // Vertical // Layout 1 case 'vertical-layout-1': { - this._fuseConfigService.config = { + // Reset the config form + this.fuseConfigForm.patchValue({ layout: { - style : 'vertical-layout-1', navigation: { - position: 'left' + folder: false + }, + toolbar : { + position: 'below' } } - }; + }); + + break; + } + + // Layout 2 + case 'vertical-layout-2': + { + console.log('resetting the options for vertical-layout-2...'); + + // Reset the config form + this.fuseConfigForm.patchValue({ + layout: { + navigation: { + folder: false + }, + toolbar : { + position: 'below' + } + } + }); + + break; + } + + // Layout 3 + case 'vertical-layout-3': + { + // Reset the config form + this.fuseConfigForm.patchValue({ + layout: { + navigation: { + folder: false + }, + toolbar : { + position: 'below' + } + } + }); break; } @@ -189,40 +240,4 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy } } } - - /** - * Open the bar - */ - openBar(): void - { - this.barClosed = false; - - this.player = - this._animationBuilder - .build([ - style({transform: 'translate3d(100%,0,0)'}), - animate('400ms ease', style({transform: 'translate3d(0,0,0)'})) - ]).create(this.panel.nativeElement); - - this.player.play(); - } - - /** - * Close the bar - */ - closeBar(): void - { - this.player = - this._animationBuilder - .build([ - style({transform: 'translate3d(0,0,0)'}), - animate('400ms ease', style({transform: 'translate3d(100%,0,0)'})) - ]).create(this.panel.nativeElement); - - this.player.play(); - - this.player.onDone(() => { - this.barClosed = true; - }); - } } diff --git a/src/@fuse/components/theme-options/theme-options.module.ts b/src/@fuse/components/theme-options/theme-options.module.ts index d49050cb..4a764bff 100644 --- a/src/@fuse/components/theme-options/theme-options.module.ts +++ b/src/@fuse/components/theme-options/theme-options.module.ts @@ -4,7 +4,10 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FlexLayoutModule } from '@angular/flex-layout'; import { MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule } from '@angular/material'; +import { FuseDirectivesModule } from '@fuse/directives/directives'; +import { FuseSidebarModule } from '@fuse/components/sidebar/sidebar.module'; import { FuseMaterialColorPickerModule } from '@fuse/components/material-color-picker/material-color-picker.module'; + import { FuseThemeOptionsComponent } from '@fuse/components/theme-options/theme-options.component'; @NgModule({ @@ -27,7 +30,9 @@ import { FuseThemeOptionsComponent } from '@fuse/components/theme-options/theme- MatSelectModule, MatSlideToggleModule, - FuseMaterialColorPickerModule + FuseDirectivesModule, + FuseMaterialColorPickerModule, + FuseSidebarModule ], exports : [ FuseThemeOptionsComponent diff --git a/src/app/app.component.html b/src/app/app.component.html index 1e6ab5c9..871dc3d7 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -12,3 +12,13 @@ + + + + + + + \ No newline at end of file diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 189729a0..292e233c 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,6 +1,31 @@ :host { + position: relative; display: flex; flex: 1 1 auto; width: 100%; min-width: 0; + + .theme-options-button { + position: absolute; + top: 160px; + right: 0; + width: 48px; + height: 48px; + line-height: 48px; + text-align: center; + cursor: pointer; + border-radius: 0; + margin: 0; + pointer-events: auto; + opacity: .75; + z-index: 998; + + mat-icon { + animation: rotating 3s linear infinite; + } + + &:hover { + opacity: 1; + } + } } \ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 2c15072b..a27d185a 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -5,6 +5,7 @@ import { takeUntil } from 'rxjs/operators'; import { FuseConfigService } from '@fuse/services/config.service'; import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; +import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service'; import { FuseSplashScreenService } from '@fuse/services/splash-screen.service'; import { FuseTranslationLoaderService } from '@fuse/services/translation-loader.service'; @@ -30,6 +31,7 @@ export class AppComponent implements OnInit, OnDestroy * * @param {FuseConfigService} _fuseConfigService * @param {FuseNavigationService} _fuseNavigationService + * @param {FuseSidebarService} _fuseSidebarService * @param {FuseSplashScreenService} _fuseSplashScreenService * @param {FuseTranslationLoaderService} _fuseTranslationLoaderService * @param {TranslateService} _translateService @@ -37,6 +39,7 @@ export class AppComponent implements OnInit, OnDestroy constructor( private _fuseConfigService: FuseConfigService, private _fuseNavigationService: FuseNavigationService, + private _fuseSidebarService: FuseSidebarService, private _fuseSplashScreenService: FuseSplashScreenService, private _fuseTranslationLoaderService: FuseTranslationLoaderService, private _translateService: TranslateService @@ -93,4 +96,19 @@ export class AppComponent implements OnInit, OnDestroy this._unsubscribeAll.next(); this._unsubscribeAll.complete(); } + + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Toggle sidebar open + * + * @param key + * @private + */ + private _toggleSidebarOpen(key): void + { + this._fuseSidebarService.getSidebar(key).toggleOpen(); + } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index b7cc2196..06374179 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -4,12 +4,14 @@ import { HttpClientModule } from '@angular/common/http'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { RouterModule, Routes } from '@angular/router'; import { MatMomentDateModule } from '@angular/material-moment-adapter'; +import { MatButtonModule, MatIconModule } from '@angular/material'; import { InMemoryWebApiModule } from 'angular-in-memory-web-api'; import { TranslateModule } from '@ngx-translate/core'; import 'hammerjs'; import { FuseModule } from '@fuse/fuse.module'; import { FuseSharedModule } from '@fuse/shared.module'; +import { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components'; import { fuseConfig } from 'app/fuse-config'; @@ -68,9 +70,15 @@ const appRoutes: Routes = [ // Material moment date module MatMomentDateModule, + // Material + MatButtonModule, + MatIconModule, + // Fuse modules FuseModule.forRoot(fuseConfig), FuseSharedModule, + FuseSidebarModule, + FuseThemeOptionsModule, // App modules LayoutModule, diff --git a/src/app/layout/vertical/layout-1/layout-1.component.html b/src/app/layout/vertical/layout-1/layout-1.component.html index 5492fe03..b826ef61 100644 --- a/src/app/layout/vertical/layout-1/layout-1.component.html +++ b/src/app/layout/vertical/layout-1/layout-1.component.html @@ -55,7 +55,7 @@
- - + - - - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/layout/vertical/layout-1/layout-1.module.ts b/src/app/layout/vertical/layout-1/layout-1.module.ts index b6e77784..ed5c7c96 100644 --- a/src/app/layout/vertical/layout-1/layout-1.module.ts +++ b/src/app/layout/vertical/layout-1/layout-1.module.ts @@ -1,6 +1,6 @@ import { NgModule } from '@angular/core'; -import { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components'; +import { FuseSidebarModule } from '@fuse/components'; import { FuseSharedModule } from '@fuse/shared.module'; import { ContentModule } from 'app/layout/components/content/content.module'; @@ -18,7 +18,6 @@ import { VerticalLayout1Component } from 'app/layout/vertical/layout-1/layout-1. imports : [ FuseSharedModule, FuseSidebarModule, - FuseThemeOptionsModule, ContentModule, FooterModule, diff --git a/src/app/layout/vertical/layout-2/layout-2.component.html b/src/app/layout/vertical/layout-2/layout-2.component.html index b95d2d4a..22587f0a 100644 --- a/src/app/layout/vertical/layout-2/layout-2.component.html +++ b/src/app/layout/vertical/layout-2/layout-2.component.html @@ -55,7 +55,7 @@
- - + - - - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/layout/vertical/layout-2/layout-2.module.ts b/src/app/layout/vertical/layout-2/layout-2.module.ts index 30b96fc8..26ed77d1 100644 --- a/src/app/layout/vertical/layout-2/layout-2.module.ts +++ b/src/app/layout/vertical/layout-2/layout-2.module.ts @@ -1,6 +1,6 @@ import { NgModule } from '@angular/core'; -import { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components'; +import { FuseSidebarModule } from '@fuse/components'; import { FuseSharedModule } from '@fuse/shared.module'; import { ContentModule } from 'app/layout/components/content/content.module'; @@ -18,7 +18,6 @@ import { VerticalLayout2Component } from 'app/layout/vertical/layout-2/layout-2. imports : [ FuseSharedModule, FuseSidebarModule, - FuseThemeOptionsModule, ContentModule, FooterModule, diff --git a/src/app/layout/vertical/layout-3/layout-3.component.html b/src/app/layout/vertical/layout-3/layout-3.component.html index 4a823b85..422f2cbd 100644 --- a/src/app/layout/vertical/layout-3/layout-3.component.html +++ b/src/app/layout/vertical/layout-3/layout-3.component.html @@ -47,7 +47,7 @@ - - + - - - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/layout/vertical/layout-3/layout-3.module.ts b/src/app/layout/vertical/layout-3/layout-3.module.ts index b2bd25cf..a0d16277 100644 --- a/src/app/layout/vertical/layout-3/layout-3.module.ts +++ b/src/app/layout/vertical/layout-3/layout-3.module.ts @@ -1,6 +1,6 @@ import { NgModule } from '@angular/core'; -import { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components'; +import { FuseSidebarModule } from '@fuse/components'; import { FuseSharedModule } from '@fuse/shared.module'; import { ContentModule } from 'app/layout/components/content/content.module'; @@ -18,7 +18,6 @@ import { VerticalLayout3Component } from 'app/layout/vertical/layout-3/layout-3. imports : [ FuseSharedModule, FuseSidebarModule, - FuseThemeOptionsModule, ContentModule, FooterModule, From 1b94d8d14e67ff2a4387db5db230b279a4e3632c Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Wed, 30 May 2018 12:23:31 +0300 Subject: [PATCH 20/75] Config types --- src/@fuse/types/fuse-config.ts | 2 +- src/app/fuse-config/index.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/@fuse/types/fuse-config.ts b/src/@fuse/types/fuse-config.ts index 5cdf067a..29be0336 100644 --- a/src/@fuse/types/fuse-config.ts +++ b/src/@fuse/types/fuse-config.ts @@ -18,5 +18,5 @@ export interface FuseConfig mode: 'fullwidth' | 'boxed' }; customScrollbars: boolean; - routerAnimation: string; + routerAnimation: 'fadeIn' | 'slideUp' | 'slideDown' | 'slideRight' | 'slideLeft' | 'none'; } diff --git a/src/app/fuse-config/index.ts b/src/app/fuse-config/index.ts index 8b1c2af2..93dc6e53 100644 --- a/src/app/fuse-config/index.ts +++ b/src/app/fuse-config/index.ts @@ -27,5 +27,5 @@ export const fuseConfig: FuseConfig = { mode : 'fullwidth' }, customScrollbars: true, - routerAnimation : 'fadeIn' // fadeIn, slideUp, slideDown, slideRight, slideLeft, none + routerAnimation : 'fadeIn' }; From a29c4b01ad2015c8dc68aeedc1eeb1019e52c45d Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Wed, 30 May 2018 12:31:58 +0300 Subject: [PATCH 21/75] Update the readme --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 81eacd6e..88a5fc88 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# Fuse2 +# Fuse - Angular -Material Design Admin Template with Angular 6+ and Angular Material 2 +Material Design Admin Template with Angular 6+ and Angular Material ## The Community From f693298f3a0c26122a0d01b7f9673ac7461a114c Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Wed, 30 May 2018 19:48:59 +0300 Subject: [PATCH 22/75] Navigation interface --- .../nav-vertical-collapse.component.html | 36 +- .../nav-vertical-collapse.component.ts | 5 +- .../nav-group/nav-vertical-group.component.ts | 4 +- .../nav-item/nav-vertical-item.component.html | 25 +- .../nav-item/nav-vertical-item.component.ts | 4 +- src/@fuse/types/fuse-navigation.ts | 26 + src/@fuse/types/index.ts | 1 + src/app/navigation/navigation.ts | 1272 +++++++++-------- 8 files changed, 719 insertions(+), 654 deletions(-) create mode 100644 src/@fuse/types/fuse-navigation.ts diff --git a/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html b/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html index ef09b5e9..dca833e8 100644 --- a/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html +++ b/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html @@ -6,21 +6,37 @@ - + + + + + + + + + + + + + + + - - - - - - - + + diff --git a/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts b/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts index ad046c1f..8ef02be0 100644 --- a/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts +++ b/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts @@ -3,8 +3,9 @@ import { NavigationEnd, Router } from '@angular/router'; import { Subject } from 'rxjs'; import { filter, takeUntil } from 'rxjs/operators'; -import { FuseNavigationService } from '../../navigation.service'; +import { FuseNavigationItem } from '@fuse/types'; import { fuseAnimations } from '@fuse/animations'; +import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; @Component({ selector : 'fuse-nav-vertical-collapse', @@ -15,7 +16,7 @@ import { fuseAnimations } from '@fuse/animations'; export class FuseNavVerticalCollapseComponent implements OnInit, OnDestroy { @Input() - item: any; + item: FuseNavigationItem; @HostBinding('class') classes = 'nav-collapse nav-item'; diff --git a/src/@fuse/components/navigation/vertical/nav-group/nav-vertical-group.component.ts b/src/@fuse/components/navigation/vertical/nav-group/nav-vertical-group.component.ts index 8ec510e2..0959e39d 100644 --- a/src/@fuse/components/navigation/vertical/nav-group/nav-vertical-group.component.ts +++ b/src/@fuse/components/navigation/vertical/nav-group/nav-vertical-group.component.ts @@ -1,5 +1,7 @@ import { Component, HostBinding, Input } from '@angular/core'; +import { FuseNavigationItem } from '@fuse/types'; + @Component({ selector : 'fuse-nav-vertical-group', templateUrl: './nav-vertical-group.component.html', @@ -11,7 +13,7 @@ export class FuseNavVerticalGroupComponent classes = 'nav-group nav-item'; @Input() - item: any; + item: FuseNavigationItem; /** * Constructor diff --git a/src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.html b/src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.html index f4de0858..0363aaa6 100644 --- a/src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.html +++ b/src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.html @@ -1,21 +1,36 @@ - + [routerLinkActiveOptions]="{exact: item.exactMatch || false}" + [target]="item.openInNewTab ? '_blank' : '_self'" matRipple> + + + + + - + - + [routerLinkActiveOptions]="{exact: item.exactMatch || false}" + [target]="item.openInNewTab ? '_blank' : '_self'" matRipple> + + + + + diff --git a/src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.ts b/src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.ts index 481628c0..9fe5c36c 100644 --- a/src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.ts +++ b/src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.ts @@ -1,5 +1,7 @@ import { Component, HostBinding, Input } from '@angular/core'; +import { FuseNavigationItem } from '@fuse/types'; + @Component({ selector : 'fuse-nav-vertical-item', templateUrl: './nav-vertical-item.component.html', @@ -11,7 +13,7 @@ export class FuseNavVerticalItemComponent classes = 'nav-item'; @Input() - item: any; + item: FuseNavigationItem; /** * Constructor diff --git a/src/@fuse/types/fuse-navigation.ts b/src/@fuse/types/fuse-navigation.ts new file mode 100644 index 00000000..cb915e1e --- /dev/null +++ b/src/@fuse/types/fuse-navigation.ts @@ -0,0 +1,26 @@ +export interface FuseNavigationItem +{ + id: string; + title: string; + type: 'item' | 'group' | 'collapse'; + translate?: string; + icon?: string; + hidden?: boolean; + url?: string; + exactMatch?: boolean; + externalUrl?: boolean; + openInNewTab?: boolean; + function?: any; + badge?: { + title?: string; + translate?: string; + bg?: string; + fg?: string; + }; + children?: FuseNavigationItem[]; +} + +export interface FuseNavigation extends FuseNavigationItem +{ + children?: FuseNavigationItem[]; +} diff --git a/src/@fuse/types/index.ts b/src/@fuse/types/index.ts index f47ab6aa..50ed6d77 100644 --- a/src/@fuse/types/index.ts +++ b/src/@fuse/types/index.ts @@ -1 +1,2 @@ export * from './fuse-config'; +export * from './fuse-navigation'; diff --git a/src/app/navigation/navigation.ts b/src/app/navigation/navigation.ts index 63427768..bfd12d41 100644 --- a/src/app/navigation/navigation.ts +++ b/src/app/navigation/navigation.ts @@ -1,935 +1,937 @@ -export const navigation = [ +import { FuseNavigation } from '@fuse/types'; + +export const navigation: FuseNavigation[] = [ { - 'id' : 'applications', - 'title' : 'Applications', - 'translate': 'NAV.APPLICATIONS', - 'type' : 'group', - 'icon' : 'apps', - 'children' : [ + id : 'applications', + title : 'Applications', + translate: 'NAV.APPLICATIONS', + type : 'group', + icon : 'apps', + children : [ { - 'id' : 'dashboards', - 'title' : 'Dashboards', - 'translate': 'NAV.DASHBOARDS', - 'type' : 'collapse', - 'icon' : 'dashboard', - 'children' : [ + id : 'dashboards', + title : 'Dashboards', + translate: 'NAV.DASHBOARDS', + type : 'collapse', + icon : 'dashboard', + children : [ { - 'id' : 'analytics', - 'title': 'Analytics', - 'type' : 'item', - 'url' : '/apps/dashboards/analytics' + id : 'analytics', + title: 'Analytics', + type : 'item', + url : '/apps/dashboards/analytics' }, { - 'id' : 'project', - 'title': 'Project', - 'type' : 'item', - 'url' : '/apps/dashboards/project' + id : 'project', + title: 'Project', + type : 'item', + url : '/apps/dashboards/project' } ] }, { - 'id' : 'calendar', - 'title' : 'Calendar', - 'translate': 'NAV.CALENDAR', - 'type' : 'item', - 'icon' : 'today', - 'url' : '/apps/calendar' + id : 'calendar', + title : 'Calendar', + translate: 'NAV.CALENDAR', + type : 'item', + icon : 'today', + url : '/apps/calendar' }, { - 'id' : 'e-commerce', - 'title' : 'E-Commerce', - 'translate': 'NAV.ECOMMERCE', - 'type' : 'collapse', - 'icon' : 'shopping_cart', - 'children' : [ + id : 'e-commerce', + title : 'E-Commerce', + translate: 'NAV.ECOMMERCE', + type : 'collapse', + icon : 'shopping_cart', + children : [ { - 'id' : 'dashboard', - 'title': 'Dashboard', - 'type' : 'item', - 'url' : '/apps/e-commerce/dashboard' + id : 'dashboard', + title: 'Dashboard', + type : 'item', + url : '/apps/e-commerce/dashboard' }, { - 'id' : 'products', - 'title' : 'Products', - 'type' : 'item', - 'url' : '/apps/e-commerce/products', - 'exactMatch': true + id : 'products', + title : 'Products', + type : 'item', + url : '/apps/e-commerce/products', + exactMatch: true }, { - 'id' : 'productDetail', - 'title' : 'Product Detail', - 'type' : 'item', - 'url' : '/apps/e-commerce/products/1/printed-dress', - 'exactMatch': true + id : 'productDetail', + title : 'Product Detail', + type : 'item', + url : '/apps/e-commerce/products/1/printed-dress', + exactMatch: true }, { - 'id' : 'orders', - 'title' : 'Orders', - 'type' : 'item', - 'url' : '/apps/e-commerce/orders', - 'exactMatch': true + id : 'orders', + title : 'Orders', + type : 'item', + url : '/apps/e-commerce/orders', + exactMatch: true }, { - 'id' : 'orderDetail', - 'title' : 'Order Detail', - 'type' : 'item', - 'url' : '/apps/e-commerce/orders/1', - 'exactMatch': true + id : 'orderDetail', + title : 'Order Detail', + type : 'item', + url : '/apps/e-commerce/orders/1', + exactMatch: true } ] }, { - 'id' : 'academy', - 'title' : 'Academy', - 'translate': 'NAV.ACADEMY', - 'type' : 'item', - 'icon' : 'school', - 'url' : '/apps/academy' + id : 'academy', + title : 'Academy', + translate: 'NAV.ACADEMY', + type : 'item', + icon : 'school', + url : '/apps/academy' }, { - 'id' : 'mail', - 'title' : 'Mail', - 'translate': 'NAV.MAIL.TITLE', - 'type' : 'item', - 'icon' : 'email', - 'url' : '/apps/mail', - 'badge' : { - 'title' : 25, - 'translate': 'NAV.MAIL.BADGE', - 'bg' : '#F44336', - 'fg' : '#FFFFFF' + id : 'mail', + title : 'Mail', + translate: 'NAV.MAIL.TITLE', + type : 'item', + icon : 'email', + url : '/apps/mail', + badge : { + title : '25', + translate: 'NAV.MAIL.BADGE', + bg : '#F44336', + fg : '#FFFFFF' } }, { - 'id' : 'mail-ngrx', - 'title' : 'Mail Ngrx', - 'translate': 'NAV.MAIL_NGRX.TITLE', - 'type' : 'item', - 'icon' : 'email', - 'url' : '/apps/mail-ngrx', - 'badge' : { - 'title' : 13, - 'translate': 'NAV.MAIL_NGRX.BADGE', - 'bg' : '#EC0C8E', - 'fg' : '#FFFFFF' + id : 'mail-ngrx', + title : 'Mail Ngrx', + translate: 'NAV.MAIL_NGRX.TITLE', + type : 'item', + icon : 'email', + url : '/apps/mail-ngrx', + badge : { + title : '13', + translate: 'NAV.MAIL_NGRX.BADGE', + bg : '#EC0C8E', + fg : '#FFFFFF' } }, { - 'id' : 'chat', - 'title' : 'Chat', - 'translate': 'NAV.CHAT', - 'type' : 'item', - 'icon' : 'chat', - 'url' : '/apps/chat', - 'badge' : { - 'title': 13, - 'bg' : '#09d261', - 'fg' : '#FFFFFF' + id : 'chat', + title : 'Chat', + translate: 'NAV.CHAT', + type : 'item', + icon : 'chat', + url : '/apps/chat', + badge : { + title: '13', + bg : '#09d261', + fg : '#FFFFFF' } }, { - 'id' : 'file-manager', - 'title' : 'File Manager', - 'translate': 'NAV.FILE_MANAGER', - 'type' : 'item', - 'icon' : 'folder', - 'url' : '/apps/file-manager' + id : 'file-manager', + title : 'File Manager', + translate: 'NAV.FILE_MANAGER', + type : 'item', + icon : 'folder', + url : '/apps/file-manager' }, { - 'id' : 'contacts', - 'title' : 'Contacts', - 'translate': 'NAV.CONTACTS', - 'type' : 'item', - 'icon' : 'account_box', - 'url' : '/apps/contacts' + id : 'contacts', + title : 'Contacts', + translate: 'NAV.CONTACTS', + type : 'item', + icon : 'account_box', + url : '/apps/contacts' }, { - 'id' : 'to-do', - 'title' : 'To-Do', - 'translate': 'NAV.TODO', - 'type' : 'item', - 'icon' : 'check_box', - 'url' : '/apps/todo', - 'badge' : { - 'title': 3, - 'bg' : '#FF6F00', - 'fg' : '#FFFFFF' + id : 'to-do', + title : 'To-Do', + translate: 'NAV.TODO', + type : 'item', + icon : 'check_box', + url : '/apps/todo', + badge : { + title: '3', + bg : '#FF6F00', + fg : '#FFFFFF' } }, { - 'id' : 'scrumboard', - 'title' : 'Scrumboard', - 'translate': 'NAV.SCRUMBOARD', - 'type' : 'item', - 'icon' : 'assessment', - 'url' : '/apps/scrumboard' + id : 'scrumboard', + title : 'Scrumboard', + translate: 'NAV.SCRUMBOARD', + type : 'item', + icon : 'assessment', + url : '/apps/scrumboard' } ] }, { - 'id' : 'pages', - 'title' : 'Pages', - 'type' : 'group', - 'icon' : 'pages', - 'children': [ + id : 'pages', + title : 'Pages', + type : 'group', + icon : 'pages', + children: [ { - 'id' : 'authentication', - 'title' : 'Authentication', - 'type' : 'collapse', - 'icon' : 'lock', - 'badge' : { - 'title': 10, - 'bg' : '#525e8a', - 'fg' : '#FFFFFF' + id : 'authentication', + title : 'Authentication', + type : 'collapse', + icon : 'lock', + badge : { + title: '10', + bg : '#525e8a', + fg : '#FFFFFF' }, - 'children': [ + children: [ { - 'id' : 'login', - 'title': 'Login', - 'type' : 'item', - 'url' : '/pages/auth/login' + id : 'login', + title: 'Login', + type : 'item', + url : '/pages/auth/login' }, { - 'id' : 'login-v2', - 'title': 'Login v2', - 'type' : 'item', - 'url' : '/pages/auth/login-2' + id : 'login-v2', + title: 'Login v2', + type : 'item', + url : '/pages/auth/login-2' }, { - 'id' : 'register', - 'title': 'Register', - 'type' : 'item', - 'url' : '/pages/auth/register' + id : 'register', + title: 'Register', + type : 'item', + url : '/pages/auth/register' }, { - 'id' : 'register-v2', - 'title': 'Register v2', - 'type' : 'item', - 'url' : '/pages/auth/register-2' + id : 'register-v2', + title: 'Register v2', + type : 'item', + url : '/pages/auth/register-2' }, { - 'id' : 'forgot-password', - 'title': 'Forgot Password', - 'type' : 'item', - 'url' : '/pages/auth/forgot-password' + id : 'forgot-password', + title: 'Forgot Password', + type : 'item', + url : '/pages/auth/forgot-password' }, { - 'id' : 'forgot-password-v2', - 'title': 'Forgot Password v2', - 'type' : 'item', - 'url' : '/pages/auth/forgot-password-2' + id : 'forgot-password-v2', + title: 'Forgot Password v2', + type : 'item', + url : '/pages/auth/forgot-password-2' }, { - 'id' : 'reset-password', - 'title': 'Reset Password', - 'type' : 'item', - 'url' : '/pages/auth/reset-password' + id : 'reset-password', + title: 'Reset Password', + type : 'item', + url : '/pages/auth/reset-password' }, { - 'id' : 'reset-password-v2', - 'title': 'Reset Password v2', - 'type' : 'item', - 'url' : '/pages/auth/reset-password-2' + id : 'reset-password-v2', + title: 'Reset Password v2', + type : 'item', + url : '/pages/auth/reset-password-2' }, { - 'id' : 'lock-screen', - 'title': 'Lock Screen', - 'type' : 'item', - 'url' : '/pages/auth/lock' + id : 'lock-screen', + title: 'Lock Screen', + type : 'item', + url : '/pages/auth/lock' }, { - 'id' : 'mail-confirmation', - 'title': 'Mail Confirmation', - 'type' : 'item', - 'url' : '/pages/auth/mail-confirm' + id : 'mail-confirmation', + title: 'Mail Confirmation', + type : 'item', + url : '/pages/auth/mail-confirm' } ] }, { - 'id' : 'coming-soon', - 'title': 'Coming Soon', - 'type' : 'item', - 'icon' : 'alarm', - 'url' : '/pages/coming-soon' + id : 'coming-soon', + title: 'Coming Soon', + type : 'item', + icon : 'alarm', + url : '/pages/coming-soon' }, { - 'id' : 'errors', - 'title' : 'Errors', - 'type' : 'collapse', - 'icon' : 'error', - 'children': [ + id : 'errors', + title : 'Errors', + type : 'collapse', + icon : 'error', + children: [ { - 'id' : '404', - 'title': '404', - 'type' : 'item', - 'url' : '/pages/errors/error-404' + id : '404', + title: '404', + type : 'item', + url : '/pages/errors/error-404' }, { - 'id' : '500', - 'title': '500', - 'type' : 'item', - 'url' : '/pages/errors/error-500' + id : '500', + title: '500', + type : 'item', + url : '/pages/errors/error-500' } ] }, { - 'id' : 'invoice', - 'title' : 'Invoice', - 'type' : 'collapse', - 'icon' : 'receipt', - 'children': [ + id : 'invoice', + title : 'Invoice', + type : 'collapse', + icon : 'receipt', + children: [ { - 'id' : 'modern', - 'title': 'Modern', - 'type' : 'item', - 'url' : '/pages/invoices/modern' + id : 'modern', + title: 'Modern', + type : 'item', + url : '/pages/invoices/modern' }, { - 'id' : 'compact', - 'title': 'Compact', - 'type' : 'item', - 'url' : '/pages/invoices/compact' + id : 'compact', + title: 'Compact', + type : 'item', + url : '/pages/invoices/compact' } ] }, { - 'id' : 'maintenance', - 'title': 'Maintenance', - 'type' : 'item', - 'icon' : 'build', - 'url' : '/pages/maintenance' + id : 'maintenance', + title: 'Maintenance', + type : 'item', + icon : 'build', + url : '/pages/maintenance' }, { - 'id' : 'pricing', - 'title' : 'Pricing', - 'type' : 'collapse', - 'icon' : 'attach_money', - 'children': [ + id : 'pricing', + title : 'Pricing', + type : 'collapse', + icon : 'attach_money', + children: [ { - 'id' : 'style-1', - 'title': 'Style 1', - 'type' : 'item', - 'url' : '/pages/pricing/style-1' + id : 'style-1', + title: 'Style 1', + type : 'item', + url : '/pages/pricing/style-1' }, { - 'id' : 'style-2', - 'title': 'Style 2', - 'type' : 'item', - 'url' : '/pages/pricing/style-2' + id : 'style-2', + title: 'Style 2', + type : 'item', + url : '/pages/pricing/style-2' }, { - 'id' : 'style-3', - 'title': 'Style 3', - 'type' : 'item', - 'url' : '/pages/pricing/style-3' + id : 'style-3', + title: 'Style 3', + type : 'item', + url : '/pages/pricing/style-3' } ] }, { - 'id' : 'profile', - 'title': 'Profile', - 'type' : 'item', - 'icon' : 'person', - 'url' : '/pages/profile' + id : 'profile', + title: 'Profile', + type : 'item', + icon : 'person', + url : '/pages/profile' }, { - 'id' : 'search', - 'title': 'Search', - 'type' : 'item', - 'icon' : 'search', - 'url' : '/pages/search' + id : 'search', + title: 'Search', + type : 'item', + icon : 'search', + url : '/pages/search' }, { - 'id' : 'faq', - 'title': 'Faq', - 'type' : 'item', - 'icon' : 'help', - 'url' : '/pages/faq' + id : 'faq', + title: 'Faq', + type : 'item', + icon : 'help', + url : '/pages/faq' }, { - 'id' : 'knowledge-base', - 'title': 'Knowledge Base', - 'type' : 'item', - 'icon' : 'import_contacts', - 'url' : '/pages/knowledge-base' + id : 'knowledge-base', + title: 'Knowledge Base', + type : 'item', + icon : 'import_contacts', + url : '/pages/knowledge-base' } ] }, { - 'id' : 'user-interface', - 'title' : 'User Interface', - 'type' : 'group', - 'icon' : 'web', - 'children': [ + id : 'user-interface', + title : 'User Interface', + type : 'group', + icon : 'web', + children: [ { - 'id' : 'forms', - 'title': 'Forms', - 'type' : 'item', - 'icon' : 'web_asset', - 'url' : '/ui/forms' + id : 'forms', + title: 'Forms', + type : 'item', + icon : 'web_asset', + url : '/ui/forms' }, { - 'id' : 'icons', - 'title': 'Icons', - 'type' : 'item', - 'icon' : 'photo', - 'url' : '/ui/icons' + id : 'icons', + title: 'Icons', + type : 'item', + icon : 'photo', + url : '/ui/icons' }, { - 'id' : 'typography', - 'title': 'Typography', - 'type' : 'item', - 'icon' : 'text_fields', - 'url' : '/ui/typography' + id : 'typography', + title: 'Typography', + type : 'item', + icon : 'text_fields', + url : '/ui/typography' }, { - 'id' : 'helper-classes', - 'title': 'Helper Classes', - 'type' : 'item', - 'icon' : 'help', - 'url' : '/ui/helper-classes' + id : 'helper-classes', + title: 'Helper Classes', + type : 'item', + icon : 'help', + url : '/ui/helper-classes' }, { - 'id' : 'page-layouts', - 'title' : 'Page Layouts', - 'type' : 'collapse', - 'icon' : 'view_quilt', - 'children': [ + id : 'page-layouts', + title : 'Page Layouts', + type : 'collapse', + icon : 'view_quilt', + children: [ { - 'id' : 'carded', - 'title' : 'Carded', - 'type' : 'collapse', - 'badge' : { - 'title': 10, - 'bg' : '#525e8a', - 'fg' : '#FFFFFF' + id : 'carded', + title : 'Carded', + type : 'collapse', + badge : { + title: '10', + bg : '#525e8a', + fg : '#FFFFFF' }, - 'children': [ + children: [ { - 'id' : 'full-width', - 'title': 'Full Width', - 'type' : 'item', - 'url' : '/ui/page-layouts/carded/full-width' + id : 'full-width', + title: 'Full Width', + type : 'item', + url : '/ui/page-layouts/carded/full-width' }, { - 'id' : 'full-width-2', - 'title': 'Full Width 2', - 'type' : 'item', - 'url' : '/ui/page-layouts/carded/full-width-2' + id : 'full-width-2', + title: 'Full Width 2', + type : 'item', + url : '/ui/page-layouts/carded/full-width-2' }, { - 'id' : 'left-sidenav', - 'title': 'Left Sidenav', - 'type' : 'item', - 'url' : '/ui/page-layouts/carded/left-sidenav' + id : 'left-sidenav', + title: 'Left Sidenav', + type : 'item', + url : '/ui/page-layouts/carded/left-sidenav' }, { - 'id' : 'left-sidenav-tabbed', - 'title': 'Left Sidenav Tabbed', - 'type' : 'item', - 'url' : '/ui/page-layouts/carded/left-sidenav-tabbed' + id : 'left-sidenav-tabbed', + title: 'Left Sidenav Tabbed', + type : 'item', + url : '/ui/page-layouts/carded/left-sidenav-tabbed' }, { - 'id' : 'left-sidenav-2', - 'title': 'Left Sidenav 2', - 'type' : 'item', - 'url' : '/ui/page-layouts/carded/left-sidenav-2' + id : 'left-sidenav-2', + title: 'Left Sidenav 2', + type : 'item', + url : '/ui/page-layouts/carded/left-sidenav-2' }, { - 'id' : 'left-sidenav-2-tabbed', - 'title': 'Left Sidenav 2 Tabbed', - 'type' : 'item', - 'url' : '/ui/page-layouts/carded/left-sidenav-2-tabbed' + id : 'left-sidenav-2-tabbed', + title: 'Left Sidenav 2 Tabbed', + type : 'item', + url : '/ui/page-layouts/carded/left-sidenav-2-tabbed' }, { - 'id' : 'right-sidenav', - 'title': 'Right Sidenav', - 'type' : 'item', - 'url' : '/ui/page-layouts/carded/right-sidenav' + id : 'right-sidenav', + title: 'Right Sidenav', + type : 'item', + url : '/ui/page-layouts/carded/right-sidenav' }, { - 'id' : 'right-sidenav-tabbed', - 'title': 'Right Sidenav Tabbed', - 'type' : 'item', - 'url' : '/ui/page-layouts/carded/right-sidenav-tabbed' + id : 'right-sidenav-tabbed', + title: 'Right Sidenav Tabbed', + type : 'item', + url : '/ui/page-layouts/carded/right-sidenav-tabbed' }, { - 'id' : 'right-sidenav-2', - 'title': 'Right Sidenav 2', - 'type' : 'item', - 'url' : '/ui/page-layouts/carded/right-sidenav-2' + id : 'right-sidenav-2', + title: 'Right Sidenav 2', + type : 'item', + url : '/ui/page-layouts/carded/right-sidenav-2' }, { - 'id' : 'right-sidenav-2-tabbed', - 'title': 'Right Sidenav 2 Tabbed', - 'type' : 'item', - 'url' : '/ui/page-layouts/carded/right-sidenav-2-tabbed' + id : 'right-sidenav-2-tabbed', + title: 'Right Sidenav 2 Tabbed', + type : 'item', + url : '/ui/page-layouts/carded/right-sidenav-2-tabbed' } ] }, { - 'id' : 'simple', - 'title' : 'Simple', - 'type' : 'collapse', - 'badge' : { - 'title': 8, - 'bg' : '#525e8a', - 'fg' : '#FFFFFF' + id : 'simple', + title : 'Simple', + type : 'collapse', + badge : { + title: '8', + bg : '#525e8a', + fg : '#FFFFFF' }, - 'children': [ + children: [ { - 'id' : 'full-width', - 'title': 'Full Width', - 'type' : 'item', - 'url' : '/ui/page-layouts/simple/full-width' + id : 'full-width', + title: 'Full Width', + type : 'item', + url : '/ui/page-layouts/simple/full-width' }, { - 'id' : 'left-sidenav', - 'title': 'Left Sidenav', - 'type' : 'item', - 'url' : '/ui/page-layouts/simple/left-sidenav' + id : 'left-sidenav', + title: 'Left Sidenav', + type : 'item', + url : '/ui/page-layouts/simple/left-sidenav' }, { - 'id' : 'left-sidenav-2', - 'title': 'Left Sidenav 2', - 'type' : 'item', - 'url' : '/ui/page-layouts/simple/left-sidenav-2' + id : 'left-sidenav-2', + title: 'Left Sidenav 2', + type : 'item', + url : '/ui/page-layouts/simple/left-sidenav-2' }, { - 'id' : 'left-sidenav-3', - 'title': 'Left Sidenav 3', - 'type' : 'item', - 'url' : '/ui/page-layouts/simple/left-sidenav-3' + id : 'left-sidenav-3', + title: 'Left Sidenav 3', + type : 'item', + url : '/ui/page-layouts/simple/left-sidenav-3' }, { - 'id' : 'right-sidenav', - 'title': 'Right Sidenav', - 'type' : 'item', - 'url' : '/ui/page-layouts/simple/right-sidenav' + id : 'right-sidenav', + title: 'Right Sidenav', + type : 'item', + url : '/ui/page-layouts/simple/right-sidenav' }, { - 'id' : 'right-sidenav-2', - 'title': 'Right Sidenav 2', - 'type' : 'item', - 'url' : '/ui/page-layouts/simple/right-sidenav-2' + id : 'right-sidenav-2', + title: 'Right Sidenav 2', + type : 'item', + url : '/ui/page-layouts/simple/right-sidenav-2' }, { - 'id' : 'right-sidenav-3', - 'title': 'Right Sidenav 3', - 'type' : 'item', - 'url' : '/ui/page-layouts/simple/right-sidenav-3' + id : 'right-sidenav-3', + title: 'Right Sidenav 3', + type : 'item', + url : '/ui/page-layouts/simple/right-sidenav-3' }, { - 'id' : 'tabbed', - 'title': 'Tabbed', - 'type' : 'item', - 'url' : '/ui/page-layouts/simple/tabbed' + id : 'tabbed', + title: 'Tabbed', + type : 'item', + url : '/ui/page-layouts/simple/tabbed' } ] }, { - 'id' : 'blank', - 'title': 'Blank', - 'type' : 'item', - 'url' : '/ui/page-layouts/blank' + id : 'blank', + title: 'Blank', + type : 'item', + url : '/ui/page-layouts/blank' } ] }, { - 'id' : 'colors', - 'title': 'Colors', - 'type' : 'item', - 'icon' : 'color_lens', - 'url' : '/ui/colors' + id : 'colors', + title: 'Colors', + type : 'item', + icon : 'color_lens', + url : '/ui/colors' } ] }, { - 'id' : 'services', - 'title' : 'Services', - 'type' : 'group', - 'icon' : 'settings', - 'children': [ + id : 'services', + title : 'Services', + type : 'group', + icon : 'settings', + children: [ { - 'id' : 'config', - 'title': 'Config', - 'type' : 'item', - 'icon' : 'settings', - 'url' : '/services/config' + id : 'config', + title: 'Config', + type : 'item', + icon : 'settings', + url : '/services/config' }, { - 'id' : 'splash-screen', - 'title': 'Splash Screen', - 'type' : 'item', - 'icon' : 'settings', - 'url' : '/services/splash-screen' + id : 'splash-screen', + title: 'Splash Screen', + type : 'item', + icon : 'settings', + url : '/services/splash-screen' } ] }, { - 'id' : 'components', - 'title' : 'Components', - 'type' : 'group', - 'icon' : 'settings_input_component', - 'children': [ + id : 'components', + title : 'Components', + type : 'group', + icon : 'settings_input_component', + children: [ { - 'id' : 'angular-material-elements', - 'title' : 'Angular Material Elements', - 'type' : 'collapse', - 'icon' : 'layers', - 'children': [ + id : 'angular-material-elements', + title : 'Angular Material Elements', + type : 'collapse', + icon : 'layers', + children: [ { - 'id' : 'form-controls', - 'title' : 'Form Controls', - 'type' : 'group', - 'children': [ + id : 'form-controls', + title : 'Form Controls', + type : 'group', + children: [ { - 'id' : 'autocomplete', - 'title': 'Autocomplete', - 'type' : 'item', - 'url' : '/components/angular-material/autocomplete' + id : 'autocomplete', + title: 'Autocomplete', + type : 'item', + url : '/components/angular-material/autocomplete' }, { - 'id' : 'checkbox', - 'title': 'Checkbox', - 'type' : 'item', - 'url' : '/components/angular-material/checkbox' + id : 'checkbox', + title: 'Checkbox', + type : 'item', + url : '/components/angular-material/checkbox' }, { - 'id' : 'datepicker', - 'title': 'Datepicker', - 'type' : 'item', - 'url' : '/components/angular-material/datepicker' + id : 'datepicker', + title: 'Datepicker', + type : 'item', + url : '/components/angular-material/datepicker' }, { - 'id' : 'form-field', - 'title': 'Form field', - 'type' : 'item', - 'url' : '/components/angular-material/form-field' + id : 'form-field', + title: 'Form field', + type : 'item', + url : '/components/angular-material/form-field' }, { - 'id' : 'input', - 'title': 'Input', - 'type' : 'item', - 'url' : '/components/angular-material/input' + id : 'input', + title: 'Input', + type : 'item', + url : '/components/angular-material/input' }, { - 'id' : 'radio-button', - 'title': 'Radio button', - 'type' : 'item', - 'url' : '/components/angular-material/radio-button' + id : 'radio-button', + title: 'Radio button', + type : 'item', + url : '/components/angular-material/radio-button' }, { - 'id' : 'select', - 'title': 'Select', - 'type' : 'item', - 'url' : '/components/angular-material/select' + id : 'select', + title: 'Select', + type : 'item', + url : '/components/angular-material/select' }, { - 'id' : 'slider', - 'title': 'Slider', - 'type' : 'item', - 'url' : '/components/angular-material/slider' + id : 'slider', + title: 'Slider', + type : 'item', + url : '/components/angular-material/slider' }, { - 'id' : 'slide-toggle', - 'title': 'Slide toggle', - 'type' : 'item', - 'url' : '/components/angular-material/slide-toggle' + id : 'slide-toggle', + title: 'Slide toggle', + type : 'item', + url : '/components/angular-material/slide-toggle' } ] }, { - 'id' : 'navigation', - 'title' : 'Navigation', - 'type' : 'group', - 'children': [ + id : 'navigation', + title : 'Navigation', + type : 'group', + children: [ { - 'id' : 'menu', - 'title': 'Menu', - 'type' : 'item', - 'url' : '/components/angular-material/menu' + id : 'menu', + title: 'Menu', + type : 'item', + url : '/components/angular-material/menu' }, { - 'id' : 'sidenav', - 'title': 'Sidenav', - 'type' : 'item', - 'url' : '/components/angular-material/sidenav' + id : 'sidenav', + title: 'Sidenav', + type : 'item', + url : '/components/angular-material/sidenav' }, { - 'id' : 'toolbar', - 'title': 'Toolbar', - 'type' : 'item', - 'url' : '/components/angular-material/toolbar' + id : 'toolbar', + title: 'Toolbar', + type : 'item', + url : '/components/angular-material/toolbar' } ] }, { - 'id' : 'layout', - 'title' : 'Layout', - 'type' : 'group', - 'children': [ + id : 'layout', + title : 'Layout', + type : 'group', + children: [ { - 'id' : 'badge', - 'title': 'Badge', - 'type' : 'item', - 'url' : '/components/angular-material/badge' + id : 'badge', + title: 'badge', + type : 'item', + url : '/components/angular-material/badge' }, { - 'id' : 'bottom-sheet', - 'title': 'Bottom Sheet', - 'type' : 'item', - 'url' : '/components/angular-material/bottom-sheet' + id : 'bottom-sheet', + title: 'Bottom Sheet', + type : 'item', + url : '/components/angular-material/bottom-sheet' }, { - 'id' : 'card', - 'title': 'Card', - 'type' : 'item', - 'url' : '/components/angular-material/card' + id : 'card', + title: 'Card', + type : 'item', + url : '/components/angular-material/card' }, { - 'id' : 'divider', - 'title': 'Divider', - 'type' : 'item', - 'url' : '/components/angular-material/divider' + id : 'divider', + title: 'Divider', + type : 'item', + url : '/components/angular-material/divider' }, { - 'id' : 'elevation', - 'title': 'Elevation', - 'type' : 'item', - 'url' : '/components/angular-material/elevation' + id : 'elevation', + title: 'Elevation', + type : 'item', + url : '/components/angular-material/elevation' }, { - 'id' : 'expansion-panel', - 'title': 'Expansion Panel', - 'type' : 'item', - 'url' : '/components/angular-material/expansion-panel' + id : 'expansion-panel', + title: 'Expansion Panel', + type : 'item', + url : '/components/angular-material/expansion-panel' }, { - 'id' : 'grid-list', - 'title': 'Grid list', - 'type' : 'item', - 'url' : '/components/angular-material/grid-list' + id : 'grid-list', + title: 'Grid list', + type : 'item', + url : '/components/angular-material/grid-list' }, { - 'id' : 'list', - 'title': 'List', - 'type' : 'item', - 'url' : '/components/angular-material/list' + id : 'list', + title: 'List', + type : 'item', + url : '/components/angular-material/list' }, { - 'id' : 'stepper', - 'title': 'Stepper', - 'type' : 'item', - 'url' : '/components/angular-material/stepper' + id : 'stepper', + title: 'Stepper', + type : 'item', + url : '/components/angular-material/stepper' }, { - 'id' : 'tabs', - 'title': 'Tabs', - 'type' : 'item', - 'url' : '/components/angular-material/tabs' + id : 'tabs', + title: 'Tabs', + type : 'item', + url : '/components/angular-material/tabs' } ] }, { - 'id' : 'buttons-indicators', - 'title' : 'Buttons & Indicators', - 'type' : 'group', - 'children': [ + id : 'buttons-indicators', + title : 'Buttons & Indicators', + type : 'group', + children: [ { - 'id' : 'button', - 'title': 'Button', - 'type' : 'item', - 'url' : '/components/angular-material/button' + id : 'button', + title: 'Button', + type : 'item', + url : '/components/angular-material/button' }, { - 'id' : 'button-toggle', - 'title': 'Button toggle', - 'type' : 'item', - 'url' : '/components/angular-material/button-toggle' + id : 'button-toggle', + title: 'Button toggle', + type : 'item', + url : '/components/angular-material/button-toggle' }, { - 'id' : 'chips', - 'title': 'Chips', - 'type' : 'item', - 'url' : '/components/angular-material/chips' + id : 'chips', + title: 'Chips', + type : 'item', + url : '/components/angular-material/chips' }, { - 'id' : 'icon', - 'title': 'Icon', - 'type' : 'item', - 'url' : '/components/angular-material/icon' + id : 'icon', + title: 'icon', + type : 'item', + url : '/components/angular-material/icon' }, { - 'id' : 'progress-spinner', - 'title': 'Progress spinner', - 'type' : 'item', - 'url' : '/components/angular-material/progress-spinner' + id : 'progress-spinner', + title: 'Progress spinner', + type : 'item', + url : '/components/angular-material/progress-spinner' }, { - 'id' : 'progress-bar', - 'title': 'Progress bar', - 'type' : 'item', - 'url' : '/components/angular-material/progress-bar' + id : 'progress-bar', + title: 'Progress bar', + type : 'item', + url : '/components/angular-material/progress-bar' } ] }, { - 'id' : 'popups-modals', - 'title' : 'Popups & Modals', - 'type' : 'group', - 'children': [ + id : 'popups-modals', + title : 'Popups & Modals', + type : 'group', + children: [ { - 'id' : 'dialog', - 'title': 'Dialog', - 'type' : 'item', - 'url' : '/components/angular-material/dialog' + id : 'dialog', + title: 'Dialog', + type : 'item', + url : '/components/angular-material/dialog' }, { - 'id' : 'snackbar', - 'title': 'Snackbar', - 'type' : 'item', - 'url' : '/components/angular-material/snackbar' + id : 'snackbar', + title: 'Snackbar', + type : 'item', + url : '/components/angular-material/snackbar' }, { - 'id' : 'tooltip', - 'title': 'Tooltip', - 'type' : 'item', - 'url' : '/components/angular-material/tooltip' + id : 'tooltip', + title: 'Tooltip', + type : 'item', + url : '/components/angular-material/tooltip' } ] }, { - 'id' : 'data-table', - 'title' : 'Data table', - 'type' : 'group', - 'children': [ + id : 'data-table', + title : 'Data table', + type : 'group', + children: [ { - 'id' : 'paginator', - 'title': 'Paginator', - 'type' : 'item', - 'url' : '/components/angular-material/paginator' + id : 'paginator', + title: 'Paginator', + type : 'item', + url : '/components/angular-material/paginator' }, { - 'id' : 'sort-header', - 'title': 'Sort header', - 'type' : 'item', - 'url' : '/components/angular-material/sort-header' + id : 'sort-header', + title: 'Sort header', + type : 'item', + url : '/components/angular-material/sort-header' }, { - 'id' : 'table', - 'title': 'Table', - 'type' : 'item', - 'url' : '/components/angular-material/table' + id : 'table', + title: 'Table', + type : 'item', + url : '/components/angular-material/table' } ] }, { - 'id' : 'tree', - 'title': 'Tree', - 'type' : 'item', - 'url' : '/components/angular-material/tree' + id : 'tree', + title: 'Tree', + type : 'item', + url : '/components/angular-material/tree' } ] }, { - 'id' : 'cards', - 'title': 'Cards', - 'type' : 'item', - 'icon' : 'settings_input_component', - 'url' : '/components/cards' + id : 'cards', + title: 'Cards', + type : 'item', + icon : 'settings_input_component', + url : '/components/cards' }, { - 'id' : 'countdown', - 'title': 'Countdown', - 'type' : 'item', - 'icon' : 'settings_input_component', - 'url' : '/components/countdown' + id : 'countdown', + title: 'Countdown', + type : 'item', + icon : 'settings_input_component', + url : '/components/countdown' }, { - 'id' : 'highlight', - 'title': 'Highlight', - 'type' : 'item', - 'icon' : 'settings_input_component', - 'url' : '/components/highlight' + id : 'highlight', + title: 'Highlight', + type : 'item', + icon : 'settings_input_component', + url : '/components/highlight' }, { - 'id' : 'material-color-picker', - 'title': 'Material Color Picker', - 'type' : 'item', - 'icon' : 'settings_input_component', - 'url' : '/components/material-color-picker' + id : 'material-color-picker', + title: 'Material Color Picker', + type : 'item', + icon : 'settings_input_component', + url : '/components/material-color-picker' }, { - 'id' : 'multi-language', - 'title': 'Multi Language', - 'type' : 'item', - 'icon' : 'settings_input_component', - 'url' : '/components/multi-language' + id : 'multi-language', + title: 'Multi Language', + type : 'item', + icon : 'settings_input_component', + url : '/components/multi-language' }, { - 'id' : 'navigation', - 'title': 'Navigation', - 'type' : 'item', - 'icon' : 'settings_input_component', - 'url' : '/components/navigation' + id : 'navigation', + title: 'Navigation', + type : 'item', + icon : 'settings_input_component', + url : '/components/navigation' }, { - 'id' : 'search-bar', - 'title': 'Search Bar', - 'type' : 'item', - 'icon' : 'settings_input_component', - 'url' : '/components/search-bar' + id : 'search-bar', + title: 'Search Bar', + type : 'item', + icon : 'settings_input_component', + url : '/components/search-bar' }, { - 'id' : 'sidebar', - 'title': 'Sidebar', - 'type' : 'item', - 'icon' : 'settings_input_component', - 'url' : '/components/sidebar' + id : 'sidebar', + title: 'Sidebar', + type : 'item', + icon : 'settings_input_component', + url : '/components/sidebar' }, { - 'id' : 'shortcuts', - 'title': 'Shortcuts', - 'type' : 'item', - 'icon' : 'settings_input_component', - 'url' : '/components/shortcuts' + id : 'shortcuts', + title: 'Shortcuts', + type : 'item', + icon : 'settings_input_component', + url : '/components/shortcuts' }, { - 'id' : 'widget', - 'title': 'Widget', - 'type' : 'item', - 'icon' : 'settings_input_component', - 'url' : '/components/widget' + id : 'widget', + title: 'Widget', + type : 'item', + icon : 'settings_input_component', + url : '/components/widget' } ] }, { - 'id' : '3rd-party-components', - 'title' : '3rd Party components', - 'type' : 'group', - 'icon' : 'settings_input_component', - 'children': [ + id : '3rd-party-components', + title : '3rd Party components', + type : 'group', + icon : 'settings_input_component', + children: [ { - 'id' : 'datatables', - 'title' : 'Datatables', - 'type' : 'collapse', - 'icon' : 'border_all', - 'children': [ + id : 'datatables', + title : 'Datatables', + type : 'collapse', + icon : 'border_all', + children: [ { - 'id' : 'ngxdatatable', - 'title': 'ngx-datatable', - 'type' : 'item', - 'url' : '/components-third-party/datatables/ngx-datatable' + id : 'ngxdatatable', + title: 'ngx-datatable', + type : 'item', + url : '/components-third-party/datatables/ngx-datatable' } ] }, { - 'id' : 'google-maps', - 'title': 'Google Maps', - 'type' : 'item', - 'icon' : 'place', - 'url' : '/components-third-party/google-maps' + id : 'google-maps', + title: 'Google Maps', + type : 'item', + icon : 'place', + url : '/components-third-party/google-maps' } ] } From 420d8d1a1b1fe2ab81d9e9444adc76369688f99b Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Wed, 6 Jun 2018 21:19:43 +0300 Subject: [PATCH 23/75] Navigation icon colors --- .../vertical/nav-collapse/nav-vertical-collapse.component.html | 2 +- .../vertical/nav-item/nav-vertical-item.component.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html b/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html index dca833e8..acc4d0c6 100644 --- a/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html +++ b/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html @@ -41,7 +41,7 @@ - {{item.icon}} + {{item.icon}} {{item.title}} diff --git a/src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.html b/src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.html index 0363aaa6..927f3cb3 100644 --- a/src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.html +++ b/src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.html @@ -35,7 +35,7 @@ - {{item.icon}} + {{item.icon}} {{item.title}} From 5c1f2ad1e3f87b3446ff5903f809616822bc33a4 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Wed, 6 Jun 2018 21:20:04 +0300 Subject: [PATCH 24/75] New layout system & new layouts (wip) --- .../components/sidebar/sidebar.component.ts | 2 +- .../theme-options.component.html | 354 +++++++++++++----- .../theme-options.component.scss | 86 +++-- .../theme-options/theme-options.component.ts | 262 +++++++------ src/@fuse/directives/directives.ts | 3 + .../fuse-inner-scroll.directive.ts | 61 +++ .../fuse-perfect-scrollbar.directive.ts | 45 ++- src/@fuse/scss/partials/_page-layouts.scss | 141 ++++--- src/@fuse/services/config.service.ts | 32 ++ src/@fuse/types/fuse-config.ts | 15 +- src/app/app.component.html | 19 +- src/app/app.component.scss | 7 + src/app/fuse-config/index.ts | 19 +- .../components/content/content.component.scss | 9 +- .../components/toolbar/toolbar.component.ts | 4 +- src/app/layout/layout.module.ts | 19 +- .../body-scroll/body-scroll.component.html | 115 ++++++ .../body-scroll/body-scroll.component.scss} | 6 +- .../body-scroll.component.ts} | 8 +- .../body-scroll/body-scroll.module.ts} | 11 +- .../content-scroll.component.html | 115 ++++++ .../content-scroll.component.scss | 61 +++ .../content-scroll.component.ts} | 8 +- .../content-scroll.module.ts} | 11 +- .../vertical/layout-1/layout-1.component.html | 81 ---- .../vertical/layout-1/layout-1.component.scss | 117 ------ .../vertical/layout-2/layout-2.component.html | 130 ++++--- .../vertical/layout-2/layout-2.component.scss | 35 +- .../vertical/layout-2/layout-2.module.ts | 3 + .../vertical/layout-3/layout-3.component.html | 81 ---- .../full-width-1.component.html} | 2 +- .../full-width-1.component.scss} | 0 .../full-width-1/full-width-1.component.ts | 16 + .../full-width-2.component.html} | 4 +- .../full-width-2.component.scss} | 0 .../full-width-2.component.ts} | 4 +- .../full-width-tabbed-1.component.html | 115 ++++++ .../full-width-tabbed-1.component.scss} | 0 .../full-width-tabbed-1.component.ts | 16 + .../full-width-tabbed-2.component.html | 115 ++++++ .../full-width-tabbed-2.component.scss} | 0 .../full-width-tabbed-2.component.ts | 16 + .../carded/fullwidth/fullwidth.component.ts | 86 ----- .../left-sidenav-1.component.html} | 6 +- .../left-sidenav-1.component.scss} | 0 .../left-sidenav-1.component.ts | 17 + .../left-sidenav-2-tabbed.component.ts | 17 - .../left-sidenav-2.component.html | 4 +- .../left-sidenav-tabbed-1.component.html} | 28 +- .../left-sidenav-tabbed-1.component.scss} | 0 .../left-sidenav-tabbed-1.component.ts | 17 + .../left-sidenav-tabbed-2.component.html} | 6 +- .../left-sidenav-tabbed-2.component.scss} | 0 .../left-sidenav-tabbed-2.component.ts | 17 + .../left-sidenav-tabbed.component.ts | 17 - .../left-sidenav/left-sidenav.component.ts | 17 - .../right-sidenav-1.component.html} | 6 +- .../right-sidenav-1.component.scss} | 0 .../right-sidenav-1.component.ts | 17 + .../right-sidenav-2-tabbed.component.ts | 17 - .../right-sidenav-2.component.html | 4 +- .../right-sidenav-tabbed-1.component.html} | 26 +- .../right-sidenav-tabbed-1.component.scss} | 0 .../right-sidenav-tabbed-1.component.ts | 17 + .../right-sidenav-tabbed-2.component.html} | 4 +- .../right-sidenav-tabbed-2.component.scss} | 0 .../right-sidenav-tabbed-2.component.ts | 17 + .../right-sidenav-tabbed.component.ts | 17 - .../right-sidenav/right-sidenav.component.ts | 17 - .../ui/page-layouts/page-layouts.module.ts | 102 ++--- .../full-width-1.component.html} | 2 +- .../full-width-1.component.scss} | 0 .../full-width-1/full-width-1.component.ts | 16 + .../simple/fullwidth/fullwidth.component.ts | 16 - .../left-sidenav-1.component.html} | 6 +- .../left-sidenav-1.component.scss} | 0 .../left-sidenav-1.component.ts | 17 + .../left-sidenav-2.component.html | 12 +- .../left-sidenav-3.component.html | 4 +- .../left-sidenav/left-sidenav.component.ts | 17 - .../right-sidenav-1.component.html} | 0 .../right-sidenav-1.component.scss | 0 .../right-sidenav-1.component.ts | 17 + .../right-sidenav-2.component.html | 12 +- .../right-sidenav-3.component.html | 2 +- .../right-sidenav/right-sidenav.component.ts | 17 - .../tabbed-1.component.html} | 0 .../simple/tabbed-1/tabbed-1.component.scss | 0 .../simple/tabbed-1/tabbed-1.component.ts | 17 + .../simple/tabbed/tabbed.component.ts | 17 - src/app/navigation/navigation.ts | 94 +++-- src/index.html | 2 +- 92 files changed, 1793 insertions(+), 1099 deletions(-) create mode 100644 src/@fuse/directives/fuse-inner-scroll/fuse-inner-scroll.directive.ts create mode 100644 src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.html rename src/app/layout/vertical/{layout-3/layout-3.component.scss => layout-1/body-scroll/body-scroll.component.scss} (93%) rename src/app/layout/vertical/layout-1/{layout-1.component.ts => body-scroll/body-scroll.component.ts} (86%) rename src/app/layout/vertical/{layout-3/layout-3.module.ts => layout-1/body-scroll/body-scroll.module.ts} (71%) create mode 100644 src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.html create mode 100644 src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.scss rename src/app/layout/vertical/{layout-3/layout-3.component.ts => layout-1/content-scroll/content-scroll.component.ts} (86%) rename src/app/layout/vertical/layout-1/{layout-1.module.ts => content-scroll/content-scroll.module.ts} (70%) delete mode 100644 src/app/layout/vertical/layout-1/layout-1.component.html delete mode 100644 src/app/layout/vertical/layout-1/layout-1.component.scss delete mode 100644 src/app/layout/vertical/layout-3/layout-3.component.html rename src/app/main/ui/page-layouts/carded/{fullwidth-2/fullwidth-2.component.html => full-width-1/full-width-1.component.html} (94%) rename src/app/main/ui/page-layouts/carded/{fullwidth-2/fullwidth-2.component.scss => full-width-1/full-width-1.component.scss} (100%) create mode 100644 src/app/main/ui/page-layouts/carded/full-width-1/full-width-1.component.ts rename src/app/main/ui/page-layouts/carded/{fullwidth/fullwidth.component.html => full-width-2/full-width-2.component.html} (88%) rename src/app/main/ui/page-layouts/carded/{fullwidth/fullwidth.component.scss => full-width-2/full-width-2.component.scss} (100%) rename src/app/main/ui/page-layouts/carded/{fullwidth-2/fullwidth-2.component.ts => full-width-2/full-width-2.component.ts} (67%) create mode 100644 src/app/main/ui/page-layouts/carded/full-width-tabbed-1/full-width-tabbed-1.component.html rename src/app/main/ui/page-layouts/carded/{left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.scss => full-width-tabbed-1/full-width-tabbed-1.component.scss} (100%) create mode 100644 src/app/main/ui/page-layouts/carded/full-width-tabbed-1/full-width-tabbed-1.component.ts create mode 100644 src/app/main/ui/page-layouts/carded/full-width-tabbed-2/full-width-tabbed-2.component.html rename src/app/main/ui/page-layouts/carded/{left-sidenav-tabbed/left-sidenav-tabbed.component.scss => full-width-tabbed-2/full-width-tabbed-2.component.scss} (100%) create mode 100644 src/app/main/ui/page-layouts/carded/full-width-tabbed-2/full-width-tabbed-2.component.ts delete mode 100644 src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.ts rename src/app/main/ui/page-layouts/carded/{left-sidenav/left-sidenav.component.html => left-sidenav-1/left-sidenav-1.component.html} (90%) rename src/app/main/ui/page-layouts/carded/{left-sidenav/left-sidenav.component.scss => left-sidenav-1/left-sidenav-1.component.scss} (100%) create mode 100644 src/app/main/ui/page-layouts/carded/left-sidenav-1/left-sidenav-1.component.ts delete mode 100644 src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.ts rename src/app/main/ui/page-layouts/carded/{left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.html => left-sidenav-tabbed-1/left-sidenav-tabbed-1.component.html} (82%) rename src/app/main/ui/page-layouts/carded/{right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.scss => left-sidenav-tabbed-1/left-sidenav-tabbed-1.component.scss} (100%) create mode 100644 src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-1/left-sidenav-tabbed-1.component.ts rename src/app/main/ui/page-layouts/carded/{left-sidenav-tabbed/left-sidenav-tabbed.component.html => left-sidenav-tabbed-2/left-sidenav-tabbed-2.component.html} (97%) rename src/app/main/ui/page-layouts/carded/{right-sidenav-tabbed/right-sidenav-tabbed.component.scss => left-sidenav-tabbed-2/left-sidenav-tabbed-2.component.scss} (100%) create mode 100644 src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-2/left-sidenav-tabbed-2.component.ts delete mode 100644 src/app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.ts delete mode 100644 src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.ts rename src/app/main/ui/page-layouts/carded/{right-sidenav/right-sidenav.component.html => right-sidenav-1/right-sidenav-1.component.html} (90%) rename src/app/main/ui/page-layouts/carded/{right-sidenav/right-sidenav.component.scss => right-sidenav-1/right-sidenav-1.component.scss} (100%) create mode 100644 src/app/main/ui/page-layouts/carded/right-sidenav-1/right-sidenav-1.component.ts delete mode 100644 src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.ts rename src/app/main/ui/page-layouts/carded/{right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.html => right-sidenav-tabbed-1/right-sidenav-tabbed-1.component.html} (82%) rename src/app/main/ui/page-layouts/{simple/fullwidth/fullwidth.component.scss => carded/right-sidenav-tabbed-1/right-sidenav-tabbed-1.component.scss} (100%) create mode 100644 src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-1/right-sidenav-tabbed-1.component.ts rename src/app/main/ui/page-layouts/carded/{right-sidenav-tabbed/right-sidenav-tabbed.component.html => right-sidenav-tabbed-2/right-sidenav-tabbed-2.component.html} (97%) rename src/app/main/ui/page-layouts/{simple/left-sidenav/left-sidenav.component.scss => carded/right-sidenav-tabbed-2/right-sidenav-tabbed-2.component.scss} (100%) create mode 100644 src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-2/right-sidenav-tabbed-2.component.ts delete mode 100644 src/app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.ts delete mode 100644 src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.ts rename src/app/main/ui/page-layouts/simple/{fullwidth/fullwidth.component.html => full-width-1/full-width-1.component.html} (92%) rename src/app/main/ui/page-layouts/simple/{right-sidenav/right-sidenav.component.scss => full-width-1/full-width-1.component.scss} (100%) create mode 100644 src/app/main/ui/page-layouts/simple/full-width-1/full-width-1.component.ts delete mode 100644 src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.ts rename src/app/main/ui/page-layouts/simple/{left-sidenav/left-sidenav.component.html => left-sidenav-1/left-sidenav-1.component.html} (86%) rename src/app/main/ui/page-layouts/simple/{tabbed/tabbed.component.scss => left-sidenav-1/left-sidenav-1.component.scss} (100%) create mode 100644 src/app/main/ui/page-layouts/simple/left-sidenav-1/left-sidenav-1.component.ts delete mode 100644 src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.ts rename src/app/main/ui/page-layouts/simple/{right-sidenav/right-sidenav.component.html => right-sidenav-1/right-sidenav-1.component.html} (100%) create mode 100644 src/app/main/ui/page-layouts/simple/right-sidenav-1/right-sidenav-1.component.scss create mode 100644 src/app/main/ui/page-layouts/simple/right-sidenav-1/right-sidenav-1.component.ts delete mode 100644 src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.ts rename src/app/main/ui/page-layouts/simple/{tabbed/tabbed.component.html => tabbed-1/tabbed-1.component.html} (100%) create mode 100644 src/app/main/ui/page-layouts/simple/tabbed-1/tabbed-1.component.scss create mode 100644 src/app/main/ui/page-layouts/simple/tabbed-1/tabbed-1.component.ts delete mode 100644 src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.ts diff --git a/src/@fuse/components/sidebar/sidebar.component.ts b/src/@fuse/components/sidebar/sidebar.component.ts index bf398ac5..e698a9e2 100644 --- a/src/@fuse/components/sidebar/sidebar.component.ts +++ b/src/@fuse/components/sidebar/sidebar.component.ts @@ -263,7 +263,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy // Read the folded setting from the config // and fold the sidebar if it's true - if ( this._fuseConfig.layout.navigation.folded ) + if ( this._fuseConfig.layout.navbar.folded ) { this.fold(); } diff --git a/src/@fuse/components/theme-options/theme-options.component.html b/src/@fuse/components/theme-options/theme-options.component.html index 6928fbff..74fa994a 100644 --- a/src/@fuse/components/theme-options/theme-options.component.html +++ b/src/@fuse/components/theme-options/theme-options.component.html @@ -1,124 +1,282 @@ -
+
- +
-
+ Theme Options -
+ - - +
+ +

Layout Styles

+ + + + Vertical Layout #1 - Content Scroll + + + Vertical Layout #1 - Body Scroll + + + Vertical Layout #2 + + Horizontal Layout #1 + Horizontal Layout #2 - --> -
- -

Scrollable Area:

- - Content - Wrapper - Body - + + - -

Horizontal Layout Styles:

- - Layout 1 - Layout 2 - + + + +
-
+

Layout Width

+ + Fullwidth + Boxed + - -

Navigation Position:

+
- - - Left - Right - None - + +
- - - Top - None - +

Navbar

- - -

Navigation Fold:

- + + Hide + + + Folded - -
+

Position:

+ + Left + Right + -
+
-

Toolbar:

- - Above - - Above Sticky - - Below - - Below Sticky - - None - +
-
+

Toolbar

-
+ + Hide + + +

Position:

+ + Above + Below Static + Below Sticky + Below Fixed + + +
-

Footer:

- - Above - Below - Below Sticky - None - +
-
+

Footer

- -

Layout Mode:

- - Boxed - Fullwidth - + + Hide + -
+

Position:

+ + Above + Below Static + Below Sticky + Below Fixed + - +
-

Custom scrollbars:

- + + + + + + +
+ +

Layout Width

+ + Fullwidth + Boxed + + +
+ + +
+ +

Navbar

+ + + Hide + + + + Folded + + +

Position:

+ + Left + Right + + +
+ + +
+ +

Toolbar

+ + + Hide + + +

Position:

+ + Above Static + Above Sticky + Above Fixed + Below + + +
+ + +
+ +

Footer

+ + + Hide + + +

Position:

+ + Above Static + Above Sticky + Above Fixed + Below + + +
+ + + + + + + +
+ +

Layout Width

+ + Fullwidth + Boxed + + +
+ + +
+ +

Navbar

+ + + Hide + + + + Folded + + +

Position:

+ + Left + Right + + +
+ + +
+ +

Toolbar

+ + + Hide + + +

Position:

+ + Above Static + Above Sticky + Above Fixed + + +
+ + +
+ +

Footer

+ + + Hide + + +

Position:

+ + Above Static + Above Sticky + Above Fixed + + +
+ + + + + +
+ + +
+ +

Custom scrollbars

+ + Enable custom scrollbars - +
+ + +
+ +

Colors

-

Colors:

@@ -128,9 +286,9 @@
-

Navigation Bar Color

+

Navbar Color

+ [(selectedClass)]="fuseConfig.layout.navbar.background">
@@ -141,9 +299,13 @@
- +
+ + +
+ +

Router Animation

-

Router Animation:

@@ -167,8 +329,8 @@ - +
-
+ -
\ No newline at end of file +
diff --git a/src/@fuse/components/theme-options/theme-options.component.scss b/src/@fuse/components/theme-options/theme-options.component.scss index 1fc3442c..6c083492 100644 --- a/src/@fuse/components/theme-options/theme-options.component.scss +++ b/src/@fuse/components/theme-options/theme-options.component.scss @@ -14,39 +14,69 @@ .theme-options-panel { display: flex; + flex-direction: column; flex: 1 0 auto; - padding: 24px; + padding: 40px 24px 24px 24px; overflow: auto; - .close-button { - position: absolute; - top: 8px; - right: 8px; + .header { + display: flex; + flex: 0 1 auto; + margin-bottom: 32px; + align-items: center; + justify-content: space-between; + + .title { + font-size: 20px; + font-weight: 500; + padding-left: 4px; + } } - h3 { - font-size: 14px; - font-weight: 500; - color: rgba(0, 0, 0, 0.54); + form { + display: flex; + flex: 1 1 auto; + flex-direction: column; + + .group { + display: flex; + flex: 1 0 auto; + flex-direction: column; + position: relative; + border: 1px solid rgba(0, 0, 0, 0.12); + border-radius: 2px; + padding: 28px 16px 8px 16px; + margin: 16px 0; + + h2 { + position: absolute; + top: -11px; + left: 8px; + margin: 0; + padding: 0 8px; + font-size: 16px; + font-weight: 500; + background: white; + color: rgba(0, 0, 0, 0.54); + } + + h3 { + font-size: 14px; + font-weight: 500; + color: rgba(0, 0, 0, 0.54); + margin: 24px 0 16px 0; + padding: 0; + + &:first-of-type { + margin-top: 0; + } + } + } + + .colors { + display: block !important; + width: 100%; + } } - - .mat-divider { - display: block !important; - width: 100%; - margin: 24px 0 16px 0; - } - - .colors { - display: block !important; - width: 100%; - } - } - - .mat-list .mat-list-item { - font-size: 15px; - } - - .mat-divider { - margin: 16px; } } diff --git a/src/@fuse/components/theme-options/theme-options.component.ts b/src/@fuse/components/theme-options/theme-options.component.ts index aa61360a..c5230167 100644 --- a/src/@fuse/components/theme-options/theme-options.component.ts +++ b/src/@fuse/components/theme-options/theme-options.component.ts @@ -1,5 +1,5 @@ import { Component, HostBinding, OnDestroy, OnInit, Renderer2 } from '@angular/core'; -import { FormBuilder, FormGroup } from '@angular/forms'; +import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -17,7 +17,7 @@ import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service'; export class FuseThemeOptionsComponent implements OnInit, OnDestroy { fuseConfig: any; - fuseConfigForm: FormGroup; + form: FormGroup; @HostBinding('class.bar-closed') barClosed: boolean; @@ -58,40 +58,59 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy */ ngOnInit(): void { + // Build the config form + // noinspection TypeScriptValidateTypes + this.form = this._formBuilder.group({ + layout : this._formBuilder.group({ + style : new FormControl(), + width : new FormControl(), + navbar : this._formBuilder.group({ + hidden : new FormControl(), + position : new FormControl(), + folded : new FormControl(), + background: new FormControl() + }), + toolbar: this._formBuilder.group({ + hidden : new FormControl(), + position : new FormControl(), + background: new FormControl() + }), + footer : this._formBuilder.group({ + hidden : new FormControl(), + position : new FormControl(), + background: new FormControl() + }) + }), + customScrollbars: new FormControl(), + routerAnimation : new FormControl() + }); + // Subscribe to the config changes this._fuseConfigService.config .pipe(takeUntil(this._unsubscribeAll)) .subscribe((config) => { - this.fuseConfig = config; - } - ); - // Build the config form - // noinspection TypeScriptValidateTypes - this.fuseConfigForm = this._formBuilder.group({ - layout : this._formBuilder.group({ - style : this.fuseConfig.layout.style, - navigation: this._formBuilder.group({ - position : this.fuseConfig.layout.navigation.position, - folded : this.fuseConfig.layout.navigation.folded, - background: this.fuseConfig.layout.navigation.background - }), - toolbar : this._formBuilder.group({ - position : this.fuseConfig.layout.toolbar.position, - background: this.fuseConfig.layout.toolbar.background - }), - footer : this._formBuilder.group({ - position : this.fuseConfig.layout.footer.position, - background: this.fuseConfig.layout.footer.background - }), - mode : this.fuseConfig.layout.mode - }), - customScrollbars: this.fuseConfig.customScrollbars, - routerAnimation : this.fuseConfig.routerAnimation - }); + // Update the stored config + this.fuseConfig = config; + + // Set the config form values without emitting an event + // so that we don't end up with an infinite loop + this.form.setValue(config, {emitEvent: false}); + }); + + // Subscribe to the specific form value changes (layout.style) + this.form.get('layout.style').valueChanges + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((value) => { + + // Reset the form values based on the + // selected layout style + this._resetFormValues(value); + + }); // Subscribe to the form value changes - this.fuseConfigForm.valueChanges + this.form.valueChanges .pipe(takeUntil(this._unsubscribeAll)) .subscribe((config) => { @@ -99,16 +118,6 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy this._fuseConfigService.config = config; }); - // Subscribe to the layout style value changes - const layoutControls: any = this.fuseConfigForm.controls.layout; - layoutControls.controls.style.valueChanges - .pipe(takeUntil(this._unsubscribeAll)) - .subscribe((layout) => { - - // Reset the config - this.resetConfig(layout); - }); - // Add customize nav item that opens the bar programmatically const customFunctionNavItem = { 'id' : 'custom-function', @@ -147,6 +156,103 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy // @ Private methods // ----------------------------------------------------------------------------------------------------- + /** + * Reset the form values based on the + * selected layout style + * + * @param value + * @private + */ + private _resetFormValues(value): void + { + switch ( value ) + { + // Vertical Layout #1 - Content scroll + case 'vertical-layout-1-content-scroll': + { + this.form.patchValue({ + layout: { + width : 'fullwidth', + navbar : { + hidden : false, + position : 'left', + folded : false, + background: 'mat-fuse-dark-700-bg' + }, + toolbar: { + hidden : false, + position : 'below-static', + background: 'mat-white-500-bg' + }, + footer : { + hidden : false, + position : 'below-static', + background: 'mat-fuse-dark-900-bg' + } + } + }); + + break; + } + + // Vertical Layout #1 - Body scroll + case 'vertical-layout-1-body-scroll': + { + this.form.patchValue({ + layout: { + width : 'fullwidth', + navbar : { + hidden : false, + position : 'left', + folded : false, + background: 'mat-fuse-dark-700-bg' + }, + toolbar: { + hidden : false, + position : 'below', + background: 'mat-white-500-bg' + }, + footer : { + hidden : false, + position : 'below', + background: 'mat-fuse-dark-900-bg' + } + } + }); + + break; + } + + // Vertical Layout #2 + case 'vertical-layout-2': + { + this.form.patchValue({ + layout: { + width : 'fullwidth', + navbar : { + hidden : false, + position : 'left', + folded : false, + background: 'mat-fuse-dark-700-bg' + }, + toolbar: { + hidden : false, + position : 'above-static', + background: 'mat-white-500-bg' + }, + footer : { + hidden : false, + position : 'above-static', + background: 'mat-fuse-dark-900-bg' + } + } + }); + + break; + } + } + } + /** * Toggle sidebar open * @@ -158,86 +264,8 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy this._fuseSidebarService.getSidebar(key).toggleOpen(); } - // ----------------------------------------------------------------------------------------------------- // @ Public methods // ----------------------------------------------------------------------------------------------------- - /** - * Reset the config correctly - */ - resetConfig(layout): void - { - console.log(layout); - - // Check the layout style and reset the - // configuration properly so we don't end - // up with options that don't work with - // selected layout style - switch ( layout ) - { - // Vertical - - // Layout 1 - case 'vertical-layout-1': - { - // Reset the config form - this.fuseConfigForm.patchValue({ - layout: { - navigation: { - folder: false - }, - toolbar : { - position: 'below' - } - } - }); - - break; - } - - // Layout 2 - case 'vertical-layout-2': - { - console.log('resetting the options for vertical-layout-2...'); - - // Reset the config form - this.fuseConfigForm.patchValue({ - layout: { - navigation: { - folder: false - }, - toolbar : { - position: 'below' - } - } - }); - - break; - } - - // Layout 3 - case 'vertical-layout-3': - { - // Reset the config form - this.fuseConfigForm.patchValue({ - layout: { - navigation: { - folder: false - }, - toolbar : { - position: 'below' - } - } - }); - - break; - } - - default : - { - break; - } - } - } } diff --git a/src/@fuse/directives/directives.ts b/src/@fuse/directives/directives.ts index 91c92607..d327ff71 100644 --- a/src/@fuse/directives/directives.ts +++ b/src/@fuse/directives/directives.ts @@ -1,12 +1,14 @@ import { NgModule } from '@angular/core'; import { FuseIfOnDomDirective } from '@fuse/directives/fuse-if-on-dom/fuse-if-on-dom.directive'; +import { FuseInnerScrollDirective } from '@fuse/directives/fuse-inner-scroll/fuse-inner-scroll.directive'; import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive'; import { FuseMatSidenavHelperDirective, FuseMatSidenavTogglerDirective } from '@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.directive'; @NgModule({ declarations: [ FuseIfOnDomDirective, + FuseInnerScrollDirective, FuseMatSidenavHelperDirective, FuseMatSidenavTogglerDirective, FusePerfectScrollbarDirective @@ -14,6 +16,7 @@ import { FuseMatSidenavHelperDirective, FuseMatSidenavTogglerDirective } from '@ imports : [], exports : [ FuseIfOnDomDirective, + FuseInnerScrollDirective, FuseMatSidenavHelperDirective, FuseMatSidenavTogglerDirective, FusePerfectScrollbarDirective diff --git a/src/@fuse/directives/fuse-inner-scroll/fuse-inner-scroll.directive.ts b/src/@fuse/directives/fuse-inner-scroll/fuse-inner-scroll.directive.ts new file mode 100644 index 00000000..17fb6bf5 --- /dev/null +++ b/src/@fuse/directives/fuse-inner-scroll/fuse-inner-scroll.directive.ts @@ -0,0 +1,61 @@ +import { Directive, ElementRef, OnDestroy, OnInit, Renderer2 } from '@angular/core'; + +@Directive({ + selector: '.inner-scroll' +}) +export class FuseInnerScrollDirective implements OnInit, OnDestroy +{ + // Private + private _parent: any; + private _grandParent: any; + + /** + * Constructor + */ + constructor( + private _elementRef: ElementRef, + private _renderer: Renderer2 + ) + { + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + // Get the parent + this._parent = this._renderer.parentNode(this._elementRef.nativeElement); + + // Return, if there is no parent + if ( !this._parent ) + { + return; + } + + // Get the grand parent + this._grandParent = this._renderer.parentNode(this._parent); + + // Add the inner-scroll class + this._renderer.addClass(this._grandParent, 'inner-scroll'); + } + + /** + * On destroy + */ + ngOnDestroy(): void + { + // Return, if there is no parent + if ( !this._parent ) + { + return; + } + + // Remove the inner-scroll class + this._renderer.removeClass(this._grandParent, 'inner-scroll'); + } +} diff --git a/src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts b/src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts index 135e65c8..06bc53a9 100644 --- a/src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts +++ b/src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts @@ -1,8 +1,8 @@ import { AfterViewInit, Directive, ElementRef, HostListener, Input, OnDestroy } from '@angular/core'; +import { NavigationEnd, Router } from '@angular/router'; import { Platform } from '@angular/cdk/platform'; import { Subject } from 'rxjs'; -import { takeUntil } from 'rxjs/operators'; - +import { filter, takeUntil } from 'rxjs/operators'; import PerfectScrollbar from 'perfect-scrollbar'; import { FuseConfigService } from '@fuse/services/config.service'; @@ -18,6 +18,7 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy // Private private _enabled: boolean | ''; + private _updateOnNavigationEnd: boolean | ''; private _unsubscribeAll: Subject; /** @@ -26,11 +27,13 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy * @param {ElementRef} elementRef * @param {FuseConfigService} _fuseConfigService * @param {Platform} _platform + * @param {Router} _router */ constructor( public elementRef: ElementRef, private _fuseConfigService: FuseConfigService, - private _platform: Platform + private _platform: Platform, + private _router: Router ) { // Set the defaults @@ -39,6 +42,7 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy // Set the private defaults this._enabled = false; + this._updateOnNavigationEnd = false; this._unsubscribeAll = new Subject(); } @@ -88,6 +92,27 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy return this._enabled; } + /** + * Update on navigation end + * + * @param value + */ + @Input() + set updateOnNavigationEnd(value) + { + if ( value === '' ) + { + value = true; + } + + this._updateOnNavigationEnd = value; + } + + get updateOnNavigationEnd(): boolean | '' + { + return this._updateOnNavigationEnd; + } + // ----------------------------------------------------------------------------------------------------- // @ Lifecycle hooks // ----------------------------------------------------------------------------------------------------- @@ -106,7 +131,19 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy } ); - // this._init(); + // If updateOnNavigationEnd attribute is provided, + // scroll to the top on every NavigationEnd + if ( this.updateOnNavigationEnd ) + { + this._router.events + .pipe( + takeUntil(this._unsubscribeAll), + filter(event => event instanceof NavigationEnd) + ) + .subscribe(() => { + this.scrollToTop(); + }); + } } /** diff --git a/src/@fuse/scss/partials/_page-layouts.scss b/src/@fuse/scss/partials/_page-layouts.scss index d811517a..9dc38efe 100644 --- a/src/@fuse/scss/partials/_page-layouts.scss +++ b/src/@fuse/scss/partials/_page-layouts.scss @@ -10,9 +10,6 @@ $header-height-sm: 100px !default; $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-height; $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-toolbar-height; -// Top bg image -$top-bg-image: url('assets/images/backgrounds/header-bg.png'); - .page-layout { position: relative; overflow-x: hidden; @@ -34,8 +31,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); right: 0; left: 0; height: $carded-header-height; - background-image: $top-bg-image; - background-size: cover; @include media-breakpoint-down('sm') { height: $carded-header-height-sm; @@ -45,12 +40,20 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); // Fullwidth &.fullwidth { - // Single scroll - &.single-scroll { + // Inner scroll + &.inner-scroll { + flex: 1 1 auto; > .center { - flex: 1 0 auto; - max-height: none; + flex: 1 1 auto; + + .content-card { + flex: 1 1 auto; + + > .content { + flex: 1 1 auto; + } + } } } @@ -58,7 +61,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); > .center { display: flex; flex-direction: column; - flex: 1; + flex: 1 0 auto; position: relative; z-index: 2; padding: 0 32px; @@ -82,7 +85,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); .content-card { display: flex; flex-direction: column; - flex: 1; + flex: 1 0 auto; overflow: hidden; @include mat-elevation(7); @@ -98,28 +101,65 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); > .content { display: flex; - flex: 1; + flex: 1 0 auto; overflow: auto; } } } + + // Tabbed + &.tabbed { + + .center { + width: 100%; + min-width: 0; + + .header { + flex: 1 1 auto; + } + + .content-card { + + .content { + + .mat-tab-group { + overflow: hidden; + + .mat-tab-header { + + .mat-tab-label { + height: 64px; + } + } + + .mat-tab-body { + overflow: hidden; + + .mat-tab-body-content { + overflow: hidden; + + .tab-content { + position: relative; + width: 100%; + height: 100%; + overflow: auto; + } + } + } + } + } + } + } + } } // Left sidenav - Right sidenav &.left-sidenav, &.right-sidenav { - // Single scroll - &.single-scroll { - - > mat-sidenav-container { - flex: 1 0 auto; - } - } - > mat-sidenav-container { display: flex; - flex: 1; + flex: 1 1 auto; background: none; z-index: 2; width: 100%; @@ -127,7 +167,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); .sidenav { display: flex; flex-direction: column; - flex: 1; + flex: 1 1 auto; width: 240px; min-width: 240px; max-width: 240px; @@ -162,7 +202,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); > .mat-sidenav-content, > .mat-drawer-content { display: flex; - flex: 1; + flex: 1 1 auto; height: auto; overflow: visible; @@ -170,7 +210,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); .center { display: flex; flex-direction: column; - flex: 1; + flex: 1 1 auto; position: relative; z-index: 3; margin-left: 32px; @@ -192,7 +232,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); .content-card { display: flex; flex-direction: column; - flex: 1; + flex: 1 1 auto; overflow: hidden; @include mat-elevation(7); @@ -200,7 +240,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); display: flex; justify-content: flex-start; align-items: center; - flex: 1; + flex: 1 1 auto; border-bottom: 1px solid rgba(0, 0, 0, 0.12); height: $carded-toolbar-height; min-height: $carded-toolbar-height; @@ -215,7 +255,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); .content { display: flex; - flex: 1; + flex: 1 1 auto; overflow: auto; } } @@ -223,6 +263,30 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); } } + // Inner scroll + &.inner-scroll { + flex: 1 1 auto; + + > mat-sidenav-container { + + > .mat-sidenav-content, + > .mat-drawer-content { + + > .center { + flex: 1 1 auto; + + .content-card { + flex: 1 1 auto; + + > .content { + flex: 1 1 auto; + } + } + } + } + } + } + // Tabbed &.tabbed { @@ -242,7 +306,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); } .header { - flex: 1; + flex: 1 1 auto; } .content-card { @@ -336,12 +400,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); width: 100%; min-width: 100%; - // Top bg - > .header { - background-image: $top-bg-image; - background-size: cover; - } - // Fullwidth &.fullwidth { overflow: auto; @@ -363,7 +421,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); &.right-sidenav { // Single scroll - &.single-scroll { + /*&.single-scroll { > mat-sidenav-container { flex: 1 0 auto; @@ -374,13 +432,13 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); max-height: none; } } - } + }*/ // Inner Sidenav &.inner-sidenav { > mat-sidenav-container { - flex: 1; + flex: 1 1 auto; .sidenav { @@ -395,7 +453,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); height: auto; .center { - flex: 1; + flex: 1 1 auto; min-height: 100%; @include mat-elevation(0); @@ -411,7 +469,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); > mat-sidenav-container { display: flex; flex-direction: column; - flex: 1; + flex: 1 1 auto; background: none; z-index: 2; width: 100%; @@ -439,7 +497,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); > .mat-sidenav-content, > .mat-drawer-content { display: flex; - flex: 1; + flex: 1 1 auto; height: auto; overflow: visible; max-height: 100%; @@ -448,13 +506,12 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); height: $header-height; min-height: $header-height; max-height: $header-height; - background-image: $top-bg-image; } .center { display: flex; flex-direction: column; - flex: 1; + flex: 1 1 auto; overflow: auto; @include mat-elevation(7); diff --git a/src/@fuse/services/config.service.ts b/src/@fuse/services/config.service.ts index e753f337..fd8fea4b 100644 --- a/src/@fuse/services/config.service.ts +++ b/src/@fuse/services/config.service.ts @@ -107,6 +107,38 @@ export class FuseConfigService // @ Public methods // ----------------------------------------------------------------------------------------------------- + /** + * Set config + * + * @param value + * @param {{emitEvent: boolean}} opts + */ + setConfig(value, opts = {emitEvent: true}): void + { + // Get the value from the behavior subject + let config = this._configSubject.getValue(); + + // Merge the new config + config = _.merge({}, config, value); + + // If emitEvent option is true... + if ( opts.emitEvent === true ) + { + // Notify the observers + this._configSubject.next(config); + } + } + + /** + * Get config + * + * @returns {Observable} + */ + getConfig(): Observable + { + return this._configSubject.asObservable(); + } + /** * Reset to the default config */ diff --git a/src/@fuse/types/fuse-config.ts b/src/@fuse/types/fuse-config.ts index 29be0336..9458a935 100644 --- a/src/@fuse/types/fuse-config.ts +++ b/src/@fuse/types/fuse-config.ts @@ -2,20 +2,23 @@ export interface FuseConfig { layout: { style: string, - navigation: { - position: 'left' | 'right' | 'top' | 'none', + width: 'fullwidth' | 'boxed', + navbar: { + hidden: boolean, folded: boolean, + position: 'left' | 'right' | 'top', background: string }, toolbar: { - position: 'above' | 'above-sticky' | 'below' | 'below-sticky' | 'none', + hidden: boolean, + position: 'above' | 'above-static' | 'above-sticky' | 'above-fixed' | 'below' | 'below-static' | 'below-sticky' | 'below-fixed', background: string } footer: { - position: 'above' | 'below' | 'below-sticky' | 'none', + hidden: boolean, + position: 'above' | 'above-static' | 'above-sticky' | 'above-fixed' | 'below' | 'below-static' | 'below-sticky' | 'below-fixed', background: string - }, - mode: 'fullwidth' | 'boxed' + } }; customScrollbars: boolean; routerAnimation: 'fadeIn' | 'slideUp' | 'slideDown' | 'slideRight' | 'slideLeft' | 'none'; diff --git a/src/app/app.component.html b/src/app/app.component.html index 871dc3d7..669f1e7c 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,6 +1,11 @@ - - - + + + + + + + + @@ -8,9 +13,9 @@ - - - + + + @@ -19,6 +24,6 @@ settings - + \ No newline at end of file diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 292e233c..42a78d3d 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -3,6 +3,7 @@ display: flex; flex: 1 1 auto; width: 100%; + height: 100%; min-width: 0; .theme-options-button { @@ -28,4 +29,10 @@ opacity: 1; } } + + .theme-options-sidebar { + width: 360px; + min-width: 360px; + max-width: 360px; + } } \ No newline at end of file diff --git a/src/app/fuse-config/index.ts b/src/app/fuse-config/index.ts index 93dc6e53..96ad2856 100644 --- a/src/app/fuse-config/index.ts +++ b/src/app/fuse-config/index.ts @@ -10,21 +10,24 @@ import { FuseConfig } from '@fuse/types'; export const fuseConfig: FuseConfig = { layout : { - style : 'vertical-layout-1', - navigation: { + style : 'vertical-layout-1-content-scroll', + width : 'fullwidth', + navbar : { + hidden : false, position : 'left', folded : false, background: 'mat-fuse-dark-700-bg' }, - toolbar : { - position : 'below', + toolbar : { + hidden : false, + position : 'below-static', background: 'mat-white-500-bg' }, - footer : { - position : 'below', + footer : { + hidden : false, + position : 'below-static', background: 'mat-fuse-dark-900-bg' - }, - mode : 'fullwidth' + } }, customScrollbars: true, routerAnimation : 'fadeIn' diff --git a/src/app/layout/components/content/content.component.scss b/src/app/layout/components/content/content.component.scss index 32e80fa3..33f85511 100644 --- a/src/app/layout/components/content/content.component.scss +++ b/src/app/layout/components/content/content.component.scss @@ -1,11 +1,12 @@ content { - display: flex; - flex-direction: column; - flex: 1 1 auto; + display:flex; z-index: 1; + flex: 1 0 auto; > *:not(router-outlet) { display: flex; - flex: 1 1 auto; + flex: 1 0 auto; + width: 100%; + min-width: 100%; } } \ No newline at end of file diff --git a/src/app/layout/components/toolbar/toolbar.component.ts b/src/app/layout/components/toolbar/toolbar.component.ts index b2fdf441..ac21c3de 100644 --- a/src/app/layout/components/toolbar/toolbar.component.ts +++ b/src/app/layout/components/toolbar/toolbar.component.ts @@ -123,8 +123,8 @@ export class ToolbarComponent implements OnInit, OnDestroy this._fuseConfigService.config .pipe(takeUntil(this._unsubscribeAll)) .subscribe((settings) => { - this.horizontalNav = settings.layout.navigation.position === 'top'; - this.noNav = settings.layout.navigation.position === 'none'; + this.horizontalNav = settings.layout.navbar.position === 'top'; + this.noNav = settings.layout.navbar.position === 'none'; }); // Set the selected language from default languages diff --git a/src/app/layout/layout.module.ts b/src/app/layout/layout.module.ts index 0030580c..008361c7 100644 --- a/src/app/layout/layout.module.ts +++ b/src/app/layout/layout.module.ts @@ -1,19 +1,22 @@ import { NgModule } from '@angular/core'; -import { VerticalLayout1Module } from 'app/layout/vertical/layout-1/layout-1.module'; +import { VerticalLayout1BodyScrollModule } from 'app/layout/vertical/layout-1/body-scroll/body-scroll.module'; +import { VerticalLayout1ContentScrollModule } from 'app/layout/vertical/layout-1/content-scroll/content-scroll.module'; + import { VerticalLayout2Module } from 'app/layout/vertical/layout-2/layout-2.module'; -import { VerticalLayout3Module } from 'app/layout/vertical/layout-3/layout-3.module'; @NgModule({ imports: [ - VerticalLayout1Module, - VerticalLayout2Module, - VerticalLayout3Module + VerticalLayout1BodyScrollModule, + VerticalLayout1ContentScrollModule, + + VerticalLayout2Module ], exports: [ - VerticalLayout1Module, - VerticalLayout2Module, - VerticalLayout3Module + VerticalLayout1BodyScrollModule, + VerticalLayout1ContentScrollModule, + + VerticalLayout2Module ] }) export class LayoutModule diff --git a/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.html b/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.html new file mode 100644 index 00000000..aea612bd --- /dev/null +++ b/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.html @@ -0,0 +1,115 @@ +
+ + + + + + + +
+ + + + + + + +
+ + + + + + + +
+ + + + + + + + + + + + + + + + + +
+ + + + + + + +
+ + + + + + + +
+ + + + + + + +
+ + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/app/layout/vertical/layout-3/layout-3.component.scss b/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.scss similarity index 93% rename from src/app/layout/vertical/layout-3/layout-3.component.scss rename to src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.scss index a6d52354..fbe43795 100644 --- a/src/app/layout/vertical/layout-3/layout-3.component.scss +++ b/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.scss @@ -1,9 +1,10 @@ @import "src/@fuse/scss/fuse"; -vertical-layout-3 { +vertical-layout-1-body-scroll { display: flex; flex: 1 1 auto; width: 100%; + height: 100%; #main { position: relative; @@ -11,6 +12,7 @@ vertical-layout-3 { flex: 1 1 auto; flex-direction: column; width: 100%; + height: 100%; z-index: 1; // Container 1 (Scrollable) @@ -42,4 +44,4 @@ vertical-layout-3 { } } } -} +} \ No newline at end of file diff --git a/src/app/layout/vertical/layout-1/layout-1.component.ts b/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.ts similarity index 86% rename from src/app/layout/vertical/layout-1/layout-1.component.ts rename to src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.ts index 07c58e02..54892576 100644 --- a/src/app/layout/vertical/layout-1/layout-1.component.ts +++ b/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.ts @@ -6,12 +6,12 @@ import { FuseConfigService } from '@fuse/services/config.service'; import { navigation } from 'app/navigation/navigation'; @Component({ - selector : 'vertical-layout-1', - templateUrl : './layout-1.component.html', - styleUrls : ['./layout-1.component.scss'], + selector : 'vertical-layout-1-body-scroll', + templateUrl : './body-scroll.component.html', + styleUrls : ['./body-scroll.component.scss'], encapsulation: ViewEncapsulation.None }) -export class VerticalLayout1Component implements OnInit, OnDestroy +export class VerticalLayout1BodyScrollComponent implements OnInit, OnDestroy { fuseConfig: any; navigation: any; diff --git a/src/app/layout/vertical/layout-3/layout-3.module.ts b/src/app/layout/vertical/layout-1/body-scroll/body-scroll.module.ts similarity index 71% rename from src/app/layout/vertical/layout-3/layout-3.module.ts rename to src/app/layout/vertical/layout-1/body-scroll/body-scroll.module.ts index a0d16277..e942d517 100644 --- a/src/app/layout/vertical/layout-3/layout-3.module.ts +++ b/src/app/layout/vertical/layout-1/body-scroll/body-scroll.module.ts @@ -1,4 +1,5 @@ import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; import { FuseSidebarModule } from '@fuse/components'; import { FuseSharedModule } from '@fuse/shared.module'; @@ -9,13 +10,15 @@ import { NavbarModule } from 'app/layout/components/navbar/navbar.module'; import { QuickPanelModule } from 'app/layout/components/quick-panel/quick-panel.module'; import { ToolbarModule } from 'app/layout/components/toolbar/toolbar.module'; -import { VerticalLayout3Component } from 'app/layout/vertical/layout-3/layout-3.component'; +import { VerticalLayout1BodyScrollComponent } from 'app/layout/vertical/layout-1/body-scroll/body-scroll.component'; @NgModule({ declarations: [ - VerticalLayout3Component + VerticalLayout1BodyScrollComponent ], imports : [ + RouterModule, + FuseSharedModule, FuseSidebarModule, @@ -26,9 +29,9 @@ import { VerticalLayout3Component } from 'app/layout/vertical/layout-3/layout-3. ToolbarModule ], exports : [ - VerticalLayout3Component + VerticalLayout1BodyScrollComponent ] }) -export class VerticalLayout3Module +export class VerticalLayout1BodyScrollModule { } diff --git a/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.html b/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.html new file mode 100644 index 00000000..9d1217cf --- /dev/null +++ b/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.html @@ -0,0 +1,115 @@ +
+ + + + + + + +
+ + + + + + + +
+ + + + + + + +
+ + + + + + + + + + + + + + + + + +
+ + + + + + + +
+ + + + + + + +
+ + + + + + + +
+ + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.scss b/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.scss new file mode 100644 index 00000000..0af78cae --- /dev/null +++ b/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.scss @@ -0,0 +1,61 @@ +@import "src/@fuse/scss/fuse"; + +vertical-layout-1-content-scroll { + display: flex; + flex: 1 1 auto; + width: 100%; + height: 100%; + + #main { + position: relative; + display: flex; + flex: 1 1 auto; + flex-direction: column; + width: 100%; + height: 100%; + z-index: 1; + + // Container 1 + > .container { + position: relative; + display: flex; + flex: 1 1 auto; + width: 100%; + min-height: 0; + min-width: 0; + + // Container 2 + > .container { + position: relative; + display: flex; + flex: 1 1 auto; + flex-direction: column; + min-width: 0; + + // Container 3 (Scrollable) + > .container { + position: relative; + display: flex; + flex: 1 1 auto; + flex-direction: column; + transform: translateZ(0); + overflow-x: hidden; + overflow-y: auto; + + // Content component + content { + + &.inner-scroll { + flex: 1 1 auto; + min-height: 0; + + > *:not(router-outlet) { + flex: 1 1 auto; + } + } + } + } + } + } + } +} \ No newline at end of file diff --git a/src/app/layout/vertical/layout-3/layout-3.component.ts b/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.ts similarity index 86% rename from src/app/layout/vertical/layout-3/layout-3.component.ts rename to src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.ts index d99091b4..82c0d145 100644 --- a/src/app/layout/vertical/layout-3/layout-3.component.ts +++ b/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.ts @@ -6,12 +6,12 @@ import { FuseConfigService } from '@fuse/services/config.service'; import { navigation } from 'app/navigation/navigation'; @Component({ - selector : 'vertical-layout-3', - templateUrl : './layout-3.component.html', - styleUrls : ['./layout-3.component.scss'], + selector : 'vertical-layout-1-content-scroll', + templateUrl : './content-scroll.component.html', + styleUrls : ['./content-scroll.component.scss'], encapsulation: ViewEncapsulation.None }) -export class VerticalLayout3Component implements OnInit, OnDestroy +export class VerticalLayout1ContentScrollComponent implements OnInit, OnDestroy { fuseConfig: any; navigation: any; diff --git a/src/app/layout/vertical/layout-1/layout-1.module.ts b/src/app/layout/vertical/layout-1/content-scroll/content-scroll.module.ts similarity index 70% rename from src/app/layout/vertical/layout-1/layout-1.module.ts rename to src/app/layout/vertical/layout-1/content-scroll/content-scroll.module.ts index ed5c7c96..9ba7418b 100644 --- a/src/app/layout/vertical/layout-1/layout-1.module.ts +++ b/src/app/layout/vertical/layout-1/content-scroll/content-scroll.module.ts @@ -1,4 +1,5 @@ import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; import { FuseSidebarModule } from '@fuse/components'; import { FuseSharedModule } from '@fuse/shared.module'; @@ -9,13 +10,15 @@ import { NavbarModule } from 'app/layout/components/navbar/navbar.module'; import { QuickPanelModule } from 'app/layout/components/quick-panel/quick-panel.module'; import { ToolbarModule } from 'app/layout/components/toolbar/toolbar.module'; -import { VerticalLayout1Component } from 'app/layout/vertical/layout-1/layout-1.component'; +import { VerticalLayout1ContentScrollComponent } from 'app/layout/vertical/layout-1/content-scroll/content-scroll.component'; @NgModule({ declarations: [ - VerticalLayout1Component + VerticalLayout1ContentScrollComponent ], imports : [ + RouterModule, + FuseSharedModule, FuseSidebarModule, @@ -26,9 +29,9 @@ import { VerticalLayout1Component } from 'app/layout/vertical/layout-1/layout-1. ToolbarModule ], exports : [ - VerticalLayout1Component + VerticalLayout1ContentScrollComponent ] }) -export class VerticalLayout1Module +export class VerticalLayout1ContentScrollModule { } diff --git a/src/app/layout/vertical/layout-1/layout-1.component.html b/src/app/layout/vertical/layout-1/layout-1.component.html deleted file mode 100644 index b826ef61..00000000 --- a/src/app/layout/vertical/layout-1/layout-1.component.html +++ /dev/null @@ -1,81 +0,0 @@ -
- - - - - - - -
- - - - - - - -
- - - - - - - -
- - - - - - - - - - - - - -
- - - -
- - - -
- - - -
- - - - - - - -
- - - -
- - - -
- - - - - - \ No newline at end of file diff --git a/src/app/layout/vertical/layout-1/layout-1.component.scss b/src/app/layout/vertical/layout-1/layout-1.component.scss deleted file mode 100644 index b0990b8a..00000000 --- a/src/app/layout/vertical/layout-1/layout-1.component.scss +++ /dev/null @@ -1,117 +0,0 @@ -@import "src/@fuse/scss/fuse"; - -vertical-layout-1 { - display: flex; - flex: 1 1 auto; - width: 100%; - - #main { - position: relative; - display: flex; - flex: 1 1 auto; - flex-direction: column; - width: 100%; - z-index: 1; - - // Container 1 - > .container { - position: relative; - display: flex; - flex: 1 1 auto; - width: 100%; - - // Container 2 - > .container { - position: relative; - display: flex; - flex: 1 1 auto; - flex-direction: column; - min-width: 0; - - // Container 3 (Scrollable) - > .container { - position: relative; - display: flex; - flex: 1 1 auto; - flex-direction: column; - transform: translateZ(0); - } - } - } - } -} - -vertical-layout-111 { - display: flex; - flex-direction: column; - width: 100%; - height: 100%; - - /* > .mat-sidenav-container { - display: flex; - flex: 1; - - > .mat-sidenav-content, - > .mat-drawer-content { - display: flex; - flex: 1; - overflow: hidden; - height: 100vh;*/ - - @include media-breakpoint-down('sm') { - height: auto !important; - } - - #main-content { - display: flex; - flex: 1; - flex-direction: column; - overflow: hidden; - background: #FAFAFA; - - #wrapper { - display: flex; - position: relative; - flex: 1; - overflow: hidden; - - .content-wrapper { - display: flex; - flex-direction: column; - flex: 1; - overflow: hidden; - - content { - position: relative; - display: flex; - flex: 1; - flex-direction: row; - width: 100%; - overflow: hidden; - - > *:not(router-outlet):not(.ps__scrollbar-x-rail):not(.ps__scrollbar-y-rail) { - display: flex; - flex: 1; - width: 100%; - min-width: 100%; - } - - > *.ng-animating { - - .mat-tab-body { - height: 100vh; - } - } - } - } - //} - //} - } - } - - &[fuse-layout-mode="boxed"] { - max-width: 1200px; - margin: 0 auto; - @include mat-elevation(8); - } -} diff --git a/src/app/layout/vertical/layout-2/layout-2.component.html b/src/app/layout/vertical/layout-2/layout-2.component.html index 22587f0a..7b719f1f 100644 --- a/src/app/layout/vertical/layout-2/layout-2.component.html +++ b/src/app/layout/vertical/layout-2/layout-2.component.html @@ -1,76 +1,54 @@
- - - + + + - + -
+
- - - - - + + + + +
- - - + + + - + -
+ + + - - - - - - - - - - - - -
- - - -
- - - -
+ + + - +
- - - - - + + + + +
- - -
+ + + - +
@@ -78,4 +56,46 @@ - \ No newline at end of file + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/app/layout/vertical/layout-2/layout-2.component.scss b/src/app/layout/vertical/layout-2/layout-2.component.scss index d1496150..b863500e 100644 --- a/src/app/layout/vertical/layout-2/layout-2.component.scss +++ b/src/app/layout/vertical/layout-2/layout-2.component.scss @@ -4,6 +4,7 @@ vertical-layout-2 { display: flex; flex: 1 1 auto; width: 100%; + height: 100%; #main { position: relative; @@ -11,43 +12,37 @@ vertical-layout-2 { flex: 1 1 auto; flex-direction: column; width: 100%; + height: 100%; z-index: 1; - // Container 1 + // Container 1 (Scrollable) > .container { position: relative; display: flex; flex: 1 1 auto; + flex-direction: column; width: 100%; + overflow-x: hidden; + overflow-y: auto; + transform: translateZ(0); // Container 2 > .container { position: relative; display: flex; - flex: 1 1 auto; - flex-direction: column; + flex: 1 0 auto; + width: 100%; min-width: 0; + padding: 32px; - // Container 3 (Scrollable) - > .container { - position: relative; - display: flex; + // Content component + > content { flex: 1 1 auto; - flex-direction: column; - transform: translateZ(0); - overflow-x: hidden; - overflow-y: auto; + min-width: 0; - // Content component - content { - flex: 1 0 auto; - - > *:not(router-outlet) { - flex: 1 0 auto; - } - } + @include mat-elevation(3); } } } } -} +} \ No newline at end of file diff --git a/src/app/layout/vertical/layout-2/layout-2.module.ts b/src/app/layout/vertical/layout-2/layout-2.module.ts index 26ed77d1..64c7540f 100644 --- a/src/app/layout/vertical/layout-2/layout-2.module.ts +++ b/src/app/layout/vertical/layout-2/layout-2.module.ts @@ -1,4 +1,5 @@ import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; import { FuseSidebarModule } from '@fuse/components'; import { FuseSharedModule } from '@fuse/shared.module'; @@ -16,6 +17,8 @@ import { VerticalLayout2Component } from 'app/layout/vertical/layout-2/layout-2. VerticalLayout2Component ], imports : [ + RouterModule, + FuseSharedModule, FuseSidebarModule, diff --git a/src/app/layout/vertical/layout-3/layout-3.component.html b/src/app/layout/vertical/layout-3/layout-3.component.html deleted file mode 100644 index 422f2cbd..00000000 --- a/src/app/layout/vertical/layout-3/layout-3.component.html +++ /dev/null @@ -1,81 +0,0 @@ -
- - - - - - - -
- - - - - - - -
- - - - - - - -
- - - - - - - - - - - - - -
- - - -
- - - - - - - -
- - - -
- - - -
- - - -
- - - -
- - - - - - \ No newline at end of file diff --git a/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html b/src/app/main/ui/page-layouts/carded/full-width-1/full-width-1.component.html similarity index 94% rename from src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html rename to src/app/main/ui/page-layouts/carded/full-width-1/full-width-1.component.html index 803bdda8..5e08db5f 100644 --- a/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html +++ b/src/app/main/ui/page-layouts/carded/full-width-1/full-width-1.component.html @@ -9,7 +9,7 @@
-

Fullwidth with container scroll

+

Full width with content scroll

diff --git a/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.scss b/src/app/main/ui/page-layouts/carded/full-width-1/full-width-1.component.scss similarity index 100% rename from src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.scss rename to src/app/main/ui/page-layouts/carded/full-width-1/full-width-1.component.scss diff --git a/src/app/main/ui/page-layouts/carded/full-width-1/full-width-1.component.ts b/src/app/main/ui/page-layouts/carded/full-width-1/full-width-1.component.ts new file mode 100644 index 00000000..5a3e0daf --- /dev/null +++ b/src/app/main/ui/page-layouts/carded/full-width-1/full-width-1.component.ts @@ -0,0 +1,16 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'carded-fullwidth-1', + templateUrl: './full-width-1.component.html', + styleUrls : ['./full-width-1.component.scss'] +}) +export class CardedFullWidth1Component +{ + /** + * Constructor + */ + constructor() + { + } +} diff --git a/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.html b/src/app/main/ui/page-layouts/carded/full-width-2/full-width-2.component.html similarity index 88% rename from src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.html rename to src/app/main/ui/page-layouts/carded/full-width-2/full-width-2.component.html index f228732b..a9a45f3a 100644 --- a/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.html +++ b/src/app/main/ui/page-layouts/carded/full-width-2/full-width-2.component.html @@ -1,4 +1,4 @@ -
+
@@ -9,7 +9,7 @@
-

Fullwidth with content scroll

+

Full width with inner scroll

diff --git a/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.scss b/src/app/main/ui/page-layouts/carded/full-width-2/full-width-2.component.scss similarity index 100% rename from src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.scss rename to src/app/main/ui/page-layouts/carded/full-width-2/full-width-2.component.scss diff --git a/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.ts b/src/app/main/ui/page-layouts/carded/full-width-2/full-width-2.component.ts similarity index 67% rename from src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.ts rename to src/app/main/ui/page-layouts/carded/full-width-2/full-width-2.component.ts index f05d08d6..fa38a5db 100644 --- a/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.ts +++ b/src/app/main/ui/page-layouts/carded/full-width-2/full-width-2.component.ts @@ -2,8 +2,8 @@ import { Component } from '@angular/core'; @Component({ selector : 'carded-fullwidth-2', - templateUrl: './fullwidth-2.component.html', - styleUrls : ['./fullwidth-2.component.scss'] + templateUrl: './full-width-2.component.html', + styleUrls : ['./full-width-2.component.scss'] }) export class CardedFullWidth2Component { diff --git a/src/app/main/ui/page-layouts/carded/full-width-tabbed-1/full-width-tabbed-1.component.html b/src/app/main/ui/page-layouts/carded/full-width-tabbed-1/full-width-tabbed-1.component.html new file mode 100644 index 00000000..b5f75269 --- /dev/null +++ b/src/app/main/ui/page-layouts/carded/full-width-tabbed-1/full-width-tabbed-1.component.html @@ -0,0 +1,115 @@ +
+ + +
+ + + +
+ + +
+

Full width with tabs and content scroll

+
+ + + +
+ + +
+ + + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + + +
+ + +
+ + +
+ + +
diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.scss b/src/app/main/ui/page-layouts/carded/full-width-tabbed-1/full-width-tabbed-1.component.scss similarity index 100% rename from src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.scss rename to src/app/main/ui/page-layouts/carded/full-width-tabbed-1/full-width-tabbed-1.component.scss diff --git a/src/app/main/ui/page-layouts/carded/full-width-tabbed-1/full-width-tabbed-1.component.ts b/src/app/main/ui/page-layouts/carded/full-width-tabbed-1/full-width-tabbed-1.component.ts new file mode 100644 index 00000000..2da39a05 --- /dev/null +++ b/src/app/main/ui/page-layouts/carded/full-width-tabbed-1/full-width-tabbed-1.component.ts @@ -0,0 +1,16 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'carded-fullwidth-tabbed-1', + templateUrl: './full-width-tabbed-1.component.html', + styleUrls : ['./full-width-tabbed-1.component.scss'] +}) +export class CardedFullWidthTabbed1Component +{ + /** + * Constructor + */ + constructor() + { + } +} diff --git a/src/app/main/ui/page-layouts/carded/full-width-tabbed-2/full-width-tabbed-2.component.html b/src/app/main/ui/page-layouts/carded/full-width-tabbed-2/full-width-tabbed-2.component.html new file mode 100644 index 00000000..0c008df2 --- /dev/null +++ b/src/app/main/ui/page-layouts/carded/full-width-tabbed-2/full-width-tabbed-2.component.html @@ -0,0 +1,115 @@ +
+ + +
+ + + +
+ + +
+

Full width with tabs and inner scroll

+
+ + + +
+ + +
+ + + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + + +
+ + +
+ + +
+ + +
diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.scss b/src/app/main/ui/page-layouts/carded/full-width-tabbed-2/full-width-tabbed-2.component.scss similarity index 100% rename from src/app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.scss rename to src/app/main/ui/page-layouts/carded/full-width-tabbed-2/full-width-tabbed-2.component.scss diff --git a/src/app/main/ui/page-layouts/carded/full-width-tabbed-2/full-width-tabbed-2.component.ts b/src/app/main/ui/page-layouts/carded/full-width-tabbed-2/full-width-tabbed-2.component.ts new file mode 100644 index 00000000..dc746bb4 --- /dev/null +++ b/src/app/main/ui/page-layouts/carded/full-width-tabbed-2/full-width-tabbed-2.component.ts @@ -0,0 +1,16 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'carded-fullwidth-tabbed-2', + templateUrl: './full-width-tabbed-2.component.html', + styleUrls : ['./full-width-tabbed-2.component.scss'] +}) +export class CardedFullWidthTabbed2Component +{ + /** + * Constructor + */ + constructor() + { + } +} diff --git a/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.ts b/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.ts deleted file mode 100644 index 7e1616e6..00000000 --- a/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.ts +++ /dev/null @@ -1,86 +0,0 @@ -import { Component, OnDestroy, OnInit } from '@angular/core'; -import { takeUntil } from 'rxjs/operators'; -import { Subject } from 'rxjs'; - -import { FuseConfigService } from '@fuse/services/config.service'; -import { FuseMatchMediaService } from '@fuse/services/match-media.service'; - -@Component({ - selector : 'carded-fullwidth', - templateUrl: './fullwidth.component.html', - styleUrls : ['./fullwidth.component.scss'] -}) -export class CardedFullWidthComponent implements OnInit, OnDestroy -{ - // Private - private _unsubscribeAll: Subject; - - /** - * Constructor - * - * @param {FuseConfigService} _fuseConfigService - * @param {FuseMatchMediaService} _fuseMatchMediaService - */ - constructor( - private _fuseConfigService: FuseConfigService, - private _fuseMatchMediaService: FuseMatchMediaService - ) - { - // Configure the layout - this._fuseConfigService.config = { - layout: { - containerScroll: false - } - }; - - // Set the private defaults - this._unsubscribeAll = new Subject(); - } - - // ----------------------------------------------------------------------------------------------------- - // @ Lifecycle hooks - // ----------------------------------------------------------------------------------------------------- - - /** - * On init - */ - ngOnInit(): void - { - // Enable the containerScroll on small screen - // devices to get more screen real estate - this._fuseMatchMediaService.onMediaChange - .pipe(takeUntil(this._unsubscribeAll)) - .subscribe((alias) => { - - // If 'xs' - if ( alias === 'xs' ) - { - // Set the containerScroll to true - this._fuseConfigService.config = { - layout: { - containerScroll: true - } - }; - } - else - { - // Set the containerScroll to false (route default) - this._fuseConfigService.config = { - layout: { - containerScroll: false - } - }; - } - }); - } - - /** - * On destroy - */ - ngOnDestroy(): void - { - // Unsubscribe from all subscriptions - this._unsubscribeAll.next(); - this._unsubscribeAll.complete(); - } -} diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html b/src/app/main/ui/page-layouts/carded/left-sidenav-1/left-sidenav-1.component.html similarity index 90% rename from src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html rename to src/app/main/ui/page-layouts/carded/left-sidenav-1/left-sidenav-1.component.html index 7a7a65f1..b982e7c0 100644 --- a/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html +++ b/src/app/main/ui/page-layouts/carded/left-sidenav-1/left-sidenav-1.component.html @@ -1,4 +1,4 @@ -
+
@@ -17,7 +17,7 @@ -
+
@@ -52,7 +52,7 @@ -
+
diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.scss b/src/app/main/ui/page-layouts/carded/left-sidenav-1/left-sidenav-1.component.scss similarity index 100% rename from src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.scss rename to src/app/main/ui/page-layouts/carded/left-sidenav-1/left-sidenav-1.component.scss diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav-1/left-sidenav-1.component.ts b/src/app/main/ui/page-layouts/carded/left-sidenav-1/left-sidenav-1.component.ts new file mode 100644 index 00000000..1b1d69b9 --- /dev/null +++ b/src/app/main/ui/page-layouts/carded/left-sidenav-1/left-sidenav-1.component.ts @@ -0,0 +1,17 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'carded-left-sidenav-1', + templateUrl: './left-sidenav-1.component.html', + styleUrls : ['./left-sidenav-1.component.scss'] +}) +export class CardedLeftSidenav1Component +{ + /** + * Constructor + */ + constructor() + { + } + +} diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.ts b/src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.ts deleted file mode 100644 index e715bb04..00000000 --- a/src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector : 'carded-left-sidenav-2-tabbed', - templateUrl: './left-sidenav-2-tabbed.component.html', - styleUrls : ['./left-sidenav-2-tabbed.component.scss'] -}) -export class CardedLeftSidenav2TabbedComponent -{ - /** - * Constructor - */ - constructor() - { - } - -} diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html b/src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html index faa84817..5f828a44 100644 --- a/src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html +++ b/src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html @@ -1,4 +1,4 @@ -
+
@@ -32,7 +32,7 @@
-

Left sidenav with container scroll

+

Left sidenav with inner scroll

diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.html b/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-1/left-sidenav-tabbed-1.component.html similarity index 82% rename from src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.html rename to src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-1/left-sidenav-tabbed-1.component.html index 575e5515..37159c86 100644 --- a/src/app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.html +++ b/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-1/left-sidenav-tabbed-1.component.html @@ -1,4 +1,4 @@ -
+
@@ -17,7 +17,7 @@ -
+
@@ -40,7 +40,7 @@ menu -

Left sidenav with tabs and container scroll

+

Left sidenav with tabs and content scroll

@@ -56,7 +56,7 @@ -
+
@@ -64,7 +64,7 @@ -
+
@@ -72,7 +72,7 @@ -
+
@@ -80,7 +80,7 @@ -
+
@@ -88,7 +88,7 @@ -
+
@@ -96,7 +96,7 @@ -
+
@@ -104,7 +104,7 @@ -
+
@@ -112,7 +112,7 @@ -
+
@@ -120,7 +120,7 @@ -
+
@@ -128,7 +128,7 @@ -
+
@@ -148,4 +148,4 @@ -
\ No newline at end of file +
diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.scss b/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-1/left-sidenav-tabbed-1.component.scss similarity index 100% rename from src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.scss rename to src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-1/left-sidenav-tabbed-1.component.scss diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-1/left-sidenav-tabbed-1.component.ts b/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-1/left-sidenav-tabbed-1.component.ts new file mode 100644 index 00000000..eee50265 --- /dev/null +++ b/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-1/left-sidenav-tabbed-1.component.ts @@ -0,0 +1,17 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'carded-left-sidenav-tabbed-1', + templateUrl: './left-sidenav-tabbed-1.component.html', + styleUrls : ['./left-sidenav-tabbed-1.component.scss'] +}) +export class CardedLeftSidenavTabbed1Component +{ + /** + * Constructor + */ + constructor() + { + } + +} diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.html b/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-2/left-sidenav-tabbed-2.component.html similarity index 97% rename from src/app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.html rename to src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-2/left-sidenav-tabbed-2.component.html index fd214075..03e69569 100644 --- a/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.html +++ b/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-2/left-sidenav-tabbed-2.component.html @@ -1,4 +1,4 @@ -
+
@@ -40,7 +40,7 @@ menu -

Left sidenav with tabs and content scroll

+

Left sidenav with tabs and inner scroll

@@ -148,4 +148,4 @@ -
+
\ No newline at end of file diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.scss b/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-2/left-sidenav-tabbed-2.component.scss similarity index 100% rename from src/app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.scss rename to src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-2/left-sidenav-tabbed-2.component.scss diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-2/left-sidenav-tabbed-2.component.ts b/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-2/left-sidenav-tabbed-2.component.ts new file mode 100644 index 00000000..b3cb2bfe --- /dev/null +++ b/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-2/left-sidenav-tabbed-2.component.ts @@ -0,0 +1,17 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'carded-left-sidenav-tabbed-2', + templateUrl: './left-sidenav-tabbed-2.component.html', + styleUrls : ['./left-sidenav-tabbed-2.component.scss'] +}) +export class CardedLeftSidenavTabbed2Component +{ + /** + * Constructor + */ + constructor() + { + } + +} diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.ts b/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.ts deleted file mode 100644 index e1cc2130..00000000 --- a/src/app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector : 'carded-left-sidenav-tabbed', - templateUrl: './left-sidenav-tabbed.component.html', - styleUrls : ['./left-sidenav-tabbed.component.scss'] -}) -export class CardedLeftSidenavTabbedComponent -{ - /** - * Constructor - */ - constructor() - { - } - -} diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.ts b/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.ts deleted file mode 100644 index babe06ef..00000000 --- a/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector : 'carded-left-sidenav', - templateUrl: './left-sidenav.component.html', - styleUrls : ['./left-sidenav.component.scss'] -}) -export class CardedLeftSidenavComponent -{ - /** - * Constructor - */ - constructor() - { - } - -} diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html b/src/app/main/ui/page-layouts/carded/right-sidenav-1/right-sidenav-1.component.html similarity index 90% rename from src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html rename to src/app/main/ui/page-layouts/carded/right-sidenav-1/right-sidenav-1.component.html index 1e0d37d9..f6bf47f2 100644 --- a/src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html +++ b/src/app/main/ui/page-layouts/carded/right-sidenav-1/right-sidenav-1.component.html @@ -1,4 +1,4 @@ -
+
@@ -31,7 +31,7 @@ -
+
@@ -55,7 +55,7 @@ -
+
diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.scss b/src/app/main/ui/page-layouts/carded/right-sidenav-1/right-sidenav-1.component.scss similarity index 100% rename from src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.scss rename to src/app/main/ui/page-layouts/carded/right-sidenav-1/right-sidenav-1.component.scss diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav-1/right-sidenav-1.component.ts b/src/app/main/ui/page-layouts/carded/right-sidenav-1/right-sidenav-1.component.ts new file mode 100644 index 00000000..7ce474ea --- /dev/null +++ b/src/app/main/ui/page-layouts/carded/right-sidenav-1/right-sidenav-1.component.ts @@ -0,0 +1,17 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'carded-right-sidenav-1', + templateUrl: './right-sidenav-1.component.html', + styleUrls : ['./right-sidenav-1.component.scss'] +}) +export class CardedRightSidenav1Component +{ + /** + * Constructor + */ + constructor() + { + } + +} diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.ts b/src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.ts deleted file mode 100644 index 83585df2..00000000 --- a/src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector : 'carded-right-sidenav-2-tabbed', - templateUrl: './right-sidenav-2-tabbed.component.html', - styleUrls : ['./right-sidenav-2-tabbed.component.scss'] -}) -export class CardedRightSidenav2TabbedComponent -{ - /** - * Constructor - */ - constructor() - { - } - -} diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html b/src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html index 7e080983..35e5cf2b 100644 --- a/src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html +++ b/src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html @@ -1,4 +1,4 @@ -
+
@@ -11,7 +11,7 @@
-

Right sidenav with container scroll

+

Right sidenav with inner scroll

diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.html b/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-1/right-sidenav-tabbed-1.component.html similarity index 82% rename from src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.html rename to src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-1/right-sidenav-tabbed-1.component.html index 056ae1cf..5fe94776 100644 --- a/src/app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.html +++ b/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-1/right-sidenav-tabbed-1.component.html @@ -1,4 +1,4 @@ -
+
@@ -19,7 +19,7 @@ menu -

Right sidenav with tabs and container scroll

+

Right sidenav with tabs and content scroll

@@ -35,7 +35,7 @@ -
+
@@ -43,7 +43,7 @@ -
+
@@ -51,7 +51,7 @@ -
+
@@ -59,7 +59,7 @@ -
+
@@ -67,7 +67,7 @@ -
+
@@ -75,7 +75,7 @@ -
+
@@ -83,7 +83,7 @@ -
+
@@ -91,7 +91,7 @@ -
+
@@ -99,7 +99,7 @@ -
+
@@ -107,7 +107,7 @@ -
+
@@ -136,7 +136,7 @@ -
+
diff --git a/src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.scss b/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-1/right-sidenav-tabbed-1.component.scss similarity index 100% rename from src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.scss rename to src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-1/right-sidenav-tabbed-1.component.scss diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-1/right-sidenav-tabbed-1.component.ts b/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-1/right-sidenav-tabbed-1.component.ts new file mode 100644 index 00000000..40ae7782 --- /dev/null +++ b/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-1/right-sidenav-tabbed-1.component.ts @@ -0,0 +1,17 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'carded-right-sidenav-tabbed-1', + templateUrl: './right-sidenav-tabbed-1.component.html', + styleUrls : ['./right-sidenav-tabbed-1.component.scss'] +}) +export class CardedRightSidenavTabbed1Component +{ + /** + * Constructor + */ + constructor() + { + } + +} diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.html b/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-2/right-sidenav-tabbed-2.component.html similarity index 97% rename from src/app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.html rename to src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-2/right-sidenav-tabbed-2.component.html index 3364858d..d56483ae 100644 --- a/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.html +++ b/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-2/right-sidenav-tabbed-2.component.html @@ -1,4 +1,4 @@ -
+
@@ -19,7 +19,7 @@ menu -

Right sidenav with tabs and content scroll

+

Right sidenav with tabs and inner scroll

diff --git a/src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.scss b/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-2/right-sidenav-tabbed-2.component.scss similarity index 100% rename from src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.scss rename to src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-2/right-sidenav-tabbed-2.component.scss diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-2/right-sidenav-tabbed-2.component.ts b/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-2/right-sidenav-tabbed-2.component.ts new file mode 100644 index 00000000..33f58358 --- /dev/null +++ b/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-2/right-sidenav-tabbed-2.component.ts @@ -0,0 +1,17 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'carded-right-sidenav-tabbed-2', + templateUrl: './right-sidenav-tabbed-2.component.html', + styleUrls : ['./right-sidenav-tabbed-2.component.scss'] +}) +export class CardedRightSidenavTabbed2Component +{ + /** + * Constructor + */ + constructor() + { + } + +} diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.ts b/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.ts deleted file mode 100644 index 2e5dedfe..00000000 --- a/src/app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector : 'carded-right-sidenav-tabbed', - templateUrl: './right-sidenav-tabbed.component.html', - styleUrls : ['./right-sidenav-tabbed.component.scss'] -}) -export class CardedRightSidenavTabbedComponent -{ - /** - * Constructor - */ - constructor() - { - } - -} diff --git a/src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.ts b/src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.ts deleted file mode 100644 index 7ea8b054..00000000 --- a/src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector : 'carded-right-sidenav', - templateUrl: './right-sidenav.component.html', - styleUrls : ['./right-sidenav.component.scss'] -}) -export class CardedRightSidenavComponent -{ - /** - * Constructor - */ - constructor() - { - } - -} diff --git a/src/app/main/ui/page-layouts/page-layouts.module.ts b/src/app/main/ui/page-layouts/page-layouts.module.ts index 45041b57..89295b23 100644 --- a/src/app/main/ui/page-layouts/page-layouts.module.ts +++ b/src/app/main/ui/page-layouts/page-layouts.module.ts @@ -5,74 +5,84 @@ import { MatButtonModule, MatIconModule, MatSidenavModule, MatTabsModule } from import { FuseSharedModule } from '@fuse/shared.module'; import { FuseDemoModule } from '@fuse/components/demo/demo.module'; -import { CardedFullWidthComponent } from 'app/main/ui/page-layouts/carded/fullwidth/fullwidth.component'; -import { CardedFullWidth2Component } from 'app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component'; -import { CardedLeftSidenavComponent } from 'app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component'; -import { CardedLeftSidenavTabbedComponent } from 'app/main/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component'; +import { CardedFullWidth1Component } from 'app/main/ui/page-layouts/carded/full-width-1/full-width-1.component'; +import { CardedFullWidth2Component } from 'app/main/ui/page-layouts/carded/full-width-2/full-width-2.component'; +import { CardedFullWidthTabbed1Component } from 'app/main/ui/page-layouts/carded/full-width-tabbed-1/full-width-tabbed-1.component'; +import { CardedFullWidthTabbed2Component } from 'app/main/ui/page-layouts/carded/full-width-tabbed-2/full-width-tabbed-2.component'; +import { CardedLeftSidenav1Component } from 'app/main/ui/page-layouts/carded/left-sidenav-1/left-sidenav-1.component'; import { CardedLeftSidenav2Component } from 'app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component'; -import { CardedLeftSidenav2TabbedComponent } from 'app/main/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component'; -import { CardedRightSidenavComponent } from 'app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component'; -import { CardedRightSidenavTabbedComponent } from 'app/main/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component'; +import { CardedLeftSidenavTabbed1Component } from 'app/main/ui/page-layouts/carded/left-sidenav-tabbed-1/left-sidenav-tabbed-1.component'; +import { CardedLeftSidenavTabbed2Component } from 'app/main/ui/page-layouts/carded/left-sidenav-tabbed-2/left-sidenav-tabbed-2.component'; +import { CardedRightSidenav1Component } from 'app/main/ui/page-layouts/carded/right-sidenav-1/right-sidenav-1.component'; import { CardedRightSidenav2Component } from 'app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component'; -import { CardedRightSidenav2TabbedComponent } from 'app/main/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component'; -import { SimpleFullWidthComponent } from 'app/main/ui/page-layouts/simple/fullwidth/fullwidth.component'; -import { SimpleLeftSidenavComponent } from 'app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component'; +import { CardedRightSidenavTabbed1Component } from 'app/main/ui/page-layouts/carded/right-sidenav-tabbed-1/right-sidenav-tabbed-1.component'; +import { CardedRightSidenavTabbed2Component } from 'app/main/ui/page-layouts/carded/right-sidenav-tabbed-2/right-sidenav-tabbed-2.component'; +import { SimpleFullWidth1Component } from 'app/main/ui/page-layouts/simple/full-width-1/full-width-1.component'; +import { SimpleLeftSidenav1Component } from 'app/main/ui/page-layouts/simple/left-sidenav-1/left-sidenav-1.component'; import { SimpleLeftSidenav2Component } from 'app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component'; import { SimpleLeftSidenav3Component } from 'app/main/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component'; -import { SimpleRightSidenavComponent } from 'app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component'; +import { SimpleRightSidenav1Component } from 'app/main/ui/page-layouts/simple/right-sidenav-1/right-sidenav-1.component'; import { SimpleRightSidenav2Component } from 'app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component'; import { SimpleRightSidenav3Component } from 'app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component'; -import { TabbedComponent } from 'app/main/ui/page-layouts/simple/tabbed/tabbed.component'; +import { Tabbed1Component } from 'app/main/ui/page-layouts/simple/tabbed-1/tabbed-1.component'; import { BlankComponent } from 'app/main/ui/page-layouts/blank/blank.component'; const routes: Routes = [ { - path : 'page-layouts/carded/full-width', - component: CardedFullWidthComponent + path : 'page-layouts/carded/full-width-1', + component: CardedFullWidth1Component }, { path : 'page-layouts/carded/full-width-2', component: CardedFullWidth2Component }, { - path : 'page-layouts/carded/left-sidenav', - component: CardedLeftSidenavComponent + path : 'page-layouts/carded/full-width-tabbed-1', + component: CardedFullWidthTabbed1Component }, { - path : 'page-layouts/carded/left-sidenav-tabbed', - component: CardedLeftSidenavTabbedComponent + path : 'page-layouts/carded/full-width-tabbed-2', + component: CardedFullWidthTabbed2Component + }, + { + path : 'page-layouts/carded/left-sidenav-1', + component: CardedLeftSidenav1Component + }, + { + path : 'page-layouts/carded/left-sidenav-tabbed-1', + component: CardedLeftSidenavTabbed1Component }, { path : 'page-layouts/carded/left-sidenav-2', component: CardedLeftSidenav2Component }, { - path : 'page-layouts/carded/left-sidenav-2-tabbed', - component: CardedLeftSidenav2TabbedComponent + path : 'page-layouts/carded/left-sidenav-tabbed-2', + component: CardedLeftSidenavTabbed2Component }, { - path : 'page-layouts/carded/right-sidenav', - component: CardedRightSidenavComponent + path : 'page-layouts/carded/right-sidenav-1', + component: CardedRightSidenav1Component }, { - path : 'page-layouts/carded/right-sidenav-tabbed', - component: CardedRightSidenavTabbedComponent + path : 'page-layouts/carded/right-sidenav-tabbed-1', + component: CardedRightSidenavTabbed1Component }, { path : 'page-layouts/carded/right-sidenav-2', component: CardedRightSidenav2Component }, { - path : 'page-layouts/carded/right-sidenav-2-tabbed', - component: CardedRightSidenav2TabbedComponent + path : 'page-layouts/carded/right-sidenav-tabbed-2', + component: CardedRightSidenavTabbed2Component }, { - path : 'page-layouts/simple/full-width', - component: SimpleFullWidthComponent + path : 'page-layouts/simple/full-width-1', + component: SimpleFullWidth1Component }, { - path : 'page-layouts/simple/left-sidenav', - component: SimpleLeftSidenavComponent + path : 'page-layouts/simple/left-sidenav-1', + component: SimpleLeftSidenav1Component }, { path : 'page-layouts/simple/left-sidenav-2', @@ -83,8 +93,8 @@ const routes: Routes = [ component: SimpleLeftSidenav3Component }, { - path : 'page-layouts/simple/right-sidenav', - component: SimpleRightSidenavComponent + path : 'page-layouts/simple/right-sidenav-1', + component: SimpleRightSidenav1Component }, { path : 'page-layouts/simple/right-sidenav-2', @@ -95,8 +105,8 @@ const routes: Routes = [ component: SimpleRightSidenav3Component }, { - path : 'page-layouts/simple/tabbed', - component: TabbedComponent + path : 'page-layouts/simple/tabbed-1', + component: Tabbed1Component }, { path : 'page-layouts/blank', @@ -106,24 +116,26 @@ const routes: Routes = [ @NgModule({ declarations: [ - CardedFullWidthComponent, + CardedFullWidth1Component, CardedFullWidth2Component, - CardedLeftSidenavComponent, - CardedLeftSidenavTabbedComponent, + CardedFullWidthTabbed1Component, + CardedFullWidthTabbed2Component, + CardedLeftSidenav1Component, CardedLeftSidenav2Component, - CardedLeftSidenav2TabbedComponent, - CardedRightSidenavComponent, - CardedRightSidenavTabbedComponent, + CardedLeftSidenavTabbed1Component, + CardedLeftSidenavTabbed2Component, + CardedRightSidenav1Component, CardedRightSidenav2Component, - CardedRightSidenav2TabbedComponent, - SimpleFullWidthComponent, - SimpleLeftSidenavComponent, + CardedRightSidenavTabbed1Component, + CardedRightSidenavTabbed2Component, + SimpleFullWidth1Component, + SimpleLeftSidenav1Component, SimpleLeftSidenav2Component, SimpleLeftSidenav3Component, - SimpleRightSidenavComponent, + SimpleRightSidenav1Component, SimpleRightSidenav2Component, SimpleRightSidenav3Component, - TabbedComponent, + Tabbed1Component, BlankComponent ], imports : [ diff --git a/src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.html b/src/app/main/ui/page-layouts/simple/full-width-1/full-width-1.component.html similarity index 92% rename from src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.html rename to src/app/main/ui/page-layouts/simple/full-width-1/full-width-1.component.html index 857770c3..b4270e75 100644 --- a/src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.html +++ b/src/app/main/ui/page-layouts/simple/full-width-1/full-width-1.component.html @@ -2,7 +2,7 @@
-

Fullwidth

+

Full width

diff --git a/src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.scss b/src/app/main/ui/page-layouts/simple/full-width-1/full-width-1.component.scss similarity index 100% rename from src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.scss rename to src/app/main/ui/page-layouts/simple/full-width-1/full-width-1.component.scss diff --git a/src/app/main/ui/page-layouts/simple/full-width-1/full-width-1.component.ts b/src/app/main/ui/page-layouts/simple/full-width-1/full-width-1.component.ts new file mode 100644 index 00000000..74e45bb1 --- /dev/null +++ b/src/app/main/ui/page-layouts/simple/full-width-1/full-width-1.component.ts @@ -0,0 +1,16 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'simple-fullwidth-1', + templateUrl: './full-width-1.component.html', + styleUrls : ['./full-width-1.component.scss'] +}) +export class SimpleFullWidth1Component +{ + /** + * Constructor + */ + constructor() + { + } +} diff --git a/src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.ts b/src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.ts deleted file mode 100644 index d0c7414d..00000000 --- a/src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector : 'simple-fullwidth', - templateUrl: './fullwidth.component.html', - styleUrls : ['./fullwidth.component.scss'] -}) -export class SimpleFullWidthComponent -{ - /** - * Constructor - */ - constructor() - { - } -} diff --git a/src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html b/src/app/main/ui/page-layouts/simple/left-sidenav-1/left-sidenav-1.component.html similarity index 86% rename from src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html rename to src/app/main/ui/page-layouts/simple/left-sidenav-1/left-sidenav-1.component.html index 4020d025..15f928df 100644 --- a/src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html +++ b/src/app/main/ui/page-layouts/simple/left-sidenav-1/left-sidenav-1.component.html @@ -1,4 +1,4 @@ -
+
@@ -6,7 +6,7 @@ -
+
@@ -16,7 +16,7 @@ -
+
diff --git a/src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.scss b/src/app/main/ui/page-layouts/simple/left-sidenav-1/left-sidenav-1.component.scss similarity index 100% rename from src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.scss rename to src/app/main/ui/page-layouts/simple/left-sidenav-1/left-sidenav-1.component.scss diff --git a/src/app/main/ui/page-layouts/simple/left-sidenav-1/left-sidenav-1.component.ts b/src/app/main/ui/page-layouts/simple/left-sidenav-1/left-sidenav-1.component.ts new file mode 100644 index 00000000..5a1a9bfe --- /dev/null +++ b/src/app/main/ui/page-layouts/simple/left-sidenav-1/left-sidenav-1.component.ts @@ -0,0 +1,17 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'simple-left-sidenav-1', + templateUrl: './left-sidenav-1.component.html', + styleUrls : ['./left-sidenav-1.component.scss'] +}) +export class SimpleLeftSidenav1Component +{ + /** + * Constructor + */ + constructor() + { + } + +} diff --git a/src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html b/src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html index bc6a8ff9..5c4b6a07 100644 --- a/src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html +++ b/src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html @@ -1,12 +1,16 @@ -
+
- - +
+ + + +
@@ -24,7 +28,7 @@
-

Left sidenav with container scroll

+

Left sidenav with inner scroll

diff --git a/src/app/main/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.html b/src/app/main/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.html index d2afe5d2..23434a82 100644 --- a/src/app/main/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.html +++ b/src/app/main/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.html @@ -1,4 +1,4 @@ -
+
@@ -10,7 +10,7 @@
-

Left inner sidenav with content scroll

+

Left inner sidenav with inner scroll

diff --git a/src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.ts b/src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.ts deleted file mode 100644 index 682b638a..00000000 --- a/src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector : 'simple-left-sidenav', - templateUrl: './left-sidenav.component.html', - styleUrls : ['./left-sidenav.component.scss'] -}) -export class SimpleLeftSidenavComponent -{ - /** - * Constructor - */ - constructor() - { - } - -} diff --git a/src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html b/src/app/main/ui/page-layouts/simple/right-sidenav-1/right-sidenav-1.component.html similarity index 100% rename from src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html rename to src/app/main/ui/page-layouts/simple/right-sidenav-1/right-sidenav-1.component.html diff --git a/src/app/main/ui/page-layouts/simple/right-sidenav-1/right-sidenav-1.component.scss b/src/app/main/ui/page-layouts/simple/right-sidenav-1/right-sidenav-1.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/main/ui/page-layouts/simple/right-sidenav-1/right-sidenav-1.component.ts b/src/app/main/ui/page-layouts/simple/right-sidenav-1/right-sidenav-1.component.ts new file mode 100644 index 00000000..c022174f --- /dev/null +++ b/src/app/main/ui/page-layouts/simple/right-sidenav-1/right-sidenav-1.component.ts @@ -0,0 +1,17 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'simple-right-sidenav-1', + templateUrl: './right-sidenav-1.component.html', + styleUrls : ['./right-sidenav-1.component.scss'] +}) +export class SimpleRightSidenav1Component +{ + /** + * Constructor + */ + constructor() + { + } + +} diff --git a/src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html b/src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html index e4454157..ddc677d5 100644 --- a/src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html +++ b/src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html @@ -1,4 +1,4 @@ -
+
@@ -15,7 +15,7 @@
-

Right sidenav with container scroll

+

Right sidenav with inner scroll

@@ -33,10 +33,14 @@ - - +
+ + + +
diff --git a/src/app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.html b/src/app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.html index 07c94ab6..47d8d815 100644 --- a/src/app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.html +++ b/src/app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.ts b/src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.ts deleted file mode 100644 index bd3ab81d..00000000 --- a/src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector : 'simple-right-sidenav', - templateUrl: './right-sidenav.component.html', - styleUrls : ['./right-sidenav.component.scss'] -}) -export class SimpleRightSidenavComponent -{ - /** - * Constructor - */ - constructor() - { - } - -} diff --git a/src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.html b/src/app/main/ui/page-layouts/simple/tabbed-1/tabbed-1.component.html similarity index 100% rename from src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.html rename to src/app/main/ui/page-layouts/simple/tabbed-1/tabbed-1.component.html diff --git a/src/app/main/ui/page-layouts/simple/tabbed-1/tabbed-1.component.scss b/src/app/main/ui/page-layouts/simple/tabbed-1/tabbed-1.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/main/ui/page-layouts/simple/tabbed-1/tabbed-1.component.ts b/src/app/main/ui/page-layouts/simple/tabbed-1/tabbed-1.component.ts new file mode 100644 index 00000000..f5039dde --- /dev/null +++ b/src/app/main/ui/page-layouts/simple/tabbed-1/tabbed-1.component.ts @@ -0,0 +1,17 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'tabbed-1', + templateUrl: './tabbed-1.component.html', + styleUrls : ['./tabbed-1.component.scss'] +}) +export class Tabbed1Component +{ + /** + * Constructor + */ + constructor() + { + } + +} diff --git a/src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.ts b/src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.ts deleted file mode 100644 index 6e01380f..00000000 --- a/src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector : 'tabbed', - templateUrl: './tabbed.component.html', - styleUrls : ['./tabbed.component.scss'] -}) -export class TabbedComponent -{ - /** - * Constructor - */ - constructor() - { - } - -} diff --git a/src/app/navigation/navigation.ts b/src/app/navigation/navigation.ts index bfd12d41..2ff178f0 100644 --- a/src/app/navigation/navigation.ts +++ b/src/app/navigation/navigation.ts @@ -402,70 +402,82 @@ export const navigation: FuseNavigation[] = [ title : 'Carded', type : 'collapse', badge : { - title: '10', + title: '12', bg : '#525e8a', fg : '#FFFFFF' }, children: [ { - id : 'full-width', - title: 'Full Width', + id : 'full-width-1', + title: 'Full Width #1', type : 'item', - url : '/ui/page-layouts/carded/full-width' + url : '/ui/page-layouts/carded/full-width-1' }, { id : 'full-width-2', - title: 'Full Width 2', + title: 'Full Width #2', type : 'item', url : '/ui/page-layouts/carded/full-width-2' }, { - id : 'left-sidenav', - title: 'Left Sidenav', + id : 'full-width-tabbed-1', + title: 'Full Width Tabbed #1', type : 'item', - url : '/ui/page-layouts/carded/left-sidenav' + url : '/ui/page-layouts/carded/full-width-tabbed-1' }, { - id : 'left-sidenav-tabbed', - title: 'Left Sidenav Tabbed', + id : 'full-width-tabbed-2', + title: 'Full Width Tabbed #2', type : 'item', - url : '/ui/page-layouts/carded/left-sidenav-tabbed' + url : '/ui/page-layouts/carded/full-width-tabbed-2' + }, + { + id : 'left-sidenav-1', + title: 'Left Sidenav #1', + type : 'item', + url : '/ui/page-layouts/carded/left-sidenav-1' }, { id : 'left-sidenav-2', - title: 'Left Sidenav 2', + title: 'Left Sidenav #2', type : 'item', url : '/ui/page-layouts/carded/left-sidenav-2' }, { - id : 'left-sidenav-2-tabbed', - title: 'Left Sidenav 2 Tabbed', + id : 'left-sidenav-tabbed-1', + title: 'Left Sidenav Tabbed #1', type : 'item', - url : '/ui/page-layouts/carded/left-sidenav-2-tabbed' + url : '/ui/page-layouts/carded/left-sidenav-tabbed-1' }, { - id : 'right-sidenav', - title: 'Right Sidenav', + id : 'left-sidenav-tabbed-2', + title: 'Left Sidenav Tabbed #2', type : 'item', - url : '/ui/page-layouts/carded/right-sidenav' + url : '/ui/page-layouts/carded/left-sidenav-tabbed-2' }, { - id : 'right-sidenav-tabbed', - title: 'Right Sidenav Tabbed', + id : 'right-sidenav-1', + title: 'Right Sidenav #1', type : 'item', - url : '/ui/page-layouts/carded/right-sidenav-tabbed' + url : '/ui/page-layouts/carded/right-sidenav-1' }, { id : 'right-sidenav-2', - title: 'Right Sidenav 2', + title: 'Right Sidenav #2', type : 'item', url : '/ui/page-layouts/carded/right-sidenav-2' }, { - id : 'right-sidenav-2-tabbed', - title: 'Right Sidenav 2 Tabbed', + id : 'right-sidenav-tabbed-1', + title: 'Right Sidenav Tabbed #1', type : 'item', - url : '/ui/page-layouts/carded/right-sidenav-2-tabbed' + url : '/ui/page-layouts/carded/right-sidenav-tabbed-1' + }, + { + id : 'right-sidenav-tabbed-2', + title: 'Right Sidenav Tabbed #2', + type : 'item', + url : '/ui/page-layouts/carded/right-sidenav-tabbed-2' } ] }, @@ -480,52 +492,52 @@ export const navigation: FuseNavigation[] = [ }, children: [ { - id : 'full-width', - title: 'Full Width', + id : 'full-width-1', + title: 'Full Width #1', type : 'item', - url : '/ui/page-layouts/simple/full-width' + url : '/ui/page-layouts/simple/full-width-1' }, { - id : 'left-sidenav', - title: 'Left Sidenav', + id : 'left-sidenav-1', + title: 'Left Sidenav #1', type : 'item', - url : '/ui/page-layouts/simple/left-sidenav' + url : '/ui/page-layouts/simple/left-sidenav-1' }, { id : 'left-sidenav-2', - title: 'Left Sidenav 2', + title: 'Left Sidenav #2', type : 'item', url : '/ui/page-layouts/simple/left-sidenav-2' }, { id : 'left-sidenav-3', - title: 'Left Sidenav 3', + title: 'Left Sidenav #3', type : 'item', url : '/ui/page-layouts/simple/left-sidenav-3' }, { - id : 'right-sidenav', - title: 'Right Sidenav', + id : 'right-sidenav-1', + title: 'Right Sidenav #1', type : 'item', - url : '/ui/page-layouts/simple/right-sidenav' + url : '/ui/page-layouts/simple/right-sidenav-1' }, { id : 'right-sidenav-2', - title: 'Right Sidenav 2', + title: 'Right Sidenav #2', type : 'item', url : '/ui/page-layouts/simple/right-sidenav-2' }, { id : 'right-sidenav-3', - title: 'Right Sidenav 3', + title: 'Right Sidenav #3', type : 'item', url : '/ui/page-layouts/simple/right-sidenav-3' }, { - id : 'tabbed', - title: 'Tabbed', + id : 'tabbed-1', + title: 'Tabbed #1', type : 'item', - url : '/ui/page-layouts/simple/tabbed' + url : '/ui/page-layouts/simple/tabbed-1' } ] }, diff --git a/src/index.html b/src/index.html index 534f3c25..be771e3b 100644 --- a/src/index.html +++ b/src/index.html @@ -181,7 +181,7 @@ - + From ea15a8b832765a3ed1483cbacbf4af867ed9df82 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Thu, 7 Jun 2018 19:10:44 +0300 Subject: [PATCH 25/75] Re-added the accidentally deleted Angular Material Examples module --- ...nent.html => angular-material-examples.component.html} | 0 ...nent.scss => angular-material-examples.component.scss} | 0 ...omponent.ts => angular-material-examples.component.ts} | 6 +++--- ...rial.module.ts => angular-material-examples.module.ts} | 8 ++++---- src/app/main/components/components.module.ts | 6 +++++- src/app/navigation/navigation.ts | 2 +- 6 files changed, 13 insertions(+), 9 deletions(-) rename src/app/main/components/angular-material/{angular-material.component.html => angular-material-examples.component.html} (100%) rename src/app/main/components/angular-material/{angular-material.component.scss => angular-material-examples.component.scss} (100%) rename src/app/main/components/angular-material/{angular-material.component.ts => angular-material-examples.component.ts} (86%) rename src/app/main/components/angular-material/{angular-material.module.ts => angular-material-examples.module.ts} (79%) diff --git a/src/app/main/components/angular-material/angular-material.component.html b/src/app/main/components/angular-material/angular-material-examples.component.html similarity index 100% rename from src/app/main/components/angular-material/angular-material.component.html rename to src/app/main/components/angular-material/angular-material-examples.component.html diff --git a/src/app/main/components/angular-material/angular-material.component.scss b/src/app/main/components/angular-material/angular-material-examples.component.scss similarity index 100% rename from src/app/main/components/angular-material/angular-material.component.scss rename to src/app/main/components/angular-material/angular-material-examples.component.scss diff --git a/src/app/main/components/angular-material/angular-material.component.ts b/src/app/main/components/angular-material/angular-material-examples.component.ts similarity index 86% rename from src/app/main/components/angular-material/angular-material.component.ts rename to src/app/main/components/angular-material/angular-material-examples.component.ts index 4e56c1f2..d8d34a26 100644 --- a/src/app/main/components/angular-material/angular-material.component.ts +++ b/src/app/main/components/angular-material/angular-material-examples.component.ts @@ -7,10 +7,10 @@ import { COMPONENT_MAP } from 'app/main/components/angular-material/example-comp @Component({ selector : 'angular-material', - templateUrl: './angular-material.component.html', - styleUrls : ['./angular-material.component.scss'] + templateUrl: './angular-material-examples.component.html', + styleUrls : ['./angular-material-examples.component.scss'] }) -export class AngularMaterialComponent implements OnInit, OnDestroy +export class AngularMaterialExamplesComponent implements OnInit, OnDestroy { id: string; title: string; diff --git a/src/app/main/components/angular-material/angular-material.module.ts b/src/app/main/components/angular-material/angular-material-examples.module.ts similarity index 79% rename from src/app/main/components/angular-material/angular-material.module.ts rename to src/app/main/components/angular-material/angular-material-examples.module.ts index c82a0729..3da6959e 100644 --- a/src/app/main/components/angular-material/angular-material.module.ts +++ b/src/app/main/components/angular-material/angular-material-examples.module.ts @@ -7,7 +7,7 @@ import { FuseWidgetModule } from '@fuse/components/widget/widget.module'; import { MaterialModule } from 'app/main/components/angular-material/material.module'; import { EXAMPLE_LIST } from 'app/main/components/angular-material/example-components'; -import { AngularMaterialComponent } from 'app/main/components/angular-material/angular-material.component'; +import { AngularMaterialExamplesComponent } from 'app/main/components/angular-material/angular-material-examples.component'; import { ExampleViewerComponent } from 'app/main/components/angular-material/example-viewer/example-viewer'; const routes: Routes = [ @@ -16,7 +16,7 @@ const routes: Routes = [ children: [ { path : ':id', - component: AngularMaterialComponent + component: AngularMaterialExamplesComponent } ] } @@ -25,7 +25,7 @@ const routes: Routes = [ @NgModule({ declarations : [ [...EXAMPLE_LIST], - AngularMaterialComponent, + AngularMaterialExamplesComponent, ExampleViewerComponent ], imports : [ @@ -39,7 +39,7 @@ const routes: Routes = [ ], entryComponents: EXAMPLE_LIST, }) -export class AngularMaterialModule +export class AngularMaterialExamplesModule { } diff --git a/src/app/main/components/components.module.ts b/src/app/main/components/components.module.ts index 0a53c9a7..9e4e3717 100644 --- a/src/app/main/components/components.module.ts +++ b/src/app/main/components/components.module.ts @@ -5,6 +5,8 @@ import { NgxChartsModule } from '@swimlane/ngx-charts'; import { FuseSharedModule } from '@fuse/shared.module'; +import { AngularMaterialExamplesModule } from 'app/main/components/angular-material/angular-material-examples.module'; + import { FuseCountdownModule, FuseHighlightModule, FuseMaterialColorPickerModule, FuseWidgetModule } from '@fuse/components'; import { CardsDocsComponent } from 'app/main/components/cards/cards.component'; import { CountdownDocsComponent } from 'app/main/components/countdown/countdown.component'; @@ -93,7 +95,9 @@ const routes = [ FuseCountdownModule, FuseHighlightModule, FuseMaterialColorPickerModule, - FuseWidgetModule + FuseWidgetModule, + + AngularMaterialExamplesModule ] }) export class ComponentsModule diff --git a/src/app/navigation/navigation.ts b/src/app/navigation/navigation.ts index 2ff178f0..a08e7590 100644 --- a/src/app/navigation/navigation.ts +++ b/src/app/navigation/navigation.ts @@ -685,7 +685,7 @@ export const navigation: FuseNavigation[] = [ children: [ { id : 'badge', - title: 'badge', + title: 'Badge', type : 'item', url : '/components/angular-material/badge' }, From 97f864bb767566f9d24cae9c57ddcc1ef5a2a14c Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Thu, 7 Jun 2018 19:11:06 +0300 Subject: [PATCH 26/75] Small fix in navigation docs --- src/app/main/components/navigation/navigation.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/main/components/navigation/navigation.component.html b/src/app/main/components/navigation/navigation.component.html index aae875dd..25f6d333 100644 --- a/src/app/main/components/navigation/navigation.component.html +++ b/src/app/main/components/navigation/navigation.component.html @@ -99,7 +99,7 @@ 'children' : [ { 'title': 'ngx-datatable', - 'type' : 'nav-item', + 'type' : 'item', 'url' : '/components/datatables/ngx-datatable' } ] From ba35ebae948966cfa3e4118728b53647d0cb7e4a Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Thu, 7 Jun 2018 19:11:21 +0300 Subject: [PATCH 27/75] Fix: Images in Angular Material cards --- src/@fuse/scss/partials/_angular-material-fix.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/@fuse/scss/partials/_angular-material-fix.scss b/src/@fuse/scss/partials/_angular-material-fix.scss index b56e66f8..cca511e7 100644 --- a/src/@fuse/scss/partials/_angular-material-fix.scss +++ b/src/@fuse/scss/partials/_angular-material-fix.scss @@ -84,4 +84,9 @@ mat-chip { min-width: 0 !important; min-height: 0 !important; } +} + +// Fix: Mat-card-image requires a bigger width than 100% +.mat-card-image { + max-width: none !important; } \ No newline at end of file From a39021188eca4d5ea3700a818fafe37fd622773a Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Thu, 7 Jun 2018 20:49:29 +0300 Subject: [PATCH 28/75] Renamed 'collapse' to 'collapsable' in navigation types Renamed navigation component files Small fix in shortcuts ('nav-item' to 'item') --- .../collapsable.component.html} | 11 +++++----- .../collapsable.component.scss} | 0 .../collapsable.component.ts} | 10 ++++----- .../item.component.html} | 0 .../item.component.scss} | 0 .../item.component.ts} | 4 ++-- .../navigation/navigation.component.html | 6 ++--- .../navigation/navigation.module.ts | 14 ++++++------ .../collapsable.component.html} | 5 +++-- .../collapsable.component.scss} | 0 .../collapsable.component.ts} | 10 ++++----- .../group.component.html} | 3 ++- .../group.component.scss} | 0 .../group.component.ts} | 4 ++-- .../item.component.html} | 0 .../item.component.scss} | 0 .../item.component.ts} | 4 ++-- .../shortcuts/shortcuts.component.ts | 8 +++---- src/@fuse/scss/partials/_navigation.scss | 16 +++++++------- src/@fuse/types/fuse-navigation.ts | 2 +- src/app/navigation/navigation.ts | 22 +++++++++---------- 21 files changed, 61 insertions(+), 58 deletions(-) rename src/@fuse/components/navigation/horizontal/{nav-collapse/nav-horizontal-collapse.component.html => collapsable/collapsable.component.html} (78%) rename src/@fuse/components/navigation/horizontal/{nav-collapse/nav-horizontal-collapse.component.scss => collapsable/collapsable.component.scss} (100%) rename src/@fuse/components/navigation/horizontal/{nav-collapse/nav-horizontal-collapse.component.ts => collapsable/collapsable.component.ts} (86%) rename src/@fuse/components/navigation/horizontal/{nav-item/nav-horizontal-item.component.html => item/item.component.html} (100%) rename src/@fuse/components/navigation/horizontal/{nav-item/nav-horizontal-item.component.scss => item/item.component.scss} (100%) rename src/@fuse/components/navigation/horizontal/{nav-item/nav-horizontal-item.component.ts => item/item.component.ts} (73%) rename src/@fuse/components/navigation/vertical/{nav-collapse/nav-vertical-collapse.component.html => collapsable/collapsable.component.html} (91%) rename src/@fuse/components/navigation/vertical/{nav-collapse/nav-vertical-collapse.component.scss => collapsable/collapsable.component.scss} (100%) rename src/@fuse/components/navigation/vertical/{nav-collapse/nav-vertical-collapse.component.ts => collapsable/collapsable.component.ts} (95%) rename src/@fuse/components/navigation/vertical/{nav-group/nav-vertical-group.component.html => group/group.component.html} (75%) rename src/@fuse/components/navigation/vertical/{nav-group/nav-vertical-group.component.scss => group/group.component.scss} (100%) rename src/@fuse/components/navigation/vertical/{nav-group/nav-vertical-group.component.ts => group/group.component.ts} (77%) rename src/@fuse/components/navigation/vertical/{nav-item/nav-vertical-item.component.html => item/item.component.html} (100%) rename src/@fuse/components/navigation/vertical/{nav-item/nav-vertical-item.component.scss => item/item.component.scss} (100%) rename src/@fuse/components/navigation/vertical/{nav-item/nav-vertical-item.component.ts => item/item.component.ts} (77%) diff --git a/src/@fuse/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html b/src/@fuse/components/navigation/horizontal/collapsable/collapsable.component.html similarity index 78% rename from src/@fuse/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html rename to src/@fuse/components/navigation/horizontal/collapsable/collapsable.component.html index da55085f..28a5e64b 100644 --- a/src/@fuse/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html +++ b/src/@fuse/components/navigation/horizontal/collapsable/collapsable.component.html @@ -31,18 +31,19 @@ [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}"> {{item.badge.title}} - keyboard_arrow_right + keyboard_arrow_right
-
+
- - + +
diff --git a/src/@fuse/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.scss b/src/@fuse/components/navigation/horizontal/collapsable/collapsable.component.scss similarity index 100% rename from src/@fuse/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.scss rename to src/@fuse/components/navigation/horizontal/collapsable/collapsable.component.scss diff --git a/src/@fuse/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.ts b/src/@fuse/components/navigation/horizontal/collapsable/collapsable.component.ts similarity index 86% rename from src/@fuse/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.ts rename to src/@fuse/components/navigation/horizontal/collapsable/collapsable.component.ts index f0fe6903..4b5cdb9a 100644 --- a/src/@fuse/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.ts +++ b/src/@fuse/components/navigation/horizontal/collapsable/collapsable.component.ts @@ -6,18 +6,18 @@ import { fuseAnimations } from '@fuse/animations'; import { FuseConfigService } from '@fuse/services/config.service'; @Component({ - selector : 'fuse-nav-horizontal-collapse', - templateUrl: './nav-horizontal-collapse.component.html', - styleUrls : ['./nav-horizontal-collapse.component.scss'], + selector : 'fuse-nav-horizontal-collapsable', + templateUrl: './collapsable.component.html', + styleUrls : ['./collapsable.component.scss'], animations : fuseAnimations }) -export class FuseNavHorizontalCollapseComponent implements OnInit, OnDestroy +export class FuseNavHorizontalCollapsableComponent implements OnInit, OnDestroy { fuseConfig: any; isOpen = false; @HostBinding('class') - classes = 'nav-item nav-collapse'; + classes = 'nav-collapsable nav-item'; @Input() item: any; diff --git a/src/@fuse/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html b/src/@fuse/components/navigation/horizontal/item/item.component.html similarity index 100% rename from src/@fuse/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html rename to src/@fuse/components/navigation/horizontal/item/item.component.html diff --git a/src/@fuse/components/navigation/horizontal/nav-item/nav-horizontal-item.component.scss b/src/@fuse/components/navigation/horizontal/item/item.component.scss similarity index 100% rename from src/@fuse/components/navigation/horizontal/nav-item/nav-horizontal-item.component.scss rename to src/@fuse/components/navigation/horizontal/item/item.component.scss diff --git a/src/@fuse/components/navigation/horizontal/nav-item/nav-horizontal-item.component.ts b/src/@fuse/components/navigation/horizontal/item/item.component.ts similarity index 73% rename from src/@fuse/components/navigation/horizontal/nav-item/nav-horizontal-item.component.ts rename to src/@fuse/components/navigation/horizontal/item/item.component.ts index 58e3dab5..ade234a4 100644 --- a/src/@fuse/components/navigation/horizontal/nav-item/nav-horizontal-item.component.ts +++ b/src/@fuse/components/navigation/horizontal/item/item.component.ts @@ -2,8 +2,8 @@ import { Component, HostBinding, Input } from '@angular/core'; @Component({ selector : 'fuse-nav-horizontal-item', - templateUrl: './nav-horizontal-item.component.html', - styleUrls : ['./nav-horizontal-item.component.scss'] + templateUrl: './item.component.html', + styleUrls : ['./item.component.scss'] }) export class FuseNavHorizontalItemComponent { diff --git a/src/@fuse/components/navigation/navigation.component.html b/src/@fuse/components/navigation/navigation.component.html index 10ecaf89..79459998 100644 --- a/src/@fuse/components/navigation/navigation.component.html +++ b/src/@fuse/components/navigation/navigation.component.html @@ -7,7 +7,7 @@ - + @@ -20,8 +20,8 @@ - - + + diff --git a/src/@fuse/components/navigation/navigation.module.ts b/src/@fuse/components/navigation/navigation.module.ts index 12519314..577a1186 100644 --- a/src/@fuse/components/navigation/navigation.module.ts +++ b/src/@fuse/components/navigation/navigation.module.ts @@ -6,11 +6,11 @@ import { MatIconModule, MatRippleModule } from '@angular/material'; import { TranslateModule } from '@ngx-translate/core'; import { FuseNavigationComponent } from './navigation.component'; -import { FuseNavVerticalItemComponent } from './vertical/nav-item/nav-vertical-item.component'; -import { FuseNavVerticalCollapseComponent } from './vertical/nav-collapse/nav-vertical-collapse.component'; -import { FuseNavVerticalGroupComponent } from './vertical/nav-group/nav-vertical-group.component'; -import { FuseNavHorizontalItemComponent } from './horizontal/nav-item/nav-horizontal-item.component'; -import { FuseNavHorizontalCollapseComponent } from './horizontal/nav-collapse/nav-horizontal-collapse.component'; +import { FuseNavVerticalItemComponent } from './vertical/item/item.component'; +import { FuseNavVerticalCollapsableComponent } from './vertical/collapsable/collapsable.component'; +import { FuseNavVerticalGroupComponent } from './vertical/group/group.component'; +import { FuseNavHorizontalItemComponent } from './horizontal/item/item.component'; +import { FuseNavHorizontalCollapsableComponent } from './horizontal/collapsable/collapsable.component'; @NgModule({ imports : [ @@ -29,9 +29,9 @@ import { FuseNavHorizontalCollapseComponent } from './horizontal/nav-collapse/na FuseNavigationComponent, FuseNavVerticalGroupComponent, FuseNavVerticalItemComponent, - FuseNavVerticalCollapseComponent, + FuseNavVerticalCollapsableComponent, FuseNavHorizontalItemComponent, - FuseNavHorizontalCollapseComponent + FuseNavHorizontalCollapsableComponent ] }) export class FuseNavigationModule diff --git a/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html b/src/@fuse/components/navigation/vertical/collapsable/collapsable.component.html similarity index 91% rename from src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html rename to src/@fuse/components/navigation/vertical/collapsable/collapsable.component.html index acc4d0c6..f85fbd4d 100644 --- a/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html +++ b/src/@fuse/components/navigation/vertical/collapsable/collapsable.component.html @@ -47,13 +47,14 @@ [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}"> {{item.badge.title}} - keyboard_arrow_right + keyboard_arrow_right
- +
diff --git a/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.scss b/src/@fuse/components/navigation/vertical/collapsable/collapsable.component.scss similarity index 100% rename from src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.scss rename to src/@fuse/components/navigation/vertical/collapsable/collapsable.component.scss diff --git a/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts b/src/@fuse/components/navigation/vertical/collapsable/collapsable.component.ts similarity index 95% rename from src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts rename to src/@fuse/components/navigation/vertical/collapsable/collapsable.component.ts index 8ef02be0..fbda7a18 100644 --- a/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts +++ b/src/@fuse/components/navigation/vertical/collapsable/collapsable.component.ts @@ -8,18 +8,18 @@ import { fuseAnimations } from '@fuse/animations'; import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; @Component({ - selector : 'fuse-nav-vertical-collapse', - templateUrl: './nav-vertical-collapse.component.html', - styleUrls : ['./nav-vertical-collapse.component.scss'], + selector : 'fuse-nav-vertical-collapsable', + templateUrl: './collapsable.component.html', + styleUrls : ['./collapsable.component.scss'], animations : fuseAnimations }) -export class FuseNavVerticalCollapseComponent implements OnInit, OnDestroy +export class FuseNavVerticalCollapsableComponent implements OnInit, OnDestroy { @Input() item: FuseNavigationItem; @HostBinding('class') - classes = 'nav-collapse nav-item'; + classes = 'nav-collapsable nav-item'; @HostBinding('class.open') public isOpen = false; diff --git a/src/@fuse/components/navigation/vertical/nav-group/nav-vertical-group.component.html b/src/@fuse/components/navigation/vertical/group/group.component.html similarity index 75% rename from src/@fuse/components/navigation/vertical/nav-group/nav-vertical-group.component.html rename to src/@fuse/components/navigation/vertical/group/group.component.html index 0747455c..26820b81 100644 --- a/src/@fuse/components/navigation/vertical/nav-group/nav-vertical-group.component.html +++ b/src/@fuse/components/navigation/vertical/group/group.component.html @@ -7,7 +7,8 @@
- +
diff --git a/src/@fuse/components/navigation/vertical/nav-group/nav-vertical-group.component.scss b/src/@fuse/components/navigation/vertical/group/group.component.scss similarity index 100% rename from src/@fuse/components/navigation/vertical/nav-group/nav-vertical-group.component.scss rename to src/@fuse/components/navigation/vertical/group/group.component.scss diff --git a/src/@fuse/components/navigation/vertical/nav-group/nav-vertical-group.component.ts b/src/@fuse/components/navigation/vertical/group/group.component.ts similarity index 77% rename from src/@fuse/components/navigation/vertical/nav-group/nav-vertical-group.component.ts rename to src/@fuse/components/navigation/vertical/group/group.component.ts index 0959e39d..d43e223e 100644 --- a/src/@fuse/components/navigation/vertical/nav-group/nav-vertical-group.component.ts +++ b/src/@fuse/components/navigation/vertical/group/group.component.ts @@ -4,8 +4,8 @@ import { FuseNavigationItem } from '@fuse/types'; @Component({ selector : 'fuse-nav-vertical-group', - templateUrl: './nav-vertical-group.component.html', - styleUrls : ['./nav-vertical-group.component.scss'] + templateUrl: './group.component.html', + styleUrls : ['./group.component.scss'] }) export class FuseNavVerticalGroupComponent { diff --git a/src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.html b/src/@fuse/components/navigation/vertical/item/item.component.html similarity index 100% rename from src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.html rename to src/@fuse/components/navigation/vertical/item/item.component.html diff --git a/src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.scss b/src/@fuse/components/navigation/vertical/item/item.component.scss similarity index 100% rename from src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.scss rename to src/@fuse/components/navigation/vertical/item/item.component.scss diff --git a/src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.ts b/src/@fuse/components/navigation/vertical/item/item.component.ts similarity index 77% rename from src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.ts rename to src/@fuse/components/navigation/vertical/item/item.component.ts index 9fe5c36c..c807e381 100644 --- a/src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.ts +++ b/src/@fuse/components/navigation/vertical/item/item.component.ts @@ -4,8 +4,8 @@ import { FuseNavigationItem } from '@fuse/types'; @Component({ selector : 'fuse-nav-vertical-item', - templateUrl: './nav-vertical-item.component.html', - styleUrls : ['./nav-vertical-item.component.scss'] + templateUrl: './item.component.html', + styleUrls : ['./item.component.scss'] }) export class FuseNavVerticalItemComponent { diff --git a/src/@fuse/components/shortcuts/shortcuts.component.ts b/src/@fuse/components/shortcuts/shortcuts.component.ts index 9275ae1a..14c45833 100644 --- a/src/@fuse/components/shortcuts/shortcuts.component.ts +++ b/src/@fuse/components/shortcuts/shortcuts.component.ts @@ -95,25 +95,25 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy this.shortcutItems = [ { 'title': 'Calendar', - 'type' : 'nav-item', + 'type' : 'item', 'icon' : 'today', 'url' : '/apps/calendar' }, { 'title': 'Mail', - 'type' : 'nav-item', + 'type' : 'item', 'icon' : 'email', 'url' : '/apps/mail' }, { 'title': 'Contacts', - 'type' : 'nav-item', + 'type' : 'item', 'icon' : 'account_box', 'url' : '/apps/contacts' }, { 'title': 'To-Do', - 'type' : 'nav-item', + 'type' : 'item', 'icon' : 'check_box', 'url' : '/apps/todo' } diff --git a/src/@fuse/scss/partials/_navigation.scss b/src/@fuse/scss/partials/_navigation.scss index a007e38b..4e52dc95 100644 --- a/src/@fuse/scss/partials/_navigation.scss +++ b/src/@fuse/scss/partials/_navigation.scss @@ -58,7 +58,7 @@ transition: opacity 0.2s ease-in-out 0.1s; margin-left: 8px; - + .collapse-arrow { + + .collapsable-arrow { margin-left: 8px; } } @@ -93,7 +93,7 @@ } .nav-link-icon, - .collapse-arrow { + .collapsable-arrow { font-size: 16px; width: 16px; height: 16px; @@ -103,7 +103,7 @@ } } - &.nav-collapse { + &.nav-collapsable { display: block; > .children { @@ -135,7 +135,7 @@ > .nav-item { - &.nav-collapse { + &.nav-collapsable { background: transparent; transition: background 200ms ease-in-out; @@ -149,7 +149,7 @@ > .group-items { - > .nav-collapse { + > .nav-collapsable { background: transparent; transition: background 200ms ease-in-out; @@ -176,7 +176,7 @@ .nav-item { - &.nav-collapse { + &.nav-collapsable { position: relative; .children { @@ -205,13 +205,13 @@ height: 56px; } - &.nav-collapse { + &.nav-collapsable { position: relative; > .nav-link { height: 56px; - .collapse-arrow { + .collapsable-arrow { display: none; } } diff --git a/src/@fuse/types/fuse-navigation.ts b/src/@fuse/types/fuse-navigation.ts index cb915e1e..823d633f 100644 --- a/src/@fuse/types/fuse-navigation.ts +++ b/src/@fuse/types/fuse-navigation.ts @@ -2,7 +2,7 @@ export interface FuseNavigationItem { id: string; title: string; - type: 'item' | 'group' | 'collapse'; + type: 'item' | 'group' | 'collapsable'; translate?: string; icon?: string; hidden?: boolean; diff --git a/src/app/navigation/navigation.ts b/src/app/navigation/navigation.ts index a08e7590..0cfa6601 100644 --- a/src/app/navigation/navigation.ts +++ b/src/app/navigation/navigation.ts @@ -12,7 +12,7 @@ export const navigation: FuseNavigation[] = [ id : 'dashboards', title : 'Dashboards', translate: 'NAV.DASHBOARDS', - type : 'collapse', + type : 'collapsable', icon : 'dashboard', children : [ { @@ -41,7 +41,7 @@ export const navigation: FuseNavigation[] = [ id : 'e-commerce', title : 'E-Commerce', translate: 'NAV.ECOMMERCE', - type : 'collapse', + type : 'collapsable', icon : 'shopping_cart', children : [ { @@ -177,7 +177,7 @@ export const navigation: FuseNavigation[] = [ { id : 'authentication', title : 'Authentication', - type : 'collapse', + type : 'collapsable', icon : 'lock', badge : { title: '10', @@ -257,7 +257,7 @@ export const navigation: FuseNavigation[] = [ { id : 'errors', title : 'Errors', - type : 'collapse', + type : 'collapsable', icon : 'error', children: [ { @@ -277,7 +277,7 @@ export const navigation: FuseNavigation[] = [ { id : 'invoice', title : 'Invoice', - type : 'collapse', + type : 'collapsable', icon : 'receipt', children: [ { @@ -304,7 +304,7 @@ export const navigation: FuseNavigation[] = [ { id : 'pricing', title : 'Pricing', - type : 'collapse', + type : 'collapsable', icon : 'attach_money', children: [ { @@ -394,13 +394,13 @@ export const navigation: FuseNavigation[] = [ { id : 'page-layouts', title : 'Page Layouts', - type : 'collapse', + type : 'collapsable', icon : 'view_quilt', children: [ { id : 'carded', title : 'Carded', - type : 'collapse', + type : 'collapsable', badge : { title: '12', bg : '#525e8a', @@ -484,7 +484,7 @@ export const navigation: FuseNavigation[] = [ { id : 'simple', title : 'Simple', - type : 'collapse', + type : 'collapsable', badge : { title: '8', bg : '#525e8a', @@ -589,7 +589,7 @@ export const navigation: FuseNavigation[] = [ { id : 'angular-material-elements', title : 'Angular Material Elements', - type : 'collapse', + type : 'collapsable', icon : 'layers', children: [ { @@ -927,7 +927,7 @@ export const navigation: FuseNavigation[] = [ { id : 'datatables', title : 'Datatables', - type : 'collapse', + type : 'collapsable', icon : 'border_all', children: [ { From 90fe94a41722c478aecb0c468f1a8e0d57c9ea3b Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Thu, 7 Jun 2018 21:12:12 +0300 Subject: [PATCH 29/75] Added horizontal layout to the new layout system Added boxed layout width --- .../theme-options.component.html | 83 +++++++++++-- .../theme-options/theme-options.component.ts | 28 +++++ src/@fuse/types/fuse-config.ts | 4 +- src/app/app.component.html | 2 +- .../layout-1/layout-1.component.html | 109 ++++++++++-------- .../layout-1/layout-1.component.scss | 101 +++------------- src/app/layout/layout.module.ts | 10 +- .../body-scroll/body-scroll.component.html | 2 +- .../body-scroll/body-scroll.component.scss | 7 ++ .../content-scroll.component.html | 2 +- .../content-scroll.component.scss | 7 ++ .../vertical/layout-2/layout-2.component.html | 2 +- .../vertical/layout-2/layout-2.component.scss | 7 ++ 13 files changed, 213 insertions(+), 151 deletions(-) diff --git a/src/@fuse/components/theme-options/theme-options.component.html b/src/@fuse/components/theme-options/theme-options.component.html index 74fa994a..8f521bfe 100644 --- a/src/@fuse/components/theme-options/theme-options.component.html +++ b/src/@fuse/components/theme-options/theme-options.component.html @@ -27,8 +27,9 @@ Vertical Layout #2 - Horizontal Layout #1 - Horizontal Layout #2 + + Horizontal Layout #1 + @@ -38,7 +39,7 @@ -
+

Layout Width

@@ -82,7 +83,6 @@ Above Below Static - Below Sticky Below Fixed @@ -101,7 +101,6 @@ Above Below Static - Below Sticky Below Fixed @@ -113,7 +112,7 @@ -
+

Layout Width

@@ -156,7 +155,6 @@

Position:

Above Static - Above Sticky Above Fixed Below @@ -175,7 +173,6 @@

Position:

Above Static - Above Sticky Above Fixed Below @@ -188,7 +185,7 @@ -
+

Layout Width

@@ -231,7 +228,6 @@

Position:

Above Static - Above Sticky Above Fixed @@ -249,7 +245,6 @@

Position:

Above Static - Above Sticky Above Fixed @@ -257,6 +252,72 @@ + + + + +
+ +

Layout Width

+ + Fullwidth + Boxed + + +
+ + +
+ +

Navbar

+ + + Hide + + +

Position:

+ + Top + + +
+ + +
+ +

Toolbar

+ + + Hide + + +

Position:

+ + Above + Below + + +
+ + +
+ +

Footer

+ + + Hide + + +

Position:

+ + Above Fixed + Above Static + + +
+ + +
diff --git a/src/@fuse/components/theme-options/theme-options.component.ts b/src/@fuse/components/theme-options/theme-options.component.ts index c5230167..c801768f 100644 --- a/src/@fuse/components/theme-options/theme-options.component.ts +++ b/src/@fuse/components/theme-options/theme-options.component.ts @@ -250,6 +250,34 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy break; } + + // Horizontal Layout #1 + case 'horizontal-layout-1': + { + this.form.patchValue({ + layout: { + width : 'fullwidth', + navbar : { + hidden : false, + position : 'top', + folded : false, + background: 'mat-fuse-dark-700-bg' + }, + toolbar: { + hidden : false, + position : 'above', + background: 'mat-white-500-bg' + }, + footer : { + hidden : false, + position : 'above-fixed', + background: 'mat-fuse-dark-900-bg' + } + } + }); + + break; + } } } diff --git a/src/@fuse/types/fuse-config.ts b/src/@fuse/types/fuse-config.ts index 9458a935..2172caac 100644 --- a/src/@fuse/types/fuse-config.ts +++ b/src/@fuse/types/fuse-config.ts @@ -11,12 +11,12 @@ export interface FuseConfig }, toolbar: { hidden: boolean, - position: 'above' | 'above-static' | 'above-sticky' | 'above-fixed' | 'below' | 'below-static' | 'below-sticky' | 'below-fixed', + position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed', background: string } footer: { hidden: boolean, - position: 'above' | 'above-static' | 'above-sticky' | 'above-fixed' | 'below' | 'below-static' | 'below-sticky' | 'below-fixed', + position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed', background: string } }; diff --git a/src/app/app.component.html b/src/app/app.component.html index 669f1e7c..2048afa4 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -15,7 +15,7 @@ - + diff --git a/src/app/layout/horizontal/layout-1/layout-1.component.html b/src/app/layout/horizontal/layout-1/layout-1.component.html index 1294d2da..1585d402 100644 --- a/src/app/layout/horizontal/layout-1/layout-1.component.html +++ b/src/app/layout/horizontal/layout-1/layout-1.component.html @@ -1,91 +1,100 @@ -
+
- - + + - + + + + + + + + +
- - - + + +
- - - - - - -
- - - - - - +
- -
+ +
- - -
- - -
- - - - - -
- -
+ +
- + - \ No newline at end of file + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + diff --git a/src/app/layout/horizontal/layout-1/layout-1.component.scss b/src/app/layout/horizontal/layout-1/layout-1.component.scss index 1d854f63..bb3a3b3b 100644 --- a/src/app/layout/horizontal/layout-1/layout-1.component.scss +++ b/src/app/layout/horizontal/layout-1/layout-1.component.scss @@ -4,6 +4,7 @@ horizontal-layout-1 { display: flex; flex: 1 1 auto; width: 100%; + height: 100%; #main { position: relative; @@ -11,14 +12,24 @@ horizontal-layout-1 { flex: 1 1 auto; flex-direction: column; width: 100%; + height: 100%; z-index: 1; + // Boxed + &.boxed { + max-width: 1200px; + margin: 0 auto; + @include mat-elevation(8); + } + // Container 1 > .container { position: relative; display: flex; flex: 1 1 auto; width: 100%; + min-height: 0; + min-width: 0; // Container 2 > .container { @@ -35,17 +46,18 @@ horizontal-layout-1 { flex: 1 1 auto; flex-direction: column; transform: translateZ(0); + overflow-x: hidden; + overflow-y: auto; - &.container-scroll { - overflow-x: hidden; - overflow-y: auto; + // Content component + content { - // Content component - content { - flex: 1 0 auto; + &.inner-scroll { + flex: 1 1 auto; + min-height: 0; > *:not(router-outlet) { - flex: 1 0 auto; + flex: 1 1 auto; } } } @@ -54,78 +66,3 @@ horizontal-layout-1 { } } } - -vertical-layout-111 { - display: flex; - flex-direction: column; - width: 100%; - height: 100%; - - /* > .mat-sidenav-container { - display: flex; - flex: 1; - - > .mat-sidenav-content, - > .mat-drawer-content { - display: flex; - flex: 1; - overflow: hidden; - height: 100vh;*/ - - @include media-breakpoint-down('sm') { - height: auto !important; - } - - #main-content { - display: flex; - flex: 1; - flex-direction: column; - overflow: hidden; - background: #FAFAFA; - - #wrapper { - display: flex; - position: relative; - flex: 1; - overflow: hidden; - - .content-wrapper { - display: flex; - flex-direction: column; - flex: 1; - overflow: hidden; - - content { - position: relative; - display: flex; - flex: 1; - flex-direction: row; - width: 100%; - overflow: hidden; - - > *:not(router-outlet):not(.ps__scrollbar-x-rail):not(.ps__scrollbar-y-rail) { - display: flex; - flex: 1; - width: 100%; - min-width: 100%; - } - - > *.ng-animating { - - .mat-tab-body { - height: 100vh; - } - } - } - } - //} - //} - } - } - - &[fuse-layout-mode="boxed"] { - max-width: 1200px; - margin: 0 auto; - @include mat-elevation(8); - } -} diff --git a/src/app/layout/layout.module.ts b/src/app/layout/layout.module.ts index 008361c7..42cd08a8 100644 --- a/src/app/layout/layout.module.ts +++ b/src/app/layout/layout.module.ts @@ -5,18 +5,24 @@ import { VerticalLayout1ContentScrollModule } from 'app/layout/vertical/layout-1 import { VerticalLayout2Module } from 'app/layout/vertical/layout-2/layout-2.module'; +import { HorizontalLayout1Module } from 'app/layout/horizontal/layout-1/layout-1.module'; + @NgModule({ imports: [ VerticalLayout1BodyScrollModule, VerticalLayout1ContentScrollModule, - VerticalLayout2Module + VerticalLayout2Module, + + HorizontalLayout1Module ], exports: [ VerticalLayout1BodyScrollModule, VerticalLayout1ContentScrollModule, - VerticalLayout2Module + VerticalLayout2Module, + + HorizontalLayout1Module ] }) export class LayoutModule diff --git a/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.html b/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.html index aea612bd..fb79bfec 100644 --- a/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.html +++ b/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.scss b/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.scss index fbe43795..951fe8d1 100644 --- a/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.scss +++ b/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.scss @@ -15,6 +15,13 @@ vertical-layout-1-body-scroll { height: 100%; z-index: 1; + // Boxed + &.boxed { + max-width: 1200px; + margin: 0 auto; + @include mat-elevation(8); + } + // Container 1 (Scrollable) > .container { position: relative; diff --git a/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.html b/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.html index 9d1217cf..b0dc5ea4 100644 --- a/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.html +++ b/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.scss b/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.scss index 0af78cae..db1a6bcf 100644 --- a/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.scss +++ b/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.scss @@ -15,6 +15,13 @@ vertical-layout-1-content-scroll { height: 100%; z-index: 1; + // Boxed + &.boxed { + max-width: 1200px; + margin: 0 auto; + @include mat-elevation(8); + } + // Container 1 > .container { position: relative; diff --git a/src/app/layout/vertical/layout-2/layout-2.component.html b/src/app/layout/vertical/layout-2/layout-2.component.html index 7b719f1f..ddb30b83 100644 --- a/src/app/layout/vertical/layout-2/layout-2.component.html +++ b/src/app/layout/vertical/layout-2/layout-2.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/app/layout/vertical/layout-2/layout-2.component.scss b/src/app/layout/vertical/layout-2/layout-2.component.scss index b863500e..cf112512 100644 --- a/src/app/layout/vertical/layout-2/layout-2.component.scss +++ b/src/app/layout/vertical/layout-2/layout-2.component.scss @@ -15,6 +15,13 @@ vertical-layout-2 { height: 100%; z-index: 1; + // Boxed + &.boxed { + max-width: 1200px; + margin: 0 auto; + @include mat-elevation(8); + } + // Container 1 (Scrollable) > .container { position: relative; From 5ed04c3925b04d6060e18d518d773c37aba9f930 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Thu, 7 Jun 2018 21:20:09 +0300 Subject: [PATCH 30/75] Collapsable arrow class name fix --- .../vertical/collapsable/collapsable.component.scss | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/@fuse/components/navigation/vertical/collapsable/collapsable.component.scss b/src/@fuse/components/navigation/vertical/collapsable/collapsable.component.scss index 6fa59f1f..17eb6a38 100644 --- a/src/@fuse/components/navigation/vertical/collapsable/collapsable.component.scss +++ b/src/@fuse/components/navigation/vertical/collapsable/collapsable.component.scss @@ -20,7 +20,7 @@ .nav-link { - .collapse-arrow { + .collapsable-arrow { transition: transform .3s ease-in-out, opacity .25s ease-in-out .1s; transform: rotate(0); } @@ -34,13 +34,9 @@ > .nav-link { - .collapse-arrow { + .collapsable-arrow { transform: rotate(90deg); } } - - > .children { - } - } } From bd79830cb4fefc1e20b1a3a4e7076fe2357c5c6c Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Sat, 9 Jun 2018 14:26:00 +0300 Subject: [PATCH 31/75] Fixed: Toolbar background color issues --- .../components/search-bar/search-bar.component.html | 2 +- .../components/search-bar/search-bar.component.ts | 11 ++++------- .../components/shortcuts/shortcuts.component.html | 2 +- .../components/shortcuts/shortcuts.component.ts | 13 ------------- .../components/toolbar/toolbar.component.html | 2 +- .../components/search-bar/search-bar.component.html | 4 ++-- 6 files changed, 9 insertions(+), 25 deletions(-) diff --git a/src/@fuse/components/search-bar/search-bar.component.html b/src/@fuse/components/search-bar/search-bar.component.html index f64e9d09..a79f270f 100644 --- a/src/@fuse/components/search-bar/search-bar.component.html +++ b/src/@fuse/components/search-bar/search-bar.component.html @@ -1,6 +1,6 @@
-
+
-
+
diff --git a/src/@fuse/components/shortcuts/shortcuts.component.ts b/src/@fuse/components/shortcuts/shortcuts.component.ts index 14c45833..05f49f47 100644 --- a/src/@fuse/components/shortcuts/shortcuts.component.ts +++ b/src/@fuse/components/shortcuts/shortcuts.component.ts @@ -6,7 +6,6 @@ import { takeUntil } from 'rxjs/operators'; import { FuseMatchMediaService } from '@fuse/services/match-media.service'; import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; -import { FuseConfigService } from '@fuse/services/config.service'; @Component({ selector : 'fuse-shortcuts', @@ -20,7 +19,6 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy filteredNavigationItems: any[]; searching: boolean; mobileShortcutsPanelActive: boolean; - toolbarColor: string; @Input() navigation: any; @@ -41,12 +39,10 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy * @param {CookieService} _cookieService * @param {FuseMatchMediaService} _fuseMatchMediaService * @param {FuseNavigationService} _fuseNavigationService - * @param {FuseConfigService} _fuseConfigService * @param {ObservableMedia} _observableMedia */ constructor( private _cookieService: CookieService, - private _fuseConfigService: FuseConfigService, private _fuseMatchMediaService: FuseMatchMediaService, private _fuseNavigationService: FuseNavigationService, private _observableMedia: ObservableMedia, @@ -71,15 +67,6 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy */ ngOnInit(): void { - // Subscribe to config changes - this._fuseConfigService.config - .pipe(takeUntil(this._unsubscribeAll)) - .subscribe( - (config) => { - this.toolbarColor = config.layout.toolbar.background; - } - ); - // Get the navigation items and flatten them this.filteredNavigationItems = this.navigationItems = this._fuseNavigationService.getFlatNavigation(this.navigation); diff --git a/src/app/layout/components/toolbar/toolbar.component.html b/src/app/layout/components/toolbar/toolbar.component.html index d8f7e2b6..e118746c 100644 --- a/src/app/layout/components/toolbar/toolbar.component.html +++ b/src/app/layout/components/toolbar/toolbar.component.html @@ -58,7 +58,7 @@
- +
diff --git a/src/app/main/components/search-bar/search-bar.component.html b/src/app/main/components/search-bar/search-bar.component.html index 069f9eab..bd0f5ab9 100644 --- a/src/app/main/components/search-bar/search-bar.component.html +++ b/src/app/main/components/search-bar/search-bar.component.html @@ -26,7 +26,7 @@

@@ -35,7 +35,7 @@

Outputs

- onInput + input Triggers every time an input occurs within the search bar. Can be used to trigger the actual search mechanism. The $event is the value from the search input. From f8f97f8ad44de4a1044a77f981dde9c887b9ea43 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Sat, 9 Jun 2018 14:43:42 +0300 Subject: [PATCH 32/75] Remove 'inner-scroll' class on small screen devices to give more room to the scroll --- .../fuse-inner-scroll.directive.ts | 59 ++++++++++++++++++- src/@fuse/scss/partials/_page-layouts.scss | 44 -------------- 2 files changed, 57 insertions(+), 46 deletions(-) diff --git a/src/@fuse/directives/fuse-inner-scroll/fuse-inner-scroll.directive.ts b/src/@fuse/directives/fuse-inner-scroll/fuse-inner-scroll.directive.ts index 17fb6bf5..40e6ff41 100644 --- a/src/@fuse/directives/fuse-inner-scroll/fuse-inner-scroll.directive.ts +++ b/src/@fuse/directives/fuse-inner-scroll/fuse-inner-scroll.directive.ts @@ -1,4 +1,8 @@ import { Directive, ElementRef, OnDestroy, OnInit, Renderer2 } from '@angular/core'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; + +import { FuseMatchMediaService } from '@fuse/services/match-media.service'; @Directive({ selector: '.inner-scroll' @@ -8,15 +12,23 @@ export class FuseInnerScrollDirective implements OnInit, OnDestroy // Private private _parent: any; private _grandParent: any; + private _unsubscribeAll: Subject; /** * Constructor + * + * @param {ElementRef} _elementRef + * @param {FuseMatchMediaService} _fuseMediaMatchService + * @param {Renderer2} _renderer */ constructor( private _elementRef: ElementRef, + private _fuseMediaMatchService: FuseMatchMediaService, private _renderer: Renderer2 ) { + // Set the private defaults + this._unsubscribeAll = new Subject(); } // ----------------------------------------------------------------------------------------------------- @@ -40,8 +52,21 @@ export class FuseInnerScrollDirective implements OnInit, OnDestroy // Get the grand parent this._grandParent = this._renderer.parentNode(this._parent); - // Add the inner-scroll class - this._renderer.addClass(this._grandParent, 'inner-scroll'); + // Register to the media query changes + this._fuseMediaMatchService.onMediaChange + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((alias) => { + console.log(alias); + + if ( alias === 'xs' ) + { + this._removeClass(); + } + else + { + this._addClass(); + } + }); } /** @@ -55,6 +80,36 @@ export class FuseInnerScrollDirective implements OnInit, OnDestroy return; } + // Remove the class + this._removeClass(); + + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Add the class name + * + * @private + */ + private _addClass(): void + { + // Add the inner-scroll class + this._renderer.addClass(this._grandParent, 'inner-scroll'); + } + + /** + * Remove the class name + * @private + */ + private _removeClass(): void + { + // Remove the inner-scroll class this._renderer.removeClass(this._grandParent, 'inner-scroll'); } diff --git a/src/@fuse/scss/partials/_page-layouts.scss b/src/@fuse/scss/partials/_page-layouts.scss index 9dc38efe..ea2efb23 100644 --- a/src/@fuse/scss/partials/_page-layouts.scss +++ b/src/@fuse/scss/partials/_page-layouts.scss @@ -552,50 +552,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too @include media-breakpoint-down('xs') { - // Activate single-scroll - &.carded { - - &.fullwidth { - - > .center { - flex: 1 0 auto; - max-height: none; - } - } - - &.left-sidenav, - &.right-sidenav { - - > mat-sidenav-container { - flex: 1 0 auto; - } - } - } - - &.simple { - - &.fullwidth { - - > .content { - flex: 1 0 auto; - } - } - - &.left-sidenav, - &.right-sidenav { - - > mat-sidenav-container { - flex: 1 0 auto !important; - - > .mat-sidenav-content, - > .mat-drawer-content { - flex: 1 0 auto; - } - } - } - } - // End - Activate single-scroll - // Smaller margins &.carded { From 6cc7d03430de5898f2f2918b86a79eb405b8edbb Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Sat, 9 Jun 2018 14:44:50 +0300 Subject: [PATCH 33/75] Removed console.log --- .../directives/fuse-inner-scroll/fuse-inner-scroll.directive.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/@fuse/directives/fuse-inner-scroll/fuse-inner-scroll.directive.ts b/src/@fuse/directives/fuse-inner-scroll/fuse-inner-scroll.directive.ts index 40e6ff41..5b66585d 100644 --- a/src/@fuse/directives/fuse-inner-scroll/fuse-inner-scroll.directive.ts +++ b/src/@fuse/directives/fuse-inner-scroll/fuse-inner-scroll.directive.ts @@ -56,7 +56,6 @@ export class FuseInnerScrollDirective implements OnInit, OnDestroy this._fuseMediaMatchService.onMediaChange .pipe(takeUntil(this._unsubscribeAll)) .subscribe((alias) => { - console.log(alias); if ( alias === 'xs' ) { From 1c8cc3569316a32074eb76f07ef5392ae69b9b2f Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Sat, 9 Jun 2018 14:58:45 +0300 Subject: [PATCH 34/75] Fixed router animations after the layout changes Don't reset the router animation on navigation change --- src/@fuse/animations/index.ts | 64 ++++++++++--------- src/@fuse/services/config.service.ts | 9 ++- .../components/content/content.component.scss | 1 + 3 files changed, 43 insertions(+), 31 deletions(-) diff --git a/src/@fuse/animations/index.ts b/src/@fuse/animations/index.ts index 283c92f3..a33c80aa 100644 --- a/src/@fuse/animations/index.ts +++ b/src/@fuse/animations/index.ts @@ -187,10 +187,14 @@ export const fuseAnimations = [ transition('* => void', animate('300ms ease-in')) ]), + // ----------------------------------------------------------------------------------------------------- + // @ Router animations + // ----------------------------------------------------------------------------------------------------- + trigger('routerTransitionLeft', [ transition('* => *', [ - query('fuse-content > :enter, fuse-content > :leave', [ + query('content > :enter, content > :leave', [ style({ position: 'absolute', top : 0, @@ -199,7 +203,7 @@ export const fuseAnimations = [ right : 0 }) ], {optional: true}), - query('fuse-content > :enter', [ + query('content > :enter', [ style({ transform: 'translateX(100%)', opacity : 0 @@ -207,7 +211,7 @@ export const fuseAnimations = [ ], {optional: true}), sequence([ group([ - query('fuse-content > :leave', [ + query('content > :leave', [ style({ transform: 'translateX(0)', opacity : 1 @@ -218,7 +222,7 @@ export const fuseAnimations = [ opacity : 0 })) ], {optional: true}), - query('fuse-content > :enter', [ + query('content > :enter', [ style({transform: 'translateX(100%)'}), animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)', style({ @@ -227,8 +231,8 @@ export const fuseAnimations = [ })) ], {optional: true}) ]), - query('fuse-content > :leave', animateChild(), {optional: true}), - query('fuse-content > :enter', animateChild(), {optional: true}) + query('content > :leave', animateChild(), {optional: true}), + query('content > :enter', animateChild(), {optional: true}) ]) ]) ]), @@ -236,7 +240,7 @@ export const fuseAnimations = [ trigger('routerTransitionRight', [ transition('* => *', [ - query('fuse-content > :enter, fuse-content > :leave', [ + query('content > :enter, content > :leave', [ style({ position: 'absolute', top : 0, @@ -245,7 +249,7 @@ export const fuseAnimations = [ right : 0 }) ], {optional: true}), - query('fuse-content > :enter', [ + query('content > :enter', [ style({ transform: 'translateX(-100%)', opacity : 0 @@ -253,7 +257,7 @@ export const fuseAnimations = [ ], {optional: true}), sequence([ group([ - query('fuse-content > :leave', [ + query('content > :leave', [ style({ transform: 'translateX(0)', opacity : 1 @@ -264,7 +268,7 @@ export const fuseAnimations = [ opacity : 0 })) ], {optional: true}), - query('fuse-content > :enter', [ + query('content > :enter', [ style({transform: 'translateX(-100%)'}), animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)', style({ @@ -273,8 +277,8 @@ export const fuseAnimations = [ })) ], {optional: true}) ]), - query('fuse-content > :leave', animateChild(), {optional: true}), - query('fuse-content > :enter', animateChild(), {optional: true}) + query('content > :leave', animateChild(), {optional: true}), + query('content > :enter', animateChild(), {optional: true}) ]) ]) ]), @@ -282,7 +286,7 @@ export const fuseAnimations = [ trigger('routerTransitionUp', [ transition('* => *', [ - query('fuse-content > :enter, fuse-content > :leave', [ + query('content > :enter, content > :leave', [ style({ position: 'absolute', top : 0, @@ -291,14 +295,14 @@ export const fuseAnimations = [ right : 0 }) ], {optional: true}), - query('fuse-content > :enter', [ + query('content > :enter', [ style({ transform: 'translateY(100%)', opacity : 0 }) ], {optional: true}), group([ - query('fuse-content > :leave', [ + query('content > :leave', [ style({ transform: 'translateY(0)', opacity : 1 @@ -309,7 +313,7 @@ export const fuseAnimations = [ opacity : 0 })) ], {optional: true}), - query('fuse-content > :enter', [ + query('content > :enter', [ style({transform: 'translateY(100%)'}), animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)', style({ @@ -318,15 +322,15 @@ export const fuseAnimations = [ })) ], {optional: true}) ]), - query('fuse-content > :leave', animateChild(), {optional: true}), - query('fuse-content > :enter', animateChild(), {optional: true}) + query('content > :leave', animateChild(), {optional: true}), + query('content > :enter', animateChild(), {optional: true}) ]) ]), trigger('routerTransitionDown', [ transition('* => *', [ - query('fuse-content > :enter, fuse-content > :leave', [ + query('content > :enter, content > :leave', [ style({ position: 'absolute', top : 0, @@ -335,7 +339,7 @@ export const fuseAnimations = [ right : 0 }) ], {optional: true}), - query('fuse-content > :enter', [ + query('content > :enter', [ style({ transform: 'translateY(-100%)', opacity : 0 @@ -343,7 +347,7 @@ export const fuseAnimations = [ ], {optional: true}), sequence([ group([ - query('fuse-content > :leave', [ + query('content > :leave', [ style({ transform: 'translateY(0)', opacity : 1 @@ -354,7 +358,7 @@ export const fuseAnimations = [ opacity : 0 })) ], {optional: true}), - query('fuse-content > :enter', [ + query('content > :enter', [ style({transform: 'translateY(-100%)'}), animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)', style({ @@ -363,8 +367,8 @@ export const fuseAnimations = [ })) ], {optional: true}) ]), - query('fuse-content > :leave', animateChild(), {optional: true}), - query('fuse-content > :enter', animateChild(), {optional: true}) + query('content > :leave', animateChild(), {optional: true}), + query('content > :enter', animateChild(), {optional: true}) ]) ]) ]), @@ -373,7 +377,7 @@ export const fuseAnimations = [ transition('* => *', group([ - query('fuse-content > :enter, fuse-content > :leave ', [ + query('content > :enter, content > :leave ', [ style({ position: 'absolute', top : 0, @@ -383,12 +387,12 @@ export const fuseAnimations = [ }) ], {optional: true}), - query('fuse-content > :enter', [ + query('content > :enter', [ style({ opacity: 0 }) ], {optional: true}), - query('fuse-content > :leave', [ + query('content > :leave', [ style({ opacity: 1 }), @@ -397,7 +401,7 @@ export const fuseAnimations = [ opacity: 0 })) ], {optional: true}), - query('fuse-content > :enter', [ + query('content > :enter', [ style({ opacity: 0 }), @@ -406,8 +410,8 @@ export const fuseAnimations = [ opacity: 1 })) ], {optional: true}), - query('fuse-content > :enter', animateChild(), {optional: true}), - query('fuse-content > :leave', animateChild(), {optional: true}) + query('content > :enter', animateChild(), {optional: true}), + query('content > :leave', animateChild(), {optional: true}) ])) ]) ]; diff --git a/src/@fuse/services/config.service.ts b/src/@fuse/services/config.service.ts index fd8fea4b..1bf481ef 100644 --- a/src/@fuse/services/config.service.ts +++ b/src/@fuse/services/config.service.ts @@ -98,7 +98,14 @@ export class FuseConfigService .subscribe(() => { if ( !_.isEqual(this._configSubject.getValue(), this._defaultConfig) ) { - this._configSubject.next(_.cloneDeep(this._defaultConfig)); + // Clone the default config + const config = _.cloneDeep(this._defaultConfig); + + // Don't reset the router animation + config.routerAnimation = this._configSubject.getValue().routerAnimation; + + // Set the config + this._configSubject.next(config); } }); } diff --git a/src/app/layout/components/content/content.component.scss b/src/app/layout/components/content/content.component.scss index 33f85511..e40a008e 100644 --- a/src/app/layout/components/content/content.component.scss +++ b/src/app/layout/components/content/content.component.scss @@ -1,4 +1,5 @@ content { + position: relative; display:flex; z-index: 1; flex: 1 0 auto; From a284063d22689f778b2302b9089467b86fbb6d2a Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Sat, 9 Jun 2018 21:18:30 +0300 Subject: [PATCH 35/75] Added an extra Material theme as an example to the "styles.scss" file Fixed bunch of color related stuff in order to apply the selected theme color correctly --- .../collapsable/collapsable.component.html | 4 +-- .../vertical/item/item.component.html | 4 +-- src/@fuse/scss/partials/_colors.scss | 29 +++++++++++++++++++ src/@fuse/scss/partials/_navigation.scss | 6 ++-- .../chat/chat-start/chat-start.component.html | 6 ++-- .../chat/chat-start/chat-start.component.scss | 4 --- .../sidenavs/left/chats/chats.component.html | 2 +- .../sidenavs/left/chats/chats.component.scss | 2 -- .../sidenavs/left/user/user.component.html | 2 +- .../sidenavs/left/user/user.component.scss | 3 -- .../right/contact/contact.component.html | 2 +- .../right/contact/contact.component.scss | 3 -- .../contact-list/contact-list.component.html | 2 +- .../sidenavs/main/main.component.html | 7 +++-- .../e-commerce/order/order.component.html | 2 +- .../e-commerce/orders/orders.component.html | 2 +- .../e-commerce/product/product.component.html | 2 +- .../products/products.component.html | 2 +- .../file-list/file-list.component.html | 5 ++-- .../mail-list-item.component.html | 2 +- .../mail-list-item.component.scss | 21 +------------- .../mail-list/mail-list.component.html | 2 +- .../main/apps/mail-ngrx/mail.component.html | 8 ++--- .../sidenavs/main/main-sidenav.component.html | 11 +++---- .../mail-list-item.component.html | 2 +- .../mail-list-item.component.scss | 21 +------------- .../mail/mail-list/mail-list.component.html | 2 +- src/app/main/apps/mail/mail.component.html | 8 ++--- .../sidenavs/main/main-sidenav.component.html | 16 ++++++---- .../sidenavs/main/main-sidenav.component.html | 19 +++++++----- .../todo/todo-list/todo-list.component.html | 4 +-- src/app/main/apps/todo/todo.component.html | 4 +-- .../mail-confirm/mail-confirm.component.html | 2 +- .../full-width-1/full-width-1.component.html | 2 +- .../full-width-2/full-width-2.component.html | 2 +- .../full-width-tabbed-1.component.html | 2 +- .../full-width-tabbed-2.component.html | 2 +- .../left-sidenav-1.component.html | 4 +-- .../left-sidenav-2.component.html | 4 +-- .../left-sidenav-tabbed-1.component.html | 4 +-- .../left-sidenav-tabbed-2.component.html | 4 +-- .../right-sidenav-1.component.html | 4 +-- .../right-sidenav-2.component.html | 4 +-- .../right-sidenav-tabbed-1.component.html | 4 +-- .../right-sidenav-tabbed-2.component.html | 4 +-- src/styles.scss | 24 ++++++++++++++- 46 files changed, 144 insertions(+), 131 deletions(-) diff --git a/src/@fuse/components/navigation/vertical/collapsable/collapsable.component.html b/src/@fuse/components/navigation/vertical/collapsable/collapsable.component.html index f85fbd4d..c9b212ab 100644 --- a/src/@fuse/components/navigation/vertical/collapsable/collapsable.component.html +++ b/src/@fuse/components/navigation/vertical/collapsable/collapsable.component.html @@ -7,7 +7,7 @@ @@ -28,7 +28,7 @@ diff --git a/src/@fuse/components/navigation/vertical/item/item.component.html b/src/@fuse/components/navigation/vertical/item/item.component.html index 927f3cb3..1cedfb65 100644 --- a/src/@fuse/components/navigation/vertical/item/item.component.html +++ b/src/@fuse/components/navigation/vertical/item/item.component.html @@ -2,7 +2,7 @@ @@ -22,7 +22,7 @@ diff --git a/src/@fuse/scss/partials/_colors.scss b/src/@fuse/scss/partials/_colors.scss index 9b7bc22f..7b98456d 100644 --- a/src/@fuse/scss/partials/_colors.scss +++ b/src/@fuse/scss/partials/_colors.scss @@ -227,6 +227,35 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400 } } +@mixin generateFuseColorClasses($primary, $accent, $warn) { + + $colorMap: ( + primary: $primary, + accent: $accent, + warn: $warn + ); + + // Generate the color classes... + @each $name, $map in $colorMap { + + @each $hue in $matColorHues { + + $color: map-get($map, $hue); + $contrastColor: map-get(map-get($map, 'contrast'), $hue); + + @if ($color != null and $contrastColor != null) { + + @include generateColorClasses($name, $color, $contrastColor, '-#{$hue}'); + + // Run the generator one more time for default values (500) + @if ($hue == 500) { + @include generateColorClasses($name, $color, $contrastColor, ''); + } + } + } + } +} + // Generate the color classes... @each $colorName, $colorMap in $matColorsMap { diff --git a/src/@fuse/scss/partials/_navigation.scss b/src/@fuse/scss/partials/_navigation.scss index 4e52dc95..468add93 100644 --- a/src/@fuse/scss/partials/_navigation.scss +++ b/src/@fuse/scss/partials/_navigation.scss @@ -72,14 +72,14 @@ } &.active { - background-color: mat-color($accent); + //background-color: mat-color($accent); .mat-ripple-element { - background-color: mat-color($accent, default-contrast, 0.1); + //background-color: mat-color($accent, default-contrast, 0.1); } &, .nav-link-icon { - color: mat-color($accent, default-contrast); + //color: mat-color($accent, default-contrast); } .nav-link-badge { diff --git a/src/app/main/apps/chat/chat-start/chat-start.component.html b/src/app/main/apps/chat/chat-start/chat-start.component.html index 77c6eb9e..50ad6b3d 100644 --- a/src/app/main/apps/chat/chat-start/chat-start.component.html +++ b/src/app/main/apps/chat/chat-start/chat-start.component.html @@ -3,13 +3,15 @@

Chat App - Select contact to start the chat!.. + + Select contact to start the chat!.. +
diff --git a/src/app/main/apps/chat/sidenavs/left/chats/chats.component.scss b/src/app/main/apps/chat/sidenavs/left/chats/chats.component.scss index a49f5163..4fa85df8 100644 --- a/src/app/main/apps/chat/sidenavs/left/chats/chats.component.scss +++ b/src/app/main/apps/chat/sidenavs/left/chats/chats.component.scss @@ -94,8 +94,6 @@ width: 24px; height: 24px; line-height: 24px; - background-color: mat-color($accent); - color: map-get($accent, default-contrast); } } } diff --git a/src/app/main/apps/chat/sidenavs/left/user/user.component.html b/src/app/main/apps/chat/sidenavs/left/user/user.component.html index 59ce9639..9ecb4ddf 100644 --- a/src/app/main/apps/chat/sidenavs/left/user/user.component.html +++ b/src/app/main/apps/chat/sidenavs/left/user/user.component.html @@ -2,7 +2,7 @@
- + diff --git a/src/app/main/apps/chat/sidenavs/left/user/user.component.scss b/src/app/main/apps/chat/sidenavs/left/user/user.component.scss index 40d65ae3..7130f9cb 100644 --- a/src/app/main/apps/chat/sidenavs/left/user/user.component.scss +++ b/src/app/main/apps/chat/sidenavs/left/user/user.component.scss @@ -6,8 +6,6 @@ flex-direction: column; mat-toolbar { - background-color: mat-color($accent); - color: map-get($accent, default-contrast); .toolbar-bottom { height: 240px; @@ -16,7 +14,6 @@ height: 180px; } } - } .sidenav-content { diff --git a/src/app/main/apps/chat/sidenavs/right/contact/contact.component.html b/src/app/main/apps/chat/sidenavs/right/contact/contact.component.html index a7dd59f9..a60d9c39 100644 --- a/src/app/main/apps/chat/sidenavs/right/contact/contact.component.html +++ b/src/app/main/apps/chat/sidenavs/right/contact/contact.component.html @@ -2,7 +2,7 @@
- + diff --git a/src/app/main/apps/chat/sidenavs/right/contact/contact.component.scss b/src/app/main/apps/chat/sidenavs/right/contact/contact.component.scss index 40d65ae3..7130f9cb 100644 --- a/src/app/main/apps/chat/sidenavs/right/contact/contact.component.scss +++ b/src/app/main/apps/chat/sidenavs/right/contact/contact.component.scss @@ -6,8 +6,6 @@ flex-direction: column; mat-toolbar { - background-color: mat-color($accent); - color: map-get($accent, default-contrast); .toolbar-bottom { height: 240px; @@ -16,7 +14,6 @@ height: 180px; } } - } .sidenav-content { diff --git a/src/app/main/apps/contacts/contact-list/contact-list.component.html b/src/app/main/apps/contacts/contact-list/contact-list.component.html index 0416c57c..015d2a70 100644 --- a/src/app/main/apps/contacts/contact-list/contact-list.component.html +++ b/src/app/main/apps/contacts/contact-list/contact-list.component.html @@ -97,7 +97,7 @@ diff --git a/src/app/main/apps/contacts/sidenavs/main/main.component.html b/src/app/main/apps/contacts/sidenavs/main/main.component.html index 7d25084c..5856fc5f 100644 --- a/src/app/main/apps/contacts/sidenavs/main/main.component.html +++ b/src/app/main/apps/contacts/sidenavs/main/main.component.html @@ -18,19 +18,20 @@
- + All Contacts
- +
Freequently contacted
- +
Starred Contacts
diff --git a/src/app/main/apps/e-commerce/order/order.component.html b/src/app/main/apps/e-commerce/order/order.component.html index 2987e515..69e5bbb3 100644 --- a/src/app/main/apps/e-commerce/order/order.component.html +++ b/src/app/main/apps/e-commerce/order/order.component.html @@ -8,7 +8,7 @@
-
diff --git a/src/app/main/apps/e-commerce/orders/orders.component.html b/src/app/main/apps/e-commerce/orders/orders.component.html index 0b4462e6..a7d66abe 100644 --- a/src/app/main/apps/e-commerce/orders/orders.component.html +++ b/src/app/main/apps/e-commerce/orders/orders.component.html @@ -8,7 +8,7 @@
-
diff --git a/src/app/main/apps/e-commerce/product/product.component.html b/src/app/main/apps/e-commerce/product/product.component.html index d1c683fb..f2444081 100644 --- a/src/app/main/apps/e-commerce/product/product.component.html +++ b/src/app/main/apps/e-commerce/product/product.component.html @@ -8,7 +8,7 @@
-
+
diff --git a/src/app/main/apps/e-commerce/products/products.component.html b/src/app/main/apps/e-commerce/products/products.component.html index cee86b70..d44b7c43 100644 --- a/src/app/main/apps/e-commerce/products/products.component.html +++ b/src/app/main/apps/e-commerce/products/products.component.html @@ -8,7 +8,7 @@
-
diff --git a/src/app/main/apps/file-manager/file-list/file-list.component.html b/src/app/main/apps/file-manager/file-list/file-list.component.html index 83aef234..67e565a6 100644 --- a/src/app/main/apps/file-manager/file-list/file-list.component.html +++ b/src/app/main/apps/file-manager/file-list/file-list.component.html @@ -52,9 +52,8 @@ diff --git a/src/app/main/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.html b/src/app/main/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.html index f9224cbc..4df2f5d8 100644 --- a/src/app/main/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.html +++ b/src/app/main/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.html @@ -10,7 +10,7 @@
{{mail.from?.name}} -
{{mail.from?.name[0]}}
+
{{mail.from?.name[0]}}
{{mail.from?.name}} attachment
diff --git a/src/app/main/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.scss b/src/app/main/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.scss index 89566a09..7eb73acf 100644 --- a/src/app/main/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.scss +++ b/src/app/main/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.scss @@ -44,20 +44,6 @@ } } - &.current-mail { - background: #E3F2FD; - - .info { - - .row-2 { - - .labels { - background: #E3F2FD; - } - } - } - } - .info { overflow: hidden; width: 0; @@ -76,7 +62,6 @@ width: 32px; height: 32px; line-height: 32px; - background-color: mat-color($accent); } } @@ -104,11 +89,7 @@ } .labels { - position: absolute; - background: #FFFFFF; - bottom: 0; - right: 0; - padding-left: 6px; + margin-top: 8px; .label { font-size: 11px; diff --git a/src/app/main/apps/mail-ngrx/mail-list/mail-list.component.html b/src/app/main/apps/mail-ngrx/mail-list/mail-list.component.html index 94e1ff3b..9e94b60c 100644 --- a/src/app/main/apps/mail-ngrx/mail-list/mail-list.component.html +++ b/src/app/main/apps/mail-ngrx/mail-list/mail-list.component.html @@ -4,6 +4,6 @@
+ [ngClass]="{'current-mail mat-accent-50-bg':mail?.id == currentMail?.id}">
diff --git a/src/app/main/apps/mail-ngrx/mail.component.html b/src/app/main/apps/mail-ngrx/mail.component.html index 701983ae..fc8e0816 100644 --- a/src/app/main/apps/mail-ngrx/mail.component.html +++ b/src/app/main/apps/mail-ngrx/mail.component.html @@ -65,11 +65,11 @@
diff --git a/src/app/main/apps/mail-ngrx/sidenavs/main/main-sidenav.component.html b/src/app/main/apps/mail-ngrx/sidenavs/main/main-sidenav.component.html index a3d8f041..a858a439 100644 --- a/src/app/main/apps/mail-ngrx/sidenavs/main/main-sidenav.component.html +++ b/src/app/main/apps/mail-ngrx/sidenavs/main/main-sidenav.component.html @@ -1,6 +1,6 @@
+ class="header mat-accent-bg p-24 pb-4">