quickblox-react-ui-kit 0.4.2-beta.2 → 0.4.2-beta.4

package/src/Presentation/Views/InviteMembers/InviteMembers.tsx

@@ -0,0 +1,316 @@
+import React, { useEffect, useRef, useState } from 'react';
+import './InviteMembers.scss';
+import ColumnContainer from '../../components/containers/ColumnContainer/ColumnContainer';
+import RowRightContainer from '../../components/containers/RowRightContainer/RowRightContainer';
+import MainButton, {
+  TypeButton,
+} from '../../components/UI/Buttons/MainButton/MainButton';
+import ErrorComponent from '../../components/UI/Placeholders/ErrorComponent/ErrorComponent';
+import { InviteMembersViewModel } from './InviteMembersViewModel';
+import useInviteMembersViewModel from './useInviteMembersViewModel';
+import { Pagination } from '../../../Domain/repository/Pagination';
+import ScrollableContainer from '../../components/containers/ScrollableContainer/ScrollableContainer';
+import { UserEntity } from '../../../Domain/entity/UserEntity';
+import { FunctionTypeVoidToVoid } from '../../../CommonTypes/BaseViewModel';
+import { DialogType } from '../../../Domain/entity/DialogTypes';
+import NotFoundContent from './NotFoundContent/NotFoundContent';
+import { OpenDialogArcheType, TypeOpenDialog } from '../EditDialog/EditDialog';
+import { Loader, UserListItem } from '../../ui-components';
+import { SearchSvg } from '../../icons';
+import TextField from '../../ui-components/TextField/TextField';
+
+type SelectedItemInfo = { isChecked: boolean; userid: number };
+
+export type FunctionTypeUserEntitiesToVoid = (
+  userIdsForInvite: number[],
+  usersIdsForRemove: number[],
+) => void;
+
+type InviteMembersProps = {
+  typeDialog: DialogType;
+  idOwnerDialog: string;
+  typeAddEditDialog: OpenDialogArcheType;
+  applyInviteUsersHandler: FunctionTypeUserEntitiesToVoid;
+  participants?: number[];
+  cancelInviteMembersHandler?: FunctionTypeVoidToVoid;
+};
+// eslint-disable-next-line react/function-component-definition,@typescript-eslint/no-unused-vars
+const InviteMembers: React.FC<InviteMembersProps> = ({
+  typeDialog,
+  idOwnerDialog,
+  typeAddEditDialog,
+  applyInviteUsersHandler,
+  participants,
+  cancelInviteMembersHandler,
+}) => {
+  const userPerPage = 12;
+  const userViewModel: InviteMembersViewModel = useInviteMembersViewModel();
+
+  const initRecord: Record<number, SelectedItemInfo> = {};
+
+  if (participants?.length && participants?.length > 0) {
+    participants.forEach((item) => {
+      initRecord[item] = { isChecked: true, userid: item };
+    });
+  }
+
+  const [selectedItems, setSelectedItems] =
+    React.useState<Record<number, SelectedItemInfo>>(initRecord);
+  const [countSelectedItems, setCountSelected] = React.useState(
+    participants ? participants?.length : 0,
+  );
+
+  useEffect(() => {
+    userViewModel.getUsers(new Pagination(0, userPerPage));
+  }, []);
+
+  const fetchMoreData = () => {
+    if (userViewModel.pagination.hasNextPage()) {
+      const newPagination = userViewModel.pagination;
+
+      newPagination.perPage = userPerPage;
+      newPagination.nextPage();
+
+      userViewModel.getUsers(newPagination);
+    }
+  };
+  const getUsersForIncludeInDialog = () => {
+    const listSelectedUsers: number[] = [];
+
+    Object.entries(selectedItems).map((x) => {
+      if (x[1].isChecked) {
+        listSelectedUsers.push(x[1].userid);
+      }
+
+      return x[1].isChecked;
+    });
+
+    return listSelectedUsers;
+  };
+
+  const getUsersForExcludedFromDialog = () => {
+    const listExcludedUsers: number[] = [];
+
+    Object.entries(selectedItems).map((x) => {
+      if (!x[1].isChecked) {
+        listExcludedUsers.push(x[1].userid);
+      }
+
+      return x[1].isChecked;
+    });
+
+    return listExcludedUsers;
+  };
+
+  const containsSelectedUser = (id: number) => {
+    let result = false;
+
+    const r = Object.entries(selectedItems).findIndex(
+      (x) => x[1].userid === id && x[1].isChecked,
+    );
+
+    if (r >= 0) {
+      result = true;
+    }
+
+    return result;
+  };
+
+  const getDisabledStatus = (user: UserEntity) => {
+    if (user.id.toString() === idOwnerDialog) {
+      return true;
+    }
+    if (
+      typeDialog === DialogType.private &&
+      getUsersForIncludeInDialog().length >= 1 &&
+      !containsSelectedUser(user.id)
+    ) {
+      return true;
+    }
+
+    return false;
+  };
+
+  const handleUserListItemChange = (userId: number, value: boolean) => {
+    setSelectedItems((prevState) => {
+      return {
+        ...prevState,
+        [userId]: { isChecked: value, userid: userId },
+      };
+    });
+
+    setCountSelected(getUsersForIncludeInDialog().length);
+  };
+
+  const [userNameForFilter, setUserNameForFilter] = useState<string>('');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (userNameForFilter.length > 2) {
+      const newFilter: string = userNameForFilter;
+
+      userViewModel.updateFilter(newFilter);
+    }
+
+    setTimeout(() => inputRef.current?.focus(), 500);
+
+    if (userNameForFilter.length === 0) {
+      userViewModel.updateFilter('');
+    }
+  }, [userNameForFilter]);
+
+  useEffect(() => {
+    if (userNameForFilter.length > 2) {
+      userViewModel.getUsers(new Pagination(0, userPerPage));
+    }
+
+    setTimeout(() => inputRef.current?.focus(), 500);
+
+    if (userNameForFilter.length === 0) {
+      userViewModel.getUsers(new Pagination(0, userPerPage));
+    }
+  }, [userViewModel.filter]);
+
+  return (
+    <ColumnContainer gapBetweenItem="8px">
+      <div className="container-invite-members">
+        <div className="container-invite-members--add-members-container">
+          <div className="container-invite-members--add-members-container--wrapper">
+            <TextField
+              ref={inputRef}
+              className="filtered-text-field"
+              disabled={userViewModel.loading}
+              placeholder="Search"
+              icon={<SearchSvg className="filtered-text-field__icon" />}
+              value={userNameForFilter}
+              onChange={(value) => {
+                setUserNameForFilter(value);
+              }}
+            />
+            <div className="container-invite-members--add-members-container--wrapper__inf">
+              {countSelectedItems} selected
+            </div>
+            <div className="container-invite-members--add-members-container--wrapper__members">
+              <ColumnContainer>
+                {userViewModel?.loading && (
+                  <div className="container-invite-members--add-members-container--loader">
+                    <div
+                      style={{
+                        height: '44px',
+                        width: '44px',
+                      }}
+                    >
+                      <Loader
+                        size="md"
+                        className="container-invite-members-loader"
+                      />
+                    </div>
+                  </div>
+                )}
+                {userViewModel?.error && !userViewModel?.loading && (
+                  <ErrorComponent
+                    title={userViewModel?.error}
+                    ClickActionHandler={() => {
+                      alert('call click retry');
+                    }}
+                  />
+                )}
+                {userViewModel.users && userViewModel.users.length > 0 ? (
+                  <ScrollableContainer
+                    className="container-invite-members--add-members-container--wrapper__members__list"
+                    data={userViewModel.users}
+                    renderItem={(user) =>
+                      user.id.toString() !== idOwnerDialog ? (
+                        <UserListItem
+                          userName={user.full_name}
+                          key={user.id}
+                          avatarUrl={user.photo!}
+                          checked={selectedItems[user.id]?.isChecked || false}
+                          onChange={(value: boolean) =>
+                            handleUserListItemChange(user.id, value)
+                          }
+                          disabled={getDisabledStatus(user)}
+                        />
+                      ) : null
+                    }
+                    onEndReached={fetchMoreData}
+                    onEndReachedThreshold={0.8}
+                    refreshing={false}
+                  />
+                ) : (
+                  <div className="container-invite-members--add-members-container--wrapper__members__empty-members">
+                    <NotFoundContent message="There are no members" />
+                  </div>
+                )}
+              </ColumnContainer>
+            </div>
+          </div>
+          <div className="container-invite-members--btn-container">
+            <RowRightContainer
+              minHeightContainer="32px"
+              gapBetweenItem="8px"
+              RightContainerSize={{
+                flexBasis: '63px',
+                minWidth: '63px',
+                maxWidth: '63px',
+                minHeight: '32px',
+                maxHeight: '32px',
+              }}
+              RightItem={
+                <div>
+                  <MainButton
+                    title={
+                      typeAddEditDialog === TypeOpenDialog.create
+                        ? 'Create'
+                        : 'Save'
+                    }
+                    typeButton={TypeButton.default}
+                    disabled={
+                      typeDialog === DialogType.private &&
+                      getUsersForIncludeInDialog().length <= 0
+                    }
+                    clickHandler={() => {
+                      const listUsersForInvite: number[] =
+                        getUsersForIncludeInDialog();
+                      const listUsersForRemove: number[] =
+                        getUsersForExcludedFromDialog();
+
+                      if (applyInviteUsersHandler) {
+                        applyInviteUsersHandler(
+                          listUsersForInvite,
+                          listUsersForRemove,
+                        );
+                      }
+                    }}
+                  />
+                </div>
+              }
+              CenterContainerSize={{
+                flexBasis: '78px',
+                minWidth: '78px',
+                maxWidth: '78px',
+                minHeight: '32px',
+                maxHeight: '32px',
+              }}
+              CenterItem={
+                <div>
+                  <MainButton
+                    title="Cancel"
+                    typeButton={TypeButton.outlined}
+                    clickHandler={() => {
+                      if (cancelInviteMembersHandler) {
+                        cancelInviteMembersHandler();
+                      }
+                    }}
+                  />
+                </div>
+              }
+            />
+          </div>
+        </div>
+      </div>
+    </ColumnContainer>
+  );
+};
+
+export default InviteMembers;

