Add steps in mockup

.editorconfig

@@ -5,7 +5,7 @@ root = true
 charset = utf-8
 indent_style = tab
 indent_size = 4
-insert_final_newline = true
+# insert_final_newline = true
 trim_trailing_whitespace = true
 max_line_length = off
 

.prettierignore

@@ -0,0 +1,10 @@
+node_modules/**
+dist/
+build/
+**/*.css
+**/*.sass
+**/*.scss
+package.json
+package-lock.json
+.editorconfig
+README.md

.prettierrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+	semi: true,
+	trailingComma: 'all',
+	singleQuote: true,
+	printWidth: 120,
+	tabWidth: 2,
+	tabs: true,
+};

e2e/src/app.e2e-spec.ts

@@ -15,9 +15,14 @@ describe('workspace-project App', () => {
 
 	afterEach(async () => {
 		// Assert that there are no errors emitted from the browser
-		const logs = await browser.manage().logs().get(logging.Type.BROWSER);
-		expect(logs).not.toContain(jasmine.objectContaining({
-			level: logging.Level.SEVERE,
-		}));
+		const logs = await browser
+			.manage()
+			.logs()
+			.get(logging.Type.BROWSER);
+		expect(logs).not.toContain(
+			jasmine.objectContaining({
+				level: logging.Level.SEVERE,
+			}),
+		);
 	});
 });

karma.conf.js

@@ -1,32 +1,31 @@
 // Karma configuration file, see link for more information
 // https://karma-runner.github.io/1.0/config/configuration-file.html
 
-module.exports = function (config) {
-    config.set({
-      basePath: '',
-      frameworks: ['jasmine', '@angular-devkit/build-angular'],
-      plugins: [
-        require('karma-jasmine'),
-        require('karma-chrome-launcher'),
-        require('karma-jasmine-html-reporter'),
-        require('karma-coverage-istanbul-reporter'),
-        require('@angular-devkit/build-angular/plugins/karma')
-      ],
-      client: {
-        clearContext: false // leave Jasmine Spec Runner output visible in browser
-      },
-      coverageIstanbulReporter: {
-        dir: require('path').join(__dirname, '../coverage/my-app'),
-        reports: ['html', 'lcovonly', 'text-summary'],
-        fixWebpackSourcePaths: true
-      },
-      reporters: ['progress', 'kjhtml'],
-      port: 9876,
-      colors: true,
-      logLevel: config.LOG_INFO,
-      autoWatch: true,
-      browsers: ['Chrome'],
-      singleRun: false
-    });
-  };
-
+module.exports = function(config) {
+	config.set({
+		basePath: '',
+		frameworks: ['jasmine', '@angular-devkit/build-angular'],
+		plugins: [
+			require('karma-jasmine'),
+			require('karma-chrome-launcher'),
+			require('karma-jasmine-html-reporter'),
+			require('karma-coverage-istanbul-reporter'),
+			require('@angular-devkit/build-angular/plugins/karma'),
+		],
+		client: {
+			clearContext: false, // leave Jasmine Spec Runner output visible in browser
+		},
+		coverageIstanbulReporter: {
+			dir: require('path').join(__dirname, '../coverage/my-app'),
+			reports: ['html', 'lcovonly', 'text-summary'],
+			fixWebpackSourcePaths: true,
+		},
+		reporters: ['progress', 'kjhtml'],
+		port: 9876,
+		colors: true,
+		logLevel: config.LOG_INFO,
+		autoWatch: true,
+		browsers: ['Chrome'],
+		singleRun: false,
+	});
+};

src/app/app-routing.module.ts

@@ -8,9 +8,9 @@ const routes: Routes = [
 	// leave the path value empty to enter into nested router in ThemeModule
 	// {path: '', loadChildren: 'app/views/themes/default/theme.module#ThemeModule'},
 
-	{path: '', redirectTo: 'steps', pathMatch: 'full'},
-	{path: 'steps', loadChildren: 'app/views/themes/steps/theme.module#ThemeModule'},
-	{path: '**', redirectTo: 'steps/error/403', pathMatch: 'full'},
+	{ path: '', redirectTo: 'steps', pathMatch: 'full' },
+	{ path: 'steps', loadChildren: 'app/views/themes/steps/theme.module#ThemeModule' },
+	{ path: '**', redirectTo: 'steps/error/403', pathMatch: 'full' },
 	/** START: remove this themes list on production */
 	// list of routers specified by demos, for demo purpose only!
 	// {path: 'default', loadChildren: 'app/views/themes/default/theme.module#ThemeModule'},
@@ -20,10 +20,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-	imports: [
-		RouterModule.forRoot(routes)
-	],
-	exports: [RouterModule]
+	imports: [RouterModule.forRoot(routes)],
+	exports: [RouterModule],
 })
-export class AppRoutingModule {
-}
+export class AppRoutingModule {}

src/app/app.component.ts

