remove test note card

tweak placeholder text in search
fix bug in error handling of passages, words, strongs
close the nav when a new page is initialized
don't store the page nav in state... pointless and you need the flexability
handle bug in words rendering if words are null
This commit is contained in:
Jason Wall 2020-08-17 12:59:10 -04:00
parent 93ed150eab
commit 4842f793fc
13 changed files with 31 additions and 58 deletions

View File

@ -2,7 +2,6 @@ import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router'; import { Routes, RouterModule } from '@angular/router';
import { SearchPage } from './pages/search/search.page'; import { SearchPage } from './pages/search/search.page';
import { SavedPagesAdminPage } from './pages/saved-pages-admin/saved-pages-admin.page'; import { SavedPagesAdminPage } from './pages/saved-pages-admin/saved-pages-admin.page';
import { HelpPage } from './components/help/help.page';
const routes: Routes = [ const routes: Routes = [
{ {

View File

@ -10,11 +10,11 @@
> >
<mat-toolbar>Pages</mat-toolbar> <mat-toolbar>Pages</mat-toolbar>
<mat-nav-list> <mat-nav-list>
<a <a mat-list-item [routerLink]="['search']"
*ngFor="let p of mainPages$ | async" ><mat-icon color="accenovert">search</mat-icon> Search</a
mat-list-item >
[routerLink]="[p.route]" <a mat-list-item [routerLink]="['saved', 'admin']"
><mat-icon color="accenovert">{{ p.icon }}</mat-icon> {{ p.title }}</a ><mat-icon color="accenovert">library_books</mat-icon> Page Admin</a
> >
<a mat-list-item (click)="showHelp()" <a mat-list-item (click)="showHelp()"
><mat-icon color="accenovert">help</mat-icon>Help</a ><mat-icon color="accenovert">help</mat-icon>Help</a

View File

@ -18,7 +18,6 @@ import { MatDialog } from '@angular/material/dialog';
}) })
export class AppComponent extends SubscriberBase implements AfterViewInit { export class AppComponent extends SubscriberBase implements AfterViewInit {
savedPages$ = this.appService.select((state) => (state.savedPages === null ? null : state.savedPages.value)); savedPages$ = this.appService.select((state) => (state.savedPages === null ? null : state.savedPages.value));
mainPages$ = this.appService.select((state) => state.mainPages);
fontSize$ = this.appService.select((state) => state.displaySettings.value.cardFontSize + 'pt'); fontSize$ = this.appService.select((state) => state.displaySettings.value.cardFontSize + 'pt');
cardFont$ = this.appService.select((state) => state.displaySettings.value.cardFontFamily); cardFont$ = this.appService.select((state) => state.displaySettings.value.cardFontFamily);
error$ = this.appService.select((state) => state.error); error$ = this.appService.select((state) => state.error);

View File

@ -12,7 +12,11 @@
<mat-icon>cancel</mat-icon> <mat-icon>cancel</mat-icon>
</button> </button>
</div> </div>
<div class="card-content" *ngIf="cardItem" #words> <div
class="card-content"
*ngIf="cardItem && cardItem.data && cardItem.data.refs"
#words
>
<span *ngFor="let ref of cardItem.data.refs" class="passage-button-wrapper" <span *ngFor="let ref of cardItem.data.refs" class="passage-button-wrapper"
><a class="passage-button" (click)="openPassage(ref)">{{ ><a class="passage-button" (click)="openPassage(ref)">{{
makePassage(ref) makePassage(ref)

View File

@ -1,15 +1,3 @@
export const PageTitles = {
Search: 'Search',
PageAdmin: 'Page Admin',
Help: 'Help',
};
export const PageIcons = {
Search: 'search',
PageAdmin: 'library_books',
Help: 'help',
};
export const CardIcons = { export const CardIcons = {
Words: 'font_download', Words: 'font_download',
Passage: 'menu_book', Passage: 'menu_book',

View File

@ -2,7 +2,7 @@ import { IStorable } from '../common/storable';
import { NoteItem } from './note-state'; import { NoteItem } from './note-state';
import { Overlap } from '../common/bible-reference'; import { Overlap } from '../common/bible-reference';
import { CardItem, CardIcons } from './card-state'; import { CardItem, CardIcons } from './card-state';
import { SavedPage, Page } from './page-state'; import { SavedPage } from './page-state';
export interface AppState { export interface AppState {
readonly currentSavedPage: SavedPage; readonly currentSavedPage: SavedPage;
@ -11,7 +11,6 @@ export interface AppState {
readonly displaySettings: IStorable<DisplaySettings>; readonly displaySettings: IStorable<DisplaySettings>;
readonly pageSettings: IStorable<PageSettings>; readonly pageSettings: IStorable<PageSettings>;
readonly savedPagesLoaded: boolean; readonly savedPagesLoaded: boolean;
readonly mainPages: readonly Page[];
readonly cards: readonly CardItem[]; readonly cards: readonly CardItem[];
readonly autocomplete: readonly string[]; readonly autocomplete: readonly string[];
readonly error: Error; readonly error: Error;

View File

@ -5,9 +5,3 @@ export interface SavedPage {
readonly title: string; readonly title: string;
readonly id: string; readonly id: string;
} }
export class Page {
readonly title: string;
readonly icon?: string;
readonly route: string;
}

View File

@ -1,5 +1,4 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { AppService } from '../../services/app.service'; import { AppService } from '../../services/app.service';
import { NavService } from '../../services/nav.service'; import { NavService } from '../../services/nav.service';
import { SubscriberBase } from '../../common/subscriber-base'; import { SubscriberBase } from '../../common/subscriber-base';
@ -12,9 +11,11 @@ import { SubscriberBase } from '../../common/subscriber-base';
export class SavedPagesAdminPage extends SubscriberBase implements OnInit { export class SavedPagesAdminPage extends SubscriberBase implements OnInit {
savedPages$ = this.appService.select((state) => (state.savedPages === null ? null : state.savedPages.value)); savedPages$ = this.appService.select((state) => (state.savedPages === null ? null : state.savedPages.value));
constructor(public navService: NavService, private appService: AppService, private dialog: MatDialog) { constructor(public navService: NavService, private appService: AppService) {
super(); super();
} }
ngOnInit() {} ngOnInit() {
this.navService.closeNav(); // close the nav immediately.
}
} }

View File

@ -8,7 +8,7 @@
class="search-bar-input" class="search-bar-input"
type="text" type="text"
aria-label="Search" aria-label="Search"
placeholder="Search" placeholder="Search e.g. John 3:16; Jesus; G25"
type="search" type="search"
autocomplete="off" autocomplete="off"
matInput matInput

View File

@ -14,7 +14,7 @@ mat-card {
.search-bar-input { .search-bar-input {
width: 100%; width: 100%;
border: 0; border: 0;
padding: 6px 55px; padding: 6px 6px 6px 55px;
border-radius: 0.2rem; border-radius: 0.2rem;
height: auto; height: auto;
font-size: 1.2rem; font-size: 1.2rem;

View File

@ -73,8 +73,8 @@ export class SearchPage extends SubscriberBase implements OnInit {
// if this is a saved page // if this is a saved page
const id = this.activatedRoute.snapshot.paramMap.get('id'); const id = this.activatedRoute.snapshot.paramMap.get('id');
this.onSavedPagedLoaded(id); this.onSavedPagedLoaded(id);
this.navService.closeNav(); // close the nav immediately.
} }
this.navService.closeNav(); // close the nav immediately.
} }
// monitor the saved paged loaded property, and fire the action once it turns true, then stop. // monitor the saved paged loaded property, and fire the action once it turns true, then stop.

View File

@ -1,39 +1,17 @@
import { UUID } from 'angular2-uuid';
import { AppState } from '../models/app-state'; import { AppState } from '../models/app-state';
import { PageTitles, PageIcons } from '../constants';
import { Overlap } from '../common/bible-reference'; import { Overlap } from '../common/bible-reference';
import { CardType, CardItem } from '../models/card-state';
import { NoteItem } from '../models/note-state';
const note: NoteItem = {
id: UUID.UUID(),
xref: '1 pe 2:16; jn 3:16',
title: 'Title Here',
content: '# Content Here\nIn Markdown format.',
} as NoteItem;
export const initialState: AppState = { export const initialState: AppState = {
user: null, user: null,
cards: [ cards: [],
{
qry: 'UUIDGOESHERE',
type: CardType.Note,
data: note,
} as CardItem,
],
autocomplete: [], autocomplete: [],
currentSavedPage: null, currentSavedPage: null,
savedPages: null, savedPages: null,
notes: { notes: {
createdOn: new Date(0).toISOString(), createdOn: new Date(0).toISOString(),
value: [note], value: [],
}, },
savedPagesLoaded: false, savedPagesLoaded: false,
mainPages: [
{ title: PageTitles.Search, icon: PageIcons.Search, route: 'search' },
{ title: PageTitles.PageAdmin, icon: PageIcons.PageAdmin, route: 'saved/admin' },
],
error: null, error: null,
displaySettings: { displaySettings: {
createdOn: new Date(0).toISOString(), createdOn: new Date(0).toISOString(),

View File

@ -213,6 +213,9 @@ export class AppService extends createStateService(reducer, initialState) {
async getStrongs(strongsNumber: string, dict: StrongsDictionary, nextToItem: CardItem = null) { async getStrongs(strongsNumber: string, dict: StrongsDictionary, nextToItem: CardItem = null) {
const card = await this.getStrongsCard(strongsNumber, dict); const card = await this.getStrongsCard(strongsNumber, dict);
if (!card) {
return; // nothing was returned. so an error occurred.
}
this.dispatch({ this.dispatch({
type: 'ADD_CARD', type: 'ADD_CARD',
@ -325,6 +328,10 @@ export class AppService extends createStateService(reducer, initialState) {
async getPassage(ref: BibleReference, nextToItem: CardItem = null) { async getPassage(ref: BibleReference, nextToItem: CardItem = null) {
const card = await this.composeBiblePassageCardItem(ref); const card = await this.composeBiblePassageCardItem(ref);
if (!card) {
return; // nothing was returned. so an error occurred.
}
this.dispatch({ this.dispatch({
type: 'ADD_CARD', type: 'ADD_CARD',
card, card,
@ -502,6 +509,10 @@ export class AppService extends createStateService(reducer, initialState) {
async getWords(qry: string, nextToItem: CardItem = null) { async getWords(qry: string, nextToItem: CardItem = null) {
const result = await this.getWordsFromApi(qry); const result = await this.getWordsFromApi(qry);
if (!result) {
return; // nothing was returned. so an error occurred.
}
const card = { const card = {
qry, qry,
type: CardType.Word, type: CardType.Word,