@webitel/ui-sdk 26.8.138 → 26.8.140

package/src/components/wt-navigation-rail/wt-navigation-rail.vue

@@ -0,0 +1,108 @@
+<template>
+  <nav
+    v-if="hasItems"
+    class="wt-navigation-rail"
+    aria-label="Navigation rail"
+  >
+    <template v-for="section of sections" :key="section.name">
+      <div
+        v-if="section.items.length"
+        :class="['wt-navigation-rail__group', `wt-navigation-rail__group--${section.name}`]"
+      >
+        <ul class="wt-navigation-rail__list">
+          <li v-for="item of section.items" :key="item.id">
+            <navigation-rail-button
+              :item="item"
+              :active="item.id === activeItemId"
+              @select="emit('select', $event)"
+            />
+          </li>
+        </ul>
+      </div>
+    </template>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import NavigationRailButton from './_internals/navigation-rail-button.vue';
+import type { NavigationRailItem } from './types/WtNavigationRail';
+
+/**
+ * Vertical app navigation. Holds no routing logic: emits `select`,
+ * host application decides what to do (navigate, open panel, etc.).
+ * Lists are data-driven by props. Renders nothing while both lists are empty.
+ */
+const props = withDefaults(
+	defineProps<{
+		/** Buttons pinned to the top */
+		topItems?: NavigationRailItem[];
+		/** Buttons pinned to the bottom */
+		bottomItems?: NavigationRailItem[];
+		/** Id of the active item */
+		activeItemId?: string;
+	}>(),
+	{
+		topItems: () => [],
+		bottomItems: () => [],
+		activeItemId: '',
+	},
+);
+
+const hasItems = computed(
+	() => !!props.topItems.length || !!props.bottomItems.length,
+);
+
+const sections = computed(
+	() =>
+		[
+			{
+				name: 'top',
+				items: props.topItems,
+			},
+			{
+				name: 'bottom',
+				items: props.bottomItems,
+			},
+		] as const,
+);
+
+const emit = defineEmits<{
+	/** Fires on click of enabled item */
+	select: [
+		item: NavigationRailItem,
+	];
+}>();
+</script>
+
+<style scoped>
+.wt-navigation-rail {
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 auto;
+  gap: var(--wt-navigation-rail-gap);
+  box-sizing: border-box;
+  background: var(--wt-navigation-rail-background);
+  padding: var(--wt-navigation-rail-padding-y) var(--wt-navigation-rail-padding-x);
+  width: var(--wt-navigation-rail-width);
+  min-height: 0;
+}
+
+.wt-navigation-rail__group--bottom {
+  margin-top: auto;
+}
+
+.wt-navigation-rail__group,
+.wt-navigation-rail__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wt-navigation-rail-gap);
+}
+
+.wt-navigation-rail__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+</style>

package/src/components/wt-page/__tests__/WtPage.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 
 import WtPage from '../wt-page.vue';
 
@@ -32,4 +32,63 @@ describe('WtPage', () => {
 		const wrapper = shallowMount(WtPage);
 		expect(wrapper.find('.wt-page__header').exists()).toBe(false);
 	});
+
+	describe('navigation rail', () => {
+		const navigationRail = {
+			topItems: [
+				{
+					id: 'home',
+					icon: 'home',
+					label: 'Home',
+				},
+			],
+			activeItemId: 'home',
+		};
+		const mountPage = (props) =>
+			mount(WtPage, {
+				props,
+				global: {
+					stubs: {
+						WtButton: false,
+					},
+				},
+			});
+
+		it('does not render rail without navigationRail prop', () => {
+			const wrapper = mountPage({});
+			expect(wrapper.find('.wt-navigation-rail').exists()).toBe(false);
+		});
+
+		it('does not render rail while both lists are empty', () => {
+			const wrapper = mountPage({
+				navigationRail: {
+					topItems: [],
+					bottomItems: [],
+				},
+			});
+			expect(wrapper.find('.wt-navigation-rail').exists()).toBe(false);
+		});
+
+		it('renders rail outside of the body when a list is not empty', () => {
+			const wrapper = mountPage({
+				navigationRail,
+			});
+			expect(
+				wrapper.find('.wt-page__main > .wt-navigation-rail').exists(),
+			).toBe(true);
+			expect(wrapper.find('.wt-page__body .wt-navigation-rail').exists()).toBe(
+				false,
+			);
+		});
+
+		it('emits navigation-select on rail item click', async () => {
+			const wrapper = mountPage({
+				navigationRail,
+			});
+			await wrapper.find('button').trigger('click');
+			expect(wrapper.emitted('navigation-select')[0]).toEqual([
+				navigationRail.topItems[0],
+			]);
+		});
+	});
 });

