replace ticket type ddl on extra questions form

Signed-off-by: Tomás Castillo <[email protected]>
fntechgit · Nov 13, 2024 · 538ad7e · 538ad7e
1 parent 936f810
commit 538ad7e
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 35 deletions.
diff --git a/src/actions/order-actions.js b/src/actions/order-actions.js
@@ -105,6 +105,11 @@ const normalizeQuestion = (entity) => {
       normalizedEntity.max_selected_values
     );
   }
+  if (normalizedEntity.allowed_ticket_types?.length > 0) {
+    normalizedEntity.allowed_ticket_types = entity.allowed_ticket_types.map(
+      (tt) => (tt.hasOwnProperty("id") ? tt.id : tt)
+    );
+  }
   return normalizedEntity;
 };
 
@@ -195,7 +200,8 @@ export const getOrderExtraQuestion =
 
     const params = {
       access_token: accessToken,
-      expand: "values,sub_question_rules"
+      expand: "values,sub_question_rules,allowed_ticket_types",
+      fields: "allowed_ticket_types.id, allowed_ticket_types.name"
     };
 
     return getRequest(

diff --git a/src/components/forms/extra-question-form/index.js b/src/components/forms/extra-question-form/index.js
@@ -9,26 +9,27 @@
  * 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 history from "../../../history";
 import T from "i18n-react/dist/i18n-react";
 import "awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css";
 import {
   Dropdown,
   Input,
   TextEditor,
-  SortableTable
+  SortableTable,
+  TicketTypesInput
 } from "openstack-uicore-foundation/lib/components";
+import { Modal } from "react-bootstrap";
+import history from "../../../history";
 import {
   isEmpty,
   scrollToError,
   shallowEqual,
   hasErrors
 } from "../../../utils/methods";
 import { ExtraQuestionsTypeAllowSubQuestion } from "../../../utils/constants";
-import { Modal } from "react-bootstrap";
 import "./styles.less";
 
 class ExtraQuestionForm extends React.Component {
@@ -56,7 +57,7 @@ class ExtraQuestionForm extends React.Component {
     this.handleAddNewValue = this.handleAddNewValue.bind(this);
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
+  componentDidUpdate(prevProps) {
     const state = {};
     scrollToError(this.props.errors);
 
@@ -75,15 +76,15 @@ class ExtraQuestionForm extends React.Component {
   }
 
   handleChangeValue(ev) {
-    const currentEditValue = { ...this.state.currentEditValue };
+    const newCurrentEditValue = { ...this.state.currentEditValue };
     let { value, id } = ev.target;
 
     if (ev.target.type === "checkbox") {
       value = ev.target.checked;
     }
 
-    currentEditValue[id] = value;
-    this.setState({ ...this.state, currentEditValue: currentEditValue });
+    newCurrentEditValue[id] = value;
+    this.setState({ ...this.state, currentEditValue: newCurrentEditValue });
   }
 
   handleEditValue(valueId) {
@@ -94,17 +95,17 @@ class ExtraQuestionForm extends React.Component {
   }
 
   handleChange(ev) {
-    const entity = { ...this.state.entity };
-    const errors = { ...this.state.errors };
+    const newEntity = { ...this.state.entity };
+    const newErrors = { ...this.state.errors };
     let { value, id } = ev.target;
 
     if (ev.target.type === "checkbox") {
       value = ev.target.checked;
     }
 
-    errors[id] = "";
-    entity[id] = value;
-    this.setState({ entity: entity, errors: errors });
+    newErrors[id] = "";
+    newEntity[id] = value;
+    this.setState({ entity: newEntity, errors: newErrors });
   }
 
   handleOnSaveQuestionValue(ev) {
@@ -122,7 +123,7 @@ class ExtraQuestionForm extends React.Component {
     this.props.onSubmit(this.state.entity);
   }
 
-  handleNewSubQuestionRule(ev) {
+  handleNewSubQuestionRule() {
     const { entity } = this.state;
     history.push(
       `/app/summits/${entity.summit_id}/order-extra-questions/${entity.id}/sub-rule/new`
@@ -156,7 +157,7 @@ class ExtraQuestionForm extends React.Component {
 
   formatRuleQuestionColumn(item) {
     const { summitExtraQuestions } = this.props;
-    let question = summitExtraQuestions.find(
+    const question = summitExtraQuestions.find(
       (e) => e.id === item.sub_question_id
     );
     return `${item.visibility === "Visible" ? "Show" : "Not Show"} ${
@@ -219,15 +220,6 @@ class ExtraQuestionForm extends React.Component {
             value: f.id
           }))
         : [];
-    const ticket_type_ddl =
-      currentSummit &&
-      currentSummit.ticket_types &&
-      currentSummit.ticket_types.length > 0
-        ? currentSummit.ticket_types.map((tt) => ({
-            label: tt.name,
-            value: tt.id
-          }))
-        : [];
 
     const question_usage_ddl = [
       { label: "Order", value: "Order" },
@@ -247,9 +239,8 @@ class ExtraQuestionForm extends React.Component {
       {
         columnKey: "is_default",
         value: T.translate("question_form.is_default"),
-        render: (row, val) => {
-          return val ? T.translate("general.yes") : T.translate("general.no");
-        },
+        render: (row, val) =>
+          val ? T.translate("general.yes") : T.translate("general.no"),
         input: "checkbox"
       }
     ];
@@ -421,7 +412,7 @@ class ExtraQuestionForm extends React.Component {
             )}
           </div>
           <div className="row form-group">
-            {ticket_type_ddl.length > 0 && (
+            {currentSummit?.ticket_types.length > 0 && (
               <div className="col-md-4">
                 <label>
                   {T.translate("question_form.allowed_ticket_types")} &nbsp;
@@ -432,13 +423,14 @@ class ExtraQuestionForm extends React.Component {
                     )}
                   />
                 </label>
-                <Dropdown
+                <TicketTypesInput
                   id="allowed_ticket_types"
-                  clearable
-                  isMulti
-                  value={entity.allowed_ticket_types}
+                  value={entity?.allowed_ticket_types}
+                  summitId={currentSummit.id}
                   onChange={this.handleChange}
-                  options={ticket_type_ddl}
+                  optionsLimit={100}
+                  defaultOptions
+                  isMulti
                 />
               </div>
             )}
@@ -539,7 +531,7 @@ class ExtraQuestionForm extends React.Component {
         {currentEditValue != null && (
           <Modal
             className="modal_edit_value"
-            show={true}
+            show
             onHide={() =>
               this.setState({ ...this.state, currentEditValue: null })
             }