feat(communities): PEDAGO-2911 adding members list

Author: francoisTouchardEdifice

assets/i18n/fr.json

@@ -337,7 +337,11 @@
   "communities-list-empty-title": "C'est calme... pour l'instant !",
   "communities-member": "membre",
   "communities-members": "membres",
+  "communities-members-list-empty-text": "Ajoutez des membres à la communauté à partir de la version web de Communautés.",
+  "communities-members-list-empty-title": "Une communauté, c'est mieux à plusieurs !",
   "communities-badge-new": "Nouveau",
+  "communities-role-admin": "Gestionnaire",
+  "communities-role-member": "Membre",
   "competences-assessment-levellegendmodal-title": "Légende",
   "competences-home-averages": "Moyennes",
   "competences-home-colors": "Couleurs",

assets/icons/uiIcons/options-horizontal.svg

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { View, ViewStyle } from 'react-native';
+
+import styles from './styles';
+import { VisibleItemProps } from './types';
+
+import theme from '~/app/theme';
+import { SingleAvatar } from '~/framework/components/avatar';
+
+const VisibleItem = ({ avatarSize = 'md', children, isItemEven, isListReadonly, rightElement, userId }: VisibleItemProps) => {
+  const backgroundColorStyle: ViewStyle | undefined = React.useMemo(() => {
+    return !isItemEven ? { backgroundColor: theme.palette.grey.fog } : undefined;
+  }, [isItemEven]);
+
+  return (
+    <View style={[backgroundColorStyle, styles.container]}>
+      <SingleAvatar size={avatarSize} userId={userId} style={styles.flex0} />
+      <View style={styles.flex1}>{children}</View>
+      {!isListReadonly && <View style={styles.flex0}>{rightElement}</View>}
+    </View>
+  );
+};
+
+export default VisibleItem;

src/framework/components/card/visible-item/component.tsx

@@ -0,0 +1,5 @@
+import VisibleItem from './component';
+import VisibleItemLoader from './loader/component';
+
+export { VisibleItemLoader };
+export default VisibleItem;

src/framework/components/card/visible-item/index.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { View, ViewStyle } from 'react-native';
+
+import { Fade, Placeholder, PlaceholderMedia } from 'rn-placeholder';
+
+import theme from '~/app/theme';
+import { AvatarSizes } from '~/framework/components/avatar/styles';
+import styles from '~/framework/components/card/visible-item/styles';
+import { VisibleItemLoaderProps } from '~/framework/components/card/visible-item/types';
+import { UI_SIZES } from '~/framework/components/constants';
+
+const VisibleItemLoader = ({ avatarSize = 'md', children, isItemEven }: VisibleItemLoaderProps) => {
+  const avatarWidth = React.useMemo(() => {
+    return AvatarSizes[avatarSize] + UI_SIZES.border.small * 2;
+  }, [avatarSize]);
+
+  const backgroundColorStyle: ViewStyle | undefined = React.useMemo(() => {
+    return !isItemEven ? { backgroundColor: theme.palette.grey.fog } : undefined;
+  }, [isItemEven]);
+
+  return (
+    <View style={[backgroundColorStyle, styles.container]}>
+      <View style={[styles.flex0, { width: avatarWidth }]}>
+        <Placeholder Animation={Fade}>
+          <PlaceholderMedia isRound size={avatarWidth} />
+        </Placeholder>
+      </View>
+      <View style={styles.flex1}>{children}</View>
+    </View>
+  );
+};
+
+export default VisibleItemLoader;

src/framework/components/card/visible-item/loader/component.tsx

@@ -0,0 +1,19 @@
+import { StyleSheet } from 'react-native';
+
+import { UI_SIZES } from '~/framework/components/constants';
+
+export default StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    paddingHorizontal: UI_SIZES.spacing.big,
+    paddingVertical: UI_SIZES.spacing.small,
+  },
+  flex0: {
+    flex: 0,
+  },
+  flex1: {
+    flex: 1,
+    marginHorizontal: UI_SIZES.spacing.small,
+  },
+});

src/framework/components/card/visible-item/styles.ts

@@ -0,0 +1,12 @@
+import { Size } from '~/framework/components/avatar';
+
+export interface VisibleItemProps {
+  avatarSize?: Size | keyof typeof Size;
+  children: React.ReactNode;
+  isItemEven?: boolean;
+  isListReadonly?: boolean;
+  rightElement?: React.ReactNode;
+  userId: string;
+}
+
+export type VisibleItemLoaderProps = Omit<VisibleItemProps, 'isListReadonly' | 'rightElement' | 'userId'>;

src/framework/components/card/visible-item/types.ts

@@ -213,6 +213,7 @@ const imports = {
   'ui-move': async () => import('ASSETS/icons/uiIcons/move.svg'),
   'ui-notif': async () => import('ASSETS/icons/uiIcons/notif.svg'),
   'ui-options': async () => import('ASSETS/icons/uiIcons/options.svg'),
+  'ui-options-horizontal': async () => import('ASSETS/icons/uiIcons/options-horizontal.svg'),
   'ui-orderedList': async () => import('ASSETS/icons/uiIcons/orderedList.svg'),
   'ui-pause': async () => import('ASSETS/icons/uiIcons/pause.svg'),
   'ui-personBook': async () => import('ASSETS/icons/uiIcons/person_book.svg'),

src/framework/components/picture/svg/index.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import styles from './styles';
+import { MemberListItemProps } from './types';
+
+import { I18n } from '~/app/i18n';
+import theme from '~/app/theme';
+import { SmallBoldText, SmallText } from '~/framework/components/text';
+
+const profileMap = {
+  guest: {
+    color: theme.palette.complementary.pink.regular,
+    profileKey: 'guest',
+  },
+  personnel: {
+    color: theme.palette.complementary.purple.regular,
+    profileKey: 'personnel',
+  },
+  relative: {
+    color: theme.palette.complementary.blue.regular,
+    profileKey: 'relative',
+  },
+  student: {
+    color: theme.palette.complementary.orange.regular,
+    profileKey: 'student',
+  },
+  teacher: {
+    color: theme.palette.complementary.green.regular,
+    profileKey: 'teacher',
+  },
+};
+
+const MemberListItem: React.FC<MemberListItemProps> = ({ name, profileType, role }) => {
+  const { color, profileKey } = profileMap[profileType.toLowerCase()] ?? {
+    color: theme.palette.grey.black,
+    profileKey: '',
+  };
+  const profileLabel = profileKey ? I18n.get(`user-profiletypes-${profileKey}`) : '';
+  const roleLabel = role ? I18n.get(`communities-role-${role.toLowerCase()}`) : '';
+
+  return (
+    <View style={styles.container}>
+      <SmallBoldText numberOfLines={1}>{name}</SmallBoldText>
+      <View style={styles.containerText}>
+        <SmallBoldText style={{ color }}>{profileLabel}</SmallBoldText>
+        <View style={styles.separator}>
+          <SmallBoldText>|</SmallBoldText>
+        </View>
+        <SmallText>{roleLabel}</SmallText>
+      </View>
+    </View>
+  );
+};
+
+export default MemberListItem;

src/framework/modules/communities/components/member-list-item/component.tsx

@@ -0,0 +1,9 @@
+import MemberListItem from './component';
+import MemberListItemLoader from './loader/component';
+import ItemOptions from './options/component';
+import type { MemberProfileType } from './types';
+
+export { ItemOptions, MemberListItemLoader };
+export type { MemberProfileType };
+
+export default MemberListItem;