poohr 3 tygodni temu
rodzic
commit
c12b9f125e

+ 1
- 0
src/app/models/event.ts Wyświetl plik

6
   id: string;
6
   id: string;
7
   dankaId: string;
7
   dankaId: string;
8
   name: string;
8
   name: string;
9
+  furigana: string;
9
   householdName: string;
10
   householdName: string;
10
   relationship: string;
11
   relationship: string;
11
   birthDate: string;
12
   birthDate: string;

+ 136
- 47
src/app/pages/danka-detail/danka-detail.html Wyświetl plik

41
                 過去帳
41
                 過去帳
42
               </button>
42
               </button>
43
 
43
 
44
+              <button
45
+                type="button"
46
+                class="tab-button"
47
+                [class.active]="selectedTab === 'event'"
48
+                (click)="selectedTab = 'event'"
49
+              >
50
+                行事
51
+              </button>
52
+
44
               <button
53
               <button
45
                 type="button"
54
                 type="button"
46
                 class="tab-button"
55
                 class="tab-button"
81
           }
90
           }
82
         </div>
91
         </div>
83
 
92
 
84
-        @if (selectedTab === 'basic' || selectedTab === 'kakocho') {
93
+        @if (selectedTab === 'basic') {
85
           <section class="family-summary">
94
           <section class="family-summary">
86
             @if (selectedTab === 'basic') {
95
             @if (selectedTab === 'basic') {
87
               <div class="family-name-area">
96
               <div class="family-name-area">
90
               </div>
99
               </div>
91
             }
100
             }
92
 
101
 
93
-            @if (selectedTab === 'kakocho') {
94
-              <div class="family-name-area">
95
-                <p class="family-name">{{ danka.householdName }}の過去帳{{ kakocholist.length }} 名</p>
96
-              </div>
97
-            }
98
           </section>
102
           </section>
99
         }
103
         }
100
 
104
 
229
 
233
 
230
             <section class="family-table-section">
234
             <section class="family-table-section">
