Add loading spinner

b263 · Jan 6, 2024 · 78d7958 · 78d7958
1 parent ec56d56
commit 78d7958
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 13 deletions.
diff --git a/src/ui/projects/action-track-pi/src/app/kimai/kimai.component.html b/src/ui/projects/action-track-pi/src/app/kimai/kimai.component.html
@@ -1,25 +1,24 @@
 <form [formGroup]="form" *ngIf="isAuthenticated; else notAuthenticated">
-  <div *ngFor="let project of projects$ | async">
-    {{ project.id }}: {{ project.name }}
-  </div>
-  <div>{{ form.value.projectId }}:{{ form.value.activityId }}</div>
+  <div>form projectId: {{ form.value.projectId }}</div>
+  <div>projects.length: {{ (projects$ | async)?.length }}</div>
   <div class="sdpi-item">
     <div class="sdpi-item-label">Project</div>
     <select
       *ngIf="projects$ | async as projects"
       class="sdpi-item-value select"
       formControlName="projectId"
     >
-      <option *ngIf="(loadingProjects$ | async) === false" value="0">
+      <option [value]="projectsPlaceholderValue(projects)">
         - Select project -
       </option>
-      <option *ngIf="(loadingProjects$ | async) === true" value="0">
-        - Loading... -
-      </option>
       <option *ngFor="let project of projects" [value]="project.id">
         {{ project.name }}
       </option>
     </select>
+    <div
+      class="spinner"
+      *ngIf="!(projects$ | async)?.length && (loadingProjects$ | async)"
+    ></div>
   </div>
 
   <div class="sdpi-item">
@@ -29,16 +28,17 @@
       class="sdpi-item-value select"
       formControlName="activityId"
     >
-      <option *ngIf="(loadingActivities$ | async) === false" value="0">
+      <option [value]="activitiesPlaceholderValue(activities)">
         - Select activity -
       </option>
-      <option *ngIf="(loadingActivities$ | async) === true" value="0">
-        - Loading... -
-      </option>
       <option *ngFor="let activity of activities" [value]="activity.id">
         {{ activity.name }}
       </option>
     </select>
+    <div
+      class="spinner"
+      *ngIf="!(activities$ | async)?.length && (loadingActivities$ | async)"
+    ></div>
   </div>
 </form>
 

diff --git a/src/ui/projects/action-track-pi/src/app/kimai/kimai.component.ts b/src/ui/projects/action-track-pi/src/app/kimai/kimai.component.ts
@@ -73,6 +73,7 @@ export class KimaiComponent {
     const activities = localStorage.getItem(
       `${storagePrefix}:activities:${settings?.projectId}`
     );
+    console.log('getInitialData', { settings, projects, activities });
     this.zone.run(() => {
       if (settings?.projectId) {
         this.form.get('projectId')?.patchValue(settings.projectId);
@@ -188,4 +189,20 @@ export class KimaiComponent {
   getApi() {
     return this.api.get<typeof backendProvider>(backendProvider);
   }
+
+  projectsPlaceholderValue(projects: Category[]) {
+    return projects.find(
+      (a) => Number(a.id) === Number(this.form.value?.projectId)
+    )
+      ? 0
+      : this.form.value?.projectId;
+  }
+
+  activitiesPlaceholderValue(activities: Category[]) {
+    return activities.find(
+      (a) => Number(a.id) === Number(this.form.value?.activityId)
+    )
+      ? 0
+      : this.form.value?.activityId;
+  }
 }
diff --git a/src/ui/projects/action-track-pi/src/styles.css b/src/ui/projects/action-track-pi/src/styles.css
@@ -1 +1,26 @@
-/* You can add global styles to this file, and also import other style files */
+.sdpi-item {
+  position: relative;
+}
+
+.spinner {
+  display: inline-block;
+  position: absolute;
+  right: -1em;
+  top: 2px;
+  width: 1em;
+  height: 1em;
+  min-height: 0 !important;
+  border: 2px solid #f3f3f3;
+  border-top: 2px solid #3498db;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}