Skip to content

Commit 0102263

Browse files
sanjaypinnasanjaypinna
committed
fix auto save
1 parent f079bbe commit 0102263

2 files changed

Lines changed: 87 additions & 71 deletions

File tree

‎app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/AccessModelForm.tsx‎

Lines changed: 58 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,9 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
131131
resources: [],
132132
accessModelId: '',
133133
});
134+
const [previousAccessModelData, setPreviousAccessModelData] =
135+
useState(accessModelData);
136+
134137
const [selectedResources, setSelectedResources] = useState<string[]>([]);
135138
const [showSelectAll, setShowSelectAll] = useState(false);
136139

@@ -161,7 +164,7 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
161164

162165
accessModelDetailsRefetch();
163166
// Update accessModelData with the received data
164-
setAccessModelData({
167+
const newData = {
165168
dataset: params.id,
166169
name: name,
167170
description: description,
@@ -171,7 +174,10 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
171174
resource: resource.resource.id,
172175
fields: resource.fields.map((field: any) => +field.id),
173176
})),
174-
});
177+
};
178+
179+
setAccessModelData(newData);
180+
setPreviousAccessModelData(newData);
175181

176182
// Update selectedResources and selectedFields based on modelResources
177183
const selectedResourcesIds = modelResources.map((resource: any) => ({
@@ -203,13 +209,14 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
203209
setSelectedFields(resourceDetails);
204210
const newResources = resourceDetails.map((resource: any) => ({
205211
resource: resource.value,
206-
fields: resource.schema.map((field: any) => field.id),
212+
fields: resource.schema.map((field: any) => +field.id),
207213
}));
208214

209215
setAccessModelData((prevData: any) => ({
210216
...prevData,
211217
resources: newResources,
212218
}));
219+
213220
if (resourceDetails.length === 0) {
214221
setAccessModelData((prevData: any) => ({
215222
...prevData,
@@ -221,6 +228,8 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
221228
resources: [...prevData.resources],
222229
}));
223230
}
231+
232+
handleSave({ ...accessModelData, resources: newResources });
224233
};
225234

226235
const handleRemoveResource = (resourceId: any) => {
@@ -235,12 +244,16 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
235244
);
236245

237246
// Remove the corresponding resource from accessModelData.resources
247+
const updatedResources = accessModelData.resources.filter(
248+
(resource: any) => resource.resource !== resourceId
249+
);
250+
238251
setAccessModelData((prevData: any) => ({
239252
...prevData,
240-
resources: prevData.resources.filter(
241-
(resource: any) => resource.resource !== resourceId
242-
),
253+
resources: updatedResources,
243254
}));
255+
256+
handleSave({ ...accessModelData, resources: updatedResources });
244257
};
245258

246259
const handleSelectAll = () => {
@@ -255,13 +268,17 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
255268
setSelectedResources(allResources);
256269
setShowSelectAll(false);
257270

271+
const updatedResources = allResources.map((resource: any) => ({
272+
resource: resource.value,
273+
fields: resource.schema.map((option: any) => option.value),
274+
}));
275+
258276
setAccessModelData((prevData) => ({
259277
...prevData,
260-
resources: allResources.map((resource: any) => ({
261-
resource: resource.value,
262-
fields: resource.schema.map((option: any) => option.value),
263-
})),
278+
resources: updatedResources,
264279
}));
280+
281+
handleSave({ ...accessModelData, resources: updatedResources });
265282
};
266283

267284
const { mutate, isLoading: editMutationLoading } = useMutation(
@@ -273,8 +290,7 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
273290
accessModelDetailsRefetch();
274291
accessModelListRefetch();
275292
setAccessModelId(res?.editAccessModel?.id);
276-
277-
// setList(true);
293+
setPreviousAccessModelData(accessModelData);
278294
},
279295
onError: (err: any) => {
280296
toast(`Received ${err} during access model saving`);
@@ -285,16 +301,25 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
285301
const [isSheetOpen, setIsSheetOpen] = useState(false);
286302

287303
const handleSave = (updatedData: any) => {
288-
mutate({
289-
accessModelInput: {
290-
name: updatedData.name,
291-
dataset: updatedData.dataset,
292-
description: updatedData.description,
293-
type: updatedData.type as AccessTypes,
294-
accessModelId: accessModelId || null,
295-
resources: updatedData.resources,
296-
},
297-
});
304+
if (
305+
JSON.stringify(updatedData) !== JSON.stringify(previousAccessModelData)
306+
) {
307+
mutate({
308+
accessModelInput: {
309+
name: updatedData.name,
310+
dataset: params.id,
311+
description: updatedData.description,
312+
type: updatedData.type as AccessTypes,
313+
resources: updatedData.resources,
314+
accessModelId: accessModelId || null,
315+
},
316+
});
317+
}
318+
};
319+
320+
const handleChange = (field: string, value: any) => {
321+
const updatedData = { ...accessModelData, [field]: value };
322+
setAccessModelData(updatedData);
298323
};
299324

300325
return (
@@ -356,11 +381,12 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
356381
(item: any, index: any) => (
357382
<div
358383
key={index}
359-
className=" rounded-1 border-1 border-solid border-baseGraySlateSolid6 px-6 py-3 "
384+
className={`rounded-1 border-1 border-solid border-baseGraySlateSolid6 px-6 py-3 ${accessModelId === item.id ? ' bg-baseGraySlateSolid5' : ''}`}
360385
>
361386
<Button
362387
kind={'tertiary'}
363388
className="flex w-full justify-start"
389+
disabled={accessModelId === item.id}
364390
onClick={() => {
365391
setAccessModelId(item.id);
366392
setIsSheetOpen(false);
@@ -382,28 +408,10 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
382408
</div>
383409
) : (
384410
<div className="mt-6 flex flex-col gap-8">
385-
{/* <div className="text-center">
386-
<Button
387-
onClick={() =>
388-
mutate({
389-
accessModelInput: {
390-
name: accessModelData.name,
391-
dataset: accessModelData.dataset,
392-
description: accessModelData.description,
393-
type: accessModelData.type as AccessTypes,
394-
accessModelId: accessModelId || null,
395-
resources: accessModelData.resources,
396-
},
397-
})
398-
}
399-
>
400-
Save Access Type
401-
</Button>
402-
</div> */}
403-
<div className="flex justify-end">
404-
<Text>Auto Save </Text>
411+
<div className="flex justify-end gap-2">
412+
<Text color="highlight">Auto Save </Text>
405413
{editMutationLoading ? (
406-
<Icon source={Icons.loader} />
414+
<Spinner />
407415
) : (
408416
<Icon source={Icons.checkmark} />
409417
)}
@@ -413,14 +421,12 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
413421
<div className=" w-4/5">
414422
<TextField
415423
value={accessModelData.name}
416-
onChange={(e) =>
417-
setAccessModelData({ ...accessModelData, name: e })
418-
}
424+
onChange={(e) => handleChange('name', e)}
425+
onBlur={() => handleSave(accessModelData)}
419426
label="Access Type Name"
420427
name="name"
421428
required
422429
helpText="To know about best practices for naming Resources go to our User Guide"
423-
onBlur={() => handleSave(accessModelData)}
424430
/>
425431
</div>
426432
<Select
@@ -435,24 +441,17 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
435441
defaultValue={'PUBLIC'}
436442
value={accessModelData.type}
437443
placeholder="Select"
438-
onChange={(e) =>
439-
setAccessModelData({ ...accessModelData, type: e })
440-
}
444+
onChange={(e) => handleChange('type', e)}
441445
onBlur={() => handleSave(accessModelData)}
442446
/>
443447
</div>
444448
<TextField
445449
value={accessModelData.description}
446-
onChange={(e) =>
447-
setAccessModelData({
448-
...accessModelData,
449-
description: e,
450-
})
451-
}
450+
onChange={(e) => handleChange('description', e)}
451+
onBlur={() => handleSave(accessModelData)}
452452
label="Description"
453453
name="description"
454454
multiline={4}
455-
onBlur={() => handleSave(accessModelData)}
456455
/>
457456
</div>
458457

@@ -500,6 +499,7 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
500499
handleRemoveResource={handleRemoveResource}
501500
accessModelData={accessModelData}
502501
setAccessModelData={setAccessModelData}
502+
handleSave={handleSave}
503503
/>
504504
);
505505
})}

‎app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/ResourceSelector.tsx‎

Lines changed: 29 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,15 @@ interface ResourceSelectorProps {
1010
handleRemoveResource: (resourceId: string) => void;
1111
accessModelData: any;
1212
setAccessModelData: (data: any) => void;
13+
handleSave: (updatedData: any) => void;
1314
}
1415

1516
const ResourceSelector: React.FC<ResourceSelectorProps> = ({
1617
selectedResource,
1718
handleRemoveResource,
1819
accessModelData,
1920
setAccessModelData,
21+
handleSave,
2022
}) => {
2123
const [selectAllFields, setSelectAllFields] = useState(true);
2224
const [options, setOptions] = useState<{ label: string; value: string }[]>(
@@ -57,10 +59,10 @@ const ResourceSelector: React.FC<ResourceSelectorProps> = ({
5759
);
5860
} else if (selectAllFields) {
5961
setSelectedFields(initialOptions);
60-
setAccessModelData((prevData: any) => ({
61-
...prevData,
62+
const updatedData = {
63+
...accessModelData,
6264
resources: [
63-
...prevData.resources.filter(
65+
...accessModelData.resources.filter(
6466
(resource: any) => resource.resource !== selectedResource.id
6567
),
6668
{
@@ -70,9 +72,17 @@ const ResourceSelector: React.FC<ResourceSelectorProps> = ({
7072
), // Convert to integer
7173
},
7274
],
73-
}));
75+
};
76+
setAccessModelData(updatedData);
77+
handleSave(updatedData);
7478
}
75-
}, [selectedResource, accessModelData, selectAllFields]);
79+
}, [
80+
selectedResource,
81+
accessModelData,
82+
selectAllFields,
83+
setAccessModelData,
84+
handleSave,
85+
]);
7686

7787
const handleFieldSelection = (selectedOptions: any) => {
7888
const updatedFields = selectedOptions.map((option: any) => ({
@@ -82,18 +92,21 @@ const ResourceSelector: React.FC<ResourceSelectorProps> = ({
8292

8393
setSelectedFields(updatedFields);
8494

85-
setAccessModelData((prevData: any) => ({
86-
...prevData,
95+
const updatedData = {
96+
...accessModelData,
8797
resources: [
88-
...prevData.resources.filter(
98+
...accessModelData.resources.filter(
8999
(resource: any) => resource.resource !== selectedResource.id
90100
),
91101
{
92102
resource: selectedResource.id,
93103
fields: updatedFields.map((field: any) => parseInt(field.value, 10)), // Convert to integer
94104
},
95105
],
96-
}));
106+
};
107+
108+
setAccessModelData(updatedData);
109+
handleSave(updatedData);
97110

98111
setSelectAllFields(updatedFields.length === options.length);
99112
};
@@ -103,18 +116,21 @@ const ResourceSelector: React.FC<ResourceSelectorProps> = ({
103116
setSelectAllFields(!selectAllFields);
104117
setSelectedFields(updatedFields);
105118

106-
setAccessModelData((prevData: any) => ({
107-
...prevData,
119+
const updatedData = {
120+
...accessModelData,
108121
resources: [
109-
...prevData.resources.filter(
122+
...accessModelData.resources.filter(
110123
(resource: any) => resource.resource !== selectedResource.id
111124
),
112125
{
113126
resource: selectedResource.id,
114127
fields: updatedFields.map((field: any) => parseInt(field.value, 10)), // Convert to integer
115128
},
116129
],
117-
}));
130+
};
131+
132+
setAccessModelData(updatedData);
133+
handleSave(updatedData);
118134
};
119135

120136
return (

0 commit comments

Comments
 (0)