231
               @if (filteredFamilies.length > 0) {
235
               @if (filteredFamilies.length > 0) {
232
-                <div class="family-table">
236
+                <div class="family-table family-member-table">
233
                   <div class="family-table-header">
237
                   <div class="family-table-header">
234
-                    <div>氏名</div>
235
-                    <div>ふりがな</div>
236
-                    <div>生年月日</div>
237
-                    <div>年齢</div>
238
-                    <div>続柄</div>
238
+                    <div>氏名・ふりがな</div>
239
+                    <div>関係</div>
240
+                    <div>生年月日・年齢</div>
241
+                    <div>今年の行事</div>
239
                     <div>備考</div>
242
                     <div>備考</div>
240
                     <div>操作</div>
243
                     <div>操作</div>
241
                   </div>
244
                   </div>
242
 
245
 
243
                   @for (family of filteredFamilies; track family.id) {
246
                   @for (family of filteredFamilies; track family.id) {
244
                     <div class="family-table-row">
247
                     <div class="family-table-row">
245
-                      <div class="family-person-name">
246
-                        {{ family.name }}
247
-                      </div>
248
-
249
                       <div>
248
                       <div>
250
-                        {{ family.furigana }}
249
+                        <p class="family-person-name">{{ family.name }}</p>
250
+                        <p class="family-person-sub">{{ family.furigana || 'ふりがな未登録' }}</p>
251
                       </div>
251
                       </div>
252
 
252
 
253
                       <div>
253
                       <div>
254
-                        {{ family.birthDate || '未登録' }}
254
+                        {{ family.relationship || '未登録' }}
255
                       </div>
255
                       </div>
256
 
256
 
257
                       <div>
257
                       <div>
258
-                        {{ getAge(family.birthDate) }}
258
+                        <p class="family-person-date">{{ family.birthDate || '未登録' }}</p>
259
+                        <p class="family-person-sub">{{ getAge(family.birthDate) }}歳</p>
259
                       </div>
260
                       </div>
260
 
261
 
261
                       <div>
262
                       <div>
262
-                        {{ family.relationship || '未登録' }}
263
+                        {{ getFamilyEventLabels(family) }}
263
                       </div>
264
                       </div>
264
 
265
 
265
                       <div>
266
                       <div>
266
                         {{ family.note || '' }}
267
                         {{ family.note || '' }}
267
                       </div>
268
                       </div>
268
                       <div class="family-table-action">
269
                       <div class="family-table-action">
270
+                        <a
271
+                          class="family-edit-link"
272
+                          [routerLink]="['/danka', danka.id, 'kakocho-new']"
273
+                        >
274
+                          故人登録
275
+                        </a>
269
                         <a
276
                         <a
270
                           class="family-edit-link"
277
                           class="family-edit-link"
271
                           [routerLink]="['/danka', danka.id, 'family', family.id, 'edit']"
278
                           [routerLink]="['/danka', danka.id, 'family', family.id, 'edit']"
295
               <h2>過去帳</h2>
302
               <h2>過去帳</h2>
296
             </div>
303
             </div>
297
 
304
 
298
-            <p class="empty-family-message">
299
-              @if (kakocholist.length > 0) {
300
-                <div class="family-table">
305
+            @if (kakocholist.length > 0) {
306
+              <div class="family-table family-member-table kakocho-member-table">
307
+                <div class="family-table-header">
308
+                  <div>戒名</div>
309
+                  <div>俗名・ふりがな</div>
310
+                  <div>没年月日・享年</div>
311
+                  <div>続柄</div>
312
+                  <div>回忌</div>
313
+                  <div>備考</div>
314
+                  <div>操作</div>
315
+                </div>
316
+
317
+                @for (kakocho of kakocholist; track kakocho.id) {
318
+                  <div class="family-table-row">
319
+                    <div class="family-person-name">
320
+                      {{ kakocho.kaimyo }}
321
+                    </div>
322
+
323
+                    <div>
324
+                      <p class="family-person-name">{{ kakocho.name }}</p>
325
+                      <p class="family-person-sub">{{ kakocho.furigana || 'ふりがな未登録' }}</p>
326
+                    </div>
327
+
328
+                    <div>
329
+                      <p class="family-person-date">{{ formatDeathDateWithYear(kakocho.deathDate) }}</p>
330
+                      <p class="family-person-sub">享年 {{ kakocho.ageAtDeath || '未登録' }}</p>
331
+                    </div>
332
+
333
+                    <div>
334
+                      {{ kakocho.relationship }}
335
+                    </div>
336
+
337
+                    <div>
338
+                      {{ getKaiki(kakocho.deathDate) }}回忌
339
+                    </div>
340
+
341
+                    <div>
342
+                      {{ kakocho.note || '' }}
343
+                    </div>
344
+
345
+                    <div class="family-table-action">
346
+                      <a
347
+                        class="family-edit-link"
348
+                        [routerLink]="['/danka', danka.id, 'kakocho', kakocho.id, 'edit']"
349
+                      >
350
+                        編集
351
+                      </a>
352
+                    </div>
353
+                  </div>
354
+                }
355
+              </div>
356
+            } @else {
357
+              <div class="empty-family-message">
358
+                登録されている過去帳はありません。
359
+              </div>
360
+            }
361
+          </section>
362
+        }
363
+
364
+        @if (selectedTab === 'event') {
365
+          <section class="family-tab-content">
366
+            <div class="section-heading">
367
+              <h2>行事</h2>
368
+            </div>
369
+
370
+            <section class="family-list-summary">
371
+              <div class="family-search-box">
372
+                <span class="family-search-label">行事検索</span>
373
+                <input
374
+                  type="text"
375
+                  [(ngModel)]="eventSearchKeyword"
376
+                  placeholder="氏名・檀家名・続柄・対象行事・状態で検索"
377
+                />
378
+              </div>
379
+            </section>
380
+
381
+            <section class="family-table-section">
382
+              @if (filteredEventTargets.length > 0) {
383
+                <div class="family-table family-member-table event-member-table">
301
                   <div class="family-table-header">
384
                   <div class="family-table-header">
302
-                    <div>戒名</div>
303
-                    <div>俗名</div>
304
-                    <div>没年月日</div>
385
+                    <div>氏名・ふりがな</div>
386
+                    <div>檀家名</div>
305
                     <div>続柄</div>
387
                     <div>続柄</div>
306
-                    <div>回忌</div>
307
-                    <div>備考</div>
308
-                    <div>操作</div>
388
+                    <div>生年月日・年齢</div>
389
+                    <div>対象行事</div>
390
+                    <div>状態</div>
309
                   </div>
391
                   </div>
310
 
392
 
311
-                  @for (kakocho of kakocholist; track kakocho.id) {
393
+                  @for (target of filteredEventTargets; track target.id) {
312
                     <div class="family-table-row">
394
                     <div class="family-table-row">
313
-                      <div class="family-person-name">
314
-                        {{ kakocho.kaimyo }}
315
-                      </div>
316
-
317
                       <div>
395
                       <div>
318
-                        {{ kakocho.name }}
396
+                        <p class="family-person-name">{{ target.name }}</p>
397
+                        <p class="family-person-sub">{{ target.furigana || 'ふりがな未登録' }}</p>
319
                       </div>
398
                       </div>
320
 
399
 
321
                       <div>
400
                       <div>
322
-                        {{ formatDeathDateWithYear(kakocho.deathDate) }}
401
+                        {{ target.householdName }}
323
                       </div>
402
                       </div>
324
 
403
 
325
                       <div>
404
                       <div>
326
-                        {{ kakocho.relationship }}
405
+                        {{ target.relationship }}
327
                       </div>
406
                       </div>
328
 
407
 
329
                       <div>
408
                       <div>
330
-                        {{ getKaiki(kakocho.deathDate) }}回忌
409
+                        <p class="family-person-date">{{ target.birthDate }}</p>
410
+                        <p class="family-person-sub">{{ target.age }}歳</p>
331
                       </div>
411
                       </div>
332
 
412
 
333
                       <div>
413
                       <div>
334
-                        {{ kakocho.note || '' }}
414
+                        {{ target.eventType }}
335
                       </div>
415
                       </div>
336
 
416
 
337
-                      <div class="family-table-action">
338
-                        <a
339
-                          class="family-edit-link"
340
-                          [routerLink]="['/danka', danka.id, 'kakocho', kakocho.id, 'edit']"
417
+                      <div>
418
+                        <select
419
+                          class="event-status-select"
420
+                          [class.sent]="target.status === '案内済'"
421
+                          [ngModel]="target.status"
422
+                          (ngModelChange)="changeEventStatus(target, $event)"
423
+                          aria-label="状態"
341
                         >
424
                         >
342
-                          編集
343
-                        </a>
425
+                          @for (status of eventStatuses; track status) {
426
+                            <option [value]="status">{{ status }}</option>
427
+                          }
428
+                        </select>
344
                       </div>
429
                       </div>
345
                     </div>
430
                     </div>
346
                   }
431
                   }
347
                 </div>
432
                 </div>
348
               } @else {
433
               } @else {
349
                 <div class="empty-family-message">
434
                 <div class="empty-family-message">
350
-                  登録されている家族情報はありません。
435
+                  @if (eventTargets.length > 0) {
436
+                    検索条件に一致する行事対象者はありません。
437
+                  } @else {
438
+                    対象となる行事対象者はありません。
439
+                  }
351
                 </div>
440
                 </div>
352
               }
441
               }
353
-            </p>
442
+            </section>
354
           </section>
443
           </section>
355
         }
444
         }
356
 
445
 

+ 120
- 3
src/app/pages/danka-detail/danka-detail.scss Wyświetl plik

534
   background: #f6efe6;
534
   background: #f6efe6;
535
 }
535
 }
536
 
536
 
537
+.event-status-select {
538
+  width: 84px;
539
+  height: 34px;
540
+  padding: 0 8px;
541
+  border: 2px solid #d8c2aa;
542
+  border-radius: 6px;
543
+  background: #ffffff;
544
+  color: #6f6256;
545
+  font-size: 13px;
546
+  font-weight: 800;
547
+  cursor: pointer;
548
+  box-sizing: border-box;
549
+  outline: none;
550
+}
551
+
552
+.event-status-select.sent {
553
+  border-color: #8a6543;
554
+  background: #f1e7d8;
555
+  color: #8a6543;
556
+}
557
+
558
+.event-status-select:focus {
559
+  border-color: #8a6543;
560
+  box-shadow: 0 0 0 3px rgba(138, 101, 67, 0.15);
561
+}
562
+
537
 .family-table-header {
563
 .family-table-header {
538
   padding: 12px 14px;
564
   padding: 12px 14px;
539
   background: #efe4d6;
565
   background: #efe4d6;
541
   border-radius: 10px;
567
   border-radius: 10px;
542
   font-size: 14px;
568
   font-size: 14px;
543
   font-weight: 700;
569
   font-weight: 700;
544
-  color: #5d3b24;
570
+  color: #111111;
545
 }
571
 }
546
 
572
 
547
 .family-table-row {
573
 .family-table-row {
551
   border: 2px solid #d8c2aa;
577
   border: 2px solid #d8c2aa;
552
   border-radius: 10px;
578
   border-radius: 10px;
553
   font-size: 15px;
579
   font-size: 15px;
554
-  color: #2f2923;
580
+  color: #111111;
555
 }
581
 }
556
 
582
 
557
 .family-table-row:hover {
583
 .family-table-row:hover {
563
   margin: 0;
589
   margin: 0;
564
   font-size: 15px;
590
   font-size: 15px;
565
   font-weight: 700;
591
   font-weight: 700;
566
-  color: #5d3b24;
592
+  color: #111111;
593
+}
594
+
595
+.family-member-table {
596
+  gap: 0;
597
+  border: 2px solid #d8c2aa;
598
+  border-radius: 8px;
599
+  overflow: hidden;
600
+}
601
+
602
+.family-member-table .family-table-header,
603
+.family-member-table .family-table-row {
604
+  grid-template-columns: 1.35fr 0.75fr 1.05fr 1fr 1.2fr 168px;
605
+  gap: 12px;
606
+  border: 0;
607
+  border-radius: 0;
608
+}
609
+
610
+.family-member-table .family-table-header {
611
+  min-height: 46px;
612
+  padding: 0 14px;
613
+  background: #efe4d6;
614
+}
615
+
616
+.family-member-table .family-table-row {
617
+  min-height: 78px;
618
+  padding: 10px 14px;
619
+  background: #fffdf9;
620
+  border-top: 1px solid #d8c2aa;
621
+}
622
+
623
+.family-member-table .family-table-row:hover {
624
+  background: #fff8ee;
625
+}
626
+
627
+.family-person-sub,
628
+.family-person-date {
629
+  margin: 0;
630
+}
631
+
632
+.family-person-sub {
633
+  margin-top: 4px;
634
+  color: #111111;
635
+  font-size: 13px;
636
+  line-height: 1.35;
637
+}
638
+
639
+.family-person-date {
640
+  color: #111111;
641
+  font-size: 15px;
642
+}
643
+
644
+.family-member-table .family-table-action {
645
+  justify-content: center;
646
+  gap: 8px;
647
+}
648
+
649
+.family-member-table .family-table-header > div:last-child {
650
+  text-align: center;
651
+}
652
+
653
+.family-member-table .family-edit-link {
654
+  width: 74px;
655
+}
656
+
657
+.kakocho-member-table .family-table-header,
658
+.kakocho-member-table .family-table-row {
659
+  grid-template-columns: 1.25fr 1.15fr 1.05fr 0.65fr 0.6fr 1.1fr 82px;
660
+}
661
+
662
+.event-member-table .family-table-header,
663
+.event-member-table .family-table-row {
664
+  grid-template-columns: 1.35fr 1fr 0.75fr 1.05fr 0.95fr 96px;
665
+}
666
+
667
+.event-member-table .event-status-select {
668
+  width: 90px;
669
+}
670
+
671
+.event-member-table .family-table-header > div:last-child,
672
+.event-member-table .family-table-row > div:last-child {
673
+  text-align: center;
567
 }
674
 }
568
 
675
 
569
 .empty-family-message {
676
 .empty-family-message {
607
   margin-top: 24px;
714
   margin-top: 24px;
608
 }
715
 }
609
 
716
 
717
+.coming-soon-section .section-heading {
718
+  margin-bottom: 16px;
719
+
720
+  h2 {
721
+    margin: 0;
722
+    font-size: 20px;
723
+    font-weight: 700;
724
+  }
725
+}
726
+
610
 /* =========================
727
 /* =========================
611
    家系図タブ
728
    家系図タブ
612
 ========================= */
729
 ========================= */

+ 104
- 1
src/app/pages/danka-detail/danka-detail.ts Wyświetl plik

11
 import { AppSideMenu } from '../../share/side-menu/app-side-menu';
11
 import { AppSideMenu } from '../../share/side-menu/app-side-menu';
12
 import { MarriageRelationService } from '../../services/marriage-relation-service';
12
 import { MarriageRelationService } from '../../services/marriage-relation-service';
13
 import { FormsModule } from '@angular/forms';
13
 import { FormsModule } from '@angular/forms';
14
+import { EventStatus, EventTarget, EventType } from '../../models/event';
14
 
15
 
15
 interface NextMemorial {
16
 interface NextMemorial {
16
   name: string;
17
   name: string;
33
   nextMemorial: NextMemorial | undefined;
34
   nextMemorial: NextMemorial | undefined;
34
   currentYear = new Date().getFullYear();
35
   currentYear = new Date().getFullYear();
35
   familySearchKeyword = '';
36
   familySearchKeyword = '';
37
+  eventSearchKeyword = '';
38
+  eventStatuses: EventStatus[] = ['未案内', '案内済'];
39
+  private eventStatusByTargetId: Record<string, EventStatus> = {};
36
 
40
 
37
-  selectedTab: 'basic' | 'family' | 'kakocho' | 'familyTree' = 'basic';
41
+  selectedTab: 'basic' | 'family' | 'kakocho' | 'event' | 'familyTree' = 'basic';
38
   selectedFamily: Family | undefined = undefined;
42
   selectedFamily: Family | undefined = undefined;
39
 
43
 
40
   constructor(
44
   constructor(
49
       this.selectedTab = 'family';
53
       this.selectedTab = 'family';
50
     } else if (tab === 'kakocho') {
54
     } else if (tab === 'kakocho') {
51
       this.selectedTab = 'kakocho';
55
       this.selectedTab = 'kakocho';
56
+    } else if (tab === 'event') {
57
+      this.selectedTab = 'event';
52
     } else if (tab === 'familyTree') {
58
     } else if (tab === 'familyTree') {
53
       this.selectedTab = 'familyTree';
59
       this.selectedTab = 'familyTree';
54
     }
60
     }
99
     );
105
     );
100
   }
106
   }
101
 
107
 
108
+  getFamilyEventLabels(family: Family): string {
109
+    const birthDate = this.parseDate(family.birthDate);
110
+    if (!birthDate) {
111
+      return '-';
112
+    }
113
+
114
+    const age = this.currentYear - birthDate.getFullYear();
115
+    const eventTypes = this.getEventTypes(age);
116
+    return eventTypes.length > 0 ? eventTypes.join('、') : '-';
117
+  }
118
+
119
+  get eventTargets(): EventTarget[] {
120
+    if (!this.danka) {
121
+      return [];
122
+    }
123
+
124
+    return this.families
125
+      .flatMap((family) => {
126
+        const birthDate = this.parseDate(family.birthDate);
127
+        if (!birthDate) {
128
+          return [];
129
+        }
130
+
131
+        const age = this.currentYear - birthDate.getFullYear();
132
+        return this.getEventTypes(age).map((eventType) => {
133
+          const id = `${family.id}-${eventType}`;
134
+          return {
135
+            id,
136
+            dankaId: family.dankaId,
137
+            name: family.name,
138
+            furigana: family.furigana,
139
+            householdName: this.danka?.householdName ?? '不明',
140
+            relationship: family.relationship || '未登録',
141
+            birthDate: family.birthDate,
142
+            age,
143
+            eventType,
144
+            status:
145
+              this.eventStatusByTargetId[id] ?? (Number(family.id) % 2 === 0 ? '案内済' : '未案内'),
146
+          };
147
+        });
148
+      })
149
+      .sort(
150
+        (a, b) =>
151
+          this.getEventSortOrder(a.eventType) - this.getEventSortOrder(b.eventType) ||
152
+          a.age - b.age ||
153
+          a.name.localeCompare(b.name, 'ja'),
154
+      );
155
+  }
156
+
157
+  get filteredEventTargets(): EventTarget[] {
158
+    const keyword = this.eventSearchKeyword.trim();
159
+    if (!keyword) {
160
+      return this.eventTargets;
161
+    }
162
+
163
+    return this.eventTargets.filter((target) =>
164
+      [
165
+        target.name,
166
+        target.furigana,
167
+        target.householdName,
168
+        target.relationship,
169
+        target.birthDate,
170
+        target.age.toString(),
171
+        target.eventType,
172
+        target.status,
173
+      ].some((value) => value.includes(keyword)),
174
+    );
175
+  }
176
+
177
+  changeEventStatus(target: EventTarget, status: EventStatus): void {
178
+    target.status = status;
179
+    this.eventStatusByTargetId[target.id] = status;
180
+  }
181
+
102
   getKaiki(deathDate: string): number {
182
   getKaiki(deathDate: string): number {
103
     return this.currentYear - new Date(deathDate).getFullYear() + 1;
183
     return this.currentYear - new Date(deathDate).getFullYear() + 1;
104
   }
184
   }
