@webitel/ui-datalist 1.0.0 → 1.0.1

package/src/filters/components/config/dynamic-filter-config-form.vue

@@ -0,0 +1,140 @@
+<template>
+  <form class="dynamic-filter-config-form">
+    <wt-select
+      :clearable="false"
+      :disabled="editMode"
+      :label="t('webitelUI.filters.filterName')"
+      :options="options"
+      :value="filterName"
+      track-by="value"
+      use-value-from-options-by-prop="value"
+      @input="onFilterNameUpdate($event)"
+    />
+
+    <slot
+      name="value-input"
+      v-bind="{
+        filterName,
+        filterValue,
+        inputLabel: t('webitelUI.filters.filterValue'),
+        onValueChange: (v) => (filterValue = v),
+        onValueInvalidChange: (v) => (invalid = v),
+      }"
+    />
+
+    <dynamic-filter-config-form-label
+      :value="filterLabel"
+      @update:model-value="onLabelValueUpdate"
+      @update:invalid="(v) => (invalid = v)"
+    />
+
+    <footer class="dynamic-filter-config-form-footer">
+      <wt-button
+        :disabled="invalid"
+        wide
+        @click="submit"
+      >
+        {{ t('reusable.save') }}
+      </wt-button>
+
+      <wt-button
+        color="secondary"
+        wide
+        @click="emit('cancel')"
+      >
+        {{ t('reusable.cancel') }}
+      </wt-button>
+    </footer>
+  </form>
+</template>
+
+<script lang="ts" setup>
+import deepcopy from 'deep-copy';
+import { ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import WtButton from '../../../../../../components/wt-button/wt-button.vue';
+import WtSelect from '../../../../../../components/wt-select/wt-select.vue';
+import type { FilterInitParams, FilterName, IFilter } from '../../types/Filter';
+import DynamicFilterConfigFormLabel from './dynamic-filter-config-form-label.vue';
+
+interface FilterNameSelectRepresentation {
+  name: string;
+  value: FilterName;
+}
+
+interface AddModeProps {
+  options: Array<FilterNameSelectRepresentation>;
+}
+
+interface EditModeProps {
+  filter: IFilter;
+}
+
+type Props = AddModeProps | EditModeProps;
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  submit: [FilterInitParams];
+  cancel: [];
+}>();
+
+const { t } = useI18n();
+
+const filterName = ref();
+const filterLabel = ref('');
+const filterValue = ref();
+
+const editMode = !!props.filter;
+
+const invalid = ref(false);
+
+const onLabelValueUpdate = (val: string) => {
+  filterLabel.value = val;
+};
+
+const onFilterNameUpdate = (val: string) => {
+  filterName.value = val;
+  filterValue.value = null;
+  invalid.value = false;
+};
+
+const submit = () => {
+  emit('submit', {
+    name: filterName.value,
+    label: filterLabel.value,
+    value: filterValue.value,
+  });
+};
+
+if (props.filter) {
+  watch(
+    props.filter,
+    () => {
+      filterName.value = props.filter.name;
+      filterValue.value = deepcopy(props.filter.value);
+      filterLabel.value = props.filter.label;
+    },
+    { immediate: true },
+  );
+}
+</script>
+
+<style lang="scss" scoped>
+$form-width: 380px;
+
+.dynamic-filter-config-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  box-sizing: border-box;
+  padding: var(--spacing-xs) 0;
+  width: $form-width;
+}
+
+.dynamic-filter-config-form-footer {
+  display: flex;
+  gap: var(--spacing-xs);
+}
+</style>

package/src/filters/components/config/dynamic-filter-config-view.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="dynamic-filter-config-view">
+    <wt-tooltip
+      :triggers="['click']"
+      :disabled="props.disabled"
+      :disable-click-away="props.disableClickAway"
+    >
+      <template #activator="slotScope">
+        <slot
+          name="activator"
+          v-bind="slotScope"
+        />
+      </template>
+      <template #default="slotScope">
+        <slot
+          name="content"
+          v-bind="slotScope"
+        />
+      </template>
+    </wt-tooltip>
+  </div>
+</template>
+
+<script lang="ts" setup>
+/**
+ * this component should only be used for config view representation: tooltip/popup/etc,
+ * and their styling
+ */
+
+import WtTooltip from '../../../../../../components/wt-tooltip/wt-tooltip.vue';
+
+interface Props {
+  disabled?: boolean;
+  disableClickAway?: boolean;
+}
+
+const props = defineProps<Props>();
+</script>
+
+<style lang="scss" scoped></style>

