nicholas/storage-manager
1
0
Fork 0
Code Issues Pull Requests Activity

drag drop sort swap

Browse Source
This commit is contained in:
np.w
2020-12-13 13:08:28 -06:00
parent a912fb2836
commit ba4026c6fa
5 changed files with 99 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/app.js
+45 -13
View File
@@ -8,9 +8,12 @@ import './styles/app.css';
function App() {
const [data, setData] = useState([]);
const [boxID, setBoxID] = useState(undefined);
const [boxName, setBoxName] = useState('');
const [boxDescription, setBoxDescription] = useState('');
const [boxSort, setBoxSort] = useState(0);
const [showModalBox, setShowModalBox] = useState(false);
const [showModalItem, setShowModalItem] = useState(false);
@@ -24,14 +27,7 @@ function App() {
const [filter, setFilter] = useState('');
const [filteredData, setFilteredData] = useState([]);
const handleName = (e) => {
setItemName(e.target.value)
}
const handleDescription = (e) => {
setItemDescription(e.target.value)
}
const [dragSource, setDragSource] = useState({});
//fetch all box data
useEffect(() => {
@@ -98,6 +94,15 @@ function App() {
}
}
const sortBox = async (target, source) => {
try {
const response = await axios.put(`${api.baseApiUrl}/${source._id}/sort`,target);
setData(response.data);
}
catch (error) {
}
}
const handleNameBox = (e) => {
setBoxName(e.target.value);
}
@@ -146,13 +151,32 @@ function App() {
setBoxID(undefined);
}
const handleDragStartBox = (dragSource, event) => {
setDragSource(dragSource);
event.dataTransfer.dropEffect = "move";
}
const handleDragOverBox = (event) => {
event.preventDefault();
event.dataTransfer.dropEffect = "move";
}
const handleDropBox = async (dragTarget, event) => {
event.preventDefault();
if(dragTarget._id !== dragSource._id) {
const target = dragTarget;
const source = dragSource;
await sortBox(target, source);
}
return false;
}
const boxHandler = {
handleSubmit: handleSubmitBox,
handleRemove: handleRemoveBox,
handleName: handleNameBox,
handleDescription: handleBoxDescription,
handleEdit: handleEditBox
handleEdit: handleEditBox,
handleDragStart: handleDragStartBox,
handleDragOver: handleDragOverBox,
handleDrop: handleDropBox
};
const handleModalCloseBox = () => {
@@ -245,11 +269,20 @@ function App() {
setItemDescription('');
}
const handleNameItem = (e) => {
setItemName(e.target.value)
}
const handleDescriptionItem = (e) => {
setItemDescription(e.target.value)
}
const itemHandler = {
handleSubmit: handleSubmitItem,
handleRemove: handleRemoveItem,
handleAdd: handleAddItem,
handleEdit: handleEditItem,
handleName: handleNameItem,
handleDescription: handleDescriptionItem,
};
const handleFilterChange = (event) => {
@@ -277,10 +310,10 @@ function App() {
<fieldset>
<input id="id" name="id" value={itemID} readOnly hidden></input>
<label htmlFor="item-name">name
<input autoFocus onChange={handleName} value={itemName} id="item-name" name="name" type="text"></input>
<input autoFocus onChange={itemHandler.handleName} value={itemName} id="item-name" name="name" type="text"></input>
</label>
<label htmlFor="item-description">description
<input onChange={handleDescription} value={itemDescription} id="item-description" name="description" type="text"></input>
<input onChange={itemHandler.handleDescription} value={itemDescription} id="item-description" name="description" type="text"></input>
</label>
</fieldset>
<button type="submit">submit</button>
@@ -289,7 +322,6 @@ function App() {
<>
{<Modal show={showModalItem} edit={editItemBool} content={itemForm} handleClose={handleModalCloseItem} />}
{<Modal show={showModalBox} edit={editBoxBool} content={boxForm} handleClose={handleModalCloseBox} />}
<label htmlFor="box-filter">filter:</label>
<input type="search" id="box-filter" name="filter" value={filter} onChange={handleFilterChange} />
<ul className="list-box">
client/src/box.js
+23 -18
View File
@@ -4,24 +4,29 @@ import Item from './item';
const Box = ({ boxData, boxHandler, itemHandler }) => {
return (
<>
<li className="box">
<h2 className="box-title">{boxData.name}</h2>
<div className="box-subtitle">
<h3>{boxData.description}</h3>
<button onClick={() => itemHandler.handleAdd(boxData._id)}>add item</button>
</div>
<ul className="list-box-item">
{boxData.item.map(((item, index) => {
return <Item
key={index}
data={item}
boxID={boxData._id}
itemHandler={itemHandler}/>
}))}
</ul>
<button className="edit-box" onClick={() => boxHandler.handleEdit(boxData._id)}>edit</button>
<button className="remove-box" onClick={() => boxHandler.handleRemove(boxData._id)}>remove</button>
</li>
<li className="box" draggable='true'
onDragStart={(event) => boxHandler.handleDragStart(boxData, event)}
onDragOver={boxHandler.handleDragOver}
onDrop={(event) => boxHandler.handleDrop(boxData, event)}>
<span>{boxData.sort}</span>
<h2 className="box-title">{boxData.name}</h2>
<div className="box-subtitle">
<h3>{boxData.description}</h3>
</div>
<ul className="list-box-item">
{boxData.item.map(((item, index) => {
return <Item
key={index}
data={item}
boxID={boxData._id}
itemHandler={itemHandler} />
}))}
</ul>
<button className="edit-box box-function" onClick={() => boxHandler.handleEdit(boxData._id)}>edit</button>
<button className="remove-box box-function" onClick={() => boxHandler.handleRemove(boxData._id)}>remove</button>
<button className="add-item item-function" onClick={() => itemHandler.handleAdd(boxData._id)}>add item</button>
</li>
</>
)
}
client/src/item.js
+4 -2
View File
@@ -3,8 +3,10 @@ import React from 'react';
const Item = ({ data, itemHandler, boxID }) => {
return (<li className="item">
<p className="item-name">{data.name}</p>
<button onClick={() => itemHandler.handleEdit(boxID, data._id)}>edit</button>
<button onClick={() => itemHandler.handleRemove(boxID, data._id)}>remove</button>
<div className="item-menu">
<button className="item-function" onClick={() => itemHandler.handleEdit(boxID, data._id)}>edit</button>
<button className="item-function" onClick={() => itemHandler.handleRemove(boxID, data._id)}>remove</button>
</div>
</li>);
};
client/src/styles/app.css
+13 -4
View File
@@ -25,26 +25,31 @@ h1, h2, h3, h4 {
padding: 0;
}
button {
margin: 0.2em;
border: none;
padding: 0.4em;
}
button.remove-box, button.edit-box {
width: 100%;
button.box-function, button.item-function {
font-size: 1em;
}
button:hover {
cursor: pointer;
}
.box {
box-sizing: content-box;
outline: 1px solid black;
box-shadow: 4px 4px black;
}
.box-subtitle {
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
font-size: 12px;
text-transform: lowercase;
}
ul.list-box {
padding: 10px;
display: grid;
grid-template-columns: repeat(5, 1fr);
padding: 0 0 0 1em;
margin: 0;
gap: 1em;
}
@@ -55,3 +60,7 @@ ul.list-box-item {
p {
margin: 0;
}
.drop-zone {
width: 100px;
height: 100px;
}
server/server.js
+14 -5
View File
@@ -22,17 +22,16 @@ db.once('open', function() {
/*------------MODELS------------*/
//create schema
var itemSchema = new mongoose.Schema({
id: String,
name: String,
description: String,
quantity: Number
});
var boxSchema = new mongoose.Schema({
id: String,
name: String,
description: String,
item: [itemSchema],
sort: Number,
});
//compile schema into model
@@ -51,7 +50,9 @@ app.get('/box', async (request, response) => {
// create box
app.post('/box', async (request, response) => {
await Box.create(request.body);
const numBoxes = await Box.countDocuments({});
const query = Object.assign({sort: numBoxes}, request.body);
await Box.create(query);
const updatedBoxes = await getAllBoxes();
response.send(updatedBoxes);
});
@@ -68,7 +69,15 @@ app.delete('/box/:id', async (request, response) => {
const updatedBoxes = await getAllBoxes();
response.send(updatedBoxes);
});
//change box sort
app.put('/box/:id/sort', async (request, response) => {
const source = await getBox(request.params.id);
const target = request.body;
await Box.updateOne({ _id: source._id }, { $set: { sort: target.sort } });
await Box.updateOne({ _id: target._id }, { $set: { sort: source.sort } });
const updatedBoxes = await getAllBoxes();
response.send(updatedBoxes);
})
//create item
app.post('/box/:id/item', async (request, response) => {
const id = request.params.id;
@@ -106,7 +115,7 @@ app.delete('/box/:boxId/item/:itemId', async (request, response) => {
const getAllBoxes = async (queryParameters) => {
queryParameters = queryParameters ?? {};
const data = await Box.find(queryParameters);
const data = await Box.find(queryParameters).sort({sort: 1});
return data;
}