@bexis2/bexis2-core-ui 0.4.10 → 0.4.11

package/README.md

@@ -1,4 +1,8 @@
 # bexis-core-ui
+## 0.4.11
+- Menu
+  - fix log off
+
 ## 0.4.10
 - Table:
   - Fixes issue with sticky Tables not rendering the filters correctly.

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

@@ -2,6 +2,7 @@
 import { getMenuItems } from "./MenuDataCaller";
 import { menuStore } from "../../../stores/pageStores";
 import MenuBar from "./MenuBar.svelte";
+import MenuAccountBar from "./MenuAccountBar.svelte";
 import SettingsBar from "./SettingsBar.svelte";
 import Fa from "svelte-fa";
 import { faBars } from "@fortawesome/free-solid-svg-icons";
@@ -45,7 +46,7 @@ let hamburger = true;
 						<!-- </div> -->
 						<!-- <div class="sm:flex items-center sm:gap-5 px-1 text-lg justify-end gap-2"> -->
 						<div class="grid w-full sm:flex gap-2 justify-auto sm:justify-end">
-							<MenuBar menuBar={$menuStore.AccountBar} />
+							<MenuAccountBar menuBar={$menuStore.AccountBar} />
 							<MenuBar menuBar={$menuStore.LaunchBar} />
 							<SettingsBar menuBar={$menuStore.Settings} />
 							<!-- </div> -->

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

