Change: make saved views manage its own component (#8423)

src-ui/src/app/components/admin/settings/settings.component.html

@@ -1,7 +1,7 @@
 <pngx-page-header
   title="Settings"
   i18n-title
-  info="Options to customize appearance, notifications, saved views and more. Settings apply to the <strong>current user only</strong>."
+  info="Options to customize appearance, notifications and more. Settings apply to the <strong>current user only</strong>."
   i18n-info
   >
   <button class="btn btn-sm btn-outline-primary" (click)="tourService.start()">
@@ -226,8 +226,14 @@
           </div>
         </div>
 
-        <h4 class="mt-4" i18n>Notes</h4>
+        <h4 class="mt-4" i18n>Saved Views</h4>
+        <div class="row mb-3">
+          <div class="offset-md-3 col">
+            <pngx-input-check i18n-title title="Show warning when closing saved views with unsaved changes" formControlName="savedViewsWarnOnUnsavedChange"></pngx-input-check>
+          </div>
+        </div>
 
+        <h4 class="mt-4" i18n>Notes</h4>
         <div class="row mb-3">
           <div class="offset-md-3 col">
             <pngx-input-check i18n-title title="Enable notes" formControlName="notesEnabled"></pngx-input-check>
@@ -336,87 +342,6 @@
 
       </ng-template>
     </li>
-
-    <li [ngbNavItem]="SettingsNavIDs.SavedViews" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.SavedView }">
-      <a ngbNavLink i18n>Saved views</a>
-      <ng-template ngbNavContent>
-
-        <h4 i18n>Settings</h4>
-        <div class="row mb-3">
-          <div class="offset-md-3 col">
-            <pngx-input-check i18n-title title="Show warning when closing saved views with unsaved changes" formControlName="savedViewsWarnOnUnsavedChange"></pngx-input-check>
-          </div>
-        </div>
-
-        <h4 i18n>Views</h4>
-        <ul class="list-group" formGroupName="savedViews">
-
-          @for (view of savedViews; track view) {
-            <li class="list-group-item py-3">
-            <div [formGroupName]="view.id">
-              <div class="row">
-                <div class="col">
-                  <pngx-input-text title="Name" formControlName="name"></pngx-input-text>
-                </div>
-                <div class="col">
-                  <div class="form-check form-switch mt-3">
-                    <input type="checkbox" class="form-check-input" id="show_on_dashboard_{{view.id}}" formControlName="show_on_dashboard">
-                    <label class="form-check-label" for="show_on_dashboard_{{view.id}}" i18n>Show on dashboard</label>
-                  </div>
-                  <div class="form-check form-switch">
-                    <input type="checkbox" class="form-check-input" id="show_in_sidebar_{{view.id}}" formControlName="show_in_sidebar">
-                    <label class="form-check-label" for="show_in_sidebar_{{view.id}}" i18n>Show in sidebar</label>
-                  </div>
-                </div>
-                <div class="col-auto">
-                  <label class="form-label" for="name_{{view.id}}" i18n>Actions</label>
-                  <pngx-confirm-button
-                    label="Delete"
-                    i18n-label
-                    (confirm)="deleteSavedView(view)"
-                    *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.SavedView }"
-                    buttonClasses="btn-sm btn-outline-danger form-control"
-                    iconName="trash">
-                  </pngx-confirm-button>
-                </div>
-              </div>
-              <div class="row">
-                <div class="col">
-                  <pngx-input-number i18n-title title="Documents page size" [showAdd]="false" formControlName="page_size"></pngx-input-number>
-                </div>
-                <div class="col">
-                  <label class="form-label" for="display_mode_{{view.id}}" i18n>Display as</label>
-                  <select class="form-select" formControlName="display_mode">
-                    <option [ngValue]="DisplayMode.TABLE" i18n>Table</option>
-                    <option [ngValue]="DisplayMode.SMALL_CARDS" i18n>Small Cards</option>
-                    <option [ngValue]="DisplayMode.LARGE_CARDS" i18n>Large Cards</option>
-                  </select>
-                </div>
-                  @if (displayFields) {
-                    <pngx-input-drag-drop-select i18n-title title="Show" i18n-emptyText emptyText="Default" [items]="displayFields" formControlName="display_fields"></pngx-input-drag-drop-select>
-                  }
-                </div>
-            </div>
-            </li>
-          }
-
-          @if (savedViews && savedViews.length === 0) {
-            <li class="list-group-item">
-              <div i18n>No saved views defined.</div>
-            </li>
-          }
-
-          @if (!savedViews) {
-            <li class="list-group-item">
-              <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
-              <div class="visually-hidden" i18n>Loading...</div>
-            </li>
-          }
-
-        </ul>
-
-      </ng-template>
-    </li>
   </ul>
 
   <div [ngbNavOutlet]="nav" class="border-start border-end border-bottom p-3 mb-3 shadow-sm"></div>