Igor Kulikov
3 years ago
15 changed files with 1310 additions and 18 deletions
@ -0,0 +1,269 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2023 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<div class="mat-padding tb-images tb-absolute-fill" [ngClass]="{'mat-padding': pageMode}"> |
|||
<div fxFlex fxLayout="column" class="tb-images-content" [ngClass]="{'tb-outlined-border': pageMode}"> |
|||
<mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="!textSearchMode && dataSource.selection.isEmpty()"> |
|||
<div class="mat-toolbar-tools"> |
|||
<span class="tb-images-title" translate>image.gallery</span> |
|||
<div class="tb-images-view-type-toolbar" |
|||
fxLayout="row" |
|||
fxLayoutAlign="start center"> |
|||
<div class="tb-toolbar-button" [ngClass]="{'tb-selected' : mode === 'list'}"> |
|||
<button mat-icon-button |
|||
(click)="setMode('list')" |
|||
matTooltip="{{'image.list-mode' | translate }}" |
|||
matTooltipPosition="below"> |
|||
<mat-icon>view_list</mat-icon> |
|||
</button> |
|||
</div> |
|||
<div class="tb-toolbar-button" [ngClass]="{'tb-selected' : mode === 'grid'}"> |
|||
<button mat-icon-button |
|||
(click)="setMode('grid');" |
|||
matTooltip="{{'image.grid-mode' | translate }}" |
|||
matTooltipPosition="below"> |
|||
<tb-icon>mdi:view-grid</tb-icon> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<section fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px"> |
|||
<span fxFlex></span> |
|||
<section fxLayout="row"> |
|||
<button [disabled]="isLoading$ | async" |
|||
mat-icon-button |
|||
(click)="enterFilterMode()" |
|||
matTooltip="{{'action.search' | translate }}" |
|||
matTooltipPosition="above"> |
|||
<mat-icon>search</mat-icon> |
|||
</button> |
|||
<button [disabled]="isLoading$ | async" |
|||
mat-icon-button |
|||
(click)="updateData()" |
|||
matTooltip="{{'action.refresh' | translate }}" |
|||
matTooltipPosition="above"> |
|||
<mat-icon>refresh</mat-icon> |
|||
</button> |
|||
<button [disabled]="isLoading$ | async" |
|||
mat-icon-button |
|||
(click)="importImage()" |
|||
matTooltip="{{'image.import-image' | translate }}" |
|||
matTooltipPosition="above"> |
|||
<mat-icon>upload</mat-icon> |
|||
</button> |
|||
</section> |
|||
<button [disabled]="isLoading$ | async" |
|||
mat-flat-button |
|||
color="primary" |
|||
(click)="uploadImage()"> |
|||
{{ 'image.upload-image' | translate }} |
|||
</button> |
|||
</section> |
|||
</mat-toolbar> |
|||
<mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode && dataSource.selection.isEmpty()"> |
|||
<div class="mat-toolbar-tools"> |
|||
<button mat-icon-button |
|||
matTooltip="{{ 'image.search' | translate }}" |
|||
matTooltipPosition="above"> |
|||
<mat-icon>search</mat-icon> |
|||
</button> |
|||
<mat-form-field fxFlex> |
|||
<mat-label> </mat-label> |
|||
<input #searchInput matInput |
|||
[formControl]="textSearch" |
|||
placeholder="{{ 'image.search' | translate }}"/> |
|||
</mat-form-field> |
|||
<button mat-icon-button (click)="exitFilterMode()" |
|||
matTooltip="{{ 'action.close' | translate }}" |
|||
matTooltipPosition="above"> |
|||
<mat-icon>close</mat-icon> |
|||
</button> |
|||
</div> |
|||
</mat-toolbar> |
|||
<mat-toolbar class="mat-mdc-table-toolbar" color="primary" [fxShow]="!dataSource.selection.isEmpty()"> |
|||
<div class="mat-toolbar-tools"> |
|||
<span> |
|||
{{ translate.get('image.selected-images', {count: dataSource.selection.selected.length}) | async }} |
|||
</span> |
|||
<span fxFlex></span> |
|||
<button mat-icon-button [disabled]="isLoading$ | async" |
|||
matTooltip="{{ 'action.delete' | translate }}" |
|||
matTooltipPosition="above" |
|||
(click)="deleteImages($event)"> |
|||
<mat-icon>delete</mat-icon> |
|||
</button> |
|||
</div> |
|||
</mat-toolbar> |
|||
<div fxFlex *ngIf="mode === 'list'" fxLayout="column"> |
|||
<div fxFlex class="table-container"> |
|||
<table mat-table [dataSource]="dataSource" [trackBy]="trackByEntityId" |
|||
matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear> |
|||
<ng-container matColumnDef="select" sticky> |
|||
<mat-header-cell *matHeaderCellDef style="width: 30px;"> |
|||
<mat-checkbox (change)="$event ? dataSource.masterToggle() : null" |
|||
[checked]="dataSource.selection.hasValue() && (dataSource.isAllSelected() | async)" |
|||
[indeterminate]="dataSource.selection.hasValue() && (dataSource.isAllSelected() | async) === false"> |
|||
</mat-checkbox> |
|||
</mat-header-cell> |
|||
<mat-cell *matCellDef="let image"> |
|||
<mat-checkbox (click)="$event.stopPropagation()" |
|||
(change)="$event ? dataSource.selection.toggle(image) : null" |
|||
[checked]="dataSource.selection.isSelected(image)"> |
|||
</mat-checkbox> |
|||
</mat-cell> |
|||
</ng-container> |
|||
<ng-container matColumnDef="preview"> |
|||
<mat-header-cell *matHeaderCellDef style="width: 50px; min-width: 50px;"></mat-header-cell> |
|||
<mat-cell *matCellDef="let image"> |
|||
<img class="tb-image-preview" [src]="image.link | image: {preview: true} | async" alt="{{ image.title }}"> |
|||
</mat-cell> |
|||
</ng-container> |
|||
<ng-container matColumnDef="title"> |
|||
<mat-header-cell *matHeaderCellDef mat-sort-header style="width: 100%;"> {{ 'image.name' | translate }} </mat-header-cell> |
|||
<mat-cell *matCellDef="let image"> |
|||
{{ image.title }} |
|||
</mat-cell> |
|||
</ng-container> |
|||
<ng-container matColumnDef="createdTime"> |
|||
<mat-header-cell *matHeaderCellDef mat-sort-header style="width: 200px; min-width: 200px;"> {{ 'image.created-time' | translate }} </mat-header-cell> |
|||
<mat-cell *matCellDef="let image"> |
|||
{{ image.createdTime | date:'yyyy-MM-dd HH:mm:ss' }} |
|||
</mat-cell> |
|||
</ng-container> |
|||
<ng-container matColumnDef="resolution"> |
|||
<mat-header-cell *matHeaderCellDef style="width: 160px; min-width: 160px;"> {{ 'image.resolution' | translate }} </mat-header-cell> |
|||
<mat-cell *matCellDef="let image"> |
|||
{{ image.descriptor.width }}x{{ image.descriptor.height }} |
|||
</mat-cell> |
|||
</ng-container> |
|||
<ng-container matColumnDef="size"> |
|||
<mat-header-cell *matHeaderCellDef style="width: 160px; min-width: 160px;"> {{ 'image.size' | translate }} </mat-header-cell> |
|||
<mat-cell *matCellDef="let image"> |
|||
{{ image.descriptor.size | fileSize }} |
|||
</mat-cell> |
|||
</ng-container> |
|||
<ng-container matColumnDef="system"> |
|||
<mat-header-cell *matHeaderCellDef style="width: 60px; min-width: 60px;"> {{ 'image.system' | translate }} </mat-header-cell> |
|||
<mat-cell *matCellDef="let image"> |
|||
<mat-icon class="material-icons mat-icon">{{isSystem(image) ? 'check_box' : 'check_box_outline_blank'}}</mat-icon> |
|||
</mat-cell> |
|||
</ng-container> |
|||
<ng-container matColumnDef="actions" stickyEnd> |
|||
<mat-header-cell *matHeaderCellDef style="min-width: 192px; max-width: 192px; width: 192px"> |
|||
</mat-header-cell> |
|||
<mat-cell *matCellDef="let image"> |
|||
<div fxFlex fxLayout="row" fxLayoutAlign="end"> |
|||
<button mat-icon-button [disabled]="isLoading$ | async" |
|||
matTooltip="{{ 'image.download-image' | translate }}" |
|||
matTooltipPosition="above" |
|||
(click)="downloadImage($event, image)"> |
|||
<mat-icon>file_download</mat-icon> |
|||
</button> |
|||
<button mat-icon-button [disabled]="isLoading$ | async" |
|||
matTooltip="{{ 'image.export-image' | translate }}" |
|||
matTooltipPosition="above" |
|||
(click)="exportImage($event, image)"> |
|||
<tb-icon>mdi:file-export</tb-icon> |
|||
</button> |
|||
<button mat-icon-button [disabled]="isLoading$ | async" |
|||
matTooltip="{{ 'image.edit-image' | translate }}" |
|||
matTooltipPosition="above" |
|||
(click)="editImage($event, image)"> |
|||
<mat-icon>edit</mat-icon> |
|||
</button> |
|||
<button mat-icon-button [disabled]="(isLoading$ | async) || !deleteEnabled(image)" |
|||
matTooltip="{{ 'image.delete-image' | translate }}" |
|||
matTooltipPosition="above" |
|||
(click)="deleteImage($event, image)"> |
|||
<mat-icon>delete</mat-icon> |
|||
</button> |
|||
</div> |
|||
</mat-cell> |
|||
</ng-container> |
|||
<mat-header-row [ngClass]="{'mat-row-select': true}" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row> |
|||
<mat-row [ngClass]="{'mat-row-select': true, |
|||
'mat-selected': dataSource.selection.isSelected(image)}" |
|||
*matRowDef="let image; columns: displayedColumns;" (click)="dataSource.selection.toggle(image)"></mat-row> |
|||
</table> |
|||
<ng-container *ngIf="(dataSource.isEmpty() | async) && !dataSource.dataLoading"> |
|||
<ng-container *ngTemplateOutlet="noImages"></ng-container> |
|||
</ng-container> |
|||
<span [fxShow]="dataSource.dataLoading" |
|||
fxLayoutAlign="center center" |
|||
class="no-data-found">{{ 'common.loading' | translate }}</span> |
|||
</div> |
|||
<mat-divider></mat-divider> |
|||
<mat-paginator [length]="dataSource.total() | async" |
|||
[pageIndex]="pageLink.page" |
|||
[pageSize]="pageLink.pageSize" |
|||
[pageSizeOptions]="pageSizeOptions" |
|||
[hidePageSize]="hidePageSize" |
|||
showFirstLastButtons></mat-paginator> |
|||
</div> |
|||
<div fxFlex class="mat-padding" *ngIf="mode === 'grid'" fxLayout="column"> |
|||
<tb-scroll-grid fxFlex |
|||
[columns]="gridColumns" |
|||
[itemSize]="150" |
|||
[fetchFunction]="gridImagesFetchFunction" |
|||
[filter]="gridImagesFilter" |
|||
[itemCard]="imageCard" |
|||
[loadingCell]="imageLoadingCard" |
|||
[dataLoading]="loadingImages" |
|||
[noData]="noImages"> |
|||
</tb-scroll-grid> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<ng-template #loadingImages> |
|||
<div fxLayout="column" |
|||
fxLayoutAlign="center center" class="tb-absolute-fill"> |
|||
<span class="mat-headline-5" style="padding-bottom: 20px;"> |
|||
{{ 'common.loading' | translate }} |
|||
</span> |
|||
<mat-spinner color="accent" strokeWidth="5"></mat-spinner> |
|||
</div> |
|||
</ng-template> |
|||
<ng-template #noImages> |
|||
<div class="tb-no-images"> |
|||
<div class="tb-no-data-bg"></div> |
|||
<div class="tb-no-data-text" translate>image.no-images</div> |
|||
</div> |
|||
</ng-template> |
|||
<ng-template #imageCard let-item="item"> |
|||
<div class="tb-image-card"> |
|||
<div class="tb-image-preview-container"> |
|||
<div class="tb-image-preview-spacer"></div> |
|||
<img class="tb-image-preview" [src]="item.link | image: {preview: true} | async" alt="{{ item.title }}"> |
|||
</div> |
|||
<div class="tb-image-details"> |
|||
<div class="tb-image-title-container"> |
|||
<div class="tb-image-title"> |
|||
{{ item.title }} |
|||
</div> |
|||
<div *ngIf="isSystem(item)" class="tb-image-sys">sys</div> |
|||
</div> |
|||
<div class="tb-image-info-container"> |
|||
<div>{{ item.descriptor.width }}x{{ item.descriptor.height }}</div> |
|||
<mat-divider vertical></mat-divider> |
|||
<div>{{ item.descriptor.size | fileSize }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</ng-template> |
|||
<ng-template #imageLoadingCard> |
|||
<div> TODO </div> |
|||
</ng-template> |
|||
@ -0,0 +1,182 @@ |
|||
/** |
|||
* Copyright © 2016-2023 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0 |
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
$tb-button-selected-color: rgb(255, 110, 64) !default; |
|||
|
|||
.tb-images { |
|||
.tb-images-content { |
|||
width: 100%; |
|||
height: 100%; |
|||
background: #fff; |
|||
overflow: hidden; |
|||
|
|||
&.tb-outlined-border { |
|||
box-shadow: 0 0 0 0 rgb(0 0 0 / 20%), 0 0 0 0 rgb(0 0 0 / 14%), 0 0 0 0 rgb(0 0 0 / 12%); |
|||
border: solid 1px #e0e0e0; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.tb-images-title { |
|||
padding-right: 20px; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
.tb-images-view-type-toolbar { |
|||
height: 55px; |
|||
min-height: 55px; |
|||
padding-right: 16px; |
|||
background-color: transparent; |
|||
box-shadow: none; |
|||
|
|||
.tb-toolbar-button { |
|||
height: 48px; |
|||
button.mat-mdc-icon-button { |
|||
margin: 0; |
|||
} |
|||
&.tb-selected { |
|||
background-color: rgba(255, 255, 255, .15); |
|||
border-bottom: $tb-button-selected-color solid 4px; |
|||
|
|||
button.mat-mdc-icon-button { |
|||
margin-bottom: -4px; |
|||
|
|||
.mat-icon { |
|||
color: $tb-button-selected-color; |
|||
fill: $tb-button-selected-color; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.table-container, tb-scroll-grid { |
|||
position: relative; |
|||
} |
|||
|
|||
.tb-no-images { |
|||
position: absolute; |
|||
inset: 0; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.tb-image-card { |
|||
height: 100%; |
|||
border-radius: 8px; |
|||
padding: 8px; |
|||
display: flex; |
|||
gap: 8px; |
|||
flex-direction: column; |
|||
cursor: pointer; |
|||
transition: box-shadow 0.2s; |
|||
|
|||
.tb-image-preview-container { |
|||
position: relative; |
|||
.tb-image-preview-spacer { |
|||
margin-top: 100%; |
|||
} |
|||
.tb-image-preview { |
|||
position: absolute; |
|||
inset: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
|
|||
.tb-image-details { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: flex-start; |
|||
justify-content: space-between; |
|||
gap: 4px; |
|||
align-self: stretch; |
|||
.tb-image-title-container { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 8px; |
|||
align-self: stretch; |
|||
.tb-image-title { |
|||
flex: 1; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
-webkit-line-clamp: 2; |
|||
display: -webkit-box; |
|||
-webkit-box-orient: vertical; |
|||
color: rgba(0, 0, 0, 0.76); |
|||
font-size: 12px; |
|||
font-style: normal; |
|||
font-weight: 500; |
|||
line-height: 16px; |
|||
} |
|||
.tb-image-sys { |
|||
padding: 1px 4px; |
|||
border-radius: 4px; |
|||
background: rgba(236, 236, 236, 0.64); |
|||
color: rgba(0, 0, 0, 0.54); |
|||
font-size: 11px; |
|||
font-style: normal; |
|||
font-weight: 500; |
|||
line-height: 16px; |
|||
letter-spacing: 0.017px; |
|||
} |
|||
} |
|||
.tb-image-info-container { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 8px; |
|||
align-self: stretch; |
|||
color: rgba(0, 0, 0, 0.38); |
|||
font-size: 10px; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 16px; |
|||
.mat-divider.mat-divider-vertical { |
|||
height: 16px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&:hover { |
|||
box-shadow: 0 0 28px 0 rgba(0, 0, 0, 0.24); |
|||
} |
|||
} |
|||
|
|||
.table-container { |
|||
overflow: auto; |
|||
|
|||
.mat-sort-header-sorted .mat-sort-header-arrow { |
|||
opacity: 1 !important; |
|||
} |
|||
.mat-mdc-cell.mat-column-preview { |
|||
width: 50px; |
|||
height: 50px; |
|||
padding: 2px 12px; |
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
.tb-image-preview { |
|||
width: 50px; |
|||
height: 50px; |
|||
object-fit: contain; |
|||
border-radius: 4px; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,545 @@ |
|||
///
|
|||
/// Copyright © 2016-2023 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { CollectionViewer, DataSource, SelectionModel } from '@angular/cdk/collections'; |
|||
import { ImageResourceInfo, imageResourceType } from '@shared/models/resource.models'; |
|||
import { BehaviorSubject, forkJoin, merge, Observable, of, ReplaySubject, Subject, Subscription } from 'rxjs'; |
|||
import { emptyPageData, PageData } from '@shared/models/page/page-data'; |
|||
import { ImageService } from '@core/http/image.service'; |
|||
import { TranslateService } from '@ngx-translate/core'; |
|||
import { PageLink, PageQueryParam } from '@shared/models/page/page-link'; |
|||
import { catchError, debounceTime, distinctUntilChanged, map, skip, takeUntil, tap } from 'rxjs/operators'; |
|||
import { |
|||
AfterViewInit, |
|||
ChangeDetectorRef, |
|||
Component, |
|||
ElementRef, |
|||
Input, |
|||
OnDestroy, |
|||
OnInit, |
|||
ViewChild, |
|||
ViewEncapsulation |
|||
} from '@angular/core'; |
|||
import { PageComponent } from '@shared/components/page.component'; |
|||
import { MatPaginator } from '@angular/material/paginator'; |
|||
import { MatSort, SortDirection } from '@angular/material/sort'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { UtilsService } from '@core/services/utils.service'; |
|||
import { DialogService } from '@core/services/dialog.service'; |
|||
import { FormBuilder } from '@angular/forms'; |
|||
import { Direction, SortOrder } from '@shared/models/page/sort-order'; |
|||
import { ResizeObserver } from '@juggle/resize-observer'; |
|||
import { hidePageSizePixelValue } from '@shared/models/constants'; |
|||
import { coerceBoolean } from '@shared/decorators/coercion'; |
|||
import { ActivatedRoute, QueryParamsHandling, Router } from '@angular/router'; |
|||
import { isEqual, isNotEmptyStr } from '@core/utils'; |
|||
import { BaseData, HasId } from '@shared/models/base-data'; |
|||
import { NULL_UUID } from '@shared/models/id/has-uuid'; |
|||
import { getCurrentAuthUser } from '@core/auth/auth.selectors'; |
|||
import { Authority } from '@shared/models/authority.enum'; |
|||
import { GridEntitiesFetchFunction, ScrollGridColumns } from '@home/models/datasource/scroll-grid-datasource'; |
|||
import { WidgetsBundle } from '@shared/models/widgets-bundle.model'; |
|||
import { ScrollGridComponent } from '@home/components/grid/scroll-grid.component'; |
|||
import { |
|||
AddWidgetDialogComponent, |
|||
AddWidgetDialogData |
|||
} from '@home/components/dashboard-page/add-widget-dialog.component'; |
|||
import { Widget } from '@shared/models/widget.models'; |
|||
import { MatDialog } from '@angular/material/dialog'; |
|||
import { UploadImageDialogComponent } from '@home/components/image/upload-image-dialog.component'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-image-gallery', |
|||
templateUrl: './image-gallery.component.html', |
|||
styleUrls: ['./image-gallery.component.scss'], |
|||
encapsulation: ViewEncapsulation.None |
|||
}) |
|||
export class ImageGalleryComponent extends PageComponent implements OnInit, OnDestroy, AfterViewInit { |
|||
|
|||
@Input() |
|||
@coerceBoolean() |
|||
pageMode = true; |
|||
|
|||
@Input() |
|||
mode: 'list' | 'grid' = 'list'; |
|||
|
|||
@ViewChild('searchInput') searchInputField: ElementRef; |
|||
|
|||
@ViewChild(MatPaginator) paginator: MatPaginator; |
|||
@ViewChild(MatSort) sort: MatSort; |
|||
|
|||
@ViewChild(ScrollGridComponent) gridComponent: ScrollGridComponent<ImageResourceInfo, string>; |
|||
|
|||
defaultPageSize = 10; |
|||
defaultSortOrder: SortOrder = { property: 'createdTime', direction: Direction.DESC }; |
|||
hidePageSize = false; |
|||
|
|||
displayedColumns: string[]; |
|||
pageSizeOptions: number[]; |
|||
pageLink: PageLink; |
|||
|
|||
textSearchMode = false; |
|||
|
|||
dataSource: ImagesDatasource; |
|||
|
|||
textSearch = this.fb.control('', {nonNullable: true}); |
|||
|
|||
gridColumns: ScrollGridColumns = { |
|||
columns: 2, |
|||
breakpoints: { |
|||
'screen and (min-width: 2320px)': 10, |
|||
'screen and (min-width: 2000px)': 8, |
|||
'gt-lg': 7, |
|||
'screen and (min-width: 1600px)': 6, |
|||
'gt-md': 5, |
|||
'screen and (min-width: 1120px)': 4, |
|||
'gt-xs': 3 |
|||
} |
|||
}; |
|||
|
|||
gridImagesFetchFunction: GridEntitiesFetchFunction<ImageResourceInfo, string>; |
|||
gridImagesFilter = ''; |
|||
|
|||
authUser = getCurrentAuthUser(this.store); |
|||
|
|||
private updateDataSubscription: Subscription; |
|||
|
|||
private widgetResize$: ResizeObserver; |
|||
private destroy$ = new Subject<void>(); |
|||
private destroyListMode$: Subject<void>; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
private route: ActivatedRoute, |
|||
private router: Router, |
|||
private dialog: MatDialog, |
|||
public translate: TranslateService, |
|||
private imageService: ImageService, |
|||
private dialogService: DialogService, |
|||
private elementRef: ElementRef, |
|||
private cd: ChangeDetectorRef, |
|||
private fb: FormBuilder) { |
|||
super(store); |
|||
|
|||
this.gridImagesFetchFunction = (pageSize, page, filter) => { |
|||
const pageLink = new PageLink(pageSize, page, filter, { |
|||
property: 'createdTime', |
|||
direction: Direction.DESC |
|||
}); |
|||
return this.imageService.getImages(pageLink); |
|||
}; |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.displayedColumns = ['select', 'preview', 'title', 'createdTime', 'resolution', 'size', 'system', 'actions']; |
|||
let sortOrder: SortOrder = this.defaultSortOrder; |
|||
this.pageSizeOptions = [this.defaultPageSize, this.defaultPageSize * 2, this.defaultPageSize * 3]; |
|||
const routerQueryParams: PageQueryParam = this.route.snapshot.queryParams; |
|||
if (this.pageMode) { |
|||
if (routerQueryParams.hasOwnProperty('direction') |
|||
|| routerQueryParams.hasOwnProperty('property')) { |
|||
sortOrder = { |
|||
property: routerQueryParams?.property || this.defaultSortOrder.property, |
|||
direction: routerQueryParams?.direction || this.defaultSortOrder.direction |
|||
}; |
|||
} |
|||
} |
|||
this.pageLink = new PageLink(this.defaultPageSize, 0, null, sortOrder); |
|||
if (this.pageMode) { |
|||
if (routerQueryParams.hasOwnProperty('page')) { |
|||
this.pageLink.page = Number(routerQueryParams.page); |
|||
} |
|||
if (routerQueryParams.hasOwnProperty('pageSize')) { |
|||
this.pageLink.pageSize = Number(routerQueryParams.pageSize); |
|||
} |
|||
const textSearchParam = routerQueryParams.textSearch; |
|||
if (isNotEmptyStr(textSearchParam)) { |
|||
const decodedTextSearch = decodeURI(textSearchParam); |
|||
this.textSearchMode = true; |
|||
this.pageLink.textSearch = decodedTextSearch.trim(); |
|||
this.textSearch.setValue(decodedTextSearch, {emitEvent: false}); |
|||
} |
|||
} |
|||
if (this.mode === 'list') { |
|||
this.dataSource = new ImagesDatasource(this.imageService); |
|||
} |
|||
} |
|||
|
|||
ngOnDestroy(): void { |
|||
if (this.widgetResize$) { |
|||
this.widgetResize$.disconnect(); |
|||
} |
|||
if (this.destroyListMode$) { |
|||
this.destroyListMode$.next(); |
|||
this.destroyListMode$.complete(); |
|||
} |
|||
this.destroy$.next(); |
|||
this.destroy$.complete(); |
|||
} |
|||
|
|||
ngAfterViewInit() { |
|||
this.textSearch.valueChanges.pipe( |
|||
debounceTime(150), |
|||
distinctUntilChanged((prev, current) => |
|||
((this.mode === 'list' ? this.pageLink.textSearch : this.gridImagesFilter) ?? '') === current.trim()), |
|||
takeUntil(this.destroy$) |
|||
).subscribe(value => { |
|||
if (this.mode === 'list') { |
|||
if (this.pageMode) { |
|||
const queryParams: PageQueryParam = { |
|||
textSearch: isNotEmptyStr(value) ? encodeURI(value) : null, |
|||
page: null |
|||
}; |
|||
this.updatedRouterParamsAndData(queryParams); |
|||
} else { |
|||
this.pageLink.textSearch = isNotEmptyStr(value) ? value.trim() : null; |
|||
this.paginator.pageIndex = 0; |
|||
this.updateData(); |
|||
} |
|||
} else { |
|||
this.gridImagesFilter = isNotEmptyStr(value) ? value.trim() : null; |
|||
this.cd.markForCheck(); |
|||
} |
|||
}); |
|||
this.updateMode(); |
|||
} |
|||
|
|||
public setMode(targetMode: 'list' | 'grid') { |
|||
if (this.mode !== targetMode) { |
|||
if (this.widgetResize$) { |
|||
this.widgetResize$.disconnect(); |
|||
this.widgetResize$ = null; |
|||
} |
|||
if (this.destroyListMode$) { |
|||
this.destroyListMode$.next(); |
|||
this.destroyListMode$.complete(); |
|||
this.destroyListMode$ = null; |
|||
} |
|||
this.mode = targetMode; |
|||
if (this.mode === 'list') { |
|||
this.dataSource = new ImagesDatasource(this.imageService); |
|||
} |
|||
setTimeout(() => { |
|||
this.updateMode(); |
|||
}); |
|||
} |
|||
} |
|||
|
|||
private updateMode() { |
|||
if (this.mode === 'list') { |
|||
this.initListMode(); |
|||
} else { |
|||
this.initGridMode(); |
|||
} |
|||
} |
|||
|
|||
private initListMode() { |
|||
this.destroyListMode$ = new Subject<void>(); |
|||
this.widgetResize$ = new ResizeObserver(() => { |
|||
const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue; |
|||
if (showHidePageSize !== this.hidePageSize) { |
|||
this.hidePageSize = showHidePageSize; |
|||
this.cd.markForCheck(); |
|||
} |
|||
}); |
|||
this.widgetResize$.observe(this.elementRef.nativeElement); |
|||
if (this.pageMode) { |
|||
this.route.queryParams.pipe( |
|||
skip(1), |
|||
takeUntil(this.destroyListMode$) |
|||
).subscribe((params: PageQueryParam) => { |
|||
this.paginator.pageIndex = Number(params.page) || 0; |
|||
this.paginator.pageSize = Number(params.pageSize) || this.defaultPageSize; |
|||
this.sort.active = params.property || this.defaultSortOrder.property; |
|||
this.sort.direction = (params.direction || this.defaultSortOrder.direction).toLowerCase() as SortDirection; |
|||
const textSearchParam = params.textSearch; |
|||
if (isNotEmptyStr(textSearchParam)) { |
|||
const decodedTextSearch = decodeURI(textSearchParam); |
|||
this.textSearchMode = true; |
|||
this.pageLink.textSearch = decodedTextSearch.trim(); |
|||
this.textSearch.setValue(decodedTextSearch, {emitEvent: false}); |
|||
} else { |
|||
this.pageLink.textSearch = null; |
|||
this.textSearch.reset('', {emitEvent: false}); |
|||
} |
|||
this.updateData(); |
|||
}); |
|||
} |
|||
this.updatePaginationSubscriptions(); |
|||
this.updateData(); |
|||
} |
|||
|
|||
private initGridMode() { |
|||
|
|||
} |
|||
|
|||
private updatePaginationSubscriptions() { |
|||
if (this.updateDataSubscription) { |
|||
this.updateDataSubscription.unsubscribe(); |
|||
this.updateDataSubscription = null; |
|||
} |
|||
const sortSubscription$: Observable<object> = this.sort.sortChange.asObservable().pipe( |
|||
map((data) => { |
|||
const direction = data.direction.toUpperCase(); |
|||
const queryParams: PageQueryParam = { |
|||
direction: (this.defaultSortOrder.direction === direction ? null : direction) as Direction, |
|||
property: this.defaultSortOrder.property === data.active ? null : data.active |
|||
}; |
|||
queryParams.page = null; |
|||
this.paginator.pageIndex = 0; |
|||
return queryParams; |
|||
}) |
|||
); |
|||
const paginatorSubscription$ = this.paginator.page.asObservable().pipe( |
|||
map((data) => ({ |
|||
page: data.pageIndex === 0 ? null : data.pageIndex, |
|||
pageSize: data.pageSize === this.defaultPageSize ? null : data.pageSize |
|||
})) |
|||
); |
|||
this.updateDataSubscription = (merge(sortSubscription$, paginatorSubscription$) as Observable<PageQueryParam>).pipe( |
|||
takeUntil(this.destroyListMode$) |
|||
).subscribe(queryParams => this.updatedRouterParamsAndData(queryParams)); |
|||
} |
|||
|
|||
clearSelection() { |
|||
this.dataSource.selection.clear(); |
|||
this.cd.detectChanges(); |
|||
} |
|||
|
|||
updateData() { |
|||
if (this.mode === 'list') { |
|||
this.pageLink.page = this.paginator.pageIndex; |
|||
this.pageLink.pageSize = this.paginator.pageSize; |
|||
if (this.sort.active) { |
|||
this.pageLink.sortOrder = { |
|||
property: this.sort.active, |
|||
direction: Direction[this.sort.direction.toUpperCase()] |
|||
}; |
|||
} else { |
|||
this.pageLink.sortOrder = null; |
|||
} |
|||
this.dataSource.loadEntities(this.pageLink); |
|||
} else { |
|||
this.gridComponent.update(); |
|||
} |
|||
} |
|||
|
|||
enterFilterMode() { |
|||
this.textSearchMode = true; |
|||
setTimeout(() => { |
|||
this.searchInputField.nativeElement.focus(); |
|||
this.searchInputField.nativeElement.setSelectionRange(0, 0); |
|||
}, 10); |
|||
} |
|||
|
|||
exitFilterMode() { |
|||
this.textSearchMode = false; |
|||
this.textSearch.reset(); |
|||
} |
|||
|
|||
trackByEntityId(index: number, entity: BaseData<HasId>) { |
|||
return entity.id.id; |
|||
} |
|||
|
|||
isSystem(image?: ImageResourceInfo): boolean { |
|||
return image?.tenantId?.id === NULL_UUID; |
|||
} |
|||
|
|||
deleteEnabled(image?: ImageResourceInfo): boolean { |
|||
return this.authUser.authority === Authority.SYS_ADMIN || !this.isSystem(image); |
|||
} |
|||
|
|||
deleteImage($event: Event, image: ImageResourceInfo) { |
|||
if ($event) { |
|||
$event.stopPropagation(); |
|||
} |
|||
const title = this.translate.instant('image.delete-image-title', {imageTitle: image.title}); |
|||
const content = this.translate.instant('image.delete-image-text'); |
|||
this.dialogService.confirm(title, content, |
|||
this.translate.instant('action.no'), |
|||
this.translate.instant('action.yes')).subscribe((result) => { |
|||
if (result) { |
|||
this.imageService.deleteImage(imageResourceType(image), image.resourceKey).subscribe( |
|||
() => { |
|||
this.updateData(); |
|||
} |
|||
); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
deleteImages($event: Event) { |
|||
if ($event) { |
|||
$event.stopPropagation(); |
|||
} |
|||
const selectedImages = this.dataSource.selection.selected; |
|||
if (selectedImages && selectedImages.length) { |
|||
const title = this.translate.instant('image.delete-images-title', {count: selectedImages.length}); |
|||
const content = this.translate.instant('image.delete-images-text'); |
|||
this.dialogService.confirm(title, content, |
|||
this.translate.instant('action.no'), |
|||
this.translate.instant('action.yes')).subscribe((result) => { |
|||
if (result) { |
|||
const tasks = selectedImages.map((image) => |
|||
this.imageService.deleteImage(imageResourceType(image), image.resourceKey)); |
|||
forkJoin(tasks).subscribe( |
|||
() => { |
|||
this.updateData(); |
|||
} |
|||
); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
|
|||
downloadImage($event, image: ImageResourceInfo) { |
|||
if ($event) { |
|||
$event.stopPropagation(); |
|||
} |
|||
this.imageService.downloadImage(imageResourceType(image), image.resourceKey).subscribe(); |
|||
} |
|||
|
|||
exportImage($event, image: ImageResourceInfo) { |
|||
if ($event) { |
|||
$event.stopPropagation(); |
|||
} |
|||
// TODO:
|
|||
} |
|||
|
|||
importImage(): void { |
|||
// TODO:
|
|||
} |
|||
|
|||
uploadImage(): void { |
|||
this.dialog.open<UploadImageDialogComponent, any, |
|||
boolean>(UploadImageDialogComponent, { |
|||
disableClose: true, |
|||
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'] |
|||
}).afterClosed().subscribe((result) => { |
|||
if (result) { |
|||
this.updateData(); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
editImage($event, image: ImageResourceInfo) { |
|||
if ($event) { |
|||
$event.stopPropagation(); |
|||
} |
|||
// TODO:
|
|||
} |
|||
|
|||
protected updatedRouterParamsAndData(queryParams: object, queryParamsHandling: QueryParamsHandling = 'merge') { |
|||
if (this.pageMode) { |
|||
this.router.navigate([], { |
|||
relativeTo: this.route, |
|||
queryParams, |
|||
queryParamsHandling |
|||
}); |
|||
if (queryParamsHandling === '' && isEqual(this.route.snapshot.queryParams, queryParams)) { |
|||
this.updateData(); |
|||
} |
|||
} else { |
|||
this.updateData(); |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
class ImagesDatasource implements DataSource<ImageResourceInfo> { |
|||
private entitiesSubject = new BehaviorSubject<ImageResourceInfo[]>([]); |
|||
private pageDataSubject = new BehaviorSubject<PageData<ImageResourceInfo>>(emptyPageData<ImageResourceInfo>()); |
|||
|
|||
public pageData$ = this.pageDataSubject.asObservable(); |
|||
|
|||
public selection = new SelectionModel<ImageResourceInfo>(true, []); |
|||
|
|||
public dataLoading = true; |
|||
|
|||
constructor(private imageService: ImageService) { |
|||
} |
|||
|
|||
connect(collectionViewer: CollectionViewer): |
|||
Observable<ImageResourceInfo[] | ReadonlyArray<ImageResourceInfo>> { |
|||
return this.entitiesSubject.asObservable(); |
|||
} |
|||
|
|||
disconnect(collectionViewer: CollectionViewer): void { |
|||
this.entitiesSubject.complete(); |
|||
this.pageDataSubject.complete(); |
|||
} |
|||
|
|||
reset() { |
|||
const pageData = emptyPageData<ImageResourceInfo>(); |
|||
this.entitiesSubject.next(pageData.data); |
|||
this.pageDataSubject.next(pageData); |
|||
} |
|||
|
|||
loadEntities(pageLink: PageLink): Observable<PageData<ImageResourceInfo>> { |
|||
this.dataLoading = true; |
|||
const result = new ReplaySubject<PageData<ImageResourceInfo>>(); |
|||
this.fetchEntities(pageLink).pipe( |
|||
tap(() => { |
|||
this.selection.clear(); |
|||
}), |
|||
catchError(() => of(emptyPageData<ImageResourceInfo>())), |
|||
).subscribe( |
|||
(pageData) => { |
|||
this.entitiesSubject.next(pageData.data); |
|||
this.pageDataSubject.next(pageData); |
|||
result.next(pageData); |
|||
this.dataLoading = false; |
|||
} |
|||
); |
|||
return result; |
|||
} |
|||
|
|||
fetchEntities(pageLink: PageLink): Observable<PageData<ImageResourceInfo>> { |
|||
return this.imageService.getImages(pageLink); |
|||
} |
|||
|
|||
isAllSelected(): Observable<boolean> { |
|||
const numSelected = this.selection.selected.length; |
|||
return this.entitiesSubject.pipe( |
|||
map((entities) => numSelected === entities.length) |
|||
); |
|||
} |
|||
|
|||
isEmpty(): Observable<boolean> { |
|||
return this.entitiesSubject.pipe( |
|||
map((entities) => !entities.length) |
|||
); |
|||
} |
|||
|
|||
total(): Observable<number> { |
|||
return this.pageDataSubject.pipe( |
|||
map((pageData) => pageData.totalElements) |
|||
); |
|||
} |
|||
|
|||
masterToggle() { |
|||
const entities = this.entitiesSubject.getValue(); |
|||
const numSelected = this.selection.selected.length; |
|||
if (numSelected === entities.length) { |
|||
this.selection.clear(); |
|||
} else { |
|||
entities.forEach(row => { |
|||
this.selection.select(row); |
|||
}); |
|||
} |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,61 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2023 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<form [formGroup]="uploadImageFormGroup" (ngSubmit)="upload()" style="width: 560px;"> |
|||
<mat-toolbar color="primary"> |
|||
<h2>{{ 'image.upload-image' | translate }}</h2> |
|||
<span fxFlex></span> |
|||
<button mat-icon-button |
|||
(click)="cancel()" |
|||
type="button"> |
|||
<mat-icon class="material-icons">close</mat-icon> |
|||
</button> |
|||
</mat-toolbar> |
|||
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> |
|||
</mat-progress-bar> |
|||
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div> |
|||
<div mat-dialog-content> |
|||
<fieldset [disabled]="isLoading$ | async"> |
|||
<tb-image-input resultAsFile |
|||
label="{{'image.image-preview' | translate}}" |
|||
formControlName="file" |
|||
(fileNameChanged)="imageFileNameChanged($event)"> |
|||
</tb-image-input> |
|||
<mat-form-field *ngIf="uploadImageFormGroup.get('file').value" class="mat-block"> |
|||
<mat-label translate>image.name</mat-label> |
|||
<input matInput formControlName="title" required> |
|||
<mat-error *ngIf="uploadImageFormGroup.get('title').hasError('required')"> |
|||
{{ 'image.name-required' | translate }} |
|||
</mat-error> |
|||
</mat-form-field> |
|||
</fieldset> |
|||
</div> |
|||
<div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center"> |
|||
<button mat-button color="primary" |
|||
type="button" |
|||
[disabled]="(isLoading$ | async)" |
|||
(click)="cancel()" cdkFocusInitial> |
|||
{{ 'action.cancel' | translate }} |
|||
</button> |
|||
<button mat-raised-button color="primary" |
|||
type="submit" |
|||
[disabled]="(isLoading$ | async) || uploadImageFormGroup.invalid |
|||
|| !uploadImageFormGroup.dirty"> |
|||
{{ 'action.upload' | translate }} |
|||
</button> |
|||
</div> |
|||
</form> |
|||
@ -0,0 +1,90 @@ |
|||
///
|
|||
/// Copyright © 2016-2023 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { Component, OnInit, SkipSelf } from '@angular/core'; |
|||
import { ErrorStateMatcher } from '@angular/material/core'; |
|||
import { MatDialogRef } from '@angular/material/dialog'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { |
|||
FormGroupDirective, |
|||
NgForm, |
|||
UntypedFormBuilder, |
|||
UntypedFormControl, |
|||
UntypedFormGroup, |
|||
Validators |
|||
} from '@angular/forms'; |
|||
import { DialogComponent } from '@shared/components/dialog.component'; |
|||
import { Router } from '@angular/router'; |
|||
import { ImageService } from '@core/http/image.service'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-upload-image-dialog', |
|||
templateUrl: './upload-image-dialog.component.html', |
|||
providers: [{provide: ErrorStateMatcher, useExisting: UploadImageDialogComponent}], |
|||
styleUrls: [] |
|||
}) |
|||
export class UploadImageDialogComponent extends |
|||
DialogComponent<UploadImageDialogComponent, boolean> implements OnInit, ErrorStateMatcher { |
|||
|
|||
uploadImageFormGroup: UntypedFormGroup; |
|||
|
|||
submitted = false; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
protected router: Router, |
|||
private imageService: ImageService, |
|||
@SkipSelf() private errorStateMatcher: ErrorStateMatcher, |
|||
public dialogRef: MatDialogRef<UploadImageDialogComponent, boolean>, |
|||
public fb: UntypedFormBuilder) { |
|||
super(store, router, dialogRef); |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.uploadImageFormGroup = this.fb.group({ |
|||
file: [null, [Validators.required]], |
|||
title: [null, [Validators.required]] |
|||
}); |
|||
} |
|||
|
|||
imageFileNameChanged(fileName: string) { |
|||
const titleControl = this.uploadImageFormGroup.get('title'); |
|||
if (!titleControl.value || !titleControl.touched) { |
|||
titleControl.setValue(fileName); |
|||
} |
|||
} |
|||
|
|||
isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean { |
|||
const originalErrorState = this.errorStateMatcher.isErrorState(control, form); |
|||
const customErrorState = !!(control && control.invalid && this.submitted); |
|||
return originalErrorState || customErrorState; |
|||
} |
|||
|
|||
cancel(): void { |
|||
this.dialogRef.close(false); |
|||
} |
|||
|
|||
upload(): void { |
|||
this.submitted = true; |
|||
const file: File = this.uploadImageFormGroup.get('file').value; |
|||
const title: string = this.uploadImageFormGroup.get('title').value; |
|||
this.imageService.uploadImage(file, title).subscribe( |
|||
() => { |
|||
this.dialogRef.close(true); |
|||
} |
|||
); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue