瀏覽代碼

[add]

家族情報を編集後、檀家詳細に遷移する際に家族タブが表示する処理を追加
poohr 3 週之前
父節點
當前提交
92be46e50f

+ 10
- 1
src/app/pages/danka-detail/danka-detail.html 查看文件

225
                     <div>年齢</div>
225
                     <div>年齢</div>
226
                     <div>生年月日</div>
226
                     <div>生年月日</div>
227
                     <div>備考</div>
227
                     <div>備考</div>
228
+                    <div>操作</div>
228
                   </div>
229
                   </div>
229
 
230
 
230
                   @for (family of families; track family.id) {
231
                   @for (family of families; track family.id) {
242
                       </div>
243
                       </div>
243
 
244
 
244
                       <div>
245
                       <div>
245
-                        {{ getAge(family.birthDate)}}
246
+                        {{ getAge(family.birthDate) }}
246
                       </div>
247
                       </div>
247
 
248
 
248
                       <div>
249
                       <div>
252
                       <div>
253
                       <div>
253
                         {{ family.note || '' }}
254
                         {{ family.note || '' }}
254
                       </div>
255
                       </div>
256
+                      <div class="family-table-action">
257
+                        <a
258
+                          class="family-edit-link"
259
+                          [routerLink]="['/danka', danka.id, 'family', family.id, 'edit']"
260
+                        >
261
+                          編集
262
+                        </a>
263
+                      </div>
255
                     </div>
264
                     </div>
256
                   }
265
                   }
257
                 </div>
266
                 </div>

+ 28
- 2
src/app/pages/danka-detail/danka-detail.scss 查看文件

443
 .family-table-header,
443
 .family-table-header,
444
 .family-table-row {
444
 .family-table-row {
445
   display: grid;
445
   display: grid;
446
-  grid-template-columns: 1.2fr 1.2fr 0.8fr 0.6fr 1fr 1.4fr;
446
+  grid-template-columns: 1.1fr 1.1fr 0.8fr 0.6fr 1fr 1.2fr 80px;
447
   gap: 10px;
447
   gap: 10px;
448
   align-items: center;
448
   align-items: center;
449
 }
449
 }
450
 
450
 
451
+.family-table-action {
452
+  display: flex;
453
+  justify-content: center;
454
+  align-items: center;
455
+}
456
+
457
+.family-edit-link {
458
+  width: 64px;
459
+  height: 34px;
460
+  border: 2px solid #8a6543;
461
+  border-radius: 6px;
462
+  background: #ffffff;
463
+  color: #8a6543;
464
+  font-size: 14px;
465
+  font-weight: 800;
466
+  text-decoration: none;
467
+  display: flex;
468
+  align-items: center;
469
+  justify-content: center;
470
+  box-sizing: border-box;
471
+}
472
+
473
+.family-edit-link:hover {
474
+  background: #f6efe6;
475
+}
476
+
451
 .family-table-header {
477
 .family-table-header {
452
   padding: 12px 14px;
478
   padding: 12px 14px;
453
   background: #efe4d6;
479
   background: #efe4d6;
534
 
560
 
535
   .family-table-header,
561
   .family-table-header,
536
   .family-table-row {
562
   .family-table-row {
537
-    min-width: 760px;
563
+    min-width: 880px;
538
   }
564
   }
539
 
565
 
540
   .family-support-area {
566
   .family-support-area {

+ 10
- 1
src/app/pages/danka-detail/danka-detail.ts 查看文件

24
     private familyService: FamilyService,
24
     private familyService: FamilyService,
25
     private route: ActivatedRoute,
25
     private route: ActivatedRoute,
26
   ) {
26
   ) {
27
+    //遷移先からタブ情報を取得
28
+    const tab = this.route.snapshot.queryParams['tab'];
29
+    if (tab === 'family') {
30
+      this.selectedTab = 'family';
31
+    } else if (tab === 'kakocho') {
32
+      this.selectedTab = 'kakocho';
33
+    } else if (tab === 'familyTree') {
34
+      this.selectedTab = 'familyTree';
35
+    }
27
     //遷移先のIDから該当の世帯と家族基本を取得
36
     //遷移先のIDから該当の世帯と家族基本を取得
28
     const id = this.route.snapshot.params['id'];
37
     const id = this.route.snapshot.params['id'];
29
     if (id) {
38
     if (id) {
30
       this.danka = this.dankaService.getDankaById(id);
39
       this.danka = this.dankaService.getDankaById(id);
31
       this.families = this.familyService.getFamiliesByDankaId(id);
40
       this.families = this.familyService.getFamiliesByDankaId(id);
32
-
33
     }
41
     }
34
     console.log(this.danka);
42
     console.log(this.danka);
35
     console.log(this.families);
43
     console.log(this.families);
44
+    console.log(tab);
36
   }
45
   }
37
 
46
 
38
   getAge(birthDate: string) {
47
   getAge(birthDate: string) {

+ 3
- 4
src/app/pages/family-edit/family-edit.ts 查看文件

89
       note: formValue.note?.trim() ?? '',
89
       note: formValue.note?.trim() ?? '',
90
     };
90
     };
91
     this.familyService.saveFamily(updatedFamily);
91
     this.familyService.saveFamily(updatedFamily);
92
-    this.router.navigate(['/danka-detail', dankaId]);
93
-  }
92
+    this.router.navigate(['/danka-detail', dankaId], { queryParams: { tab: 'family' } });  }
94
 
93
 
95
   cancelFamilyEdit(): void {
94
   cancelFamilyEdit(): void {
96
     const dankaId = this.dankaId;
95
     const dankaId = this.dankaId;
97
-    this.router.navigate(['/danka-detail', dankaId]);
96
+    this.router.navigate(['/danka-detail', dankaId], { queryParams: { tab: 'family' } });
98
   }
97
   }
99
 
98
 
100
   deleteFamily() {
99
   deleteFamily() {
103
       return;
102
       return;
104
     }
103
     }
105
     this.familyService.deleteFamily(this.familyId);
104
     this.familyService.deleteFamily(this.familyId);
106
-    this.router.navigate(['/danka-detail', dankaId]);
105
+    this.router.navigate(['/danka-detail', dankaId], { queryParams: { tab: 'family' } });
107
   }
106
   }
108
 
107
 
109
   setAsHouseholder() {}
108
   setAsHouseholder() {}

Loading…
取消
儲存