diff --git a/src/app/app.theme.scss b/src/app/app.theme.scss index 21e3960..8ec2fa3 100644 --- a/src/app/app.theme.scss +++ b/src/app/app.theme.scss @@ -84,6 +84,7 @@ $typography: mat-typography-config( @import 'src/app/pages/accounts/component/signin.theme'; +@import 'src/app/pages/medias/media/medias-media.theme'; @import 'src/app/pages/users/user/user.theme'; // Define a mixin for easier access @@ -94,6 +95,7 @@ $typography: mat-typography-config( @include signin-theme($theme); + @include medias-media-theme($theme); @include users-user-theme($theme); } diff --git a/src/app/pages/medias/media/component/detail.component.html b/src/app/pages/medias/media/component/detail.component.html new file mode 100644 index 0000000..fc07b2e --- /dev/null +++ b/src/app/pages/medias/media/component/detail.component.html @@ -0,0 +1,207 @@ +
+ +
+ + + +
+ +
+ +
+ + + + +
+
+ {{ media.name }} +
+
+ New Media +
+
+ Media Detail +
+
+
+ + + + + +
+ + + +
+ +
+
+ + +
+ + Media Name + + + + + Media Description + + + + + Categories + + + + + + + + + + Tags + + + + + + + +
+ + + +
+ +
+ + + +
+ + +
+
+ +
+ +
+ +
diff --git a/src/app/pages/medias/media/component/detail.component.scss b/src/app/pages/medias/media/component/detail.component.scss new file mode 100644 index 0000000..ded7d59 --- /dev/null +++ b/src/app/pages/medias/media/component/detail.component.scss @@ -0,0 +1,62 @@ +#media { + .header { + .media-image { + overflow: hidden; + width: 56px; + min-width: 56px; + max-width: 56px; + height: 56px; + min-height: 56px; + max-height: 56px; + border-radius: 4px; + + img { + height: 100%; + width: auto; + max-width: none; + } + } + + .subtitle { + margin: 6px 0 0 0; + } + } + + .content { + .mat-tab-group, + .mat-tab-body-wrapper, + .tab-content { + flex: 1 1 auto; + max-width: 100%; + } + + .mat-tab-body-content { + display: flex; + } + + .mat-tab-label { + height: 64px; + } + + .media-image { + overflow: hidden; + width: 128px; + height: 128px; + margin-right: 16px; + margin-bottom: 16px; + border-radius: 4px; + + img { + height: 100%; + width: auto; + max-width: none; + } + } + + // Temporary prefix alignment fix + .mat-form-field-appearance-outline .mat-form-field-prefix, + .mat-form-field-appearance-outline .mat-form-field-suffix { + top: 0; + } + } +} diff --git a/src/app/pages/medias/media/component/detail.component.ts b/src/app/pages/medias/media/component/detail.component.ts new file mode 100644 index 0000000..c268b38 --- /dev/null +++ b/src/app/pages/medias/media/component/detail.component.ts @@ -0,0 +1,61 @@ +import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { FormBuilder, FormGroup } from '@angular/forms'; +import { Location } from '@angular/common'; +import { MatSnackBar } from '@angular/material/snack-bar'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; + +import { fuseAnimations } from 'src/@fuse/animations'; +import { FuseUtils } from 'src/@fuse/utils'; + +@Component({ + selector: 'app-pages-medias-media-detail', + templateUrl: './detail.component.html', + styleUrls: ['./detail.component.scss'], + encapsulation: ViewEncapsulation.None, + animations: fuseAnimations +}) +export class DetailComponent implements OnInit, OnDestroy { + media: any; + pageType: string; + mediaForm: FormGroup; + + // Private + private _unsubscribeAll: Subject; + + /** + * Constructor + */ + constructor( + private _formBuilder: FormBuilder, + private _location: Location, + private _matSnackBar: MatSnackBar + ) { + // Set the private defaults + this._unsubscribeAll = new Subject(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void { + // Subscribe to update product on changes + } + + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- +} diff --git a/src/app/pages/medias/media/component/index.ts b/src/app/pages/medias/media/component/index.ts new file mode 100644 index 0000000..4f83cb3 --- /dev/null +++ b/src/app/pages/medias/media/component/index.ts @@ -0,0 +1,4 @@ +import { DetailComponent } from './detail.component'; +import { ListComponent } from './list.component'; + +export const COMPONENTS = [DetailComponent, ListComponent]; diff --git a/src/app/pages/medias/media/component/list.component.html b/src/app/pages/medias/media/component/list.component.html new file mode 100644 index 0000000..e1f5c12 --- /dev/null +++ b/src/app/pages/medias/media/component/list.component.html @@ -0,0 +1,192 @@ +
+ +
+ + + +
+ +
+ + + + + +
+
+ search + +
+
+ + + + + +
+ + + +
+ + + + ID + +

{{ media.id }}

+ + + + + + + + + + + + + + + Name + +

{{ media.name }}

+ + + + + + Category + +

+ {{ media.categories[0] }} +

+ + + + + + Price + +

+ {{ media.priceTaxIncl | currency: 'USD':'symbol' }} +

+ + + + + + Quantity + + + + + {{ media.quantity }} + + + + + + + Active + + check + close + + + + + + + + + + + +
+ +
+ +
diff --git a/src/app/pages/medias/media/component/list.component.scss b/src/app/pages/medias/media/component/list.component.scss new file mode 100644 index 0000000..3177a15 --- /dev/null +++ b/src/app/pages/medias/media/component/list.component.scss @@ -0,0 +1,122 @@ +@import 'src/@fuse/scss/fuse'; + +app-pages-medias-media-list { + #medias { + .top-bg { + @include media-breakpoint('lt-md') { + height: 256px; + } + } + + > .center { + > .header { + .search-wrapper { + width: 100%; + max-width: 480px; + border-radius: 28px; + overflow: hidden; + @include mat-elevation(1); + + @include media-breakpoint('xs') { + width: 100%; + } + + .search { + width: 100%; + height: 48px; + line-height: 48px; + padding: 0 18px; + + input { + width: 100%; + height: 48px; + min-height: 48px; + max-height: 48px; + padding: 0 16px; + border: none; + outline: none; + } + } + } + + @include media-breakpoint('lt-md') { + padding: 8px 0; + height: 192px !important; + min-height: 192px !important; + max-height: 192px !important; + } + } + } + } + + .medias-table { + flex: 1 1 auto; + border-bottom: 1px solid rgba(0, 0, 0, 0.12); + overflow: auto; + -webkit-overflow-scrolling: touch; + + .mat-header-row { + min-height: 64px; + } + + .media { + position: relative; + cursor: pointer; + height: 84px; + } + + .mat-cell { + min-width: 0; + display: flex; + align-items: center; + } + + .mat-column-id { + flex: 0 1 84px; + } + + .mat-column-image { + flex: 0 1 84px; + + .product-image { + width: 52px; + height: 52px; + border: 1px solid rgba(0, 0, 0, 0.12); + } + } + + .mat-column-category { + flex: 0 1 240px; + } + + .mat-column-price { + flex: 0 1 160px; + } + + .mat-column-quantity { + flex: 0 1 160px; + } + + .mat-column-active { + flex: 0 1 80px; + } + + .quantity-indicator { + display: inline-block; + vertical-align: middle; + width: 8px; + height: 8px; + border-radius: 4px; + margin-right: 8px; + + & + span { + display: inline-block; + vertical-align: middle; + } + } + + .active-icon { + border-radius: 50%; + } + } +} diff --git a/src/app/pages/medias/media/component/list.component.ts b/src/app/pages/medias/media/component/list.component.ts new file mode 100644 index 0000000..16bcb71 --- /dev/null +++ b/src/app/pages/medias/media/component/list.component.ts @@ -0,0 +1,61 @@ +import { + Component, + ElementRef, + OnInit, + ViewChild, + ViewEncapsulation +} from '@angular/core'; +import { MatPaginator } from '@angular/material/paginator'; +import { MatSort } from '@angular/material/sort'; +import { DataSource } from '@angular/cdk/collections'; +import { BehaviorSubject, fromEvent, merge, Observable, Subject } from 'rxjs'; +import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators'; + +import { fuseAnimations } from 'src/@fuse/animations'; +import { FuseUtils } from 'src/@fuse/utils'; + +@Component({ + selector: 'app-pages-medias-media-list', + templateUrl: './list.component.html', + styleUrls: ['./list.component.scss'], + animations: fuseAnimations, + encapsulation: ViewEncapsulation.None +}) +export class ListComponent implements OnInit { + dataSource: any | null; + displayedColumns = [ + 'id', + 'image', + 'name', + 'category', + 'price', + 'quantity', + 'active' + ]; + + @ViewChild(MatPaginator, { static: true }) + paginator: MatPaginator; + + @ViewChild(MatSort, { static: true }) + sort: MatSort; + + @ViewChild('filter', { static: true }) + filter: ElementRef; + + // Private + private _unsubscribeAll: Subject; + + constructor() { + // Set the private defaults + this._unsubscribeAll = new Subject(); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + /** + * On init + */ + ngOnInit(): void {} +} diff --git a/src/app/pages/medias/media/medias-media-routing.module.ts b/src/app/pages/medias/media/medias-media-routing.module.ts new file mode 100644 index 0000000..384fb34 --- /dev/null +++ b/src/app/pages/medias/media/medias-media-routing.module.ts @@ -0,0 +1,21 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; +import { ListComponent } from './component/list.component'; +import { DetailComponent } from './component/detail.component'; + +const routes: Routes = [ + { + path: '', + component: ListComponent + }, + { + path: ':id', + component: DetailComponent + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class MediasMediaRoutingModule {} diff --git a/src/app/pages/medias/media/medias-media.module.ts b/src/app/pages/medias/media/medias-media.module.ts new file mode 100644 index 0000000..0ff2f0d --- /dev/null +++ b/src/app/pages/medias/media/medias-media.module.ts @@ -0,0 +1,50 @@ +import { NgModule } from '@angular/core'; + +import { MatButtonModule } from '@angular/material/button'; +import { MatChipsModule } from '@angular/material/chips'; +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 { MatSnackBarModule } from '@angular/material/snack-bar'; +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 { MediasMediaRoutingModule } from './medias-media-routing.module'; + +import { COMPONENTS } from './component'; + +@NgModule({ + imports: [ + MatButtonModule, + MatChipsModule, + MatExpansionModule, + MatFormFieldModule, + MatIconModule, + MatInputModule, + MatMenuModule, + MatPaginatorModule, + MatSelectModule, + MatSnackBarModule, + MatSortModule, + MatTableModule, + MatTabsModule, + MatCheckboxModule, + + FuseSharedModule, + FuseWidgetModule, + + MediasMediaRoutingModule + ], + declarations: [...COMPONENTS], + providers: [] +}) +export class MediasMediaModule {} diff --git a/src/app/pages/medias/media/medias-media.theme.scss b/src/app/pages/medias/media/medias-media.theme.scss new file mode 100644 index 0000000..451b9b1 --- /dev/null +++ b/src/app/pages/medias/media/medias-media.theme.scss @@ -0,0 +1,23 @@ +@mixin medias-media-theme($theme) { + $background: map-get($theme, background); + $foreground: map-get($theme, foreground); + + app-pages-medias-media-list { + .header { + .search-wrapper { + background: map-get($background, card); + + .search { + .mat-icon { + color: map-get($foreground, icon); + } + + input { + background: map-get($background, card); + color: map-get($foreground, text); + } + } + } + } + } +} diff --git a/src/app/pages/medias/medias-routing.module.ts b/src/app/pages/medias/medias-routing.module.ts new file mode 100644 index 0000000..835e31d --- /dev/null +++ b/src/app/pages/medias/medias-routing.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +const routes: Routes = [ + { + path: 'medias', + loadChildren: './media/medias-media.module#MediasMediaModule' + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class MediasRoutingModule {} diff --git a/src/app/pages/medias/medias.module.ts b/src/app/pages/medias/medias.module.ts new file mode 100644 index 0000000..74baf98 --- /dev/null +++ b/src/app/pages/medias/medias.module.ts @@ -0,0 +1,10 @@ +import { NgModule } from '@angular/core'; + +import { MediasRoutingModule } from './medias-routing.module'; + +@NgModule({ + imports: [MediasRoutingModule], + declarations: [], + providers: [] +}) +export class MediasModule {} diff --git a/src/app/pages/pages-routing.module.ts b/src/app/pages/pages-routing.module.ts index ae14c1c..ba592b2 100644 --- a/src/app/pages/pages-routing.module.ts +++ b/src/app/pages/pages-routing.module.ts @@ -10,6 +10,10 @@ const routes: Routes = [ path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' }, + { + path: 'media', + loadChildren: './medias/medias.module#MediasModule' + }, { path: 'user', loadChildren: './users/users.module#UsersModule'