Skip to content

Commit edeb016

Browse files
Sameh16Sameh16
authored
feat: update data handling in insights project form to support filling missing fields (#3244)
1 parent e415dca commit edeb016

2 files changed

Lines changed: 80 additions & 28 deletions

File tree

‎frontend/src/modules/admin/modules/insights-projects/components/lf-insights-project-add-details-tab.vue‎

Lines changed: 47 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,13 @@
1212
>
1313
<span
1414
class="hover:bg-gray-200 px-1.5 py-0.5 rounded-xmd"
15-
:class="switcher.name ? 'bg-white text-gray-900' : ''"
16-
@click="!switcher.name ? useOldData(['name']) : null"
15+
:class="useOldData.name ? 'bg-white text-gray-900' : ''"
16+
@click="!useOldData.name ? onUseOldData(['name']) : null"
1717
>Old data</span>
1818
<span
1919
class="hover:bg-gray-200 px-1.5 py-0.5 rounded-xmd"
20-
:class="switcher.name ? '' : 'bg-white text-gray-900'"
21-
@click="switcher.name ? useNewData(['name']) : null"
20+
:class="useOldData.name ? '' : 'bg-white text-gray-900'"
21+
@click="useOldData.name ? useNewData(['name']) : null"
2222
>updated data</span>
2323
</div>
2424
</template>
@@ -49,13 +49,13 @@
4949
>
5050
<span
5151
class="hover:bg-gray-200 px-1.5 py-0.5 rounded-xmd"
52-
:class="switcher.description ? 'bg-white text-gray-900' : ''"
53-
@click="!switcher.description ? useOldData(['description']) : null"
52+
:class="useOldData.description ? 'bg-white text-gray-900' : ''"
53+
@click="!useOldData.description ? onUseOldData(['description']) : null"
5454
>Old data</span>
5555
<span
5656
class="hover:bg-gray-200 px-1.5 py-0.5 rounded-xmd"
57-
:class="switcher.description ? '' : 'bg-white text-gray-900'"
58-
@click="switcher.description ? useNewData(['description']) : null"
57+
:class="useOldData.description ? '' : 'bg-white text-gray-900'"
58+
@click="useOldData.description ? useNewData(['description']) : null"
5959
>updated data</span>
6060
</div>
6161
</template>
@@ -85,13 +85,13 @@
8585
>
8686
<span
8787
class="hover:bg-gray-200 px-1.5 py-0.5 rounded-xmd"
88-
:class="switcher.logoUrl ? 'bg-white text-gray-900' : ''"
89-
@click="!switcher.logoUrl ? useOldData(['logoUrl']) : null"
88+
:class="useOldData.logoUrl ? 'bg-white text-gray-900' : ''"
89+
@click="!useOldData.logoUrl ? onUseOldData(['logoUrl']) : null"
9090
>Old data</span>
9191
<span
9292
class="hover:bg-gray-200 px-1.5 py-0.5 rounded-xmd"
93-
:class="switcher.logoUrl ? '' : 'bg-white text-gray-900'"
94-
@click="switcher.logoUrl ? useNewData(['logoUrl']) : null"
93+
:class="useOldData.logoUrl ? '' : 'bg-white text-gray-900'"
94+
@click="useOldData.logoUrl ? useNewData(['logoUrl']) : null"
9595
>updated data</span>
9696
</div>
9797
</template>
@@ -115,18 +115,18 @@
115115
<template #label>
116116
<label class="c-field__label leading-5"> Topics </label>
117117
<div
118-
v-if="newForm"
118+
v-if="newForm && isKeywordsDifferent()"
119119
class="flex items-center p-1 rounded-md bg-gray-100 gap-2 cursor-pointer text-gray-500 text-tiny font-semibold"
120120
>
121121
<span
122122
class="hover:bg-gray-200 px-1.5 py-0.5 rounded-xmd"
123-
:class="switcher.keywords ? 'bg-white text-gray-900' : ''"
124-
@click="!switcher.keywords ? useOldData(['keywords']) : null"
123+
:class="useOldData.keywords ? 'bg-white text-gray-900' : ''"
124+
@click="!useOldData.keywords ? onUseOldData(['keywords']) : null"
125125
>Old data</span>
126126
<span
127127
class="hover:bg-gray-200 px-1.5 py-0.5 rounded-xmd"
128-
:class="switcher.keywords ? '' : 'bg-white text-gray-900'"
129-
@click="switcher.keywords ? useNewData(['keywords']) : null"
128+
:class="useOldData.keywords ? '' : 'bg-white text-gray-900'"
129+
@click="useOldData.keywords ? useNewData(['keywords']) : null"
130130
>updated data</span>
131131
</div>
132132
</template>
@@ -185,23 +185,23 @@
185185
Website & Social accounts
186186
</h6>
187187
<div
188-
v-if="newForm"
188+
v-if="newForm && isWebsiteSectionDifferent()"
189189
class="flex items-center p-1 rounded-md bg-gray-100 gap-2 cursor-pointer text-gray-500 text-tiny font-semibold"
190190
>
191191
<span
192192
class="hover:bg-gray-200 px-1.5 py-0.5 rounded-xmd"
193-
:class="switcher.website ? 'bg-white text-gray-900' : ''"
193+
:class="useOldData.website ? 'bg-white text-gray-900' : ''"
194194
@click="
195-
!switcher.website
196-
? useOldData(['website', 'github', 'twitter'])
195+
!useOldData.website
196+
? onUseOldData(['website', 'github', 'twitter'])
197197
: null
198198
"
199199
>Old data</span>
200200
<span
201201
class="hover:bg-gray-200 px-1.5 py-0.5 rounded-xmd"
202-
:class="switcher.website ? '' : 'bg-white text-gray-900'"
202+
:class="useOldData.website ? '' : 'bg-white text-gray-900'"
203203
@click="
204-
switcher.website ? useNewData(['website', 'github', 'twitter']) : null
204+
useOldData.website ? useNewData(['website', 'github', 'twitter']) : null
205205
"
206206
>updated data</span>
207207
</div>
@@ -273,7 +273,7 @@ const props = defineProps<{
273273
}>();
274274
const cForm = reactive(props.form);
275275
const $v = useVuelidate(props.rules, cForm);
276-
const switcher = ref<Record<string, boolean>>({
276+
const useOldData = ref<Record<string, boolean>>({
277277
name: true,
278278
description: true,
279279
logoUrl: true,
@@ -285,7 +285,7 @@ const switcher = ref<Record<string, boolean>>({
285285
286286
const useNewData = (fields: string[]) => {
287287
fields.forEach((field) => {
288-
switcher.value[field] = false;
288+
useOldData.value[field] = false;
289289
if (props.newForm) {
290290
cForm[field as keyof InsightsProjectAddFormModel] = props.newForm[
291291
field as keyof InsightsProjectAddFormModel
@@ -294,16 +294,36 @@ const useNewData = (fields: string[]) => {
294294
});
295295
};
296296
297-
const useOldData = (fields: string[]) => {
297+
const onUseOldData = (fields: string[]) => {
298298
fields.forEach((field) => {
299-
switcher.value[field] = true;
299+
useOldData.value[field] = true;
300300
if (props.oldForm) {
301301
cForm[field as keyof InsightsProjectAddFormModel] = props.oldForm[
302302
field as keyof InsightsProjectAddFormModel
303303
] as any;
304304
}
305305
});
306306
};
307+
308+
const isKeywordsDifferent = () => {
309+
if (!props.oldForm || !props.newForm) return false;
310+
const oldKeywords = props.oldForm.keywords || [];
311+
const newKeywords = props.newForm.keywords || [];
312+
return (
313+
oldKeywords.length !== newKeywords.length
314+
|| oldKeywords.some((keyword) => !newKeywords.includes(keyword))
315+
|| newKeywords.some((keyword) => !oldKeywords.includes(keyword))
316+
);
317+
};
318+
319+
const isWebsiteSectionDifferent = () => {
320+
if (!props.oldForm || !props.newForm) return false;
321+
return (
322+
props.oldForm.website !== props.newForm.website
323+
|| props.oldForm.github !== props.newForm.github
324+
|| props.oldForm.twitter !== props.newForm.twitter
325+
);
326+
};
307327
</script>
308328

309329
<script lang="ts">

‎frontend/src/modules/admin/modules/insights-projects/components/lf-insights-project-add.vue‎

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -336,9 +336,11 @@ const fetchProjectDetails = async (project: any) => {
336336
.then((res) => {
337337
if (res) {
338338
if (isEditForm.value) {
339-
oldForm = cloneDeep(form);
340339
newForm = cloneDeep(form);
341340
newForm = assignProjectDetails(res, newForm);
341+
fillForm(fillIfNotExisting(form, newForm));
342+
newForm = fillIfNotExisting(newForm, form);
343+
oldForm = cloneDeep(form);
342344
} else {
343345
fillForm(assignProjectDetails(res, form));
344346
}
@@ -359,6 +361,36 @@ const fetchProjectDetails = async (project: any) => {
359361
});
360362
};
361363
364+
const fillIfNotExisting = (
365+
form: InsightsProjectAddFormModel,
366+
newForm: InsightsProjectAddFormModel,
367+
) => {
368+
const tempForm = cloneDeep(form);
369+
if (!tempForm.name || tempForm.name.trim() === '') {
370+
tempForm.name = newForm.name || '';
371+
}
372+
if (!tempForm.description || tempForm.description.trim() === '') {
373+
tempForm.description = newForm.description || '';
374+
}
375+
if (!tempForm.logoUrl || tempForm.logoUrl.trim() === '') {
376+
tempForm.logoUrl = newForm.logoUrl || '';
377+
}
378+
if (!tempForm.github || tempForm.github.trim() === '') {
379+
tempForm.github = newForm.github || '';
380+
}
381+
if (!tempForm.twitter || tempForm.twitter.trim() === '') {
382+
tempForm.twitter = newForm.twitter || '';
383+
}
384+
if (!tempForm.website || tempForm.website.trim() === '') {
385+
tempForm.website = newForm.website || '';
386+
}
387+
if (!tempForm.keywords || tempForm.keywords.length === 0) {
388+
tempForm.keywords = newForm.keywords || [];
389+
}
390+
391+
return tempForm;
392+
};
393+
362394
const assignProjectDetails = (
363395
res: InsightsProjectDetailsResponse,
364396
form: InsightsProjectAddFormModel,

0 commit comments

Comments
 (0)