package/src/filters/components/dynamic-filter-add-action.vue

@@ -0,0 +1,54 @@
+<template>
+  <dynamic-filter-config-view
+    disable-click-away
+    class="dynamic-filter-add-action"
+  >
+    <template #activator>
+      <div class="dynamic-filter-add-action-wrapper">
+        <p v-if="props.showLabel">
+          {{ t('webitelUI.filters.addFilter') }}
+        </p>
+        <wt-icon-action action="add-filter" />
+      </div>
+    </template>
+
+    <template #content="slotScope">
+      <slot
+        name="form"
+        v-bind="slotScope"
+      >
+        filter form should be here
+      </slot>
+    </template>
+  </dynamic-filter-config-view>
+</template>
+
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
+
+import WtIconAction from '../../../../../components/wt-icon-action/wt-icon-action.vue';
+import DynamicFilterConfigView from './config/dynamic-filter-config-view.vue';
+
+interface Props {
+  showLabel?: boolean;
+}
+
+const props = defineProps<Props>();
+
+const { t } = useI18n();
+</script>
+
+<style lang="scss" scoped>
+.dynamic-filter-add-action {
+  display: flex;
+
+  &-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: var(--spacing-2xs);
+    cursor: pointer;
+    width: fit-content;
+  }
+}
+</style>

package/src/filters/components/dynamic-filter-panel-wrapper.vue

@@ -0,0 +1,57 @@
+<template>
+  <div
+    class="dynamic-filter-panel-wrapper"
+    :class="`dynamic-filter-panel-wrapper--${props.size}`"
+  >
+    <div class="dynamic-filter-panel-wrapper__filters">
+      <slot name="filters" />
+    </div>
+
+    <div class="dynamic-filter-panel-wrapper__actions">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ComponentSize } from '../../../../../enums';
+
+const props = withDefaults(
+  defineProps<{
+    size?: ComponentSize;
+  }>(),
+  {
+    size: ComponentSize.MD,
+  },
+);
+</script>
+
+<style lang="scss" scoped>
+.dynamic-filter-panel-wrapper {
+  display: grid;
+  grid-gap: var(--spacing-sm);
+  grid-template-columns: 1fr auto;
+  align-items: center;
+}
+
+.dynamic-filter-panel-wrapper__filters {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  grid-gap: var(--spacing-sm);
+}
+
+.dynamic-filter-panel-wrapper__actions {
+  display: flex;
+  grid-gap: var(--spacing-sm);
+}
+
+.dynamic-filter-panel-wrapper {
+  &--sm {
+    .dynamic-filter-panel-wrapper__filters,
+    .dynamic-filter-panel-wrapper__actions {
+      grid-gap: var(--spacing-xs);
+    }
+  }
+}
+</style>

package/src/filters/components/dynamic-filter-search.vue

@@ -0,0 +1,61 @@
+<template>
+  <wt-search-bar
+    :placeholder="t('reusable.search')"
+    :search-mode="props.searchMode"
+    :search-mode-options="searchModeOptions"
+    :value="model"
+    @input="model = $event"
+    @search="handleSearch"
+    @update:search-mode="onSearchModeChange($event.value)"
+  >
+    <template
+      v-if="props.showTextSearchIcon"
+      #search-icon
+    >
+      <wt-icon icon="stt-search" />
+    </template>
+  </wt-search-bar>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import WtSearchBar from '../../../../../components/wt-search-bar/wt-search-bar.vue';
+
+type ModelValue = string;
+const model = defineModel<ModelValue>();
+
+const props = defineProps<{
+  searchMode: string;
+  searchModeOptions: Record<string, string>;
+  showTextSearchIcon?: boolean;
+}>();
+
+const emit = defineEmits<{
+  'update:search-mode': [string];
+  'handle-search': [string];
+}>();
+
+const { t } = useI18n();
+
+const onSearchModeChange = (value: string) => {
+  emit('update:search-mode', value);
+  model.value = '';
+};
+
+const handleSearch = () => {
+  emit('handle-search', model.value);
+};
+
+const searchModeOptions = computed(() =>
+  Object.values(props.searchModeOptions).map((mode) => {
+    return {
+      value: mode,
+      text: t(`filters.search.${mode}`),
+    };
+  }),
+);
+</script>
+
+<style lang="scss" scoped></style>

