@platforma-sdk/ui-vue 1.65.10 → 1.66.1

package/src/components/PlAnnotations/components/FilterSidebar.vue

@@ -17,6 +17,7 @@ export type Props = {
 </script>
 <script setup lang="ts">
 import { computed } from "vue";
+import { produce } from "immer";
 import { randomInt } from "@milaboratories/helpers";
 import { PlBtnSecondary, PlEditableTitle, PlSidebarItem } from "@milaboratories/uikit";
 import type { ListOptionBase, PObjectId, SUniversalPColumnId } from "@platforma-sdk/model";
@@ -29,33 +30,54 @@ import type {
   PlAdvancedFilter,
 } from "../../PlAdvancedFilter";
 import type { Filter } from "../types";
+import { validateTitle } from "../utils";
 
 import $commonStyle from "./style.module.css";
-import { validateTitle } from "../utils";
 
-// Models
-const step = defineModel<Filter>("step", { required: true });
-// Props
-const props = defineProps<Props>();
-// State
+const props = defineProps<
+  Props & {
+    step: Filter;
+    onUpdateStep: (step: Filter) => void;
+  }
+>();
+
 const withSelection = computed(() => {
   return props.hasSelectedColumns !== undefined && props.getValuesForSelectedColumns !== undefined;
 });
-// Actions
-const addFilterPlaceholder = () => {
-  step.value.filter.filters.push({
-    id: randomInt(),
-    isExpanded: true,
-    type: "or",
-    filters: [
-      {
-        id: randomInt(),
-        type: "isNA",
-        column: props.columns[0].id as SUniversalPColumnId,
-      },
-    ],
+
+function produceStepUpdate(updater: (draft: Filter) => void) {
+  props.onUpdateStep(produce(props.step, updater));
+}
+
+function updateLabel(label: string) {
+  produceStepUpdate((draft) => {
+    draft.label = label;
   });
-};
+}
+
+function updateFilter(filter: PlAdvancedFilter) {
+  produceStepUpdate((draft) => {
+    draft.filter = filter as typeof draft.filter;
+  });
+}
+
+function addFilterPlaceholder() {
+  if (props.columns.length === 0) return;
+  produceStepUpdate((draft) => {
+    draft.filter.filters.push({
+      id: randomInt(),
+      isExpanded: true,
+      type: "or",
+      filters: [
+        {
+          id: randomInt(),
+          type: "isNA",
+          column: props.columns[0].id as SUniversalPColumnId,
+        },
+      ],
+    });
+  });
+}
 
 async function addFilterFromSelected() {
   if (props.hasSelectedColumns === undefined || props.getValuesForSelectedColumns === undefined)
@@ -68,17 +90,19 @@ async function addFilterFromSelected() {
   const shortReminder =
     values.slice(0, 3).join(", ") + (values.length > 3 ? ` and ${values.length - 3} more` : "");
 
-  step.value.filter.filters.push({
-    id: randomInt(),
-    name: `Selected list (${shortReminder})`,
-    isExpanded: false,
-    type: "or",
-    filters: values.map((value, i) => ({
-      id: i,
-      type: "patternEquals",
-      column: columnId as SUniversalPColumnId,
-      value,
-    })),
+  produceStepUpdate((draft) => {
+    draft.filter.filters.push({
+      id: randomInt(),
+      name: `Selected list (${shortReminder})`,
+      isExpanded: false,
+      type: "or",
+      filters: values.map((value, i) => ({
+        id: i,
+        type: "patternEquals",
+        column: columnId as SUniversalPColumnId,
+        value,
+      })),
+    });
   });
 }
 
@@ -101,29 +125,30 @@ const supportedFilters = [
 </script>
 
 <template>
-  <PlSidebarItem v-if="step">
+  <PlSidebarItem v-if="props.step">
     <template #header-content>
       <PlEditableTitle
-        :key="step.id"
-        v-model="step.label"
-        :class="{ [$commonStyle.flashing]: step.label.length === 0 }"
+        :key="props.step.id"
+        :model-value="props.step.label"
+        :class="{ [$commonStyle.flashing]: props.step.label.length === 0 }"
         :max-length="40"
         max-width="600px"
         placeholder="Label"
-        :autofocus="step.label.length === 0"
+        :autofocus="props.step.label.length === 0"
         :validate="validateTitle"
+        @update:model-value="updateLabel"
       />
     </template>
     <template #body-content>
       <PlAdvancedFilterComponent
-        :filters="step.filter as PlAdvancedFilter"
-        :class="[$style.root, { [$commonStyle.disabled]: step.label.length === 0 }]"
+        :class="[$style.root, { [$commonStyle.disabled]: props.step.label.length === 0 }]"
         :options="props.columns"
+        :filters="props.step.filter as PlAdvancedFilter"
+        :on-update-filters="updateFilter"
         :supported-filters="supportedFilters"
         :get-suggest-options="props.getSuggestOptions"
         :enable-dnd="false"
         :enable-add-group-button="true"
-        @update-filters="(v) => (step = { ...step, filter: v as typeof step.filter })"
       >
         <template #add-group-buttons>
           <div :class="$style.actions">
@@ -131,7 +156,7 @@ const supportedFilters = [
             <PlBtnSecondary
               v-if="withSelection"
               icon="add"
-              :disabled="!props.hasSelectedColumns"
+              :disabled="props.hasSelectedColumns !== true"
               @click="addFilterFromSelected"
             >
               From selection

package/src/components/PlAnnotations/components/PlAnnotations.vue

@@ -1,6 +1,8 @@
 <script lang="ts">
 import type { Props as BaseProps } from "./FilterSidebar.vue";
-export type Props = BaseProps & {
+export type Props = Omit<BaseProps, "step" | "onUpdateStep"> & {
+  annotation: Annotation;
+  onUpdateAnnotation: (annotation: Annotation) => void;
   onDeleteSchema?: () => void;
 };
 </script>
@@ -9,65 +11,79 @@ export type Props = BaseProps & {
 import { computed, effect, shallowRef } from "vue";
 
 import { isNil } from "@milaboratories/helpers";
+import { produce } from "immer";
 import { PlSidebarGroup, useConfirm } from "@milaboratories/uikit";
 
-import type { Annotation } from "../types";
+import type { Annotation, Filter } from "../types";
 import AnnotationsSidebar from "./AnnotationsSidebar.vue";
 import FilterSidebar from "./FilterSidebar.vue";
 
-// Models
-const annotation = defineModel<Annotation>("annotation", { required: true });
-// Props
 const props = defineProps<Props>();
-// State
-const selectedStepId = shallowRef<number | undefined>(undefined);
+
+const selectedStepId = shallowRef<undefined | number>(undefined);
+
 const selectedStep = computed(() => {
-  return isNil(selectedStepId.value) || isNil(annotation.value)
+  return isNil(selectedStepId.value) || isNil(props.annotation)
     ? undefined
-    : annotation.value.steps.find((step) => step.id === selectedStepId.value);
+    : props.annotation.steps.find((step) => step.id === selectedStepId.value);
 });
 
-// Watchers
 effect(function setDefaultStepId() {
-  if (selectedStepId.value === undefined && annotation.value.steps.length > 0) {
-    selectedStepId.value = annotation.value.steps[0].id;
+  if (selectedStepId.value === undefined && props.annotation.steps.length > 0) {
+    selectedStepId.value = props.annotation.steps[0].id;
   }
 });
-// Hooks
+
 const confirmResetSchema = useConfirm({
   title: "Reset Schema",
   message: "Are you sure you want to reset the schema? This action cannot be undone.",
   confirmLabel: "Yes, reset",
   cancelLabel: "No, cancel",
 });
-// Actions
+
 async function handleDeleteSchema() {
   if (await confirmResetSchema()) {
     selectedStepId.value = undefined;
     props.onDeleteSchema?.();
   }
 }
+
+function updateSelectedStepId(id: undefined | number) {
+  selectedStepId.value = id;
+}
+
+function updateSelectedStep(step: Filter) {
+  props.onUpdateAnnotation(
+    produce(props.annotation, (draft) => {
+      const idx = draft.steps.findIndex((s) => s.id === step.id);
+      if (idx !== -1) {
+        draft.steps[idx] = step;
+      }
+    }),
+  );
+}
 </script>
 
 <template>
   <PlSidebarGroup>
     <template #item-0>
       <AnnotationsSidebar
-        v-model:annotation="annotation"
-        v-model:selectedStepId="selectedStepId"
+        :annotation="props.annotation"
+        :selected-step-id="selectedStepId"
+        :on-update-annotation="props.onUpdateAnnotation"
+        :on-update-selected-step-id="updateSelectedStepId"
         :class="$style.sidebarItem"
-        :columns="props.columns"
         @delete-schema="handleDeleteSchema"
       />
     </template>
     <template #item-1>
       <FilterSidebar
         v-if="selectedStep"
-        v-model:step="selectedStep"
+        :step="selectedStep"
+        :on-update-step="updateSelectedStep"
         :class="$style.sidebarItem"
         :columns="props.columns"
         :get-suggest-options="props.getSuggestOptions"
-        :selectedStepId="selectedStepId"
         :hasSelectedColumns="props.hasSelectedColumns"
         :getValuesForSelectedColumns="props.getValuesForSelectedColumns"
       />

package/src/components/PlAnnotations/components/PlAnnotationsModal.vue

@@ -1,41 +1,38 @@
 <script setup lang="ts">
 import { PlPureSlideModal } from "@milaboratories/uikit";
-import { effect, shallowRef } from "vue";
 
-import type { Annotation } from "../types";
 import type { Props } from "./PlAnnotations.vue";
 import PlAnnotations from "./PlAnnotations.vue";
 
-// Models
-const annotation = defineModel<Annotation>("annotation", { required: true });
-const opened = defineModel<boolean>("opened", { required: true });
-// Props
-const props = defineProps<Props>();
-// State
-const selectedStepId = shallowRef<number | undefined>(undefined);
-// Watchers
-effect(function setDefaultStepId() {
-  if (selectedStepId.value === undefined && annotation.value.steps.length > 0) {
-    selectedStepId.value = annotation.value.steps[0].id;
+const props = defineProps<
+  Props & {
+    opened: boolean;
+    onUpdateOpened: (opened: boolean) => void;
   }
-});
-// Actions
+>();
+
 async function handleDeleteSchema() {
-  opened.value = false;
+  props.onUpdateOpened(false);
   props.onDeleteSchema?.();
 }
 </script>
 
 <template>
-  <PlPureSlideModal v-model="opened" :class="$style.modal" width="768px">
+  <PlPureSlideModal
+    :model-value="props.opened"
+    :class="$style.modal"
+    width="768px"
+    @update:model-value="props.onUpdateOpened"
+  >
     <PlAnnotations
-      v-model:annotation="annotation"
       :class="$style.content"
       :columns="props.columns"
-      :get-suggest-options="props.getSuggestOptions"
+      :annotation="props.annotation"
+      :on-update-annotation="props.onUpdateAnnotation"
+      :on-delete-schema="handleDeleteSchema"
       :has-selected-columns="props.hasSelectedColumns"
-      :getValuesForSelectedColumns="props.getValuesForSelectedColumns"
-      @delete-schema="handleDeleteSchema"
+      :get-suggest-options="props.getSuggestOptions"
+      :get-values-for-selected-columns="props.getValuesForSelectedColumns"
     />
   </PlPureSlideModal>
 </template>