From 27c7a20186a7a41a1778f38e13933ca4012349c6 Mon Sep 17 00:00:00 2001
From: dlohvinov <nsblnr@gmail.com>
Date: Wed, 14 Feb 2024 20:55:18 +0200
Subject: [PATCH] 24.02.48: wt-expansion-panel events, collapsed prop watcher,
 upd docs [WTEL-3802, WTEL-3803, WTEL-3804]

---
 .../typical-workspace-queue-cases/Readme.md   | 30 ++++++++++++-
 .../components/wt-expansion-panel/Readme.md   | 26 ++++++++---
 .../wt-expansion-panel-docs.vue               | 43 ------------------
 package.json                                  |  2 +-
 .../__tests__/WtExpansionPanel.spec.js        | 12 +++++
 .../wt-expansion-panel/wt-expansion-panel.vue | 44 ++++++++++++++++---
 6 files changed, 100 insertions(+), 57 deletions(-)
 delete mode 100644 docs/pages/webitel-ui/components/wt-expansion-panel/wt-expansion-panel-docs.vue

diff --git a/docs/pages/docs/how-to/typical-workspace-queue-cases/Readme.md b/docs/pages/docs/how-to/typical-workspace-queue-cases/Readme.md
index a841c2acb..2352c5a08 100644
--- a/docs/pages/docs/how-to/typical-workspace-queue-cases/Readme.md
+++ b/docs/pages/docs/how-to/typical-workspace-queue-cases/Readme.md
@@ -25,7 +25,7 @@ _Виконані пункти можна пропустити._
 
 5. Створити вхідну чергу для цього оператора. В неї додати операторський скілл.
 
