AW-6410 Fix settings menu

package-lock.json

@@ -90,7 +90,7 @@
     },
     "dist/common": {
       "name": "@farmmaps/common",
-      "version": "4.10.0-prerelease.2513",
+      "version": "2.1.0",
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -115,7 +115,7 @@
     },
     "dist/common-map": {
       "name": "@farmmaps/common-map",
-      "version": "4.10.0-prerelease.2513",
+      "version": "2.0.0",
       "dependencies": {
         "tslib": "^2.0.0"
       },
@@ -124,13 +124,13 @@
         "@ngrx/effects": "^18.0.2",
         "@ngrx/router-store": "^18.0.2",
         "@ngrx/store": "^18.0.2",
-        "ngrx-store-localstorage": "^18.0.0",
+        "ngrx-store-localstorage": "^18",
         "tassign": "^1.0.0"
       }
     },
     "dist/common-map3d": {
       "name": "@farmmaps/common-map3d",
-      "version": "4.10.0-prerelease.2513",
+      "version": "2.0.0",
       "dependencies": {
         "tslib": "^2.0.0"
       },
@@ -143,7 +143,7 @@
     },
     "dist/ng-openlayers": {
       "name": "@farmmaps/ng-openlayers",
-      "version": "4.10.0-prerelease.2513",
+      "version": "18.0.0",
       "license": "MPL-2.0",
       "dependencies": {
         "tslib": "^2.3.0"

projects/common/src/fm/actions/app-common.actions.ts

@@ -71,7 +71,7 @@ export const TOGGLENOTIFICATIONMENU = '[AppCommon] ToggleNotificationMenu';
 
 export const TOGGLEHELPMENU = '[AppCommon] ToggleHelpMenu';
 
-export const TOGGLESETTINGSMENU = '[AppCommon] ToggleSettingsMenu';
+export const TOGGLESETTINGMENU = '[AppCommon] ToggleSettingMenu';
 
 export const SETMENUVISIBLE = '[AppCommon] SetMenuVisible';
 
@@ -334,8 +334,8 @@ export class ToggleHelpMenu implements Action {
   constructor() { }
 }
 
-export class ToggleSettingsMenu implements Action {
+export class ToggleSettingMenu implements Action {
-  readonly type = TOGGLESETTINGSMENU;
+  readonly type = TOGGLESETTINGMENU;
 
   constructor() { }
 }
@@ -416,7 +416,7 @@ export type Actions = OpenModal
   | ToggleAppMenu
   | ToggleNotificationMenu
   | ToggleHelpMenu
-  | ToggleSettingsMenu
+  | ToggleSettingMenu
   | NotificationEvent
   | SetUnreadNotifications;
 

projects/common/src/fm/common.module.ts

@@ -34,7 +34,7 @@ import { HasClaimDirective } from './components/has-claim/has-claim.directive';
 import { HasPackageDirective } from './components/has-package/has-package.directive';
 import { HasRoleDirective } from './components/has-role/has-role.directive';
 import { HelpMenuComponent } from './components/help-menu/help-menu.component';
-import { SettingsMenuComponent } from './components/settings-menu/settings-menu.component';
+import { SettingMenuComponent } from './components/setting-menu/setting-menu.component';
 import { ItemLinkComponent } from './components/item-link/item-link.component';
 import { MenuBackgroundComponent } from './components/menu-background/menu-background.component';
 import { NotFoundComponent } from './components/not-found/not-found.component';
@@ -105,7 +105,7 @@ export {
         AppMenuComponent,
         NotificationMenuComponent,
         HelpMenuComponent,
-        SettingsMenuComponent,
+        SettingMenuComponent,
         BackButtonComponent,
         ThumbnailComponent,
         EditImageModalComponent,

projects/common/src/fm/components/app/app.component.html

@@ -33,8 +33,8 @@
     <fm-resumable-file-upload></fm-resumable-file-upload>
   </ng-container>  
   <div class="user-menu apponly">
+    <fm-setting-menu [user]="user|async" [showMenu]="settingMenuVisible|async"></fm-setting-menu>
     <fm-help-menu [user]="user|async" [showMenu]="helpMenuVisible|async"></fm-help-menu>
-    <fm-settings-menu [user]="user|async" [showMenu]="settingsMenuVisible|async"></fm-settings-menu>
     <fm-notification-menu [user]="user|async" [unread]="unreadNotifications|async" [showMenu]="notificationMenuVisible|async"></fm-notification-menu>
     <fm-app-menu [user]="user|async" [showMenu]="appMenuVisible|async"></fm-app-menu>
     <fm-user-menu [user]="user|async" [showMenu]="accountMenuVisible|async"></fm-user-menu>    

projects/common/src/fm/components/app/app.component.scss

@@ -119,7 +119,7 @@ body { background: #f1f1f1; line-height: 18px; user-select:none;font-family: Lat
   max-height:0em;
 }
 
-fm-help-menu,fm-app-menu,fm-user-menu,fm-notification-menu,fm-settings-menu {
+fm-help-menu,fm-app-menu,fm-user-menu,fm-notification-menu,fm-setting-menu {
   display: inline-block;
   margin-left: 1rem;
 }

projects/common/src/fm/components/app/app.component.ts

@@ -45,7 +45,7 @@ export class AppComponent implements OnInit, OnDestroy {
   public accountMenuVisible: Observable<boolean> = this.store$.select(appReducers.SelectGetAccountMenuVisible);
   public appMenuVisible: Observable<boolean> = this.store$.select(appReducers.SelectGetAppMenuVisible);
   public notificationMenuVisible: Observable<boolean> = this.store$.select(appReducers.SelectGetNotificationMenuVisible);
-  public settingsMenuVisible: Observable<boolean> = this.store$.select(appReducers.SelectGetSettingsMenuVisible);
+  public settingMenuVisible: Observable<boolean> = this.store$.select(appReducers.SelectGetSettingMenuVisible);
   public helpMenuVisible: Observable<boolean> = this.store$.select(appReducers.SelectGetHelpMenuVisible);
   public unreadNotifications: Observable<number> = this.store$.select(appReducers.SelectgetUnreadNotifications);
   public user: Observable<IUser> = this.store$.select(appReducers.SelectGetUser);

projects/common/src/fm/components/setting-menu/setting-menu.component.html

@@ -1,8 +1,8 @@
-<div class="mobile-hide">
+<div>
     <div (click)="toggle($event)" class="rounded-circle menu-button hidden"  [ngClass]="{'hidden':!user || noContent}">
         <span i18n-title title="Settings"><i class="fas fa-gear" aria-hidden="true"></i></span>
         <div class="menu hidden" [ngClass]="{'hidden':!showMenu}">                                     
-            <router-outlet name="settings-menu" (activate)="activateRoute()" (deactivate)="deActivateRoute()"></router-outlet>            
+            <router-outlet name="setting-menu" (activate)="activateRoute()" (deactivate)="deActivateRoute()"></router-outlet>            
        </div>
     </div>
 </div>

projects/common/src/fm/components/setting-menu/setting-menu.component.ts

@@ -7,11 +7,11 @@ import * as appReducers from '../../reducers/app-common.reducer';
 import * as appActions from '../../actions/app-common.actions';
 
 @Component({
-  selector: 'fm-settings-menu',
+  selector: 'fm-setting-menu',
-  templateUrl: './settings-menu.component.html',
+  templateUrl: './setting-menu.component.html',
-  styleUrls: ['./settings-menu.component.scss']
+  styleUrls: ['./setting-menu.component.scss']
 })
-export class SettingsMenuComponent implements OnInit {
+export class SettingMenuComponent implements OnInit {
   
   @Input() user:IUser;
   @Input() showMenu:boolean;
@@ -24,7 +24,7 @@ export class SettingsMenuComponent implements OnInit {
 
   toggle(event:MouseEvent) {
     event.stopPropagation();
-    this.store.dispatch(new appActions.ToggleSettingsMenu());
+    this.store.dispatch(new appActions.ToggleSettingMenu());
   } 
 
   activateRoute() {

projects/common/src/fm/reducers/app-common.reducer.ts

@@ -26,7 +26,7 @@ export interface State {
   appMenuVisible: boolean,
   notificationMenuVisible: boolean,
   helpMenuVisible: boolean,
-  settingsMenuVisible: boolean,
+  settingMenuVisible: boolean,
   unreadNotifications: number,
   isOnline: boolean,
   isPageMode:boolean
@@ -48,7 +48,7 @@ export const initialState: State = {
   appMenuVisible: false,
   notificationMenuVisible: false,
   helpMenuVisible: false,
-  settingsMenuVisible: false,
+  settingMenuVisible: false,
   unreadNotifications: 0,
   isOnline: true,
   isPageMode: true
@@ -108,29 +108,29 @@ export function reducer(state = initialState, action: appCommonActions.Actions )
       });
     }
     case appCommonActions.TOGGLEMENU: {
-      return tassign(state, { menuVisible: !state.menuVisible,accountMenuVisible:!state.menuVisible?false:state.accountMenuVisible,appMenuVisible:!state.menuVisible?false:state.appMenuVisible,notificationMenuVisible:!state.menuVisible?false:state.notificationMenuVisible,helpMenuVisible:!state.menuVisible?false:state.helpMenuVisible,settingsMenuVisible:!state.menuVisible?false:state.settingsMenuVisible });
+      return tassign(state, { menuVisible: !state.menuVisible,accountMenuVisible:!state.menuVisible?false:state.accountMenuVisible,appMenuVisible:!state.menuVisible?false:state.appMenuVisible,notificationMenuVisible:!state.menuVisible?false:state.notificationMenuVisible,helpMenuVisible:!state.menuVisible?false:state.helpMenuVisible,settingMenuVisible:!state.menuVisible?false:state.settingMenuVisible });
     }
     case appCommonActions.TOGGLEACCOUNTMENU: {
-      return tassign(state, { accountMenuVisible: !state.accountMenuVisible,appMenuVisible:false,notificationMenuVisible:false,helpMenuVisible:false,settingsMenuVisible:false });
+      return tassign(state, { accountMenuVisible: !state.accountMenuVisible,appMenuVisible:false,notificationMenuVisible:false,helpMenuVisible:false,settingMenuVisible:false });
     }
     case appCommonActions.TOGGLEAPPMENU: {
-      return tassign(state, { appMenuVisible: !state.appMenuVisible,accountMenuVisible:false,notificationMenuVisible:false,helpMenuVisible:false,settingsMenuVisible:false });
+      return tassign(state, { appMenuVisible: !state.appMenuVisible,accountMenuVisible:false,notificationMenuVisible:false,helpMenuVisible:false,settingMenuVisible:false });
     }
     case appCommonActions.TOGGLENOTIFICATIONMENU: {
-      return tassign(state, { notificationMenuVisible : !state.notificationMenuVisible,accountMenuVisible:false,appMenuVisible:false,helpMenuVisible:false,settingsMenuVisible:false });
+      return tassign(state, { notificationMenuVisible : !state.notificationMenuVisible,accountMenuVisible:false,appMenuVisible:false,helpMenuVisible:false,settingMenuVisible:false });
     }
     case appCommonActions.TOGGLEHELPMENU: {
-      return tassign(state, { helpMenuVisible : !state.helpMenuVisible,accountMenuVisible:false,appMenuVisible:false,notificationMenuVisible:false,settingsMenuVisible:false });
+      return tassign(state, { helpMenuVisible : !state.helpMenuVisible,accountMenuVisible:false,appMenuVisible:false,notificationMenuVisible:false,settingMenuVisible:false });
     }
-    case appCommonActions.TOGGLESETTINGSMENU: {
+    case appCommonActions.TOGGLESETTINGMENU: {
-      return tassign(state, { settingsMenuVisible : !state.settingsMenuVisible,accountMenuVisible:false,appMenuVisible:false,notificationMenuVisible:false,helpMenuVisible:false });
+      return tassign(state, { settingMenuVisible : !state.settingMenuVisible,accountMenuVisible:false,appMenuVisible:false,notificationMenuVisible:false,helpMenuVisible:false });
     }
     case appCommonActions.ESCAPE: {
-      return tassign(state, { menuVisible: false,accountMenuVisible:false,appMenuVisible: false,notificationMenuVisible:false,helpMenuVisible:false,settingsMenuVisible:false });
+      return tassign(state, { menuVisible: false,accountMenuVisible:false,appMenuVisible: false,notificationMenuVisible:false,helpMenuVisible:false,settingMenuVisible:false });
     }
     case appCommonActions.SETMENUVISIBLE: {
       const a = action as appCommonActions.SetMenuVisible;
-      return tassign(state, { menuVisible: a.visible,accountMenuVisible:a.visible?false:state.accountMenuVisible,appMenuVisible:a.visible?false:state.appMenuVisible,notificationMenuVisible:a.visible?false:state.notificationMenuVisible,helpMenuVisible:a.visible?false:state.helpMenuVisible,settingsMenuVisible:a.visible?false:state.settingsMenuVisible });
+      return tassign(state, { menuVisible: a.visible,accountMenuVisible:a.visible?false:state.accountMenuVisible,appMenuVisible:a.visible?false:state.appMenuVisible,notificationMenuVisible:a.visible?false:state.notificationMenuVisible,helpMenuVisible:a.visible?false:state.helpMenuVisible,settingMenuVisible:a.visible?false:state.settingMenuVisible });
     }
     case appCommonActions.INITUSERPACKAGESSUCCESS:{
       const a = action as appCommonActions.InitUserPackagesSuccess;
@@ -208,7 +208,7 @@ export const getAccountMenuVisible = (state: State) => state.accountMenuVisible;
 export const getAppMenuVisible = (state: State) => state.appMenuVisible;
 export const getNotificationMenuVisible = (state: State) => state.notificationMenuVisible;
 export const getHelpMenuVisible = (state: State) => state.helpMenuVisible;
-export const getSettingsMenuVisible = (state: State) => state.settingsMenuVisible;
+export const getSettingMenuVisible = (state: State) => state.settingMenuVisible;
 export const getUnreadNotifications = (state: State) => state.unreadNotifications;
 export const getIsOnline = (state: State) => state.isOnline;
 export const getIsPageMode = (state: State) => state.isPageMode;
@@ -233,7 +233,7 @@ export const SelectGetAccountMenuVisible = createSelector(selectAppCommonState,g
 export const SelectGetAppMenuVisible = createSelector(selectAppCommonState,getAppMenuVisible);
 export const SelectGetNotificationMenuVisible = createSelector(selectAppCommonState,getNotificationMenuVisible);
 export const SelectGetHelpMenuVisible = createSelector(selectAppCommonState,getHelpMenuVisible);
-export const SelectGetSettingsMenuVisible = createSelector(selectAppCommonState,getSettingsMenuVisible);
+export const SelectGetSettingMenuVisible = createSelector(selectAppCommonState,getSettingMenuVisible);
 export const SelectgetUnreadNotifications = createSelector(selectAppCommonState,getUnreadNotifications);
 
 export const SelectGetIsOnline = createSelector(selectAppCommonState,getIsOnline);

src/app/app-routing.module.ts

@@ -20,7 +20,7 @@ const routes = [
 
   {
     path: '',
-    canActivate: [NavBarGuard],
+    //canActivate: [NavBarGuard],
     component: LandingpageComponent
   },
   {
@@ -43,6 +43,11 @@ const routes = [
     component: TestComponent,
     outlet: 'help-menu'
   },
+  {
+    path: '',
+    component: TestComponent,
+    outlet: 'setting-menu'
+  },
   {
     path: '',
     component: LogoComponent,