@bexis2/bexis2-core-ui 0.0.3 → 0.0.4

package/src/lib/css/themes/theme-skeleton.css

@@ -0,0 +1,118 @@
+/* https://fonts.google.com/specimen/Lato?query=lato&noto.query=Abril */
+@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
+
+:root {
+	/* =~= Theme Properties =~= */
+	--theme-font-family-base: system-ui;
+	--theme-font-family-heading: system-ui;
+	--theme-font-color-base: 0 0 0;
+	--theme-font-color-dark: 255 255 255;
+	--theme-rounded-base: 9999px;
+	--theme-rounded-container: 8px;
+	--theme-border-base: 1px;
+	/* =~= Theme On-X Colors =~= */
+	--on-primary: 0 0 0;
+	--on-secondary: 255 255 255;
+	--on-tertiary: 0 0 0;
+	--on-success: 0 0 0;
+	--on-warning: 0 0 0;
+	--on-error: 255 255 255;
+	--on-surface: 255 255 255;
+	/* =~= Theme Colors  =~= */
+	/* primary | #0FBA81 */
+	--color-primary-50: 219 245 236; /* ⬅ #dbf5ec */
+	--color-primary-100: 207 241 230; /* ⬅ #cff1e6 */
+	--color-primary-200: 195 238 224; /* ⬅ #c3eee0 */
+	--color-primary-300: 159 227 205; /* ⬅ #9fe3cd */
+	--color-primary-400: 87 207 167; /* ⬅ #57cfa7 */
+	--color-primary-500: 15 186 129; /* ⬅ #0FBA81 */
+	--color-primary-600: 14 167 116; /* ⬅ #0ea774 */
+	--color-primary-700: 11 140 97; /* ⬅ #0b8c61 */
+	--color-primary-800: 9 112 77; /* ⬅ #09704d */
+	--color-primary-900: 7 91 63; /* ⬅ #075b3f */
+	/* secondary | #4F46E5 */
+	--color-secondary-50: 229 227 251; /* ⬅ #e5e3fb */
+	--color-secondary-100: 220 218 250; /* ⬅ #dcdafa */
+	--color-secondary-200: 211 209 249; /* ⬅ #d3d1f9 */
+	--color-secondary-300: 185 181 245; /* ⬅ #b9b5f5 */
+	--color-secondary-400: 132 126 237; /* ⬅ #847eed */
+	--color-secondary-500: 79 70 229; /* ⬅ #4F46E5 */
+	--color-secondary-600: 71 63 206; /* ⬅ #473fce */
+	--color-secondary-700: 59 53 172; /* ⬅ #3b35ac */
+	--color-secondary-800: 47 42 137; /* ⬅ #2f2a89 */
+	--color-secondary-900: 39 34 112; /* ⬅ #272270 */
+	/* tertiary | #0EA5E9 */
+	--color-tertiary-50: 219 242 252; /* ⬅ #dbf2fc */
+	--color-tertiary-100: 207 237 251; /* ⬅ #cfedfb */
+	--color-tertiary-200: 195 233 250; /* ⬅ #c3e9fa */
+	--color-tertiary-300: 159 219 246; /* ⬅ #9fdbf6 */
+	--color-tertiary-400: 86 192 240; /* ⬅ #56c0f0 */
+	--color-tertiary-500: 14 165 233; /* ⬅ #0EA5E9 */
+	--color-tertiary-600: 13 149 210; /* ⬅ #0d95d2 */
+	--color-tertiary-700: 11 124 175; /* ⬅ #0b7caf */
+	--color-tertiary-800: 8 99 140; /* ⬅ #08638c */
+	--color-tertiary-900: 7 81 114; /* ⬅ #075172 */
+	/* success | #84cc16 */
+	--color-success-50: 237 247 220; /* ⬅ #edf7dc */
+	--color-success-100: 230 245 208; /* ⬅ #e6f5d0 */
+	--color-success-200: 224 242 197; /* ⬅ #e0f2c5 */
+	--color-success-300: 206 235 162; /* ⬅ #ceeba2 */
+	--color-success-400: 169 219 92; /* ⬅ #a9db5c */
+	--color-success-500: 132 204 22; /* ⬅ #84cc16 */
+	--color-success-600: 119 184 20; /* ⬅ #77b814 */
+	--color-success-700: 99 153 17; /* ⬅ #639911 */
+	--color-success-800: 79 122 13; /* ⬅ #4f7a0d */
+	--color-success-900: 65 100 11; /* ⬅ #41640b */
+	/* warning | #EAB308 */
+	--color-warning-50: 252 244 218; /* ⬅ #fcf4da */
+	--color-warning-100: 251 240 206; /* ⬅ #fbf0ce */
+	--color-warning-200: 250 236 193; /* ⬅ #faecc1 */
+	--color-warning-300: 247 225 156; /* ⬅ #f7e19c */
+	--color-warning-400: 240 202 82; /* ⬅ #f0ca52 */
+	--color-warning-500: 234 179 8; /* ⬅ #EAB308 */
+	--color-warning-600: 211 161 7; /* ⬅ #d3a107 */
+	--color-warning-700: 176 134 6; /* ⬅ #b08606 */
+	--color-warning-800: 140 107 5; /* ⬅ #8c6b05 */
+	--color-warning-900: 115 88 4; /* ⬅ #735804 */
+	/* error | #D41976 */
+	--color-error-50: 249 221 234; /* ⬅ #f9ddea */
+	--color-error-100: 246 209 228; /* ⬅ #f6d1e4 */
+	--color-error-200: 244 198 221; /* ⬅ #f4c6dd */
+	--color-error-300: 238 163 200; /* ⬅ #eea3c8 */
+	--color-error-400: 225 94 159; /* ⬅ #e15e9f */
+	--color-error-500: 212 25 118; /* ⬅ #D41976 */
+	--color-error-600: 191 23 106; /* ⬅ #bf176a */
+	--color-error-700: 159 19 89; /* ⬅ #9f1359 */
+	--color-error-800: 127 15 71; /* ⬅ #7f0f47 */
+	--color-error-900: 104 12 58; /* ⬅ #680c3a */
+	/* surface | #495a8f */
+	--color-surface-50: 228 230 238; /* ⬅ #e4e6ee */
+	--color-surface-100: 219 222 233; /* ⬅ #dbdee9 */
+	--color-surface-200: 210 214 227; /* ⬅ #d2d6e3 */
+	--color-surface-300: 182 189 210; /* ⬅ #b6bdd2 */
+	--color-surface-400: 128 140 177; /* ⬅ #808cb1 */
+	--color-surface-500: 73 90 143; /* ⬅ #495a8f */
+	--color-surface-600: 66 81 129; /* ⬅ #425181 */
+	--color-surface-700: 55 68 107; /* ⬅ #37446b */
+	--color-surface-800: 44 54 86; /* ⬅ #2c3656 */
+	--color-surface-900: 36 44 70; /* ⬅ #242c46 */
+}
+
+/* Headings */
+[data-theme='skeleton'] h1,
+[data-theme='skeleton'] h2,
+[data-theme='skeleton'] h3,
+[data-theme='skeleton'] h4,
+[data-theme='skeleton'] h5,
+[data-theme='skeleton'] h6 {
+	font-weight: bold;
+}
+
+/* Applied to body with `<body data-theme="skeleton">` */
+/* Created with: https://csshero.org/mesher/ */
+/* prettier-ignore */
+[data-theme='skeleton'] {
+	background-image:
+			radial-gradient(at 0% 0%, rgba(var(--color-secondary-500) / 0.33) 0px, transparent 50%),
+			radial-gradient(at 98% 1%, rgba(var(--color-error-500) / 0.33) 0px, transparent 50%);
+}

