Merge branch 'develop'

# Conflicts: # package-lock.json
2024-10-22 16:12:25 +02:00 · 2024-10-22 16:12:25 +02:00 · 0231421cef
commit 0231421cef
parent f2c133e9bd 6b95fb7f77
13 changed files with 2039 additions and 15565 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "farmmaps-lib-app",
-  "version": "4.10.0",
-  "scripts": {
+  "version": "4.11.0",
+  "scripts":   {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
@ -10,7 +10,7 @@
    "e2e": "ng e2e"
  },
  "private": true,
-  "dependencies": {
+  "dependencies":   {
    "@angular-eslint/eslint-plugin": "^18.2.0",
    "@angular/animations": "^18.2.3",
    "@angular/common": "^18.2.3",
@ -56,11 +56,11 @@
    "util": "^0.12.4",
    "zone.js": "~0.14.10"
  },
-  "optionalDependencies": {
+  "optionalDependencies":   {
    "@lmdb/lmdb-linux-x64": "^3.1.0",
    "@rollup/rollup-linux-x64-gnu": "^4.21.2"
  },
-  "devDependencies": {
+  "devDependencies":   {
    "@angular-builders/custom-webpack": "^18.0.0",
    "@angular-devkit/build-angular": "^18.2.3",
    "@angular/cli": "^18.2.3",
@ -90,4 +90,4 @@
    "ts-node": "^8.8.1",
    "typescript": "~5.4.4"
  }
-}
+}
--- a/projects/common/src/fm/actions/app-common.actions.ts
+++ b/projects/common/src/fm/actions/app-common.actions.ts
@ -71,6 +71,8 @@ export const TOGGLENOTIFICATIONMENU = '[AppCommon] ToggleNotificationMenu';

 export const TOGGLEHELPMENU = '[AppCommon] ToggleHelpMenu';

+export const TOGGLESETTINGMENU = '[AppCommon] ToggleSettingMenu';
+
 export const SETMENUVISIBLE = '[AppCommon] SetMenuVisible';

 export const ONLINE = '[AppCommon] Online';
@ -332,6 +334,12 @@ export class ToggleHelpMenu implements Action {
  constructor() { }
 }

+export class ToggleSettingMenu implements Action {
+  readonly type = TOGGLESETTINGMENU;
+
+  constructor() { }
+}
+
 export class SetMenuVisible implements Action {
  readonly type = SETMENUVISIBLE;

@ -408,6 +416,7 @@ export type Actions = OpenModal
  | ToggleAppMenu
  | ToggleNotificationMenu
  | ToggleHelpMenu
+  | ToggleSettingMenu
  | NotificationEvent
  | SetUnreadNotifications;

--- a/projects/common/src/fm/common.module.ts
+++ b/projects/common/src/fm/common.module.ts
@ -34,6 +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 { 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';
@ -104,6 +105,7 @@ export {
        AppMenuComponent,
        NotificationMenuComponent,
        HelpMenuComponent,
+        SettingMenuComponent,
        BackButtonComponent,
        ThumbnailComponent,
        EditImageModalComponent,
--- a/projects/common/src/fm/components/app/app.component.html
+++ b/projects/common/src/fm/components/app/app.component.html
@ -33,6 +33,7 @@
    <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-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>
--- a/projects/common/src/fm/components/app/app.component.scss
+++ b/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-help-menu,fm-app-menu,fm-user-menu,fm-notification-menu,fm-setting-menu {
  display: inline-block;
  margin-left: 1rem;
 }
--- a/projects/common/src/fm/components/app/app.component.ts
+++ b/projects/common/src/fm/components/app/app.component.ts
@ -45,6 +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 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);
--- a/projects/common/src/fm/components/back-button/back-button.component.ts
+++ b/projects/common/src/fm/components/back-button/back-button.component.ts
@ -1,6 +1,6 @@
-import {Component, HostListener} from '@angular/core';
-import {Location} from "@angular/common";
-import { DeviceService} from '../../services/device.service';
+import { Location } from "@angular/common";
+import { Component, EventEmitter, HostListener, Output } from '@angular/core';
+import { DeviceService } from '../../services/device.service';

@Component({
  selector: 'fm-back-button',
@ -8,16 +8,18 @@ import { DeviceService} from '../../services/device.service';
  styleUrls: ['./back-button.component.scss']
 })
 export class BackButtonComponent {
+  @Output() beforeLocationBack = new EventEmitter();

  @HostListener('click')
  onBackClicked() {
+    this.beforeLocationBack.emit();
    this.location.back();
  }

-  constructor(private location: Location,private deviceService:DeviceService) { }
+  constructor(private location: Location,private deviceService:DeviceService) {    
+  }

  public show() {
    return !this.deviceService.IsMobile();
  }
-
 }
--- a/projects/common/src/fm/components/setting-menu/setting-menu.component.html
+++ b/projects/common/src/fm/components/setting-menu/setting-menu.component.html
@ -0,0 +1,8 @@
+<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="setting-menu" (activate)="activateRoute()" (deactivate)="deActivateRoute()"></router-outlet>            
+       </div>
+    </div>
+</div>
--- a/projects/common/src/fm/components/setting-menu/setting-menu.component.scss
+++ b/projects/common/src/fm/components/setting-menu/setting-menu.component.scss
@ -0,0 +1,80 @@
+.menu-button {
+    background-color: gray;  
+    display: inline-block;
+    width: 2.5em;
+    height: 2.5em;
+    line-height: 2.5em;
+    text-align: center;
+    font-size: 1rem;
+    position: relative;
+}
+
+div.menu-button > span {
+    color:white;
+}
+
+.menu {
+    max-height: calc( 100vh - 4rem);
+    //transition: max-height 0.2s;
+    overflow: hidden;
+    box-shadow: 0 0 20px rgba(0,0,0,.3);
+    position: fixed;
+    top: 3.4rem;
+    right:0.5rem;
+    left:0.5rem;
+    background-color: #fff;
+    border-radius: 0.25rem;
+    padding: 0.5rem;
+    z-index: 3;
+}
+
+:host-context(.fullscreen)  .menu  {
+    top:4em;
+}
+
+.card {      
+    padding:0.5rem;
+    min-width: 10rem;          
+}
+
+.card-body {
+    text-align: left;
+}
+
+.hidden {
+    max-height: 0;   
+}
+
+.menu.hidden {
+    padding: 0;
+}
+
+.menu-button.hidden {
+    overflow: hidden;
+}
+
+
+@media screen and (min-width: 44rem)  {
+    .menu {
+        position: absolute;
+        top: 3rem;
+        right:0;
+        left: unset;
+        max-width: 30em;
+    }
+
+    :host-context(.fullscreen)  .menu  {
+        top: 3rem;
+    }
+}    
+
+.unread {
+    display: block;
+    position: absolute;
+    top:-0.5em;
+    right: -0.5em;
+}
+
+.unread.hidden {
+    display: none;
+}
--- a/projects/common/src/fm/components/setting-menu/setting-menu.component.ts
+++ b/projects/common/src/fm/components/setting-menu/setting-menu.component.ts
@ -0,0 +1,37 @@
+import { Input } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+
+import { IUser } from '../../models/user';
+import {Store} from '@ngrx/store';
+import * as appReducers from '../../reducers/app-common.reducer';
+import * as appActions from '../../actions/app-common.actions';
+
+@Component({
+  selector: 'fm-setting-menu',
+  templateUrl: './setting-menu.component.html',
+  styleUrls: ['./setting-menu.component.scss']
+})
+export class SettingMenuComponent implements OnInit {
+  
+  @Input() user:IUser;
+  @Input() showMenu:boolean;
+  public noContent = true;
+
+  constructor(private store: Store<appReducers.State>) { }
+
+  ngOnInit(): void {
+  }
+
+  toggle(event:MouseEvent) {
+    event.stopPropagation();
+    this.store.dispatch(new appActions.ToggleSettingMenu());
+  } 
+
+  activateRoute() {
+    this.noContent=false;
+  }
+
+  deActivateRoute() {
+    this.noContent=true;
+  }
+}
--- a/projects/common/src/fm/reducers/app-common.reducer.ts
+++ b/projects/common/src/fm/reducers/app-common.reducer.ts
@ -26,6 +26,7 @@ export interface State {
  appMenuVisible: boolean,
  notificationMenuVisible: boolean,
  helpMenuVisible: boolean,
+  settingMenuVisible: boolean,
  unreadNotifications: number,
  isOnline: boolean,
  isPageMode:boolean
@ -47,6 +48,7 @@ export const initialState: State = {
  appMenuVisible: false,
  notificationMenuVisible: false,
  helpMenuVisible: false,
+  settingMenuVisible: false,
  unreadNotifications: 0,
  isOnline: true,
  isPageMode: true
@ -106,26 +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 });
+      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 });
+      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 });
+      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 });
+      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 });
+      return tassign(state, { helpMenuVisible : !state.helpMenuVisible,accountMenuVisible:false,appMenuVisible:false,notificationMenuVisible:false,settingMenuVisible:false });
+    }
+    case appCommonActions.TOGGLESETTINGMENU: {
+      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 });
+      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 });
+      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;
@ -203,6 +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 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;
@ -227,6 +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 SelectGetSettingMenuVisible = createSelector(selectAppCommonState,getSettingMenuVisible);
 export const SelectgetUnreadNotifications = createSelector(selectAppCommonState,getUnreadNotifications);

 export const SelectGetIsOnline = createSelector(selectAppCommonState,getIsOnline);
--- a/src/app/app-routing.module.ts
+++ b/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,