Merge pull request #78 from glific/feature/id-added

Added ids in interactive messages
glific · Aug 26, 2022 · 15ad8ed · 15ad8ed
2 parents 0701023 + 1192d32
commit 15ad8ed
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "@glific/flow-editor",
   "license": "AGPL-3.0",
   "repository": "git://github.com/glific/floweditor.git",
-  "version": "1.17.1-4",
+  "version": "1.17.1-7",
   "description": "'Standalone flow editing tool designed for use within the Glific suite of messaging tools'",
   "browser": "umd/flow-editor.min.js",
   "unpkg": "umd/flow-editor.min.js",

diff --git a/src/components/flow/actions/sendinteractivemsg/SendInteractiveMsg.module.scss b/src/components/flow/actions/sendinteractivemsg/SendInteractiveMsg.module.scss
@@ -33,7 +33,12 @@
   margin-top: 10px;
 }
 
+.id {
+  margin-right: 4px;
+}
+
 .listItem {
+  display: flex;
   width: 48% !important;
   margin: 4px 4px;
 }

diff --git a/src/components/flow/actions/sendinteractivemsg/SendInteractiveMsgForm.tsx b/src/components/flow/actions/sendinteractivemsg/SendInteractiveMsgForm.tsx
@@ -31,7 +31,7 @@ export interface SendInteractiveMsgFormState extends FormState {
   interactives: FormEntry;
   labels?: any;
   expression?: null | FormEntry;
-  listValues?: Array<any>;
+  listValues?: any[];
   listValuesCount?: string;
   isChecked?: boolean;
   attachment_type?: StringEntry;
@@ -49,7 +49,7 @@ export default class SendMsgForm extends React.Component<
 > {
   constructor(props: ActionFormProps) {
     super(props);
-    this.state = stateToForm(this.props.nodeSettings, this.props.assetStore);
+    this.state = stateToForm(this.props.nodeSettings);
     bindCallbacks(this, {
       include: [/^handle/, /^on/]
     });
@@ -183,11 +183,11 @@ export default class SendMsgForm extends React.Component<
     );
   }
 
-  private handleAttachmentChanged(index: number, value: string): void {
+  private handleAttachmentChanged(index: number, id: string, label: string): void {
     let { listValues }: any = this.state;
     listValues = mutate(listValues, {
       [index]: {
-        $set: { value }
+        $set: { value: { id, label } }
       }
     });
 
@@ -197,16 +197,28 @@ export default class SendMsgForm extends React.Component<
   private renderListOptions(): JSX.Element {
     const { listValues } = this.state;
 
-    const renderListOption = (value: any, index: number) => (
+    const renderListOption = ({ value }: any, index: number) => (
       <div className={styles.listItem}>
+        <div className={styles.id}>
+          <TextInputElement
+            placeholder={`id ${index + 1}`}
+            name={i18n.t('forms.list_item_id', 'id')}
+            style={TextInputStyle.normal}
+            onChange={(id: string) => {
+              this.handleAttachmentChanged(index, id, value.label);
+            }}
+            entry={{ value: value.id }}
+            autocomplete={true}
+          />
+        </div>
         <TextInputElement
           placeholder={`variable ${index + 1}`}
-          name={i18n.t('forms.list_item', 'variable')}
+          name={i18n.t('forms.list_item_variable', 'variable')}
           style={TextInputStyle.normal}
-          onChange={(value: string) => {
-            this.handleAttachmentChanged(index, value);
+          onChange={(label: string) => {
+            this.handleAttachmentChanged(index, value.id, label);
           }}
-          entry={value}
+          entry={{ value: value.label }}
           autocomplete={true}
         />
       </div>

diff --git a/src/components/flow/actions/sendinteractivemsg/helpers.tsx b/src/components/flow/actions/sendinteractivemsg/helpers.tsx
@@ -10,10 +10,7 @@ import { ReactComponent as ButtonIcon } from './icons/button.svg';
 
 import { SendInteractiveMsgFormState } from './SendInteractiveMsgForm';
 
-export const initializeForm = (
-  settings: NodeEditorSettings,
-  assetStore: AssetStore
-): SendInteractiveMsgFormState => {
+export const initializeForm = (settings: NodeEditorSettings): SendInteractiveMsgFormState => {
   if (settings.originalAction && settings.originalAction.type === Types.send_interactive_msg) {
     const action = settings.originalAction as SendInteractiveMsg;
     let { id, name, expression, params, paramsCount } = action;
@@ -34,7 +31,7 @@ export const initializeForm = (
       : [];
 
     while (listValues.length < 10) {
-      listValues.push({ value: '' });
+      listValues.push({ value: { id: '', label: '' } });
     }
 
     const returnValue: SendInteractiveMsgFormState = {
@@ -69,7 +66,7 @@ export const initializeForm = (
     labels: {
       value: []
     },
-    listValues: Array(10).fill({ value: '' }),
+    listValues: Array(10).fill({ value: { id: '', label: '' } }),
     valid: false,
     listValuesCount: '',
     attachment_url: { value: '' },
@@ -84,7 +81,7 @@ export const stateToAction = (
   let result: any = {};
 
   const params = state.listValues
-    .filter(listItem => listItem.value !== '')
+    .filter(listItem => listItem.value.label !== '')
     .map(listItem => listItem.value);
 
   const paramsCount = state.listValuesCount;