@platforma-sdk/ui-vue 1.14.0 → 1.14.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.14.0",
+  "version": "1.14.1",
   "type": "module",
   "main": "dist/lib.umd.cjs",
   "module": "dist/lib.js",
@@ -38,7 +38,7 @@
     "@ag-grid-enterprise/side-bar": "^32.3.3",
     "@ag-grid-enterprise/column-tool-panel": "^32.3.3",
     "@milaboratories/uikit": "^2.2.18",
-    "@platforma-sdk/model": "^1.14.0"
+    "@platforma-sdk/model": "^1.14.1"
   },
   "devDependencies": {
     "@faker-js/faker": "^9.2.0",

package/src/components/PlAgDataTable/pl-table-filters.scss

@@ -0,0 +1,98 @@
+.pl-filter-manager {
+    $this: &;
+
+    &__add-btn {
+        height: 40px;
+        position: sticky;
+        bottom: -16px;
+        background-color: var(--bg-elevated-01);
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding-left: 12px;
+        padding-right: 12px;
+        border-radius: 6px;
+        border: 1px dashed var(--border-color-div-grey);
+        line-height: 0;
+        cursor: pointer;
+    }
+
+    &__add-btn-title {
+        flex-grow: 1;
+    }
+
+    &__header {
+        height: 40px;
+        padding-left: 12px;
+        padding-right: 12px;
+        cursor: pointer;
+    }
+
+    &__content {
+        max-height: 0;
+        overflow: hidden;
+        transition: all .2s ease-in-out;
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+
+    &__expand-icon {
+        .mask-16 {
+            transition: all .15s ease-in-out;
+        }
+    }
+
+    &__toggle,
+    &__expand-icon,
+    &__delete {
+        line-height: 0;
+        cursor: pointer;
+    }
+
+    &__toggle,
+    &__delete {
+        .mask-24 {
+            background-color: var(--ic-02);
+        }
+    }
+
+
+    &__filter {
+        border-radius: 6px;
+        border: 1px solid var(--border-color-div-grey);
+        background-color: var(--bg-base-light);
+        transition: background-color .15s ease-in-out;
+        overflow: auto;
+    }
+
+    &__filter.open {
+        background-color: var(--bg-elevated-01);
+
+        #{$this}__content {
+            max-height: 1600px;
+            // overflow: auto;
+            padding: 24px;
+            transition: all .2s ease-in-out;
+        }
+
+        #{$this}__header {
+            background: linear-gradient(180deg, #EBFFEB 0%, #FFF 100%);
+        }
+
+        #{$this}__expand-icon {
+            .mask-16 {
+                transform: rotate(90deg);
+            }
+        }
+    }
+
+    &__revert-btn {
+        padding: 8px 14px;
+        border-radius: 6px;
+        cursor: pointer;
+    }
+
+    &__revert-btn:hover {
+        background-color: var(--btn-sec-hover-grey);
+    }
+}

package/src/components/PlAgGridColumnManager/PlAgGridColumnManager.vue

