@pitcher/canvas-ui 2026.1.7-105737-beta → 2026.1.7-123048-beta

package/canvas-ui.css

@@ -903,7 +903,7 @@ button[data-v-da2357d4]:focus {
   cursor: pointer;
   color: var(--000c7396);
 }
-.c-assigned-canvas-management[data-v-f6151990] {
+.c-assigned-canvas-management[data-v-df004301] {
   display: flex;
   flex-direction: column;
 }

package/canvas-ui.js

@@ -111026,6 +111026,7 @@ function useCanvasStandardFilters(options = {}) {
     includeTagsFilter = true,
     includeDraftFilter = true,
     includeTemplateFilter = false,
+    templateOptions,
     includeOwnerFilter = false,
     ownerLabel
   } = options;
@@ -111054,9 +111055,10 @@ function useCanvasStandardFilters(options = {}) {
     }
     if (includeTemplateFilter) {
       components.push({
-        type: MetadataTemplateFieldTypeEnum.TEXT,
-        name: "template__name__icontains",
-        label: t("canvasUI.composables.useCanvasStandardFilters.templateUsed")
+        type: MetadataTemplateFieldTypeEnum.SELECT,
+        name: "template__id",
+        label: t("canvasUI.composables.useCanvasStandardFilters.templateUsed"),
+        options: templateOptions?.value ?? []
       });
     }
     return components;
@@ -118276,6 +118278,7 @@ const _sfc_main$4q = /*@__PURE__*/defineComponent({
     const fetchedData = ref([]);
     const isLoading = ref(false);
     const accessibleTemplateIds = ref(new Set());
+    const availableTemplates = ref([]);
     const isCheckingTemplateAccess = ref(false);
     const isBulkDeleting = ref(false);
     const isBulkUpdating = ref(false);
@@ -118351,11 +118354,32 @@ const _sfc_main$4q = /*@__PURE__*/defineComponent({
         return systemTags.includes(lowerTag);
       }) ?? false;
     }
+    const templateOptions = computed(() => availableTemplates.value.map(t => ({
+      label: t.name,
+      value: t.id
+    })).sort((a, b) => a.label.localeCompare(b.label)));
+    async function fetchTemplates() {
+      try {
+        const {
+          results
+        } = await props.fetcher({
+          is_template: true,
+          is_section: false,
+          page: 1,
+          page_size: 1000,
+          fields: 'id,name'
+        });
+        availableTemplates.value = results;
+      } catch (e) {
+        console.error('Failed to fetch templates for filter:', e);
+      }
+    }
     const {
       filterComponents: dataFilterComponents
     } = useCanvasStandardFilters({
       includeTemplateFilter: true,
-      includeOwnerFilter: props.isAnyTypeOfAdmin ?? false
+      includeOwnerFilter: props.isAnyTypeOfAdmin ?? false,
+      templateOptions
     });
     const {
       height: canvasManagementToolbarHeight
@@ -119111,6 +119135,7 @@ const _sfc_main$4q = /*@__PURE__*/defineComponent({
     onMounted(async () => {
       try {
         isLoading.value = true;
+        fetchTemplates();
         await fetch(fetchingParams.value);
       } catch (e) {
         console.error(e);
@@ -119285,6 +119310,9 @@ const _sfc_main$4o = /*@__PURE__*/defineComponent({
     fetcher: {
       type: Function
     },
+    templatesFetcher: {
+      type: Function
+    },
     byIdFetcher: {
       type: Function
     },
@@ -119330,21 +119358,43 @@ const _sfc_main$4o = /*@__PURE__*/defineComponent({
     const tableRef = ref(null);
     const toolbarWrapper = ref(null);
     const launchDarkly = inject('launchDarkly', computed(() => ({})));
+    const isLoading = ref(false);
+    const fetchedData = ref([]);
+    const totalCount = ref(0);
+    const availableTemplates = ref([]);
+    const templateOptions = computed(() => availableTemplates.value.map(t => ({
+      label: t.name,
+      value: t.id
+    })).sort((a, b) => a.label.localeCompare(b.label)));
+    async function fetchTemplates() {
+      if (!props.templatesFetcher) return;
+      try {
+        const {
+          results
+        } = await props.templatesFetcher({
+          is_template: true,
+          is_section: false,
+          page: 1,
+          page_size: 1000,
+          fields: 'id,name'
+        });
+        availableTemplates.value = results;
+      } catch (e) {
+        console.error('Failed to fetch templates for filter:', e);
+      }
+    }
     const {
       filterComponents: dataFilterComponents
     } = useCanvasStandardFilters({
       includeTemplateFilter: true,
       includeOwnerFilter: true,
-      // Include owner filter for assigned canvases
       includeTagsFilter: true,
-      includeDraftFilter: true
+      includeDraftFilter: true,
+      templateOptions
     });
     const {
       height: canvasManagementToolbarHeight
     } = useElementSize(toolbarWrapper);
-    const isLoading = ref(false);
-    const fetchedData = ref([]);
-    const totalCount = ref(0);
     const {
       search,
       pageSize,
@@ -119591,6 +119641,7 @@ const _sfc_main$4o = /*@__PURE__*/defineComponent({
     onMounted(async () => {
       try {
         isLoading.value = true;
+        fetchTemplates();
         await fetch(fetchingParams.value);
       } catch (e) {
         console.error(e);
@@ -119644,7 +119695,7 @@ const _sfc_main$4o = /*@__PURE__*/defineComponent({
   }
 });
 
-const CAssignedCanvasesManagement = /* @__PURE__ */ _export_sfc(_sfc_main$4o, [["__scopeId", "data-v-f6151990"]]);
+const CAssignedCanvasesManagement = /* @__PURE__ */ _export_sfc(_sfc_main$4o, [["__scopeId", "data-v-df004301"]]);
 
 const _hoisted_1$3v = { class: "w-fit flex items-center justify-center text-truncate rd uppercase c-table-select" };
 const __default__ = {
@@ -131590,21 +131641,24 @@ const displayIntegerWithMunit = (number, decimals = 2) => {
   return `${b.toFixed(decimals)}B`;
 };
 const convertSecondsToMinutes = (number) => {
+  if (number <= 0) return "0 sec";
+  if (number < 1) return "<1 sec";
   const units = [
-    [1, "sec"],
-    [60, "min"],
+    [60 * 60 * 24, "day"],
     [60 * 60, "h"],
-    [60 * 60 * 24, "day"]
+    [60, "min"],
+    [1, "sec"]
   ];
-  let bestUnit = units[0];
-  for (const unit of units) {
-    if (number >= unit[0]) {
-      bestUnit = unit;
+  const parts = [];
+  let remaining = number;
+  for (const [divisor, label] of units) {
+    if (remaining >= divisor) {
+      const val = Math.floor(remaining / divisor);
+      parts.push(`${val} ${label}`);
+      remaining = remaining % divisor;
     }
   }
-  const [divisor, label] = bestUnit;
-  const val = Math.floor(number / Number(divisor));
-  return `${val} ${label}`;
+  return parts.slice(0, 2).join(" ");
 };
 const getNumberWithRegex = (string) => {
   return string?.replace(/\D+/g, "");
@@ -142417,7 +142471,10 @@ const _hoisted_94 = { class: "flex flex-col gap-2" };
 const _hoisted_95 = { class: "flex items-center gap-2" };
 const _hoisted_96 = { class: "text-sm" };
 const _hoisted_97 = { class: "text-sm" };
-const _hoisted_98 = { class: "flex items-center gap-2" };
+const _hoisted_98 = {
+  key: 0,
+  class: "flex items-center gap-2"
+};
 const _hoisted_99 = { class: "text-sm" };
 const _hoisted_100 = { class: "mb-4" };
 const _hoisted_101 = { class: "block mb-2" };
@@ -142443,7 +142500,9 @@ const _sfc_main$2E = /* @__PURE__ */ defineComponent({
     const props = __props;
     const { t } = useI18n();
     const themeVars = useThemeVars();
-    const { setComponentEditMode, updateNodeDataById } = useCanvas$1();
+    const { mode, setComponentEditMode, updateNodeDataById } = useCanvas$1();
+    const isAdminMode = computed(() => mode.value === CanvasBuilderMode.ADMIN);
+    const confirmation = useConfirmation();
     const { crmShape } = useCrmShape();
     const { palette } = useCanvasTheme$1();
     let seriesIdCounter = 0;
@@ -142531,7 +142590,9 @@ const _sfc_main$2E = /* @__PURE__ */ defineComponent({
     });
     const chartType = computed(() => seriesList.value[0]?.chartType ?? "bar");
     const primaryChartType = computed(() => seriesList.value[0]?.chartType ?? "bar");
-    const backgroundColor = props.data?.data?.datasets?.[0]?.background_color;
+    const savedColorScheme = props.data?.color_scheme;
+    const datasets = props.data?.data?.datasets;
+    const backgroundColor = savedColorScheme ?? (datasets && datasets.length > 1 ? datasets.map((ds) => ds.background_color).filter(Boolean) : datasets?.[0]?.background_color);
     const colorSchemeType = ref(props.data?.color_scheme_type ?? "theme");
     const chartColors = ref([]);
     const displayColors = computed(() => {
@@ -142566,7 +142627,7 @@ const _sfc_main$2E = /* @__PURE__ */ defineComponent({
     const percentDisplay = ref(props.data?.percent_display ?? false);
     const enableFullscreenBtn = ref(props.data?.view_controls?.enable_fullscreen_btn ?? false);
     const enableChartTypeSwitcher = ref(props.data?.view_controls?.enable_chart_type_switcher ?? false);
-    const enableDataEntry = ref(props.data?.view_controls?.enable_data_entry ?? false);
+    const enableDataEntry = ref(props.data?.view_controls?.enable_data_entry !== false);
     const chartHeight = ref(props.data?.chart_height ?? 800);
     const chartWidth = ref(props.data?.chart_width ?? 100);
     const legendPositionOptions = [
@@ -143083,7 +143144,7 @@ const _sfc_main$2E = /* @__PURE__ */ defineComponent({
       return chartColors.value;
     }
     function createChartConfig() {
-      const datasets = [];
+      const datasets2 = [];
       let allLabels = [];
       const colorsForStorage = getSeriesColors(true);
       const isSingleSeries = seriesList.value.length === 1;
@@ -143128,7 +143189,7 @@ const _sfc_main$2E = /* @__PURE__ */ defineComponent({
         if (processedData.labels.length > allLabels.length) {
           allLabels = processedData.labels;
         }
-        datasets.push(datasetOptions);
+        datasets2.push(datasetOptions);
       });
       const primaryType = seriesList.value[0].chartType;
       let actualPrimaryType = primaryType;
@@ -143167,6 +143228,7 @@ const _sfc_main$2E = /* @__PURE__ */ defineComponent({
       const config = {
         type: actualPrimaryType,
         color_scheme_type: colorSchemeType.value,
+        color_scheme: colorsForStorage,
         percent_display: percentDisplay.value,
         chart_height: chartHeight.value,
         chart_width: chartWidth.value,
@@ -143177,7 +143239,7 @@ const _sfc_main$2E = /* @__PURE__ */ defineComponent({
         },
         data: {
           labels: allLabels,
-          datasets
+          datasets: datasets2
         },
         options: {
           responsive: true,
@@ -143225,6 +143287,22 @@ const _sfc_main$2E = /* @__PURE__ */ defineComponent({
       return config;
     }
     function onCancel() {
+      if (isDirty.value) {
+        confirmation.warning({
+          title: t("canvasUI.canvasBuilder.confirmationOnUnsavedChanges.title"),
+          content: t("canvasUI.canvasBuilder.confirmationOnUnsavedChanges.content"),
+          confirmText: t("canvasUI.canvasBuilder.confirmationOnUnsavedChanges.confirm"),
+          exitText: t("canvasUI.canvasBuilder.confirmationOnUnsavedChanges.exit"),
+          hasExit: true,
+          onConfirm: () => {
+            onSave();
+          },
+          onExit: () => {
+            setComponentEditMode(false);
+          }
+        });
+        return;
+      }
       setComponentEditMode(false);
     }
     function onSave() {
@@ -143233,6 +143311,10 @@ const _sfc_main$2E = /* @__PURE__ */ defineComponent({
       setComponentEditMode(false);
     }
     const previewData = ref({});
+    const isDirty = ref(false);
+    function markDirty() {
+      isDirty.value = true;
+    }
     function updatePreview() {
       const config = createChartConfig();
       previewData.value = {
@@ -143254,6 +143336,7 @@ const _sfc_main$2E = /* @__PURE__ */ defineComponent({
         enableChartTypeSwitcher.value = false;
       }
     });
+    let isInitialized = false;
     watch(
       [
         seriesList,
@@ -143275,17 +143358,23 @@ const _sfc_main$2E = /* @__PURE__ */ defineComponent({
       ],
       () => {
         updatePreview();
+        if (isInitialized) {
+          markDirty();
+        }
       },
       { deep: true }
     );
     onMounted(() => {
       updatePreview();
+      nextTick(() => {
+        isInitialized = true;
+      });
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(NModal), {
         bordered: false,
         class: "cb-data-charts-settings",
-        onEsc: () => unref(setComponentEditMode)(false),
+        onEsc: onCancel,
         preset: "card",
         show: true,
         size: "huge",
@@ -143297,7 +143386,7 @@ const _sfc_main$2E = /* @__PURE__ */ defineComponent({
           "--n-padding-left": "16px"
         }]),
         title: unref(t)("canvasUI.canvasBuilder.dataCharts.editDataChartsComponent"),
-        onClose: _cache[16] || (_cache[16] = ($event) => unref(setComponentEditMode)(false))
+        onClose: onCancel
       }, {
         footer: withCtx(() => [
           createElementVNode("div", _hoisted_110, [
@@ -143937,13 +144026,13 @@ const _sfc_main$2E = /* @__PURE__ */ defineComponent({
                             ]),
                             _: 1
                           }, 8, ["disabled"]),
-                          createElementVNode("div", _hoisted_98, [
+                          isAdminMode.value ? (openBlock(), createElementBlock("div", _hoisted_98, [
                             createVNode(unref(NSwitch), {
                               value: enableDataEntry.value,
                               "onUpdate:value": _cache[13] || (_cache[13] = ($event) => enableDataEntry.value = $event)
                             }, null, 8, ["value"]),
                             createElementVNode("span", _hoisted_99, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.enableDataEntry")), 1)
-                          ])
+                          ])) : createCommentVNode("", true)
                         ])
                       ]),
                       createElementVNode("div", _hoisted_100, [
@@ -143959,7 +144048,7 @@ const _sfc_main$2E = /* @__PURE__ */ defineComponent({
                               min: 100,
                               step: 10
                             }, {
-                              suffix: withCtx(() => _cache[17] || (_cache[17] = [
+                              suffix: withCtx(() => _cache[16] || (_cache[16] = [
                                 createTextVNode("px")
                               ])),
                               _: 1
@@ -143975,7 +144064,7 @@ const _sfc_main$2E = /* @__PURE__ */ defineComponent({
                               min: 10,
                               step: 5
                             }, {
-                              suffix: withCtx(() => _cache[18] || (_cache[18] = [
+                              suffix: withCtx(() => _cache[17] || (_cache[17] = [
                                 createTextVNode("%")
                               ])),
                               _: 1
@@ -144010,7 +144099,7 @@ const _sfc_main$2E = /* @__PURE__ */ defineComponent({
           }, 8, ["style"])
         ]),
         _: 1
-      }, 8, ["onEsc", "title"]);
+      }, 8, ["title"]);
     };
   }
 });
@@ -144058,7 +144147,7 @@ const _sfc_main$2D = /* @__PURE__ */ defineComponent({
       if (mode.value === CanvasBuilderMode.ADMIN) {
         return true;
       }
-      return props.data?.view_controls?.enable_data_entry ?? false;
+      return props.data?.view_controls?.enable_data_entry !== false;
     });
     onMounted(() => {
       if (justAddedComponentId.value === props.id) {