Chore: refactor loading stuff to be more DRY

This commit is contained in:
shamoon
2024-12-09 12:36:48 -08:00
parent c2e34b36ce
commit 0a7c296194
34 changed files with 87 additions and 110 deletions

View File

@@ -26,7 +26,7 @@
</h4>
<ul class="list-group">
<li class="list-group-item">
<div class="row reveal">
<div class="row">
<div class="col" i18n>Name</div>
<div class="col" i18n>Server</div>
<div class="col d-none d-sm-block" i18n>Username</div>
@@ -43,7 +43,7 @@
@for (account of mailAccounts; track account) {
<li class="list-group-item">
<div class="row" [class.reveal]="revealAccounts">
<div class="row fade" [class.show]="showAccounts">
<div class="col d-flex align-items-center">
<button class="btn btn-link p-0 text-start" type="button" (click)="editMailAccount(account)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.MailAccount)">
{{account.name}}@switch (account.account_type) {
@@ -99,7 +99,7 @@
</h4>
<ul class="list-group">
<li class="list-group-item">
<div class="row reveal">
<div class="row">
<div class="col" i18n>Name</div>
<div class="col d-none d-sm-block" i18n>Sort Order</div>
<div class="col" i18n>Account</div>
@@ -117,7 +117,7 @@
@for (rule of mailRules; track rule) {
<li class="list-group-item">
<div class="row" [class.reveal]="revealRules">
<div class="row fade" [class.show]="showRules">
<div class="col d-flex align-items-center"><button class="btn btn-link p-0 text-start" type="button" (click)="editMailRule(rule)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.MailRule)">{{rule.name}}</button></div>
<div class="col d-flex align-items-center d-none d-sm-flex">{{rule.order}}</div>
<div class="col d-flex align-items-center">{{(mailAccountService.getCached(rule.account) | async)?.name}}</div>

View File

@@ -2,12 +2,3 @@
.d-block.d-sm-none .dropdown-toggle::after {
display: none;
}
.list-group-item .row {
opacity: 0;
transition: opacity .2s;
}
.list-group-item .reveal {
opacity: 1;
}

View File

@@ -48,9 +48,9 @@ export class MailComponent
}
public loadingRules: boolean = true
public revealRules: boolean = false
public showRules: boolean = false
public loadingAccounts: boolean = true
public revealAccounts: boolean = false
public showAccounts: boolean = false
constructor(
public mailAccountService: MailAccountService,
@@ -85,7 +85,7 @@ export class MailComponent
.subscribe({
next: () => {
this.loadingAccounts = false
this.revealAccounts = true
this.showAccounts = true
},
error: (e) => {
this.toastService.showError(
@@ -108,7 +108,7 @@ export class MailComponent
.subscribe({
next: (r) => {
this.loadingRules = false
this.revealRules = true
this.showRules = true
},
error: (e) => {
this.toastService.showError($localize`Error retrieving mail rules`, e)