articles styles fix
All checks were successful
publish-main / release-image (push) Successful in 10m46s
All checks were successful
publish-main / release-image (push) Successful in 10m46s
This commit is contained in:
Ivan
parent
0e1dc49f59
commit
2b50f7c332
GPG Key ID:
0C191B86D9582583
@ -1,94 +1,166 @@
|
|||||||
.main {
|
.main {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
min-height: 100%;
|
||||||
padding: 4% 8%;
|
padding: 4% 8%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
min-height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel {
|
.panel {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 10%;
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: end;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
gap: 15px;
|
||||||
|
div:first-child {
|
||||||
|
flex-grow: 1;
|
||||||
|
input {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.listforms {
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 16px;
|
||||||
|
height: 70%;
|
||||||
|
min-height: 700px;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
width: 100%;
|
||||||
|
&__columns {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: start;
|
||||||
align-items: end;
|
align-items: center;
|
||||||
padding: 0 5%;
|
padding: 20px 25px;
|
||||||
|
border-bottom: 1px solid rgb(220, 220, 220);
|
||||||
|
&__item {
|
||||||
|
font-size: 15px;
|
||||||
|
font-family: "Montserrat", sans-serif;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__forms {
|
||||||
|
min-height: 100%;
|
||||||
|
display: inline;
|
||||||
|
overflow-y: auto;
|
||||||
|
&__item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: start;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
padding: 20px 25px;
|
||||||
|
font-family: "Montserrat", sans-serif;
|
||||||
|
position: relative;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(240, 240, 240, 0.8);
|
||||||
|
}
|
||||||
|
&__title {
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__answers {
|
||||||
|
width: 33.3%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
&__update {
|
||||||
|
width: 33.3%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
i {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 15px;
|
||||||
|
right: 30px;
|
||||||
|
top: calc(50% - 7px);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
li {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.listArticles {
|
.listArticles {
|
||||||
box-shadow: 0 0 5px 1px rgb(200, 200, 200);
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
border-radius: 5px;
|
background: #fff;
|
||||||
margin-top: 5%;
|
border-radius: 16px;
|
||||||
height: 70%;
|
height: 70%;
|
||||||
|
min-height: 700px;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
width: 100%;
|
||||||
|
&__columns {
|
||||||
|
display: flex;
|
||||||
|
justify-content: start;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20px 25px;
|
||||||
|
border-bottom: 1px solid rgb(220, 220, 220);
|
||||||
|
&__item {
|
||||||
|
width: 33.3%;
|
||||||
|
font-size: 15px;
|
||||||
|
font-family: "Montserrat", sans-serif;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__forms {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
&__columns {
|
height: 85%;
|
||||||
display: flex;
|
overflow-y: auto;
|
||||||
justify-content: start;
|
&::-webkit-scrollbar {
|
||||||
align-items: center;
|
width: 7px;
|
||||||
padding: 0 2%;
|
|
||||||
height: 15%;
|
|
||||||
width: 100%;
|
|
||||||
border-bottom: 1px solid rgb(220, 220, 220);
|
|
||||||
&__item {
|
|
||||||
width: 33.3%;
|
|
||||||
font-size: 15px;
|
|
||||||
// text-align: center;
|
|
||||||
font-family: "Montserrat", sans-serif;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
&__forms {
|
&::-webkit-scrollbar-thumb {
|
||||||
width: 100%;
|
background-color: rgb(200, 200, 200);
|
||||||
height: 85%;
|
|
||||||
overflow-y: auto;
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
width: 7px;
|
|
||||||
}
|
|
||||||
&::-webkit-scrollbar-thumb {
|
|
||||||
background-color: rgb(200, 200, 200);
|
|
||||||
}
|
|
||||||
&__item {
|
|
||||||
display: flex;
|
|
||||||
justify-content: start;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 2%;
|
|
||||||
height: 25%;
|
|
||||||
width: 100%;
|
|
||||||
font-family: "Montserrat", sans-serif;
|
|
||||||
position: relative;
|
|
||||||
&:hover {
|
|
||||||
background-color: rgba(240, 240, 240, 0.8);
|
|
||||||
}
|
|
||||||
&__title {
|
|
||||||
width: 33.3%;
|
|
||||||
// text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
&:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&__date {
|
|
||||||
width: 33.3%;
|
|
||||||
// text-align: center;
|
|
||||||
}
|
|
||||||
&__author {
|
|
||||||
width: 33.3%;
|
|
||||||
// text-align: center;
|
|
||||||
}
|
|
||||||
i {
|
|
||||||
position: absolute;
|
|
||||||
font-size: 15px;
|
|
||||||
right: 30px;
|
|
||||||
top: calc(50% - 7px);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
ul {
|
|
||||||
li {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
&__item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: start;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
padding: 20px 25px;
|
||||||
|
font-family: "Montserrat", sans-serif;
|
||||||
|
position: relative;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(240, 240, 240, 0.8);
|
||||||
|
}
|
||||||
|
&__title {
|
||||||
|
width: 33.3%;
|
||||||
|
// text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__date {
|
||||||
|
width: 33.3%;
|
||||||
|
// text-align: center;
|
||||||
|
}
|
||||||
|
&__author {
|
||||||
|
width: 33.3%;
|
||||||
|
// text-align: center;
|
||||||
|
}
|
||||||
|
i {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 15px;
|
||||||
|
right: 30px;
|
||||||
|
top: calc(50% - 7px);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
li {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@ -1,150 +1,150 @@
|
|||||||
.main {
|
.main {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
height: 90%;
|
height: 90%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
|
width: 100%;
|
||||||
|
// height: 10%;
|
||||||
|
&__wrapper {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 10%;
|
height: 100%;
|
||||||
&__wrapper {
|
background: #fff;
|
||||||
width: 100%;
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
height: 100%;
|
border-bottom: none;
|
||||||
border: 1px solid rgb(180, 180, 180);
|
border-radius: 5px 5px 0 0;
|
||||||
border-bottom: none;
|
padding: 0 5px;
|
||||||
border-radius: 5px 5px 0 0;
|
&__article {
|
||||||
padding: 0 5px;
|
width: 100%;
|
||||||
&__article {
|
height: 100%;
|
||||||
width: 100%;
|
display: flex;
|
||||||
height: 100%;
|
justify-content: space-between;
|
||||||
display: flex;
|
align-items: center;
|
||||||
justify-content: space-between;
|
&__title {
|
||||||
align-items: center;
|
width: 20%;
|
||||||
&__title {
|
height: 75%;
|
||||||
width: 20%;
|
display: flex;
|
||||||
height: 75%;
|
border-right: 1px solid rgb(180, 180, 180);
|
||||||
display: flex;
|
justify-content: center;
|
||||||
border-right: 1px solid rgb(180, 180, 180);
|
align-items: center;
|
||||||
justify-content: center;
|
position: relative;
|
||||||
align-items: center;
|
&__name {
|
||||||
position: relative;
|
position: absolute;
|
||||||
&__name {
|
top: -20%;
|
||||||
position: absolute;
|
left: 3px;
|
||||||
top: -20%;
|
font-size: 8px;
|
||||||
left: 3px;
|
font-family: "Montserrat", sans-serif;
|
||||||
font-size: 8px;
|
|
||||||
font-family: "Montserrat", sans-serif;
|
|
||||||
}
|
|
||||||
&__text {
|
|
||||||
font-size: 15px;
|
|
||||||
font-family: "Montserrat", sans-serif;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&__tags {
|
|
||||||
width: 60%;
|
|
||||||
height: 75%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: start;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
padding: 0 5px;
|
|
||||||
position: relative;
|
|
||||||
overflow-y: auto;
|
|
||||||
// &::-webkit-scrollbar {
|
|
||||||
// width: 10px;
|
|
||||||
// }
|
|
||||||
// &::-webkit-scrollbar-thumb {
|
|
||||||
// background-color: rgb(200, 200, 200);
|
|
||||||
// }
|
|
||||||
// &::-webkit-scrollbar-button:single-button {
|
|
||||||
// background-color: #bbbbbb;
|
|
||||||
// display: block;
|
|
||||||
// border-style: solid;
|
|
||||||
// height: 10px;
|
|
||||||
// width: 16px;
|
|
||||||
// }
|
|
||||||
&__item {
|
|
||||||
padding: 0 5px;
|
|
||||||
border-radius: 5px;
|
|
||||||
border: 1px solid rgb(100, 100, 100);
|
|
||||||
margin: 1px 3px;
|
|
||||||
span {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&__owner {
|
|
||||||
width: 20%;
|
|
||||||
height: 75%;
|
|
||||||
border-left: 1px solid rgb(180, 180, 180);
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
position: relative;
|
|
||||||
&__name {
|
|
||||||
position: absolute;
|
|
||||||
top: -20%;
|
|
||||||
right: 3px;
|
|
||||||
font-size: 8px;
|
|
||||||
font-family: "Montserrat", sans-serif;
|
|
||||||
}
|
|
||||||
&__text {
|
|
||||||
font-size: 15px;
|
|
||||||
font-family: "Montserrat", sans-serif;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
&__tags {
|
&__text {
|
||||||
width: 100%;
|
font-size: 15px;
|
||||||
height: 50%;
|
font-family: "Montserrat", sans-serif;
|
||||||
display: flex;
|
|
||||||
justify-content: start;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 20px;
|
|
||||||
&__item {
|
|
||||||
padding: 0 5px;
|
|
||||||
border-radius: 5px;
|
|
||||||
border: 1px solid rgb(100, 100, 100);
|
|
||||||
margin: 1px 3px;
|
|
||||||
span {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
&__tags {
|
||||||
|
width: 60%;
|
||||||
|
height: 75%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: start;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 5px;
|
||||||
|
position: relative;
|
||||||
|
overflow-y: auto;
|
||||||
|
// &::-webkit-scrollbar {
|
||||||
|
// width: 10px;
|
||||||
|
// }
|
||||||
|
// &::-webkit-scrollbar-thumb {
|
||||||
|
// background-color: rgb(200, 200, 200);
|
||||||
|
// }
|
||||||
|
// &::-webkit-scrollbar-button:single-button {
|
||||||
|
// background-color: #bbbbbb;
|
||||||
|
// display: block;
|
||||||
|
// border-style: solid;
|
||||||
|
// height: 10px;
|
||||||
|
// width: 16px;
|
||||||
|
// }
|
||||||
|
&__item {
|
||||||
|
padding: 0 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px solid rgb(100, 100, 100);
|
||||||
|
margin: 1px 3px;
|
||||||
|
span {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__owner {
|
||||||
|
width: 20%;
|
||||||
|
height: 75%;
|
||||||
|
border-left: 1px solid rgb(180, 180, 180);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
&__name {
|
||||||
|
position: absolute;
|
||||||
|
top: -20%;
|
||||||
|
right: 3px;
|
||||||
|
font-size: 8px;
|
||||||
|
font-family: "Montserrat", sans-serif;
|
||||||
|
}
|
||||||
|
&__text {
|
||||||
|
font-size: 15px;
|
||||||
|
font-family: "Montserrat", sans-serif;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
&__tags {
|
||||||
|
width: 100%;
|
||||||
|
height: 50%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: start;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
&__item {
|
||||||
|
padding: 0 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px solid rgb(100, 100, 100);
|
||||||
|
margin: 1px 3px;
|
||||||
|
span {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
|
width: 100%;
|
||||||
|
height: 90%;
|
||||||
|
&__wrapper {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 90%;
|
height: 100%;
|
||||||
&__wrapper {
|
background: #fff;
|
||||||
width: 100%;
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
height: 100%;
|
padding: 5px;
|
||||||
border: 1px solid rgb(180, 180, 180);
|
border-radius: 0 0 5px 5px;
|
||||||
padding: 5px;
|
overflow: auto;
|
||||||
// border-radius: 0 0 5px 5px;
|
&::-webkit-scrollbar {
|
||||||
overflow: auto;
|
width: 7px;
|
||||||
&::-webkit-scrollbar {
|
|
||||||
width: 7px;
|
|
||||||
}
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
height: 7px;
|
|
||||||
}
|
|
||||||
&::-webkit-scrollbar-thumb {
|
|
||||||
background-color: rgb(200, 200, 200);
|
|
||||||
}
|
|
||||||
&__article {
|
|
||||||
max-width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
height: 7px;
|
||||||
|
}
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
background-color: rgb(200, 200, 200);
|
||||||
|
}
|
||||||
|
&__article {
|
||||||
|
max-width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// .image {
|
// .image {
|
||||||
|
|||||||
@ -1,103 +1,138 @@
|
|||||||
import React, { useState, useContext, useEffect } from "react";
|
import React, { useState, useContext, useEffect } from "react";
|
||||||
import { useCookies } from "react-cookie";
|
import { useCookies } from "react-cookie";
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from "react-router-dom";
|
||||||
import classes from "../assets/styles/articles.module.scss"
|
import classes from "../assets/styles/articles.module.scss";
|
||||||
import MyButton from "../components/MyButton.jsx";
|
import MyButton from "../components/MyButton.jsx";
|
||||||
import MyInput from "../components/MyInput.jsx";
|
import MyInput from "../components/MyInput.jsx";
|
||||||
import { UserData } from "../context";
|
import { UserData } from "../context";
|
||||||
import CheckModal from "../components/CheckModal.jsx";
|
import CheckModal from "../components/CheckModal.jsx";
|
||||||
import { createArticleApi, getListArticlesApi } from "../hooks/api/articleApi.js";
|
import {
|
||||||
|
createArticleApi,
|
||||||
|
getListArticlesApi,
|
||||||
|
} from "../hooks/api/articleApi.js";
|
||||||
|
|
||||||
const Articles = () => {
|
const Articles = () => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const {user, setUser} = useContext(UserData);
|
const { user, setUser } = useContext(UserData);
|
||||||
const [stateLoading, setStateLoading] = useState(false);
|
const [stateLoading, setStateLoading] = useState(false);
|
||||||
|
|
||||||
const [listArticles, setListArticles] = useState([]);
|
const [listArticles, setListArticles] = useState([]);
|
||||||
|
|
||||||
const [cookies, _, __] = useCookies(["user"]);
|
const [cookies, _, __] = useCookies(["user"]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function getListArticles() {
|
async function getListArticles() {
|
||||||
const response = await getListArticlesApi(cookies.token)
|
const response = await getListArticlesApi(cookies.token);
|
||||||
|
|
||||||
if (response.status === 200) {
|
if (response.status === 200) {
|
||||||
setListArticles(response.data)
|
setListArticles(response.data);
|
||||||
}
|
} else if (response.status === 401) {
|
||||||
else if (
|
// navigate("/enter")
|
||||||
response.status === 401
|
setUser(false);
|
||||||
) {
|
} else {
|
||||||
// navigate("/enter")
|
console.log(response);
|
||||||
setUser(false)
|
}
|
||||||
}
|
|
||||||
else {
|
|
||||||
console.log(response)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
getListArticles()
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
async function createArticle() {
|
|
||||||
const response = await createArticleApi(cookies.token)
|
|
||||||
|
|
||||||
if (response.status === 200) {
|
|
||||||
navigate(`/articles/${response.data.id}/edit`)
|
|
||||||
}
|
|
||||||
else if (
|
|
||||||
response.status === 401
|
|
||||||
) {
|
|
||||||
// navigate("/enter")
|
|
||||||
setUser(false)
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
console.log(response)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
getListArticles();
|
||||||
<div className={classes.main}>
|
}, []);
|
||||||
<div className={classes.wrapper}>
|
|
||||||
<div className={classes.panel}>
|
|
||||||
<MyInput placeholder={'Поиск...'}/>
|
|
||||||
<MyButton click={createArticle} class={"main__green"} otherStyle={{width: '200px'}} text={
|
|
||||||
stateLoading ? <div class="spinner-border text-light" role="status">
|
|
||||||
<span class="visually-hidden">Загрузка...</span>
|
|
||||||
</div> : 'Создать'
|
|
||||||
}/>
|
|
||||||
</div>
|
|
||||||
<div className={classes.listArticles}>
|
|
||||||
<div className={classes.listArticles__columns}>
|
|
||||||
<div className={classes.listArticles__columns__item}>Название</div>
|
|
||||||
<div className={classes.listArticles__columns__item}>Дата публикации</div>
|
|
||||||
<div className={classes.listArticles__columns__item}>Автор</div>
|
|
||||||
</div>
|
|
||||||
<div className={classes.listArticles__forms}>
|
|
||||||
{listArticles.map(item => <div className={classes.listArticles__forms__item}>
|
|
||||||
<div className={classes.listArticles__forms__item__title} onClick={() => navigate(`/articles/${item.id}/edit`)}>{item.title}</div>
|
|
||||||
<div className={classes.listArticles__forms__item__date}>24.06.24</div>
|
|
||||||
<div className={classes.listArticles__forms__item__author}>kuwsh1n</div>
|
|
||||||
<i class="fa-solid fa-ellipsis-vertical" id="action" data-bs-toggle="dropdown"></i>
|
|
||||||
<ul class="dropdown-menu" aria-labelledby="action">
|
|
||||||
<li><a class="dropdown-item" onClick={() => navigate(`/articles/${item.id}/`)}>Открыть</a></li>
|
|
||||||
<li><a class="dropdown-item" data-bs-toggle="modal" data-bs-target={`#checkModaltest`}>Удалить</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<CheckModal
|
async function createArticle() {
|
||||||
postfix={'test'}
|
const response = await createArticleApi(cookies.token);
|
||||||
message={`Вы хотетите удалить статью <Test article>?`}
|
|
||||||
action={{
|
if (response.status === 200) {
|
||||||
execute: () => {},
|
navigate(`/articles/${response.data.id}/edit`);
|
||||||
cancel: () => {}
|
} else if (response.status === 401) {
|
||||||
}}
|
// navigate("/enter")
|
||||||
/>
|
setUser(false);
|
||||||
</div>)}
|
} else {
|
||||||
</div>
|
console.log(response);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={classes.main}>
|
||||||
|
<div className={classes.wrapper}>
|
||||||
|
<div className={classes.panel}>
|
||||||
|
<MyInput placeholder={"Поиск..."} />
|
||||||
|
<MyButton
|
||||||
|
click={createArticle}
|
||||||
|
class={"main__blue"}
|
||||||
|
otherStyle={{ width: "200px" }}
|
||||||
|
text={
|
||||||
|
stateLoading ? (
|
||||||
|
<div class="spinner-border text-light" role="status">
|
||||||
|
<span class="visually-hidden">Загрузка...</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
) : (
|
||||||
|
"Создать"
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
)
|
<div className={classes.listArticles}>
|
||||||
}
|
<div className={classes.listArticles__columns}>
|
||||||
|
<div className={classes.listArticles__columns__item}>Название</div>
|
||||||
|
<div className={classes.listArticles__columns__item}>
|
||||||
|
Дата публикации
|
||||||
|
</div>
|
||||||
|
<div className={classes.listArticles__columns__item}>Автор</div>
|
||||||
|
</div>
|
||||||
|
<div className={classes.listArticles__forms}>
|
||||||
|
{listArticles.map((item) => (
|
||||||
|
<div className={classes.listArticles__forms__item}>
|
||||||
|
<div
|
||||||
|
className={classes.listArticles__forms__item__title}
|
||||||
|
onClick={() => navigate(`/articles/${item.id}/edit`)}
|
||||||
|
>
|
||||||
|
{item.title}
|
||||||
|
</div>
|
||||||
|
<div className={classes.listArticles__forms__item__date}>
|
||||||
|
24.06.24
|
||||||
|
</div>
|
||||||
|
<div className={classes.listArticles__forms__item__author}>
|
||||||
|
kuwsh1n
|
||||||
|
</div>
|
||||||
|
<i
|
||||||
|
class="fa-solid fa-ellipsis-vertical"
|
||||||
|
id="action"
|
||||||
|
data-bs-toggle="dropdown"
|
||||||
|
></i>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="action">
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
class="dropdown-item"
|
||||||
|
onClick={() => navigate(`/articles/${item.id}/`)}
|
||||||
|
>
|
||||||
|
Открыть
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
class="dropdown-item"
|
||||||
|
data-bs-toggle="modal"
|
||||||
|
data-bs-target={`#checkModaltest`}
|
||||||
|
>
|
||||||
|
Удалить
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<CheckModal
|
||||||
|
postfix={"test"}
|
||||||
|
message={`Вы хотетите удалить статью <Test article>?`}
|
||||||
|
action={{
|
||||||
|
execute: () => {},
|
||||||
|
cancel: () => {},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
export default Articles;
|
export default Articles;
|
||||||
Loading…
Reference in New Issue
Block a user