@buerokratt-ria/common-gui-components 0.0.58 → 0.0.60

package/templates/history-page/src/types/index.ts

@@ -0,0 +1,17 @@
+const MEASUREMENT_TYPES = {
+    THEME: 'THEME',
+    QUALITY: 'QUALITY',
+    FOLLOW_UP_ACTION: 'FOLLOW_UP_ACTION',
+} as const;
+
+export type MeasurementType =
+    (typeof MEASUREMENT_TYPES)[keyof typeof MEASUREMENT_TYPES];
+
+export type CharMeasurementType = {
+    readonly chatUuid: string;
+    readonly authorId: number;
+    readonly authorDisplayName: string;
+    readonly type: MeasurementType;
+    readonly value: string;
+    readonly createdAt: string;
+}

package/translations/en/common.json

@@ -163,6 +163,7 @@
       "endTime": "End time",
       "csaName": "Customer support name",
       "contact": "Contact",
+      "www": "Webpage",
       "authenticatedPerson": "Authenticated person",
       "comment": "Comment",
       "label": "Label",
@@ -177,7 +178,17 @@
       "statusAddedDate": "Status added date",
       "chosenCsa": "Chosen csa(s)",
       "chosenColumn": "Chosen column(s)",
-      "chooseAll": "Choose all"
+      "chooseAll": "Choose all",
+      "conversationResponseQuality": "Response quality",
+      "followUpAction": "Follow-up action",
+      "chooseFollowUpAction": "- Select follow-up action -",
+      "chooseConversationResponseQuality": "- Select response quality -",
+      "chooseConversationTheme": "- Select chat theme -",
+      "conversationTheme": "Chat theme",
+      "theme": "Theme",
+      "responseQuality": "Bürokratt Response Quality",
+      "followUpStatus": "Follow-up Status",
+      "analysis": "Analysis"
     },
     "plainEvents": {
       "answered": "Answered",
@@ -282,6 +293,12 @@
         "requestedAt": "Requested At",
         "approve": "Approve"
       }
+    },
+    "quality": {
+      "theme": "Chat theme",
+      "responseQuality": "Chat response quality",
+      "followUpAction": "Follow-up action",
+      "selectionEmptied": "Selection emptied"
     }
   },
   "deleteConversation": {
@@ -466,7 +483,10 @@
       "copied": "Copied",
       "userDeleted": "User deleted",
       "newUserAdded": "New user added",
-      "userUpdated": "User updated"
+      "userUpdated": "User updated",
+      "conversationThemeSaved": "Theme selection has been saved.",
+      "conversationQualitySaved": "Response quality selection has been saved.",
+      "conversationFollowUpActionSaved": "Follow-up action selection has been saved."
     }
   },
   "notification": {

package/translations/et/common.json

@@ -163,6 +163,7 @@
       "endTime": "Lõppaeg",
       "csaName": "Nõustaja nimi",
       "contact": "Kontaktandmed",
+      "www": "Veebileht",
       "authenticatedPerson": "Autenditud isik",
       "comment": "Kommentaar",
       "label": "Märksõna",
@@ -177,7 +178,17 @@
       "statusAddedDate": "Staatuse lisamise kuupäev",
       "chosenCsa": "Valitud nõustaja(d)",
       "chosenColumn": "Valitud tulba(d)",
-      "chooseAll": "Vali kõik"
+      "chooseAll": "Vali kõik",
+      "conversationResponseQuality": "Vastuse kvaliteet",
+      "followUpAction": "Järeltegevus",
+      "chooseFollowUpAction": "- Vali järeltegevus -",
+      "chooseConversationResponseQuality": "- Vali vastuse kvaliteet -",
+      "chooseConversationTheme": "- Vali vestluse valdkond -",
+      "conversationTheme": "Vestluse valdkond",
+      "theme": "Valdkond",
+      "responseQuality": "Bürokrati vastuse kvaliteet",
+      "followUpStatus": "Järeltegevuste staatus",
+      "analysis": "Analüüs"
     },
     "plainEvents": {
       "answered": "Vastatud",
@@ -282,6 +293,12 @@
         "requestedAt": "Taotletud Kell",
         "approve": "Kinnita"
       }
