Theaninova/openstapps
1
0
Fork 0
mirror of https://gitlab.com/openstapps/openstapps.git synced 2026-01-09 19:22:51 +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

22
src/app/modules/dashboard/dashboard.module.ts
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/>.
*/
import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
@@ -18,7 +18,7 @@ import {FormsModule} from '@angular/forms';
import {RouterModule, Routes} from '@angular/router';
import {IonicModule} from '@ionic/angular';
import {SwiperModule} from 'swiper/angular';
import {TranslateModule} from '@ngx-translate/core';
import {TranslateModule, TranslatePipe} from '@ngx-translate/core';
import {MomentModule} from 'ngx-moment';
import {DataModule} from '../data/data.module';
import {SettingsProvider} from '../settings/settings.provider';
@@ -70,6 +70,6 @@ const catalogRoutes: Routes = [
ThingTranslateModule.forChild(),
UtilModule,
],
providers: [SettingsProvider],
providers: [SettingsProvider, TranslatePipe],
})
export class DashboardModule {}

21
src/app/modules/dashboard/edit-modal/edit-modal-type.enum.ts
View File

@@ -1,4 +1,25 @@
/*
* 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 enum EditModalTypeEnum {
CHECKBOXES,
RADIOBOXES,
}
export interface EditModalItem {
id: unknown;
labelLocalized: string;
active: boolean;
}

47
src/app/modules/dashboard/edit-modal/edit-modal.component.html
View File

@@ -1,27 +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 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/>.
-->
<ion-header translucent>
<ion-header>
<ion-toolbar mode="ios">
<ion-title>{{ 'modal.settings' | translate }}</ion-title>
<ion-button fill="clear" slot="end" (click)="dismissModal()">
<ion-icon name="close"></ion-icon>
<ion-title>{{ 'modal.settings' | translate | titlecase }}</ion-title>
<ion-button fill="clear" slot="start" (click)="dismissModal()">
{{ 'modal.DISMISS_CANCEL' | translate }}
</ion-button>
<ion-button fill="clear" slot="end" (click)="onSaveClick()">
<ion-label>{{ 'modal.DISMISS_CONFIRM' | translate }}</ion-label>
</ion-button>
</ion-toolbar>
</ion-header>
<ion-content fullscreen>
<ion-content>
<ng-container [ngSwitch]="true">
<ion-reorder-group
*ngSwitchCase="type === types.CHECKBOXES"
@@ -29,9 +32,9 @@
(ionItemReorder)="doReorder($event)"
>
<!-- Default reorder icon, end aligned items -->
<ion-item *ngFor="let item of reorderedItems">
<ion-item *ngFor="let item of items">
<ion-reorder slot="start"></ion-reorder>
<ion-label>{{ item.label | translate }}</ion-label>
<ion-label>{{ item.labelLocalized }}</ion-label>
<ion-toggle
slot="end"
[checked]="item.active"
@@ -50,17 +53,9 @@
}}</ion-label>
</ion-list-header>
<ion-item *ngFor="let item of items">
<ion-label>{{ item.name }}</ion-label>
<ion-radio slot="end" [value]="item.uid"></ion-radio>
<ion-label>{{ item.labelLocalized }}</ion-label>
<ion-radio slot="end" [value]="item.id"></ion-radio>
</ion-item>
</ion-radio-group>
</ng-container>
</ion-content>
<ion-footer class="ion-text-end">
<ion-button fill="clear" class="ion-margin-end" (click)="onSaveClick()">{{
'save' | translate
}}</ion-button>
<ion-button fill="clear" (click)="dismissModal()">{{
'abort' | translate
}}</ion-button>
</ion-footer>

8
src/app/modules/dashboard/edit-modal/edit-modal.component.ts
View File

@@ -15,9 +15,7 @@
import {Component, Input, OnInit, ViewChild} from '@angular/core';
import {IonReorderGroup, ModalController} from '@ionic/angular';
import {ItemReorderEventDetail} from '@ionic/core';
import {SCThings} from '@openstapps/core';
import {MenuItemInterface} from '../sections/navigation-section/menu-item.interface';
import {EditModalTypeEnum} from './edit-modal-type.enum';
import {EditModalItem, EditModalTypeEnum} from './edit-modal-type.enum';
/**
* Shows a modal window to sort and enable/disable menu items
@@ -32,11 +30,11 @@ export class EditModalComponent implements OnInit {
@Input() type: EditModalTypeEnum = EditModalTypeEnum.CHECKBOXES;
@Input() items: MenuItemInterface[] | SCThings[];
@Input() items: EditModalItem[];
@Input() selectedValue: string;
reorderedItems: MenuItemInterface[] | SCThings[];
reorderedItems: EditModalItem[];
types = EditModalTypeEnum;

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),
);
}
});
}

21
src/app/util/ion-icon/ion-icon.module.ts
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/>.
*/
import {NgModule} from '@angular/core';
@@ -19,6 +19,7 @@ import {IonIconDirective} from './ion-icon.directive';
import {IonBackButtonDirective} from './ion-back-button.directive';
import {IonSearchbarDirective} from './ion-searchbar.directive';
import {IonBreadcrumbDirective} from './ion-breadcrumb.directive';
import {IonReorderDirective} from './ion-reorder.directive';
@NgModule({
declarations: [
@@ -27,9 +28,11 @@ import {IonBreadcrumbDirective} from './ion-breadcrumb.directive';
IonBackButtonDirective,
IonSearchbarDirective,
IonBreadcrumbDirective,
IonReorderDirective,
],
exports: [
IonIconDirective,
IonReorderDirective,
IonBackButtonDirective,
IonSearchbarDirective,
IonBreadcrumbDirective,

34
src/app/util/ion-icon/ion-reorder.directive.ts Normal file
View File

@@ -0,0 +1,34 @@
/*
* 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/>.
*/
import {Directive, ElementRef, ViewContainerRef} from '@angular/core';
import {SCIcon} from './icon';
import {IconReplacer} from './replace-util';
@Directive({
selector: 'ion-reorder',
})
export class IonReorderDirective extends IconReplacer {
constructor(element: ElementRef, viewContainerRef: ViewContainerRef) {
super(element, viewContainerRef, 'shadow');
}
replace() {
this.replaceIcon(this.host, {
name: SCIcon`reorder`,
size: 24,
});
}
}

3
src/assets/i18n/de.json
View File

@@ -7,6 +7,9 @@
"share": "Teilen",
"timeSuffix": "Uhr",
"modal": {
"DISMISS_NEUTRAL": "Schließen",
"DISMISS_CANCEL": "Abbrechen",
"DISMISS_CONFIRM": "Bestätigen",
"DISMISS": "Schließen",
"settings": "Einstellungen"
},

3
src/assets/i18n/en.json
View File

@@ -7,6 +7,9 @@
"share": "Share",
"timeSuffix": "",
"modal": {
"DISMISS_NEUTRAL": "Close",
"DISMISS_CANCEL": "Cancel",
"DISMISS_CONFIRM": "Confirm",
"DISMISS": "Close",
"settings": "Settings"
},

BIN
src/assets/icons.min.woff2
View File

Binary file not shown.