Changed the code formatting command and rules.

* Changed the command to "format". * Removed HTML whitespace sensitivity.
comixed · Mar 23, 2021 · 55c3df3 · 55c3df3
1 parent e469a80
commit 55c3df3
Show file tree

Hide file tree

Showing 21 changed files with 377 additions and 295 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -99,6 +99,16 @@ The frontend code uses [Prettier](https://prettier.io/) for code formatting, and
 
 Most editors and IDEs support formatting Typescript code. Please check the documentation for the one you use for how to apply the convention when coding.
 
+#### Code Formatting
+
+To ensure your code confirms to coding conventions, run the following command in the **comixed-web** module:
+
+```
+$ yarn format
+```
+
+This will reformat all Typescript-related code.
+
 #### Lint Checks
 
 To ensure your Angular code meets project requirements, please run the lint checks in the **comixed-web** module:

diff --git a/comixed-web/package.json b/comixed-web/package.json
@@ -8,7 +8,7 @@
     "test": "ng test --code-coverage",
     "lint": "ng lint",
     "e2e": "ng e2e",
-    "code-cleanup": "prettier --write 'src/app/**/*.{ts,json,html,scss}'"
+    "format": "prettier --write 'src/app/**/*.{ts,json,html,scss}'"
   },
   "prettier": {
     "singleQuote": true,
@@ -22,7 +22,9 @@
         "files": "*.html",
         "options": {
           "parser": "angular",
-          "singleQuote": false
+          "singleQuote": false,
+          "jsxBracketSameLine": false,
+          "htmlWhitespaceSensitivity": "ignore"
         }
       }
     ]

diff --git a/comixed-web/src/app/admin/pages/web-audit-log/web-audit-log.component.html b/comixed-web/src/app/admin/pages/web-audit-log/web-audit-log.component.html
@@ -28,9 +28,9 @@ <h3>{{ contentTitle | translate }}</h3>
 
     <mat-table [dataSource]="dataSource" matSort>
       <ng-container matColumnDef="actions">
-        <mat-header-cell *matHeaderCellDef>{{
-          "web-audit-log.label.actions" | translate
-        }}</mat-header-cell>
+        <mat-header-cell *matHeaderCellDef>
+          {{ "web-audit-log.label.actions" | translate }}
+        </mat-header-cell>
         <mat-cell *matCellDef="let entry">
           <button
             [id]="'show-request-content-button-' + entry.id"
@@ -52,78 +52,80 @@ <h3>{{ contentTitle | translate }}</h3>
       </ng-container>
 
       <ng-container matColumnDef="email">
-        <mat-header-cell mat-sort-header *matHeaderCellDef>{{
-          "web-audit-log.label.account" | translate
-        }}</mat-header-cell>
+        <mat-header-cell mat-sort-header *matHeaderCellDef>
+          {{ "web-audit-log.label.account" | translate }}
+        </mat-header-cell>
         <mat-cell *matCellDef="let entry">{{ entry.email }}</mat-cell>
       </ng-container>
 
       <ng-container matColumnDef="remote-ip">
-        <mat-header-cell mat-sort-header *matHeaderCellDef>{{
-          "web-audit-log.label.remote-ip" | translate
-        }}</mat-header-cell>
+        <mat-header-cell mat-sort-header *matHeaderCellDef>
+          {{ "web-audit-log.label.remote-ip" | translate }}
+        </mat-header-cell>
         <mat-cell *matCellDef="let entry">{{ entry.remoteIp }}</mat-cell>
       </ng-container>
 
       <ng-container matColumnDef="url">
-        <mat-header-cell mat-sort-header *matHeaderCellDef>{{
-          "web-audit-log.label.url" | translate
-        }}</mat-header-cell>
+        <mat-header-cell mat-sort-header *matHeaderCellDef>
+          {{ "web-audit-log.label.url" | translate }}
+        </mat-header-cell>
         <mat-cell *matCellDef="let entry">{{ entry.url }}</mat-cell>
       </ng-container>
 
       <ng-container matColumnDef="method">
-        <mat-header-cell mat-sort-header *matHeaderCellDef>{{
-          "web-audit-log.label.method" | translate
-        }}</mat-header-cell>
+        <mat-header-cell mat-sort-header *matHeaderCellDef>
+          {{ "web-audit-log.label.method" | translate }}
+        </mat-header-cell>
         <mat-cell *matCellDef="let entry">{{ entry.method }}</mat-cell>
       </ng-container>
 
       <ng-container matColumnDef="started">
