Feature/4.3.0 (#133)

* feat(app): implement search

* feat(app): implement move dialog

* (feat): update packages

* fix(navigation-bar): active links

* feat(dialog): update styles

* refactor(print-dialog): styles

* refactor(app): remove version service

* feat(app): implement appConfig

* refactor(app): use appConfig

* refactor(app): add missed type

* feat(app): extend appConfig

* fix(mixins): overflow auto

* feat(#123): implement csv export

* feat(app): implement mileage component

* chore(app) update dependencies

* feat(#125): implement new common table

* refactor(app): remove unsed components

* feat(settings): implement api for save hidden columns

* feat(export.service): extend API

* feat(utils): extend API

* chore(app): update deps

* feat(app): big update

* feat(app): Updated mileage and currency styles

* chore(app): Updated deps

* feat(app): Updated components

* refactor(app): Removed input component

* Kz translation (#130)

* feat:(#129): Added translation for kz users
* feat(#129): Updated kz currency icon

---------

Co-authored-by: mkinitcpio <aliaksandr.kazhamiaka@gmail.com>

* refactor(app): table and widgets

* refactor(menu): translation and styles

* fix(table): Removed onPush strategy

* fix(settings): Styles

* refactor(input): Updated styles

* refactor(feedback-dialog): Update styles

* refactor(create-car-dialog): Updated styles

* fix(number-separator): Updated format value logic

* refactor(table): Added empty message text

* refactor(table): Extented API

* fix(app): Update global date localizataion

* fix(app): Global fixes

* fix(date-picker): Updated styles

* fix(detail): Add missed code

* fix(print-dialog): Fixed broken styles

* fix(settings): Fixed broken styles

* fix(translation): Added missed translation for tenge

* fix(translation): Fixed error

* refactor(settings): Updated styles

* refactor(table-panel): Updated styles

* refactor(menu): Updated header style

* refactor(create-dialog): Removed background

* feat(#131): Implement deletion of rows

* chore(app): Prepared for 4.3.0 release

* fix(app): Styles

---------

Co-authored-by: Sabyrzhan <42386139+megasaab@users.noreply.github.com>

.gitignore

@@ -14,6 +14,7 @@ src/**/*.js
 
 # dependencies
 /node_modules
+/.angular
 
 # IDEs and editors
 /.idea

angular.json

@@ -20,7 +20,6 @@
               "src/assets"
             ],
             "styles": [
-              "node_modules/material-icons/iconfont/material-icons.css",
               "src/styles.scss"
             ],
             "scripts": [],
@@ -33,7 +32,6 @@
               "optimization": false,
               "outputHashing": "all",
               "sourceMap": true,
-              "extractCss": true,
               "namedChunks": false,
               "aot": false,
               "extractLicenses": true,
@@ -50,7 +48,6 @@
               "optimization": false,
               "outputHashing": "all",
               "sourceMap": true,
-              "extractCss": true,
               "namedChunks": false,
               "aot": false,
               "extractLicenses": true,
@@ -67,7 +64,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
@@ -152,14 +148,16 @@
       }
     }
   },
-  "defaultProject": "angular-electron",
   "schematics": {
     "@schematics/angular:component": {
-      "prefix": "app",
+      "prefix": "cm",
       "style": "scss"
     },
     "@schematics/angular:directive": {
-      "prefix": "app"
+      "prefix": "cm"
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

main.ts

@@ -6,7 +6,7 @@ import * as Store from 'electron-store';
 initialize();
 Store.initRenderer();
 
-let win: BrowserWindow = null;
+let win: BrowserWindow | null = null;
 const args = process.argv.slice(1),
   serve = args.some(val => val === '--serve');
 
@@ -31,9 +31,7 @@ function createWindow(): BrowserWindow {
 
     win.webContents.openDevTools();
 
-    require('electron-reload')(__dirname, {
-      electron: require(`${__dirname}/node_modules/electron`)
-    });
+    require('electron-reloader')(module);
     win.loadURL('http://localhost:4200');
 
   } else {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "car-maintenance",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "description": "App for log your car parts maintenance such as engine, oil and any what you want! Manage cost, date and mileage.",
   "homepage": "https://github.com/mkinitcpio/car-maintenance",
   "author": {
@@ -9,7 +9,7 @@
   },
   "keywords": [
     "angular",
-    "angular 12",
+    "angular 17",
     "electron",
     "nodejs",
     "typescript",
@@ -42,74 +42,61 @@
     "lint": "ng lint"
   },
   "dependencies": {
-    "@angular/animations": "^12.2.11",
-    "@angular/cdk": "12.2.11",
-    "@angular/forms": "^12.2.11",
-    "@angular/material": "12.2.11",
-    "@electron/remote": "2.0.8",
-    "@ngrx/effects": "12.5.0",
-    "@ngrx/store": "12.5.0",
-    "@ngrx/store-devtools": "12.5.0",
+    "@angular/animations": "18.1.3",
+    "@angular/cdk": "18.1.3",
+    "@angular/common": "18.1.3",
+    "@angular/compiler": "18.1.3",
+    "@angular/core": "18.1.3",
+    "@angular/forms": "18.1.3",
+    "@angular/language-service": "18.1.3",
+    "@angular/material": "18.1.3",
+    "@angular/platform-browser": "18.1.3",
+    "@angular/platform-browser-dynamic": "18.1.3",
+    "@angular/router": "18.1.3",
+    "@electron/remote": "2.1.2",
+    "@ngrx/effects": "18.0.2",
+    "@ngrx/store": "18.0.2",
+    "@ngrx/store-devtools": "18.0.2",
     "app-builder": "7.0.4",
-    "app-builder-bin": "4.1.2",
+    "app-builder-bin": "4.2.0",
     "electron-store": "8.1.0",
     "material-icons": "1.10.6",
-    "uuid": "8.3.1"
+    "rxjs": "7.8.1",
+    "tslib": "2.6.2",
+    "uuid": "8.3.1",
+    "zone.js": "0.14.2"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "10.0.1",
-    "@angular-devkit/build-angular": "12.2.10",
-    "@angular-eslint/builder": "12.5.0",
-    "@angular-eslint/eslint-plugin": "12.5.0",
-    "@angular-eslint/eslint-plugin-template": "12.5.0",
-    "@angular-eslint/schematics": "12.5.0",
-    "@angular-eslint/template-parser": "12.5.0",
-    "@angular/cli": "12.2.11",
-    "@angular/common": "12.2.11",
-    "@angular/compiler": "12.2.11",
-    "@angular/compiler-cli": "12.2.11",
-    "@angular/core": "12.2.11",
-    "@angular/language-service": "12.2.11",
-    "@angular/platform-browser": "12.2.11",
-    "@angular/platform-browser-dynamic": "12.2.11",
-    "@angular/router": "12.2.11",
-    "@ngx-translate/core": "13.0.0",
-    "@ngx-translate/http-loader": "6.0.0",
-    "@types/jasmine": "3.6.2",
-    "@types/jasminewd2": "2.0.8",
-    "@types/mocha": "8.0.4",
-    "@types/node": "16.11.3",
-    "@typescript-eslint/eslint-plugin": "5.7.0",
-    "@typescript-eslint/eslint-plugin-tslint": "5.7.0",
-    "@typescript-eslint/parser": "5.7.0",
-    "chai": "4.2.0",
-    "core-js": "3.6.5",
-    "cross-env": "7.0.2",
-    "electron": "22.0.2",
-    "electron-builder": "23.3.3",
-    "electron-reload": "1.5.0",
-    "eslint": "7.32.0",
-    "eslint-plugin-import": "2.25.3",
-    "eslint-plugin-jsdoc": "37.2.0",
-    "eslint-plugin-prefer-arrow": "1.2.3",
-    "jasmine-core": "3.6.0",
-    "jasmine-spec-reporter": "6.0.0",
-    "karma": "~6.3.5",
-    "karma-coverage-istanbul-reporter": "3.0.3",
-    "karma-electron": "6.3.1",
-    "karma-jasmine": "4.0.1",
-    "karma-jasmine-html-reporter": "1.5.4",
-    "mocha": "8.2.1",
+    "@angular-builders/custom-webpack": "18.0.0",
+    "@angular-builders/jest": "18.0.0",
+    "@angular-devkit/build-angular": "18.1.3",
+    "@angular-eslint/builder": "18.2.0",
+    "@angular-eslint/eslint-plugin": "18.2.0",
+    "@angular-eslint/eslint-plugin-template": "18.2.0",
+    "@angular-eslint/schematics": "18.2.0",
+    "@angular-eslint/template-parser": "18.2.0",
+    "@angular/cli": "18.1.3",
+    "@angular/compiler-cli": "18.1.3",
+    "@ngx-translate/core": "15.0.0",
+    "@ngx-translate/http-loader": "8.0.0",
+    "@playwright/test": "1.40.1",
+    "@types/jest": "29.5.11",
+    "@types/node": "20.10.5",
+    "@typescript-eslint/eslint-plugin": "8.0.0",
+    "@typescript-eslint/parser": "8.0.0",
+    "conventional-changelog-cli": "3.0.0",
+    "electron": "31.3.1",
+    "electron-builder": "24.13.3",
+    "electron-debug": "4.0.0",
+    "electron-reloader": "1.2.3",
+    "eslint": "9.8.0",
+    "jest": "29.7.0",
+    "node-polyfill-webpack-plugin": "2.0.1",
     "npm-run-all": "4.1.5",
-    "rxjs": "6.6.3",
-    "ts-node": "9.1.0",
-    "tslib": "2.0.3",
-    "typescript": "4.3.5",
-    "wait-on": "5.0.1",
-    "webdriver-manager": "12.1.7",
-    "zone.js": "0.11.4"
-  },
-  "engines": {
-    "node": ">=v14.18.1"
+    "playwright": "1.40.1",
+    "ts-node": "10.9.2",
+    "typescript": "5.5.4",
+    "wait-on": "7.2.0",
+    "webdriver-manager": "12.1.9"
   }
-}
+}

src/_animations.scss

@@ -1,17 +1,9 @@
 @keyframes shake {
-  10%, 90% {
-    transform: translate3d(-1px, 0, 0);
-  }
-
-  20%, 80% {
-    transform: translate3d(2px, 0, 0);
-  }
-
-  30%, 50%, 70% {
+  10%, 50%, 90% {
     transform: translate3d(-2px, 0, 0);
   }
 
-  40%, 60% {
+   40%, 70% {
     transform: translate3d(2px, 0, 0);
   }
 }
@@ -105,6 +97,30 @@
   }
 }
 
+@keyframes squeeze-horizontal {
+  0% {
+    transform: scale3d(1, 1, 1);
+  }
+  30% {
+    transform: scale3d(0.75, 1.25, 1);
+  }
+  40% {
+    transform: scale3d(1.25, 0.75, 1);
+  }
+  50% {
+    transform: scale3d(0.85, 1.15, 1);
+  }
+  65% {
+    transform: scale3d(1.05, 0.95, 1);
+  }
+  75% {
+    transform: scale3d(0.95, 1.05, 1);
+  }
+  100% {
+    transform: scale3d(1, 1, 1);
+  }
+}
+
 @keyframes jello {
   0% {
     transform: scale3d(1, 1, 1);

src/_colors.scss

@@ -2,6 +2,7 @@ $color-primary: var(--primary-color);
 $color-secondary: var(--secondary-color);
 $color-dangerous: var(--color-dangerous);
 $color-border: var(--color-border);
+$color-divider: var(--color-divider);
 $color-button-icon: var(--color-button-icon);
 
 $background-primary: var(--background-primary);
@@ -21,4 +22,9 @@ $menu-border: var(--menu-border);
 $tooltip-background: var(--tooltip-background);
 $tooltip-color: var(--tooltip-color);
 
-$widget-icon-background: var(--widget-icon-background);
+$widget-icon-background: var(--widget-icon-background);
+
+$stack-icon-color: var(--stack-icon-color);
+$stack-icon-background: var(--stack-icon-background);
+
+$snackbar-border-color: var(--snackbar-border-color);

src/_mixins.scss

@@ -1,8 +1,10 @@
-@mixin scrollable($border-margin: 1px) {
-  overflow-y: overlay;
+@mixin scrollable($padding-right: 10px) {
+  scrollbar-gutter: stable;
+  overflow-y: auto;
+  padding-right: $padding-right - 10px !important;
 
   &::-webkit-scrollbar-thumb {
-    border-top-width: $border-margin;
+    border-top-width: 1px;
   }
 
   &:hover::-webkit-scrollbar-thumb {
@@ -14,8 +16,9 @@
   }
 }
 
-@mixin scrollable-horizontal {
-  overflow-x: overlay;
+@mixin scrollable-horizontal($padding-bottom: 10px) {
+  overflow-x: auto;
+  padding-bottom: $padding-bottom - 10px !important;
 
   &:hover::-webkit-scrollbar-thumb {
     background-color: #79797966;

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject } from "@angular/core";
+import { Component, inject, Inject } from "@angular/core";
 import { DataBaseService } from "./core/database";
 import { AutoCloseable } from "./core/auto-closeable";
 import { SettingsService } from "./shared/components/settings/settings.service";
@@ -10,8 +10,10 @@ import { groupIllustrationNames } from './group-illustration-names';
 import { currencyNames } from './currencies-names';
 import { filter } from "rxjs/operators";
 import { SettingsTypeEnum } from "@shared/components/settings/settings-type.enum";
+import { LanguageEnum } from "@shared/components/settings/language-enum";
 import { ThemeService } from "@core/services/theme";
 import { AppearanceType } from "@shared/components/settings/interface";
+import { DateAdapter } from "@angular/material/core";
 
 @Component({
   selector: "app-root",
@@ -20,6 +22,8 @@ import { AppearanceType } from "@shared/components/settings/interface";
 })
 export class AppComponent extends AutoCloseable {
 
+  private readonly dateAdapter = inject<DateAdapter<unknown, unknown>>(DateAdapter);
+
   constructor(
     private dataBaseService: DataBaseService,
     private settingsService: SettingsService,
@@ -64,6 +68,13 @@ export class AppComponent extends AutoCloseable {
         this.themeService.setColorScheme(value as AppearanceType);
       });
 
+    this.settingsService.settingsChanged$
+      .pipe(filter((node) => node.type === SettingsTypeEnum.Language))
+      .subscribe(({ value }) => {
+        const lang = value === LanguageEnum.En ? LanguageEnum.En : LanguageEnum.Ru;
+        this.dateAdapter.setLocale(lang);
+      });
+
     this.settingsService.init();
     this.dataBaseService.initDataBase();
   }

src/app/app.config.ts

@@ -0,0 +1,19 @@
+import { InjectionToken } from "@angular/core";
+import packageJson from '../../package.json';
+
+const version = packageJson.version;
+export const APP_CONFIG = new InjectionToken<string>('APP_CONFIG');
+
+export interface AppConfig {
+  version: string;
+  documentationUrl: string;
+  sourceCodeUrl: string;
+  fileEncoding: BufferEncoding;
+}
+
+export const appConfig: AppConfig = {
+  version,
+  documentationUrl: 'https://mkinitcpio.gitbook.io/car-maintenance',
+  sourceCodeUrl: 'https://github.com/mkinitcpio/car-maintenance',
+  fileEncoding: 'utf8',
+};