Shakeout Part 2 (#630)

* When flattening directories, ensure the order or directories being enumerated follows a natural sort. Some users are discovering directories in a different order than other machines.

* Added a case for volume parsing and fixed a poorly designed negative lookahead.

Added a sentence case pipe for formatting things.

Added time for all dates.

* Some more sentence case

* Register user now has a white input

* Fixed an issue with Manga up/down reading mode where top of the page was going forwards, when it should have gone backwards

* Reworked some code to ensure that scanseries doesn't show errors where in fact there was just nothing to update.

* Last updated should be working as intended for new library flow.

* Code smell

UI/Web/src/app/admin/_modals/reset-password-modal/reset-password-modal.component.html

@@ -1,6 +1,6 @@
 <form [formGroup]="resetPasswordForm">
     <div class="modal-header">
-        <h4 class="modal-title" id="modal-basic-title">Reset {{member.username | titlecase}}'s Password</h4>
+        <h4 class="modal-title" id="modal-basic-title">Reset {{member.username | sentenceCase}}'s Password</h4>
         <button type="button" class="close" aria-label="Close" (click)="close()">
         <span aria-hidden="true">&times;</span>
         </button>

UI/Web/src/app/admin/dashboard/dashboard.component.html

@@ -3,7 +3,7 @@
 
   <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs nav-pills">
       <li *ngFor="let tab of tabs" [ngbNavItem]="tab">
-        <a ngbNavLink routerLink="." [fragment]="tab.fragment">{{ tab.title | titlecase }}</a>
+        <a ngbNavLink routerLink="." [fragment]="tab.fragment">{{ tab.title | sentenceCase }}</a>
         <ng-template ngbNavContent>
           <ng-container *ngIf="tab.fragment === ''">
             <app-manage-settings></app-manage-settings>

UI/Web/src/app/admin/manage-library/manage-library.component.html

@@ -4,7 +4,7 @@
         <div class="col-4"><button class="btn btn-primary float-right" (click)="addLibrary()"><i class="fa fa-plus" aria-hidden="true"></i><span class="phone-hidden">&nbsp;Add Library</span></button></div>
     </div>
     <ul class="list-group" *ngIf="!createLibraryToggle; else createLibrary">
-        <li *ngFor="let library of libraries; let idx = index;" class="list-group-item">
+        <li *ngFor="let library of libraries; let idx = index; trackby: trackbyLibrary" class="list-group-item">
             <div>
                 <h4>
                     <span id="library-name--{{idx}}">{{library.name}}</span>&nbsp;
@@ -13,8 +13,8 @@
                     </div>
                     <div class="float-right">
                         <button class="btn btn-secondary mr-2 btn-sm" (click)="scanLibrary(library)" placement="top" ngbTooltip="Scan Library" attr.aria-label="Scan Library"><i class="fa fa-sync-alt" title="Scan"></i></button>
-                        <button class="btn btn-danger mr-2 btn-sm" [disabled]="deletionInProgress" (click)="deleteLibrary(library)"><i class="fa fa-trash" placement="top" ngbTooltip="Delete Library" attr.aria-label="Delete {{library.name | titlecase}}"></i></button>
-                        <button class="btn btn-primary btn-sm" (click)="editLibrary(library)"><i class="fa fa-pen" placement="top" ngbTooltip="Edit" attr.aria-label="Edit {{library.name | titlecase}}"></i></button>
+                        <button class="btn btn-danger mr-2 btn-sm" [disabled]="deletionInProgress" (click)="deleteLibrary(library)"><i class="fa fa-trash" placement="top" ngbTooltip="Delete Library" attr.aria-label="Delete {{library.name | sentenceCase}}"></i></button>
+                        <button class="btn btn-primary btn-sm" (click)="editLibrary(library)"><i class="fa fa-pen" placement="top" ngbTooltip="Edit" attr.aria-label="Edit {{library.name | sentenceCase}}"></i></button>
                     </div>
                 </h4>
             </div>

UI/Web/src/app/admin/manage-library/manage-library.component.ts

@@ -25,6 +25,7 @@ export class ManageLibraryComponent implements OnInit, OnDestroy {
    */
   deletionInProgress: boolean = false;
   scanInProgress: {[key: number]: boolean} = {};
+  libraryTrackBy = (index: number, item: Library) => `${item.name}_${item.lastScanned}_${item.type}_${item.folders.length}`;
 
   private readonly onDestroy = new Subject<void>();
 

UI/Web/src/app/admin/manage-users/manage-users.component.html

@@ -19,7 +19,7 @@
                 <div>Last Active: 
                     <span *ngIf="member.lastActive == '0001-01-01T00:00:00'; else activeDate">Never</span>
                     <ng-template #activeDate>
-                        {{member.lastActive | date: 'MM/dd/yyyy'}}
+                        {{member.lastActive | date: 'short'}}
                     </ng-template>
                 </div>
                 <div *ngIf="!member.isAdmin">Sharing: {{formatLibraries(member)}}</div>

UI/Web/src/app/cards/_modals/card-details-modal/card-details-modal.component.html

@@ -19,7 +19,7 @@
             </div>
             <div class="row no-gutters">
                 <div class="col" *ngIf="utilityService.isVolume(data)">
-                    Added: {{(data.created | date: 'MM/dd/yyyy') || '-'}}
+                    Added: {{(data.created | date: 'short') || '-'}}
                 </div>
                 <div class="col">
                     Pages: {{data.pages}}

UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.html

@@ -95,7 +95,7 @@
                   <ng-template ngbNavContent>
                     <h4>Information</h4>
                     <div class="row no-gutters mb-2">
-                        <div class="col-md-6" *ngIf="libraryName">Library: {{libraryName | titlecase}}</div>
+                        <div class="col-md-6" *ngIf="libraryName">Library: {{libraryName | sentenceCase}}</div>
                         <div class="col-md-6">Format: <app-tag-badge>{{utilityService.mangaFormat(series.format)}}</app-tag-badge></div>
                     </div>
                       <h4>Volumes</h4>
@@ -110,10 +110,10 @@
                                   <div>
                                       <div class="row no-gutters">
                                           <div class="col">
-                                              Created: {{volume.created | date: 'MM/dd/yyyy'}}
+                                              Created: {{volume.created | date: 'short'}}
                                           </div>
                                           <div class="col">
-                                              Last Modified: {{volume.lastModified | date: 'MM/dd/yyyy'}}
+                                              Last Modified: {{volume.lastModified | date: 'short'}}
                                           </div>
                                       </div>
                                       <div class="row no-gutters">

UI/Web/src/app/cards/card-item/card-item.component.html

@@ -38,6 +38,6 @@
           <app-card-actionables (actionHandler)="performAction($event)" [actions]="actions" [labelBy]="title"></app-card-actionables>
         </span>
       </div>
-      <a class="card-title library" [routerLink]="['/library', libraryId]" routerLinkActive="router-link-active" *ngIf="!supressLibraryLink && libraryName">{{libraryName}}</a>
+      <a class="card-title library" [routerLink]="['/library', libraryId]" routerLinkActive="router-link-active" *ngIf="!supressLibraryLink && libraryName">{{libraryName | sentenceCase}}</a>
     </div>
 </div>

UI/Web/src/app/manga-reader/manga-reader.component.html

@@ -31,8 +31,8 @@
             <app-infinite-scroller [pageNum]="pageNum" [bufferPages]="5" [goToPage]="goToPageEvent" (pageNumberChange)="handleWebtoonPageChange($event)" [totalPages]="maxPages - 1" [urlProvider]="getPageUrl" (loadNextChapter)="loadNextChapter()" (loadPrevChapter)="loadPrevChapter()"></app-infinite-scroller>
         </div>
         <ng-container *ngIf="readerMode === READER_MODE.MANGA_LR || readerMode === READER_MODE.MANGA_UD">
-            <div class="{{readerMode === READER_MODE.MANGA_LR ? 'right' : 'top'}} {{clickOverlayClass('right')}}" (click)="handlePageChange($event, 'right')"></div>
-            <div class="{{readerMode === READER_MODE.MANGA_LR ? 'left' : 'bottom'}} {{clickOverlayClass('left')}}" (click)="handlePageChange($event, 'left')"></div>
+            <div class="{{readerMode === READER_MODE.MANGA_LR ? 'right' : 'bottom'}} {{clickOverlayClass('right')}}" (click)="handlePageChange($event, 'right')"></div>
+            <div class="{{readerMode === READER_MODE.MANGA_LR ? 'left' : 'top'}} {{clickOverlayClass('left')}}" (click)="handlePageChange($event, 'left')"></div>
         </ng-container>
     </div>
     

UI/Web/src/app/nav-header/nav-header.component.html

@@ -63,7 +63,7 @@
 
       <div ngbDropdown class="nav-item dropdown" display="dynamic" placement="bottom-right" *ngIf="(accountService.currentUser$ | async) as user" dropdown>
         <button class="btn btn-outline-secondary primary-text" ngbDropdownToggle>
-          {{user.username | titlecase}}
+          {{user.username | sentenceCase}}
         </button>
         <div ngbDropdownMenu>
           <a ngbDropdownItem routerLink="/preferences/">User Settings</a>

UI/Web/src/app/register-member/register-member.component.scss

@@ -10,4 +10,8 @@
 .alt:focus {
     background-color: #343c59;
     box-shadow: 0 0 0 0.2rem rgb(68 79 117 / 50%);
+}
+
+input {
+    background-color: #fff !important;
 }

UI/Web/src/app/shared/sentence-case.pipe.ts

@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'sentenceCase'
+})
+export class SentenceCasePipe implements PipeTransform {
+
+  transform(value: string | null): string {
+    if (value === null || value === undefined) return '';
+    
+    return value.charAt(0).toUpperCase() + value.substr(1);
+  }
+
+}

