diff --git a/libs/generic-view/ui/src/lib/generated/index.ts b/libs/generic-view/ui/src/lib/generated/index.ts index 3fc3ce1652..2e895eb5ae 100644 --- a/libs/generic-view/ui/src/lib/generated/index.ts +++ b/libs/generic-view/ui/src/lib/generated/index.ts @@ -9,14 +9,14 @@ import { mcFileManagerView, mcImportContactsButton, } from "generic-view/models" -import { generateMcContactsView } from "./mc-contacts-view" +import { generateMcContactsView } from "./mc-contacts-view/mc-contacts-view" import { generateMcFileManagerView } from "./mc-file-manager/mc-file-manager-view" import { generateFileManagerData } from "./mc-file-manager/mc-file-manager-data" import { generateMcImportContactsButton } from "./mc-import-contacts-button" import { View } from "generic-view/utils" export * from "./mc-import-contacts-button" -export * from "./mc-contacts-view" +export * from "./mc-contacts-view/mc-contacts-view" export const generatedViews = { [mcContactsView.key]: generateMcContactsView, diff --git a/libs/generic-view/ui/src/lib/generated/mc-contacts-view/delete-modal.tsx b/libs/generic-view/ui/src/lib/generated/mc-contacts-view/delete-modal.tsx new file mode 100644 index 0000000000..8d5b8c85ef --- /dev/null +++ b/libs/generic-view/ui/src/lib/generated/mc-contacts-view/delete-modal.tsx @@ -0,0 +1,206 @@ +/** + * 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" + +interface OtherFilesListItemConfig { + id: string + contactsToDelete: string + singleContact?: boolean +} + +const generateDeleteModal = ({ + id, + contactsToDelete, + singleContact, +}: OtherFilesListItemConfig): 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}DeleteModalContent`]: { + component: "p1-component", + config: { + text: "This can't be undone so please make a copy of any important information first.", + }, + }, + [`${id}DeleteModalButtons`]: { + component: "modal.buttons", + childrenKeys: [ + `${id}DeleteModalCancelButton`, + `${id}DeleteModalConfirmButton`, + ], + }, + [`${id}DeleteModalCancelButton`]: { + component: "button-secondary", + config: { + text: "Cancel", + actions: [ + { + type: "close-modal", + modalKey: "DeleteModal", + }, + ], + }, + }, + [`${id}DeleteModalConfirmButton`]: { + component: "button-primary", + config: { + actions: [ + { + type: "open-modal", + modalKey: "deleteProgressModal", + domain: "contacts-delete", + }, + { + type: "entities-delete", + entitiesType: "contacts", + ids: [], + postActions: { + success: [ + { + type: "close-domain-modals", + domain: "contacts-delete", + }, + { + type: "open-toast", + toastKey: `${id}ContactsDeletedToast`, + }, + ], + }, + }, + ], + }, + childrenKeys: [`${id}DeleteModalConfirmButtonText`], + layout: { + flexLayout: { + direction: "row", + justifyContent: "center", + }, + }, + dataProvider: { + source: "form-fields", + formKey: "contactsForm", + fields: [ + { + providerField: contactsToDelete, + componentField: singleContact + ? "config.actions[1].ids[0]" + : "config.actions[1].ids", + }, + ], + }, + }, + [`${id}DeleteModalConfirmButtonText`]: { + component: "format-message", + config: { + messageTemplate: singleContact + ? "Delete contact" + : "Delete {contactsToDelete, plural, one {contact} other {contacts}}", + }, + dataProvider: { + source: "form-fields", + formKey: "contactsForm", + fields: [ + { + providerField: contactsToDelete, + componentField: "data.fields.contactsToDelete", + modifier: "length", + }, + ], + }, + }, + [`${id}DeleteModalTitleText`]: { + component: "format-message", + config: { + messageTemplate: singleContact + ? "Delete contact" + : "Delete {contactsToDelete, plural, one {contact} other {# contacts}}?", + }, + dataProvider: { + source: "form-fields", + formKey: "contactsForm", + fields: [ + { + providerField: contactsToDelete, + componentField: "data.fields.contactsToDelete", + modifier: "length", + }, + ], + }, + }, + [`${id}ContactsDeletedToast`]: { + component: "toast", + childrenKeys: [ + `${id}ContactsDeletedToastIcon`, + `${id}ContactsDeletedToastText`, + ], + }, + [`${id}ContactsDeletedToastIcon`]: { + component: "icon", + config: { + type: IconType.Success, + }, + }, + [`${id}ContactsDeletedToastText`]: { + component: "p1-component", + childrenKeys: [`${id}ContactsDeletedToastMessage`], + }, + [`${id}ContactsDeletedToastMessage`]: { + component: "format-message", + config: { + messageTemplate: singleContact + ? "1 contact deleted" + : "{contactsToDelete} {contactsToDelete, plural, one {contact} other {contacts}} deleted", + }, + dataProvider: { + source: "form-fields", + formKey: "contactsForm", + fields: [ + { + providerField: contactsToDelete, + componentField: "data.fields.contactsToDelete", + modifier: "length", + }, + ], + }, + }, + } +} + +export const generateDeleteModals = ({ + configs, +}: { + configs: OtherFilesListItemConfig[] +}): Subview => { + const initialDeleteModalConfig: Subview = {} + + return configs.reduce((previousValue, config) => { + previousValue = { + ...previousValue, + ...generateDeleteModal(config), + } + return previousValue + }, initialDeleteModalConfig) +} diff --git a/libs/generic-view/ui/src/lib/generated/mc-contacts-view.ts b/libs/generic-view/ui/src/lib/generated/mc-contacts-view/mc-contacts-view.ts similarity index 92% rename from libs/generic-view/ui/src/lib/generated/mc-contacts-view.ts rename to libs/generic-view/ui/src/lib/generated/mc-contacts-view/mc-contacts-view.ts index 820243649e..80093f94a4 100644 --- a/libs/generic-view/ui/src/lib/generated/mc-contacts-view.ts +++ b/libs/generic-view/ui/src/lib/generated/mc-contacts-view/mc-contacts-view.ts @@ -5,6 +5,7 @@ import { ComponentGenerator, IconType } from "generic-view/utils" import { McContactsView } from "generic-view/models" +import { generateDeleteModals } from "./delete-modal" export const generateMcContactsView: ComponentGenerator = ( key, @@ -394,35 +395,13 @@ export const generateMcContactsView: ComponentGenerator = ( actions: [ { type: "open-modal", - modalKey: "deleteModal", + modalKey: "globalDeleteModal", domain: "contacts-delete", }, ], modifiers: ["uppercase"], }, }, - contactsDeletedToast: { - component: "toast", - childrenKeys: ["contactsDeletedToastIcon", "contactsDeletedToastText"], - }, - contactsDeletedToastMessage: { - component: "format-message", - config: { - messageTemplate: - "{selectedContacts} {selectedContacts, plural, one {contact} other {contacts}} deleted", - }, - dataProvider: { - source: "form-fields", - formKey: "contactsForm", - fields: [ - { - providerField: "selectedContacts", - componentField: "data.fields.selectedContacts", - modifier: "length", - }, - ], - }, - }, contactsTableWrapper: { component: "block-plain", layout: { @@ -791,118 +770,6 @@ export const generateMcContactsView: ComponentGenerator = ( ], }, }, - deleteModal: { - component: "modal", - config: { - size: "small", - }, - childrenKeys: [ - "deleteModalIcon", - "deleteModalTitle", - "deleteModalContent", - "deleteModalButtons", - ], - }, - deleteModalIcon: { - component: "modal.titleIcon", - config: { - type: IconType.Exclamation, - }, - }, - deleteModalTitle: { - component: "modal.title", - childrenKeys: ["deleteModalTitleText"], - }, - deleteModalContent: { - component: "p1-component", - config: { - text: "This can't be undone so please make a copy of any important information first.", - }, - }, - contactsDeletedToastText: { - component: "p1-component", - childrenKeys: ["contactsDeletedToastMessage"], - }, - deleteModalButtons: { - component: "modal.buttons", - childrenKeys: ["deleteModalCancelButton", "deleteModalConfirmButton"], - }, - deleteModalCancelButton: { - component: "button-secondary", - config: { - text: "Cancel", - actions: [ - { - type: "close-modal", - modalKey: "deleteModal", - }, - ], - }, - }, - deleteModalConfirmButton: { - component: "button-primary", - config: { - actions: [ - { - type: "open-modal", - modalKey: "deleteProgressModal", - domain: "contacts-delete", - }, - { - type: "entities-delete", - entitiesType: "contacts", - ids: [], - postActions: { - success: [ - { - type: "close-domain-modals", - domain: "contacts-delete", - }, - { - type: "open-toast", - toastKey: "contactsDeletedToast", - }, - ], - }, - }, - ], - }, - childrenKeys: ["deleteModalConfirmButtonText"], - layout: { - flexLayout: { - direction: "row", - justifyContent: "center", - }, - }, - dataProvider: { - source: "form-fields", - formKey: "contactsForm", - fields: [ - { - providerField: "selectedContacts", - componentField: "config.actions[1].ids", - }, - ], - }, - }, - deleteModalConfirmButtonText: { - component: "format-message", - config: { - messageTemplate: - "Delete {selectedContacts, plural, one {contact} other {contacts}}", - }, - dataProvider: { - source: "form-fields", - formKey: "contactsForm", - fields: [ - { - providerField: "selectedContacts", - componentField: "data.fields.selectedContacts", - modifier: "length", - }, - ], - }, - }, deleteProgressModal: { component: "modal", config: { @@ -922,12 +789,6 @@ export const generateMcContactsView: ComponentGenerator = ( text: "Deleting, please wait...", }, }, - contactsDeletedToastIcon: { - component: "icon", - config: { - type: IconType.Success, - }, - }, emptyListWrapper: { component: "conditional-renderer", dataProvider: { @@ -1037,24 +898,6 @@ export const generateMcContactsView: ComponentGenerator = ( }, }, }, - deleteModalTitleText: { - component: "format-message", - config: { - messageTemplate: - "Delete {selectedContacts, plural, one {contact} other {# contacts}}?", - }, - dataProvider: { - source: "form-fields", - formKey: "contactsForm", - fields: [ - { - providerField: "selectedContacts", - componentField: "data.fields.selectedContacts", - modifier: "length", - }, - ], - }, - }, appHeaderCounter: { component: "app-portal", config: { @@ -1180,7 +1023,7 @@ export const generateMcContactsView: ComponentGenerator = ( }, padding: "24px 32px", }, - childrenKeys: ["contactDisplayNameHeader", "disableButton"], + childrenKeys: ["contactDisplayNameHeader", "contactDetailsHeaderActions"], }, contactDisplayNameHeader: { component: "h3-component", @@ -1191,6 +1034,31 @@ export const generateMcContactsView: ComponentGenerator = ( }, childrenKeys: ["contactDisplayNameValue"], }, + contactDetailsHeaderActions: { + component: "block-plain", + layout: { + flexLayout: { + direction: "row", + alignItems: "center", + columnGap: "14px", + }, + }, + childrenKeys: ["contactDetailsHeaderDeleteAction", "disableButton"], + }, + contactDetailsHeaderDeleteAction: { + component: "button-icon", + config: { + icon: IconType.Delete, + iconSize: "large", + actions: [ + { + type: "open-modal", + modalKey: "detailsDeleteModal", + domain: "contacts-delete", + }, + ], + }, + }, contactInformationText: { component: "h4-component", layout: { @@ -2157,5 +2025,15 @@ export const generateMcContactsView: ComponentGenerator = ( ], }, }, + ...generateDeleteModals({ + configs: [ + { id: "global", contactsToDelete: "selectedContacts" }, + { + id: "details", + contactsToDelete: "activeContactId", + singleContact: true, + }, + ], + }), } }