diff --git a/src/app/modules/dashboard/dashboard.module.ts b/src/app/modules/dashboard/dashboard.module.ts index d006d773..c8057690 100644 --- a/src/app/modules/dashboard/dashboard.module.ts +++ b/src/app/modules/dashboard/dashboard.module.ts @@ -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 . + * You should have received a copy of the GNU General Public License along with + * this program. If not, see . */ 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 {} diff --git a/src/app/modules/dashboard/edit-modal/edit-modal-type.enum.ts b/src/app/modules/dashboard/edit-modal/edit-modal-type.enum.ts index 5c3fb4ae..0e2aacc3 100644 --- a/src/app/modules/dashboard/edit-modal/edit-modal-type.enum.ts +++ b/src/app/modules/dashboard/edit-modal/edit-modal-type.enum.ts @@ -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 . + */ + export enum EditModalTypeEnum { CHECKBOXES, RADIOBOXES, } + +export interface EditModalItem { + id: unknown; + labelLocalized: string; + active: boolean; +} diff --git a/src/app/modules/dashboard/edit-modal/edit-modal.component.html b/src/app/modules/dashboard/edit-modal/edit-modal.component.html index 75d527ba..dab63c74 100644 --- a/src/app/modules/dashboard/edit-modal/edit-modal.component.html +++ b/src/app/modules/dashboard/edit-modal/edit-modal.component.html @@ -1,27 +1,30 @@ - + - {{ 'modal.settings' | translate }} - - + {{ 'modal.settings' | translate | titlecase }} + + {{ 'modal.DISMISS_CANCEL' | translate }} + + + {{ 'modal.DISMISS_CONFIRM' | translate }} - + - + - {{ item.label | translate }} + {{ item.labelLocalized }} - {{ item.name }} - + {{ item.labelLocalized }} + - - {{ - 'save' | translate - }} - {{ - 'abort' | translate - }} - diff --git a/src/app/modules/dashboard/edit-modal/edit-modal.component.ts b/src/app/modules/dashboard/edit-modal/edit-modal.component.ts index cdab51f4..0980ec57 100644 --- a/src/app/modules/dashboard/edit-modal/edit-modal.component.ts +++ b/src/app/modules/dashboard/edit-modal/edit-modal.component.ts @@ -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; diff --git a/src/app/modules/dashboard/sections/navigation-section/menu-item.interface.ts b/src/app/modules/dashboard/sections/navigation-section/menu-item.interface.ts index 4d231929..81541367 100644 --- a/src/app/modules/dashboard/sections/navigation-section/menu-item.interface.ts +++ b/src/app/modules/dashboard/sections/navigation-section/menu-item.interface.ts @@ -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 . + */ + 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; diff --git a/src/app/modules/dashboard/sections/navigation-section/menu-items.config.ts b/src/app/modules/dashboard/sections/navigation-section/menu-items.config.ts index 652d9f32..ed598c61 100644 --- a/src/app/modules/dashboard/sections/navigation-section/menu-items.config.ts +++ b/src/app/modules/dashboard/sections/navigation-section/menu-items.config.ts @@ -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 . + * You should have received a copy of the GNU General Public License along with + * this program. If not, see . */ -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 = { + 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, ]; diff --git a/src/app/modules/dashboard/sections/navigation-section/navigation-section.component.html b/src/app/modules/dashboard/sections/navigation-section/navigation-section.component.html index 0fed2bef..edd016ce 100644 --- a/src/app/modules/dashboard/sections/navigation-section/navigation-section.component.html +++ b/src/app/modules/dashboard/sections/navigation-section/navigation-section.component.html @@ -1,16 +1,16 @@ - - - - {{ menuItem.label | translate }} + + + + {{ menuItems[item].label | translate }} diff --git a/src/app/modules/dashboard/sections/navigation-section/navigation-section.component.ts b/src/app/modules/dashboard/sections/navigation-section/navigation-section.component.ts index bf788b97..3ab2d22a 100644 --- a/src/app/modules/dashboard/sections/navigation-section/navigation-section.component.ts +++ b/src/app/modules/dashboard/sections/navigation-section/navigation-section.component.ts @@ -13,12 +13,16 @@ * this program. If not, see . */ 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( 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), + ); } }); } diff --git a/src/app/util/ion-icon/ion-icon.module.ts b/src/app/util/ion-icon/ion-icon.module.ts index 7a92d086..d8e51479 100644 --- a/src/app/util/ion-icon/ion-icon.module.ts +++ b/src/app/util/ion-icon/ion-icon.module.ts @@ -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 . + * You should have received a copy of the GNU General Public License along with + * this program. If not, see . */ 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, diff --git a/src/app/util/ion-icon/ion-reorder.directive.ts b/src/app/util/ion-icon/ion-reorder.directive.ts new file mode 100644 index 00000000..bbac84b9 --- /dev/null +++ b/src/app/util/ion-icon/ion-reorder.directive.ts @@ -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 . + */ + +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, + }); + } +} diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json index 4e7cbb5b..b0af274f 100644 --- a/src/assets/i18n/de.json +++ b/src/assets/i18n/de.json @@ -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" }, diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index 7b18c2ab..95c9852a 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -7,6 +7,9 @@ "share": "Share", "timeSuffix": "", "modal": { + "DISMISS_NEUTRAL": "Close", + "DISMISS_CANCEL": "Cancel", + "DISMISS_CONFIRM": "Confirm", "DISMISS": "Close", "settings": "Settings" }, diff --git a/src/assets/icons.min.woff2 b/src/assets/icons.min.woff2 index 65744b72..1c93f73c 100644 Binary files a/src/assets/icons.min.woff2 and b/src/assets/icons.min.woff2 differ