@eohjsc/react-native-smart-city 0.5.1 → 0.5.2-rc

package/src/screens/Sharing/SelectShareDevice.js

@@ -0,0 +1,273 @@
+import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { View, FlatList, Alert, ActivityIndicator } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import ViewButtonBottom from '../../commons/ViewButtonBottom';
+import Text from '../../commons/Text';
+import styles from './Styles/SelectPermissionStyles';
+import { axiosGet } from '../../utils/Apis/axios';
+import Routes from '../../utils/Route';
+import { API, Colors } from '../../configs';
+import { AccessibilityLabel } from '../../configs/Constants';
+import CheckBoxSubUnit from './Components/CheckBoxSubUnit';
+import EndDevice from './Components/EndDevice';
+
+const SelectShareDevice = ({ route }) => {
+  const { unit } = route.params;
+  const t = useTranslations();
+  const navigation = useNavigation();
+  const [dataStations, setDataStations] = useState([]);
+  const [isTickAllDevices, setIsTickAllDevices] = useState(false);
+  const [expandedItemIds, setExpandedItemIds] = useState([]);
+  const [needRefresh, setNeedRefresh] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  const onTickAllDevices = (indexSubUnit, isChecked) => {
+    setIsTickAllDevices(isChecked);
+    const updatedDataStations = dataStations.map((station) => ({
+      ...station,
+      isChecked,
+      devices: station.devices.map((device) => ({
+        ...device,
+        isChecked,
+        actions: device.actions.map((action) => ({
+          ...action,
+          isChecked,
+        })),
+        read_configs: device.read_configs.map((config) => ({
+          ...config,
+          isChecked,
+        })),
+      })),
+    }));
+    setDataStations(updatedDataStations);
+  };
+
+  const onTickSubUnit = (indexSubUnit, isChecked) => {
+    dataStations[indexSubUnit] = {
+      ...dataStations[indexSubUnit],
+      isChecked,
+      devices: dataStations[indexSubUnit].devices.map((i) => ({
+        ...i,
+        isChecked,
+        actions: i.actions.map((j) => ({ ...j, isChecked })),
+        read_configs: i.read_configs.map((j) => ({ ...j, isChecked })),
+      })),
+    };
+    setDataStations(dataStations);
+    setIsTickAllDevices(!dataStations.some((object) => !object.isChecked));
+    setNeedRefresh(true);
+  };
+
+  const onTickEndDevice = (indexSubUnit, indexEndDevice, item, isChecked) => {
+    item.isChecked = isChecked;
+    item.actions = item.actions.map((j) => ({ ...j, isChecked }));
+    item.read_configs = item.read_configs.map((j) => ({ ...j, isChecked }));
+
+    dataStations[indexSubUnit].devices[indexEndDevice] = item;
+
+    dataStations[indexSubUnit] = {
+      ...dataStations[indexSubUnit],
+      isChecked:
+        dataStations[indexSubUnit].devices.length ===
+        dataStations[indexSubUnit].devices.filter((i) => i.isChecked).length,
+    };
+    setIsTickAllDevices(!dataStations.some((i) => !i.isChecked));
+    setDataStations(dataStations);
+    setNeedRefresh(true);
+  };
+
+  const onTickedChild = (
+    indexSubUnit,
+    indexEndDevice,
+    configId,
+    item,
+    isConfig,
+    isChecked
+  ) => {
+    const subUnit = dataStations[indexSubUnit];
+    const device = subUnit.devices[indexEndDevice];
+    const configs = item[`${isConfig ? 'read_configs' : 'actions'}`];
+    const child = configs.find((i) => i.id === configId);
+
+    child.isChecked = isChecked;
+    device.isChecked =
+      configs.length === configs.filter((i) => i.isChecked).length;
+
+    subUnit.isChecked =
+      subUnit.devices.length ===
+      subUnit.devices.filter((i) => i.isChecked).length;
+
+    setIsTickAllDevices(!dataStations.some((i) => !i.isChecked));
+    setDataStations(dataStations);
+    setNeedRefresh(true);
+  };
+
+  const toggleExpandEndDevice = (deviceItem) => () => {
+    setExpandedItemIds((ids) => {
+      const index = ids.indexOf(deviceItem.id);
+      if (index !== -1) {
+        return [...ids.slice(0, index), ...ids.slice(index + 1)];
+      } else {
+        return [...ids, deviceItem.id];
+      }
+    });
+  };
+
+  const expandEndDevice = (deviceItem) => () => {
+    if (!expandedItemIds.includes(deviceItem.id)) {
+      setExpandedItemIds((prev) => [...prev, deviceItem.id]);
+    }
+  };
+
+  const GroupEndDevice = ({ item, indexSubUnit }) => {
+    const { name, devices, isChecked } = item;
+    return (
+      <View style={styles.viewGroup}>
+        <CheckBoxSubUnit
+          title={name}
+          item={item}
+          onPress={onTickSubUnit}
+          isChecked={isChecked}
+          indexSubUnit={indexSubUnit}
+        />
+        <View style={styles.wrapDevice}>
+          {devices.map((i, index) => (
+            <EndDevice
+              item={i}
+              key={i.id}
+              onTickedChild={onTickedChild}
+              onTickEndDevice={onTickEndDevice}
+              isItemExpanded={expandedItemIds.includes(i.id)}
+              toggleExpandEndDevice={toggleExpandEndDevice(i)}
+              expandEndDevice={expandEndDevice(i)}
+              indexSubUnit={indexSubUnit}
+              indexEndDevice={index}
+            />
+          ))}
+        </View>
+      </View>
+    );
+  };
+
+  const renderSubUnit = ({ item, index }) => (
+    <GroupEndDevice key={item.id} item={item} indexSubUnit={index} />
+  );
+
+  const renderFlatList = useMemo(() => {
+    setNeedRefresh(false);
+    return (
+      <FlatList
+        keyExtractor={(item) => item.id}
+        extraData={dataStations}
+        data={dataStations}
+        renderItem={renderSubUnit}
+        scrollIndicatorInsets={{ right: 1 }}
+        ListHeaderComponent={
+          <CheckBoxSubUnit
+            title={t('text_all_devices')}
+            onPress={onTickAllDevices}
+            isChecked={isTickAllDevices}
+          />
+        }
+      />
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dataStations, isTickAllDevices, expandedItemIds, needRefresh]);
+
+  const getUnitPermission = useCallback(async () => {
+    const { success, data } = await axiosGet(
+      API.SHARE.UNIT_PERMISSIONS(unit.id)
+    );
+    if (success) {
+      setDataStations(data);
+    }
+    setLoading(false);
+  }, [unit.id]);
+
+  useEffect(() => {
+    getUnitPermission();
+  }, [getUnitPermission, unit]);
+
+  const onPressBottom = async () => {
+    setLoading(true);
+    let read_permissions = [];
+    let control_permissions = [];
+
+    for (const station of dataStations) {
+      for (const end_device of station.devices) {
+        const action_ids = end_device.actions
+          .filter((action) => action.isChecked)
+          .map((action) => action.id);
+
+        const config_ids = end_device.read_configs
+          .filter((config) => config.isChecked)
+          .map((config) => config.id);
+
+        if (action_ids.length > 0) {
+          control_permissions.push({ id: end_device.id, values: action_ids });
+        }
+
+        if (config_ids.length > 0) {
+          read_permissions.push({ id: end_device.id, values: config_ids });
+        }
+
+        if (
+          action_ids.length === 0 &&
+          config_ids.length === 0 &&
+          end_device.isChecked
+        ) {
+          read_permissions.push({ id: end_device.id, values: [] });
+        }
+      }
+    }
+
+    if (read_permissions.length === 0 && control_permissions.length === 0) {
+      setLoading(false);
+      Alert.alert('', t('choose_at_least_one'));
+      return;
+    }
+    navigation.navigate(Routes.SharingInviteMembers, {
+      unit,
+      permissions: { read_permissions, control_permissions },
+    });
+  };
+
+  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 color={Colors.Primary} />
+        ) : dataStations.length > 0 ? (
+          renderFlatList
+        ) : (
+          <Text
+            style={styles.textNodata}
+            accessibilityLabel={AccessibilityLabel.TEXT_NO_DATA_STATIONS}
+          >
+            {t('no_data')}
+          </Text>
+        )}
+      </View>
+      <View style={styles.wrapViewButtonStyle}>
+        <ViewButtonBottom
+          accessibilityLabelPrefix={
+            AccessibilityLabel.PREFIX.SHARING_SELECT_PERMISSION
+          }
+          leftTitle={t('cancel')}
+          onLeftClick={() => navigation.goBack()}
+          rightTitle={t('next')}
+          rightDisabled={false}
+          onRightClick={onPressBottom}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default memo(SelectShareDevice);

