KRBL/MinervaFrontend
9
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

ticket 17
All checks were successful
publish-main / release-image (push) Successful in 7m24s
Details

Browse Source
This commit is contained in:
kuwsh1n 2024-06-25 14:01:13 +03:00
commit 58b6d1387d
18 changed files with 1832 additions and 1559 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

234
src/assets/styles/adminPanel.module.scss
View File

@ -1,131 +1,133 @@
.main { .main {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.wrapper { .wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.admin { .admin {
width: 70%; width: 70%;
height: 70%; height: 70%;
box-shadow: 0 0 5px 1px rgb(200, 200, 200); background: #fff;
padding: 1.5%; border: 1px solid rgba(255, 255, 255, 0.1);
position: relative; border-radius: 16px;
&__linkProfile { padding: 1.5%;
position: absolute; position: relative;
bottom: 103%; &__linkProfile {
left: 10px; position: absolute;
cursor: pointer; bottom: 103%;
span { left: 10px;
font-size: 15px; cursor: pointer;
font-family: "Montserrat", sans-serif; span {
color: rgb(100, 100, 100); font-size: 15px;
&:hover { font-family: "Montserrat", sans-serif;
text-decoration: underline; color: rgb(100, 100, 100);
color: rgb(66, 68, 189); &:hover {
} text-decoration: underline;
} color: rgb(66, 68, 189);
}
} }
&__wrapper { }
&__wrapper {
width: 100%;
height: 100%;
&__header {
width: 100%;
height: 15%;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
h3 {
font-size: 25px;
font-family: "Montserrat", sans-serif;
color: rgb(100, 100, 100);
}
}
&__body {
width: 100%;
height: 85%;
&__columns {
width: 100%; width: 100%;
height: 100%; height: 20%;
&__header { border-bottom: 1px solid rgb(200, 200, 200);
width: 100%; &__wrapper {
height: 15%; display: flex;
justify-content: space-between;
align-items: center;
width: 95%;
height: 100%;
}
&__item {
font-size: 15px;
font-family: "Montserrat", sans-serif;
color: rgb(70, 70, 70);
width: 33.3%;
text-align: center;
}
}
&__users {
width: 100%;
height: 80%;
overflow-y: auto;
&::-webkit-scrollbar {
width: 7px;
}
&::-webkit-scrollbar-thumb {
background-color: rgb(200, 200, 200);
}
&__item {
width: 100%;
height: 20%;
border-bottom: 1px solid rgb(200, 200, 200);
position: relative;
&__wrapper {
width: 95%;
height: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 10px; }
h3 { &__link {
font-size: 25px; font-size: 15px;
font-family: "Montserrat", sans-serif; font-family: "Montserrat", sans-serif;
color: rgb(100, 100, 100); color: rgb(70, 70, 70);
} width: 20%;
} text-align: center;
&__body { cursor: pointer;
width: 100%; &:hover {
height: 85%; text-decoration: underline;
&__columns { color: rgb(66, 68, 189);
width: 100%;
height: 20%;
border-bottom: 1px solid rgb(200, 200, 200);
&__wrapper {
display: flex;
justify-content: space-between;
align-items: center;
width: 95%;
height: 100%;
}
&__item {
font-size: 15px;
font-family: "Montserrat", sans-serif;
color: rgb(70, 70, 70);
width: 33.3%;
text-align: center;
}
}
&__users {
width: 100%;
height: 80%;
overflow-y: auto;
&::-webkit-scrollbar {
width: 7px;
}
&::-webkit-scrollbar-thumb {
background-color: rgb(200, 200, 200);
}
&__item {
width: 100%;
height: 20%;
border-bottom: 1px solid rgb(200, 200, 200);
position: relative;
&__wrapper {
width: 95%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
&__link {
font-size: 15px;
font-family: "Montserrat", sans-serif;
color: rgb(70, 70, 70);
width: 20%;
text-align: center;
cursor: pointer;
&:hover {
text-decoration: underline;
color: rgb(66, 68, 189);
}
}
&__info {
font-size: 15px;
font-family: "Montserrat", sans-serif;
color: rgb(100, 100, 100);
width: 20%;
text-align: center;
}
&__remove {
position: absolute;
right: 2%;
cursor: pointer;
i {
&:hover {
color: rgb(199, 73, 73);
}
}
}
}
}
&__item {
padding: 5px;
} }
}
&__info {
font-size: 15px;
font-family: "Montserrat", sans-serif;
color: rgb(100, 100, 100);
width: 20%;
text-align: center;
}
&__remove {
position: absolute;
right: 2%;
cursor: pointer;
i {
&:hover {
color: rgb(199, 73, 73);
}
}
}
} }
}
&__item {
padding: 5px;
}
} }
} }
}

270
src/assets/styles/answersForm.module.scss
View File

@ -1,158 +1,156 @@
.main { .main {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.wrapper { .wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.loading__wrapper { .loading__wrapper {
width: 100%; width: 100%;
height: 80%; height: 80%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
&__body { &__body {
// margin-top: 100px; // margin-top: 100px;
span { span {
}
} }
}
} }
.answers { .answers {
width: 70%; width: 70%;
height: 70%; height: 70%;
box-shadow: 0 0 5px 1px rgb(200, 200, 200); background: #fff;
padding: 1.5%; border: 1px solid rgba(255, 255, 255, 0.1);
&__linkAdmin { border-radius: 16px;
position: absolute; padding: 1.5%;
bottom: 103%; &__linkAdmin {
left: 10px; position: absolute;
span { bottom: 103%;
font-size: 15px; left: 10px;
font-family: "Montserrat", sans-serif; span {
color: rgb(100, 100, 100); font-size: 15px;
font-family: "Montserrat", sans-serif;
color: rgb(100, 100, 100);
cursor: pointer;
&:hover {
text-decoration: underline;
color: rgb(66, 68, 189);
}
}
}
&__wrapper {
width: 100%;
height: 100%;
&__header {
width: 100%;
height: 15%;
display: flex;
justify-content: start;
align-items: center;
margin-bottom: 10px;
// border-bottom: 1px solid rgb(200, 200, 200);
h3 {
font-size: 25px;
font-family: "Montserrat", sans-serif;
color: rgb(100, 100, 100);
}
}
&__body {
width: 100%;
height: 85%;
overflow-y: auto;
border-bottom: 1px solid rgb(200, 200, 200);
&::-webkit-scrollbar {
width: 7px;
}
&::-webkit-scrollbar-thumb {
background-color: rgb(200, 200, 200);
}
&__column {
font-size: 15px;
font-family: "Montserrat", sans-serif;
padding: 5px;
width: 100%;
border-bottom: 1px solid rgb(200, 200, 200);
&__wrapper {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
width: 95%;
}
}
&__item {
padding: 0 5px;
font-size: 15px;
font-family: "Montserrat", sans-serif;
height: 20%;
width: 100%;
position: relative;
&:hover {
background-color: rgba(230, 230, 230, 0.6);
}
&__wrapper {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
width: 95%;
&__user {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
color: rgb(66, 68, 189);
}
}
}
&__wrapper {
width: 100%;
height: 100%;
&__header {
width: 100%;
height: 15%;
display: flex;
justify-content: start;
align-items: center;
margin-bottom: 10px;
// border-bottom: 1px solid rgb(200, 200, 200);
h3 {
font-size: 25px;
font-family: "Montserrat", sans-serif;
color: rgb(100, 100, 100);
}
}
&__body {
width: 100%;
height: 85%;
overflow-y: auto;
border-bottom: 1px solid rgb(200, 200, 200);
&::-webkit-scrollbar {
width: 7px;
}
&::-webkit-scrollbar-thumb {
background-color: rgb(200, 200, 200);
}
&__column {
font-size: 15px;
font-family: "Montserrat", sans-serif;
padding: 5px;
width: 100%;
border-bottom: 1px solid rgb(200, 200, 200);
&__wrapper {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
width: 95%;
}
}
&__item {
padding: 0 5px;
font-size: 15px;
font-family: "Montserrat", sans-serif;
height: 20%;
width: 100%;
position: relative;
&:hover {
background-color: rgba(230, 230, 230, 0.6);
}
&__wrapper {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
width: 95%;
&__user {
cursor: pointer;
&:hover {
text-decoration: underline;
}
}
&__date {
}
i {
font-size: 13px;
position: absolute;
right: 10px;
cursor: pointer;
&:hover {
color: rgb(199, 73, 73);
}
}
}
} }
}
&__date {
}
i {
font-size: 13px;
position: absolute;
right: 10px;
cursor: pointer;
&:hover {
color: rgb(199, 73, 73);
}
}
} }
}
} }
}
} }
.myModal { .myModal {
&__item { &__item {
padding: 5px; padding: 5px;
border-bottom: 1px solid rgb(200, 200, 200); border-bottom: 1px solid rgb(200, 200, 200);
font-size: 15px;
font-family: "Montserrat", sans-serif;
cursor: pointer;
&__question {
&__text {
font-size: 15px; font-size: 15px;
font-family: "Montserrat", sans-serif; font-family: "Montserrat", sans-serif;
cursor: pointer; }
&__question { &__comment {
&__text { font-size: 11px;
font-size: 15px; font-family: "Montserrat", sans-serif;
font-family: "Montserrat", sans-serif; font-style: italic;
} color: rgb(200, 200, 200);
&__comment { }
font-size: 11px;
font-family: "Montserrat", sans-serif;
font-style: italic;
color: rgb(200, 200, 200);
}
}
&__answer {
&__text {
font-size: 15px;
font-family: "Montserrat", sans-serif;
}
}
} }
} &__answer {
&__text {
font-size: 15px;
font-family: "Montserrat", sans-serif;
}
}
}
}

31
src/assets/styles/app.module.scss
View File

@ -1,24 +1,29 @@
@import url('./base.css'); @import url("./base.css");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
body {
background: #9dccf6 !important;
}
.main { .main {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.container { .container {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.header { .header {
background-color: rgb(240, 240, 240); background-color: #fff;
width: 100%; width: 100%;
height: 10%; height: 50px;
box-shadow: 0 0 5px 1px rgb(210, 210, 210); box-sizing: border-box;
// box-shadow: 0 0 5px 1px rgb(210, 210, 210);
} }
.content { .content {
width: 100%; width: 100%;
height: 90%; height: 90%;
} }

141
src/assets/styles/base.css
View File

@ -1,57 +1,88 @@
* { * {
padding: 0; padding: 0;
margin: 0; margin: 0;
border: 0; } border: 0;
}
*, *:before, *:after {
-moz-box-sizing: border-box; *,
-webkit-box-sizing: border-box; *:before,
box-sizing: border-box; } *:after {
-moz-box-sizing: border-box;
:focus, :active { -webkit-box-sizing: border-box;
outline: none; } box-sizing: border-box;
}
a:focus, a:active {
outline: none; } :focus,
:active {
nav, footer, header, aside { outline: none;
display: block; } }
html, body { a:focus,
height: 100%; a:active {
width: 100%; outline: none;
font-size: 100%; }
line-height: 1;
font-size: 14px; nav,
-ms-text-size-adjust: 100%; footer,
-moz-text-size-adjust: 100%; header,
-webkit-text-size-adjust: 100%; } aside {
display: block;
input, button, textarea { }
font-family: inherit; }
html,
body {
height: 100%;
width: 100%;
font-size: 100%;
line-height: 1;
font-size: 14px;
-ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
input,
button,
textarea {
font-family: inherit;
}
input::-ms-clear { input::-ms-clear {
display: none; } display: none;
}
button {
cursor: pointer; } button {
cursor: pointer;
button::-moz-focus-inner { }
padding: 0;
border: 0; } button::-moz-focus-inner {
padding: 0;
a, a:visited { border: 0;
text-decoration: none; } }
a:hover { a,
text-decoration: none; } a:visited {
text-decoration: none;
ul li { }
list-style: none; }
a:hover {
img { text-decoration: none;
vertical-align: top; } }
h1, h2, h3, h4, h5, h6 { ul li {
font-size: inherit; list-style: none;
font-weight: 400; } }
img {
vertical-align: top;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: 400;
}

47
src/assets/styles/components/myButton.module.scss
View File

@ -1,17 +1,36 @@
.main { .main {
// height: 100%; max-height: 40px;
max-height: 40px; button {
button { font-size: 15px;
font-size: 15px; height: 100%;
height: 100%; padding: 0.4em 1.2rem;
padding: .40em 1.2rem; border-radius: 5px;
border-radius: 5px; font-family: "Montserrat", sans-serif;
font-family: "Montserrat", sans-serif; transition: 0.2s;
&:hover {
filter: brightness(1.1);
} }
&__red { }
color: white; &__red {
background-color: rgb(235, 130, 130); color: white;
background-color: rgb(235, 130, 130);
}
&__green {
color: white;
background-color: rgb(150, 209, 158);
}
&__blue {
color: white;
background-color: #1379c1;
}
&__white {
color: black;
background-color: white;
border: 1px solid rgba(0, 0, 0, 0.2);
&:hover {
border: 1px solid rgba(0, 0, 0, 0.3);
} }
<<<<<<< HEAD
&__green { &__green {
color: white; color: white;
background-color: rgb(150, 209, 158); background-color: rgb(150, 209, 158);
@ -34,4 +53,8 @@
transition: 0.3s; transition: 0.3s;
} }
} }
} }
=======
}
}
>>>>>>> 750b571374c05b915d136af481fe93bf966bac39

26
src/assets/styles/components/myInput.module.scss
View File

@ -1,12 +1,18 @@
.main { .main {
max-height: 40px; max-height: 40px;
input { input {
border: 1px solid rgb(180, 180, 180); border: 1px solid rgba(0, 0, 0, 0.1);
height: 100%; height: 100%;
border-radius: 5px; border-radius: 5px;
font-family: "Montserrat", sans-serif; font-family: "Montserrat", sans-serif;
padding: .40em 3px; box-sizing: border-box;
color: rgb(40, 40, 40); padding: 8px 8px 8px 10px;
font-size: 15px; color: rgb(40, 40, 40);
font-size: 15px;
transition: 0.2s;
&:hover,
&:focus {
border: 1px solid rgba(0, 0, 0, 0.3);
} }
} }
}

104
src/assets/styles/components/navbar.module.scss
View File

@ -1,67 +1,63 @@
.main { .main {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.wrapper { .wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.menu { .menu {
width: 80%; width: 80%;
height: 100%; height: 100%;
&__authorized { &__authorized {
height: 100%;
display: flex;
align-items: center;
span {
margin-left: 2%;
display: block;
font-size: 15px;
color: rgb(80, 80, 80);
cursor: pointer;
&:hover {
color: rgb(66, 68, 189);
text-decoration: underline;
}
}
}
}
.profile {
width: 20%;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; span {
&__authorized { margin-left: 30px;
span { display: block;
font-size: 15px; font-size: 15px;
color: rgb(80, 80, 80); color: rgb(80, 80, 80);
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: rgb(66, 68, 189); text-decoration: underline;
text-decoration: underline; }
}
}
} }
&__nonAuthorized { }
span { }
font-size: 15px;
font-family: "Montserrat", sans-serif;
color: rgb(80, 80, 80);
cursor: pointer;
i {
} .profile {
&:hover { height: 100%;
color: rgb(66, 68, 189); margin-right: 30px;
text-decoration: underline; display: flex;
} align-items: center;
} justify-content: center;
&__authorized {
span {
font-size: 15px;
color: rgb(80, 80, 80);
cursor: pointer;
&:hover {
text-decoration: underline;
}
} }
} }
&__nonAuthorized {
span {
font-size: 15px;
font-family: "Montserrat", sans-serif;
color: rgb(80, 80, 80);
cursor: pointer;
i {
}
&:hover {
text-decoration: underline;
}
}
}
}

222
src/assets/styles/enterAccount.module.scss
View File

@ -1,119 +1,135 @@
.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: 50%; width: 500px;
height: 70%;
} }
.tabs { .tabs {
ul { ul {
li { li {
width: 50%; width: 50%;
cursor: pointer; cursor: pointer;
a { a {
text-align: center; text-align: center;
font-family: "Montserrat", sans-serif; font-family: "Montserrat", sans-serif;
font-size: 12px; font-size: 12px;
} color: #000;
&:hover {
color: #000;
border: 1px solid rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 0.3);
} }
}
} }
}
} }
.content { .content {
width: 100%; width: 500px;
height: 100%; min-height: 320px;
border: 1px solid rgb(220, 220, 220); box-sizing: border-box;
border-top: none; padding: 35px 25px;
&__wrapper { background: #fff;
padding: 2%; border: 1px solid rgba(0, 0, 0, 0.1);
border-top: 0;
border-radius: 0 0 16px 16px;
&__wrapper {
&__login {
display: flex;
flex-direction: column;
gap: 15px;
&__header {
width: 100%; width: 100%;
height: 100%; height: 30%;
&__login { display: flex;
width: 100%; align-items: center;
height: 100%; justify-content: center;
&__header { h3 {
width: 100%; display: block;
height: 30%; font-size: 25px;
display: flex; margin: 0;
align-items: center; font-family: "Montserrat", sans-serif;
justify-content: center; text-align: center;
h3 { color: rgb(100, 100, 100);
display: block;
font-size: 25px;
font-family: "Montserrat", sans-serif;
text-align: center;
color: rgb(100, 100, 100);
}
}
&__body {
width: 100%;
height: 50%;
display: flex;
justify-content: space-around;
flex-direction: column;
position: relative;
&__error {
position: absolute;
font-size: 13px;
font-family: "Montserrat", sans-serif;
top: 0;
left: 10px;
color: rgb(224, 75, 75);
}
}
&__footer {
width: 100%;
height: 20%;
}
} }
&__register { }
width: 100%; &__body {
height: 100%; width: 100%;
&__header { display: flex;
width: 100%; justify-content: space-around;
height: 15%; flex-direction: column;
display: flex; gap: 15px;
align-items: center; position: relative;
justify-content: center; &__error {
h3 { position: absolute;
display: block; font-size: 13px;
font-size: 25px; font-family: "Montserrat", sans-serif;
font-family: "Montserrat", sans-serif; top: 0;
color: rgb(100, 100, 100); left: 10px;
} color: rgb(224, 75, 75);
}
&__body {
width: 100%;
height: 75%;
display: flex;
justify-content: space-around;
flex-direction: column;
padding-bottom: 5px;
position: relative;
&__error {
position: absolute;
font-size: 13px;
font-family: "Montserrat", sans-serif;
top: 0;
left: 10px;
color: rgb(224, 75, 75);
}
&__fio {
height: 15%;
display: flex;
justify-content: space-between;
}
}
&__footer {
width: 100%;
height: 10%;
}
} }
}
&__footer {
div,
button {
width: 100%;
height: 40px;
}
}
} }
} &__register {
display: flex;
flex-direction: column;
gap: 15px;
&__header {
width: 100%;
height: 15%;
display: flex;
align-items: center;
justify-content: center;
h3 {
display: block;
font-size: 25px;
margin: 0;
text-align: center;
font-family: "Montserrat", sans-serif;
color: rgb(100, 100, 100);
}
}
&__body {
width: 100%;
display: flex;
justify-content: space-around;
flex-direction: column;
gap: 15px;
position: relative;
&__error {
position: absolute;
font-size: 13px;
font-family: "Montserrat", sans-serif;
top: 0;
left: 10px;
color: rgb(224, 75, 75);
}
&__fio {
height: 15%;
display: flex;
justify-content: space-between;
}
}
&__footer {
div,
button {
width: 100%;
height: 40px;
}
}
}
}
}

156
src/assets/styles/forms.module.scss
View File

@ -1,92 +1,92 @@
.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;
display: flex; justify-content: space-between;
justify-content: space-between; align-items: end;
align-items: end; margin-bottom: 25px;
padding: 0 5%; gap: 15px;
div:first-child {
flex-grow: 1;
input {
width: 100%;
}
}
} }
.listForms { .listForms {
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%;
width: 100%; min-height: 700px;
&__columns { margin-bottom: 50px;
display: flex; width: 100%;
justify-content: start; &__columns {
align-items: center; display: flex;
padding: 0 2%; justify-content: start;
height: 15%; align-items: center;
width: 100%; padding: 20px 25px;
border-bottom: 1px solid rgb(220, 220, 220); border-bottom: 1px solid rgb(220, 220, 220);
&__item { &__item {
font-size: 15px; font-size: 15px;
font-family: "Montserrat", sans-serif; font-family: "Montserrat", sans-serif;
} font-weight: bold;
} }
&__forms { }
width: 100%; &__forms {
height: 85%; min-height: 100%;
overflow-y: auto; display: inline;
&::-webkit-scrollbar { overflow-y: auto;
width: 7px; &__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;
} }
&::-webkit-scrollbar-thumb { }
background-color: rgb(200, 200, 200); &__answers {
} width: 33.3%;
&__item { text-align: center;
display: flex; }
justify-content: start; &__update {
align-items: center; width: 33.3%;
padding: 0 2%; text-align: center;
height: 25%; }
width: 100%; i {
font-family: "Montserrat", sans-serif; position: absolute;
position: relative; font-size: 15px;
&:hover { right: 30px;
background-color: rgba(240, 240, 240, 0.8); top: calc(50% - 7px);
} cursor: pointer;
&__title { }
// width: 33.3%; ul {
text-align: center; li {
cursor: pointer; 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;
}
}
} }
}
} }
} }
}

