Dynamically load mail rules / accounts settings

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

@@ -227,7 +227,7 @@
       </ng-template>
     </li>
 
-    <li [ngbNavItem]="4">
+    <li [ngbNavItem]="SettingsNavIDs.Mail" (mouseover)="maybeInitializeTab(SettingsNavIDs.Mail)" (focusin)="maybeInitializeTab(SettingsNavIDs.Mail)">
       <a ngbNavLink i18n>Mail</a>
       <ng-template ngbNavContent>
 
@@ -238,13 +238,13 @@
           </h4>
           <ul class="list-group" formGroupName="mailAccounts">
 
-            <li class="list-group-item">
-              <div class="row">
-                <div class="col" i18n>Name</div>
-                <div class="col" i18n>Server</div>
-                <div class="col" i18n>Actions</div>
-              </div>
-            </li>
+              <li class="list-group-item">
+                <div class="row">
+                  <div class="col" i18n>Name</div>
+                  <div class="col" i18n>Server</div>
+                  <div class="col" i18n>Actions</div>
+                </div>
+              </li>
 
               <li *ngFor="let account of mailAccounts" class="list-group-item" [formGroupName]="account.id">
                 <div class="row">
@@ -257,11 +257,10 @@
                     </div>
                   </div>
                 </div>
-              </div>
-            </li>
+              </li>
 
-            <div *ngIf="mailAccounts.length == 0" i18n>No mail accounts defined.</div>
-        </ul>
+              <div *ngIf="mailAccounts.length == 0" i18n>No mail accounts defined.</div>
+          </ul>
 
           <h4 class="mt-4">
             <ng-container i18n>Mail rules</ng-container>
@@ -269,13 +268,13 @@
           </h4>
           <ul class="list-group" formGroupName="mailRules">
 
-            <li class="list-group-item">
-              <div class="row">
-                <div class="col" i18n>Name</div>
-                <div class="col" i18n>Account</div>
-                <div class="col" i18n>Actions</div>
-              </div>
-            </li>
+              <li class="list-group-item">
+                <div class="row">
+                  <div class="col" i18n>Name</div>
+                  <div class="col" i18n>Account</div>
+                  <div class="col" i18n>Actions</div>
+                </div>
+              </li>
 
               <li *ngFor="let rule of mailRules" class="list-group-item" [formGroupName]="rule.id">
                 <div class="row">
@@ -288,11 +287,16 @@
                     </div>
                   </div>
                 </div>
-              </div>
-            </li>
+              </li>
 
-            <div *ngIf="mailRules.length == 0" i18n>No mail rules defined.</div>
-        </ul>
+              <div *ngIf="mailRules.length == 0" i18n>No mail rules defined.</div>
+          </ul>
+        </ng-container>
+
+        <div *ngIf="!mailAccounts || !mailRules">
+          <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
+          <div class="visually-hidden" i18n>Loading...</div>
+        </div>
 
       </ng-template>
     </li>

src-ui/src/app/components/manage/settings/settings.component.ts

@@ -196,6 +196,18 @@ export class SettingsComponent
         this.savedViews = r.results
         this.initialize()
       })
+    } else if (
+      (navID == SettingsNavIDs.Mail && !this.mailAccounts) ||
+      !this.mailRules
+    ) {
+      this.mailAccountService.listAll().subscribe((r) => {
+        this.mailAccounts = r.results
+
+        this.mailRuleService.listAll().subscribe((r) => {
+          this.mailRules = r.results
+          this.initialize()
+        })
+      })
     }
   }
 
@@ -224,74 +236,76 @@ export class SettingsComponent
       }
     }
 