package/src/Presentation/Views/InviteMembers/InviteMembersViewModel.ts

@@ -0,0 +1,18 @@
+import BaseViewModel, {
+  FunctionTypePaginationToVoid,
+  FunctionTypeStringToVoid,
+  FunctionTypeVoidToVoid,
+} from '../../../CommonTypes/BaseViewModel';
+import { Pagination } from '../../../Domain/repository/Pagination';
+import { UserEntity } from '../../../Domain/entity/UserEntity';
+
+export interface InviteMembersViewModel extends BaseViewModel<UserEntity> {
+  loading: boolean;
+  error: string;
+  pagination: Pagination;
+  users: UserEntity[]; // content,
+  filter: string;
+  getUsers: FunctionTypePaginationToVoid; // prepareContent
+  release: FunctionTypeVoidToVoid; // release Content,
+  updateFilter: FunctionTypeStringToVoid;
+}

package/src/Presentation/Views/InviteMembers/InviteUsersList/SingleUserWithCheckBox/SingleUserWithCheckBox.scss

@@ -0,0 +1,90 @@
+$user-single-container-height: 336px;
+.user-single-container-chbox {
+  min-height: $user-single-container-height;
+  max-height: $user-single-container-height;
+  height: $user-single-container-height;
+
+  &--search-wrapper{
+    min-height: 56px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 16px;
+
+    &__search-text{
+      min-height: 24px;
+      font-family: 'Roboto';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 24px;
+      letter-spacing: 0.15px;
+      flex: 2 2 268px;
+      letter-spacing: 0.15px;
+    }
+    &__search-icon{
+      min-height: 24px;
+      margin-left: 10px;
+      flex: 1 1 24px;
+      cursor: pointer;
+    }
+  }
+
+  &--wrapper {
+    min-height: 56px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 16px;
+
+    border-bottom: 1px solid var(--color-divider);
+
+    &__username {
+
+      // width: 193px;
+      height: 24px;
+      font-family: 'Roboto';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 24px;
+
+      display: flex;
+      align-items: center;
+      letter-spacing: 0.15px;
+      color: var(--main-text);
+
+    }
+    &__select {
+      min-height: 24px;
+      min-width: 24px;
+      max-width: 24px;
+    }
+
+    &__icon {
+      min-height: 40px;
+      min-width: 40px;
+      max-height: 40px;
+      max-width: 40px;
+      margin-left: 16px;
+      margin-top: 8px;
+      margin-bottom: 8px;
+      // flex: 1 1 24px;
+      display: flex;
+      //cursor: pointer;
+      background-color: var(--disabled-elements);
+      border-radius: 50%;
+      align-items: center;
+      text-align: center;
+      align-content: center;
+
+      &__content {
+        margin: 6px;
+      }
+    }
+  }
+}

