From 446bfe4139a31fc3076427f44b7d5154cb5c436f Mon Sep 17 00:00:00 2001 From: sercan Date: Fri, 4 Jun 2021 22:21:47 +0300 Subject: [PATCH 01/21] (ui/angular-material) Added a component list that redirects to the related page of the official docs --- src/app/mock-api/common/navigation/data.ts | 4 +- .../angular-material.component.html | 52 +- .../angular-material.component.ts | 499 ++++++++++++++++++ .../angular-material.module.ts | 4 + .../scenes/autocomplete.scene.png | Bin 0 -> 910 bytes .../angular-material/scenes/badge.scene.png | Bin 0 -> 1019 bytes .../scenes/bottom-sheet.scene.png | Bin 0 -> 2455 bytes .../scenes/button-toggle.scene.png | Bin 0 -> 466 bytes .../angular-material/scenes/button.scene.png | Bin 0 -> 2055 bytes .../ui/angular-material/scenes/card.scene.png | Bin 0 -> 427 bytes .../scenes/checkbox.scene.png | Bin 0 -> 1206 bytes .../angular-material/scenes/chips.scene.png | Bin 0 -> 2738 bytes .../ui/angular-material/scenes/core.scene.png | Bin 0 -> 449 bytes .../scenes/datepicker.scene.png | Bin 0 -> 2800 bytes .../angular-material/scenes/dialog.scene.png | Bin 0 -> 4915 bytes .../angular-material/scenes/divider.scene.png | Bin 0 -> 1274 bytes .../scenes/expansion.scene.png | Bin 0 -> 1625 bytes .../scenes/form-field.scene.png | Bin 0 -> 933 bytes .../scenes/grid-list.scene.png | Bin 0 -> 314 bytes .../ui/angular-material/scenes/icon.scene.png | Bin 0 -> 1884 bytes .../angular-material/scenes/input.scene.png | Bin 0 -> 647 bytes .../ui/angular-material/scenes/list.scene.png | Bin 0 -> 1208 bytes .../ui/angular-material/scenes/menu.scene.png | Bin 0 -> 1681 bytes .../scenes/paginator.scene.png | Bin 0 -> 1091 bytes .../scenes/progress-bar.scene.png | Bin 0 -> 206 bytes .../scenes/progress-spinner.scene.png | Bin 0 -> 1462 bytes .../angular-material/scenes/radio.scene.png | Bin 0 -> 1568 bytes .../angular-material/scenes/ripple.scene.png | Bin 0 -> 1511 bytes .../angular-material/scenes/select.scene.png | Bin 0 -> 1752 bytes .../angular-material/scenes/sidenav.scene.png | Bin 0 -> 1512 bytes .../scenes/slide-toggle.scene.png | Bin 0 -> 1797 bytes .../angular-material/scenes/slider.scene.png | Bin 0 -> 632 bytes .../scenes/snack-bar.scene.png | Bin 0 -> 1146 bytes .../ui/angular-material/scenes/sort.scene.png | Bin 0 -> 1879 bytes .../angular-material/scenes/stepper.scene.png | Bin 0 -> 1573 bytes .../angular-material/scenes/table.scene.png | Bin 0 -> 2059 bytes .../ui/angular-material/scenes/tabs.scene.png | Bin 0 -> 790 bytes .../angular-material/scenes/toolbar.scene.png | Bin 0 -> 747 bytes .../angular-material/scenes/tooltip.scene.png | Bin 0 -> 881 bytes .../ui/angular-material/scenes/tree.scene.png | Bin 0 -> 877 bytes 40 files changed, 539 insertions(+), 20 deletions(-) create mode 100644 src/assets/images/ui/angular-material/scenes/autocomplete.scene.png create mode 100644 src/assets/images/ui/angular-material/scenes/badge.scene.png create mode 100644 src/assets/images/ui/angular-material/scenes/bottom-sheet.scene.png create mode 100644 src/assets/images/ui/angular-material/scenes/button-toggle.scene.png create mode 100644 src/assets/images/ui/angular-material/scenes/button.scene.png create mode 100644 src/assets/images/ui/angular-material/scenes/card.scene.png create mode 100644 src/assets/images/ui/angular-material/scenes/checkbox.scene.png create mode 100644 src/assets/images/ui/angular-material/scenes/chips.scene.png create mode 100644 src/assets/images/ui/angular-material/scenes/core.scene.png create mode 100644 src/assets/images/ui/angular-material/scenes/datepicker.scene.png create mode 100644 src/assets/images/ui/angular-material/scenes/dialog.scene.png create mode 100644 src/assets/images/ui/angular-material/scenes/divider.scene.png create mode 100644 src/assets/images/ui/angular-material/scenes/expansion.scene.png create mode 100644 src/assets/images/ui/angular-material/scenes/form-field.scene.png create mode 100644 src/assets/images/ui/angular-material/scenes/grid-list.scene.png create mode 100644 src/assets/images/ui/angular-material/scenes/icon.scene.png create mode 100644 src/assets/images/ui/angular-material/scenes/input.scene.png create mode 100644 src/assets/images/ui/angular-material/scenes/list.scene.png create mode 100644 src/assets/images/ui/angular-material/scenes/menu.scene.png create mode 100644 src/assets/images/ui/angular-material/scenes/paginator.scene.png create mode 100644 src/assets/images/ui/angular-material/scenes/progress-bar.scene.png create mode 100644 src/assets/images/ui/angular-material/scenes/progress-spinner.scene.png create mode 100644 src/assets/images/ui/angular-material/scenes/radio.scene.png create mode 100644 src/assets/images/ui/angular-material/scenes/ripple.scene.png create mode 100644 src/assets/images/ui/angular-material/scenes/select.scene.png create mode 100644 src/assets/images/ui/angular-material/scenes/sidenav.scene.png create mode 100644 src/assets/images/ui/angular-material/scenes/slide-toggle.scene.png create mode 100644 src/assets/images/ui/angular-material/scenes/slider.scene.png create mode 100644 src/assets/images/ui/angular-material/scenes/snack-bar.scene.png create mode 100644 src/assets/images/ui/angular-material/scenes/sort.scene.png create mode 100644 src/assets/images/ui/angular-material/scenes/stepper.scene.png create mode 100644 src/assets/images/ui/angular-material/scenes/table.scene.png create mode 100644 src/assets/images/ui/angular-material/scenes/tabs.scene.png create mode 100644 src/assets/images/ui/angular-material/scenes/toolbar.scene.png create mode 100644 src/assets/images/ui/angular-material/scenes/tooltip.scene.png create mode 100644 src/assets/images/ui/angular-material/scenes/tree.scene.png diff --git a/src/app/mock-api/common/navigation/data.ts b/src/app/mock-api/common/navigation/data.ts index 2255d914..1e230442 100644 --- a/src/app/mock-api/common/navigation/data.ts +++ b/src/app/mock-api/common/navigation/data.ts @@ -683,9 +683,9 @@ export const defaultNavigation: FuseNavigationItem[] = [ children: [ { id : 'user-interface.angular-material', - title: 'Angular Material', + title: 'Angular Material components', type : 'basic', - icon : 'heroicons_outline:shield-check', + icon : 'heroicons_outline:chip', link : '/ui/angular-material' }, { diff --git a/src/app/modules/admin/ui/angular-material/angular-material.component.html b/src/app/modules/admin/ui/angular-material/angular-material.component.html index f532ae9c..466232c7 100644 --- a/src/app/modules/admin/ui/angular-material/angular-material.component.html +++ b/src/app/modules/admin/ui/angular-material/angular-material.component.html @@ -12,16 +12,30 @@

- Angular Material + Angular Material components

+ +
+ + + Official docs + +
-
+

Fuse uses @@ -46,26 +60,28 @@

Component examples and API documentation

- Because it makes this demo app very heavy and unusable, we don't showcase any of the components - within this demo. It also makes it harder for us to upgrade to the latest version of the Angular - Material whenever there is a new version, simply because we have to update all the component demos - as well, and it's not an easy task. -

-

- With that being said, you should always refer to the official docs, they always have the latest version - up and running so you won't end up with an outdated examples and/or API documentation. + Following, you can find links to the official documentation. Click on the component you want to + learn more about and it will redirect you to the related section of the official documentation.

+
-

Official docs

-

- Angular Material examples and API documentation: +

+ https://material.angular.io/components/categories + class="flex flex-col rounded-2xl shadow overflow-hidden bg-card hover:shadow-xl transition-shadow duration-200 ease-in-out" + [href]="'https://material.angular.io/components/' + component.id" + target="_blank" + rel="noreferrer"> + +
+
{{component.name}}
+
{{component.summary}}
+
-

+ +
diff --git a/src/app/modules/admin/ui/angular-material/angular-material.component.ts b/src/app/modules/admin/ui/angular-material/angular-material.component.ts index 5bce8e1a..7018211f 100644 --- a/src/app/modules/admin/ui/angular-material/angular-material.component.ts +++ b/src/app/modules/admin/ui/angular-material/angular-material.component.ts @@ -7,10 +7,509 @@ import { Component, ViewEncapsulation } from '@angular/core'; }) export class AngularMaterialComponent { + components: any[]; + /** * Constructor */ constructor() { + this.components = [ + { + id : 'autocomplete', + name : 'Autocomplete', + summary : 'Suggests relevant options as the user types.', + exampleSpecs : { + prefix: 'autocomplete-' + }, + additionalApiDocs: [ + { + name: 'Testing', + path: 'material-autocomplete-testing.html' + } + ] + }, + { + id : 'badge', + name : 'Badge', + summary : 'A small value indicator that can be overlaid on another object.', + exampleSpecs : { + prefix: 'badge-' + }, + additionalApiDocs: [ + { + name: 'Testing', + path: 'material-badge-testing.html' + } + ] + }, + { + id : 'bottom-sheet', + name : 'Bottom Sheet', + summary : 'A large interactive panel primarily for mobile devices.', + exampleSpecs : { + prefix: 'bottom-sheet-' + }, + additionalApiDocs: [ + { + name: 'Testing', + path: 'material-bottom-sheet-testing.html' + } + ] + }, + { + id : 'button', + name : 'Button', + summary : 'An interactive button with a range of presentation options.', + exampleSpecs : { + prefix : 'button-', + exclude: ['button-toggle-'] + }, + additionalApiDocs: [ + { + name: 'Testing', + path: 'material-button-testing.html' + } + ] + }, + { + id : 'button-toggle', + name : 'Button toggle', + summary : 'A groupable on/off toggle for enabling and disabling options.', + exampleSpecs : { + prefix: 'button-toggle-' + }, + additionalApiDocs: [ + { + name: 'Testing', + path: 'material-button-toggle-testing.html' + } + ] + }, + { + id : 'card', + name : 'Card', + summary : 'A styled container for pieces of itemized content.', + exampleSpecs : { + prefix: 'card-' + }, + additionalApiDocs: [ + { + name: 'Testing', + path: 'material-card-testing.html' + } + ] + }, + { + id : 'checkbox', + name : 'Checkbox', + summary : 'Captures boolean input with an optional indeterminate mode.', + exampleSpecs : { + prefix: 'checkbox-' + }, + additionalApiDocs: [ + { + name: 'Testing', + path: 'material-checkbox-testing.html' + } + ] + }, + { + id : 'chips', + name : 'Chips', + summary : 'Presents a list of items as a set of small, tactile entities.', + exampleSpecs : { + prefix: 'chips-' + }, + additionalApiDocs: [ + { + name: 'Testing', + path: 'material-chips-testing.html' + } + ] + }, + { + id : 'core', + name : 'Core', + summary : 'Reusable parts used by other components in the library.', + exampleSpecs : { + prefix: 'core-' + }, + additionalApiDocs: [ + { + name: 'Testing', + path: 'material-core-testing.html' + } + ] + }, + { + id : 'datepicker', + name : 'Datepicker', + summary : 'Captures dates, agnostic about their internal representation.', + exampleSpecs : { + prefix: 'date' + }, + additionalApiDocs: [ + { + name: 'Testing', + path: 'material-datepicker-testing.html' + } + ] + }, + { + id : 'dialog', + name : 'Dialog', + summary : 'A configurable modal that displays dynamic content.', + exampleSpecs : { + prefix: 'dialog-' + }, + additionalApiDocs: [ + { + name: 'Testing', + path: 'material-dialog-testing.html' + } + ] + }, + { + id : 'divider', + name : 'Divider', + summary : 'A vertical or horizontal visual divider.', + exampleSpecs : { + prefix: 'divider-' + }, + additionalApiDocs: [ + { + name: 'Testing', + path: 'material-divider-testing.html' + } + ] + }, + { + id : 'expansion', + name : 'Expansion Panel', + summary : 'A container which can be expanded to reveal more content.', + exampleSpecs : { + prefix: 'expansion-' + }, + additionalApiDocs: [ + { + name: 'Testing', + path: 'material-expansion-testing.html' + } + ] + }, + { + id : 'form-field', + name : 'Form field', + summary : 'Wraps input fields so they are displayed consistently.', + exampleSpecs : { + prefix: 'form-field-' + }, + additionalApiDocs: [ + { + name: 'Testing', + path: 'material-form-field-testing.html' + } + ] + }, + { + id : 'grid-list', + name : 'Grid list', + summary : 'A flexible structure for presenting content items in a grid.', + exampleSpecs : { + prefix: 'grid-list-' + }, + additionalApiDocs: [ + { + name: 'Testing', + path: 'material-grid-list-testing.html' + } + ] + }, + { + id : 'icon', + name : 'Icon', + summary : 'Renders a specified icon.', + exampleSpecs : { + prefix: 'icon-' + }, + additionalApiDocs: [ + { + name: 'Testing', + path: 'material-icon-testing.html' + } + ] + }, + { + id : 'input', + name : 'Input', + summary : 'Enables native inputs to be used within a Form field.', + exampleSpecs : { + prefix: 'input-' + }, + additionalApiDocs: [ + { + name: 'Testing', + path: 'material-input-testing.html' + } + ] + }, + { + id : 'list', + name : 'List', + summary : 'Presents conventional lists of items.', + exampleSpecs : { + prefix: 'list-' + }, + additionalApiDocs: [ + { + name: 'Testing', + path: 'material-list-testing.html' + } + ] + }, + { + id : 'menu', + name : 'Menu', + summary : 'A floating panel of nestable options.', + exampleSpecs : { + prefix: 'menu-' + }, + additionalApiDocs: [ + { + name: 'Testing', + path: 'material-menu-testing.html' + } + ] + }, + { + id : 'paginator', + name : 'Paginator', + summary : 'Controls for displaying paged data.', + exampleSpecs : { + prefix: 'paginator-' + }, + additionalApiDocs: [ + { + name: 'Testing', + path: 'material-paginator-testing.html' + } + ] + }, + { + id : 'progress-bar', + name : 'Progress bar', + summary : 'A linear progress indicator.', + exampleSpecs : { + prefix: 'progress-bar-' + }, + additionalApiDocs: [ + { + name: 'Testing', + path: 'material-progress-bar-testing.html' + } + ] + }, + { + id : 'progress-spinner', + name : 'Progress spinner', + summary : 'A circular progress indicator.', + exampleSpecs : { + prefix: 'progress-spinner-' + }, + additionalApiDocs: [ + { + name: 'Testing', + path: 'material-progress-spinner-testing.html' + } + ] + }, + { + id : 'radio', + name : 'Radio button', + summary : 'Allows the user to select one option from a group.', + exampleSpecs : { + prefix: 'radio-' + + }, + additionalApiDocs: [ + { + name: 'Testing', + path: 'material-radio-testing.html' + } + ] + }, + { + id : 'ripple', + name : 'Ripples', + overviewPath: 'material/core/ripple/ripple.html', + summary : 'Directive for adding Material Design ripple effects', + exampleSpecs: { + prefix: 'ripple-' + } + }, + { + id : 'select', + name : 'Select', + summary : 'Allows the user to select one or more options using a dropdown.', + exampleSpecs : { + prefix: 'select-' + }, + additionalApiDocs: [ + { + name: 'Testing', + path: 'material-select-testing.html' + } + ] + }, + { + id : 'sidenav', + name : 'Sidenav', + summary : 'A container for content that is fixed to one side of the screen.', + exampleSpecs : { + prefix: 'sidenav-' + }, + additionalApiDocs: [ + { + name: 'Testing', + path: 'material-sidenav-testing.html' + } + ] + }, + { + id : 'slide-toggle', + name : 'Slide toggle', + summary : 'Captures boolean values as a clickable and draggable switch.', + exampleSpecs : { + prefix: 'slide-toggle-' + }, + additionalApiDocs: [ + { + name: 'Testing', + path: 'material-slide-toggle-testing.html' + } + ] + }, + { + id : 'slider', + name : 'Slider', + summary : 'Allows the user to input a value by dragging along a slider.', + exampleSpecs : { + prefix: 'slider-' + }, + additionalApiDocs: [ + { + name: 'Testing', + path: 'material-slider-testing.html' + } + ] + }, + { + id : 'snack-bar', + name : 'Snackbar', + summary : 'Displays short actionable messages as an uninvasive alert.', + exampleSpecs : { + prefix: 'snack-bar-' + }, + additionalApiDocs: [ + { + name: 'Testing', + path: 'material-snack-bar-testing.html' + } + ] + }, + { + id : 'sort', + name : 'Sort header', + summary : 'Allows the user to configure how tabular data is sorted.', + exampleSpecs : { + prefix: 'sort-' + }, + additionalApiDocs: [ + { + name: 'Testing', + path: 'material-sort-testing.html' + } + ] + }, + { + id : 'stepper', + name : 'Stepper', + summary : 'Presents content as steps through which to progress.', + exampleSpecs : { + prefix: 'stepper-' + }, + additionalApiDocs: [ + { + name: 'Testing', + path: 'material-stepper-testing.html' + } + ] + }, + { + id : 'table', + name : 'Table', + summary : 'A configurable component for displaying tabular data.', + exampleSpecs : { + prefix: 'table-' + }, + additionalApiDocs: [ + { + name: 'Testing', + path: 'material-table-testing.html' + } + ] + }, + { + id : 'tabs', + name : 'Tabs', + summary : 'Only presents one view at a time from a provided set of views.', + exampleSpecs : { + prefix: 'tab-' + }, + additionalApiDocs: [ + { + name: 'Testing', + path: 'material-tabs-testing.html' + } + ] + }, + { + id : 'toolbar', + name : 'Toolbar', + summary : 'A container for top-level titles and controls.', + exampleSpecs : { + prefix: 'toolbar-' + }, + additionalApiDocs: [ + { + name: 'Testing', + path: 'material-toolbar-testing.html' + } + ] + }, + { + id : 'tooltip', + name : 'Tooltip', + summary : 'Displays floating content when an object is hovered.', + exampleSpecs : { + prefix: 'tooltip-' + }, + additionalApiDocs: [ + { + name: 'Testing', + path: 'material-tooltip-testing.html' + } + ] + }, + { + id : 'tree', + name : 'Tree', + summary : 'Presents hierarchical content as an expandable tree.', + exampleSpecs: { + prefix: 'tree-' + } + } + ]; } } diff --git a/src/app/modules/admin/ui/angular-material/angular-material.module.ts b/src/app/modules/admin/ui/angular-material/angular-material.module.ts index e9f50694..795eb091 100644 --- a/src/app/modules/admin/ui/angular-material/angular-material.module.ts +++ b/src/app/modules/admin/ui/angular-material/angular-material.module.ts @@ -1,5 +1,7 @@ import { NgModule } from '@angular/core'; import { Route, RouterModule } from '@angular/router'; +import { MatButtonModule } from '@angular/material/button'; +import { MatIconModule } from '@angular/material/icon'; import { SharedModule } from 'app/shared/shared.module'; import { AngularMaterialComponent } from 'app/modules/admin/ui/angular-material/angular-material.component'; @@ -16,6 +18,8 @@ export const routes: Route[] = [ ], imports : [ RouterModule.forChild(routes), + MatButtonModule, + MatIconModule, SharedModule ] }) diff --git a/src/assets/images/ui/angular-material/scenes/autocomplete.scene.png b/src/assets/images/ui/angular-material/scenes/autocomplete.scene.png new file mode 100644 index 0000000000000000000000000000000000000000..de997b1fba5072494d7dacca1ffdc35f48a0a469 GIT binary patch literal 910 zcmeAS@N?(olHy`uVBq!ia0y~yV9WrrPp~ipN%IA1dw>*6x}&cn1H;CC?mvmFKt5w} zkh>GZx^prwfgGU#pAgrtFJJxt^yUBm|1VvvUtYNQVeagT=aXd_7?`CzT^vIyZoR#A zFz=Cp2@i zsyjF`7BsR+kwm;$aX}UODDVM*gmU ze|JC8-MVqHbl=sx3l^_$e>Q{H@_yMq)rY_DR6lI_Y#Tpgo|U|671y=Rw=G`vEMJ$p zMf^`gwep?g?_65TrWCJw96Q_i*LTfc+$#H{FHphzcB8ZN%^7k8T&f6UcSzISv}b4%f@%M|9+Ll^qX0JDf-?1*W{l&3n-ZW z@n76?UEqpcS?BKlZr5og+mv=`giP3)cPUcgOP8m(t77w-NBipTMDlYrFEh2C%j&#- zdWoA7&#u_gsuri)HUisRiB*3KELJ=bk{>GGweSx(XE?JAS% zChodY^xJCD)-~}$FSo4auQ~qWx!W{fsmqHuZ4JtD3%8nRx%Snu8NN}T@f(WXeNmj~ zx4JNEkD95iMdr`$=fz&dQoHvA%yql;!o;fAPdT$h3LpE6zukMoTIpT#kGz1c%C~$k zn11Q>XSwCRwNJVyTX|=nk9u~BZ(?ax<-KI{H?u$5xSH2Zot?RIPM7Y>r_lx%l8|lEsA%BKF@MGZod3|gy^@+ gH~j0L*Zty^Z<@VAj`i;)dboFyt=akR{0BCrv;Q#;t literal 0 HcmV?d00001 diff --git a/src/assets/images/ui/angular-material/scenes/badge.scene.png b/src/assets/images/ui/angular-material/scenes/badge.scene.png new file mode 100644 index 0000000000000000000000000000000000000000..e9a79dbef56cbe916072f7e14a129b51f29ebfe7 GIT binary patch literal 1019 zcmVPx#El^BUMgH>f;!G1WGc)UZQTW}||NsB@$G7pKhWYL5 zn30i4K|jH8Rm8fwWnyBXLLLMjlo0>`18hk|K~#9!?bxwP8&Mnw@GBaOV29&kT;**E zMht4YUXY_5I<(ZMj+J8QXu#5rp|)r?5eEf3cyw{`ZxA=30qI!U!T+Rpxm-*nCf}dF zkOaOTDqX%@zrOzN-n+9bA|fIpA|fIpA|fIpA|fIpA|fIpA|fIpBBGAQOP@>b5akgs z^R{g}J42I4tk{vIA;}{q?AZ2DE(Ep|{m#oK4x74u=OM+m zi>3yi7f%QB|JUz4v{yB*R@jXGcESA4gdp#ff}fA$WgssYY3GYBVnf&Hx}ewb{EP3a zw!N(NnyI0V9!O~&mtMdgV2Qmvp7(T6+8bNarXG4x*YpRkh}|iT{04ewh56D_SbEdZ zc|&(%W0dW!M(H$^pI&>vC&;IR(p$Ur-!yHqv?nSZ45;43^QoY8O6y%yrOWqLdIrib zuP%CT@qGHO^o+^Uo~-n{@DH3%)yJdo##HIY&2-RsdR;cty6oukU}t(gUTJiu9h0St z_g4C$M^e>Sb!Sm(W6^ttKO)1GPV5$*{K!jQpPU@EoOZn)o6BL;S z@i?J*ymSRWI>x2dEtWqN<{?wz1zr4*-Yk8F<$YluFMWx>4mC^9gZVjMl*bPL;RO%y z7f;o3KDy**tD-z6T!8+>Mr?Nt0u`~e#a|~eN0iEmbzO$=O&|@@!a6Yn&67L z3jWzjbz17K`EzSLT$r3|@Uz(0c%iWmge|4j1(yG7P5CN&Y1J-_eSmyk-w@$Xv8t{0 zEtEgDs`Vcv4?puR1s}cJN~GskJ%jeu^u7N!0N@e<8TAlA7 zDx;+*Tj!%srPV)Ww)DQQe)hezGF&>CkE}a#rGw|kTyR+bar$b6N{5@`ar6q~j!x;x z@KJizJnl)J(}OD=Ots4Sk13rQVCir1`-QM{_IQA$lT|_KjOfz7aGV4xHN5nJ^d=XL zlSmCME&O+@zHFR?SO24s{am=v&5t#870bBS*QdR&nz4pWvUlXbA|fIpA|fIpA|fIp pA|fIpA|fIpA|fIpA|j&E^dBmEM%V5WHo^b^002ovPDHLkV1i$I@Bjb+ literal 0 HcmV?d00001 diff --git a/src/assets/images/ui/angular-material/scenes/bottom-sheet.scene.png b/src/assets/images/ui/angular-material/scenes/bottom-sheet.scene.png new file mode 100644 index 0000000000000000000000000000000000000000..f23e8644bd52daa593e14cc5e6f848bc9b3d5eed GIT binary patch literal 2455 zcmV;I3263-P)Px#6;Mo6Mg8;d_wDKb|Nrdb-rUj4!cqy`oNo6hg3JH_ z2_Q*CK~#9!?OaWF;x-hua*|m~aZlHYLRidEmcjG?e?p}v$rvzx0*tLW zM~}%I>SoO4a&_N_Y?35Kj2JOu#E20iMvNFSV#J6MBSwrEF=E7s5hF&77%^hRh!G=3 zj2JOu#E3CqQ1c)+|I;hxp`s`J`V8t^?g5nF>N)ekf)786ohO zKEN31?FhUGB^Lgr9$4KXl%9*48pH|Phs-Q3)UpHg^mU|; zgaP79h^BzqzI_19EN1vzseVOutiK~h9<=!hoUDAV)7ueZo|u<) z27ZB}4GYZTrOj8`1?lGqVeUg9Mv3QHh*>2@5eK{s5?0{G6}>SNi(CC;HhdVF*retO zn1uLbK;=p8tjc#DKPqgLqJF8Z_$UoZS{+Yh*yUAse!}2i5f=%(6#5T0C1> z`y?1*atmNi86PnW)0Fz;MBO(4(aLvbV}gF!3B*g))TWhDK|c%UdI`1`OTX__tGo9GyrBcvm9L>b;*QG^h`Ca%_AS(J(hXB z5(!dzSjWr9XF3;!$u0!h#Gnn!3&A~vo7kY5w(1B%9+qi>Y+n9c-?_ zm~PkfN=ms^KkMO{?z}J#R^kbHyhs=OR98}#2fsS~>POQebCc7q%GC7$ZA?#V(3^eG z%jG|Zueo_yUkkdhOk+hJb){*mJYH+idptf>JZYH$tow2g)~#uS8QR)q?hTq(`bA`U zx0>-%X=TAn`Sw-Guji_~yHeA_GL5dpEIW^B06pKXHV>Q0_q2RpbGiNT^+!2-Sg$sh zg1%n@YB$b9_5s{{=^RZb3I9W_J^h$(xKw;kzmzuK>~ipbYS62a z*P2$!s2=&_l}wwtSkg^3xQ94dFs%Udp-?sG)wcTNuiqTpLxX-Q7Z2Oa%97aZ=NqKg-9VK-VKCpW36l z-AaaOx9$zo);-XxCSVUSfNs3$9{3DFYgz=-*b21Dvzi8*4ua{Tc8~7b!wn!qVVY&w zR2?#+-H;1J)0y>Yto8_EShMdQ1h4WsGUA|2*IW8n?Lm-?IPfgbWA0(EK?q3GezgY) z&^;Jldw_csfw>1kx^dG4gy0^#&IO%&1Xp`7{KBh%+{4x$=6dz+7BM*Y=w_M*<{o~X zOI>?}lMyrga-iBhf~q|_FBda6xPW_z->P$A;kk#`)HDq!BRco++6f4wM=U(t!(KQM zV(rm=1!PE_i`cmb>eJ!52l42}Q++96NS#aK=N_SCMB^UB&piTQx>$N%nCIml)1$3` zo7Wx$y$S*AT&l}A+Rkzh7>jwhN8;1DNGS(PdRVEJ>3YW&o8_IZJ*JA~md&kd1Dl^x>typ<{ypDTn;zU_+1PWzW_ca8N7cUb z`9p5`WX)GI!Ka(o4X^I5zV51K+IyCFl4<1|cWtlmCjZsj`HP8^UkY@|??3v|bjG}9 zc^#e0DbReX7vg+T{e07))vtZ`;nVrfJCUBH9xrNXR=~90$k$9?ah*ro)YNB| zce?h_3-K8Bi}DHyOqcvYgRc1H*Lk#bE?%>|&d#OH@~Z872~1a8(DZ8i{?&tfxVeYV zEDz~iR>#R@D&+#0{vm&9&?>F>!nD_(3-y|suH+C^-u|8o@u@w!W_eFTRe4@}E=~97 z>Rg5_P3@iwKFh;)Y^#Cf(U^OXtEZ-ev|HYLE_Qb-#61_{v*#khnwp}syx^v$UbDQA z_FVAmr|~Nw2cIwrk69i?t~DKYYMSqEvh7}n)ZWODhrx7a3MPWz_!-Ek*D+0y0VEBN zX-pnucavNoOzUsk(M%(^=u>ko^6$fR;}+Y%nC`wYSTSvS#6Z$Go?D!zAtUCa?*u>^ zhuc+=si||15DF&YdPL-VhDl<-3LyZd?JUpZ3mjOz%{;z5guB^2LBG<-8g)q9%nXr- z^XUNY&^O<-qZ(U+C^~`0Hjw+q8#gjg>`P5;avA+gNrdOU?(Q2LjOPWwbk=(5#Q!nN V+*ehX&JO?p002ovPDHLkV1h~0&({C| literal 0 HcmV?d00001 diff --git a/src/assets/images/ui/angular-material/scenes/button-toggle.scene.png b/src/assets/images/ui/angular-material/scenes/button-toggle.scene.png new file mode 100644 index 0000000000000000000000000000000000000000..5a227fda69572d8616ddc883d45bcfb74672c978 GIT binary patch literal 466 zcmeAS@N?(olHy`uVBq!ia0y~yV9WrrPp~ipN%IA1dw>*6x}&cn1H;CC?mvmFKt5w} zkh>GZx^prwfgI5QpAgrdU*G)y|NrL6DRqeqyH>^Q-;lX_s!<4YD<@EKw5N+>NX4zU zw-0(TIm#S(cy+<+SUZKS$@1HAmJtJ(gd-uisYhlXcH#T`Fz_^0Ok`K^Uf)doMITI22> zIoqY3bpo}A0=8saT;$p<6OJXeF}Xd6aVYnr?0=hnHW`F_7=LUrED)bQ!F#( sXQ7|=JL46VtDfbSGQxs{fg$FM_|*3|4qg`Ca{?sj>FVdQ&MBb@0Lf0$W&i*H literal 0 HcmV?d00001 diff --git a/src/assets/images/ui/angular-material/scenes/button.scene.png b/src/assets/images/ui/angular-material/scenes/button.scene.png new file mode 100644 index 0000000000000000000000000000000000000000..74448b3d10f206bcb27081a218bffb4f82a00a35 GIT binary patch literal 2055 zcmV+i2>ADjP)Px#8&FJCMf>#as9^yA|Nrmk;Mvc^)UbEIiZrgMqMt1Q zoC703000MyNkl1UXmX?;5mX?;5mX?;5mX?;5mX?;5 zmX=nDMYt$J=@+;n6`3ibgl1g$70`=)$%>2f^tu_dVdtt|(CY!tSAQdFTS5iDq$>eE z+5j0{$v_u$T7nr@H!)fY`X8heG?jxUNEUC)4ezxBTqy{B)Sr02@}0(y?hxL)!{*txoOaDt0DV~y`uXG7 z>*qUd*$3lH=rx^otyZ;bwhryF-7pXDaixDF2Yuvu{WpnBTXy4gaNBspmWzk?c-S=Y zXk({e4gmV)*t&FwcL*Oo5jp5*&-;+6(-s;GIrPim_1+}-$!y|Bb5o~n+XZNm=?WeX zDtIUb&5d3K9m+Juha7qg@o3g;m%pq{oql?41<;qciBAFAm4W6)dwm(FF&m5*(5+K@ za2Y&jE-cwRn3H^YeS#K;voZ_V|1i?wD>?gNRP+5b^4)IYYtm{e2~HL z&cJfec}7R;^tf%pt7(0Kfw%>yVMhFN*RqH^IuIpK3Odi|$c$(mHt}HGwCb)Xd7C@E zUhk1>w2EEcNuJRvc6ldxMl0&{YNHWS(diF;kErhvwbSZ5y^|+QJAc$mq#pGagWmN+ zbwXvJX))+sFJGXJlh0gn6k8{v>^)agsu(otuv`^P$3Co};B&7OiggAi9%ZEomZ4mY2vDna0f<6DjX{Cpwp9k2}?+Z~yPb5SpLQV)L z5js!bF#h)D1k5T21O?|n=-pzq;42l_hRWEGU>=Ilg3X&h7*$6053h8?D>HA9Y;|Ww z5*)a>kF6&K0YU191JUdFD%b-JrWi$M7D#krEzc6MR+U*4j&5?nu|}!ihU{maSWIon zw=@PYx|6m{>g>yEF{WUiNPiRcH^u078uS_ew0%@+nL}*R<_#j9lIUfsW4#{AUwt=xXy|vpI~B6S0yM8b`Xy+G!kpw?JVds ze<&&j?azjp6~Pom5A76Ma#tlKkuse=vn=M9*leVX)7RP14>ZciN!zCL8*N zQstcH>47cKq9zO+4()D;IO)*`1M%ovz?R4&A{{ z_qAyastt2cO*+j@q?E0IhPxLdt$LiC-OmB~e$Fml|D9iqp3TWWoHDTls-cr?bB zW@G&4tYfTtbXG&t^h|r+89<9nPx=SHp8F@&O`SHGd$oXW59=0(uBBue`qGfor~U_o zxE&{2sF%>@(`*TSVI2QnA3B`r_AnEgMB)*0x|)DySx#4ti<=Pif7@`nW_O3Nc+@hg z2V1Xt7#Bw$XdCee)#*ok>%!}yVTys6>a-yS;wosCRXr?sR++)8|7?nZxCN&%ezk8b z_o`iM`Xw*bX(Hh?O|KrF_hL-uGhAce>GG-(=o*VPAIdm=zv9$`6WhbBjMKer=&6!ULzl<0p;`PHf*MYv zc+HEJX%P>iqSKl8TQwG64)}Y}ksmmB`Yv-EGKUgH24duHoI_`hL>BK%ckuvH>JVE! zTErk98PCN`CRz`&+ef`f<`7%th$9i9{+X4I#8I0aJXAL%4zbl)bUgyfM|#n-rp$>y z7OQN3`2rz{Lu?L-$D`Bxk@nrsA<}zT-lF-3*c=*N+!CSgrB8?P`EXa%`HFc5q3*CB zX-2cXogOR3jDk@2+_XeH@#3+wmBhlIA@Y$ZAm3TCN-HCH1PNBh0&+f``s0wON=+Tc z-Xq1#oC>4W-7hAl@+h_W-V?)6-R&NtRI?s?U*y{Q{toAR_caXH}LS z+xPeBv=@{Pg#}h~>S@oPGkZK6tV3guJXCWUtmb2pO?gPT$uI~Vx}Vu_!x;&v1v3kL zrV4LZC;lTnF&Y>Bi7=Wd?KAP)YCqTun-d!l)T|(#;4i;8RPoaB=VnouO#`2ap}tV; zmmEMg)aUjK-|}}blmIx?g#>2;j8de-5PQ=V-&CL3KKaLU%5>FyQDU2X=!O` lX=!O`X=!O`X=!~b{SS^e(y43ne7pbv002ovPDHLkV1mHZ?I{2N literal 0 HcmV?d00001 diff --git a/src/assets/images/ui/angular-material/scenes/card.scene.png b/src/assets/images/ui/angular-material/scenes/card.scene.png new file mode 100644 index 0000000000000000000000000000000000000000..4f6cac991afc6983dbe4199a1f8616fbd2a6879a GIT binary patch literal 427 zcmeAS@N?(olHy`uVBq!ia0y~yV9WrrPp~ipN%IA1dw>*6x}&cn1H;CC?mvmFKt5w} zkh>GZx^prwfgI5QpAgsYUtb?O+4BGY|5;0oK7V}v{OPSl3ui?uPwW6HHt}?E45_&F z_O4@IlY>Y@V$uVKV`cdrG6yESTPevGpcVe&Z-2n_yCsHJ=Yl`~EpF7;-(1C#A>}zq z1%y_`&2E~#&cVO7;H_x0o$F%$pNsuwXOztUbn)S{TDvMf_wUbhO1}5Jkdy+0U;0%y zdReXYLNDA;zG$~C%!@a4d@@tR&b1qMHk4QH~x zZNIof{%UrRD6!!0trzESJ=@Oo!a4WLBU|wd2zar3;cnk8mGk@kyiKZ3{C`rnoo#iy zsr=n__6O%KSNmUgCOf0}-va#?>3>X5E!8|aciTj;mnXfus=sZan2aWK*Ee7QGkCiC KxvXPx#6;Mo6MfCRTHi7^KUI1X343fA~*yX>w(vvaz6-595 z1V2ecK~#9!?VMe6sz?xq2LZ1M7_XfMyvD)oHQ`ip?V8lNMsxoEZ`ke`qL{d+wzg`E zncDX$3lU7!u3|4^s*A&z@+0k)j>$FWqWeci%jK*(4_m$J%S34ylqVum~=`^ z9hkJZ@<1MzbX4<(0+T*xGAIsVNt;f3kj8)M+o>r400000000EcuRr`>cqK%-o19C? z(^cb521K_;PtGm2DrvlzE_rP}u{<{}DdN3!v<*i3=S6y1s{V&o&$LzxqJn7StMp@h zkxsShX&>vBy2PwrpR3MS>BH_KEm^%x9qq&G@Zg5Nk(S0yj~kDrUu;8vm423B_E)<3 zQyTgvraKjtuVl~MLIP;HZ^Jj000000002+pD(wT<>hchL{HvIPZzdR>9XC) zP4{6*ZnL`6+$e=jCCPj;pxJyVOW$A&Th000000N|Dnx7@P7LLtk(W;||&>AT`@_l)IpPOryx zZQ)GHoxUp_)#`)Svz;%}lcz*qzY}mPtq%51&dft;N&PQ2ccpF8##`y6TWWj<)F zlFCqbq9+cIp6E=JNdkmJoK_x%$KWnHk=88@39Wiv{veiq&-d?r)$y{N2B`#)FVbxK za*@u|Ig_LvbsQ>DJ;pTe9J8fXOMj%7Ifue1J+Po8r%CRZWmgx|=SIa_$=i4n9yW0| zT%_aeRNA$)Y1>^TiC>STIYP3lboITZ4G~q6o%BZfeXu31-?sGNh8lmQCCwkzlK%hO znC@ll@hYYx`CYV(P2OE4Pd(e!uKZvX%Q literal 0 HcmV?d00001 diff --git a/src/assets/images/ui/angular-material/scenes/chips.scene.png b/src/assets/images/ui/angular-material/scenes/chips.scene.png new file mode 100644 index 0000000000000000000000000000000000000000..40f6085b72e4c0d1d76a3483b268056e2eff7b39 GIT binary patch literal 2738 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 literal 0 HcmV?d00001 diff --git a/src/assets/images/ui/angular-material/scenes/datepicker.scene.png b/src/assets/images/ui/angular-material/scenes/datepicker.scene.png new file mode 100644 index 0000000000000000000000000000000000000000..8bfbd872b7cb4ab58057630cfddf3a4522414ff9 GIT binary patch literal 2800 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 XZcvy6qQ4I#00000NkvXXu0mjffv6}~ literal 0 HcmV?d00001 diff --git a/src/assets/images/ui/angular-material/scenes/form-field.scene.png b/src/assets/images/ui/angular-material/scenes/form-field.scene.png new file mode 100644 index 0000000000000000000000000000000000000000..868454dbabab8060edb2f2c20b84b0ade665562d GIT binary patch literal 933 zcmeAS@N?(olHy`uVBq!ia0y~yV9WrrPp~ipN%IA1dw>*6x}&cn1H;CC?mvmFKt5w} zkh>GZx^prwfgGU#pAgr_?>@Z#{-fr=mC*Gk*WGx`kh^Sg^dn^k24+J~7srr_TW@cj zEt+j0!up`QxU<@S*`EKazj&SN-&`2WrB~8tWN|D*O@8`e(RrMq z(lRV27aW**Ng}>@UHJ0EkiF`EPKhD&tc=p7Y*HBu8j*-!^{)GM+Qjbd{#|b^tM``W zOU1%VzwMEZ$s;3Y$pk=iCcC_iKp?-%+BZ2n11@L%2=fJcV_<*pVJ1Ka&xjK z{VXjj*`gZwU;Q=evljFNhDGXj?nA>fF17)9s45JvlQfyHht9 z2FCh%xoLlV{&B_ekG;XU@y7zs-nYHv{XA%1CAUcHrdiIDF1{7@6~26s_sBcD&xWsi zJ&f8Hq$pmGI@VWxG<@mT_=WmgRIJ!7K14sXeEP-qaxmNXUh{q2osTc-Ht}67{GJi~ z{e{=`3p=YLs@}^@cH6}qU%WnUk$exY=I4EwJC`|R&HdvmRJbPwl^ve=yOdv@!TwX2dI_;Ww3 zzAf{5p8AUbYiEA-l)^9fx{`I+xJrM8hHjFV(yqRD_3X(j-yCclmvh>b>dsvE`)}q7 zrue^$-U;ur64-C-y0AORLSmxY43oz5>AF+*Ez(`Qy5*knE{Pg_3%PaElO)z<%quYe z_@5~^PfOREuP9Ky`&r2B=ADZ!`-iX9yzE>$JM->}8?DbWzAe9X&CK_K*7S#kr;B&F zm%f#odggBO{a62P+0F_s_7V1(_2I{-Pg_Jk#vYk@?~GAhp53jRZ5JLDTizFt>R(1` g+BLZ#Ewi6tjwQSN(!$^6z^ujK>FVdQ&MBb@0G{rnOaK4? literal 0 HcmV?d00001 diff --git a/src/assets/images/ui/angular-material/scenes/grid-list.scene.png b/src/assets/images/ui/angular-material/scenes/grid-list.scene.png new file mode 100644 index 0000000000000000000000000000000000000000..236fe74dd5a8dc2e11fbbe133e2552e14b7f35b4 GIT binary patch literal 314 zcmeAS@N?(olHy`uVBq!ia0y~yV9WrrPp~ipN%IA1dw>*6x}&cn1H;CC?mvmFKt5w} zkh>GZx^prwfgJt-pAc8;-Xje0XWbS*e*675gWu8x3EUrnQYSrK978H@y*+o3w?RR~ z#W89D>q>{E%y0IqZDi8p`j>LAcJt(O4XPQ~zzh2Y-)%P6Rpcz@G9ey(5r6U0(b?H~ uz4P_#km@vjR$k)4UOrhxtSPx#8&FJCMeg?f07~pmhSvZ?zF(a4w$b&}<@$=W?kRim zp-557000KxNkl896vnBGM2^c$n{v!3itXc0-Q8Xj#))&JjveojCUKG@ z@j79Twa2^lpS?(c5g-v}JHmA5{bm|FHLX8?JiYfMkPQO>00000000000000000000 z00000_~H+>t9`0p*kUjk^b}`Yu6a0; z9lNp}ZnSM{w;CT07$5!m(Gej#_{`>3f3@uox<&svi1{RY5e(4&=v5+G_c$Dg z_&?_Kfo(TpbtfnK*B^8GY$sZ;)mJ&u7gDq5MtiQ_fj2<=ZaPJJE(22ure+nl}?L-|TsUs~mKR#sTiO{^|9LO6WBuH`hI z@^N@FolgH?Po`5}Yqt9==8;0*grv>0G!dfIUT(VPMrjatH%M9*5${92I(gd4iPn_x z@lBqs_)oCkSGOgdkQTW83j6zRiNPjL>$HIYgCOc?H z_IR5}jK;giNB?vtix2h^Q|-4RPYXTikr*wK3d2;tw8H5trRZ{7Z51YkxP78O=RAG( z+?}TDK9a_=%3S4_q_l;R(0;PFxAwUq5}ESsRAoBL5i*S=wV+&u>9LeLGO# zm9z9IGdE~~(@3HDW9}#>j>q$Icv>0LPBYW3E4k>Se8KiuJP%pYyLe^Y0}G0^t$Cmt zMsrUQ3+g)|eJEC#o_3nw>szTYWui+>Xuww11H)wLV_CUAZSF+tTI zXCw!G_M6aLq55^v7AfQDk?Lp3imo^6^om~%j|N3&nZR->>8VdBzfkX)>U}p2iartx z1663oVPJgW7IVY@F&;uiT`8a^s8P30_Be}jGvaF5_DI_|Wn1@}6K#n)$8ny%FCKKj zL*j1xo&ECHHsGOhT9u=9=4u=g(#v`YlZW7hoXhHp5T2H_!sJB<3vC5v=2BsY0!kvg zIDS@z+tm)_qfyk{i=)NR86Fe5yRW1}*Y1&|7=FuseN_YSN_|h$Ak$R#Rd85r#ysqN1=#$OS?!Eh@TgrIxKz!J4 zf}~3=4MeM8w5zkaaG{aY-SoX(*DajY$HZ8cHP}P|uOxeDWkzf5sw1Z_6VVHIO=vOj zS8?(@iDcyx0w0RqWSL3xFhq3Siw$4XDr>SY3{ZRx2HvGOQ*%Gf98SXc#=WGQ zplYp#55q#6T8xjbXf)9l(VN6wt6%jlPvWkM_Z15@zF@Q-(Rj9?>8hJW=|*`zt<>bK zz$ip_1*3_s*y#6!@<3lP+DZN#8tRGdMDrXms^4pxhB2m_ey?)XBf~NFHyby}hElIT=uje-KYW{1rG(u%@ zl=Wr4EJ)U}L!V`-b*+{r?K_<6uhBu`^yNfXIlQac(wvD&+EIU@RWnxt?&}@)r5MwP zMnzYxx52B;!Or4U{6y7t-w^Hdtop%Uqqt-#WT|=ape~PG>UI*6x}&cn1H;CC?mvmFKt5w} zkh>GZx^prwfgJt-pAgpHvQ$=-T4tH`~51y^peVd}}NnNIU(t~>f})dl6tjw-8Pmw0Hde!V4s?Tgb}HceFD z=g+@cc9-6fThF)f2724T9Bxhhr`!4ek5oP6--P5ekn9$*FILZ!`ON}9Mev}y z?0iSv_TG%bt$U*OMf$Ylt*!0Y=iBuy|9o0W$*(O(mE4Oqsl0zR@mP|ubdtON?IaZQ~u2r-+f)#-^w;dwDXwf*59Ry zY>`e{flIE;&-}u??0AFw$YJ9gG;xpS5M^2dSeEOQ^Xyzuuw z8!Lwr86Y2j2|u0Ta$j`O*;N9y;WIKfYn}NLo4BlcariT+|Ns8ai2MKP1QU7~Hve<_ a%V^CSV49NhNfnrQ7(8A5T-G@yGywp1=_ri= literal 0 HcmV?d00001 diff --git a/src/assets/images/ui/angular-material/scenes/list.scene.png b/src/assets/images/ui/angular-material/scenes/list.scene.png new file mode 100644 index 0000000000000000000000000000000000000000..575c4fc42103cb78baea3522991ebaa54d94b6f4 GIT binary patch literal 1208 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 literal 0 HcmV?d00001 diff --git a/src/assets/images/ui/angular-material/scenes/progress-spinner.scene.png b/src/assets/images/ui/angular-material/scenes/progress-spinner.scene.png new file mode 100644 index 0000000000000000000000000000000000000000..869917c626717ad5dd5d19d8fa753fabee69a1f4 GIT binary patch literal 1462 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 ML3y~=y98hUAIysVNB{r; literal 0 HcmV?d00001 diff --git a/src/assets/images/ui/angular-material/scenes/ripple.scene.png b/src/assets/images/ui/angular-material/scenes/ripple.scene.png new file mode 100644 index 0000000000000000000000000000000000000000..9d9c93ddb1ee98b9d61b2162d9dbdf215d5a3917 GIT binary patch literal 1511 zcmVPx#7*I@9MdjJu|MU0!P;LA@T=?ki&cw%_mYMySsh`if zf&c&oZAnByRCwC$olQ?8IS_^oqVF~;Dc7tsyIg09MqIntmbh|Z{=w{dAe#Tb-GmGw zaTB|{s$8{-F&`0^C&lZx?6Tdsz}dj@G*)PD5!xAq_7VkQKVM2<;3)dyCMm zL1?~V$O!E%LOX-dzzq%5op%^AMH+e4;Vi1d*)wTAXlD=_EJAyW(5*peW_7r&tJ+eB zv#1XDJB1N;X2au&G+2agEkZkk&|neTTZC>cLOX-dU=i92L8C=z!bC11X=hQ=XJ{dp zK0`~T7J6t9g0|+;^pS2YLOVHVvt|B$5jsXPa$Z4 z`z+|JP%ot-O$q&{6m*vfouiL$Qt}9wku22TnyJuGwyy0cp~WmO7kZ@#x}$_{WDBfZiy5P=f95lSxq^GHWMktT(n9BE`q zF09an+y&69I`V)y88HLeQKfM>1V+`7h6M5Pd(sqX`i!Up`jffGMF73jCcVUE(d7n!Xk#(R}cs2u6wve=*jhE#EX~sd_6$l$1e~=|7x*? z9$@cabr)9pGGY(?WwC|szxL3}E%e<0J&<2*^ewk~=s(_|<398*(skz^KEI-Jj z*YxIgWE{?kG#=S99{da^Gh*)^;pKfGb{Ov8phNg)eHX$;Y#?HOqyZOimgiq~mbcS% z|LxgVmB-jXT>AK?>DxgbF}`cMZ!zs2vm=ck6F8=$j-#3mJLq@_{rB~HjT^Q|!wjFk zxEzE2>Q}d+rscu7n( zT#XHA)aQ94CJm~MIy;z{^M<@ZpRV=*2h7qk=z`83g_w9&p2>%jXnOn$W?PDvhDL%} zh$uABWJH?}j}m)K7Z&It)s`l2o_(`Z<|1coN_?|#rCG<9o5p<%psgNjUVQl>uT zDPTz+D5MW+;}Frur@0$T&dmzy<2MRs?+0MAs4kfl15fi}&`37}k@%OeNFHj7^5E46 z7c>Y$!}t~qW@;Sx^Gn$(3-Z?stwDLP4n<;86bbc&C1Ub$5J>vRtP;X_8t2u=UUeD@ zaOQw*$ N002ovPDHLkV1kHq&iw!Y literal 0 HcmV?d00001 diff --git a/src/assets/images/ui/angular-material/scenes/select.scene.png b/src/assets/images/ui/angular-material/scenes/select.scene.png new file mode 100644 index 0000000000000000000000000000000000000000..90b44cc14656d37439d6de4df3586bc2214d2d3b GIT binary patch literal 1752 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 literal 0 HcmV?d00001 diff --git a/src/assets/images/ui/angular-material/scenes/slide-toggle.scene.png b/src/assets/images/ui/angular-material/scenes/slide-toggle.scene.png new file mode 100644 index 0000000000000000000000000000000000000000..15ea8313be2f461d6eb172b537e9d7a276fa9e34 GIT binary patch literal 1797 zcmZ`)cQhM_1CEwUudz-`ghU#>4rf;F*$^vAG$qEB)~HBrB9vAr(u!3hlnPo@5o%S9 zSal6?a;;D`Q_ebd#!1pDTIc=V`~7+EeeWCZeSd#ns*|IQ#Bqh=002P3&K89Q07L=~ z{h;X4L)I_zXC8_u9_fGt02;GE``%)QStJr`V*#lD1G;(`&N*Fnw))239D)IMcX!{q ziO~yai}V1lDL}Z)n~O8pY|9gl^|D|0_9bIqL2fhw06*NZLm{1Grq&;Kg-%@9tb z-5>lj=@fPB-9G{`Y9Tv+gsDtoJ$_ThTu$zWLsOqhE@CiQ(PLdu08(1?KX9Pf8ex2OJtwa} z0P&nbV>;CU>Va=3T*4r}OFo``RX9Kcr+$9VH0bweqDUsg#x9aSxcxS|9`v#Z8u%u0 zFDL?A`J1|UVC_%c3PNj5r&zKM^~k&Rg-qZNX~QE~d*#nT)UK=OBKU@xCVkpH^JU-b z1P6<{Im(*sS{XxxakPx67!A}4=}VM~l`@BY92L_~_ErtquudSa>^KHq2-P#xkLUQ9 z61BvJQi-qb$@NQ%<8ek?mtI)ThsP<;E+~da4p;51JRH~fnOhplih)$Pe2%=|xWhny zv`V70Ytgu_A5VkihyoRfhuaNrn)3&<)+<$YT6f z36a9k(8AqikIN9sO$wCu%E7q;CwgClZm!Z(!-UB#x$N(b)D~gK#cax{owuOuFO$MT z&=sA5Cj@BxjtS3sw;8p&cA3jCFG0f_$ZOja=I@H;5YrdK#M@85b^!ac5W!s~=vp1qW*^2nLzN!9cEn6?XN336r*BW%hO6MeB~Q0o~*I&YK%OXf5mZ5ao7+VT=Jy8bv2>WPLB!r6Sx zS+>rzGJ52k+9voO4wM>yel*W|S`w{#C#Mvw&$=nU!6V+-_XB>}w($IPkrx!vJv7I- zh%=>y^m{7~V^cn8w#b-?nv{uO2i`PuotopXgq&Z-f|vXLk;7L(auF(?ESh7b1aRz@ zp-RU@4JUefXV|DbE(qRd$O{UaJ@(%|x7T0QML-QPS|G!1Q1>lf+O5!g(y z@8-x>Z>;P}3y%aJuCSpN>+y2yt7vjJpEh%AeCITH(;0V_qQ1kXo{j1@dp-Cx6EzX! zWoK$2Q9_5DLlsmRmuF{m%eyO5P3D9DGV~wUz}(g3x@rr?`UtX@#5EqhJC9Fdb2vE< zNz=>3u-hdeVHXyyJT`X>GUM>~!@by0%A;XqvQ$W#J$z?*Uu&a^DUFHCG9SG^Nhx5I z4g_PBzkPAut!lA({czp)`Zt}dPWD&ZI7o%M1boB9ql2j3F;nuhu)u3q@SqaxI3m!$ zyxH_jr-wbg0&Av!#3ZCO3WY)M3oP>_`MKk~W2=f@&&r{V+&U9-utYrh1M~X_DlHw? zrn4gQ|Gk1IxiG=5d+jClBsqN)*pXbBWvR^4jF3ASu)YH^7`!ZYEaXO zuVh*qXT)Uw82kb!_>8SMQ=b!AnBgwraVI&~VUV|$ z!dt@MSrE+5sJMFkNmZT&mXCf=?oOPUq^x@fIXW~ z4f~{F<*oXs=z|w)pf*JG0Cs l!jM&jWB>GDn_nt<03c7C-y&hdrw*?RU}xoss<*gt?_a^`U^xH) literal 0 HcmV?d00001 diff --git a/src/assets/images/ui/angular-material/scenes/slider.scene.png b/src/assets/images/ui/angular-material/scenes/slider.scene.png new file mode 100644 index 0000000000000000000000000000000000000000..8bae38c2f4ce91f6758975c3d66308812f4176c7 GIT binary patch literal 632 zcmeAS@N?(olHy`uVBq!ia0y~yV9WrrPp~ipN%IA1dw>*6x}&cn1H;CC?mvmFKt5w} zkh>GZx^prwfgFhdpAgsIU*4`vW|*(duxsmvIn$>conZ0$+Sa>!J2W11%mJ$Z=jq}Y zQgQ3;?Xy|U4kB$20|T}j2i;yP=~2wMw>7ST?bR)@JL;`pepzQ-me(*53*7guR?IW( z&cHRjO`~0Y(0@R-S*1E%Z}<>cx&fstUXd!al@?e@e5(D*wVGu zp|$?e3oo2&OO9J2dh6P^hZZgCO2i(OUKhK0LC$Gm?CqUd5gkg(`oA|RuafZ--ClT> zdGeEsA)ka4D(_y}b7SB1s1+CFmxgJ5*?A?X)oyy!>I=y$k8;^gt2*iA-d^doH)Y}K zip%GMUa@k|ozi*#>_=C9Zn3KPStq)6e;=8C>`9pRmwVGEc9wfhtPMD3cJoE+KHt4@ zFV=p%ANPIP&Rzc*7e1bwRNbL_r0~hsC}sbW;)!>TJ-0T{&04nj<)LRgSzuwq!0=<9 z@EMs(?dg_h_ueQLR{OU2Q-8Z(_VqP#y9}3WF1-Bj{@k;t7Umy*eYxdA?Ejw7i|eF! z{r_3w^x~uCufwwzet!F5+kKx`eWkyZrFI>j@w_{|blX4sEuXgU>$so(wUwVwtbG56 z`Oe>CDqhlz#tY8z?yLT`ZY#HETM<#n;oG9Th`33C#L`NxOML%dFKp Q^QA$2Pgg&ebxsLQ0H_csk^lez literal 0 HcmV?d00001 diff --git a/src/assets/images/ui/angular-material/scenes/snack-bar.scene.png b/src/assets/images/ui/angular-material/scenes/snack-bar.scene.png new file mode 100644 index 0000000000000000000000000000000000000000..d327b5d02f62b11cc3976b24598dfe476949de57 GIT binary patch literal 1146 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 Roc90#002ovPDHLkV1nA*kk9}C literal 0 HcmV?d00001 diff --git a/src/assets/images/ui/angular-material/scenes/stepper.scene.png b/src/assets/images/ui/angular-material/scenes/stepper.scene.png new file mode 100644 index 0000000000000000000000000000000000000000..031aadea920e6aaf0c616981ace7f6f79080d0dc GIT binary patch literal 1573 zcmZuxYdF&j9R7q6au=!}<0Ck3K*Oe}D% zgurYF_sUdl>}PzP6>Lwy>;nKu$q8GWbM(+uRu|>5g=*`Tunx6A_m_udggcGO@w^Fg zUgQgBGrr*kQP%2mhFrgAe-E0!sV8dKbnMgjJKDQv6dT(BhQl6JrR&zr|L6%H;<0%+ zPbc`bux4fNgMiadR?Ur;**a2GznbAa&QS?Fh_$Tr07V9S+|e2?Hiu$3Cpj^!H@ukZ z4!J=L^HA})y^W;Iqx5cGuTL^-%KT5rKP=1O+Q%=kHG-H{x>s`f15}?&XaHNUY=}Nx zZ?hHG#No`(_%>i-lAz`jEVND z@gJSvGIYA$xtg87Z$3Rrav${Y$XpKv|GI^t(IFNXBhbHBt}N)fD^o{aT(VU;lQST( zoH?K`7Q`qEqk-7d`j2JfDu~rQh>M)0Wqdz^lU8Zewjr4oV@#CLzr>da-Tvn3ycWX> zrJ708#k}GqeVb)9-`3FIC8DJ8_*arzaR=2&o84HY-rasxiJrqh{| zG_Cv`?zUj}bCD6%Lf@279dGOc-b$@*ya|7Fj2G$EgaN}Ej^z<2(;#Dx(Rj^TaiZXE zde3GV!`cgr;SaD2HWWYEdnpP``ZXdcK@zYctxV=ThLhW-UPPAs-&p8B4_NlUsH&BHgWIx7w>oXK{N$1 zAxvdqXDdBO&Z5MV)@ZFRN9#Z;@4em7$YxWzbh};j(NUTL!$)4)qjs~q86PQjRg0%N zgJJC%U{{BJUwL@@KJCvLQx~Z36@+YOjKUcALpM^=8J~S@TbHX;oA^*5L=?7xV}ki% z-=_T7rMam1OHTYYut|kG`AXIz=aFgQRnzW!V;|cj@XOg{?u5njlx#1ZU)#mXb9f#Z zP~ZNO6L(IR`++_St6f7ftIP^%$>7FYze0Os&X6~kppc`vD@ z$!4sp`7`i+gH3ZPiIWyV$#=XqWxc`nkw5&E3O$)pmBAXc9nD|e9^NmH+ZmO?({FK(!XYxA9qtY zg=Ef5BHNJlx%zl0MH^XHpJn+!zDu&q(nA)r!Oh3%p9Yl8)~Ng&gqw?62X>ViMC@6+ zt+M2<)l#Z)>RH%s|1)y94FLvvC-Put8r%7VSo@&BksX>5dQHpLXB`o@D#X+B@-I9BckY literal 0 HcmV?d00001 diff --git a/src/assets/images/ui/angular-material/scenes/table.scene.png b/src/assets/images/ui/angular-material/scenes/table.scene.png new file mode 100644 index 0000000000000000000000000000000000000000..749a16aeb55a8e9344255a989f4482d10da37b92 GIT binary patch literal 2059 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 kbJ`M@C*6x}&cn1H;CC?mvmFKt5w} zkh>GZx^prwfgJt-pAc7uX&P^Tyjyu^-T(jpla6(sE}FlDfq|*Y)5S5Q;?~>ig++@M zM2;7R@FjTjB{=gd?2&Oeeeb^y_YObbhhq6Aex-$E9nB66%!^Z-*Zuuyc^7C9>TCR(qoBO=-?<-%4ZHwl5PiM87aXBx;`21_V{pS;ZJFVF( z8S>Qi==$8^&a>`1-G2?(m;Qax#=dZ^ex%mDvQ?IyMzK{(!!8!Gy^c${@TjMrrOKwq z_3^cRFGDNDMWa-M_y5t{m0Mb5zhL>-UuB=>&Rgeq>W|RXFILkRf6}^UH{E`3V%IO_ zHRr0Irjx5bMmFTCL7&oHp=|I!kb^IQgfZ{+B5O;dfUa4Vsw8_xboy! zcFnujTf%v(zW)6EcU@d=LhhY!!Shb9@0e%Sf8lv|t-rrZ_%D||Tlb63`6O1JTq*wP z*X6wFpWAo;%H8$o;Q4Qyo8@<9t)Khk^!Wo1b2?@@HUMUR5FZTug{*!-STz|f~Znt!;ja~Ul>*6x}&cn1H;CC?mvmFKt5w} zkh>GZx^prwfgFhdpAgqKKR)K==QC6?J%0VXx36#g`t|27U0_%oxQBQDOa=y~@18D> zAr-gY&h*V+Y#`9q$uM8?<45MA8*z@BmdUMOa;_{%znu5a;s5`{^fxtGt7G4K`DK5t z6>)43keln2y2Y*<&%c3>+riZ&I{oU0Q@XOZiW$K(ug3tIooPX(GGT-^@ z;4#J8*{kc1fJpgA6XK3dTeG*M`ktR6Z>EQ{)TIe+CQG2q`(aUPmljX{wiY6D-^1$A za@UK#U%4*&uHwFEyU!w2VWaJ3b|hys)VpPJxur6Do)?**Hem~&W-RNZWeXfYrhd_N ztKV0WdRfyd^YZ=`H0pL$;>m}+kcvzXtTVbxuN8u?DWHD{<(&qnaUCQXzI;p zTPDtaa4dIgh2YXX2hG!d8t)0(bN2hQrCZ;G*2Hb*(0%(VcwgOS4eM3nXBRzdc$j^8 z)~RcD^S9FPi!{H)lU&Dth3fZdP^Tt?IJq z=}$@)e|!1S*zW1fdsZ(OK7afzVb_IATUXoOd2s3Uh6^djyIhJ-^A{go^h-u=`N5-q z)yqP=rDG~=BD=p776g{B`84a@rav>buMeL!t!~awXT?pw7G1hM?a^d8xyO@^)w_7O p+fNsNx+ZhV=gUY51I(<^+s|;C%lBB*f|*eu0Z&&ymvv4FO#pf8p~(OM literal 0 HcmV?d00001 diff --git a/src/assets/images/ui/angular-material/scenes/tree.scene.png b/src/assets/images/ui/angular-material/scenes/tree.scene.png new file mode 100644 index 0000000000000000000000000000000000000000..d8aec40a2503548e4ee761aadd03b87197570c4b GIT binary patch literal 877 zcmV-z1CsoSP)Px#7*I@9MeF$U0El8#@`mH5n7D`O0k;$y^=}&C5Hhe_oYOmRM-FS*-FCp`#{Mn#C$@h}EOL za33e?kQ(-Gp+9t*_Z7*|N&D^`cvug^&wM=+OK+*=$Dy3WnA z9!q}&6PlOT&GKbs{Si#)#H6F8;hQ6%dI%RdDg6;l=%`D>3!PQldJICUN3^&ZExSAG zk8oay{h|wQ%k%s|6TzXTgA1mE(>VRmN5((shXw!u0000000000_!ltm@mc=Ed5_Ez z4_zJkX%t52IyY&%VAt;3o7@N?DZUGOWZok_*XH?gmKL{7X8rv?sE79R9s|YAj6JwM zmznkV|DazFF^b0Dn4Za4h$6Ged`iC4e%^!K&SmnWh^P1WZnb$|Q4j6sJ#JZCowHXL zSVq?0|AYKW`+1LZtu7xg)8WG?>iqpb$iEQ#MVGcSx8=RKEl(w_e9lc^Cl|sOOt{?# z0000000000006+B=tX#Q2z>i5^{_@hqHXA~mUCpSS#Lke3X_hbic?%;U2!r4cX8yYqg$E)cSkP zUSsQi3)6|zOjqkNYe>~&|HX%9arNqY;108%NMDbEaiLjk(=*DUXRgz&5GopOIz3RE z(3PKGAzF`J=-J~}8BplV)gyNGNZ7s}^g Date: Fri, 4 Jun 2021 22:28:53 +0300 Subject: [PATCH 02/21] (data/navigation) Fixed the "Invoice" icon, added missing dashboard links to the "futuristicNavigation" data --- src/app/mock-api/common/navigation/data.ts | 140 ++------------------- 1 file changed, 8 insertions(+), 132 deletions(-) diff --git a/src/app/mock-api/common/navigation/data.ts b/src/app/mock-api/common/navigation/data.ts index 1e230442..f10fe228 100644 --- a/src/app/mock-api/common/navigation/data.ts +++ b/src/app/mock-api/common/navigation/data.ts @@ -596,7 +596,7 @@ export const defaultNavigation: FuseNavigationItem[] = [ id : 'pages.invoice', title : 'Invoice', type : 'collapsable', - icon : 'heroicons_outline:exclamation-circle', + icon : 'heroicons_outline:calculator', children: [ { id : 'pages.invoice.printable', @@ -1156,141 +1156,17 @@ export const compactNavigation: FuseNavigationItem[] = [ } ]; export const futuristicNavigation: FuseNavigationItem[] = [ + { + id : 'dashboards', + title : 'DASHBOARDS', + type : 'group', + children: [] // This will be filled from defaultNavigation so we don't have to manage multiple sets of the same navigation + }, { id : 'apps', title : 'APPS', type : 'group', - children: [ - { - id : 'apps.dashboards.analytics', - title: 'Analytics', - type : 'basic', - icon : 'heroicons_outline:chart-pie', - link : '/dashboards/analytics' - }, - { - id : 'apps.dashboards.project', - title: 'Project', - type : 'basic', - icon : 'heroicons_outline:clipboard-check', - link : '/dashboards/project' - }, - { - id : 'apps.academy', - title: 'Academy', - type : 'basic', - icon : 'heroicons_outline:academic-cap', - link : '/apps/academy' - }, - { - id : 'apps.calendar', - title: 'Calendar', - type : 'basic', - icon : 'heroicons_outline:calendar', - link : '/apps/calendar' - }, - { - id : 'apps.chat', - title: 'Chat', - type : 'basic', - icon : 'heroicons_outline:chat-alt', - link : '/apps/chat' - }, - { - id : 'apps.contacts', - title: 'Contacts', - type : 'basic', - icon : 'heroicons_outline:user-group', - link : '/apps/contacts' - }, - { - id : 'apps.ecommerce', - title : 'ECommerce', - type : 'collapsable', - icon : 'heroicons_outline:shopping-cart', - children: [ - { - id : 'apps.ecommerce.inventory', - title: 'Inventory', - type : 'basic', - link : '/apps/ecommerce/inventory' - } - ] - }, - { - id : 'apps.file-manager', - title: 'File manager', - type : 'basic', - icon : 'heroicons_outline:shopping-cart', - link : '/apps/file-manager' - }, - { - id : 'apps.help-center', - title : 'Help center', - type : 'collapsable', - icon : 'heroicons_outline:support', - link : '/apps/help-center', - children: [ - { - id : 'apps.help-center.home', - title : 'Home', - type : 'basic', - link : '/apps/help-center', - exactMatch: true - }, - { - id : 'apps.help-center.faqs', - title: 'FAQs', - type : 'basic', - link : '/apps/help-center/faqs' - }, - { - id : 'apps.help-center.guides', - title: 'Guides', - type : 'basic', - link : '/apps/help-center/guides' - }, - { - id : 'apps.help-center.support', - title: 'Support', - type : 'basic', - link : '/apps/help-center/support' - } - ] - }, - { - id : 'apps.mailbox', - title: 'Mailbox', - type : 'basic', - icon : 'heroicons_outline:mail', - link : '/apps/mailbox', - badge: { - title : '27', - classes: 'px-2 bg-black bg-opacity-25 text-white rounded-full' - } - }, - { - id : 'apps.notes', - title: 'Notes', - type : 'basic', - icon : 'heroicons_outline:pencil-alt', - link : '/apps/notes' - }, - { - id : 'apps.scrumboard', - title: 'Scrumboard', - type : 'basic', - icon : 'heroicons_outline:view-boards', - link : '/apps/scrumboard' - }, - { - id : 'apps.tasks', - title: 'Tasks', - type : 'basic', - icon : 'heroicons_outline:check-circle', - link : '/apps/tasks' - } - ] + children: [] // This will be filled from defaultNavigation so we don't have to manage multiple sets of the same navigation }, { id : 'others', From 11ad2c89df313df1ed86a86bece5008d9878eaed Mon Sep 17 00:00:00 2001 From: sercan Date: Sat, 5 Jun 2021 13:57:39 +0300 Subject: [PATCH 03/21] (apps/file-manager) Added support for nested folder views --- src/app/mock-api/apps/file-manager/api.ts | 41 +++- src/app/mock-api/apps/file-manager/data.ts | 78 ++++++++ .../details/details.component.html | 2 +- .../apps/file-manager/file-manager.guards.ts | 8 +- .../file-manager/file-manager.resolvers.ts | 48 +++++ .../apps/file-manager/file-manager.routing.ts | 21 ++- .../apps/file-manager/file-manager.service.ts | 4 +- .../apps/file-manager/file-manager.types.ts | 2 + .../file-manager/list/list.component.html | 177 +++++++++++------- 9 files changed, 303 insertions(+), 78 deletions(-) diff --git a/src/app/mock-api/apps/file-manager/api.ts b/src/app/mock-api/apps/file-manager/api.ts index 95c56045..ff4f7e7a 100644 --- a/src/app/mock-api/apps/file-manager/api.ts +++ b/src/app/mock-api/apps/file-manager/api.ts @@ -33,10 +33,18 @@ export class FileManagerMockApi // ----------------------------------------------------------------------------------------------------- this._fuseMockApiService .onGet('api/apps/file-manager') - .reply(() => { + .reply(({request}) => { // Clone the items - const items = cloneDeep(this._items); + let items = cloneDeep(this._items); + + // See if a folder id exist + const folderId = request.params.get('folderId') ?? null; + + // Filter the items by folder id. If folder id is null, + // that means we want to root items which have folder id + // of null + items = items.filter(item => item.folderId === folderId); // Separate the items by folders and files const folders = items.filter(item => item.type === 'folder'); @@ -46,11 +54,38 @@ export class FileManagerMockApi folders.sort((a, b) => a.name.localeCompare(b.name)); files.sort((a, b) => a.name.localeCompare(b.name)); + // Figure out the path and attach it to the response + // Prepare the empty paths array + const pathItems = cloneDeep(this._items); + const path = []; + + // Prepare the current folder + let currentFolder = null; + + // Get the current folder and add it as the first entry + if ( folderId ) + { + currentFolder = pathItems.find(item => item.id === folderId); + path.push(currentFolder); + } + + // Start traversing and storing the folders as a path array + // until we hit null on the folder id + while ( currentFolder?.folderId ) + { + currentFolder = pathItems.find(item => item.id === currentFolder.folderId); + if ( currentFolder ) + { + path.unshift(currentFolder); + } + } + return [ 200, { folders, - files + files, + path } ]; }); diff --git a/src/app/mock-api/apps/file-manager/data.ts b/src/app/mock-api/apps/file-manager/data.ts index bf4b7ff0..fa6184f6 100644 --- a/src/app/mock-api/apps/file-manager/data.ts +++ b/src/app/mock-api/apps/file-manager/data.ts @@ -2,6 +2,7 @@ export const items = [ { id : 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68', + folderId : null, name : 'Personal', createdBy : 'Brian Hughes', createdAt : 'April 24, 2018', @@ -13,6 +14,7 @@ export const items = [ }, { id : '6da8747f-b474-4c9a-9eba-5ef212285500', + folderId : null, name : 'Photos', createdBy : 'Brian Hughes', createdAt : 'November 01, 2021', @@ -24,6 +26,7 @@ export const items = [ }, { id : 'ed58add1-45a7-41db-887d-3ca7ee7f2719', + folderId : null, name : 'Work', createdBy : 'Brian Hughes', createdAt : 'May 8, 2020', @@ -35,6 +38,7 @@ export const items = [ }, { id : '5cb66e32-d1ac-4b9a-8c34-5991ce25add2', + folderId : null, name : 'Contract #123', createdBy : 'Brian Hughes', createdAt : 'January 14, 2021', @@ -46,6 +50,7 @@ export const items = [ }, { id : '3ffc3d84-8f2d-4929-903a-ef6fc21657a7', + folderId : null, name : 'Estimated budget', createdBy : 'Brian Hughes', createdAt : 'December 14, 2020', @@ -57,6 +62,7 @@ export const items = [ }, { id : '157adb9a-14f8-4559-ac93-8be893c9f80a', + folderId : null, name : 'DMCA notice #42', createdBy : 'Brian Hughes', createdAt : 'May 8, 2021', @@ -68,6 +74,7 @@ export const items = [ }, { id : '4f64597a-df7e-461c-ad60-f33e5f7e0747', + folderId : null, name : 'Invoices', createdBy : 'Brian Hughes', createdAt : 'January 12, 2020', @@ -79,6 +86,7 @@ export const items = [ }, { id : 'e445c445-57b2-4476-8c62-b068e3774b8e', + folderId : null, name : 'Crash logs', createdBy : 'Brian Hughes', createdAt : 'June 8, 2020', @@ -90,6 +98,7 @@ export const items = [ }, { id : 'b482f93e-7847-4614-ad48-b78b78309f81', + folderId : null, name : 'System logs', createdBy : 'Brian Hughes', createdAt : 'June 8, 2020', @@ -101,6 +110,7 @@ export const items = [ }, { id : 'ec07a98d-2e5b-422c-a9b2-b5d1c0e263f5', + folderId : null, name : 'Personal projects', createdBy : 'Brian Hughes', createdAt : 'March 18, 2020', @@ -112,6 +122,7 @@ export const items = [ }, { id : 'ae908d59-07da-4dd8-aba0-124e50289295', + folderId : null, name : 'Biometric portrait', createdBy : 'Brian Hughes', createdAt : 'August 29, 2020', @@ -123,6 +134,7 @@ export const items = [ }, { id : '4038a5b6-5b1a-432d-907c-e037aeb817a8', + folderId : null, name : 'Scanned image 20201012-1', createdBy : 'Brian Hughes', createdAt : 'September 13, 2020', @@ -134,6 +146,7 @@ export const items = [ }, { id : '630d2e9a-d110-47a0-ac03-256073a0f56d', + folderId : null, name : 'Scanned image 20201012-2', createdBy : 'Brian Hughes', createdAt : 'September 14, 2020', @@ -145,6 +158,7 @@ export const items = [ }, { id : '1417d5ed-b616-4cff-bfab-286677b69d79', + folderId : null, name : 'Prices', createdBy : 'Brian Hughes', createdAt : 'April 07, 2020', @@ -156,6 +170,7 @@ export const items = [ }, { id : 'bd2817c7-6751-40dc-b252-b6b5634c0689', + folderId : null, name : 'Shopping list', createdBy : 'Brian Hughes', createdAt : 'March 26, 2021', @@ -167,6 +182,7 @@ export const items = [ }, { id : '14fb47c9-6eeb-4070-919c-07c8133285d1', + folderId : null, name : 'Summer budget', createdBy : 'Brian Hughes', createdAt : 'June 02, 2020', @@ -175,5 +191,67 @@ export const items = [ type : 'XLS', contents : null, description: null + }, + + { + id : '894e8514-03d3-4f5e-bb28-f6c092501fae', + folderId : 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68', + name : 'A personal file', + createdBy : 'Brian Hughes', + createdAt : 'June 02, 2020', + modifiedAt : 'June 02, 2020', + size : '943 KB', + type : 'XLS', + contents : null, + description: null + }, + { + id : '74010810-16cf-441d-a1aa-c9fb620fceea', + folderId : 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68', + name : 'A personal folder', + createdBy : 'Brian Hughes', + createdAt : 'November 01, 2021', + modifiedAt : 'November 01, 2021', + size : '3015 MB', + type : 'folder', + contents : '907 files', + description: 'Personal photos; selfies, family, vacation and etc.' + }, + { + id : 'a8c73e5a-8114-436d-ab54-d900b50b3762', + folderId : '74010810-16cf-441d-a1aa-c9fb620fceea', + name : 'A personal file within the personal folder', + createdBy : 'Brian Hughes', + createdAt : 'June 02, 2020', + modifiedAt : 'June 02, 2020', + size : '943 KB', + type : 'XLS', + contents : null, + description: null + }, + + { + id : '12d851a8-4f60-473e-8a59-abe4b422ea99', + folderId : '6da8747f-b474-4c9a-9eba-5ef212285500', + name : 'Photos file', + createdBy : 'Brian Hughes', + createdAt : 'June 02, 2020', + modifiedAt : 'June 02, 2020', + size : '943 KB', + type : 'XLS', + contents : null, + description: null + }, + { + id : '2836766d-27e1-4f40-a31a-5a8419105e7e', + folderId : 'ed58add1-45a7-41db-887d-3ca7ee7f2719', + name : 'Work file', + createdBy : 'Brian Hughes', + createdAt : 'June 02, 2020', + modifiedAt : 'June 02, 2020', + size : '943 KB', + type : 'XLS', + contents : null, + description: null } ]; diff --git a/src/app/modules/admin/apps/file-manager/details/details.component.html b/src/app/modules/admin/apps/file-manager/details/details.component.html index 55599ee8..b258d689 100644 --- a/src/app/modules/admin/apps/file-manager/details/details.component.html +++ b/src/app/modules/admin/apps/file-manager/details/details.component.html @@ -4,7 +4,7 @@

diff --git a/src/app/modules/admin/apps/file-manager/file-manager.guards.ts b/src/app/modules/admin/apps/file-manager/file-manager.guards.ts index ce59124f..a38523a3 100644 --- a/src/app/modules/admin/apps/file-manager/file-manager.guards.ts +++ b/src/app/modules/admin/apps/file-manager/file-manager.guards.ts @@ -22,17 +22,17 @@ export class CanDeactivateFileManagerDetails implements CanDeactivate } } +@Injectable({ + providedIn: 'root' +}) +export class FileManagerFolderResolver implements Resolve +{ + /** + * Constructor + */ + constructor( + private _router: Router, + private _fileManagerService: FileManagerService + ) + { + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Resolver + * + * @param route + * @param state + */ + resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable + { + return this._fileManagerService.getItems(route.paramMap.get('folderId')) + .pipe( + // Error here means the requested task is not available + catchError((error) => { + + // Log the error + console.error(error); + + // Get the parent url + const parentUrl = state.url.split('/').slice(0, -1).join('/'); + + // Navigate to there + this._router.navigateByUrl(parentUrl); + + // Throw an error + return throwError(error); + }) + ); + } +} + @Injectable({ providedIn: 'root' }) diff --git a/src/app/modules/admin/apps/file-manager/file-manager.routing.ts b/src/app/modules/admin/apps/file-manager/file-manager.routing.ts index db36be9d..90808dcd 100644 --- a/src/app/modules/admin/apps/file-manager/file-manager.routing.ts +++ b/src/app/modules/admin/apps/file-manager/file-manager.routing.ts @@ -3,13 +3,30 @@ import { CanDeactivateFileManagerDetails } from 'app/modules/admin/apps/file-man import { FileManagerComponent } from 'app/modules/admin/apps/file-manager/file-manager.component'; import { FileManagerListComponent } from 'app/modules/admin/apps/file-manager/list/list.component'; import { FileManagerDetailsComponent } from 'app/modules/admin/apps/file-manager/details/details.component'; -import { FileManagerItemResolver, FileManagerItemsResolver } from 'app/modules/admin/apps/file-manager/file-manager.resolvers'; +import { FileManagerFolderResolver, FileManagerItemResolver, FileManagerItemsResolver } from 'app/modules/admin/apps/file-manager/file-manager.resolvers'; export const fileManagerRoutes: Route[] = [ { path : '', component: FileManagerComponent, children : [ + { + path : 'folders/:folderId', + component: FileManagerListComponent, + resolve : { + item: FileManagerFolderResolver + }, + children: [ + { + path : 'details/:id', + component : FileManagerDetailsComponent, + resolve : { + item: FileManagerItemResolver + }, + canDeactivate: [CanDeactivateFileManagerDetails] + } + ] + }, { path : '', component: FileManagerListComponent, @@ -18,7 +35,7 @@ export const fileManagerRoutes: Route[] = [ }, children : [ { - path : ':id', + path : 'details/:id', component : FileManagerDetailsComponent, resolve : { item: FileManagerItemResolver diff --git a/src/app/modules/admin/apps/file-manager/file-manager.service.ts b/src/app/modules/admin/apps/file-manager/file-manager.service.ts index 0f89e9e5..e0c9b89b 100644 --- a/src/app/modules/admin/apps/file-manager/file-manager.service.ts +++ b/src/app/modules/admin/apps/file-manager/file-manager.service.ts @@ -47,9 +47,9 @@ export class FileManagerService /** * Get items */ - getItems(): Observable + getItems(folderId: string | null = null): Observable { - return this._httpClient.get('api/apps/file-manager').pipe( + return this._httpClient.get('api/apps/file-manager', {params: {folderId}}).pipe( tap((response: any) => { this._items.next(response); }) diff --git a/src/app/modules/admin/apps/file-manager/file-manager.types.ts b/src/app/modules/admin/apps/file-manager/file-manager.types.ts index c779ca9b..d24cd40b 100644 --- a/src/app/modules/admin/apps/file-manager/file-manager.types.ts +++ b/src/app/modules/admin/apps/file-manager/file-manager.types.ts @@ -2,11 +2,13 @@ export interface Items { folders: Item[]; files: Item[]; + path: any[]; } export interface Item { id?: string; + folderId?: string; name?: string; createdBy?: string; createdAt?: string; diff --git a/src/app/modules/admin/apps/file-manager/list/list.component.html b/src/app/modules/admin/apps/file-manager/list/list.component.html index e2175e8e..2fe15d90 100644 --- a/src/app/modules/admin/apps/file-manager/list/list.component.html +++ b/src/app/modules/admin/apps/file-manager/list/list.component.html @@ -26,7 +26,32 @@ @@ -42,75 +67,95 @@
- -
+ +
-
Folders
-
- - - -
- - -
Files
-
- - - -
-
- - - - - -
-
- - - - - - - - -
- -
- {{item.type.toUpperCase()}} -
+ + -
-
-
{{item.name}}
- -
{{item.contents}}
- -
- - + + + + + + +
+ From bb57ec2324c4ed4fceb5d17094b05206f8f3563f Mon Sep 17 00:00:00 2001 From: sercan Date: Mon, 7 Jun 2021 11:40:33 +0300 Subject: [PATCH 04/21] (ui/advanced-search) Added an example search form that uses query parameters for Advanced Search forms --- src/app/app.routing.ts | 3 + src/app/mock-api/common/navigation/data.ts | 7 ++ .../advanced-search.component.html | 114 ++++++++++++++++++ .../advanced-search.component.ts | 108 +++++++++++++++++ .../advanced-search/advanced-search.module.ts | 32 +++++ .../advanced-search.routing.ts | 9 ++ 6 files changed, 273 insertions(+) create mode 100644 src/app/modules/admin/ui/advanced-search/advanced-search.component.html create mode 100644 src/app/modules/admin/ui/advanced-search/advanced-search.component.ts create mode 100644 src/app/modules/admin/ui/advanced-search/advanced-search.module.ts create mode 100644 src/app/modules/admin/ui/advanced-search/advanced-search.routing.ts diff --git a/src/app/app.routing.ts b/src/app/app.routing.ts index c74df6d4..0cccfb93 100644 --- a/src/app/app.routing.ts +++ b/src/app/app.routing.ts @@ -149,6 +149,9 @@ export const appRoutes: Route[] = [ // TailwindCSS {path: 'tailwindcss', loadChildren: () => import('app/modules/admin/ui/tailwindcss/tailwindcss.module').then(m => m.TailwindCSSModule)}, + // Advanced search + {path: 'advanced-search', loadChildren: () => import('app/modules/admin/ui/advanced-search/advanced-search.module').then(m => m.AdvancedSearchModule)}, + // Animations {path: 'animations', loadChildren: () => import('app/modules/admin/ui/animations/animations.module').then(m => m.AnimationsModule)}, diff --git a/src/app/mock-api/common/navigation/data.ts b/src/app/mock-api/common/navigation/data.ts index f10fe228..26b22d3f 100644 --- a/src/app/mock-api/common/navigation/data.ts +++ b/src/app/mock-api/common/navigation/data.ts @@ -695,6 +695,13 @@ export const defaultNavigation: FuseNavigationItem[] = [ icon : 'heroicons_outline:sparkles', link : '/ui/tailwindcss' }, + { + id : 'user-interface.advanced-search', + title: 'Advanced search', + type : 'basic', + icon : 'heroicons_outline:search-circle', + link : '/ui/advanced-search' + }, { id : 'user-interface.animations', title: 'Animations', diff --git a/src/app/modules/admin/ui/advanced-search/advanced-search.component.html b/src/app/modules/admin/ui/advanced-search/advanced-search.component.html new file mode 100644 index 00000000..318f0387 --- /dev/null +++ b/src/app/modules/admin/ui/advanced-search/advanced-search.component.html @@ -0,0 +1,114 @@ +
+ + +
+
+ +
+ +
+ +
+

+ Advanced Search +

+
+
+
+ + +
+ +
+
+

+ This page demonstrates a query parameters based search using Angular's built-in routerLink directive and its + queryParams input. +

+

+ Fill the form, hit the Search button and then observe the address bar of your browser. If you reload the + page with the parameters, you will see that the form will be populated automatically. We also added an output window so + you can observe the query parameters object. +

+

+ This method can be used for implementing Advanced search mechanics as well as Filtering similar to the + products filtering that you can find in most eCommerce websites. +

+
+ + +
+ + + + Keywords + + + + + + Type + + Any + Files + Folders + + + +
+ + + In trash + + + + + Archived + + + + + Starred + +
+ + +
+ + +
+
+ + +
+ +
+
+
+
diff --git a/src/app/modules/admin/ui/advanced-search/advanced-search.component.ts b/src/app/modules/admin/ui/advanced-search/advanced-search.component.ts new file mode 100644 index 00000000..d0f3e8e2 --- /dev/null +++ b/src/app/modules/admin/ui/advanced-search/advanced-search.component.ts @@ -0,0 +1,108 @@ +import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { FormBuilder, FormGroup } from '@angular/forms'; +import { ActivatedRoute, Params, Router } from '@angular/router'; +import { coerceBooleanProperty } from '@angular/cdk/coercion'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; + +@Component({ + selector : 'advanced-search', + templateUrl : './advanced-search.component.html', + encapsulation : ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class AdvancedSearchComponent implements OnInit, OnDestroy +{ + searchForm: FormGroup; + searchFormDefaults: any = { + keywords : '', + type : 'any', + isTrashed : false, + isArchived: false, + isStarred : false + }; + queryParams: Params; + private _unsubscribeAll: Subject = new Subject(); + + /** + * Constructor + */ + constructor( + private _activatedRoute: ActivatedRoute, + private _formBuilder: FormBuilder, + private _router: Router + ) + { + // Prepare the search form with defaults + this.searchForm = this._formBuilder.group({ + keywords : [this.searchFormDefaults.keywords], + type : [this.searchFormDefaults.type], + isTrashed : [this.searchFormDefaults.isTrashed], + isArchived: [this.searchFormDefaults.isArchived], + isStarred : [this.searchFormDefaults.isStarred] + }); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void + { + // Subscribe to query params change + this._activatedRoute.queryParams + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((queryParams) => { + + // Store the query params + this.queryParams = queryParams; + + // Fill the form with the values from query + // params without emitting any form events + this.searchForm.setValue({ + keywords : queryParams?.keywords ?? this.searchFormDefaults.keywords, + type : queryParams?.type ?? this.searchFormDefaults.type, + isTrashed : queryParams?.isTrashed ? coerceBooleanProperty(queryParams?.isTrashed) : this.searchFormDefaults.isTrashed, + isArchived: queryParams?.isArchived ? coerceBooleanProperty(queryParams?.isArchived) : this.searchFormDefaults.isArchived, + isStarred : queryParams?.isStarred ? coerceBooleanProperty(queryParams?.isStarred) : this.searchFormDefaults.isStarred + }, {emitEvent: false}); + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void + { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Reset the search form using the default + */ + reset(): void + { + this.searchForm.reset(this.searchFormDefaults); + } + + /** + * Perform the search + */ + search(): void + { + // Add query params using the router + this._router.navigate(['./'], { + queryParams: this.searchForm.value, + relativeTo : this._activatedRoute + }); + } +} diff --git a/src/app/modules/admin/ui/advanced-search/advanced-search.module.ts b/src/app/modules/admin/ui/advanced-search/advanced-search.module.ts new file mode 100644 index 00000000..bea58f5c --- /dev/null +++ b/src/app/modules/admin/ui/advanced-search/advanced-search.module.ts @@ -0,0 +1,32 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { MatButtonModule } from '@angular/material/button'; +import { MatCheckboxModule } from '@angular/material/checkbox'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatIconModule } from '@angular/material/icon'; +import { MatInputModule } from '@angular/material/input'; +import { MatSelectModule } from '@angular/material/select'; +import { FuseHighlightModule } from '@fuse/components/highlight'; +import { SharedModule } from 'app/shared/shared.module'; +import { AdvancedSearchComponent } from 'app/modules/admin/ui/advanced-search/advanced-search.component'; +import { advancedSearchRoutes } from 'app/modules/admin/ui/advanced-search/advanced-search.routing'; + +@NgModule({ + declarations: [ + AdvancedSearchComponent + ], + imports : [ + RouterModule.forChild(advancedSearchRoutes), + MatButtonModule, + MatCheckboxModule, + MatFormFieldModule, + MatIconModule, + MatInputModule, + MatSelectModule, + FuseHighlightModule, + SharedModule + ] +}) +export class AdvancedSearchModule +{ +} diff --git a/src/app/modules/admin/ui/advanced-search/advanced-search.routing.ts b/src/app/modules/admin/ui/advanced-search/advanced-search.routing.ts new file mode 100644 index 00000000..47df94ab --- /dev/null +++ b/src/app/modules/admin/ui/advanced-search/advanced-search.routing.ts @@ -0,0 +1,9 @@ +import { Route } from '@angular/router'; +import { AdvancedSearchComponent } from 'app/modules/admin/ui/advanced-search/advanced-search.component'; + +export const advancedSearchRoutes: Route[] = [ + { + path : '', + component: AdvancedSearchComponent + } +]; From ca7b4c7e5d5a891f9876397d2f3b1a1fc2092870 Mon Sep 17 00:00:00 2001 From: sercan Date: Mon, 7 Jun 2021 11:41:29 +0300 Subject: [PATCH 05/21] (ui/advanced-search) Removed unused MatIconModule import --- .../modules/admin/ui/advanced-search/advanced-search.module.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/app/modules/admin/ui/advanced-search/advanced-search.module.ts b/src/app/modules/admin/ui/advanced-search/advanced-search.module.ts index bea58f5c..371a8dd0 100644 --- a/src/app/modules/admin/ui/advanced-search/advanced-search.module.ts +++ b/src/app/modules/admin/ui/advanced-search/advanced-search.module.ts @@ -3,7 +3,6 @@ import { RouterModule } from '@angular/router'; import { MatButtonModule } from '@angular/material/button'; import { MatCheckboxModule } from '@angular/material/checkbox'; import { MatFormFieldModule } from '@angular/material/form-field'; -import { MatIconModule } from '@angular/material/icon'; import { MatInputModule } from '@angular/material/input'; import { MatSelectModule } from '@angular/material/select'; import { FuseHighlightModule } from '@fuse/components/highlight'; @@ -20,7 +19,6 @@ import { advancedSearchRoutes } from 'app/modules/admin/ui/advanced-search/advan MatButtonModule, MatCheckboxModule, MatFormFieldModule, - MatIconModule, MatInputModule, MatSelectModule, FuseHighlightModule, From 89f5a4ec692b8aa309c144b33149a85e31624ea0 Mon Sep 17 00:00:00 2001 From: sercan Date: Mon, 7 Jun 2021 12:18:39 +0300 Subject: [PATCH 06/21] (core/user) Renamed user.model to user.types for better consistency --- src/app/app.types.ts | 2 +- src/app/core/user/user.service.ts | 2 +- src/app/core/user/{user.model.ts => user.types.ts} | 0 src/app/layout/common/user-menu/user-menu.component.ts | 2 +- 4 files changed, 3 insertions(+), 3 deletions(-) rename src/app/core/user/{user.model.ts => user.types.ts} (100%) diff --git a/src/app/app.types.ts b/src/app/app.types.ts index 10a6fb69..547cdb88 100644 --- a/src/app/app.types.ts +++ b/src/app/app.types.ts @@ -2,7 +2,7 @@ import { FuseNavigationItem } from '@fuse/components/navigation'; import { Message } from 'app/layout/common/messages/messages.types'; import { Notification } from 'app/layout/common/notifications/notifications.types'; import { Shortcut } from 'app/layout/common/shortcuts/shortcuts.types'; -import { User } from 'app/core/user/user.model'; +import { User } from 'app/core/user/user.types'; export interface InitialData { diff --git a/src/app/core/user/user.service.ts b/src/app/core/user/user.service.ts index d2c0a07e..9791b52e 100644 --- a/src/app/core/user/user.service.ts +++ b/src/app/core/user/user.service.ts @@ -2,7 +2,7 @@ import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable, ReplaySubject } from 'rxjs'; import { map } from 'rxjs/operators'; -import { User } from 'app/core/user/user.model'; +import { User } from 'app/core/user/user.types'; @Injectable({ providedIn: 'root' diff --git a/src/app/core/user/user.model.ts b/src/app/core/user/user.types.ts similarity index 100% rename from src/app/core/user/user.model.ts rename to src/app/core/user/user.types.ts diff --git a/src/app/layout/common/user-menu/user-menu.component.ts b/src/app/layout/common/user-menu/user-menu.component.ts index 45a4bc4b..6e7b980f 100644 --- a/src/app/layout/common/user-menu/user-menu.component.ts +++ b/src/app/layout/common/user-menu/user-menu.component.ts @@ -3,7 +3,7 @@ import { Router } from '@angular/router'; import { BooleanInput } from '@angular/cdk/coercion'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; -import { User } from 'app/core/user/user.model'; +import { User } from 'app/core/user/user.types'; import { UserService } from 'app/core/user/user.service'; @Component({ From 9005f08ac73a08b0a7ca974f7c04c120e8c89c1e Mon Sep 17 00:00:00 2001 From: sercan Date: Tue, 8 Jun 2021 17:29:45 +0300 Subject: [PATCH 07/21] (app.resolver) Use services to request the initial data (layouts) Common components of layouts now requests their data directly from their service rather than getting it from route data (core) New navigation service to request and store the navigation data --- src/app/app.resolvers.ts | 44 ++++++++--------- src/app/app.types.ts | 19 -------- src/app/core/config/app.config.ts | 2 +- src/app/core/navigation/navigation.service.ts | 48 +++++++++++++++++++ src/app/core/navigation/navigation.types.ts | 9 ++++ src/app/core/user/user.service.ts | 15 +++++- .../languages.component.html} | 0 .../languages.component.ts} | 8 ++-- .../languages.module.ts} | 8 ++-- .../common/messages/messages.component.ts | 21 ++------ .../common/messages/messages.service.ts | 18 ++++--- .../notifications/notifications.component.ts | 21 ++------ .../notifications/notifications.service.ts | 18 ++++--- .../common/shortcuts/shortcuts.component.html | 10 +++- .../common/shortcuts/shortcuts.component.ts | 21 ++------ .../common/shortcuts/shortcuts.service.ts | 18 ++++--- .../user.component.html} | 0 .../user.component.ts} | 8 ++-- .../user.module.ts} | 8 ++-- .../centered/centered.component.html | 12 ++--- .../horizontal/centered/centered.component.ts | 16 ++++--- .../horizontal/centered/centered.module.ts | 8 ++-- .../enterprise/enterprise.component.html | 12 ++--- .../enterprise/enterprise.component.ts | 18 ++++--- .../enterprise/enterprise.module.ts | 8 ++-- .../material/material.component.html | 12 ++--- .../horizontal/material/material.component.ts | 18 ++++--- .../horizontal/material/material.module.ts | 8 ++-- .../horizontal/modern/modern.component.html | 12 ++--- .../horizontal/modern/modern.component.ts | 18 ++++--- .../horizontal/modern/modern.module.ts | 8 ++-- .../vertical/classic/classic.component.html | 12 ++--- .../vertical/classic/classic.component.ts | 18 ++++--- .../vertical/classic/classic.module.ts | 8 ++-- .../vertical/classy/classy.component.html | 22 ++++----- .../vertical/classy/classy.component.ts | 29 ++++++++--- .../layouts/vertical/classy/classy.module.ts | 8 ++-- .../vertical/compact/compact.component.html | 12 ++--- .../vertical/compact/compact.component.ts | 18 ++++--- .../vertical/compact/compact.module.ts | 8 ++-- .../vertical/dense/dense.component.html | 12 ++--- .../layouts/vertical/dense/dense.component.ts | 18 ++++--- .../layouts/vertical/dense/dense.module.ts | 8 ++-- .../futuristic/futuristic.component.html | 14 +++--- .../futuristic/futuristic.component.ts | 29 ++++++++--- .../vertical/futuristic/futuristic.module.ts | 8 ++-- .../layouts/vertical/thin/thin.component.html | 12 ++--- .../layouts/vertical/thin/thin.component.ts | 18 ++++--- .../layouts/vertical/thin/thin.module.ts | 8 ++-- src/app/mock-api/common/notifications/data.ts | 12 ++--- src/app/mock-api/common/shortcuts/data.ts | 12 ++--- 51 files changed, 397 insertions(+), 335 deletions(-) delete mode 100644 src/app/app.types.ts create mode 100644 src/app/core/navigation/navigation.service.ts create mode 100644 src/app/core/navigation/navigation.types.ts rename src/app/layout/common/{language/language.component.html => languages/languages.component.html} (100%) rename src/app/layout/common/{language/language.component.ts => languages/languages.component.ts} (96%) rename src/app/layout/common/{language/language.module.ts => languages/languages.module.ts} (73%) rename src/app/layout/common/{user-menu/user-menu.component.html => user/user.component.html} (100%) rename src/app/layout/common/{user-menu/user-menu.component.ts => user/user.component.ts} (93%) rename src/app/layout/common/{user-menu/user-menu.module.ts => user/user.module.ts} (76%) diff --git a/src/app/app.resolvers.ts b/src/app/app.resolvers.ts index 8b95e849..800f0fd0 100644 --- a/src/app/app.resolvers.ts +++ b/src/app/app.resolvers.ts @@ -1,9 +1,11 @@ import { Injectable } from '@angular/core'; -import { HttpClient } from '@angular/common/http'; import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router'; import { forkJoin, Observable } from 'rxjs'; -import { map } from 'rxjs/operators'; -import { InitialData } from 'app/app.types'; +import { MessagesService } from 'app/layout/common/messages/messages.service'; +import { NavigationService } from 'app/core/navigation/navigation.service'; +import { NotificationsService } from 'app/layout/common/notifications/notifications.service'; +import { ShortcutsService } from 'app/layout/common/shortcuts/shortcuts.service'; +import { UserService } from 'app/core/user/user.service'; @Injectable({ providedIn: 'root' @@ -13,7 +15,13 @@ export class InitialDataResolver implements Resolve /** * Constructor */ - constructor(private _httpClient: HttpClient) + constructor( + private _messagesService: MessagesService, + private _navigationService: NavigationService, + private _notificationsService: NotificationsService, + private _shortcutsService: ShortcutsService, + private _userService: UserService + ) { } @@ -27,29 +35,15 @@ export class InitialDataResolver implements Resolve * @param route * @param state */ - resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable + resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable { // Fork join multiple API endpoint calls to wait all of them to finish return forkJoin([ - this._httpClient.get('api/common/messages'), - this._httpClient.get('api/common/navigation'), - this._httpClient.get('api/common/notifications'), - this._httpClient.get('api/common/shortcuts'), - this._httpClient.get('api/common/user') - ]).pipe( - map(([messages, navigation, notifications, shortcuts, user]) => ({ - messages, - navigation: { - compact : navigation.compact, - default : navigation.default, - futuristic: navigation.futuristic, - horizontal: navigation.horizontal - }, - notifications, - shortcuts, - user - }) - ) - ); + this._navigationService.get(), + this._messagesService.getAll(), + this._notificationsService.getAll(), + this._shortcutsService.getAll(), + this._userService.get() + ]); } } diff --git a/src/app/app.types.ts b/src/app/app.types.ts deleted file mode 100644 index 547cdb88..00000000 --- a/src/app/app.types.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { FuseNavigationItem } from '@fuse/components/navigation'; -import { Message } from 'app/layout/common/messages/messages.types'; -import { Notification } from 'app/layout/common/notifications/notifications.types'; -import { Shortcut } from 'app/layout/common/shortcuts/shortcuts.types'; -import { User } from 'app/core/user/user.types'; - -export interface InitialData -{ - messages: Message[]; - navigation: { - compact: FuseNavigationItem[]; - default: FuseNavigationItem[]; - futuristic: FuseNavigationItem[]; - horizontal: FuseNavigationItem[]; - }; - notifications: Notification[]; - shortcuts: Shortcut[]; - user: User; -} diff --git a/src/app/core/config/app.config.ts b/src/app/core/config/app.config.ts index f4a7980b..4abf962c 100644 --- a/src/app/core/config/app.config.ts +++ b/src/app/core/config/app.config.ts @@ -24,7 +24,7 @@ export interface AppConfig * FuseConfigService and its methods. */ export const appConfig: AppConfig = { - layout: 'classy', + layout: 'classic', scheme: 'light', theme : 'default' }; diff --git a/src/app/core/navigation/navigation.service.ts b/src/app/core/navigation/navigation.service.ts new file mode 100644 index 00000000..3f5a61b8 --- /dev/null +++ b/src/app/core/navigation/navigation.service.ts @@ -0,0 +1,48 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { Observable, ReplaySubject } from 'rxjs'; +import { tap } from 'rxjs/operators'; +import { Navigation } from 'app/core/navigation/navigation.types'; + +@Injectable({ + providedIn: 'root' +}) +export class NavigationService +{ + private _navigation: ReplaySubject = new ReplaySubject(1); + + /** + * Constructor + */ + constructor(private _httpClient: HttpClient) + { + } + + // ----------------------------------------------------------------------------------------------------- + // @ Accessors + // ----------------------------------------------------------------------------------------------------- + + /** + * Getter for navigation + */ + get navigation$(): Observable + { + return this._navigation.asObservable(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Get all navigation data + */ + get(): Observable + { + return this._httpClient.get('api/common/navigation').pipe( + tap((navigation) => { + this._navigation.next(navigation); + }) + ); + } +} diff --git a/src/app/core/navigation/navigation.types.ts b/src/app/core/navigation/navigation.types.ts new file mode 100644 index 00000000..5f061d89 --- /dev/null +++ b/src/app/core/navigation/navigation.types.ts @@ -0,0 +1,9 @@ +import { FuseNavigationItem } from '@fuse/components/navigation'; + +export interface Navigation +{ + compact: FuseNavigationItem[]; + default: FuseNavigationItem[]; + futuristic: FuseNavigationItem[]; + horizontal: FuseNavigationItem[]; +} diff --git a/src/app/core/user/user.service.ts b/src/app/core/user/user.service.ts index 9791b52e..11aab275 100644 --- a/src/app/core/user/user.service.ts +++ b/src/app/core/user/user.service.ts @@ -1,7 +1,7 @@ import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable, ReplaySubject } from 'rxjs'; -import { map } from 'rxjs/operators'; +import { map, tap } from 'rxjs/operators'; import { User } from 'app/core/user/user.types'; @Injectable({ @@ -42,6 +42,18 @@ export class UserService // @ Public methods // ----------------------------------------------------------------------------------------------------- + /** + * Get the current logged in user data + */ + get(): Observable + { + return this._httpClient.get('api/common/user').pipe( + tap((user) => { + this._user.next(user); + }) + ); + } + /** * Update the user * @@ -51,7 +63,6 @@ export class UserService { return this._httpClient.patch('api/common/user', {user}).pipe( map((response) => { - // Execute the observable this._user.next(response); }) ); diff --git a/src/app/layout/common/language/language.component.html b/src/app/layout/common/languages/languages.component.html similarity index 100% rename from src/app/layout/common/language/language.component.html rename to src/app/layout/common/languages/languages.component.html diff --git a/src/app/layout/common/language/language.component.ts b/src/app/layout/common/languages/languages.component.ts similarity index 96% rename from src/app/layout/common/language/language.component.ts rename to src/app/layout/common/languages/languages.component.ts index 24526937..5b44986f 100644 --- a/src/app/layout/common/language/language.component.ts +++ b/src/app/layout/common/languages/languages.component.ts @@ -4,13 +4,13 @@ import { AvailableLangs, TranslocoService } from '@ngneat/transloco'; import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation'; @Component({ - selector : 'language', - templateUrl : './language.component.html', + selector : 'languages', + templateUrl : './languages.component.html', encapsulation : ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, - exportAs : 'language' + exportAs : 'languages' }) -export class LanguageComponent implements OnInit, OnDestroy +export class LanguagesComponent implements OnInit, OnDestroy { availableLangs: AvailableLangs; activeLang: string; diff --git a/src/app/layout/common/language/language.module.ts b/src/app/layout/common/languages/languages.module.ts similarity index 73% rename from src/app/layout/common/language/language.module.ts rename to src/app/layout/common/languages/languages.module.ts index 7c0e3fbe..4393a9a8 100644 --- a/src/app/layout/common/language/language.module.ts +++ b/src/app/layout/common/languages/languages.module.ts @@ -2,12 +2,12 @@ import { NgModule } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; import { MatMenuModule } from '@angular/material/menu'; -import { LanguageComponent } from 'app/layout/common/language/language.component'; +import { LanguagesComponent } from 'app/layout/common/languages/languages.component'; import { SharedModule } from 'app/shared/shared.module'; @NgModule({ declarations: [ - LanguageComponent + LanguagesComponent ], imports : [ MatButtonModule, @@ -16,9 +16,9 @@ import { SharedModule } from 'app/shared/shared.module'; SharedModule ], exports : [ - LanguageComponent + LanguagesComponent ] }) -export class LanguageModule +export class LanguagesModule { } diff --git a/src/app/layout/common/messages/messages.component.ts b/src/app/layout/common/messages/messages.component.ts index 454247b7..fc0af5a9 100644 --- a/src/app/layout/common/messages/messages.component.ts +++ b/src/app/layout/common/messages/messages.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core'; import { Overlay, OverlayRef } from '@angular/cdk/overlay'; import { TemplatePortal } from '@angular/cdk/portal'; import { MatButton } from '@angular/material/button'; @@ -14,12 +14,12 @@ import { MessagesService } from 'app/layout/common/messages/messages.service'; changeDetection: ChangeDetectionStrategy.OnPush, exportAs : 'messages' }) -export class MessagesComponent implements OnInit, OnChanges, OnDestroy +export class MessagesComponent implements OnInit, OnDestroy { - @Input() messages: Message[]; @ViewChild('messagesOrigin') private _messagesOrigin: MatButton; @ViewChild('messagesPanel') private _messagesPanel: TemplateRef; + messages: Message[]; unreadCount: number = 0; private _overlayRef: OverlayRef; private _unsubscribeAll: Subject = new Subject(); @@ -40,21 +40,6 @@ export class MessagesComponent implements OnInit, OnChanges, OnDestroy // @ Lifecycle hooks // ----------------------------------------------------------------------------------------------------- - /** - * On changes - * - * @param changes - */ - ngOnChanges(changes: SimpleChanges): void - { - // Messages - if ( 'messages' in changes ) - { - // Store the messages on the service - this._messagesService.store(changes.messages.currentValue); - } - } - /** * On init */ diff --git a/src/app/layout/common/messages/messages.service.ts b/src/app/layout/common/messages/messages.service.ts index 63d7621b..5e125c70 100644 --- a/src/app/layout/common/messages/messages.service.ts +++ b/src/app/layout/common/messages/messages.service.ts @@ -2,7 +2,7 @@ import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable, ReplaySubject } from 'rxjs'; import { Message } from 'app/layout/common/messages/messages.types'; -import { map, switchMap, take } from 'rxjs/operators'; +import { map, switchMap, take, tap } from 'rxjs/operators'; @Injectable({ providedIn: 'root' @@ -35,17 +35,15 @@ export class MessagesService // ----------------------------------------------------------------------------------------------------- /** - * Store messages on the service - * - * @param messages + * Get all messages */ - store(messages: Message[]): Observable + getAll(): Observable { - // Load the messages - this._messages.next(messages); - - // Return the messages - return this.messages$; + return this._httpClient.get('api/common/messages').pipe( + tap((messages) => { + this._messages.next(messages); + }) + ); } /** diff --git a/src/app/layout/common/notifications/notifications.component.ts b/src/app/layout/common/notifications/notifications.component.ts index 6682e0de..5a0fc615 100644 --- a/src/app/layout/common/notifications/notifications.component.ts +++ b/src/app/layout/common/notifications/notifications.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core'; import { Overlay, OverlayRef } from '@angular/cdk/overlay'; import { TemplatePortal } from '@angular/cdk/portal'; import { MatButton } from '@angular/material/button'; @@ -14,12 +14,12 @@ import { NotificationsService } from 'app/layout/common/notifications/notificati changeDetection: ChangeDetectionStrategy.OnPush, exportAs : 'notifications' }) -export class NotificationsComponent implements OnChanges, OnInit, OnDestroy +export class NotificationsComponent implements OnInit, OnDestroy { - @Input() notifications: Notification[]; @ViewChild('notificationsOrigin') private _notificationsOrigin: MatButton; @ViewChild('notificationsPanel') private _notificationsPanel: TemplateRef; + notifications: Notification[]; unreadCount: number = 0; private _overlayRef: OverlayRef; private _unsubscribeAll: Subject = new Subject(); @@ -40,21 +40,6 @@ export class NotificationsComponent implements OnChanges, OnInit, OnDestroy // @ Lifecycle hooks // ----------------------------------------------------------------------------------------------------- - /** - * On changes - * - * @param changes - */ - ngOnChanges(changes: SimpleChanges): void - { - // Notifications - if ( 'notifications' in changes ) - { - // Store the notifications on the service - this._notificationsService.store(changes.notifications.currentValue); - } - } - /** * On init */ diff --git a/src/app/layout/common/notifications/notifications.service.ts b/src/app/layout/common/notifications/notifications.service.ts index d904197a..5da09dfc 100644 --- a/src/app/layout/common/notifications/notifications.service.ts +++ b/src/app/layout/common/notifications/notifications.service.ts @@ -2,7 +2,7 @@ import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable, ReplaySubject } from 'rxjs'; import { Notification } from 'app/layout/common/notifications/notifications.types'; -import { map, switchMap, take } from 'rxjs/operators'; +import { map, switchMap, take, tap } from 'rxjs/operators'; @Injectable({ providedIn: 'root' @@ -35,17 +35,15 @@ export class NotificationsService // ----------------------------------------------------------------------------------------------------- /** - * Store notifications on the service - * - * @param notifications + * Get all notifications */ - store(notifications: Notification[]): Observable + getAll(): Observable { - // Load the notifications - this._notifications.next(notifications); - - // Return the notifications - return this.notifications$; + return this._httpClient.get('api/common/notifications').pipe( + tap((notifications) => { + this._notifications.next(notifications); + }) + ); } /** diff --git a/src/app/layout/common/shortcuts/shortcuts.component.html b/src/app/layout/common/shortcuts/shortcuts.component.html index b0106838..d4bca407 100644 --- a/src/app/layout/common/shortcuts/shortcuts.component.html +++ b/src/app/layout/common/shortcuts/shortcuts.component.html @@ -21,7 +21,15 @@ [svgIcon]="'heroicons_solid:x'">
-
Shortcuts
+
+ Shortcuts + + + - Add new + - Editing + + +
diff --git a/src/app/layout/common/shortcuts/shortcuts.component.ts b/src/app/layout/common/shortcuts/shortcuts.component.ts index 20598f1d..99237746 100644 --- a/src/app/layout/common/shortcuts/shortcuts.component.ts +++ b/src/app/layout/common/shortcuts/shortcuts.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { Overlay, OverlayRef } from '@angular/cdk/overlay'; import { TemplatePortal } from '@angular/cdk/portal'; @@ -15,14 +15,14 @@ import { ShortcutsService } from 'app/layout/common/shortcuts/shortcuts.service' changeDetection: ChangeDetectionStrategy.OnPush, exportAs : 'shortcuts' }) -export class ShortcutsComponent implements OnChanges, OnInit, OnDestroy +export class ShortcutsComponent implements OnInit, OnDestroy { - @Input() shortcuts: Shortcut[]; @ViewChild('shortcutsOrigin') private _shortcutsOrigin: MatButton; @ViewChild('shortcutsPanel') private _shortcutsPanel: TemplateRef; mode: 'view' | 'modify' | 'add' | 'edit' = 'view'; shortcutForm: FormGroup; + shortcuts: Shortcut[]; private _overlayRef: OverlayRef; private _unsubscribeAll: Subject = new Subject(); @@ -43,21 +43,6 @@ export class ShortcutsComponent implements OnChanges, OnInit, OnDestroy // @ Lifecycle hooks // ----------------------------------------------------------------------------------------------------- - /** - * On changes - * - * @param changes - */ - ngOnChanges(changes: SimpleChanges): void - { - // Shortcuts - if ( 'shortcuts' in changes ) - { - // Store the shortcuts on the service - this._shortcutsService.store(changes.shortcuts.currentValue); - } - } - /** * On init */ diff --git a/src/app/layout/common/shortcuts/shortcuts.service.ts b/src/app/layout/common/shortcuts/shortcuts.service.ts index 01f128f5..e2b045a0 100644 --- a/src/app/layout/common/shortcuts/shortcuts.service.ts +++ b/src/app/layout/common/shortcuts/shortcuts.service.ts @@ -1,7 +1,7 @@ import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable, ReplaySubject } from 'rxjs'; -import { map, switchMap, take } from 'rxjs/operators'; +import { map, switchMap, take, tap } from 'rxjs/operators'; import { Shortcut } from 'app/layout/common/shortcuts/shortcuts.types'; @Injectable({ @@ -35,17 +35,15 @@ export class ShortcutsService // ----------------------------------------------------------------------------------------------------- /** - * Store shortcuts on the service - * - * @param shortcuts + * Get all messages */ - store(shortcuts: Shortcut[]): Observable + getAll(): Observable { - // Load the shortcuts - this._shortcuts.next(shortcuts); - - // Return the shortcuts - return this.shortcuts$; + return this._httpClient.get('api/common/shortcuts').pipe( + tap((shortcuts) => { + this._shortcuts.next(shortcuts); + }) + ); } /** diff --git a/src/app/layout/common/user-menu/user-menu.component.html b/src/app/layout/common/user/user.component.html similarity index 100% rename from src/app/layout/common/user-menu/user-menu.component.html rename to src/app/layout/common/user/user.component.html diff --git a/src/app/layout/common/user-menu/user-menu.component.ts b/src/app/layout/common/user/user.component.ts similarity index 93% rename from src/app/layout/common/user-menu/user-menu.component.ts rename to src/app/layout/common/user/user.component.ts index 6e7b980f..6fabe8dc 100644 --- a/src/app/layout/common/user-menu/user-menu.component.ts +++ b/src/app/layout/common/user/user.component.ts @@ -7,13 +7,13 @@ import { User } from 'app/core/user/user.types'; import { UserService } from 'app/core/user/user.service'; @Component({ - selector : 'user-menu', - templateUrl : './user-menu.component.html', + selector : 'user', + templateUrl : './user.component.html', encapsulation : ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, - exportAs : 'userMenu' + exportAs : 'user' }) -export class UserMenuComponent implements OnInit, OnDestroy +export class UserComponent implements OnInit, OnDestroy { /* eslint-disable @typescript-eslint/naming-convention */ static ngAcceptInputType_showAvatar: BooleanInput; diff --git a/src/app/layout/common/user-menu/user-menu.module.ts b/src/app/layout/common/user/user.module.ts similarity index 76% rename from src/app/layout/common/user-menu/user-menu.module.ts rename to src/app/layout/common/user/user.module.ts index d7ded69a..5cd0d06b 100644 --- a/src/app/layout/common/user-menu/user-menu.module.ts +++ b/src/app/layout/common/user/user.module.ts @@ -3,12 +3,12 @@ import { MatButtonModule } from '@angular/material/button'; import { MatDividerModule } from '@angular/material/divider'; import { MatIconModule } from '@angular/material/icon'; import { MatMenuModule } from '@angular/material/menu'; -import { UserMenuComponent } from 'app/layout/common/user-menu/user-menu.component'; +import { UserComponent } from 'app/layout/common/user/user.component'; import { SharedModule } from 'app/shared/shared.module'; @NgModule({ declarations: [ - UserMenuComponent + UserComponent ], imports : [ MatButtonModule, @@ -18,9 +18,9 @@ import { SharedModule } from 'app/shared/shared.module'; SharedModule ], exports : [ - UserMenuComponent + UserComponent ] }) -export class UserMenuModule +export class UserModule { } diff --git a/src/app/layout/layouts/horizontal/centered/centered.component.html b/src/app/layout/layouts/horizontal/centered/centered.component.html index cb5344bc..5f0c4280 100644 --- a/src/app/layout/layouts/horizontal/centered/centered.component.html +++ b/src/app/layout/layouts/horizontal/centered/centered.component.html @@ -6,7 +6,7 @@ class="dark bg-gray-900 print:hidden" [mode]="'over'" [name]="'mainNavigation'" - [navigation]="data.navigation.default" + [navigation]="navigation.default" [opened]="false"> @@ -63,13 +63,13 @@
- + - - - - + + + +
diff --git a/src/app/layout/layouts/horizontal/centered/centered.component.ts b/src/app/layout/layouts/horizontal/centered/centered.component.ts index 94b0f5dc..c32f77c6 100644 --- a/src/app/layout/layouts/horizontal/centered/centered.component.ts +++ b/src/app/layout/layouts/horizontal/centered/centered.component.ts @@ -4,7 +4,8 @@ import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation'; -import { InitialData } from 'app/app.types'; +import { Navigation } from 'app/core/navigation/navigation.types'; +import { NavigationService } from 'app/core/navigation/navigation.service'; @Component({ selector : 'centered-layout', @@ -13,7 +14,7 @@ import { InitialData } from 'app/app.types'; }) export class CenteredLayoutComponent implements OnInit, OnDestroy { - data: InitialData; + navigation: Navigation; isScreenSmall: boolean; private _unsubscribeAll: Subject = new Subject(); @@ -23,6 +24,7 @@ export class CenteredLayoutComponent implements OnInit, OnDestroy constructor( private _activatedRoute: ActivatedRoute, private _router: Router, + private _navigationService: NavigationService, private _fuseMediaWatcherService: FuseMediaWatcherService, private _fuseNavigationService: FuseNavigationService ) @@ -50,10 +52,12 @@ export class CenteredLayoutComponent implements OnInit, OnDestroy */ ngOnInit(): void { - // Subscribe to the resolved route data - this._activatedRoute.data.subscribe((data: Data) => { - this.data = data.initialData; - }); + // Subscribe to navigation data + this._navigationService.navigation$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((navigation: Navigation) => { + this.navigation = navigation; + }); // Subscribe to media changes this._fuseMediaWatcherService.onMediaChange$ diff --git a/src/app/layout/layouts/horizontal/centered/centered.module.ts b/src/app/layout/layouts/horizontal/centered/centered.module.ts index 4a93eefb..b1d952f4 100644 --- a/src/app/layout/layouts/horizontal/centered/centered.module.ts +++ b/src/app/layout/layouts/horizontal/centered/centered.module.ts @@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon'; import { MatMenuModule } from '@angular/material/menu'; import { FuseFullscreenModule } from '@fuse/components/fullscreen'; import { FuseNavigationModule } from '@fuse/components/navigation'; -import { LanguageModule } from 'app/layout/common/language/language.module'; +import { LanguagesModule } from 'app/layout/common/languages/languages.module'; import { MessagesModule } from 'app/layout/common/messages/messages.module'; import { NotificationsModule } from 'app/layout/common/notifications/notifications.module'; import { SearchModule } from 'app/layout/common/search/search.module'; import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module'; -import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module'; +import { UserModule } from 'app/layout/common/user/user.module'; import { SharedModule } from 'app/shared/shared.module'; import { CenteredLayoutComponent } from 'app/layout/layouts/horizontal/centered/centered.component'; @@ -29,12 +29,12 @@ import { CenteredLayoutComponent } from 'app/layout/layouts/horizontal/centered/ MatMenuModule, FuseFullscreenModule, FuseNavigationModule, - LanguageModule, + LanguagesModule, MessagesModule, NotificationsModule, SearchModule, ShortcutsModule, - UserMenuModule, + UserModule, SharedModule ], exports : [ diff --git a/src/app/layout/layouts/horizontal/enterprise/enterprise.component.html b/src/app/layout/layouts/horizontal/enterprise/enterprise.component.html index cd2dafc0..19ebe5b5 100644 --- a/src/app/layout/layouts/horizontal/enterprise/enterprise.component.html +++ b/src/app/layout/layouts/horizontal/enterprise/enterprise.component.html @@ -4,7 +4,7 @@ class="dark bg-gray-900 print:hidden" [mode]="'over'" [name]="'mainNavigation'" - [navigation]="data.navigation.default" + [navigation]="navigation.default" [opened]="false"> @@ -46,13 +46,13 @@
- + - - - - + + + +
diff --git a/src/app/layout/layouts/horizontal/enterprise/enterprise.component.ts b/src/app/layout/layouts/horizontal/enterprise/enterprise.component.ts index 6d5705a7..f28f035c 100644 --- a/src/app/layout/layouts/horizontal/enterprise/enterprise.component.ts +++ b/src/app/layout/layouts/horizontal/enterprise/enterprise.component.ts @@ -1,10 +1,11 @@ import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; -import { ActivatedRoute, Data, Router } from '@angular/router'; +import { ActivatedRoute, Router } from '@angular/router'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation'; -import { InitialData } from 'app/app.types'; +import { Navigation } from 'app/core/navigation/navigation.types'; +import { NavigationService } from 'app/core/navigation/navigation.service'; @Component({ selector : 'enterprise-layout', @@ -13,8 +14,8 @@ import { InitialData } from 'app/app.types'; }) export class EnterpriseLayoutComponent implements OnInit, OnDestroy { - data: InitialData; isScreenSmall: boolean; + navigation: Navigation; private _unsubscribeAll: Subject = new Subject(); /** @@ -23,6 +24,7 @@ export class EnterpriseLayoutComponent implements OnInit, OnDestroy constructor( private _activatedRoute: ActivatedRoute, private _router: Router, + private _navigationService: NavigationService, private _fuseMediaWatcherService: FuseMediaWatcherService, private _fuseNavigationService: FuseNavigationService ) @@ -50,10 +52,12 @@ export class EnterpriseLayoutComponent implements OnInit, OnDestroy */ ngOnInit(): void { - // Subscribe to the resolved route data - this._activatedRoute.data.subscribe((data: Data) => { - this.data = data.initialData; - }); + // Subscribe to navigation data + this._navigationService.navigation$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((navigation: Navigation) => { + this.navigation = navigation; + }); // Subscribe to media changes this._fuseMediaWatcherService.onMediaChange$ diff --git a/src/app/layout/layouts/horizontal/enterprise/enterprise.module.ts b/src/app/layout/layouts/horizontal/enterprise/enterprise.module.ts index b930680c..72678fd8 100644 --- a/src/app/layout/layouts/horizontal/enterprise/enterprise.module.ts +++ b/src/app/layout/layouts/horizontal/enterprise/enterprise.module.ts @@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon'; import { MatMenuModule } from '@angular/material/menu'; import { FuseFullscreenModule } from '@fuse/components/fullscreen'; import { FuseNavigationModule } from '@fuse/components/navigation'; -import { LanguageModule } from 'app/layout/common/language/language.module'; +import { LanguagesModule } from 'app/layout/common/languages/languages.module'; import { MessagesModule } from 'app/layout/common/messages/messages.module'; import { NotificationsModule } from 'app/layout/common/notifications/notifications.module'; import { SearchModule } from 'app/layout/common/search/search.module'; import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module'; -import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module'; +import { UserModule } from 'app/layout/common/user/user.module'; import { SharedModule } from 'app/shared/shared.module'; import { EnterpriseLayoutComponent } from 'app/layout/layouts/horizontal/enterprise/enterprise.component'; @@ -29,12 +29,12 @@ import { EnterpriseLayoutComponent } from 'app/layout/layouts/horizontal/enterpr MatMenuModule, FuseFullscreenModule, FuseNavigationModule, - LanguageModule, + LanguagesModule, MessagesModule, NotificationsModule, SearchModule, ShortcutsModule, - UserMenuModule, + UserModule, SharedModule ], exports : [ diff --git a/src/app/layout/layouts/horizontal/material/material.component.html b/src/app/layout/layouts/horizontal/material/material.component.html index 95842048..70524615 100644 --- a/src/app/layout/layouts/horizontal/material/material.component.html +++ b/src/app/layout/layouts/horizontal/material/material.component.html @@ -4,7 +4,7 @@ class="dark bg-gray-900 print:hidden" [mode]="'over'" [name]="'mainNavigation'" - [navigation]="data.navigation.default" + [navigation]="navigation.default" [opened]="false"> @@ -52,13 +52,13 @@
- + - - - - + + + +
diff --git a/src/app/layout/layouts/horizontal/material/material.component.ts b/src/app/layout/layouts/horizontal/material/material.component.ts index 71478603..071ffd6b 100644 --- a/src/app/layout/layouts/horizontal/material/material.component.ts +++ b/src/app/layout/layouts/horizontal/material/material.component.ts @@ -1,10 +1,11 @@ import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; -import { ActivatedRoute, Data, Router } from '@angular/router'; +import { ActivatedRoute, Router } from '@angular/router'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation'; -import { InitialData } from 'app/app.types'; +import { Navigation } from 'app/core/navigation/navigation.types'; +import { NavigationService } from 'app/core/navigation/navigation.service'; @Component({ selector : 'material-layout', @@ -13,8 +14,8 @@ import { InitialData } from 'app/app.types'; }) export class MaterialLayoutComponent implements OnInit, OnDestroy { - data: InitialData; isScreenSmall: boolean; + navigation: Navigation; private _unsubscribeAll: Subject = new Subject(); /** @@ -23,6 +24,7 @@ export class MaterialLayoutComponent implements OnInit, OnDestroy constructor( private _activatedRoute: ActivatedRoute, private _router: Router, + private _navigationService: NavigationService, private _fuseMediaWatcherService: FuseMediaWatcherService, private _fuseNavigationService: FuseNavigationService ) @@ -50,10 +52,12 @@ export class MaterialLayoutComponent implements OnInit, OnDestroy */ ngOnInit(): void { - // Subscribe to the resolved route data - this._activatedRoute.data.subscribe((data: Data) => { - this.data = data.initialData; - }); + // Subscribe to navigation data + this._navigationService.navigation$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((navigation: Navigation) => { + this.navigation = navigation; + }); // Subscribe to media changes this._fuseMediaWatcherService.onMediaChange$ diff --git a/src/app/layout/layouts/horizontal/material/material.module.ts b/src/app/layout/layouts/horizontal/material/material.module.ts index 778cd49e..65d875f7 100644 --- a/src/app/layout/layouts/horizontal/material/material.module.ts +++ b/src/app/layout/layouts/horizontal/material/material.module.ts @@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon'; import { MatMenuModule } from '@angular/material/menu'; import { FuseFullscreenModule } from '@fuse/components/fullscreen'; import { FuseNavigationModule } from '@fuse/components/navigation'; -import { LanguageModule } from 'app/layout/common/language/language.module'; +import { LanguagesModule } from 'app/layout/common/languages/languages.module'; import { MessagesModule } from 'app/layout/common/messages/messages.module'; import { NotificationsModule } from 'app/layout/common/notifications/notifications.module'; import { SearchModule } from 'app/layout/common/search/search.module'; import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module'; -import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module'; +import { UserModule } from 'app/layout/common/user/user.module'; import { SharedModule } from 'app/shared/shared.module'; import { MaterialLayoutComponent } from 'app/layout/layouts/horizontal/material/material.component'; @@ -29,12 +29,12 @@ import { MaterialLayoutComponent } from 'app/layout/layouts/horizontal/material/ MatMenuModule, FuseFullscreenModule, FuseNavigationModule, - LanguageModule, + LanguagesModule, MessagesModule, NotificationsModule, SearchModule, ShortcutsModule, - UserMenuModule, + UserModule, SharedModule ], exports : [ diff --git a/src/app/layout/layouts/horizontal/modern/modern.component.html b/src/app/layout/layouts/horizontal/modern/modern.component.html index 65a7690d..63654346 100644 --- a/src/app/layout/layouts/horizontal/modern/modern.component.html +++ b/src/app/layout/layouts/horizontal/modern/modern.component.html @@ -4,7 +4,7 @@ class="dark bg-gray-900 print:hidden" [mode]="'over'" [name]="'mainNavigation'" - [navigation]="data.navigation.default" + [navigation]="navigation.default" [opened]="false"> @@ -55,13 +55,13 @@
- + - - - - + + + +
diff --git a/src/app/layout/layouts/horizontal/modern/modern.component.ts b/src/app/layout/layouts/horizontal/modern/modern.component.ts index d103b7b8..0f2fb2a2 100644 --- a/src/app/layout/layouts/horizontal/modern/modern.component.ts +++ b/src/app/layout/layouts/horizontal/modern/modern.component.ts @@ -1,10 +1,11 @@ import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; -import { ActivatedRoute, Data, Router } from '@angular/router'; +import { ActivatedRoute, Router } from '@angular/router'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation'; -import { InitialData } from 'app/app.types'; +import { Navigation } from 'app/core/navigation/navigation.types'; +import { NavigationService } from 'app/core/navigation/navigation.service'; @Component({ selector : 'modern-layout', @@ -13,8 +14,8 @@ import { InitialData } from 'app/app.types'; }) export class ModernLayoutComponent implements OnInit, OnDestroy { - data: InitialData; isScreenSmall: boolean; + navigation: Navigation; private _unsubscribeAll: Subject = new Subject(); /** @@ -23,6 +24,7 @@ export class ModernLayoutComponent implements OnInit, OnDestroy constructor( private _activatedRoute: ActivatedRoute, private _router: Router, + private _navigationService: NavigationService, private _fuseMediaWatcherService: FuseMediaWatcherService, private _fuseNavigationService: FuseNavigationService ) @@ -50,10 +52,12 @@ export class ModernLayoutComponent implements OnInit, OnDestroy */ ngOnInit(): void { - // Subscribe to the resolved route data - this._activatedRoute.data.subscribe((data: Data) => { - this.data = data.initialData; - }); + // Subscribe to navigation data + this._navigationService.navigation$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((navigation: Navigation) => { + this.navigation = navigation; + }); // Subscribe to media changes this._fuseMediaWatcherService.onMediaChange$ diff --git a/src/app/layout/layouts/horizontal/modern/modern.module.ts b/src/app/layout/layouts/horizontal/modern/modern.module.ts index 413ba425..b95a0e2f 100644 --- a/src/app/layout/layouts/horizontal/modern/modern.module.ts +++ b/src/app/layout/layouts/horizontal/modern/modern.module.ts @@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon'; import { MatMenuModule } from '@angular/material/menu'; import { FuseFullscreenModule } from '@fuse/components/fullscreen'; import { FuseNavigationModule } from '@fuse/components/navigation'; -import { LanguageModule } from 'app/layout/common/language/language.module'; +import { LanguagesModule } from 'app/layout/common/languages/languages.module'; import { MessagesModule } from 'app/layout/common/messages/messages.module'; import { NotificationsModule } from 'app/layout/common/notifications/notifications.module'; import { SearchModule } from 'app/layout/common/search/search.module'; import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module'; -import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module'; +import { UserModule } from 'app/layout/common/user/user.module'; import { SharedModule } from 'app/shared/shared.module'; import { ModernLayoutComponent } from 'app/layout/layouts/horizontal/modern/modern.component'; @@ -29,12 +29,12 @@ import { ModernLayoutComponent } from 'app/layout/layouts/horizontal/modern/mode MatMenuModule, FuseFullscreenModule, FuseNavigationModule, - LanguageModule, + LanguagesModule, MessagesModule, NotificationsModule, SearchModule, ShortcutsModule, - UserMenuModule, + UserModule, SharedModule ], exports : [ diff --git a/src/app/layout/layouts/vertical/classic/classic.component.html b/src/app/layout/layouts/vertical/classic/classic.component.html index ce44ef57..b597b8a6 100644 --- a/src/app/layout/layouts/vertical/classic/classic.component.html +++ b/src/app/layout/layouts/vertical/classic/classic.component.html @@ -3,7 +3,7 @@ class="dark bg-gray-900 print:hidden" [mode]="isScreenSmall ? 'over' : 'side'" [name]="'mainNavigation'" - [navigation]="data.navigation.default" + [navigation]="navigation.default" [opened]="!isScreenSmall"> @@ -36,13 +36,13 @@
- + - - - - + + + +
diff --git a/src/app/layout/layouts/vertical/classic/classic.component.ts b/src/app/layout/layouts/vertical/classic/classic.component.ts index 39687b25..8f9ad2ab 100644 --- a/src/app/layout/layouts/vertical/classic/classic.component.ts +++ b/src/app/layout/layouts/vertical/classic/classic.component.ts @@ -1,10 +1,11 @@ import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; -import { ActivatedRoute, Data, Router } from '@angular/router'; +import { ActivatedRoute, Router } from '@angular/router'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation'; -import { InitialData } from 'app/app.types'; +import { Navigation } from 'app/core/navigation/navigation.types'; +import { NavigationService } from 'app/core/navigation/navigation.service'; @Component({ selector : 'classic-layout', @@ -13,8 +14,8 @@ import { InitialData } from 'app/app.types'; }) export class ClassicLayoutComponent implements OnInit, OnDestroy { - data: InitialData; isScreenSmall: boolean; + navigation: Navigation; private _unsubscribeAll: Subject = new Subject(); /** @@ -23,6 +24,7 @@ export class ClassicLayoutComponent implements OnInit, OnDestroy constructor( private _activatedRoute: ActivatedRoute, private _router: Router, + private _navigationService: NavigationService, private _fuseMediaWatcherService: FuseMediaWatcherService, private _fuseNavigationService: FuseNavigationService ) @@ -50,10 +52,12 @@ export class ClassicLayoutComponent implements OnInit, OnDestroy */ ngOnInit(): void { - // Subscribe to the resolved route data - this._activatedRoute.data.subscribe((data: Data) => { - this.data = data.initialData; - }); + // Subscribe to navigation data + this._navigationService.navigation$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((navigation: Navigation) => { + this.navigation = navigation; + }); // Subscribe to media changes this._fuseMediaWatcherService.onMediaChange$ diff --git a/src/app/layout/layouts/vertical/classic/classic.module.ts b/src/app/layout/layouts/vertical/classic/classic.module.ts index b982527a..b6aa4064 100644 --- a/src/app/layout/layouts/vertical/classic/classic.module.ts +++ b/src/app/layout/layouts/vertical/classic/classic.module.ts @@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon'; import { MatMenuModule } from '@angular/material/menu'; import { FuseFullscreenModule } from '@fuse/components/fullscreen'; import { FuseNavigationModule } from '@fuse/components/navigation'; -import { LanguageModule } from 'app/layout/common/language/language.module'; +import { LanguagesModule } from 'app/layout/common/languages/languages.module'; import { MessagesModule } from 'app/layout/common/messages/messages.module'; import { NotificationsModule } from 'app/layout/common/notifications/notifications.module'; import { SearchModule } from 'app/layout/common/search/search.module'; import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module'; -import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module'; +import { UserModule } from 'app/layout/common/user/user.module'; import { SharedModule } from 'app/shared/shared.module'; import { ClassicLayoutComponent } from 'app/layout/layouts/vertical/classic/classic.component'; @@ -29,12 +29,12 @@ import { ClassicLayoutComponent } from 'app/layout/layouts/vertical/classic/clas MatMenuModule, FuseFullscreenModule, FuseNavigationModule, - LanguageModule, + LanguagesModule, MessagesModule, NotificationsModule, SearchModule, ShortcutsModule, - UserMenuModule, + UserModule, SharedModule ], exports : [ diff --git a/src/app/layout/layouts/vertical/classy/classy.component.html b/src/app/layout/layouts/vertical/classy/classy.component.html index 608c966e..02dcc2f5 100644 --- a/src/app/layout/layouts/vertical/classy/classy.component.html +++ b/src/app/layout/layouts/vertical/classy/classy.component.html @@ -3,7 +3,7 @@ class="dark bg-gray-900 print:hidden" [mode]="isScreenSmall ? 'over' : 'side'" [name]="'mainNavigation'" - [navigation]="data.navigation.default" + [navigation]="navigation.default" [opened]="!isScreenSmall"> @@ -16,8 +16,8 @@
- - + +
@@ -25,20 +25,20 @@
User avatar
- {{data.user.name}} + {{user.name}}
- {{data.user.email}} + {{user.email}}
@@ -66,11 +66,11 @@
- + - - + +
diff --git a/src/app/layout/layouts/vertical/classy/classy.component.ts b/src/app/layout/layouts/vertical/classy/classy.component.ts index 231922ad..63847083 100644 --- a/src/app/layout/layouts/vertical/classy/classy.component.ts +++ b/src/app/layout/layouts/vertical/classy/classy.component.ts @@ -1,10 +1,13 @@ import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; -import { ActivatedRoute, Data, Router } from '@angular/router'; +import { ActivatedRoute, Router } from '@angular/router'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation'; -import { InitialData } from 'app/app.types'; +import { Navigation } from 'app/core/navigation/navigation.types'; +import { NavigationService } from 'app/core/navigation/navigation.service'; +import { User } from 'app/core/user/user.types'; +import { UserService } from 'app/core/user/user.service'; @Component({ selector : 'classy-layout', @@ -13,8 +16,9 @@ import { InitialData } from 'app/app.types'; }) export class ClassyLayoutComponent implements OnInit, OnDestroy { - data: InitialData; isScreenSmall: boolean; + navigation: Navigation; + user: User; private _unsubscribeAll: Subject = new Subject(); /** @@ -23,6 +27,8 @@ export class ClassyLayoutComponent implements OnInit, OnDestroy constructor( private _activatedRoute: ActivatedRoute, private _router: Router, + private _navigationService: NavigationService, + private _userService: UserService, private _fuseMediaWatcherService: FuseMediaWatcherService, private _fuseNavigationService: FuseNavigationService ) @@ -50,10 +56,19 @@ export class ClassyLayoutComponent implements OnInit, OnDestroy */ ngOnInit(): void { - // Subscribe to the resolved route data - this._activatedRoute.data.subscribe((data: Data) => { - this.data = data.initialData; - }); + // Subscribe to navigation data + this._navigationService.navigation$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((navigation: Navigation) => { + this.navigation = navigation; + }); + + // Subscribe to the user service + this._userService.user$ + .pipe((takeUntil(this._unsubscribeAll))) + .subscribe((user: User) => { + this.user = user; + }); // Subscribe to media changes this._fuseMediaWatcherService.onMediaChange$ diff --git a/src/app/layout/layouts/vertical/classy/classy.module.ts b/src/app/layout/layouts/vertical/classy/classy.module.ts index 482738ec..f9e35260 100644 --- a/src/app/layout/layouts/vertical/classy/classy.module.ts +++ b/src/app/layout/layouts/vertical/classy/classy.module.ts @@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon'; import { MatMenuModule } from '@angular/material/menu'; import { FuseNavigationModule } from '@fuse/components/navigation'; import { FuseFullscreenModule } from '@fuse/components/fullscreen/fullscreen.module'; -import { LanguageModule } from 'app/layout/common/language/language.module'; +import { LanguagesModule } from 'app/layout/common/languages/languages.module'; import { MessagesModule } from 'app/layout/common/messages/messages.module'; import { NotificationsModule } from 'app/layout/common/notifications/notifications.module'; import { SearchModule } from 'app/layout/common/search/search.module'; import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module'; -import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module'; +import { UserModule } from 'app/layout/common/user/user.module'; import { SharedModule } from 'app/shared/shared.module'; import { ClassyLayoutComponent } from 'app/layout/layouts/vertical/classy/classy.component'; @@ -29,12 +29,12 @@ import { ClassyLayoutComponent } from 'app/layout/layouts/vertical/classy/classy MatMenuModule, FuseFullscreenModule, FuseNavigationModule, - LanguageModule, + LanguagesModule, MessagesModule, NotificationsModule, SearchModule, ShortcutsModule, - UserMenuModule, + UserModule, SharedModule ], exports : [ diff --git a/src/app/layout/layouts/vertical/compact/compact.component.html b/src/app/layout/layouts/vertical/compact/compact.component.html index e7edd79a..10e7d09a 100644 --- a/src/app/layout/layouts/vertical/compact/compact.component.html +++ b/src/app/layout/layouts/vertical/compact/compact.component.html @@ -4,7 +4,7 @@ [appearance]="'compact'" [mode]="isScreenSmall ? 'over' : 'side'" [name]="'mainNavigation'" - [navigation]="data.navigation.compact" + [navigation]="navigation.compact" [opened]="!isScreenSmall"> @@ -31,13 +31,13 @@
- + - - - - + + + +
diff --git a/src/app/layout/layouts/vertical/compact/compact.component.ts b/src/app/layout/layouts/vertical/compact/compact.component.ts index 4616d2f3..7fc6696c 100644 --- a/src/app/layout/layouts/vertical/compact/compact.component.ts +++ b/src/app/layout/layouts/vertical/compact/compact.component.ts @@ -1,10 +1,11 @@ import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; -import { ActivatedRoute, Data, Router } from '@angular/router'; +import { ActivatedRoute, Router } from '@angular/router'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation'; -import { InitialData } from 'app/app.types'; +import { Navigation } from 'app/core/navigation/navigation.types'; +import { NavigationService } from 'app/core/navigation/navigation.service'; @Component({ selector : 'compact-layout', @@ -13,8 +14,8 @@ import { InitialData } from 'app/app.types'; }) export class CompactLayoutComponent implements OnInit, OnDestroy { - data: InitialData; isScreenSmall: boolean; + navigation: Navigation; private _unsubscribeAll: Subject = new Subject(); /** @@ -23,6 +24,7 @@ export class CompactLayoutComponent implements OnInit, OnDestroy constructor( private _activatedRoute: ActivatedRoute, private _router: Router, + private _navigationService: NavigationService, private _fuseMediaWatcherService: FuseMediaWatcherService, private _fuseNavigationService: FuseNavigationService ) @@ -50,10 +52,12 @@ export class CompactLayoutComponent implements OnInit, OnDestroy */ ngOnInit(): void { - // Subscribe to the resolved route data - this._activatedRoute.data.subscribe((data: Data) => { - this.data = data.initialData; - }); + // Subscribe to navigation data + this._navigationService.navigation$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((navigation: Navigation) => { + this.navigation = navigation; + }); // Subscribe to media changes this._fuseMediaWatcherService.onMediaChange$ diff --git a/src/app/layout/layouts/vertical/compact/compact.module.ts b/src/app/layout/layouts/vertical/compact/compact.module.ts index 54d5560f..6ef0cfeb 100644 --- a/src/app/layout/layouts/vertical/compact/compact.module.ts +++ b/src/app/layout/layouts/vertical/compact/compact.module.ts @@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon'; import { MatMenuModule } from '@angular/material/menu'; import { FuseFullscreenModule } from '@fuse/components/fullscreen'; import { FuseNavigationModule } from '@fuse/components/navigation'; -import { LanguageModule } from 'app/layout/common/language/language.module'; +import { LanguagesModule } from 'app/layout/common/languages/languages.module'; import { MessagesModule } from 'app/layout/common/messages/messages.module'; import { NotificationsModule } from 'app/layout/common/notifications/notifications.module'; import { SearchModule } from 'app/layout/common/search/search.module'; import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module'; -import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module'; +import { UserModule } from 'app/layout/common/user/user.module'; import { SharedModule } from 'app/shared/shared.module'; import { CompactLayoutComponent } from 'app/layout/layouts/vertical/compact/compact.component'; @@ -29,12 +29,12 @@ import { CompactLayoutComponent } from 'app/layout/layouts/vertical/compact/comp MatMenuModule, FuseFullscreenModule, FuseNavigationModule, - LanguageModule, + LanguagesModule, MessagesModule, NotificationsModule, SearchModule, ShortcutsModule, - UserMenuModule, + UserModule, SharedModule ], exports : [ diff --git a/src/app/layout/layouts/vertical/dense/dense.component.html b/src/app/layout/layouts/vertical/dense/dense.component.html index 1e51760f..efbb19a5 100644 --- a/src/app/layout/layouts/vertical/dense/dense.component.html +++ b/src/app/layout/layouts/vertical/dense/dense.component.html @@ -4,7 +4,7 @@ [appearance]="navigationAppearance" [mode]="isScreenSmall ? 'over' : 'side'" [name]="'mainNavigation'" - [navigation]="data.navigation.default" + [navigation]="navigation.default" [opened]="!isScreenSmall"> @@ -40,13 +40,13 @@
- + - - - - + + + +
diff --git a/src/app/layout/layouts/vertical/dense/dense.component.ts b/src/app/layout/layouts/vertical/dense/dense.component.ts index bd0617bb..c2880fb4 100644 --- a/src/app/layout/layouts/vertical/dense/dense.component.ts +++ b/src/app/layout/layouts/vertical/dense/dense.component.ts @@ -1,10 +1,11 @@ import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; -import { ActivatedRoute, Data, Router } from '@angular/router'; +import { ActivatedRoute, Router } from '@angular/router'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation'; -import { InitialData } from 'app/app.types'; +import { Navigation } from 'app/core/navigation/navigation.types'; +import { NavigationService } from 'app/core/navigation/navigation.service'; @Component({ selector : 'dense-layout', @@ -13,8 +14,8 @@ import { InitialData } from 'app/app.types'; }) export class DenseLayoutComponent implements OnInit, OnDestroy { - data: InitialData; isScreenSmall: boolean; + navigation: Navigation; navigationAppearance: 'default' | 'dense' = 'dense'; private _unsubscribeAll: Subject = new Subject(); @@ -24,6 +25,7 @@ export class DenseLayoutComponent implements OnInit, OnDestroy constructor( private _activatedRoute: ActivatedRoute, private _router: Router, + private _navigationService: NavigationService, private _fuseMediaWatcherService: FuseMediaWatcherService, private _fuseNavigationService: FuseNavigationService ) @@ -51,10 +53,12 @@ export class DenseLayoutComponent implements OnInit, OnDestroy */ ngOnInit(): void { - // Subscribe to the resolved route data - this._activatedRoute.data.subscribe((data: Data) => { - this.data = data.initialData; - }); + // Subscribe to navigation data + this._navigationService.navigation$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((navigation: Navigation) => { + this.navigation = navigation; + }); // Subscribe to media changes this._fuseMediaWatcherService.onMediaChange$ diff --git a/src/app/layout/layouts/vertical/dense/dense.module.ts b/src/app/layout/layouts/vertical/dense/dense.module.ts index da0ed28f..125d7686 100644 --- a/src/app/layout/layouts/vertical/dense/dense.module.ts +++ b/src/app/layout/layouts/vertical/dense/dense.module.ts @@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon'; import { MatMenuModule } from '@angular/material/menu'; import { FuseFullscreenModule } from '@fuse/components/fullscreen'; import { FuseNavigationModule } from '@fuse/components/navigation'; -import { LanguageModule } from 'app/layout/common/language/language.module'; +import { LanguagesModule } from 'app/layout/common/languages/languages.module'; import { MessagesModule } from 'app/layout/common/messages/messages.module'; import { NotificationsModule } from 'app/layout/common/notifications/notifications.module'; import { SearchModule } from 'app/layout/common/search/search.module'; import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module'; -import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module'; +import { UserModule } from 'app/layout/common/user/user.module'; import { SharedModule } from 'app/shared/shared.module'; import { DenseLayoutComponent } from 'app/layout/layouts/vertical/dense/dense.component'; @@ -29,12 +29,12 @@ import { DenseLayoutComponent } from 'app/layout/layouts/vertical/dense/dense.co MatMenuModule, FuseFullscreenModule, FuseNavigationModule, - LanguageModule, + LanguagesModule, MessagesModule, NotificationsModule, SearchModule, ShortcutsModule, - UserMenuModule, + UserModule, SharedModule ], exports : [ diff --git a/src/app/layout/layouts/vertical/futuristic/futuristic.component.html b/src/app/layout/layouts/vertical/futuristic/futuristic.component.html index 02f02c50..892cb041 100644 --- a/src/app/layout/layouts/vertical/futuristic/futuristic.component.html +++ b/src/app/layout/layouts/vertical/futuristic/futuristic.component.html @@ -3,7 +3,7 @@ class="dark bg-indigo-800 text-white print:hidden" [mode]="isScreenSmall ? 'over' : 'side'" [name]="'mainNavigation'" - [navigation]="data.navigation.futuristic" + [navigation]="navigation.futuristic" [opened]="!isScreenSmall"> @@ -18,10 +18,10 @@
- +
- {{data.user.name}} + {{user.name}}
brian.hughes@company.com @@ -45,12 +45,12 @@
- + - - - + + +
diff --git a/src/app/layout/layouts/vertical/futuristic/futuristic.component.ts b/src/app/layout/layouts/vertical/futuristic/futuristic.component.ts index a9de60a0..940058f3 100644 --- a/src/app/layout/layouts/vertical/futuristic/futuristic.component.ts +++ b/src/app/layout/layouts/vertical/futuristic/futuristic.component.ts @@ -1,10 +1,13 @@ import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; -import { ActivatedRoute, Data, Router } from '@angular/router'; +import { ActivatedRoute, Router } from '@angular/router'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation'; -import { InitialData } from 'app/app.types'; +import { Navigation } from 'app/core/navigation/navigation.types'; +import { NavigationService } from 'app/core/navigation/navigation.service'; +import { User } from 'app/core/user/user.types'; +import { UserService } from 'app/core/user/user.service'; @Component({ selector : 'futuristic-layout', @@ -13,8 +16,9 @@ import { InitialData } from 'app/app.types'; }) export class FuturisticLayoutComponent implements OnInit, OnDestroy { - data: InitialData; isScreenSmall: boolean; + navigation: Navigation; + user: User; private _unsubscribeAll: Subject = new Subject(); /** @@ -23,6 +27,8 @@ export class FuturisticLayoutComponent implements OnInit, OnDestroy constructor( private _activatedRoute: ActivatedRoute, private _router: Router, + private _navigationService: NavigationService, + private _userService: UserService, private _fuseMediaWatcherService: FuseMediaWatcherService, private _fuseNavigationService: FuseNavigationService ) @@ -50,10 +56,19 @@ export class FuturisticLayoutComponent implements OnInit, OnDestroy */ ngOnInit(): void { - // Subscribe to the resolved route data - this._activatedRoute.data.subscribe((data: Data) => { - this.data = data.initialData; - }); + // Subscribe to navigation data + this._navigationService.navigation$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((navigation: Navigation) => { + this.navigation = navigation; + }); + + // Subscribe to the user service + this._userService.user$ + .pipe((takeUntil(this._unsubscribeAll))) + .subscribe((user: User) => { + this.user = user; + }); // Subscribe to media changes this._fuseMediaWatcherService.onMediaChange$ diff --git a/src/app/layout/layouts/vertical/futuristic/futuristic.module.ts b/src/app/layout/layouts/vertical/futuristic/futuristic.module.ts index c6af7139..f1dccc2c 100644 --- a/src/app/layout/layouts/vertical/futuristic/futuristic.module.ts +++ b/src/app/layout/layouts/vertical/futuristic/futuristic.module.ts @@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon'; import { MatMenuModule } from '@angular/material/menu'; import { FuseFullscreenModule } from '@fuse/components/fullscreen'; import { FuseNavigationModule } from '@fuse/components/navigation'; -import { LanguageModule } from 'app/layout/common/language/language.module'; +import { LanguagesModule } from 'app/layout/common/languages/languages.module'; import { MessagesModule } from 'app/layout/common/messages/messages.module'; import { NotificationsModule } from 'app/layout/common/notifications/notifications.module'; import { SearchModule } from 'app/layout/common/search/search.module'; import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module'; -import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module'; +import { UserModule } from 'app/layout/common/user/user.module'; import { SharedModule } from 'app/shared/shared.module'; import { FuturisticLayoutComponent } from 'app/layout/layouts/vertical/futuristic/futuristic.component'; @@ -29,12 +29,12 @@ import { FuturisticLayoutComponent } from 'app/layout/layouts/vertical/futuristi MatMenuModule, FuseFullscreenModule, FuseNavigationModule, - LanguageModule, + LanguagesModule, MessagesModule, NotificationsModule, SearchModule, ShortcutsModule, - UserMenuModule, + UserModule, SharedModule ], exports : [ diff --git a/src/app/layout/layouts/vertical/thin/thin.component.html b/src/app/layout/layouts/vertical/thin/thin.component.html index b870e693..967ceece 100644 --- a/src/app/layout/layouts/vertical/thin/thin.component.html +++ b/src/app/layout/layouts/vertical/thin/thin.component.html @@ -4,7 +4,7 @@ [appearance]="'thin'" [mode]="isScreenSmall ? 'over' : 'side'" [name]="'mainNavigation'" - [navigation]="data.navigation.compact" + [navigation]="navigation.compact" [opened]="!isScreenSmall"> @@ -32,13 +32,13 @@
- + - - - - + + + +
diff --git a/src/app/layout/layouts/vertical/thin/thin.component.ts b/src/app/layout/layouts/vertical/thin/thin.component.ts index a1173d67..02bdc543 100644 --- a/src/app/layout/layouts/vertical/thin/thin.component.ts +++ b/src/app/layout/layouts/vertical/thin/thin.component.ts @@ -1,10 +1,11 @@ import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; -import { ActivatedRoute, Data, Router } from '@angular/router'; +import { ActivatedRoute, Router } from '@angular/router'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation'; -import { InitialData } from 'app/app.types'; +import { Navigation } from 'app/core/navigation/navigation.types'; +import { NavigationService } from 'app/core/navigation/navigation.service'; @Component({ selector : 'thin-layout', @@ -13,8 +14,8 @@ import { InitialData } from 'app/app.types'; }) export class ThinLayoutComponent implements OnInit, OnDestroy { - data: InitialData; isScreenSmall: boolean; + navigation: Navigation; private _unsubscribeAll: Subject = new Subject(); /** @@ -23,6 +24,7 @@ export class ThinLayoutComponent implements OnInit, OnDestroy constructor( private _activatedRoute: ActivatedRoute, private _router: Router, + private _navigationService: NavigationService, private _fuseMediaWatcherService: FuseMediaWatcherService, private _fuseNavigationService: FuseNavigationService ) @@ -50,10 +52,12 @@ export class ThinLayoutComponent implements OnInit, OnDestroy */ ngOnInit(): void { - // Subscribe to the resolved route data - this._activatedRoute.data.subscribe((data: Data) => { - this.data = data.initialData; - }); + // Subscribe to navigation data + this._navigationService.navigation$ + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((navigation: Navigation) => { + this.navigation = navigation; + }); // Subscribe to media changes this._fuseMediaWatcherService.onMediaChange$ diff --git a/src/app/layout/layouts/vertical/thin/thin.module.ts b/src/app/layout/layouts/vertical/thin/thin.module.ts index 347aabf8..3ae44c63 100644 --- a/src/app/layout/layouts/vertical/thin/thin.module.ts +++ b/src/app/layout/layouts/vertical/thin/thin.module.ts @@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon'; import { MatMenuModule } from '@angular/material/menu'; import { FuseFullscreenModule } from '@fuse/components/fullscreen'; import { FuseNavigationModule } from '@fuse/components/navigation'; -import { LanguageModule } from 'app/layout/common/language/language.module'; +import { LanguagesModule } from 'app/layout/common/languages/languages.module'; import { MessagesModule } from 'app/layout/common/messages/messages.module'; import { NotificationsModule } from 'app/layout/common/notifications/notifications.module'; import { SearchModule } from 'app/layout/common/search/search.module'; import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module'; -import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module'; +import { UserModule } from 'app/layout/common/user/user.module'; import { SharedModule } from 'app/shared/shared.module'; import { ThinLayoutComponent } from 'app/layout/layouts/vertical/thin/thin.component'; @@ -29,12 +29,12 @@ import { ThinLayoutComponent } from 'app/layout/layouts/vertical/thin/thin.compo MatMenuModule, FuseFullscreenModule, FuseNavigationModule, - LanguageModule, + LanguagesModule, MessagesModule, NotificationsModule, SearchModule, ShortcutsModule, - UserMenuModule, + UserModule, SharedModule ], exports : [ diff --git a/src/app/mock-api/common/notifications/data.ts b/src/app/mock-api/common/notifications/data.ts index 373e1c1e..2a08b99c 100644 --- a/src/app/mock-api/common/notifications/data.ts +++ b/src/app/mock-api/common/notifications/data.ts @@ -4,7 +4,7 @@ import * as moment from 'moment'; export const notifications = [ { id : '493190c9-5b61-4912-afe5-78c21f1044d7', - icon : 'heroicons_outline:star', + icon : 'heroicons_solid:star', title : 'Daily challenges', description: 'Your submission has been accepted', time : moment().subtract(25, 'minutes').toISOString(), // 25 minutes ago @@ -21,7 +21,7 @@ export const notifications = [ }, { id : 'b91ccb58-b06c-413b-b389-87010e03a120', - icon : 'heroicons_outline:mail', + icon : 'heroicons_solid:mail', title : 'Mailbox', description: 'You have 15 unread mails across 3 mailboxes', time : moment().subtract(3, 'hours').toISOString(), // 3 hours ago @@ -31,7 +31,7 @@ export const notifications = [ }, { id : '541416c9-84a7-408a-8d74-27a43c38d797', - icon : 'heroicons_outline:refresh', + icon : 'heroicons_solid:refresh', title : 'Cron jobs', description: 'Your Docker container is ready to publish', time : moment().subtract(5, 'hours').toISOString(), // 5 hours ago @@ -59,7 +59,7 @@ export const notifications = [ }, { id : 'b85c2338-cc98-4140-bbf8-c226ce4e395e', - icon : 'heroicons_outline:mail', + icon : 'heroicons_solid:mail', title : 'Mailbox', description: 'You have 3 new mails', time : moment().subtract(1, 'day').toISOString(), // 1 day ago @@ -69,7 +69,7 @@ export const notifications = [ }, { id : '8f8e1bf9-4661-4939-9e43-390957b60f42', - icon : 'heroicons_outline:star', + icon : 'heroicons_solid:star', title : 'Daily challenges', description: 'Your submission has been accepted and you are ready to sign-up for the final assigment which will be ready in 2 days', time : moment().subtract(3, 'days').toISOString(), // 3 days ago @@ -79,7 +79,7 @@ export const notifications = [ }, { id : '30af917b-7a6a-45d1-822f-9e7ad7f8bf69', - icon : 'heroicons_outline:refresh', + icon : 'heroicons_solid:refresh', title : 'Cron jobs', description: 'Your Vagrant container is ready to download', time : moment().subtract(4, 'day').toISOString(), // 4 days ago diff --git a/src/app/mock-api/common/shortcuts/data.ts b/src/app/mock-api/common/shortcuts/data.ts index 38acd3d9..fac6fa4b 100644 --- a/src/app/mock-api/common/shortcuts/data.ts +++ b/src/app/mock-api/common/shortcuts/data.ts @@ -3,9 +3,9 @@ export const shortcuts = [ { id : 'a1ae91d3-e2cb-459b-9be9-a184694f548b', label : 'Changelog', - description: 'Latest version: v1.2', + description: 'List of changes', icon : 'heroicons_outline:clipboard-list', - link : '/dashboards/project', + link : '/docs/changelog', useRouter : true }, { @@ -13,7 +13,7 @@ export const shortcuts = [ label : 'Documentation', description: 'Getting started', icon : 'heroicons_outline:book-open', - link : '/dashboards/project', + link : '/docs/guides/getting-started/introduction', useRouter : true }, { @@ -21,7 +21,7 @@ export const shortcuts = [ label : 'Help center', description: 'FAQs and guides', icon : 'heroicons_outline:support', - link : '/pages/help-center', + link : '/apps/help-center', useRouter : true }, { @@ -29,7 +29,7 @@ export const shortcuts = [ label : 'Dashboard', description: 'User analytics', icon : 'heroicons_outline:chart-pie', - link : '/dashboards/project', + link : '/dashboards/analytics', useRouter : true }, { @@ -67,7 +67,7 @@ export const shortcuts = [ { id : '0a240ab8-e19d-4503-bf68-20013030d526', label : 'Reload', - description: 'Restart the app', + description: 'Reload the app', icon : 'heroicons_outline:refresh', link : '/dashboards/project', useRouter : false From 945d0a2240ca4b7a33b1cedb7836b76e46866a7b Mon Sep 17 00:00:00 2001 From: sercan Date: Tue, 8 Jun 2021 18:29:49 +0300 Subject: [PATCH 08/21] (fuse/fullscreen) Added [tooltip] & [iconTpl] inputs for customizing the Fullscreen trigger button --- .../components/fullscreen/fullscreen.component.html | 9 +++++++-- src/@fuse/components/fullscreen/fullscreen.component.ts | 4 +++- src/@fuse/components/fullscreen/fullscreen.module.ts | 6 ++++-- 3 files changed, 14 insertions(+), 5 deletions(-) diff --git a/src/@fuse/components/fullscreen/fullscreen.component.html b/src/@fuse/components/fullscreen/fullscreen.component.html index 1dfb3e59..77cb0f1d 100644 --- a/src/@fuse/components/fullscreen/fullscreen.component.html +++ b/src/@fuse/components/fullscreen/fullscreen.component.html @@ -1,7 +1,12 @@ + + + + + diff --git a/src/@fuse/components/fullscreen/fullscreen.component.ts b/src/@fuse/components/fullscreen/fullscreen.component.ts index ff32aa36..38ec191d 100644 --- a/src/@fuse/components/fullscreen/fullscreen.component.ts +++ b/src/@fuse/components/fullscreen/fullscreen.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component, Inject, OnInit, ViewEncapsulation } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Inject, Input, OnInit, TemplateRef, ViewEncapsulation } from '@angular/core'; import { DOCUMENT } from '@angular/common'; import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fullscreen.types'; @@ -11,6 +11,8 @@ import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fulls }) export class FuseFullscreenComponent implements OnInit { + @Input() iconTpl: TemplateRef; + @Input() tooltip: string; private _fsDoc: FSDocument; private _fsDocEl: FSDocumentElement; private _isFullscreen: boolean = false; diff --git a/src/@fuse/components/fullscreen/fullscreen.module.ts b/src/@fuse/components/fullscreen/fullscreen.module.ts index 925dabc9..89e43793 100644 --- a/src/@fuse/components/fullscreen/fullscreen.module.ts +++ b/src/@fuse/components/fullscreen/fullscreen.module.ts @@ -3,15 +3,17 @@ import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; import { MatTooltipModule } from '@angular/material/tooltip'; import { FuseFullscreenComponent } from '@fuse/components/fullscreen/fullscreen.component'; +import { CommonModule } from '@angular/common'; @NgModule({ declarations: [ FuseFullscreenComponent ], - imports : [ + imports: [ MatButtonModule, MatIconModule, - MatTooltipModule + MatTooltipModule, + CommonModule ], exports : [ FuseFullscreenComponent From 66096718e01e975f7a2964768fa3d7b2392656c0 Mon Sep 17 00:00:00 2001 From: sercan Date: Wed, 9 Jun 2021 10:22:18 +0300 Subject: [PATCH 09/21] (docs) Updated the docs to reflect the latest changes --- .../fullscreen/fullscreen.component.html | 107 ++++++++++++++++++ .../fullscreen/fullscreen.component.ts | 30 +++++ .../highlight/highlight.component.html | 2 +- .../core-features/core-features.component.ts | 6 + .../core-features/core-features.module.ts | 2 + .../core-features/core-features.routing.ts | 5 + .../common/languages/languages.component.html | 57 ++++++++++ .../languages.component.ts} | 7 +- .../common/messages/messages.component.html | 12 +- .../common/messages/messages.component.ts | 1 - .../notifications.component.html | 12 +- .../notifications/notifications.component.ts | 1 - .../common/overview/overview.component.html | 2 +- .../common/search/search.component.ts | 3 +- .../common/shortcuts/shortcuts.component.html | 12 +- .../common/shortcuts/shortcuts.component.ts | 1 - .../user.component.html} | 16 +-- .../common/user/user.component.ts | 29 +++++ .../other-components.component.ts | 6 + .../other-components.module.ts | 6 +- .../other-components.routing.ts | 9 +- 21 files changed, 273 insertions(+), 53 deletions(-) create mode 100644 src/app/modules/admin/docs/core-features/components/fullscreen/fullscreen.component.html create mode 100644 src/app/modules/admin/docs/core-features/components/fullscreen/fullscreen.component.ts create mode 100644 src/app/modules/admin/docs/other-components/common/languages/languages.component.html rename src/app/modules/admin/docs/other-components/common/{user-menu/user-menu.component.ts => languages/languages.component.ts} (84%) rename src/app/modules/admin/docs/other-components/common/{user-menu/user-menu.component.html => user/user.component.html} (85%) create mode 100644 src/app/modules/admin/docs/other-components/common/user/user.component.ts diff --git a/src/app/modules/admin/docs/core-features/components/fullscreen/fullscreen.component.html b/src/app/modules/admin/docs/core-features/components/fullscreen/fullscreen.component.html new file mode 100644 index 00000000..25c14cca --- /dev/null +++ b/src/app/modules/admin/docs/core-features/components/fullscreen/fullscreen.component.html @@ -0,0 +1,107 @@ +
+ + +
+
+ +
+ +
+ + Core Features +
+
+ + Components +
+
+ +
+

+ Fullscreen +

+
+
+ +
+ +
+ +

+ fuse-fullscreen is a small component that toggles the fullscreen on and off. +

+

+ Exported as: fuseFullscreen +

+ +

Module

+ + +

Usage

+

+ Here's the basic usage of the fuse-fullscreen: +

+ + + + +

Properties

+
+ + + + + + + + + + + + + + + + + + + + +
NameDescriptionDefault
+
@Input()
+
iconTpl: TemplateRef<any>
+ 		+ Template reference for the icon. + + - +
+
@Input()
+
tooltip: string
+ 		+ Tooltip of the toggle button. + + 'Toggle Fullscreen' +
+
+ +
+ +
diff --git a/src/app/modules/admin/docs/core-features/components/fullscreen/fullscreen.component.ts b/src/app/modules/admin/docs/core-features/components/fullscreen/fullscreen.component.ts new file mode 100644 index 00000000..8acc21e3 --- /dev/null +++ b/src/app/modules/admin/docs/core-features/components/fullscreen/fullscreen.component.ts @@ -0,0 +1,30 @@ +import { Component } from '@angular/core'; +import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component'; + +@Component({ + selector : 'fullscreen', + templateUrl: './fullscreen.component.html', + styles : [''] +}) +export class FullscreenComponent +{ + /** + * Constructor + */ + constructor(private _coreFeaturesComponent: CoreFeaturesComponent) + { + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Toggle the drawer + */ + toggleDrawer(): void + { + // Toggle the drawer + this._coreFeaturesComponent.matDrawer.toggle(); + } +} diff --git a/src/app/modules/admin/docs/core-features/components/highlight/highlight.component.html b/src/app/modules/admin/docs/core-features/components/highlight/highlight.component.html index 957a7bb9..0a724cc4 100644 --- a/src/app/modules/admin/docs/core-features/components/highlight/highlight.component.html +++ b/src/app/modules/admin/docs/core-features/components/highlight/highlight.component.html @@ -49,7 +49,7 @@

Usage

diff --git a/src/app/modules/admin/docs/core-features/core-features.component.ts b/src/app/modules/admin/docs/core-features/core-features.component.ts index 44445d0d..2591ab32 100644 --- a/src/app/modules/admin/docs/core-features/core-features.component.ts +++ b/src/app/modules/admin/docs/core-features/core-features.component.ts @@ -71,6 +71,12 @@ export class CoreFeaturesComponent implements OnInit, OnDestroy type : 'basic', link : '/docs/core-features/components/drawer' }, + { + id : 'core-features.components.fullscreen', + title: 'Fullscreen', + type : 'basic', + link : '/docs/core-features/components/fullscreen' + }, { id : 'core-features.components.highlight', title: 'Highlight', diff --git a/src/app/modules/admin/docs/core-features/core-features.module.ts b/src/app/modules/admin/docs/core-features/core-features.module.ts index 1330895c..69aee9af 100644 --- a/src/app/modules/admin/docs/core-features/core-features.module.ts +++ b/src/app/modules/admin/docs/core-features/core-features.module.ts @@ -20,6 +20,7 @@ import { AlertComponent } from 'app/modules/admin/docs/core-features/components/ import { CardComponent } from 'app/modules/admin/docs/core-features/components/card/card.component'; import { DateRangeComponent } from 'app/modules/admin/docs/core-features/components/date-range/date-range.component'; import { DrawerComponent } from 'app/modules/admin/docs/core-features/components/drawer/drawer.component'; +import { FullscreenComponent } from 'app/modules/admin/docs/core-features/components/fullscreen/fullscreen.component'; import { HighlightComponent } from 'app/modules/admin/docs/core-features/components/highlight/highlight.component'; import { NavigationComponent } from 'app/modules/admin/docs/core-features/components/navigation/navigation.component'; import { MasonryComponent } from 'app/modules/admin/docs/core-features/components/masonry/masonry.component'; @@ -40,6 +41,7 @@ import { coreFeaturesRoutes } from 'app/modules/admin/docs/core-features/core-fe CardComponent, DateRangeComponent, DrawerComponent, + FullscreenComponent, HighlightComponent, MasonryComponent, NavigationComponent, diff --git a/src/app/modules/admin/docs/core-features/core-features.routing.ts b/src/app/modules/admin/docs/core-features/core-features.routing.ts index 350932b7..900edb00 100644 --- a/src/app/modules/admin/docs/core-features/core-features.routing.ts +++ b/src/app/modules/admin/docs/core-features/core-features.routing.ts @@ -5,6 +5,7 @@ import { AlertComponent } from 'app/modules/admin/docs/core-features/components/ import { CardComponent } from 'app/modules/admin/docs/core-features/components/card/card.component'; import { DateRangeComponent } from 'app/modules/admin/docs/core-features/components/date-range/date-range.component'; import { DrawerComponent } from 'app/modules/admin/docs/core-features/components/drawer/drawer.component'; +import { FullscreenComponent } from 'app/modules/admin/docs/core-features/components/fullscreen/fullscreen.component'; import { HighlightComponent } from 'app/modules/admin/docs/core-features/components/highlight/highlight.component'; import { MasonryComponent } from 'app/modules/admin/docs/core-features/components/masonry/masonry.component'; import { NavigationComponent } from 'app/modules/admin/docs/core-features/components/navigation/navigation.component'; @@ -59,6 +60,10 @@ export const coreFeaturesRoutes: Route[] = [ path : 'drawer', component: DrawerComponent }, + { + path : 'fullscreen', + component: FullscreenComponent + }, { path : 'highlight', component: HighlightComponent diff --git a/src/app/modules/admin/docs/other-components/common/languages/languages.component.html b/src/app/modules/admin/docs/other-components/common/languages/languages.component.html new file mode 100644 index 00000000..38adc435 --- /dev/null +++ b/src/app/modules/admin/docs/other-components/common/languages/languages.component.html @@ -0,0 +1,57 @@ +
+ + +
+
+ +
+ +
+ + Other Components +
+
+ + Common +
+
+ +
+

+ Languages +

+
+
+ +
+ +
+ +

+ This component can be used for changing the language and managing the side effects of changing the active language such as updating the navigation. +

+ +

Usage

+

+ Here's the basic usage of the component: +

+ + +
+ +
diff --git a/src/app/modules/admin/docs/other-components/common/user-menu/user-menu.component.ts b/src/app/modules/admin/docs/other-components/common/languages/languages.component.ts similarity index 84% rename from src/app/modules/admin/docs/other-components/common/user-menu/user-menu.component.ts rename to src/app/modules/admin/docs/other-components/common/languages/languages.component.ts index 5b1cd108..f6a5c97b 100644 --- a/src/app/modules/admin/docs/other-components/common/user-menu/user-menu.component.ts +++ b/src/app/modules/admin/docs/other-components/common/languages/languages.component.ts @@ -2,11 +2,10 @@ import { Component } from '@angular/core'; import { OtherComponentsComponent } from 'app/modules/admin/docs/other-components/other-components.component'; @Component({ - selector : 'user-menu', - templateUrl: './user-menu.component.html', - styles : [''] + selector : 'languages', + templateUrl: './languages.component.html' }) -export class UserMenuComponent +export class LanguagesComponent { /** * Constructor diff --git a/src/app/modules/admin/docs/other-components/common/messages/messages.component.html b/src/app/modules/admin/docs/other-components/common/messages/messages.component.html index 51cc7ba7..2e1d98ac 100644 --- a/src/app/modules/admin/docs/other-components/common/messages/messages.component.html +++ b/src/app/modules/admin/docs/other-components/common/messages/messages.component.html @@ -52,13 +52,10 @@

Usage

-

- The component only has one input to supply the messages: -

Message

@@ -184,16 +181,15 @@
- store(messages: Message[]) + getAll(): Observable<Message[]>
- Store messages on the service. This will replace the current messages and can be used as an alternative to messages input of the - component. + Get all messages from the server.
- create(message: Message): Observable<Messages> + create(message: Message): Observable<Message>
Create a new message on the server. diff --git a/src/app/modules/admin/docs/other-components/common/messages/messages.component.ts b/src/app/modules/admin/docs/other-components/common/messages/messages.component.ts index a013450d..e0397828 100644 --- a/src/app/modules/admin/docs/other-components/common/messages/messages.component.ts +++ b/src/app/modules/admin/docs/other-components/common/messages/messages.component.ts @@ -4,7 +4,6 @@ import { OtherComponentsComponent } from 'app/modules/admin/docs/other-component @Component({ selector : 'messages', templateUrl: './messages.component.html', - styles : [''] }) export class MessagesComponent { diff --git a/src/app/modules/admin/docs/other-components/common/notifications/notifications.component.html b/src/app/modules/admin/docs/other-components/common/notifications/notifications.component.html index 6986ed7c..37f792c6 100644 --- a/src/app/modules/admin/docs/other-components/common/notifications/notifications.component.html +++ b/src/app/modules/admin/docs/other-components/common/notifications/notifications.component.html @@ -52,13 +52,10 @@

Usage

-

- The component only has one input to supply the notifications: -

Notification

@@ -184,16 +181,15 @@
- store(notifications: Notification[]) + getAll(): Observable<Notification[]>
- Store notifications on the service. This will replace the current notifications and can be used as an alternative to notifications input of the - component. + Get all notifications from the server.
- create(notification: Notification): Observable<Notifications> + create(notification: Notification): Observable<Notification>
Create a new notification on the server. diff --git a/src/app/modules/admin/docs/other-components/common/notifications/notifications.component.ts b/src/app/modules/admin/docs/other-components/common/notifications/notifications.component.ts index 7c7d32f1..7aff0fff 100644 --- a/src/app/modules/admin/docs/other-components/common/notifications/notifications.component.ts +++ b/src/app/modules/admin/docs/other-components/common/notifications/notifications.component.ts @@ -4,7 +4,6 @@ import { OtherComponentsComponent } from 'app/modules/admin/docs/other-component @Component({ selector : 'notifications', templateUrl: './notifications.component.html', - styles : [''] }) export class NotificationsComponent { diff --git a/src/app/modules/admin/docs/other-components/common/overview/overview.component.html b/src/app/modules/admin/docs/other-components/common/overview/overview.component.html index 8c6488e1..ca591b5e 100644 --- a/src/app/modules/admin/docs/other-components/common/overview/overview.component.html +++ b/src/app/modules/admin/docs/other-components/common/overview/overview.component.html @@ -76,7 +76,7 @@

A user customizable panel to show shortcuts to internal/external pages.

  • -

    User Menu

    +

    User

    A user avatar and menu component to show user related information and actions.

    • diff --git a/src/app/modules/admin/docs/other-components/common/search/search.component.ts b/src/app/modules/admin/docs/other-components/common/search/search.component.ts index 8fc1b0fe..eb9a0810 100644 --- a/src/app/modules/admin/docs/other-components/common/search/search.component.ts +++ b/src/app/modules/admin/docs/other-components/common/search/search.component.ts @@ -3,8 +3,7 @@ import { OtherComponentsComponent } from 'app/modules/admin/docs/other-component @Component({ selector : 'search', - templateUrl: './search.component.html', - styles : [''] + templateUrl: './search.component.html' }) export class SearchComponent { diff --git a/src/app/modules/admin/docs/other-components/common/shortcuts/shortcuts.component.html b/src/app/modules/admin/docs/other-components/common/shortcuts/shortcuts.component.html index b07ae59d..2f227e64 100644 --- a/src/app/modules/admin/docs/other-components/common/shortcuts/shortcuts.component.html +++ b/src/app/modules/admin/docs/other-components/common/shortcuts/shortcuts.component.html @@ -44,13 +44,10 @@

    Usage

    -

    - The component only has one input to supply the shortcuts: -

    Message

    @@ -149,16 +146,15 @@
    - store(shortcuts: Shortcut[]) + getAll(): Observable<Shortcut[]>
    - Store shortcuts on the service. This will replace the current shortcuts and can be used as an alternative to shortcuts input of the - component. + Get all shortcuts from the server.
    - create(shortcut: Shortcut): Observable<Shortcuts> + create(shortcut: Shortcut): Observable<Shortcut>
    Create a new shortcut on the server. diff --git a/src/app/modules/admin/docs/other-components/common/shortcuts/shortcuts.component.ts b/src/app/modules/admin/docs/other-components/common/shortcuts/shortcuts.component.ts index 7303f7d6..3da703ef 100644 --- a/src/app/modules/admin/docs/other-components/common/shortcuts/shortcuts.component.ts +++ b/src/app/modules/admin/docs/other-components/common/shortcuts/shortcuts.component.ts @@ -4,7 +4,6 @@ import { OtherComponentsComponent } from 'app/modules/admin/docs/other-component @Component({ selector : 'shortcuts', templateUrl: './shortcuts.component.html', - styles : [''] }) export class ShortcutsComponent { diff --git a/src/app/modules/admin/docs/other-components/common/user-menu/user-menu.component.html b/src/app/modules/admin/docs/other-components/common/user/user.component.html similarity index 85% rename from src/app/modules/admin/docs/other-components/common/user-menu/user-menu.component.html rename to src/app/modules/admin/docs/other-components/common/user/user.component.html index 751a6046..fc2470bf 100644 --- a/src/app/modules/admin/docs/other-components/common/user-menu/user-menu.component.html +++ b/src/app/modules/admin/docs/other-components/common/user/user.component.html @@ -24,7 +24,7 @@

    - User Menu + User

    @@ -49,7 +49,7 @@

    Properties

    @@ -75,18 +75,6 @@ true - - -
    @Input()
    -
    user: User
    - - - The user data. - - - - - -
    diff --git a/src/app/modules/admin/docs/other-components/common/user/user.component.ts b/src/app/modules/admin/docs/other-components/common/user/user.component.ts new file mode 100644 index 00000000..2b766fba --- /dev/null +++ b/src/app/modules/admin/docs/other-components/common/user/user.component.ts @@ -0,0 +1,29 @@ +import { Component } from '@angular/core'; +import { OtherComponentsComponent } from 'app/modules/admin/docs/other-components/other-components.component'; + +@Component({ + selector : 'user', + templateUrl: './user.component.html' +}) +export class UserComponent +{ + /** + * Constructor + */ + constructor(private _otherComponentsComponent: OtherComponentsComponent) + { + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Toggle the drawer + */ + toggleDrawer(): void + { + // Toggle the drawer + this._otherComponentsComponent.matDrawer.toggle(); + } +} diff --git a/src/app/modules/admin/docs/other-components/other-components.component.ts b/src/app/modules/admin/docs/other-components/other-components.component.ts index 5347a3ee..b5cf254e 100644 --- a/src/app/modules/admin/docs/other-components/other-components.component.ts +++ b/src/app/modules/admin/docs/other-components/other-components.component.ts @@ -41,6 +41,12 @@ export class OtherComponentsComponent implements OnInit, OnDestroy type : 'basic', link : '/docs/other-components/common/overview' }, + { + id : 'common.languages', + title: 'Languages', + type : 'basic', + link : '/docs/other-components/common/languages' + }, { id : 'common.messages', title: 'Messages', diff --git a/src/app/modules/admin/docs/other-components/other-components.module.ts b/src/app/modules/admin/docs/other-components/other-components.module.ts index b6d4cca1..bb7d5bf7 100644 --- a/src/app/modules/admin/docs/other-components/other-components.module.ts +++ b/src/app/modules/admin/docs/other-components/other-components.module.ts @@ -10,11 +10,12 @@ import { FuseScrollResetModule } from '@fuse/directives/scroll-reset'; import { SharedModule } from 'app/shared/shared.module'; import { OtherComponentsComponent } from 'app/modules/admin/docs/other-components/other-components.component'; import { OverviewComponent } from 'app/modules/admin/docs/other-components/common/overview/overview.component'; +import { LanguagesComponent } from 'app/modules/admin/docs/other-components/common/languages/languages.component'; import { MessagesComponent } from 'app/modules/admin/docs/other-components/common/messages/messages.component'; import { NotificationsComponent } from 'app/modules/admin/docs/other-components/common/notifications/notifications.component'; import { SearchComponent } from 'app/modules/admin/docs/other-components/common/search/search.component'; import { ShortcutsComponent } from 'app/modules/admin/docs/other-components/common/shortcuts/shortcuts.component'; -import { UserMenuComponent } from 'app/modules/admin/docs/other-components/common/user-menu/user-menu.component'; +import { UserComponent } from 'app/modules/admin/docs/other-components/common/user/user.component'; import { ApexChartsComponent } from 'app/modules/admin/docs/other-components/third-party/apex-charts/apex-charts.component'; import { FullCalendarComponent } from 'app/modules/admin/docs/other-components/third-party/full-calendar/full-calendar.component'; import { NgxMarkdownComponent } from 'app/modules/admin/docs/other-components/third-party/ngx-markdown/ngx-markdown.component'; @@ -25,11 +26,12 @@ import { otherComponentsRoutes } from 'app/modules/admin/docs/other-components/o declarations: [ OtherComponentsComponent, OverviewComponent, + LanguagesComponent, MessagesComponent, NotificationsComponent, SearchComponent, ShortcutsComponent, - UserMenuComponent, + UserComponent, ApexChartsComponent, FullCalendarComponent, NgxMarkdownComponent, diff --git a/src/app/modules/admin/docs/other-components/other-components.routing.ts b/src/app/modules/admin/docs/other-components/other-components.routing.ts index 2a64c2ad..693cbf69 100644 --- a/src/app/modules/admin/docs/other-components/other-components.routing.ts +++ b/src/app/modules/admin/docs/other-components/other-components.routing.ts @@ -1,11 +1,12 @@ import { Route } from '@angular/router'; import { OtherComponentsComponent } from 'app/modules/admin/docs/other-components/other-components.component'; import { OverviewComponent } from 'app/modules/admin/docs/other-components/common/overview/overview.component'; +import { LanguagesComponent } from 'app/modules/admin/docs/other-components/common/languages/languages.component'; import { MessagesComponent } from 'app/modules/admin/docs/other-components/common/messages/messages.component'; import { NotificationsComponent } from 'app/modules/admin/docs/other-components/common/notifications/notifications.component'; import { SearchComponent } from 'app/modules/admin/docs/other-components/common/search/search.component'; import { ShortcutsComponent } from 'app/modules/admin/docs/other-components/common/shortcuts/shortcuts.component'; -import { UserMenuComponent } from 'app/modules/admin/docs/other-components/common/user-menu/user-menu.component'; +import { UserComponent } from 'app/modules/admin/docs/other-components/common/user/user.component'; import { ApexChartsComponent } from 'app/modules/admin/docs/other-components/third-party/apex-charts/apex-charts.component'; import { FullCalendarComponent } from 'app/modules/admin/docs/other-components/third-party/full-calendar/full-calendar.component'; import { NgxMarkdownComponent } from 'app/modules/admin/docs/other-components/third-party/ngx-markdown/ngx-markdown.component'; @@ -33,6 +34,10 @@ export const otherComponentsRoutes: Route[] = [ path : 'overview', component: OverviewComponent }, + { + path : 'languages', + component: LanguagesComponent + }, { path : 'messages', component: MessagesComponent @@ -51,7 +56,7 @@ export const otherComponentsRoutes: Route[] = [ }, { path : 'user', - component: UserMenuComponent + component: UserComponent } ] }, From bb9023f9dfea1482de024d540cc892c7be91d50c Mon Sep 17 00:00:00 2001 From: sercan Date: Wed, 9 Jun 2021 10:32:26 +0300 Subject: [PATCH 10/21] (fuse/navigation) Fixed: First children of collapsable items don't have proper spacing at the top --- .../navigation/vertical/styles/appearances/default.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/@fuse/components/navigation/vertical/styles/appearances/default.scss b/src/@fuse/components/navigation/vertical/styles/appearances/default.scss index 9c3580ca..d0f4396e 100644 --- a/src/@fuse/components/navigation/vertical/styles/appearances/default.scss +++ b/src/@fuse/components/navigation/vertical/styles/appearances/default.scss @@ -335,6 +335,7 @@ fuse-vertical-navigation { } > .fuse-vertical-navigation-item-children { + margin-top: 6px; > *:last-child { padding-bottom: 6px; From bafa9adc01b70ebe480092a4b1d765df41a24cf4 Mon Sep 17 00:00:00 2001 From: sercan Date: Wed, 9 Jun 2021 11:41:39 +0300 Subject: [PATCH 11/21] (ui/page-layouts) Added tabbed version of Simple Fullwidth page layout --- src/app/mock-api/common/navigation/data.ts | 12 +- .../ui/page-layouts/page-layouts.module.ts | 111 +++++++++++++++--- .../fullwidth-1.component.html} | 0 .../content-scroll/fullwidth-1.component.ts | 16 +++ .../normal-scroll/fullwidth-1.component.html} | 0 .../normal-scroll/fullwidth-1.component.ts} | 6 +- .../page-scroll/fullwidth-1.component.html} | 0 .../page-scroll/fullwidth-1.component.ts} | 6 +- .../content-scroll/fullwidth-2.component.html | 104 ++++++++++++++++ .../content-scroll/fullwidth-2.component.ts | 16 +++ .../normal-scroll/fullwidth-2.component.html | 102 ++++++++++++++++ .../normal-scroll/fullwidth-2.component.ts | 16 +++ .../page-scroll/fullwidth-2.component.html | 104 ++++++++++++++++ .../page-scroll/fullwidth-2.component.ts} | 6 +- 14 files changed, 468 insertions(+), 31 deletions(-) rename src/app/modules/admin/ui/page-layouts/simple/{fullwidth/content-scroll/fullwidth.component.html => fullwidth-1/content-scroll/fullwidth-1.component.html} (100%) create mode 100644 src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/content-scroll/fullwidth-1.component.ts rename src/app/modules/admin/ui/page-layouts/simple/{fullwidth/normal-scroll/fullwidth.component.html => fullwidth-1/normal-scroll/fullwidth-1.component.html} (100%) rename src/app/modules/admin/ui/page-layouts/simple/{fullwidth/content-scroll/fullwidth.component.ts => fullwidth-1/normal-scroll/fullwidth-1.component.ts} (54%) rename src/app/modules/admin/ui/page-layouts/simple/{fullwidth/page-scroll/fullwidth.component.html => fullwidth-1/page-scroll/fullwidth-1.component.html} (100%) rename src/app/modules/admin/ui/page-layouts/simple/{fullwidth/normal-scroll/fullwidth.component.ts => fullwidth-1/page-scroll/fullwidth-1.component.ts} (55%) create mode 100644 src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/content-scroll/fullwidth-2.component.html create mode 100644 src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/content-scroll/fullwidth-2.component.ts create mode 100644 src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/normal-scroll/fullwidth-2.component.html create mode 100644 src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/normal-scroll/fullwidth-2.component.ts create mode 100644 src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/page-scroll/fullwidth-2.component.html rename src/app/modules/admin/ui/page-layouts/simple/{fullwidth/page-scroll/fullwidth.component.ts => fullwidth-2/page-scroll/fullwidth-2.component.ts} (55%) diff --git a/src/app/mock-api/common/navigation/data.ts b/src/app/mock-api/common/navigation/data.ts index 26b22d3f..157df34a 100644 --- a/src/app/mock-api/common/navigation/data.ts +++ b/src/app/mock-api/common/navigation/data.ts @@ -868,10 +868,16 @@ export const defaultNavigation: FuseNavigationItem[] = [ type : 'collapsable', children: [ { - id : 'user-interface.page-layouts.simple.fullwidth', - title: 'Fullwidth', + id : 'user-interface.page-layouts.simple.fullwidth-1', + title: 'Fullwidth #1', type : 'basic', - link : '/ui/page-layouts/simple/fullwidth' + link : '/ui/page-layouts/simple/fullwidth-1' + }, + { + id : 'user-interface.page-layouts.simple.fullwidth-2', + title: 'Fullwidth #2', + type : 'basic', + link : '/ui/page-layouts/simple/fullwidth-2' }, { id : 'user-interface.page-layouts.simple.left-sidebar-1', diff --git a/src/app/modules/admin/ui/page-layouts/page-layouts.module.ts b/src/app/modules/admin/ui/page-layouts/page-layouts.module.ts index 29759b48..05bd18b2 100644 --- a/src/app/modules/admin/ui/page-layouts/page-layouts.module.ts +++ b/src/app/modules/admin/ui/page-layouts/page-layouts.module.ts @@ -36,9 +36,13 @@ import { CardedRightSidebar1PageScrollComponent } from 'app/modules/admin/ui/pag import { CardedRightSidebar1ContentScrollComponent } from 'app/modules/admin/ui/page-layouts/carded/right-sidebar-1/content-scroll/right-sidebar-1.component'; import { CardedRightSidebar2NormalScrollComponent } from 'app/modules/admin/ui/page-layouts/carded/right-sidebar-2/normal-scroll/right-sidebar-2.component'; -import { SimpleFullwidthNormalScrollComponent } from 'app/modules/admin/ui/page-layouts/simple/fullwidth/normal-scroll/fullwidth.component'; -import { SimpleFullwidthPageScrollComponent } from 'app/modules/admin/ui/page-layouts/simple/fullwidth/page-scroll/fullwidth.component'; -import { SimpleFullwidthContentScrollComponent } from 'app/modules/admin/ui/page-layouts/simple/fullwidth/content-scroll/fullwidth.component'; +import { SimpleFullwidth1NormalScrollComponent } from 'app/modules/admin/ui/page-layouts/simple/fullwidth-1/normal-scroll/fullwidth-1.component'; +import { SimpleFullwidth1PageScrollComponent } from 'app/modules/admin/ui/page-layouts/simple/fullwidth-1/page-scroll/fullwidth-1.component'; +import { SimpleFullwidth1ContentScrollComponent } from 'app/modules/admin/ui/page-layouts/simple/fullwidth-1/content-scroll/fullwidth-1.component'; + +import { SimpleFullwidth2NormalScrollComponent } from 'app/modules/admin/ui/page-layouts/simple/fullwidth-2/normal-scroll/fullwidth-2.component'; +import { SimpleFullwidth2PageScrollComponent } from 'app/modules/admin/ui/page-layouts/simple/fullwidth-2/page-scroll/fullwidth-2.component'; +import { SimpleFullwidth2ContentScrollComponent } from 'app/modules/admin/ui/page-layouts/simple/fullwidth-2/content-scroll/fullwidth-2.component'; import { SimpleLeftSidebar1NormalScrollComponent } from 'app/modules/admin/ui/page-layouts/simple/left-sidebar-1/normal-scroll/left-sidebar-1.component'; import { SimpleLeftSidebar1PageScrollComponent } from 'app/modules/admin/ui/page-layouts/simple/left-sidebar-1/page-scroll/left-sidebar-1.component'; @@ -277,8 +281,8 @@ export const overviews = { } }, simple: { - fullwidth : { - title : 'Fullwidth Layout', + fullwidth1 : { + title : 'Fullwidth #1', description : 'Layout that spans the entire width of the content area with a dedicated header and 3 different scroll modes.', availableOptions: [ { @@ -298,18 +302,54 @@ export const overviews = { options : { normalScroll : { description: 'No scrolling area manipulations, entire viewport scrolls (body scroll).', - link : '/ui/page-layouts/simple/fullwidth/normal-scroll', - component : SimpleFullwidthNormalScrollComponent + link : '/ui/page-layouts/simple/fullwidth-1/normal-scroll', + component : SimpleFullwidth1NormalScrollComponent }, pageScroll : { description: 'Only the page area scrolls making the main toolbar and footer to stick to the top and bottom of the viewport respectively.', - link : '/ui/page-layouts/simple/fullwidth/page-scroll', - component : SimpleFullwidthPageScrollComponent + link : '/ui/page-layouts/simple/fullwidth-1/page-scroll', + component : SimpleFullwidth1PageScrollComponent }, contentScroll: { description: 'Only the content area of the page scrolls making everything else to stick into their positions.', - link : '/ui/page-layouts/simple/fullwidth/content-scroll', - component : SimpleFullwidthContentScrollComponent + link : '/ui/page-layouts/simple/fullwidth-1/content-scroll', + component : SimpleFullwidth1ContentScrollComponent + } + } + }, + fullwidth2 : { + title : 'Fullwidth #2', + description : 'Layout that spans the entire width of the content area with a dedicated header, tabs and 3 different scroll modes.', + availableOptions: [ + { + value: 'normalScroll', + title: 'Normal Scroll' + }, + { + value: 'pageScroll', + title: 'Page Scroll' + }, + { + value: 'contentScroll', + title: 'Content Scroll' + } + ], + selectedOption : 'normalScroll', + options : { + normalScroll : { + description: 'No scrolling area manipulations, entire viewport scrolls (body scroll).', + link : '/ui/page-layouts/simple/fullwidth-2/normal-scroll', + component : SimpleFullwidth2NormalScrollComponent + }, + pageScroll : { + description: 'Only the page area scrolls making the main toolbar and footer to stick to the top and bottom of the viewport respectively.', + link : '/ui/page-layouts/simple/fullwidth-2/page-scroll', + component : SimpleFullwidth2PageScrollComponent + }, + contentScroll: { + description: 'Only the content area of the page scrolls making everything else to stick into their positions.', + link : '/ui/page-layouts/simple/fullwidth-2/content-scroll', + component : SimpleFullwidth2ContentScrollComponent } } }, @@ -741,7 +781,7 @@ export const routes: Route[] = [ path : 'simple', children: [ { - path : 'fullwidth', + path : 'fullwidth-1', children: [ { path : '', @@ -752,20 +792,49 @@ export const routes: Route[] = [ path : 'overview', component: LayoutOverviewComponent, data : { - overview: overviews.simple.fullwidth + overview: overviews.simple.fullwidth1 } }, { path : 'normal-scroll', - component: SimpleFullwidthNormalScrollComponent + component: SimpleFullwidth1NormalScrollComponent }, { path : 'page-scroll', - component: SimpleFullwidthPageScrollComponent + component: SimpleFullwidth1PageScrollComponent }, { path : 'content-scroll', - component: SimpleFullwidthContentScrollComponent + component: SimpleFullwidth1ContentScrollComponent + } + ] + }, + { + path : 'fullwidth-2', + children: [ + { + path : '', + pathMatch : 'full', + redirectTo: 'overview' + }, + { + path : 'overview', + component: LayoutOverviewComponent, + data : { + overview: overviews.simple.fullwidth2 + } + }, + { + path : 'normal-scroll', + component: SimpleFullwidth2NormalScrollComponent + }, + { + path : 'page-scroll', + component: SimpleFullwidth2PageScrollComponent + }, + { + path : 'content-scroll', + component: SimpleFullwidth2ContentScrollComponent } ] }, @@ -987,9 +1056,13 @@ export const routes: Route[] = [ CardedRightSidebar2ContentScrollComponent, // Simple - Fullwidth - SimpleFullwidthNormalScrollComponent, - SimpleFullwidthPageScrollComponent, - SimpleFullwidthContentScrollComponent, + SimpleFullwidth1NormalScrollComponent, + SimpleFullwidth1PageScrollComponent, + SimpleFullwidth1ContentScrollComponent, + + SimpleFullwidth2NormalScrollComponent, + SimpleFullwidth2PageScrollComponent, + SimpleFullwidth2ContentScrollComponent, // Simple - Left sidebar SimpleLeftSidebar1NormalScrollComponent, diff --git a/src/app/modules/admin/ui/page-layouts/simple/fullwidth/content-scroll/fullwidth.component.html b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/content-scroll/fullwidth-1.component.html similarity index 100% rename from src/app/modules/admin/ui/page-layouts/simple/fullwidth/content-scroll/fullwidth.component.html rename to src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/content-scroll/fullwidth-1.component.html diff --git a/src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/content-scroll/fullwidth-1.component.ts b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/content-scroll/fullwidth-1.component.ts new file mode 100644 index 00000000..285ec653 --- /dev/null +++ b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/content-scroll/fullwidth-1.component.ts @@ -0,0 +1,16 @@ +import { Component, ViewEncapsulation } from '@angular/core'; + +@Component({ + selector : 'simple-fullwidth-1-content-scroll', + templateUrl : './fullwidth-1.component.html', + encapsulation: ViewEncapsulation.None +}) +export class SimpleFullwidth1ContentScrollComponent +{ + /** + * Constructor + */ + constructor() + { + } +} diff --git a/src/app/modules/admin/ui/page-layouts/simple/fullwidth/normal-scroll/fullwidth.component.html b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/normal-scroll/fullwidth-1.component.html similarity index 100% rename from src/app/modules/admin/ui/page-layouts/simple/fullwidth/normal-scroll/fullwidth.component.html rename to src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/normal-scroll/fullwidth-1.component.html diff --git a/src/app/modules/admin/ui/page-layouts/simple/fullwidth/content-scroll/fullwidth.component.ts b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/normal-scroll/fullwidth-1.component.ts similarity index 54% rename from src/app/modules/admin/ui/page-layouts/simple/fullwidth/content-scroll/fullwidth.component.ts rename to src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/normal-scroll/fullwidth-1.component.ts index 3fbd420b..a14945ba 100644 --- a/src/app/modules/admin/ui/page-layouts/simple/fullwidth/content-scroll/fullwidth.component.ts +++ b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/normal-scroll/fullwidth-1.component.ts @@ -1,11 +1,11 @@ import { Component, ViewEncapsulation } from '@angular/core'; @Component({ - selector : 'simple-fullwidth-content-scroll', - templateUrl : './fullwidth.component.html', + selector : 'simple-fullwidth-1-normal-scroll', + templateUrl : './fullwidth-1.component.html', encapsulation: ViewEncapsulation.None }) -export class SimpleFullwidthContentScrollComponent +export class SimpleFullwidth1NormalScrollComponent { /** * Constructor diff --git a/src/app/modules/admin/ui/page-layouts/simple/fullwidth/page-scroll/fullwidth.component.html b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/page-scroll/fullwidth-1.component.html similarity index 100% rename from src/app/modules/admin/ui/page-layouts/simple/fullwidth/page-scroll/fullwidth.component.html rename to src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/page-scroll/fullwidth-1.component.html diff --git a/src/app/modules/admin/ui/page-layouts/simple/fullwidth/normal-scroll/fullwidth.component.ts b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/page-scroll/fullwidth-1.component.ts similarity index 55% rename from src/app/modules/admin/ui/page-layouts/simple/fullwidth/normal-scroll/fullwidth.component.ts rename to src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/page-scroll/fullwidth-1.component.ts index 8cbd86b4..311a8347 100644 --- a/src/app/modules/admin/ui/page-layouts/simple/fullwidth/normal-scroll/fullwidth.component.ts +++ b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/page-scroll/fullwidth-1.component.ts @@ -1,11 +1,11 @@ import { Component, ViewEncapsulation } from '@angular/core'; @Component({ - selector : 'simple-fullwidth-normal-scroll', - templateUrl : './fullwidth.component.html', + selector : 'simple-fullwidth-1-page-scroll', + templateUrl : './fullwidth-1.component.html', encapsulation: ViewEncapsulation.None }) -export class SimpleFullwidthNormalScrollComponent +export class SimpleFullwidth1PageScrollComponent { /** * Constructor diff --git a/src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/content-scroll/fullwidth-2.component.html b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/content-scroll/fullwidth-2.component.html new file mode 100644 index 00000000..bc94286c --- /dev/null +++ b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/content-scroll/fullwidth-2.component.html @@ -0,0 +1,104 @@ +
    + + +
    +
    + +
    + +
    + + + Back + +
    +
    + +
    +

    + Page heading +

    +
    +
    + +
    + + +
    +
    + + +
    + + + + + + + + +
    +
    First tab content
    +
    + +     + + + + + +
    +
    Second tab content
    +
    + +     + + + + + +
    +
    Third tab content
    +
    + +     +     + +
    + +
    diff --git a/src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/content-scroll/fullwidth-2.component.ts b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/content-scroll/fullwidth-2.component.ts new file mode 100644 index 00000000..fe2868c9 --- /dev/null +++ b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/content-scroll/fullwidth-2.component.ts @@ -0,0 +1,16 @@ +import { Component, ViewEncapsulation } from '@angular/core'; + +@Component({ + selector : 'simple-fullwidth-2-content-scroll', + templateUrl : './fullwidth-2.component.html', + encapsulation: ViewEncapsulation.None +}) +export class SimpleFullwidth2ContentScrollComponent +{ + /** + * Constructor + */ + constructor() + { + } +} diff --git a/src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/normal-scroll/fullwidth-2.component.html b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/normal-scroll/fullwidth-2.component.html new file mode 100644 index 00000000..19eb6445 --- /dev/null +++ b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/normal-scroll/fullwidth-2.component.html @@ -0,0 +1,102 @@ +
    + + +
    +
    + +
    + +
    + + + Back + +
    +
    + +
    +

    + Page heading +

    +
    +
    + +
    + + +
    +
    + + +
    + + + + + + + + +
    +
    First tab content
    +
    + +     + + + + + +
    +
    Second tab content
    +
    + +     + + + + + +
    +
    Third tab content
    +
    + +     +     + +
    + +
    diff --git a/src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/normal-scroll/fullwidth-2.component.ts b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/normal-scroll/fullwidth-2.component.ts new file mode 100644 index 00000000..ab0cab96 --- /dev/null +++ b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/normal-scroll/fullwidth-2.component.ts @@ -0,0 +1,16 @@ +import { Component, ViewEncapsulation } from '@angular/core'; + +@Component({ + selector : 'simple-fullwidth-2-normal-scroll', + templateUrl : './fullwidth-2.component.html', + encapsulation: ViewEncapsulation.None +}) +export class SimpleFullwidth2NormalScrollComponent +{ + /** + * Constructor + */ + constructor() + { + } +} diff --git a/src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/page-scroll/fullwidth-2.component.html b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/page-scroll/fullwidth-2.component.html new file mode 100644 index 00000000..fa7bcbbd --- /dev/null +++ b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/page-scroll/fullwidth-2.component.html @@ -0,0 +1,104 @@ +
    + + +
    +
    + +
    + +
    + + + Back + +
    +
    + +
    +

    + Page heading +

    +
    +
    + +
    + + +
    +
    + + +
    + + + + + + + + +
    +
    First tab content
    +
    + +     + + + + + +
    +
    Second tab content
    +
    + +     + + + + + +
    +
    Third tab content
    +
    + +     +     + +
    + +
    diff --git a/src/app/modules/admin/ui/page-layouts/simple/fullwidth/page-scroll/fullwidth.component.ts b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/page-scroll/fullwidth-2.component.ts similarity index 55% rename from src/app/modules/admin/ui/page-layouts/simple/fullwidth/page-scroll/fullwidth.component.ts rename to src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/page-scroll/fullwidth-2.component.ts index a8d7301c..ed972ea1 100644 --- a/src/app/modules/admin/ui/page-layouts/simple/fullwidth/page-scroll/fullwidth.component.ts +++ b/src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/page-scroll/fullwidth-2.component.ts @@ -1,11 +1,11 @@ import { Component, ViewEncapsulation } from '@angular/core'; @Component({ - selector : 'simple-fullwidth-page-scroll', - templateUrl : './fullwidth.component.html', + selector : 'simple-fullwidth-2-page-scroll', + templateUrl : './fullwidth-2.component.html', encapsulation: ViewEncapsulation.None }) -export class SimpleFullwidthPageScrollComponent +export class SimpleFullwidth2PageScrollComponent { /** * Constructor From 39650d3cc91df2c3b6bd767daa5171afe4c5d9d6 Mon Sep 17 00:00:00 2001 From: sercan Date: Thu, 10 Jun 2021 10:13:43 +0300 Subject: [PATCH 12/21] (layouts) Use navigation service data for horizontal navigation --- .../layout/layouts/horizontal/centered/centered.component.html | 2 +- .../layouts/horizontal/enterprise/enterprise.component.html | 2 +- .../layout/layouts/horizontal/material/material.component.html | 2 +- src/app/layout/layouts/horizontal/modern/modern.component.html | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/layout/layouts/horizontal/centered/centered.component.html b/src/app/layout/layouts/horizontal/centered/centered.component.html index 5f0c4280..fcabd73f 100644 --- a/src/app/layout/layouts/horizontal/centered/centered.component.html +++ b/src/app/layout/layouts/horizontal/centered/centered.component.html @@ -50,7 +50,7 @@ + [navigation]="navigation.horizontal"> diff --git a/src/app/layout/layouts/horizontal/enterprise/enterprise.component.html b/src/app/layout/layouts/horizontal/enterprise/enterprise.component.html index 19ebe5b5..1eeef577 100644 --- a/src/app/layout/layouts/horizontal/enterprise/enterprise.component.html +++ b/src/app/layout/layouts/horizontal/enterprise/enterprise.component.html @@ -63,7 +63,7 @@ + [navigation]="navigation.horizontal">
    diff --git a/src/app/layout/layouts/horizontal/material/material.component.html b/src/app/layout/layouts/horizontal/material/material.component.html index 70524615..b7126d16 100644 --- a/src/app/layout/layouts/horizontal/material/material.component.html +++ b/src/app/layout/layouts/horizontal/material/material.component.html @@ -66,7 +66,7 @@
    + [navigation]="navigation.horizontal">
    diff --git a/src/app/layout/layouts/horizontal/modern/modern.component.html b/src/app/layout/layouts/horizontal/modern/modern.component.html index 63654346..0671c7f6 100644 --- a/src/app/layout/layouts/horizontal/modern/modern.component.html +++ b/src/app/layout/layouts/horizontal/modern/modern.component.html @@ -43,7 +43,7 @@ + [navigation]="navigation.horizontal">     From c1c9904b9da52dd5f64412728d273a282c4f24ec Mon Sep 17 00:00:00 2001 From: sercan Date: Thu, 10 Jun 2021 14:56:00 +0300 Subject: [PATCH 13/21] (layouts/common/search) Improved the autocomplete design --- .../common/search/search.component.html | 158 +++++++++++------- .../layout/common/search/search.component.ts | 14 +- src/app/mock-api/common/search/api.ts | 91 ++++++---- 3 files changed, 161 insertions(+), 102 deletions(-) diff --git a/src/app/layout/common/search/search.component.html b/src/app/layout/common/search/search.component.html index 430ede4e..689f7b88 100644 --- a/src/app/layout/common/search/search.component.html +++ b/src/app/layout/common/search/search.component.html @@ -6,7 +6,6 @@ (click)="open()"> -
    + class="py-0 px-6 text-md pointer-events-none text-secondary bg-transparent" + *ngIf="resultSets && !resultSets.length"> No results found! - - - - + + + {{resultSet.label.toUpperCase()}} + + + + + + + + + + + + + + + + +
    + - - - - - - -
    -
    Contact
    -
    - -
    -
    - - -
    +
    +
    + +
    - - - - -
    -
    Page
    -
    - - {{result.link}} -
    +
    +
    - - +
    + + + + +
    +
    +
    + {{result.link}} +
    +
    +     + + + +
    + + + + + + +
    +
    diff --git a/src/app/layout/common/search/search.component.ts b/src/app/layout/common/search/search.component.ts index 9ea24c6a..212aad60 100644 --- a/src/app/layout/common/search/search.component.ts +++ b/src/app/layout/common/search/search.component.ts @@ -20,7 +20,7 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy @Output() search: EventEmitter = new EventEmitter(); opened: boolean = false; - results: any[]; + resultSets: any[]; searchControl: FormControl = new FormControl(); private _unsubscribeAll: Subject = new Subject(); @@ -104,12 +104,12 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy takeUntil(this._unsubscribeAll), map((value) => { - // Set the search results to null if there is no value or + // Set the resultSets to null if there is no value or // the length of the value is smaller than the minLength // so the autocomplete panel can be closed if ( !value || value.length < this.minLength ) { - this.results = null; + this.resultSets = null; } // Continue @@ -121,13 +121,13 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy ) .subscribe((value) => { this._httpClient.post('api/common/search', {query: value}) - .subscribe((response: any) => { + .subscribe((resultSets: any) => { - // Store the results - this.results = response.results; + // Store the result sets + this.resultSets = resultSets; // Execute the event - this.search.next(this.results); + this.search.next(resultSets); }); }); } diff --git a/src/app/mock-api/common/search/api.ts b/src/app/mock-api/common/search/api.ts index f6525d6b..7bec5fc3 100644 --- a/src/app/mock-api/common/search/api.ts +++ b/src/app/mock-api/common/search/api.ts @@ -4,6 +4,7 @@ import { FuseNavigationItem, FuseNavigationService } from '@fuse/components/navi import { FuseMockApiService } from '@fuse/lib/mock-api'; import { defaultNavigation } from 'app/mock-api/common/navigation/data'; import { contacts } from 'app/mock-api/apps/contacts/data'; +import { tasks } from 'app/mock-api/apps/tasks/data'; @Injectable({ providedIn: 'root' @@ -12,6 +13,7 @@ export class SearchMockApi { private readonly _defaultNavigation: FuseNavigationItem[] = defaultNavigation; private readonly _contacts: any[] = contacts; + private readonly _tasks: any[] = tasks; /** * Constructor @@ -54,58 +56,75 @@ export class SearchMockApi return [200, {results: []}]; } - // Filter the navigation - const navigationResults = cloneDeep(flatNavigation).filter(item => (item.title?.toLowerCase().includes(query) || (item.subtitle && item.subtitle.includes(query)))); - // Filter the contacts - const contactsResults = cloneDeep(this._contacts).filter(user => user.name.toLowerCase().includes(query)); + const contactsResults = cloneDeep(this._contacts) + .filter(contact => contact.name.toLowerCase().includes(query)); - // Create the results array + // Filter the navigation + const pagesResults = cloneDeep(flatNavigation) + .filter(page => (page.title?.toLowerCase().includes(query) || (page.subtitle && page.subtitle.includes(query)))); + + // Filter the tasks + const tasksResults = cloneDeep(this._tasks) + .filter(task => task.title.toLowerCase().includes(query)); + + // Prepare the results array const results = []; - // If there are navigation results... - if ( navigationResults.length > 0 ) - { - // Normalize the results while marking the found chars - navigationResults.forEach((result: any) => { - - // Normalize - result['hint'] = result.link; - result['resultType'] = 'page'; - - // Mark the found chars - const re = new RegExp('(' + query.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') + ')', 'ig'); - result.title = result.title.replace(re, '$1'); - }); - - // Add the results - results.push(...navigationResults); - } - // If there are contacts results... if ( contactsResults.length > 0 ) { - // Normalize the results while marking the found chars + // Normalize the results contactsResults.forEach((result) => { - // Normalize - result.title = result.name; - result.resultType = 'contact'; - - // Make the found chars bold - const re = new RegExp('(' + query.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') + ')', 'ig'); - result.title = result.title.replace(re, '$1'); - // Add a link result.link = '/apps/contacts/' + result.id; }); - // Add the results to the results object - results.push(...contactsResults); + // Add to the results + results.push({ + id : 'contacts', + label : 'Contacts', + results: contactsResults + }); + } + + // If there are page results... + if ( pagesResults.length > 0 ) + { + // Normalize the results + pagesResults.forEach((result: any) => { + + }); + + // Add to the results + results.push({ + id : 'pages', + label : 'Pages', + results: pagesResults + }); + } + + // If there are tasks results... + if ( tasksResults.length > 0 ) + { + // Normalize the results + tasksResults.forEach((result) => { + + // Add a link + result.link = '/apps/tasks/' + result.id; + }); + + // Add to the results + results.push({ + id : 'tasks', + label : 'Tasks', + results: tasksResults + }); } // Return the response - return [200, {results}]; + return [200, results]; }); } } From efdfa6418aa166cc18db99f6e60a20998311b2b1 Mon Sep 17 00:00:00 2001 From: sercan Date: Thu, 10 Jun 2021 14:56:21 +0300 Subject: [PATCH 14/21] (core) Go back to the 'classy' layout by default --- src/app/core/config/app.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/core/config/app.config.ts b/src/app/core/config/app.config.ts index 4abf962c..f4a7980b 100644 --- a/src/app/core/config/app.config.ts +++ b/src/app/core/config/app.config.ts @@ -24,7 +24,7 @@ export interface AppConfig * FuseConfigService and its methods. */ export const appConfig: AppConfig = { - layout: 'classic', + layout: 'classy', scheme: 'light', theme : 'default' }; From ff086b1ed00fdb18d58f4dcd79f51d0b084a4b50 Mon Sep 17 00:00:00 2001 From: sercan Date: Mon, 14 Jun 2021 08:52:29 +0300 Subject: [PATCH 15/21] (fuse/navigation) Added "target" for setting the target attribute on outgoing links. Thanks @danielehrhardt for the original PR, closes #154 --- .../horizontal/components/basic/basic.component.html | 4 +++- src/@fuse/components/navigation/navigation.types.ts | 6 ++++++ .../vertical/components/basic/basic.component.html | 4 +++- 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/@fuse/components/navigation/horizontal/components/basic/basic.component.html b/src/@fuse/components/navigation/horizontal/components/basic/basic.component.html index 73ca799b..a8ce9002 100644 --- a/src/@fuse/components/navigation/horizontal/components/basic/basic.component.html +++ b/src/@fuse/components/navigation/horizontal/components/basic/basic.component.html @@ -19,7 +19,8 @@ + [href]="item.link" + [target]="item.target || '_self'"> @@ -49,6 +50,7 @@ class="fuse-horizontal-navigation-item" *ngIf="item.link && item.externalLink && item.function && !item.disabled" [href]="item.link" + [target]="item.target || '_self'" (click)="item.function(item)" mat-menu-item> diff --git a/src/@fuse/components/navigation/navigation.types.ts b/src/@fuse/components/navigation/navigation.types.ts index 32b37ae4..c6e2bbdd 100644 --- a/src/@fuse/components/navigation/navigation.types.ts +++ b/src/@fuse/components/navigation/navigation.types.ts @@ -17,6 +17,12 @@ export interface FuseNavigationItem disabled?: boolean; link?: string; externalLink?: boolean; + target?: + | '_blank' + | '_self' + | '_parent' + | '_top' + | string; exactMatch?: boolean; isActiveMatchOptions?: IsActiveMatchOptions; function?: (item: FuseNavigationItem) => void; diff --git a/src/@fuse/components/navigation/vertical/components/basic/basic.component.html b/src/@fuse/components/navigation/vertical/components/basic/basic.component.html index 7eea495e..e6f5cc4d 100644 --- a/src/@fuse/components/navigation/vertical/components/basic/basic.component.html +++ b/src/@fuse/components/navigation/vertical/components/basic/basic.component.html @@ -19,7 +19,8 @@ + [href]="item.link" + [target]="item.target || '_self'"> @@ -49,6 +50,7 @@ class="fuse-vertical-navigation-item" *ngIf="item.link && item.externalLink && item.function && !item.disabled" [href]="item.link" + [target]="item.target || '_self'" (click)="item.function(item)"> From 5962c80e8dffad5d3643f59a3b537dfc87acafe5 Mon Sep 17 00:00:00 2001 From: sercan Date: Mon, 14 Jun 2021 08:53:01 +0300 Subject: [PATCH 16/21] (docs) Added "target" docs to navigation --- .../navigation/navigation.component.html | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/app/modules/admin/docs/core-features/components/navigation/navigation.component.html b/src/app/modules/admin/docs/core-features/components/navigation/navigation.component.html index 257c7b9b..12999d56 100644 --- a/src/app/modules/admin/docs/core-features/components/navigation/navigation.component.html +++ b/src/app/modules/admin/docs/core-features/components/navigation/navigation.component.html @@ -96,6 +96,13 @@ disabled?: boolean; link?: string; externalLink?: boolean; + externalLink?: boolean; + target?: + | '_blank' + | '_self' + | '_parent' + | '_top' + | string; exactMatch?: boolean; isActiveMatchOptions?: IsActiveMatchOptions; function?: (item: FuseNavigationItem) => void; @@ -199,6 +206,14 @@ link property. + + +
    target
    + + + Sets the target attribute of the external, outgoing link. + +
    exactMatch
    From 214116e10d5c3b012c1f5ac880cfa44b324f83cf Mon Sep 17 00:00:00 2001 From: sercan Date: Mon, 14 Jun 2021 12:03:17 +0300 Subject: [PATCH 17/21] (apps/ecommerce/inventory) Replaced the mat-table with a custom grid for better mobile experience and better performance, improved the mobile experience --- .../admin/apps/ecommerce/ecommerce.module.ts | 2 - .../inventory/list/inventory.component.html | 942 ++++++++---------- .../inventory/list/inventory.component.ts | 85 +- 3 files changed, 484 insertions(+), 545 deletions(-) diff --git a/src/app/modules/admin/apps/ecommerce/ecommerce.module.ts b/src/app/modules/admin/apps/ecommerce/ecommerce.module.ts index 1a06f40b..676a83f4 100644 --- a/src/app/modules/admin/apps/ecommerce/ecommerce.module.ts +++ b/src/app/modules/admin/apps/ecommerce/ecommerce.module.ts @@ -12,7 +12,6 @@ import { MatRippleModule } from '@angular/material/core'; import { MatSortModule } from '@angular/material/sort'; import { MatSelectModule } from '@angular/material/select'; import { MatSlideToggleModule } from '@angular/material/slide-toggle'; -import { MatTableModule } from '@angular/material/table'; import { MatTooltipModule } from '@angular/material/tooltip'; import { SharedModule } from 'app/shared/shared.module'; import { InventoryComponent } from 'app/modules/admin/apps/ecommerce/inventory/inventory.component'; @@ -38,7 +37,6 @@ import { ecommerceRoutes } from 'app/modules/admin/apps/ecommerce/ecommerce.rout MatSortModule, MatSelectModule, MatSlideToggleModule, - MatTableModule, MatTooltipModule, SharedModule ] diff --git a/src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.html b/src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.html index a82b1a8c..68966ec8 100644 --- a/src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.html +++ b/src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.html @@ -1,4 +1,4 @@ -
    +
    @@ -39,531 +39,451 @@
    -
    - - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    -
    - -
    - -
    - - -
    -
    -
    - - - - - NO IMAGE - -
    -
    - - - {{selectedProductForm.get('currentImageIndex').value + 1}} of {{selectedProductForm.get('images').value.length}} - - -
    -
    -
    - Product status - - {{selectedProductForm.get('active').value === true ? 'Active' : 'Disabled'}} - -
    -
    - -
    -
    - - - - Name - - - - -
    - - SKU - - - - Barcode - - -
    - - -
    - - Category - - - - {{category.name}} - - - - - - Brand - - - - {{brand.name}} - - - - - - Vendor - - - - {{vendor.name}} - - - - -
    - - -
    - - Stock - - - - Reserved - - -
    -
    - - -
    - - Cost - $ - - - - Base Price - $ - - - - Tax - % - - - - Price - $ - - -
    - - -
    - - Weight - lbs. - - - - - - Tags -
    - -
    -
    - - -
    - -
    - -
    - - - - - {{tag.title}} - - - - - -
    - - - - - - -
    -     -
    -
    - -
    Create "{{newTagInput.value}}"
    -
    -
    -     - -
    - -
    +
    + +
    + + + +
    + +
    +
    + +
    + NO THUMB
    +
    +
    -
    - -
    -
    - - - Product updated - - - - An error occurred, try again! - -
    - -
    -
    + + - + +
    + {{product.name}} +
    + + + + + + + + + + + +
    +
    - +
    + + + +
    +     +
    -     - - - -
    +
    + + +
    + +
    +
    +
    		-
    - - - - No Image - - - {{product.sku}} -
    -     		- Name - - {{product.name}} - + +
    Name
    +     		- {{product.price | currency:'USD':'symbol':'1.2-2'}} - + + - - {{product.stock}} - - - - - - - - - - - - - - + + - - - - Details - - - - - - -
    - -
    - - + +     + +
    +
    + +
    + +
    + + +
    +
    +
    + + + + + NO IMAGE + +
    +
    + + + {{selectedProductForm.get('currentImageIndex').value + 1}} of {{selectedProductForm.get('images').value.length}} + + +
    +
    +
    + Product status + + {{selectedProductForm.get('active').value === true ? 'Active' : 'Disabled'}} + +
    +
    + +
    + +
    + + + + Name + + + + +
    + + SKU + + + + Barcode + + +
    + + +
    + + Category + + + + {{category.name}} + + + + + + Brand + + + + {{brand.name}} + + + + + + Vendor + + + + {{vendor.name}} + + + + +
    + + +
    + + Stock + + + + Reserved + + +
    +
    + + +
    + + Cost + $ + + + + Base Price + $ + + + + Tax + % + + + + Price + $ + + +
    + + +
    + + Weight + lbs. + + + + + Tags +
    + +
    +
    + + +
    + +
    + +
    + + + + + {{tag.title}} + + + + + +
    + + + + + + +
    +     +
    + +
    Create "{{newTagInput.value}}"
    +
    +
    +
    + +
    + +
    + +
    + +
    + +
    +
    + + + Product updated + + + + An error occurred, try again! + +
    + +
    +
    + +
    +
    +
    +     +
    There are no products!
     diff --git a/src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.ts b/src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.ts index 6912826d..5c50c301 100644 --- a/src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.ts +++ b/src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.ts @@ -12,6 +12,26 @@ import { InventoryService } from 'app/modules/admin/apps/ecommerce/inventory/inv @Component({ selector : 'inventory-list', templateUrl : './inventory.component.html', + styles : [ + /* language=SCSS */ + ` + .inventory-grid { + grid-template-columns: 48px auto 40px; + + @screen sm { + grid-template-columns: 48px auto 112px 72px; + } + + @screen md { + grid-template-columns: 48px 112px auto 112px 72px; + } + + @screen lg { + grid-template-columns: 48px 112px auto 112px 96px 96px 72px; + } + } + ` + ], encapsulation : ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations : fuseAnimations @@ -29,8 +49,6 @@ export class InventoryListComponent implements OnInit, AfterViewInit, OnDestroy flashMessage: 'success' | 'error' | null = null; isLoading: boolean = false; pagination: InventoryPagination; - productsCount: number = 0; - productsTableColumns: string[] = ['sku', 'name', 'price', 'stock', 'active', 'details']; searchInputControl: FormControl = new FormControl(); selectedProduct: InventoryProduct | null = null; selectedProductForm: FormGroup; @@ -121,16 +139,6 @@ export class InventoryListComponent implements OnInit, AfterViewInit, OnDestroy // Get the products this.products$ = this._inventoryService.products$; - this._inventoryService.products$ - .pipe(takeUntil(this._unsubscribeAll)) - .subscribe((products: InventoryProduct[]) => { - - // Update the counts - this.productsCount = products.length; - - // Mark for check - this._changeDetectorRef.markForCheck(); - }); // Get the tags this._inventoryService.tags$ @@ -179,28 +187,41 @@ export class InventoryListComponent implements OnInit, AfterViewInit, OnDestroy */ ngAfterViewInit(): void { - // If the user changes the sort order... - this._sort.sortChange - .pipe(takeUntil(this._unsubscribeAll)) - .subscribe(() => { - // Reset back to the first page - this._paginator.pageIndex = 0; - - // Close the details - this.closeDetails(); + if ( this._sort && this._paginator ) + { + // Set the initial sort + this._sort.sort({ + id : 'name', + start : 'asc', + disableClear: true }); - // Get products if sort or page changes - merge(this._sort.sortChange, this._paginator.page).pipe( - switchMap(() => { - this.closeDetails(); - this.isLoading = true; - return this._inventoryService.getProducts(this._paginator.pageIndex, this._paginator.pageSize, this._sort.active, this._sort.direction); - }), - map(() => { - this.isLoading = false; - }) - ).subscribe(); + // Mark for check + this._changeDetectorRef.markForCheck(); + + // If the user changes the sort order... + this._sort.sortChange + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe(() => { + // Reset back to the first page + this._paginator.pageIndex = 0; + + // Close the details + this.closeDetails(); + }); + + // Get products if sort or page changes + merge(this._sort.sortChange, this._paginator.page).pipe( + switchMap(() => { + this.closeDetails(); + this.isLoading = true; + return this._inventoryService.getProducts(this._paginator.pageIndex, this._paginator.pageSize, this._sort.active, this._sort.direction); + }), + map(() => { + this.isLoading = false; + }) + ).subscribe(); + } } /** From 5b78a68116122dbc7d734cc13228c8537ce259bb Mon Sep 17 00:00:00 2001 From: sercan Date: Mon, 14 Jun 2021 12:22:51 +0300 Subject: [PATCH 18/21] (apps/ecommerce/inventory) Better image containment on row details --- .../apps/ecommerce/inventory/list/inventory.component.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.html b/src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.html index 68966ec8..8ef93495 100644 --- a/src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.html +++ b/src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.html @@ -193,10 +193,10 @@
    -
    +
    From 403a949d4af1b7b17693b3bb65798e7899c17e73 Mon Sep 17 00:00:00 2001 From: sercan Date: Mon, 14 Jun 2021 12:25:04 +0300 Subject: [PATCH 19/21] (apps/ecommerce/inventory) Small mobile experience tweaks --- .../apps/ecommerce/inventory/list/inventory.component.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.html b/src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.html index 8ef93495..66d04191 100644 --- a/src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.html +++ b/src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.html @@ -191,7 +191,7 @@
    -
    +
    @@ -204,7 +204,7 @@