UI/Web/src/app/shared/shared.module.ts

@@ -15,6 +15,7 @@ import { SeriesFormatComponent } from './series-format/series-format.component';
 import { UpdateNotificationModalComponent } from './update-notification/update-notification-modal.component';
 import { CircularLoaderComponent } from './circular-loader/circular-loader.component';
 import { NgCircleProgressModule } from 'ng-circle-progress';
+import { SentenceCasePipe } from './sentence-case.pipe';
 
 @NgModule({
   declarations: [
@@ -29,6 +30,7 @@ import { NgCircleProgressModule } from 'ng-circle-progress';
     SeriesFormatComponent,
     UpdateNotificationModalComponent,
     CircularLoaderComponent,
+    SentenceCasePipe,
   ],
   imports: [
     CommonModule,
@@ -40,6 +42,7 @@ import { NgCircleProgressModule } from 'ng-circle-progress';
   exports: [
     RegisterMemberComponent,
     SafeHtmlPipe,
+    SentenceCasePipe,
     ReadMoreComponent,
     DrawerComponent,
     TagBadgeComponent,

UI/Web/src/app/user-login/user-login.component.html

@@ -15,7 +15,7 @@
                 <div class="col align-self-center card p-3 m-3" style="width: 12rem;">
                     <span tabindex="0" (click)="select(member)" a11y-click="13,32">
                         <div class="logo-container">
-                            <h3 class="card-title text-center">{{member | titlecase}}</h3>
+                            <h3 class="card-title text-center">{{member | sentenceCase}}</h3>
                         </div>
                     </span>
     

UI/Web/src/app/user-login/user-login.component.scss

@@ -55,10 +55,6 @@
 
         .card-text {
             font-family: "EBGaramond", "Helvetica Neue", sans-serif;
-
-            input {
-                background-color: #fff;
-            }
         }
 
         .alt {
@@ -80,4 +76,8 @@
 .invalid-feedback {
     display: inline-block;
     color: #343c59;
+}
+
+input {
+    background-color: #fff !important;
 }