tabexseriescomponents 0.0.706 → 0.0.708

package/srcoman/TabexComponents/Sections/BackgroundImages/DynamicForm/DynamicForm copy.jsx

@@ -0,0 +1,291 @@
+import React, { useEffect, useState, useContext } from 'react';
+import { css } from 'glamor';
+import TextareaAutosize from 'react-textarea-autosize';
+import formstyles from '../../../../styles/general/form.module.css';
+import { CircularProgress } from 'react-cssfx-loading';
+
+const DynamicForm = (props) => {
+    const lang = props.actions.lang;
+    const langdetect = props.actions.langdetect;
+    const StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
+    const NotificationManager = props.actions.NotificationManager;
+    const dynamicformid = props.actions.dynamicformid;
+    const GeneralAPIMutationContext = props.actions.GeneralAPIMutationContext;
+    const fetchdynamicformfeildsQueryContext = props.actions.fetchdynamicformfeildsQueryContext;
+    const [sectionproperties, setsectionproperties] = useState('');
+    const [dynamicform, setdynamicform] = useState({});
+    const [formtitleen, setformtitleen] = useState('');
+    const [formtitlear, setformtitlear] = useState('');
+    const [confirmationtext, setconfirmationtext] = useState('');
+    useEffect(() => {
+        var secpropobj = {};
+        StatePagePropertiesContext.pageobj.sections.forEach(function (sectionitem, sectionindex) {
+            if (sectionitem.sectionid == props.sectionidprops) {
+                sectionitem.sectionproperties.forEach(function (sectionpropertiesobj, sectionpropertiesindex) {
+                    secpropobj[sectionpropertiesobj.property_css_name] = sectionpropertiesobj.property_value;
+                });
+            }
+        });
+        setsectionproperties({ ...secpropobj });
+    }, [StatePagePropertiesContext]);
+    useEffect(() => {
+        if (fetchdynamicformfeildsQueryContext.isSuccess) {
+            fetchdynamicformfeildsQueryContext?.data?.data?.dynamicforms?.forEach(function (item, index) {
+                if (item.id == dynamicformid) {
+                    var tempitem = item;
+                    tempitem?.fields?.forEach(function (fielditem) {
+                        fielditem.value = '';
+                    });
+                    setdynamicform(tempitem);
+                    var temptitleen = tempitem.title_en;
+                    var temptitlear = tempitem.title_ar;
+                    setformtitleen(temptitleen);
+                    setformtitlear(temptitlear);
+                }
+            });
+        }
+    }, [fetchdynamicformfeildsQueryContext.isSuccess]);
+    const updateformfield = (value, index) => {
+        var tempynamicform = { ...dynamicform };
+        tempynamicform.fields[index].value = value;
+        setdynamicform({ ...dynamicform });
+    };
+    const submitform = () => {
+        var tempynamicform = { ...dynamicform };
+        var fields = tempynamicform.fields;
+        var validationpassed = true;
+        var reason = '';
+        fields?.forEach(function (item, index) {
+            if (item.isrequired == 1) {
+                if (item.value != undefined && item.value != null) {
+                    if (item.value.length == 0) {
+                        validationpassed = false;
+                        reason = item.title_en + ' ' + 'Is Missing';
+                    }
+                }
+            }
+        });
+        if (validationpassed) {
+            GeneralAPIMutationContext.mutate({
+                endpointurl: '/submitdynamicforms',
+                data: tempynamicform,
+                mutateSuccesscallback: function mutateSuccesscallback(data, variables) {
+                    //   setslots(data.data.slots);
+                    // alert('done');
+                    clearform();
+                    setconfirmationtext(langdetect == 'en' ? 'We have recieved your message' : 'تم استقبال رسالتك');
+                },
+            });
+        } else {
+            NotificationManager.warning('', reason);
+        }
+    };
+    const clearform = () => {
+        var tempitem = { ...dynamicform };
+        tempitem?.fields?.forEach(function (fielditem) {
+            fielditem.value = '';
+        });
+        setdynamicform(tempitem);
+    };
+
+    const inputitem = (item, index) => {
+        var type = 'input';
+        if (item.type == 'date') {
+            type = 'date';
+        } else if (item.type == 'number') {
+            type = 'number';
+        } else if (item.type == 'text') {
+            type = 'text';
+        }
+        return (
+            <div class="row m-0 w-100 mb-3">
+                <div class="col-lg-12 text-start mb-2">
+                    <p class={form_cssstyles.formlabel + ' m-0 p-0 '} style={{}}>
+                        {langdetect == 'en' ? item.title_en : item.title_ar} {item.isrequired == 1 ? '*' : ''}
+                    </p>
+                </div>
+                <div class="col-lg-12 text-start">
+                    <input
+                        type={type}
+                        value={item.value}
+                        onChange={(event) => {
+                            updateformfield(event.target.value, index);
+                        }}
+                        className={`${formstyles.form_control} ${form_cssstyles.form_control}`}
+                    />
+                </div>
+            </div>
+        );
+    };
+    const textareaitem = (item, index) => {
+        return (
+            <div class="row m-0 w-100 mb-3">
+                <div class="col-lg-12 text-start mb-2">
+                    <p class={form_cssstyles.formlabel + ' m-0 p-0 '} style={{}}>
+                        {langdetect == 'en' ? item.title_en : item.title_ar} {item.isrequired == 1 ? '*' : ''}
+                    </p>
+                </div>
+                <div class="col-lg-12 text-start">
+                    <TextareaAutosize
+                        value={item.value}
+                        onChange={(event) => {
+                            updateformfield(event.target.value, index);
+                        }}
+                        className={`${formstyles.form_control} ${form_cssstyles.form_control}`}
+                    />
+                </div>
+            </div>
+        );
+    };
+    const selectboxitem = (item, index) => {
+        var itemsarr = item.selectboxvalues;
+        if (itemsarr != undefined) {
+            var decoditems = JSON.parse(itemsarr);
+            if (decoditems != undefined && Array.isArray(decoditems)) {
+                return (
+                    <div class="row m-0 w-100 mb-3">
+                        <div class="col-lg-12 text-start mb-2">
+                            <p class={form_cssstyles.formlabel + ' m-0 p-0 '} style={{}}>
+                                {langdetect == 'en' ? item.title_en : item.title_ar} {item.isrequired == 1 ? '*' : ''}
+                            </p>
+                        </div>
+                        <div class="col-lg-12 text-start">
+                            <select
+                                value={item.value}
+                                onChange={(event) => {
+                                    updateformfield(event.target.value, index);
+                                }}
+                                className={`${formstyles.form_control} ${form_cssstyles.form_control}`}
+                            >
+                                <option value="">Choose</option>
+                                {decoditems?.map(function (sitem) {
+                                    return <option value={sitem.optionname_en}>{sitem.optionname_en}</option>;
+                                })}
+                            </select>
+                        </div>
+                    </div>
+                );
+            }
+        }
+    };
+    const form_cssstyles = {
+        formlabel: css({
+            color: sectionproperties.form_labelcolor,
+            fontSize: sectionproperties.form_labelfontsize + 'px',
+            fontWeight: sectionproperties.form_labelfontweight,
+        }),
+        form_control: css({
+            position: 'relative',
+            display: 'flex',
+            alignItems: 'center',
+            display: 'block',
+            width: '100%',
+            padding: '0 30px',
+            transition: '.3s',
+            fontWeight: 500,
+            border: sectionproperties.inputfieldbordertype == 'All' ? sectionproperties.inputfieldborderWidth + 'px solid ' + sectionproperties.inputfieldborderColor : 0,
+            borderBottom: sectionproperties.inputfieldborderWidth + 'px solid ' + sectionproperties.inputfieldborderColor,
+            borderRadius: sectionproperties.inputfieldborderradius + 'px',
+            height: sectionproperties.inputfieldheight + 'px',
+            background: 'transparent',
+            color: sectionproperties.inputfieldcolor,
+            fontSize: sectionproperties.inputfieldfontsize + 'px',
+            ':focus': {
+                borderColor: sectionproperties.inputfeildbordercoloronfocus,
+                boxShadow: 'none',
+                transition: '.3s',
+            },
+        }),
+        generalbtn: css({
+            width: sectionproperties.generalbtn_width + '%',
+            height: sectionproperties.generalbtn_height + 'px',
+            backgroundColor: sectionproperties.generalbtn_bgColor,
+            borderRadius: sectionproperties.generalbtn_bgColor,
+            color: sectionproperties.generalbtn_textColor,
+            fontSize: sectionproperties.generalbtn_fontsize,
+            fontWeight: sectionproperties.generalbtn_fontweight,
+            ':hover': {
+                transition: '.3s',
+                color: sectionproperties.generalbtn_textColoronhover,
+                backgroundColor: sectionproperties.generalbtn_bgColoronhover,
+            },
+        }),
+    };
+    return (
+        <div
+            class={'row m-0 w-100 h-100 px-md-2'}
+            style={{
+                background: sectionproperties.backgroundColor,
+                paddingLeft: sectionproperties.cardpaddinghorizontal + 'px',
+                paddingRight: sectionproperties.cardpaddinghorizontal + 'px',
+                paddingTop: sectionproperties.cardpaddingvertical + 'px',
+                paddingBottom: sectionproperties.cardpaddingvertical + 'px',
+            }}
+        >
+            <div
+                class="col-lg-12 text-start"
+                style={{
+                    marginTop: sectionproperties.sectionTitleMarginTop + 'px',
+                    marginBottom: sectionproperties.sectionTitleMarginBottom + 'px',
+                }}
+            >
+                <p
+                    class="m-0 p-0"
+                    style={{
+                        color: sectionproperties.sectionTitleColor,
+                        fontSize: sectionproperties.sectionTitleFontSize + 'px',
+                        fontWeight: sectionproperties.sectionTitleFontWeight,
+                    }}
+                >
+                    {langdetect == 'en' ? formtitleen : formtitlear}
+                </p>
+            </div>
+            {dynamicform?.id != undefined && (
+                <div class={'row m-0 w-100 '}>
+                    <div class="col-lg-12 text-start">
+                        <div class={'row m-0 w-100 '}>
+                            {dynamicform?.fields?.map(function (item, index) {
+                                if (item.type == 'text' || item.type == 'date' || item.type == 'number') {
+                                    return inputitem(item, index);
+                                } else if (item.type == 'textarea') {
+                                    return textareaitem(item, index);
+                                } else if (item.type == 'selectbox') {
+                                    return selectboxitem(item, index);
+                                }
+                            })}
+                        </div>
+                    </div>
+                    <div class="col-lg-12 allcentered my-4">
+                        <button
+                            onClick={() => {
+                                submitform();
+                            }}
+                            disabled={GeneralAPIMutationContext.isLoading}
+                            class={form_cssstyles.generalbtn + ' allcentered '}
+                        >
+                            {GeneralAPIMutationContext.isLoading ? (
+                                <CircularProgress color={sectionproperties.generalbtn_textColor} width="20px" height="20px" duration="1s" />
+                            ) : langdetect == 'en' ? (
+                                sectionproperties.generalbtn_content
+                            ) : (
+                                sectionproperties.slideshow_btn_text_ar
+                            )}
+                        </button>
+                    </div>
+                    <div class="col-lg-12 allcentered my-4">
+                        <p
+                            class="m-0 p-0"
+                            style={{
+                                fontSize: 20,
+                                color: '#000',
+                            }}
+                        >
+                            {confirmationtext}
+                        </p>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+export default DynamicForm;