-        <mat-header-cell mat-sort-header *matHeaderCellDef>{{
-          "web-audit-log.label.started" | translate
-        }}</mat-header-cell>
-        <mat-cell *matCellDef="let entry">{{
-          entry.startTime | date: "medium"
-        }}</mat-cell>
+        <mat-header-cell mat-sort-header *matHeaderCellDef>
+          {{ "web-audit-log.label.started" | translate }}
+        </mat-header-cell>
+        <mat-cell *matCellDef="let entry">
+          {{ entry.startTime | date: "medium" }}
+        </mat-cell>
       </ng-container>
 
       <ng-container matColumnDef="bytes-received">
-        <mat-header-cell *matHeaderCellDef>{{
-          "web-audit-log.label.bytes-received" | translate
-        }}</mat-header-cell>
-        <mat-cell *matCellDef="let entry">{{
-          entry.requestContent?.length | number
-        }}</mat-cell>
+        <mat-header-cell *matHeaderCellDef>
+          {{ "web-audit-log.label.bytes-received" | translate }}
+        </mat-header-cell>
+        <mat-cell *matCellDef="let entry">
+          {{ entry.requestContent?.length | number }}
+        </mat-cell>
       </ng-container>
 
       <ng-container matColumnDef="bytes-sent">
-        <mat-header-cell *matHeaderCellDef>{{
-          "web-audit-log.label.bytes-sent" | translate
-        }}</mat-header-cell>
-        <mat-cell *matCellDef="let entry">{{
-          entry.responseContent?.length | number
-        }}</mat-cell>
+        <mat-header-cell *matHeaderCellDef>
+          {{ "web-audit-log.label.bytes-sent" | translate }}
+        </mat-header-cell>
+        <mat-cell *matCellDef="let entry">
+          {{ entry.responseContent?.length | number }}
+        </mat-cell>
       </ng-container>
 
       <ng-container matColumnDef="runtime">
-        <mat-header-cell *matHeaderCellDef>{{
-          "web-audit-log.label.runtime" | translate
-        }}</mat-header-cell>
-        <mat-cell *matCellDef="let entry">{{
-          "web-audit-log.text.runtime"
-            | translate
-              : { time: entry.endTime - entry.startTime | number: "1.0-0" }
-        }}</mat-cell>
+        <mat-header-cell *matHeaderCellDef>
+          {{ "web-audit-log.label.runtime" | translate }}
+        </mat-header-cell>
+        <mat-cell *matCellDef="let entry">
+          {{
+            "web-audit-log.text.runtime"
+              | translate
+                : { time: entry.endTime - entry.startTime | number: "1.0-0" }
+          }}
+        </mat-cell>
       </ng-container>
 
       <ng-container matColumnDef="success">
-        <mat-header-cell mat-sort-header *matHeaderCellDef>{{
-          "web-audit-log.label.success" | translate
-        }}</mat-header-cell>
-        <mat-cell *matCellDef="let entry">{{
-          entry.successful | yesNo | translate
-        }}</mat-cell>
+        <mat-header-cell mat-sort-header *matHeaderCellDef>
+          {{ "web-audit-log.label.success" | translate }}
+        </mat-header-cell>
+        <mat-cell *matCellDef="let entry">
+          {{ entry.successful | yesNo | translate }}
+        </mat-cell>
       </ng-container>
 
       <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

diff --git a/comixed-web/src/app/components/navigation-bar/navigation-bar.component.html b/comixed-web/src/app/components/navigation-bar/navigation-bar.component.html
@@ -60,9 +60,9 @@
 <mat-menu #adminMenu="matMenu">
   <button mat-menu-item [routerLink]="['admin', 'import']">
     <mat-icon>import_export</mat-icon>
-    <mat-label>{{
-      "menu.admin-menu.import-comic-files" | translate
-    }}</mat-label>
+    <mat-label>
+      {{ "menu.admin-menu.import-comic-files" | translate }}
+    </mat-label>
   </button>
   <mat-divider></mat-divider>
   <button mat-menu-item [routerLink]="['/admin', 'audit', 'web']">
@@ -78,8 +78,8 @@
     (click)="onSelectLanguage(language)"
   >
     <mat-icon *ngIf="currentLanguage === language">check_box</mat-icon>
-    <mat-icon *ngIf="currentLanguage !== language"
-      >check_box_outline_blank
+    <mat-icon *ngIf="currentLanguage !== language">
+      check_box_outline_blank
     </mat-icon>
     <mat-label>{{ "menu.language-menu." + language | translate }}</mat-label>
   </button>
@@ -88,9 +88,9 @@
 <mat-menu #optionsMenu="matMenu">
   <button *ngIf="isReader" mat-menu-item (click)="onShowDisplayOptions()">
     <mat-icon>tv</mat-icon>
