src/app/booksearch/booksearch.page.ts
| selector | app-booksearch |
| styleUrls | ./booksearch.page.scss |
| templateUrl | ./booksearch.page.html |
Properties |
Methods |
constructor(bookService: BookService)
|
||||||
|
Defined in src/app/booksearch/booksearch.page.ts:14
|
||||||
|
Parameters :
|
| ngOnInit |
ngOnInit()
|
|
Defined in src/app/booksearch/booksearch.page.ts:17
|
|
Returns :
void
|
| authorCheckbox |
Default value : true
|
|
Defined in src/app/booksearch/booksearch.page.ts:12
|
| books |
Type : any
|
|
Defined in src/app/booksearch/booksearch.page.ts:13
|
| breakImageUrls | ||||
Default value : () => {...}
|
||||
|
Defined in src/app/booksearch/booksearch.page.ts:46
|
||||
|
Split the book image urls Some books contains array of urls so it should be separated otherwise it may not be able to preview |
||||
|
Parameters :
|
| generateSearchType |
Default value : () => {...}
|
|
Defined in src/app/booksearch/booksearch.page.ts:59
|
| loading |
Default value : false
|
|
Defined in src/app/booksearch/booksearch.page.ts:14
|
| searchForbooks |
Default value : () => {...}
|
|
Defined in src/app/booksearch/booksearch.page.ts:19
|
| titleCheckbox |
Default value : true
|
|
Defined in src/app/booksearch/booksearch.page.ts:11
|
import { BookService } from './../services/book/book.service';
import { Component, OnInit } from '@angular/core';
import { EventLoggerService } from '../services/logger/event-logger.service';
@Component({
selector: 'app-booksearch',
templateUrl: './booksearch.page.html',
styleUrls: ['./booksearch.page.scss']
})
export class BooksearchPage implements OnInit {
titleCheckbox = true;
authorCheckbox = true;
books: any;
loading = false;
constructor(private bookService: BookService) {}
ngOnInit() {}
searchForbooks = value => {
const searchType = this.generateSearchType();
if (value !== '') {
this.books = undefined;
this.loading = true;
this.bookService.searchBooks(value, searchType).then(data => {
this.books = JSON.parse(data.data['result']).map(record => {
const url = record['url'];
if (url) {
const alteredURL = this.breakImageUrls(url);
console.log('al', alteredURL);
record['url'] = alteredURL;
}
return record;
});
console.log(this.books);
this.loading = false;
});
console.log('value', value);
}
};
/**
* Split the book image urls
* Some books contains array of urls so it should be separated otherwise it may not be able to preview
* @param url - url string of the book images
*/
breakImageUrls = (url: string) => {
if (url.indexOf('|') !== -1) {
const image = url.split('|')[1];
console.log('image', image);
return image
.concat('.jpg')
.split(' ')
.join('');
} else {
return url;
}
};
generateSearchType = () => {
if (this.titleCheckbox && this.authorCheckbox) {
return 'both';
} else if (this.titleCheckbox) {
return 'title';
} else {
return 'author';
}
};
}
<app-menu-title title="Search"></app-menu-title>
<ion-content id="before-search">
<section>
<ion-searchbar
animated="true"
(ionChange)="searchForbooks($event.target.value)"
debounce="1000"
></ion-searchbar>
<div class="checkbox-panel">
<ion-item>
<ion-label>Title</ion-label>
<ion-checkbox slot="start" [(ngModel)]="titleCheckbox"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Authors</ion-label>
<ion-checkbox slot="start" [(ngModel)]="authorCheckbox"></ion-checkbox>
</ion-item>
</div>
<app-animated-text text="Search 💬"></app-animated-text>
</section>
<div id="no-result" *ngIf="books !== undefined && books.length === 0"></div>
<ion-card id="before-search" *ngIf="books === undefined && !loading"></ion-card>
<book-search-view [book]="book" *ngFor="let book of books"></book-search-view>
<!-- Skeleton view -->
<div *ngIf="loading">
<ion-list>
<ion-item *ngFor="let item of [1, 2, 3, 4, 5, 6, 7, 8, 9]">
<ion-thumbnail slot="start">
<ion-skeleton-text animated></ion-skeleton-text>
</ion-thumbnail>
<ion-label>
<h3>
<ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
</h3>
<p>
<ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
</p>
<p>
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
</p>
</ion-label>
</ion-item>
</ion-list>
</div>
</ion-content>
./booksearch.page.scss
.checkbox-panel {
display: flex;
}
#no-result {
width: 100%;
height: 80%;
background: url(../../assets/img/backgrounds/no-result.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%, auto;
}
#before-search {
height: 80%;
background: url(../../assets/img/backgrounds/search-web.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%, auto;
padding: 0;
}
/* For mobile devices */
@media only screen and (max-width: 767px) {
#before-search {
/* The file size of this background image is 93% smaller
* to improve page load speed on mobile internet connections */
background-image: url(../../assets/img/backgrounds/search-mobile.svg);
}
}