package/src/lib/css/themes/theme-vintage.css

@@ -0,0 +1,125 @@
+/* https://fonts.google.com/specimen/Abril+Fatface?query=Abril+Fatface&noto.query=Abril */
+@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');
+/* https://fonts.google.com/noto/specimen/Noto+Sans?query=sans */
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;1,100;1,200;1,300&display=swap');
+
+:root {
+	/* =~= Theme Styles =~= */
+	--theme-font-family-base: 'Noto Sans', sans-serif;
+	--theme-font-family-heading: 'Abril Fatface', cursive;
+	--theme-font-color-base: var(--color-primary-900);
+	--theme-font-color-dark: var(--color-primary-100);
+	--theme-rounded-base: 2px;
+	--theme-rounded-container: 4px;
+	--theme-border-base: 1px;
+	/* =~= Theme On-X Colors =~= */
+	--on-primary: 0 0 0;
+	--on-secondary: 0 0 0;
+	--on-tertiary: 0 0 0;
+	--on-success: 0 0 0;
+	--on-warning: 0 0 0;
+	--on-error: 0 0 0;
+	--on-surface: 255 255 255;
+	/* =~= Theme Colors  =~= */
+	/* primary | #ea861a */
+	--color-primary-50: 252 237 221; /* ⬅ #fceddd */
+	--color-primary-100: 251 231 209; /* ⬅ #fbe7d1 */
+	--color-primary-200: 250 225 198; /* ⬅ #fae1c6 */
+	--color-primary-300: 247 207 163; /* ⬅ #f7cfa3 */
+	--color-primary-400: 240 170 95; /* ⬅ #f0aa5f */
+	--color-primary-500: 234 134 26; /* ⬅ #ea861a */
+	--color-primary-600: 211 121 23; /* ⬅ #d37917 */
+	--color-primary-700: 176 101 20; /* ⬅ #b06514 */
+	--color-primary-800: 140 80 16; /* ⬅ #8c5010 */
+	--color-primary-900: 115 66 13; /* ⬅ #73420d */
+	/* secondary | #97cea5 */
+	--color-secondary-50: 239 248 242; /* ⬅ #eff8f2 */
+	--color-secondary-100: 234 245 237; /* ⬅ #eaf5ed */
+	--color-secondary-200: 229 243 233; /* ⬅ #e5f3e9 */
+	--color-secondary-300: 213 235 219; /* ⬅ #d5ebdb */
+	--color-secondary-400: 182 221 192; /* ⬅ #b6ddc0 */
+	--color-secondary-500: 151 206 165; /* ⬅ #97cea5 */
+	--color-secondary-600: 136 185 149; /* ⬅ #88b995 */
+	--color-secondary-700: 113 155 124; /* ⬅ #719b7c */
+	--color-secondary-800: 91 124 99; /* ⬅ #5b7c63 */
+	--color-secondary-900: 74 101 81; /* ⬅ #4a6551 */
+	/* tertiary | #06b6d4 */
+	--color-tertiary-50: 218 244 249; /* ⬅ #daf4f9 */
+	--color-tertiary-100: 205 240 246; /* ⬅ #cdf0f6 */
+	--color-tertiary-200: 193 237 244; /* ⬅ #c1edf4 */
+	--color-tertiary-300: 155 226 238; /* ⬅ #9be2ee */
+	--color-tertiary-400: 81 204 225; /* ⬅ #51cce1 */
+	--color-tertiary-500: 6 182 212; /* ⬅ #06b6d4 */
+	--color-tertiary-600: 5 164 191; /* ⬅ #05a4bf */
+	--color-tertiary-700: 5 137 159; /* ⬅ #05899f */
+	--color-tertiary-800: 4 109 127; /* ⬅ #046d7f */
+	--color-tertiary-900: 3 89 104; /* ⬅ #035968 */
+	/* success | #84cb5d */
+	--color-success-50: 237 247 231; /* ⬅ #edf7e7 */
+	--color-success-100: 230 245 223; /* ⬅ #e6f5df */
+	--color-success-200: 224 242 215; /* ⬅ #e0f2d7 */
+	--color-success-300: 206 234 190; /* ⬅ #ceeabe */
+	--color-success-400: 169 219 142; /* ⬅ #a9db8e */
+	--color-success-500: 132 203 93; /* ⬅ #84cb5d */
+	--color-success-600: 119 183 84; /* ⬅ #77b754 */
+	--color-success-700: 99 152 70; /* ⬅ #639846 */
+	--color-success-800: 79 122 56; /* ⬅ #4f7a38 */
+	--color-success-900: 65 99 46; /* ⬅ #41632e */
+	/* warning | #f2ac23 */
+	--color-warning-50: 253 243 222; /* ⬅ #fdf3de */
+	--color-warning-100: 252 238 211; /* ⬅ #fceed3 */
+	--color-warning-200: 252 234 200; /* ⬅ #fceac8 */
+	--color-warning-300: 250 222 167; /* ⬅ #fadea7 */
+	--color-warning-400: 246 197 101; /* ⬅ #f6c565 */
+	--color-warning-500: 242 172 35; /* ⬅ #f2ac23 */
+	--color-warning-600: 218 155 32; /* ⬅ #da9b20 */
+	--color-warning-700: 182 129 26; /* ⬅ #b6811a */
+	--color-warning-800: 145 103 21; /* ⬅ #916715 */
+	--color-warning-900: 119 84 17; /* ⬅ #775411 */
+	/* error | #d57e78 */
+	--color-error-50: 249 236 235; /* ⬅ #f9eceb */
+	--color-error-100: 247 229 228; /* ⬅ #f7e5e4 */
+	--color-error-200: 245 223 221; /* ⬅ #f5dfdd */
+	--color-error-300: 238 203 201; /* ⬅ #eecbc9 */
+	--color-error-400: 226 165 161; /* ⬅ #e2a5a1 */
+	--color-error-500: 213 126 120; /* ⬅ #d57e78 */
+	--color-error-600: 192 113 108; /* ⬅ #c0716c */
+	--color-error-700: 160 95 90; /* ⬅ #a05f5a */
+	--color-error-800: 128 76 72; /* ⬅ #804c48 */
+	--color-error-900: 104 62 59; /* ⬅ #683e3b */
+	/* surface | #3f3731 */
+	--color-surface-50: 226 225 224; /* ⬅ #e2e1e0 */
+	--color-surface-100: 217 215 214; /* ⬅ #d9d7d6 */
+	--color-surface-200: 207 205 204; /* ⬅ #cfcdcc */
+	--color-surface-300: 178 175 173; /* ⬅ #b2afad */
+	--color-surface-400: 121 115 111; /* ⬅ #79736f */
+	--color-surface-500: 63 55 49; /* ⬅ #3f3731 */
+	--color-surface-600: 57 50 44; /* ⬅ #39322c */
+	--color-surface-700: 47 41 37; /* ⬅ #2f2925 */
+	--color-surface-800: 38 33 29; /* ⬅ #26211d */
+	--color-surface-900: 31 27 24; /* ⬅ #1f1b18 */
+}
+
+[data-theme='vintage'] h1,
+[data-theme='vintage'] h2,
+[data-theme='vintage'] h3,
+[data-theme='vintage'] h4,
+[data-theme='vintage'] h5,
+[data-theme='vintage'] h6 {
+	letter-spacing: 1px;
+}
+
+/* Applied to body with `<body data-theme="vintage">` */
+/* Created with: https://csshero.org/mesher/ */
+[data-theme='vintage'] {
+	/* prettier-ignore */
+	background-image:
+		radial-gradient(at 100% 0%, hsla(135,34%,70%,0.20) 0px, transparent 50%),
+		radial-gradient(at 85% 100%, hsla(31,83%,50%,0.20) 0px, transparent 50%);
+}
+.dark [data-theme='vintage'] {
+	/* prettier-ignore */
+	background-image:
+		radial-gradient(at 100% 0%, hsla(135,34%,70%,0.14) 0px, transparent 50%),
+		radial-gradient(at 85% 100%, hsla(31,83%,50%,0.14) 0px, transparent 50%);
+}

