Add refreshing pages in hydrus

src/app/file-info-sheet/file-info-sheet.component.ts

@@ -246,19 +246,19 @@ export class FileInfoSheetComponent {
   }
 
   searchTags(tags: HydrusSearchTags) {
+    this.dialogRef.dismiss(true);
     this.router.navigate(['/'], {queryParams: {'tags': JSON.stringify(tags)}});
-    this.dialogRef.dismiss(true)
   }
 
   addSearchTags(tags: HydrusSearchTags) {
-    this.router.navigate(['/'], {queryParams: {'addTags': JSON.stringify(tags)}});
     this.dialogRef.dismiss(true);
+    this.router.navigate(['/'], {queryParams: {'addTags': JSON.stringify(tags)}});
   }
 
   searchSimilarFiles() {
+    this.dialogRef.dismiss(true);
     const tag = `system:similar to ${this.data.file.hash} distance 4`;
     this.router.navigate(['/'], {queryParams: {'tags': JSON.stringify([tag])}});
-    this.dialogRef.dismiss(true);
   }
 
   async deleteTag(tag: string, serviceKey: string) {

src/app/files-page/files-page.component.html

@@ -1 +1,11 @@
 <app-image-list-loader [fileIDs]="this.pageInfo ? this.pageInfo.media.hash_ids : []"></app-image-list-loader>
+<app-toolbar-actions>
+  <span class="mat-small toolbar-count">{{this.pageInfo?.media?.num_files}}</span>
+  <button type="button" mat-icon-button aria-label="Refresh" (click)="refreshButton$.next(null)"><mat-icon>refresh</mat-icon></button>
+  <button type="button" mat-icon-button [matMenuTriggerFor]="filesPageToolbarmenu">
+    <mat-icon>more_vert</mat-icon>
+  </button>
+  <mat-menu #filesPageToolbarmenu="matMenu">
+    <button type="button" mat-menu-item [disabled]="(this.canRefreshInHydrus$ | async) === false" (click)="refreshPageButton$.next(null)"><mat-icon>update</mat-icon>Refresh page in Hydrus</button>
+  </mat-menu>
+</app-toolbar-actions>

src/app/files-page/files-page.component.ts

@@ -1,10 +1,12 @@
 import { Component, OnInit, Input, Optional } from '@angular/core';
 import { HydrusPageListItem, HydrusPage,  } from '../hydrus-page';
 import { HydrusPagesService } from '../hydrus-pages.service';
-import { Subscription, Observable } from 'rxjs';
+import { Subscription, Observable, Subject, switchMap, map, tap } from 'rxjs';
 import { AppComponent } from '../app.component';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { PagesComponent } from '../pages/pages.component';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { HydrusVersionService } from '../hydrus-version.service';
 
 @UntilDestroy()
 @Component({
@@ -15,14 +17,24 @@ import { PagesComponent } from '../pages/pages.component';
 export class FilesPageComponent implements OnInit {
 
   @Input() pageListItem: HydrusPageListItem;
-  @Input() refresh?: Observable<any>;
 
   pageInfo: HydrusPage;
 
-  constructor(public pagesService: HydrusPagesService) { }
+  constructor(
+    public pagesService: HydrusPagesService,
+    private snackbar: MatSnackBar,
+    private versionService: HydrusVersionService
+  ) { }
 
   loadSub: Subscription;
 
+  public refreshButton$: Subject<boolean> = new Subject();
+  public refreshPageButton$: Subject<boolean> = new Subject();
+
+  public canRefreshInHydrus$ = this.versionService.hydrusVersion$.pipe(
+    map(v => v && v.hydrus_version >= 512),
+  )
+
   load() {
     this.loadSub?.unsubscribe();
     this.pageInfo = null;
@@ -35,11 +47,22 @@ export class FilesPageComponent implements OnInit {
 
   ngOnInit() {
     this.load();
-    if (this.refresh) {
-      this.refresh.pipe(untilDestroyed(this)).subscribe(() => {
+    this.refreshButton$.pipe(untilDestroyed(this)).subscribe(() => this.load());
+    this.refreshPageButton$.pipe(untilDestroyed(this)).pipe(
+      switchMap(() => this.pagesService.refreshPage(this.pageListItem.page_key))
+    ).subscribe(() => {
+      const snackbarRef = this.snackbar.open('Page refreshed in Hydrus', 'Refresh view', {
+        duration: 2000
+      });
+      snackbarRef.onAction().subscribe(() => {
         this.load();
+      })
+    }, (err) => {
+      this.snackbar.open(`Error refreshing page: ${err}`, null, {
+        duration: 2000
       });
-    }
+    })
+
   }
 
 

src/app/hydrus-api.service.ts

@@ -255,9 +255,14 @@ export class HydrusApiService {
   public getPageInfo(page_key: string, simple?: string) {
     let httpParams: HttpParams = new HttpParams().set('page_key', page_key);
     if (simple) { httpParams = httpParams.set('simple', simple); }
-    return this.apiGet('manage_pages/get_page_info', httpParams);
+    return this.apiGet('manage_pages/get_page_info', httpParams, true);
   }
 
+  public refreshPage(page_key: string) {
+    return this.apiPost<{page_key: string}>('manage_pages/refresh_page', {page_key});
+  }
+
+
   /**
    * GET /add_urls/get_url_files
    *

src/app/hydrus-pages.service.ts

@@ -4,8 +4,6 @@ import { HydrusApiService } from './hydrus-api.service';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
-/* eslint-disable @typescript-eslint/dot-notation */
-
 @Injectable({
   providedIn: 'root'
 })
@@ -21,4 +19,8 @@ export class HydrusPagesService {
     return this.api.getPageInfo(pageKey, 'true').pipe(map(val => val['page_info']));
   }
 
+  refreshPage(pageKey: string) {
+    return this.api.refreshPage(pageKey);
+  }
+
 }

src/app/pages/pages.component.html

@@ -8,7 +8,7 @@
           <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: page.pages }"></ng-container>
         </div>
         <div *ngIf="page.page_type === 6 || page.page_type === 7 || page.page_type === 3 || page.page_type === 1 || page.page_type === 2">
-          <app-files-page [pageListItem]="page" [refresh]="refreshButton$"></app-files-page>
+          <app-files-page [pageListItem]="page"></app-files-page>
         </div>
       </ng-template>
     </mat-tab>
@@ -30,7 +30,3 @@
     </mat-card-actions>
   </mat-card>
 </ng-template>
-
-<app-toolbar-actions>
-  <button type="button" mat-icon-button aria-label="Refresh" (click)="refreshButton$.next(null)"><mat-icon>refresh</mat-icon></button>
-</app-toolbar-actions>

src/app/pages/pages.component.ts

@@ -22,8 +22,6 @@ export class PagesComponent implements OnInit {
 
   pages: HydrusPageListItem[] = [];
 
-  public refreshButton$: Subject<boolean> = new Subject();
-
   ngOnInit() {
     if (this.hydrusApiUrl && this.hydrusApiKey) {
       this.pagesService.getAllPages().subscribe(

src/app/saucenao-dialog/saucenao-dialog.component.scss

@@ -78,3 +78,9 @@ $header-size: 40px !default;
   // in IE, but we're using it as a progressive enhancement.
   object-fit: cover;
 }
+
+mat-icon.mat-card-avatar {
+  width: 40px;
+  height: 40px;
+  font-size: 40px;
+}

src/app/toolbar-actions/toolbar-actions.component.ts

@@ -22,7 +22,9 @@ export class ToolbarActionsComponent implements OnInit, OnDestroy, AfterViewInit
   }
 
   ngOnDestroy(): void {
-    this.appComponent.toolbarActionsPortal.detach();
+    if(this.appComponent.toolbarActionsPortal.portal === this.portal) {
+      this.appComponent.toolbarActionsPortal.detach();
+    }
   }
 
 }