From 34c34fa998f91bc7233a6d8e9aa20907a202fa6a Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Thu, 16 Feb 2023 23:40:58 +0100
Subject: [PATCH] new app component: currency + improved select

---
 backend/windmill-worker/src/worker.rs         |  2 +
 frontend/package-lock.json                    | 11 +++
 frontend/package.json                         |  1 +
 frontend/src/lib/assets/app.css               |  3 +
 frontend/src/lib/components/AppConnect.svelte |  2 +-
 .../numberInputs/AppCurrencyInput.svelte      | 64 +++++++++++++++
 .../numberInputs/AppNumberInput.svelte        | 10 +++
 .../components/selectInputs/AppSelect.svelte  | 44 ++++++-----
 .../components/apps/editor/Component.svelte   | 79 ++++++++++++++++++-
 .../components/apps/editor/GridEditor.svelte  |  2 +-
 .../componentsPanel/ComponentList.svelte      |  5 +-
 .../componentsPanel/componentStaticValues.ts  |  5 +-
 .../lib/components/flows/flowStateUtils.ts    |  2 +-
 frontend/src/lib/components/flows/utils.ts    | 13 ++-
 14 files changed, 209 insertions(+), 34 deletions(-)
 create mode 100644 frontend/src/lib/components/apps/components/numberInputs/AppCurrencyInput.svelte

diff --git a/backend/windmill-worker/src/worker.rs b/backend/windmill-worker/src/worker.rs
index b240299cc6..0bf96a1603 100644
--- a/backend/windmill-worker/src/worker.rs
+++ b/backend/windmill-worker/src/worker.rs
@@ -1774,6 +1774,8 @@ for k, v in list(args.items()):
 
 try:
     res = inner_script.main(**args)
+    if type(res).__name__ == 'DataFrame':
+        res = res.values.tolist()
     res_json = json.dumps(res, separators=(',', ':'), default=str).replace('\n', '')
     with open("result.json", 'w') as f:
         f.write(res_json)
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 9898e1c4d6..292be95784 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,6 +8,7 @@
 			"name": "windmill",
 			"version": "1.64.0",
 			"dependencies": {
+				"@canutin/svelte-currency-input": "^0.8.0",
 				"@fortawesome/free-brands-svg-icons": "^6.2.1",
 				"@fortawesome/free-solid-svg-icons": "^6.2.1",
 				"@leeoniya/ufuzzy": "^0.9.1",
@@ -205,6 +206,11 @@
 				"node": ">=4"
 			}
 		},
+		"node_modules/@canutin/svelte-currency-input": {
+			"version": "0.8.0",
+			"resolved": "https://registry.npmjs.org/@canutin/svelte-currency-input/-/svelte-currency-input-0.8.0.tgz",
+			"integrity": "sha512-u/ywCjAQzBTU1GvoljNgVzA/xV6UjVXsFbe4KISxk3cZJOA3eN35qaGtNMJhWQ0JI+QbFjxv2I2nHbdzmmn1Nw=="
+		},
 		"node_modules/@csstools/selector-specificity": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz",
@@ -7278,6 +7284,11 @@
 				}
 			}
 		},
+		"@canutin/svelte-currency-input": {
+			"version": "0.8.0",
+			"resolved": "https://registry.npmjs.org/@canutin/svelte-currency-input/-/svelte-currency-input-0.8.0.tgz",
+			"integrity": "sha512-u/ywCjAQzBTU1GvoljNgVzA/xV6UjVXsFbe4KISxk3cZJOA3eN35qaGtNMJhWQ0JI+QbFjxv2I2nHbdzmmn1Nw=="
+		},
 		"@csstools/selector-specificity": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 05526c3db5..fcde29b870 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -61,6 +61,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@canutin/svelte-currency-input": "^0.8.0",
 		"@fortawesome/free-brands-svg-icons": "^6.2.1",
 		"@fortawesome/free-solid-svg-icons": "^6.2.1",
 		"@leeoniya/ufuzzy": "^0.9.1",