@@ -56,7 +56,7 @@ onMounted(() => {
       </PlBtnGhost>
     </Teleport>
 
-    <PlSlideModal v-model="slideModal" :shadow="true" :width="'368px'" close-on-outside-click>
+    <PlSlideModal v-model="slideModal" :width="'368px'" close-on-outside-click>
       <template #title>Columns</template>
 
       <div ref="listRef" :key="listKey" class="pl-ag-columns">

package/src/components/PlTableFilters/PlTableAddFilter.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { PlBtnGhost, PlBtnPrimary, PlDropdown, PlSlideModal, type ListOption } from '@milaboratories/uikit';
+import type { PlTableFilterColumnId, PlTableFiltersStateEntry, PlTableFilterType, PTableColumnSpec } from '@platforma-sdk/model';
+import { ref, toRefs, watch } from 'vue';
+import PlTableFilterEntry from './PlTableFilterEntry.vue';
+
+const show = defineModel<boolean>({ required: true });
+const props = defineProps<{
+  columnsById: Readonly<Record<PlTableFilterColumnId, PTableColumnSpec>>;
+  columnOptions: Readonly<ListOption<PlTableFilterColumnId>[]>;
+  filterOptions: Readonly<Record<PlTableFilterColumnId, ListOption<PlTableFilterType>[]>>;
+  makeFilter(columnId: string): PlTableFiltersStateEntry;
+}>();
+const { columnsById, columnOptions, filterOptions } = toRefs(props);
+const emit = defineEmits<{
+  addFilter: [PlTableFiltersStateEntry];
+}>();
+
+const newFilterColumnId = ref<string>();
+const newFilter = ref<PlTableFiltersStateEntry>();
+watch(
+  () => newFilterColumnId.value,
+  (newFilterColumnId) => {
+    if (newFilterColumnId) newFilter.value = props.makeFilter(newFilterColumnId);
+    else newFilter.value = undefined;
+  },
+);
+const discardFilter = () => {
+  newFilterColumnId.value = undefined;
+  show.value = false;
+};
+const applyFilter = () => {
+  if (newFilter.value) {
+    emit('addFilter', newFilter.value);
+    discardFilter();
+  }
+};
+</script>
+
+<template>
+  <PlSlideModal v-model="show" :close-on-outside-click="false">
+    <template #title>Add Filter</template>
+    <div class="d-flex flex-column gap-24">
+      <PlDropdown v-model="newFilterColumnId" :options="columnOptions" label="Column" placeholder="Choose..." />
+
+      <div v-if="!newFilter" class="text-subtitle-m" style="color: var(--txt-mask)">Choose a column to view and adjust its options</div>
+
+      <PlTableFilterEntry
+        v-if="!!newFilter"
+        v-model="newFilter"
+        :column="columnsById[newFilter.columnId]"
+        :options="filterOptions[newFilter.columnId]"
+      />
+    </div>
+    <template #actions>
+      <PlBtnPrimary :disabled="!newFilter" @click="applyFilter">Add Filter</PlBtnPrimary>
+      <PlBtnGhost :justify-center="false" @click="discardFilter">Cancel</PlBtnGhost>
+    </template>
+  </PlSlideModal>
+</template>

package/src/components/PlTableFilters/PlTableFilterEntry.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { PlDropdown, PlTextField, PlToggleSwitch, Slider, type ListOption } from '@milaboratories/uikit';
+import type { PlTableFiltersStateEntry, PlTableFilterType, PTableColumnSpec } from '@platforma-sdk/model';
+import { toRefs } from 'vue';
+import { changeFilterType, parseNumber, parseString, parseRegex, makeWildcardOptions } from './filters_logic';
+
+const entry = defineModel<PlTableFiltersStateEntry>({ required: true });
+const props = defineProps<{
+  column: Readonly<PTableColumnSpec>;
+  options: Readonly<ListOption<PlTableFilterType>[]>;
+}>();
+const { column, options } = toRefs(props);
+</script>
+
+<template>
+  <div class="d-flex flex-column gap-24">
+    <PlDropdown
+      :model-value="entry.filter.type"
+      :options="options"
+      label="Predicate"
+      @update:model-value="(type) => (entry = changeFilterType(entry, type!))"
+    />
+    <template
+      v-if="
+        entry.filter.type === 'number_equals' ||
+        entry.filter.type === 'number_notEquals' ||
+        entry.filter.type === 'number_lessThan' ||
+        entry.filter.type === 'number_lessThanOrEqualTo' ||
+        entry.filter.type === 'number_greaterThan' ||
+        entry.filter.type === 'number_greaterThanOrEqualTo'
+      "
+    >
+      <PlTextField v-model="entry.filter.reference" :parse="(value: string): number => parseNumber(column, value)" label="Reference value" />
+    </template>
+    <template v-if="entry.filter.type === 'number_between'">
+      <PlTextField v-model="entry.filter.lowerBound" :parse="(value: string): number => parseNumber(column, value)" label="Lower bound" />
+      <PlToggleSwitch v-model="entry.filter.includeLowerBound" label="Include lower bound" />
+      <PlTextField v-model="entry.filter.upperBound" :parse="(value: string): number => parseNumber(column, value)" label="Upper bound" />
+      <PlToggleSwitch v-model="entry.filter.includeUpperBound" label="Include upper bound" />
+    </template>
+    <template
+      v-if="
+        entry.filter.type === 'string_equals' ||
+        entry.filter.type === 'string_notEquals' ||
+        entry.filter.type === 'string_contains' ||
+        entry.filter.type === 'string_doesNotContain'
+      "
+    >
+      <PlTextField v-model="entry.filter.reference" :parse="(value: string): string => parseString(column, value)" label="Reference value" />
+    </template>
+    <template v-if="entry.filter.type === 'string_matches' || entry.filter.type === 'string_doesNotMatch'">
+      <PlTextField v-model="entry.filter.reference" :parse="parseRegex" label="Reference value" />
+    </template>
+    <template v-if="entry.filter.type === 'string_containsFuzzyMatch'">
+      <PlTextField v-model="entry.filter.reference" :parse="(value: string): string => parseString(column, value)" label="Reference value" />
+      <Slider v-model="entry.filter.maxEdits" :max="5" breakpoints label="Maximum nuber of substitutions and indels" />
+      <PlToggleSwitch v-model="entry.filter.substitutionsOnly" label="Substitutions only" />
+      <PlDropdown v-model="entry.filter.wildcard" :options="makeWildcardOptions(column, entry.filter.reference)" clearable label="Wildcard symbol" />
+    </template>
+  </div>
+</template>

package/src/components/PlTableFilters/PlTableFilters.vue

@@ -0,0 +1,249 @@
+<script lang="ts" setup>
+import type { ListOption } from '@milaboratories/uikit';
+import { PlBtnGhost, PlIcon24, PlSlideModal, PlMaskIcon16, PlMaskIcon24 } from '@milaboratories/uikit';
+import { computed, onMounted, reactive, ref, toRefs, watch } from 'vue';
+import type {
+  PlTableFiltersModel,
+  PlTableFilterType,
+  PlTableFilter,
+  PTableColumnSpec,
+  PlTableFiltersState,
+  PlTableFiltersStateEntry,
+  PlTableFilterColumnId,
+} from '@platforma-sdk/model';
+import * as lodash from 'lodash';
+import type { PlTableFiltersDefault, PlTableFiltersRestriction } from '../PlAgDataTable/types';
+import PlTableFilterEntry from './PlTableFilterEntry.vue';
+import PlTableAddFilter from './PlTableAddFilter.vue';
+import { PlAgDataTableToolsPanelId } from '../PlAgDataTableToolsPanel/PlAgDataTableToolsPanelId';
+import { filterTypesNumber, filterTypesString, getColumnName, getFilterDefault, getFilterLabel, makeColumnId, makePredicate } from './filters_logic';
+import './pl-table-filters.scss';
+
+const model = defineModel<PlTableFiltersModel>({ required: true });
+const props = defineProps<{
+  columns: Readonly<PTableColumnSpec[]>;
+  restrictions?: Readonly<PlTableFiltersRestriction[]>;
+  defaults?: Readonly<PlTableFiltersDefault[]>;
+}>();
+const { columns, restrictions, defaults } = toRefs(props);
+
+const columnsById = computed<Record<PlTableFilterColumnId, PTableColumnSpec>>(() => {
+  const filterableColumn = columns.value.filter((column) => {
+    const type = column.type;
+    switch (type) {
+      case 'axis':
+        return column.spec.type !== 'Bytes';
+      case 'column':
+        return column.spec.valueType !== 'Bytes';
+      default:
+        throw Error(`unsupported data type: ${type satisfies never}`);
+    }
+  });
+  const result: Record<PlTableFilterColumnId, PTableColumnSpec> = {};
+  for (const column of filterableColumn) {
+    result[makeColumnId(column)] = column;
+  }
+  return result;
+});
+const restrictionsMap = computed<Record<PlTableFilterColumnId, PlTableFilterType[]>>(() => {
+  const restrictionsValue = restrictions.value ?? [];
+  const map: Record<PlTableFilterColumnId, PlTableFilterType[]> = {};
+  for (const [id, column] of Object.entries(columnsById.value)) {
+    const entry = lodash.find(restrictionsValue, (entry) => lodash.isEqual(entry.column.id, column.id));
+    if (entry) map[id] = entry.allowedFilterTypes;
+  }
+  return map;
+});
+const defaultsMap = computed<Record<PlTableFilterColumnId, PlTableFiltersStateEntry>>(() => {
+  const defaultsValue = defaults.value ?? [];
+  const map: Record<PlTableFilterColumnId, PlTableFiltersStateEntry> = {};
+  for (const [id, column] of Object.entries(columnsById.value)) {
+    const entry = lodash.find(defaultsValue, (entry) => lodash.isEqual(entry.column.id, column.id));
+    if (entry) map[id] = { columnId: id, filter: entry.default, disabled: false };
+  }
+  return map;
+});
+
+/* State upgrader */ (() => {
+  let state = model.value.state;
+  if (typeof state === 'object' && !Array.isArray(state)) {
+    model.value.state = Object.entries(state as unknown as Record<PlTableFilterColumnId, PlTableFilter>).map(([id, filter]) => ({
+      columnId: id,
+      filter,
+      disabled: false,
+    }));
+  }
+})();
+const makeState = (state?: PlTableFiltersState): PlTableFiltersState => {
+  return state ?? Object.values(defaultsMap.value);
+};
+const reactiveModel = reactive({ state: makeState(model.value.state) });
+watch(
+  () => model.value,
+  (model) => {
+    if (!lodash.isEqual(reactiveModel.state, model.state)) {
+      reactiveModel.state = makeState(model.state);
+    }
+  },
+);
+watch(
+  () => reactiveModel,
+  (reactiveModel) => {
+    if (!lodash.isEqual(reactiveModel.state, model.value.state)) {
+      model.value = {
+        state: lodash.cloneDeep(reactiveModel.state),
+        filters: reactiveModel.state
+          .filter((entry) => !entry.disabled)
+          .map((entry) => {
+            const column = columnsById.value[entry.columnId];
+            const { spec, ...columnId } = column;
+            const _ = spec;
+            return {
+              type: 'bySingleColumnV2',
+              column: columnId,
+              predicate: makePredicate(column, entry.filter),
+            };
+          }),
+      };
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+watch(
+  () => columnsById.value,
+  (columnsById) => {
+    // Do not reset filters when join is happening
+    if (Object.keys(columnsById).length === 0 && reactiveModel.state !== undefined) return;
+    reactiveModel.state = reactiveModel.state.filter((entry) => !!columnsById[entry.columnId]);
+  },
+  { immediate: true },
+);
+const filtersOn = computed(() => {
+  // Do not indicate filters when join is happening
+  return Object.keys(columnsById).length > 0 && reactiveModel.state.length > 0;
+});
+
+const filterOptions = computed<Record<PlTableFilterColumnId, ListOption<PlTableFilterType>[]>>(() => {
+  const restrictionsMapValue = restrictionsMap.value;
+  const map: Record<PlTableFilterColumnId, ListOption<PlTableFilterType>[]> = {};
+  for (const [id, column] of Object.entries(columnsById.value)) {
+    const valueType = column.type === 'column' ? column.spec.valueType : column.spec.type;
+    let types: PlTableFilterType[] = valueType === 'String' ? filterTypesString : filterTypesNumber;
+
+    const restrictionsEntry = restrictionsMapValue[id];
+    if (restrictionsEntry) types = types.filter((type) => restrictionsEntry.includes(type));
+
+    map[id] = types.map((type) => ({ value: type, text: getFilterLabel(type) }));
+  }
+  return map;
+});
+const filterOptionsPresent = computed<boolean>(() => {
+  return lodash.some(Object.values(filterOptions.value), (options) => options.length > 0);
+});
+const columnOptions = computed<ListOption<PlTableFilterColumnId>[]>(() =>
+  Object.entries(Object.entries(columnsById.value))
+    .filter(([_i, [id, _column]]) => filterOptions.value[id].length > 0)
+    .filter(([_i, [id, _column]]) => !reactiveModel.state.some((entry) => entry.columnId === id))
+    .map(([i, [id, column]]) => ({
+      label: getColumnName(column, i),
+      value: id,
+    })),
+);
+
+const makeFilter = (columnId: string): PlTableFiltersStateEntry =>
+  defaultsMap.value[columnId] ?? {
+    columnId,
+    filter: getFilterDefault(filterOptions.value[columnId][0].value),
+    disabled: false,
+  };
+const resetFilter = (index: number) => {
+  reactiveModel.state[index] = makeFilter(reactiveModel.state[index].columnId);
+};
+const deleteFilter = (index: number) => reactiveModel.state.splice(index, 1);
+
+const showManager = ref(false);
+const showAddFilter = ref(false);
+const mounted = ref(false);
+onMounted(() => {
+  mounted.value = true;
+});
+
+const openState = reactive<Record<PlTableFilterColumnId, boolean>>({});
+const toggleExpandFilter = (columnId: PlTableFilterColumnId) => {
+  if (!openState[columnId]) openState[columnId] = true;
+  else delete openState[columnId];
+};
+</script>
+
+<template>
+  <Teleport v-if="mounted" :to="`#${PlAgDataTableToolsPanelId}`">
+    <PlBtnGhost @click.stop="showManager = true">
+      Filters
+      <template #append>
+        <PlIcon24 :name="filtersOn ? 'filter-on' : 'filter'" />
+      </template>
+    </PlBtnGhost>
+  </Teleport>
+
+  <PlSlideModal v-model="showManager" :close-on-outside-click="false">
+    <template #title>Manage Filters</template>
+    <div class="pl-filter-manager d-flex flex-column gap-6">
+      <div
+        v-for="(entry, index) in reactiveModel.state"
+        :key="entry.columnId"
+        :class="{ open: openState[entry.columnId] }"
+        class="pl-filter-manager__filter"
+      >
+        <div class="pl-filter-manager__header d-flex align-center gap-8" @click="toggleExpandFilter(entry.columnId)">
+          <div class="pl-filter-manager__expand-icon">
+            <PlMaskIcon16 name="chevron-right" />
+          </div>
+
+          <div class="pl-filter-manager__title flex-grow-1 text-s">{{ getColumnName(columnsById[entry.columnId], index) }}</div>
+
+          <div class="pl-filter-manager__actions d-flex gap-12">
+            <div class="pl-filter-manager__toggle" @click.stop="entry.disabled = !entry.disabled">
+              <PlMaskIcon24 :name="entry.disabled ? 'view-hide' : 'view-show'" />
+            </div>
+
+            <div class="pl-filter-manager__delete" @click.stop="deleteFilter(index)">
+              <PlMaskIcon24 name="close" />
+            </div>
+          </div>
+        </div>
+
+        <div class="pl-filter-manager__content d-flex gap-24 p-24 flex-column">
+          <PlTableFilterEntry v-model="reactiveModel.state[index]" :column="columnsById[entry.columnId]" :options="filterOptions[entry.columnId]" />
+
+          <div class="d-flex justify-center">
+            <div class="pl-filter-manager__revert-btn text-s d-flex align-center gap-8" @click="resetFilter(index)">
+              Revert Settings to Default
+              <PlMaskIcon24 name="reverse" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="columnOptions.length > 0" class="pl-filter-manager__add-btn" @click="showAddFilter = true">
+        <div class="pl-filter-manager__add-btn-icon">
+          <PlMaskIcon16 name="add" />
+        </div>
+        <div class="pl-filter-manager__add-btn-title">Add Filter</div>
+      </div>
+
+      <div v-if="!filterOptionsPresent">No filters applicable</div>
+    </div>
+  </PlSlideModal>
+
+  <PlTableAddFilter
+    v-model="showAddFilter"
+    :columns-by-id="columnsById"
+    :column-options="columnOptions"
+    :filter-options="filterOptions"
+    :make-filter="makeFilter"
+    @add-filter="(entry) => reactiveModel.state.push(entry)"
+  />
+</template>