package/src/lib/index.ts

@@ -0,0 +1,19 @@
+
+// Reexport your entry components here
+import ListView from './components/ListView.svelte'
+
+import TableView from './TableView.svelte'
+import FileIcon from './components/File/FileIcon.svelte'
+import FileInfo from './components/File/FileInfo.svelte'
+import FileUploader from './components/File/FileUploader.svelte'
+
+
+
+export {ListView,TableView, FileInfo, FileIcon, FileUploader }
+
+
+export {Api} from './services/Api.js'
+export {host,username,password,setApiConfig} from './stores/apistore.js'
+
+export type {user, FileUploaderModel} from './models/Models.js'
+

package/src/lib/models/Models.ts

@@ -0,0 +1,39 @@
+
+export interface FileInfo {
+ name:string,
+ type:string,
+ lenght:number,
+ description:string,
+ validationHash:string,
+
+}
+
+
+export interface FileUploaderModel{
+ accept:string[],
+ existingFiles:FileInfo[],
+ descriptionType:number,
+ multiple:boolean,
+ maxSize:number,
+ lastModification:Date
+}
+
+export interface Files {
+ accepted:Blob[],
+ rejected:Blob[]
+}
+
+
+export type user = {
+ name:string
+}
+
+export interface FileObj{
+ path:string,
+ lastModified:number,
+ lastModifiedDate:Date,
+ name:string,
+ size:number,
+ type:string,
+ webkitRelativePath:string
+}