package/src/filters/components/filter-options/_shared/composables/booleanFilterToolkit.ts

@@ -0,0 +1,39 @@
+import { useVuelidate } from '@vuelidate/core';
+import { computed, ModelRef, type Reactive, type Ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { BooleanFilterModelValue } from '../types/BooleanFilter';
+
+export const usePrettifyBooleanValuePreview = (
+  value: Reactive<boolean>,
+): { localeValue: Ref<string> } => {
+  const { t } = useI18n();
+
+  const localeValue = computed(() => {
+    return value ? t('vocabulary.yes') : t('vocabulary.no');
+  });
+
+  return { localeValue };
+};
+
+export const useBooleanFilterValueValidation = <
+  T extends BooleanFilterModelValue,
+>(
+  model: ModelRef<T>,
+) => {
+  const v$ = useVuelidate(
+    computed(() => ({
+      model: {
+        required: (v: T) => !(!v && v !== false),
+      },
+    })),
+    { model },
+    { $autoDirty: true },
+  );
+
+  v$.value.$touch();
+
+  return {
+    v$,
+  };
+};

package/src/filters/components/filter-options/_shared/composables/useFromToSecToPreviewTime.ts

@@ -0,0 +1,41 @@
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+export const useFromToSecToPreviewTime = (value: {
+  from?: number | string | null;
+  to?: number | string | null;
+}) => {
+  const { t } = useI18n();
+
+  const format = (secsVal: number) => {
+    const minutes = Math.floor(secsVal / 60);
+    const seconds = secsVal % 60;
+
+    return `${t('webitelUI.timepicker.min')} ${minutes} ${t('webitelUI.timepicker.sec')} ${seconds}`;
+  };
+
+  const from = computed(() => {
+    const numValue = Number(value.from);
+
+    if (!numValue && numValue !== 0) {
+      return '';
+    }
+
+    return format(numValue);
+  });
+
+  const to = computed(() => {
+    const numValue = Number(value.to);
+
+    if (!numValue && numValue !== 0) {
+      return '';
+    }
+
+    return format(numValue);
+  });
+
+  return {
+    from,
+    to,
+  };
+};

package/src/filters/components/filter-options/_shared/date-time-filter/date-time-filter-value-field.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="date-time-filter-value-field">
+    <wt-datepicker
+      :label="`${t('webitelUI.filters.createdAtFrom')}:`"
+      :value="model?.from"
+      class="date-time-filter-value-field__picker"
+      mode="datetime"
+      @input="handleInput('from', $event)"
+    />
+
+    <wt-datepicker
+      :label="`${t('webitelUI.filters.createdAtTo')}:`"
+      :value="model?.to"
+      class="date-time-filter-value-field__picker"
+      mode="datetime"
+      @input="handleInput('to', $event)"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { endOfToday, startOfToday } from 'date-fns';
+import { onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+type ModelValue = {
+  from: number;
+  to: number;
+};
+
+const model = defineModel<ModelValue>();
+const { t } = useI18n();
+
+const handleInput = (key: keyof ModelValue, value: number) => {
+  model.value = { ...model.value, [key]: value };
+};
+
+const initModel = () => {
+  if (!model.value) {
+    model.value = {
+      from: startOfToday().getTime(),
+      to: endOfToday().getTime(),
+    };
+  }
+};
+
+onMounted(() => initModel());
+</script>
+
+<style lang="scss" scoped>
+.date-time-filter-value-field {
+  display: flex;
+  flex-direction: column;
+  grid-gap: var(--spacing-xs);
+}
+</style>

package/src/filters/components/filter-options/_shared/durations/duration-filter-value-field.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="duration-filter">
+    <wt-timepicker
+      v-if="model"
+      :label="t('reusable.from')"
+      :value="model.from"
+      :v="v$.model?.from"
+      format="mm:ss"
+      @input="handleInput('from', $event)"
+    />
+    <wt-timepicker
+      v-if="model"
+      :label="t('reusable.to')"
+      :value="model.to"
+      :v="v$.model?.to"
+      format="mm:ss"
+      @input="handleInput('to', $event)"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useVuelidate } from '@vuelidate/core';
+import { computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+type ModelValue = {
+  from: number;
+  to: number;
+};
+
+const model = defineModel<ModelValue>();
+
+const emit = defineEmits<{
+  'update:invalid': [boolean];
+}>();
+
+if (!model.value) {
+  model.value = {
+    from: 0,
+    to: 0,
+  };
+}
+
+const isValueEmpty = () => {
+  return !!model?.value?.to || !!model?.value?.from;
+};
+
+const v$ = useVuelidate(
+  computed(() => ({
+    model: {
+      from: {
+        required: isValueEmpty,
+      },
+      to: {
+        required: isValueEmpty,
+      },
+    },
+  })),
+  { model },
+  { $autoDirty: true },
+);
+v$.value.$touch();
+
+const handleInput = (key: keyof ModelValue, value: number) => {
+  const newValue = { ...model.value };
+  newValue[key] = value;
+  model.value = newValue;
+};
+
+watch(
+  () => v$.value.$invalid,
+  (invalid) => {
+    emit('update:invalid', invalid);
+  },
+  { immediate: true },
+);
+</script>
+
+<style lang="scss" scoped>
+//.duration-filter {}
+</style>

package/src/filters/components/filter-options/_shared/has-options/has-option-filter-value-field.vue

@@ -0,0 +1,38 @@
+<template>
+  <wt-select
+    v-bind="attrs"
+    :clearable="false"
+    :options="BooleanOptions"
+    :value="strModel"
+    :label="t('webitelUI.filters.filterValue')"
+    class="has-option-filter-value-field"
+    track-by="value"
+    use-value-from-options-by-prop="value"
+    @input="strModel = $event"
+  />
+</template>
+
+<script lang="ts" setup>
+import { computed, useAttrs } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import WtSelect from '../../../../../../../../components/wt-select/wt-select.vue';
+import { BooleanOptions } from '../../../../enums/boolean-options';
+
+const model = defineModel<boolean | null>();
+
+const attrs = useAttrs();
+
+const { t } = useI18n();
+
+const strModel = computed({
+  get: () => {
+    return typeof model.value === 'boolean' ? String(model.value) : model.value;
+  },
+  set: (value: string) => {
+    model.value = value === 'true';
+  },
+});
+</script>
+
+<style lang="scss" scoped></style>

package/src/filters/components/filter-options/_shared/types/BooleanFilter.ts

@@ -0,0 +1 @@
+export type BooleanFilterModelValue = boolean;

package/src/filters/components/filter-options/actual-reaction-time/actual-reaction-time-filter-value-field.vue

@@ -0,0 +1,18 @@
+<template>
+  <date-time-filter-value-field
+    :model-value="model"
+    @update:model-value="model = $event"
+  />
+</template>
+
+<script lang="ts" setup>
+import DateTimeFilterValueField from '../_shared/date-time-filter/date-time-filter-value-field.vue';
+
+type ModelValue = {
+  from: number;
+  to: number;
+};
+const model = defineModel<ModelValue>();
+</script>
+
+<style lang="scss" scoped></style>

package/src/filters/components/filter-options/actual-reaction-time/actual-reaction-time-filter-value-preview.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="actual-reaction-time-filter-value-preview">
+    <div v-if="props.value.from">
+      <p class="actual-reaction-time-filter-value-preview__title">
+        {{ t('reusable.from') }}
+      </p>
+
+      <span>{{ convertTimestampToDate(props.value.from) }}</span>
+    </div>
+
+    <div v-if="props.value.to">
+      <p class="actual-reaction-time-filter-value-preview__title">
+        {{ t('reusable.to') }}
+      </p>
+
+      <span>{{ convertTimestampToDate(props.value.to) }}</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { format } from 'date-fns';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps<{
+  value: number[];
+}>();
+
+const { t } = useI18n();
+
+function convertTimestampToDate(value) {
+  return format(new Date(value), 'dd.MM.yyyy HH:mm');
+}
+</script>
+
+<style lang="scss" scoped>
+@use '@webitel/styleguide/typography' as *;
+
+.actual-reaction-time-filter-value-preview {
+  &__title {
+    @extend %typo-subtitle-1;
+  }
+}
+</style>

package/src/filters/components/filter-options/actual-resolution-time/actual-resolution-time-filter-value-field.vue

@@ -0,0 +1,18 @@
+<template>
+  <date-time-filter-value-field
+    :model-value="model"
+    @update:model-value="model = $event"
+  />
+</template>
+
+<script lang="ts" setup>
+import DateTimeFilterValueField from '../_shared/date-time-filter/date-time-filter-value-field.vue';
+
+type ModelValue = {
+  from: number;
+  to: number;
+};
+const model = defineModel<ModelValue>();
+</script>
+
+<style lang="scss" scoped></style>