-    for (let account of this.mailAccounts) {
-      storeData.mailAccounts[account.id.toString()] = {
-        id: account.id,
-        name: account.name,
-        imap_server: account.imap_server,
-        imap_port: account.imap_port,
-        imap_security: account.imap_security,
-        username: account.username,
-        password: account.password,
-        character_set: account.character_set,
+    if (this.mailAccounts && this.mailRules) {
+      for (let account of this.mailAccounts) {
+        storeData.mailAccounts[account.id.toString()] = {
+          id: account.id,
+          name: account.name,
+          imap_server: account.imap_server,
+          imap_port: account.imap_port,
+          imap_security: account.imap_security,
+          username: account.username,
+          password: account.password,
+          character_set: account.character_set,
+        }
+        this.mailAccountGroup.addControl(
+          account.id.toString(),
+          new FormGroup({
+            id: new FormControl(null),
+            name: new FormControl(null),
+            imap_server: new FormControl(null),
+            imap_port: new FormControl(null),
+            imap_security: new FormControl(null),
+            username: new FormControl(null),
+            password: new FormControl(null),
+            character_set: new FormControl(null),
+          })
+        )
       }
-      this.mailAccountGroup.addControl(
-        account.id.toString(),
-        new FormGroup({
-          id: new FormControl(null),
-          name: new FormControl(null),
-          imap_server: new FormControl(null),
-          imap_port: new FormControl(null),
-          imap_security: new FormControl(null),
-          username: new FormControl(null),
-          password: new FormControl(null),
-          character_set: new FormControl(null),
-        })
-      )
-    }
 
-    for (let rule of this.mailRules) {
-      storeData.mailRules[rule.id.toString()] = {
-        name: rule.name,
-        order: rule.order,
-        account: rule.account,
-        folder: rule.folder,
-        filter_from: rule.filter_from,
-        filter_subject: rule.filter_subject,
-        filter_body: rule.filter_body,
-        filter_attachment_filename: rule.filter_attachment_filename,
-        maximum_age: rule.maximum_age,
-        attachment_type: rule.attachment_type,
-        action: rule.action,
-        action_parameter: rule.action_parameter,
-        assign_title_from: rule.assign_title_from,
-        assign_tags: rule.assign_tags,
-        assign_document_type: rule.assign_document_type,
-        assign_correspondent_from: rule.assign_correspondent_from,
-        assign_correspondent: rule.assign_correspondent,
+      for (let rule of this.mailRules) {
+        storeData.mailRules[rule.id.toString()] = {
+          name: rule.name,
+          order: rule.order,
+          account: rule.account,
+          folder: rule.folder,
+          filter_from: rule.filter_from,
+          filter_subject: rule.filter_subject,
+          filter_body: rule.filter_body,
+          filter_attachment_filename: rule.filter_attachment_filename,
+          maximum_age: rule.maximum_age,
+          attachment_type: rule.attachment_type,
+          action: rule.action,
+          action_parameter: rule.action_parameter,
+          assign_title_from: rule.assign_title_from,
+          assign_tags: rule.assign_tags,
+          assign_document_type: rule.assign_document_type,
+          assign_correspondent_from: rule.assign_correspondent_from,
+          assign_correspondent: rule.assign_correspondent,
+        }
+        this.mailRuleGroup.addControl(
+          rule.id.toString(),
+          new FormGroup({
+            name: new FormControl(null),
+            order: new FormControl(null),
+            account: new FormControl(null),
+            folder: new FormControl(null),
+            filter_from: new FormControl(null),
+            filter_subject: new FormControl(null),
+            filter_body: new FormControl(null),
+            filter_attachment_filename: new FormControl(null),
+            maximum_age: new FormControl(null),
+            attachment_type: new FormControl(null),
+            action: new FormControl(null),
+            action_parameter: new FormControl(null),
+            assign_title_from: new FormControl(null),
+            assign_tags: new FormControl(null),
+            assign_document_type: new FormControl(null),
+            assign_correspondent_from: new FormControl(null),
+            assign_correspondent: new FormControl(null),
+          })
+        )
       }
-      this.mailRuleGroup.addControl(
-        rule.id.toString(),
-        new FormGroup({
-          name: new FormControl(null),
-          order: new FormControl(null),
-          account: new FormControl(null),
-          folder: new FormControl(null),
-          filter_from: new FormControl(null),
-          filter_subject: new FormControl(null),
-          filter_body: new FormControl(null),
-          filter_attachment_filename: new FormControl(null),
-          maximum_age: new FormControl(null),
-          attachment_type: new FormControl(null),
-          action: new FormControl(null),
-          action_parameter: new FormControl(null),
-          assign_title_from: new FormControl(null),
-          assign_tags: new FormControl(null),
-          assign_document_type: new FormControl(null),
-          assign_correspondent_from: new FormControl(null),
-          assign_correspondent: new FormControl(null),
-        })
-      )
     }
 
     this.store = new BehaviorSubject(storeData)

src-ui/src/app/services/rest/mail-account.service.ts

@@ -13,7 +13,6 @@ export class MailAccountService extends AbstractPaperlessService<PaperlessMailAc
 
   constructor(http: HttpClient) {
     super(http, 'mail_accounts')
-    this.reload()
   }
 
   private reload() {

src-ui/src/app/services/rest/mail-rule.service.ts

@@ -13,7 +13,6 @@ export class MailRuleService extends AbstractPaperlessService<PaperlessMailRule>
 
   constructor(http: HttpClient) {
     super(http, 'mail_rules')
-    this.reload()
   }
 
   private reload() {