package/src/lib/services/Api.ts

@@ -0,0 +1,58 @@
+// Api.js
+import axios from "axios";
+import { host, username, password } from "../stores/apistore";
+
+console.log("setup axios")
+
+
+// implement a method to execute all the request from here.
+const apiRequest = (method, url, request) => {
+ 
+   
+    // Create a instance of axios to use the same base url.
+    const axiosAPI = axios.create({
+      baseURL : host
+    });
+    
+    const headers = {
+        authorization: 'Basic ' + btoa(username + ":" + password)
+    };
+    
+    //using the axios instance to perform the request that received from each http method
+    return axiosAPI({
+        method,
+        url,
+        data: request,
+        headers
+      }).then(res => {
+
+        return Promise.resolve(res);
+      })
+      .catch(err => {
+        return Promise.reject(err);
+      });
+};
+
+// function to execute the http get request
+const get = (url, request="") => apiRequest("get",url,request);
+
+// function to execute the http delete request
+const deleteRequest = (url, request) =>  apiRequest("delete", url, request);
+
+// function to execute the http post request
+const post = (url, request) => apiRequest("post", url, request);
+
+// function to execute the http put request
+const put = (url, request) => apiRequest("put", url, request);
+
+// function to execute the http path request
+const patch = (url, request) =>  apiRequest("patch", url, request);
+
+// expose your method to other services or actions
+export const Api ={
+    get,
+    delete: deleteRequest,
+    post,
+    put,
+    patch
+};

