Fix file status not updating visually

TG-107 #closed

Signed-off-by: trivernis <trivernis@protonmail.com>
pull/18/head
trivernis 2 years ago
parent f033589fcb
commit 71d4287246
Signed by: Trivernis
GPG Key ID: DFFFCC2C7A02DB45

@ -1,9 +1,14 @@
import {FileBasicData, FileStatus} from "../api-types/files";
import {BehaviorSubject, Observable} from "rxjs";
export class File {
private statusSubject: BehaviorSubject<FileStatus>;
constructor(
private basicData: FileBasicData,
) {
this.statusSubject = new BehaviorSubject(basicData.status);
}
public get rawData(): FileBasicData {
@ -18,15 +23,20 @@ export class File {
return this.basicData.cd;
}
public get status(): FileStatus {
return this.basicData.status;
public get status(): Observable<FileStatus> {
return this.statusSubject.asObservable();
}
public get mimeType(): string {
return this.basicData.mime_type;
}
public set status(value: FileStatus) {
public setStatus(value: FileStatus) {
this.basicData.status = value;
this.statusSubject.next(value);
}
public get mimeType(): string {
return this.basicData.mime_type;
public getStatus(): FileStatus {
return this.basicData.status;
}
}

@ -56,7 +56,7 @@ export class FileActionBaseComponent {
if (changeConfirmed) {
await this.errorBroker.try(async () => {
const newFile = await this.fileService.updateFileStatus(files[0].id, status);
files[0].status = newFile.status;
files[0].setStatus(newFile.getStatus());
});
}
} else {
@ -72,7 +72,7 @@ export class FileActionBaseComponent {
files,
(file) => this.errorBroker.try(async () => {
const newFile = await this.fileService.updateFileStatus(file.id, status);
file.status = newFile.status;
file.setStatus(newFile.getStatus());
})
);
}

@ -5,7 +5,6 @@
<app-file-thumbnail
(loadEnd)="this.loading = false"
[class.hidden]="this.loading"
[fileChanged]="this.fileChanged"
[file]="this.entry.data"
class="entry-image"></app-file-thumbnail>
</app-busy-indicator>

@ -13,7 +13,6 @@ import {
import {File} from "../../../../../api/models/File";
import {Selectable} from "../../../../models/Selectable";
import {SchedulingService} from "../../../../services/scheduling/scheduling.service";
import {BehaviorSubject} from "rxjs";
const LOADING_WORK_KEY = "FILE_THUMBNAIL_LOADING";
@ -26,7 +25,6 @@ const LOADING_WORK_KEY = "FILE_THUMBNAIL_LOADING";
export class FileCardComponent implements OnInit, OnChanges, OnDestroy {
@Input() public entry!: Selectable<File>;
@Input() public fileChanged: BehaviorSubject<void> = new BehaviorSubject<void>(undefined);
@Output() clickEvent = new EventEmitter<FileCardComponent>();
@Output() dblClickEvent = new EventEmitter<FileCardComponent>();
@ -47,9 +45,6 @@ export class FileCardComponent implements OnInit, OnChanges, OnDestroy {
this.cachedId = this.entry.data.id;
this.loading = true;
}
if (changes["fileChanged"]) {
this.fileChanged.subscribe(() => this.changeDetector.markForCheck());
}
}
public ngOnDestroy(): void {
@ -62,19 +57,4 @@ export class FileCardComponent implements OnInit, OnChanges, OnDestroy {
console.debug(this.entry.data.id);
this.clickEvent.emit(this);
}
private setImageDelayed() {
if (this.workId) {
this.schedulingService.cancelWork(LOADING_WORK_KEY, this.workId);
}
this.loading = true;
this.workId = this.schedulingService.addWork(
LOADING_WORK_KEY,
async () => {
await this.schedulingService.delay(0);
this.loading = false;
this.changeDetector.markForCheck();
}
);
}
}

@ -60,11 +60,11 @@ export class FileContextMenuComponent extends FileActionBaseComponent implements
this.actionDelete = this.actionArchive = this.actionImported = this.actionRestore = false;
for (const file of this.files) {
this.actionDeletePermantently &&= file.status === "Deleted";
this.actionDelete ||= file.status !== "Deleted";
this.actionArchive ||= file.status !== "Archived" && file.status !== "Deleted";
this.actionImported ||= file.status !== "Imported" && file.status !== "Deleted";
this.actionRestore ||= file.status === "Deleted";
this.actionDeletePermantently &&= file.getStatus() === "Deleted";
this.actionDelete ||= file.getStatus() !== "Deleted";
this.actionArchive ||= file.getStatus() !== "Archived" && file.getStatus() !== "Deleted";
this.actionImported ||= file.getStatus() !== "Imported" && file.getStatus() !== "Deleted";
this.actionRestore ||= file.getStatus() === "Deleted";
}
}
}

@ -24,11 +24,10 @@
<div #previewStripContainer class="file-preview-strip-container">
<div *ngFor="let entry of this.previewedEntries; trackBy: trackByFileId" class="file-item">
<app-file-card (clickEvent)="onEntrySelect($event.entry)" *ngIf="entry"
[entry]="entry" [fileChanged]="this.fileChanged"></app-file-card>
[entry]="entry"></app-file-card>
</div>
</div>
</div>
</div>
<app-file-context-menu #fileContextMenu
(fileDeleted)="this.fileDeleted.emit($event)"
(fileStatusChange)="this.onFileStatusChange()"></app-file-context-menu>
(fileDeleted)="this.fileDeleted.emit($event)"></app-file-context-menu>

@ -19,7 +19,6 @@ import {SafeResourceUrl} from "@angular/platform-browser";
import {Selectable} from "../../../../../models/Selectable";
import {TabService} from "../../../../../services/tab/tab.service";
import {Key} from "w3c-keys";
import {BehaviorSubject} from "rxjs";
@Component({
selector: "app-file-gallery",
@ -43,7 +42,6 @@ export class FileGalleryComponent implements OnChanges, OnInit, AfterViewInit, A
public entries: Selectable<File>[] = [];
public selectedFile: Selectable<File> | undefined;
public fileContentUrl: SafeResourceUrl | undefined;
public fileChanged = new BehaviorSubject<void>(undefined);
public selectedIndex = 0;
public imageViewHeightPercent = 80;
@ -182,10 +180,6 @@ export class FileGalleryComponent implements OnChanges, OnInit, AfterViewInit, A
return item?.data.id;
}
public onFileStatusChange(): void {
this.fileChanged.next();
}
public togglePreviewStrip(): void {
if (this.previewStripVisible) {
this.imageViewHeightPercent = 100;

@ -14,7 +14,7 @@
(contextmenu)="this.selectEntryWhenNotSelected(gridEntry); fileContextMenu.onContextMenu($event, this.getSelectedFiles())"
(dblClickEvent)="fileOpen.emit($event.entry.data)"
*ngIf="gridEntry"
[entry]="gridEntry" [fileChanged]="this.fileChanged"></app-file-card>
[entry]="gridEntry"></app-file-card>
<div *ngIf="!gridEntry" class="empty-grid-entry"></div>
</ng-container>
</div>
@ -23,8 +23,7 @@
</div>
<app-file-context-menu #fileContextMenu
(fileDeleted)="this.fileDeleted.emit($event)"
(fileStatusChange)="this.onFileStatusChange()">
(fileDeleted)="this.fileDeleted.emit($event)">
<button (click)="this.fileOpen.emit(fileContextMenu.files[0])"
*ngIf="fileContextMenu.files.length === 1"
content-before=""

@ -20,7 +20,6 @@ import {TabService} from "../../../../../services/tab/tab.service";
import {FileService} from "../../../../../services/file/file.service";
import {Selectable} from "../../../../../models/Selectable";
import {Key} from "w3c-keys";
import {BehaviorSubject} from "rxjs";
import {LoggingService} from "../../../../../services/logging/logging.service";
@Component({
@ -41,7 +40,6 @@ export class FileGridComponent implements OnChanges, OnInit, AfterViewInit, Afte
@ViewChild("virtualScrollGrid") virtualScroll!: CdkVirtualScrollViewport;
@ViewChild("inner") inner!: ElementRef<HTMLDivElement>;
public fileChanged = new BehaviorSubject<void>(undefined);
public selectedEntries: Selectable<File>[] = [];
public partitionedGridEntries: (Selectable<File> | undefined)[][] = [];
@ -195,10 +193,6 @@ export class FileGridComponent implements OnChanges, OnInit, AfterViewInit, Afte
return item?.data.id;
}
public onFileStatusChange(): void {
this.fileChanged.next();
}
public calculateColumnCount() {
if (this.inner && this.inner.nativeElement) {
const width = Math.abs(this.inner.nativeElement.clientWidth);

@ -71,7 +71,7 @@ export class FileMultiviewComponent extends FileActionBaseComponent implements A
let deletePermanently = true;
for (const file of files) {
deletePermanently &&= file.status === "Deleted";
deletePermanently &&= file.getStatus() === "Deleted";
}
if (deletePermanently) {

@ -13,7 +13,7 @@
<ng-icon *ngIf="fileType === 'audio'" name="mat-audiotrack"></ng-icon>
<ng-icon *ngIf="fileType === 'text'" name="mat-description"></ng-icon>
</div>
<div *ngIf="file.status !== 'Archived'" class="file-status-icon">
<ng-icon *ngIf="file.status === 'Deleted'" name="mat-auto-delete"></ng-icon>
<ng-icon *ngIf="file.status === 'Imported'" name="mat-fiber-new"></ng-icon>
<div *ngIf="(file.status | async) !== 'Archived'" class="file-status-icon">
<ng-icon *ngIf="(file.status | async) === 'Deleted'" name="mat-auto-delete"></ng-icon>
<ng-icon *ngIf="(file.status | async) === 'Imported'" name="mat-fiber-new"></ng-icon>
</div>

@ -1,5 +1,4 @@
import {
AfterViewChecked,
AfterViewInit,
ChangeDetectionStrategy,
ChangeDetectorRef,
@ -14,7 +13,6 @@ import {File} from "../../../../../api/models/File";
import {FileService} from "../../../../services/file/file.service";
import {FileHelper} from "../../../../services/file/file.helper";
import {SafeResourceUrl} from "@angular/platform-browser";
import {BehaviorSubject} from "rxjs";
@Component({
selector: "app-file-thumbnail",
@ -22,10 +20,9 @@ import {BehaviorSubject} from "rxjs";
styleUrls: ["./file-thumbnail.component.scss"],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class FileThumbnailComponent implements OnChanges, AfterViewInit, AfterViewChecked {
export class FileThumbnailComponent implements OnChanges, AfterViewInit {
@Input() file!: File;
@Input() public fileChanged: BehaviorSubject<void> = new BehaviorSubject<void>(undefined);
@Output() loadEnd = new EventEmitter<void>();
public thumbUrl: SafeResourceUrl | undefined;
@ -34,7 +31,6 @@ export class FileThumbnailComponent implements OnChanges, AfterViewInit, AfterVi
public displayError = false;
private supportedThumbnailTypes = ["image", "video"];
private previousStatus = "imported";
constructor(private changeDetector: ChangeDetectorRef, private fileService: FileService) {
}
@ -45,13 +41,6 @@ export class FileThumbnailComponent implements OnChanges, AfterViewInit, AfterVi
}
}
public ngAfterViewChecked(): void {
if (this.file && this.file.status != this.previousStatus) {
this.previousStatus = this.file.status;
this.changeDetector.markForCheck();
}
}
public async ngOnChanges(changes: SimpleChanges) {
if (changes["file"]) {
this.thumbUrl = this.fileService.buildThumbnailUrl(this.file,
@ -61,9 +50,6 @@ export class FileThumbnailComponent implements OnChanges, AfterViewInit, AfterVi
this.thumbnailSupported = this.getThumbnailSupported();
this.displayError = false;
}
if (changes["fileChanged"]) {
this.fileChanged.subscribe(() => this.changeDetector.markForCheck());
}
}
public onImageLoadError(): void {

Loading…
Cancel
Save