-[Приклад черги](https://dev.webitel.com/contact-center/queues/505)
+[Приклад черги](https://dev.webitel.com/contact-center/queues/730)
 
 ### Як налаштувати акаунт мембера?
 
@@ -50,3 +50,31 @@ _Виконані пункти можна пропустити._
 2. У акаунті оператора ввійти в режим Contact Center.
 3. У аккаунті мембера подзвонити на номер, вказаний в діалплані.
 
+## Як створити задачу (job) собі у чергу?
+
+_Виконані пункти можна пропустити._
+
+### Як налаштувати акаунт оператора?
+
+1. Створити користувача. (див. вище)
+2. Назначити користувачу девайс, а також дефолтний девайс. (див. вище)
+3. Створити свій операторський скілл. (див. вище)
+4. Створити агента з цього користувача, та назначити йому цей скілл. (див. вище)
+
+
+5. Створити вхідну чергу задач для цього оператора. В неї додати операторський скілл.
+
+[Приклад черги](https://dev.webitel.com/contact-center/queues/505)
+
+### Як створити задачу?
+
+1. Відкрити розділ мемберів для створеної вище черги.
+2. Створити мембера. Будь-якого.
+
+### Як отримати задачу y Workspace?
+1. Зайти у Contact-center з акаунта агента.
+2. Задача має прийти автоматично.
+
+
+
+
diff --git a/docs/pages/webitel-ui/components/wt-expansion-panel/Readme.md b/docs/pages/webitel-ui/components/wt-expansion-panel/Readme.md
index 37b956cf9..cc7765eaf 100644
--- a/docs/pages/webitel-ui/components/wt-expansion-panel/Readme.md
+++ b/docs/pages/webitel-ui/components/wt-expansion-panel/Readme.md
@@ -1,16 +1,32 @@
 <script setup>
-import Docs from './wt-expansion-panel-docs.vue';
-import ExampleExpansionPanelDifferentSizes from './examples/example-expansion-panel-different-sizes.vue';
 </script>
 
 # WtExpansionPanel
 
 ## Props
-::: raw
-<Docs/>
-:::
+
+| Name        | Type    | Default | Description                                                                                      |
+|-------------|---------|---------|--------------------------------------------------------------------------------------------------|
+| `size`      | String  | `md`    | Size of the expansion panel. Can be `sm`, or `md`.                                               |
+| `collapsed` | Boolean | `false` | Whether the expansion panel is initially collapsed. Also, can force expansion state, if changed. |
+
+## Events
+
+| Name     | Params | Description                                 |
+|----------|--------|---------------------------------------------|
+| `opened` | -      | Emitted when the expansion panel is opened. |
+| `closed` | -      | Emitted when the expansion panel is closed. |
+
+## Slots
+
+| Name      | Scope                                 | Description                     |
+|-----------|---------------------------------------|---------------------------------|
+| `default` | -                                     | Content of the expansion panel. |
+| `title`   | -                                     | Title of the expansion panel.   |
+| `actions` | `{ open: function, opened: boolean }` | Actions of the expansion panel. |
 
 ## Example Expansion Panel Different Sizes
+
 ::: raw
 <ExampleExpansionPanelDifferentSizes/>
 :::
diff --git a/docs/pages/webitel-ui/components/wt-expansion-panel/wt-expansion-panel-docs.vue b/docs/pages/webitel-ui/components/wt-expansion-panel/wt-expansion-panel-docs.vue
deleted file mode 100644
index 3683f2911..000000000
--- a/docs/pages/webitel-ui/components/wt-expansion-panel/wt-expansion-panel-docs.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-  <component-props
-    :properties="properties"
-  />
-  <component-slots
-    :slots="slots"
-  />
-</template>
-
-<script>
-import Prism from 'prismjs';
-
-export default {
-  name: 'WtExpansionPanelDocs',
-  data: () => ({
-    properties: [
-      {
-        value: 'size',
-        code: '<wt-expansion-panel size="sm"></wt-expansion-panel>',
-        type: 'String',
-        default: 'md',
-        options: ['sm', 'md'],
-      },
-    ],
-    slots: [
-      {
-        name: 'default',
-        description: 'Displaying collapsible content',
-      },
-      {
-        name: 'title',
-        description: 'Display title for collapse panel',
-      },
-    ],
-  }),
-  mounted() {
-    Prism.highlightAll();
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/package.json b/package.json
index d3a7aa0b6..ecb34d37c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.2.46",
+  "version": "24.2.48",
   "private": false,
   "scripts": {
     "dev": "vite",
diff --git a/src/components/wt-expansion-panel/__tests__/WtExpansionPanel.spec.js b/src/components/wt-expansion-panel/__tests__/WtExpansionPanel.spec.js
index dd91c18e9..34eefeb26 100644
--- a/src/components/wt-expansion-panel/__tests__/WtExpansionPanel.spec.js
+++ b/src/components/wt-expansion-panel/__tests__/WtExpansionPanel.spec.js
@@ -6,4 +6,16 @@ describe('WtExpansionPanel', () => {
     const wrapper = shallowMount(WtExpansionPanel);
     expect(wrapper.isVisible()).toBe(true);
   });
+  it('emits "opened" event when opened', () => {
+    const wrapper = shallowMount(WtExpansionPanel);
+    wrapper.vm.opened = false;
+    wrapper.find('.wt-expansion-panel-header').trigger('click');
+    expect(wrapper.emitted().opened).toBeTruthy();
+  });
+  it('emits "closed" event when closed', () => {
+    const wrapper = shallowMount(WtExpansionPanel);
+    wrapper.vm.opened = true;
+    wrapper.find('.wt-expansion-panel-header').trigger('click');
+    expect(wrapper.emitted().closed).toBeTruthy();
+  });
 });
diff --git a/src/components/wt-expansion-panel/wt-expansion-panel.vue b/src/components/wt-expansion-panel/wt-expansion-panel.vue
index feeb15d9e..4c2fc27d4 100644
--- a/src/components/wt-expansion-panel/wt-expansion-panel.vue
+++ b/src/components/wt-expansion-panel/wt-expansion-panel.vue
@@ -6,8 +6,8 @@
     <div
       class="wt-expansion-panel-header"
       tabindex="0"
-      @click="opened = !opened"
-      @keypress.enter="opened = !opened"
+      @click="toggle"
+      @keypress.enter="toggle"
     >
       <slot name="title" />
       <div class="wt-expansion-panel-actions">
@@ -16,7 +16,8 @@
           v-bind="{ open, opened }"
         />
         <wt-icon
-          :class="{ 'wt-expansion-panel-arrow--opened':opened }"
+          class="wt-expansion-panel-arrow"
+          :class="{ 'wt-expansion-panel-arrow--opened': opened }"
           icon="arrow-right"
         />
       </div>
@@ -34,7 +35,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 
 const props = defineProps({
   size: {
@@ -47,11 +48,35 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['opened', 'closed']);
+
 const opened = ref(!props.collapsed);
 
 function open() {
-  if (!opened.value) opened.value = true;
+  if (!opened.value) {
+    opened.value = true;
+    emit('opened');
+  }
+}
+
+function close() {
+  if (opened.value) {
+    opened.value = false;
+    emit('closed');
+  }
+}
+
+function toggle() {
+  return opened.value ? close() : open();
 }
+
+watch(() => props.collapsed, (newVal) => {
+  if (newVal) {
+    close();
+  } else {
+    open();
+  }
+});
 </script>
 
 <style lang="scss">
@@ -85,8 +110,13 @@ function open() {
     gap: var(--spacing-xs);
   }
 
-  .wt-expansion-panel-arrow--opened {
-    transform: rotate(90deg);
+  .wt-expansion-panel-arrow {
+    transition: var(--transition);
+
+    &--opened {
+      transform: rotate(90deg);
+
+    }
   }
 
   &--sm {