Wire in saved page merge strategies to the UI

This commit is contained in:
Jeremy Wall 2020-08-09 17:49:27 -04:00
parent 27569e4c50
commit ece4935d34
9 changed files with 96 additions and 15 deletions

View File

@ -1107,10 +1107,10 @@ class StringUtils {
}
export enum Overlap {
Intersect,
Subset,
Equal,
None,
Intersect = 'Is Overlapping',
Subset = 'Is Contained In',
Equal = 'Is Equal',
None = 'None',
}
export interface Book {

View File

@ -28,7 +28,7 @@ export function maybeMergeCards(leftCard: CardItem, rightCard: CardItem, strateg
return null;
}
export function mergeCardList(cardList: CardItem[], strategy: Overlap) {
export function mergeCardList(cardList: readonly CardItem[], strategy: Overlap): CardItem[] {
if (strategy === Overlap.None || cardList.length === 0) {
return [...cardList];
}

View File

@ -59,6 +59,26 @@
</mat-list-item>
</mat-nav-list>
<mat-toolbar>Saved Page Settings</mat-toolbar>
<mat-nav-list>
<div class="setting-item">
<div class="settings-h2">Card Merging Strategy</div>
<mat-form-field class="full-width">
<mat-select
[(value)]="cardMergeStrategy"
(selectionChange)="pageCardMergeSettingsSelected($event)"
>
<mat-option
*ngFor="let overlap of cardMergeStrategies"
[value]="overlap"
>
{{ overlap }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</mat-nav-list>
<mat-toolbar>Display Settings</mat-toolbar>
<mat-nav-list>
<mat-list-item>
@ -95,7 +115,7 @@
<mat-nav-list>
<div class="setting-item">
<div class="settings-h2">Card Font Family</div>
<mat-form-field class="card-fonts">
<mat-form-field class="full-width">
<mat-select
[(value)]="cardFontFamily"
(selectionChange)="cardFontSelected($event)"

View File

@ -1,6 +1,3 @@
.card-fonts {
width: 100%;
}
.font-size-slider {
width: 100%;
}

View File

@ -20,6 +20,7 @@ import { OkCancelModalComponent, OkCancelResult } from '../ok-cancel-modal/ok-ca
import { PageEditModalComponent } from 'src/app/components/page-edit-modal/page-edit-modal.component';
import { NoteEditModalComponent } from 'src/app/components/note/edit-modal/note-edit-modal.component';
import { SavedPage } from 'src/app/models/page-state';
import { Overlap } from 'src/app/common/bible-reference';
@Component({
selector: 'app-settings',
@ -31,6 +32,8 @@ export class SettingsComponent extends SubscriberBase {
fonts: string[];
cardFontFamily = '';
cardFontSize = 10;
cardMergeStrategy = Overlap.Equal;
cardMergeStrategies = [];
currentSavedPage$ = this.appService.select((state) => state.currentSavedPage);
user$ = this.appService.select((state) => state.user);
@ -44,11 +47,15 @@ export class SettingsComponent extends SubscriberBase {
) {
super();
this.fonts = CardFonts;
for (const enumIdx in Overlap) {
this.cardMergeStrategies.push(Overlap[enumIdx]);
}
this.addSubscription(
this.appService.state$.subscribe((state) => {
this.displaySettings = state.displaySettings.value;
this.cardFontFamily = state.displaySettings.value.cardFontFamily;
this.cardFontSize = state.displaySettings.value.cardFontSize;
this.cardMergeStrategy = state.pageSettings.value.mergeStrategy;
})
);
@ -111,6 +118,14 @@ export class SettingsComponent extends SubscriberBase {
//#endregion
//#region Saved Page Settings
pageCardMergeSettingsSelected(evt: MatSelectChange) {
this.appService.changeCardMergeSettings(evt.value);
}
//#endregion
//#region Font Settings
cardFontSelected(evt: MatSelectChange) {

View File

@ -1,9 +1,10 @@
import { Error, DisplaySettings, User } from '../models/app-state';
import { Error, DisplaySettings, PageSettings, User } from '../models/app-state';
import { IStorable } from '../common/storable';
import { NoteItem } from '../models/note-state';
import { MoveDirection } from '../common/move-direction';
import { SavedPage } from '../models/page-state';
import { CardItem } from '../models/card-state';
import { Overlap } from '../common/bible-reference';
export class AppActionFactory {
static newGetSavedPage(pageId: string) {
@ -217,6 +218,14 @@ export type AppAction =
type: 'UPDATE_ERROR';
error: Error;
}
| {
type: 'UPDATE_CARD_MERGE_STRATEGY';
cardMergeStrategy: Overlap;
}
| {
type: 'UPDATE_PAGE_SETTINGS';
settings: IStorable<PageSettings>;
}
| {
type: 'UPDATE_CARD_FONT_SIZE';
cardFontSize: number;

View File

@ -1,10 +1,11 @@
import { UUID } from 'angular2-uuid';
import { AppState, DisplaySettings } from '../models/app-state';
import { AppState, DisplaySettings, PageSettings } from '../models/app-state';
import { IStorable, Storable } from '../common/storable';
import { NoteItem } from '../models/note-state';
import { MoveDirection } from '../common/move-direction';
import { mergeCardList } from '../common/card-operations';
import { AppAction } from './app-state-actions';
import { initialState } from './app-state-initial-state';
@ -43,6 +44,30 @@ export function reducer(state: AppState, action: AppAction): AppState {
}
switch (action.type) {
//#region
case 'UPDATE_CARD_MERGE_STRATEGY': {
const settings = new Storable<PageSettings>({
...state.displaySettings.value,
mergeStrategy: action.cardMergeStrategy,
});
return reducer(state, {
type: 'UPDATE_PAGE_SETTINGS',
settings,
});
}
case 'UPDATE_PAGE_SETTINGS': {
return maybeMutateStorable(state, action.settings, state.pageSettings, (item) => {
return {
...state,
pageSettings: item,
};
});
}
//#endregion
//#region Display Settings
case 'UPDATE_DISPLAY_SETTINGS': {
@ -129,7 +154,7 @@ export function reducer(state: AppState, action: AppAction): AppState {
{
id: state.currentSavedPage.id,
title: state.currentSavedPage.title,
queries: [...state.cards], // need a function that processes the cards to merge references.
queries: [...mergeCardList(state.cards, state.pageSettings.value.mergeStrategy)],
},
]);
@ -145,7 +170,7 @@ export function reducer(state: AppState, action: AppAction): AppState {
// create a new saved page object
title: action.title,
id: UUID.UUID().toString(),
queries: [...state.cards], // need a function that processes the cards to merge references.
queries: [...mergeCardList(state.cards, state.pageSettings.value.mergeStrategy)],
},
]);
@ -171,7 +196,7 @@ export function reducer(state: AppState, action: AppAction): AppState {
const savedPages = new Storable([
...state.savedPages.value.map((o) => {
if (o.id.toString() === action.pageId) {
let cards = [];
let cards = [] as CardItem[];
if (state.displaySettings.value.appendCardToBottom) {
cards = [...o.queries, action.card];
} else {
@ -179,7 +204,7 @@ export function reducer(state: AppState, action: AppAction): AppState {
}
return {
...o,
queries: cards,
queries: mergeCardList(cards, state.pageSettings.value.mergeStrategy),
};
}
return o;

View File

@ -134,6 +134,17 @@ export class AppService extends createStateService(reducer, initialState) {
//#endregion
//#region Saved Page Settings
changeCardMergeSettings(strategy: Overlap) {
this.dispatch({
type: 'UPDATE_CARD_MERGE_STRATEGY',
cardMergeStrategy: strategy,
});
}
//#endregion
//#region Display Settings
changeCardFontFamily(cardFont: string) {

View File

@ -145,3 +145,7 @@ a {
box-shadow: none !important;
border: 1px solid #eee;
}
.full-width {
width: 100%;
}