Merge pull request #36 from 001elijah/dashboard

Dashboard

src/components/CardModalWindow/CardModalWindow.jsx

@@ -42,6 +42,25 @@ export const CardModalWindow = ({
   };
 
   return (
+    // <ReusableColumnModalWindow
+    //   modalTitle={modalTitle}
+    //   inputTitle={inputTitle}
+    //   titleModalButton={titleModalButton}
+    //   onClick={handleAddCard}
+    // >
+    //   <textarea
+    //     onChange={e => setComent(e.target.value)}
+    //     className={`${s.textAreaStyle} ${s[theme]}`}
+    //     name="coments"
+    //     id="coments"
+    //     placeholder="Description"
+    //     value={coment}
+    //   ></textarea>
+    //   <BoxRadioColorGroup valueChange={handleChangeColor} />
+    //   <CalendarDark onDate={setDate} />
+    // </ReusableColumnModalWindow>
+
+
     <Modal title={modalTitle} onClose={handleToggleModal}>
       <form onSubmit={handleSubmit}>
         <input
@@ -76,6 +95,7 @@ export const CardModalWindow = ({
         </button>
       </form>
     </Modal>
+
   );
 };
 

src/components/ColumnModalWindow/ColumnModalWindow.jsx

@@ -5,27 +5,36 @@ import { selectorTheme } from 'redux/Auth/authSelectors';
 import { Modal } from 'components/Modal/Modal';
 import sprite from '../../assets/icons/sprite.svg';
 import s from './ColumnModalWindow.module.scss';
-import { addColumn } from '../../redux/Columns/ColumnOperation';
+import { addColumn, editColumn } from '../../redux/Columns/ColumnOperation';
 
 export const ColumnModalWindow = ({
   inputTitle,
   titleModalButton,
   modalTitle,
   onClick,
   boardId,
+  columnId
 }) => {
   const dispatch = useDispatch();
   const [value, setValue] = useState('');
   const theme = useSelector(selectorTheme);
 
   const handleSubmit = e => {
     e.preventDefault();
-    const newColumn = {
-      title: value,
-      boardId,
-    };
-    console.log(value);
-    dispatch(addColumn(newColumn));
+    if (modalTitle === 'Edit column') {      
+      const editColumnTitle = {
+        title: value,
+        columnId,
+        boardId
+      };
+      dispatch(editColumn(editColumnTitle));
+    } else {
+      const newColumn = {
+        title: value,
+        boardId,
+      };
+      dispatch(addColumn(newColumn));
+    }
     setValue('');
     onClick();
   };
@@ -62,4 +71,5 @@ ColumnModalWindow.propTypes = {
   titleModalButton: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
   boardId: PropTypes.string.isRequired,
+  columnId: PropTypes.string,
 };

src/components/MainBoard/MainBoard.jsx

@@ -1,5 +1,5 @@
 // import s from './MainBoard.module.scss';
-import { Wrapper } from './MainBoard.styled';
+import { Wrapper, ColumnsList, ContentBoard } from './MainBoard.styled';
 import PropTypes from 'prop-types';
 import { HeaderDashBoard } from '../HeaderDashBoard/HeaderDashBoard';
 import { AddButton } from '../ButtonAddColumn/ButtonAddColumn';
@@ -10,8 +10,7 @@ import { selectorTheme } from 'redux/Auth/authSelectors';
 // import clsx from 'clsx';
 import { useState } from 'react';
 import { ColumnModalWindow } from '../ColumnModalWindow/ColumnModalWindow';
-// import {TaskCard} from '../../TaskCard/TaskCard'
-// import {TasksColumnHeader} from '../TasksColumnHeader/TasksColumnHeader'
+import { TasksColumnHeader } from '../TasksColumnHeader/TasksColumnHeader';
 
 export const MainBoard = () => {
   const theme = useSelector(selectorTheme);
@@ -50,20 +49,23 @@ export const MainBoard = () => {
         colorbg={curTheme}
       >
         <HeaderDashBoard title={getBoard.title} />
-        {/* {getBoard.columns.map(({title, id})=>{
-            <TasksColumnHeader
-              key={id}
-              title={title}
-              editColumn
-              removeColumn 
-            />
-          })} */}
-        {/* <TaskCard/> */}
-        <AddButton
-          typeOfButton="Column"
-          title="Add another column"
-          onClick={handleModalWindowOpen}
-        />
+        <ContentBoard>
+          <ColumnsList>
+            {getBoard.columns.map(item => (
+              <TasksColumnHeader
+                key={item.id}
+                title={item.title}
+                id={item.id}
+                boardId={getBoard._id}
+              />
+            ))}
+          </ColumnsList>
+          <AddButton
+            typeOfButton="Column"
+            title="Add another column"
+            onClick={handleModalWindowOpen}
+          />
+        </ContentBoard>
       </Wrapper>
       {showModalWindow && (
         <ColumnModalWindow

src/components/MainBoard/MainBoard.styled.jsx

@@ -5,7 +5,7 @@ export const Wrapper = styled.div`
   background-size: cover;
   background-position: bottom;
   background-color: ${props => props.colorbg};
-  height: 100%;
+  height: calc(100% - 86px);
   @media screen and (min-width: 375px) {
     padding-left: 0px;
     background-image: url(${props =>
@@ -27,3 +27,12 @@ export const Wrapper = styled.div`
     @content;
   }
 `;
+export const ColumnsList = styled.ul`
+display:flex;
+
+`
+export const ContentBoard = styled.div`
+display:flex;
+wrap:nowrap;
+overflow:auto;
+`

src/components/ModalAddChangeCard/ModalAddChangeCard.jsx

@@ -0,0 +1,71 @@
+import PropTypes from 'prop-types';
+import { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { selectorTheme } from 'redux/Auth/authSelectors';
+import { Modal } from 'components/Modal/Modal';
+import sprite from '../../assets/icons/sprite.svg';
+import s from './ReusableColumnModalWindow.module.scss';
+import { addNewBoard } from '../../redux/Boards/boardsOperations';
+
+export const ReusableColumnModalWindow = ({
+  inputTitle,
+  titleModalButton,
+  modalTitle,
+  onClick,
+  icon = '',
+  background = '',
+  children,
+}) => {
+  const dispatch = useDispatch();
+  const [value, setValue] = useState('');
+  const theme = useSelector(selectorTheme);
+
+  const handleSubmit = e => {
+    e.preventDefault();
+    const newCard = {
+      title: value,
+      icon,
+      background,
+    };
+    // console.log(newCard);
+    dispatch(addNewBoard(newCard));
+    setValue('');
+    onClick();
+  };
+
+  return (
+    <Modal title={modalTitle} onClose={onClick}>
+      <form onSubmit={handleSubmit}>
+        <input
+          className={`${s.inputModal} ${s[theme]}`}
+          value={value}
+          placeholder={inputTitle}
+          onChange={e => setValue(e.target.value)}
+        />
+        {children}
+        <button className={`${s.buttonModal} ${s[theme]}`} type="submit">
+          <span className={`${s.iconButtonModalWrapper} ${s[theme]}`}>
+            <svg
+              className={`${s.iconButtonModal} ${s[theme]}`}
+              width="14"
+              height="14"
+            >
+              <use href={sprite + '#icon-plus'}></use>
+            </svg>
+          </span>
+          {titleModalButton}
+        </button>
+      </form>
+    </Modal>
+  );
+};
+
+ReusableColumnModalWindow.propTypes = {
+  modalTitle: PropTypes.string.isRequired,
+  inputTitle: PropTypes.string.isRequired,
+  titleModalButton: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+  icon: PropTypes.string.isRequired,
+  background: PropTypes.string.isRequired,
+  children: PropTypes.array.isRequired,
+};

src/components/ModalAddChangeCard/ModalAddChangeCard.module.scss

@@ -0,0 +1,164 @@
+@import '../../assets/styles/vars';
+@import '../../assets/styles/mixins';
+
+.inputModal {
+  width: 287px;
+  height: 49px;
+  padding-left: 18px;
+
+  border: 1px solid #bedbb0;
+  border-radius: 8px;
+  margin-bottom: 24px;
+
+  font-family: 'Poppins-Regular';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: calc(21 / 14);
+
+  letter-spacing: -0.02em;
+
+  &.colorful {
+    border: 1px solid rgba(82, 85, 188, 1);
+    color: #161616;
+    background-color: inherit;
+    opacity: 0.4;
+    &::placeholder {
+      color: rgba(22, 22, 22, 0.5);
+    }
+
+    &:focus {
+      border: 1px solid #5255bc;
+      outline: none;
+      filter: drop-shadow(0px 4px 16px rgba(22, 22, 22, 0.08));
+      opacity: initial;
+    }
+  }
+
+  &.dark {
+    color: rgba(255, 255, 255, 1);
+    background: #1f1f1f;
+    border: 1px solid #bedbb0;
+    box-shadow: 0px 4px 16px rgba(22, 22, 22, 0.08);
+    opacity: 0.4;
+
+    &::placeholder {
+      color: rgba(255, 255, 255, 1);
+    }
+
+    &:focus {
+      border: 1px solid #bedbb0;
+      filter: drop-shadow(0px 4px 16px rgba(22, 22, 22, 0.08));
+      outline: none;
+      opacity: initial;
+    }
+  }
+
+  &.light {
+    color: $black-text-color;
+    opacity: 0.4;
+
+    &::placeholder {
+      color: rgba(22, 22, 22, 1);
+    }
+
+    &:focus {
+      border: 1px solid #bedbb0;
+      filter: drop-shadow(0px 4px 16px rgba(22, 22, 22, 0.08));
+      background-color: #fcfcfc;
+      color: #161616;
+      opacity: initial;
+      outline: none;
+    }
+  }
+
+  @include tablet {
+    max-width: 302px;
+    width: 100%;
+  }
+
+  @include desktop {
+    max-width: 302px;
+    width: 100%;
+  }
+}
+
+.buttonModal {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  max-width: 287px;
+  height: 49px;
+  cursor: pointer;
+
+  background: #bedbb0;
+  border-radius: 8px;
+  border: none;
+
+  font-family: 'Poppins-Regular';
+  font-weight: 500;
+  font-size: 14px;
+  line-height: calc(21 / 14);
+
+  letter-spacing: -0.02em;
+
+  color: #161616;
+
+  padding: 10px;
+
+  &.colorful {
+    background: rgba(82, 85, 188, 1);
+    color: white;
+  }
+
+  &.dark {
+    color: rgba(22, 22, 22, 1);
+  }
+
+  &.light {
+    color: rgba(22, 22, 22, 1);
+  }
+
+  @include tablet {
+    max-width: 302px;
+  }
+
+  @include desktop {
+    max-width: 302px;
+  }
+}
+
+.iconButtonModal {
+  &.colorful {
+    stroke: rgba(22, 22, 22, 1);
+  }
+
+  &.dark,
+  &.light {
+    stroke: rgba(255, 255, 255, 1);
+  }
+}
+
+.iconButtonModalWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  margin-right: 8px;
+  background-color: rgba(22, 22, 22, 1);
+  border-radius: 6px;
+
+  &.colorful {
+    background-color: rgba(255, 255, 255, 1);
+  }
+
+  &.dark {
+    color: rgba(255, 255, 255, 1);
+  }
+
+  &.light {
+    color: rgba(22, 22, 22, 1);
+  }
+}