menu is modified
This commit is contained in:
parent
eab09924ba
commit
61480e2370
|
|
@ -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'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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: '사용자'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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: 'settings-dashboard',
|
||||
title: 'Dashboard',
|
||||
translate: 'navigation.settings.dashboard.title',
|
||||
type: 'item',
|
||||
icon: 'dashboard',
|
||||
url: '/settings/dashboard'
|
||||
},
|
||||
id: 'users',
|
||||
title: 'Users',
|
||||
icon: 'group',
|
||||
translate: 'navigation.users.title',
|
||||
type: 'collapsable',
|
||||
children: [
|
||||
{
|
||||
id: 'settings-alarm',
|
||||
title: 'Alarm',
|
||||
translate: 'navigation.settings.alarm.title',
|
||||
id: 'users-user',
|
||||
title: 'User',
|
||||
translate: 'navigation.users.user.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'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
23
src/app/pages/dashboard/dashboard-routing.module.ts
Normal file
23
src/app/pages/dashboard/dashboard-routing.module.ts
Normal file
|
|
@ -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 {}
|
||||
10
src/app/pages/dashboard/dashboard.module.ts
Normal file
10
src/app/pages/dashboard/dashboard.module.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { DashboardRoutingModule } from './dashboard-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [DashboardRoutingModule],
|
||||
declarations: [],
|
||||
providers: []
|
||||
})
|
||||
export class DashboardModule {}
|
||||
1
src/app/pages/dashboard/main/component/index.ts
Normal file
1
src/app/pages/dashboard/main/component/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export const COMPONENTS = [];
|
||||
|
|
@ -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 {}
|
||||
46
src/app/pages/dashboard/main/dashboard-main.module.ts
Normal file
46
src/app/pages/dashboard/main/dashboard-main.module.ts
Normal file
|
|
@ -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 {}
|
||||
1
src/app/pages/dashboard/media/component/index.ts
Normal file
1
src/app/pages/dashboard/media/component/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export const COMPONENTS = [];
|
||||
|
|
@ -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 {}
|
||||
46
src/app/pages/dashboard/media/dashboard-media.module.ts
Normal file
46
src/app/pages/dashboard/media/dashboard-media.module.ts
Normal file
|
|
@ -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 {}
|
||||
1
src/app/pages/dashboard/user/component/index.ts
Normal file
1
src/app/pages/dashboard/user/component/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export const COMPONENTS = [];
|
||||
|
|
@ -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 {}
|
||||
46
src/app/pages/dashboard/user/dashboard-user.module.ts
Normal file
46
src/app/pages/dashboard/user/dashboard-user.module.ts
Normal file
|
|
@ -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 {}
|
||||
|
|
@ -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'
|
||||
|
|
|
|||
125
src/app/pages/users/user/component/detail.component.html
Normal file
125
src/app/pages/users/user/component/detail.component.html
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
<div id="user" class="page-layout carded fullwidth inner-scroll">
|
||||
<!-- TOP BACKGROUND -->
|
||||
<div class="top-bg accent"></div>
|
||||
<!-- / TOP BACKGROUND -->
|
||||
|
||||
<!-- CENTER -->
|
||||
<div class="center">
|
||||
<!-- HEADER -->
|
||||
<div
|
||||
class="header accent"
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="space-between center"
|
||||
>
|
||||
<!-- APP TITLE -->
|
||||
<div fxLayout="row" fxLayoutAlign="start center">
|
||||
<button mat-icon-button class="mr-16" [routerLink]="'/user/users'">
|
||||
<mat-icon>arrow_back</mat-icon>
|
||||
</button>
|
||||
|
||||
<div
|
||||
fxLayout="column"
|
||||
fxLayoutAlign="start start"
|
||||
[@animate]="{ value: '*', params: { delay: '100ms', x: '-25px' } }"
|
||||
>
|
||||
<div class="h2">User {{ user.username }}</div>
|
||||
<div class="subtitle secondary-text">
|
||||
<span>{{ user.nickname }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- / APP TITLE -->
|
||||
|
||||
<button
|
||||
mat-raised-button
|
||||
class="save-product-button"
|
||||
[disabled]="userForm.invalid"
|
||||
*ngIf="!user.id"
|
||||
>
|
||||
<span>ADD</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
mat-raised-button
|
||||
class="save-product-button"
|
||||
[disabled]="userForm.invalid || userForm.pristine"
|
||||
*ngIf="user.id"
|
||||
>
|
||||
<span>SAVE</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- / HEADER -->
|
||||
|
||||
<!-- CONTENT CARD -->
|
||||
<div class="content-card">
|
||||
<!-- CONTENT -->
|
||||
<div class="content">
|
||||
<mat-tab-group fxLayout="column" fxFlex>
|
||||
<mat-tab label="User Details">
|
||||
<div class="tab-content p-24" fusePerfectScrollbar>
|
||||
<form
|
||||
name="userForm"
|
||||
[formGroup]="userForm"
|
||||
class="product w-100-p"
|
||||
fxLayout="column"
|
||||
fxFlex
|
||||
>
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
floatLabel="always"
|
||||
class="w-100-p"
|
||||
>
|
||||
<mat-label>Username</mat-label>
|
||||
<input
|
||||
matInput
|
||||
placeholder="Username"
|
||||
name="username"
|
||||
formControlName="username"
|
||||
/>
|
||||
<span matPrefix> </span>
|
||||
</mat-form-field>
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
floatLabel="always"
|
||||
class="w-100-p"
|
||||
>
|
||||
<mat-label>Password</mat-label>
|
||||
<input
|
||||
matInput
|
||||
placeholder="Password"
|
||||
name="password"
|
||||
formControlName="password"
|
||||
type="password"
|
||||
/>
|
||||
<span matPrefix> </span>
|
||||
</mat-form-field>
|
||||
<mat-form-field
|
||||
appearance="outline"
|
||||
floatLabel="always"
|
||||
class="w-100-p"
|
||||
>
|
||||
<mat-label>Password Confirm</mat-label>
|
||||
<input
|
||||
matInput
|
||||
placeholder="Password confirm"
|
||||
name="password_confirm"
|
||||
formControlName="password_confirm"
|
||||
type="password"
|
||||
/>
|
||||
<span matPrefix> </span>
|
||||
</mat-form-field>
|
||||
</form>
|
||||
</div>
|
||||
</mat-tab>
|
||||
|
||||
<mat-tab label="Products" *ngIf="user.id">
|
||||
<div class="products tab-content p-24" fusePerfectScrollbar></div>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</div>
|
||||
<!-- / CONTENT -->
|
||||
</div>
|
||||
<!-- / CONTENT CARD -->
|
||||
</div>
|
||||
<!-- / CENTER -->
|
||||
</div>
|
||||
397
src/app/pages/users/user/component/detail.component.scss
Normal file
397
src/app/pages/users/user/component/detail.component.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
90
src/app/pages/users/user/component/detail.component.ts
Normal file
90
src/app/pages/users/user/component/detail.component.ts
Normal file
|
|
@ -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<any>;
|
||||
|
||||
/**
|
||||
* 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);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
import { DetailComponent } from './detail.component';
|
||||
import { ListComponent } from './list.component';
|
||||
|
||||
export const COMPONENTS = [ListComponent];
|
||||
export const COMPONENTS = [DetailComponent, ListComponent];
|
||||
|
|
|
|||
|
|
@ -146,7 +146,7 @@
|
|||
*matRowDef="let user; columns: displayedColumns"
|
||||
class="user"
|
||||
matRipple
|
||||
[routerLink]="'/apps/e-commerce/users/' + user.id"
|
||||
[routerLink]="'/user/users/' + user.id"
|
||||
>
|
||||
</mat-row>
|
||||
</mat-table>
|
||||
|
|
|
|||
31
src/app/pages/users/user/resolver/detail.resolver.ts
Normal file
31
src/app/pages/users/user/resolver/detail.resolver.ts
Normal file
|
|
@ -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<User> {
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private userService: UserService) {}
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*/
|
||||
resolve(
|
||||
route: ActivatedRouteSnapshot,
|
||||
state: RouterStateSnapshot
|
||||
): Observable<User> | Promise<User> | any {
|
||||
const id = route.params.id;
|
||||
if ('0' === id) {
|
||||
return of({});
|
||||
}
|
||||
return this.userService.getUser(route.params.id);
|
||||
}
|
||||
}
|
||||
3
src/app/pages/users/user/resolver/index.ts
Normal file
3
src/app/pages/users/user/resolver/index.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
import { DetailResolver } from './detail.resolver';
|
||||
|
||||
export const RESOLVERS = [DetailResolver];
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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[];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,4 +18,8 @@ export class UserService {
|
|||
public getUsers(): Observable<Page<User>> {
|
||||
return this.httpClient.get<Page<User>>(`${this.apiBaseUrl}/users`, {});
|
||||
}
|
||||
|
||||
public getUser(id: number): Observable<User> {
|
||||
return this.httpClient.get<User>(`${this.apiBaseUrl}/users/${id}`, {});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user