package/src/Presentation/Views/InviteMembers/InviteUsersList/SingleUserWithCheckBox/SingleUserWithCheckBox.tsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import './SingleUserWithCheckBox.scss';
+import { UserEntity } from '../../../../../Domain/entity/UserEntity';
+import ActiveSvg from '../../../../components/UI/svgs/ActiveSvg/ActiveSvg';
+import User from '../../../../components/UI/svgs/Icons/Contents/User';
+import { useMobileLayout } from '../../../../components/containers/SectionList/hooks';
+import UserAvatar from '../../../EditDialog/UserAvatar/UserAvatar';
+
+export type FunctionTypeUserEntityToVoid = (
+  item: UserEntity,
+  checkedStatus: boolean,
+) => void;
+
+type SingleUserWithCheckBoxProps = {
+  user: UserEntity;
+  isElementChecked: boolean;
+  isDisabled: boolean;
+  checkedHandler: FunctionTypeUserEntityToVoid;
+  keyValue?: number;
+};
+// eslint-disable-next-line react/function-component-definition,@typescript-eslint/no-unused-vars
+const SingleUserWithCheckBox: React.FC<SingleUserWithCheckBoxProps> = ({
+  user,
+  checkedHandler,
+  isElementChecked,
+  keyValue,
+  isDisabled = false,
+}) => {
+  const [isMobile] = useMobileLayout();
+
+  function getChecked(index: number | undefined) {
+    const result = isElementChecked; // || isUserChecked;
+
+    console.log(index);
+
+    return result;
+  }
+  // const [dialogAvatarUrl, setDialogAvatarUrl] = React.useState('');
+  // const getUserAvatarUid = () => {
+  //   let result = '';
+  //
+  //   result = user?.blob_id || '';
+  //
+  //   return result;
+  // };
+  //
+  // async function getDialogPhotoFileForPreview() {
+  //   const fileUid: string = getUserAvatarUid();
+  //
+  //   if (fileUid && fileUid.length > 0) {
+  //     let tmpFileUrl: string = fileUid && QB.content.privateUrl(fileUid);
+  //     const { blobFile } = await Creator.createBlobFromUrl(tmpFileUrl);
+  //
+  //     tmpFileUrl = blobFile ? URL.createObjectURL(blobFile) : tmpFileUrl || '';
+  //     setDialogAvatarUrl(tmpFileUrl);
+  //   }
+  // }
+  // useEffect(() => {
+  //   getDialogPhotoFileForPreview();
+  //
+  //   return () => {
+  //     if (dialogAvatarUrl) {
+  //       URL.revokeObjectURL(dialogAvatarUrl);
+  //     }
+  //   };
+  // }, []);
+
+  return (
+    <div key={keyValue} className="user-single-container-chbox--wrapper">
+      <div className="user-single-container-chbox--wrapper__icon">
+        <ActiveSvg
+          content={
+            user.photo ? (
+              <UserAvatar
+                urlAvatar={user.photo}
+                iconTheme={{ width: '41px', height: '41px' }}
+              />
+            ) : (
+              <div className="user-single-container-chbox--wrapper__icon__content">
+                <User
+                  width="26"
+                  height="26"
+                  applyZoom
+                  color="var(--tertiary-elements)"
+                />
+              </div>
+            )
+          }
+          onClick={() => {
+            console.log('user click...');
+          }}
+          onTouch={() => {
+            console.log('user touch...');
+          }}
+        />
+      </div>
+      <div
+        className="user-single-container-chbox--wrapper__username"
+        style={isMobile ? { width: '133px' } : { width: '193px' }}
+      >
+        {`${user?.full_name || user?.login || user?.email || user?.id}`}
+      </div>
+      <div className="user-single-container-chbox--wrapper__select">
+        <input
+          type="checkbox"
+          checked={getChecked(keyValue)}
+          disabled={isDisabled}
+          onChange={() => {
+            console.log('have check in SingleUserWithCheckBox');
+            const newStatus = !isElementChecked;
+
+            if (checkedHandler) {
+              checkedHandler(user, newStatus);
+            }
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default SingleUserWithCheckBox;

package/src/Presentation/Views/InviteMembers/InviteUsersResultViewModel.ts

@@ -0,0 +1,12 @@
+import { UserEntity } from '../../../Domain/entity/UserEntity';
+
+export default class InviteUsersResultViewModel {
+  public users: UserEntity[];
+
+  public status: boolean[];
+
+  constructor(users: UserEntity[] = [], status: boolean[] = []) {
+    this.users = users;
+    this.status = status;
+  }
+}

package/src/Presentation/Views/InviteMembers/NotFoundContent/NotFoundContent.scss

@@ -0,0 +1,38 @@
+.not-found-content-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0px;
+  gap: 16px;
+
+  //width: 332px;
+  width: 100%;
+  height: 100px;
+
+  background: var(--main-background);
+
+  &__icon {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 4px;
+
+    width: 60px;
+    height: 60px;
+  }
+
+  &__message {
+    width: 164px;
+    height: 24px;
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+
+    text-align: center;
+    letter-spacing: 0.15px;
+    color: var(--caption);
+  }
+}

package/src/Presentation/Views/InviteMembers/NotFoundContent/NotFoundContent.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import './NotFoundContent.scss';
+import GroupChat from '../../../components/UI/svgs/Icons/Contents/GroupChat';
+
+type NotFoundContentProps = {
+  message: string;
+};
+// eslint-disable-next-line react/function-component-definition
+const NotFoundContent: React.FC<NotFoundContentProps> = ({
+  message,
+}: NotFoundContentProps) => {
+  return (
+    <div className="not-found-content-container">
+      <div className="not-found-content-container__icon">
+        <GroupChat width="52" height="52" color="var(--caption)" />
+      </div>
+      <div className="not-found-content-container__message">{message}</div>
+    </div>
+  );
+};
+
+export default NotFoundContent;