feat: Version 2

Closes #627, closes #1047

client/src/components/project-managers/ProjectManagers/ActionsStep.jsx

@@ -0,0 +1,149 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React, { useCallback, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { Button } from 'semantic-ui-react';
+
+import selectors from '../../../selectors';
+import entryActions from '../../../entry-actions';
+import { useSteps } from '../../../hooks';
+import { UserRoles } from '../../../constants/Enums';
+import ConfirmationStep from '../../common/ConfirmationStep';
+import UserAvatar from '../../users/UserAvatar';
+
+import styles from './ActionsStep.module.scss';
+
+const StepTypes = {
+  DELETE: 'DELETE',
+  ASSIGN_AS_OWNER: 'ASSIGN_AS_OWNER',
+};
+
+const ActionsStep = React.memo(({ projectManagerId, onClose }) => {
+  const selectProjectManagerById = useMemo(() => selectors.makeSelectProjectManagerById(), []);
+  const selectUserById = useMemo(() => selectors.makeSelectUserById(), []);
+
+  const projectManager = useSelector((state) => selectProjectManagerById(state, projectManagerId));
+  const user = useSelector((state) => selectUserById(state, projectManager.userId));
+
+  const isCurrentUser = useSelector(
+    (state) => projectManager.userId === selectors.selectCurrentUserId(state),
+  );
+
+  const { canDelete, canAssignAsOwner } = useSelector((state) => {
+    const currentUser = selectors.selectCurrentUser(state);
+
+    const isLastProjectManager =
+      selectors.selectManagerUserIdsForCurrentProject(state).length === 1;
+
+    if (currentUser.role !== UserRoles.ADMIN) {
+      return {
+        canDelete: !isLastProjectManager,
+        canAssignAsOwner: false,
+      };
+    }
+
+    const isInSharedProject = !selectors.selectCurrentProject(state).ownerProjectManagerId;
+
+    return {
+      canDelete: !isLastProjectManager,
+      canAssignAsOwner: isLastProjectManager && isInSharedProject,
+    };
+  }, shallowEqual);
+
+  const dispatch = useDispatch();
+  const [t] = useTranslation();
+  const [step, openStep, handleBack] = useSteps();
+
+  const handleAssignAsOwnerConfirm = useCallback(() => {
+    dispatch(
+      entryActions.updateCurrentProject({
+        ownerProjectManagerId: projectManagerId,
+      }),
+    );
+
+    onClose();
+  }, [projectManagerId, onClose, dispatch]);
+
+  const handleDeleteConfirm = useCallback(() => {
+    dispatch(entryActions.deleteProjectManager(projectManagerId));
+  }, [projectManagerId, dispatch]);
+
+  const handleAssignAsOwnerClick = useCallback(() => {
+    openStep(StepTypes.ASSIGN_AS_OWNER);
+  }, [openStep]);
+
+  const handleDeleteClick = useCallback(() => {
+    openStep(StepTypes.DELETE);
+  }, [openStep]);
+
+  if (step) {
+    switch (step.type) {
+      case StepTypes.ASSIGN_AS_OWNER:
+        return (
+          <ConfirmationStep
+            title="common.assignAsOwner"
+            content="common.areYouSureYouWantToAssignThisProjectManagerAsOwner"
+            buttonType="positive"
+            buttonContent="action.assignAsOwner"
+            onConfirm={handleAssignAsOwnerConfirm}
+            onBack={handleBack}
+          />
+        );
+      case StepTypes.DELETE:
+        return (
+          <ConfirmationStep
+            title={isCurrentUser ? 'common.leaveProject' : 'common.removeManager'}
+            content={
+              isCurrentUser
+                ? 'common.areYouSureYouWantToLeaveProject'
+                : 'common.areYouSureYouWantToRemoveThisManagerFromProject'
+            }
+            buttonContent={isCurrentUser ? 'action.leaveProject' : 'action.removeManager'}
+            onConfirm={handleDeleteConfirm}
+            onBack={handleBack}
+          />
+        );
+      default:
+    }
+  }
+
+  return (
+    <>
+      <span className={styles.user}>
+        <UserAvatar id={projectManager.userId} size="large" />
+      </span>
+      <span className={styles.content}>
+        <div className={styles.name}>{user.name}</div>
+        {user.username && <div className={styles.username}>@{user.username}</div>}
+      </span>
+      {canAssignAsOwner && (
+        <Button
+          fluid
+          content={t('action.assignAsOwner')}
+          className={styles.button}
+          onClick={handleAssignAsOwnerClick}
+        />
+      )}
+      {canDelete && (
+        <Button
+          fluid
+          content={isCurrentUser ? t('action.leaveProject') : t('action.removeFromProject')}
+          className={styles.button}
+          onClick={handleDeleteClick}
+        />
+      )}
+    </>
+  );
+});
+
+ActionsStep.propTypes = {
+  projectManagerId: PropTypes.string.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default ActionsStep;

client/src/components/project-managers/ProjectManagers/ActionsStep.module.scss

@@ -0,0 +1,50 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .button {
+    background: transparent;
+    box-shadow: none;
+    color: #6b808c;
+    font-weight: normal;
+    margin-top: 8px;
+    padding: 6px 11px;
+    text-align: left;
+    text-decoration: underline;
+    transition: none;
+
+    &:hover {
+      background: rgba(9, 30, 66, 0.08);
+      color: #092d42;
+    }
+  }
+
+  .content {
+    display: inline-block;
+    width: calc(100% - 44px);
+  }
+
+  .name {
+    color: #212121;
+    font-size: 16px;
+    font-weight: bold;
+    line-height: 1.2;
+    padding: 9px 28px 0 2px;
+  }
+
+  .user {
+    display: inline-block;
+    padding-right: 8px;
+    padding-top: 10px;
+    vertical-align: top;
+  }
+
+  .username {
+    color: #888888;
+    font-size: 14px;
+    line-height: 1.2;
+    padding: 2px 0 2px 2px;
+  }
+}

client/src/components/project-managers/ProjectManagers/AddStep/AddStep.jsx

@@ -0,0 +1,97 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React, { useCallback, useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { Input, Popup } from '../../../../lib/custom-ui';
+
+import selectors from '../../../../selectors';
+import entryActions from '../../../../entry-actions';
+import { useField, useNestedRef } from '../../../../hooks';
+import User from './User';
+
+import styles from './AddStep.module.scss';
+
+const AddStep = React.memo(({ onClose }) => {
+  const users = useSelector(selectors.selectActiveAdminOrProjectOwnerUsers);
+  const currentUserIds = useSelector(selectors.selectManagerUserIdsForCurrentProject);
+
+  const dispatch = useDispatch();
+  const [t] = useTranslation();
+  const [search, handleSearchChange] = useField('');
+  const cleanSearch = useMemo(() => search.trim().toLowerCase(), [search]);
+
+  const filteredUsers = useMemo(
+    () =>
+      users.filter(
+        (user) =>
+          user.name.toLowerCase().includes(cleanSearch) ||
+          (user.username && user.username.includes(cleanSearch)),
+      ),
+    [users, cleanSearch],
+  );
+
+  const [searchFieldRef, handleSearchFieldRef] = useNestedRef('inputRef');
+
+  const handleUserSelect = useCallback(
+    (userId) => {
+      dispatch(
+        entryActions.createManagerInCurrentProject({
+          userId,
+        }),
+      );
+
+      onClose();
+    },
+    [onClose, dispatch],
+  );
+
+  useEffect(() => {
+    searchFieldRef.current.focus({
+      preventScroll: true,
+    });
+  }, [searchFieldRef]);
+
+  return (
+    <>
+      <Popup.Header>
+        {t('common.addManager', {
+          context: 'title',
+        })}
+      </Popup.Header>
+      <Popup.Content>
+        <Input
+          fluid
+          ref={handleSearchFieldRef}
+          value={search}
+          placeholder={t('common.searchUsers')}
+          maxLength={128}
+          icon="search"
+          onChange={handleSearchChange}
+        />
+        {filteredUsers.length > 0 && (
+          <div className={styles.users}>
+            {filteredUsers.map((user) => (
+              <User
+                key={user.id}
+                id={user.id}
+                isActive={currentUserIds.includes(user.id)}
+                onSelect={handleUserSelect}
+              />
+            ))}
+          </div>
+        )}
+      </Popup.Content>
+    </>
+  );
+});
+
+AddStep.propTypes = {
+  onClose: PropTypes.func.isRequired,
+};
+
+export default AddStep;

client/src/components/project-managers/ProjectManagers/AddStep/AddStep.module.scss

@@ -0,0 +1,32 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .users {
+    margin-top: 8px;
+    max-height: 60vh;
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    @supports (-moz-appearance: none) {
+      scrollbar-color: rgba(0, 0, 0, 0.32) transparent;
+      scrollbar-width: thin;
+    }
+
+    &::-webkit-scrollbar {
+      width: 9px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-clip: padding-box;
+      border-left: 0.25em transparent solid;
+      border-radius: 3px;
+    }
+  }
+}

client/src/components/project-managers/ProjectManagers/AddStep/User.jsx

@@ -0,0 +1,43 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React, { useCallback, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+
+import selectors from '../../../../selectors';
+import UserAvatar from '../../../users/UserAvatar';
+
+import styles from './User.module.scss';
+
+const User = React.memo(({ id, isActive, onSelect }) => {
+  const selectUserById = useMemo(() => selectors.makeSelectUserById(), []);
+
+  const user = useSelector((state) => selectUserById(state, id));
+
+  const handleClick = useCallback(() => {
+    onSelect(id);
+  }, [id, onSelect]);
+
+  return (
+    <button type="button" disabled={isActive} className={styles.menuItem} onClick={handleClick}>
+      <span className={styles.user}>
+        <UserAvatar id={id} />
+      </span>
+      <div className={classNames(styles.menuItemText, isActive && styles.menuItemTextActive)}>
+        {user.name}
+      </div>
+    </button>
+  );
+});
+
+User.propTypes = {
+  id: PropTypes.string.isRequired,
+  isActive: PropTypes.bool.isRequired,
+  onSelect: PropTypes.func.isRequired,
+};
+
+export default User;

client/src/components/project-managers/ProjectManagers/AddStep/User.module.scss

@@ -0,0 +1,55 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .menuItem {
+    background: transparent;
+    border: none;
+    border-radius: 0.28571429rem;
+    display: block;
+    margin: 0;
+    outline: 0;
+    overflow: hidden;
+    padding: 4px;
+    text-align: left;
+    width: 100%;
+
+    &:enabled {
+      cursor: pointer;
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.05);
+      }
+    }
+  }
+
+  .menuItemText {
+    display: inline-block;
+    line-height: 32px;
+    position: relative;
+    width: calc(100% - 40px);
+  }
+
+  .menuItemTextActive:before {
+    bottom: 2px;
+    color: #798d99;
+    content: "Г";
+    font-size: 18px;
+    font-weight: normal;
+    line-height: 36px;
+    position: absolute;
+    right: 2px;
+    text-align: center;
+    transform: rotate(-135deg);
+    width: 36px;
+  }
+
+  .user {
+    display: inline-block;
+    line-height: 32px;
+    padding-right: 8px;
+    width: 40px;
+  }
+}

