fix: lint

.stylelintrc

@@ -6,7 +6,6 @@
   ],
   "ignoreFiles": ["./src/app/styles/font-awesome.min.scss"],
   "rules": {
-    "indentation": 2,
     "color-hex-case": "lower",
     "color-hex-length": "short",
     "max-nesting-depth": 2,

angular.json

@@ -67,13 +67,6 @@
           "options": {
             "browserTarget": "ng-music:build"
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": ["tsconfig.app.json"],
-            "exclude": ["**/node_modules/**"]
-          }
         }
       }
     }

package.json

@@ -7,19 +7,19 @@
     "start": "ng serve --port 7070",
     "build": "ng build --configuration production --progress false",
     "cordova": "npm run build --base-href file:///android_asset/www/",
-    "lint": "run-p lint:**",
-    "lint:ts": "gts lint",
+    "lint": "run-s lint:**",
     "lint:format": "prettier --check .",
     "lint:stylelint": "stylelint \"**/*.scss\" verbose",
-    "fix": "run-s fix:*",
+    "lint:ts": "gts lint",
+    "fix": "run-s fix:**",
     "fix:format": "prettier --write .",
     "fix:stylelint": "stylelint --fix \"**/*.scss\" verbose",
     "fix:fix": "gts fix",
     "clean": "gts clean",
     "compile": "tsc --noEmit",
-    "prepare": "run-s prepare:*",
-    "prepare:husky": "husky install",
-    "prepare:compile": "pnpm compile",
+    "postinstall": "run-s postinstall:*",
+    "postinstall:husky": "husky install",
+    "postinstall:compile": "npm run compile",
     "pretest": "npm run compile",
     "posttest": "npm run lint"
   },

src/_styles.scss

@@ -5,7 +5,7 @@
 }
 
 $green: #0ad06f;
-$light_green: #d1fff7;
+$light-green: #d1fff7;
 $odd: #cee9f0;
 $even: #c8ddf0;
 $blue: #007fff;
@@ -24,17 +24,16 @@ body {
 }
 
 /* stylelint-disable selector-pseudo-element-no-unknown */
