@eohjsc/react-native-smart-city 0.7.20 → 0.7.22

package/src/screens/Sharing/Components/ShareDeviceSelector.js

@@ -0,0 +1,255 @@
+import { ActivityIndicator, Alert, View } from 'react-native';
+import { ConfigItem, DeviceItem, SubUnitItem, SubUnitTreeView } from '.';
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { API } from '../../../configs';
+import { AccessibilityLabel } from '../../../configs/Constants';
+import Text from '../../../commons/Text';
+import ViewButtonBottom from '../../../commons/ViewButtonBottom';
+import { axiosGet } from '../../../utils/Apis/axios';
+import styles from './Styles/ShareDeviceSelectorStyles';
+import { useNavigation } from '@react-navigation/native';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+
+const ShareDeviceSelector = ({
+  unitId,
+  initialSelectedKeys = [],
+  onRightClick,
+  rightTitle,
+}) => {
+  const [dataSubUnits, setDataSubUnits] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const t = useTranslations();
+  const navigation = useNavigation();
+  const [selectedKeys, setSelectedKeys] = useState(initialSelectedKeys);
+
+  const updateParentSelected = (data, newSelectedKeys) => {
+    const updateParentCheck = (nodes) => {
+      nodes.forEach((node) => {
+        if (!node?.children || node.children.length === 0) {
+          return;
+        }
+        updateParentCheck(node.children);
+
+        const allChildrenChecked = node.children.every((child) =>
+          newSelectedKeys.has(child.key)
+        );
+        if (allChildrenChecked) {
+          newSelectedKeys.add(node.key);
+        } else {
+          newSelectedKeys.delete(node.key);
+        }
+      });
+    };
+    updateParentCheck(data);
+    setSelectedKeys([...newSelectedKeys]);
+  };
+
+  const handleOnSelect = (item, isChecked) => {
+    const getAllChildIds = (node) => {
+      let ids = [node.key];
+      (node?.children || []).forEach((child) => {
+        ids.push(...getAllChildIds(child));
+      });
+      return ids;
+    };
+
+    let newSelectedKeys = new Set(selectedKeys);
+    const affectedKeys = getAllChildIds(item);
+
+    if (isChecked) {
+      affectedKeys.forEach((key) => newSelectedKeys.add(key));
+    } else {
+      affectedKeys.forEach((key) => newSelectedKeys.delete(key));
+    }
+
+    updateParentSelected(dataSource, newSelectedKeys);
+  };
+
+  const renderSubUnitTreeNode = ({ item, childrenRender }) => {
+    const level = item.key.split('-').at(0);
+    const isChecked = selectedKeys.includes(item.key);
+    switch (level) {
+      case 'subUnit':
+        return (
+          <SubUnitItem
+            item={item}
+            isChecked={isChecked}
+            onSelect={handleOnSelect}
+            childrenRender={childrenRender}
+          />
+        );
+      case 'device':
+        return (
+          <DeviceItem
+            item={item}
+            isChecked={isChecked}
+            childrenRender={childrenRender}
+            onSelect={handleOnSelect}
+          />
+        );
+      case 'config':
+      case 'action':
+        return (
+          <ConfigItem
+            isChecked={isChecked}
+            item={item}
+            onSelect={handleOnSelect}
+          />
+        );
+    }
+  };
+
+  const [dataSource, keyDeviceMap] = useMemo(() => {
+    let keyMap = {};
+    const items = [
+      {
+        id: 'all',
+        key: 'all',
+        label: t('text_all_devices'),
+        children: dataSubUnits.map((subUnit) => ({
+          id: subUnit.id,
+          key: `subUnit-${subUnit.id}`,
+          label: subUnit.name,
+          children: subUnit.devices.map((device) => ({
+            id: device.id,
+            key: `device-${device.id}`,
+            label: device.name,
+            item: device,
+            children: [
+              ...device.actions.map((action) => {
+                const key = `action-${action.id}`;
+                keyMap[key] = device.id;
+                return {
+                  id: action.id,
+                  key,
+                  label: action.name,
+                  isConfig: false,
+                };
+              }),
+              ...device.read_configs.map((config) => {
+                const key = `config-${config.id}`;
+                keyMap[key] = device.id;
+                return {
+                  id: config.id,
+                  key,
+                  label: config.name,
+                  isConfig: true,
+                };
+              }),
+            ],
+          })),
+        })),
+      },
+    ];
+    return [items, keyMap];
+  }, [dataSubUnits, t]);
+
+  useEffect(() => {
+    if (!initialSelectedKeys.length) {
+      return;
+    }
+    const newSelectedKeys = new Set(initialSelectedKeys);
+    updateParentSelected(dataSource, newSelectedKeys);
+  }, [initialSelectedKeys, dataSource]);
+
+  useEffect(() => {
+    const getUnitPermission = async () => {
+      setLoading(true);
+      const { success, data } = await axiosGet(
+        API.SHARE.UNIT_PERMISSIONS_v2(unitId)
+      );
+      success && setDataSubUnits(data);
+      setLoading(false);
+    };
+
+    getUnitPermission();
+  }, [unitId]);
+
+  const handleOnRightClick = async () => {
+    setLoading(true);
+
+    const readKeys = selectedKeys.filter((key) => key.startsWith('config'));
+    const controlKeys = selectedKeys.filter((key) => key.startsWith('action'));
+    const endDeviceKeys = selectedKeys.filter((key) =>
+      key.startsWith('device')
+    );
+
+    const groupByDevice = (keys) =>
+      keys.reduce((acc, key) => {
+        const [, id] = key.split('-');
+        const deviceId = keyDeviceMap[key];
+        deviceId && (acc[deviceId] ??= []).push(Number(id));
+        return acc;
+      }, {});
+    const readGroup = groupByDevice(readKeys);
+    const controlGroup = groupByDevice(controlKeys);
+
+    const read_permissions = Object.entries(readGroup).map(
+      ([deviceId, configIds]) => ({
+        id: Number(deviceId),
+        values: configIds,
+      })
+    );
+
+    const control_permissions = Object.entries(controlGroup).map(
+      ([deviceId, actionIds]) => ({
+        id: Number(deviceId),
+        values: actionIds,
+      })
+    );
+
+    endDeviceKeys.forEach((key) => {
+      const [, deviceId] = key.split('-');
+      if (!readGroup[deviceId] && !controlGroup[deviceId]) {
+        read_permissions.push({ id: Number(deviceId), values: [] });
+      }
+    });
+
+    if (!read_permissions.length && !control_permissions.length) {
+      setLoading(false);
+      Alert.alert('', t('choose_at_least_one'));
+      return;
+    }
+
+    read_permissions.sort((a, b) => a.id - b.id);
+    control_permissions.sort((a, b) => a.id - b.id);
+
+    await onRightClick?.({ read_permissions, control_permissions });
+    setLoading(false);
+  };
+  return (
+    <View style={styles.wrap}>
+      <Text semibold style={styles.title}>
+        {t('select_device')}
+      </Text>
+      <Text style={styles.subtitle}>{t('sharing_select_devices_hint')}</Text>
+      <View style={styles.contentContainer}>
+        {loading ? (
+          <ActivityIndicator />
+        ) : (
+          <SubUnitTreeView
+            data={dataSource}
+            render={renderSubUnitTreeNode}
+            onSelect={handleOnSelect}
+            selectedKeys={selectedKeys}
+          />
+        )}
+      </View>
+      <View style={styles.wrapViewButtonStyle}>
+        <ViewButtonBottom
+          accessibilityLabelPrefix={
+            AccessibilityLabel.PREFIX.SHARING_SELECT_PERMISSION
+          }
+          leftTitle={t('cancel')}
+          onLeftClick={() => navigation.goBack()}
+          rightTitle={rightTitle}
+          rightDisabled={false}
+          onRightClick={handleOnRightClick}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default ShareDeviceSelector;

package/src/screens/Sharing/Components/Styles/CheckBoxCustomStyles.js

@@ -1,5 +1,5 @@
-import { StyleSheet } from 'react-native';
 import { Colors } from '../../../../configs';
+import { StyleSheet } from 'react-native';
 import { normalize } from '../../../../configs/Constants';
 
 export default StyleSheet.create({

package/src/screens/Sharing/Components/Styles/DeviceItemStyles.js

@@ -1,27 +1,13 @@
-import { StyleSheet } from 'react-native';
 import { Colors } from '../../../../configs';
+import { StyleSheet } from 'react-native';
 import { normalize } from '../../../../configs/Constants';
 
 export default StyleSheet.create({
-  wrapCheckBoxStyle: {
-    marginLeft: normalize(-10),
-  },
-  titleStyle: {
-    fontSize: 16,
-    fontWeight: 'normal',
-    width: 200,
-  },
-  wrapStyleTitle: {
-    justifyContent: 'space-between',
-  },
   wrap: {
     flexDirection: 'row',
     marginHorizontal: normalize(10),
     paddingBottom: 10,
   },
-  isRenderSeparated: {
-    paddingBottom: normalize(16),
-  },
   viewLeft: {
     marginRight: 16,
     width: normalize(24),
@@ -32,26 +18,24 @@ export default StyleSheet.create({
     flex: 1,
   },
   viewRight: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: normalize(16),
+  },
+  wrapTextIcon: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    paddingTop: normalize(16),
+    flex: 1,
   },
   text: {
     color: Colors.Gray9,
     flex: 1,
   },
-  checkBox: {
-    width: normalize(20),
-    height: normalize(20),
+  expandView: {
+    width: 20,
   },
-
-  wrapExpand: {
-    marginTop: 10,
-  },
-  viewSeparated: {
-    height: 1,
-    backgroundColor: Colors.Gray4,
-    marginTop: normalize(16),
+  wrapChildren: {
+    marginTop: normalize(10),
   },
 });

package/src/screens/Sharing/{Styles/SelectPermissionStyles.js → Components/Styles/ShareDeviceSelectorStyles.js}

@@ -1,7 +1,8 @@
+import { Constants, normalize } from '../../../../configs/Constants';
+
+import { Colors } from '../../../../configs';
 import { StyleSheet } from 'react-native';
 import { getStatusBarHeight } from 'react-native-iphone-x-helper';
-import { Colors } from '../../../configs';
-import { Constants, normalize } from '../../../configs/Constants';
 
 export default StyleSheet.create({
   wrap: {
@@ -31,15 +32,6 @@ export default StyleSheet.create({
   checkBoxTile: {
     marginLeft: 5,
   },
-  wrapDevice: {
-    borderRadius: normalize(20),
-    borderWidth: 1,
-    borderColor: Colors.Gray4,
-    backgroundColor: Colors.White,
-  },
-  viewGroup: {
-    marginTop: normalize(8),
-  },
   wrapAllDevices: {
     marginBottom: -10,
     marginLeft: 5,

package/src/screens/Sharing/Components/SubUnitItem.js

@@ -0,0 +1,28 @@
+import { Colors } from '../../../configs';
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { TitleCheckBox } from '.';
+import { View } from 'react-native';
+import { normalize } from '../../../configs/Constants';
+
+const SubUnitItem = ({ item, isChecked, onSelect, childrenRender }) => {
+  return (
+    <View style={styles.viewGroup}>
+      <TitleCheckBox isChecked={isChecked} item={item} onSelect={onSelect} />
+      <View style={styles.wrapDevice}>{childrenRender}</View>
+    </View>
+  );
+};
+
+export default SubUnitItem;
+const styles = StyleSheet.create({
+  wrapDevice: {
+    borderRadius: normalize(20),
+    borderWidth: 1,
+    borderColor: Colors.Gray4,
+    backgroundColor: Colors.White,
+  },
+  viewGroup: {
+    marginTop: normalize(8),
+  },
+});

package/src/screens/Sharing/Components/SubUnitTreeView.js

@@ -0,0 +1,68 @@
+import {
+  AccessibilityLabel,
+  Constants,
+  normalize,
+} from '../../../configs/Constants';
+import { FlatList, Text, View } from 'react-native';
+
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import SubUnitItem from './SubUnitItem';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+
+const SubUnitTreeNode = ({ dataNode, render }) => {
+  return (
+    <View>
+      {render &&
+        render({
+          item: dataNode,
+          childrenRender: (dataNode?.children || []).map((child) => (
+            <SubUnitTreeNode key={child.key} dataNode={child} render={render} />
+          )),
+        })}
+    </View>
+  );
+};
+
+const SubUnitTreeView = ({ data, render, selectedKeys, onSelect }) => {
+  const t = useTranslations();
+  const { key, children: subUnitsData } = data[0];
+  return (
+    <View>
+      <FlatList
+        data={subUnitsData}
+        renderItem={({ item }) => (
+          <SubUnitTreeNode dataNode={item} render={render} />
+        )}
+        extraData={subUnitsData}
+        keyExtractor={(item) => item.key}
+        ListHeaderComponent={
+          subUnitsData.length && (
+            <SubUnitItem
+              isChecked={selectedKeys.includes(key)}
+              item={data[0]}
+              onSelect={onSelect}
+            />
+          )
+        }
+        ListEmptyComponent={() => (
+          <Text
+            style={styles.textNodata}
+            accessibilityLabel={AccessibilityLabel.TEXT_NO_DATA_STATIONS}
+          >
+            {t('no_data')}
+          </Text>
+        )}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  textNodata: {
+    alignSelf: 'center',
+    marginTop: normalize(Constants.height * 0.3),
+  },
+});
+
+export default SubUnitTreeView;

package/src/screens/Sharing/Components/TitleCheckBox.js

@@ -1,51 +1,33 @@
-import React, { useEffect, useState } from 'react';
-import { View, Text } from 'react-native';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
 import { CheckBoxCustom } from '.';
-import t from '../../../hooks/Common/useTranslations';
-import styles from './Styles/TitleCheckBoxStyles';
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { Text } from '../../../commons';
+import { View } from 'react-native';
 
-const TitleCheckBox = ({
-  isChecked = false,
-  onPress,
-  title = '',
-  id,
-  wrapCheckBoxStyle,
-  wrapStyle,
-  titleStyle,
-  idGroup,
-  isConfig,
-  isControl,
-}) => {
-  const [checked, setChecked] = useState(isChecked);
+const TitleCheckBox = ({ isChecked, item, onSelect, checkBoxStyle }) => {
+  const { label, key } = item;
   const handleOnPress = () => {
-    setChecked(!checked);
-    onPress && onPress(idGroup, !checked, id);
+    onSelect(item, !isChecked);
   };
-
-  useEffect(() => {
-    isChecked !== checked && setChecked(isChecked);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isChecked]);
-
   return (
-    <View style={[styles.wrap, wrapStyle]}>
-      <View style={styles.wrapRow}>
-        <CheckBoxCustom
-          isChecked={checked}
-          onPress={handleOnPress}
-          wrapStyle={wrapCheckBoxStyle}
-          id={idGroup}
-        />
-        <Text onPress={handleOnPress} style={[styles.title, titleStyle]}>
-          {title}
-        </Text>
-      </View>
-      <View>
-        {isControl && <Text>{t('can_control')}</Text>}
-        {isConfig && <Text>{t('view_only')}</Text>}
-      </View>
+    <View style={styles.wrapRow}>
+      <CheckBoxCustom
+        isChecked={isChecked}
+        onPress={handleOnPress}
+        wrapStyle={checkBoxStyle}
+        accessibilityLabel={`${AccessibilityLabel.SHARE_DEVICE.CHECK_BOX_CUSTOM}-${key}`}
+      />
+      <Text onPress={handleOnPress}>{label}</Text>
     </View>
   );
 };
 
+const styles = StyleSheet.create({
+  wrapRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});
+
 export default TitleCheckBox;

package/src/screens/Sharing/Components/__test__/ItemChangeRole.test.js

@@ -1,15 +1,15 @@
-import React from 'react';
-import { create, act } from 'react-test-renderer';
+import { act, create } from 'react-test-renderer';
 
-import { SCProvider } from '../../../../context';
-import { mockSCStore } from '../../../../context/mockStore';
 import ItemChangeRole from '../ItemChangeRole';
+import React from 'react';
+import { SCProvider } from '../../../../context';
 import { TouchableOpacity } from 'react-native';
+import { mockSCStore } from '../../../../context/mockStore';
 
 const mockOnPress = jest.fn();
-const wrapComponent = () => (
+const wrapComponent = (disabled) => (
   <SCProvider initState={mockSCStore({})}>
-    <ItemChangeRole onPress={mockOnPress} />
+    <ItemChangeRole onPress={mockOnPress} disabled={disabled} />
   </SCProvider>
 );
 
@@ -17,7 +17,7 @@ describe('test ItemChangeRole', () => {
   it('test ItemChangeRole', async () => {
     let tree;
     await act(async () => {
-      tree = await create(wrapComponent());
+      tree = await create(wrapComponent(true));
     });
     const instance = tree.root;
     const touchableOpacity = instance.findAllByType(TouchableOpacity);