@bexis2/bexis2-core-ui 0.0.22 → 0.0.25

package/src/lib/components/file/FileUploader.svelte

@@ -0,0 +1,184 @@
+<script lang="ts">
+	import type { FileUploaderModel, FileInfo, Files } from '../../models/Models.js';
+
+	import DropZone from 'svelte-file-dropzone/Dropzone.svelte';
+	import Fa from 'svelte-fa/src/fa.svelte';
+
+	import Spinner from '../spinner/Spinner.svelte';
+	import { createEventDispatcher } from 'svelte';
+	import { faTrash } from '@fortawesome/free-solid-svg-icons';
+	import { faSave } from '@fortawesome/free-regular-svg-icons';
+	import { faFileUpload } from '@fortawesome/free-solid-svg-icons';
+
+	import { Api } from '../../services/Api.js';
+
+	export let id = 0;
+	export let version = 1;
+
+	import { onMount } from 'svelte';
+
+	// export let description="";
+	// export let status=0;
+
+	//action to load fileupload model
+	export let start = '';
+	//action to save selected file
+	export let submit = '';
+
+	export let context = '';
+
+	export let data: FileUploaderModel | undefined;
+
+	$: model = data;
+	$: submitBt = 'submit';
+
+	let maxSize = 0;
+
+	const dispatch = createEventDispatcher();
+
+	let fx: FileInfo[];
+
+	let files: Files = { accepted: [], rejected: [] };
+	$: files;
+
+	onMount(async () => {
+		console.log('fileupload - OnMount', data);
+
+		if (!data) {
+			load();
+		} else {
+			model = data;
+		}
+
+		if (model) {
+			submitBt += context;
+			maxSize = model.maxSize * 1024 * 1024;
+		}
+	});
+
+	// load modal from server
+	async function load() {
+		let url = start + '?id=' + id + '&version=' + version;
+
+		// load menu froms server
+		const res = await Api.get(url);
+		model = await res.data();
+
+		console.log('fileupload', model);
+	}
+
+	function handleFilesSelect(e: any) {
+		console.log('handleFilesSelect', e);
+		console.log('files', files);
+
+		const { acceptedFiles, fileRejections } = e.detail;
+
+		files.accepted = [...files.accepted, ...acceptedFiles];
+		files.rejected = [...files.rejected, ...fileRejections];
+
+		console.log('acceptedFiles', acceptedFiles);
+		console.log('files.accepted', files.accepted);
+
+		if (fileRejections.length > 0) {
+			//alert("the dropped file is not supported");
+			console.log('the dropped file is not supported.');
+			console.log(files.rejected);
+
+			let messages = [''];
+
+			for (let index = 0; index < fileRejections.length; index++) {
+				const element = fileRejections[index];
+				messages.push(getErrorMessage(element));
+			}
+
+			console.log(messages);
+
+			dispatch('error', { messages });
+			//list up the errors somewhere
+			files.rejected = [];
+		}
+
+		if (acceptedFiles.length > 0) {
+			document.getElementById(submitBt)?.click();
+		}
+	}
+
+	function getErrorMessage(rejected) {
+		let message = '';
+		message = rejected.file.path + ' : ';
+		let errors = rejected.errors;
+		for (let index = 0; index < errors.length; index++) {
+			const error = errors[index];
+			message += error.message;
+		}
+
+		return message;
+	}
+
+	async function handleSubmit() {
+		console.log('SUBMIT');
+
+		dispatch('submit');
+
+		let url = submit + '?id=' + id;
+
+		// console.log(model);
+		// console.log(url);
+		console.log('SUBMIT');
+
+		if (files.accepted.length > 0) {
+			console.log(files);
+
+			const formData = new FormData();
+			formData.append('files', '123');
+			// Looping over all files and add it to FormData object
+			for (var i = 0; i < files.accepted.length; i++) {
+				formData.append(files.accepted[i].name, files.accepted[i]);
+			}
+
+			const response = await Api.post(url, formData);
+
+			if (response.status == 200) {
+				dispatch('submited');
+
+				let message = files.accepted.length + ' is/are uploaded';
+				dispatch('success', { text: message });
+
+				files.accepted = [];
+			}
+		}
+	}
+</script>
+
+<form on:submit|preventDefault={handleSubmit}>
+	{#if model}
+		<!--if model exist  -->
+		<div>
+			<DropZone
+				on:drop={handleFilesSelect}
+				accept={model.accept}
+				multiple={model.multiple}
+				{maxSize}
+			>
+				<b style="font-size:xx-large"><Fa icon={faFileUpload} /></b>
+				<span
+					><b>Drag 'n' drop some files here, or click to select files</b>
+					<b>max file : {model.maxSize} mb</b></span
+				>
+				<p>
+					{#if model.accept}
+						{#each model.accept as ext}
+							{ext} ,
+						{/each}
+					{/if}
+				</p>
+			</DropZone>
+		</div>
+
+		<button id={submitBt} color="primary" style="display:none"><Fa icon={faSave} /></button>
+	{:else}
+		<!-- while data is not loaded show a loading information -->
+
+		<Spinner />
+	{/if}
+</form>

package/src/lib/components/form/Checkbox.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import InputContainer from './InputContainer.svelte';
+
+	export let id: string = '';
+	export let label: string = '';
+	export let checked: bool = false;
+
+	export let valid: boolean;
+	export let invalid: boolean;
+	export let required: boolean;
+	export let feedback: [];
+</script>
+
+<InputContainer {label} {feedback} {required}>
+	<input
+		{id}
+		class="input variant-form-material"
+		type="checkbox"
+		class:input-success={valid}
+		class:input-error={invalid}
+		bind:checked
+		on:input
+	/>
+</InputContainer>

package/src/lib/components/form/CheckboxKvPList.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import InputContainer from './InputContainer.svelte';
+
+	export let source;
+	export let target;
+	export let title;
+	export let description = '';
+	export let key;
+
+	let required = false;
+	let feedback: [];
+</script>
+
+<InputContainer label={title} {feedback} {required}>
+	{#each source as item}
+		<label class="flex items-center space-x-2" for={key}>
+			<input class="checkbox" type="checkbox" bind:group={target} checked={item.key} />
+			<p>{item.value}</p>
+		</label>
+	{/each}
+</InputContainer>

package/src/lib/components/form/CheckboxList.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import InputContainer from './InputContainer.svelte';
+
+	export let source;
+	export let target;
+	export let title;
+	export let description = '';
+	export let key;
+
+	let required = false;
+	let feedback: [];
+</script>
+
+<InputContainer label={title} {feedback} {required}>
+	{#each source as item}
+		<label class="flex items-center space-x-2" for={key}>
+			<input class="checkbox" type="checkbox" bind:group={target} value={item} />
+			<p>{item}</p>
+		</label>
+	{/each}
+</InputContainer>

package/src/lib/components/form/DateInput.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import InputContainer from './InputContainer.svelte';
+
+	export let id: string = '';
+	export let label: string = '';
+	export let value: string = '';
+
+	export let valid: boolean = false;
+	export let invalid: boolean = false;
+	export let required: boolean = false;
+	export let feedback: string[] = [''];
+</script>
+
+<InputContainer {label} {feedback} {required}>
+	<input
+		{id}
+		class="input variant-form-material"
+		type="date"
+		class:input-success={valid}
+		class:input-error={invalid}
+		bind:value
+		on:input
+	/>
+</InputContainer>

package/src/lib/components/form/DropdownKvP.svelte

@@ -0,0 +1,44 @@
+<script>
+	import InputContainer from './InputContainer.svelte';
+
+	export let id;
+	export let source;
+	export let target;
+	export let title;
+	export let valid;
+	export let invalid;
+	export let feedback;
+	export let required;
+
+	$: selected = null;
+
+	$: updatedSelectedValue(target);
+	$: updatedTarget(selected);
+
+	function updatedSelectedValue(selection) {
+		if (selection != null) {
+			selected = selection.id;
+		}
+	}
+
+	function updatedTarget(id) {
+		target = source.find((opt) => opt.id === id);
+	}
+</script>
+
+<InputContainer label={title} {feedback} {required}>
+	<select
+		{id}
+		class="select variant-form-material"
+		class:input-success={valid}
+		class:input-error={invalid}
+		bind:value={selected}
+		on:change
+		on:select
+	>
+		<option value={null}>-- Please select --</option>
+		{#each source as e}
+			<option value={e.id}>{e.text}</option>
+		{/each}
+	</select>
+</InputContainer>

package/src/lib/components/form/InputContainer.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	export let label: string = '';
+	export let required: boolean;
+	export let feedback: string[];
+</script>
+
+<label class="label">
+	<span
+		>{label}
+		{#if required} <span class="text-sm text-red-600">*</span> {/if}
+	</span>
+	<slot />
+	{#if feedback}
+		<span class="text-sm text-error-600">
+			<ul>
+				{#each feedback as message}
+					<li>{message}</li>
+				{/each}
+			</ul>
+		</span>
+	{/if}
+</label>

package/src/lib/components/form/MultiSelect.svelte

@@ -0,0 +1,89 @@
+<script>
+	import InputContainer from './InputContainer.svelte';
+
+	import Select from 'svelte-select';
+	import { onMount } from 'svelte';
+
+	export let source;
+	export let target;
+	export let title;
+	export let itemId = 'value';
+	export let label = 'label';
+	export let isMulti = true;
+	export let isComplex = false;
+	export let isTargetComplex = false;
+	export let required = false;
+	export let feedback = [];
+
+	let isLoaded = false;
+
+	$: value = null;
+	$: updateTarget(value);
+
+	function updateTarget(selection) {
+		//diffrent cases
+		//onsole.log("------");
+
+		//a) source is complex model is simple
+		if (isComplex && !isTargetComplex && isLoaded) {
+			target = [];
+			for (let i in selection) {
+				let item = selection[i];
+				target.push(item.key);
+			}
+		}
+
+		if (!isComplex && !isTargetComplex && isLoaded) {
+			target = [];
+			for (let i in selection) {
+				target.push(selection[i].value);
+			}
+		}
+		//console.log("selection "+title,selection);
+		//console.log("target "+title,target);
+	}
+
+	onMount(async () => {
+		//console.log("on mount multiselect");
+		//console.log(source);
+
+		//a) source is complex model is simple
+		if (isComplex && !isTargetComplex) {
+			let items = [];
+			// event.detail will be null unless isMulti is true and user has removed a single item
+			for (let i in target) {
+				let t = target[i];
+				items.push(source.find((item) => item.key === t));
+			}
+
+			isLoaded = true;
+			if (items.length > 0) {
+				value = items;
+			}
+			//console.log(value);
+		}
+
+		//b) simple liust and simple model
+		if (!isComplex && !isTargetComplex) {
+			//console.log("source", source);
+			//console.log("target",target);
+			isLoaded = true;
+			//set target only if its nit empty
+			if (target != null && target !== undefined && target != '') {
+				value = target;
+			}
+		}
+	});
+</script>
+
+<InputContainer label={title} {feedback} {required}>
+	<Select
+		class="select variant-form-material"
+		items={source}
+		{itemId}
+		{label}
+		multiple={isMulti}
+		bind:value
+		placeholder="-- Please select --"
+	/>
+</InputContainer>

package/src/lib/components/form/NumberInput.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import InputContainer from './InputContainer.svelte';
+
+	export let id: string = '';
+	export let label: string = '';
+	export let value: string = '';
+
+	export let valid: boolean = false;
+	export let invalid: boolean = false;
+	export let required: boolean = false;
+	export let feedback: string[] = [''];
+</script>
+
+<InputContainer {label} {feedback} {required}>
+	<input
+		{id}
+		class="input variant-form-material"
+		type="number"
+		class:input-success={valid}
+		class:input-error={invalid}
+		bind:value
+		on:input
+	/>
+</InputContainer>

package/src/lib/components/form/TextArea.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import InputContainer from './InputContainer.svelte';
+
+	export let id: string = '';
+	export let label: string = '';
+	export let value: string = '';
+
+	export let valid: boolean = false;
+	export let invalid: boolean = false;
+	export let required: boolean = false;
+	export let feedback: string[] = [''];
+</script>
+
+<InputContainer {label} {feedback} {required}>
+	<textarea
+		{id}
+		class="textarea variant-form-material"
+		class:input-success={valid}
+		class:input-error={invalid}
+		bind:value
+		on:input
+	/>
+</InputContainer>

package/src/lib/components/form/TextInput.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import InputContainer from './InputContainer.svelte';
+
+	export let id: string = '';
+	export let label: string = '';
+	export let value: string = '';
+
+	export let valid: boolean = false;
+	export let invalid: boolean = false;
+	export let required: boolean = false;
+	export let feedback: string[] = [''];
+</script>
+
+<InputContainer {label} {feedback} {required}>
+	<input
+		{id}
+		class="input variant-form-material"
+		type="text"
+		class:input-success={valid}
+		class:input-error={invalid}
+		bind:value
+		on:input
+	/>
+</InputContainer>

package/src/lib/components/spinner/Spinner.svelte

@@ -0,0 +1,9 @@
+<div
+	class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite] text-secundary-500"
+	role="status"
+>
+	<span
+		class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
+		>Loading...</span
+	>
+</div>

package/src/lib/css/core.ui.css

@@ -1,2 +1,5 @@
-/*place global styles here */
-html, body { @apply h-full; }
+/*place global styles here */
+html,
+body {
+	@apply h-full;
+}