Skip to content

Commit 2df7311

Browse files
authored
Merge pull request #2237 from ORNL-AMO/issue-2191
Issue 2191 - added option to select facilities to import at the account level
2 parents e210657 + 2763280 commit 2df7311

File tree

6 files changed

+529
-105
lines changed

6 files changed

+529
-105
lines changed
Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,30 @@
1-
.popup{
1+
.checkbox-style {
2+
width: 15px;
3+
height: 15px;
4+
}
5+
6+
.facility-table {
7+
background: #fff;
8+
border-radius: 12px;
9+
overflow: hidden;
10+
}
11+
12+
.facility-table {
13+
max-height: 350px;
14+
max-width: 700px;
15+
overflow-y: auto;
16+
}
17+
18+
.popup {
19+
position: fixed;
220
top: 15%;
21+
width: 700px;
22+
max-width: 90vw;
23+
height: auto;
24+
max-height: 70vh;
25+
left: 0;
26+
right: 0;
27+
margin-left: auto;
28+
margin-right: auto;
29+
overflow-y: auto;
330
}

src/app/core-components/import-backup-modal/import-backup-modal.component.html

Lines changed: 157 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -4,82 +4,172 @@
44
<button class="item-right" (click)="cancelImportBackup()">x</button>
55
</div>
66
@if (showModal) {
7-
<div class="popup-body">
8-
<p>Select backup .json file you previously exported from VERIFI application.</p>
9-
<input type="file" #importFile id="importFile" (input)="setImportFile($event.target)" accept=".json">
10-
@if (backupFileError) {
11-
<p class="alert alert-danger">
12-
{{backupFileError}}
13-
</p>
14-
}
15-
@if (backupFile != undefined && backupFileError == undefined && importIsAccount) {
16-
<div class="d-flex flex-column pt-3"
17-
>
18-
<div class="input-group">
19-
<label class="w-50 ps-0 bold">
20-
Import Account Name
21-
</label>
22-
<div class="w-50">
23-
{{backupName}}
24-
</div>
25-
</div>
26-
@if (selectedAccount) {
27-
<div class="input-group pt-2">
28-
<label class="w-50 ps-0 bold">Overwrite current account? </label>
29-
<select class="form-select" [(ngModel)]="overwriteData" name="overwriteData">
30-
<option [ngValue]="true">Overwrite Account</option>
31-
<option [ngValue]="false">Create New Account</option>
32-
</select>
33-
</div>
34-
}
35-
@if (overwriteData) {
36-
<p class="alert alert-warning mt-3">
37-
Existing account ({{selectedAccount.name}}) data will be overwritten. This cannot be undone.
38-
</p>
39-
}
7+
<div class="popup-body">
8+
<p>Select backup .json file you previously exported from VERIFI application.</p>
9+
<input type="file" #importFile id="importFile" (input)="setImportFile($event.target)" accept=".json">
10+
@if (backupFileError) {
11+
<p class="alert alert-danger">
12+
{{backupFileError}}
13+
</p>
14+
}
15+
@if (backupFile != undefined && backupFileError == undefined && importIsAccount) {
16+
<div class="d-flex flex-column pt-3">
17+
<div class="input-group">
18+
<label class="w-50 ps-0 bold">
19+
Import Account Name
20+
</label>
21+
<div class="w-50">
22+
{{backupName}}
4023
</div>
24+
</div>
25+
@if (selectedAccount) {
26+
<div class="input-group pt-2">
27+
<label class="w-50 ps-0 bold">Overwrite current account? </label>
28+
<select class="form-select" [(ngModel)]="overwriteData" name="overwriteData"
29+
(ngModelChange)="clearSelectedFacilities()">
30+
<option [ngValue]="true">Overwrite Account</option>
31+
<option [ngValue]="false">Create New Account</option>
32+
<option [ngValue]="'selective_import'">Select Facilities to Import</option>
33+
</select>
34+
</div>
35+
}
36+
@if (overwriteData === true) {
37+
<p class="alert alert-warning mt-3">
38+
Existing account ({{selectedAccount.name}}) data will be overwritten. This cannot be undone.
39+
</p>
4140
}
42-
@if (backupFile != undefined && backupFileError == undefined && !importIsAccount && accountFacilities.length != 0) {
43-
<div class="d-flex flex-column pt-3"
44-
>
45-
<div class="input-group">
46-
<label class="w-50 ps-0 bold">
47-
Import Facility Name
48-
</label>
49-
<div class="w-50">
50-
{{backupName}}
51-
</div>
52-
</div>
53-
<div class="input-group pt-2">
54-
<label class="w-50 ps-0 bold">Overwrite existing facility? </label>
55-
<select class="form-select" [(ngModel)]="overwriteData" name="overwriteData">
56-
<option [ngValue]="true">Overwrite Facility</option>
57-
<option [ngValue]="false">Create New Facilty</option>
58-
</select>
59-
</div>
60-
@if (overwriteData) {
61-
<div class="input-group pt-2">
62-
<label class="w-50 ps-0 bold">Facility to overwrite</label>
63-
<select class="form-select" [(ngModel)]="overwriteFacility" name="overwriteFacility">
64-
@for (facility of accountFacilities; track facility) {
65-
<option [ngValue]="facility">{{facility.name}}</option>
41+
@if (overwriteData === 'selective_import') {
42+
@if (backupFacilities?.length === 0) {
43+
<p class="alert alert-info">
44+
No facilities found in backup file to import.
45+
</p>
46+
}
47+
@else {
48+
<p class="mt-5 alert alert-info">
49+
Select the facilities you would like to import from the backup file. For each facility, choose to either
50+
create a new facility or replace an existing facility in your account.
51+
</p>
52+
@if (selectedAccount.name !== backupName) {
53+
<p class="mt-2 alert alert-warning">
54+
The backup file selected is from an account different than the one you are importing into.
55+
</p>
56+
}
57+
<div class="facility-table">
58+
<table class="table table-bordered align-middle shadow-sm rounded facility-table mt-2">
59+
<thead class="table-primary">
60+
<tr>
61+
<th scope="col" class="text-center">Select</th>
62+
<th scope="col">Imported Facility</th>
63+
<th scope="col" class="text-center">Create New/ Overwrite</th>
64+
<th scope="col" class="text-center">VERIFI Facility to Update</th>
65+
<th scope="col" class="text-center">Differences in Imported Data</th>
66+
</tr>
67+
</thead>
68+
<tbody>
69+
@for (facility of backupFacilities; track facility) {
70+
<tr>
71+
<td class="text-center">
72+
<input class="form-check-input checkbox-style" type="checkbox"
73+
(change)="onSelectedFacilityChange($event, facility)" id="facility-{{facility.guid}}">
74+
</td>
75+
<td>
76+
<label class="fw-bold" for="facility-{{facility.guid}}">
77+
{{facility.name}}
78+
</label>
79+
</td>
80+
<td class="text-center">
81+
<select class="form-select form-select-sm"
82+
[(ngModel)]="facilityImportSelections[facility.name].importAs"
83+
(ngModelChange)="setFacilityImportOption($event, facility)"
84+
[disabled]="!selectedFacilitiesToImport.includes(facility)">
85+
<option value="new">Create New</option>
86+
<option value="replace">Replace Existing</option>
87+
</select>
88+
</td>
89+
<td class="text-center">
90+
@if(facilityImportSelections[facility.name]?.importAs === 'replace' &&
91+
selectedFacilitiesToImport.includes(facility)) {
92+
<select class="form-select form-select-sm"
93+
[(ngModel)]="facilityImportSelections[facility.name].replacedFacility"
94+
(ngModelChange)="setFacilityToReplace($event, facility)">
95+
@for (accountFacility of accountFacilities; track accountFacility) {
96+
<option [value]="accountFacility.name">
97+
{{accountFacility.name}}
98+
</option>
99+
}
100+
</select>
66101
}
67-
</select>
68-
</div>
69-
}
70-
@if (overwriteData) {
71-
<p class="alert alert-warning mt-3">
72-
Existing facility ({{overwriteFacility.name}}) data will be overwritten. This cannot be undone.
73-
</p>
74-
}
102+
@else {
103+
<span>&mdash;</span>
104+
}
105+
</td>
106+
<td>
107+
@if (lookupDifferences(facility.name).length === 0) {
108+
<span>&mdash;</span>
109+
}
110+
@else {
111+
<ul>
112+
@for (difference of lookupDifferences(facility.name); track difference) {
113+
<li class="text-danger">{{difference}}</li>
114+
}
115+
</ul>
116+
}
117+
</td>
118+
</tr>
119+
}
120+
</tbody>
121+
</table>
122+
</div>
123+
}
124+
@if (duplicateFacilityError) {
125+
<p class="alert alert-danger mt-3">
126+
You have selected the same facility to be replaced more than once. Please correct this before continuing.
127+
}
128+
}
129+
</div>
130+
}
131+
@if (backupFile != undefined && backupFileError == undefined && !importIsAccount && accountFacilities.length != 0)
132+
{
133+
<div class="d-flex flex-column pt-3">
134+
<div class="input-group">
135+
<label class="w-50 ps-0 bold">
136+
Import Facility Name
137+
</label>
138+
<div class="w-50">
139+
{{backupName}}
75140
</div>
141+
</div>
142+
<div class="input-group pt-2">
143+
<label class="w-50 ps-0 bold">Overwrite existing facility? </label>
144+
<select class="form-select" [(ngModel)]="overwriteData" name="overwriteData">
145+
<option [ngValue]="true">Overwrite Facility</option>
146+
<option [ngValue]="false">Create New Facility</option>
147+
</select>
148+
</div>
149+
@if (overwriteData == true) {
150+
<div class="input-group pt-2">
151+
<label class="w-50 ps-0 bold">Facility to overwrite</label>
152+
<select class="form-select" [(ngModel)]="overwriteFacility" name="overwriteFacility">
153+
@for (facility of accountFacilities; track facility) {
154+
<option [ngValue]="facility">{{facility.name}}</option>
155+
}
156+
</select>
157+
</div>
158+
}
159+
@if (overwriteData == true) {
160+
<p class="alert alert-warning mt-3">
161+
Existing facility ({{overwriteFacility.name}}) data will be overwritten. This cannot be undone.
162+
</p>
76163
}
77164
</div>
165+
}
166+
</div>
78167
}
79168
<div class="popup-footer text-end">
80169
<button class="btn btn-secondary" (click)="cancelImportBackup()">Cancel</button>
81170
<button class="btn btn-primary" (click)="importBackupFile()"
82-
[disabled]="backupFile == undefined || backupFileError != undefined">Import Backup
83-
{{backupType}}</button>
171+
[disabled]="backupFile == undefined || backupFileError != undefined || (overwriteData === 'selective_import' && selectedFacilitiesToImport.length === 0)">Import
172+
Backup
173+
{{backupType}}</button>
84174
</div>
85175
</div>

0 commit comments

Comments
 (0)