From 42d0853090263be70aafe14abaf04de8d5b8e051 Mon Sep 17 00:00:00 2001
From: Dharmesh Patel <dharmesh.hemaram@gmail.com>
Date: Sun, 25 Aug 2024 14:44:27 +0530
Subject: [PATCH] Added dynamic value field between - input - textarea

---
 .../src/app/configs/action/action-table.tsx   |  4 ++-
 .../src/app/configs/action/editable-cell.tsx  | 27 ++++++++++++++++---
 libs/acf/common/src/lib/model/action-model.ts |  3 ++-
 3 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/apps/acf-options-page/src/app/configs/action/action-table.tsx b/apps/acf-options-page/src/app/configs/action/action-table.tsx
index f76171ec..7e5155b1 100644
--- a/apps/acf-options-page/src/app/configs/action/action-table.tsx
+++ b/apps/acf-options-page/src/app/configs/action/action-table.tsx
@@ -90,7 +90,6 @@ const ActionTable = ({ actions }: ActionProps) => {
         accessorKey: 'value',
         meta: {
           list: 'value',
-          as: 'textarea',
         },
       },
       {
@@ -131,6 +130,9 @@ const ActionTable = ({ actions }: ActionProps) => {
       updateData: (selectedActionId: RANDOM_UUID, columnId: string, value: any) => {
         dispatch(updateAction({ selectedActionId, name: columnId, value }));
       },
+      updateValueFieldTypes: (selectedActionId: RANDOM_UUID, valueFieldType: 'input' | 'textarea') => {
+        dispatch(updateAction({ selectedActionId, name: 'valueFieldType', value: valueFieldType }));
+      },
     },
   });
 
diff --git a/apps/acf-options-page/src/app/configs/action/editable-cell.tsx b/apps/acf-options-page/src/app/configs/action/editable-cell.tsx
index 16900568..bc6e8f78 100644
--- a/apps/acf-options-page/src/app/configs/action/editable-cell.tsx
+++ b/apps/acf-options-page/src/app/configs/action/editable-cell.tsx
@@ -2,7 +2,7 @@ import { getFieldNameValue } from '@apps/acf-options-page/src/util/element';
 import { Action } from '@dhruv-techapps/acf-common';
 import { ColumnDef } from '@tanstack/react-table';
 import { useEffect, useRef, useState } from 'react';
-import { Form } from 'react-bootstrap';
+import { Button, Form, InputGroup, OverlayTrigger, Tooltip } from 'react-bootstrap';
 
 export const defaultColumn: Partial<ColumnDef<Action>> = {
   cell: Cell,
@@ -14,6 +14,7 @@ function Cell({ getValue, row: { original }, column: { id, columnDef }, table })
   const [value, setValue] = useState(initialValue);
   const [isInvalid, setIsInvalid] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
+  const [valueFieldType, setValueFieldType] = useState<'input' | 'textarea'>(original.valueFieldType || 'input');
 
   const onBlur = (e) => {
     const update = getFieldNameValue(e, { [id]: initialValue });
@@ -33,14 +34,14 @@ function Cell({ getValue, row: { original }, column: { id, columnDef }, table })
     setValue(initialValue);
   }, [initialValue, id, original.error]);
 
-  return (
+  const getInput = (as: any) => (
     <Form.Control
       ref={inputRef}
       aria-label={meta?.ariaLabel}
       type={meta?.type}
       value={value || ''}
       name={id}
-      as={meta?.as}
+      as={as}
       rows={1}
       onChange={onChange}
       onBlur={onBlur}
@@ -51,4 +52,24 @@ function Cell({ getValue, row: { original }, column: { id, columnDef }, table })
       autoComplete='off'
     />
   );
+
+  const onValueFieldTypeChange = () => {
+    const newFieldType = valueFieldType === 'input' ? 'textarea' : 'input';
+    setValueFieldType(newFieldType);
+    table.options.meta?.updateValueFieldTypes(original.id, newFieldType);
+  };
+
+  if (id === 'value') {
+    return (
+      <InputGroup>
+        <OverlayTrigger overlay={<Tooltip id={id}>{valueFieldType === 'input' ? `Switch to Textarea` : 'Switch to Input'}</Tooltip>}>
+          <Button type='button' variant='outline-secondary' id='action-field-type' onClick={onValueFieldTypeChange}>
+            {valueFieldType === 'input' ? 'I' : 'T'}
+          </Button>
+        </OverlayTrigger>
+        {getInput(valueFieldType)}
+      </InputGroup>
+    );
+  }
+  return <>{getInput(meta?.as)}</>;
 }
diff --git a/libs/acf/common/src/lib/model/action-model.ts b/libs/acf/common/src/lib/model/action-model.ts
index 3567ecb5..44a098e5 100644
--- a/libs/acf/common/src/lib/model/action-model.ts
+++ b/libs/acf/common/src/lib/model/action-model.ts
@@ -1,5 +1,5 @@
-import { Addon } from './addon-model';
 import { RANDOM_UUID } from '../common';
+import { Addon } from './addon-model';
 import { RETRY_OPTIONS } from './setting-model';
 
 // Action Condition
@@ -73,6 +73,7 @@ export type Action = {
   settings?: ActionSettings;
   status?: string;
   error?: string[];
+  valueFieldType?: 'text' | 'textarea';
 };
 
 export const getDefaultAction = (): Action => ({