diff --git a/frontend/src/lib/assets/app.css b/frontend/src/lib/assets/app.css
index def927c598..40ca117468 100644
--- a/frontend/src/lib/assets/app.css
+++ b/frontend/src/lib/assets/app.css
@@ -23,6 +23,9 @@
 		display: none !important;
 	}
 
+	.svelte-select-list {
+		z-index: 1000 !important;
+	}
 	.nowrap pre code.hljs {
 		whitespace: normal !important;
 	}
diff --git a/frontend/src/lib/components/AppConnect.svelte b/frontend/src/lib/components/AppConnect.svelte
index d53e897e33..cdc87ff074 100644
--- a/frontend/src/lib/components/AppConnect.svelte
+++ b/frontend/src/lib/components/AppConnect.svelte
@@ -417,7 +417,7 @@
 					</div>
 				{/if}
 			{/if}
-			{#if resource_type == 'postgresql' || resource_type == 'mysql'}
+			{#if resource_type == 'postgresql' || resource_type == 'mysql' || resource_type == 'mongodb'}
 				<WhitelistIp />
 			{/if}
 
diff --git a/frontend/src/lib/components/apps/components/numberInputs/AppCurrencyInput.svelte b/frontend/src/lib/components/apps/components/numberInputs/AppCurrencyInput.svelte
new file mode 100644
index 0000000000..78b3ed2553
--- /dev/null
+++ b/frontend/src/lib/components/apps/components/numberInputs/AppCurrencyInput.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { getContext } from 'svelte'
+	import type { AppInput } from '../../inputType'
+	import type { Output } from '../../rx'
+	import type { AppEditorContext } from '../../types'
+	import AlignWrapper from '../helpers/AlignWrapper.svelte'
+	import InputDefaultValue from '../helpers/InputDefaultValue.svelte'
+	import InputValue from '../helpers/InputValue.svelte'
+	import CurrencyInput from '@canutin/svelte-currency-input'
+
+	export let id: string
+	export let configuration: Record<string, AppInput>
+	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
+	export const staticOutputs: string[] = ['result']
+
+	const { worldStore } = getContext<AppEditorContext>('AppEditorContext')
+
+	let defaultValue: number | undefined = undefined
+
+	let isNegativeAllowed: boolean | undefined = undefined
+	let currency: string | undefined = undefined
+	let locale: string | undefined = undefined
+	let value: number | undefined = undefined
+
+	$: outputs = $worldStore?.outputsById[id] as {
+		result: Output<number | null>
+	}
+
+	function handleInput() {
+		outputs?.result.set(value ?? null)
+	}
+
+	function handleDefault() {
+		value = defaultValue
+	}
+
+	$: value && handleInput()
+
+	$: defaultValue && handleDefault()
+</script>
+
+<InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
+<InputValue {id} input={configuration.isNegativeAllowed} bind:value={isNegativeAllowed} />
+<InputValue {id} input={configuration.currency} bind:value={currency} />
+<InputValue {id} input={configuration.locale} bind:value={locale} />
+
+<AlignWrapper {verticalAlignment}>
+	{#key isNegativeAllowed}
+		{#key locale}
+			{#key currency}
+				<CurrencyInput
+					inputClasses={{ formatted: 'p-0' }}
+					bind:value
+					{currency}
+					{locale}
+					on:focus={(e) => {
+						e?.stopPropagation()
+					}}
+					{isNegativeAllowed}
+				/>
+			{/key}
+		{/key}
+	{/key}
+</AlignWrapper>
diff --git a/frontend/src/lib/components/apps/components/numberInputs/AppNumberInput.svelte b/frontend/src/lib/components/apps/components/numberInputs/AppNumberInput.svelte
index 7f5597b9cc..e9062d5b5e 100644
--- a/frontend/src/lib/components/apps/components/numberInputs/AppNumberInput.svelte
+++ b/frontend/src/lib/components/apps/components/numberInputs/AppNumberInput.svelte
@@ -18,6 +18,10 @@
 	let defaultValue: number | undefined = undefined
 	let placeholder: string | undefined = undefined
 
+	let min: number | undefined = undefined
+	let max: number | undefined = undefined
+	let step = 1
+
 	$: outputs = $worldStore?.outputsById[id] as {
 		result: Output<number | null>
 	}
@@ -31,6 +35,9 @@
 	$: input && handleInput()
 </script>
 
+<InputValue {id} input={configuration.step} bind:value={step} />
+<InputValue {id} input={configuration.min} bind:value={min} />
+<InputValue {id} input={configuration.max} bind:value={max} />
 <InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
 <InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
 <InputDefaultValue bind:input {defaultValue} />
@@ -43,6 +50,9 @@
 			e?.stopPropagation()
 			window.dispatchEvent(new Event('pointerup'))
 		}}
+		{min}
+		{max}
+		{step}
 		type="number"
 		inputmode="numeric"
 		pattern="\d*"
diff --git a/frontend/src/lib/components/apps/components/selectInputs/AppSelect.svelte b/frontend/src/lib/components/apps/components/selectInputs/AppSelect.svelte
index 0e947e5e06..b43777ce5e 100644
--- a/frontend/src/lib/components/apps/components/selectInputs/AppSelect.svelte
+++ b/frontend/src/lib/components/apps/components/selectInputs/AppSelect.svelte
@@ -18,6 +18,8 @@
 	let label: string
 	let items: string[]
 	let itemKey: string
+	let multiple: boolean = false
+	let placeholder: string = 'Select an item'
 
 	$: outputs = $worldStore?.outputsById[id] as {
 		result: Output<string | undefined>
@@ -35,24 +37,30 @@
 <InputValue {id} input={configuration.label} bind:value={label} />
 <InputValue {id} input={configuration.items} bind:value={items} />
 <InputValue {id} input={configuration.itemKey} bind:value={itemKey} />
+<InputValue {id} input={configuration.multiple} bind:value={multiple} />
+<InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
 
 <AlignWrapper {horizontalAlignment} {verticalAlignment}>
-	<Select
-		--height="34px"
-		class="select"
-		on:clear={onChange}
-		on:change={onChange}
-		on:focus={(e) => {
-			e?.stopPropagation()
-			window.dispatchEvent(new Event('pointerup'))
-		}}
-		items={Array.isArray(items) ? items : []}
-		{value}
-		placeholder="Select an item"
-		on:click={() => {
-			if (!$connectingInput.opened) {
-				$selectedComponent = id
-			}
-		}}
-	/>
+	<div class="app-select w-full" style="height: 34px" on:pointerdown|stopPropagation>
+		<Select
+			--height="34px"
+			{multiple}
+			on:clear={onChange}
+			on:change={onChange}
+			items={Array.isArray(items) ? items : []}
+			{value}
+			{placeholder}
+			on:click={() => {
+				if (!$connectingInput.opened) {
+					$selectedComponent = id
+				}
+			}}
+		/>
+	</div>
 </AlignWrapper>
+
+<style global>
+	.app-select .value-container {
+		@apply p-0 !important;
+	}
+</style>
diff --git a/frontend/src/lib/components/apps/editor/Component.svelte b/frontend/src/lib/components/apps/editor/Component.svelte
index 196da54eb3..b4644bfcd8 100644
--- a/frontend/src/lib/components/apps/editor/Component.svelte
+++ b/frontend/src/lib/components/apps/editor/Component.svelte
@@ -16,7 +16,8 @@
 		GripHorizontal,
 		Code2,
 		SlidersHorizontal,
-		PlusSquare
+		PlusSquare,
+		DollarSign
 	} from 'lucide-svelte'
 	import type { Size } from 'svelte-grid'
 
@@ -38,6 +39,7 @@
 	export type PasswordInputComponent = BaseComponent<'passwordinputcomponent'>
 	export type DateInputComponent = BaseComponent<'dateinputcomponent'>
 	export type NumberInputComponent = BaseComponent<'numberinputcomponent'>
+	export type CurrencyComponent = BaseComponent<'currencycomponent'>
 	export type SliderComponent = BaseComponent<'slidercomponent'>
 	export type RangeComponent = BaseComponent<'rangecomponent'>
 	export type HtmlComponent = BaseComponent<'htmlcomponent'>
@@ -74,6 +76,7 @@
 			| PasswordInputComponent
 			| DateInputComponent
 			| NumberInputComponent
+			| CurrencyComponent
 			| SliderComponent
 			| RangeComponent
 			| BarChartComponent
@@ -679,6 +682,18 @@
 						type: 'static',
 						fieldType: 'text',
 						value: 'value'
+					},
+					multiple: {
+						type: 'static',
+						fieldType: 'boolean',
+						value: false,
+						onlyStatic: true
+					},
+					placeholder: {
+						type: 'static',
+						fieldType: 'text',
+						value: 'Select an item',
+						onlyStatic: true
 					}
 				},
 				card: false,
@@ -706,6 +721,64 @@
 						type: 'static',
 						value: undefined,
 						fieldType: 'number'
+					},
+					min: {
+						type: 'static',
+						value: undefined,
+						fieldType: 'number',
+						onlyStatic: true
+					},
+					max: {
+						type: 'static',
+						value: undefined,
+						fieldType: 'number',
+						onlyStatic: true
+					},
+					step: {
+						type: 'static',
+						value: 1,
+						fieldType: 'number',
+						onlyStatic: true
+					}
+				},
+				card: false
+			}
+		},
+		currencycomponent: {
+			name: 'Currency',
+			icon: DollarSign,
+			dims: '2:1-3:1',
+			data: {
+				softWrap: true,
+				verticalAlignment: 'center',
+				id: '',
+				type: 'currencycomponent',
+				componentInput: undefined,
+				configuration: {
+					defaultValue: {
+						type: 'static',
+						value: undefined,
+						fieldType: 'number'
+					},
+					isNegativeAllowed: {
+						type: 'static',
+						value: false,
+						fieldType: 'boolean',
+						onlyStatic: true
+					},
+					currency: {
+						type: 'static',
+						value: 'USD',
+						fieldType: 'select',
+						onlyStatic: true,
+						optionValuesKey: 'currencyOptions'
+					},
+					locale: {
+						type: 'static',
+						value: 'en-US',
+						fieldType: 'select',
+						onlyStatic: true,
+						optionValuesKey: 'localeOptions'
 					}
 				},
 				card: false
@@ -854,6 +927,7 @@
 			'textinputcomponent',
 			'passwordinputcomponent',
 			'numberinputcomponent',
+			'currencycomponent',
 			'slidercomponent',
 			'rangecomponent',
 			'dateinputcomponent',
@@ -1241,6 +1315,7 @@
 	import PlotlyHtml from '../components/dataDisplay/PlotlyHtml.svelte'
 	import { defaultAlignement } from './componentsPanel/componentDefaultProps'
 	import AppRangeInput from '../components/numberInputs/AppRangeInput.svelte'
+	import AppCurrencyInput from '../components/numberInputs/AppCurrencyInput.svelte'
 
 	export let component: AppComponent
 	export let selected: boolean
@@ -1389,6 +1464,8 @@
 			/>
 		{:else if component.type === 'numberinputcomponent'}
 			<AppNumberInput {...component} bind:staticOutputs={$staticOutputs[component.id]} />
+		{:else if component.type === 'currencycomponent'}
+			<AppCurrencyInput {...component} bind:staticOutputs={$staticOutputs[component.id]} />
 		{:else if component.type === 'slidercomponent'}
 			<AppSliderInputs {...component} bind:staticOutputs={$staticOutputs[component.id]} />
 		{:else if component.type === 'rangecomponent'}
diff --git a/frontend/src/lib/components/apps/editor/GridEditor.svelte b/frontend/src/lib/components/apps/editor/GridEditor.svelte
index 5d14c2d2e9..f757822d07 100644
--- a/frontend/src/lib/components/apps/editor/GridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/GridEditor.svelte
@@ -116,7 +116,7 @@
 	})
 </script>
 
