@thecodeblogs/blog 0.15.4 → 0.15.5

package/fesm2020/thecodeblogs-blog.mjs

@@ -62,6 +62,8 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i8$1 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
+import * as i9$1 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i3$1 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import Autolinker from 'autolinker';
@@ -1384,6 +1386,9 @@ class SideNavigationComponent {
         this.identityService = identityService;
         this.renderer = renderer;
         this.state = 'out';
+        this.response = null;
+        this.debounceTimeout = 200;
+        this.loading = true;
         this.entries = [];
         this.entriesByMonthAndYear = [];
         this.searchTerm = "";
@@ -1391,7 +1396,7 @@ class SideNavigationComponent {
         this.searchControl = new FormControl('');
     }
     ngOnInit() {
-        this.doSearch.pipe(debounceTime(500)).subscribe((result) => {
+        this.doSearch.pipe(debounceTime(this.debounceTimeout)).subscribe((result) => {
             this.searchEntries(result);
         });
         this.identityService.getMe().subscribe((identity) => {
@@ -1401,23 +1406,27 @@ class SideNavigationComponent {
         });
         this.getEntries();
     }
-    getEntriesWithUrl(url) {
+    getMore() {
+        this.getEntriesWithUrl(this.response.next, false);
+    }
+    getEntriesWithUrl(url, wipe = true) {
+        this.loading = true;
         this.entryService.getListByUrl(url).subscribe((response) => {
+            this.response = response;
             this.entries = this.entries.concat(map$1(response.results, (result) => {
                 return { id: result.id, entry: new Entry(result) };
             }));
-            if (response.next) {
-                this.getEntriesWithUrl(response.next);
-            }
-            else {
-                this.organizeEntries();
-            }
+            this.organizeEntries(wipe);
         });
     }
-    organizeEntries() {
-        this.state = 'out';
+    organizeEntries(wipe = true) {
+        if (wipe) {
+            this.state = 'out';
+        }
         let organizeEntriesFn = () => {
-            this.entriesByMonthAndYear = [];
+            if (wipe) {
+                this.entriesByMonthAndYear = [];
+            }
             let newEntries = JSON.parse(JSON.stringify(this.entriesByMonthAndYear));
             for (const entryWrapper of this.entries) {
                 const entry = entryWrapper.entry;
@@ -1445,37 +1454,37 @@ class SideNavigationComponent {
             newEntries.reverse();
             let setEntriesFn = () => {
                 this.entriesByMonthAndYear = newEntries;
-                this.state = 'in';
+                this.loading = false;
+                if (wipe) {
+                    this.state = 'in';
+                }
             };
             setTimeout(setEntriesFn.bind(this), 400);
         };
         setTimeout(organizeEntriesFn.bind(this), 400);
     }
     getEntries() {
+        this.loading = true;
         this.entryService.get().subscribe((response) => {
+            this.response = response;
             this.entries = map$1(response.results, (result) => {
                 return { id: result.id, entry: new Entry(result) };
             });
-            if (response.next) {
-                this.getEntriesWithUrl(response.next);
-            }
-            else {
-                this.organizeEntries();
-            }
+            this.organizeEntries();
         });
     }
     searchEntries(searchTerm) {
+        let turnOnLoading = () => {
+            this.loading = true;
+        };
+        setTimeout(turnOnLoading.bind(this), this.debounceTimeout + 100);
         if (searchTerm !== "") {
             this.entryService.search(searchTerm).subscribe((response) => {
+                this.response = response;
                 this.entries = map$1(response.results, (result) => {
                     return { id: result.id, entry: new Entry(result) };
                 });
-                if (response.next) {
-                    this.getEntriesWithUrl(response.next);
-                }
-                else {
-                    this.organizeEntries();
-                }
+                this.organizeEntries();
             });
         }
         else {
@@ -1552,7 +1561,7 @@ class SideNavigationComponent {
     }
 }
 SideNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SideNavigationComponent, deps: [{ token: EntryService }, { token: i1$4.Router }, { token: IdentityService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-SideNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: SideNavigationComponent, selector: "app-side-navigation", viewQueries: [{ propertyName: "divNav", first: true, predicate: ["navcontainer"], descendants: true }], ngImport: i0, template: "<div class=\"sidenav no-scrollbar\">\n  <div style=\"margin-top: 20px;\">\n    <mat-form-field style=\"width: 100%\">\n      <mat-label>Search</mat-label>\n      <input matInput [formControl]=\"searchControl\" (ngModelChange)=\"onSearchChange($event)\">\n    </mat-form-field>\n  </div>\n\n  <div #navcontainer class=\"navcontainer\"\n    [@sideNavAnimation]=\"state\"\n  >\n    <mat-nav-list\n      *ngFor=\"let container of entriesByMonthAndYear\"\n    >\n      <h3>{{getMonthAndYearFromKey(container.month_year)}}</h3>\n      <a mat-list-item *ngFor=\"let entry of container.entries\" href=\"javascript:void(0)\" (click)=\"routeTo(entry)\">{{entry.title}}</a>\n    </mat-nav-list>\n\n  </div>\n\n  <ng-container *ngIf=\"identity?.id === 1\">\n    <h2>Misc</h2>\n\n    <mat-nav-list>\n      <a mat-list-item href=\"javascript:void(0);\" (click)=\"routeTo(null)\">Create</a>\n    </mat-nav-list>\n  </ng-container>\n  <h3 *ngIf=\"identity\">Logged in as {{identity?.email}}</h3>\n</div>\n\n", styles: [".sidenav{max-height:calc(100vh - 100px)}@media screen and (max-height: 560px){.sidenav{max-height:100vh}}h2,h3{margin-left:10px;justify-content:right}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLabel, selector: "mat-label" }, { kind: "component", type: i8$1.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i8$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }], animations: [
+SideNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: SideNavigationComponent, selector: "app-side-navigation", viewQueries: [{ propertyName: "divNav", first: true, predicate: ["navcontainer"], descendants: true }], ngImport: i0, template: "<div class=\"sidenav no-scrollbar\">\n  <div style=\"margin-top: 20px;\">\n    <mat-form-field style=\"width: 100%\">\n      <mat-label>Search</mat-label>\n      <input matInput [formControl]=\"searchControl\" (ngModelChange)=\"onSearchChange($event)\">\n    </mat-form-field>\n  </div>\n\n  <div\n    class=\"progress\"\n    [hidden]=\"!loading\"\n  >\n    <mat-progress-spinner\n      style=\"margin-left: 16px;\"\n      [diameter]=20\n      mode=\"indeterminate\"\n    >\n    </mat-progress-spinner>\n  </div>\n\n  <div #navcontainer class=\"navcontainer\"\n    [@sideNavAnimation]=\"state\"\n  >\n    <mat-nav-list\n      *ngFor=\"let container of entriesByMonthAndYear\"\n    >\n      <h3>{{getMonthAndYearFromKey(container.month_year)}}</h3>\n      <a mat-list-item *ngFor=\"let entry of container.entries\" href=\"javascript:void(0)\" (click)=\"routeTo(entry)\">{{entry.title}}</a>\n    </mat-nav-list>\n\n    <a\n      class=\"sidelink\"\n      *ngIf=\"this?.response?.next && !loading\"\n      (click)=\"getMore()\"\n      href=\"javascript:void(0);\">More...</a>\n  </div>\n  <ng-container *ngIf=\"identity?.id === 1\">\n    <h2>Misc</h2>\n\n    <mat-nav-list>\n      <a mat-list-item href=\"javascript:void(0);\" (click)=\"routeTo(null)\">Create</a>\n    </mat-nav-list>\n  </ng-container>\n  <h3 *ngIf=\"identity\">Logged in as {{identity?.email}}</h3>\n</div>\n\n", styles: [".progress{position:absolute;top:100px;left:0}.sidelink{padding-left:16px}.sidenav{position:relative;max-height:calc(100vh - 100px)}@media screen and (max-height: 560px){.sidenav{max-height:100vh}}h2,h3{margin-left:10px;justify-content:right}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLabel, selector: "mat-label" }, { kind: "component", type: i8$1.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i8$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i9$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], animations: [
         trigger('sideNavAnimation', [
             state('in', style({ transform: 'translateX(0%)' })),
             state('out', style({ transform: 'translateX(110%)' })),
@@ -1577,7 +1586,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                                 animate('100ms ease-in', style({ transform: 'translateX(0%)' }))
                             ])
                         ]),
-                    ], template: "<div class=\"sidenav no-scrollbar\">\n  <div style=\"margin-top: 20px;\">\n    <mat-form-field style=\"width: 100%\">\n      <mat-label>Search</mat-label>\n      <input matInput [formControl]=\"searchControl\" (ngModelChange)=\"onSearchChange($event)\">\n    </mat-form-field>\n  </div>\n\n  <div #navcontainer class=\"navcontainer\"\n    [@sideNavAnimation]=\"state\"\n  >\n    <mat-nav-list\n      *ngFor=\"let container of entriesByMonthAndYear\"\n    >\n      <h3>{{getMonthAndYearFromKey(container.month_year)}}</h3>\n      <a mat-list-item *ngFor=\"let entry of container.entries\" href=\"javascript:void(0)\" (click)=\"routeTo(entry)\">{{entry.title}}</a>\n    </mat-nav-list>\n\n  </div>\n\n  <ng-container *ngIf=\"identity?.id === 1\">\n    <h2>Misc</h2>\n\n    <mat-nav-list>\n      <a mat-list-item href=\"javascript:void(0);\" (click)=\"routeTo(null)\">Create</a>\n    </mat-nav-list>\n  </ng-container>\n  <h3 *ngIf=\"identity\">Logged in as {{identity?.email}}</h3>\n</div>\n\n", styles: [".sidenav{max-height:calc(100vh - 100px)}@media screen and (max-height: 560px){.sidenav{max-height:100vh}}h2,h3{margin-left:10px;justify-content:right}\n"] }]
+                    ], template: "<div class=\"sidenav no-scrollbar\">\n  <div style=\"margin-top: 20px;\">\n    <mat-form-field style=\"width: 100%\">\n      <mat-label>Search</mat-label>\n      <input matInput [formControl]=\"searchControl\" (ngModelChange)=\"onSearchChange($event)\">\n    </mat-form-field>\n  </div>\n\n  <div\n    class=\"progress\"\n    [hidden]=\"!loading\"\n  >\n    <mat-progress-spinner\n      style=\"margin-left: 16px;\"\n      [diameter]=20\n      mode=\"indeterminate\"\n    >\n    </mat-progress-spinner>\n  </div>\n\n  <div #navcontainer class=\"navcontainer\"\n    [@sideNavAnimation]=\"state\"\n  >\n    <mat-nav-list\n      *ngFor=\"let container of entriesByMonthAndYear\"\n    >\n      <h3>{{getMonthAndYearFromKey(container.month_year)}}</h3>\n      <a mat-list-item *ngFor=\"let entry of container.entries\" href=\"javascript:void(0)\" (click)=\"routeTo(entry)\">{{entry.title}}</a>\n    </mat-nav-list>\n\n    <a\n      class=\"sidelink\"\n      *ngIf=\"this?.response?.next && !loading\"\n      (click)=\"getMore()\"\n      href=\"javascript:void(0);\">More...</a>\n  </div>\n  <ng-container *ngIf=\"identity?.id === 1\">\n    <h2>Misc</h2>\n\n    <mat-nav-list>\n      <a mat-list-item href=\"javascript:void(0);\" (click)=\"routeTo(null)\">Create</a>\n    </mat-nav-list>\n  </ng-container>\n  <h3 *ngIf=\"identity\">Logged in as {{identity?.email}}</h3>\n</div>\n\n", styles: [".progress{position:absolute;top:100px;left:0}.sidelink{padding-left:16px}.sidenav{position:relative;max-height:calc(100vh - 100px)}@media screen and (max-height: 560px){.sidenav{max-height:100vh}}h2,h3{margin-left:10px;justify-content:right}\n"] }]
         }], ctorParameters: function () { return [{ type: EntryService }, { type: i1$4.Router }, { type: IdentityService }, { type: i0.Renderer2 }]; }, propDecorators: { divNav: [{
                 type: ViewChild,
                 args: ['navcontainer', { static: false }]
@@ -1792,6 +1801,7 @@ CoreModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15
         MatDatepickerModule,
         MatNativeDateModule,
         MatTableModule,
+        MatProgressSpinnerModule,
         FontAwesomeModule,
         FileUploadModule,
         NgxMaterialTimepickerModule], exports: [EntryRendererComponent,
@@ -1836,6 +1846,7 @@ CoreModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15
         MatDatepickerModule,
         MatNativeDateModule,
         MatTableModule,
+        MatProgressSpinnerModule,
         FontAwesomeModule,
         FileUploadModule,
         NgxMaterialTimepickerModule] });
@@ -1880,6 +1891,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                         MatDatepickerModule,
                         MatNativeDateModule,
                         MatTableModule,
+                        MatProgressSpinnerModule,
                         FontAwesomeModule,
                         FileUploadModule,
                         NgxMaterialTimepickerModule,