feat(news): 情報が追加されたときの表示

arisucool · Jul 30, 2023 · cc09adb · cc09adb
1 parent 5928145
commit cc09adb
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 4 deletions.
diff --git a/src/app/news/news.service.ts b/src/app/news/news.service.ts
@@ -25,7 +25,18 @@ export class NewsService {
     let items = await req.json();
     this.appCacheService.setCachedJson(this.CACHE_KEY, items);
 
-    return items.map((item: NewsItem) => this.formatNewsItem(item));
+    // データを整形
+    items = items.map((item: NewsItem) => this.formatNewsItem(item));
+
+    // 整形後の情報でソート
+    items = items.sort((a: NewsItem, b: NewsItem) => {
+      if (!a.createdAt) return 1;
+      if (!b.createdAt) return -1;
+
+      return b.createdAt.getTime() - a.createdAt.getTime();
+    });
+
+    return items;
   }
 
   async getNewsItem(id: number) {
@@ -36,6 +47,7 @@ export class NewsService {
       return undefined;
     }
 
+    // データを整形して返す
     return this.formatNewsItem(item);
   }
 
@@ -52,21 +64,38 @@ export class NewsService {
       : undefined;
 
     if (item.children) {
+      // 子記事のツイート ID を取得
       item.children.map((child) => {
         child.tweetId = child.tweetUrl
           ? this.getTweetIdByUrl(child.tweetUrl)
           : undefined;
         return child;
       });
 
+      // 子記事から日付を取得
+      const createdAts: Date[] = [];
+      item.children.forEach((child) => {
+        if (child.createdAt) {
+          createdAts.push(new Date(child.createdAt));
+        }
+      });
+
+      // 最も新しい日付を親記事の日付とする
+      if (createdAts.length >= 1) {
+        const newestDate = createdAts.reduce((a, b) =>
+          a.getTime() > b.getTime() ? a : b
+        );
+        item.createdAt = newestDate;
+      }
+
+      // 子記事からリマインダーの日付を取得
       const reminderEndDates: Date[] = [];
       item.children.forEach((child) => {
         if (child.reminderEndDate) {
           reminderEndDates.push(new Date(child.reminderEndDate));
         }
       });
 
-      // 最も近い日付を取得する
       if (reminderEndDates.length !== 0) {
         const nearestDate = reminderEndDates.reduce((a, b) =>
           a.getTime() < b.getTime() ? a : b

diff --git a/src/app/news/pages/news-list-page/news-list-page.component.html b/src/app/news/pages/news-list-page/news-list-page.component.html
@@ -32,7 +32,12 @@ <h2>ニュース・タチバナ <small>まとめ版 α ver. </small></h2>
       [routerLink]="'articles/' + item.id"
       target="_blank"
     >
-      <div class="news-item app-card bordered">
+      <div
+        class="news-item app-card bordered"
+        [ngClass]="{
+          'with-children': item.children && item.children.length >= 1
+        }"
+      >
         <!-- タイトル -->
         <p class="title">
           {{ item.title }}
@@ -52,17 +57,35 @@ <h2>ニュース・タチバナ <small>まとめ版 α ver. </small></h2>
         </ng-container>
         <!---->
 
+        <!-- アップデートテキスト -->
+        <p
+          class="update-text"
+          *ngIf="item.children && item.children.length >= 1"
+        >
+          [更新]
+          {{ item.children[0].title }}
+        </p>
+        <!---->
+
         <!-- サマリー -->
         <div class="summary">
           <!-- 作成・更新日時 -->
-          <p class="createdAt">
+          <p
+            class="createdAt"
+            [matTooltip]="
+              item.children && item.children.length >= 1
+                ? 'この日時に情報が追加されました'
+                : ''
+            "
+          >
             <ng-container
               *ngIf="
                 item.children && item.children.length >= 1;
                 else tplCreatedAt
               "
             >
               {{ item.children[0].createdAt | date : "yyyy/MM/dd HH:mm" }}
+              <mat-icon>update</mat-icon>
             </ng-container>
             <ng-template #tplCreatedAt>
               {{ item.createdAt | date : "yyyy/MM/dd HH:mm" }}

diff --git a/src/app/news/pages/news-list-page/news-list-page.component.scss b/src/app/news/pages/news-list-page/news-list-page.component.scss
@@ -30,6 +30,22 @@
   .news-item {
     width: 100%;
 
+    &.with-children::after {
+      background-color: white;
+      right: -5px;
+      bottom: -7px;
+      display: block;
+      content: " ";
+      border-radius: 10px;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      z-index: -1;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
+    }
+
     .reminder {
       color: #d35400;
       position: absolute;
@@ -43,6 +59,30 @@
       margin-bottom: 0.5rem;
     }
 
+    .createdAt {
+      mat-icon {
+        font-size: 1.2rem;
+        height: 1.2rem;
+        width: 1.2rem;
+        line-height: 1.2rem;
+        margin-left: 0.5rem;
+        vertical-align: middle;
+      }
+    }
+
+    .update-text {
+      margin-bottom: 0;
+
+      mat-icon {
+        font-size: 1.2rem;
+        height: 1.2rem;
+        width: 1.2rem;
+        line-height: 1.2rem;
+        margin-right: 0.2rem;
+        vertical-align: middle;
+      }
+    }
+
     .summary {
       color: #666666;
       display: flex;