From 83c362ec3ac0c96c14a37f4d5d1769fc2692ffa7 Mon Sep 17 00:00:00 2001 From: MateuszMudita Date: Wed, 18 Dec 2024 14:06:47 +0100 Subject: [PATCH 1/2] Delete files --- .../use-dev-views/views/file-manager-view.ts | 2 +- .../generated/mc-file-manager/delete-files.ts | 216 ++++++++++++++++++ .../generated/mc-file-manager/file-list.ts | 125 +++++++++- 3 files changed, 340 insertions(+), 3 deletions(-) create mode 100644 libs/generic-view/ui/src/lib/generated/mc-file-manager/delete-files.ts diff --git a/libs/generic-view/feature/src/lib/use-dev-views/views/file-manager-view.ts b/libs/generic-view/feature/src/lib/use-dev-views/views/file-manager-view.ts index 65009489f5..483a8d5d55 100644 --- a/libs/generic-view/feature/src/lib/use-dev-views/views/file-manager-view.ts +++ b/libs/generic-view/feature/src/lib/use-dev-views/views/file-manager-view.ts @@ -14,7 +14,7 @@ export const fileManagerView: View = { "audioFiles", "imageFiles", "ebookFiles", - "applicationFiles", + // "applicationFiles", ], }, // @ts-ignore diff --git 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 new file mode 100644 index 0000000000..2ae56dd1e6 --- /dev/null +++ b/libs/generic-view/ui/src/lib/generated/mc-file-manager/delete-files.ts @@ -0,0 +1,216 @@ +/** + * Copyright (c) Mudita sp. z o.o. All rights reserved. + * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md + */ + +import { Subview, IconType } from "generic-view/utils" + +export const generateDeleteFiles = ( + id: string, + entitiesType: string +): Subview => { + return { + [`${id}deleteModal`]: { + component: "modal", + config: { + size: "small", + }, + childrenKeys: [ + `${id}deleteModalIcon`, + `${id}deleteModalTitle`, + `${id}deleteModalContent`, + `${id}deleteModalButtons`, + ], + }, + [`${id}deleteModalIcon`]: { + component: "modal.titleIcon", + config: { + type: IconType.Exclamation, + }, + }, + [`${id}deleteModalTitle`]: { + component: "modal.title", + childrenKeys: [`${id}deleteModalTitleText`], + }, + [`${id}deleteModalTitleText`]: { + component: "format-message", + config: { + messageTemplate: + "Delete {selectedItems, plural, one {file} other {# files}}?", + }, + dataProvider: { + source: "form-fields", + formKey: `${id}fileListForm`, + fields: [ + { + providerField: "selectedItems", + componentField: "data.fields.selectedItems", + modifier: "length", + }, + ], + }, + }, + [`${id}deleteModalContent`]: { + component: "p1-component", + childrenKeys: [`${id}deleteModalContentText`], + }, + [`${id}deleteModalContentText`]: { + component: "format-message", + config: { + messageTemplate: + "This will remove the {selectedItems, plural, one {file} other {files}} from Kompakt.", + }, + dataProvider: { + source: "form-fields", + formKey: `${id}fileListForm`, + fields: [ + { + providerField: "selectedItems", + componentField: "data.fields.selectedItems", + modifier: "length", + }, + ], + }, + }, + [`${id}deleteModalButtons`]: { + component: "modal.buttons", + childrenKeys: [ + `${id}deleteModalCancelButton`, + `${id}deleteModalConfirmButton`, + ], + }, + [`${id}deleteModalCancelButton`]: { + component: "button-secondary", + config: { + text: "Cancel", + actions: [ + { + type: "close-modal", + modalKey: `${id}deleteModal`, + }, + ], + }, + }, + [`${id}deleteModalConfirmButton`]: { + component: "button-primary", + config: { + actions: [ + { + type: "open-modal", + modalKey: `${id}deleteProgressModal`, + domain: "files-delete", + }, + { + type: "entities-delete", + entitiesType, + ids: [], + postActions: { + success: [ + { + type: "close-domain-modals", + domain: "files-delete", + }, + { + type: "open-toast", + toastKey: `${id}filesDeletedToast`, + }, + ], + }, + }, + ], + }, + childrenKeys: [`${id}deleteModalConfirmButtonText`], + layout: { + flexLayout: { + direction: "row", + justifyContent: "center", + }, + }, + dataProvider: { + source: "form-fields", + formKey: `${id}fileListForm`, + fields: [ + { + providerField: "selectedItems", + componentField: "config.actions[1].ids", + }, + ], + }, + }, + [`${id}deleteModalConfirmButtonText`]: { + component: "format-message", + config: { + messageTemplate: + "Delete {selectedItems, plural, one {file} other {files}}", + }, + dataProvider: { + source: "form-fields", + formKey: `${id}fileListForm`, + fields: [ + { + providerField: "selectedItems", + componentField: "data.fields.selectedItems", + modifier: "length", + }, + ], + }, + }, + [`${id}filesDeletedToast`]: { + component: "toast", + childrenKeys: [ + `${id}filesDeletedToastIcon`, + `${id}filesDeletedToastText`, + ], + }, + [`${id}filesDeletedToastIcon`]: { + component: "icon", + config: { + type: IconType.Success, + }, + }, + [`${id}filesDeletedToastText`]: { + component: "p1-component", + childrenKeys: [`${id}filesDeletedToastMessage`], + }, + [`${id}filesDeletedToastMessage`]: { + component: "format-message", + config: { + messageTemplate: + "{selectedItems} {selectedItems, plural, one {file} other {files}} deleted", + }, + dataProvider: { + source: "form-fields", + formKey: `${id}fileListForm`, + fields: [ + { + providerField: "selectedItems", + componentField: "data.fields.selectedItems", + modifier: "length", + }, + ], + }, + }, + [`${id}deleteProgressModal`]: { + component: "modal", + config: { + size: "small", + }, + childrenKeys: [ + `${id}deleteProgressModalIcon`, + `${id}deleteProgressModalTitle`, + ], + }, + [`${id}deleteProgressModalIcon`]: { + component: "modal.titleIcon", + config: { + type: IconType.SpinnerDark, + }, + }, + [`${id}deleteProgressModalTitle`]: { + component: "modal.title", + config: { + text: "Deleting, please wait...", + }, + }, + } +} diff --git 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 index b3f0b0a407..e45666eb45 100644 --- 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 @@ -3,7 +3,8 @@ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md */ -import { Subview } from "generic-view/utils" +import { Subview, IconType } from "generic-view/utils" +import { generateDeleteFiles } from "./delete-files" interface FileListConfig { id: string @@ -65,6 +66,7 @@ const generateFileList = ({ formOptions: { defaultValues: { selectedItems: [], + allItems: [], }, }, }, @@ -82,7 +84,38 @@ const generateFileList = ({ columns: [], }, }, - childrenKeys: [`${id}fileListPanel`, `${id}fileListContent`], + childrenKeys: [`${id}fileListPanelManager`, `${id}fileListContent`], + }, + [`${id}fileListPanelManager`]: { + component: "block-plain", + childrenKeys: [ + `${id}fileListPanelDefaultMode`, + `${id}fileListPanelSelectMode`, + ], + layout: { + gridPlacement: { + row: 1, + column: 1, + width: 1, + height: 1, + }, + }, + }, + [`${id}fileListPanelDefaultMode`]: { + component: "conditional-renderer", + childrenKeys: [`${id}fileListPanel`], + dataProvider: { + source: "form-fields", + fields: [ + { + providerField: "selectedItems", + componentField: "data.render", + modifier: "length", + condition: "eq", + value: 0, + }, + ], + }, }, [`${id}fileListPanel`]: { component: "block-plain", @@ -138,6 +171,93 @@ const generateFileList = ({ }, childrenKeys: [`${id}fileListEmptyStateAddFileButton`], }, + [`${id}fileListPanelSelectMode`]: { + component: "conditional-renderer", + childrenKeys: [`${id}fileListPanelSelector`], + dataProvider: { + source: "form-fields", + fields: [ + { + providerField: "selectedItems", + componentField: "data.render", + modifier: "length", + condition: "gt", + value: 0, + }, + ], + }, + }, + [`${id}fileListPanelSelector`]: { + component: "selection-manager", + childrenKeys: [ + `${id}selectAllCheckbox`, + `${id}selectedItemsCounter`, + `${id}deleteButton`, + ], + layout: { + margin: "32px", + padding: "8px 24px 8px 12px", + gridLayout: { + rows: ["auto"], + columns: ["auto", "1fr", "auto"], + alignItems: "center", + columnGap: "14px", + }, + }, + }, + [`${id}selectAllCheckbox`]: { + component: "form.checkboxInput", + config: { + name: "selectedItems", + size: "small", + }, + dataProvider: { + source: "form-fields", + fields: [ + { + providerField: "allItems", + componentField: "config.multipleValues", + }, + ], + }, + }, + [`${id}selectedItemsCounter`]: { + component: "p4-component", + childrenKeys: [`${id}selectedItemsCounterText`], + }, + [`${id}selectedItemsCounterText`]: { + component: "format-message", + config: { + messageTemplate: + "{selectedItems} {selectedItems, plural, one {file} other {files}} selected", + }, + dataProvider: { + source: "form-fields", + fields: [ + { + providerField: "selectedItems", + componentField: "data.fields.selectedItems", + modifier: "length", + }, + ], + }, + }, + [`${id}deleteButton`]: { + component: "button-text", + config: { + text: "Delete", + icon: IconType.Delete, + actions: [ + { + type: "open-modal", + modalKey: `${id}deleteModal`, + domain: "files-delete", + }, + ], + modifiers: ["uppercase"], + }, + }, + ...generateDeleteFiles(id, entitiesType), [`${id}fileListContent`]: { component: "block-plain", layout: { @@ -236,6 +356,7 @@ const generateFileList = ({ config: { formOptions: { selectedIdsFieldName: "selectedItems", + allIdsFieldName: "allItems", }, }, dataProvider: { From bd3334c387268ac24f03ef56fe155cd7e0693ec0 Mon Sep 17 00:00:00 2001 From: MateuszMudita Date: Fri, 20 Dec 2024 15:20:26 +0100 Subject: [PATCH 2/2] Fixed problem with not disappearing selection panel after deleting all items --- .../generated/mc-file-manager/file-list.ts | 99 ++++++++++--------- 1 file changed, 50 insertions(+), 49 deletions(-) diff --git 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 index e45666eb45..be7f06d374 100644 --- 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 @@ -79,13 +79,61 @@ const generateFileList = ({ }, layout: { width: "656px", + gridLayout: { + rows: [], + columns: [], + }, + }, + childrenKeys: [`${id}fileListContent`], + }, + [`${id}fileListContent`]: { + component: "block-plain", + layout: { gridLayout: { rows: ["auto", "1fr"], columns: [], }, }, - childrenKeys: [`${id}fileListPanelManager`, `${id}fileListContent`], + childrenKeys: [ + `${id}fileListEmptyStateWrapper`, + `${id}fileListEmptyTableWrapper`, + ], + }, + [`${id}fileListEmptyStateWrapper`]: { + component: "conditional-renderer", + dataProvider: { + source: "entities-metadata", + entitiesType, + fields: [ + { + modifier: "length", + providerField: "totalEntities", + componentField: "data.render", + condition: "eq", + value: 0, + }, + ], + }, + childrenKeys: [`${id}fileListPanel`, `${id}fileListEmptyState`], }, + [`${id}fileListEmptyTableWrapper`]: { + component: "conditional-renderer", + dataProvider: { + source: "entities-metadata", + entitiesType, + fields: [ + { + modifier: "length", + providerField: "totalEntities", + componentField: "data.render", + condition: "gt", + value: 0, + }, + ], + }, + childrenKeys: [`${id}fileListPanelManager`, `${id}fileListEmptyTable`], + }, + [`${id}fileListPanelManager`]: { component: "block-plain", childrenKeys: [ @@ -195,7 +243,7 @@ const generateFileList = ({ `${id}deleteButton`, ], layout: { - margin: "32px", + margin: "28px 32px", padding: "8px 24px 8px 12px", gridLayout: { rows: ["auto"], @@ -258,36 +306,6 @@ const generateFileList = ({ }, }, ...generateDeleteFiles(id, entitiesType), - [`${id}fileListContent`]: { - component: "block-plain", - layout: { - gridLayout: { - rows: [], - columns: [], - }, - }, - childrenKeys: [ - `${id}fileListEmptyStateWrapper`, - `${id}fileListEmptyTableWrapper`, - ], - }, - [`${id}fileListEmptyStateWrapper`]: { - component: "conditional-renderer", - dataProvider: { - source: "entities-metadata", - entitiesType, - fields: [ - { - modifier: "length", - providerField: "totalEntities", - componentField: "data.render", - condition: "eq", - value: 0, - }, - ], - }, - childrenKeys: [`${id}fileListEmptyState`], - }, [`${id}fileListEmptyState`]: { component: "block-plain", layout: { @@ -334,23 +352,6 @@ const generateFileList = ({ actions: [], }, }, - [`${id}fileListEmptyTableWrapper`]: { - component: "conditional-renderer", - dataProvider: { - source: "entities-metadata", - entitiesType, - fields: [ - { - modifier: "length", - providerField: "totalEntities", - componentField: "data.render", - condition: "gt", - value: 0, - }, - ], - }, - childrenKeys: [`${id}fileListEmptyTable`], - }, [`${id}fileListEmptyTable`]: { component: "table", config: {