feat: Version 2

Closes #627, closes #1047
2025-05-10 02:09:06 +02:00
parent ad7fb51cfa
commit 2ee1166747
1557 changed files with 76832 additions and 47042 deletions
@@ -0,0 +1,25 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React, { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import selectors from '../../../selectors';
+import entryActions from '../../../entry-actions';
+import Projects from './Projects';
+
+const GridProjectsView = React.memo(() => {
+  const projectIds = useSelector(selectors.selectFilteredProjectIdsForCurrentUser);
+
+  const dispatch = useDispatch();
+
+  const handleAdd = useCallback(() => {
+    dispatch(entryActions.openAddProjectModal());
+  }, [dispatch]);
+
+  return <Projects ids={projectIds} onAdd={handleAdd} />;
+});
+
+export default GridProjectsView;
@@ -0,0 +1,75 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React, { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import selectors from '../../../selectors';
+import entryActions from '../../../entry-actions';
+import { isUserAdminOrProjectOwner } from '../../../utils/record-helpers';
+import { ProjectGroups, ProjectTypes } from '../../../constants/Enums';
+import { ProjectGroupIcons } from '../../../constants/Icons';
+import Projects from './Projects';
+
+const TITLE_BY_GROUP = {
+  [ProjectGroups.MY_OWN]: 'common.myOwn',
+  [ProjectGroups.TEAM]: 'common.team',
+  [ProjectGroups.SHARED_WITH_ME]: 'common.sharedWithMe',
+  [ProjectGroups.OTHERS]: 'common.others',
+};
+
+const DEFAULT_TYPE_BY_GROUP = {
+  [ProjectGroups.MY_OWN]: ProjectTypes.PRIVATE,
+  [ProjectGroups.TEAM]: ProjectTypes.SHARED,
+};
+
+const GroupedProjectsView = React.memo(() => {
+  const projectIdsByGroup = useSelector(selectors.selectFilteredProjctIdsByGroupForCurrentUser);
+
+  const canAdd = useSelector((state) => {
+    const user = selectors.selectCurrentUser(state);
+    return isUserAdminOrProjectOwner(user);
+  });
+
+  const dispatch = useDispatch();
+
+  const handleAdd = useCallback(
+    (defaultType) => {
+      dispatch(entryActions.openAddProjectModal(defaultType));
+    },
+    [dispatch],
+  );
+
+  return (
+    <>
+      {[ProjectGroups.MY_OWN, ProjectGroups.TEAM].map(
+        (group) =>
+          (projectIdsByGroup[group].length > 0 || canAdd) && (
+            <Projects
+              key={group}
+              ids={projectIdsByGroup[group]}
+              title={TITLE_BY_GROUP[group]}
+              titleIcon={ProjectGroupIcons[group]}
+              onAdd={() => handleAdd(DEFAULT_TYPE_BY_GROUP[group])}
+            />
+          ),
+      )}
+      {[ProjectGroups.SHARED_WITH_ME, ProjectGroups.OTHERS].map(
+        (group) =>
+          projectIdsByGroup[group].length > 0 && (
+            <Projects
+              withTypeIndicator
+              key={group}
+              ids={projectIdsByGroup[group]}
+              title={TITLE_BY_GROUP[group]}
+              titleIcon={ProjectGroupIcons[group]}
+            />
+          ),
+      )}
+    </>
+  );
+});
+
+export default GroupedProjectsView;
@@ -0,0 +1,39 @@
+/*!
+ * 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 selectors from '../../../selectors';
+import { HomeViews } from '../../../constants/Enums';
+import GridProjectsView from './GridProjectsView';
+import GroupedProjectsView from './GroupedProjectsView';
+
+import styles from './Home.module.scss';
+
+const Home = React.memo(() => {
+  const view = useSelector(selectors.selectHomeView);
+
+  let View;
+  switch (view) {
+    case HomeViews.GRID_PROJECTS:
+      View = GridProjectsView;
+
+      break;
+    case HomeViews.GROUPED_PROJECTS:
+      View = GroupedProjectsView;
+
+      break;
+    default:
+  }
+
+  return (
+    <div className={styles.wrapper}>
+      <View />
+    </div>
+  );
+});
+
+export default Home;
@@ -0,0 +1,18 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .wrapper {
+    height: 100%;
+    margin-left: auto !important;
+    margin-right: auto !important;
+    overflow-y: auto;
+    padding: 0 20px;
+
+    @supports (-moz-appearance: none) {
+      scrollbar-color: rgba(0, 0, 0, 0.32) rgba(0, 0, 0, 0.08);
+    }
+  }
+}
@@ -0,0 +1,87 @@
+/*!
+ * 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 PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { Grid, Icon } from 'semantic-ui-react';
+
+import selectors from '../../../selectors';
+import { isUserAdminOrProjectOwner } from '../../../utils/record-helpers';
+import ProjectCard from '../../projects/ProjectCard';
+import PlusIcon from '../../../assets/images/plus-icon.svg?react';
+
+import styles from './Projects.module.scss';
+
+const Projects = React.memo(({ ids, title, titleIcon, withTypeIndicator, onAdd }) => {
+  const canAdd = useSelector((state) => {
+    const user = selectors.selectCurrentUser(state);
+    return isUserAdminOrProjectOwner(user);
+  });
+
+  const [t] = useTranslation();
+
+  return (
+    <div className={classNames(styles.wrapper, !title && styles.wrapperWithoutTitle)}>
+      {title && (
+        <div className={styles.title}>
+          {titleIcon && <Icon name={titleIcon} className={styles.titleIcon} />}
+          {t(title, {
+            context: 'title',
+          })}
+        </div>
+      )}
+      <Grid>
+        {ids.map((id) => (
+          <Grid.Column key={id} className={styles.column}>
+            <ProjectCard
+              withDescription
+              withFavoriteButton
+              id={id}
+              withTypeIndicator={withTypeIndicator}
+              className={styles.card}
+            />
+          </Grid.Column>
+        ))}
+        {onAdd && canAdd && (
+          <Grid.Column className={styles.column}>
+            <button
+              type="button"
+              className={classNames(styles.card, styles.addButton)}
+              onClick={onAdd}
+            >
+              <div className={styles.addButtonCover} />
+              <div className={styles.addButtonTitleWrapper}>
+                <div className={styles.addButtonTitle}>
+                  <PlusIcon className={styles.addButtonTitleIcon} />
+                  {t('action.createProject')}
+                </div>
+              </div>
+            </button>
+          </Grid.Column>
+        )}
+      </Grid>
+    </div>
+  );
+});
+
+Projects.propTypes = {
+  ids: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
+  title: PropTypes.string,
+  titleIcon: PropTypes.string,
+  withTypeIndicator: PropTypes.bool, // TODO: use plural form?
+  onAdd: PropTypes.func,
+};
+
+Projects.defaultProps = {
+  title: undefined,
+  titleIcon: undefined,
+  withTypeIndicator: false,
+  onAdd: undefined,
+};
+
+export default Projects;
@@ -0,0 +1,115 @@
+/*!
+ * 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: transparent;
+    border: none;
+    border-radius: 4px;
+    color: rgba(255, 255, 255, 0.48);
+    cursor: pointer;
+    fill: rgba(255, 255, 255, 0.48);
+    overflow: hidden;
+    padding: 0;
+    position: relative;
+    text-align: center;
+    width: 100%;
+
+    &:hover {
+      .addButtonCover {
+        filter: brightness(0.8);
+      }
+    }
+  }
+
+  .addButtonCover {
+    background: rgba(107, 128, 140, 0.08);
+    bottom: 0;
+    content: "";
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transition: filter 0.2s ease;
+  }
+
+  .addButtonTitle {
+    display: table-cell;
+    font-size: 16px;
+    line-height: 1;
+    vertical-align: middle;
+  }
+
+  .addButtonTitleIcon {
+    display: block;
+    margin: 0 auto 12px;
+    width: 36px;
+  }
+
+  .addButtonTitleWrapper {
+    display: table;
+    height: 100%;
+    padding: 35px 21px;
+    width: 100%;
+  }
+
+  .card {
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 6px 12px rgba(0, 0, 0, 0.1);
+    height: 150px;
+    transition: box-shadow 0.2s ease;
+
+    &:hover {
+      box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1), 0 32px 64px rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  .column {
+    @media only screen and (width < 840px) {
+      width: 50% !important;
+    }
+
+    @media only screen and (840px <= width < 1120px) {
+      width: 33.3333333333% !important;
+    }
+
+    @media only screen and (1120px <= width < 1400px) {
+      width: 25% !important;
+    }
+
+    @media only screen and (1400px <= width < 1680px) {
+      width: 20% !important;
+    }
+
+    @media only screen and (1680px <= width < 1960px) {
+      width: 16.6666666667% !important;
+    }
+
+    @media only screen and (1960px <= width < 2240px) {
+      width: 14.2857142857% !important;
+    }
+
+    @media only screen and (width >= 2240px) {
+      width: 12.5% !important;
+    }
+  }
+
+  .title {
+    color: #6b808c;
+    font-size: 16px;
+    padding: 14px 0 14px 2px;
+  }
+
+  .titleIcon {
+    margin-right: 10px;
+  }
+
+  .wrapper:not(:last-child) {
+    margin-bottom: 20px;
+  }
+
+  .wrapperWithoutTitle {
+    margin-top: 14px;
+  }
+}
@@ -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 Home from './Home';
+
+export default Home;