@bexis2/bexis2-core-ui 0.4.6 → 0.4.8

package/README.md

@@ -1,4 +1,12 @@
 # bexis-core-ui
+## 0.4.8
+- page
+  - add notification if api call to backend faild
+
+## 0.4.7
+- menu
+  - remove capitalization from menu item
+
 ## 0.4.6
 - table
   - Adds config for enabling and disabling Search field on Table.

package/dist/components/page/Page.svelte

@@ -1,5 +1,5 @@
 <script>import { onMount } from "svelte";
-import { pageContentLayoutType } from "../../models/Enums";
+import { pageContentLayoutType, notificationType } from "../../models/Enums";
 import { AppShell, AppBar } from "@skeletonlabs/skeleton";
 import Menu from "./menu/Menu.svelte";
 import Footer from "./Footer.svelte";
@@ -9,7 +9,8 @@ import Breadcrumb from "./breadcrumb/Breadcrumb.svelte";
 import Notification from "./Notification.svelte";
 import { computePosition, autoUpdate, offset, shift, flip, arrow } from "@floating-ui/dom";
 import { storePopup } from "@skeletonlabs/skeleton";
-import { breadcrumbStore } from "../../stores/pageStores";
+import { breadcrumbStore, notificationStore } from "../../stores/pageStores";
+import { errorStore } from "../../stores/apiStores";
 storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
 import Docs from "./Docs.svelte";
 import GoToTop from "./GoToTop.svelte";
@@ -21,6 +22,13 @@ export let footer = true;
 export let help = false;
 export let contentLayoutType = pageContentLayoutType.center;
 export let fixLeft = true;