125
src/assets/styles/home.module.scss
View File

@ -1,68 +1,83 @@
.main { .main {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.wrapper { .wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.header { .header {
width: 60%; text-align: center;
height: 30%; &__top {
text-align: center; font-size: 24px;
&__top { font-family: "Montserrat", sans-serif;
font-size: 30px; font-weight: bold;
font-family: "Montserrat", sans-serif; color: #000;
color: rgb(100, 100, 100); }
} &__bottom {
&__bottom { margin-top: 25px;
font-size: 30px; font-size: 24px;
font-family: "Montserrat", sans-serif; font-family: "Montserrat", sans-serif;
color: rgb(100, 100, 100); font-weight: bold;
} color: #000;
}
} }
.content { .content {
width: 60%; width: 500px;
height: 50%; margin-top: 50px;
box-shadow: 0 0 5px 1px rgb(180, 180, 180); box-sizing: border-box;
padding: 1% 0; padding: 35px 25px;
&__title { background: #fff;
height: 30%; border: 1px solid rgba(255, 255, 255, 0.1);
display: flex; border-radius: 16px;
justify-content: center; display: flex;
align-items: center; flex-direction: column;
&__wrapper { gap: 25px;
h3 { &__title {
font-size: 35px; display: flex;
font-family: "Montserrat", sans-serif; justify-content: center;
color: rgb(100, 100, 100); align-items: center;
} &__wrapper {
} h3 {
font-size: 24px;
font-family: "Montserrat", sans-serif;
color: #000;
font-weight: normal;
margin: 0;
}
} }
&__token { }
height: 50%; &__token {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
&__wrapper { &__wrapper {
height: 35%; height: 40px;
width: 80%; width: 100%;
} input {
height: 40px;
}
input::placeholder {
color: rgba(0, 0, 0, 0.25);
}
} }
&__search { }
height: 20%; &__search {
display: flex; height: 40px;
justify-content: center; display: flex;
align-items: center; justify-content: center;
&__wrapper { align-items: center;
height: 70%; div,
} button {
width: 100%;
height: 40px;
} }
} }
}

315
src/assets/styles/newForm.module.scss
View File

@ -1,174 +1,171 @@
.main { .main {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 4% 8%; padding: 4% 8%;
} }
.wrapper { .wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.header { .header {
display: flex;
justify-content: space-between;
width: 100%;
margin-bottom: 25px;
&__listInput {
display: flex; display: flex;
justify-content: space-between; align-items: center;
width: 100%; gap: 15px;
height: 8%; &__date {
&__listInput { width: 100%;
width: 40%; display: flex;
height: 100%; justify-content: space-between;
display: flex; position: relative;
justify-content: space-between; span {
align-items: center; position: absolute;
&__date { font-size: 15px;
width: 100%; font-family: "Montserrat", sans-serif;
height: 100%; top: -25px;
display: flex; left: 0;
justify-content: space-between; }
position: relative;
span {
position: absolute;
font-size: 8px;
font-family: "Montserrat", sans-serif;
top: -40%;
left: 2%;
}
}
&__title {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
position: relative;
span {
position: absolute;
font-size: 8px;
font-family: "Montserrat", sans-serif;
top: -40%;
left: 2%;
}
}
} }
&__listBtn { &__title {
display: flex; width: 100%;
justify-content: space-between; display: flex;
justify-content: space-between;
width: 30%; position: relative;
} span {
position: absolute;
font-size: 15px;
font-family: "Montserrat", sans-serif;
top: -25px;
left: 0;
}
}
}
&__listBtn {
display: flex;
gap: 15px;
}
} }
.content { .content {
margin-top: 3%; width: 100%;
height: 85%; height: calc(90% - 100px);
width: 100%; background: #fff;
display: flex; border: 1px solid rgba(255, 255, 255, 0.1);
justify-content: space-between; border-radius: 16px;
&__listQuestion { display: flex;
height: 100%; justify-content: space-between;
width: 25%; margin-bottom: 50px;
&__list { &__listQuestion {
height: 100%; height: 100%;
width: 100%; width: 25%;
&__item { &__list {
height: 12.5%; height: 100%;
width: 100%; width: 100%;
display: flex; &__item {
align-items: center; padding: 15px 10px;
padding: 0 5px; width: 100%;
cursor: pointer; display: flex;
align-items: center;
cursor: pointer;
&:first-child {
border-radius: 16px 0 0 0;
}
&:hover {
background-color: rgba(230, 230, 230, 0.6);
}
span {
display: block;
font-size: 15px;
font-family: "Montserrat", sans-serif;
}
}
&__item:not(:last-child) {
border-bottom: 1px solid rgb(220, 220, 220);
}
}
}
&__newForm {
box-shadow: 0 0 5px 1px rgb(220, 220, 220);
min-height: 100%;
width: 75%;
&__title {
padding: 1%;
width: 100%;
height: 10%;
h3 {
font-size: 20px;
font-family: "Montserrat", sans-serif;
color: rgb(80, 80, 80);
}
}
&:hover { &__list {
background-color: rgba(230, 230, 230, 0.6); overflow-y: auto;
} overflow-x: hidden;
span { width: 100%;
display: block; height: 90%;
font-size: 15px; &::-webkit-scrollbar {
font-family: "Montserrat", sans-serif; width: 7px;
} }
} &::-webkit-scrollbar-thumb {
&__item:not(:last-child) { background-color: rgb(200, 200, 200);
border-bottom: 1px solid rgb(220, 220, 220); }
} &__item {
padding: 1%;
width: 100%;
border-bottom: 1px solid rgb(220, 220, 220);
display: flex;
justify-content: space-between;
align-items: center;
&:hover {
background-color: rgba(230, 230, 230, 0.6);
cursor: pointer;
} }
&__answer {
width: 90%;
overflow-x: auto;
&::-webkit-scrollbar {
height: 7px;
border: 1px solid rgb(200, 200, 200);
}
&::-webkit-scrollbar-thumb {
background-color: rgb(200, 200, 200);
}
span {
display: block;
}
span:first-child {
font-size: 15px;
font-family: "Montserrat", sans-serif;
color: rgb(80, 80, 80);
}
span:last-child {
font-size: 12px;
font-family: "Montserrat", sans-serif;
color: rgb(180, 180, 180);
}
}
&__btn {
width: 10%;
display: flex;
justify-content: space-around;
align-items: center;
i {
display: block;
}
i:first-child:hover {
color: rgb(42, 64, 187);
}
i:last-child:hover {
color: rgb(199, 73, 73);
}
}
}
} }
&__newForm { }
box-shadow: 0 0 5px 1px rgb(220, 220, 220); }
height: 100%;
width: 75%;
&__title {
padding: 1%;
width: 100%;
height: 10%;
h3 {
font-size: 20px;
font-family: "Montserrat", sans-serif;
color: rgb(80, 80, 80);
}
}
&__list {
overflow-y: auto;
overflow-x: hidden;
width: 100%;
height: 90%;
&::-webkit-scrollbar {
width: 7px;
}
&::-webkit-scrollbar-thumb {
background-color: rgb(200, 200, 200);
}
&__item {
padding: 1%;
width: 100%;
min-height: 25%;
border-bottom: 1px solid rgb(220, 220, 220);
display: flex;
justify-content: space-between;
align-items: center;
&:hover {
background-color: rgba(230, 230, 230, 0.6);
cursor: pointer;
}
&__answer {
width: 90%;
overflow-x: auto;
&::-webkit-scrollbar {
height: 7px;
border: 1px solid rgb(200, 200, 200);
}
&::-webkit-scrollbar-thumb {
background-color: rgb(200, 200, 200);
}
span {
display: block;
}
span:first-child {
font-size: 15px;
font-family: "Montserrat", sans-serif;
color: rgb(80, 80, 80);
}
span:last-child {
font-size: 12px;
font-family: "Montserrat", sans-serif;
color: rgb(180, 180, 180);
}
}
&__btn {
width: 10%;
display: flex;
justify-content: space-around;
align-items: center;
i {
display: block;
}
i:first-child:hover {
color: rgb(42, 64, 187);
}
i:last-child:hover {
color: rgb(199, 73, 73);
}
}
}
}
}
}

111
src/assets/styles/profile.module.scss
View File

@ -1,64 +1,65 @@
.main { .main {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.wrapper { .wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.profile { .profile {
width: 70%; width: 70%;
height: 70%; height: 70%;
box-shadow: 0 0 5px 1px rgb(200, 200, 200); background: #fff;
padding: 1.5%; border: 1px solid rgba(0, 0, 0, 0.1);
position: relative; border-radius: 16px;
&__linkAdmin { padding: 1.5%;
position: absolute; position: relative;
bottom: 103%; &__linkAdmin {
left: 10px; position: absolute;
span { bottom: 103%;
font-size: 15px; left: 10px;
font-family: "Montserrat", sans-serif; span {
color: rgb(100, 100, 100); font-size: 15px;
cursor: pointer; font-family: "Montserrat", sans-serif;
&:hover { color: rgb(100, 100, 100);
text-decoration: underline; cursor: pointer;
color: rgb(66, 68, 189); &:hover {
} text-decoration: underline;
} color: rgb(66, 68, 189);
}
} }
&__wrapper { }
&__header { &__wrapper {
width: 100%; &__header {
height: 15%; width: 100%;
display: flex; height: 15%;
justify-content: space-between; display: flex;
align-items: center; justify-content: space-between;
margin-bottom: 10px; align-items: center;
&__btn { margin-bottom: 10px;
height: 100%; &__btn {
width: 35%; height: 100%;
display: flex; display: flex;
justify-content: space-between; align-items: center;
align-items: center; gap: 15px;
} }
h3 { h3 {
font-size: 25px; font-size: 25px;
font-family: "Montserrat", sans-serif; font-family: "Montserrat", sans-serif;
color: rgb(100, 100, 100); color: rgb(100, 100, 100);
} }
}
&__body {
width: 100%;
height: 85%;
&__item {
padding: 5px;
}
}
} }
} &__body {
width: 100%;
height: 85%;
&__item {
padding: 5px;
}
}
}
}

298
src/assets/styles/tokensForm.module.scss
View File

@ -1,172 +1,170 @@
.main { .main {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.wrapper { .wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.loading__wrapper { .loading__wrapper {
width: 100%; width: 100%;
height: 80%; height: 80%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
&__body { &__body {
// margin-top: 100px; // margin-top: 100px;
span { span {
}
} }
}
} }
.answers { .answers {
width: 70%; width: 70%;
height: 70%; height: 70%;
box-shadow: 0 0 5px 1px rgb(200, 200, 200); background: #fff;
padding: 1.5%; border: 1px solid rgba(255, 255, 255, 0.1);
&__linkAdmin { border-radius: 16px;
position: absolute; padding: 1.5%;
bottom: 103%; &__linkAdmin {
left: 10px; position: absolute;
span { bottom: 103%;
font-size: 15px; left: 10px;
font-family: "Montserrat", sans-serif; span {
color: rgb(100, 100, 100); font-size: 15px;
font-family: "Montserrat", sans-serif;
color: rgb(100, 100, 100);
cursor: pointer;
&:hover {
text-decoration: underline;
color: rgb(66, 68, 189);
}
}
}
&__wrapper {
width: 100%;
height: 100%;
&__header {
width: 100%;
height: 15%;
display: flex;
justify-content: start;
align-items: center;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
h3 {
font-size: 25px;
font-family: "Montserrat", sans-serif;
color: rgb(100, 100, 100);
display: block;
}
}
&__body {
width: 100%;
height: 85%;
overflow-y: auto;
border-bottom: 1px solid rgb(200, 200, 200);
&::-webkit-scrollbar {
width: 7px;
}
&::-webkit-scrollbar-thumb {
background-color: rgb(200, 200, 200);
}
&__column {
font-size: 15px;
width: 100%;
font-family: "Montserrat", sans-serif;
padding: 5px 30px 5px 5px;
border-bottom: 1px solid rgb(200, 200, 200);
&__wrapper {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
}
}
&__item {
padding: 0 30px 0 5px;
// border-bottom: 1px solid rgb(200, 200, 200);
font-size: 15px;
font-family: "Montserrat", sans-serif;
height: 20%;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
&:hover {
background-color: rgba(230, 230, 230, 0.6);
}
&__wrapper {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
height: 100%;
&__title {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
color: rgb(66, 68, 189);
}
}
}
&__wrapper {
width: 100%;
height: 100%;
&__header {
width: 100%;
height: 15%;
display: flex;
justify-content: start;
align-items: center;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
h3 {
font-size: 25px;
font-family: "Montserrat", sans-serif;
color: rgb(100, 100, 100);
display: block;
}
}
&__body {
width: 100%;
height: 85%;
overflow-y: auto;
border-bottom: 1px solid rgb(200, 200, 200);
&::-webkit-scrollbar {
width: 7px;
}
&::-webkit-scrollbar-thumb {
background-color: rgb(200, 200, 200);
}
&__column {
font-size: 15px;
width: 100%;
font-family: "Montserrat", sans-serif;
padding: 5px 30px 5px 5px;
border-bottom: 1px solid rgb(200, 200, 200);
&__wrapper {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
}
}
&__item {
padding: 0 30px 0 5px;
// border-bottom: 1px solid rgb(200, 200, 200);
font-size: 15px;
font-family: "Montserrat", sans-serif;
height: 20%;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
&:hover {
background-color: rgba(230, 230, 230, 0.6);
}
&__wrapper {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
height: 100%;
&__title {
cursor: pointer;
&:hover {
text-decoration: underline;
}
}
&__token {
}
}
&__btn {
width: 10%;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0 5px;
font-size: 13px;
i {
display: block;
cursor: pointer;
}
i:first-child:hover {
color: rgb(42, 64, 187);
}
i:last-child:hover {
color: rgb(199, 73, 73);
}
}
} }
}
&__token {
}
} }
&__btn {
width: 10%;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0 5px;
font-size: 13px;
i {
display: block;
cursor: pointer;
}
i:first-child:hover {
color: rgb(42, 64, 187);
}
i:last-child:hover {
color: rgb(199, 73, 73);
}
}
}
} }
}
} }
.myModal { .myModal {
&__item { &__item {
padding: 5px; padding: 5px;
border-bottom: 1px solid rgb(200, 200, 200); border-bottom: 1px solid rgb(200, 200, 200);
font-size: 15px;
font-family: "Montserrat", sans-serif;
cursor: pointer;
&__question {
&__text {
font-size: 15px; font-size: 15px;
font-family: "Montserrat", sans-serif; font-family: "Montserrat", sans-serif;
cursor: pointer; }
&__question { &__comment {
&__text { font-size: 11px;
font-size: 15px; font-family: "Montserrat", sans-serif;
font-family: "Montserrat", sans-serif; font-style: italic;
} color: rgb(200, 200, 200);
&__comment { }
font-size: 11px;
font-family: "Montserrat", sans-serif;
font-style: italic;
color: rgb(200, 200, 200);
}
}
&__answer {
&__text {
font-size: 15px;
font-family: "Montserrat", sans-serif;
}
}
} }
} &__answer {
&__text {
font-size: 15px;
font-family: "Montserrat", sans-serif;
}
}
}
}

123
src/assets/styles/viewForm.module.scss
View File

@ -1,74 +1,77 @@
.main { .main {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.wrapper { .wrapper {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.form {
overflow-y: auto;
width: 70%;
height: 80%;
background: #fff;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px 16px 0 0;
&::-webkit-scrollbar {
width: 7px;
border-left: 1px solid rgb(200, 200, 200);
}
&::-webkit-scrollbar-thumb {
background-color: rgb(200, 200, 200);
}
&__header {
border-bottom: 1px solid rgb(220, 220, 220);
width: 100%;
height: 10%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
&__title {
font-size: 17px;
font-weight: bold;
font-family: "Montserrat", sans-serif;
color: rgb(100, 100, 100);
}
&__id {
}
}
&__content {
width: 100%;
height: 80%;
}
&__unexists {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; span {
} display: block;
font-size: 18px;
.form { font-family: "Montserrat", sans-serif;
overflow-y: auto; font-style: italic;
width: 70%; color: rgb(200, 200, 200);
height: 80%;
border: 2px solid rgb(220, 220, 220);
&::-webkit-scrollbar {
width: 7px;
border-left: 1px solid rgb(200, 200, 200);
}
&::-webkit-scrollbar-thumb {
background-color: rgb(200, 200, 200);
}
&__header {
border-bottom: 1px solid rgb(220, 220, 220);
width: 100%;
height: 10%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
&__title {
font-size: 17px;
font-weight: bold;
font-family: "Montserrat", sans-serif;
color: rgb(100, 100, 100);
}
&__id {
}
}
&__content {
width: 100%;
height: 80%;
}
&__unexists {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
span {
display: block;
font-size: 18px;
font-family: "Montserrat", sans-serif;
font-style: italic;
color: rgb(200, 200, 200);
}
} }
}
} }
.footer { .footer {
width: 70%; background: #fff;
height: 10%; border: 1px solid rgba(255, 255, 255, 0.1);
display: flex; border-radius: 0 0 16px 16px;
justify-content: space-between; width: 70%;
align-items: center; height: 10%;
padding: 8px 20px; display: flex;
border: 2px solid rgb(220, 220, 220); justify-content: space-between;
border-top: none; align-items: center;
padding: 8px 20px;
border-top: none;
} }

234
src/pages/EnterAccount.jsx
View File

@ -23,11 +23,11 @@ const EnterAccount = () => {
const [password, setPassword] = useState(""); const [password, setPassword] = useState("");
const [repiedPassword, setRepiedPassword] = useState(""); const [repiedPassword, setRepiedPassword] = useState("");
const {user, setUser} = useContext(UserData); const { user, setUser } = useContext(UserData);
const [cookies, setCookie, removeCookie] = useCookies(["user"]); const [cookies, setCookie, removeCookie] = useCookies(["user"]);
const [loginError, setLoginError] = useState(false); const [loginError, setLoginError] = useState(false);
const [regsterError, setRegsterError] = useState(false); const [regsterError, setRegsterError] = useState(false);
function cleanState() { function cleanState() {
setEmail(""); setEmail("");
@ -51,82 +51,145 @@ const EnterAccount = () => {
repiedPassword: repiedPassword, repiedPassword: repiedPassword,
}); });
if (response.status === 200) { if (response.status === 200) {
const responseMe = await verifyUserApi(response.data.token) const responseMe = await verifyUserApi(response.data.token);
setUser(responseMe.data); setUser(responseMe.data);
setCookie("token", response.data.token); setCookie("token", response.data.token);
cleanState(); cleanState();
navigate("/"); navigate("/");
} } else {
else { setRegsterError(response);
setRegsterError(response) }
} }
};
async function logInToAccount() { async function logInToAccount() {
const response = await logIn(login, password); const response = await logIn(login, password);
if (response.status === 200) { if (response.status === 200) {
setCookie("token", response.data.token); setCookie("token", response.data.token);
const responseMe = await verifyUserApi(response.data.token) const responseMe = await verifyUserApi(response.data.token);
setUser(responseMe.data) setUser(responseMe.data);
cleanState(); cleanState();
navigate("/") navigate("/");
} } else {
else { setLoginError(true);
setLoginError(true);
}
} }
}
return ( return (
<div className={classes.main}> <div className={classes.main}>
<div className={classes.wrapper}> <div className={classes.wrapper}>
<div className={classes.tabs}> <div className={classes.tabs}>
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li class="nav-item" onClick={() => selectTag("login")}> <li class="nav-item" onClick={() => selectTag("login")}>
<a className={enter === "login" ? "nav-link active" : "nav-link"} aria-current="page">Авторизация</a> <a
</li> className={enter === "login" ? "nav-link active" : "nav-link"}
<li class="nav-item" onClick={() => selectTag("register")}> aria-current="page"
<a className={enter === "register" ? "nav-link active" : "nav-link"}>Регитрация</a> >
</li> Авторизация
</ul> </a>
</li>
<li class="nav-item" onClick={() => selectTag("register")}>
<a
className={
enter === "register" ? "nav-link active" : "nav-link"
}
>
Регитрация
</a>
</li>
</ul>
</div>
<div className={classes.content}>
<div className={classes.content__wrapper}>
{enter === "login" ? (
<div className={classes.content__wrapper__login}>
<div className={classes.content__wrapper__login__header}>
<h3>Войти в аккаунт</h3>
</div> </div>
<div className={classes.content}> <div className={classes.content__wrapper__login__body}>
<div className={classes.content__wrapper}> {loginError ? (
{enter === 'login' ? <div className={classes.content__wrapper__login}> <span
<div className={classes.content__wrapper__login__header}> className={classes.content__wrapper__login__body__error}
<h3>Войти в аккаунт</h3> >
</div> Ошибка. Проверте корректность ввода логина и пароля.
<div className={classes.content__wrapper__login__body}> </span>
{loginError ? <span className={classes.content__wrapper__login__body__error}> ) : (
Ошибка. Проверте корректность ввода логина и пароля. <span
</span> : <span className={classes.content__wrapper__login__body__error}></span>} className={classes.content__wrapper__login__body__error}
<MyInput placeholder={"Логин"} otherMainStyle={{width: "100%", height: "20%"}} otherInputStyle={{width: "100%"}} value={login} change={setLogin}/> ></span>
<MyInput type={"password"} placeholder={"Пароль"} otherMainStyle={{width: "100%", height: "20%"}} otherInputStyle={{width: "100%"}} value={password} change={setPassword}/> )}
</div> <MyInput
<div className={classes.content__wrapper__login__footer}> placeholder={"Логин"}
<MyButton otherMainStyle={{ width: "100%", height: "20%" }}
text={"Войти"} otherInputStyle={{ width: "100%" }}
class={"main__green"} value={login}
otherStyle={{height: "50%", width: "20%"}} change={setLogin}
click={logInToAccount} />
/> <MyInput
</div> type={"password"}
</div> : placeholder={"Пароль"}
<div className={classes.content__wrapper__register}> otherMainStyle={{ width: "100%", height: "20%" }}
<div className={classes.content__wrapper__register__header}> otherInputStyle={{ width: "100%" }}
<h3>Зарегистрировать учетную запись</h3> value={password}
</div> change={setPassword}
<div className={classes.content__wrapper__register__body}> />
{regsterError ? <span className={classes.content__wrapper__register__body__error}> </div>
{regsterError} <div className={classes.content__wrapper__login__footer}>
</span> : <span className={classes.content__wrapper__register__body__error}></span>} <MyButton
<MyInput placeholder={"Логин"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={login} change={setLogin}/> text={"Войти"}
<MyInput type={"password"} placeholder={"Пароль"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={password} change={setPassword}/> class={"main__blue"}
<MyInput type={'password'} placeholder={"Повторите пароль"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={repiedPassword} change={setRepiedPassword}/> click={logInToAccount}
</div> />
{/* <div className={classes.content__wrapper__register__body}> </div>
</div>
) : (
<div className={classes.content__wrapper__register}>
<div className={classes.content__wrapper__register__header}>
<h3>Создать аккаунт</h3>
</div>
<div className={classes.content__wrapper__register__body}>
{regsterError ? (
<span
className={
classes.content__wrapper__register__body__error
}
>
{regsterError}
</span>
) : (
<span
className={
classes.content__wrapper__register__body__error
}
></span>
)}
<MyInput
placeholder={"Логин"}
otherMainStyle={{ width: "100%", height: "15%" }}
otherInputStyle={{ width: "100%" }}
value={login}
change={setLogin}
/>
<MyInput
type={"password"}
placeholder={"Пароль"}
otherMainStyle={{ width: "100%", height: "15%" }}
otherInputStyle={{ width: "100%" }}
value={password}
change={setPassword}
/>
<MyInput
type={"password"}
placeholder={"Повторите пароль"}
otherMainStyle={{ width: "100%", height: "15%" }}
otherInputStyle={{ width: "100%" }}
value={repiedPassword}
change={setRepiedPassword}
/>
</div>
{/* <div className={classes.content__wrapper__register__body}>
<MyInput placeholder={"Email"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={email} change={setEmail}/> <MyInput placeholder={"Email"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={email} change={setEmail}/>
<MyInput placeholder={"Номер телефона"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={phone} change={setPhone}/> <MyInput placeholder={"Номер телефона"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={phone} change={setPhone}/>
<div className={classes.content__wrapper__register__body__fio}> <div className={classes.content__wrapper__register__body__fio}>
@ -137,21 +200,20 @@ const EnterAccount = () => {
<MyInput type={'password'} placeholder={"Пароль"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={password} change={setPassword}/> <MyInput type={'password'} placeholder={"Пароль"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={password} change={setPassword}/>
<MyInput type={'password'} placeholder={"Повторите пароль"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={repiedPassword} change={setRepiedPassword}/> <MyInput type={'password'} placeholder={"Повторите пароль"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={repiedPassword} change={setRepiedPassword}/>
</div> */} </div> */}
<div className={classes.content__wrapper__register__footer}> <div className={classes.content__wrapper__register__footer}>
<MyButton <MyButton
text={"Создать"} text={"Создать"}
class={"main__green"} class={"main__blue"}
otherStyle={{ height: "100%", width: "20%" }} click={() => createUser()}
click={() => createUser()} />
/>
</div>
</div>
}
</div>
</div> </div>
</div> </div>
)}
</div>
</div> </div>
); </div>
}; </div>
);
};
export default EnterAccount; export default EnterAccount;

289
src/pages/Forms.jsx
View File

@ -1,140 +1,201 @@
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/forms.module.scss" import classes from "../assets/styles/forms.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 { FormsData, UserData } from "../context"; import { FormsData, UserData } from "../context";
import CheckModal from "../components/CheckModal.jsx"; import CheckModal from "../components/CheckModal.jsx";
import { listFormsApi, createFormApi, removeFormApi, newFormTokenApi, listFormsByTokenApi } from "../hooks/api/listFormsApi.js"; import {
listFormsApi,
createFormApi,
removeFormApi,
newFormTokenApi,
listFormsByTokenApi,
} from "../hooks/api/listFormsApi.js";
const Forms = () => { const Forms = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const {forms, setForms} = useContext(FormsData); const { forms, setForms } = useContext(FormsData);
const {user, setUser} = useContext(UserData); const { user, setUser } = useContext(UserData);
const [stateLoading, setStateLoading] = useState(false); const [stateLoading, setStateLoading] = useState(false);
const [searchForm, setSearchForm] = useState(""); const [searchForm, setSearchForm] = useState("");
const [cookies, _, __] = useCookies(["user"]); const [cookies, _, __] = useCookies(["user"]);
useEffect(() => { useEffect(() => {
async function listForms() { async function listForms() {
const response = await listFormsApi(cookies.token); const response = await listFormsApi(cookies.token);
if (response.data) { if (response.data) {
setForms(response.data); setForms(response.data);
} } else if (response.status === 200 && response.data) {
else if (response.status === 200 && response.data) { setForms([]);
setForms([]); } else {
} console.log(response);
else { }
console.log(response) }
}
};
listForms(); listForms();
}, []); }, []);
async function createForm() { async function createForm() {
setStateLoading(true); setStateLoading(true);
const response = await createFormApi(cookies.token); const response = await createFormApi(cookies.token);
setStateLoading(false); setStateLoading(false);
if (response.data) { if (response.data) {
const token = await newFormTokenApi(cookies.token, response.data.id) const token = await newFormTokenApi(cookies.token, response.data.id);
navigate(`/forms/${response.data.id}/edit`) navigate(`/forms/${response.data.id}/edit`);
} } else {
else { console.log(response);
console.log(response) }
} }
};
function editForm(item) { function editForm(item) {
navigate(`/forms/${item.id}/edit`); navigate(`/forms/${item.id}/edit`);
}; }
async function removeForm(id) { async function removeForm(id) {
const response = await removeFormApi(cookies.token, id) const response = await removeFormApi(cookies.token, id);
if (response.status === 200) { if (response.status === 200) {
setForms([...forms.filter(item => item.id !== id)]); setForms([...forms.filter((item) => item.id !== id)]);
} } else {
else { console.log(response);
console.log(response); }
} }
};
async function openFormView(formId) { async function openFormView(formId) {
const response = await listFormsByTokenApi(cookies.token, formId); const response = await listFormsByTokenApi(cookies.token, formId);
if (response.status === 200 && response.data.tokens) { if (response.status === 200 && response.data.tokens) {
navigate(`/forms/${response.data.tokens[0].id}/`); navigate(`/forms/${response.data.tokens[0].id}/`);
} } else {
else { console.log(response);
console.log(response) }
} }
};
async function copyLinkToFormView(formId) { async function copyLinkToFormView(formId) {
const response = await listFormsByTokenApi(cookies.token, formId); const response = await listFormsByTokenApi(cookies.token, formId);
if (response.status === 200 && response.data.tokens) { if (response.status === 200 && response.data.tokens) {
navigator.clipboard.writeText(`${window.location.host}/forms/${response.data.tokens[0].id}/`) navigator.clipboard.writeText(
} `${window.location.host}/forms/${response.data.tokens[0].id}/`
else { );
console.log(response) } else {
} console.log(response);
}; }
}
const filterFormsBySearch = () => [...forms].filter(item => item.title.toLowerCase().includes(searchForm)); const filterFormsBySearch = () =>
[...forms].filter((item) => item.title.toLowerCase().includes(searchForm));
return ( return (
<div className={classes.main}> <div className={classes.main}>
<div className={classes.wrapper}> <div className={classes.wrapper}>
<div className={classes.panel}> <div className={classes.panel}>
<MyInput placeholder={'Поиск...'} value={searchForm} change={setSearchForm}/> <MyInput
<MyButton click={createForm} class={"main__green"} otherStyle={{width: '200px'}} text={ placeholder={"Поиск..."}
stateLoading ? <div class="spinner-border text-light" role="status"> value={searchForm}
<span class="visually-hidden">Загрузка...</span> change={setSearchForm}
</div> : 'Создать' />
}/> <MyButton
click={createForm}
class={"main__blue"}
otherStyle={{ width: "200px" }}
text={
stateLoading ? (
<div class="spinner-border text-light" role="status">
<span class="visually-hidden">Загрузка...</span>
</div> </div>
<div className={classes.listForms}> ) : (
<div className={classes.listForms__columns}> "Создать"
<div className={classes.listForms__columns__item}>Название</div> )
{/* <div className={classes.listForms__columns__item}>Ответы</div> }
<div className={classes.listForms__columns__item}>Изменения</div> */} />
</div>
<div className={classes.listForms__forms}>
{filterFormsBySearch().map((item, i) =>
<div className={classes.listForms__forms__item} key={i}>
<div className={classes.listForms__forms__item__title} onClick={() => editForm(item)}>{item.title}</div>
{/* <div className={classes.listForms__forms__item__answers}>{item.datetime}</div>
<div className={classes.listForms__forms__item__update}>{item.update}</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={() => openFormView(item.id)}>Открыть</a></li>
<li><a class="dropdown-item" onClick={() => navigate(`/forms/${item.id}/answers`)}>Ответы</a></li>
<li><a class="dropdown-item" onClick={() => navigate(`/tokens/${item.id}`)}>Список токенов</a></li>
<li><a class="dropdown-item" onClick={() => copyLinkToFormView(item.id)}>Скопировать ссылку</a></li>
<li><a class="dropdown-item" data-bs-toggle="modal" data-bs-target={`#checkModal${item.id}`}>Удалить</a></li>
</ul>
<CheckModal
postfix={item.id}
message={`Вы хотетите удалить форму <${item.title}>?`}
action={{
execute: () => removeForm(item.id),
cancel: () => {}
}}
/>
</div>
)}
</div>
</div>
</div>
</div> </div>
) <div className={classes.listForms}>
} <div className={classes.listForms__columns}>
<div className={classes.listForms__columns__item}>Название</div>
{/* <div className={classes.listForms__columns__item}>Ответы</div>
<div className={classes.listForms__columns__item}>Изменения</div> */}
</div>
<div className={classes.listForms__forms}>
{filterFormsBySearch().map((item, i) => (
<div className={classes.listForms__forms__item} key={i}>
<div
className={classes.listForms__forms__item__title}
onClick={() => editForm(item)}
>
{item.title}
</div>
{/* <div className={classes.listForms__forms__item__answers}>{item.datetime}</div>
<div className={classes.listForms__forms__item__update}>{item.update}</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={() => openFormView(item.id)}
>
Открыть
</a>
</li>
<li>
<a
class="dropdown-item"
onClick={() => navigate(`/forms/${item.id}/answers`)}
>
Ответы
</a>
</li>
<li>
<a
class="dropdown-item"
onClick={() => navigate(`/tokens/${item.id}`)}
>
Список токенов
</a>
</li>
<li>
<a
class="dropdown-item"
onClick={() => copyLinkToFormView(item.id)}
>
Скопировать ссылку
</a>
</li>
<li>
<a
class="dropdown-item"
data-bs-toggle="modal"
data-bs-target={`#checkModal${item.id}`}
>
Удалить
</a>
</li>
</ul>
export default Forms; <CheckModal
postfix={item.id}
message={`Вы хотите удалить форму <${item.title}>?`}
action={{
execute: () => removeForm(item.id),
cancel: () => {},
}}
/>
</div>
))}
</div>
</div>
</div>
</div>
);
};
export default Forms;

6
src/pages/Home.jsx
View File

@ -16,8 +16,8 @@ const Home = () => {
Кажется вы попали на общую страницу. Кажется вы попали на общую страницу.
</div> </div>
<div className={classes.header__bottom}> <div className={classes.header__bottom}>
Чтобы перейти к форме введите токен ниже или снова перейдите по Чтобы перейти к форме введите токен ниже <br /> или снова перейдите
ссылке. по ссылке.
</div> </div>
</div> </div>
<div className={classes.content}> <div className={classes.content}>
@ -41,7 +41,7 @@ const Home = () => {
<div className={classes.content__search__wrapper}> <div className={classes.content__search__wrapper}>
<MyButton <MyButton
text={"Найти форму"} text={"Найти форму"}
class={"main__green"} class={"main__blue"}
click={() => navigate(`/forms/${token}`)} click={() => navigate(`/forms/${token}`)}
/> />
</div> </div>

659
src/pages/NewForm.jsx
View File

@ -1,5 +1,5 @@
import React, { useState, useContext, useEffect } from "react"; import React, { useState, useContext, useEffect } from "react";
import { useNavigate, useLocation, useParams } from 'react-router-dom'; import { useNavigate, useLocation, useParams } from "react-router-dom";
import { useCookies } from "react-cookie"; import { useCookies } from "react-cookie";
import classes from "../assets/styles/newForm.module.scss"; import classes from "../assets/styles/newForm.module.scss";
import MyButton from "../components/MyButton.jsx"; import MyButton from "../components/MyButton.jsx";
@ -8,332 +8,391 @@ import PreviewModal from "../components/PreviewModal.jsx";
import Loading from "../components/Loading.jsx"; import Loading from "../components/Loading.jsx";
import { FormsData, TypeAnswerData } from "../context"; import { FormsData, TypeAnswerData } from "../context";
import { listFormsApi, updateTitleFormApi } from "../hooks/api/listFormsApi.js"; import { listFormsApi, updateTitleFormApi } from "../hooks/api/listFormsApi.js";
import { saveFormApi, addFormBlockApi, listFormBlockApi, updateBlockApi, updateOrderBlockApi, removeBlockApi, getBlockApi } from "../hooks/api/formApi.js"; import {
import { responseDataToListBlock, numberingBlocks } from "../hooks/sundry/parseListBlock.js"; saveFormApi,
addFormBlockApi,
listFormBlockApi,
updateBlockApi,
updateOrderBlockApi,
removeBlockApi,
getBlockApi,
} from "../hooks/api/formApi.js";
import {
responseDataToListBlock,
numberingBlocks,
} from "../hooks/sundry/parseListBlock.js";
import MyInput from "../components/MyInput.jsx"; import MyInput from "../components/MyInput.jsx";
const NewForm = () => { const NewForm = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation(); const location = useLocation();
const { formId } = useParams(); const { formId } = useParams();
const [dragElem, setDragElem] = useState(null); const [dragElem, setDragElem] = useState(null);
const [dropElem, setDropElem] = useState(null); const [dropElem, setDropElem] = useState(null);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [cookies, _, __] = useCookies(["user"]); const [cookies, _, __] = useCookies(["user"]);
const {forms, setForms} = useContext(FormsData);
const {listTypeAnswer, setListTypeAnswer} = useContext(TypeAnswerData);
const nextID = (list, param) => { const { forms, setForms } = useContext(FormsData);
return list.length ? list.at(-1)[param] + 1 : 1 const { listTypeAnswer, setListTypeAnswer } = useContext(TypeAnswerData);
};
const [question, setQuestion] = useState("");
const [comment, setComment] = useState("");
const [mandatory, setMandatory] = useState(false);
const [optionAnswer, setOptionAnswer] = useState([]);
const [file, setFile] = useState([]);
const [video, setVideo] = useState("");
const [currentTypeAnswer, setCurrentTypeAnswer] = useState("");
const [currentOptionAnswer, setCurrentOptionAnswer] = useState("");
const [datetime, setDatetime] = useState(""); const nextID = (list, param) => {
const [newTitleForm, setNewTitleForm] = useState(""); return list.length ? list.at(-1)[param] + 1 : 1;
const [oldTitleFrom, setOldTitleForm] = useState(""); };
const [question, setQuestion] = useState("");
const [comment, setComment] = useState("");
const [mandatory, setMandatory] = useState(false);
const [optionAnswer, setOptionAnswer] = useState([]);
const [file, setFile] = useState([]);
const [video, setVideo] = useState("");
const [currentTypeAnswer, setCurrentTypeAnswer] = useState("");
const [currentOptionAnswer, setCurrentOptionAnswer] = useState("");
const [listBlock, setListBlock] = useState([]); const [datetime, setDatetime] = useState("");
const [newTitleForm, setNewTitleForm] = useState("");
const [oldTitleFrom, setOldTitleForm] = useState("");
const [stateModal, setStateModal] = useState(false); const [listBlock, setListBlock] = useState([]);
function cleanStates() { const [stateModal, setStateModal] = useState(false);
setStateModal(false)
setQuestion(""); function cleanStates() {
setComment(""); setStateModal(false);
setOptionAnswer([]) setQuestion("");
setFile([]); setComment("");
setVideo(""); setOptionAnswer([]);
setCurrentTypeAnswer(""); setFile([]);
setCurrentOptionAnswer("") setVideo("");
setMandatory(false); setCurrentTypeAnswer("");
setCurrentOptionAnswer("");
setMandatory(false);
}
useEffect(() => {
async function totalData() {
const responseForms = await listFormsApi(cookies.token);
const responseBlock = await listFormBlockApi(cookies.token, formId);
if (
responseBlock.status === 200 &&
responseBlock.data &&
responseForms.status === 200
) {
setListBlock(responseDataToListBlock(responseBlock.data));
const title = responseForms.data.find(
(item) => item.id === formId
).title;
setNewTitleForm(title);
setOldTitleForm(title);
} else {
setListBlock([]);
setNewTitleForm("Новыя форма");
setOldTitleForm("Новыя форма");
}
setLoading(true);
}
totalData();
}, []);
function addOptionAnswer() {
setOptionAnswer(
numberingBlocks(
[
...optionAnswer,
{
id: nextID(optionAnswer, "id"),
text: currentOptionAnswer,
},
],
"id",
1
)
);
setCurrentOptionAnswer("");
}
function removeOptionAnswer(id) {
setOptionAnswer(
numberingBlocks(
[...optionAnswer].filter((answer) => answer.id !== id),
"id",
1
)
);
}
function editAnswerByForm(id) {
const obj = listBlock.find((item) => item.id === id);
setQuestion(obj.question);
setComment(obj.comment);
setFile(obj.file);
setVideo(obj.video);
setCurrentTypeAnswer(obj.typeAnswer);
setOptionAnswer(obj.optionAnswer);
setMandatory(obj.mandatory);
setStateModal(obj.id);
}
async function updateBlock() {
const data = {
question: question,
comment: comment,
file: file,
video: video,
mandatory: mandatory,
optionAnswer: optionAnswer,
typeAnswer: currentTypeAnswer,
}; };
useEffect(() => { const response = await updateBlockApi(
async function totalData() { cookies.token,
const responseForms = await listFormsApi(cookies.token); formId,
const responseBlock = await listFormBlockApi(cookies.token, formId); data,
listBlock.find((item) => item.id === stateModal).order
);
if (responseBlock.status === 200 && responseBlock.data && responseForms.status === 200) { if (response.status === 200) {
setListBlock(responseDataToListBlock(responseBlock.data)); const responseBlock = await listFormBlockApi(cookies.token, formId);
const title = responseForms.data.find(item => item.id === formId).title
setNewTitleForm(title);
setOldTitleForm(title);
}
else {
setListBlock([])
setNewTitleForm("Новыя форма");
setOldTitleForm("Новыя форма");
}
setLoading(true);
};
totalData(); if (responseBlock.status === 200) {
}, []); setListBlock(responseDataToListBlock(responseBlock.data));
} else {
setListBlock([]);
}
} else {
console.log(response);
}
function addOptionAnswer() { cleanStates();
setOptionAnswer(numberingBlocks( }
[...optionAnswer, {
id: nextID(optionAnswer, "id"), async function removeBlock(order) {
text: currentOptionAnswer const response = await removeBlockApi(cookies.token, formId, order);
}],
"id", if (response.status === 200) {
1 setListBlock([...listBlock.filter((item) => item.order !== order)]);
)); } else {
setCurrentOptionAnswer(""); console.log(response);
}
}
async function addFormBlock() {
console.log(optionAnswer);
const newBlock = {
question: question,
typeAnswer: currentTypeAnswer,
comment: comment,
mandatory: mandatory,
optionAnswer: optionAnswer,
file: file,
video: video,
}; };
function removeOptionAnswer(id) { const response = await addFormBlockApi(cookies.token, formId, newBlock);
setOptionAnswer(numberingBlocks(
[...optionAnswer].filter(answer => answer.id !== id),
"id",
1
));
};
function editAnswerByForm(id) { if (response.status === 200) {
const obj = listBlock.find(item => item.id === id); const responseBlock = await listFormBlockApi(cookies.token, formId);
setQuestion(obj.question);
setComment(obj.comment);
setFile(obj.file);
setVideo(obj.video);
setCurrentTypeAnswer(obj.typeAnswer);
setOptionAnswer(obj.optionAnswer);
setMandatory(obj.mandatory);
setStateModal(obj.id);
};
async function updateBlock() { if (responseBlock.status === 200) {
const data = { setListBlock(responseDataToListBlock(responseBlock.data));
question: question, } else {
comment: comment, setListBlock([]);
file: file, }
video: video, } else {
mandatory: mandatory, console.log(response);
optionAnswer: optionAnswer, }
typeAnswer: currentTypeAnswer, cleanStates();
} }
const response = await updateBlockApi( // async function updateTitleForm() {
cookies.token, // const response = await updateTitleFormApi(cookies.token, formId, newTitleForm);
formId,
data,
listBlock.find(item => item.id === stateModal).order
);
if (response.status === 200) { // if (response.status === 200) {
const responseBlock = await listFormBlockApi(cookies.token, formId); // console.log(response)
// }
// else {
// console.log(response)
// }
// };
if (responseBlock.status === 200) { async function updateOrderBlock() {
setListBlock(responseDataToListBlock(responseBlock.data)); const response = await updateOrderBlockApi(cookies.token, formId, {
} new: dropElem,
else { old: dragElem,
setListBlock([]) });
}
}
else {
console.log(response)
}
cleanStates();
};
async function removeBlock(order) { if (response.status === 200) {
const response = await removeBlockApi(cookies.token, formId, order) const currentElem = listBlock[dragElem];
const tListBlock = [...listBlock];
if (response.status === 200) { if (dragElem > dropElem) {
setListBlock([...listBlock.filter(item => item.order !== order)]); tListBlock.splice(dropElem, 0, currentElem);
} tListBlock.splice(dragElem + 1, 1);
else { } else {
console.log(response) tListBlock.splice(dropElem + 1, 0, currentElem);
} tListBlock.splice(dragElem, 1);
}; }
async function addFormBlock() { setListBlock(numberingBlocks(tListBlock, "order"));
console.log(optionAnswer) }
}
const newBlock = { async function saveForm() {
question: question, if (oldTitleFrom !== newTitleForm) {
typeAnswer: currentTypeAnswer, await updateTitleFormApi(cookies.token, formId, newTitleForm);
comment: comment, }
mandatory: mandatory,
optionAnswer: optionAnswer,
file: file,
video: video
}
const response = await addFormBlockApi(cookies.token, formId, newBlock) cleanStates();
navigate("/forms");
}
if (response.status === 200) { return (
const responseBlock = await listFormBlockApi(cookies.token, formId); <div className={classes.main}>
<div className={classes.wrapper}>
if (responseBlock.status === 200) { <div className={classes.header}>
setListBlock(responseDataToListBlock(responseBlock.data)); <div className={classes.header__listInput}>
} <div className={classes.header__listInput__date}>
else { <span>Дедлайн выполнения</span>
setListBlock([]) <MyInput
} type={"datetime-local"}
} value={datetime}
else { change={setDatetime}
console.log(response) />
}
cleanStates();
};
// async function updateTitleForm() {
// const response = await updateTitleFormApi(cookies.token, formId, newTitleForm);
// if (response.status === 200) {
// console.log(response)
// }
// else {
// console.log(response)
// }
// };
async function updateOrderBlock() {
const response = await updateOrderBlockApi(cookies.token, formId, {
new: dropElem,
old: dragElem
})
if (response.status === 200) {
const currentElem = listBlock[dragElem];
const tListBlock = [...listBlock];
if (dragElem > dropElem) {
tListBlock.splice(dropElem, 0, currentElem);
tListBlock.splice(dragElem + 1, 1);
}
else {
tListBlock.splice(dropElem + 1, 0, currentElem);
tListBlock.splice(dragElem, 1);
};
setListBlock(numberingBlocks(tListBlock, "order"));
}
};
async function saveForm() {
if (oldTitleFrom !== newTitleForm) {
await updateTitleFormApi(cookies.token, formId, newTitleForm);
}
cleanStates();
navigate("/forms");
};
return (
<div className={classes.main}>
<div className={classes.wrapper}>
<div className={classes.header}>
<div className={classes.header__listInput}>
<div className={classes.header__listInput__date}>
<span>Дедлайн выполнения</span>
<MyInput type={"datetime-local"} value={datetime} change={setDatetime}/>
</div>
<div className={classes.header__listInput__title}>
<span>Название формы</span>
<MyInput type={"text"} value={newTitleForm} change={setNewTitleForm}/>
</div>
</div>
<div className={classes.header__listBtn}>
<MyButton text={'Предпросмотр'} class={"main__white"} toggle={"modal"} target={"#previewModal"}/>
<MyButton text={'Опубликовать'} class={"main__green"} click={location.state ? updateFormByForms : saveForm}/>
</div>
</div>
<div className={classes.content}>
<div className={classes.content__listQuestion}>
<div className={classes.content__listQuestion__list}>
{listTypeAnswer.map((item, i) =>
<div className={classes.content__listQuestion__list__item} data-bs-toggle="modal" data-bs-target="#answerModal" onClick={() => setCurrentTypeAnswer(item.id)} key={i}>
<span>{item.text}</span>
</div>
)}
</div>
</div>
<PreviewModal listBlock={listBlock} listTypeAnswer={listTypeAnswer}/>
<AnswerModal
stateModal={stateModal}
currentTypeAnswer={currentTypeAnswer}
question={question}
comment={comment}
mandatory={mandatory}
optionAnswer={optionAnswer}
setOptionAnswer={setOptionAnswer}
file={file}
video={video}
setVideo={setVideo}
currentOptionAnswer={currentOptionAnswer}
listTypeAnswer={listTypeAnswer}
setQuestion={setQuestion}
setComment={setComment}
setFile={setFile}
setCurrentOptionAnswer={setCurrentOptionAnswer}
setMandatory={setMandatory}
cleanStates={cleanStates}
addFormBlock={addFormBlock}
addOptionAnswer={addOptionAnswer}
updateBlock={updateBlock}
setCurrentTypeAnswer={setCurrentTypeAnswer}
removeOptionAnswer={removeOptionAnswer}
/>
<div className={classes.content__newForm}>
<div className={classes.content__newForm__title}>
<h3>Новая форма</h3>
</div>
<div className={classes.content__newForm__list}>
{loading ? listBlock.map((item, i) =>
<div
className={classes.content__newForm__list__item}
key={i}
id={item.order}
draggable="true"
onDragOver={(event) => {event.preventDefault()}}
onDragStart={(event) => {
if (event.target.id) {
setDragElem(Number(event.target.id))
}
}}
onDragEnter={(event) => {
if (event.target.id) {
setDropElem(Number(event.target.id))
}
}}
onDrop={() => updateOrderBlock()}
>
<div className={classes.content__newForm__list__item__answer}>
<span>{item.question}</span>
<span>{listTypeAnswer.map(typeItem => {
if (typeItem.id === item.typeAnswer) {
return typeItem.text
}
})}</span>
</div>
<div className={classes.content__newForm__list__item__btn}>
<i class="fa-solid fa-pen" data-bs-toggle="modal" data-bs-target="#answerModal" onClick={() => {editAnswerByForm(item.id)}}></i>
<i class="fa-solid fa-trash" onClick={() => removeBlock(item.order)}></i>
</div>
</div>
) :
<Loading/>}
</div>
</div>
</div>
</div> </div>
<div className={classes.header__listInput__title}>
<span>Название формы</span>
<MyInput
type={"text"}
value={newTitleForm}
change={setNewTitleForm}
/>
</div>
</div>
<div className={classes.header__listBtn}>
<MyButton
text={"Предпросмотр"}
class={"main__white"}
toggle={"modal"}
target={"#previewModal"}
/>
<MyButton
text={"Опубликовать"}
class={"main__blue"}
click={location.state ? updateFormByForms : saveForm}
/>
</div>
</div> </div>
) <div className={classes.content}>
} <div className={classes.content__listQuestion}>
<div className={classes.content__listQuestion__list}>
{listTypeAnswer.map((item, i) => (
<div
className={classes.content__listQuestion__list__item}
data-bs-toggle="modal"
data-bs-target="#answerModal"
onClick={() => setCurrentTypeAnswer(item.id)}
key={i}
>
<span>{item.text}</span>
</div>
))}
</div>
</div>
export default NewForm; <PreviewModal listBlock={listBlock} listTypeAnswer={listTypeAnswer} />
<AnswerModal
stateModal={stateModal}
currentTypeAnswer={currentTypeAnswer}
question={question}
comment={comment}
mandatory={mandatory}
optionAnswer={optionAnswer}
setOptionAnswer={setOptionAnswer}
file={file}
video={video}
setVideo={setVideo}
currentOptionAnswer={currentOptionAnswer}
listTypeAnswer={listTypeAnswer}
setQuestion={setQuestion}
setComment={setComment}
setFile={setFile}
setCurrentOptionAnswer={setCurrentOptionAnswer}
setMandatory={setMandatory}
cleanStates={cleanStates}
addFormBlock={addFormBlock}
addOptionAnswer={addOptionAnswer}
updateBlock={updateBlock}
setCurrentTypeAnswer={setCurrentTypeAnswer}
removeOptionAnswer={removeOptionAnswer}
/>
<div className={classes.content__newForm}>
<div className={classes.content__newForm__title}>
<h3>Новая форма</h3>
</div>
<div className={classes.content__newForm__list}>
{loading ? (
listBlock.map((item, i) => (
<div
className={classes.content__newForm__list__item}
key={i}
id={item.order}
draggable="true"
onDragOver={(event) => {
event.preventDefault();
}}
onDragStart={(event) => {
if (event.target.id) {
setDragElem(Number(event.target.id));
}
}}
onDragEnter={(event) => {
if (event.target.id) {
setDropElem(Number(event.target.id));
}
}}
onDrop={() => updateOrderBlock()}
>
<div
className={classes.content__newForm__list__item__answer}
>
<span>{item.question}</span>
<span>
{listTypeAnswer.map((typeItem) => {
if (typeItem.id === item.typeAnswer) {
return typeItem.text;
}
})}
</span>
</div>
<div className={classes.content__newForm__list__item__btn}>
<i
class="fa-solid fa-pen"
data-bs-toggle="modal"
data-bs-target="#answerModal"
onClick={() => {
editAnswerByForm(item.id);
}}
></i>
<i
class="fa-solid fa-trash"
onClick={() => removeBlock(item.order)}
></i>
</div>
</div>
))
) : (
<Loading />
)}
</div>
</div>
</div>
</div>
</div>
);
};
export default NewForm;