UI: Add image link to image details dialog. Autoselect image on upload.

ui-ngx/src/app/shared/components/image/image-dialog.component.html

@@ -30,34 +30,44 @@
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
-      <div fxLayout="row" fxLayoutGap="8px">
-        <mat-form-field fxFlex>
-          <mat-label translate>image.name</mat-label>
-          <input matInput formControlName="title" required>
-          <mat-error *ngIf="imageFormGroup.get('title').hasError('required')">
-            {{ 'image.name-required' | translate }}
-          </mat-error>
-          <button *ngIf="!readonly && imageFormGroup.dirty"
-                  matIconSuffix
-                  type="button"
-                  mat-icon-button [disabled]="isLoading$ | async"
-                  matTooltip="{{ 'action.undo' | translate }}"
-                  matTooltipPosition="above"
-                  (click)="revertInfo()">
-            <mat-icon>close</mat-icon>
-          </button>
-          <button *ngIf="!readonly && !imageFormGroup.invalid && imageFormGroup.dirty"
-                  matIconSuffix
-                  type="button"
-                  color="primary"
-                  mat-icon-button [disabled]="isLoading$ | async"
-                  matTooltip="{{ 'action.save' | translate }}"
-                  matTooltipPosition="above"
-                  (click)="saveInfo()">
-            <mat-icon>check</mat-icon>
-          </button>
-        </mat-form-field>
-      </div>
+      <mat-form-field>
+        <mat-label translate>image.name</mat-label>
+        <input matInput formControlName="title" required>
+        <mat-error *ngIf="imageFormGroup.get('title').hasError('required')">
+          {{ 'image.name-required' | translate }}
+        </mat-error>
+        <button *ngIf="!readonly && imageFormGroup.dirty"
+                matIconSuffix
+                type="button"
+                mat-icon-button [disabled]="isLoading$ | async"
+                matTooltip="{{ 'action.undo' | translate }}"
+                matTooltipPosition="above"
+                (click)="revertInfo()">
+          <mat-icon>close</mat-icon>
+        </button>
+        <button *ngIf="!readonly && !imageFormGroup.invalid && imageFormGroup.dirty"
+                matIconSuffix
+                type="button"
+                color="primary"
+                mat-icon-button [disabled]="isLoading$ | async"
+                matTooltip="{{ 'action.save' | translate }}"
+                matTooltipPosition="above"
+                (click)="saveInfo()">
+          <mat-icon>check</mat-icon>
+        </button>
+      </mat-form-field>
+      <mat-form-field>
+        <mat-label translate>image.link</mat-label>
+        <input matInput formControlName="link">
+        <tb-copy-button
+          matSuffix
+          miniButton="false"
+          [copyText]="imageFormGroup.get('link').value"
+          tooltipText="{{ 'image.copy-image-link' | translate }}"
+          tooltipPosition="above"
+          icon="content_copy">
+        </tb-copy-button>
+      </mat-form-field>
       <div class="tb-image-container tb-primary-fill">
         <div class="tb-image-content">
           <div class="tb-image-actions">

ui-ngx/src/app/shared/components/image/image-dialog.component.ts

@@ -29,6 +29,7 @@ import {
   UploadImageDialogData
 } from '@shared/components/image/upload-image-dialog.component';
 import { UrlHolder } from '@shared/pipe/image.pipe';
+import { ImportExportService } from '@shared/import-export/import-export.service';
 
 export interface ImageDialogData {
   readonly: boolean;
@@ -57,6 +58,7 @@ export class ImageDialogComponent extends
               protected router: Router,
               private imageService: ImageService,
               private dialog: MatDialog,
+              private importExportService: ImportExportService,
               @Inject(MAT_DIALOG_DATA) private data: ImageDialogData,
               public dialogRef: MatDialogRef<ImageDialogComponent, ImageResourceInfo>,
               public fb: UntypedFormBuilder) {
@@ -70,10 +72,13 @@ export class ImageDialogComponent extends
 
   ngOnInit(): void {
     this.imageFormGroup = this.fb.group({
-      title: [this.image.title, [Validators.required]]
+      title: [this.image.title, [Validators.required]],
+      link: [this.image.link, []],
     });
     if (this.data.readonly) {
       this.imageFormGroup.disable();
+    } else {
+      this.imageFormGroup.get('link').disable();
     }
   }
 
@@ -109,7 +114,7 @@ export class ImageDialogComponent extends
     if ($event) {
       $event.stopPropagation();
     }
-    // TODO:
+    this.importExportService.exportImage(imageResourceType(this.image), this.image.resourceKey);
   }
 
   updateImage($event): void {

ui-ngx/src/app/shared/components/image/image-gallery.component.ts

@@ -624,7 +624,11 @@ export class ImageGalleryComponent extends PageComponent implements OnInit, OnDe
       data: {}
     }).afterClosed().subscribe((result) => {
       if (result) {
-        this.updateData();
+        if (this.selectionMode) {
+          this.imageSelected.next(result);
+        } else {
+          this.updateData();
+        }
       }
     });
   }

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -2988,7 +2988,9 @@
         "no-image-selected": "No image selected",
         "browse-from-gallery": "Browse from gallery",
         "set-link": "Set link",
-        "image-link": "Image link"
+        "image-link": "Image link",
+        "link": "Link",
+        "copy-image-link": "Copy image link"
     },
     "image-input": {
         "drop-images-or": "Drag and drop an images or",