ADD: edit

WCY-dt · May 2, 2024 · f93df81 · f93df81
1 parent 3885531
commit f93df81
Show file tree

Hide file tree

Showing 7 changed files with 286 additions and 25 deletions.
diff --git a/src/components/linkCard.tsx b/src/components/linkCard.tsx
@@ -22,7 +22,10 @@ function LinkCard({ item }: LinkCardProps) {
 		setConfirmAction,
 		setSelectedCategory,
     setShowOverlay,
-    setOverlayAction
+    setOverlayAction,
+    setShowEdit,
+    setEditContent,
+    setEditType
 	} = useContext(AppContext);
 
 	const id = item.Id || 0;
@@ -35,6 +38,14 @@ function LinkCard({ item }: LinkCardProps) {
     setSelectedCategory(item.Category);
   };
 
+  const onClickEdit = () => {
+    setEditContent(item);
+    setEditType('modify');
+    setShowEdit(true);
+    setShowOverlay(true);
+    setOverlayAction(() => () => setShowEdit(false));
+  };
+
 	const tryDeleteCard = async (id: number) => {
     const deleteCardResult = await deleteCardHandler({ id, token });
 
@@ -45,14 +56,22 @@ function LinkCard({ item }: LinkCardProps) {
     }
   };
 
+  const onClickDelete = () => {
+    setConfirmMessage('Are you sure to delete this card?');
+    setConfirmAction(() => () => tryDeleteCard(id));
+    setShowConfirm(true);
+    setShowOverlay(true);
+    setOverlayAction(() => () => setShowConfirm(false));
+  };
+
   return (
     <>
       <div className="link-card">
 				<div id="link-card-id" hidden>{item.Id || 0}</div>
         <div className="link-card-left">
           <div className="link-card-info">
             <div className="link-card-category" style={{ backgroundColor, color: textColor }} onClick={handleCategoryClick}>
-              {item.Category ? item.Category : 'UNKNOWN'}
+              {item.Category ?? 'UNKNOWN'}
             </div>
             <div className="link-card-icon">
               <img
@@ -64,25 +83,20 @@ function LinkCard({ item }: LinkCardProps) {
           </div>
           {isLogedIn ? (
             <div className="link-card-edit">
-              <Icon icon="ci:edit-pencil-line-01" className="link-card-edit-edit"></Icon>
-              <Icon icon="ci:trash-full" className="link-card-edit-delete" onClick={() => {
-								setConfirmMessage('Are you sure to delete this card?');
-								setConfirmAction(() => () => tryDeleteCard(id));
-								setShowConfirm(true);
-                setShowOverlay(true);
-                setOverlayAction(() => () => setShowConfirm(false));
-							}}></Icon>
+              <Icon icon="ci:edit-pencil-line-01" className="link-card-edit-edit" onClick={onClickEdit}></Icon>
+              <Icon icon="ci:trash-full" className="link-card-edit-delete" onClick={onClickDelete}></Icon>
             </div>
           ) : null
           }
         </div>
 
         <a
           className="link-card-right"
-          href={item.Url ? item.Url : '#'}
+          href={item.Url ?? '#'}
           target="_blank"
           rel="noopener noreferrer"
           id={uuidv4()}
+          title="Click to open link"
         >
           <div className="link-card-title">
             {item.Title}
@@ -95,7 +109,7 @@ function LinkCard({ item }: LinkCardProps) {
               {item.Detail}
             </div>
           ) : null}
-          {(item.links && item.links.length > 0) ? (
+          {(item.links?.length > 0) ? (
             <div className="link-card-link">
               {item.links.map((link) => (
                 <a

diff --git a/src/contexts/context.tsx b/src/contexts/context.tsx
@@ -20,6 +20,12 @@ export const AppContext = createContext({
 	setConfirmMessage: (_: string) => {},
 	confirmAction: () => {},
 	setConfirmAction: (_: () => void) => {},
+  showEdit: false,
+  setShowEdit: (_: boolean) => {},
+  editContent: null as ClusterProps | null,
+  setEditContent: (_: ClusterProps | null) => {},
+  editType: 'new' as 'new' | 'modify',
+  setEditType: (_: 'new' | 'modify') => {},
   showOverlay: false,
   setShowOverlay: (_: boolean) => {},
   overlayAction: () => {},
@@ -40,6 +46,9 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
 	const [showConfirm, setShowConfirm] = useState<boolean>(false);
 	const [confirmMessage, setConfirmMessage] = useState<string>('');
 	const [confirmAction, setConfirmAction] = useState<() => void>(() => () => {});
+  const [showEdit, setShowEdit] = useState<boolean>(false);
+  const [editContent, setEditContent] = useState<ClusterProps | null>(null);
+  const [editType, setEditType] = useState<'new' | 'modify'>('new');
 	const [showOverlay, setShowOverlay] = useState<boolean>(false);
   const [overlayAction, setOverlayAction] = useState<() => void>(() => () => {});
 	const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
@@ -73,6 +82,9 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
 			showConfirm, setShowConfirm,
 			confirmMessage, setConfirmMessage,
 			confirmAction, setConfirmAction,
+      showEdit, setShowEdit,
+      editContent, setEditContent,
+      editType, setEditType,
 			showOverlay, setShowOverlay,
       overlayAction, setOverlayAction,
 			selectedCategory, setSelectedCategory,

diff --git a/src/popups/edit.tsx b/src/popups/edit.tsx
@@ -0,0 +1,71 @@
+import React, { useContext } from "react";
+import { Icon } from '@iconify/react';
+
+import { AppContext } from "../contexts/context";
+
+import "../styles/popups/popup.css";
+import "../styles/popups/edit.css";
+
+function Edit() {
+  const {
+    showEdit, setShowEdit,
+    editContent,
+    editType,
+    setShowOverlay
+  } = useContext(AppContext);
+
+  if (!showEdit) {
+    return null;
+  }
+
+  return (
+    <div className="Popup">
+      <div className="Edit-title">Edit</div>
+      <div className="Edit-input">
+        <label htmlFor="collection">Collection</label>
+
+        <select id="collection" name="collection">
+          <option value="links">Links</option>
+          <option value="notes">Notes</option>
+          <option value="todos">Todos</option>
+        </select>
+
+        <label htmlFor="title">Title</label>
+        <input type="text" id="title" name="title" defaultValue={editType === 'modify' ? editContent?.Title : ''} />
+
+        <label htmlFor="url">Url</label>
+        <input type="url" id="url" name="url" defaultValue={editType === 'modify' ? editContent?.Url : ''} />
+
+        <label htmlFor="category">Category</label>
+        <input type="text" id="category" name="category" defaultValue={editType === 'modify' ? editContent?.Category : ''} />
+
+        <label htmlFor="description">Description</label>
+        <input type="text" id="description" name="description" defaultValue={editType === 'modify' ? editContent?.Description : ''} />
+
+        <label htmlFor="detail">Detail</label>
+        <textarea id="detail" name="detail" defaultValue={editType === 'modify' ? editContent?.Detail : ''} />
+
+        <label htmlFor="links">Links</label>
+        <div className="Edit-links">
+          {editType === 'modify' && editContent?.links?.map((link) => (
+            <div key={link.Url} className="Edit-link">
+              <input type="text" name="link-title" className="Edit-link-title" defaultValue={link.Title} />
+              <input type="url" name="link-url" className="Edit-link-url" defaultValue={link.Url} />
+              <Icon icon="ci:trash-full" className="Edit-link-delete"></Icon>
+            </div>
+          ))}
+          <Icon icon="ci:table-add" className="Edit-links-add"></Icon>
+        </div>
+      </div>
+      <button type="button" className="Edit-ok" title="Save edit">Save</button>
+      <button type="button" className="Edit-close" title="Close" onClick={() => {
+        setShowEdit(false);
+        setShowOverlay(false);
+      }}>
+        <Icon icon="ci:close-md" />
+      </button>
+    </div>
+  );
+}
+
+export default Edit;
diff --git a/src/routers/router.tsx b/src/routers/router.tsx
@@ -7,6 +7,7 @@ import Content from '../components/content';
 import Footer from '../components/footer';
 import Notification from '../popups/notification';
 import Confirm from '../popups/confirm';
+import Edit from '../popups/edit';
 import Overlay from '../popups/overlay';
 import ClearFilter from '../utils/clearFilter';
 
@@ -32,6 +33,7 @@ function Router() {
 				<Notification />
 				<ClearFilter />
 				<Confirm />
+        <Edit />
 				<Overlay />
 		</AppProvider>
 	);

diff --git a/src/styles/components/header.css b/src/styles/components/header.css
@@ -168,6 +168,7 @@
     .App-nav-menu {
         display: flex;
         flex-direction: column;
+        padding: 0;
         gap: 5px;
         padding-bottom: 10px;
     }
@@ -227,4 +228,4 @@
 
         font-size: 1.8em;
     }
-}
+}
diff --git a/src/styles/popups/edit.css b/src/styles/popups/edit.css
@@ -0,0 +1,161 @@
+.Edit-title {
+  font-size: 2rem;
+  text-transform: capitalize;
+  font-weight: 900;
+}
+
+.Edit-input {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: auto 1fr;
+
+  align-items: start;
+  justify-content: center;
+
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+.Edit-input select {
+  font-size: 1rem;
+  padding: 0.5rem;
+
+  width: 200px;
+
+  border: none;
+  border-radius: 5px;
+  background-color: #f0f0f0;
+
+  border: 2px solid transparent;
+
+  cursor: pointer;
+}
+
+.Edit-input select:focus {
+  outline: none;
+  border-bottom: 2px solid #333333;
+}
+
+.Edit-input select option {
+  font-size: 1rem;
+  cursor: pointer;
+}
+
+.Edit-input input {
+  font-size: 1rem;
+  padding: 0.5rem;
+
+  width: 500px;
+
+  border: none;
+  border-radius: 5px;
+  background-color: #f0f0f0;
+
+  border: 2px solid transparent;
+}
+
+.Edit-input input:focus {
+  outline: none;
+  border-bottom: 2px solid #333333;
+}
+
+.Edit-input textarea {
+  font-size: 1rem;
+  padding: 0.5rem;
+
+  width: 500px;
+  min-height: 4.5rem;
+  max-height: 9rem;
+
+  border: none;
+  border-radius: 5px;
+  background-color: #f0f0f0;
+
+  border: 2px solid transparent;
+
+  resize: vertical;
+}
+
+.Edit-input textarea:focus {
+  outline: none;
+  border-bottom: 2px solid #333333;
+}
+
+.Edit-input .Edit-links {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 516px;
+}
+
+.Edit-input .Edit-links .Edit-link {
+  display: flex;
+  gap: 1rem;
+  width: 100%;
+}
+
+.Edit-input .Edit-links .Edit-link .Edit-link-title {
+  width: 200px;
+}
+
+.Edit-input .Edit-links .Edit-link .Edit-link-url {}
+
+.Edit-input .Edit-links .Edit-link .Edit-link-delete {
+  font-size: 1.5rem;
+  width: 4rem;
+  color: white;
+  background-color: rgba(255, 0, 0, 0.5);
+  padding: 0.5rem;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.Edit-input .Edit-links .Edit-link .Edit-link-delete:hover {
+  background-color: rgba(255, 0, 0, 1);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  transition: box-shadow 0.1s;
+}
+
+.Edit-input .Edit-links .Edit-links-add {
+  font-size: 1.8rem;
+  color: black;
+  cursor: pointer;
+}
+
+.Edit-input label {
+  font-size: 1.2rem;
+  font-weight: 700;
+}
+
+.Edit-ok {
+  font-size: 1rem;
+  padding: 0.5rem;
+  background-color: #333333;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  width: 100%;
+  margin: 0 auto;
+  text-transform: uppercase;
+  font-weight: 700;
+}
+
+.Edit-ok:hover {
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  transition: box-shadow 0.1s;
+}
+
+.Edit-close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: 2rem;
+  padding: 0.5rem;
+  border-radius: 5px;
+  cursor: pointer;
+
+  color: #333;
+  background-color: #fff;
+  border: none;
+}