Improve new storage path display on list / edit

src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.html

@@ -10,7 +10,7 @@
   <div class="modal-body">
 
     <pngx-input-text i18n-title title="Name" formControlName="name" [error]="error?.name" autocomplete="off"></pngx-input-text>
-    <pngx-input-textarea i18n-title title="Path" formControlName="path" [error]="error?.path" [hint]="pathHint"></pngx-input-textarea>
+    <pngx-input-textarea i18n-title title="Path" formControlName="path" [error]="error?.path" [hint]="pathHint" [monospace]="true"></pngx-input-textarea>
     <pngx-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></pngx-input-select>
     @if (patternRequired) {
       <pngx-input-text i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></pngx-input-text>

src-ui/src/app/components/common/input/textarea/textarea.component.html

@@ -11,7 +11,17 @@
         }
       </div>
       <div class="position-relative" [class.col-md-9]="horizontal">
-        <textarea #inputField class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [disabled]="disabled" [placeholder]="placeholder"></textarea>
+        <textarea #inputField
+          [id]="inputId"
+          class="form-control"
+          [class.is-invalid]="error"
+          [class.font-monospace]="monospace"
+          [(ngModel)]="value"
+          (change)="onChange(value)"
+          [disabled]="disabled"
+          [placeholder]="placeholder"
+          rows="6">
+        </textarea>
         @if (hint) {
           <small class="form-text text-muted" [innerHTML]="hint | safeHtml"></small>
         }

src-ui/src/app/components/common/input/textarea/textarea.component.ts

@@ -18,6 +18,9 @@ export class TextAreaComponent extends AbstractInputComponent<string> {
   @Input()
   placeholder: string = ''
 
+  @Input()
+  monospace: boolean = false
+
   constructor() {
     super()
   }

src-ui/src/app/components/manage/management-list/management-list.component.html

@@ -38,7 +38,7 @@
         <th scope="col" class="fw-normal d-none d-sm-table-cell" pngxSortable="matching_algorithm" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Matching</th>
         <th scope="col" class="fw-normal" pngxSortable="document_count" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Document count</th>
         @for (column of extraColumns; track column) {
-          <th scope="col" class="fw-normal" pngxSortable="{{column.key}}" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)">{{column.name}}</th>
+          <th scope="col" class="fw-normal" [ngClass]="{ 'd-none d-sm-table-cell' : column.hideOnMobile }" pngxSortable="{{column.key}}" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)">{{column.name}}</th>
         }
         <th scope="col" class="fw-normal" i18n>Actions</th>
       </tr>
@@ -64,7 +64,7 @@
           <td scope="row" class="d-none d-sm-table-cell">{{ getMatching(object) }}</td>
           <td scope="row">{{ object.document_count }}</td>
           @for (column of extraColumns; track column) {
-            <td scope="row">
+            <td scope="row" [ngClass]="{ 'd-none d-sm-table-cell' : column.hideOnMobile }">
               @if (column.rendersHtml) {
                 <div [innerHtml]="column.valueFn.call(null, object) | safeHtml"></div>
               } @else {

src-ui/src/app/components/manage/management-list/management-list.component.ts

@@ -44,6 +44,8 @@ export interface ManagementListColumn {
   valueFn: any
 
   rendersHtml?: boolean
+
+  hideOnMobile?: boolean
 }
 
 @Directive()

src-ui/src/app/components/manage/storage-path-list/storage-path-list.component.spec.ts

@@ -12,6 +12,7 @@ import { StoragePathListComponent } from './storage-path-list.component'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
+import { StoragePath } from 'src/app/data/storage-path'
 
 describe('StoragePathListComponent', () => {
   let component: StoragePathListComponent
@@ -73,4 +74,15 @@ describe('StoragePathListComponent', () => {
       'Do you really want to delete the storage path "StoragePath1"?'
     )
   })
+
+  it('should truncate path if necessary', () => {
+    const path: StoragePath = {
+      id: 1,
+      name: 'StoragePath1',
+      path: 'a'.repeat(100),
+    }
+    expect(component.extraColumns[0].valueFn(path)).toEqual(
+      `<code>${'a'.repeat(49)}...</code>`
+    )
+  })
 })

src-ui/src/app/components/manage/storage-path-list/storage-path-list.component.ts

@@ -41,8 +41,9 @@ export class StoragePathListComponent extends ManagementListComponent<StoragePat
           key: 'path',
           name: $localize`Path`,
           rendersHtml: true,
+          hideOnMobile: true,
           valueFn: (c: StoragePath) => {
-            return `<code>${c.path}</code>`
+            return `<code>${c.path?.slice(0, 49)}${c.path?.length > 50 ? '...' : ''}</code>`
           },
         },
       ]