Theaninova/openstapps
1
0
Fork 0
mirror of https://gitlab.com/openstapps/openstapps.git synced 2026-01-20 16:42:56 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Resolve "Dashboard navigation icons are saved in user preferences"

Browse Source
This commit is contained in:
Thea Schöbl
2022-09-08 14:07:05 +00:00
committed by Rainer Killinger
parent d571b1dbe5
commit 37dd29a60f
13 changed files with 202 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/app/modules/dashboard/sections/navigation-section/menu-item.interface.ts
View File

@@ -1,6 +1,30 @@
/*
* Copyright (C) 2022 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
* more details.
*
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
export interface MenuItemInterface {
icon: string;
label: string;
link: string;
active: boolean;
}
export enum MenuItemKey {
CATALOG = 'catalog',
CANTEEN = 'canteen',
MAP = 'map',
SETTINGS = 'settings',
SEARCH = 'search',
}
export type MenuItemConfig = Record<MenuItemKey, boolean>;

45
src/app/modules/dashboard/sections/navigation-section/menu-items.config.ts
View File

@@ -1,50 +1,53 @@
/*
* Copyright (C) 2022 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
* more details.
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
* more details.
*
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {MenuItemInterface} from './menu-item.interface';
import {MenuItemInterface, MenuItemKey} from './menu-item.interface';
import {SCIcon} from '../../../../util/ion-icon/icon';
export const MenuItems: MenuItemInterface[] = [
{
export const MENU_ITEMS: Record<MenuItemKey, MenuItemInterface> = {
catalog: {
icon: SCIcon`book`,
label: 'dashboard.navigation.item.catalog',
link: '/catalog',
active: true,
},
{
canteen: {
icon: SCIcon`local_cafe`,
label: 'dashboard.navigation.item.canteen',
link: '/canteen',
active: true,
},
{
map: {
icon: SCIcon`map`,
label: 'dashboard.navigation.item.map',
link: '/map',
active: true,
},
{
settings: {
icon: SCIcon`settings`,
label: 'dashboard.navigation.item.settings',
link: '/settings',
active: true,
},
{
search: {
icon: SCIcon`search`,
label: 'dashboard.navigation.item.search',
link: '/search',
active: false,
},
};
export const DEFAULT_ACTIVE_MENU_ITEMS: MenuItemKey[] = [
MenuItemKey.CATALOG,
MenuItemKey.CANTEEN,
MenuItemKey.MAP,
MenuItemKey.SETTINGS,
MenuItemKey.SEARCH,
];

26
src/app/modules/dashboard/sections/navigation-section/navigation-section.component.html
View File

@@ -1,16 +1,16 @@
<!--
~ Copyright (C) 2022 StApps
~ This program is free software: you can redistribute it and/or modify it
~ under the terms of the GNU General Public License as published by the Free
~ Software Foundation, version 3.
~ This program is free software: you can redistribute it and/or modify it
~ under the terms of the GNU General Public License as published by the Free
~ Software Foundation, version 3.
~
~ This program is distributed in the hope that it will be useful, but WITHOUT
~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
~ more details.
~ This program is distributed in the hope that it will be useful, but WITHOUT
~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
~ more details.
~
~ You should have received a copy of the GNU General Public License along with
~ this program. If not, see <https://www.gnu.org/licenses/>.
~ You should have received a copy of the GNU General Public License along with
~ this program. If not, see <https://www.gnu.org/licenses/>.
-->
<stapps-section
@@ -24,10 +24,10 @@
slidesPerView="auto"
class="navigation-swiper card-swiper"
>
<ng-template swiperSlide *ngFor="let menuItem of activeMenuItems">
<a [routerLink]="menuItem.link" class="card">
<ion-icon size="40" [name]="menuItem.icon"></ion-icon>
<ion-label>{{ menuItem.label | translate }}</ion-label>
<ng-template swiperSlide *ngFor="let item of activeMenuItems">
<a [routerLink]="menuItems[item].link" class="card">
<ion-icon size="40" [name]="menuItems[item].icon"></ion-icon>
<ion-label>{{ menuItems[item].label | translate }}</ion-label>
</a>
</ng-template>
</swiper>

49
src/app/modules/dashboard/sections/navigation-section/navigation-section.component.ts
View File

@@ -13,12 +13,16 @@
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {Component, OnInit, ViewEncapsulation} from '@angular/core';
import {ModalController} from '@ionic/angular';
import {IonRouterOutlet, ModalController} from '@ionic/angular';
import {EditModalComponent} from '../../edit-modal/edit-modal.component';
import {MenuItems} from './menu-items.config';
import {MenuItemInterface} from './menu-item.interface';
import {EditModalTypeEnum} from '../../edit-modal/edit-modal-type.enum';
import {DEFAULT_ACTIVE_MENU_ITEMS, MENU_ITEMS} from './menu-items.config';
import {MenuItemKey} from './menu-item.interface';
import {
EditModalItem,
EditModalTypeEnum,
} from '../../edit-modal/edit-modal-type.enum';
import {StorageProvider} from '../../../storage/storage.provider';
import {TranslatePipe} from '@ngx-translate/core';
const DASHBOARD_NAVIGATION = 'stapps.dashboard.navigation';
@@ -44,13 +48,15 @@ export class NavigationSectionComponent implements OnInit {
width: 120,
};
menuItems: MenuItemInterface[] = MenuItems;
menuItems = MENU_ITEMS;
activeMenuItems: MenuItemInterface[] = MenuItems;
activeMenuItems: MenuItemKey[] = DEFAULT_ACTIVE_MENU_ITEMS;
constructor(
public modalController: ModalController,
private storageProvider: StorageProvider,
private translatePipe: TranslatePipe,
private routerOutlet: IonRouterOutlet,
) {}
ngOnInit() {
@@ -67,9 +73,11 @@ export class NavigationSectionComponent implements OnInit {
);
if (storedMenuItems) {
const parsedMenuItems = JSON.parse(storedMenuItems);
if (Array.isArray(parsedMenuItems)) {
this.menuItems = parsedMenuItems;
this.activeMenuItems = parsedMenuItems.filter(item => item.active);
if (
Array.isArray(parsedMenuItems) &&
parsedMenuItems.every(it => typeof it === 'string')
) {
this.activeMenuItems = parsedMenuItems;
}
}
}
@@ -77,15 +85,12 @@ export class NavigationSectionComponent implements OnInit {
/**
* Save updated order of items
*
* @param items List of items
*/
setItems(items: MenuItemInterface[]) {
this.menuItems = items;
this.activeMenuItems = items.filter(item => item.active);
updateActiveItems(items: MenuItemKey[]) {
this.activeMenuItems = items;
void this.storageProvider.put<string>(
DASHBOARD_NAVIGATION,
JSON.stringify(items),
JSON.stringify(this.activeMenuItems),
);
}
@@ -95,8 +100,14 @@ export class NavigationSectionComponent implements OnInit {
async onSectionEdit() {
const modal = await this.modalController.create({
component: EditModalComponent,
canDismiss: true,
presentingElement: this.routerOutlet.nativeEl,
componentProps: {
items: this.menuItems,
items: Object.entries(this.menuItems).map(([id, item]) => ({
id,
active: this.activeMenuItems.includes(id as MenuItemKey),
labelLocalized: this.translatePipe.transform(item.label),
})),
type: EditModalTypeEnum.CHECKBOXES,
},
});
@@ -104,7 +115,11 @@ export class NavigationSectionComponent implements OnInit {
modal.onDidDismiss().then(result => {
if (result.data?.items) {
this.setItems(result.data.items);
this.updateActiveItems(
result.data.items
.filter((it: EditModalItem) => it.active)
.map((it: EditModalItem) => it.id),
);
}
});
}