@buerokratt-ria/common-gui-components 0.0.57 → 0.0.59

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/FormElements/FormCombobox/FormCombobox.scss

@@ -0,0 +1,252 @@
+@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;
+  }
+
+  &__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);
+  }
+}

package/ui-components/FormElements/FormCombobox/index.tsx

@@ -0,0 +1,334 @@
+import {
+  CSSProperties,
+  FC,
+  FocusEvent as ReactFocusEvent,
+  ReactNode,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { MdArrowDropDown, MdExpandMore, MdSearch } from 'react-icons/md';
+
+import { Icon } from '../..';
+import './FormCombobox.scss';
+
+type FormComboboxOption = {
+  readonly label: string;
+  readonly value: string;
+};
+
+type FormComboboxBaseProps = {
+  readonly label?: ReactNode;
+  readonly name?: string;
+  readonly placeholder?: string;
+  readonly searchPlaceholder?: string;
+  readonly options: FormComboboxOption[];
+  readonly hideLabel?: boolean;
+  readonly disabled?: boolean;
+  readonly style?: CSSProperties;
+  readonly isSearchEnabled?: boolean;
+  readonly hideInputStyle?: boolean;
+};
+
+type FormComboboxSingleProps = FormComboboxBaseProps & {
+  readonly multiple?: false;
+  readonly value?: string;
+  readonly defaultValue?: string;
+  readonly onChange?: (value: string) => void;
+  readonly onSelectionChange?: (selection: FormComboboxOption | null) => void;
+};
+
+type FormComboboxMultipleProps = FormComboboxBaseProps & {
+  readonly multiple: true;
+  readonly value?: string[];
+  readonly defaultValue?: string[];
+  readonly onChange?: (value: string[]) => void;
+  readonly onSelectionChange?: (selection: FormComboboxOption[] | null) => void;
+};
+
+type FormComboboxProps = FormComboboxSingleProps | FormComboboxMultipleProps;
+
+type FormComboboxValueProps =
+  | {
+      readonly multiple?: false;
+      readonly value?: string;
+      readonly defaultValue?: string;
+    }
+  | {
+      readonly multiple: true;
+      readonly value?: string[];
+      readonly defaultValue?: string[];
+    };
+
+const getInitialSingleValue = (props: FormComboboxValueProps): string => {
+  if (props.multiple === true) {
+    return '';
+  }
+
+  return props.defaultValue ?? '';
+};
+
+const getInitialMultipleValue = (props: FormComboboxValueProps): string[] => {
+  if (!props.multiple) {
+    return [];
+  }
+
+  return props.defaultValue ?? [];
+};
+
+const getSelectedValues = (
+  props: FormComboboxValueProps,
+  internalSingleValue: string,
+  internalMultipleValue: string[]
+): string[] => {
+  if (props.multiple === true) {
+    return props.value ?? internalMultipleValue;
+  }
+
+  if (props.value) {
+    return [props.value];
+  }
+
+  if (internalSingleValue) {
+    return [internalSingleValue];
+  }
+
+  return [];
+};
+
+const orderSelectedOptionsFirst = (
+  options: FormComboboxOption[],
+  selectedValues: string[]
+): FormComboboxOption[] => {
+  if (selectedValues.length === 0) return options;
+
+  const selectedValueSet = new Set(selectedValues);
+  const selectedOptions: FormComboboxOption[] = [];
+  const unselectedOptions: FormComboboxOption[] = [];
+
+  options.forEach((option) => {
+    if (selectedValueSet.has(option.value)) {
+      selectedOptions.push(option);
+      return;
+    }
+
+    unselectedOptions.push(option);
+  });
+
+  return [...selectedOptions, ...unselectedOptions];
+};
+
+export const FormCombobox: FC<FormComboboxProps> = ({
+  label,
+  hideLabel,
+  placeholder,
+  searchPlaceholder,
+  options,
+  disabled,
+  style,
+  isSearchEnabled = false,
+  hideInputStyle = false,
+  ...props
+}) => {
+  const id = useId();
+  const { t } = useTranslation();
+  const [isOpen, setIsOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const [internalSingleValue, setInternalSingleValue] = useState<string>(
+    getInitialSingleValue(props)
+  );
+  const [internalMultipleValue, setInternalMultipleValue] = useState<string[]>(
+    getInitialMultipleValue(props)
+  );
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const searchInputRef = useRef<HTMLInputElement | null>(null);
+
+  const isMultiple = props.multiple === true;
+  const selectedValues = getSelectedValues(props, internalSingleValue, internalMultipleValue);
+
+  const orderedOptions = useMemo(() => (
+    orderSelectedOptionsFirst(options, selectedValues)
+  ), [options, selectedValues]);
+
+  const filteredOptions = useMemo(() => {
+    const normalizedQuery = query.trim().toLowerCase();
+    if (!normalizedQuery) return orderedOptions;
+
+    return orderedOptions.filter((option) => (
+      option.label.toLowerCase().includes(normalizedQuery)
+    ));
+  }, [orderedOptions, query]);
+
+  const selectedOptions = useMemo(() => (
+    options.filter((option) => selectedValues.includes(option.value))
+  ), [options, selectedValues]);
+
+  useEffect(() => {
+    if (isOpen) {
+      searchInputRef.current?.focus();
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    const handleDocumentClick = (event: MouseEvent) => {
+      if (!wrapperRef.current?.contains(event.target as Node)) {
+        setIsOpen(false);
+        setQuery('');
+      }
+    };
+
+    document.addEventListener('mousedown', handleDocumentClick);
+
+    return () => {
+      document.removeEventListener('mousedown', handleDocumentClick);
+    };
+  }, []);
+
+  const closeOnFocusOutside = (event: ReactFocusEvent<HTMLDivElement>) => {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      setIsOpen(false);
+      setQuery('');
+    }
+  };
+
+  const setSingleValue = (option: FormComboboxOption) => {
+    if (props.multiple) return;
+    const singleProps = props as FormComboboxSingleProps;
+    const nextValue = selectedValues.includes(option.value) ? '' : option.value;
+    const nextSelection = nextValue ? option : null;
+
+    if (singleProps.value === undefined) {
+      setInternalSingleValue(nextValue);
+    }
+
+    singleProps.onChange?.(nextValue);
+    singleProps.onSelectionChange?.(nextSelection);
+    setIsOpen(false);
+    setQuery('');
+  };
+
+  const setMultipleValue = (option: FormComboboxOption) => {
+    if (!props.multiple) return;
+    const multipleProps = props as FormComboboxMultipleProps;
+
+    const nextValues = selectedValues.includes(option.value)
+      ? selectedValues.filter((value) => value !== option.value)
+      : [...selectedValues, option.value];
+    const nextSelection = options.filter((item) => nextValues.includes(item.value));
+
+    if (multipleProps.value === undefined) {
+      setInternalMultipleValue(nextValues);
+    }
+
+    multipleProps.onChange?.(nextValues);
+    multipleProps.onSelectionChange?.(nextSelection.length ? nextSelection : null);
+  };
+
+  const selectOption = (option: FormComboboxOption) => {
+    if (disabled) return;
+
+    if (props.multiple) {
+      setMultipleValue(option);
+      return;
+    }
+
+    setSingleValue(option);
+  };
+
+  const placeholderValue = placeholder || t('global.choose');
+  const triggerLabel = isMultiple
+    ? selectedOptions.length > 0
+      ? selectedOptions.map((option) => option.label).join(', ')
+      : placeholderValue
+    : selectedOptions[0]?.label ?? placeholderValue;
+  const triggerContent = hideInputStyle ? label ?? triggerLabel : triggerLabel;
+
+  const selectClasses = clsx(
+    'select',
+    disabled && 'select--disabled',
+    isOpen && 'select--open',
+    hideInputStyle && 'select--plain',
+  );
+
+  return (
+    <div ref={wrapperRef} className={selectClasses} style={style} onBlur={closeOnFocusOutside}>
+      {label && !hideLabel && <label htmlFor={id} className='select__label'>{label}</label>}
+      <div className='select__wrapper'>
+        <button
+          id={id}
+          type='button'
+          className='select__trigger'
+          aria-label={hideInputStyle && typeof label === 'string' ? label : undefined}
+          aria-haspopup='listbox'
+          aria-expanded={isOpen}
+          disabled={disabled}
+          onClick={() => setIsOpen((open) => !open)}
+        >
+          <span className='select__trigger-text'>{triggerContent}</span>
+          <Icon
+            label='Dropdown icon'
+            size='medium'
+            icon={hideInputStyle ? <MdExpandMore color='#5D6071' /> : <MdArrowDropDown color='#5D6071' />}
+          />
+        </button>
+
+        {isOpen && (
+          <div className='select__menu select__menu--combobox'>
+            {
+              isSearchEnabled && <div className='select__search'>
+                <Icon
+                  label='Search icon'
+                  size='medium'
+                  className='select__search-icon'
+                  icon={<MdSearch className='search__icon-size' color='#5D6071' />}
+                />
+                <input
+                  ref={searchInputRef}
+                  className='select__search-input'
+                  value={query}
+                  onChange={(event) => setQuery(event.target.value)}
+                  placeholder={searchPlaceholder ?? t('global.search')}
+                  disabled={disabled}
+                />
+              </div>
+            }
+
+            <ul className='select__options' role='listbox' aria-label={searchPlaceholder ?? t('global.search')}>
+              {filteredOptions.length > 0 ? (
+                filteredOptions.map((option) => {
+                  const isSelected = selectedValues.includes(option.value);
+
+                  return (
+                    <li
+                      key={option.value}
+                      role='option'
+                      aria-selected={isSelected}
+                      className='select__option select__option--combobox'
+                      onMouseDown={(event) => event.preventDefault()}
+                      onClick={() => selectOption(option)}
+                    >
+                      <input
+                        type={isMultiple ? 'checkbox' : 'radio'}
+                        checked={isSelected}
+                        value={option.value}
+                        onChange={() => null}
+                        onClick={(event) => event.preventDefault()}
+                      />
+                      <span>{option.label}</span>
+                    </li>
+                  );
+                })
+              ) : null}
+            </ul>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default FormCombobox;