warning proceed not firing at some locations

frontend/src/assets/styles/warneable.css

@@ -0,0 +1,50 @@
+.warning-header {
+    font-size: large;
+    font-weight: bold;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    border-bottom: 1px solid rgb(187, 187, 187);
+}
+
+.warning-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    padding: 10px;
+    padding-top: 12px;
+
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    word-break: break-word;
+
+    max-height: 250px;
+    overflow-y: auto;
+}
+
+.warning-actions {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.warning-button {
+    border-radius: 5px;
+    border-width: 1px;
+
+    padding: 5px 10px;
+    margin: 5px 10px;
+}
+.warning-button:hover {
+    padding: 4px 9px;
+    border-width: 2px;
+}
+
+.warning-proceed {
+    color: white;
+    background-color: rgb(255, 94, 94);
+    border-color: red;
+}

frontend/src/pages/admin/HomeAdmin.tsx

@@ -9,15 +9,17 @@ import { VscNewFile } from "react-icons/vsc";
 import { VscNewFolder } from "react-icons/vsc";
 import Popup from 'reactjs-popup';
 import 'reactjs-popup/dist/index.css';
+import Warneable from "./Warneable";
 
 /* TODO:
 
-    - warning with proceed and cancel
+    x warning with proceed and cancel
     - remove
     - andere toestaan checkbox
     - enkele file/zip-bestand
     - kleurencodes uitleggen
     - algemene layout beter maken
+    - mergen & implementeren in projectview van teacher
 
 */
 
@@ -274,6 +276,7 @@ export default function HomeAdmin(): JSX.Element {
 
     }
 
+    /* add a new constraint */
     function handleAdd(folder_id: number, type: string) {
         function add(constraint: FEConstraint) {
             if (constraint.id === folder_id) {
@@ -302,6 +305,31 @@ export default function HomeAdmin(): JSX.Element {
         setData(structuredClone(data))
     }
 
+
+    /* remove a constraint and all its subconstraints recursively */
+    function handleRemove(parent_id: number | undefined, id: number) {
+
+        function remove(constraint: FEConstraint) {
+            if (constraint.id === parent_id) {
+                if (constraint.sub_constraints !== undefined) {
+                    constraint.sub_constraints = constraint.sub_constraints.filter(
+                        sub => sub.id !== id
+                    )
+                }
+            }
+        }
+
+        remove(data)
+
+        // update display
+        setData(structuredClone(data))
+
+    }
+
+    function log() {
+        console.log("log")
+    }
+
     return (
         <div className="center">
             <div className="content">
@@ -334,11 +362,11 @@ export default function HomeAdmin(): JSX.Element {
 
                 {/* ...constraints... */}
                 {flatten(data).map((v) => 
-                    <>
+                    <div key={"item"+v.item.id}>
                         {v.show &&
                             <div className="constraint_object row"
                                 onMouseOver={() => setIsHoveringMore(structuredClone(isHoveringMore.set(v.item.id, true)))}
-                                onMouseOut={() => setIsHoveringMore(structuredClone(isHoveringMore.set(v.item.id, false)))}
+                                onMouseOut={() => setIsHoveringMore(structuredClone(isHoveringMore.set(v.item.id, true)))}
                             >
 
                                 {/* ... spacing ... */}
@@ -348,19 +376,33 @@ export default function HomeAdmin(): JSX.Element {
                                 { (!isZip(v.item.type) && isHoveringMore.get(v.item.id) )
                                     ?   <Popup trigger={
 
-                                            <div className="more row"><IoMdMore className="hover-shadow" /></div>
+                                            <div className="more row">
+                                                {/* FIXME:  warneable.proceed works */}
+                                                <IoMdMore className="hover-shadow" />
+                                            </div>
+
+                                        } position="left center" arrow={true} on="click">
 
-                                        } position="left center" arrow={true} on="hover">
+                                            {/* FIXME:  warneable.proceed doesn't work */}
 
                                             <div className="menu">
 
-                                                <div className="menu-item menu-item-middle">
-                                                    <div>remove</div>
+                                                {/* ... menu-remove ... */}
+                                                <div className="menu-item menu-item-middle" id={"x"+v.item.id} key={"y"+v.item.id} >
+                                                    <button onClick={() => handleRemove(v.item.parent_id, v.item.id)}>remove</button>
+                                                    <Warneable 
+                                                        text="Are you sure?" 
+                                                        trigger={onClick => 
+                                                            <button onClick={onClick}>remove</button>
+                                                        }
+                                                        proceed={() => handleRemove(v.item.parent_id, v.item.id)} /* FIXME: proceed doesn't fire here for some reason */
+                                                    />
                                                 </div>
 
+                                                {/* ... menu-allow-others ... */}
                                                 <div className="menu-item menu-item-last">
                                                     <label className="checkbox"> { /* FIXME: sometimes a border appear around the checkbox -> bulma thing? */}
-                                                        <input type="checkbox" />
+                                                        <input type="checkbox" id={"others"+v.item.id}/>
                                                         Andere toestaan
                                                     </label>
                                                 </div>
@@ -382,6 +424,7 @@ export default function HomeAdmin(): JSX.Element {
                                                 : "dir-color"
                                         : ""
                                     )}
+                                    id={"name"+v.item.id}
                                     type="text" 
                                     value={v.item.name} 
                                     onChange={e => modifyName(v.item.id, e.target.value)} 
@@ -406,7 +449,7 @@ export default function HomeAdmin(): JSX.Element {
 
                             </div>
                         }
-                    </>
+                    </div>
                 )}
 
             </div>

frontend/src/pages/admin/Warneable.tsx

@@ -0,0 +1,44 @@
+import Popup from 'reactjs-popup';
+import '../../assets/styles/warneable.css'
+import { useState } from 'react';
+
+export default function(props: {
+    text: string, 
+    trigger: (onClick: () => void) => JSX.Element, 
+    proceed: () => void,
+}) {
+
+    const [open, setOpen] = useState(false);
+    const closeModal = () => setOpen(false);
+    const onProceed = () => {
+        console.log("hallo2")
+        props.proceed()
+    };
+
+    return (
+            <>
+                {props.trigger(() => {setOpen(o => !o)})}
+
+                <Popup open={open} closeOnDocumentClick onClose={closeModal} modal>
+                    <div className="warning-header"> Warning! </div>
+
+                    <div className="warning-content">
+                        {props.text}
+                    </div>
+
+                    <div className="warning-actions">
+
+                        <button className="warning-button warning-proceed" onClick={onProceed}> 
+                            Proceed 
+                        </button>
+
+                        <button className="warning-button warning-close" onClick={closeModal}>
+                            Cancel
+                        </button>
+
+                    </div>
+                </Popup>
+
+            </>
+    )
+}