@eohjsc/react-native-smart-city 0.7.19 → 0.7.21

package/src/screens/Automate/ScriptDetail/index.js

@@ -1,11 +1,19 @@
 import React, {
   useCallback,
+  useContext,
   useEffect,
   useMemo,
   useRef,
   useState,
 } from 'react';
-import { Image, Platform, Switch, TouchableOpacity, View } from 'react-native';
+import {
+  Image,
+  Platform,
+  ScrollView,
+  Switch,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import { PopoverMode } from 'react-native-popover-view';
 import { IconFill, IconOutline } from '@ant-design/icons-react-native';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
@@ -42,6 +50,11 @@ import styles from './Styles/indexStyles';
 import ItemConditionScriptDetail from '../../../commons/Automate/ItemConditionScriptDetail';
 import { ModalCustom } from '../../../commons/Modal';
 import { Card } from '../../../commons/CardShadow';
+import ButtonAddCondition from '../../../commons/Automate/ButtonAddCondition';
+import ModalAddCondition from './Components/ModalAddCondition';
+import DeleteCondition from './Components/DeleteCondition';
+import { SCContext } from '../../../context';
+import { Action } from '../../../context/actionType';
 
 const PreventDoubleTouch = withPreventDoubleClick(TouchableOpacity);
 
@@ -49,6 +62,7 @@ const ScriptDetail = ({ route }) => {
   const { dispatch, navigate, goBack, getState } = useNavigation();
   const { params = {} } = route;
   const refMenuAction = useRef();
+  const { setAction } = useContext(SCContext);
   const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
     usePopover();
   const {
@@ -70,9 +84,12 @@ const ScriptDetail = ({ route }) => {
   const [data, setData] = useState([]);
   const [isShowRename, setIsShowRename] = useState(false);
   const [isShowDelete, setIsShowDelete] = useState(false);
+  const [itemDeleteCondition, setItemDeleteCondition] = useState({});
   const [isShowAddAction, setIsShowAddAction] = useState(false);
   const [isShowLocalControl, setIsShowLocalControl] = useState(false);
   const [listChipShared, setListChipShared] = useState([]);
+  const [isShowSelectCondition, setIsShowSelectCondition] = useState(false);
+  const [numberConditionsUsed, setNumberConditionsUsed] = useState(0);
   const {
     script,
     type,
@@ -80,9 +97,12 @@ const ScriptDetail = ({ route }) => {
     unit,
     can_edit,
     id: automateId,
-    value_change,
+    is_need_all_conditions,
+    conditions = [{}],
   } = automate;
-  const { end_device_id, unit_id } = value_change || {};
+  const [needAllCondition, setNeedAllCondition] = useState(
+    is_need_all_conditions
+  );
   const {
     enable,
     chip_local_control,
@@ -96,7 +116,12 @@ const ScriptDetail = ({ route }) => {
     chip_id_local_control,
   });
   const [enableScript, setEnableScript] = useState(enable);
-  const refMenuAction1 = useRef();
+  const [listMenuItemCondition, setListMenuItemCondition] = useState([]);
+  const [isShowAddCondition, setIsShowAddCondition] = useState(false);
+  const permissions = useBackendPermission();
+  const { max_actions_per_automation, max_conditions_per_automation } =
+    permissions;
+
   const onShowActivityLog = useCallback(() => {
     navigate(Routes.ActivityLog, {
       id: automateId,
@@ -151,24 +176,77 @@ const ScriptDetail = ({ route }) => {
     [closeScreen, dispatch, getState, route.params]
   );
 
-  const handleUpdateAutomate = useCallback(async () => {
-    if (!can_edit) {
-      ToastBottomHelper.error(
-        t('only_owner_has_permission_to_edit_this_script')
-      );
-      return;
-    }
-    if (!enableScript) {
-      ToastBottomHelper.error(t('this_script_has_been_disabled'));
-      return;
-    }
+  const canUpdateCondition = useMemo(() => {
+    return can_edit && enableScript;
+  }, [can_edit, enableScript]);
 
-    // Reset stack and navigate to AddUnknownTypeSmart
-    handleNavigate(Routes.AddUnknownTypeSmart, {
+  const handleEditCondition = useCallback(
+    async (item) => {
+      if (!canUpdateCondition) {
+        if (!can_edit) {
+          ToastBottomHelper.error(
+            t('only_owner_has_permission_to_edit_this_script')
+          );
+        } else if (!enableScript) {
+          ToastBottomHelper.error(t('this_script_has_been_disabled'));
+        }
+        return;
+      }
+
+      if (item.type === AUTOMATE_TYPE.SCHEDULE) {
+        navigate(Routes.AddEditConditionSchedule, {
+          automate: automate,
+          condition: item,
+          isUpdateCondition: true,
+          closeScreen: Routes.ScriptDetail,
+        });
+      } else {
+        setAction(Action.IS_CREATE_CONDITION, false);
+        setAction(Action.IS_UPDATE_CONDITION, item.id);
+        const navParams = {
+          automate: automate,
+          closeScreen: Routes.ScriptDetail,
+          routeName: unit ? null : Routes.SelectControlDevices,
+        };
+
+        if (unit) {
+          navigate(Routes.SelectMonitorDevices, navParams);
+        } else {
+          navigate(Routes.SelectUnit, {
+            automate,
+            routeName: Routes.SelectMonitorDevices,
+          });
+        }
+      }
+    },
+    [
       automate,
-      closeScreen: route.name,
-    });
-  }, [automate, can_edit, enableScript, route.name, t, handleNavigate]);
+      canUpdateCondition,
+      can_edit,
+      enableScript,
+      navigate,
+      setAction,
+      t,
+      unit,
+    ]
+  );
+
+  const handleDeleteCondition = useCallback(
+    async (item) => {
+      if (!canUpdateCondition) {
+        if (!can_edit) {
+          ToastBottomHelper.error(
+            t('only_owner_has_permission_to_edit_this_script')
+          );
+        } else if (!enableScript) {
+          ToastBottomHelper.error(t('this_script_has_been_disabled'));
+        }
+        return;
+      }
+      setItemDeleteCondition(item);
+    },
+    [canUpdateCondition, can_edit, enableScript, t]
+  );
 
   const listMenuItem = useMemo(
     () => [
@@ -185,32 +263,6 @@ const ScriptDetail = ({ route }) => {
     [t, onShowActivityLog]
   );
 
-  const listMenuItemCondition = useMemo(() => {
-    const items = [
-      { text: t('edit_condition'), doAction: () => handleUpdateAutomate() },
-    ];
-    if (unit_id) {
-      items.unshift({
-        text: t('text_unit'),
-        doAction: () =>
-          navigate(Routes.UnitDetail, {
-            unitId: unit_id,
-          }),
-      });
-    }
-    if (end_device_id) {
-      items.unshift({
-        text: t('device_display'),
-        doAction: () =>
-          navigate(Routes.DeviceDetail, {
-            unitId: unit_id,
-            sensorId: end_device_id,
-          }),
-      });
-    }
-    return items;
-  }, [t, handleUpdateAutomate, navigate, unit_id, end_device_id]);
-
   const handleShowMenuAction = useCallback(() => {
     if (!can_edit) {
       ToastBottomHelper.error(
@@ -241,6 +293,7 @@ const ScriptDetail = ({ route }) => {
     if (success) {
       setAutomate(automateData);
       setEnableScript(automateData.script.enable);
+      setNeedAllCondition(automateData.is_need_all_conditions);
     }
   }, [automateId]);
 
@@ -288,13 +341,39 @@ const ScriptDetail = ({ route }) => {
           enable: checked,
         }
       );
-      success && setEnableScript(checked);
+      if (success) {
+        ToastBottomHelper.success(t('update_successfully'));
+        setEnableScript(checked);
+      }
     },
-    [automateId]
+    [automateId, t]
   );
 
   useBlockBack(handleGoBack);
 
+  const getConditionUsed = useCallback(async () => {
+    if (max_conditions_per_automation > 0) {
+      setNumberConditionsUsed(
+        max_conditions_per_automation - conditions.length
+      );
+    } else {
+      const { success, data: perms } = await axiosGet(API.AUTH.PERMISSIONS());
+      if (success) {
+        setNumberConditionsUsed(
+          perms.max_conditions_per_automation - conditions.length
+        );
+        setAction(Action.UPDATE_PERMISSIONS, perms);
+        return;
+      }
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [conditions.length, max_conditions_per_automation]); // Add dependency setAction will cause loop
+
+  useEffect(() => {
+    getConditionUsed();
+  }, [getConditionUsed]);
+
   useEffect(() => {
     if (isFocused) {
       fetchAutomate();
@@ -333,18 +412,60 @@ const ScriptDetail = ({ route }) => {
     saveAt && fetchAutomateActions();
   }, [saveAt, fetchAutomateActions]);
 
-  const handleShowMenuAction1 = useCallback(() => {
-    showPopoverWithRef1(refMenuAction1);
-  }, [showPopoverWithRef1, refMenuAction1]);
+  const handleShowMenuAction1 = useCallback(
+    (item, refMenuAction1) => {
+      const { unit_id: unitCondition, end_device_id } = item;
+      const menu = [
+        {
+          text: t('edit_condition'),
+          doAction: () => handleEditCondition(item),
+        },
+        {
+          text: t('delete_condition'),
+          doAction: () => handleDeleteCondition(item),
+        },
+      ];
+      if (unitCondition) {
+        menu.unshift({
+          text: t('go_to_unit'),
+          doAction: () =>
+            navigate(Routes.UnitDetail, {
+              unitId: unitCondition,
+            }),
+        });
+      }
+      if (end_device_id) {
+        menu.unshift({
+          text: t('device_display'),
+          doAction: () =>
+            navigate(Routes.DeviceDetail, {
+              unitId: unitCondition,
+              sensorId: end_device_id,
+            }),
+        });
+      }
+      setListMenuItemCondition(menu);
+      showPopoverWithRef1(refMenuAction1);
+    },
+    [
+      t,
+      showPopoverWithRef1,
+      handleEditCondition,
+      handleDeleteCondition,
+      navigate,
+    ]
+  );
 
   const onCloseLocalControl = () => setIsShowLocalControl(false);
 
+  const onCloseSelectCondition = () => setIsShowSelectCondition(false);
+
   const fetchChipShared = useCallback(async () => {
     const { success, data: listChip } = await axiosGet(
       API.DEV_MODE.GATEWAY.SHARED(),
       {
         params: {
-          unit: unit_id,
+          unit: unit,
         },
       },
       true
@@ -352,12 +473,16 @@ const ScriptDetail = ({ route }) => {
     if (success) {
       setListChipShared(listChip);
     }
-  }, [unit_id]);
+  }, [unit]);
 
   const onShowLocalControl = useCallback(async () => {
     setIsShowLocalControl(true);
   }, []);
 
+  const onShowSelectCondition = useCallback(async () => {
+    setIsShowSelectCondition(true);
+  }, []);
+
   useEffect(() => {
     fetchChipShared();
   }, [fetchChipShared]);
@@ -377,6 +502,7 @@ const ScriptDetail = ({ route }) => {
       );
       setIsShowLocalControl(false);
       if (success) {
+        ToastBottomHelper.success(t('local_control_update_success'));
         setLocalControl({
           is_local_control: enable_local_control,
           chip_local_control: item.name,
@@ -384,7 +510,7 @@ const ScriptDetail = ({ route }) => {
         });
       }
     },
-    [automateId, local_control.chip_id_local_control]
+    [automateId, local_control.chip_id_local_control, t]
   );
 
   const renderLocalControl = useMemo(() => {
@@ -423,6 +549,119 @@ const ScriptDetail = ({ route }) => {
     type,
   ]);
 
+  const onPressSelectCondition = useCallback(
+    async (value) => {
+      setIsShowSelectCondition(false);
+      setNeedAllCondition(value);
+      const { success } = await axiosPost(
+        API.AUTOMATE.NEED_ALL_CONDITIONS(automateId),
+        {
+          is_need_all_conditions: value,
+        }
+      );
+      if (success) {
+        ToastBottomHelper.success(t('update_condition_success'));
+      } else {
+        ToastBottomHelper.error(t('error_please_try_later'));
+      }
+    },
+    [automateId, t]
+  );
+
+  const selectCondition = useMemo(() => {
+    if (type === AUTOMATE_TYPE.ONE_TAP || !max_conditions_per_automation) {
+      return (
+        <View style={styles.row}>
+          <Text type="H3" semibold style={styles.width40}>
+            {t('how_to_start')}
+          </Text>
+        </View>
+      );
+    }
+    return (
+      <>
+        <View style={styles.row}>
+          <Text type="H3" semibold style={styles.width30}>
+            {t('condition')}
+          </Text>
+          <Card style={styles.card}>
+            <TouchableOpacity
+              style={styles.boxCondition}
+              onPress={onShowSelectCondition}
+              accessibilityLabel={AccessibilityLabel.AUTOMATE_CONDITION}
+            >
+              <Text numberOfLines={1}>
+                {t(needAllCondition ? 'are_met' : 'is_met')}
+              </Text>
+
+              <IconOutline name="down" size={15} style={styles.marginLeft5} />
+            </TouchableOpacity>
+          </Card>
+        </View>
+        <View>
+          <Text
+            type="H5"
+            accessibilityLabel={AccessibilityLabel.AUTOMATE_NUMBER_CONDITION}
+          >
+            {t('available_condition', {
+              number: numberConditionsUsed,
+            })}
+          </Text>
+        </View>
+      </>
+    );
+  }, [
+    max_conditions_per_automation,
+    needAllCondition,
+    numberConditionsUsed,
+    onShowSelectCondition,
+    t,
+    type,
+  ]);
+
+  const renderCondition = useMemo(() => {
+    if (max_conditions_per_automation) {
+      return conditions.map((item, index) => (
+        <ItemConditionScriptDetail
+          key={`condition${index}`}
+          automate={automate}
+          condition={item}
+          enableScript={enableScript}
+          handleShowMenuAction1={handleShowMenuAction1}
+        />
+      ));
+    } else {
+      return (
+        <ItemConditionScriptDetail
+          automate={automate}
+          condition={conditions[0] || {}}
+          enableScript={enableScript}
+          handleShowMenuAction1={handleShowMenuAction1}
+        />
+      );
+    }
+  }, [
+    automate,
+    conditions,
+    enableScript,
+    handleShowMenuAction1,
+    max_conditions_per_automation,
+  ]);
+
+  const renderButtonAddCondition = useMemo(() => {
+    if (type === AUTOMATE_TYPE.ONE_TAP || !max_conditions_per_automation) {
+      return;
+    } else {
+      return (
+        <ButtonAddCondition
+          setIsShowAddCondition={setIsShowAddCondition}
+          numberConditionsUsed={numberConditionsUsed}
+          max_conditions_per_automation={max_conditions_per_automation}
+        />
+      );
+    }
+  }, [max_conditions_per_automation, numberConditionsUsed, type]);
+
   return (
     <View style={styles.wrap}>
       <WrapHeaderScrollable
@@ -441,15 +680,9 @@ const ScriptDetail = ({ route }) => {
             </View>
           )}
           {renderLocalControl}
-          <Text type="H3" semibold>
-            {t('how_to_start')}
-          </Text>
-          <ItemConditionScriptDetail
-            automate={automate}
-            enableScript={enableScript}
-            handleShowMenuAction1={handleShowMenuAction1}
-            refMenuAction1={refMenuAction1}
-          />
+          {selectCondition}
+          {renderCondition}
+          {renderButtonAddCondition}
           {type === AUTOMATE_TYPE.ONE_TAP && enableScript && (
             <TouchableOpacity
               onPress={handleScriptAction}
@@ -460,7 +693,7 @@ const ScriptDetail = ({ route }) => {
             </TouchableOpacity>
           )}
 
-          <View style={styles.row}>
+          <View style={styles.rowActionList}>
             <Text type="H3" color={Colors.Gray9} semibold>
               {t('actions_list')}
             </Text>
@@ -472,15 +705,20 @@ const ScriptDetail = ({ route }) => {
                   AccessibilityLabel.BUTTON_EDIT_SCRIPT_ACTION
                 }
               >
-                <Text type="Label" highlight>
-                  {t('edit')}
-                </Text>
+                <Text highlight>{t('edit')}</Text>
               </TouchableOpacity>
             )}
           </View>
+          <View style={styles.row}>
+            <Text>
+              {t('available_action', {
+                number: max_actions_per_automation - data.length,
+              })}
+            </Text>
+          </View>
           {data.map((item, index) => (
             <Item
-              key={item?.id}
+              key={`Item${index}`}
               item={item}
               index={index}
               enableScript={enableScript}
@@ -490,7 +728,8 @@ const ScriptDetail = ({ route }) => {
           ))}
           {!!can_edit && !!enableScript && (
             <ItemAdd
-              automate={automate}
+              t={t}
+              max_actions_per_automation={max_actions_per_automation}
               numberActionAdded={data.length}
               setIsShowAddAction={setIsShowAddAction}
             />
@@ -533,6 +772,14 @@ const ScriptDetail = ({ route }) => {
         type={type}
         navigate={handleNavigate}
       />
+      <ModalAddCondition
+        automate={automate}
+        numberActionAdded={data.length}
+        isVisible={isShowAddCondition}
+        setIsVisible={setIsShowAddCondition}
+        type={type}
+        navigate={navigate}
+      />
       <RenameScript
         automate={automate}
         setAutomate={setAutomate}
@@ -544,52 +791,99 @@ const ScriptDetail = ({ route }) => {
         setIsVisible={setIsShowDelete}
         isVisible={isShowDelete}
       />
+      <DeleteCondition
+        automate={automate}
+        setAutomate={setAutomate}
+        condition={itemDeleteCondition}
+        setIsVisible={setItemDeleteCondition}
+        isVisible={Boolean(itemDeleteCondition.id)}
+      />
       <ModalCustom
+        key={'ModalLocalControl'}
         isVisible={isShowLocalControl}
         onBackButtonPress={onCloseLocalControl}
         onBackdropPress={onCloseLocalControl}
       >
         <View key={'localControl'} style={styles.popoverStyle}>
-          <TouchableOpacity
-            style={styles.textDisable}
-            key={'listChip'}
-            onPress={() => {
-              onPressSelectChip(false, {
-                id: local_control.chip_id_local_control,
-                name: local_control.chip_local_control,
-              });
-            }}
-            accessibilityLabel={
-              AccessibilityLabel.AUTOMATE_DISABLE_LOCAL_CONTROL
-            }
-          >
-            <Text>{t('disable')}</Text>
-            {!local_control.is_local_control && (
-              <IconOutline style={styles.checked} name={'check'} size={20} />
-            )}
-          </TouchableOpacity>
-          {listChipShared.map((item, index) => (
+          <ScrollView>
             <TouchableOpacity
-              key={'listChip' + index} // Add key fix warning
-              style={styles.listChip}
+              style={styles.textDisable}
+              key={'listChip'}
               onPress={() => {
-                onPressSelectChip(true, item);
+                onPressSelectChip(false, {
+                  id: local_control.chip_id_local_control,
+                  name: local_control.chip_local_control,
+                });
               }}
               accessibilityLabel={
-                AccessibilityLabel.AUTOMATE_ENABLE_LOCAL_CONTROL
+                AccessibilityLabel.AUTOMATE_DISABLE_LOCAL_CONTROL
               }
             >
-              <Text>{item.name}</Text>
-              {local_control.chip_id_local_control === item.id &&
-                local_control.is_local_control && (
-                  <IconOutline
-                    style={styles.checked}
-                    name={'check'}
-                    size={20}
-                  />
-                )}
+              <Text>{t('disable')}</Text>
+              {!local_control.is_local_control && (
+                <IconOutline style={styles.checked} name={'check'} size={20} />
+              )}
             </TouchableOpacity>
-          ))}
+            {listChipShared.map((item, index) => (
+              <TouchableOpacity
+                key={'listChip' + index} // Add key fix warning
+                style={styles.listChip}
+                onPress={() => {
+                  onPressSelectChip(true, item);
+                }}
+                accessibilityLabel={
+                  AccessibilityLabel.AUTOMATE_ENABLE_LOCAL_CONTROL
+                }
+              >
+                <Text>{item.name}</Text>
+                {local_control.chip_id_local_control === item.id &&
+                  local_control.is_local_control && (
+                    <IconOutline
+                      style={styles.checked}
+                      name={'check'}
+                      size={20}
+                    />
+                  )}
+              </TouchableOpacity>
+            ))}
+          </ScrollView>
+        </View>
+      </ModalCustom>
+      <ModalCustom
+        key={'ModalSelectCondition'}
+        isVisible={isShowSelectCondition}
+        onBackButtonPress={onCloseSelectCondition}
+        onBackdropPress={onCloseSelectCondition}
+      >
+        <View key={'selectCondition'} style={styles.popoverStyle}>
+          <ScrollView>
+            <TouchableOpacity
+              style={styles.textDisable}
+              key={'are_met'}
+              onPress={() => {
+                onPressSelectCondition(true);
+              }}
+              accessibilityLabel={AccessibilityLabel.AUTOMATE_SELECT_CONDITION}
+            >
+              <Text>{t('are_met')}</Text>
+              {needAllCondition && (
+                <IconOutline style={styles.checked} name={'check'} size={20} />
+              )}
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={styles.textDisable}
+              key={'is_met'}
+              onPress={() => {
+                onPressSelectCondition(false);
+              }}
+              accessibilityLabel={AccessibilityLabel.AUTOMATE_SELECT_CONDITION}
+            >
+              <Text>{t('is_met')}</Text>
+              {!needAllCondition && (
+                <IconOutline style={styles.checked} name={'check'} size={20} />
+              )}
+            </TouchableOpacity>
+          </ScrollView>
         </View>
       </ModalCustom>
     </View>
@@ -771,10 +1065,12 @@ const Item = ({ item, index, enableScript, t, local_control }) => {
   }
 };
 
-const ItemAdd = ({ automate, numberActionAdded, setIsShowAddAction }) => {
-  const t = useTranslations();
-  const permissions = useBackendPermission();
-  const { max_actions_per_automation } = permissions || {};
+const ItemAdd = ({
+  t,
+  max_actions_per_automation,
+  numberActionAdded,
+  setIsShowAddAction,
+}) => {
   const paddedIndex = (numberActionAdded + 1).toString().padStart(2, '0');
 
   const onPressAddAction = useCallback(() => {