src/app/component/favorite/favorite.component.ts
selector | app-favorite |
styleUrls | ./favorite.component.css |
templateUrl | ./favorite.component.html |
プロパティ |
|
メソッド |
|
constructor(router: Router, dialog: MatDialog, dataService: DataService, stateService: StateService, changeDetectorRef: ChangeDetectorRef)
|
||||||||||||||||||
パラメータ :
|
clickFavoriteButton | ||||
clickFavoriteButton(doc)
|
||||
デコレータ :
@Catch()
|
||||
パラメータ :
戻り値 :
void
|
Async deleteDoc | ||||
deleteDoc(doc)
|
||||
デコレータ :
@Catch()
|
||||
パラメータ :
戻り値 :
any
|
Async init |
init()
|
デコレータ :
@Catch()
|
戻り値 :
any
|
ngOnDestroy |
ngOnDestroy()
|
デコレータ :
@Catch()
|
戻り値 :
void
|
ngOnInit |
ngOnInit()
|
デコレータ :
@Catch()
|
戻り値 :
void
|
Async openDialog | ||||
openDialog(doc)
|
||||
デコレータ :
@Catch()
|
||||
パラメータ :
戻り値 :
any
|
Async refresh |
refresh()
|
デコレータ :
@Catch()
|
戻り値 :
any
|
Async showPhoto | ||||
showPhoto(doc)
|
||||
デコレータ :
@Catch()
|
||||
パラメータ :
戻り値 :
{}
|
trackByFn | ||||||
trackByFn(index, doc)
|
||||||
パラメータ :
戻り値 :
any
|
Public dataService |
Type : DataService
|
Public dialog |
Type : MatDialog
|
dialogRef |
docs |
Public stateService |
Type : StateService
|
subscription |
Type : Subscription
|
import {ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core';
import {DataService} from '../../service/data.service';
import {Router} from '@angular/router';
import {MatDialog} from '@angular/material';
import {DetailDialogComponent} from '../detail/detail.dialog';
import {MyEvent, StateService} from '../../service/state.service';
import {Subscription} from 'rxjs';
import * as blobUtil from 'blob-util';
import {Catch} from '../../class/log.class';
@Component({
selector: 'app-favorite',
templateUrl: './favorite.component.html',
styleUrls: ['./favorite.component.css']
})
export class FavoriteComponent implements OnInit, OnDestroy {
docs;
subscription: Subscription;
dialogRef;
constructor(
private router: Router,
public dialog: MatDialog,
public dataService: DataService,
public stateService: StateService,
private changeDetectorRef: ChangeDetectorRef,
) {
this.subscription = this.stateService.subscribe(
MyEvent.DB_UPDATE, (() => {
this.refresh();
}));
}
@Catch()
ngOnInit() {
this.init();
}
//初期表示データ取得
@Catch()
async init() {
// try {
this.docs = await this.dataService.getFavorite();
console.dir(this.docs);
// } catch (error) {
// throw new Error("お気に入りデータの取得失敗" + error.message);
// }
}
@Catch()
async refresh() {
// this.stateService.openSnackBar("favoriteDbが更新されました",1000);
await this.init();
this.changeDetectorRef.detectChanges();
console.log('@@@ 同期を表示に反映');
}
trackByFn(index, doc) {
return doc.serial; // or item.id
}
//写真の表示
@Catch()
async showPhoto(doc) {
try {
let blob = await this.dataService.getPhoto(doc, false);
return await blobUtil.blobToDataURL(blob);
} catch (error) {
this.stateService.openSnackBar('写真の表示失敗' + error.message);
}
}
@Catch()
clickFavoriteButton(doc) {
try {
let res = doc.isFavorite ? this.dataService.deleteFavorite(doc) : this.dataService.saveFavorite(doc);
doc.isFavorite = !doc.isFavorite;
} catch (error) {
throw new Error('お気に入り更新失敗' + error.message);
}
}
@Catch()
async deleteDoc(doc) {
// try {
await this.dataService.deleteFavorite(doc);
await this.refresh();
// } catch (error) {
// throw new Error("お気に入りの削除に失敗" + error.message);
// }
}
@Catch()
async openDialog(doc) {
this.dialogRef = this.dialog.open(DetailDialogComponent,
{
data: {doc: doc, docs: this.docs}
});
this.dialogRef.docs = this.docs;
}
@Catch()
ngOnDestroy() {
this.subscription.unsubscribe();
}
}
<div style="position:static; margin:10px;height:100%;">
<div
*ngFor="let doc of docs; let i = index"
style="border:2px solid silver;font-family:sans-serif ;
margin:10px auto"
>
<!--へッダーエリア-->
<div style="background-color: beige;height:45px;padding:5px;
display:flex;flex-direction:row;border-bottom:solid gray 1px; ">
<div style="margin:auto auto auto 0;color:black;
font-weight: bold;text-align: left;overflow: hidden;
display:flex;align-items: center">
<mat-icon (click)="clickFavoriteButton(doc)" class="myFavoriteButton"
style="align-self:center;margin: auto 0.2em ;">
{{doc.isFavorite?"favorite":"favorite_border"}}
</mat-icon>
<span class="myTitle" style="color:black;">
{{doc.name}}
<span class="mySubTitle">({{doc.timestr}}登録)</span>
</span>
</div>
<div style="display:flex;align-items: center">
<button mat-mini-fab
color="accent"
style="margin-right: 10px ;"
(click)="openDialog(doc)">詳細
</button>
</div>
</div>
<!-- 説明文 -->
<div style="height:80px;padding:10px;font-size:15px;overflow: hidden">
<span class="mySubTitle" >
{{doc.prefName}}>{{doc.genreName}}
[{{doc._id}}]
<br>
</span>
<span class="myText">
{{doc.descript}}
</span>
</div>
</div>
<div *ngIf="docs" style="background-color: orange;text-align: center">データ末尾</div>
</div>
./favorite.component.css