Skip to content

Commit

Permalink
Merge pull request #128 from WildCodeSchool-2023-09/update-css-admin
Browse files Browse the repository at this point in the history 
Update css admin
  • Loading branch information
@Alexis-NM
Alexis-NM authored Feb 8, 2024
2 parents 417acc8 + a6117d6 commit d3faa9e
Show file tree
Hide file tree
Showing 10 changed files with 154 additions and 178 deletions.
2 changes: 1 addition & 1 deletion backend/src/models/CaptureManager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ class CaptureManager extends AbstractManager {

async readAll() {
const [rows] = await this.database.query(`
SELECT c.id, c.user_id, c.artwork_id, c.capture, a.picture AS artwork_url
SELECT c.id, c.user_id, c.artwork_id, c.capture, a.picture AS artwork_url, a.reported
FROM ${this.table} c
LEFT JOIN artworks a ON c.artwork_id = a.id
`);
Expand Down
40 changes: 17 additions & 23 deletions frontend/src/components/CaptureAdmin.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,12 @@
import { useState, useEffect } from "react";
import PropTypes from "prop-types";
import axios from "axios";
import "./CaptureAdmin.scss";

function CaptureAdmin({ setToggleModalCapture, userId }) {
const [artCapture, setArtCapture] = useState([]);

useEffect(() => {
axios
.get(`${import.meta.env.VITE_BACKEND_URL}/api/captures`, {
params: {
general_gallery: true,
},
})
.then((response) => {
setArtCapture(response.data);
})
.catch((error) => {
console.error(
"Erreur lors de la récupération des utilisateurs:",
error
);
});
}, []);

function CaptureAdmin({
artCapture,
setToggleModalCapture,
userId,
captureId,
}) {
const getCaptureURL = (artwork) => {
const capturePath = artwork.capture.replace("public/", "");
return `${import.meta.env.VITE_BACKEND_URL}/${capturePath}`;
Expand All @@ -48,6 +31,7 @@ function CaptureAdmin({ setToggleModalCapture, userId }) {
onClick={() => {
setToggleModalCapture(true);
userId(artwork.user_id);
captureId(artwork.id);
}}
>
Valider
Expand All @@ -68,8 +52,18 @@ function CaptureAdmin({ setToggleModalCapture, userId }) {
}

CaptureAdmin.propTypes = {
artCapture: PropTypes.arrayOf(
PropTypes.shape({
id: PropTypes.number.isRequired,
user_pseudo: PropTypes.string.isRequired,
capture: PropTypes.string.isRequired,
artwork_url: PropTypes.string.isRequired,
user_id: PropTypes.number.isRequired,
})
).isRequired,
setToggleModalCapture: PropTypes.func.isRequired,
userId: PropTypes.func.isRequired,
captureId: PropTypes.func.isRequired,
};

export default CaptureAdmin;
6 changes: 4 additions & 2 deletions frontend/src/components/CaptureAdmin.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,11 @@

.original-img-grid {
grid-area: 1 / 3 / 2 / 4;
width: 50%;
width: 40%;
height: 29vh;
object-fit: cover;
margin: auto;
margin-left: 0;
margin-left: 2%;
margin-bottom: 0;
border-radius: 0.5rem;
}
Expand Down
5 changes: 4 additions & 1 deletion frontend/src/components/FilterUsersAdmin.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,14 @@
justify-content: end;

.cross-filter-button {
padding: 0;
margin-top: 4%;
margin-right: 4%;
margin-bottom: 0;
width: 8%;
height: 0;
border: none;
cursor: pointer;
background-color: $deep-purple;

img {
width: 100%;
Expand All @@ -49,6 +51,7 @@
border: 3px solid $red;
border-left: none;
border-right: none;
border-radius: 0;
padding: 3%;
margin-bottom: 0;
cursor: pointer;
Expand Down
11 changes: 9 additions & 2 deletions frontend/src/components/MainNavBars/NavBar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,9 @@ function NavBar({
</Link>
<Link
to={handleProfileLink()}
className="img-nav-link"
className={`img-nav-link ${
activePage === "user/profil" ? "active" : ""
}`}
onClick={() => {
handleChangePage("user/profil");
}}
Expand All @@ -66,7 +68,12 @@ function NavBar({
</Link>
<Link
to={user.is_administrator === 3 ? "/connexion" : "/user/logout"}
className="img-nav-link"
className={`img-nav-link ${
activePage === "connexionOuDéconnexion" ? "active" : ""
}`}
onClick={() => {
handleChangePage("connexionOuDéconnexion");
}}
>
<img src={login} alt="" />
<p>{user.is_administrator === 3 ? "Connexion" : "Déconnexion"}</p>
Expand Down
10 changes: 0 additions & 10 deletions frontend/src/components/NavBarAdmin.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,16 +56,6 @@ function NavBarAdmin({ activeSection }) {
</a>
</h3>
</li>
<li>
<h3>
<a
href="#artists"
className={activeSection === "artists" ? "active" : ""}
>
Artistes
</a>
</h3>
</li>
</ul>
</nav>
);
Expand Down
12 changes: 7 additions & 5 deletions frontend/src/components/ValidateCaptureAdmin.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ function ValidateCaptureAdmin({
isHardToFind,
isAllFieldsFilled,
pointsUserId,
deleteCaptureId,
}) {
return (
<section className="ValidateCapturePoints">
Expand Down Expand Up @@ -60,7 +61,7 @@ function ValidateCaptureAdmin({
type="button"
className="button-red"
onClick={() => {
handleValidateButtonClick(pointsUserId);
handleValidateButtonClick(pointsUserId, deleteCaptureId);
}}
>
Valider l'oeuvre
Expand All @@ -75,10 +76,11 @@ ValidateCaptureAdmin.propTypes = {
handleHardToFindCheck: PropTypes.func.isRequired,
handleAllFieldsFilledCheck: PropTypes.func.isRequired,
handleValidateButtonClick: PropTypes.func.isRequired,
isNewArtwork: PropTypes.func.isRequired,
isHardToFind: PropTypes.func.isRequired,
isAllFieldsFilled: PropTypes.func.isRequired,
pointsUserId: PropTypes.func.isRequired,
isNewArtwork: PropTypes.bool.isRequired,
isHardToFind: PropTypes.bool.isRequired,
isAllFieldsFilled: PropTypes.bool.isRequired,
pointsUserId: PropTypes.number.isRequired,
deleteCaptureId: PropTypes.number.isRequired,
};

export default ValidateCaptureAdmin;
3 changes: 3 additions & 0 deletions frontend/src/components/ValidateCaptureAdmin.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,15 @@
justify-content: end;

button {
padding: 0;
margin-top: 4%;
margin-right: 4%;
margin-bottom: 0;
width: 6%;
height: 0;
border: none;
cursor: pointer;
background-color: $deep-purple;

img {
width: 100%;
Expand Down
118 changes: 72 additions & 46 deletions frontend/src/pages/Admin.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import Avatar from "../assets/panel-admin/avatar-svgrepo-com.svg";
import Hourglass from "../assets/panel-admin/hourglass-not-done-svgrepo-com.svg";
import badge from "../assets/panel-admin/badge-award-svgrepo-com.svg";
import light from "../assets/panel-admin/light-bulb-idea-svgrepo-com.svg";
import download from "../assets/panel-admin/download-svgrepo-com.svg";
import CaptureAdmin from "../components/CaptureAdmin";
import FilterUsersAdmin from "../components/FilterUsersAdmin";
import NewArtAdmin from "../components/NewArtAdmin";
Expand All @@ -32,17 +31,19 @@ function admin() {
const [toggleUserFilter, setToggleUserFilter] = useState(false);
const [initialOffset, setInitialOffset] = useState(null);
const [sortOrder, setSortOrder] = useState(null);
const [artCapture, setArtCapture] = useState([]);
const [toggleModalCapture, setToggleModalCapture] = useState(false);
const [points, setPoints] = useState(0);
const [isNewArtwork, setIsNewArtwork] = useState(false);
const [isHardToFind, setIsHardToFind] = useState(false);
const [isAllFieldsFilled, setIsAllFieldsFilled] = useState(false);
const [pointsUserId, setPointsUserId] = useState([]);
const [deleteCaptureId, setDeleteCaptureId] = useState([]);
const [notifCaptureCount, setNotifCaptureCount] = useState(0);

const dashboardRef = useRef(null);
const usersRef = useRef(null);
const streetArtRef = useRef(null);
const artistsRef = useRef(null);

const { user, handleAuth, userMode } = useContext(AuthContext);

Expand All @@ -64,13 +65,8 @@ function admin() {
offset < streetArtRef.current.offsetTop
) {
setActiveSection("users");
} else if (
offset >= streetArtRef.current.offsetTop &&
offset < artistsRef.current.offsetTop
) {
} else if (offset >= streetArtRef.current.offsetTop) {
setActiveSection("streetArt");
} else if (offset >= artistsRef.current.offsetTop) {
setActiveSection("artists");
}
};

Expand Down Expand Up @@ -212,6 +208,10 @@ function admin() {
setPointsUserId(id);
};

const captureId = (id) => {
setDeleteCaptureId(id);
};

const handleValidateButtonClick = () => {
setPoints((prevPoints) => prevPoints + 100);
const totalPoints =
Expand All @@ -228,8 +228,41 @@ function admin() {
.catch((error) => {
console.error("Erreur lors de l'envoi des points:", error);
});

axios
.delete(
`${import.meta.env.VITE_BACKEND_URL}/api/captures/${deleteCaptureId}`
)
.then((response) => {
console.info(
"Suppression de l'œuvre effectuée avec succès !",
response
);
})
.catch((error) => {
console.error("Erreur lors de la suppression de l'œuvre:", error);
});
};

useEffect(() => {
axios
.get(`${import.meta.env.VITE_BACKEND_URL}/api/captures`, {
params: {
general_gallery: true,
},
})
.then((response) => {
const filteredCaptures = response.data.filter(
(capture) => capture.artwork?.reported !== true
);
setArtCapture(filteredCaptures);
setNotifCaptureCount(filteredCaptures.length);
})
.catch((error) => {
console.error("Erreur lors de la récupération des captures:", error);
});
}, [handleValidateButtonClick]);

const handleReturn = () => {
switch (user.is_administrator) {
case 1: {
Expand All @@ -243,14 +276,23 @@ function admin() {
<h2 className="border-none-h2">Notifications</h2>
<img alt="ampoule" src={light} />
</div>
<div className="notif-parent-div">
<div className="notif-grid-div notif-child-div-yellow">
<p>12 Street Art en attente de validation</p>
<img alt="Sablier" src={Hourglass} />
<div className="notif-prev-parent-div">
<div className="notif-parent-div">
{notifCaptureCount > 0 && (
<div className="notif-grid-div notif-child-div-yellow">
<p>
{notifCaptureCount} Street Art en attente de
validation
</p>
<img alt="Sablier" src={Hourglass} />
</div>
)}
</div>
<div className="notif-grid-div notif-child-div-cyan">
<p>3 Street Art sont portés disparus</p>
<img alt="Carte" src={MapAndFlag} />
<div className="notif-parent-div">
<div className="notif-grid-div notif-child-div-cyan">
<p>3 Street Art sont portés disparus</p>
<img alt="Carte" src={MapAndFlag} />
</div>
</div>
</div>
</section>
Expand Down Expand Up @@ -363,10 +405,20 @@ function admin() {
handleActive={handleActive}
/>
{activeComponent === "captures" && (
<CaptureAdmin
setToggleModalCapture={setToggleModalCapture}
userId={userId}
/>
<div>
{artCapture.length === 0 ? (
<p className="street-art-p">
Aucune capture à valider.
</p>
) : (
<CaptureAdmin
artCapture={artCapture}
setToggleModalCapture={setToggleModalCapture}
userId={userId}
captureId={captureId}
/>
)}
</div>
)}
{activeComponent === "newWork" && <NewArtAdmin />}
{activeComponent === "reported" && <ReportedArtAdmin />}
Expand All @@ -381,36 +433,10 @@ function admin() {
isHardToFind={isHardToFind}
isAllFieldsFilled={isAllFieldsFilled}
pointsUserId={pointsUserId}
deleteCaptureId={deleteCaptureId}
/>
)}
</section>
<section ref={artistsRef}>
<h2 className="admin-h2" id="artists">
Ajouter un artiste
</h2>
<img
src={download}
alt="download"
className="download-art-img"
/>
<p>Télécharger une photo</p>
<form className="add-art-form-grid">
<div className="name-art-grid">
<p>
Nom de l'artiste{" "}
<span className="name-red-span">*</span>
</p>
<input />
</div>
<div className="about-art-grid">
<p>A propos de l'artiste</p>
<input className="about-art-pad" />
</div>
</form>
<button type="button" className={userMode()}>
Ajouter
</button>
</section>
</>
) : (
<h3 className="admin-mobile-h2">
Expand Down
Loading

0 comments on commit d3faa9e

Please sign in to comment.