143
     }
223
     }
144
   }
224
   }
145
 
225
 
226
+  private getEventTypes(age: number): EventType[] {
227
+    const eventTypes: EventType[] = [];
228
+
229
+    if (age >= 3 && age <= 12) {
230
+      eventTypes.push('稚児行列');
231
+    }
232
+    if ([3, 5, 7].includes(age)) {
233
+      eventTypes.push('七五三');
234
+    }
235
+    if (age === 20) {
236
+      eventTypes.push('成人式');
237
+    }
238
+    if (age === 88) {
239
+      eventTypes.push('米寿');
240
+    }
241
+
242
+    return eventTypes;
243
+  }
244
+
245
+  private getEventSortOrder(eventType: EventType): number {
246
+    return ['稚児行列', '七五三', '成人式', '米寿'].indexOf(eventType);
247
+  }
248
+
146
   private getNextMemorial(): NextMemorial | undefined {
249
   private getNextMemorial(): NextMemorial | undefined {
147
     const today = this.toDateOnly(new Date());
250
     const today = this.toDateOnly(new Date());
148
 
251
 

+ 7
- 9
src/app/pages/event/event.html Wyświetl plik

45
       <section class="event-table-section">
45
       <section class="event-table-section">
46
         <div class="event-table">
46
         <div class="event-table">
47
           <div class="event-table-header">
47
           <div class="event-table-header">
48
-            <div>氏名</div>
48
+            <div>氏名・ふりがな</div>
49
             <div>檀家名</div>
49
             <div>檀家名</div>
50
             <div>続柄</div>
50
             <div>続柄</div>
51
-            <div>生年月日</div>
52
-            <div>年齢</div>
51
+            <div>生年月日・年齢</div>
53
             <div>対象行事</div>
52
             <div>対象行事</div>
54
             <div>状態</div>
53
             <div>状態</div>
55
           </div>
54
           </div>
57
           @if (eventTargets.length > 0) {
56
           @if (eventTargets.length > 0) {
58
             @for (target of eventTargets; track target.id) {
57
             @for (target of eventTargets; track target.id) {
59
               <div class="event-table-row">
58
               <div class="event-table-row">
60
-                <div class="person-name">
61
-                  {{ target.name }}
59
+                <div>
60
+                  <p class="person-name">{{ target.name }}</p>
61
+                  <p class="person-sub">{{ target.furigana || 'ふりがな未登録' }}</p>
62
                 </div>
62
                 </div>
63
                 <div>
63
                 <div>
64
                   {{ target.householdName }}
64
                   {{ target.householdName }}
67
                   {{ target.relationship }}
67
                   {{ target.relationship }}
68
                 </div>
68
                 </div>
69
                 <div>
69
                 <div>
70
-                  {{ target.birthDate }}
71
-                </div>
72
-                <div>
73
-                  {{ target.age }}歳
70
+                  <p class="person-date">{{ target.birthDate }}</p>
71
+                  <p class="person-sub">{{ target.age }}歳</p>
74
                 </div>
72
                 </div>
75
                 <div class="event-type">
73
                 <div class="event-type">
76
                   {{ target.eventType }}
74
                   {{ target.eventType }}

+ 53
- 38
src/app/pages/event/event.scss Wyświetl plik

101
   min-width: 86px;
101
   min-width: 86px;
102
   height: 36px;
102
   height: 36px;
103
   padding: 0 12px;
103
   padding: 0 12px;
104
-  border: 2px solid #d8caba;
104
+  border: 2px solid #8a6543;
105
   border-radius: 6px;
105
   border-radius: 6px;
106
-  background: #f1e7d8;
107
-  color: #2f2720;
106
+  background: #ffffff;
107
+  color: #8a6543;
108
   font-size: 14px;
108
   font-size: 14px;
109
-  font-weight: 700;
109
+  font-weight: 800;
110
   white-space: nowrap;
110
   white-space: nowrap;
111
   cursor: pointer;
111
   cursor: pointer;
112
   box-sizing: border-box;
112
   box-sizing: border-box;
113
 }
113
 }
114
 
114
 
115
 .filter-button:hover {
115
 .filter-button:hover {
116
-  background: #eadfce;
116
+  background: #f6efe6;
117
 }
117
 }
118
 
118
 
119
 .filter-button.active {
119
 .filter-button.active {
120
-  background: #8a6543;
120
+  background: #f6efe6;
121
   border-color: #8a6543;
121
   border-color: #8a6543;
122
-  color: #ffffff;
122
+  color: #8a6543;
123
 }
123
 }
124
 
124
 
125
 .reload-button {
125
 .reload-button {
126
   flex: 0 0 auto;
126
   flex: 0 0 auto;
127
-  width: 120px;
128
-  height: 48px;
129
-  margin-top: 34px;
127
+  width: 140px;
128
+  height: 46px;
129
+  margin-top: 36px;
130
   border: 2px solid #8a6543;
130
   border: 2px solid #8a6543;
131
   border-radius: 6px;
131
   border-radius: 6px;
132
-  background: #8a6543;
133
-  color: #ffffff;
134
-  font-size: 17px;
132
+  background: #ffffff;
133
+  color: #8a6543;
134
+  font-size: 18px;
135
   font-weight: 800;
135
   font-weight: 800;
136
   cursor: pointer;
136
   cursor: pointer;
137
   box-sizing: border-box;
137
   box-sizing: border-box;
138
 }
138
 }
139
 
139
 
140
 .reload-button:hover {
140
 .reload-button:hover {
141
-  background: #765639;
141
+  background: #f6efe6;
142
 }
142
 }
143
 
143
 
144
 .list-header-row {
144
 .list-header-row {
167
 
167
 
168
 .event-table {
168
 .event-table {
169
   display: grid;
169
   display: grid;
170
-  gap: 4px;
170
+  gap: 0;
171
+  border: 2px solid #d8c2aa;
172
+  border-radius: 8px;
173
+  overflow: hidden;
171
 }
174
 }
172
 
175
 
173
 .event-table-header,
176
 .event-table-header,
174
 .event-table-row {
177
 .event-table-row {
175
   display: grid;
178
   display: grid;
176
-  grid-template-columns: 1.2fr 1.1fr 0.8fr 1fr 0.55fr 0.9fr 0.75fr;
179
+  grid-template-columns: 1.35fr 1.05fr 0.75fr 1.05fr 0.95fr 96px;
177
   align-items: center;
180
   align-items: center;
178
-  column-gap: 12px;
181
+  gap: 12px;
179
 }
182
 }
180
 
183
 
181
 .event-table-header {
184
 .event-table-header {
182
-  min-height: 38px;
183
-  padding: 0 12px;
184
-  border: 2px solid #d8caba;
185
-  border-radius: 8px;
186
-  background: #eadfce;
187
-  color: #5a4a3c;
188
-  font-size: 15px;
185
+  min-height: 46px;
186
+  padding: 0 14px;
187
+  background: #efe4d6;
188
+  color: #111111;
189
+  font-size: 14px;
189
   font-weight: 800;
190
   font-weight: 800;
190
   box-sizing: border-box;
191
   box-sizing: border-box;
191
 }
192
 }
192
 
193
 
193
 .event-table-row {
194
 .event-table-row {
194
-  min-height: 58px;
195
-  padding: 0 12px;
196
-  border: 2px solid #d8caba;
197
-  border-radius: 10px;
195
+  min-height: 78px;
196
+  padding: 10px 14px;
197
+  border-top: 1px solid #d8c2aa;
198
   background: #fffdf9;
198
   background: #fffdf9;
199
-  color: #2f2720;
200
-  font-size: 16px;
199
+  color: #111111;
200
+  font-size: 15px;
201
   box-sizing: border-box;
201
   box-sizing: border-box;
202
 }
202
 }
203
 
203
 
204
 .event-table-row:hover {
204
 .event-table-row:hover {
205
-  background: #f6efe6;
205
+  background: #fff8ee;
206
 }
206
 }
207
 
207
 
208
 .person-name,
208
 .person-name,
209
 .event-type {
209
 .event-type {
210
+  margin: 0;
210
   font-weight: 800;
211
   font-weight: 800;
211
 }
212
 }
212
 
213
 
214
+.person-sub,
215
+.person-date {
216
+  margin: 0;
217
+}
218
+
219
+.person-sub {
220
+  margin-top: 4px;
221
+  color: #111111;
222
+  font-size: 13px;
223
+  line-height: 1.35;
224
+}
225
+
226
+.person-date {
227
+  color: #111111;
228
+  font-size: 15px;
229
+}
230
+
213
 .event-type {
231
 .event-type {
214
-  color: #8a6543;
232
+  color: #111111;
215
 }
233
 }
216
 
234
 
217
 .status-select {
235
 .status-select {
218
-  width: 100%;
219
-  max-width: 112px;
236
+  width: 90px;
220
   height: 34px;
237
   height: 34px;
221
   padding: 0 10px;
238
   padding: 0 10px;
222
   border: 2px solid #d8caba;
239
   border: 2px solid #d8caba;
223
   border-radius: 8px;
240
   border-radius: 8px;
224
   background: #ffffff;
241
   background: #ffffff;
225
-  color: #7b6b5c;
242
+  color: #111111;
226
   font-size: 14px;
243
   font-size: 14px;
227
   font-weight: 800;
244
   font-weight: 800;
228
   box-sizing: border-box;
245
   box-sizing: border-box;
233
 .status-select.sent {
250
 .status-select.sent {
234
   border-color: #8a6543;
251
   border-color: #8a6543;
235
   background: #f1e7d8;
252
   background: #f1e7d8;
236
-  color: #8a6543;
253
+  color: #111111;
237
 }
254
 }
238
 
255
 
239
 .status-select:focus {
256
 .status-select:focus {
244
 .empty-message {
261
 .empty-message {
245
   min-height: 58px;
262
   min-height: 58px;
246
   padding: 18px 20px;
263
   padding: 18px 20px;
247
-  border: 2px solid #d8caba;
248
-  border-radius: 10px;
249
   background: #fffdf9;
264
   background: #fffdf9;
250
   color: #7b6b5c;
265
   color: #7b6b5c;
251
   font-size: 15px;
266
   font-size: 15px;

+ 1
- 0
src/app/pages/event/event.ts Wyświetl plik

59
           id,
59
           id,
60
           dankaId: family.dankaId,
60
           dankaId: family.dankaId,
61
           name: family.name,
61
           name: family.name,
62
+          furigana: family.furigana,
62
           householdName: danka?.householdName ?? '不明',
63
           householdName: danka?.householdName ?? '不明',
63
           relationship: family.relationship || '未登録',
64
           relationship: family.relationship || '未登録',
64
           birthDate: family.birthDate,
65
           birthDate: family.birthDate,

+ 14
- 11
src/app/pages/memorial-list/memorial-list.html Wyświetl plik

18
 
18
 
19
             <div class="memorial-filter">
19
             <div class="memorial-filter">
20
               <span>回忌</span>
20
               <span>回忌</span>
21
-              @for (filter of memorialTypeFilters; track filter.value) {
22
-                <button
23
-                  type="button"
24
-                  class="filter-button"
25
-                  [class.active]="selectedMemorialType === filter.value"
26
-                  (click)="changeMemorialType(filter.value)"
27
-                >
28
-                  {{ filter.label }}
29
-                </button>
30
-              }
21
+              <div class="memorial-filter-buttons">
22
+                @for (filter of memorialTypeFilters; track filter.value) {
23
+                  <button
24
+                    type="button"
25
+                    class="filter-button"
26
+                    [class.active]="selectedMemorialType === filter.value"
27
+                    (click)="changeMemorialType(filter.value)"
28
+                  >
29
+                    {{ filter.label }}
30
+                  </button>
31
+                }
32
+              </div>
31
             </div>
33
             </div>
32
           </div>
34
           </div>
33
         </div>
35
         </div>
62
                   {{ memorial.kaimyo }}
64
                   {{ memorial.kaimyo }}
63
                 </div>
65
                 </div>
64
                 <div>
66
                 <div>
65
-                  {{ memorial.name }}
67
+                  <p class="person-name">{{ memorial.name }}</p>
68
+                  <p class="person-sub">俗名</p>
66
                 </div>
69
                 </div>
67
                 <div>
70
                 <div>
68
                   {{ formatDeathDate(memorial.deathDate) }}
71
                   {{ formatDeathDate(memorial.deathDate) }}

+ 68
- 72
src/app/pages/memorial-list/memorial-list.scss Wyświetl plik

87
 .memorial-filter {
87
 .memorial-filter {
88
   display: flex;
88
   display: flex;
89
   align-items: flex-start;
89
   align-items: flex-start;
90
-  flex-wrap: wrap;
90
+  flex-wrap: nowrap;
91
   gap: 8px;
91
   gap: 8px;
92
+  max-width: 100%;
92
 }
93
 }
93
 
94
 
94
 .memorial-filter span {
95
 .memorial-filter span {
97
   align-items: center;
98
   align-items: center;
98
 }
99
 }
99
 
100
 
101
+.memorial-filter-buttons {
102
+  display: flex;
103
+  align-items: center;
104
+  flex-wrap: nowrap;
105
+  gap: 6px;
106
+  max-width: 100%;
107
+  overflow-x: auto;
108
+  padding-bottom: 2px;
109
+}
110
+
100
 .filter-button {
111
 .filter-button {
101
-  min-width: 86px;
112
+  flex: 0 0 72px;
113
+  min-width: 72px;
102
   height: 36px;
114
   height: 36px;
103
-  padding: 0 12px;
104
-  border: 2px solid #d8caba;
115
+  padding: 0 6px;
116
+  border: 2px solid #8a6543;
105
   border-radius: 6px;
117
   border-radius: 6px;
106
-  background: #f1e7d8;
107
-  color: #2f2720;
108
-  font-size: 14px;
109
-  font-weight: 700;
118
+  background: #ffffff;
119
+  color: #8a6543;
120
+  font-size: 12px;
121
+  font-weight: 800;
110
   white-space: nowrap;
122
   white-space: nowrap;
111
   cursor: pointer;
123
   cursor: pointer;
112
   box-sizing: border-box;
124
   box-sizing: border-box;
113
 }
125
 }
114
 
126
 
115
 .filter-button:hover {
127
 .filter-button:hover {
116
-  background: #eadfce;
128
+  background: #f6efe6;
117
 }
129
 }
118
 
130
 
119
 .filter-button.active {
131
 .filter-button.active {
120
-  background: #8a6543;
132
+  background: #f6efe6;
121
   border-color: #8a6543;
133
   border-color: #8a6543;
122
-  color: #ffffff;
134
+  color: #8a6543;
123
 }
135
 }
124
 
136
 
125
 .reload-button {
137
 .reload-button {
126
   flex: 0 0 auto;
138
   flex: 0 0 auto;
127
-  width: 120px;
128
-  height: 48px;
129
-  margin-top: 34px;
139
+  width: 140px;
140
+  height: 46px;
141
+  margin-top: 36px;
130
   border: 2px solid #8a6543;
142
   border: 2px solid #8a6543;
131
   border-radius: 6px;
143
   border-radius: 6px;
132
-  background: #8a6543;
133
-  color: #ffffff;
134
-  font-size: 17px;
144
+  background: #ffffff;
145
+  color: #8a6543;
146
+  font-size: 18px;
135
   font-weight: 800;
147
   font-weight: 800;
136
   cursor: pointer;
148
   cursor: pointer;
137
   box-sizing: border-box;
149
   box-sizing: border-box;
138
 }
150
 }
139
 
151
 
140
 .reload-button:hover {
152
 .reload-button:hover {
141
-  background: #765639;
153
+  background: #f6efe6;
142
 }
154
 }
143
 
155
 
144
 .list-header-row {
156
 .list-header-row {
167
 
179
 
168
 .memorial-table {
180
 .memorial-table {
169
   display: grid;
181
   display: grid;
170
-  gap: 4px;
182
+  gap: 0;
183
+  border: 2px solid #d8c2aa;
184
+  border-radius: 8px;
185
+  overflow: hidden;
171
 }
186
 }
172
 
187
 
173
 .memorial-table-header,
188
 .memorial-table-header,
175
   display: grid;
190
   display: grid;
176
   grid-template-columns: 1.4fr 1.2fr 0.9fr 0.8fr 1.2fr 0.8fr 0.7fr;
191
   grid-template-columns: 1.4fr 1.2fr 0.9fr 0.8fr 1.2fr 0.8fr 0.7fr;
177
   align-items: center;
192
   align-items: center;
178
-  column-gap: 12px;
193
+  gap: 12px;
179
 }
194
 }
180
 
195
 
181
 .memorial-table-header {
196
 .memorial-table-header {
182
-  min-height: 38px;
183
-  padding: 0 12px;
184
-  border: 2px solid #d8caba;
185
-  border-radius: 8px;
186
-  background: #eadfce;
187
-  color: #5a4a3c;
188
-  font-size: 15px;
197
+  min-height: 46px;
198
+  padding: 0 14px;
199
+  background: #efe4d6;
200
+  color: #111111;
201
+  font-size: 14px;
189
   font-weight: 800;
202
   font-weight: 800;
190
   box-sizing: border-box;
203
   box-sizing: border-box;
191
 }
204
 }
192
 
205
 
193
 .memorial-table-row {
206
 .memorial-table-row {
194
-  min-height: 58px;
195
-  padding: 0 12px;
196
-  border: 2px solid #d8caba;
197
-  border-radius: 10px;
207
+  min-height: 78px;
208
+  padding: 10px 14px;
209
+  border-top: 1px solid #d8c2aa;
198
   background: #fffdf9;
210
   background: #fffdf9;
199
-  color: #2f2720;
200
-  font-size: 16px;
211
+  color: #111111;
212
+  font-size: 15px;
201
   box-sizing: border-box;
213
   box-sizing: border-box;
202
 }
214
 }
203
 
215
 
204
 .memorial-table-row:hover {
216
 .memorial-table-row:hover {
205
-  background: #f6efe6;
217
+  background: #fff8ee;
206
 }
218
 }
207
 
219
 
208
 .person-name {
220
 .person-name {
221
+  margin: 0;
209
   font-weight: 800;
222
   font-weight: 800;
210
 }
223
 }
211
 
224
 
225
+.person-sub {
226
+  margin: 4px 0 0;
227
+  color: #111111;
228
+  font-size: 13px;
229
+  line-height: 1.35;
230
+}
231
+
212
 .memorial-type {
232
 .memorial-type {
213
-  color: #8a6543;
233
+  color: #111111;
214
   font-weight: 800;
234
   font-weight: 800;
215
 }
235
 }
216
 
236
 
217
 .detail-link {
237
 .detail-link {
218
-  color: #3f6f45;
219
-  font-size: 15px;
238
+  width: 64px;
239
+  height: 34px;
240
+  border: 2px solid #8a6543;
241
+  border-radius: 6px;
242
+  background: #ffffff;
243
+  color: #8a6543;
244
+  font-size: 14px;
220
   font-weight: 800;
245
   font-weight: 800;
221
   text-decoration: none;
246
   text-decoration: none;
247
+  display: flex;
248
+  align-items: center;
249
+  justify-content: center;
250
+  box-sizing: border-box;
222
 }
251
 }
223
 
252
 
224
 .detail-link:hover {
253
 .detail-link:hover {
225
-  text-decoration: underline;
254
+  background: #f6efe6;
255
+  text-decoration: none;
226
 }
256
 }
227
 
257
 
228
 .empty-message {
258
 .empty-message {
229
   min-height: 58px;
259
   min-height: 58px;
230
   padding: 18px 20px;
260
   padding: 18px 20px;
231
-  border: 2px solid #d8caba;
232
-  border-radius: 10px;
233
   background: #fffdf9;
261
   background: #fffdf9;
234
   color: #7b6b5c;
262
   color: #7b6b5c;
235
   font-size: 15px;
263
   font-size: 15px;
237
   box-sizing: border-box;
265
   box-sizing: border-box;
238
 }
266
 }
239
 
267
 
240
-.notice-box {
241
-  margin-top: 26px;
242
-  padding: 18px 26px;
243
-  border: 2px solid #d8caba;
244
-  border-radius: 10px;
245
-  background: #fffdf9;
246
-  box-sizing: border-box;
247
-}
248
-
249
-.notice-box p {
250
-  margin: 0;
251
-  color: #7b6b5c;
252
-  font-size: 15px;
253
-  line-height: 1.7;
254
-}
255
-
256
-.bottom-note {
257
-  width: 700px;
258
-  margin: 18px 0 22px 36px;
259
-  padding: 4px 12px;
260
-  border: 2px solid #d8caba;
261
-  border-radius: 4px;
262
-  background: #eadfce;
263
-  color: #7b6b5c;
264
-  font-size: 14px;
265
-  box-sizing: border-box;
266
-}
267
-
268
 @media (max-width: 1100px) {
268
 @media (max-width: 1100px) {
269
   .page-title-row {
269
   .page-title-row {
270
     flex-direction: column;
270
     flex-direction: column;
319
     gap: 8px;
319
     gap: 8px;
320
   }
320
   }
321
 
321
 
322
-  .bottom-note {
323
-    width: auto;
324
-    margin: 10px 20px 22px;
325
-  }
326
 }
322
 }

Ładowanie…
Anuluj
Zapisz