Theaninova/openstapps
1
0
Fork 0
mirror of https://gitlab.com/openstapps/openstapps.git synced 2025-12-11 08:46:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: rename "recurring" to "week overview"

Browse Source 
refactor: replace dashboard calendar icon
resolves #128

refactor: route dashboard "next unit" to date series instead of events
resolves #126
This commit is contained in:
Thea Schöbl
2023-08-07 15:51:23 +00:00
parent 9abd397578
commit e1cc33bba2
14 changed files with 120 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/fluffy-lamps-count.md Normal file
View File

@@ -0,0 +1,5 @@
---
'@openstapps/app': minor
---
Added the ability to remove and add date series from their detail page

9
.changeset/pink-sheep-relax.md Normal file
View File

@@ -0,0 +1,9 @@
---
'@openstapps/app': minor
---
Improved calendar descriptions
- The dashboard quick link now has a more intuitive icon
- "Recurring" has been renamed to "Week Overview"
- Long words in calendar tabs will now break instead of overflowing

5
.changeset/tricky-garlics-hope.md Normal file
View File

@@ -0,0 +1,5 @@
---
'@openstapps/app': minor
---
Replaced simple links with list items in date-series detail

8
frontend/app/cypress/integration/dashboard.spec.ts
View File

@@ -20,12 +20,14 @@ describe('dashboard', async function () {
describe('schedule section', function () {
it('should lead to the schedule', function () {
cy.visit('/overview');
cy.get('.schedule').contains('a', 'Stundenplan').click();
cy.url().should('include', '/schedule/recurring');
cy.get('.schedule')
.contains('a', /Wochen.*übersicht/)
.click();
cy.url().should('include', '/schedule/week-overview');
cy.visit('/overview');
cy.get('.schedule').contains('a', 'Kein Eintrag gefunden').click();
cy.url().should('include', '/schedule/recurring');
cy.url().should('include', '/schedule/calendar');
});
// TODO: Reenable and stabilize tests

10
frontend/app/src/app/modules/dashboard/dashboard.component.html
View File

@@ -19,19 +19,19 @@
</ion-toolbar>
</ion-header>
<div #schedule class="schedule">
<a [routerLink]="['/schedule/recurring']">
<ion-icon size="40" weight="300" name="grid_view"></ion-icon>
<ion-label>{{ 'schedule.recurring' | translate }}</ion-label>
<a [routerLink]="['/schedule/week-overview']">
<ion-icon size="36" weight="300" name="calendar_month"></ion-icon>
<ion-label [innerHTML]="'schedule.recurring' | translate"></ion-label>
</a>
<!-- Avoid structural directives here, they might interfere with the collapse animation -->
<a
[routerLink]="nextEvent?.event ? ['/data-detail', nextEvent!.event.uid] : ['/schedule/recurring']"
[routerLink]="nextEvent ? ['/data-detail', nextEvent!.uid] : ['/schedule/calendar']"
class="schedule-item-button"
>
<ion-label>{{ 'dashboard.schedule.title' | translate }}</ion-label>
<ion-label>
{{
nextEvent?.event
nextEvent
? (nextEvent!.dates | nextDateInList | amDateFormat : 'll, HH:mm')
: ('dashboard.schedule.noEvent' | translate)
}}

1
frontend/app/src/app/modules/dashboard/dashboard.component.scss
View File

@@ -117,6 +117,7 @@ ion-content {
ion-label {
font-size: var(--font-size-xxs);
font-weight: var(--font-weight-semi-bold);
word-break: break-word;
}
&:hover ::ng-deep stapps-icon {

46
frontend/app/src/app/modules/data/types/date-series/date-series-detail-content.component.ts
View File

@@ -12,19 +12,49 @@
* 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 {Component, Input} from '@angular/core';
import {Component, Input, OnInit} from '@angular/core';
import {SCDateSeries} from '@openstapps/core';
import {ScheduleProvider, toDateSeriesRelevantData} from '../../../calendar/schedule.provider';
import {Observable} from 'rxjs';
import {map} from 'rxjs/operators';
import {DataRoutingService} from '../../data-routing.service';
import {Router} from '@angular/router';
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
/**
* TODO
*/
@Component({
selector: 'stapps-date-series-detail-content',
templateUrl: 'date-series-detail-content.html',
styleUrls: ['date-series-detail-content.scss'],
})
export class DateSeriesDetailContentComponent {
/**
* TODO
*/
export class DateSeriesDetailContentComponent implements OnInit {
@Input() item: SCDateSeries;
isInCalendar: Observable<boolean>;
constructor(
readonly scheduleProvider: ScheduleProvider,
dataRoutingService: DataRoutingService,
router: Router,
) {
dataRoutingService
.itemSelectListener()
.pipe(takeUntilDestroyed())
.subscribe(item => {
void router.navigate(['/data-detail', item.uid]);
});
}
ngOnInit() {
this.isInCalendar = this.scheduleProvider.uuids$.pipe(map(it => it.includes(this.item.uid)));
}
addToCalendar() {
const current = this.scheduleProvider.partialEvents$.value;
this.scheduleProvider.partialEvents$.next([...current, toDateSeriesRelevantData(this.item)]);
}
removeFromCalendar() {
const filtered = this.scheduleProvider.partialEvents$.value.filter(it => it.uid !== this.item.uid);
this.scheduleProvider.partialEvents$.next(filtered);
}
}

41
frontend/app/src/app/modules/data/types/date-series/date-series-detail-content.html
View File

@@ -12,23 +12,18 @@
~ 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-card>
<ion-card-header> {{ 'event' | propertyNameTranslate : item | titlecase }} </ion-card-header>
<ion-card-content>
<a [routerLink]="['/data-detail', item.event.uid]">{{ 'name' | thingTranslate : item.event }}</a>
</ion-card-content>
</ion-card>
<ion-card *ngIf="item.inPlace">
<ion-card-header> {{ 'inPlace' | propertyNameTranslate : item | titlecase }} </ion-card-header>
<ion-card-content>
<ion-icon name="pin_drop"> </ion-icon>
<a [routerLink]="['/data-detail', item.inPlace.uid]">{{ 'name' | thingTranslate : item.inPlace }}</a>
<stapps-address-detail
*ngIf="item.inPlace.address"
[address]="item.inPlace.address"
></stapps-address-detail>
</ion-card-content>
</ion-card>
<ng-container *ngIf="isInCalendar | async; else add">
<ion-chip outline="true" color="success" (click)="removeFromCalendar()">
<ion-icon name="event_available" fill="true"></ion-icon>
<ion-label>{{'chips.addEvent.addedToEvents' | translate}}</ion-label>
</ion-chip>
</ng-container>
<ng-template #add>
<ion-chip outline="true" color="primary" (click)="addToCalendar()">
<ion-icon name="calendar_today"></ion-icon>
<ion-label>{{'chips.addEvent.addEvent' | translate}}</ion-label>
</ion-chip>
</ng-template>
<stapps-simple-card
title="{{ 'duration' | propertyNameTranslate : item | titlecase }}"
[content]="[item.duration | amDuration : 'minutes']"
@@ -56,3 +51,15 @@
[content]="item.performers"
></stapps-simple-card>
<stapps-offers-detail *ngIf="item.offers" [offers]="item.offers"></stapps-offers-detail>
<ion-card>
<ion-card-header> {{ 'event' | propertyNameTranslate : item | titlecase }} </ion-card-header>
<ion-card-content>
<stapps-data-list-item [item]="$any(item.event)"></stapps-data-list-item>
</ion-card-content>
</ion-card>
<ion-card *ngIf="item.inPlace">
<ion-card-header> {{ 'inPlace' | propertyNameTranslate : item | titlecase }} </ion-card-header>
<ion-card-content>
<stapps-data-list-item [item]="$any(item.inPlace)"></stapps-data-list-item>
</ion-card-content>
</ion-card>

6
frontend/app/src/app/modules/data/types/date-series/date-series-detail-content.scss Normal file
View File

@@ -0,0 +1,6 @@
ion-chip {
position: absolute;
z-index: 1;
top: 0;
right: 0;
}

2
frontend/app/src/app/modules/schedule/page/schedule-page.component.ts
View File

@@ -136,7 +136,7 @@ export class SchedulePageComponent implements OnInit, AfterViewInit {
onInit() {
this.tabChoreographer = new SharedAxisChoreographer(this.activatedRoute.snapshot.paramMap.get('mode'), [
'calendar',
'recurring',
'week-overview',
'single',
]);
}

31
frontend/app/src/app/modules/schedule/page/schedule-page.html
View File

@@ -18,15 +18,18 @@
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title *ngIf="tabChoreographer.currentValue === 'calendar'"
>{{ 'schedule.calendar' | translate | titlecase }}</ion-title
>
<ion-title *ngIf="tabChoreographer.currentValue === 'recurring'"
>{{ 'schedule.recurring' | translate | titlecase }}</ion-title
>
<ion-title *ngIf="tabChoreographer.currentValue === 'single'"
>{{ 'schedule.single' | translate | titlecase }}</ion-title
>
<ion-title
*ngIf="tabChoreographer.currentValue === 'calendar'"
[innerHTML]="'schedule.calendar' | translate | titlecase"
></ion-title>
<ion-title
*ngIf="tabChoreographer.currentValue === 'week-overview'"
[innerHTML]="'schedule.recurring' | translate | titlecase"
></ion-title>
<ion-title
*ngIf="tabChoreographer.currentValue === 'single'"
[innerHTML]="'schedule.single' | translate | titlecase"
></ion-title>
<ion-buttons slot="end">
<ion-button (click)="onTodayClick()">
<ion-icon name="today" slot="icon-only"></ion-icon>
@@ -36,15 +39,15 @@
<ion-toolbar color="primary" mode="md" class="tabs-toolbar">
<ion-segment #segment value="calendar" (ionChange)="onSegmentChange()">
<ion-segment-button value="calendar" layout="icon-start">
<ion-label>{{ 'schedule.calendar' | translate }}</ion-label>
<ion-label class="ion-text-wrap" [innerHTML]="'schedule.calendar' | translate"></ion-label>
<ion-icon name="calendar_today"></ion-icon>
</ion-segment-button>
<ion-segment-button value="recurring" layout="icon-start">
<ion-label>{{ 'schedule.recurring' | translate }}</ion-label>
<ion-segment-button value="week-overview" layout="icon-start">
<ion-label class="ion-text-wrap" [innerHTML]="'schedule.recurring' | translate"></ion-label>
<ion-icon name="event_repeat"></ion-icon>
</ion-segment-button>
<ion-segment-button value="single" layout="icon-start">
<ion-label>{{ 'schedule.single' | translate }}</ion-label>
<ion-label class="ion-text-wrap" [innerHTML]="'schedule.single' | translate"></ion-label>
<ion-icon name="event_upcoming"></ion-icon>
</ion-segment-button>
</ion-segment>
@@ -59,7 +62,7 @@
>
<stapps-calendar-view *ngSwitchCase="'calendar'" [layout]="layout"></stapps-calendar-view>
<!-- Schedule view needs full week -->
<stapps-schedule-view *ngSwitchCase="'recurring'" [layout]="layout"></stapps-schedule-view>
<stapps-schedule-view *ngSwitchCase="'week-overview'" [layout]="layout"></stapps-schedule-view>
<stapps-single-events *ngSwitchCase="'single'"></stapps-single-events>
</div>

2
frontend/app/src/app/modules/schedule/schedule.module.ts
View File

@@ -41,7 +41,7 @@ import {ChooseEventsPageComponent} from './page/choose-events-page.component';
const settingsRoutes: Routes = [
{path: 'schedule', redirectTo: 'schedule/calendar/now'},
{path: 'schedule/calendar', redirectTo: 'schedule/calendar/now'},
{path: 'schedule/recurring', redirectTo: 'schedule/recurring/now'},
{path: 'schedule/week-overview', redirectTo: 'schedule/week-overview/now'},
{path: 'schedule/single', redirectTo: 'schedule/single/now'},
// calendar | recurring | single
{path: 'schedule/:mode/:date', component: SchedulePageComponent},

4
frontend/app/src/assets/i18n/de.json
View File

@@ -459,9 +459,9 @@
"view": {
"today": "Heute"
},
"recurring": "Stundenplan",
"recurring": "Wochen&shy;übersicht",
"calendar": "Kalender",
"single": "Einzeltermine",
"single": "Einzel&shy;termine",
"addEventPage": {
"TITLE": "Termine Hinzufügen",
"PLACEHOLDER": "Termine",

2
frontend/app/src/assets/i18n/en.json
View File

@@ -459,7 +459,7 @@
"view": {
"today": "Today"
},
"recurring": "Recurring",
"recurring": "Week Overview",
"calendar": "Calendar",
"single": "Single Events",
"addEventPage": {