Skip to content

Commit

Permalink
fix: issue with remove images on marketing settings (#532)
Browse files Browse the repository at this point in the history 
* Fix issue with remove images on marketing settings

Signed-off-by: Tomás Castillo <[email protected]>

* remove duplicate setState

Signed-off-by: Tomás Castillo <[email protected]>

* Use file as part of entity

Signed-off-by: Tomás Castillo <[email protected]>

* Add new constants for settings types

Signed-off-by: Tomás Castillo <[email protected]>

---------

Signed-off-by: Tomás Castillo <[email protected]>
  • Loading branch information
@tomrndom
tomrndom authored Nov 4, 2024
1 parent 68877ec commit 6c1bb4a
Show file tree
Hide file tree
Showing 5 changed files with 89 additions and 72 deletions.
12 changes: 8 additions & 4 deletions src/actions/marketing-actions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,9 @@ import { getAccessTokenSafely } from "../utils/methods";
import {
DEFAULT_PER_PAGE,
ERROR_CODE_412,
HUNDRED_PER_PAGE
HUNDRED_PER_PAGE,
MARKETING_SETTING_TYPE_FILE,
MARKETING_SETTING_TYPE_HEX_COLOR
} from "../utils/constants";

export const REQUEST_SETTINGS = "REQUEST_SETTINGS";
Expand Down Expand Up @@ -207,9 +209,11 @@ export const resetSettingForm = () => (dispatch) => {
export const saveMarketingSetting =
(entity, file = null) =>
async (dispatch, getState) => {
if (entity.type === "FILE" && !file) return Promise.resolve();
if (entity.type === MARKETING_SETTING_TYPE_FILE && !file)
return Promise.resolve();
// TODO: review to save hex color settings with empty values
if (entity.type === "HEX_COLOR" && !entity.value) return Promise.resolve();
if (entity.type === MARKETING_SETTING_TYPE_HEX_COLOR && !entity.value)
return Promise.resolve();

const { currentSummitState } = getState();
const accessToken = await getAccessTokenSafely();
Expand Down Expand Up @@ -321,7 +325,7 @@ const normalizeEntity = (entity, summitId) => {
delete normalizedEntity.id;
delete normalizedEntity.created;
delete normalizedEntity.modified;
if (entity.type !== "FILE") {
if (entity.type !== MARKETING_SETTING_TYPE_FILE) {
delete normalizedEntity.file;
}

Expand Down
72 changes: 43 additions & 29 deletions src/components/forms/marketing-setting-form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
**/
* */

import React from "react";
import T from "i18n-react/dist/i18n-react";
Expand All @@ -20,17 +20,22 @@ import {
UploadInput,
TextEditorV2
} from "openstack-uicore-foundation/lib/components";
import Swal from "sweetalert2";
import { isEmpty, scrollToError, shallowEqual } from "../../utils/methods";
import history from "../../history";
import HexColorInput from "../inputs/hex-color-input";

import Swal from "sweetalert2";
import {
MARKETING_SETTING_TYPE_FILE,
MARKETING_SETTING_TYPE_HEX_COLOR,
MARKETING_SETTING_TYPE_TEXT,
MARKETING_SETTING_TYPE_TEXTAREA
} from "../../utils/constants";

const setting_types_ddl = [
{ label: "Plain Text", value: "TEXT" },
{ label: "Html", value: "TEXTAREA" },
{ label: "File", value: "FILE" },
{ label: "Hex Color", value: "HEX_COLOR" }
{ label: "Plain Text", value: MARKETING_SETTING_TYPE_TEXT },
{ label: "Html", value: MARKETING_SETTING_TYPE_TEXTAREA },
{ label: "File", value: MARKETING_SETTING_TYPE_FILE },
{ label: "Hex Color", value: MARKETING_SETTING_TYPE_HEX_COLOR }
];

class MarketingSettingForm extends React.Component {
Expand All @@ -48,7 +53,7 @@ class MarketingSettingForm extends React.Component {
this.handleRemoveFile = this.handleRemoveFile.bind(this);
}

componentDidUpdate(prevProps, prevState, snapshot) {
componentDidUpdate(prevProps) {
const state = {};
scrollToError(this.props.errors);

Expand All @@ -67,8 +72,8 @@ class MarketingSettingForm extends React.Component {
}

handleChange(ev) {
let entity = { ...this.state.entity };
let errors = { ...this.state.errors };
const newEntity = { ...this.state.entity };
const newErrors = { ...this.state.errors };
let { value, id } = ev.target;

if (ev.target.type === "checkbox") {
Expand All @@ -79,26 +84,26 @@ class MarketingSettingForm extends React.Component {
value = parseInt(ev.target.value);
}

errors[id] = "";
entity[id] = value;
this.setState({ entity: entity, errors: errors });
newErrors[id] = "";
newEntity[id] = value;
this.setState({ entity: newEntity, errors: newErrors });
}

handleSubmit(ev) {
ev.preventDefault();
const { entity, file } = this.state;
const { entity } = this.state;
const { currentSummit } = this.props;
if (
(entity.type !== "FILE" && !entity.value) ||
(entity.type === "FILE" && !file)
(entity.type !== MARKETING_SETTING_TYPE_FILE && !entity.value) ||
(entity.type === MARKETING_SETTING_TYPE_FILE && !entity.file)
) {
const msg = `${
setting_types_ddl.find((e) => e.value === entity.type)?.label
}: This field may not be blank.`;
return Swal.fire("Validation error", msg, "warning");
}

this.props.onSubmit(entity, file).then((payload) => {
this.props.onSubmit(entity, entity.file).then((payload) => {
if (entity.id && entity.id > 0) {
// UPDATE
this.props.showSuccessMessage(T.translate("marketing.setting_saved"));
Expand All @@ -120,7 +125,7 @@ class MarketingSettingForm extends React.Component {
}

hasErrors(field) {
let { errors } = this.state;
const { errors } = this.state;
if (field in errors) {
return errors[field];
}
Expand All @@ -129,18 +134,27 @@ class MarketingSettingForm extends React.Component {
}

handleUploadFile(file) {
let entity = { ...this.state.entity };
const newEntity = { ...this.state.entity };

entity.file_preview = file.preview;
newEntity.file = file;
newEntity.file_preview = file.preview;

this.setState({ file: file, entity: entity });
this.setState({ entity: newEntity });
}

handleRemoveFile(ev) {
let entity = { ...this.state.entity };
handleRemoveFile() {
const newEntity = { ...this.state.entity };

newEntity.file_preview = "";
newEntity.file = "";

if (newEntity.id) {
this.props.onDeleteImage(newEntity.id).then(() => {
newEntity.id = 0;
});
}

entity.file_preview = "";
this.setState({ entity: entity });
this.setState({ entity: newEntity });
}

render() {
Expand Down Expand Up @@ -183,7 +197,7 @@ class MarketingSettingForm extends React.Component {
</div>
</div>
<div className="row form-group">
{entity.type === "TEXT" && (
{entity.type === MARKETING_SETTING_TYPE_TEXT && (
<div className="col-md-4">
<label> {T.translate("marketing.plain_text")} *</label>
<Input
Expand All @@ -195,7 +209,7 @@ class MarketingSettingForm extends React.Component {
/>
</div>
)}
{entity.type === "TEXTAREA" && (
{entity.type === MARKETING_SETTING_TYPE_TEXTAREA && (
<div className="col-md-8">
<label> {T.translate("marketing.html")} *</label>
<TextEditorV2
Expand All @@ -206,7 +220,7 @@ class MarketingSettingForm extends React.Component {
/>
</div>
)}
{entity.type === "FILE" && (
{entity.type === MARKETING_SETTING_TYPE_FILE && (
<div className="col-md-12">
<label> {T.translate("marketing.file")} *</label>
<UploadInput
Expand All @@ -218,7 +232,7 @@ class MarketingSettingForm extends React.Component {
/>
</div>
)}
{entity.type === "HEX_COLOR" && (
{entity.type === MARKETING_SETTING_TYPE_HEX_COLOR && (
<div className="col-md-4">
<label> {T.translate("marketing.hex_color")} *</label>
<HexColorInput
Expand Down
7 changes: 5 additions & 2 deletions src/pages/marketing/edit-marketing-setting-page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@ import { getSummitById } from "../../actions/summit-actions";
import {
getMarketingSetting,
resetSettingForm,
saveMarketingSetting
saveMarketingSetting,
deleteSetting
} from "../../actions/marketing-actions";
import "../../styles/edit-marketing-setting-page.less";
import AddNewButton from "../../components/buttons/add-new-button";
Expand All @@ -41,7 +42,7 @@ class EditMarketingSettingPage extends React.Component {
}
}

componentDidUpdate(prevProps, prevState, snapshot) {
componentDidUpdate(prevProps) {
const oldId = prevProps.match.params.setting_id;
const newId = this.props.match.params.setting_id;

Expand Down Expand Up @@ -75,6 +76,7 @@ class EditMarketingSettingPage extends React.Component {
entity={entity}
errors={errors}
onSubmit={this.props.saveMarketingSetting}
onDeleteImage={this.props.deleteSetting}
showMessage={this.props.showMessage}
showSuccessMessage={this.props.showSuccessMessage}
/>
Expand All @@ -94,6 +96,7 @@ export default connect(mapStateToProps, {
getMarketingSetting,
resetSettingForm,
saveMarketingSetting,
deleteSetting,
showMessage,
showSuccessMessage
})(EditMarketingSettingPage);
65 changes: 28 additions & 37 deletions src/reducers/marketing/marketing-setting-reducer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,10 @@
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
**/
* */

import { VALIDATE } from "openstack-uicore-foundation/lib/utils/actions";
import { LOGOUT_USER } from "openstack-uicore-foundation/lib/security/actions";

import {
RECEIVE_SETTING,
Expand All @@ -18,8 +21,6 @@ import {
SETTING_ADDED
} from "../../actions/marketing-actions";

import { VALIDATE } from "openstack-uicore-foundation/lib/utils/actions";
import { LOGOUT_USER } from "openstack-uicore-foundation/lib/security/actions";
import { SET_CURRENT_SUMMIT } from "../../actions/summit-actions";

export const DEFAULT_ENTITY = {
Expand All @@ -28,6 +29,7 @@ export const DEFAULT_ENTITY = {
type: null,
value: "",
file_preview: "",
file: "",
selection_plan_id: 0
};

Expand All @@ -39,46 +41,35 @@ const DEFAULT_STATE = {
const marketingSettingReducer = (state = DEFAULT_STATE, action) => {
const { type, payload } = action;
switch (type) {
case LOGOUT_USER:
{
// we need this in case the token expired while editing the form
if (payload.hasOwnProperty("persistStore")) {
return state;
} else {
return { ...state, entity: { ...DEFAULT_ENTITY }, errors: {} };
}
case LOGOUT_USER: {
// we need this in case the token expired while editing the form
if (payload.hasOwnProperty("persistStore")) {
return state;
}
break;
return { ...state, entity: { ...DEFAULT_ENTITY }, errors: {} };
}
case SET_CURRENT_SUMMIT:
case RESET_SETTING_FORM:
{
return { ...state, entity: { ...DEFAULT_ENTITY }, errors: {} };
}
break;
case UPDATE_SETTING:
{
return { ...state, entity: { ...payload }, errors: {} };
}
break;
case RESET_SETTING_FORM: {
return { ...state, entity: { ...DEFAULT_ENTITY }, errors: {} };
}
case UPDATE_SETTING: {
return { ...state, entity: { ...payload }, errors: {} };
}
case SETTING_ADDED:
case RECEIVE_SETTING:
{
let entity = { ...payload.response };
case RECEIVE_SETTING: {
const entity = { ...payload.response };

for (var key in entity) {
if (entity.hasOwnProperty(key)) {
entity[key] = entity[key] == null ? "" : entity[key];
}
for (const key in entity) {
if (entity.hasOwnProperty(key)) {
entity[key] = entity[key] == null ? "" : entity[key];
}

return { ...state, entity: { ...DEFAULT_ENTITY, ...entity } };
}
break;
case VALIDATE:
{
return { ...state, errors: payload.errors };
}
break;

return { ...state, entity: { ...DEFAULT_ENTITY, ...entity } };
}
case VALIDATE: {
return { ...state, errors: payload.errors };
}
default:
return state;
}
Expand Down
5 changes: 5 additions & 0 deletions src/utils/constants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,3 +146,8 @@ export const TRIM_TEXT_LENGTH_40 = 50;
export const LANGUAGE_CODE_LENGTH = 2;

export const SLICE_TICKET_NUMBER = -15;

export const MARKETING_SETTING_TYPE_TEXT = "TEXT";
export const MARKETING_SETTING_TYPE_TEXTAREA = "TEXTAREA";
export const MARKETING_SETTING_TYPE_FILE = "FILE";
export const MARKETING_SETTING_TYPE_HEX_COLOR = "HEX_COLOR";

0 comments on commit 6c1bb4a

Please sign in to comment.