Просмотр исходного кода

[add]

家族情報の編集画面に関係の選択肢を追加
poohr 3 недель назад
Родитель
Сommit
00235056a4

+ 62
- 0
src/app/pages/family-edit/family-edit.html Просмотреть файл

95
                 </div>
95
                 </div>
96
               </div>
96
               </div>
97
 
97
 
98
+              <div class="form-row form-row-heading">
99
+                <label></label>
100
+                <div class="form-field">
101
+                  <h3 class="sub-section-title">家系図情報</h3>
102
+                  <p class="sub-section-description">
103
+                    家系図に反映する親子・配偶者の関係を設定します。
104
+                  </p>
105
+                </div>
106
+              </div>
107
+
108
+              <div class="form-row">
109
+                <label for="fatherId">父</label>
110
+                <div class="form-field">
111
+                  <select
112
+                    id="fatherId"
113
+                    formControlName="fatherId"
114
+                  >
115
+                    <option value="">選択なし</option>
116
+                    @for (family of getFamilyOptions(); track family.id) {
117
+                      <option [value]="family.id">
118
+                        {{ family.name }}({{ family.relationship }})
119
+                      </option>
120
+                    }
121
+                  </select>
122
+                </div>
123
+              </div>
124
+
125
+              <div class="form-row">
126
+                <label for="motherId">母</label>
127
+                <div class="form-field">
128
+                  <select
129
+                    id="motherId"
130
+                    formControlName="motherId"
131
+                  >
132
+                    <option value="">選択なし</option>
133
+                    @for (family of getFamilyOptions(); track family.id) {
134
+                      <option [value]="family.id">
135
+                        {{ family.name }}({{ family.relationship }})
136
+                      </option>
137
+                    }
138
+                  </select>
139
+                </div>
140
+              </div>
141
+
142
+              <div class="form-row">
143
+                <label for="spouseId">配偶者</label>
144
+                <div class="form-field">
145
+                  <select
146
+                    id="spouseId"
147
+                    formControlName="spouseId"
148
+                  >
149
+                    <option value="">選択なし</option>
150
+                    @for (family of getFamilyOptions(); track family.id) {
151
+                      <option [value]="family.id">
152
+                        {{ family.name }}({{ family.relationship }})
153
+                      </option>
154
+                    }
155
+                  </select>
156
+                </div>
157
+              </div>
158
+
98
               <div class="form-row">
159
               <div class="form-row">
99
                 <label for="note">備考</label>
160
                 <label for="note">備考</label>
100
                 <div class="form-field">
161
                 <div class="form-field">
105
                   ></textarea>
166
                   ></textarea>
106
                 </div>
167
                 </div>
107
               </div>
168
               </div>
169
+
108
             </div>
170
             </div>
109
           </section>
171
           </section>
110
 
172
 

+ 22
- 0
src/app/pages/family-edit/family-edit.scss Просмотреть файл

148
   font-weight: 700;
148
   font-weight: 700;
149
 }
149
 }
150
 
150
 
151
+.form-row-heading {
152
+  margin-top: 30px;
153
+}
154
+
155
+.form-row-heading label {
156
+  padding-top: 0;
157
+}
158
+
159
+.sub-section-title {
160
+  margin: 0;
161
+  color: #2f2720;
162
+  font-size: 18px;
163
+  font-weight: 800;
164
+}
165
+
166
+.sub-section-description {
167
+  margin: 6px 0 0;
168
+  color: #7b6b5c;
169
+  font-size: 14px;
170
+  line-height: 1.6;
171
+}
172
+
151
 .phone-edit-section {
173
 .phone-edit-section {
152
   min-height: 382px;
174
   min-height: 382px;
153
   padding: 30px 24px 22px;
175
   padding: 30px 24px 22px;

+ 14
- 2
src/app/pages/family-edit/family-edit.ts Просмотреть файл

22
 export class FamilyEdit {
22
 export class FamilyEdit {
23
   danka: Danka | undefined;
23
   danka: Danka | undefined;
24
   family: Family | undefined;
24
   family: Family | undefined;
25
+  families: Family[] = [];
25
   dankaId: string = '';
26
   dankaId: string = '';
26
   familyId: string | null = null;
27
   familyId: string | null = null;
27
-  isEditing = false;
28
 
28
 
29
   constructor(
29
   constructor(
30
     private familyService: FamilyService,
30
     private familyService: FamilyService,
33
   ) {
33
   ) {
34
     this.dankaId = this.route.snapshot.params['dankaId'];
34
     this.dankaId = this.route.snapshot.params['dankaId'];
35
     this.familyId = this.route.snapshot.params['familyId'];
35
     this.familyId = this.route.snapshot.params['familyId'];
36
+    this.families = this.familyService.getFamiliesByDankaId(this.dankaId);
36
     if (this.familyId) {
37
     if (this.familyId) {
37
       this.family = this.familyService.getFamilyById(this.familyId);
38
       this.family = this.familyService.getFamilyById(this.familyId);
38
       if (this.family) {
39
       if (this.family) {
53
     relationship: new FormControl(''),
54
     relationship: new FormControl(''),
54
     birthDate: new FormControl('', Validators.required),
55
     birthDate: new FormControl('', Validators.required),
55
     note: new FormControl(''),
56
     note: new FormControl(''),
57
+    fatherId: new FormControl(''),
58
+    motherId: new FormControl(''),
59
+    spouseId: new FormControl(''),
56
   });
60
   });
57
 
61
 
58
   getAgeText() {
62
   getAgeText() {
71
     return `${age}歳`;
75
     return `${age}歳`;
72
   }
76
   }
73
 
77
 
78
+  getFamilyOptions(): Family[] {
79
+    return this.families.filter((family) => family.id !== this.familyId);
80
+  }
81
+
74
   saveFamily() {
82
   saveFamily() {
75
     if (this.familyForm.invalid) {
83
     if (this.familyForm.invalid) {
76
       return;
84
       return;
87
       relationship: formValue.relationship?.trim() ?? '',
95
       relationship: formValue.relationship?.trim() ?? '',
88
       birthDate: formValue.birthDate?.trim() ?? '',
96
       birthDate: formValue.birthDate?.trim() ?? '',
89
       note: formValue.note?.trim() ?? '',
97
       note: formValue.note?.trim() ?? '',
98
+      fatherId: this.familyForm.value.fatherId ?? '',
99
+      motherId: this.familyForm.value.motherId ?? '',
100
+      spouseId: this.familyForm.value.spouseId ?? '',
90
     };
101
     };
91
     this.familyService.saveFamily(updatedFamily);
102
     this.familyService.saveFamily(updatedFamily);
92
-    this.router.navigate(['/danka-detail', dankaId], { queryParams: { tab: 'family' } });  }
103
+    this.router.navigate(['/danka-detail', dankaId], { queryParams: { tab: 'family' } });
104
+  }
93
 
105
 
94
   cancelFamilyEdit(): void {
106
   cancelFamilyEdit(): void {
95
     const dankaId = this.dankaId;
107
     const dankaId = this.dankaId;

Загрузка…
Отмена
Сохранить