-<div class="pb-2 relative w-full z-20">
+<div class="pb-2 relative w-full z-20 overflow-visible border">
 	<div
 		class="w-full sticky  top-0 flex justify-between border-l border-r border-b {$connectingInput?.opened
 			? ''
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
index 85fde72e0f..4d01709a46 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
@@ -22,10 +22,7 @@
 	function addComponent(appComponentType: AppComponent['type']) {
 		$dirtyStore = true
 		const grid = $app.grid ?? []
-		const id = getNextId(
-			grid.map((gridItem) => gridItem.data.id),
-			true
-		)
+		const id = getNextId(grid.map((gridItem) => gridItem.data.id))
 
 		const appComponent = componentsRecord[appComponentType].data
 
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/componentStaticValues.ts b/frontend/src/lib/components/apps/editor/componentsPanel/componentStaticValues.ts
index 013be9ba50..e650790932 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/componentStaticValues.ts
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/componentStaticValues.ts
@@ -7,5 +7,8 @@ export const staticValues = {
 	buttonSizeOptions: ['xs', 'sm', 'md', 'lg', 'xl'],
 	tableSearchOptions: ['By Component', 'By Runnable', 'Disabled'],
 	chartThemeOptions: ['theme1', 'theme2', 'theme3'],
-	textStyleOptions: ['Title', 'Subtitle', 'Body', 'Label', 'Caption']
+	textStyleOptions: ['Title', 'Subtitle', 'Body', 'Label', 'Caption'],
+	currencyOptions: ['USD', 'EUR', 'GBP', 'CAD', 'AUD', 'JPY', 'CNY', 'INR', 'BRL'],
+	localeOptions: ['en-US', 'en-GB', 'en-IE', 'de-DE', 'fr-FR', 'br-FR', 'ja-JP', 'pt-TL', 'fr-CA', 'en-CA']
+
 } as const
diff --git a/frontend/src/lib/components/flows/flowStateUtils.ts b/frontend/src/lib/components/flows/flowStateUtils.ts
index c3ddae7aa7..f7f3415720 100644
--- a/frontend/src/lib/components/flows/flowStateUtils.ts
+++ b/frontend/src/lib/components/flows/flowStateUtils.ts
@@ -32,7 +32,7 @@ export async function loadFlowModuleState(flowModule: FlowModule): Promise<FlowM
 
 export const idMutex = new Mutex()
 
-export function getNextId(currentKeys: string[], skipTilde: boolean = false): string {
+export function getNextId(currentKeys: string[]): string {
 	const max = currentKeys.reduce((acc, key) => {
 		if (key === 'failure' || key.includes('branch') || key.includes('loop')) {
 			return acc
diff --git a/frontend/src/lib/components/flows/utils.ts b/frontend/src/lib/components/flows/utils.ts
index ee2bc934e0..da3979f0b4 100644
--- a/frontend/src/lib/components/flows/utils.ts
+++ b/frontend/src/lib/components/flows/utils.ts
@@ -179,9 +179,9 @@ export function emptyFlowModuleState(): FlowModuleState {
 
 const aCharCode = 'a'.charCodeAt(0)
 
-export function numberToChars(n: number, skipTilde: boolean = false) {
+export function numberToChars(n: number) {
 	if (n < 0) {
-		return "-" + numberToChars(-n, skipTilde)
+		return "-" + numberToChars(-n)
 	}
 	var b = [n],
 		sp,
@@ -190,12 +190,11 @@ export function numberToChars(n: number, skipTilde: boolean = false) {
 		div
 
 	sp = 0
-	const basisInc = skipTilde ? -1 : 0
 	while (sp < b.length) {
-		if (b[sp] > (25 + basisInc)) {
-			div = Math.floor(b[sp] / (27 + basisInc))
+		if (b[sp] > (25)) {
+			div = Math.floor(b[sp] / (26))
 			b[sp + 1] = div - 1
-			b[sp] %= (27 + basisInc)
+			b[sp] %= (26)
 		}
 		sp += 1
 	}
@@ -203,7 +202,7 @@ export function numberToChars(n: number, skipTilde: boolean = false) {
 	out = ''
 	for (i = 0; i < b.length; i += 1) {
 		let charCode = aCharCode + b[i]
-		out = (b[i] == 26 ? "-" : String.fromCharCode(charCode)) + out
+		out = String.fromCharCode(charCode) + out
 	}
 
 	return out