Merge pull request #142 from kaito3desuyo/refactor/dashboard

ダッシュボードのリファクタリング

package.json

@@ -64,6 +64,7 @@
     "@angular/compiler-cli": "^15.1.3",
     "@angular/language-service": "^15.1.3",
     "@datorama/akita-ngdevtools": "^7.0.0",
+    "@savvywombat/tailwindcss-grid-areas": "^3.0.1",
     "@tailwindcss/forms": "^0.5.3",
     "@types/file-saver": "^2.0.5",
     "@types/gtag.js": "^0.0.11",

src/app/app-routing.module.ts

@@ -1,12 +1,12 @@
 import { NgModule } from '@angular/core';
-import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
 const routes: Routes = [
     {
         path: '',
         loadChildren: () =>
-            import('./pages/dashboard/dashboard.module').then(
-                (mod) => mod.DashboardModule
+            import('./pages/dashboard/dashboard.route').then(
+                (mod) => mod.DASHBOARD_ROUTES
             ),
     },
     {

src/app/pages/dashboard/components/dashboard-description-p/dashboard-description-p.component.html

@@ -1,10 +1,14 @@
-<mat-card fxLayout="column" fxFlex="auto">
-    <mat-card-title> このサイトは？ </mat-card-title>
-    <mat-card-content>
-        <p>
+<article
+    class="tw-box-border tw-flex tw-h-full tw-w-full tw-flex-col tw-gap-4 tw-bg-white tw-p-4 tw-shadow-md"
+>
+    <header>
+        <h2 class="tw-m-0 tw-text-2xl tw-font-normal">このサイトは？</h2>
+    </header>
+    <section class="tw-flex-grow">
+        <p class="tw-m-0 tw-text-sm">
             Sotetsu Lab.
             は、神奈川県を走る大手私鉄、相模鉄道に関する情報を提供するWebサービスです。<br />
             相鉄線を走る車両の1日の動き（これを運用と呼びます）や、全駅における特定車両の発車時刻等の情報を提供しています。
         </p>
-    </mat-card-content>
-</mat-card>
+    </section>
+</article>

src/app/pages/dashboard/components/dashboard-description-p/dashboard-description-p.component.ts

@@ -1,16 +1,10 @@
-import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
-  selector: 'app-dashboard-description-p',
-  templateUrl: './dashboard-description-p.component.html',
-  styleUrls: ['./dashboard-description-p.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+    standalone: true,
+    selector: 'app-dashboard-description-p',
+    templateUrl: './dashboard-description-p.component.html',
+    styleUrls: ['./dashboard-description-p.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DashboardDescriptionPComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}
+export class DashboardDescriptionPComponent {}

src/app/pages/dashboard/components/dashboard-main-c/dashboard-main-c.component.html

@@ -1,45 +1,43 @@
 <div
-    [gdAreas.lt-md]="
-        'description | operation-search-card | operation-post-card | adsense | timetable-search-card | timetable-post-card | library-list-card'
-    "
-    [gdAreas.gt-sm]="
-        'description description description | operation-search-card operation-post-card library-list-card | adsense adsense library-list-card | timetable-search-card timetable-post-card library-list-card'
-    "
-    gdGap="16px"
-    [gdColumns.lt-md]="'100%'"
-    [gdColumns.gt-sm]="'1fr 1fr 1fr'"
-    [gdRows.lt-md]="'auto'"
-    [gdRows.gt-sm]="'auto auto auto'"
+    class="tw-grid tw-auto-cols-fr tw-gap-4 tw-grid-areas-dashboard-slim md:tw-grid-areas-dashboard-medium xl:tw-grid-areas-dashboard-full"
 >
-    <div gdArea="description" fxLayout="column">
+    <div class="tw-grid-in-description">
         <app-dashboard-description-p
-            fxFlex="auto"
+            class="tw-h-full tw-w-full"
         ></app-dashboard-description-p>
     </div>
-    <div gdArea="operation-search-card" fxLayout="column">
+
+    <div class="tw-grid-in-operation-search-card">
         <app-operation-search-card-c
-            fxFlex="auto"
+            class="tw-h-full tw-w-full"
         ></app-operation-search-card-c>
     </div>
-    <div gdArea="operation-post-card" fxLayout="column">
-        <app-operation-post-card-c fxFlex="auto"></app-operation-post-card-c>
+
+    <div class="tw-grid-in-operation-post-card">
+        <app-operation-post-card-c
+            class="tw-h-full tw-w-full"
+        ></app-operation-post-card-c>
     </div>
-    <div gdArea="timetable-search-card" fxLayout="column">
+
+    <div class="tw-grid-in-timetable-search-card">
         <app-timetable-search-card-c
-            fxFlex="auto"
+            class="tw-h-full tw-w-full"
         ></app-timetable-search-card-c>
     </div>
-    <div gdArea="timetable-post-card" fxLayout="column">
-        <app-timetable-post-card-c fxFlex="auto"></app-timetable-post-card-c>
+
+    <div class="tw-grid-in-timetable-post-card">
+        <app-timetable-post-card-c
+            class="tw-h-full tw-w-full"
+        ></app-timetable-post-card-c>
     </div>
-    <div gdArea="library-list-card" fxLayout="column">
-        <app-library-list-card-c fxFlex="auto"></app-library-list-card-c>
+
+    <div class="tw-grid-in-library-list-card">
+        <app-library-list-card-c
+            class="tw-h-full tw-w-full"
+        ></app-library-list-card-c>
     </div>
-    <div gdArea="adsense">
-        <ng-adsense
-            [adSlot]="7813861593"
-            [adFormat]="'horizontal'"
-            [fullWidthResponsive]="false"
-        ></ng-adsense>
+
+    <div class="tw-grid-in-adsense">
+        <ng-adsense [adSlot]="7813861593"></ng-adsense>
     </div>
 </div>

src/app/pages/dashboard/components/dashboard-main-c/dashboard-main-c.component.ts

@@ -1,15 +1,27 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+import { AdsenseModule } from 'ng2-adsense';
+import { LibraryListCardCComponent } from 'src/app/shared/library-list-card/components/library-list-card-c/library-list-card-c.component';
+import { OperationPostCardCComponent } from 'src/app/shared/operation-post-card/components/operation-post-card-c/operation-post-card-c.component';
+import { OperationSearchCardCComponent } from 'src/app/shared/operation-search-card/components/operation-search-card-c/operation-search-card-c.component';
+import { TimetablePostCardCComponent } from 'src/app/shared/timetable-post-card/components/timetable-post-card-c/timetable-post-card-c.component';
+import { TimetableSearchCardCComponent } from 'src/app/shared/timetable-search-card/components/timetable-search-card-c/timetable-search-card-c.component';
+import { DashboardDescriptionPComponent } from '../dashboard-description-p/dashboard-description-p.component';
 
 @Component({
-  selector: 'app-dashboard-main-c',
-  templateUrl: './dashboard-main-c.component.html',
-  styleUrls: ['./dashboard-main-c.component.scss']
+    standalone: true,
+    selector: 'app-dashboard-main-c',
+    templateUrl: './dashboard-main-c.component.html',
+    styleUrls: ['./dashboard-main-c.component.scss'],
+    imports: [
+        AdsenseModule,
+        //
+        DashboardDescriptionPComponent,
+        //
+        OperationSearchCardCComponent,
+        OperationPostCardCComponent,
+        TimetableSearchCardCComponent,
+        TimetablePostCardCComponent,
+        LibraryListCardCComponent,
+    ],
 })
-export class DashboardMainCComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}
+export class DashboardMainCComponent {}

src/app/pages/dashboard/dashboard.component.html

@@ -1,3 +1,3 @@
-<main [ngClass.lt-md]="['p-16']" [ngClass.gt-sm]="['p-64']">
+<main class="tw-p-4 md:tw-p-16">
     <app-dashboard-main-c></app-dashboard-main-c>
 </main>

src/app/pages/dashboard/dashboard.component.scss

@@ -1,5 +0,0 @@
-:host {
-    .center {
-        margin: auto;
-    }
-}

src/app/pages/dashboard/dashboard.component.ts

@@ -1,27 +1,46 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { RxState } from '@rx-angular/state';
 import { TitleService } from 'src/app/core/services/title.service';
+import { OPERATION_POST_CARD_PROVIDERS } from 'src/app/shared/operation-post-card/operation-post-card.provider';
+import { OPERATION_SEARCH_CARD_PROVIDERS } from 'src/app/shared/operation-search-card/operation-search-card.provider';
 import { OperationSearchCardService } from 'src/app/shared/operation-search-card/services/operation-search-card.service';
 import { TimetablePostCardService } from 'src/app/shared/timetable-post-card/services/timetable-post-card.service';
+import { TIMETABLE_POST_CARD_PROVIDERS } from 'src/app/shared/timetable-post-card/timetable-post-card.provider';
 import { TimetableSearchCardService } from 'src/app/shared/timetable-search-card/services/timetable-search-card.service';
+import { TIMETABLE_SEARCH_CARD_PROVIDERS } from 'src/app/shared/timetable-search-card/timetable-search-card.provider';
+import { DashboardMainCComponent } from './components/dashboard-main-c/dashboard-main-c.component';
 
 @Component({
+    standalone: true,
     selector: 'app-dashboard',
     templateUrl: './dashboard.component.html',
     styleUrls: ['./dashboard.component.scss'],
-    providers: [RxState],
+    providers: [
+        ...OPERATION_SEARCH_CARD_PROVIDERS,
+        ...OPERATION_POST_CARD_PROVIDERS,
+        ...TIMETABLE_SEARCH_CARD_PROVIDERS,
+        ...TIMETABLE_POST_CARD_PROVIDERS,
+        RxState,
+    ],
+    imports: [DashboardMainCComponent],
 })
 export class DashboardComponent {
-    constructor(
-        private readonly router: Router,
-        private readonly state: RxState<{}>,
-        private readonly route: ActivatedRoute,
-        private readonly titleService: TitleService,
-        private readonly operationSearchCardService: OperationSearchCardService,
-        private readonly timetableSearchCardService: TimetableSearchCardService,
-        private readonly timetablePostCardService: TimetablePostCardService
-    ) {
+    private readonly router = inject(Router);
+    private readonly route = inject(ActivatedRoute);
+    private readonly state = inject(RxState);
+    private readonly titleService = inject(TitleService);
+    private readonly operationSearchCardService = inject(
+        OperationSearchCardService
+    );
+    private readonly timetableSearchCardService = inject(
+        TimetableSearchCardService
+    );
+    private readonly timetablePostCardService = inject(
+        TimetablePostCardService
+    );
+
+    constructor() {
         this.state.hold(this.route.data, ({ title }) => {
             this.titleService.setTitle(title);
         });

src/app/pages/dashboard/dashboard.route.ts

@@ -0,0 +1,11 @@
+import { Route } from '@angular/router';
+
+export const DASHBOARD_ROUTES: Route[] = [
+    {
+        path: '',
+        loadComponent: () =>
+            import('./dashboard.component').then(
+                (mod) => mod.DashboardComponent
+            ),
+    },
+];

src/app/shared/library-list-card/components/library-list-card-c/library-list-card-c.component.html

@@ -1 +1 @@
-<app-library-list-card-p></app-library-list-card-p>
+<app-library-list-card-p class="tw-h-full tw-w-full"></app-library-list-card-p>

src/app/shared/library-list-card/components/library-list-card-c/library-list-card-c.component.scss

@@ -1,5 +0,0 @@
-:host {
-    width: 100%;
-    height: 100%;
-    display: flex;
-}

src/app/shared/library-list-card/components/library-list-card-c/library-list-card-c.component.ts

@@ -1,10 +1,11 @@
 import { Component } from '@angular/core';
+import { LibraryListCardPComponent } from '../library-list-card-p/library-list-card-p.component';
 
 @Component({
+    standalone: true,
     selector: 'app-library-list-card-c',
     templateUrl: './library-list-card-c.component.html',
     styleUrls: ['./library-list-card-c.component.scss'],
+    imports: [LibraryListCardPComponent],
 })
-export class LibraryListCardCComponent {
-    constructor() {}
-}
+export class LibraryListCardCComponent {}