interactive chart submit

heat-stack/app/components/ui/heat/CaseSummaryComponents/AnalysisHeader.tsx

@@ -46,13 +46,13 @@ export function AnalysisHeader({ usage_data }: { usage_data: UsageDataSchema}) {
 
 	const recordsIncludedByDefault = heatingAnalysisTypeRecords?.filter(
 		(billingRecord) =>
-		billingRecord.default_inclusion_by_calculation === true &&
+		billingRecord.default_inclusion === true &&
 		billingRecord.inclusion_override === false,
 	).length;
 
 	const recordsIncludedByOverride = heatingAnalysisTypeRecords?.filter(
 		(billingRecord) =>
-		billingRecord.default_inclusion_by_calculation === false &&
+		billingRecord.default_inclusion === false &&
 		billingRecord.inclusion_override === true,
 	).length;
 

heat-stack/app/components/ui/heat/CaseSummaryComponents/EnergyUseHistory.tsx

@@ -4,6 +4,7 @@
 import { type UsageDataSchema } from '#/types/types.ts'; 
 import { AnalysisHeader } from './AnalysisHeader.tsx'
 import { EnergyUseHistoryChart } from './EnergyUseHistoryChart.tsx'
+import { FormMetadata } from '@conform-to/react';
 
 // import { FieldMetadata, useForm } from '@conform-to/react'
 // import { Form, useLocation } from '@remix-run/react'
@@ -13,8 +14,12 @@
 
 export function EnergyUseHistory({
 	usage_data,
+	conform_form,
+	fields
 }: {
-	usage_data: UsageDataSchema
+	conform_form: FormMetadata<any>,
+	usage_data: UsageDataSchema,
+	fields: any
 }) {
 	const titleClass = 'text-5xl font-extrabold tracking-wide mt-10'
 	// const subtitleClass = 'text-2xl font-semibold text-zinc-950 mt-9'
@@ -44,7 +49,7 @@
 			{usage_data && (
 				<>
 					<AnalysisHeader usage_data={usage_data} />
-					<EnergyUseHistoryChart usage_data={usage_data} />
+					<EnergyUseHistoryChart conform_form={conform_form} usage_data={usage_data} fields={fields} />
 				</>
 			)}
 		</div>

heat-stack/app/components/ui/heat/CaseSummaryComponents/EnergyUseHistoryChart.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 import { type z } from 'zod'
-import { type UsageDataSchema, type BillingRecordsSchema } from '#/types/types.ts'
+import { type UsageDataSchema, type BillingRecordsSchema, BillingRecordSchema } from '#/types/types.ts'
 import { Checkbox } from '../../../../components/ui/checkbox.tsx'
 
 import {
@@ -17,7 +17,11 @@
 import NonHeatingUsage from './assets/NonHeatingUsage.svg'
 import NotAllowedInCalculations from './assets/NotAllowedInCalculations.svg'
 
 import { tr } from '@faker-js/faker'
+import { FormMetadata, getInputProps, SubmissionResult } from '@conform-to/react'
+import { Button } from '#/app/components/ui/button.tsx'
+import { Input } from '../../input.tsx'
+import { useActionData } from '@remix-run/react'
 
 // type NaturalGasBillRecord = z.infer<typeof NaturalGasBillRecordZod>
 // const naturalGasBillRecord01: NaturalGasBillRecord = {
@@ -55,8 +59,9 @@
 // 	naturalGasBillRecord04,
 // ]
 
-export function EnergyUseHistoryChart({ usage_data }: { usage_data: UsageDataSchema }) {
+export function EnergyUseHistoryChart({ usage_data, conform_form, fields }: { usage_data: UsageDataSchema, conform_form: FormMetadata<any>, fields: any }) {
 	const [billingRecords, setBillingRecords] = useState<BillingRecordsSchema>([])
+	const lastResultAkaTheMap = useActionData<typeof action>()
 
 	useEffect(() => {
 		if (usage_data?.billing_records) {
@@ -65,25 +70,88 @@
 		}
 	}, [usage_data])
 
-	const handleOverrideCheckboxChange = (index: number) => {
+	const handleOverrideCheckboxChange = (new_index: number) => {
 		setBillingRecords((prevRecords) => {
 			const newRecords = structuredClone(prevRecords)
-			const period = newRecords[index]
+			const period = newRecords[new_index]
 
 			if (period) {
 				const currentOverride = period.inclusion_override
 				// Toggle 'inclusion_override'
 				period.inclusion_override = !currentOverride
-
-				newRecords[index] = { ...period } 
+				newRecords[new_index] = { ...period }	
 			}
 
+			type ActionResult = 
+			| SubmissionResult<string[]>
+			| { data: string }
+			| undefined;
+
+			/** typeguard for useAction between string[] and {data: string} */
+			function hasDataProperty(result: ActionResult): result is { data: string } {
+				return result !== undefined && 'data' in result && typeof (result as any).data === 'string';
+			}  
+
+			/** Pass this to JSON.parse()
+			 * 
+			 * Usage:
+			 * const originalValue = new Map([['a', 1]]);
+			 * const str = JSON.stringify(originalValue, replacer);
+			 * const newValue = JSON.parse(str, reviver);
+			 * 
+			 * See https://stackoverflow.com/a/56150320
+			 */
+			function reviver(key: any, value: any) {
+				if(typeof value === 'object' && value !== null) {
+					if (value.dataType === 'Map') {
+					return new Map(value.value);
+					}
+				}
+				return value;
+			}
+
+			let newMap;
+
+			try {
+				// Parse the JSON string from lastResult.data
+				newMap = JSON.parse(lastResultAkaTheMap.data, reviver) as any;
+				const billingRecordsFromMap = newMap.get('billing_records') ?? [] as Array<any>
+				// TODO: try to do something more like this later, recognizing the outer is a Map, inner object is Array, and innermost is a Map.
+				// billingRecordsFromMap[ new_index ].set({ ...period })
+				billingRecordsFromMap.forEach((record: any, index: number) => {
+					console.log( index, new_index, period?.inclusion_override )
+					if ( index === new_index )
+						record.set('inclusion_override', period?.inclusion_override);
+				});
+				console.log("billingRecordsFromMap[new_index]", new_index, billingRecordsFromMap[new_index], newMap)
+
+			} catch (error) {
+				console.error('Error parsing billingRecordsFromMap[new_index] data:', error);
+			}
+
+
+
+			// const billingRecords = gasBillDataWithUserAdjustments.get('billing_records')
+			// billingRecords[ new_index ].set()
+			// // billingRecords.forEach((record: any, index: number) => {
+			// // 	if ( index === new_index )
+			// // 	record.set('inclusion_override', true);
+			// // });
+			// gasBillDataWithUserAdjustments.set('billing_records', null)
+			// gasBillDataWithUserAdjustments.set('billing_records', billingRecords)
+			// //console.log("(after customization) gasBillDataWithUserAdjustments billing records[0]", gasBillDataWithUserAdjustments.get('billing_records')[0])
+
 			return newRecords
 		})
 	}
 
+	let usage_data_with_user_adjustments = "none"
+
+
 	return (
+
 		<Table id="EnergyUseHistoryChart" className='text-center border rounded-md border-neutral-300'>
+			<Input {...getInputProps(fields.usage_data_with_user_adjustments, { type: "text" })} />
 			<TableHeader>
 				<TableRow className='text-xs text-muted-foreground bg-neutral-50'>
 					<TableHead className="text-center">#</TableHead>
@@ -139,7 +207,7 @@
 					}
 
 					// Adjust inclusion for user input
-					let calculatedInclusion = period.default_inclusion_by_calculation
+					let calculatedInclusion = period.default_inclusion
 					if (period.inclusion_override) {
 						calculatedInclusion = !calculatedInclusion
 					}
@@ -162,11 +230,14 @@
 									: '-'}
 							</TableCell>
 							<TableCell>
-								<Checkbox
-									checked={period.inclusion_override}
-									disabled={overrideCheckboxDisabled}
-									onClick={() => handleOverrideCheckboxChange(index)}
-								/>
+									<Checkbox
+										checked={period.inclusion_override}
+										disabled={overrideCheckboxDisabled}
+										onClick={(e) => handleOverrideCheckboxChange(index)}
+									/>
+									<Button type='submit' className={ `${ period.inclusion_override ? "bg-blue-100" : "bg-red-100" }` }>
+Submit
+								</Button>
 							</TableCell>
 						</TableRow>
 					)