[CP-3864] keep selected files on preview (#2645)

Co-authored-by: Michał Kurczewski <michal@kurczewski.dev> Co-authored-by: Michał Kurczewski <michalkurczewski94@gmail.com>
2025-12-23 22:28:03 -05:00 · 2025-09-02 19:51:48 +02:00
parent 4ab382ec6f
commit 1d69147571
8 changed files with 130 additions and 75 deletions
--- a/libs/generic-view/models/src/lib/common-validators.ts
+++ b/libs/generic-view/models/src/lib/common-validators.ts
@@ -99,6 +99,7 @@ export const entityActionValidator = z.union([
    type: z.literal("entities-delete"),
    entitiesType: z.string(),
    ids: z.array(z.string()),
+    activeItemId: z.string().optional(),
    successMessage: z.string().optional(),
    postActions: z
      .object({
@@ -200,7 +201,7 @@ const filesTransferExportFilesActionValidator = z.object({
  type: z.literal("export-files"),
  destinationPath: z.string(),
  entitiesType: z.string().optional(),
-  singleEntityId: z.string().optional(),
+  activeItemId: z.string().optional(),
  actionId: z.string(),

  formOptions: z.object({
--- a/libs/generic-view/ui/src/lib/buttons/button-base/use-button-action.ts
+++ b/libs/generic-view/ui/src/lib/buttons/button-base/use-button-action.ts
@@ -259,7 +259,7 @@ const runActions = (actions?: ButtonActions) => {
          await dispatch(
            deleteEntitiesDataAction({
              entitiesType: action.entitiesType,
-              ids: action.ids,
+              ids: action.activeItemId ? [action.activeItemId] : action.ids,
              deviceId: activeDeviceId,
              successMessage: action.successMessage,
              onSuccess: () => {
--- a/libs/generic-view/ui/src/lib/buttons/button-base/use-export-files-button-action.ts
+++ b/libs/generic-view/ui/src/lib/buttons/button-base/use-export-files-button-action.ts
@@ -43,11 +43,10 @@ export const useExportFilesButtonAction = () => {
      }
    ) => {
      const form = getFormContext(action.formOptions.formKey)
-
      if (action.entitiesType === undefined) return
      if (deviceId === undefined) return
-      const selectedItems: string[] = action.singleEntityId
-        ? [action.singleEntityId]
+      const selectedItems: string[] = action.activeItemId
+        ? [action.activeItemId]
        : getFormContext(action.sourceFormKey).getValues(
            action.selectedItemsFieldName
          )
--- a/libs/generic-view/ui/src/lib/generated/mc-file-manager/delete-files.ts
+++ b/libs/generic-view/ui/src/lib/generated/mc-file-manager/delete-files.ts
@@ -16,14 +16,17 @@ export const generateDeleteFilesButtonActions = (
          {
            type: "form-set-field",
            formKey: `${key}fileListForm`,
-            key: "selectedItems",
-            value: [singleEntityId],
+            key: "activeItemId",
+            value: singleEntityId,
          },
        ] as ButtonTextConfig["actions"])
      : []),
    {
      type: "open-modal",
-      modalKey: `${key}deleteModal`,
+      modalKey:
+        singleEntityId !== undefined
+          ? `${key}deletePreviewModal`
+          : `${key}deleteModal`,
      domain: "files-delete",
    },
  ]
@@ -35,9 +38,7 @@ export const generateDeleteFiles: ComponentGenerator<{
  return {
    [`${key}deleteModal`]: {
      component: "modal",
-      config: {
-        size: "small",
-      },
+      config: { size: "small" },
      childrenKeys: [
        `${key}deleteModalIcon`,
        `${key}deleteModalTitle`,
@@ -45,16 +46,28 @@ export const generateDeleteFiles: ComponentGenerator<{
        `${key}deleteModalButtons`,
      ],
    },
+    [`${key}deletePreviewModal`]: {
+      component: "modal",
+      config: { size: "small" },
+      childrenKeys: [
+        `${key}deleteModalIcon`,
+        `${key}deletePreviewModalTitle`,
+        `${key}deletePreviewModalContent`,
+        `${key}deletePreviewModalButtons`,
+      ],
+    },
    [`${key}deleteModalIcon`]: {
      component: "modal.titleIcon",
-      config: {
-        type: IconType.Exclamation,
-      },
+      config: { type: IconType.Exclamation },
    },
    [`${key}deleteModalTitle`]: {
      component: "modal.title",
      childrenKeys: [`${key}deleteModalTitleText`],
    },
+    [`${key}deletePreviewModalTitle`]: {
+      component: "modal.title",
+      childrenKeys: [`${key}deletePreviewModalTitleText`],
+    },
    [`${key}deleteModalTitleText`]: {
      component: "format-message",
      config: {
@@ -73,6 +86,10 @@ export const generateDeleteFiles: ComponentGenerator<{
        ],
      },
    },
+    [`${key}deletePreviewModalTitleText`]: {
+      component: "format-message",
+      config: { messageTemplate: "Delete file?" },
+    },
    [`${key}deleteModalContent`]: {
      component: "typography.p1",
      config: {
@@ -91,6 +108,10 @@ export const generateDeleteFiles: ComponentGenerator<{
        ],
      },
    },
+    [`${key}deletePreviewModalContent`]: {
+      component: "typography.p1",
+      config: { text: "This will remove the file from Kompakt" },
+    },
    [`${key}deleteModalButtons`]: {
      component: "modal.buttons",
      childrenKeys: [
@@ -98,6 +119,13 @@ export const generateDeleteFiles: ComponentGenerator<{
        `${key}deleteModalConfirmButton`,
      ],
    },
+    [`${key}deletePreviewModalButtons`]: {
+      component: "modal.buttons",
+      childrenKeys: [
+        `${key}deleteModalCancelButton`,
+        `${key}deletePreviewModalConfirmButton`,
+      ],
+    },
    [`${key}deleteModalCancelButton`]: {
      component: "button-secondary",
      config: {
@@ -127,20 +155,11 @@ export const generateDeleteFiles: ComponentGenerator<{
              "{count, plural, one {# file} other {# files}} deleted",
            postActions: {
              success: [
-                {
-                  type: "close-domain-modals",
-                  domain: "files-delete",
-                },
+                { type: "close-domain-modals", domain: "files-delete" },
              ],
              failure: [
-                {
-                  type: "close-domain-modals",
-                  domain: "files-delete",
-                },
-                {
-                  type: "open-modal",
-                  modalKey: `${key}deleteErrorModal`,
-                },
+                { type: "close-domain-modals", domain: "files-delete" },
+                { type: "open-modal", modalKey: `${key}deleteErrorModal` },
              ],
            },
          },
@@ -148,10 +167,7 @@ export const generateDeleteFiles: ComponentGenerator<{
      },
      childrenKeys: [`${key}deleteModalConfirmButtonText`],
      layout: {
-        flexLayout: {
-          direction: "row",
-          justifyContent: "center",
-        },
+        flexLayout: { direction: "row", justifyContent: "center" },
      },
      dataProvider: {
        source: "form-fields",
@@ -182,6 +198,52 @@ export const generateDeleteFiles: ComponentGenerator<{
        ],
      },
    },
+    [`${key}deletePreviewModalConfirmButton`]: {
+      component: "button-primary",
+      config: {
+        actions: [
+          {
+            type: "open-modal",
+            modalKey: `${key}deleteProgressModal`,
+            domain: "files-delete",
+          },
+          {
+            type: "entities-delete",
+            entitiesType: entityType,
+            ids: [],
+            activeItemId: undefined,
+            successMessage: "1 file deleted",
+            postActions: {
+              success: [
+                { type: "close-domain-modals", domain: "files-delete" },
+              ],
+              failure: [
+                { type: "close-domain-modals", domain: "files-delete" },
+                { type: "open-modal", modalKey: `${key}deleteErrorModal` },
+              ],
+            },
+          },
+        ],
+      },
+      childrenKeys: [`${key}deletePreviewModalConfirmButtonText`],
+      layout: {
+        flexLayout: { direction: "row", justifyContent: "center" },
+      },
+      dataProvider: {
+        source: "form-fields",
+        formKey: `${key}fileListForm`,
+        fields: [
+          {
+            providerField: "activeItemId",
+            componentField: "config.actions[1].activeItemId",
+          },
+        ],
+      },
+    },
+    [`${key}deletePreviewModalConfirmButtonText`]: {
+      component: "format-message",
+      config: { messageTemplate: "Delete file" },
+    },
    [`${key}deleteProgressModal`]: {
      component: "modal",
      config: {
--- a/libs/generic-view/ui/src/lib/generated/mc-file-manager/file-export-button.ts
+++ b/libs/generic-view/ui/src/lib/generated/mc-file-manager/file-export-button.ts
@@ -34,8 +34,8 @@ export const generateFilesExportButtonActions = (
          {
            type: "form-set-field",
            formKey: `${key}fileListForm`,
-            key: "selectedItems",
-            value: [singleEntityId],
+            key: "activeItemId",
+            value: singleEntityId,
          },
        ] as ButtonTextConfig["actions"])
      : []),
@@ -53,8 +53,8 @@ export const generateFilesExportButtonActions = (
                {
                  type: "form-set-field",
                  formKey: `${key}fileListForm`,
-                  key: "selectedItems",
-                  value: [],
+                  key: "activeItemId",
+                  value: undefined,
                },
              ],
            },
@@ -75,7 +75,7 @@ export const generateFilesExportButtonActions = (
      sourceFormKey: `${key}fileListForm`,
      selectedItemsFieldName: "selectedItems",
      entitiesType: entityType,
-      singleEntityId,
+      activeItemId: singleEntityId,
      actionId: exportActionId,
      preActions: {
        validationFailure: [
@@ -96,18 +96,24 @@ export const generateFilesExportButtonActions = (
          },
          {
            type: "open-toast",
-            toastKey: `${key}FilesExportedToast`,
-          },
-          {
-            type: "form-set-field",
-            formKey: `${key}fileListForm`,
-            key: "selectedItems",
-            value: [],
+            toastKey: singleEntityId
+              ? `${key}FilesExportedFromPreviewToast`
+              : `${key}FilesExportedToast`,
          },
+          ...(singleEntityId === undefined
+            ? [
+                {
+                  type: "form-set-field" as const,
+                  formKey: `${key}fileListForm`,
+                  key: "selectedItems",
+                  value: [],
+                },
+              ]
+            : []),
        ],
        failure: [
          {
-            type: "form-set-field",
+            type: "form-set-field" as const,
            formKey: `${key}fileListForm`,
            key: "selectedItems",
            value: [],
@@ -258,5 +264,19 @@ export const generateFileExportProcessButton: ComponentGenerator<
        ],
      },
    },
+    [`${key}FilesExportedFromPreviewToast`]: {
+      component: "toast",
+      childrenKeys: [
+        `${key}FilesExportedToastIcon`,
+        `${key}FilesExportedFromPreviewToastText`,
+      ],
+    },
+
+    [`${key}FilesExportedFromPreviewToastText`]: {
+      component: "typography.p1",
+      config: {
+        text: "1 file exported",
+      },
+    },
  }
 }
--- a/libs/generic-view/ui/src/lib/generated/mc-file-manager/file-list.ts
+++ b/libs/generic-view/ui/src/lib/generated/mc-file-manager/file-list.ts
@@ -71,6 +71,7 @@ const generateFileList: ComponentGenerator<
            activeFilePath: null,
            exportPath: "",
            previewMode: false,
+            activeItemId: undefined,
          },
        },
      },
@@ -159,12 +160,6 @@ const generateFileList: ComponentGenerator<
            condition: "eq",
            value: 0,
          },
-          {
-            providerField: "previewMode",
-            componentField: "data.render[1]",
-            condition: "eq",
-            value: true,
-          },
        ],
      },
    },
@@ -228,12 +223,6 @@ const generateFileList: ComponentGenerator<
            condition: "gt",
            value: 0,
          },
-          {
-            providerField: "previewMode",
-            componentField: "data.render[1]",
-            condition: "eq",
-            value: false,
-          },
        ],
      },
    },
@@ -512,18 +501,6 @@ const generateFileList: ComponentGenerator<
          },
        ],
      },
