✨ Add New Card

Author: HigorLoren

.gitignore

@@ -12,6 +12,9 @@ node_modules
 # production
 /build
 
+#vscode
+.vscode
+
 # misc
 .DS_Store
 .env.local

src/components/Cards/Card/Card.js

@@ -152,7 +152,7 @@ export default class Card extends PureComponent {
               className={classes.DashGradientCard}
               style={{ background: this.state.dashNewColor }}
             />
-            <div className="absolute mt3 left-30perc shadow-5 z-3 bg-white br2 flex justify-end flex-wrap">
+            <div className="absolute mt3 left30 shadow-5 z-3 bg-white br2 flex justify-end flex-wrap">
               <TwitterPicker
                 color={this.state.dashNewColor}
                 colors={colorsPicker}

src/components/Cards/Card/Card.module.css

@@ -1,9 +1,10 @@
+.Card {
+  background-color: #f7f8f9;
+  min-width: 300px;
+}
+
 .DashGradientCard {
   border-radius: 0.5rem 0.5rem 0 0;
   height: 5px;
   width: 100%;
 }
-
-.Card {
-  background-color: #f7f8f9;
-}

src/components/Cards/CardBuilder/CardBuilder.js

@@ -0,0 +1,90 @@
+import React, { useState, useEffect } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const newCardDashColor = "#636363";
+
+const CardBuilder = props => {
+  const [textInputNameCard, setTextInputNameCard] = useState("New Name");
+  const [initial, setInitial] = useState(true);
+
+  useEffect(() => {
+    if (!initial) {
+      props.scrollToNewCard();
+    }
+  }, [props, initial]);
+
+  const handleLeaveInputNameCard = () => {
+    setTextInputNameCard("New Name");
+    setInitial(true);
+    props.newCard({ name: textInputNameCard, dashColor: newCardDashColor });
+  };
+
+  const handleKeyDown = event => {
+    if (event.key === "Enter") {
+      handleLeaveInputNameCard();
+    }
+  };
+
+  return initial ? (
+    <div className="w-25 flex" style={{ minWidth: "300px", minHeight: "270px" }}>
+      <div
+        onClick={() => setInitial(false)}
+        className="mh3 br3 w-100 pa3 black-05 bg-black-03 flex justify-center items-center dim pointer"
+      >
+        <FontAwesomeIcon icon="plus-circle" size="2x" />
+      </div>
+    </div>
+  ) : (
+    <div id="newCard">
+      <div
+        className="w-25 mh3 pb2 br3 shadow-6 relative"
+        style={{ minWidth: "300px", backgroundColor: "#f7f8f9" }}
+      >
+        <div
+          style={{
+            background: newCardDashColor,
+            borderRadius: "0.5rem 0.5rem 0 0",
+            height: "5px",
+            width: "100%"
+          }}
+        />
+        <div className="ph3">
+          <div className="flex mt3 mb4 justify-between items-center relative">
+            <input
+              type="text"
+              autoFocus
+              onFocus={({ target }) => target.select()}
+              name="cardName"
+              defaultValue={textInputNameCard}
+              onBlur={handleLeaveInputNameCard}
+              onKeyDown={handleKeyDown}
+              onChange={event => setTextInputNameCard(event.target.value)}
+              className="f4 w-100 br2 bw1 b--moon-gray b--solid outline-0 ph2 gray ma0 fw5"
+            />
+            <button className="button-reset pointer gray hover-mid-gray textshadow-1">
+              <FontAwesomeIcon icon="ellipsis-v" className="" />
+            </button>
+          </div>
+          <form className="w-100 mb2">
+            <div className="flex mt-4 mb-1">
+              <input
+                type="text"
+                className="w-90 br2 pv1 pl3 bn shadow-6 lh-copy f6"
+                placeholder="new item"
+                readOnly
+              />
+              <button
+                className="lh-copy w2-5 pointer ba br2 shadow-6 bg-moon-gray white ml1 b--light-gray dim"
+                type="button"
+              >
+                <FontAwesomeIcon icon="plus" className="" style={{ width: ".575em" }} />
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CardBuilder;

src/components/Cards/Cards.js

@@ -1,18 +1,24 @@
 import React from "react";
 import Card from "./Card/Card";
+import CardBuilder from "./CardBuilder/CardBuilder";
 
-const Cards = props =>
-  props.cards.map(card => {
-    return (
-      <Card
-        key={card.id}
-        cardId={card.id}
-        cardName={card.name}
-        notes={card.notes}
-        dashColor={card.dashColor}
-        deleteMe={() => props.deleteCard(card)}
-      />
-    );
-  });
-
+const Cards = props => {
+  return (
+    <React.Fragment>
+      {props.cards.map(card => {
+        return (
+          <Card
+            key={card.id}
+            cardId={card.id}
+            cardName={card.name}
+            notes={card.notes}
+            dashColor={card.dashColor}
+            deleteMe={() => props.deleteCard(card)}
+          />
+        );
+      })}
+      <CardBuilder scrollToNewCard={props.scrollToNewCard} newCard={card => props.newCard(card)} />
+    </React.Fragment>
+  );
+};
 export default Cards;

src/components/SidebarMenu/SidebarMenu.module.css

@@ -1,5 +1,6 @@
 .SidebarMenu {
   height: auto;
+  z-index: 1;
   background-color: #fff;
   box-shadow: 0px -2px 4px 1px rgba(0, 0, 0, 0.1);
   border-radius: 0 0 0 5px;

src/containers/Workbench/Workbench.js

@@ -68,9 +68,42 @@ export default class Workbench extends Component {
     let updatedCards = this.state.openBoard.cards.filter(card => card.id !== cardToDelete.id);
     // --END--
 
-    this.setState({ openBoard: { cards: updatedCards } });
+    this.setState(prevState => ({
+      openBoard: {
+        ...prevState.openBoard,
+        cards: updatedCards
+      }
+    }));
+  };
+
+  handleNewCard = newCard => {
+    // BACKENDPLACEHOLDER:
+    let maxCardId = 0;
+    this.state.openBoard.cards.forEach(card => {
+      if (card.id > maxCardId) maxCardId = card.id;
+    });
+    let updatedCards = [
+      ...this.state.openBoard.cards,
+      {
+        id: maxCardId + 1,
+        name: newCard.name,
+        dashColor: newCard.dashColor,
+        notes: []
+      }
+    ];
+    // --END--
+
+    this.setState(prevState => ({
+      openBoard: {
+        ...prevState.openBoard,
+        cards: updatedCards
+      }
+    }));
   };
 
+  //
+  // Handler Boards
+
   handleNewBoard = event => {
     event.preventDefault();
     // BACKENDPLACEHOLDER:
@@ -87,6 +120,22 @@ export default class Workbench extends Component {
     this.handleSidebarItemChange(newBoard);
   };
 
+  //
+  // Handle Cards Zone
+
+  // @ Scroll to the right until get to the end
+  handleScrollToRightOfCardsZone = () => {
+    let lastScroll;
+
+    let slideToRightInterval = setInterval(() => {
+      document.getElementById("cardsZone").scrollLeft += 10;
+      if (lastScroll === document.getElementById("cardsZone").scrollLeft) {
+        window.clearInterval(slideToRightInterval);
+      }
+      lastScroll = document.getElementById("cardsZone").scrollLeft;
+    }, 25);
+  };
+
   render() {
     let modal = null;
 
@@ -132,9 +181,14 @@ export default class Workbench extends Component {
             boards={this.state.boards}
             newBoard={() => this.setState({ newBoardModalShow: true })}
           />
-          <div className="fl pa4 w-100 items-start flex">
+          <div id="cardsZone" className="fl pa4 w-100 overflow-auto items-start flex z-0">
             {this.state.openBoard.cards.length > 0 ? (
-              <Cards cards={this.state.openBoard.cards} deleteCard={this.handleDeleteCard} />
+              <Cards
+                cards={this.state.openBoard.cards}
+                newCard={this.handleNewCard}
+                deleteCard={this.handleDeleteCard}
+                scrollToNewCard={this.handleScrollToRightOfCardsZone}
+              />
             ) : (
               <p className="fw1 f3 h100 flex items-center center light-silver">
                 Select a board to start.

src/index.css

@@ -24,6 +24,7 @@ button:focus {
 
 #root {
   border-radius: 5px;
+  overflow: hidden;
   box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.06);
   background-color: #f7f8f9;
 }
@@ -53,7 +54,7 @@ button:focus {
   box-shadow: none !important;
 }
 
-.left-30perc {
+.left30 {
   left: 30%;
 }