@@ -19,7 +19,7 @@ import { locale as frLang } from './core/_config/i18n/fr';
 	selector: 'body[kt-root]',
 	templateUrl: './app.component.html',
 	styleUrls: ['./app.component.scss'],
-	changeDetection: ChangeDetectionStrategy.OnPush
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent implements OnInit, OnDestroy {
 	// Public properties
@@ -35,11 +35,12 @@ export class AppComponent implements OnInit, OnDestroy {
 	 * @param layoutConfigService: LayoutCongifService
 	 * @param splashScreenService: SplashScreenService
 	 */
-	constructor(private translationService: TranslationService,
-	            private router: Router,
-	            private layoutConfigService: LayoutConfigService,
-	            private splashScreenService: SplashScreenService) {
-
+	constructor(
+		private translationService: TranslationService,
+		private router: Router,
+		private layoutConfigService: LayoutConfigService,
+		private splashScreenService: SplashScreenService,
+	) {
 		// register translations
 		this.translationService.loadTranslations(enLang, chLang, esLang, jpLang, deLang, frLang);
 	}

src/app/app.module.ts

@@ -1,57 +1,69 @@
 // Angular
-import { BrowserModule, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
-import { APP_INITIALIZER, NgModule } from '@angular/core';
-import { TranslateModule } from '@ngx-translate/core';
+import 'hammerjs';
+
+import { OverlayModule } from '@angular/cdk/overlay';
 import { HttpClientModule } from '@angular/common/http';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { APP_INITIALIZER, NgModule } from '@angular/core';
 import { GestureConfig, MatProgressSpinnerModule } from '@angular/material';
-import { OverlayModule } from '@angular/cdk/overlay';
-// Angular in memory
+import { BrowserModule, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { EffectsModule } from '@ngrx/effects';
+import { StoreRouterConnectingModule } from '@ngrx/router-store';
+import { StoreModule } from '@ngrx/store';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+import { TranslateModule } from '@ngx-translate/core';
 import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
+import * as json from 'highlight.js/lib/languages/json';
+import * as scss from 'highlight.js/lib/languages/scss';
+import * as typescript from 'highlight.js/lib/languages/typescript';
+import * as xml from 'highlight.js/lib/languages/xml';
+import { InlineSVGModule } from 'ng-inline-svg';
+import { HIGHLIGHT_OPTIONS, HighlightLanguage } from 'ngx-highlightjs';
+import { PERFECT_SCROLLBAR_CONFIG, PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
+import { NgxPermissionsModule } from 'ngx-permissions';
+
+import { environment } from '../environments/environment';
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { HttpUtilsService, LayoutUtilsService, TypesUtilsService } from './core/_base/crud';
+import {
+	KtDialogService,
+	LayoutConfigService,
+	LayoutRefService,
+	MenuAsideService,
+	MenuConfigService,
+	MenuHorizontalService,
+	PageConfigService,
+	SplashScreenService,
+	SubheaderService,
+} from './core/_base/layout';
+import { DataTableService, FakeApiService } from './core/_base/metronic';
+import { LayoutConfig } from './core/_config/default/layout.config';
+import { AuthService } from './core/auth';
+import { CoreModule } from './core/core.module';
+import { metaReducers, reducers } from './core/reducers';
+import { AuthModule } from './views/pages/auth/auth.module';
+import { PartialsModule } from './views/partials/partials.module';
+
+// Angular in memory
 // NgBootstrap
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 // Perfect Scroll bar
-import { PERFECT_SCROLLBAR_CONFIG, PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
 // SVG inline
-import { InlineSVGModule } from 'ng-inline-svg';
 // Env
-import { environment } from '../environments/environment';
 // Hammer JS
-import 'hammerjs';
 // NGX Permissions
-import { NgxPermissionsModule } from 'ngx-permissions';
 // NGRX
-import { StoreModule } from '@ngrx/store';
-import { EffectsModule } from '@ngrx/effects';
-import { StoreRouterConnectingModule } from '@ngrx/router-store';
-import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 // State
-import { metaReducers, reducers } from './core/reducers';
 // Copmponents
-import { AppComponent } from './app.component';
 // Modules
-import { AppRoutingModule } from './app-routing.module';
-import { CoreModule } from './core/core.module';
 // Partials
-import { PartialsModule } from './views/partials/partials.module';
 // Metronic Services
-import { DataTableService, FakeApiService } from './core/_base/metronic';
 // Layout Services
-import { LayoutConfigService, LayoutRefService, MenuAsideService, MenuConfigService, MenuHorizontalService, PageConfigService, SplashScreenService, SubheaderService,
-	KtDialogService } from './core/_base/layout';
 // Auth
-import { AuthModule } from './views/pages/auth/auth.module';
-import { AuthService, PermissionEffects, permissionsReducer, RoleEffects, rolesReducer } from './core/auth';
 // CRUD
-import { HttpUtilsService, LayoutUtilsService, TypesUtilsService } from './core/_base/crud';
 // Config
-import { LayoutConfig } from './core/_config/default/layout.config';
 // Highlight JS
-import { HIGHLIGHT_OPTIONS, HighlightLanguage } from 'ngx-highlightjs';
-import * as typescript from 'highlight.js/lib/languages/typescript';
-import * as scss from 'highlight.js/lib/languages/scss';
-import * as xml from 'highlight.js/lib/languages/xml';
-import * as json from 'highlight.js/lib/languages/json';
 
 // tslint:disable-next-line:class-name
 const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
@@ -72,10 +84,10 @@ export function initializeLayoutConfig(appConfig: LayoutConfigService) {
 
 export function hljsLanguages(): HighlightLanguage[] {
 	return [
-		{name: 'typescript', func: typescript},
-		{name: 'scss', func: scss},
-		{name: 'xml', func: xml},
-		{name: 'json', func: json}
+		{ name: 'typescript', func: typescript },
+		{ name: 'scss', func: scss },
+		{ name: 'xml', func: xml },
+		{ name: 'json', func: json },
 	];
 }
 
@@ -86,23 +98,25 @@ export function hljsLanguages(): HighlightLanguage[] {
 		BrowserModule,
 		AppRoutingModule,
 		HttpClientModule,
-		environment.isMockEnabled ? HttpClientInMemoryWebApiModule.forRoot(FakeApiService, {
-			passThruUnknownUrl: true,
-			dataEncapsulation: false
-		}) : [],
+		environment.isMockEnabled
+			? HttpClientInMemoryWebApiModule.forRoot(FakeApiService, {
+					passThruUnknownUrl: true,
+					dataEncapsulation: false,
+			  })
+			: [],
 		NgxPermissionsModule.forRoot(),
 		PartialsModule,
 		CoreModule,
 		OverlayModule,
-		StoreModule.forRoot(reducers, {metaReducers}),
+		StoreModule.forRoot(reducers, { metaReducers }),
 		EffectsModule.forRoot([]),
-		StoreRouterConnectingModule.forRoot({stateKey: 'router'}),
+		StoreRouterConnectingModule.forRoot({ stateKey: 'router' }),
 		StoreDevtoolsModule.instrument(),
 		AuthModule.forRoot(),
 		NgbModule,
 		TranslateModule.forRoot(),
 		MatProgressSpinnerModule,
-		InlineSVGModule.forRoot()
+		InlineSVGModule.forRoot(),
 	],
 	exports: [],
 	providers: [
@@ -116,21 +130,22 @@ export function hljsLanguages(): HighlightLanguage[] {
 		SplashScreenService,
 		{
 			provide: PERFECT_SCROLLBAR_CONFIG,
-			useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
+			useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG,
 		},
 		{
 			provide: HAMMER_GESTURE_CONFIG,
-			useClass: GestureConfig
+			useClass: GestureConfig,
 		},
 		{
 			// layout config initializer
 			provide: APP_INITIALIZER,
 			useFactory: initializeLayoutConfig,
-			deps: [LayoutConfigService], multi: true
+			deps: [LayoutConfigService],
+			multi: true,
 		},
 		{
 			provide: HIGHLIGHT_OPTIONS,
-			useValue: {languages: hljsLanguages}
+			useValue: { languages: hljsLanguages },
 		},
 		// template services
 		SubheaderService,
@@ -140,7 +155,6 @@ export function hljsLanguages(): HighlightLanguage[] {
 		TypesUtilsService,
 		LayoutUtilsService,
 	],
-	bootstrap: [AppComponent]
+	bootstrap: [AppComponent],
 })
-export class AppModule {
-}
+export class AppModule {}

src/app/core/_base/crud/models/_base.datasource.ts

@@ -31,21 +31,23 @@ export class BaseDataSource implements DataSource<BaseModel> {
 		this.paginatorTotal$ = this.paginatorTotalSubject.asObservable();
 
 		// subscribe hasItems to (entitySubject.length==0)
-		const hasItemsSubscription = this.paginatorTotal$.pipe(
-			distinctUntilChanged(),
-			skip(1)
-		).subscribe(res => this.hasItems = res > 0);
+		const hasItemsSubscription = this.paginatorTotal$
+			.pipe(
+				distinctUntilChanged(),
+				skip(1),
+			)
+			.subscribe(res => (this.hasItems = res > 0));
 		this.subscriptions.push(hasItemsSubscription);
 	}
 
 	connect(collectionViewer: CollectionViewer): Observable<any[]> {
 		// Connecting data source
-        return this.entitySubject.asObservable();
-    }
+		return this.entitySubject.asObservable();
+	}
 
 	disconnect(collectionViewer: CollectionViewer): void {
 		// Disonnecting data source
-        this.entitySubject.complete();
+		this.entitySubject.complete();
 		this.paginatorTotalSubject.complete();
 		this.subscriptions.forEach(sb => sb.unsubscribe());
 	}