From 61480e2370c8af67a61d152911af2548a64c8386 Mon Sep 17 00:00:00 2001 From: Richard Park Date: Mon, 19 Aug 2019 18:10:30 +0900 Subject: [PATCH] menu is modified --- src/app/navigation/i18n/en.ts | 45 +- src/app/navigation/i18n/ko.ts | 45 +- src/app/navigation/navigation.ts | 85 ++-- .../dashboard/dashboard-routing.module.ts | 23 + src/app/pages/dashboard/dashboard.module.ts | 10 + .../pages/dashboard/main/component/index.ts | 1 + .../main/dashboard-main-routing.module.ts | 10 + .../dashboard/main/dashboard-main.module.ts | 46 ++ .../pages/dashboard/media/component/index.ts | 1 + .../media/dashboard-media-routing.module.ts | 10 + .../dashboard/media/dashboard-media.module.ts | 46 ++ .../pages/dashboard/user/component/index.ts | 1 + .../user/dashboard-user-routing.module.ts | 10 + .../dashboard/user/dashboard-user.module.ts | 46 ++ src/app/pages/pages-routing.module.ts | 4 + .../user/component/detail.component.html | 125 ++++++ .../user/component/detail.component.scss | 397 ++++++++++++++++++ .../users/user/component/detail.component.ts | 90 ++++ src/app/pages/users/user/component/index.ts | 3 +- .../users/user/component/list.component.html | 2 +- .../users/user/resolver/detail.resolver.ts | 31 ++ src/app/pages/users/user/resolver/index.ts | 3 + .../pages/users/user/user-routing.module.ts | 9 + src/app/pages/users/user/user.module.ts | 7 +- src/modules/common/data/model/audit.ts | 8 +- src/modules/user/model/user.model.ts | 14 +- src/modules/user/service/user.service.ts | 4 + 27 files changed, 956 insertions(+), 120 deletions(-) create mode 100644 src/app/pages/dashboard/dashboard-routing.module.ts create mode 100644 src/app/pages/dashboard/dashboard.module.ts create mode 100644 src/app/pages/dashboard/main/component/index.ts create mode 100644 src/app/pages/dashboard/main/dashboard-main-routing.module.ts create mode 100644 src/app/pages/dashboard/main/dashboard-main.module.ts create mode 100644 src/app/pages/dashboard/media/component/index.ts create mode 100644 src/app/pages/dashboard/media/dashboard-media-routing.module.ts create mode 100644 src/app/pages/dashboard/media/dashboard-media.module.ts create mode 100644 src/app/pages/dashboard/user/component/index.ts create mode 100644 src/app/pages/dashboard/user/dashboard-user-routing.module.ts create mode 100644 src/app/pages/dashboard/user/dashboard-user.module.ts create mode 100644 src/app/pages/users/user/component/detail.component.html create mode 100644 src/app/pages/users/user/component/detail.component.scss create mode 100644 src/app/pages/users/user/component/detail.component.ts create mode 100644 src/app/pages/users/user/resolver/detail.resolver.ts create mode 100644 src/app/pages/users/user/resolver/index.ts diff --git a/src/app/navigation/i18n/en.ts b/src/app/navigation/i18n/en.ts index 384cbef..6473637 100644 --- a/src/app/navigation/i18n/en.ts +++ b/src/app/navigation/i18n/en.ts @@ -4,41 +4,26 @@ export const locale = { navigation: { dashboard: { title: 'Dashboard', - ucap: { - title: 'UCAP' + main: { + title: 'Main' }, - mariadb: { - title: 'MariaDB' + media: { + title: 'Media' + }, + user: { + title: 'User' } }, - statistics: { - title: 'Statistics', - system: { - title: 'System' - }, - process: { - title: 'Process' - }, - connections: { - title: 'Connections' - }, - messages: { - title: 'Messages' + medias: { + title: 'Medias', + media: { + title: 'Media' } }, - settings: { - title: 'Settings', - general: { - title: 'General' - }, - dashboard: { - title: 'Dashboard' - }, - alarm: { - title: 'Alarm' - }, - etc: { - title: 'ETC' + users: { + title: 'Users', + user: { + title: 'User' } } } diff --git a/src/app/navigation/i18n/ko.ts b/src/app/navigation/i18n/ko.ts index 2b0bfac..5ba7b6b 100644 --- a/src/app/navigation/i18n/ko.ts +++ b/src/app/navigation/i18n/ko.ts @@ -4,41 +4,26 @@ export const locale = { navigation: { dashboard: { title: '데시보드', - ucap: { - title: 'UCAP' + main: { + title: '메인' }, - mariadb: { - title: 'MariaDB' + media: { + title: '미디어' + }, + user: { + title: '사용자' } }, - statistics: { - title: '통계', - system: { - title: '시스템' - }, - process: { - title: '프로세스' - }, - connections: { - title: '접속' - }, - messages: { - title: '메시지' + medias: { + title: '미디어 관리', + media: { + title: '미디어' } }, - settings: { - title: '설정', - general: { - title: '일반' - }, - dashboard: { - title: '데시보드' - }, - alarm: { - title: '알림' - }, - etc: { - title: '기타' + users: { + title: '사용자 관리', + user: { + title: '사용자' } } } diff --git a/src/app/navigation/navigation.ts b/src/app/navigation/navigation.ts index a4e41a0..58e9beb 100644 --- a/src/app/navigation/navigation.ts +++ b/src/app/navigation/navigation.ts @@ -9,69 +9,62 @@ export const navigation: FuseNavigation[] = [ icon: 'dashboard', children: [ { - id: 'dashboard-ucap', - title: 'UCAP', - translate: 'navigation.dashboard.ucap.title', + id: 'dashboard-main', + title: 'Main', + translate: 'navigation.dashboard.main.title', type: 'item', icon: 'email', url: '/dashboard/main' }, { - id: 'dashboard-mariadb', - title: 'MariaDB', - translate: 'navigation.dashboard.mariadb.title', + id: 'dashboard-media', + title: 'Media', + translate: 'navigation.dashboard.media.title', type: 'item', icon: 'email', - url: '/dashboard/mariadb' + url: '/dashboard/media' + }, + { + id: 'dashboard-user', + title: 'User', + translate: 'navigation.dashboard.user.title', + type: 'item', + icon: 'group', + url: '/dashboard/user' } ] }, { - id: 'statistics', - title: 'Statistics', - icon: 'insert_chart', - translate: 'navigation.statistics.title', - type: 'item', - url: '/statistics' - }, - { - id: 'settings', - title: 'Settings', - icon: 'settings', - translate: 'navigation.settings.title', + id: 'medias', + title: 'Medias', + icon: 'music_video', + translate: 'navigation.medias.title', type: 'collapsable', children: [ { - id: 'settings-general', - title: 'General', - translate: 'navigation.settings.general.title', + id: 'medias-media', + title: 'Media', + translate: 'navigation.medias.media.title', type: 'item', - icon: 'settings_applications', - url: '/settings/general' - }, + icon: 'music_video', + url: '/media/medias' + } + ] + }, + { + id: 'users', + title: 'Users', + icon: 'group', + translate: 'navigation.users.title', + type: 'collapsable', + children: [ { - id: 'settings-dashboard', - title: 'Dashboard', - translate: 'navigation.settings.dashboard.title', + id: 'users-user', + title: 'User', + translate: 'navigation.users.user.title', type: 'item', - icon: 'dashboard', - url: '/settings/dashboard' - }, - { - id: 'settings-alarm', - title: 'Alarm', - translate: 'navigation.settings.alarm.title', - type: 'item', - icon: 'alarm', - url: '/settings/alarm' - }, - { - id: 'settings-etc', - title: 'Etc', - translate: 'navigation.settings.etc.title', - type: 'item', - icon: 'subject', - url: '/settings/etc' + icon: 'group', + url: '/user/users' } ] } diff --git a/src/app/pages/dashboard/dashboard-routing.module.ts b/src/app/pages/dashboard/dashboard-routing.module.ts new file mode 100644 index 0000000..4135b5f --- /dev/null +++ b/src/app/pages/dashboard/dashboard-routing.module.ts @@ -0,0 +1,23 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +const routes: Routes = [ + { + path: 'main', + loadChildren: './main/dashboard-main.module#DashboardMainModule' + }, + { + path: 'media', + loadChildren: './media/dashboard-media.module#DashboardMediaModule' + }, + { + path: 'user', + loadChildren: './user/dashboard-user.module#DashboardUserModule' + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class DashboardRoutingModule {} diff --git a/src/app/pages/dashboard/dashboard.module.ts b/src/app/pages/dashboard/dashboard.module.ts new file mode 100644 index 0000000..85d08e9 --- /dev/null +++ b/src/app/pages/dashboard/dashboard.module.ts @@ -0,0 +1,10 @@ +import { NgModule } from '@angular/core'; + +import { DashboardRoutingModule } from './dashboard-routing.module'; + +@NgModule({ + imports: [DashboardRoutingModule], + declarations: [], + providers: [] +}) +export class DashboardModule {} diff --git a/src/app/pages/dashboard/main/component/index.ts b/src/app/pages/dashboard/main/component/index.ts new file mode 100644 index 0000000..c2ef00c --- /dev/null +++ b/src/app/pages/dashboard/main/component/index.ts @@ -0,0 +1 @@ +export const COMPONENTS = []; diff --git a/src/app/pages/dashboard/main/dashboard-main-routing.module.ts b/src/app/pages/dashboard/main/dashboard-main-routing.module.ts new file mode 100644 index 0000000..141195b --- /dev/null +++ b/src/app/pages/dashboard/main/dashboard-main-routing.module.ts @@ -0,0 +1,10 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +const routes: Routes = []; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class DashboardMainRoutingModule {} diff --git a/src/app/pages/dashboard/main/dashboard-main.module.ts b/src/app/pages/dashboard/main/dashboard-main.module.ts new file mode 100644 index 0000000..9a7f54d --- /dev/null +++ b/src/app/pages/dashboard/main/dashboard-main.module.ts @@ -0,0 +1,46 @@ +import { NgModule } from '@angular/core'; + +import { MatButtonModule } from '@angular/material/button'; +import { MatExpansionModule } from '@angular/material/expansion'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatIconModule } from '@angular/material/icon'; +import { MatInputModule } from '@angular/material/input'; +import { MatMenuModule } from '@angular/material/menu'; +import { MatPaginatorModule } from '@angular/material/paginator'; +import { MatSelectModule } from '@angular/material/select'; +import { MatSortModule } from '@angular/material/sort'; +import { MatTableModule } from '@angular/material/table'; +import { MatTabsModule } from '@angular/material/tabs'; +import { MatCheckboxModule } from '@angular/material/checkbox'; + +import { FuseSharedModule } from 'src/@fuse/shared.module'; +import { FuseWidgetModule } from 'src/@fuse/components/widget/widget.module'; + +import { DashboardMainRoutingModule } from './dashboard-main-routing.module'; + +import { COMPONENTS } from './component'; + +@NgModule({ + imports: [ + MatButtonModule, + MatExpansionModule, + MatFormFieldModule, + MatIconModule, + MatInputModule, + MatMenuModule, + MatPaginatorModule, + MatSelectModule, + MatSortModule, + MatTableModule, + MatTabsModule, + MatCheckboxModule, + + FuseSharedModule, + FuseWidgetModule, + + DashboardMainRoutingModule + ], + declarations: [...COMPONENTS], + providers: [] +}) +export class DashboardMainModule {} diff --git a/src/app/pages/dashboard/media/component/index.ts b/src/app/pages/dashboard/media/component/index.ts new file mode 100644 index 0000000..c2ef00c --- /dev/null +++ b/src/app/pages/dashboard/media/component/index.ts @@ -0,0 +1 @@ +export const COMPONENTS = []; diff --git a/src/app/pages/dashboard/media/dashboard-media-routing.module.ts b/src/app/pages/dashboard/media/dashboard-media-routing.module.ts new file mode 100644 index 0000000..6708b54 --- /dev/null +++ b/src/app/pages/dashboard/media/dashboard-media-routing.module.ts @@ -0,0 +1,10 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +const routes: Routes = []; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class DashboardMediaRoutingModule {} diff --git a/src/app/pages/dashboard/media/dashboard-media.module.ts b/src/app/pages/dashboard/media/dashboard-media.module.ts new file mode 100644 index 0000000..d66f211 --- /dev/null +++ b/src/app/pages/dashboard/media/dashboard-media.module.ts @@ -0,0 +1,46 @@ +import { NgModule } from '@angular/core'; + +import { MatButtonModule } from '@angular/material/button'; +import { MatExpansionModule } from '@angular/material/expansion'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatIconModule } from '@angular/material/icon'; +import { MatInputModule } from '@angular/material/input'; +import { MatMenuModule } from '@angular/material/menu'; +import { MatPaginatorModule } from '@angular/material/paginator'; +import { MatSelectModule } from '@angular/material/select'; +import { MatSortModule } from '@angular/material/sort'; +import { MatTableModule } from '@angular/material/table'; +import { MatTabsModule } from '@angular/material/tabs'; +import { MatCheckboxModule } from '@angular/material/checkbox'; + +import { FuseSharedModule } from 'src/@fuse/shared.module'; +import { FuseWidgetModule } from 'src/@fuse/components/widget/widget.module'; + +import { DashboardMediaRoutingModule } from './dashboard-media-routing.module'; + +import { COMPONENTS } from './component'; + +@NgModule({ + imports: [ + MatButtonModule, + MatExpansionModule, + MatFormFieldModule, + MatIconModule, + MatInputModule, + MatMenuModule, + MatPaginatorModule, + MatSelectModule, + MatSortModule, + MatTableModule, + MatTabsModule, + MatCheckboxModule, + + FuseSharedModule, + FuseWidgetModule, + + DashboardMediaRoutingModule + ], + declarations: [...COMPONENTS], + providers: [] +}) +export class DashboardMediaModule {} diff --git a/src/app/pages/dashboard/user/component/index.ts b/src/app/pages/dashboard/user/component/index.ts new file mode 100644 index 0000000..c2ef00c --- /dev/null +++ b/src/app/pages/dashboard/user/component/index.ts @@ -0,0 +1 @@ +export const COMPONENTS = []; diff --git a/src/app/pages/dashboard/user/dashboard-user-routing.module.ts b/src/app/pages/dashboard/user/dashboard-user-routing.module.ts new file mode 100644 index 0000000..62fd106 --- /dev/null +++ b/src/app/pages/dashboard/user/dashboard-user-routing.module.ts @@ -0,0 +1,10 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +const routes: Routes = []; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class DashboardUserRoutingModule {} diff --git a/src/app/pages/dashboard/user/dashboard-user.module.ts b/src/app/pages/dashboard/user/dashboard-user.module.ts new file mode 100644 index 0000000..298cb39 --- /dev/null +++ b/src/app/pages/dashboard/user/dashboard-user.module.ts @@ -0,0 +1,46 @@ +import { NgModule } from '@angular/core'; + +import { MatButtonModule } from '@angular/material/button'; +import { MatExpansionModule } from '@angular/material/expansion'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatIconModule } from '@angular/material/icon'; +import { MatInputModule } from '@angular/material/input'; +import { MatMenuModule } from '@angular/material/menu'; +import { MatPaginatorModule } from '@angular/material/paginator'; +import { MatSelectModule } from '@angular/material/select'; +import { MatSortModule } from '@angular/material/sort'; +import { MatTableModule } from '@angular/material/table'; +import { MatTabsModule } from '@angular/material/tabs'; +import { MatCheckboxModule } from '@angular/material/checkbox'; + +import { FuseSharedModule } from 'src/@fuse/shared.module'; +import { FuseWidgetModule } from 'src/@fuse/components/widget/widget.module'; + +import { DashboardUserRoutingModule } from './dashboard-user-routing.module'; + +import { COMPONENTS } from './component'; + +@NgModule({ + imports: [ + MatButtonModule, + MatExpansionModule, + MatFormFieldModule, + MatIconModule, + MatInputModule, + MatMenuModule, + MatPaginatorModule, + MatSelectModule, + MatSortModule, + MatTableModule, + MatTabsModule, + MatCheckboxModule, + + FuseSharedModule, + FuseWidgetModule, + + DashboardUserRoutingModule + ], + declarations: [...COMPONENTS], + providers: [] +}) +export class DashboardUserModule {} diff --git a/src/app/pages/pages-routing.module.ts b/src/app/pages/pages-routing.module.ts index 2bb8ad3..ae14c1c 100644 --- a/src/app/pages/pages-routing.module.ts +++ b/src/app/pages/pages-routing.module.ts @@ -6,6 +6,10 @@ const routes: Routes = [ path: 'accounts', loadChildren: './accounts/accounts.module#AccountsModule' }, + { + path: 'dashboard', + loadChildren: './dashboard/dashboard.module#DashboardModule' + }, { path: 'user', loadChildren: './users/users.module#UsersModule' diff --git a/src/app/pages/users/user/component/detail.component.html b/src/app/pages/users/user/component/detail.component.html new file mode 100644 index 0000000..0d3018d --- /dev/null +++ b/src/app/pages/users/user/component/detail.component.html @@ -0,0 +1,125 @@ +
+ +
+ + + +
+ +
+ +
+ + +
+
User {{ user.username }}
+
+ {{ user.nickname }} +
+
+
+ + + + + +
+ + + +
+ +
+ + +
+
+ + Username + +   + + + Password + +   + + + Password Confirm + +   + +
+
+ + + +
+ + +
+ +
+ +
+ +
diff --git a/src/app/pages/users/user/component/detail.component.scss b/src/app/pages/users/user/component/detail.component.scss new file mode 100644 index 0000000..8a9348a --- /dev/null +++ b/src/app/pages/users/user/component/detail.component.scss @@ -0,0 +1,397 @@ +@import "src/@fuse/scss/fuse"; + +#user { + + .header { + + .subtitle { + margin: 6px 0 0 0; + } + } + + .content { + + .mat-tab-group, + .mat-tab-body-wrapper, + .tab-content { + flex: 1 1 auto; + max-width: 100%; + } + + .tab-content { + + &.products { + + .product-row { + cursor: pointer; + } + } + + &.invoice { + + #invoice { + + &.compact { + padding: 0; + overflow: auto; + -webkit-overflow-scrolling: touch; + + .invoice-container { + padding: 16px; + + .card { + width: 1020px; + min-width: 1020px; + max-width: 1020px; + padding: 64px 88px; + overflow: hidden; + background: #FFFFFF; + color: rgba(0, 0, 0, 0.87); + @include mat-elevation(7); + + .header { + + .invoice-date { + font-size: 14px; + color: rgba(0, 0, 0, 0.54); + margin-bottom: 32px; + } + + .client { + + .invoice-number { + font-size: 18px; + padding-bottom: 2px; + + .title { + color: rgba(0, 0, 0, 0.54); + } + + .number { + padding-left: 6px; + } + } + + .due-date { + font-size: 18px; + padding-bottom: 16px; + + .title { + color: rgba(0, 0, 0, 0.54); + } + + .date { + padding-left: 6px; + } + } + + .info { + color: rgba(0, 0, 0, 0.54); + line-height: 22px; + } + } + + .issuer { + margin-right: -88px; + padding-right: 66px; + + .logo { + width: 96px; + padding: 0 8px; + border-right: 1px solid rgba(255, 255, 255, 0.7); + } + + .info { + padding: 16px; + } + } + } + + .content { + + .invoice-table { + margin-top: 64px; + font-size: 15px; + + thead { + + tr { + + th { + + &:first-child { + padding-left: 8px; + } + + &:last-child { + padding-right: 8px; + } + } + } + } + + tbody { + + tr { + + td { + border-color: rgba(0, 0, 0, 0.12); + + &:first-child { + padding-left: 8px; + } + + &:last-child { + padding-right: 8px; + } + } + } + } + + .title { + font-size: 16px; + } + + .detail { + margin-top: 8px; + font-size: 12px; + color: rgba(0, 0, 0, 0.54); + max-width: 360px; + } + } + + .invoice-table-footer { + margin: 32px 0 72px 0; + + tr { + + td { + text-align: right; + font-size: 16px; + font-weight: 600; + color: rgba(0, 0, 0, 0.54); + border-bottom: none; + padding: 4px 8px; + + &:first-child { + text-align: left; + } + } + + &.discount { + + td { + padding-bottom: 32px; + } + } + + &.total { + + td { + padding: 24px 8px; + border-top: 1px solid rgba(0, 0, 0, 0.12); + font-size: 35px; + font-weight: 300; + color: rgba(0, 0, 0, 1); + } + } + } + } + } + + .footer { + + .note { + font-size: 15px; + font-weight: 600; + margin-bottom: 24px; + } + + // IE10 fix + .logo, .small-note { + -ms-flex: 0 1 auto; + } + + .logo { + width: 32px; + min-width: 32px; + margin-right: 24px; + } + + .small-note { + font-size: 12px; + font-weight: 600; + color: rgba(0, 0, 0, 0.54); + line-height: 18px; + } + } + } + } + } + } + + /* PRINT STYLES */ + @media print { + + /* Invoice Specific Styles */ + #invoice { + + &.compact { + + .invoice-container { + padding: 0; + + .card { + width: 100%; + min-width: 0; + background: none; + padding: 0; + box-shadow: none; + + .header { + + .invoice-date { + margin-bottom: 16pt; + } + + .issuer { + padding-right: 0; + margin-right: 0; + } + } + + .content { + + .invoice-table { + margin-top: 16pt; + + thead { + + tr { + + th { + font-size: 10pt; + max-width: 60pt; + + &:first-child { + padding-left: 0; + } + + &:last-child { + padding-right: 0; + } + } + } + } + + tbody { + + tr { + + td { + + &:first-child { + padding-left: 0; + } + + &:last-child { + padding-right: 0; + } + } + } + } + + .title { + font-size: 10pt; + } + + .detail { + margin-top: 4pt; + font-size: 9pt; + max-width: none; + } + } + + .invoice-table-footer { + margin: 16pt 0; + + tr { + + td { + font-size: 13pt; + padding: 4pt 4pt; + + &:first-child { + text-align: left; + padding-left: 0; + } + + &:last-child { + padding-right: 0; + } + } + + &.discount { + + td { + padding-bottom: 16pt; + } + } + + &.total { + + td { + padding: 16pt 4pt 0 4pt; + font-size: 16pt; + + &:first-child { + padding-left: 0; + } + + &:last-child { + padding-right: 0; + } + } + } + } + } + } + + .footer { + + .note { + font-size: 10pt; + margin-bottom: 8pt; + } + + .logo { + margin-right: 8pt; + } + + .small-note { + font-size: 8pt; + line-height: normal; + } + } + } + } + } + } + } + } + } + + .mat-tab-body-content { + display: flex; + } + + .mat-tab-label { + height: 64px; + } + + table { + table-layout: fixed; + } + } + +} diff --git a/src/app/pages/users/user/component/detail.component.ts b/src/app/pages/users/user/component/detail.component.ts new file mode 100644 index 0000000..8a1fd57 --- /dev/null +++ b/src/app/pages/users/user/component/detail.component.ts @@ -0,0 +1,90 @@ +import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { FormBuilder, FormGroup } from '@angular/forms'; +import { Subject } from 'rxjs'; +import { takeUntil, map } from 'rxjs/operators'; + +import { fuseAnimations } from 'src/@fuse/animations'; +import { User } from 'src/modules/user/model/user.model'; +import { UserService } from 'src/modules/user/service/user.service'; +import { ActivatedRoute } from '@angular/router'; + +@Component({ + selector: 'app-pages-users-user-detail', + templateUrl: './detail.component.html', + styleUrls: ['./detail.component.scss'], + encapsulation: ViewEncapsulation.None, + animations: fuseAnimations +}) +export class DetailComponent implements OnInit, OnDestroy { + user: User; + userForm: FormGroup; + + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + */ + constructor( + private userService: UserService, + private activatedRoute: ActivatedRoute, + private formBuilder: FormBuilder + ) { + // Set the private defaults + this._unsubscribeAll = new Subject(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + this.activatedRoute.data.subscribe(data => { + this.user = data.user; + + this.initializeForm(); + }); + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Private methods + // ----------------------------------------------------------------------------------------------------- + initializeForm(): void { + this.userForm = this.formBuilder.group({ + username: this.user.username, + password: '', + password_confirm: '' + }); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + /** + * Update status + */ + updateStatus(): void { + // const newStatusId = Number.parseInt(this.statusForm.get('newStatus').value); + // if (!newStatusId) { + // return; + // } + // const newStatus = this.orderStatuses.find(status => { + // return status.id === newStatusId; + // }); + // newStatus['date'] = new Date().toString(); + // this.order.status.unshift(newStatus); + } +} diff --git a/src/app/pages/users/user/component/index.ts b/src/app/pages/users/user/component/index.ts index e6500a0..4f83cb3 100644 --- a/src/app/pages/users/user/component/index.ts +++ b/src/app/pages/users/user/component/index.ts @@ -1,3 +1,4 @@ +import { DetailComponent } from './detail.component'; import { ListComponent } from './list.component'; -export const COMPONENTS = [ListComponent]; +export const COMPONENTS = [DetailComponent, ListComponent]; diff --git a/src/app/pages/users/user/component/list.component.html b/src/app/pages/users/user/component/list.component.html index 0a7b9a7..4ee4863 100644 --- a/src/app/pages/users/user/component/list.component.html +++ b/src/app/pages/users/user/component/list.component.html @@ -146,7 +146,7 @@ *matRowDef="let user; columns: displayedColumns" class="user" matRipple - [routerLink]="'/apps/e-commerce/users/' + user.id" + [routerLink]="'/user/users/' + user.id" > diff --git a/src/app/pages/users/user/resolver/detail.resolver.ts b/src/app/pages/users/user/resolver/detail.resolver.ts new file mode 100644 index 0000000..da89019 --- /dev/null +++ b/src/app/pages/users/user/resolver/detail.resolver.ts @@ -0,0 +1,31 @@ +import { Injectable } from '@angular/core'; +import { + ActivatedRouteSnapshot, + Resolve, + RouterStateSnapshot +} from '@angular/router'; +import { Observable, of } from 'rxjs'; +import { User } from 'src/modules/user/model/user.model'; +import { UserService } from 'src/modules/user/service/user.service'; + +@Injectable() +export class DetailResolver implements Resolve { + /** + * Constructor + */ + constructor(private userService: UserService) {} + + /** + * Resolver + */ + resolve( + route: ActivatedRouteSnapshot, + state: RouterStateSnapshot + ): Observable | Promise | any { + const id = route.params.id; + if ('0' === id) { + return of({}); + } + return this.userService.getUser(route.params.id); + } +} diff --git a/src/app/pages/users/user/resolver/index.ts b/src/app/pages/users/user/resolver/index.ts new file mode 100644 index 0000000..d11a5dd --- /dev/null +++ b/src/app/pages/users/user/resolver/index.ts @@ -0,0 +1,3 @@ +import { DetailResolver } from './detail.resolver'; + +export const RESOLVERS = [DetailResolver]; diff --git a/src/app/pages/users/user/user-routing.module.ts b/src/app/pages/users/user/user-routing.module.ts index 361a9ac..cdf1870 100644 --- a/src/app/pages/users/user/user-routing.module.ts +++ b/src/app/pages/users/user/user-routing.module.ts @@ -1,11 +1,20 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { ListComponent } from './component/list.component'; +import { DetailComponent } from './component/detail.component'; +import { DetailResolver } from './resolver/detail.resolver'; const routes: Routes = [ { path: '', component: ListComponent + }, + { + path: ':id', + component: DetailComponent, + resolve: { + user: DetailResolver + } } ]; diff --git a/src/app/pages/users/user/user.module.ts b/src/app/pages/users/user/user.module.ts index 7a382f6..c5c7453 100644 --- a/src/app/pages/users/user/user.module.ts +++ b/src/app/pages/users/user/user.module.ts @@ -1,8 +1,10 @@ import { NgModule } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; +import { MatExpansionModule } from '@angular/material/expansion'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatIconModule } from '@angular/material/icon'; +import { MatInputModule } from '@angular/material/input'; import { MatMenuModule } from '@angular/material/menu'; import { MatPaginatorModule } from '@angular/material/paginator'; import { MatSelectModule } from '@angular/material/select'; @@ -17,12 +19,15 @@ import { FuseWidgetModule } from 'src/@fuse/components/widget/widget.module'; import { UserRoutingModule } from './user-routing.module'; import { COMPONENTS } from './component'; +import { RESOLVERS } from './resolver'; @NgModule({ imports: [ MatButtonModule, + MatExpansionModule, MatFormFieldModule, MatIconModule, + MatInputModule, MatMenuModule, MatPaginatorModule, MatSelectModule, @@ -37,6 +42,6 @@ import { COMPONENTS } from './component'; UserRoutingModule ], declarations: [...COMPONENTS], - providers: [] + providers: [...RESOLVERS] }) export class UserModule {} diff --git a/src/modules/common/data/model/audit.ts b/src/modules/common/data/model/audit.ts index 8e6d889..4c99a59 100644 --- a/src/modules/common/data/model/audit.ts +++ b/src/modules/common/data/model/audit.ts @@ -1,9 +1,9 @@ export interface DateAudit { - createdDate: Date; - lastModifiedDate: Date; + createdDate?: Date; + lastModifiedDate?: Date; } export interface UserDateAuditEntity extends DateAudit { - createdBy: number; - lastModifiedBy: number; + createdBy?: number; + lastModifiedBy?: number; } diff --git a/src/modules/user/model/user.model.ts b/src/modules/user/model/user.model.ts index 53c712b..869f2e6 100644 --- a/src/modules/user/model/user.model.ts +++ b/src/modules/user/model/user.model.ts @@ -2,12 +2,12 @@ import { Role } from './role.model'; import { DateAudit } from 'src/modules/common/data/model/audit'; export interface User extends DateAudit { - id: number; - username: string; + id?: number; + username?: string; password?: string; - nickname: string; - email: string; - block: boolean; - sendEmail: boolean; - roles: Role[]; + nickname?: string; + email?: string; + block?: boolean; + sendEmail?: boolean; + roles?: Role[]; } diff --git a/src/modules/user/service/user.service.ts b/src/modules/user/service/user.service.ts index b1ad877..7010534 100644 --- a/src/modules/user/service/user.service.ts +++ b/src/modules/user/service/user.service.ts @@ -18,4 +18,8 @@ export class UserService { public getUsers(): Observable> { return this.httpClient.get>(`${this.apiBaseUrl}/users`, {}); } + + public getUser(id: number): Observable { + return this.httpClient.get(`${this.apiBaseUrl}/users/${id}`, {}); + } }