-::ng-deep.mat-checkbox-checked.mat-accent .mat-checkbox-background,
-::ng-deep.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,
-::ng-deep.mat-checkbox:not(.mat-checkbox-disabled).mat-accent
-.mat-checkbox-ripple
-.mat-ripple-element,
-::ng-deep.mat-checkbox-checked.mat-primary .mat-checkbox-background,
-::ng-deep.mat-checkbox-indeterminate.mat-primary .mat-checkbox-background,
-::ng-deep.mat-checkbox:not(.mat-checkbox-disabled).mat-primary
-.mat-checkbox-ripple
-.mat-ripple-element {
-  background-color: $purple !important;
+@each $theme in 'accent', 'primary' {
+  ::ng-deep.mat-checkbox {
+    &-checked.mat-#{$theme} .mat-checkbox-background,
+    &-indeterminate.mat-#{$theme} .mat-checkbox-background,
+    &:not(.mat-checkbox-disabled).mat-#{$theme}
+      .mat-checkbox-ripple
+      .mat-ripple-element {
+      background-color: $purple !important;
+    }
+  }
 }
 
 .odd {

src/app/app.component.scss

@@ -3,9 +3,13 @@
   border: 1px solid #ccc;
   overflow: hidden;
 
-  & button {
+  .active {
+    background-color: #ccc;
+  }
+
+  button {
     background-color: inherit;
-    border: none;
+    border: 0;
     cursor: pointer;
     float: left;
     outline: none;
@@ -15,15 +19,11 @@
     &:hover {
       background-color: #ddd;
     }
-
-    &.active {
-      background-color: #ccc;
-    }
   }
 }
 
 .tabcontent {
-  border-top: none;
+  border-top: 0;
 }
 
 .tabcontent:not(.active) {

src/app/app.component.ts

@@ -3,6 +3,7 @@ import {Component, OnInit} from '@angular/core';
 import {DataService} from './services/data.service';
 import {Dropbox} from './utils/dropbox';
 import {DexieService} from './services/dexie.service';
+import {Composition, Fichier} from './utils/model';
 
 @Component({
   selector: 'app-root',
@@ -19,13 +20,13 @@ export class AppComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    this.dataService.loadsList(
+    this.dataService.loadsList<Composition>(
       this.dexieService.compositionTable,
       this.dexieService.fileComposition,
       Dropbox.DROPBOX_COMPOSITION_FILE,
       true
     );
-    this.dataService.loadsList(
+    this.dataService.loadsList<Fichier>(
       this.dexieService.fichierTable,
       this.dexieService.fileFichier,
       Dropbox.DROPBOX_FICHIER_FILE,

src/app/list-composition/list-composition.component.html

@@ -267,6 +267,6 @@
   ></mat-row>
 </mat-table>
 
-<button id="goTop" mat-icon-button color="primary" (click)="goTop()">
+<button class="go-top" mat-icon-button color="primary" (click)="goTop()">
   <fa-icon [icon]="faAngleUp" size="4x"></fa-icon>
 </button>

src/app/list-composition/list-composition.component.scss

@@ -1 +1 @@
-@import '../list/list.component.scss';
+@import '../list/list.component';

src/app/list-composition/list-composition.component.ts

@@ -47,6 +47,7 @@ export class ListCompositionComponent
     'size',
     'rank',
   ];
+
   displayedFichier = new BehaviorSubject([]);
   sortFichier: Sort;
   expandedElement: Composition;
@@ -100,13 +101,13 @@ export class ListCompositionComponent
   filterOnComposition(list: Composition[]): Composition[] {
     let result = list;
     if (this.artistFilter) {
-      result = Utils.filterByFields(result, ['sArtist'], this.artistFilter);
+      result = Utils.filterByFields(result, 'sArtist', this.artistFilter);
     }
     if (this.titleFilter) {
-      result = Utils.filterByFields(result, ['sTitle'], this.titleFilter);
+      result = Utils.filterByFields(result, 'sTitle', this.titleFilter);
     }
     if (this.filteredType) {
-      result = Utils.filterByFields(result, ['type'], this.filteredType.code);
+      result = Utils.filterByFields(result, 'type', this.filteredType.code);
     }
     if (!this.deleted) {
       result = result.filter(c => !c.deleted);

src/app/list-fichier/list-fichier.component.html

@@ -279,6 +279,6 @@
   ></mat-row>
 </mat-table>
 
-<button id="goTop" mat-icon-button color="primary" (click)="goTop()">
+<button class="go-top" mat-icon-button color="primary" (click)="goTop()">
   <fa-icon [icon]="faAngleUp" size="4x"></fa-icon>
 </button>

src/app/list-fichier/list-fichier.component.scss

@@ -1 +1 @@
-@import '../list/list.component.scss';
+@import '../list/list.component';

src/app/list-fichier/list-fichier.component.ts

@@ -82,13 +82,13 @@ export class ListFichierComponent
   filter(list: Fichier[]): Fichier[] {
     let result = list;
     if (this.nameFilter) {
-      result = Utils.filterByFields(result, ['name'], this.nameFilter);
+      result = Utils.filterByFields(result, 'name', this.nameFilter);
     }
     if (this.authorFilter) {
-      result = Utils.filterByFields(result, ['author'], this.authorFilter);
+      result = Utils.filterByFields(result, 'author', this.authorFilter);
     }
     if (this.filteredType) {
-      result = Utils.filterByFields(result, ['type'], this.filteredType.code);
+      result = Utils.filterByFields(result, 'type', this.filteredType.code);
     }
     if (this.beginFilter) {
       result = result.filter(f => f.rangeBegin >= this.beginFilter);

src/app/list/list.component.scss

@@ -35,7 +35,7 @@
   display: flex;
   flex-direction: row;
 
-  & .clear-btn {
+  .clear-btn {
     align-items: center;
     display: flex;
     margin: auto;
@@ -71,7 +71,7 @@ mat-row {
   min-height: 0 !important;
 }
 
-.example-detail-row td.mat-cell {
+.example-detail-row .mat-cell {
   border-bottom-style: unset !important;
 }
 
@@ -83,11 +83,11 @@ mat-row {
   border-bottom-width: 0;
 }
 
-#goTop {
+.go-top {
   display: flex;
   margin: auto;
 
-  & ::ng-deep.fa-angle-up {
+  ::ng-deep.fa-angle-up {
     color: $blue;
   }
 }
@@ -97,18 +97,18 @@ mat-row {
 }
 
 .sorted {
-  background-color: $light_green !important;
+  background-color: $light-green !important;
 }
 
 @include media('800px') {
   .filters {
     flex-direction: column;
 
-    & ::ng-deep.mat-form-field-flex {
+    ::ng-deep.mat-form-field-flex {
       flex-direction: row;
     }
 
-    & .filter-item .mat-form-field {
+    .filter-item .mat-form-field {
       width: 90vw;
     }
   }