@nualang/nualang-ui-components 0.1.1365 → 0.1.1368

package/dist/Editors/PhraseList/PhraseList.js

@@ -370,6 +370,7 @@ function PhraseList({
           voiceOptions: voices,
           isUserInternal: isUserInternal,
           onSubmit: onSubmit,
+          handleSpeak: handleSpeak,
           fileSizeLimit: fileSizeLimit,
           verificationStatus: verificationStatus
         })

package/dist/Forms/UpdatePhraseList/UpdatePhraseList.js

@@ -5,6 +5,27 @@ import InputHelper from "../InputHelper/InputHelper";
 import VoiceSelector from "../VoiceSelector/VoiceSelector";
 import ImageSelector from "../ImageSelector/ImageSelector";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const GAMES = [{
+  gameId: "translation",
+  nameKey: "translation",
+  hasKeyboard: true,
+  hasWordBank: true
+}, {
+  gameId: "listening",
+  nameKey: "listening",
+  hasKeyboard: false,
+  hasWordBank: true
+}, {
+  gameId: "pronunciation",
+  nameKey: "pronunciation",
+  hasKeyboard: false,
+  hasWordBank: false
+}, {
+  gameId: "meaning",
+  nameKey: "meaning",
+  hasKeyboard: false,
+  hasWordBank: false
+}];
 const useStyles = makeStyles()(theme => ({
   padding: {
     padding: theme.spacing(2, 3)
@@ -22,20 +43,7 @@ const useStyles = makeStyles()(theme => ({
 }));
 export default function UpdatePhraseList({
   t = text => text,
-  initialValues = {
-    phraseListName: "",
-    description: "",
-    shuffleEnabled: "enabled",
-    voice: null,
-    voicePitch: null,
-    voiceLanguageCode: null,
-    translationEnabled: "enabled",
-    listeningEnabled: "enabled",
-    pronunciationEnabled: "enabled",
-    buildMeaningEnabled: "disabled",
-    readAndWriteEnabled: "disabled",
-    listenAndSpeakEnabled: "disabled"
-  },
+  initialValues: rawInitialValues = {},
   onSubmit,
   learnLang,
   isUserInternal,
@@ -48,13 +56,25 @@ export default function UpdatePhraseList({
   const {
     classes
   } = useStyles();
+  const initialValues = {
+    phraseListName: "",
+    description: "",
+    shuffleEnabled: "enabled",
+    voice: null,
+    voicePitch: null,
+    voiceLanguageCode: null,
+    hiddenPhraseGroupGames: {},
+    isKeyboardHiddenPhraseGroupGames: {},
+    hiddenWordBankPhraseGroupGames: {},
+    ...rawInitialValues
+  };
   return /*#__PURE__*/_jsx("div", {
     className: classes.container,
     children: /*#__PURE__*/_jsx(Formik, {
       initialValues: initialValues,
       enableReinitialize: enableReinitialize,
       onSubmit: onSubmit,
-      render: ({
+      children: ({
         handleChange,
         handleSubmit,
         handleBlur,
@@ -62,16 +82,17 @@ export default function UpdatePhraseList({
         dirty,
         values,
         errors,
-        touched
+        touched,
+        setFieldValue
       }) => /*#__PURE__*/_jsx("form", {
         onSubmit: handleSubmit,
-        children: /*#__PURE__*/_jsx(Grid, {
+        children: /*#__PURE__*/_jsxs(Grid, {
           container: true,
           sx: {
             width: "100%"
           },
           spacing: 1,
-          children: /*#__PURE__*/_jsx(Grid, {
+          children: [/*#__PURE__*/_jsx(Grid, {
             size: 12,
             children: /*#__PURE__*/_jsxs(Card, {
               children: [/*#__PURE__*/_jsx(CardHeader, {
@@ -164,6 +185,253 @@ export default function UpdatePhraseList({
                     })]
                   })]
                 })
+              })]
+            })
+          }), /*#__PURE__*/_jsx(Grid, {
+            size: 12,
+            children: /*#__PURE__*/_jsxs(Card, {
+              children: [/*#__PURE__*/_jsx(CardHeader, {
+                title: /*#__PURE__*/_jsx(Typography, {
+                  variant: "h5",
+                  component: "h2",
+                  children: t("exercise_settings")
+                }),
+                className: classes.padding
+              }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(CardContent, {
+                className: classes.formContent,
+                children: /*#__PURE__*/_jsxs(Grid, {
+                  container: true,
+                  sx: {
+                    width: "100%"
+                  },
+                  spacing: 2,
+                  children: [/*#__PURE__*/_jsx(Grid, {
+                    size: 12,
+                    children: /*#__PURE__*/_jsxs(FormControl, {
+                      component: "fieldset",
+                      children: [/*#__PURE__*/_jsx(FormLabel, {
+                        component: "legend",
+                        children: t("shuffle_phrases")
+                      }), /*#__PURE__*/_jsx(Typography, {
+                        color: "textSecondary",
+                        children: t("shuffle_phrases_desc")
+                      }), /*#__PURE__*/_jsxs(RadioGroup, {
+                        row: true,
+                        "aria-label": "shuffleEnabled",
+                        name: "shuffleEnabled",
+                        value: values.shuffleEnabled,
+                        onChange: handleChange,
+                        onBlur: handleBlur,
+                        children: [/*#__PURE__*/_jsx(FormControlLabel, {
+                          value: "enabled",
+                          control: /*#__PURE__*/_jsx(Radio, {}),
+                          label: t("enabled")
+                        }), /*#__PURE__*/_jsx(FormControlLabel, {
+                          value: "disabled",
+                          control: /*#__PURE__*/_jsx(Radio, {}),
+                          label: t("disabled")
+                        })]
+                      })]
+                    })
+                  }), learnLang !== "irish" && /*#__PURE__*/_jsxs(Grid, {
+                    size: 12,
+                    children: [/*#__PURE__*/_jsx(Typography, {
+                      gutterBottom: true,
+                      children: t("excercise_voice_desc")
+                    }), /*#__PURE__*/_jsx(VoiceSelector, {
+                      id: "voice",
+                      name: "voice",
+                      "data-cy": "voice",
+                      margin: "normal",
+                      variant: "outlined",
+                      fullWidth: true,
+                      required: learnLang !== "irish",
+                      t: t,
+                      voices: voiceOptions,
+                      label: t("excercise_voice"),
+                      value: values.voice,
+                      onChange: e => {
+                        if (e && e.target && e.target.value) {
+                          const voiceSelected = e.target.value;
+                          const voiceOptionElem = document.getElementById(`voice-${voiceSelected}`);
+                          const languageCode = voiceOptionElem.getAttribute("data-language-code");
+                          handleChange({
+                            target: {
+                              name: "voice",
+                              value: voiceSelected
+                            }
+                          });
+                          handleSpeak && handleSpeak({
+                            text: voiceSelected,
+                            learnLanguage: learnLang,
+                            voiceName: voiceSelected,
+                            languageCode
+                          });
+                          handleChange({
+                            target: {
+                              name: "voiceLanguageCode",
+                              value: languageCode
+                            }
+                          });
+                          handleChange({
+                            target: {
+                              name: "voicePitch",
+                              value: null
+                            }
+                          });
+                        }
+                      },
+                      onVoicePitchChange: e => {
+                        if (e && e.target) {
+                          handleChange(e);
+                          handleSpeak && handleSpeak({
+                            text: values.voiceLanguageCode ? t("voice_pitch_example", {
+                              name: values.voice,
+                              lng: values.voiceLanguageCode?.substring(0, 2)
+                            }) : values.voice,
+                            learnLanguage: learnLang,
+                            voiceName: values.voice,
+                            languageCode: values.voiceLanguageCode,
+                            pitch: e.target.value
+                          });
+                        }
+                      },
+                      onBlur: handleBlur,
+                      helperText: touched.voice ? errors.voice : "",
+                      error: touched.voice && Boolean(errors.voice),
+                      voicePitch: values.voicePitch,
+                      isUserInternal: isUserInternal
+                    })]
+                  }), /*#__PURE__*/_jsxs(Grid, {
+                    size: 12,
+                    children: [/*#__PURE__*/_jsx(Typography, {
+                      variant: "subtitle1",
+                      gutterBottom: true,
+                      sx: {
+                        fontWeight: "bold"
+                      },
+                      children: t("excercise_visibility")
+                    }), /*#__PURE__*/_jsx(Grid, {
+                      container: true,
+                      sx: {
+                        width: "100%"
+                      },
+                      spacing: 1,
+                      children: GAMES.map(({
+                        gameId,
+                        nameKey,
+                        hasKeyboard,
+                        hasWordBank
+                      }) => {
+                        const isHidden = values.hiddenPhraseGroupGames?.[gameId] || false;
+                        const isKeyboardHidden = values.isKeyboardHiddenPhraseGroupGames?.[gameId] || false;
+                        const isWordBankHidden = values.hiddenWordBankPhraseGroupGames?.[gameId] || false;
+                        return /*#__PURE__*/_jsxs(_Fragment, {
+                          children: [/*#__PURE__*/_jsx(Grid, {
+                            size: 12,
+                            children: /*#__PURE__*/_jsxs(FormControl, {
+                              component: "fieldset",
+                              children: [/*#__PURE__*/_jsx(FormLabel, {
+                                component: "legend",
+                                children: t(nameKey)
+                              }), /*#__PURE__*/_jsxs(RadioGroup, {
+                                row: true,
+                                value: isHidden ? "disabled" : "enabled",
+                                onChange: e => setFieldValue("hiddenPhraseGroupGames", {
+                                  ...values.hiddenPhraseGroupGames,
+                                  [gameId]: e.target.value === "disabled"
+                                }),
+                                children: [/*#__PURE__*/_jsx(FormControlLabel, {
+                                  value: "enabled",
+                                  control: /*#__PURE__*/_jsx(Radio, {}),
+                                  label: t("enabled")
+                                }), /*#__PURE__*/_jsx(FormControlLabel, {
+                                  value: "disabled",
+                                  control: /*#__PURE__*/_jsx(Radio, {}),
+                                  label: t("disabled")
+                                })]
+                              })]
+                            })
+                          }, gameId), hasKeyboard && /*#__PURE__*/_jsx(Grid, {
+                            size: 12,
+                            children: /*#__PURE__*/_jsxs(FormControl, {
+                              component: "fieldset",
+                              sx: {
+                                pl: 2
+                              },
+                              children: [/*#__PURE__*/_jsx(FormLabel, {
+                                component: "legend",
+                                children: t("keyboard")
+                              }), /*#__PURE__*/_jsxs(RadioGroup, {
+                                row: true,
+                                value: isKeyboardHidden ? "disabled" : "enabled",
+                                onChange: e => {
+                                  const disabling = e.target.value === "disabled";
+                                  setFieldValue("isKeyboardHiddenPhraseGroupGames", {
+                                    ...values.isKeyboardHiddenPhraseGroupGames,
+                                    [gameId]: disabling
+                                  });
+                                  if (disabling && isWordBankHidden) {
+                                    setFieldValue("hiddenWordBankPhraseGroupGames", {
+                                      ...values.hiddenWordBankPhraseGroupGames,
+                                      [gameId]: false
+                                    });
+                                  }
+                                },
+                                children: [/*#__PURE__*/_jsx(FormControlLabel, {
+                                  value: "enabled",
+                                  control: /*#__PURE__*/_jsx(Radio, {}),
+                                  label: t("enabled")
+                                }), /*#__PURE__*/_jsx(FormControlLabel, {
+                                  value: "disabled",
+                                  control: /*#__PURE__*/_jsx(Radio, {}),
+                                  label: t("disabled")
+                                })]
+                              })]
+                            })
+                          }, `${gameId}-keyboard`), hasWordBank && /*#__PURE__*/_jsx(Grid, {
+                            size: 12,
+                            children: /*#__PURE__*/_jsxs(FormControl, {
+                              component: "fieldset",
+                              sx: {
+                                pl: 2
+                              },
+                              children: [/*#__PURE__*/_jsx(FormLabel, {
+                                component: "legend",
+                                children: t("word_bank")
+                              }), /*#__PURE__*/_jsxs(RadioGroup, {
+                                row: true,
+                                value: isWordBankHidden ? "disabled" : "enabled",
+                                onChange: e => {
+                                  const disabling = e.target.value === "disabled";
+                                  setFieldValue("hiddenWordBankPhraseGroupGames", {
+                                    ...values.hiddenWordBankPhraseGroupGames,
+                                    [gameId]: disabling
+                                  });
+                                  if (disabling && isKeyboardHidden) {
+                                    setFieldValue("isKeyboardHiddenPhraseGroupGames", {
+                                      ...values.isKeyboardHiddenPhraseGroupGames,
+                                      [gameId]: false
+                                    });
+                                  }
+                                },
+                                children: [/*#__PURE__*/_jsx(FormControlLabel, {
+                                  value: "enabled",
+                                  control: /*#__PURE__*/_jsx(Radio, {}),
+                                  label: t("enabled")
+                                }), /*#__PURE__*/_jsx(FormControlLabel, {
+                                  value: "disabled",
+                                  control: /*#__PURE__*/_jsx(Radio, {}),
+                                  label: t("disabled")
+                                })]
+                              })]
+                            })
+                          }, `${gameId}-wordbank`)]
+                        });
+                      })
+                    })]
+                  })]
+                })
               }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(CardActions, {
                 className: classes.padding,
                 children: /*#__PURE__*/_jsx(Button, {
@@ -175,7 +443,7 @@ export default function UpdatePhraseList({
                 })
               })]
             })
-          })
+          })]
         })
       })
     })

package/dist/Tables/MeetingPrompstList/MeetingPromptsList.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, Fragment } from "react";
+import { useState, useEffect, useMemo, Fragment } from "react";
 import PropTypes from "prop-types";
 import { withStyles } from "tss-react/mui";
 import { useNavigate, useLocation } from "react-router";
@@ -54,7 +54,6 @@ const MeetingPromptsList = withStyles(({
   const [isDeleteDiscussionOpen, setIsDeleteDiscussionOpen] = useState(false);
   const [isEditMeetingDialogOpen, setIsEditMeetingDialogOpen] = useState(false);
   const [groupedId, setGroupedId] = useState("");
-  const [meetingMembers, setMeetingMembers] = useState([]);
   const [filter, setFilter] = useState("all");
   const [isRecordingDialogOpen, setIsRecordingDialogOpen] = useState(false);
   const [attendeesData, setAttendeesData] = useState([]);
@@ -133,10 +132,9 @@ const MeetingPromptsList = withStyles(({
     setSelectedGroup({});
     clearGroupedId();
   };
-  useEffect(() => {
+  const meetingMembers = useMemo(() => {
     const selectedDiscussionGroup = scheduleListData.filter(item => item.groupedId === groupedId);
-    const meetingMembersArray = selectedDiscussionGroup.map(item => item.meetingMembers);
-    setMeetingMembers(meetingMembersArray);
+    return selectedDiscussionGroup.map(item => item.meetingMembers);
   }, [groupedId, scheduleListData]);
   useEffect(() => {
     if (meetingRecsData) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1365",
+  "version": "0.1.1368",
   "type": "module",
   "main": "dist/index.js",
   "files": [