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

@@ -13,7 +13,7 @@
<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>Data Type</div>
<div class="col" i18n>Actions</div>
@@ -29,7 +29,7 @@
@for (field of fields; track field) {
<li class="list-group-item">
<div class="row" [class.reveal]="reveal">
<div class="row fade" [class.show]="show">
<div class="col d-flex align-items-center"><button class="btn btn-link p-0 text-start" type="button" (click)="editField(field)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.CustomField)">{{field.name}}</button></div>
<div class="col d-flex align-items-center">{{getDataType(field)}}</div>
<div class="col">

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

@@ -54,7 +54,7 @@ export class CustomFieldsComponent
delay(100)
)
.subscribe(() => {
this.reveal = true
this.show = true
this.loading = false
})
}

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)

View File

@@ -53,7 +53,7 @@
</tr>
}
@for (object of data; track object) {
<tr (click)="toggleSelected(object); $event.stopPropagation();" class="data-row" [class.reveal]="reveal">
<tr (click)="toggleSelected(object); $event.stopPropagation();" class="data-row fade" [class.show]="show">
<td>
<div class="form-check m-0 ms-2 me-n2">
<input type="checkbox" class="form-check-input" id="{{typeName}}{{object.id}}" [checked]="selectedObjects.has(object.id)" (click)="toggleSelected(object); $event.stopPropagation();">

View File

@@ -10,12 +10,3 @@ tbody tr:last-child td {
.form-check {
min-height: 0;
}
.data-row {
opacity: 0;
transition: opacity .2s;
}
.reveal {
opacity: 1;
}

View File

@@ -153,7 +153,7 @@ export abstract class ManagementListComponent<T extends ObjectWithId>
delay(100)
)
.subscribe(() => {
this.reveal = true
this.show = true
this.loading = false
})
}

View File

@@ -13,7 +13,7 @@
<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-flex" i18n>Sort order</div>
<div class="col" i18n>Status</div>
@@ -31,7 +31,7 @@
@for (workflow of workflows; track workflow.id) {
<li class="list-group-item">
<div class="row" [class.reveal]="reveal">
<div class="row fade" [class.show]="show">
<div class="col d-flex align-items-center"><button class="btn btn-link p-0 text-start" type="button" (click)="editWorkflow(workflow)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.Workflow)">{{workflow.name}}</button></div>
<div class="col d-flex align-items-center d-none d-sm-flex"><code>{{workflow.order}}</code></div>
<div class="col d-flex align-items-center">
@@ -77,6 +77,6 @@
</li>
}
@if (!loading && workflows.length === 0) {
<li class="list-group-item" [class.reveal]="reveal" i18n>No workflows defined.</li>
<li class="list-group-item" [class.show]="show" i18n>No workflows defined.</li>
}
</ul>

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

@@ -47,7 +47,7 @@ export class WorkflowsComponent
delay(100)
)
.subscribe(() => {
this.reveal = true
this.show = true
this.loading = false
})
}