Unify list styling, add tour step, refactor components

src-ui/src/app/app-routing.module.ts

@@ -21,7 +21,7 @@ import {
   PermissionAction,
   PermissionType,
 } from './services/permissions.service'
-import { ConsumptionTemplatesListComponent } from './components/manage/consumption-templates-list/consumption-templates-list.component'
+import { ConsumptionTemplatesComponent } from './components/manage/consumption-templates/consumption-templates.component'
 import { MailComponent } from './components/manage/mail/mail.component'
 import { UsersAndGroupsComponent } from './components/admin/users-groups/users-groups.component'
 
@@ -191,7 +191,7 @@ export const routes: Routes = [
       },
       {
         path: 'templates',
-        component: ConsumptionTemplatesListComponent,
+        component: ConsumptionTemplatesComponent,
         canActivate: [PermissionsGuard],
         data: {
           requiredPermission: {

src-ui/src/app/app.component.ts

@@ -187,6 +187,14 @@ export class AppComponent implements OnInit, OnDestroy {
             offset: 0,
           },
         },
+        {
+          anchorId: 'tour.consumption-templates',
+          content: $localize`Consumption templates give you finer control over the document ingestion process.`,
+          route: '/templates',
+          backdropConfig: {
+            offset: 0,
+          },
+        },
         {
           anchorId: 'tour.file-tasks',
           content: $localize`File Tasks shows you documents that have been consumed, are waiting to be, or may have failed during the process.`,

src-ui/src/app/app.module.ts

@@ -95,7 +95,7 @@ import { UsernamePipe } from './pipes/username.pipe'
 import { LogoComponent } from './components/common/logo/logo.component'
 import { IsNumberPipe } from './pipes/is-number.pipe'
 import { ShareLinksDropdownComponent } from './components/common/share-links-dropdown/share-links-dropdown.component'
-import { ConsumptionTemplatesListComponent } from './components/manage/consumption-templates-list/consumption-templates-list.component'
+import { ConsumptionTemplatesComponent } from './components/manage/consumption-templates/consumption-templates.component'
 import { ConsumptionTemplateEditDialogComponent } from './components/common/edit-dialog/consumption-template-edit-dialog/consumption-template-edit-dialog.component'
 import { MailComponent } from './components/manage/mail/mail.component'
 import { UsersAndGroupsComponent } from './components/admin/users-groups/users-groups.component'
@@ -237,7 +237,7 @@ function initializeApp(settings: SettingsService) {
     LogoComponent,
     IsNumberPipe,
     ShareLinksDropdownComponent,
-    ConsumptionTemplatesListComponent,
+    ConsumptionTemplatesComponent,
     ConsumptionTemplateEditDialogComponent,
     MailComponent,
     UsersAndGroupsComponent,

src-ui/src/app/components/app-frame/app-frame.component.html

@@ -155,7 +155,7 @@
               </svg><span>&nbsp;<ng-container i18n>Storage paths</ng-container></span>
             </a>
           </li>
-          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.ConsumptionTemplate }">
+          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.ConsumptionTemplate }" tourAnchor="tour.consumption-templates">
             <a class="nav-link" routerLink="templates" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Consumption templates" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#file-earmark-ruled"/>

src-ui/src/app/components/manage/consumption-templates/consumption-templates.component.html

@@ -5,29 +5,32 @@
       </svg>
       <ng-container i18n>Add Template</ng-container>
     </button>
-  </pngx-page-header>
+</pngx-page-header>
 
-  <table class="table table-striped align-middle border shadow-sm">
+<ul class="list-group">
-    <thead>
+
-        <tr>
+    <li class="list-group-item">
-            <th scope="col" i18n>Name</th>
+        <div class="row">
-            <th scope="col" i18n>Sort order</th>
+            <div class="col" i18n>Name</div>
-            <th scope="col" i18n>Document Sources</th>
+            <div class="col" i18n>Sort order</div>
-            <th scope="col" i18n>Actions</th>
+            <div class="col" i18n>Document Sources</div>
-        </tr>
+            <div class="col" i18n>Actions</div>
-    </thead>
+        </div>
-    <tbody>
+    </li>
-        <tr *ngFor="let template of templates">
+
-            <td scope="row"><button class="btn btn-link p-0" type="button" (click)="editTemplate(template)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.ConsumptionTemplate)">{{template.name}}</button></td>
+    <li *ngFor="let template of templates" class="list-group-item">
-            <td scope="row"><code>{{template.order}}</code></td>
+        <div class="row">
-            <td scope="row">{{getSourceList(template)}}</td>
+            <div class="col d-flex align-items-center"><button class="btn btn-link p-0" type="button" (click)="editTemplate(template)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.ConsumptionTemplate)">{{template.name}}</button></div>
-            <td scope="row">
+            <div class="col d-flex align-items-center"><code>{{template.order}}</code></div>
+            <div class="col d-flex align-items-center">{{getSourceList(template)}}</div>
+            <div class="col">
                 <div class="btn-group">
                     <button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.ConsumptionTemplate }" class="btn btn-sm btn-primary" type="button" (click)="editTemplate(template)" i18n>Edit</button>
                     <button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.ConsumptionTemplate }" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteTemplate(template)" i18n>Delete</button>
                 </div>