package/src/components/wt-page/wt-page.vue

@@ -3,18 +3,48 @@
     <div v-if="$slots.header" class="wt-page__header">
       <slot name="header" />
     </div>
-    <div class="wt-page__body">
-      <!-- @slot Layouts of the page -->
-      <slot />
+    <div class="wt-page__main">
+      <wt-navigation-rail
+        v-if="navigationRail"
+        :top-items="navigationRail.topItems"
+        :bottom-items="navigationRail.bottomItems"
+        :active-item-id="navigationRail.activeItemId"
+        @select="emit('navigation-select', $event)"
+      />
+      <div class="wt-page__body">
+        <!-- @slot Layouts of the page -->
+        <slot />
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import type { NavigationRailItem } from '../wt-navigation-rail/types/WtNavigationRail';
+import WtNavigationRail from '../wt-navigation-rail/wt-navigation-rail.vue';
+
 /**
  * Top structural level of the interface: header + body, where the body
  * distributes its width between one or more `wt-layout`s.
+ * Optional navigation rail is shown at the left of the body and
+ * is hidden while both of its lists are empty.
  */
+defineProps<{
+	/** Navigation rail config, rail is not rendered when omitted */
+	navigationRail?: {
+		topItems?: NavigationRailItem[];
+		bottomItems?: NavigationRailItem[];
+		activeItemId?: string;
+	};
+}>();
+
+const emit = defineEmits<{
+	/** Fires on click of enabled navigation rail item */
+	'navigation-select': [
+		item: NavigationRailItem,
+	];
+}>();
+
 defineSlots<{
 	header?: () => unknown;
 	default?: () => unknown;
@@ -38,6 +68,13 @@ defineSlots<{
   flex: 0 0 auto;
 }
 
+.wt-page__main {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}
+
 .wt-page__body {
   display: flex;
   position: relative;

package/src/css/components-variables.css

@@ -31,6 +31,7 @@
 @import "../components/wt-loader/_variables.css";
 @import "../components/wt-logo/_variables.css";
 @import "../components/wt-navigation-bar/_variables.css";
+@import "../components/wt-navigation-rail/_variables.css";
 @import "../components/wt-notifications-bar/_variables.css";
 @import "../components/wt-page/_variables.css";
 @import "../components/wt-page-wrapper/_variables.css";

package/src/enums/WebitelApplications/AdminSections.ts

@@ -39,7 +39,6 @@ export const AdminSections = {
 	Teams: 'teams',
 	Triggers: 'triggers',
 	Users: 'users',
-	WorkingConditions: 'working-conditions',
 	QuickReplies: 'quick-replies',
 } as const;
 

package/src/modules/Userinfo/classes/ApplicationsAccess.ts

@@ -139,10 +139,6 @@ const applicationsAccess = (value = true): ApplicationsAccessSchema => ({
 			_enabled: value,
 			_locale: `WtApplication.${WtApplication.Admin}.sections.${AdminSections.Media}`,
 		},
-		[AdminSections.WorkingConditions]: {
-			_enabled: value,
-			_locale: `WtApplication.${WtApplication.Admin}.sections.${AdminSections.WorkingConditions}`,
-		},
 		[AdminSections.QuickReplies]: {
 			_enabled: value,
 			_locale: `WtApplication.${WtApplication.Admin}.sections.${AdminSections.QuickReplies}`,
@@ -291,13 +287,17 @@ const applicationsAccess = (value = true): ApplicationsAccessSchema => ({
 			_enabled: value,
 			_locale: `WtApplication.${WtApplication.Wfm}.sections.${WfmSections.ForecastCalculation}`,
 		},
+		[WfmSections.ShiftTemplates]: {
+			_enabled: value,
+			_locale: `WtApplication.${WtApplication.Wfm}.sections.${WfmSections.ShiftTemplates}`,
+		},
 		[WfmSections.PauseTemplates]: {
 			_enabled: value,
 			_locale: `WtApplication.${WtApplication.Wfm}.sections.${WfmSections.PauseTemplates}`,
 		},
-		[WfmSections.ShiftTemplates]: {
+		[WfmSections.WorkingConditions]: {
 			_enabled: value,
-			_locale: `WtApplication.${WtApplication.Wfm}.sections.${WfmSections.ShiftTemplates}`,
+			_locale: `WtApplication.${WtApplication.Wfm}.sections.${WfmSections.WorkingConditions}`,
 		},
 	},
 });

package/src/modules/Userinfo/classes/__tests__/ApplicationsAccess.spec.ts

@@ -7,8 +7,9 @@ const wfmSections = [
 	WfmSections.Agents,
 	WfmSections.Schedules,
 	WfmSections.ForecastCalculation,
-	WfmSections.PauseTemplates,
 	WfmSections.ShiftTemplates,
+	WfmSections.PauseTemplates,
+	WfmSections.WorkingConditions,
 ];
 
 describe('ApplicationsAccess', () => {
@@ -27,14 +28,6 @@ describe('ApplicationsAccess', () => {
 		});
 	});
 
-	it('does not include lookups that are not moved to WFM yet', () => {
-		const { access } = new ApplicationsAccess();
-
-		expect(
-			access[WtApplication.Wfm][WfmSections.WorkingConditions],
-		).toBeUndefined();
-	});
-
 	it('restores WFM as disabled when it is missing from saved access', () => {
 		const { access } = new ApplicationsAccess({
 			access: {

package/src/modules/Userinfo/mappings/__tests__/mappings.spec.ts

@@ -1,11 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import {
-	AdminSections,
-	WfmSections,
-	WtApplication,
-	WtObject,
-} from '../../../../enums';
+import { WfmSections, WtApplication, WtObject } from '../../../../enums';
 import { castWtObjectToUiSection } from '../../scripts/utils';
 
 describe('mapWtObjectToUiSection', () => {
@@ -15,12 +10,6 @@ describe('mapWtObjectToUiSection', () => {
 		);
 	});
 
-	it('keeps Admin mapping for lookups that are not moved to WFM yet', () => {
-		expect(
-			castWtObjectToUiSection(WtApplication.Admin, WtObject.WorkingCondition),
-		).toBe(AdminSections.WorkingConditions);
-	});
-
 	it('maps shift templates to WFM only', () => {
 		expect(
 			castWtObjectToUiSection(WtApplication.Wfm, WtObject.ShiftTemplate),
@@ -38,4 +27,13 @@ describe('mapWtObjectToUiSection', () => {
 			castWtObjectToUiSection(WtApplication.Admin, WtObject.PauseTemplate),
 		).toBeUndefined();
 	});
+
+	it('maps working conditions to WFM only', () => {
+		expect(
+			castWtObjectToUiSection(WtApplication.Wfm, WtObject.WorkingCondition),
+		).toBe(WfmSections.WorkingConditions);
+		expect(
+			castWtObjectToUiSection(WtApplication.Admin, WtObject.WorkingCondition),
+		).toBeUndefined();
+	});
 });

package/src/modules/Userinfo/mappings/mappings.ts

@@ -241,7 +241,6 @@ export const mapWtObjectToUiSection: Partial<
 		[WtObject.ChangeLog]: AdminSections.Changelogs,
 		[WtObject.Configuration]: AdminSections.Configuration,
 		[WtObject.GlobalVariable]: AdminSections.GlobalVariables,
-		[WtObject.WorkingCondition]: AdminSections.WorkingConditions,
 		[WtObject.Member]: AdminSections.Members,
 		[WtObject.QuickReply]: AdminSections.QuickReplies,
 		[WtObject.ActivityType]: AdminSections.ActivityTypes,
@@ -277,8 +276,9 @@ export const mapWtObjectToUiSection: Partial<
 	// Wfm sections
 	[WtApplication.Wfm]: {
 		[WtObject.Agent]: WfmSections.Agents,
-		[WtObject.PauseTemplate]: WfmSections.PauseTemplates,
 		[WtObject.ShiftTemplate]: WfmSections.ShiftTemplates,
+		[WtObject.PauseTemplate]: WfmSections.PauseTemplates,
+		[WtObject.WorkingCondition]: WfmSections.WorkingConditions,
 	},
 };