client/src/components/project-managers/ProjectManagers/AddStep/index.js

@@ -0,0 +1,8 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import AddStep from './AddStep';
+
+export default AddStep;

client/src/components/project-managers/ProjectManagers/ProjectManagers.jsx

@@ -0,0 +1,57 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { Button } from 'semantic-ui-react';
+
+import selectors from '../../../selectors';
+import { usePopupInClosableContext } from '../../../hooks';
+import { isUserAdminOrProjectOwner } from '../../../utils/record-helpers';
+import AddStep from './AddStep';
+import ActionsStep from './ActionsStep';
+import UserAvatar from '../../users/UserAvatar';
+
+import styles from './ProjectManagers.module.scss';
+
+const ProjectManagers = React.memo(() => {
+  const projectManagers = useSelector(selectors.selectManagersForCurrentProject);
+
+  const canAdd = useSelector((state) => {
+    const user = selectors.selectCurrentUser(state);
+
+    if (!isUserAdminOrProjectOwner(user)) {
+      return false;
+    }
+
+    return !selectors.selectCurrentProject(state).ownerProjectManagerId;
+  });
+
+  const AddPopup = usePopupInClosableContext(AddStep);
+  const ActionsPopup = usePopupInClosableContext(ActionsStep);
+
+  return (
+    <div className={styles.wrapper}>
+      {projectManagers.map((projectManager) => (
+        <span key={projectManager.id} className={styles.user}>
+          <ActionsPopup projectManagerId={projectManager.id}>
+            <UserAvatar
+              id={projectManager.user.id}
+              size="large"
+              isDisabled={!projectManager.isPersisted}
+            />
+          </ActionsPopup>
+        </span>
+      ))}
+      {canAdd && (
+        <AddPopup>
+          <Button icon="add user" className={styles.addButton} />
+        </AddPopup>
+      )}
+    </div>
+  );
+});
+
+export default ProjectManagers;

client/src/components/project-managers/ProjectManagers/ProjectManagers.module.scss

@@ -0,0 +1,32 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .addButton {
+    background: rgba(0, 0, 0, 0.24);
+    border-radius: 50%;
+    box-shadow: none;
+    color: #fff;
+    line-height: 36px;
+    margin: 0;
+    padding: 0;
+    transition: all 0.1s ease 0s;
+    vertical-align: top;
+    width: 36px;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.32);
+    }
+  }
+
+  .user {
+    line-height: 1;
+    margin: 0 -4px 0 0;
+  }
+
+  .wrapper {
+    display: flex;
+  }
+}

client/src/components/project-managers/ProjectManagers/index.js

@@ -0,0 +1,8 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import ProjectManagers from './ProjectManagers';
+
+export default ProjectManagers;