From 1fc9ebd49e467f45f8ae871bba3ed6b5422b66d2 Mon Sep 17 00:00:00 2001 From: JEFFREY-Bonson Date: Tue, 2 Apr 2024 12:47:44 +0530 Subject: [PATCH] Fix company tags style --- .../settings-company-tags/index.jsx | 94 +++++++++++-------- app/stylesheet/application-webpack.scss | 1 + app/stylesheet/miq-custom-accordion.scss | 21 +++++ 3 files changed, 78 insertions(+), 38 deletions(-) create mode 100644 app/stylesheet/miq-custom-accordion.scss diff --git a/app/javascript/components/settings-company-tags/index.jsx b/app/javascript/components/settings-company-tags/index.jsx index 92d325ac5a0..ebaddb422d4 100644 --- a/app/javascript/components/settings-company-tags/index.jsx +++ b/app/javascript/components/settings-company-tags/index.jsx @@ -1,11 +1,13 @@ import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; -import { Button } from 'carbon-components-react'; +import { Button, Accordion, AccordionItem } from 'carbon-components-react'; +import { AddAlt16 } from '@carbon/icons-react'; import MiqDataTable from '../miq-data-table'; import MiqStructuredList from '../miq-structured-list'; import SettingsCompanyTagsEntryForm from '../settings-company-tags-entry-form'; import { rowData, CellAction } from '../miq-data-table/helper'; import NoRecordsFound from '../no-records-found'; +import MiqConfirmActionModal, { modalCallbackTypes } from '../miq-confirm-action-modal'; import { http } from '../../http_api'; import { categoryOptions, pageData } from './helper'; @@ -25,6 +27,7 @@ const SettingsCompanyTags = ({ pageTitle, categoryId }) => { list: undefined, isLoading: true, listLoading: true, + confirm: false, }); /** Function to fetch the information needed for summary and list when the select box is changed. */ @@ -34,6 +37,7 @@ const SettingsCompanyTags = ({ pageTitle, categoryId }) => { const { summary, list, selectedCategory } = pageData(response, data.options); setData({ ...data, + confirm: false, summary, list, selectedCategory, @@ -70,7 +74,7 @@ const SettingsCompanyTags = ({ pageTitle, categoryId }) => { }); }; - /** Function to be exeuted after the add/save/cancel/delete action */ + /** Function to be executed after the add/save/cancel/delete action */ const formCallback = (actionType, responseData) => { if (responseData.status === 'error') { return setData({ @@ -100,20 +104,7 @@ const SettingsCompanyTags = ({ pageTitle, categoryId }) => { /** Function to handle the delete button click event from the list. */ const onButtonCallback = (item) => { if (item && item.callbackAction && item.callbackAction === 'deleteEntryCallback') { - // confirm box will be changed after other tab contents are changed. - // eslint-disable-next-line no-alert - if (window.confirm(__('Are you sure you want to delete this entry?'))) { - miqSparkleOn(); - http.post(`/ops/ce_delete/${data.selectedCategory.id}?entry_id=${item.id}`).then((response) => { - setData({ - ...data, - notification: { visible: true, type: 'danger', message: response.message }, - }); - miqSparkleOff(); - add_flash(__('Category entry was successfully deleted'), response.type); - return categoryInformation(response.category_id); - }); - } + setData({ ...data, selectedEntryId: item.id, confirm: true }); } }; @@ -128,27 +119,36 @@ const SettingsCompanyTags = ({ pageTitle, categoryId }) => { } }; + const deleteEntry = (actionType) => { + if (actionType === modalCallbackTypes.OK) { + miqSparkleOn(); + http.post(`/ops/ce_delete/${data.selectedCategory.id}?entry_id=${data.selectedEntryId}`).then((response) => { + setData({ + ...data, + confirm: false, + notification: { visible: true, type: 'danger', message: response.message }, + }); + miqSparkleOff(); + add_flash(__('Category entry was successfully deleted'), response.type); + return categoryInformation(response.category_id); + }); + } else { + setData({ ...data, confirm: false }); + } + }; + /** Function to render the add new button */ const renderActionButton = () => ( - - ); - - /** Function to render the title bar */ - const renderTitleBar = (title, hasButton) => ( -
-
-

{title}

-
-
- { - hasButton && renderActionButton() - } +
+
); @@ -158,12 +158,23 @@ const SettingsCompanyTags = ({ pageTitle, categoryId }) => { return ( onDropDownChange(dropDownData)} // ToDo: onClick must be generic name /> ); }; + /** Function to render a confirmation-modal-box. */ + const renderConfirmModal = () => { + const modalData = { + open: data.confirm, + confirm: __('Are you sure you want to delete this entry?'), + callback: (actionType) => deleteEntry(actionType), + }; + return ; + }; + /** Function to render the entries list with a header and button. */ const renderList = () => { if (!data.list) { @@ -174,7 +185,7 @@ const SettingsCompanyTags = ({ pageTitle, categoryId }) => { return ( <> - {renderTitleBar(sprintf(__('%s Entries'), data.selectedCategory.description), true)} + {renderActionButton()} { showPagination={false} mode="settings-company-tags-list" /> + { + data.confirm && renderConfirmModal() + } {miqRows.rowItems.length === 0 && } ); @@ -205,7 +219,12 @@ const SettingsCompanyTags = ({ pageTitle, categoryId }) => { const renderTabContent = () => ( <> {data.summary && data.options && renderSummary()} - {data.pageType === pageTypes.list ? renderList() : renderForm()} + + + {data.pageType === pageTypes.list ? renderList() : renderForm()} + + + ); @@ -215,7 +234,6 @@ const SettingsCompanyTags = ({ pageTitle, categoryId }) => { */ return ( <> - {renderTitleBar(pageTitle, false)} {!data.isLoading && renderTabContent()} ); diff --git a/app/stylesheet/application-webpack.scss b/app/stylesheet/application-webpack.scss index 071395f0456..aa61b6787dc 100644 --- a/app/stylesheet/application-webpack.scss +++ b/app/stylesheet/application-webpack.scss @@ -14,6 +14,7 @@ @import './ddf_override.scss'; @import './menu.scss'; @import './miq-custom-tab.scss'; +@import './miq-custom-accordion.scss'; @import './miq-data-table.scss'; @import './miq-table-toolbar.scss'; @import './miq-structured-list.scss'; diff --git a/app/stylesheet/miq-custom-accordion.scss b/app/stylesheet/miq-custom-accordion.scss new file mode 100644 index 00000000000..8544f05acf5 --- /dev/null +++ b/app/stylesheet/miq-custom-accordion.scss @@ -0,0 +1,21 @@ +.miq-custom-accordion + { + border: 1px solid #e0e0e0; + + li button.bx--accordion__heading { + background: #e0e0e0; + } + .bx--accordion__item:last-child{ + border: 0; + } + + .bx--accordion__content { + padding: 20px; + margin: 0; + + .custom-accordion-buttons { + display: flex; + justify-content: flex-end; + } + } + }