+    },
+    "quality": {
+      "theme": "Vestluse valdkond",
+      "responseQuality": "Vastuse kvaliteet",
+      "followUpAction": "Järeltegevus",
+      "selectionEmptied": "Valik tühjendatud"
     }
   },
   "deleteConversation": {
@@ -466,7 +483,10 @@
       "copied": "Kopeeritud",
       "userDeleted": "Kasutaja kustutatud",
       "newUserAdded": "Uus kasutaja lisatud",
-      "userUpdated": "Kasutaja uuendatud"
+      "userUpdated": "Kasutaja uuendatud",
+      "conversationThemeSaved": "Valdkonna valik on salvestatud.",
+      "conversationQualitySaved": "Vastuse kvaliteedi valik on salvestatud.",
+      "conversationFollowUpActionSaved": "Järeltegevuse valik on salvestatud."
     }
   },
   "notification": {

package/types/chat.ts

@@ -91,6 +91,9 @@ export interface Chat {
     isPreserve?: boolean;
     isFiveRatingScale?: string;
     allCsa?: string[];
+    theme?: string[];
+    responseQuality?: string[];
+    followUpStatus?: string[];
     totalPages?: number;
     totalCount?: number;
 }

package/ui-components/DataTable/index.tsx

@@ -210,7 +210,6 @@ const DataTable: FC<DataTableProps> = ({
                                                 header.column.columnDef.meta?.sticky === 'right'
                                                     ? `${header.column.getAfter('right') * 0.675}px`
                                                     : undefined,
-                                            backgroundColor: 'white',
                                             zIndex: header.column.columnDef.meta?.sticky ? 1 : 0,
                                         }}
                                     >

package/ui-components/FormElements/FormCombobox/FormCombobox.scss

@@ -0,0 +1,263 @@
+@import 'src/styles/tools/spacing';
+@import 'src/styles/tools/color';
+@import 'src/styles/settings/variables/other';
+@import 'src/styles/settings/variables/typography';
+
+.select {
+  $self: &;
+  display: flex;
+  align-items: center;
+  gap: get-spacing(paldiski);
+  width: 100%;
+
+  &__label {
+    flex: 0 0 185px;
+    font-size: $veera-font-size-100;
+    line-height: 24px;
+  }
+
+  &__wrapper {
+    width: 100%;
+    position: relative;
+  }
+
+  &__trigger {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    appearance: none;
+    background-color: get-color(white);
+    border: 1px solid get-color(black-coral-6);
+    border-radius: $veera-radius-s;
+    color: get-color(black);
+    font-size: $veera-font-size-100;
+    height: 40px;
+    line-height: 24px;
+    padding: get-spacing(paldiski);
+    text-align: left;
+
+    .icon {
+      font-size: $veera-font-size-250;
+    }
+
+    &[aria-expanded=true] {
+      border-color: get-color(sapphire-blue-10);
+      border-radius: 3px;
+
+      + #{$self}__menu {
+        display: block;
+      }
+
+      +#{$self}__menu_up {
+        display: block;
+      }
+
+      .icon {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  &--plain {
+    width: auto;
+
+    #{$self}__wrapper {
+      width: auto;
+    }
+
+    #{$self}__trigger {
+      width: auto;
+      height: 24px;
+      padding: 0;
+      gap: get-spacing(paldiski);
+      justify-content: flex-start;
+      background-color: transparent;
+      border-color: transparent;
+      color: get-color(black-coral-10);
+
+      &[aria-expanded=true] {
+        border-color: transparent;
+        border-radius: 0;
+      }
+
+      .icon {
+        align-items: center;
+        background-color: #F0F0F2;
+        border-radius: 50%;
+        display: inline-flex;
+        flex: 0 0 24px;
+        height: 24px;
+        justify-content: center;
+        width: 24px;
+      }
+
+      &:hover,
+      &:focus,
+      &[aria-expanded=true] {
+        .icon {
+          background-color: #E9F5FF;
+        }
+      }
+    }
+
+    #{$self}__trigger-text {
+      color: get-color(black-coral-18);
+      display: inline;
+      overflow: visible;
+    }
+
+    #{$self}__menu--combobox {
+      background-color: get-color(white);
+      top: 100%;
+      bottom: auto;
+      min-width: 296px;
+      margin-top: 3px;
+      margin-bottom: 0;
+      z-index: 10000;
+    }
+
+    #{$self}__trigger[aria-expanded=true] {
+      .icon {
+        transform: none;
+      }
+    }
+
+    #{$self}__search,
+    #{$self}__options {
+      background-color: get-color(white);
+    }
+  }
+
+  &__trigger-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__menu {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background-color: get-color(white);
+    border-radius: 4px;
+    border: 1px solid get-color(black-coral-2);
+    border-top: 1;
+    z-index: 9998;
+    max-height: 320px;
+    overflow: auto;
+    margin-top: 3px;
+  }
+
+  &__menu--combobox {
+    top: auto;
+    bottom: 100%;
+    overflow: hidden;
+    margin-top: 0;
+    margin-bottom: 3px;
+  }
+
+  &__menu--portal {
+    display: block;
+    position: fixed;
+    top: 100%;
+    bottom: auto;
+    right: auto;
+    margin-top: 3px;
+    margin-bottom: 0;
+    z-index: 10000;
+  }
+
+  &__options {
+    max-height: 224px;
+    overflow: auto;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__search {
+    padding: get-spacing(paldiski);
+    position: relative;
+  }
+
+  &__search-icon {
+    left: 16px;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  &__search-input {
+    width: 100%;
+    appearance: none;
+    background-color: get-color(white);
+    border: 1px solid get-color(black-coral-6);
+    border-radius: $veera-radius-s;
+    color: get-color(black);
+    font-size: $veera-font-size-100;
+    height: 40px;
+    line-height: 24px;
+    padding: get-spacing(paldiski);
+    padding-left: 36px;
+
+    &:focus {
+      border-color: get-color(sapphire-blue-10);
+      outline: none;
+    }
+  }
+
+  &__option {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 15px;
+
+    span {
+      display: block;
+    }
+
+    &[aria-selected=true] {
+      background-color: get-color(sapphire-blue-10);
+      color: get-color(white);
+
+      &:hover,
+      &:focus {
+        background-color: get-color(sapphire-blue-10);
+        color: get-color(white);
+      }
+    }
+
+    &:hover,
+    &:focus {
+      background-color: get-color(black-coral-0);
+      color: get-color(black-coral-20);
+    }
+  }
+
+  &__option--combobox {
+    cursor: pointer;
+
+    &[aria-selected=true] {
+      background-color: get-color(white);
+      color: get-color(black);
+
+      &:hover,
+      &:focus {
+        background-color: get-color(black-coral-0);
+        color: get-color(black-coral-20);
+      }
+    }
+  }
+
+  &__option--combobox input[type='checkbox'] {
+    margin: 0;
+  }
+
+  .search__icon-size {
+        width: get-spacing(kuressaare);
+    height: get-spacing(kuressaare);
+  }
+}