@thecodeblogs/blog 0.15.3 → 0.15.5

package/fesm2020/thecodeblogs-blog.mjs

@@ -34,7 +34,7 @@ import { FileUploader, FileUploadModule } from 'ng2-file-upload';
 import * as i1$3 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import * as i6$1 from '@angular/forms';
-import { UntypedFormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { UntypedFormControl, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i8 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import * as i9 from '@angular/material/input';
@@ -59,8 +59,11 @@ import * as i1$4 from '@angular/router';
 import { NavigationEnd, RouterModule } from '@angular/router';
 import * as i3 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
-import * as i5$1 from '@angular/material/list';
+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';
@@ -314,6 +317,9 @@ class EntryService extends DjangoRestFrameworkEndpointService {
     get() {
         return this.http.get(this.endpoint).pipe(map(this.handleListResponse.bind(this)));
     }
+    search(searchTerm) {
+        return this.http.get(this.endpoint + "?search=" + searchTerm).pipe(map(this.handleListResponse.bind(this)));
+    }
     getUnpublishedEntries() {
         const params = new HttpParams().set('published', JSON.stringify(false)).set('defunct', JSON.stringify(false));
         return this.http.get(this.adminEndpoint, { params });
@@ -1374,14 +1380,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
         }], ctorParameters: function () { return [{ type: EntryService }]; } });
 
 class SideNavigationComponent {
-    constructor(entryService, router, identityService) {
+    constructor(entryService, router, identityService, renderer) {
         this.entryService = entryService;
         this.router = router;
         this.identityService = identityService;
+        this.renderer = renderer;
+        this.state = 'out';
+        this.response = null;
+        this.debounceTimeout = 200;
+        this.loading = true;
         this.entries = [];
         this.entriesByMonthAndYear = [];
+        this.searchTerm = "";
+        this.doSearch = new EventEmitter();
+        this.searchControl = new FormControl('');
     }
     ngOnInit() {
+        this.doSearch.pipe(debounceTime(this.debounceTimeout)).subscribe((result) => {
+            this.searchEntries(result);
+        });
         this.identityService.getMe().subscribe((identity) => {
             this.identity = identity;
         }, (err) => {
@@ -1389,58 +1406,91 @@ 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() {
-        for (const entryWrapper of this.entries) {
-            const entry = entryWrapper.entry;
-            const create_date = new Date(entry.create_date);
-            const month = create_date.getMonth();
-            const year = create_date.getFullYear();
-            const key = month + '/' + year;
-            const sort_index = (year * 100) + month;
-            const containers = filter(this.entriesByMonthAndYear, (entryContainer) => entryContainer.month_year === key);
-            if (containers.length > 0) {
-                const container = containers[0];
-                const entriesWithId = filter(container.entries, (e) => e.id === entryWrapper.entry.id);
-                if (entriesWithId.length === 0) {
-                    container.entries.push(entry);
-                }
+    organizeEntries(wipe = true) {
+        if (wipe) {
+            this.state = 'out';
+        }
+        let organizeEntriesFn = () => {
+            if (wipe) {
+                this.entriesByMonthAndYear = [];
             }
-            else {
-                const newContainer = { month_year: key, month_year_number: sort_index, entries: [entry] };
-                this.entriesByMonthAndYear.push(newContainer);
+            let newEntries = JSON.parse(JSON.stringify(this.entriesByMonthAndYear));
+            for (const entryWrapper of this.entries) {
+                const entry = entryWrapper.entry;
+                const create_date = new Date(entry.create_date);
+                const month = create_date.getMonth();
+                const year = create_date.getFullYear();
+                const key = month + '/' + year;
+                const sort_index = (year * 100) + month;
+                const containers = filter(newEntries, (entryContainer) => entryContainer.month_year === key);
+                if (containers.length > 0) {
+                    const container = containers[0];
+                    const entriesWithId = filter(container.entries, (e) => e.id === entryWrapper.entry.id);
+                    if (entriesWithId.length === 0) {
+                        container.entries.push(entry);
+                    }
+                }
+                else {
+                    const newContainer = { month_year: key, month_year_number: sort_index, entries: [entry] };
+                    newEntries.push(newContainer);
+                }
             }
-        }
-        this.entriesByMonthAndYear.sort((entry_a, entry_b) => {
-            return entry_a.month_year_number - entry_b.month_year_number;
-        });
-        this.entriesByMonthAndYear.reverse();
+            newEntries.sort((entry_a, entry_b) => {
+                return entry_a.month_year_number - entry_b.month_year_number;
+            });
+            newEntries.reverse();
+            let setEntriesFn = () => {
+                this.entriesByMonthAndYear = newEntries;
+                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) };
+                });
+                this.organizeEntries();
+            });
+        }
+        else {
+            this.getEntries();
+        }
+    }
     render() {
     }
     routeTo(entry) {
@@ -1506,13 +1556,41 @@ class SideNavigationComponent {
             this.sourceSub = null;
         }
     }
+    onSearchChange(searchValue) {
+        this.doSearch.emit(searchValue);
+    }
 }
-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 }], target: i0.ɵɵFactoryTarget.Component });
-SideNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: SideNavigationComponent, selector: "app-side-navigation", ngImport: i0, template: "<div class=\"sidenav no-scrollbar\">\n    <mat-nav-list *ngFor=\"let container of entriesByMonthAndYear\">\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    <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: "component", type: i5$1.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i5$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }] });
+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\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%)' })),
+            transition('in => out', [
+                animate('100ms ease-out', style({ transform: 'translateX(110%)' }))
+            ]),
+            transition('out => in', [
+                animate('100ms ease-in', style({ transform: 'translateX(0%)' }))
+            ])
+        ]),
+    ] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SideNavigationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-side-navigation', template: "<div class=\"sidenav no-scrollbar\">\n    <mat-nav-list *ngFor=\"let container of entriesByMonthAndYear\">\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    <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"] }]
-        }], ctorParameters: function () { return [{ type: EntryService }, { type: i1$4.Router }, { type: IdentityService }]; } });
+            args: [{ selector: 'app-side-navigation', animations: [
+                        trigger('sideNavAnimation', [
+                            state('in', style({ transform: 'translateX(0%)' })),
+                            state('out', style({ transform: 'translateX(110%)' })),
+                            transition('in => out', [
+                                animate('100ms ease-out', style({ transform: 'translateX(110%)' }))
+                            ]),
+                            transition('out => in', [
+                                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\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 }]
+            }] } });
 
 class MainComponent {
     constructor(router) {
@@ -1723,6 +1801,7 @@ CoreModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15
         MatDatepickerModule,
         MatNativeDateModule,
         MatTableModule,
+        MatProgressSpinnerModule,
         FontAwesomeModule,
         FileUploadModule,
         NgxMaterialTimepickerModule], exports: [EntryRendererComponent,
@@ -1767,6 +1846,7 @@ CoreModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15
         MatDatepickerModule,
         MatNativeDateModule,
         MatTableModule,
+        MatProgressSpinnerModule,
         FontAwesomeModule,
         FileUploadModule,
         NgxMaterialTimepickerModule] });
@@ -1811,6 +1891,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                         MatDatepickerModule,
                         MatNativeDateModule,
                         MatTableModule,
+                        MatProgressSpinnerModule,
                         FontAwesomeModule,
                         FileUploadModule,
                         NgxMaterialTimepickerModule,