@@ -0,0 +1,19 @@
+<script>import { computePosition, autoUpdate, offset, shift, flip, arrow } from "@floating-ui/dom";
+import { storePopup } from "@skeletonlabs/skeleton";
+storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
+import Item from "./MenuItem.svelte";
+export let menuBar;
+let comboboxValue;
+</script>
+
+{#if menuBar}
+	<div class="h-full place-self-center sm:flex gap-2 w-full sm:w-auto">
+
+		{#each menuBar as menubarItem}
+
+				<Item {menubarItem} {comboboxValue} />
+
+		{/each}
+
+	</div>
+{/if}

package/dist/components/page/menu/MenuAccountBar.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { menuItemType } from '../../../models/Page';
+declare const __propDef: {
+    props: {
+        menuBar: menuItemType[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MenuAccountBarProps = typeof __propDef.props;
+export type MenuAccountBarEvents = typeof __propDef.events;
+export type MenuAccountBarSlots = typeof __propDef.slots;
+export default class MenuAccountBar extends SvelteComponent<MenuAccountBarProps, MenuAccountBarEvents, MenuAccountBarSlots> {
+}
+export {};

package/dist/components/page/menu/MenuBar.svelte.d.ts

@@ -1,8 +1,8 @@
 import { SvelteComponent } from "svelte";
-import type { MenuItem } from './menu';
+import type { menuItemType } from '../../../models/Page';
 declare const __propDef: {
     props: {
-        menuBar: MenuItem[];
+        menuBar: menuItemType[];
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -29,7 +29,8 @@ let popupCombobox = {
 			>
 			<svelte:fragment slot="content"
 				><MenuSublist {id} items={menubarItem.Items} /></svelte:fragment
-			></AccordionItem
+			>
+			</AccordionItem
 		>
 	</div>
 	<div class="hidden sm:block place-self-center" use:popup={popupCombobox}>

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

@@ -15,19 +15,51 @@ function isNewModule(module) {
     return true;
   }
 }
+function clickFn(item) {
+  if (item.Title == "Logoff") {
+    logOffFn();
+    return;
+  } else {
+    goTo(item.Url);
+  }
+}
+async function logOffFn() {
+  console.log("logoff");
+  let bodyContent = "__RequestVerificationToken=" + window.antiForgeryToken;
+  try {
+    const response = await fetch("/Account/logoff", {
+      method: "POST",
+      credentials: "include",
+      // Include cookies for authentication
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded"
+      },
+      body: bodyContent
+    });
+    if (response.ok) {
+      window.location.href = "/Account/Login";
+    } else {
+      console.error("Logout failed");
+    }
+  } catch (error) {
+    console.error("Error during logout:", error);
+  }
+}
 </script>
 
 <ListBox class="sm:bg-white sm:border overflow-y-auto max-h-[500px]">
 	{#each items as item}
 		{#if isNewModule(item.Module)}<hr class="text-surface-800" />{/if}
+
 		<ListBoxItem
 			class="text-md sm:text-sm text-surface-800 py-1 hover:text-secondary-500 bg-transparent hover:bg-surface-200"
 			bind:group={item.Title}
 			name="medium"
 			value={item.Title}
-			on:click={() => goTo(item.Url)}
+			on:click={() => clickFn(item)}
 		>
 			{item.Title}
 		</ListBoxItem>
+
 	{/each}
 </ListBox>

package/package.json

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

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

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { getMenuItems } from './MenuDataCaller';
-	import { menuStore } from '$store/pageStores';
+	import { menuStore } from "../../../stores/pageStores";
 
 	import MenuBar from './MenuBar.svelte';
+	import MenuAccountBar from './MenuAccountBar.svelte';
 	import SettingsBar from './SettingsBar.svelte';
 	import Fa from 'svelte-fa';
 	import { faBars } from '@fortawesome/free-solid-svg-icons';
@@ -49,7 +50,7 @@
 						<!-- </div> -->
 						<!-- <div class="sm:flex items-center sm:gap-5 px-1 text-lg justify-end gap-2"> -->
 						<div class="grid w-full sm:flex gap-2 justify-auto sm:justify-end">
-							<MenuBar menuBar={$menuStore.AccountBar} />
+							<MenuAccountBar menuBar={$menuStore.AccountBar} />
 							<MenuBar menuBar={$menuStore.LaunchBar} />
 							<SettingsBar menuBar={$menuStore.Settings} />
 							<!-- </div> -->

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

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
+	import { storePopup } from '@skeletonlabs/skeleton';
+	storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
+
+	import type { menuItemType } from '../../../models/Page';
+	import Item from './MenuItem.svelte';
+
+	export let menuBar: menuItemType[];
+
+	let comboboxValue: string;
+	
+</script>
+
+{#if menuBar}
+	<div class="h-full place-self-center sm:flex gap-2 w-full sm:w-auto">
+
+		{#each menuBar as menubarItem}
+
+				<Item {menubarItem} {comboboxValue} />
+
+		{/each}
+
+	</div>
+{/if}

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

@@ -3,10 +3,10 @@
 	import { storePopup } from '@skeletonlabs/skeleton';
 	storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
 
-	import type { MenuItem } from './menu';
+	import type { menuItemType } from '../../../models/Page';
 	import Item from './MenuItem.svelte';
 
-	export let menuBar: MenuItem[];
+	export let menuBar: menuItemType[];
 
 	let comboboxValue: string;
 </script>

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

@@ -6,9 +6,9 @@
 
 	//types
 	import type { PopupSettings } from '@skeletonlabs/skeleton';
-	import type { menuItemType } from '$models/Page';
+	import type { menuItemType } from '../../../models/Page';
 
-	import { goTo } from '$services/BaseCaller';
+	import { goTo } from '../../../services/BaseCaller';
 
 	export let menubarItem: menuItemType;
 	export let comboboxValue;
@@ -40,7 +40,8 @@
 			>
 			<svelte:fragment slot="content"
 				><MenuSublist {id} items={menubarItem.Items} /></svelte:fragment
-			></AccordionItem
+			>
+			</AccordionItem
 		>
 	</div>
 	<div class="hidden sm:block place-self-center" use:popup={popupCombobox}>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { ListBox, ListBoxItem } from '@skeletonlabs/skeleton';
-	import type { menuItemType } from '$models/Page';
-	import { goTo } from '$services/BaseCaller';
+	import type { menuItemType } from '../../../models/Page';
+	import { goTo } from '../../../services/BaseCaller';
 
 	export let items: menuItemType[];
 
@@ -22,19 +22,64 @@
 			return true;
 		}
 	}
+
+	function clickFn(item)
+	{
+		if(item.Title =="Logoff")
+		{
+					logOffFn();
+			return;
+		}
+		else{
+				goTo(item.Url)
+		}
+	}
+
+	
+	async function logOffFn() {
+
+		 console.log('logoff');
+				// Prepare the body content for the POST request
+			
+
+			let bodyContent = '__RequestVerificationToken='+ window.antiForgeryToken;
+
+				try {
+									const response = await fetch('/Account/logoff', {
+													method: 'POST',
+													credentials: 'include', // Include cookies for authentication
+													headers: {
+																	'Content-Type': 'application/x-www-form-urlencoded'
+													},
+													body:bodyContent
+									});
+									if (response.ok) {
+													// Redirect to login page after logout
+													window.location.href = '/Account/Login'; 
+									} else {
+													console.error('Logout failed');
+									}
+					} catch (error) {
+									console.error('Error during logout:', error);
+					}
+			}
+
+
 </script>
 
 <ListBox class="sm:bg-white sm:border overflow-y-auto max-h-[500px]">
 	{#each items as item}
 		{#if isNewModule(item.Module)}<hr class="text-surface-800" />{/if}
+
 		<ListBoxItem
 			class="text-md sm:text-sm text-surface-800 py-1 hover:text-secondary-500 bg-transparent hover:bg-surface-200"
 			bind:group={item.Title}
 			name="medium"
 			value={item.Title}
-			on:click={() => goTo(item.Url)}
+			on:click={() => clickFn(item)}
 		>
 			{item.Title}
 		</ListBoxItem>
+
 	{/each}
 </ListBox>