Merge pull request #862 from intuitem/CA-436-split-model-form-compone…

…nt-into-multiple-components split ModelForm component in multiple components
intuitem · Sep 24, 2024 · 8fc67ea · 8fc67ea
2 parents b32c62a + 98b1e23
commit 8fc67ea
Show file tree

Hide file tree

Showing 19 changed files with 1,542 additions and 1,190 deletions.
diff --git a/frontend/src/lib/components/Forms/ModelForm.svelte b/frontend/src/lib/components/Forms/ModelForm.svelte
diff --git a/frontend/src/lib/components/Forms/ModelForm/AppliedControlPolicyForm.svelte b/frontend/src/lib/components/Forms/ModelForm/AppliedControlPolicyForm.svelte
@@ -0,0 +1,117 @@
+<script lang="ts">
+	import AutocompleteSelect from '../AutocompleteSelect.svelte';
+	import Select from '../Select.svelte';
+	import TextField from '$lib/components/Forms/TextField.svelte';
+	import NumberField from '$lib/components/Forms/NumberField.svelte';
+	import { getOptions } from '$lib/utils/crud';
+	import type { SuperValidated } from 'sveltekit-superforms';
+	import type { ModelInfo, CacheLock } from '$lib/utils/types';
+	import * as m from '$paraglide/messages.js';
+
+	export let form: SuperValidated<any>;
+	export let model: ModelInfo;
+	export let cacheLocks: Record<string, CacheLock> = {};
+	export let formDataCache: Record<string, any> = {};
+	export let schema: any = {};
+	export let initialData: Record<string, any> = {};
+</script>
+
+{#if schema.shape.category}
+	<Select
+		{form}
+		options={model.selectOptions['category']}
+		field="category"
+		label={m.category()}
+		cacheLock={cacheLocks['category']}
+		bind:cachedValue={formDataCache['category']}
+	/>
+{/if}
+<Select
+	{form}
+	options={model.selectOptions['csf_function']}
+	field="csf_function"
+	label={m.csfFunction()}
+	cacheLock={cacheLocks['csf_function']}
+	bind:cachedValue={formDataCache['csf_function']}
+/>
+<AutocompleteSelect
+	{form}
+	multiple
+	options={getOptions({ objects: model.foreignKeys['owner'], label: 'email' })}
+	field="owner"
+	cacheLock={cacheLocks['owner']}
+	bind:cachedValue={formDataCache['owner']}
+	label={m.owner()}
+/>
+<Select
+	{form}
+	options={model.selectOptions['status']}
+	field="status"
+	label={m.status()}
+	cacheLock={cacheLocks['status']}
+	bind:cachedValue={formDataCache['status']}
+/>
+<AutocompleteSelect
+	{form}
+	multiple
+	options={getOptions({
+		objects: model.foreignKeys['evidences'],
+		extra_fields: [['folder', 'str']]
+	})}
+	field="evidences"
+	cacheLock={cacheLocks['evidences']}
+	bind:cachedValue={formDataCache['evidences']}
+	label={m.evidences()}
+/>
+<TextField
+	type="date"
+	{form}
+	field="eta"
+	label={m.eta()}
+	helpText={m.etaHelpText()}
+	cacheLock={cacheLocks['eta']}
+	bind:cachedValue={formDataCache['eta']}
+/>
+<TextField
+	type="date"
+	{form}
+	field="expiry_date"
+	label={m.expiryDate()}
+	helpText={m.expiryDateHelpText()}
+	cacheLock={cacheLocks['expiry_date']}
+	bind:cachedValue={formDataCache['expiry_date']}
+/>
+<TextField
+	{form}
+	field="link"
+	label={m.link()}
+	helpText={m.linkHelpText()}
+	cacheLock={cacheLocks['link']}
+	bind:cachedValue={formDataCache['link']}
+/>
+<Select
+	{form}
+	options={model.selectOptions['effort']}
+	field="effort"
+	label={m.effort()}
+	helpText={m.effortHelpText()}
+	cacheLock={cacheLocks['effort']}
+	bind:cachedValue={formDataCache['effort']}
+/>
+<NumberField
+	{form}
+	field="cost"
+	label={m.cost()}
+	helpText={m.costHelpText()}
+	cacheLock={cacheLocks['cost']}
+	bind:cachedValue={formDataCache['cost']}
+/>
+<AutocompleteSelect
+	{form}
+	options={getOptions({ objects: model.foreignKeys['folder'] })}
+	field="folder"
+	cacheLock={cacheLocks['folder']}
+	bind:cachedValue={formDataCache['folder']}
+	label={m.domain()}
+	hidden={initialData.folder}
+/>
diff --git a/frontend/src/lib/components/Forms/ModelForm/AssetForm.svelte b/frontend/src/lib/components/Forms/ModelForm/AssetForm.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+	import AutocompleteSelect from '../AutocompleteSelect.svelte';
+	import Select from '../Select.svelte';
+	import TextArea from '$lib/components/Forms/TextArea.svelte';
+	import { getOptions } from '$lib/utils/crud';
+	import type { SuperValidated } from 'sveltekit-superforms';
+	import type { ModelInfo, CacheLock } from '$lib/utils/types';
+	import * as m from '$paraglide/messages.js';
+
+	export let form: SuperValidated<any>;
+	export let model: ModelInfo;
+	export let cacheLocks: Record<string, CacheLock> = {};
+	export let formDataCache: Record<string, any> = {};
+	export let initialData: Record<string, any> = {};
+	export let object: any = {};
+	export let data: any = {};
+</script>
+
+<TextArea
+	{form}
+	field="business_value"
+	label={m.businessValue()}
+	cacheLock={cacheLocks['business_value']}
+	bind:cachedValue={formDataCache['business_value']}
+/>
+<AutocompleteSelect
+	{form}
+	options={getOptions({ objects: model.foreignKeys['folder'] })}
+	field="folder"
+	cacheLock={cacheLocks['folder']}
+	bind:cachedValue={formDataCache['folder']}
+	label={m.domain()}
+	hidden={initialData.folder}
+/>
+<Select
+	{form}
+	options={model.selectOptions['type']}
+	field="type"
+	label="Type"
+	cacheLock={cacheLocks['type']}
+	bind:cachedValue={formDataCache['type']}
+/>
+<AutocompleteSelect
+	disabled={data.type === 'PR'}
+	multiple
+	{form}
+	options={getOptions({ objects: model.foreignKeys['parent_assets'], self: object })}
+	field="parent_assets"
+	cacheLock={cacheLocks['parent_assets']}
+	bind:cachedValue={formDataCache['parent_assets']}
+	label={m.parentAssets()}
+/>
diff --git a/frontend/src/lib/components/Forms/ModelForm/ComplianceAssessmentForm.svelte b/frontend/src/lib/components/Forms/ModelForm/ComplianceAssessmentForm.svelte
@@ -0,0 +1,132 @@
+<script lang="ts">
+	import AutocompleteSelect from '../AutocompleteSelect.svelte';
+	import Select from '../Select.svelte';
+	import TextField from '$lib/components/Forms/TextField.svelte';
+	import TextArea from '$lib/components/Forms/TextArea.svelte';
+	import { getOptions } from '$lib/utils/crud';
+	import type { SuperValidated } from 'sveltekit-superforms';
+	import type { ModelInfo, CacheLock } from '$lib/utils/types';
+	import * as m from '$paraglide/messages.js';
+
+	export let form: SuperValidated<any>;
+	export let model: ModelInfo;
+	export let cacheLocks: Record<string, CacheLock> = {};
+	export let formDataCache: Record<string, any> = {};
+	export let initialData: Record<string, any> = {};
+	export let object: any = {};
+	export let context: string;
+</script>
+
+{#if context === 'fromBaseline' && initialData.baseline}
+	<AutocompleteSelect
+		{form}
+		field="baseline"
+		cacheLock={cacheLocks['baseline']}
+		bind:cachedValue={formDataCache['baseline']}
+		label={m.baseline()}
+		options={getOptions({ objects: model.foreignKeys['baseline'] })}
+	/>
+{/if}
+<AutocompleteSelect
+	{form}
+	options={getOptions({
+		objects: model.foreignKeys['project'],
+		extra_fields: [['folder', 'str']]
+	})}
+	field="project"
+	cacheLock={cacheLocks['project']}
+	bind:cachedValue={formDataCache['project']}
+	label={m.project()}
+	hidden={initialData.project}
+/>
+<TextField
+	{form}
+	field="version"
+	label={m.version()}
+	cacheLock={cacheLocks['version']}
+	bind:cachedValue={formDataCache['version']}
+/>
+<Select
+	{form}
+	options={model.selectOptions['status']}
+	field="status"
+	label={m.status()}
+	cacheLock={cacheLocks['status']}
+	bind:cachedValue={formDataCache['status']}
+/>
+<AutocompleteSelect
+	{form}
+	disabled={object.id}
+	options={getOptions({ objects: model.foreignKeys['framework'] })}
+	field="framework"
+	cacheLock={cacheLocks['framework']}
+	bind:cachedValue={formDataCache['framework']}
+	label={m.framework()}
+	on:change={async (e) => {
+		if (e.detail) {
+			await fetch(`/frameworks/${e.detail}`)
+				.then((r) => r.json())
+				.then((r) => {
+					const implementation_groups = r['implementation_groups_definition'] || [];
+					model.selectOptions['selected_implementation_groups'] = implementation_groups.map(
+						(group) => ({ label: group.name, value: group.ref_id })
+					);
+				});
+		}
+	}}
+/>
+{#if model.selectOptions['selected_implementation_groups'] && model.selectOptions['selected_implementation_groups'].length}
+	<AutocompleteSelect
+		multiple
+		translateOptions={false}
+		{form}
+		options={model.selectOptions['selected_implementation_groups']}
+		field="selected_implementation_groups"
+		cacheLock={cacheLocks['selected_implementation_groups']}
+		bind:cachedValue={formDataCache['selected_implementation_groups']}
+		label={m.selectedImplementationGroups()}
+	/>
+{/if}
+<AutocompleteSelect
+	{form}
+	multiple
+	options={getOptions({ objects: model.foreignKeys['authors'], label: 'email' })}
+	field="authors"
+	cacheLock={cacheLocks['authors']}
+	bind:cachedValue={formDataCache['authors']}
+	label={m.authors()}
+/>
+<AutocompleteSelect
+	{form}
+	multiple
+	options={getOptions({ objects: model.foreignKeys['reviewers'], label: 'email' })}
+	field="reviewers"
+	cacheLock={cacheLocks['reviewers']}
+	bind:cachedValue={formDataCache['reviewers']}
+	label={m.reviewers()}
+/>
+<TextField
+	type="date"
+	{form}
+	field="eta"
+	label={m.eta()}
+	helpText={m.etaHelpText()}
+	cacheLock={cacheLocks['eta']}
+	bind:cachedValue={formDataCache['eta']}
+/>
+<TextField
+	type="date"
+	{form}
+	field="due_date"
+	label={m.dueDate()}
+	helpText={m.dueDateHelpText()}
+	cacheLock={cacheLocks['due_date']}
+	bind:cachedValue={formDataCache['due_date']}
+/>
+<TextArea
+	{form}
+	field="observation"
+	label={m.observation()}
+	cacheLock={cacheLocks['observation']}
+	bind:cachedValue={formDataCache['observation']}
+/>