react-version #1

Merged
memartel_loc merged 290 commits from react-version into main 2023-11-04 09:48:15 -04:00
8 changed files with 339 additions and 165 deletions
Showing only changes of commit 93d4ab44be - Show all commits

View File

@ -8,6 +8,9 @@
"name": "grosses-mitaines-ui", "name": "grosses-mitaines-ui",
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.2.0",
"@fortawesome/free-solid-svg-icons": "^6.2.0",
"@fortawesome/react-fontawesome": "^0.2.0",
"@testing-library/jest-dom": "^5.16.5", "@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
@ -15,10 +18,13 @@
"bootstrap": "^5.2.1", "bootstrap": "^5.2.1",
"fa": "^1.0.1", "fa": "^1.0.1",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"fontawesome": "^5.6.3",
"fortawesome": "^0.0.1-security",
"react": "^18.2.0", "react": "^18.2.0",
"react-bootstrap": "^2.5.0", "react-bootstrap": "^2.5.0",
"react-devtools": "^4.26.0", "react-devtools": "^4.26.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-fontawesome": "^1.7.1",
"react-icons": "^4.6.0", "react-icons": "^4.6.0",
"react-router-dom": "^6.4.1", "react-router-dom": "^6.4.1",
"react-scripts": "^5.0.1", "react-scripts": "^5.0.1",
@ -2260,6 +2266,51 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/@fortawesome/fontawesome-common-types": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.0.tgz",
"integrity": "sha512-rBevIsj2nclStJ7AxTdfsa3ovHb1H+qApwrxcTVo+NNdeJiB9V75hsKfrkG5AwNcRUNxrPPiScGYCNmLMoh8pg==",
"hasInstallScript": true,
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/fontawesome-svg-core": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.0.tgz",
"integrity": "sha512-Cf2mAAeMWFMzpLC7Y9H1I4o3wEU+XovVJhTiNG8ZNgSQj53yl7OCJaS80K4YjrABWZzbAHVaoHE1dVJ27AAYXw==",
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "6.2.0"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/free-solid-svg-icons": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.0.tgz",
"integrity": "sha512-UjCILHIQ4I8cN46EiQn0CZL/h8AwCGgR//1c4R96Q5viSRwuKVo0NdQEc4bm+69ZwC0dUvjbDqAHF1RR5FA3XA==",
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "6.2.0"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/react-fontawesome": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
"integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
"dependencies": {
"prop-types": "^15.8.1"
},
"peerDependencies": {
"@fortawesome/fontawesome-svg-core": "~1 || ~6",
"react": ">=16.3"
}
},
"node_modules/@humanwhocodes/config-array": { "node_modules/@humanwhocodes/config-array": {
"version": "0.10.7", "version": "0.10.7",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.7.tgz", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.7.tgz",
@ -8715,6 +8766,11 @@
"node": ">=0.10.3" "node": ">=0.10.3"
} }
}, },
"node_modules/fontawesome": {
"version": "5.6.3",
"resolved": "https://registry.npmjs.org/fontawesome/-/fontawesome-5.6.3.tgz",
"integrity": "sha512-FCc+CawwsJWWprVEg9X14yI7zI+l9YVAyhzgu70qwGeDn0tLLDH/dVfqgij72g4BBGgLGfK2qnvFGAmYUkhaWg=="
},
"node_modules/fork-ts-checker-webpack-plugin": { "node_modules/fork-ts-checker-webpack-plugin": {
"version": "6.5.2", "version": "6.5.2",
"resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.2.tgz", "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.2.tgz",
@ -8903,6 +8959,11 @@
"node": ">= 6" "node": ">= 6"
} }
}, },
"node_modules/fortawesome": {
"version": "0.0.1-security",
"resolved": "https://registry.npmjs.org/fortawesome/-/fortawesome-0.0.1-security.tgz",
"integrity": "sha512-o/pwn9ZSnveFLYP0d5IejSwz0rpGMDQsBaYVvR8WXSvnxILIwh7IUJK0P90QMF4cnIyouVF2BGrz0LEVSyzimA=="
},
"node_modules/forwarded": { "node_modules/forwarded": {
"version": "0.2.0", "version": "0.2.0",
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@ -15269,6 +15330,20 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
}, },
"node_modules/react-fontawesome": {
"version": "1.7.1",
"resolved": "https://registry.npmjs.org/react-fontawesome/-/react-fontawesome-1.7.1.tgz",
"integrity": "sha512-kottReWW1I9Uupub6A5YX4VK7qfpFnEjAcm5zB4Aepst7iofONT27GJYdTcRsj7q5uQu9PXBL7GsxAFKANNUVg==",
"dependencies": {
"prop-types": "^15.5.6"
},
"engines": {
"node": ">=0.10.0"
},
"peerDependencies": {
"react": ">=0.12.0"
}
},
"node_modules/react-icons": { "node_modules/react-icons": {
"version": "4.6.0", "version": "4.6.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.6.0.tgz", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.6.0.tgz",
@ -20023,6 +20098,35 @@
} }
} }
}, },
"@fortawesome/fontawesome-common-types": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.0.tgz",
"integrity": "sha512-rBevIsj2nclStJ7AxTdfsa3ovHb1H+qApwrxcTVo+NNdeJiB9V75hsKfrkG5AwNcRUNxrPPiScGYCNmLMoh8pg=="
},
"@fortawesome/fontawesome-svg-core": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.0.tgz",
"integrity": "sha512-Cf2mAAeMWFMzpLC7Y9H1I4o3wEU+XovVJhTiNG8ZNgSQj53yl7OCJaS80K4YjrABWZzbAHVaoHE1dVJ27AAYXw==",
"requires": {
"@fortawesome/fontawesome-common-types": "6.2.0"
}
},
"@fortawesome/free-solid-svg-icons": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.0.tgz",
"integrity": "sha512-UjCILHIQ4I8cN46EiQn0CZL/h8AwCGgR//1c4R96Q5viSRwuKVo0NdQEc4bm+69ZwC0dUvjbDqAHF1RR5FA3XA==",
"requires": {
"@fortawesome/fontawesome-common-types": "6.2.0"
}
},
"@fortawesome/react-fontawesome": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
"integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
"requires": {
"prop-types": "^15.8.1"
}
},
"@humanwhocodes/config-array": { "@humanwhocodes/config-array": {
"version": "0.10.7", "version": "0.10.7",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.7.tgz", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.7.tgz",
@ -24780,6 +24884,11 @@
"resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz", "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
"integrity": "sha512-U6kGnykA/6bFmg1M/oT9EkFeIYv7JlX3bozwQJWiiLz6L0w3F5vBVPxHlwyX/vtNq1ckcpRKOB9f2Qal/VtFpg==" "integrity": "sha512-U6kGnykA/6bFmg1M/oT9EkFeIYv7JlX3bozwQJWiiLz6L0w3F5vBVPxHlwyX/vtNq1ckcpRKOB9f2Qal/VtFpg=="
}, },
"fontawesome": {
"version": "5.6.3",
"resolved": "https://registry.npmjs.org/fontawesome/-/fontawesome-5.6.3.tgz",
"integrity": "sha512-FCc+CawwsJWWprVEg9X14yI7zI+l9YVAyhzgu70qwGeDn0tLLDH/dVfqgij72g4BBGgLGfK2qnvFGAmYUkhaWg=="
},
"fork-ts-checker-webpack-plugin": { "fork-ts-checker-webpack-plugin": {
"version": "6.5.2", "version": "6.5.2",
"resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.2.tgz", "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.2.tgz",
@ -24907,6 +25016,11 @@
"mime-types": "^2.1.12" "mime-types": "^2.1.12"
} }
}, },
"fortawesome": {
"version": "0.0.1-security",
"resolved": "https://registry.npmjs.org/fortawesome/-/fortawesome-0.0.1-security.tgz",
"integrity": "sha512-o/pwn9ZSnveFLYP0d5IejSwz0rpGMDQsBaYVvR8WXSvnxILIwh7IUJK0P90QMF4cnIyouVF2BGrz0LEVSyzimA=="
},
"forwarded": { "forwarded": {
"version": "0.2.0", "version": "0.2.0",
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@ -29349,6 +29463,14 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
}, },
"react-fontawesome": {
"version": "1.7.1",
"resolved": "https://registry.npmjs.org/react-fontawesome/-/react-fontawesome-1.7.1.tgz",
"integrity": "sha512-kottReWW1I9Uupub6A5YX4VK7qfpFnEjAcm5zB4Aepst7iofONT27GJYdTcRsj7q5uQu9PXBL7GsxAFKANNUVg==",
"requires": {
"prop-types": "^15.5.6"
}
},
"react-icons": { "react-icons": {
"version": "4.6.0", "version": "4.6.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.6.0.tgz", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.6.0.tgz",

View File

@ -3,6 +3,9 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.2.0",
"@fortawesome/free-solid-svg-icons": "^6.2.0",
"@fortawesome/react-fontawesome": "^0.2.0",
"@testing-library/jest-dom": "^5.16.5", "@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
@ -10,10 +13,13 @@
"bootstrap": "^5.2.1", "bootstrap": "^5.2.1",
"fa": "^1.0.1", "fa": "^1.0.1",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"fontawesome": "^5.6.3",
"fortawesome": "^0.0.1-security",
"react": "^18.2.0", "react": "^18.2.0",
"react-bootstrap": "^2.5.0", "react-bootstrap": "^2.5.0",
"react-devtools": "^4.26.0", "react-devtools": "^4.26.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-fontawesome": "^1.7.1",
"react-icons": "^4.6.0", "react-icons": "^4.6.0",
"react-router-dom": "^6.4.1", "react-router-dom": "^6.4.1",
"react-scripts": "^5.0.1", "react-scripts": "^5.0.1",

View File

@ -1,5 +1,6 @@
import { useState } from "react" import { useState } from "react";
import { Dropdown } from "react-bootstrap"; import { Dropdown } from "react-bootstrap";
import { Button } from "react-bootstrap";
const Ajouter = ({ onCreation }) => { const Ajouter = ({ onCreation }) => {
@ -11,13 +12,13 @@ const Ajouter = ({ onCreation }) => {
const [price, setPrice] = useState(""); const [price, setPrice] = useState("");
const [quantity, setQuantity] = useState(""); const [quantity, setQuantity] = useState("");
const [imageName, setImageName] = useState("sqdc.jpg"); const [imageName, setImageName] = useState("sqdc.jpg");
const [statusValue, setStatusValue] = useState(0) const [status, setStatusValue] = useState(0)
const handleSubmit = (e) => { const handleSubmit = (e) => {
e.preventDefault(); // Empêcher de reloader la page au submit. e.preventDefault(); // Empêcher de reloader la page au submit.
// Appeler le comportement onCreation // Appeler le comportement onCreation
onCreation({ title, description, category, price, quantity, imageName, statusValue }) onCreation({ title, description, category, price, quantity, imageName, status })
// Reset les états du formulaire. // Reset les états du formulaire.
setTitle("") setTitle("")
@ -75,52 +76,57 @@ const Ajouter = ({ onCreation }) => {
value={imageName} value={imageName}
onChange={(e) => setImageName(e.target.value)} /> onChange={(e) => setImageName(e.target.value)} />
</div> </div>
<Dropdown className='status-dropdown'> <div className="form-group">
<Dropdown.Toggle id="dropdown-status"> <label>Status: </label>
{currentStatus} <Dropdown className='status-dropdown'>
</Dropdown.Toggle> <Dropdown.Toggle id="dropdown-status-add">
{currentStatus}
</Dropdown.Toggle>
<Dropdown.Menu className='sorting-menu'> <Dropdown.Menu className='sorting-menu'>
<Dropdown.Item key="0" onClick={() => { <Dropdown.Item key="0" onClick={() => {
setStatus("Disponible"); // Mets le nom afficher quand le dropdown est fermé setStatus("Disponible"); // Mets le nom afficher quand le dropdown est fermé
setStatusValue(0); setStatusValue(0);
}}> }}>
Disponible {/*Le nom de l'option*/} Disponible {/*Le nom de l'option*/}
</Dropdown.Item> </Dropdown.Item>
<Dropdown.Item key="1" onClick={() => { <Dropdown.Item key="1" onClick={() => {
setStatus("Indisponible"); setStatus("Indisponible");
setStatusValue(1); setStatusValue(1);
}}> }}>
Indisponible Indisponible
</Dropdown.Item> </Dropdown.Item>
<Dropdown.Item key="2" onClick={() => { <Dropdown.Item key="2" onClick={() => {
setStatus("En Commande"); setStatus("En Commande");
setStatusValue(2); setStatusValue(2);
}}> }}>
En Commande En Commande
</Dropdown.Item> </Dropdown.Item>
<Dropdown.Item key="3" onClick={() => { <Dropdown.Item key="3" onClick={() => {
setStatus("Liquidation"); setStatus("Liquidation");
setStatusValue(3); setStatusValue(3);
}}> }}>
Liquidation Liquidation
</Dropdown.Item> </Dropdown.Item>
<Dropdown.Item key="4" onClick={() => { <Dropdown.Item key="4" onClick={() => {
setStatus("Promotion"); setStatus("Promotion");
setStatusValue(4); setStatusValue(4);
}}> }}>
Promotion Promotion
</Dropdown.Item> </Dropdown.Item>
<Dropdown.Item key="5" onClick={() => { <Dropdown.Item key="5" onClick={() => {
setStatus("Discontinué"); setStatus("Discontinué");
setStatusValue(5); setStatusValue(5);
}}> }}>
Discontinué Discontinué
</Dropdown.Item> </Dropdown.Item>
</Dropdown.Menu> </Dropdown.Menu>
</Dropdown> </Dropdown>
</div>
<input className="btn-primary ajouter" type="submit" value="Ajouter Morceau"></input>
<Button className="btn-primary btn-ajouter-morceau" type="submit" >Ajouter Morceau</Button>
</form> </form>
</div> </div>
) )

View File

@ -1,9 +0,0 @@
const Button = ({text, color, onClick}) => {
return (
<button className="btn" style={{backgroundColor : color}} onClick={onClick}>
{text}
</button>
)
};
export default Button;

View File

@ -1,6 +1,6 @@
import { render } from "@testing-library/react";
import { useState } from "react" import { useState } from "react"
import { Dropdown } from "react-bootstrap"; import { Dropdown } from "react-bootstrap";
import {Button} from "react-bootstrap";
function renderStatus(statusCode) { function renderStatus(statusCode) {
if (statusCode !== undefined) { if (statusCode !== undefined) {
@ -35,13 +35,15 @@ const Modify = ({ morceau, onModify }) => {
const [price, setPrice] = useState(morceau.price); const [price, setPrice] = useState(morceau.price);
const [quantity, setQuantity] = useState(morceau.quantity); const [quantity, setQuantity] = useState(morceau.quantity);
const [imageName, setImageName] = useState(morceau.imageName); const [imageName, setImageName] = useState(morceau.imageName);
const [statusValue, setStatusValue] = useState(morceau.status) const [status, setStatusValue] = useState(morceau.status)
const id = morceau.id;
const handleSubmit = (e) => { const handleSubmit = (e) => {
e.preventDefault(); // Empêcher de reloader la page au submit. e.preventDefault(); // Empêcher de reloader la page au submit.
// Appeler le comportement onCreation // Appeler le comportement onCreation
onModify({ title, description, category, price, quantity, imageName, statusValue }) onModify({ id, title, description, category, price, quantity, imageName, status })
} }
@ -91,52 +93,55 @@ const Modify = ({ morceau, onModify }) => {
value={imageName} value={imageName}
onChange={(e) => setImageName(e.target.value)} /> onChange={(e) => setImageName(e.target.value)} />
</div> </div>
<Dropdown className='status-dropdown'> <div className="form-group">
<Dropdown.Toggle id="dropdown-status"> <label>Status: </label>
{currentStatus} <Dropdown className='status-dropdown'>
</Dropdown.Toggle> <Dropdown.Toggle id="dropdown-status-add">
{currentStatus}
</Dropdown.Toggle>
<Dropdown.Menu className='sorting-menu'> <Dropdown.Menu className='sorting-menu'>
<Dropdown.Item key="0" onClick={() => { <Dropdown.Item key="0" onClick={() => {
setStatus("Disponible"); // Mets le nom afficher quand le dropdown est fermé setStatus("Disponible"); // Mets le nom afficher quand le dropdown est fermé
setStatusValue(0); setStatusValue(0);
}}> }}>
Disponible {/*Le nom de l'option*/} Disponible {/*Le nom de l'option*/}
</Dropdown.Item> </Dropdown.Item>
<Dropdown.Item key="1" onClick={() => { <Dropdown.Item key="1" onClick={() => {
setStatus("Indisponible"); setStatus("Indisponible");
setStatusValue(1); setStatusValue(1);
}}> }}>
Indisponible Indisponible
</Dropdown.Item> </Dropdown.Item>
<Dropdown.Item key="2" onClick={() => { <Dropdown.Item key="2" onClick={() => {
setStatus("En Commande"); setStatus("En Commande");
setStatusValue(2); setStatusValue(2);
}}> }}>
En Commande En Commande
</Dropdown.Item> </Dropdown.Item>
<Dropdown.Item key="3" onClick={() => { <Dropdown.Item key="3" onClick={() => {
setStatus("Liquidation"); setStatus("Liquidation");
setStatusValue(3); setStatusValue(3);
}}> }}>
Liquidation Liquidation
</Dropdown.Item> </Dropdown.Item>
<Dropdown.Item key="4" onClick={() => { <Dropdown.Item key="4" onClick={() => {
setStatus("Promotion"); setStatus("Promotion");
setStatusValue(4); setStatusValue(4);
}}> }}>
Promotion Promotion
</Dropdown.Item> </Dropdown.Item>
<Dropdown.Item key="5" onClick={() => { <Dropdown.Item key="5" onClick={() => {
setStatus("Discontinué"); setStatus("Discontinué");
setStatusValue(5); setStatusValue(5);
}}> }}>
Discontinué Discontinué
</Dropdown.Item> </Dropdown.Item>
</Dropdown.Menu> </Dropdown.Menu>
</Dropdown> </Dropdown>
</div>
<input className="btn-primary ajouter" type="submit" value="Modifier Morceau"></input> <Button className="btn-primary btn-ajouter-morceau" type="submit" >Modifier Morceau</Button>
</form> </form>
</div> </div>
) )

View File

@ -1,6 +1,6 @@
import { FaTimes } from 'react-icons/fa'
import { FaTools } from 'react-icons/fa'
import { useState } from 'react'; import { useState } from 'react';
import { faTools, faTimes } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import Modify from './Modify'; import Modify from './Modify';
@ -33,18 +33,21 @@ const SimpleItem = ({ item, onDelete, onModify }) => {
return ( return (
<div className="inventaire-item"> <div className="inventaire-item">
<h3> <div className='simple-item-top-container'>
{item.title} <h3 className='simple-item-title' >
<div> {item.title}
<FaTools style={{ color: "gray", cursor: 'pointer' }}
</h3>
<h1 className='simple-item-buttons'>
<FontAwesomeIcon transform="left-10" icon={faTools} className='.btn-modifier-morceau' style={{ color: "gray", cursor: 'pointer' }}
onClick={() => setFormVisibility(!isFormvisible)} /> onClick={() => setFormVisibility(!isFormvisible)} />
<FaTimes style={{ color: "red", cursor: 'pointer' }} <FontAwesomeIcon icon={faTimes} className='.btn-effacer-morceau' style={{ color: "red", cursor: 'pointer' }}
onClick={() => onDelete(item.id)} /> onClick={() => onDelete(item.id)} />
</div> </h1>
</h3> </div>
{isFormvisible && <Modify morceau={item} onModify={onModify}></Modify>} {isFormvisible && <Modify morceau={item} onModify={onModify}></Modify>}
{!isFormvisible && <div> {!isFormvisible && <div>
<p> Categoie: {item.category}, Prix: {item.price}, Promo: {item.promoPrice}, Quantité: {item.quantity}, Disponibilité: {renderStatus(item.status)}</p> <p> Catégorie: {item.category}, Prix: {item.price}, Promo: {item.promoPrice}, Quantité: {item.quantity}, Disponibilité: {renderStatus(item.status)}</p>
<p> Description: {item.description}</p> <p> Description: {item.description}</p>
</div> </div>
} }

View File

@ -1,6 +1,5 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Button } from 'react-bootstrap';
import Button from '../components/Button'
import SimpleItemList from "../components/SimpleItemList"; import SimpleItemList from "../components/SimpleItemList";
import Ajouter from "../components/Ajouter"; import Ajouter from "../components/Ajouter";
@ -55,6 +54,7 @@ const Inventaire = () => {
console.log("Erreur leur du DELETE de " + id); console.log("Erreur leur du DELETE de " + id);
}; };
const handleModifyItem = async (morceau) => { const handleModifyItem = async (morceau) => {
const response = await fetch(`https://localhost:7292/api/Product`, { const response = await fetch(`https://localhost:7292/api/Product`, {
method: 'PATCH', method: 'PATCH',
@ -65,13 +65,10 @@ const Inventaire = () => {
body: JSON.stringify(morceau) body: JSON.stringify(morceau)
}) })
const newMorceau = await response.json(); const modifiedMorceau = await response.json();
console.log(newMorceau);
if (response.ok) { if (response.ok)
setMorceaux(morceaux.filter((morceau) => morceau.id !== newMorceau.id)); setMorceaux([...(morceaux.filter((morceau) => morceau.id !== modifiedMorceau.id)), { ...modifiedMorceau }].sort((a, b) => a.id - b.id));
setMorceaux([...morceaux, { ...newMorceau }]);
}
else else
console.log("Erreur de creation " + morceau); console.log("Erreur de creation " + morceau);
}; };
@ -81,10 +78,11 @@ const Inventaire = () => {
<header className='header'> <header className='header'>
<h1>Inventaire</h1> <h1>Inventaire</h1>
<Button <Button
text={isFormvisible ? 'Fermer' : 'Ajouter'} className={isFormvisible ? 'btn-fermer' : 'btn-ajouter'}
color={isFormvisible ? 'red' : 'purple'} onClick={() => setFormVisibility(!isFormvisible)}>
onClick={() => setFormVisibility(!isFormvisible)} {isFormvisible ? 'Fermer' : 'Ajouter'}
/> </Button>
</header> </header>
{isFormvisible && <Ajouter onCreation={handleAddItem}></Ajouter>} {isFormvisible && <Ajouter onCreation={handleAddItem}></Ajouter>}
{morceaux.length > 0 ? {morceaux.length > 0 ?

View File

@ -359,20 +359,6 @@ html {
text-decoration: none; text-decoration: none;
} }
.btn {
display: inline-block;
background: #000;
color: #fff;
border: none;
padding: 10px 20px;
margin: 5px;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
font-size: 15px;
font-family: inherit;
}
.btn-primary { .btn-primary {
background-color: purple; background-color: purple;
color: white; color: white;
@ -401,6 +387,12 @@ html {
width: 85%; width: 85%;
} }
.status-dropdown {
width: fit-content;
margin-bottom: 20px;
width: 85%;
}
.privacy { .privacy {
height: 100vh; height: 100vh;
} }
@ -419,9 +411,10 @@ html {
align-items: center; align-items: center;
margin: 1.25%; margin: 1.25%;
padding: 1.25%; padding: 1.25%;
color:purple; color: purple;
background-color: beige; background-color: beige;
border: purple solid 3px;; border: purple solid 3px;
;
} }
.inventaire-form-container { .inventaire-form-container {
@ -452,17 +445,17 @@ html {
.dropdown-gestion, .dropdown-gestion,
.dropdown-gestion:hover { .dropdown-gestion:hover {
margin:0px; margin: 0px;
padding:auto; padding: auto;
color: grey; color: grey;
background-color: transparent !important; background-color: transparent !important;
border-color: transparent !important; border-color: transparent !important;
padding-left:10%; padding-left: 10%;
} }
.dropdown-gestion-container button:hover{ .dropdown-gestion-container button:hover {
color:rgb(102, 102, 102) !important; color: rgb(102, 102, 102) !important;
} }
.dropdown-gestion-menu { .dropdown-gestion-menu {
@ -479,16 +472,16 @@ html {
margin-bottom: 15px; margin-bottom: 15px;
} }
.sorting-dropdown{ .sorting-dropdown {
width:fit-content; width: fit-content;
margin:auto; margin: auto;
float:right; float: right;
} }
.cat-load{ .cat-load {
display:block; display: block;
margin:auto; margin: auto;
width:auto; width: auto;
background-image: url("/public/images/cat-yarn.gif"); background-image: url("/public/images/cat-yarn.gif");
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: white; background-color: white;
@ -501,17 +494,17 @@ html {
.detail-container { .detail-container {
display: flex; display: flex;
background-color: plum; background-color: plum;
padding:16px; padding: 16px;
} }
.detail-container-left { .detail-container-left {
margin:auto; margin: auto;
width: 48%; width: 48%;
height: 100%; height: 100%;
} }
.detail-container-right { .detail-container-right {
margin:auto; margin: auto;
width: 48%; width: 48%;
height: 100%; height: 100%;
} }
@ -521,30 +514,68 @@ html {
height: auto; height: auto;
} }
.detail-old-price{ .detail-old-price {
text-decoration: line-through; text-decoration: line-through;
} }
.btn-fermer {
background-color: red !important;
color: white !important;
}
.btn-ajouter-morceau {
background-color: purple !important;
color: white !important;
}
.form-group {
margin-bottom: 10px;
}
.simple-item-top-container{
display:flex;
}
.simple-item-title{
text-align: left;
margin: auto;
margin-left: 0px;
max-width: 80%;
}
.simple-item-buttons{
width:fit-content;
margin-right: 5px;
}
/* -------------------------------------------------------- */ /* -------------------------------------------------------- */
/* specification pour les moyennes écrans /* specification pour les moyennes écrans
/* -------------------------------------------------------- */ /* -------------------------------------------------------- */
@media(max-width:900px) { @media(max-width:900px) {
.dropdown-gestion, .btn-ajouter-morceau {
.dropdown-gestion:hover { display: block;
padding-left:0; margin: auto;
margin-top: 20px;
height: 50px !important;
width: 90% !important;
font-size: larger;
} }
.detail-container{ .dropdown-gestion,
display:inline-block; .dropdown-gestion:hover {
padding-left: 0;
}
.detail-container {
display: inline-block;
} }
.detail-container-left { .detail-container-left {
width: 95%; width: 95%;
} }
.detail-container-right { .detail-container-right {
width: 95%; width: 95%;
} }
@ -557,6 +588,18 @@ html {
width: 45%; width: 45%;
} }
.status-dropdown {
float: none;
width: 100%;
}
.status-dropdown button {
height: 60px !important;
width: 100% !important;
font-size: larger;
}
.sorting-dropdown { .sorting-dropdown {
width: 100%; width: 100%;