orderid and update question name

Jittojoyes98 · Sep 26, 2023 · d69884f · d69884f
1 parent 58566fe
commit d69884f
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 26 deletions.
diff --git a/src/Editor/Editor.jsx b/src/Editor/Editor.jsx
@@ -104,7 +104,12 @@ const Editor = () => {
         questionNameCache[type] = 0;
       }
       questionNameCache[type]++;
-      createQuestion(formid, type, questionNameCache[type]);
+      createQuestion(
+        formid,
+        type,
+        questionNameCache[type],
+        components.length + 1
+      );
       openPropertiesDropping(components.length + 1);
     }
     setDragging(false);
@@ -168,10 +173,9 @@ const Editor = () => {
           />
           <div className="editor-sidebar">
             <div className="widget-wrapper">
-              {itemSelected && selectedItem ? (
-                <InputSettings
-                  questionName={components[selectedItem - 1]?.question_name}
-                />
+              {/* {console.log(selectedItem)} */}
+              {itemSelected && selectedItem > 0 ? (
+                <InputSettings currentInput={components[selectedItem - 1]} />
               ) : (
                 <>
                   <span style={{ width: "100%" }}>Commonly used</span>

diff --git a/src/Editor/EditorStore.js b/src/Editor/EditorStore.js
@@ -19,8 +19,9 @@ export const editorStore = create((set, get) => ({
       isDropped: false,
       itemSelected: true,
     })),
-  closeProperties: () =>
-    set((state) => ({ selectedItem: null, itemSelected: false })),
+  closeProperties: () => {
+    set((state) => ({ selectedItem: null, itemSelected: false }));
+  },
 }));
 
 export const useDndStore = create((set, get) => ({

diff --git a/src/Editor/InputSettings.jsx b/src/Editor/InputSettings.jsx
@@ -1,11 +1,13 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { editorStore } from "./EditorStore";
 import Tabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import TextField from "@mui/material/TextField";
 import { styled } from "@mui/material/styles";
+import ClickAwayListener from "@mui/base/ClickAwayListener";
+import { useQuestions } from "../_services/QuestionService";
 
 const StyledTabs = styled((props) => (
   <Tabs
@@ -41,8 +43,12 @@ const StyledTab = styled((props) => <Tab disableRipple {...props} />)(
   })
 );
 
-const InputSettings = ({ questionName }) => {
-  console.log(questionName);
+const InputSettings = ({ currentInput }) => {
+  // console.log(questionName);
+  // issue with selcting the last question on clicking from one question to another.
+  const [updateQuestionName] = useQuestions((state) => {
+    return [state.updateQuestionName];
+  });
   const closeSettings = editorStore((state) => state.closeSettings);
 
   const selectedItem = editorStore((state) => state.selectedItem);
@@ -51,29 +57,38 @@ const InputSettings = ({ questionName }) => {
   const handleChange = (event, newValue) => {
     setTabIndex(newValue);
   };
-  let currentQuestion = questionName;
-  const [inputName, setInputName] = useState(questionName);
+  let currentInputName = currentInput?.question_name;
+  const [inputName, setInputName] = useState(currentInputName);
 
   const handleNameChange = (e) => {
     setInputName(e.target.value);
   };
 
+  const handleClickAway = () => {
+    if (inputName && inputName != currentInputName) {
+      updateQuestionName(currentInput.id, inputName);
+    } else {
+      setInputName(currentInputName);
+    }
+  };
+
   return (
     <div className="settings-wrapper">
       <div className="settings-header">
-        <TextField
-          defaultValue={questionName}
-          value={inputName}
-          id="filled-hidden-label-small"
-          variant="outlined"
-          size="small"
-          className="input-text-question-field"
-          sx={{ marginRight: "10px" }}
-          // InputProps={{
-          //   disableUnderline: true,
-          // }}
-          onChange={handleNameChange}
-        />
+        <ClickAwayListener onClickAway={handleClickAway}>
+          <TextField
+            value={inputName}
+            id="filled-hidden-label-small"
+            variant="outlined"
+            size="small"
+            className="input-text-question-field"
+            sx={{ marginRight: "10px" }}
+            // InputProps={{
+            //   disableUnderline: true,
+            // }}
+            onChange={handleNameChange}
+          />
+        </ClickAwayListener>
         {/* <p>{questionName}</p> */}
         <div onClick={closeSettings} className="settings-close">
           <svg

diff --git a/src/_services/QuestionService.js b/src/_services/QuestionService.js
@@ -6,7 +6,7 @@ export const useQuestions = create((set, get) => ({
   error: null,
   data: null,
   fetchAgain: true,
-  createQuestion: async (formid, type, questionNumber) => {
+  createQuestion: async (formid, type, questionNumber, orderId) => {
     set(() => ({ loading: true }));
 
     try {
@@ -16,6 +16,7 @@ export const useQuestions = create((set, get) => ({
           current_form_id: formid,
           question_type: type,
           question_text: `${type} ${questionNumber}`,
+          order_id: orderId,
         }
       );
       // now the whole list is not retured , will add the necessary in the future.
@@ -52,4 +53,18 @@ export const useQuestions = create((set, get) => ({
       set(() => ({ error: error.message, loading: false }));
     }
   },
+  updateQuestionName: async (question_id, name) => {
+    set(() => ({ loading: true }));
+    try {
+      const { error } = await supabase
+        .from("question")
+        .update({ question_name: name })
+        .eq("id", question_id);
+
+      let currentFetch = get().fetchAgain;
+      set(() => ({ loading: false, fetchAgain: !currentFetch }));
+    } catch (error) {
+      set(() => ({ error: error.message, loading: false }));
+    }
+  },
 }));