package/src/screens/Sharing/SelectUser.js

@@ -21,6 +21,7 @@ import { axiosPost } from '../../utils/Apis/axios';
 import { AccessibilityLabel } from '../../configs/Constants';
 import Text from '../../commons/Text';
 import { ToastBottomHelper } from '../../utils/Utils';
+import ProcessingBar from '../../commons/ProcessingBar';
 
 const SharingInviteMembers = ({ route }) => {
   const t = useTranslations();
@@ -29,6 +30,8 @@ const SharingInviteMembers = ({ route }) => {
   const [errorText, setErrorText] = useState('');
   const [content, setContent] = useState('');
   const [users, setUsers] = useState([]);
+  const [isAdding, setIsAdding] = useState(false);
+
   const sharePermissions = useCallback(
     async (phone, email) => {
       Keyboard.dismiss();
@@ -38,6 +41,7 @@ const SharingInviteMembers = ({ route }) => {
       if (userSharedPermission.length) {
         return false;
       }
+      setIsAdding(true);
       const { success, data } = await axiosPost(API.SHARE.SHARE(), {
         phone,
         email,
@@ -48,6 +52,7 @@ const SharingInviteMembers = ({ route }) => {
         ToastBottomHelper.success(t('invited_user', { user: phone || email }));
         setUsers([...users, data.user]);
       }
+      setIsAdding(false);
     },
     [users, unit.id, permissions, t]
   );
@@ -156,6 +161,7 @@ const SharingInviteMembers = ({ route }) => {
         onRightClick={onPressNext}
         accessibilityLabelPrefix={AccessibilityLabel.PREFIX.BUTTON_ADD_MEMBER}
       />
+      {isAdding && <ProcessingBar totalPercent={0.1} />}
     </View>
   );
 };

package/src/screens/Sharing/Styles/SelectPermissionStyles.js

@@ -2,13 +2,12 @@ import { StyleSheet } from 'react-native';
 import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 import { Colors } from '../../../configs';
 import { Constants, normalize } from '../../../configs/Constants';
-import { FONT_PREFIX } from '../../../configs/Constants';
 
 export default StyleSheet.create({
   wrap: {
     flex: 1,
     backgroundColor: Colors.Gray2,
-    paddingTop: getStatusBarHeight() + 10,
+    paddingTop: getStatusBarHeight() + 20,
   },
   contentContainer: {
     flex: 1,
@@ -18,7 +17,7 @@ export default StyleSheet.create({
     color: Colors.Gray9,
     fontSize: 20,
     lineHeight: 28,
-    marginTop: 8,
+    marginTop: 10,
     marginBottom: 4,
     marginLeft: 16,
   },
@@ -51,17 +50,9 @@ export default StyleSheet.create({
   },
   textAllDevice: {
     fontSize: 16,
-    lineHeight: 24,
-    fontWeight: '600',
-    fontFamily: FONT_PREFIX + '-' + 'Semibold',
-    fontStyle: 'normal',
   },
   GroupDeviceItem: {
     fontSize: 14,
-    lineHeight: 22,
-    fontWeight: '600',
-    fontFamily: FONT_PREFIX + '-' + 'Semibold',
-    fontStyle: 'normal',
   },
   wrapViewButtonStyle: {
     paddingTop: 70,

package/src/screens/Sharing/UnitMemberList.js

@@ -49,7 +49,7 @@ const UnitMemberList = ({ route }) => {
     }
 
     navigate(Routes.AddMemberStack, {
-      screen: Routes.SharingSelectPermission,
+      screen: Routes.SelectShareDevice,
       params: { unit: { id: unitId } },
     });
   }, [
@@ -109,6 +109,7 @@ const UnitMemberList = ({ route }) => {
           />
         )}
       </WrapHeaderScrollable>
+
       <AlertAction
         visible={stateAlertSharingMenu.visible}
         hideModal={hideStateAlertSharingMenu}

package/src/screens/Sharing/UpdateShareDevice.js

@@ -0,0 +1,322 @@
+import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { View, FlatList, Alert, ActivityIndicator } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import ViewButtonBottom from '../../commons/ViewButtonBottom';
+import Text from '../../commons/Text';
+import styles from './Styles/SelectPermissionStyles';
+import { axiosGet, axiosPost } from '../../utils/Apis/axios';
+import { objectIds } from '../../utils/Utils';
+import { API, Colors } from '../../configs';
+import { AccessibilityLabel } from '../../configs/Constants';
+import CheckBoxSubUnit from './Components/CheckBoxSubUnit';
+import EndDevice from './Components/EndDevice';
+
+const UpdateShareDevice = ({ route }) => {
+  const t = useTranslations();
+  const { unit, member } = route.params;
+  const navigation = useNavigation();
+  const [dataStations, setDataStations] = useState([]);
+  const [isTickAllDevices, setIsTickAllDevices] = useState(false);
+  const [expandedItemIds, setExpandedItemIds] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [needRefresh, setNeedRefresh] = useState(false);
+
+  const onTickAllDevices = (indexSubUnit, isChecked) => {
+    setIsTickAllDevices(isChecked);
+    const updatedDataStations = dataStations.map((station) => ({
+      ...station,
+      isChecked,
+      devices: station.devices.map((device) => ({
+        ...device,
+        isChecked,
+        actions: device.actions.map((action) => ({
+          ...action,
+          isChecked,
+        })),
+        read_configs: device.read_configs.map((config) => ({
+          ...config,
+          isChecked,
+        })),
+      })),
+    }));
+    setDataStations(updatedDataStations);
+  };
+
+  const onTickSubUnit = (indexSubUnit, isChecked) => {
+    dataStations[indexSubUnit] = {
+      ...dataStations[indexSubUnit],
+      isChecked,
+      devices: dataStations[indexSubUnit].devices.map((i) => ({
+        ...i,
+        isChecked,
+        actions: i.actions.map((j) => ({ ...j, isChecked })),
+        read_configs: i.read_configs.map((j) => ({ ...j, isChecked })),
+      })),
+    };
+    setDataStations(dataStations);
+    setIsTickAllDevices(!dataStations.some((object) => !object.isChecked));
+    setNeedRefresh(true);
+  };
+
+  const onTickEndDevice = (indexSubUnit, indexEndDevice, item, isChecked) => {
+    item.isChecked = isChecked;
+    item.actions = item.actions.map((j) => ({ ...j, isChecked }));
+    item.read_configs = item.read_configs.map((j) => ({ ...j, isChecked }));
+
+    dataStations[indexSubUnit].devices[indexEndDevice] = item;
+
+    dataStations[indexSubUnit] = {
+      ...dataStations[indexSubUnit],
+      isChecked:
+        dataStations[indexSubUnit].devices.length ===
+        dataStations[indexSubUnit].devices.filter((i) => i.isChecked).length,
+    };
+    setIsTickAllDevices(!dataStations.some((i) => !i.isChecked));
+    setDataStations(dataStations);
+    setNeedRefresh(true);
+  };
+
+  const onTickedChild = (
+    indexSubUnit,
+    indexEndDevice,
+    configId,
+    item,
+    isConfig,
+    isChecked
+  ) => {
+    const subUnit = dataStations[indexSubUnit];
+    const device = subUnit.devices[indexEndDevice];
+    const configs = item[`${isConfig ? 'read_configs' : 'actions'}`];
+    const child = configs.find((i) => i.id === configId);
+
+    child.isChecked = isChecked;
+    device.isChecked =
+      configs.length === configs.filter((i) => i.isChecked).length;
+
+    subUnit.isChecked =
+      subUnit.devices.length ===
+      subUnit.devices.filter((i) => i.isChecked).length;
+
+    setIsTickAllDevices(!dataStations.some((i) => !i.isChecked));
+    setDataStations(dataStations);
+    setNeedRefresh(true);
+  };
+  const toggleExpandEndDevice = (deviceItem) => () => {
+    setExpandedItemIds((ids) => {
+      const index = ids.indexOf(deviceItem.id);
+      if (index !== -1) {
+        return [...ids.slice(0, index), ...ids.slice(index + 1)];
+      } else {
+        return [...ids, deviceItem.id];
+      }
+    });
+  };
+
+  const expandEndDevice = (deviceItem) => () => {
+    if (!expandedItemIds.includes(deviceItem.id)) {
+      setExpandedItemIds((prev) => [...prev, deviceItem.id]);
+    }
+  };
+
+  const autoCheckedGroup = (stations, dataDeviceShared) => {
+    const { deviceIds, actionIds, configIds } = objectIds(dataDeviceShared);
+    const updatedStations = stations.map((station) => ({
+      ...station,
+      isChecked: station.devices.every((device) =>
+        deviceIds.includes(device.id)
+      ),
+      devices: station.devices.map((device) => ({
+        ...device,
+        isChecked: deviceIds.includes(device.id),
+        actions: device.actions.map((action) => ({
+          ...action,
+          isChecked: actionIds.includes(action.id),
+        })),
+        read_configs: device.read_configs.map((config) => ({
+          ...config,
+          isChecked: configIds.includes(config.id),
+        })),
+      })),
+    }));
+    setDataStations(updatedStations);
+    setIsTickAllDevices(
+      updatedStations.length ===
+        updatedStations.filter((i) => i.isChecked).length
+    );
+  };
+
+  const GroupEndDevice = ({ item, indexSubUnit }) => {
+    const { name, devices, isChecked } = item;
+    return (
+      <View style={styles.viewGroup}>
+        <CheckBoxSubUnit
+          title={name}
+          onPress={onTickSubUnit}
+          isChecked={isChecked}
+          indexSubUnit={indexSubUnit}
+        />
+        <View style={styles.wrapDevice}>
+          {devices.map((i, index) => (
+            <EndDevice
+              item={i}
+              key={i.id}
+              onTickedChild={onTickedChild}
+              onTickEndDevice={onTickEndDevice}
+              isItemExpanded={expandedItemIds.includes(i.id)}
+              toggleExpandEndDevice={toggleExpandEndDevice(i)}
+              expandEndDevice={expandEndDevice(i)}
+              indexSubUnit={indexSubUnit}
+              indexEndDevice={index}
+            />
+          ))}
+        </View>
+      </View>
+    );
+  };
+
+  const onPressBottom = async () => {
+    setLoading(true);
+    let read_permissions = [];
+    let control_permissions = [];
+
+    for (const station of dataStations) {
+      for (const end_device of station.devices) {
+        const action_ids = end_device.actions
+          .filter((action) => action.isChecked)
+          .map((action) => action.id);
+
+        const config_ids = end_device.read_configs
+          .filter((config) => config.isChecked)
+          .map((config) => config.id);
+
+        if (action_ids.length > 0) {
+          control_permissions.push({ id: end_device.id, values: action_ids });
+        }
+
+        if (config_ids.length > 0) {
+          read_permissions.push({ id: end_device.id, values: config_ids });
+        }
+
+        if (
+          action_ids.length === 0 &&
+          config_ids.length === 0 &&
+          end_device.isChecked
+        ) {
+          read_permissions.push({ id: end_device.id, values: [] });
+        }
+      }
+    }
+
+    if (!read_permissions.length && !control_permissions.length) {
+      setLoading(false);
+      Alert.alert('', t('choose_at_least_one'));
+      return;
+    }
+    let phone = '';
+    let email = '';
+    if (member.phone_number) {
+      phone = member.phone_number;
+      email = '';
+    } else if (member.email) {
+      phone = '';
+      email = member.email;
+    }
+    const { success } = await axiosPost(API.SHARE.SHARE(), {
+      phone,
+      email,
+      unit: unit.id,
+      permissions: { read_permissions, control_permissions },
+      is_remove_old_permission: true,
+    });
+    setLoading(false);
+    success && navigation.goBack();
+  };
+
+  const renderSubUnit = ({ item, index }) => (
+    <GroupEndDevice key={item.id} item={item} indexSubUnit={index} />
+  );
+
+  const renderFlatList = useMemo(() => {
+    setNeedRefresh(false);
+    return (
+      <FlatList
+        keyExtractor={(item) => item.id}
+        extraData={dataStations}
+        data={dataStations}
+        renderItem={renderSubUnit}
+        scrollIndicatorInsets={{ right: 1 }}
+        ListHeaderComponent={
+          <CheckBoxSubUnit
+            title={t('text_all_devices')}
+            onPress={onTickAllDevices}
+            isChecked={isTickAllDevices}
+          />
+        }
+      />
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dataStations, isTickAllDevices, expandedItemIds, needRefresh]);
+
+  const getShareUnitPermission = useCallback(
+    async (stations) => {
+      const { success, data } = await axiosGet(
+        API.SHARE.UNIT_MEMBER_SHARE_DEVICE(unit.id, member.id)
+      );
+      if (success) {
+        autoCheckedGroup(stations, data);
+      }
+    },
+    [member.id, unit.id]
+  );
+
+  const getUnitPermission = useCallback(async () => {
+    const { success, data } = await axiosGet(
+      API.SHARE.UNIT_PERMISSIONS(unit.id)
+    );
+    if (success) {
+      setDataStations(data);
+      await getShareUnitPermission(data);
+    }
+    setLoading(false);
+  }, [getShareUnitPermission, unit.id]);
+
+  useEffect(() => {
+    getUnitPermission();
+  }, [getUnitPermission]);
+
+  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 color={Colors.Primary} />
+        ) : dataStations.length > 0 ? (
+          renderFlatList
+        ) : (
+          <Text
+            style={styles.textNodata}
+            accessibilityLabel={AccessibilityLabel.TEXT_NO_DATA_STATIONS}
+          >
+            {t('no_data')}
+          </Text>
+        )}
+      </View>
+      <View style={styles.wrapViewButtonStyle}>
+        <ViewButtonBottom
+          leftTitle={t('cancel')}
+          onLeftClick={() => navigation.goBack()}
+          rightTitle={t('done')}
+          rightDisabled={false}
+          onRightClick={onPressBottom}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default memo(UpdateShareDevice);