design update, bug fixes
All checks were successful
publish-main / release-image (push) Successful in 5m56s
All checks were successful
publish-main / release-image (push) Successful in 5m56s
This commit is contained in:
Ivan
parent
133ed782aa
commit
750b571374
GPG Key ID:
0C191B86D9582583
@ -1,131 +1,133 @@
|
||||
.main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.admin {
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
box-shadow: 0 0 5px 1px rgb(200, 200, 200);
|
||||
padding: 1.5%;
|
||||
position: relative;
|
||||
&__linkProfile {
|
||||
position: absolute;
|
||||
bottom: 103%;
|
||||
left: 10px;
|
||||
cursor: pointer;
|
||||
span {
|
||||
font-size: 15px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
color: rgb(100, 100, 100);
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
color: rgb(66, 68, 189);
|
||||
}
|
||||
}
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 16px;
|
||||
padding: 1.5%;
|
||||
position: relative;
|
||||
&__linkProfile {
|
||||
position: absolute;
|
||||
bottom: 103%;
|
||||
left: 10px;
|
||||
cursor: pointer;
|
||||
span {
|
||||
font-size: 15px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
color: rgb(100, 100, 100);
|
||||
&: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%;
|
||||
height: 100%;
|
||||
&__header {
|
||||
width: 100%;
|
||||
height: 15%;
|
||||
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;
|
||||
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%;
|
||||
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;
|
||||
}
|
||||
&__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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,158 +1,156 @@
|
||||
.main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.loading__wrapper {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&__body {
|
||||
// margin-top: 100px;
|
||||
span {
|
||||
|
||||
}
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&__body {
|
||||
// margin-top: 100px;
|
||||
span {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.answers {
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
box-shadow: 0 0 5px 1px rgb(200, 200, 200);
|
||||
padding: 1.5%;
|
||||
&__linkAdmin {
|
||||
position: absolute;
|
||||
bottom: 103%;
|
||||
left: 10px;
|
||||
span {
|
||||
font-size: 15px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
color: rgb(100, 100, 100);
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 16px;
|
||||
padding: 1.5%;
|
||||
&__linkAdmin {
|
||||
position: absolute;
|
||||
bottom: 103%;
|
||||
left: 10px;
|
||||
span {
|
||||
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;
|
||||
&: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;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
&__date {
|
||||
|
||||
}
|
||||
i {
|
||||
font-size: 13px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: rgb(199, 73, 73);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
&__date {
|
||||
}
|
||||
i {
|
||||
font-size: 13px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: rgb(199, 73, 73);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.myModal {
|
||||
&__item {
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid rgb(200, 200, 200);
|
||||
&__item {
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid rgb(200, 200, 200);
|
||||
font-size: 15px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
cursor: pointer;
|
||||
&__question {
|
||||
&__text {
|
||||
font-size: 15px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
cursor: pointer;
|
||||
&__question {
|
||||
&__text {
|
||||
font-size: 15px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
}
|
||||
&__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;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,24 +1,29 @@
|
||||
@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("./base.css");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
|
||||
|
||||
body {
|
||||
background: #9dccf6 !important;
|
||||
}
|
||||
|
||||
.main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: rgb(240, 240, 240);
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
box-shadow: 0 0 5px 1px rgb(210, 210, 210);
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
box-sizing: border-box;
|
||||
// box-shadow: 0 0 5px 1px rgb(210, 210, 210);
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
}
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
}
|
||||
|
||||
@ -1,57 +1,88 @@
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0; }
|
||||
|
||||
*, *:before, *:after {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box; }
|
||||
|
||||
:focus, :active {
|
||||
outline: none; }
|
||||
|
||||
a:focus, a:active {
|
||||
outline: none; }
|
||||
|
||||
nav, footer, header, aside {
|
||||
display: block; }
|
||||
|
||||
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; }
|
||||
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:focus,
|
||||
:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a:focus,
|
||||
a:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
nav,
|
||||
footer,
|
||||
header,
|
||||
aside {
|
||||
display: block;
|
||||
}
|
||||
|
||||
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 {
|
||||
display: none; }
|
||||
|
||||
button {
|
||||
cursor: pointer; }
|
||||
|
||||
button::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0; }
|
||||
|
||||
a, a:visited {
|
||||
text-decoration: none; }
|
||||
|
||||
a:hover {
|
||||
text-decoration: none; }
|
||||
|
||||
ul li {
|
||||
list-style: none; }
|
||||
|
||||
img {
|
||||
vertical-align: top; }
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-size: inherit;
|
||||
font-weight: 400; }
|
||||
display: none;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: inherit;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@ -1,27 +1,34 @@
|
||||
.main {
|
||||
// height: 100%;
|
||||
max-height: 40px;
|
||||
button {
|
||||
font-size: 15px;
|
||||
height: 100%;
|
||||
padding: .40em 1.2rem;
|
||||
border-radius: 5px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
max-height: 40px;
|
||||
button {
|
||||
font-size: 15px;
|
||||
height: 100%;
|
||||
padding: 0.4em 1.2rem;
|
||||
border-radius: 5px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
transition: 0.2s;
|
||||
&:hover {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
&__red {
|
||||
color: white;
|
||||
background-color: rgb(235, 130, 130);
|
||||
}
|
||||
&__red {
|
||||
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);
|
||||
}
|
||||
&__green {
|
||||
color: white;
|
||||
background-color: rgb(150, 209, 158);
|
||||
}
|
||||
&__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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,12 +1,18 @@
|
||||
.main {
|
||||
max-height: 40px;
|
||||
input {
|
||||
border: 1px solid rgb(180, 180, 180);
|
||||
height: 100%;
|
||||
border-radius: 5px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
padding: .40em 3px;
|
||||
color: rgb(40, 40, 40);
|
||||
font-size: 15px;
|
||||
max-height: 40px;
|
||||
input {
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
height: 100%;
|
||||
border-radius: 5px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
box-sizing: border-box;
|
||||
padding: 8px 8px 8px 10px;
|
||||
color: rgb(40, 40, 40);
|
||||
font-size: 15px;
|
||||
transition: 0.2s;
|
||||
&:hover,
|
||||
&:focus {
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,67 +1,63 @@
|
||||
.main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
&__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%;
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
&__authorized {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&__authorized {
|
||||
span {
|
||||
font-size: 15px;
|
||||
color: rgb(80, 80, 80);
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: rgb(66, 68, 189);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
span {
|
||||
margin-left: 30px;
|
||||
display: block;
|
||||
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 {
|
||||
color: rgb(66, 68, 189);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
.profile {
|
||||
height: 100%;
|
||||
margin-right: 30px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,119 +1,135 @@
|
||||
.main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 50%;
|
||||
height: 70%;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
ul {
|
||||
li {
|
||||
width: 50%;
|
||||
cursor: pointer;
|
||||
a {
|
||||
text-align: center;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-size: 12px;
|
||||
}
|
||||
ul {
|
||||
li {
|
||||
width: 50%;
|
||||
cursor: pointer;
|
||||
a {
|
||||
text-align: center;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
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 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid rgb(220, 220, 220);
|
||||
border-top: none;
|
||||
&__wrapper {
|
||||
padding: 2%;
|
||||
width: 500px;
|
||||
min-height: 320px;
|
||||
box-sizing: border-box;
|
||||
padding: 35px 25px;
|
||||
background: #fff;
|
||||
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%;
|
||||
height: 100%;
|
||||
&__login {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&__header {
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
h3 {
|
||||
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%;
|
||||
}
|
||||
height: 30%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
h3 {
|
||||
display: block;
|
||||
font-size: 25px;
|
||||
margin: 0;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
text-align: center;
|
||||
color: rgb(100, 100, 100);
|
||||
}
|
||||
&__register {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&__header {
|
||||
width: 100%;
|
||||
height: 15%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
h3 {
|
||||
display: block;
|
||||
font-size: 25px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
color: rgb(100, 100, 100);
|
||||
}
|
||||
}
|
||||
&__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%;
|
||||
}
|
||||
}
|
||||
&__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);
|
||||
}
|
||||
}
|
||||
&__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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,92 +1,92 @@
|
||||
.main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 4% 8%;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
padding: 4% 8%;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.panel {
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: end;
|
||||
padding: 0 5%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: end;
|
||||
margin-bottom: 25px;
|
||||
gap: 15px;
|
||||
div:first-child {
|
||||
flex-grow: 1;
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.listForms {
|
||||
box-shadow: 0 0 5px 1px rgb(200, 200, 200);
|
||||
border-radius: 5px;
|
||||
margin-top: 5%;
|
||||
height: 70%;
|
||||
width: 100%;
|
||||
&__columns {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
padding: 0 2%;
|
||||
height: 15%;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid rgb(220, 220, 220);
|
||||
&__item {
|
||||
font-size: 15px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
}
|
||||
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;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
padding: 20px 25px;
|
||||
border-bottom: 1px solid rgb(220, 220, 220);
|
||||
&__item {
|
||||
font-size: 15px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
&__forms {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
overflow-y: auto;
|
||||
&::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
}
|
||||
&__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;
|
||||
}
|
||||
&::-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;
|
||||
}
|
||||
}
|
||||
&__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;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,68 +1,83 @@
|
||||
.main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 60%;
|
||||
height: 30%;
|
||||
text-align: center;
|
||||
&__top {
|
||||
font-size: 30px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
color: rgb(100, 100, 100);
|
||||
}
|
||||
&__bottom {
|
||||
font-size: 30px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
color: rgb(100, 100, 100);
|
||||
}
|
||||
text-align: center;
|
||||
&__top {
|
||||
font-size: 24px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
}
|
||||
&__bottom {
|
||||
margin-top: 25px;
|
||||
font-size: 24px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 60%;
|
||||
height: 50%;
|
||||
box-shadow: 0 0 5px 1px rgb(180, 180, 180);
|
||||
padding: 1% 0;
|
||||
&__title {
|
||||
height: 30%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&__wrapper {
|
||||
h3 {
|
||||
font-size: 35px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
color: rgb(100, 100, 100);
|
||||
}
|
||||
}
|
||||
width: 500px;
|
||||
margin-top: 50px;
|
||||
box-sizing: border-box;
|
||||
padding: 35px 25px;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
&__title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&__wrapper {
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
color: #000;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
&__token {
|
||||
height: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&__wrapper {
|
||||
height: 35%;
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
&__token {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&__wrapper {
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
input {
|
||||
height: 40px;
|
||||
}
|
||||
input::placeholder {
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
}
|
||||
&__search {
|
||||
height: 20%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&__wrapper {
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
&__search {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
div,
|
||||
button {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,174 +1,171 @@
|
||||
.main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 4% 8%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 4% 8%;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-bottom: 25px;
|
||||
&__listInput {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 8%;
|
||||
&__listInput {
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
&__date {
|
||||
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%;
|
||||
}
|
||||
}
|
||||
&__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%;
|
||||
}
|
||||
}
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
&__date {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
span {
|
||||
position: absolute;
|
||||
font-size: 15px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
top: -25px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
&__listBtn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
width: 30%;
|
||||
}
|
||||
&__title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
span {
|
||||
position: absolute;
|
||||
font-size: 15px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
top: -25px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__listBtn {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 3%;
|
||||
height: 85%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
&__listQuestion {
|
||||
height: 100%;
|
||||
width: 25%;
|
||||
&__list {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
&__item {
|
||||
height: 12.5%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 5px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: calc(90% - 100px);
|
||||
background: #fff;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 50px;
|
||||
&__listQuestion {
|
||||
height: 100%;
|
||||
width: 25%;
|
||||
&__list {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
&__item {
|
||||
padding: 15px 10px;
|
||||
width: 100%;
|
||||
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 {
|
||||
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);
|
||||
}
|
||||
&__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%;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,64 +1,65 @@
|
||||
.main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.profile {
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
box-shadow: 0 0 5px 1px rgb(200, 200, 200);
|
||||
padding: 1.5%;
|
||||
position: relative;
|
||||
&__linkAdmin {
|
||||
position: absolute;
|
||||
bottom: 103%;
|
||||
left: 10px;
|
||||
span {
|
||||
font-size: 15px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
color: rgb(100, 100, 100);
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
color: rgb(66, 68, 189);
|
||||
}
|
||||
}
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 16px;
|
||||
padding: 1.5%;
|
||||
position: relative;
|
||||
&__linkAdmin {
|
||||
position: absolute;
|
||||
bottom: 103%;
|
||||
left: 10px;
|
||||
span {
|
||||
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 {
|
||||
&__header {
|
||||
width: 100%;
|
||||
height: 15%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
&__btn {
|
||||
height: 100%;
|
||||
width: 35%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
h3 {
|
||||
font-size: 25px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
color: rgb(100, 100, 100);
|
||||
}
|
||||
}
|
||||
&__body {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
&__item {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__wrapper {
|
||||
&__header {
|
||||
width: 100%;
|
||||
height: 15%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
&__btn {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 25px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
color: rgb(100, 100, 100);
|
||||
}
|
||||
}
|
||||
}
|
||||
&__body {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
&__item {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,172 +1,170 @@
|
||||
.main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.loading__wrapper {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&__body {
|
||||
// margin-top: 100px;
|
||||
span {
|
||||
|
||||
}
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&__body {
|
||||
// margin-top: 100px;
|
||||
span {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.answers {
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
box-shadow: 0 0 5px 1px rgb(200, 200, 200);
|
||||
padding: 1.5%;
|
||||
&__linkAdmin {
|
||||
position: absolute;
|
||||
bottom: 103%;
|
||||
left: 10px;
|
||||
span {
|
||||
font-size: 15px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
color: rgb(100, 100, 100);
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 16px;
|
||||
padding: 1.5%;
|
||||
&__linkAdmin {
|
||||
position: absolute;
|
||||
bottom: 103%;
|
||||
left: 10px;
|
||||
span {
|
||||
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;
|
||||
&: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;
|
||||
&: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);
|
||||
}
|
||||
}
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.myModal {
|
||||
&__item {
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid rgb(200, 200, 200);
|
||||
&__item {
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid rgb(200, 200, 200);
|
||||
font-size: 15px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
cursor: pointer;
|
||||
&__question {
|
||||
&__text {
|
||||
font-size: 15px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
cursor: pointer;
|
||||
&__question {
|
||||
&__text {
|
||||
font-size: 15px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
}
|
||||
&__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;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,74 +1,77 @@
|
||||
.main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.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%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form {
|
||||
overflow-y: auto;
|
||||
width: 70%;
|
||||
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);
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-style: italic;
|
||||
color: rgb(200, 200, 200);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 20px;
|
||||
border: 2px solid rgb(220, 220, 220);
|
||||
border-top: none;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 0 0 16px 16px;
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 20px;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
@ -23,11 +23,11 @@ const EnterAccount = () => {
|
||||
const [password, setPassword] = useState("");
|
||||
const [repiedPassword, setRepiedPassword] = useState("");
|
||||
|
||||
const {user, setUser} = useContext(UserData);
|
||||
const [cookies, setCookie, removeCookie] = useCookies(["user"]);
|
||||
const { user, setUser } = useContext(UserData);
|
||||
const [cookies, setCookie, removeCookie] = useCookies(["user"]);
|
||||
|
||||
const [loginError, setLoginError] = useState(false);
|
||||
const [regsterError, setRegsterError] = useState(false);
|
||||
const [loginError, setLoginError] = useState(false);
|
||||
const [regsterError, setRegsterError] = useState(false);
|
||||
|
||||
function cleanState() {
|
||||
setEmail("");
|
||||
@ -51,82 +51,145 @@ const EnterAccount = () => {
|
||||
repiedPassword: repiedPassword,
|
||||
});
|
||||
|
||||
if (response.status === 200) {
|
||||
const responseMe = await verifyUserApi(response.data.token)
|
||||
setUser(responseMe.data);
|
||||
setCookie("token", response.data.token);
|
||||
cleanState();
|
||||
navigate("/");
|
||||
}
|
||||
else {
|
||||
setRegsterError(response)
|
||||
}
|
||||
};
|
||||
if (response.status === 200) {
|
||||
const responseMe = await verifyUserApi(response.data.token);
|
||||
setUser(responseMe.data);
|
||||
setCookie("token", response.data.token);
|
||||
cleanState();
|
||||
navigate("/");
|
||||
} else {
|
||||
setRegsterError(response);
|
||||
}
|
||||
}
|
||||
|
||||
async function logInToAccount() {
|
||||
const response = await logIn(login, password);
|
||||
|
||||
if (response.status === 200) {
|
||||
setCookie("token", response.data.token);
|
||||
const responseMe = await verifyUserApi(response.data.token)
|
||||
setUser(responseMe.data)
|
||||
if (response.status === 200) {
|
||||
setCookie("token", response.data.token);
|
||||
const responseMe = await verifyUserApi(response.data.token);
|
||||
setUser(responseMe.data);
|
||||
|
||||
cleanState();
|
||||
navigate("/")
|
||||
}
|
||||
else {
|
||||
setLoginError(true);
|
||||
}
|
||||
cleanState();
|
||||
navigate("/");
|
||||
} else {
|
||||
setLoginError(true);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classes.main}>
|
||||
<div className={classes.wrapper}>
|
||||
<div className={classes.tabs}>
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item" onClick={() => selectTag("login")}>
|
||||
<a className={enter === "login" ? "nav-link active" : "nav-link"} aria-current="page">Авторизация</a>
|
||||
</li>
|
||||
<li class="nav-item" onClick={() => selectTag("register")}>
|
||||
<a className={enter === "register" ? "nav-link active" : "nav-link"}>Регитрация</a>
|
||||
</li>
|
||||
</ul>
|
||||
return (
|
||||
<div className={classes.main}>
|
||||
<div className={classes.wrapper}>
|
||||
<div className={classes.tabs}>
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item" onClick={() => selectTag("login")}>
|
||||
<a
|
||||
className={enter === "login" ? "nav-link active" : "nav-link"}
|
||||
aria-current="page"
|
||||
>
|
||||
Авторизация
|
||||
</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 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 className={classes.content__wrapper__login__body}>
|
||||
{loginError ? <span className={classes.content__wrapper__login__body__error}>
|
||||
Ошибка. Проверте корректность ввода логина и пароля.
|
||||
</span> : <span className={classes.content__wrapper__login__body__error}></span>}
|
||||
<MyInput placeholder={"Логин"} otherMainStyle={{width: "100%", height: "20%"}} otherInputStyle={{width: "100%"}} value={login} change={setLogin}/>
|
||||
<MyInput type={"password"} placeholder={"Пароль"} otherMainStyle={{width: "100%", height: "20%"}} otherInputStyle={{width: "100%"}} value={password} change={setPassword}/>
|
||||
</div>
|
||||
<div className={classes.content__wrapper__login__footer}>
|
||||
<MyButton
|
||||
text={"Войти"}
|
||||
class={"main__green"}
|
||||
otherStyle={{height: "50%", width: "20%"}}
|
||||
click={logInToAccount}
|
||||
/>
|
||||
</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}>
|
||||
<div className={classes.content__wrapper__login__body}>
|
||||
{loginError ? (
|
||||
<span
|
||||
className={classes.content__wrapper__login__body__error}
|
||||
>
|
||||
Ошибка. Проверте корректность ввода логина и пароля.
|
||||
</span>
|
||||
) : (
|
||||
<span
|
||||
className={classes.content__wrapper__login__body__error}
|
||||
></span>
|
||||
)}
|
||||
<MyInput
|
||||
placeholder={"Логин"}
|
||||
otherMainStyle={{ width: "100%", height: "20%" }}
|
||||
otherInputStyle={{ width: "100%" }}
|
||||
value={login}
|
||||
change={setLogin}
|
||||
/>
|
||||
<MyInput
|
||||
type={"password"}
|
||||
placeholder={"Пароль"}
|
||||
otherMainStyle={{ width: "100%", height: "20%" }}
|
||||
otherInputStyle={{ width: "100%" }}
|
||||
value={password}
|
||||
change={setPassword}
|
||||
/>
|
||||
</div>
|
||||
<div className={classes.content__wrapper__login__footer}>
|
||||
<MyButton
|
||||
text={"Войти"}
|
||||
class={"main__blue"}
|
||||
click={logInToAccount}
|
||||
/>
|
||||
</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={"Номер телефона"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={phone} change={setPhone}/>
|
||||
<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={repiedPassword} change={setRepiedPassword}/>
|
||||
</div> */}
|
||||
<div className={classes.content__wrapper__register__footer}>
|
||||
<MyButton
|
||||
text={"Создать"}
|
||||
class={"main__green"}
|
||||
otherStyle={{ height: "100%", width: "20%" }}
|
||||
click={() => createUser()}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div className={classes.content__wrapper__register__footer}>
|
||||
<MyButton
|
||||
text={"Создать"}
|
||||
class={"main__blue"}
|
||||
click={() => createUser()}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EnterAccount;
|
||||
|
||||
@ -1,140 +1,201 @@
|
||||
import React, { useState, useContext, useEffect } from "react";
|
||||
import { useCookies } from "react-cookie";
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import classes from "../assets/styles/forms.module.scss"
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import classes from "../assets/styles/forms.module.scss";
|
||||
import MyButton from "../components/MyButton.jsx";
|
||||
import MyInput from "../components/MyInput.jsx";
|
||||
import { FormsData, UserData } from "../context";
|
||||
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 navigate = useNavigate();
|
||||
const {forms, setForms} = useContext(FormsData);
|
||||
const {user, setUser} = useContext(UserData);
|
||||
const [stateLoading, setStateLoading] = useState(false);
|
||||
const [searchForm, setSearchForm] = useState("");
|
||||
const navigate = useNavigate();
|
||||
const { forms, setForms } = useContext(FormsData);
|
||||
const { user, setUser } = useContext(UserData);
|
||||
const [stateLoading, setStateLoading] = useState(false);
|
||||
const [searchForm, setSearchForm] = useState("");
|
||||
|
||||
const [cookies, _, __] = useCookies(["user"]);
|
||||
const [cookies, _, __] = useCookies(["user"]);
|
||||
|
||||
useEffect(() => {
|
||||
async function listForms() {
|
||||
const response = await listFormsApi(cookies.token);
|
||||
useEffect(() => {
|
||||
async function listForms() {
|
||||
const response = await listFormsApi(cookies.token);
|
||||
|
||||
if (response.data) {
|
||||
setForms(response.data);
|
||||
}
|
||||
else if (response.status === 200 && response.data) {
|
||||
setForms([]);
|
||||
}
|
||||
else {
|
||||
console.log(response)
|
||||
}
|
||||
};
|
||||
if (response.data) {
|
||||
setForms(response.data);
|
||||
} else if (response.status === 200 && response.data) {
|
||||
setForms([]);
|
||||
} else {
|
||||
console.log(response);
|
||||
}
|
||||
}
|
||||
|
||||
listForms();
|
||||
}, []);
|
||||
listForms();
|
||||
}, []);
|
||||
|
||||
async function createForm() {
|
||||
setStateLoading(true);
|
||||
const response = await createFormApi(cookies.token);
|
||||
setStateLoading(false);
|
||||
async function createForm() {
|
||||
setStateLoading(true);
|
||||
const response = await createFormApi(cookies.token);
|
||||
setStateLoading(false);
|
||||
|
||||
if (response.data) {
|
||||
const token = await newFormTokenApi(cookies.token, response.data.id)
|
||||
navigate(`/forms/${response.data.id}/edit`)
|
||||
}
|
||||
else {
|
||||
console.log(response)
|
||||
}
|
||||
};
|
||||
if (response.data) {
|
||||
const token = await newFormTokenApi(cookies.token, response.data.id);
|
||||
navigate(`/forms/${response.data.id}/edit`);
|
||||
} else {
|
||||
console.log(response);
|
||||
}
|
||||
}
|
||||
|
||||
function editForm(item) {
|
||||
navigate(`/forms/${item.id}/edit`);
|
||||
};
|
||||
function editForm(item) {
|
||||
navigate(`/forms/${item.id}/edit`);
|
||||
}
|
||||
|
||||
async function removeForm(id) {
|
||||
const response = await removeFormApi(cookies.token, id)
|
||||
async function removeForm(id) {
|
||||
const response = await removeFormApi(cookies.token, id);
|
||||
|
||||
if (response.status === 200) {
|
||||
setForms([...forms.filter(item => item.id !== id)]);
|
||||
}
|
||||
else {
|
||||
console.log(response);
|
||||
}
|
||||
};
|
||||
if (response.status === 200) {
|
||||
setForms([...forms.filter((item) => item.id !== id)]);
|
||||
} else {
|
||||
console.log(response);
|
||||
}
|
||||
}
|
||||
|
||||
async function openFormView(formId) {
|
||||
const response = await listFormsByTokenApi(cookies.token, formId);
|
||||
async function openFormView(formId) {
|
||||
const response = await listFormsByTokenApi(cookies.token, formId);
|
||||
|
||||
if (response.status === 200 && response.data.tokens) {
|
||||
navigate(`/forms/${response.data.tokens[0].id}/`);
|
||||
}
|
||||
else {
|
||||
console.log(response)
|
||||
}
|
||||
};
|
||||
if (response.status === 200 && response.data.tokens) {
|
||||
navigate(`/forms/${response.data.tokens[0].id}/`);
|
||||
} else {
|
||||
console.log(response);
|
||||
}
|
||||
}
|
||||
|
||||
async function copyLinkToFormView(formId) {
|
||||
const response = await listFormsByTokenApi(cookies.token, formId);
|
||||
async function copyLinkToFormView(formId) {
|
||||
const response = await listFormsByTokenApi(cookies.token, formId);
|
||||
|
||||
if (response.status === 200 && response.data.tokens) {
|
||||
navigator.clipboard.writeText(`${window.location.host}/forms/${response.data.tokens[0].id}/`)
|
||||
}
|
||||
else {
|
||||
console.log(response)
|
||||
}
|
||||
};
|
||||
if (response.status === 200 && response.data.tokens) {
|
||||
navigator.clipboard.writeText(
|
||||
`${window.location.host}/forms/${response.data.tokens[0].id}/`
|
||||
);
|
||||
} 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 (
|
||||
<div className={classes.main}>
|
||||
<div className={classes.wrapper}>
|
||||
<div className={classes.panel}>
|
||||
<MyInput placeholder={'Поиск...'} value={searchForm} change={setSearchForm}/>
|
||||
<MyButton click={createForm} class={"main__green"} otherStyle={{width: '200px'}} text={
|
||||
stateLoading ? <div class="spinner-border text-light" role="status">
|
||||
<span class="visually-hidden">Загрузка...</span>
|
||||
</div> : 'Создать'
|
||||
}/>
|
||||
return (
|
||||
<div className={classes.main}>
|
||||
<div className={classes.wrapper}>
|
||||
<div className={classes.panel}>
|
||||
<MyInput
|
||||
placeholder={"Поиск..."}
|
||||
value={searchForm}
|
||||
change={setSearchForm}
|
||||
/>
|
||||
<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 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 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;
|
||||
|
||||
@ -16,8 +16,8 @@ const Home = () => {
|
||||
Кажется вы попали на общую страницу.
|
||||
</div>
|
||||
<div className={classes.header__bottom}>
|
||||
Чтобы перейти к форме введите токен ниже или снова перейдите по
|
||||
ссылке.
|
||||
Чтобы перейти к форме введите токен ниже <br /> или снова перейдите
|
||||
по ссылке.
|
||||
</div>
|
||||
</div>
|
||||
<div className={classes.content}>
|
||||
@ -41,7 +41,7 @@ const Home = () => {
|
||||
<div className={classes.content__search__wrapper}>
|
||||
<MyButton
|
||||
text={"Найти форму"}
|
||||
class={"main__green"}
|
||||
class={"main__blue"}
|
||||
click={() => navigate(`/forms/${token}`)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
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 classes from "../assets/styles/newForm.module.scss";
|
||||
import MyButton from "../components/MyButton.jsx";
|
||||
@ -8,332 +8,391 @@ import PreviewModal from "../components/PreviewModal.jsx";
|
||||
import Loading from "../components/Loading.jsx";
|
||||
import { FormsData, TypeAnswerData } from "../context";
|
||||
import { listFormsApi, updateTitleFormApi } from "../hooks/api/listFormsApi.js";
|
||||
import { saveFormApi, addFormBlockApi, listFormBlockApi, updateBlockApi, updateOrderBlockApi, removeBlockApi, getBlockApi } from "../hooks/api/formApi.js";
|
||||
import { responseDataToListBlock, numberingBlocks } from "../hooks/sundry/parseListBlock.js";
|
||||
import {
|
||||
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";
|
||||
|
||||
const NewForm = () => {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const { formId } = useParams();
|
||||
const [dragElem, setDragElem] = useState(null);
|
||||
const [dropElem, setDropElem] = useState(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const { formId } = useParams();
|
||||
const [dragElem, setDragElem] = useState(null);
|
||||
const [dropElem, setDropElem] = useState(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const [cookies, _, __] = useCookies(["user"]);
|
||||
|
||||
const {forms, setForms} = useContext(FormsData);
|
||||
const {listTypeAnswer, setListTypeAnswer} = useContext(TypeAnswerData);
|
||||
const [cookies, _, __] = useCookies(["user"]);
|
||||
|
||||
const nextID = (list, param) => {
|
||||
return list.length ? list.at(-1)[param] + 1 : 1
|
||||
};
|
||||
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 { forms, setForms } = useContext(FormsData);
|
||||
const { listTypeAnswer, setListTypeAnswer } = useContext(TypeAnswerData);
|
||||
|
||||
const [datetime, setDatetime] = useState("");
|
||||
const [newTitleForm, setNewTitleForm] = useState("");
|
||||
const [oldTitleFrom, setOldTitleForm] = useState("");
|
||||
const nextID = (list, param) => {
|
||||
return list.length ? list.at(-1)[param] + 1 : 1;
|
||||
};
|
||||
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() {
|
||||
setStateModal(false)
|
||||
setQuestion("");
|
||||
setComment("");
|
||||
setOptionAnswer([])
|
||||
setFile([]);
|
||||
setVideo("");
|
||||
setCurrentTypeAnswer("");
|
||||
setCurrentOptionAnswer("")
|
||||
setMandatory(false);
|
||||
const [stateModal, setStateModal] = useState(false);
|
||||
|
||||
function cleanStates() {
|
||||
setStateModal(false);
|
||||
setQuestion("");
|
||||
setComment("");
|
||||
setOptionAnswer([]);
|
||||
setFile([]);
|
||||
setVideo("");
|
||||
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(() => {
|
||||
async function totalData() {
|
||||
const responseForms = await listFormsApi(cookies.token);
|
||||
const responseBlock = await listFormBlockApi(cookies.token, formId);
|
||||
const response = await updateBlockApi(
|
||||
cookies.token,
|
||||
formId,
|
||||
data,
|
||||
listBlock.find((item) => item.id === stateModal).order
|
||||
);
|
||||
|
||||
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);
|
||||
};
|
||||
if (response.status === 200) {
|
||||
const responseBlock = await listFormBlockApi(cookies.token, formId);
|
||||
|
||||
totalData();
|
||||
}, []);
|
||||
if (responseBlock.status === 200) {
|
||||
setListBlock(responseDataToListBlock(responseBlock.data));
|
||||
} else {
|
||||
setListBlock([]);
|
||||
}
|
||||
} else {
|
||||
console.log(response);
|
||||
}
|
||||
|
||||
function addOptionAnswer() {
|
||||
setOptionAnswer(numberingBlocks(
|
||||
[...optionAnswer, {
|
||||
id: nextID(optionAnswer, "id"),
|
||||
text: currentOptionAnswer
|
||||
}],
|
||||
"id",
|
||||
1
|
||||
));
|
||||
setCurrentOptionAnswer("");
|
||||
cleanStates();
|
||||
}
|
||||
|
||||
async function removeBlock(order) {
|
||||
const response = await removeBlockApi(cookies.token, formId, order);
|
||||
|
||||
if (response.status === 200) {
|
||||
setListBlock([...listBlock.filter((item) => item.order !== order)]);
|
||||
} else {
|
||||
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) {
|
||||
setOptionAnswer(numberingBlocks(
|
||||
[...optionAnswer].filter(answer => answer.id !== id),
|
||||
"id",
|
||||
1
|
||||
));
|
||||
};
|
||||
const response = await addFormBlockApi(cookies.token, formId, newBlock);
|
||||
|
||||
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);
|
||||
};
|
||||
if (response.status === 200) {
|
||||
const responseBlock = await listFormBlockApi(cookies.token, formId);
|
||||
|
||||
async function updateBlock() {
|
||||
const data = {
|
||||
question: question,
|
||||
comment: comment,
|
||||
file: file,
|
||||
video: video,
|
||||
mandatory: mandatory,
|
||||
optionAnswer: optionAnswer,
|
||||
typeAnswer: currentTypeAnswer,
|
||||
}
|
||||
if (responseBlock.status === 200) {
|
||||
setListBlock(responseDataToListBlock(responseBlock.data));
|
||||
} else {
|
||||
setListBlock([]);
|
||||
}
|
||||
} else {
|
||||
console.log(response);
|
||||
}
|
||||
cleanStates();
|
||||
}
|
||||
|
||||
const response = await updateBlockApi(
|
||||
cookies.token,
|
||||
formId,
|
||||
data,
|
||||
listBlock.find(item => item.id === stateModal).order
|
||||
);
|
||||
// async function updateTitleForm() {
|
||||
// const response = await updateTitleFormApi(cookies.token, formId, newTitleForm);
|
||||
|
||||
if (response.status === 200) {
|
||||
const responseBlock = await listFormBlockApi(cookies.token, formId);
|
||||
// if (response.status === 200) {
|
||||
// console.log(response)
|
||||
// }
|
||||
// else {
|
||||
// console.log(response)
|
||||
// }
|
||||
// };
|
||||
|
||||
if (responseBlock.status === 200) {
|
||||
setListBlock(responseDataToListBlock(responseBlock.data));
|
||||
}
|
||||
else {
|
||||
setListBlock([])
|
||||
}
|
||||
}
|
||||
else {
|
||||
console.log(response)
|
||||
}
|
||||
|
||||
cleanStates();
|
||||
};
|
||||
async function updateOrderBlock() {
|
||||
const response = await updateOrderBlockApi(cookies.token, formId, {
|
||||
new: dropElem,
|
||||
old: dragElem,
|
||||
});
|
||||
|
||||
async function removeBlock(order) {
|
||||
const response = await removeBlockApi(cookies.token, formId, order)
|
||||
if (response.status === 200) {
|
||||
const currentElem = listBlock[dragElem];
|
||||
const tListBlock = [...listBlock];
|
||||
|
||||
if (response.status === 200) {
|
||||
setListBlock([...listBlock.filter(item => item.order !== order)]);
|
||||
}
|
||||
else {
|
||||
console.log(response)
|
||||
}
|
||||
};
|
||||
if (dragElem > dropElem) {
|
||||
tListBlock.splice(dropElem, 0, currentElem);
|
||||
tListBlock.splice(dragElem + 1, 1);
|
||||
} else {
|
||||
tListBlock.splice(dropElem + 1, 0, currentElem);
|
||||
tListBlock.splice(dragElem, 1);
|
||||
}
|
||||
|
||||
async function addFormBlock() {
|
||||
console.log(optionAnswer)
|
||||
setListBlock(numberingBlocks(tListBlock, "order"));
|
||||
}
|
||||
}
|
||||
|
||||
const newBlock = {
|
||||
question: question,
|
||||
typeAnswer: currentTypeAnswer,
|
||||
comment: comment,
|
||||
mandatory: mandatory,
|
||||
optionAnswer: optionAnswer,
|
||||
file: file,
|
||||
video: video
|
||||
}
|
||||
async function saveForm() {
|
||||
if (oldTitleFrom !== newTitleForm) {
|
||||
await updateTitleFormApi(cookies.token, formId, newTitleForm);
|
||||
}
|
||||
|
||||
const response = await addFormBlockApi(cookies.token, formId, newBlock)
|
||||
cleanStates();
|
||||
navigate("/forms");
|
||||
}
|
||||
|
||||
if (response.status === 200) {
|
||||
const responseBlock = await listFormBlockApi(cookies.token, formId);
|
||||
|
||||
if (responseBlock.status === 200) {
|
||||
setListBlock(responseDataToListBlock(responseBlock.data));
|
||||
}
|
||||
else {
|
||||
setListBlock([])
|
||||
}
|
||||
}
|
||||
else {
|
||||
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>
|
||||
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__blue"}
|
||||
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>
|
||||
|
||||
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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user