package/src/lib/stores/apistore.ts

@@ -0,0 +1,32 @@
+import { writable } from 'svelte/store'
+
+
+export let host = "window.location.origin";
+export let username = "";
+export let password = "";
+
+const hostStore = writable(""); //writable(window.location.origin);
+const usernameStore =  writable("");
+const passwordStore = writable("");
+
+hostStore.subscribe(value => {
+ host = value;
+});
+
+usernameStore.subscribe(value => {
+ username = value;
+});
+
+passwordStore.subscribe(value => {
+ password = value;
+});
+
+
+
+export function setApiConfig(_host:string ,_user:string,_pw:string)
+{
+ console.log("overwrite settings");
+ hostStore.update(h=>h = _host);
+ usernameStore.update(u=>u = _user);
+ passwordStore.update(p=>p = _pw);
+}

package/src/routes/+layout.svelte

@@ -0,0 +1,10 @@
+<script lang='ts'>
+	// The ordering of these imports is critical to your app working properly
+	import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
+	// If you have source.organizeImports set to true in VSCode, then it will auto change this ordering
+	import '@skeletonlabs/skeleton/styles/all.css';
+	// Most of your app wide CSS should be put in this file
+	import '../app.postcss';
+</script>
+
+<slot />

package/svelte.config.js

@@ -0,0 +1,18 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/kit/vite';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
+	kit: {
+		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
+		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
+		adapter: adapter()
+	}
+};
+
+export default config;

package/tailwind.config.cjs

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	darkMode: 'class',
+	content: ['./src/**/*.{html,js,svelte,ts}', require('path').join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')],
+	theme: {
+		extend: {},
+	},
+	plugins: [...require('@skeletonlabs/skeleton/tailwind/skeleton.cjs')()],
+}

package/tests/test.ts

@@ -0,0 +1,6 @@
+import { expect, test } from '@playwright/test';
+
+test('index page has expected h1', async ({ page }) => {
+	await page.goto('/');
+	await expect(page.getByRole('heading', { name: 'Welcome to SvelteKit' })).toBeVisible();
+});

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"noImplicitAny": false
+	},
+	"exclude": ["node_modules"]
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

package/vite.config.ts

@@ -0,0 +1,9 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+	plugins: [sveltekit()],
+	test: {
+		include: ['src/**/*.{test,spec}.{js,ts}']
+	}
+});

package/components/File/FileUploader.svelte

@@ -1,135 +0,0 @@
-<script >import DropZone from "svelte-file-dropzone/src/index";
-import { Fa } from "svelte-fa/src/index.js";
-import { Spinner, Button, Row, Col, Input } from "sveltestrap";
-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 start = "";
-export let submit = "";
-export let context = "";
-export let data;
-$:
-  model = data;
-$:
-  submitBt = "submit";
-let maxSize = 0;
-const dispatch = createEventDispatcher();
-let fx;
-let 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;
-  }
-});
-async function load() {
-  let url = start + "?id=" + id + "&version=" + version;
-  const res = await Api.get(url);
-  model = await res.json();
-  console.log("fileupload", model);
-}
-function handleFilesSelect(e) {
-  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) {
-    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 });
-    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("SUBMIT");
-  if (files.accepted.length > 0) {
-    console.log(files);
-    const formData = new FormData();
-    formData.append("files", "123");
-    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  -->
-      <Row>
-
-        <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>
-
-      </Row> 
-
-      <Button id="{submitBt}" color="primary" style="display:none" ><Fa icon={faSave}/></Button>      
-
-    {:else} <!-- while data is not loaded show a loading information -->
-
-    <Spinner color="info" size="sm" type ="grow" />
-    {/if}
-
-</form> 
-
-