-            </td>
+            </div>
-        </tr>
+        </div>
-    </tbody>
+    </li>
-</table>
+</ul>
+
 <div *ngIf="templates.length === 0" i18n>No templates defined.</div>

src-ui/src/app/components/manage/consumption-templates/consumption-templates.component.spec.ts

@@ -18,7 +18,7 @@ import { ConsumptionTemplateService } from 'src/app/services/rest/consumption-te
 import { ToastService } from 'src/app/services/toast.service'
 import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
 import { PageHeaderComponent } from '../../common/page-header/page-header.component'
-import { ConsumptionTemplatesListComponent } from './consumption-templates-list.component'
+import { ConsumptionTemplatesComponent } from './consumption-templates.component'
 import { ConsumptionTemplateEditDialogComponent } from '../../common/edit-dialog/consumption-template-edit-dialog/consumption-template-edit-dialog.component'
 import { PermissionsService } from 'src/app/services/permissions.service'
 
@@ -48,8 +48,8 @@ const templates: PaperlessConsumptionTemplate[] = [
 ]
 
 describe('ConsumptionTemplatesComponent', () => {
-  let component: ConsumptionTemplatesListComponent
+  let component: ConsumptionTemplatesComponent
-  let fixture: ComponentFixture<ConsumptionTemplatesListComponent>
+  let fixture: ComponentFixture<ConsumptionTemplatesComponent>
   let consumptionTemplateService: ConsumptionTemplateService
   let modalService: NgbModal
   let toastService: ToastService
@@ -57,7 +57,7 @@ describe('ConsumptionTemplatesComponent', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [
-        ConsumptionTemplatesListComponent,
+        ConsumptionTemplatesComponent,
         IfPermissionsDirective,
         PageHeaderComponent,
         ConfirmDialogComponent,
@@ -92,7 +92,7 @@ describe('ConsumptionTemplatesComponent', () => {
     modalService = TestBed.inject(NgbModal)
     toastService = TestBed.inject(ToastService)
 
-    fixture = TestBed.createComponent(ConsumptionTemplatesListComponent)
+    fixture = TestBed.createComponent(ConsumptionTemplatesComponent)
     component = fixture.componentInstance
     fixture.detectChanges()
   })

src-ui/src/app/components/manage/consumption-templates/consumption-templates.component.ts

@@ -14,11 +14,11 @@ import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dial
 import { EditDialogMode } from '../../common/edit-dialog/edit-dialog.component'
 
 @Component({
-  selector: 'pngx-consumption-templates-list',
+  selector: 'pngx-consumption-templates',
-  templateUrl: './consumption-templates-list.component.html',
+  templateUrl: './consumption-templates.component.html',
-  styleUrls: ['./consumption-templates-list.component.scss'],
+  styleUrls: ['./consumption-templates.component.scss'],
 })
-export class ConsumptionTemplatesListComponent
+export class ConsumptionTemplatesComponent
   extends ComponentWithPermissions
   implements OnInit
 {