-      dataProviderSecondary: {
-        source: "form-fields",
-        formKey: `${key}${id}fileListForm`,
-        fields: [
-          {
-            providerField: "previewMode",
-            componentField: "config.inactive",
-            condition: "eq",
-            value: true,
-          },
-        ],
-      },
    },
    [`${key}${id}columnName`]: {
      component: "table.cell",
--- a/libs/generic-view/ui/src/lib/interactive/form/input/checkbox-input.tsx
+++ b/libs/generic-view/ui/src/lib/interactive/form/input/checkbox-input.tsx
@@ -223,8 +223,8 @@ const InputBox = styled.div`
 `

 const HitArea = styled.label`
-  width: 3.2rem;
-  height: 3.2rem;
+  width: 5rem;
+  height: 5rem;
  position: absolute;
  opacity: 0.1;
  left: 50%;
--- a/libs/generic-view/ui/src/lib/table/table.tsx
+++ b/libs/generic-view/ui/src/lib/table/table.tsx
@@ -14,7 +14,7 @@ import React, {
  useState,
 } from "react"
 import styled, { css } from "styled-components"
-import { difference, intersection } from "lodash"
+import { difference } from "lodash"
 import { TableTestIds } from "e2e-test-ids"
 import { APIFC, useViewFormContext } from "generic-view/utils"
 import { TableConfig, TableData, tableHeaderCell } from "generic-view/models"
@@ -128,9 +128,6 @@ export const Table: APIFC<TableData, TableConfig> & {
    } else if (previewMode) {
      formContext.setValue("previewMode", false)
      nextActivePreviewId.current = undefined
-      if (formOptions.selectedIdsFieldName) {
-        formContext.setValue(formOptions.selectedIdsFieldName, [])
-      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [
@@ -159,13 +156,12 @@ export const Table: APIFC<TableData, TableConfig> & {
        formOptions.selectedIdsFieldName
      )
      const unavailableIds = difference(selectedIds, data)
-
      if (unavailableIds.length > 0) {
        setTimeout(() => {
          if (formOptions.selectedIdsFieldName !== undefined) {
            formContext.setValue(
              formOptions.selectedIdsFieldName,
-              intersection(data, unavailableIds)
+              difference(selectedIds, unavailableIds)
            )
          }
        }, toastAnimationDuration)