+errorStore.subscribe((error) => {
+  console.log("\u{1F680} ~ errorStore.subscribe ~ value:", error.error);
+  notificationStore.showNotification({
+    notificationType: notificationType.error,
+    message: error.error
+  });
+});
 onMount(async () => {
   console.log("page");
   breadcrumbStore.clean();

package/dist/components/page/menu/MenuItem.svelte

@@ -34,7 +34,7 @@ let popupCombobox = {
 	</div>
 	<div class="hidden sm:block place-self-center" use:popup={popupCombobox}>
 		<button class="flex items-center gap-x-1 px-2">
-			<span class="capitalize">{menubarItem.Title}▾</span>
+			<span>{menubarItem.Title}▾</span>
 		</button>
 
 		<div class="z-50 w-max" data-popup={id}>

package/dist/models/Models.d.ts

@@ -167,3 +167,10 @@ export declare class Receive {
     columns?: ServerColumn[];
     constructor();
 }
+export declare class errorType {
+    statusText: string;
+    status: number;
+    error: string;
+    stackTrace: string;
+    constructor();
+}

package/dist/models/Models.js

@@ -28,3 +28,16 @@ export class Receive {
         this.columns = [];
     }
 }
+export class errorType {
+    statusText;
+    status;
+    error;
+    stackTrace;
+    constructor() {
+        this.statusText = "";
+        this.status = 0;
+        this.error = "";
+        this.stackTrace = "";
+    }
+}
+;

package/dist/services/Api.js

@@ -1,6 +1,6 @@
 // Api.js
 import axios from 'axios';
-import { host, username, password } from '../stores/apiStores';
+import { host, username, password, errorStore } from '../stores/apiStores';
 console.log('setup axios');
 // implement a method to execute all the request from here.
 const apiRequest = (method, url, request) => {
@@ -19,9 +19,19 @@ const apiRequest = (method, url, request) => {
         headers
     })
         .then((res) => {
+        // console.log("res",res);
         return Promise.resolve(res);
     })
-        .catch((err) => {
+        .catch((er) => {
+        //console.log("🚀 ~ apiRequest ~ err:", er)
+        const err = er.response;
+        let error = {
+            status: err.status,
+            statusText: err.statusText,
+            error: err.data.error,
+            stackTrace: err.data.stackTrace,
+        };
+        errorStore.set(error);
         return Promise.reject(err);
     });
 };

package/dist/stores/apiStores.d.ts

@@ -1,4 +1,7 @@
+/// <reference types="svelte" />
+import { errorType } from '../models/Models';
 export declare let host: string;
 export declare let username: string;
 export declare let password: string;
+export declare const errorStore: import("svelte/store").Writable<errorType>;
 export declare function setApiConfig(_host: string, _user: string, _pw: string): void;

package/dist/stores/apiStores.js

@@ -1,10 +1,12 @@
 import { writable } from 'svelte/store';
+import { errorType } from '../models/Models';
 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('');
+export const errorStore = writable(new errorType());
 hostStore.subscribe((value) => {
     host = value;
 });

package/dist/stores/pageStores.js

@@ -95,7 +95,7 @@ function createBreadcrumbStore() {
             breadcrumbStore.subscribe((value) => {
                 value = value === undefined ? new BreadcrumbModel() : value;
                 let v = value.items.find((i) => i.link === item.link);
-                console.log(value.items, v);
+                //console.log(value.items, v);
                 if (v) {
                     const i = value.items.indexOf(v);
                     value.items[i] = item;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "private": false,
   "scripts": {
     "dev": "vite dev",

package/src/lib/components/page/Page.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 
-	import type { linkType } from '$lib/models/Models';
-	import { pageContentLayoutType } from '$lib/models/Enums';
+	import type { errorType, linkType } from '$lib/models/Models';
+	import { pageContentLayoutType, notificationType } from '$lib/models/Enums';
 
 	// ui components
 	import { AppShell, AppBar } from '@skeletonlabs/skeleton';
@@ -16,7 +16,8 @@
 	//popup
 	import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
 	import { storePopup } from '@skeletonlabs/skeleton';
-	import { breadcrumbStore } from '$store/pageStores';
+	import { breadcrumbStore,notificationStore } from '$store/pageStores';
+	import { errorStore } from '$store/apiStores';
 
 	storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
 
@@ -38,6 +39,14 @@ import type { helpItemType, helpStoreType } from '$models/Models';
 	export let contentLayoutType: pageContentLayoutType = pageContentLayoutType.center;
 	export let fixLeft: boolean = true;
 
+	errorStore.subscribe((error:errorType) => {
+			console.log("🚀 ~ errorStore.subscribe ~ value:", error.error)
+			notificationStore.showNotification({
+				notificationType: notificationType.error,
+				message: error.error
+			})
+		})
+
 	onMount(async () => {
 		console.log('page');
 		breadcrumbStore.clean();

package/src/lib/components/page/menu/MenuItem.svelte

@@ -45,7 +45,7 @@
 	</div>
 	<div class="hidden sm:block place-self-center" use:popup={popupCombobox}>
 		<button class="flex items-center gap-x-1 px-2">
-			<span class="capitalize">{menubarItem.Title}▾</span>
+			<span>{menubarItem.Title}▾</span>
 		</button>
 
 		<div class="z-50 w-max" data-popup={id}>

package/src/lib/models/Models.ts

@@ -221,3 +221,19 @@ export class Receive {
 		this.columns = [];
 	}
 }
+
+
+export class errorType {
+	statusText: string;
+	status: number;
+	error:string;
+	stackTrace:string
+
+	constructor() {
+		this.statusText = "";
+		this.status = 0;
+		this.error = "";
+		this.stackTrace = "";
+	}
+
+};

package/src/lib/services/Api.ts

@@ -1,6 +1,7 @@
 // Api.js
 import axios from 'axios';
-import { host, username, password } from '../stores/apiStores';
+import { host, username, password, errorStore } from '../stores/apiStores';
+import type { errorType } from '$models/Models';
 
 console.log('setup axios');
 
@@ -23,9 +24,24 @@ const apiRequest = (method, url, request) => {
 		headers
 	})
 		.then((res) => {
+			// console.log("res",res);
+			
 			return Promise.resolve(res);
+
 		})
-		.catch((err) => {
+		.catch((er) => {
+		//console.log("🚀 ~ apiRequest ~ err:", er)
+			const err = er.response;
+			
+			let error:errorType = {
+							status: err.status,
+							statusText: err.statusText,
+							error: err.data.error,
+							stackTrace: err.data.stackTrace,
+			}
+
+			errorStore.set(error);
+
 			return Promise.reject(err);
 		});
 };

package/src/lib/stores/apiStores.ts

@@ -1,4 +1,5 @@
 import { writable } from 'svelte/store';
+import { errorType } from '$models/Models'
 
 export let host = 'window.location.origin';
 export let username = '';
@@ -8,6 +9,8 @@ const hostStore = writable(''); //writable(window.location.origin);
 const usernameStore = writable('');
 const passwordStore = writable('');
 
+export const errorStore = writable(new errorType());
+
 hostStore.subscribe((value) => {
 	host = value;
 });

package/src/lib/stores/pageStores.ts

@@ -117,7 +117,7 @@ function createBreadcrumbStore() {
 				value = value === undefined ? new BreadcrumbModel() : value;
 
 				let v = value.items.find((i) => i.link === item.link);
-				console.log(value.items, v);
+				//console.log(value.items, v);
 
 				if (v) {
 					const i = value.items.indexOf(v);