From 67d7b736588cd13b0c40c906fa497b9fc547d905 Mon Sep 17 00:00:00 2001
From: dlohvinov <nsblnr@gmail.com>
Date: Thu, 14 Dec 2023 20:55:29 +0200
Subject: [PATCH] 23.12.114: reordered wt-app-navigator apps [WTEL-4073]

---
 package.json                                  |  2 +-
 .../wt-app-header/wt-app-navigator.vue        | 26 +++++++++++++------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 190efcee..8de111f5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "23.12.113",
+  "version": "23.12.114",
   "private": false,
   "scripts": {
     "dev": "vite",
diff --git a/src/components/wt-app-header/wt-app-navigator.vue b/src/components/wt-app-header/wt-app-navigator.vue
index 140cedea..3a13336b 100644
--- a/src/components/wt-app-header/wt-app-navigator.vue
+++ b/src/components/wt-app-header/wt-app-navigator.vue
@@ -38,8 +38,8 @@
             >
               <img
                 :alt="`${app.name}-pic`"
-                class="wt-app-navigator__card__img"
                 :src="app.img"
+                class="wt-app-navigator__card__img"
               >
               <p
                 class="wt-app-navigator__card__title"
@@ -64,12 +64,12 @@ import AgentDark from './assets/agent-dark.svg';
 import AgentLight from './assets/agent-light.svg';
 import AnalyticsDark from './assets/analytics-dark.svg';
 import AnalyticsLight from './assets/analytics-light.svg';
+import AuditDark from './assets/audit-dark.svg';
+import AuditLight from './assets/audit-light.svg';
 import CrmDark from './assets/crm-dark.svg';
 import CrmLight from './assets/crm-light.svg';
 import HistoryDark from './assets/history-dark.svg';
 import HistoryLight from './assets/history-light.svg';
-import AuditDark from './assets/audit-dark.svg';
-import AuditLight from './assets/audit-light.svg';
 import SupervisorDark from './assets/supervisor-dark.svg';
 import SupervisorLight from './assets/supervisor-light.svg';
 
@@ -120,14 +120,24 @@ const props = defineProps({
 
 const isOpened = ref(false);
 
-const formattedApps = computed(() => props.apps.reduce((apps, app) => ({
+const order = [
+  WebitelApplications.AGENT,
+  WebitelApplications.SUPERVISOR,
+  WebitelApplications.HISTORY,
+  WebitelApplications.ADMIN,
+  WebitelApplications.ANALYTICS,
+  WebitelApplications.AUDIT,
+  WebitelApplications.CRM,
+];
+
+const formattedApps = computed(() => props.apps.reduce((apps, app) => ([
   ...apps,
-  [app.name]: {
+  {
     ...app,
     img: props.darkMode ? pics[app.name].dark : pics[app.name].light,
     currentApp: props.currentApp === app.name,
   },
-}), {}));
+]), []).sort((a, b) => order.indexOf(a.name) - order.indexOf(b.name)));
 
 function close() {
   isOpened.value = false;
@@ -189,14 +199,14 @@ function close() {
 
 // a tag
 .wt-app-navigator__card__link {
-  box-sizing: border-box;
   display: inline-flex;
   flex-direction: column;
   justify-content: space-between;
+  box-sizing: border-box;
   width: 100%;
   height: 100%;
-  cursor: pointer;
   padding: var(--wt-app-navigator-item-padding);
+  cursor: pointer;
 }
 
 // img inside a