fix: deximals display #299

taro04 · 2022-03-10T13:49:26Z

@YasunoriMATSUOKA

小数点以下の表記を修正しました。
（フォント小さく、グレー）

https://cauchye.slack.com/archives/CKV987JSW/p1646393621173669

例）homeページ

angularのdecimal pipeで、小数点桁数を制限している箇所をプロジェクト検索し、自作のカスタムpipeで置き換えています。カスタムpipeのファイルを置く場所が正しいか併せて確認いただきたいです。

レビューお願いいたします。

YasunoriMATSUOKA

@taro04
コードレビューのみですが、実装方針はOKだと思います。
ただ、pipeは配置場所をpipesディレクトリ配下とかにまとめたほうが良いと思ったのでその点だけ修正お願いします。

YasunoriMATSUOKA · 2022-03-22T01:11:20Z

projects/main/src/app/decimals.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'decimals',
+})
+export class DecimalsPipe implements PipeTransform {
+  transform(value: string | undefined, count: number): unknown {
+    if (value === undefined) {
+      return value;
+    }
+    const index = value.indexOf('.');
+
+    return value.substring(index, index + count + 1);
+  }
+}


@taro04
共通で色々なところで使うpipeはディレクトリ分けて管理したほうが管理しやすいかなと思いました。
例えばprojects/main/src/app/pipesのようなディレクトリの中に配置してはどうでしょうか？

cc: @kimurayu45z 配置場所違和感あれば、フォロー頂けると助かります。(sharedの中の方が良い？とかは若干迷ったところありますが、一旦、mainの中に配置する前提ならここかなあと思ったところに配置して進めるつもりで考えています。)

YasunoriMATSUOKA · 2022-03-22T01:12:02Z

projects/main/src/app/floor.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'floor',
+})
+export class FloorPipe implements PipeTransform {
+  transform(value: string | undefined): unknown {
+    if (value === undefined) {
+      return value;
+    }
+    const index = value.indexOf('.');
+    const numString = value.substring(0, index);
+
+    return Number(numString).toLocaleString();
+  }
+}


配置場所、app直下ではなく、pipes等のディレクトリ作ってそこに配置がいいかなと思いました。

YasunoriMATSUOKA · 2022-03-22T01:13:37Z

projects/main/src/app/views/pipe.module.ts

+import { DecimalsPipe } from './../decimals.pipe';
+import { FloorPipe } from './../floor.pipe';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+@NgModule({
+  declarations: [DecimalsPipe, FloorPipe],
+  imports: [CommonModule],
+  exports: [DecimalsPipe, FloorPipe],
+})
+export class PipeModule {}


配置場所、app直下ではなく、pipes等のディレクトリ作ってそこに配置がいいかなと思いました。
↑いや、これはviews直下のこのモジュールにimportする必要があるという感じだったでしょうか？(このimportなかったらエラーになる感じだったでしょうか？)

import元も必要あれば修正してあげてください。

どこかにモジュール置く必要があってviewである必要はなかったです。
同pipesフォルダにpipesモジュールも追加し、各使用先でそれをインポートしています。

YasunoriMATSUOKA · 2022-03-22T01:15:06Z

projects/main/src/app/views/home/mint/mint.module.ts

-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { MaterialModule } from '../../material.module';
+import { PipeModule } from '../../pipe.module';
