added different themes, issue with ngrx

config/environment.default.js

@@ -155,5 +155,13 @@ module.exports = {
     edit: {
       undoTimeout: 10000 // 10 seconds
     }
+  },
+  themes: [
+    {
+      name: 'Preview Release',
+      cssClass: 'preview-release'
     }
+  ]
+
+
 };

package.json

@@ -224,6 +224,7 @@
     "webpack-bundle-analyzer": "^2.13.1",
     "webpack-dev-middleware": "3.2.0",
     "webpack-dev-server": "^3.1.5",
+    "webpack-import-glob-loader": "^1.6.3",
     "webpack-merge": "4.1.4",
     "webpack-node-externals": "1.7.2"
   }

src/app/+home-page/home-page.component.default.scss

@@ -0,0 +1,3 @@
+:host {
+    color: red;
+}

src/app/+home-page/home-page.component.scss

@@ -1 +1,2 @@
-@import '../../styles/variables.scss';
+@import './home-page.component.default';
+@import './themes/*';

src/app/+home-page/themes/home-page.component.preview-release.scss

@@ -0,0 +1,3 @@
+:host-context(.preview-release) {
+    color: green;
+}

src/app/app.component.html

@@ -1,5 +1,5 @@
-<div class="outer-wrapper">
+<div class="outer-wrapper" [ngClass]="(theme | async)?.cssClass">
-    <ds-admin-sidebar></ds-admin-sidebar>
+    <!--<ds-admin-sidebar></ds-admin-sidebar>-->
     <div class="inner-wrapper"  [@slideSidebarPadding]="{
      value: (!(sidebarVisible | async) ? 'hidden' : (slideSidebarOver | async) ? 'shown' : 'expanded'),
      params: {collapsedSidebarWidth: (collapsedSidebarWidth | async), totalSidebarWidth: (totalSidebarWidth | async)}

src/app/app.component.scss

@@ -48,4 +48,3 @@ ds-admin-sidebar {
   position: fixed;
   z-index: $sidebar-z-index;
 }
-

src/app/app.component.ts

@@ -30,8 +30,11 @@ import { MenuService } from './shared/menu/menu.service';
 import { MenuID } from './shared/menu/initial-menus-state';
 import { Observable } from 'rxjs/internal/Observable';
 import { slideSidebarPadding } from './shared/animations/slide';
-import { combineLatest as combineLatestObservable } from 'rxjs';
+import { combineLatest as combineLatestObservable, of } from 'rxjs';
 import { HostWindowService } from './shared/host-window.service';