-    <mat-label>{{
-      "menu.options-menu.show-options-panel" | translate
-    }}</mat-label>
+    <mat-label>
+      {{ "menu.options-menu.show-options-panel" | translate }}
+    </mat-label>
   </button>
   <button mat-menu-item [matMenuTriggerFor]="loggingMenu">
     <mat-icon>settings</mat-icon>
@@ -104,12 +104,12 @@
     mat-menu-item
     (click)="onSetLogging(option)"
   >
-    <mat-icon *ngIf="isCurrentLoggingLevel(option)"
-      >radio_button_checked</mat-icon
-    >
-    <mat-icon *ngIf="!isCurrentLoggingLevel(option)"
-      >radio_button_unchecked</mat-icon
-    >
+    <mat-icon *ngIf="isCurrentLoggingLevel(option)">
+      radio_button_checked
+    </mat-icon>
+    <mat-icon *ngIf="!isCurrentLoggingLevel(option)">
+      radio_button_unchecked
+    </mat-icon>
     <mat-label>{{ "menu.logging-menu." + option | translate }}</mat-label>
   </button>
 </mat-menu>
diff --git a/comixed-web/src/app/library/components/comic-covers/comic-covers.component.html b/comixed-web/src/app/library/components/comic-covers/comic-covers.component.html
@@ -13,9 +13,9 @@
           (click)="navigationPane.toggle(true)"
         >
           <mat-icon>account_tree</mat-icon>
-          <mat-label>{{
-            "library.label.navigation-tree" | translate
-          }}</mat-label>
+          <mat-label>
+            {{ "library.label.navigation-tree" | translate }}
+          </mat-label>
         </button>
         <div class="cx-spacer"></div>
         <mat-paginator
@@ -56,9 +56,9 @@
   <ng-template matMenuContent>
     <button mat-menu-item (click)="onShowComicDetails(comic)">
       <mat-icon>details</mat-icon>
-      <mat-label>{{
-        "library.context-menu.comic-details" | translate
-      }}</mat-label>
+      <mat-label>
+        {{ "library.context-menu.comic-details" | translate }}
+      </mat-label>
     </button>
     <button mat-menu-item [matMenuTriggerFor]="markAsMenu">
       <mat-icon>rule</mat-icon>
@@ -74,19 +74,19 @@
     (click)="onSetOneReadState(comic, true)"
   >
     <mat-icon>turned_in</mat-icon>
-    <mat-label>{{
-      "library.context-menu.mark-one-as-read" | translate
-    }}</mat-label>
+    <mat-label>
+      {{ "library.context-menu.mark-one-as-read" | translate }}
+    </mat-label>
   </button>
   <button
     id="mark-one-as-unread-button"
     mat-menu-item
     (click)="onSetOneReadState(comic, false)"
   >
     <mat-icon>turned_in_not</mat-icon>
-    <mat-label>{{
-      "library.context-menu.mark-one-as-unread" | translate
-    }}</mat-label>
+    <mat-label>
+      {{ "library.context-menu.mark-one-as-unread" | translate }}
+    </mat-label>
   </button>
   <mat-divider *ngIf="selected.length > 0"></mat-divider>
   <button
@@ -96,9 +96,9 @@
     (click)="onSetSelectedReadState(true)"
   >
     <mat-icon>turned_in</mat-icon>
-    <mat-label>{{
-      "library.context-menu.mark-selected-as-read" | translate
-    }}</mat-label>
+    <mat-label>
+      {{ "library.context-menu.mark-selected-as-read" | translate }}
+    </mat-label>
   </button>
   <button
     id="mark-selected-as-unread-button"
@@ -107,8 +107,8 @@
     (click)="onSetSelectedReadState(false)"
   >
     <mat-icon>turned_in_not</mat-icon>
-    <mat-label>{{
-      "library.context-menu.mark-selected-as-unread" | translate
-    }}</mat-label>
+    <mat-label>
+      {{ "library.context-menu.mark-selected-as-unread" | translate }}
+    </mat-label>
   </button>
 </mat-menu>
diff --git a/comixed-web/src/app/library/components/comic-detail-card/comic-detail-card.component.html b/comixed-web/src/app/library/components/comic-detail-card/comic-detail-card.component.html
@@ -1,7 +1,7 @@
 <mat-card [style.width]="imageWidth" [style.height]="imageHeight">
   <mat-card-title class="cx-text-nowrap">{{ title }}</mat-card-title>
-  <mat-card-subtitle *ngIf="detailLink"
-    ><a [routerLink]="detailLink">{{ "text.view-details" | translate }}</a>
+  <mat-card-subtitle *ngIf="detailLink">
+    <a [routerLink]="detailLink">{{ "text.view-details" | translate }}</a>
   </mat-card-subtitle>
   <mat-card-content>
     <div