CalvinBackup/phishingclub
1
0
Fork 0
mirror of https://github.com/phishingclub/phishingclub.git synced 2026-05-22 15:59:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor form components rendering

Browse Source 
Signed-off-by: Ronni Skansing <rskansing@gmail.com>
This commit is contained in:
Ronni Skansing
2026-03-28 15:17:09 +01:00
parent b0688f8da8
commit af337105d1
13 changed files with 117 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/CheckboxField.svelte
+7 -10
View File
@@ -1,5 +1,5 @@
<script>
import { afterUpdate, onDestroy, onMount } from 'svelte';
import { onDestroy, onMount } from 'svelte';
import ToolTip from './ToolTip.svelte';
export let bindTo = null;
@@ -17,18 +17,15 @@
if (value === null) {
value = defaultValue;
}
});
afterUpdate(() => {
if (!parentForm) {
parentForm = bindTo.closest('form');
if (!parentForm) {
return;
}
parentFormResetListener = parentForm.addEventListener('reset', (event) => {
parentForm = bindTo?.closest('form');
if (parentForm) {
// store the handler reference so it can be properly removed later
parentFormResetListener = (event) => {
event.preventDefault();
value = defaultValue;
});
};
parentForm.addEventListener('reset', parentFormResetListener);
}
});
frontend/src/lib/components/DateField.svelte
+12 -12
View File
@@ -1,5 +1,5 @@
<script>
import { afterUpdate, onDestroy } from 'svelte';
import { onDestroy, onMount } from 'svelte';
import ToolTip from './ToolTip.svelte';
import { addToast } from '$lib/store/toast';
import { utc_yyyy_mm_dd } from '$lib/utils/api-utils';
@@ -30,22 +30,22 @@
value = utc_yyyy_mm_dd(value);
}
afterUpdate(() => {
// handle reset
if (!parentForm && resets) {
parentForm = bindTo.closest('form');
if (!parentForm) {
return;
onMount(() => {
if (resets) {
parentForm = bindTo?.closest('form');
if (parentForm) {
// store the handler reference so it can be properly removed later
parentFormResetListener = (event) => {
event.preventDefault();
value = defaultValue;
};
parentForm.addEventListener('reset', parentFormResetListener);
}
parentFormResetListener = parentForm.addEventListener('reset', (event) => {
event.preventDefault();
value = defaultValue;
});
}
});
onDestroy(() => {
if (parentFormResetListener && resets) {
if (parentFormResetListener && parentForm && resets) {
parentForm.removeEventListener('reset', parentFormResetListener);
}
});
frontend/src/lib/components/DateTimeField.svelte
+14 -14
View File
@@ -1,5 +1,5 @@
<script>
import { afterUpdate, onDestroy, onMount } from 'svelte';
import { onDestroy, onMount } from 'svelte';
import ToolTip from './ToolTip.svelte';
import { addToast } from '$lib/store/toast';
@@ -67,24 +67,24 @@
}
}
afterUpdate(() => {
// handle reset
if (!parentForm && resets) {
parentForm = bindToDate.closest('form');
if (!parentForm) {
return;
onMount(() => {
if (resets) {
parentForm = bindToDate?.closest('form');
if (parentForm) {
// store the handler reference so it can be properly removed later
parentFormResetListener = (event) => {
event.preventDefault();
dateValue = '';
timeValue = '';
value = defaultValue;
};
parentForm.addEventListener('reset', parentFormResetListener);
}
parentFormResetListener = parentForm.addEventListener('reset', (event) => {
event.preventDefault();
dateValue = '';
timeValue = '';
value = defaultValue;
});
}
});
onDestroy(() => {
if (parentFormResetListener && resets) {
if (parentFormResetListener && parentForm && resets) {
parentForm.removeEventListener('reset', parentFormResetListener);
}
});
frontend/src/lib/components/FileField.svelte
+11 -12
View File
@@ -1,5 +1,5 @@
<script>
import { afterUpdate, onDestroy, onMount } from 'svelte';
import { onDestroy, onMount } from 'svelte';
import ToolTip from './ToolTip.svelte';
// bind a element to this component input field
@@ -20,22 +20,21 @@
// listen to parent form reset event, if one exists
let parentFormResetListener = null;
onMount(() => {});
afterUpdate(() => {
if (!parentForm && resets) {
parentForm = bindTo.closest('form');
if (!parentForm) {
return;
onMount(() => {
if (resets) {
parentForm = bindTo?.closest('form');
if (parentForm) {
// store the handler reference so it can be properly removed later
parentFormResetListener = (event) => {
event.preventDefault();
};
parentForm.addEventListener('reset', parentFormResetListener);
}
parentFormResetListener = parentForm.addEventListener('reset', (event) => {
event.preventDefault();
});
}
});
onDestroy(() => {
if (parentFormResetListener && resets) {
if (parentFormResetListener && parentForm && resets) {
parentForm.removeEventListener('reset', parentFormResetListener);
}
});
frontend/src/lib/components/PasswordField.svelte
+8 -11
View File
@@ -1,5 +1,5 @@
<script>
import { afterUpdate, onDestroy, onMount } from 'svelte';
import { onDestroy, onMount } from 'svelte';
import ToolTip from './ToolTip.svelte';
// use like <PasswordField bind:bindTo={varYouWantToBindTheInputFieldTo} />
@@ -21,23 +21,20 @@
onMount(() => {
value = value ?? defaultValue;
});
afterUpdate(() => {
if (!parentForm) {
parentForm = bindTo.closest('form');
if (!parentForm) {
return;
}
parentFormResetListener = parentForm.addEventListener('reset', (event) => {
parentForm = bindTo?.closest('form');
if (parentForm) {
// store the handler reference so it can be properly removed later
parentFormResetListener = (event) => {
event.preventDefault();
value = defaultValue;
});
};
parentForm.addEventListener('reset', parentFormResetListener);
}
});
onDestroy(() => {
if (parentFormResetListener) {
if (parentFormResetListener && parentForm) {
parentForm.removeEventListener('reset', parentFormResetListener);
}
});
frontend/src/lib/components/TextField.svelte
+11 -12
View File
@@ -1,5 +1,5 @@
<script>
import { afterUpdate, onDestroy, onMount } from 'svelte';
import { onDestroy, onMount } from 'svelte';
import ToolTip from './ToolTip.svelte';
// bind a element to this component input field
@@ -36,23 +36,22 @@
onMount(() => {
value = value ?? defaultValue;
inputType = type;
});
afterUpdate(() => {
if (!parentForm && resets) {
parentForm = bindTo.closest('form');
if (!parentForm) {
return;
if (resets) {
parentForm = bindTo?.closest('form');
if (parentForm) {
// store the handler reference so it can be properly removed later
parentFormResetListener = (event) => {
event.preventDefault();
value = defaultValue;
};
parentForm.addEventListener('reset', parentFormResetListener);
}
parentFormResetListener = parentForm.addEventListener('reset', (event) => {
event.preventDefault();
value = defaultValue;
});
}
});
onDestroy(() => {
if (parentFormResetListener && resets) {
if (parentFormResetListener && parentForm && resets) {
parentForm.removeEventListener('reset', parentFormResetListener);
}
});
frontend/src/lib/components/TextFieldMultiSelect.svelte
+10 -10
View File
@@ -228,6 +228,16 @@
window.addEventListener('scroll', updateDropdownPosition, true);
window.addEventListener('resize', updateDropdownPosition);
// register parent form reset listener once at mount time with a proper handler reference
parentForm = inputElement?.closest('form');
if (parentForm) {
parentFormResetListener = (event) => {
event.preventDefault();
value = defaultValue;
};
parentForm.addEventListener('reset', parentFormResetListener);
}
return () => {
unsubscribe();
document.removeEventListener('click', handleOutsideClick);
@@ -240,16 +250,6 @@
if (inputElement) {
bindTo = inputElement;
}
if (!parentForm && inputElement) {
parentForm = inputElement.closest('form');
if (parentForm) {
parentFormResetListener = parentForm.addEventListener('reset', (event) => {
event.preventDefault();
value = defaultValue;
});
}
}
});
onDestroy(() => {
frontend/src/lib/components/TextFieldSearchSelect.svelte
+9 -12
View File
@@ -1,5 +1,5 @@
<script>
import { afterUpdate, onDestroy, onMount } from 'svelte';
import { onDestroy, onMount } from 'svelte';
import ToolTip from './ToolTip.svelte';
export let id;
@@ -46,23 +46,20 @@
// listen to parent form reset event, if one exists
let parentFormResetListener = null;
onMount(() => {});
afterUpdate(() => {
if (!parentForm) {
parentForm = bindTo.closest('form');
if (!parentForm) {
return;
}
parentFormResetListener = parentForm.addEventListener('reset', (event) => {
onMount(() => {
parentForm = bindTo?.closest('form');
if (parentForm) {
// store the handler reference so it can be properly removed later
parentFormResetListener = (event) => {
event.preventDefault();
value = '';
});
};
parentForm.addEventListener('reset', parentFormResetListener);
}
});
onDestroy(() => {
if (parentFormResetListener) {
if (parentFormResetListener && parentForm) {
parentForm.removeEventListener('reset', parentFormResetListener);
}
});
frontend/src/lib/components/TextFieldSelect.svelte
+10 -10
View File
@@ -233,6 +233,16 @@
window.addEventListener('scroll', updateDropdownPosition, true);
window.addEventListener('resize', updateDropdownPosition);
// register parent form reset listener once at mount time with a proper handler reference
parentForm = inputElement?.closest('form');
if (parentForm) {
parentFormResetListener = (event) => {
event.preventDefault();
value = defaultValue;
};
parentForm.addEventListener('reset', parentFormResetListener);
}
return () => {
unsubscribe();
document.removeEventListener('click', handleOutsideClick);
@@ -245,16 +255,6 @@
if (inputElement) {
bindTo = inputElement;
}
if (!parentForm && inputElement) {
parentForm = inputElement.closest('form');
if (parentForm) {
parentFormResetListener = parentForm.addEventListener('reset', (event) => {
event.preventDefault();
value = defaultValue;
});
}
}
});
onDestroy(() => {
frontend/src/lib/components/TextareaField.svelte
+8 -11
View File
@@ -1,5 +1,5 @@
<script>
import { afterUpdate, onDestroy, onMount } from 'svelte';
import { onDestroy, onMount } from 'svelte';
import ToolTip from './ToolTip.svelte';
// bind a element to this component input field
@@ -28,23 +28,20 @@
onMount(() => {
value = value ?? defaultValue;
});
afterUpdate(() => {
if (!parentForm) {
parentForm = bindTo.closest('form');
if (!parentForm) {
return;
}
parentFormResetListener = parentForm.addEventListener('reset', (event) => {
parentForm = bindTo?.closest('form');
if (parentForm) {
// store the handler reference so it can be properly removed later
parentFormResetListener = (event) => {
event.preventDefault();
value = defaultValue;
});
};
parentForm.addEventListener('reset', parentFormResetListener);
}
});
onDestroy(() => {
if (parentFormResetListener) {
if (parentFormResetListener && parentForm) {
parentForm.removeEventListener('reset', parentFormResetListener);
}
});
frontend/src/lib/components/form/TextFieldSelectWithType.svelte
+10 -10
View File
@@ -191,6 +191,16 @@
const unsubscribe = activeFormElementSubscribe(_id, closeDropdown);
document.addEventListener('click', handleOutsideClick);
// register parent form reset listener once at mount time with a proper handler reference
parentForm = inputElement?.closest('form');
if (parentForm) {
parentFormResetListener = (event) => {
event.preventDefault();
value = defaultValue;
};
parentForm.addEventListener('reset', parentFormResetListener);
}
return () => {
unsubscribe();
document.removeEventListener('click', handleOutsideClick);
@@ -201,16 +211,6 @@
if (inputElement) {
bindTo = inputElement;
}
if (!parentForm && inputElement) {
parentForm = inputElement.closest('form');
if (parentForm) {
parentFormResetListener = parentForm.addEventListener('reset', (event) => {
event.preventDefault();
value = defaultValue;
});
}
}
});
onDestroy(() => {
frontend/src/lib/components/table/Table.svelte
+1 -1
View File
@@ -4,7 +4,7 @@
import TableHeader from './TableHeader.svelte';
import Search from '$lib/components/Search.svelte';
import Select from '$lib/components/Select.svelte';
import { afterUpdate, onMount } from 'svelte';
import { afterUpdate, onMount, onDestroy } from 'svelte';
import TableCell from './TableCell.svelte';
import TableRow from './TableRow.svelte';
import TableCellEmpty from './TableCellEmpty.svelte';
frontend/src/lib/components/table/TableDropDownEllipsis.svelte
+6 -4
View File
@@ -12,10 +12,7 @@
// generate unique id for this dropdown instance
const dropdownId = Symbol();
// subscribe to active dropdown store
const unsubscribe = activeFormElement.subscribe((activeId) => {
isMenuVisible = activeId === dropdownId;
});
let unsubscribe = () => {};
const toggle = (e) => {
if (isMenuVisible) {
@@ -119,6 +116,11 @@
onDestroy(_onDestroy);
onMount(() => {
// subscribe inside onMount so the subscription is only active while the component is mounted
unsubscribe = activeFormElement.subscribe((activeId) => {
isMenuVisible = activeId === dropdownId;
});
return () => {
_onDestroy();
};