+import { ThemeService } from './core/theme/theme.service';
+import { Theme } from '../config/theme.inferface';
+import { isNotEmpty } from './shared/empty.util';
 
 @Component({
   selector: 'ds-app',
@@ -47,6 +50,7 @@ export class AppComponent implements OnInit, AfterViewInit {
   slideSidebarOver: Observable<boolean>;
   collapsedSidebarWidth: Observable<string>;
   totalSidebarWidth: Observable<string>;
+  theme: Observable<Theme>= of({} as any);
 
   constructor(
     @Inject(GLOBAL_CONFIG) public config: GlobalConfig,
@@ -60,8 +64,10 @@ export class AppComponent implements OnInit, AfterViewInit {
     private routeService: RouteService,
     private cssService: CSSVariableService,
     private menuService: MenuService,
-    private windowService: HostWindowService
+    private windowService: HostWindowService,
+    private themeService: ThemeService
   ) {
+
     // Load all the languages that are defined as active from the config file
     translate.addLangs(config.languages.filter((LangConfig) => LangConfig.active === true).map((a) => a.code));
 
@@ -83,10 +89,15 @@ export class AppComponent implements OnInit, AfterViewInit {
       console.info(config);
     }
     this.storeCSSVariables();
-
   }
 
   ngOnInit() {
+    const availableThemes: Theme[] = this.config.themes;
+    if (isNotEmpty(availableThemes)) {
+      this.themeService.setCurrentTheme(availableThemes[0]);
+    }
+    this.theme = this.themeService.getCurrentTheme();
+
     const env: string = this.config.production ? 'Production' : 'Development';
     const color: string = this.config.production ? 'red' : 'green';
     console.info(`Environment: %c${env}`, `color: ${color}; font-weight: bold;`);

src/app/core/core.effects.ts

@@ -1,4 +1,3 @@
-
 import { ObjectCacheEffects } from './cache/object-cache.effects';
 import { UUIDIndexEffects } from './index/index.effects';
 import { RequestEffects } from './data/request.effects';
@@ -6,6 +5,7 @@ import { AuthEffects } from './auth/auth.effects';
 import { JsonPatchOperationsEffects } from './json-patch/json-patch-operations.effects';
 import { ServerSyncBufferEffects } from './cache/server-sync-buffer.effects';
 import { ObjectUpdatesEffects } from './data/object-updates/object-updates.effects';
+import { ThemeEffects } from './theme/theme.effects';
 
 export const coreEffects = [
   RequestEffects,
@@ -14,5 +14,6 @@ export const coreEffects = [
   AuthEffects,
   JsonPatchOperationsEffects,
   ServerSyncBufferEffects,
-  ObjectUpdatesEffects
+  ObjectUpdatesEffects,
+  ThemeEffects
 ];

src/app/core/core.module.ts

@@ -81,6 +81,7 @@ import { DSOChangeAnalyzer } from './data/dso-change-analyzer.service';
 import { ObjectUpdatesService } from './data/object-updates/object-updates.service';
 import { DefaultChangeAnalyzer } from './data/default-change-analyzer.service';
 import { SearchService } from '../+search-page/search-service/search.service';
+import { ThemeService } from './theme/theme.service';
 import { RoleService } from './roles/role.service';
 import { MyDSpaceGuard } from '../+my-dspace-page/my-dspace.guard';
 import { MyDSpaceResponseParsingService } from './data/mydspace-response-parsing.service';
@@ -170,6 +171,7 @@ const PROVIDERS = [
   MenuService,
   ObjectUpdatesService,
   SearchService,
+  ThemeService,
   MyDSpaceGuard,
   RoleService,
   TaskResponseParsingService,

src/app/core/core.reducers.ts

@@ -13,6 +13,7 @@ import {
   objectUpdatesReducer,
   ObjectUpdatesState
 } from './data/object-updates/object-updates.reducer';
+import { themeReducer, ThemeState } from './theme/theme.reducer';
 
 export interface CoreState {
   'cache/object': ObjectCacheState,
@@ -21,6 +22,7 @@ export interface CoreState {
   'data/request': RequestState,
   'index': MetaIndexState,
   'auth': AuthState,
+  'theme': ThemeState
   'json/patch': JsonPatchOperationsState
 }
 
@@ -31,5 +33,6 @@ export const coreReducers: ActionReducerMap<CoreState> = {
   'data/request': requestReducer,
   'index': indexReducer,
   'auth': authReducer,
+  'theme': themeReducer,
   'json/patch': jsonPatchOperationsReducer
 };

src/app/core/theme/theme.actions.ts

@@ -0,0 +1,37 @@
+/**
+ * The list of ObjectUpdatesAction type definitions
+ */
+import { type } from '../../shared/ngrx/type';
+import { Action } from '@ngrx/store';
+import { Theme } from '../../../config/theme.inferface';
+
+export const ThemeActionTypes = {
+  SET: type('dspace/core/theme/SET'),
+};
+
+/* tslint:disable:max-classes-per-file */
+
+/**
+ * An ngrx action to set a the repository's current theme
+ */
+export class SetThemeAction implements Action {
+  type = ThemeActionTypes.SET;
+  payload: {
+    theme: Theme
+  };
+
+  /**
+   * Create a new SetThemeAction
+   *
+   * @param theme
+   *    the theme configuration to change the current theme to
+   */
+  constructor(
+    theme: Theme
+  ) {
+    this.payload = { theme };
+  }
+}
+
+export type ThemeAction
+  = SetThemeAction;

src/app/core/theme/theme.effects.ts

@@ -0,0 +1,25 @@
+import { Inject, Injectable } from '@angular/core';
+import { Action, Store } from '@ngrx/store';
+import { Actions, Effect } from '@ngrx/effects';
+import { CoreState } from '../core.reducers';
+import { SetThemeAction } from './theme.actions';
+import { GLOBAL_CONFIG, GlobalConfig } from '../../../config';
+import { Theme } from '../../../config/theme.inferface';
+import { isNotEmpty } from '../../shared/empty.util';
+import { asyncScheduler, defer, Observable, of as observableOf } from 'rxjs';
+
+@Injectable()
+export class ThemeEffects {
+
+  // @Effect() setInitialTheme: Observable<Action> = defer(() => {
+  //   console.log('set theme');
+  //   const availableThemes: Theme[] = this.config.themes;
+  //   if (isNotEmpty(availableThemes)) {
+  //     return observableOf(new SetThemeAction(availableThemes[0]), asyncScheduler);
+  //   }
+  // });
+  //
+  // constructor(private actions: Actions, private store: Store<CoreState>, @Inject(GLOBAL_CONFIG) public config: GlobalConfig) {
+  //   console.log("theme effects");
+  // }
+}

src/app/core/theme/theme.reducer.ts

@@ -0,0 +1,19 @@
+import { Theme } from '../../../config/theme.inferface';
+import { ThemeAction, ThemeActionTypes } from './theme.actions';
+
+export interface ThemeState {
+  theme: Theme
+}
+
+// Object.create(null) ensures the object has no default js properties (e.g. `__proto__`)
+const initialState = Object.create(null);
+
+export function themeReducer(state = initialState, action: ThemeAction): ThemeState {
+  switch (action.type) {
+    case ThemeActionTypes.SET: {
+      const newState =  Object.assign({}, state, { theme: action.payload.theme });
+      console.log(newState);
+      return newState;
+    }
+  }
+}

src/app/core/theme/theme.service.ts

@@ -0,0 +1,33 @@
+import { createSelector, MemoizedSelector, select, Store } from '@ngrx/store';
+import { coreSelector, CoreState } from '../core.reducers';
+import { Inject, Injectable } from '@angular/core';
+import { Theme } from '../../../config/theme.inferface';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { ThemeState } from './theme.reducer';
+import { SetThemeAction } from './theme.actions';
+
+function themeStateSelector(): MemoizedSelector<CoreState, ThemeState> {
+  return createSelector(coreSelector, (state: CoreState) => state['theme']);
+}
+
+/**
+ * Service that dispatches to and reads from the Theme state in the store
+ */
+@Injectable()
+export class ThemeService {
+  constructor(private store: Store<CoreState>) {
+
+  }
+
+  public getCurrentTheme(): Observable<Theme> {
+    return this.store.pipe(
+      select(themeStateSelector()),
+      map((state: ThemeState) => state.theme)
+    );
+  }
+
+  public setCurrentTheme(theme: Theme): void {
+    return this.store.dispatch(new SetThemeAction(theme));
+  }
+}

src/config/global-config.interface.ts

@@ -8,6 +8,7 @@ import { FormConfig } from './form-config.interfaces';
 import {LangConfig} from './lang-config.interface';
 import { BrowseByConfig } from './browse-by-config.interface';
 import { ItemPageConfig } from './item-page-config.interface';
+import { Theme } from './theme.inferface';
 
 export interface GlobalConfig extends Config {
   ui: ServerConfig;
@@ -25,4 +26,5 @@ export interface GlobalConfig extends Config {
   languages: LangConfig[];
   browseBy: BrowseByConfig;
   item: ItemPageConfig;
+  themes: Theme[];
 }

src/config/theme.inferface.ts

@@ -0,0 +1,6 @@
+import { Config } from './config.interface';
+
+export interface Theme extends Config {
+  name: string;
+  cssClass: string;
+}

webpack/webpack.common.js

@@ -22,7 +22,8 @@ module.exports = {
         module: "empty"
     },
     module: {
-        rules: [{
+        rules: [
+            {
                 test: /\.ts$/,
                 loader: '@ngtools/webpack'
             },
@@ -54,7 +55,8 @@ module.exports = {
                 exclude: [/node_modules/,
                     path.resolve(__dirname, '..', 'src/styles/_exposed_variables.scss')
                 ],
-                use: [{
+                use: [
+                    {
                         loader: 'to-string-loader',
                         options: {
                             sourceMap: true
@@ -76,7 +78,8 @@ module.exports = {
                         options: {
                             sourceMap: true
                         }
-                    }
+                    },
+                    'webpack-import-glob-loader'
                 ]
             },
             {

yarn.lock

@@ -10939,6 +10939,12 @@ webpack-dev-server@^3.1.5:
     webpack-log "^2.0.0"
     yargs "12.0.1"
 
+webpack-import-glob-loader@^1.6.3:
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/webpack-import-glob-loader/-/webpack-import-glob-loader-1.6.3.tgz#1b1de573f49c2c2afdb814dc13b44b2111b2ea7b"
+  dependencies:
+    glob "^5.0.15"
+
 webpack-log@^1.0.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/webpack-log/-/webpack-log-1.2.0.tgz#a4b34cda6b22b518dbb0ab32e567962d5c72a43d"