mrkrk/formaptix-web
1
0
Fork 0
mirror of https://github.com/grey-cat-1908/formaptix-web.git synced 2024-09-22 19:21:59 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update Profile.vue

Browse source
This commit is contained in:
Vyacheslav 2024-09-20 13:22:39 +03:00
parent ab5766d776
commit f47e6d1b6a
1 changed files with 58 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
src/views/Profile.vue
View file

@ -8,7 +8,7 @@ import { makeAPIRequest } from '@/utils/http'
const authStore = useAuthStore()
const userForms = ref([])
import { PhEye, PhPen, PhPencil, PhTrash } from '@phosphor-icons/vue'
import {PhEye, PhInfo, PhPen, PhPencil, PhTrash} from '@phosphor-icons/vue'
onMounted(async () => {
await authStore.prepareStore()
@ -50,8 +50,17 @@ async function createForm() {
<template>
<div class="profile" v-if="authStore.isAuthorized">
<div class="container">
<h1 class="profile-title">Управление формами</h1>
<button @click="createForm">Создать</button>
<h1 class="profile-title">Профиль пользователя</h1>
<div class="profile-ctrl-card">
<div class="profile-ctrl-buttons">
<button @click="createForm" class="default-button profile-ctrl-btn profile-ctrl-btn--create">Создать форму</button>
<!-- <button @click="createForm" class="default-button profile-ctrl-btn profile-ctrl-btn&#45;&#45;creat">Очистить все формы</button>-->
<button @click="createForm" class="default-button profile-ctrl-btn profile-ctrl-btn--deleteacc">Удалить аккаунт</button>
<div class="view-form-info">
<PhInfo :size="22" class="view-form-info--sign" /> После удаления аккаунта вернуть данные невозможно
</div>
</div>
</div>
<div class="profile-cards">
<div class="profile-card" v-for="(form, index) in userForms" v-if="userForms.length > 0">
<div class="profile-card-title">
@ -82,6 +91,52 @@ async function createForm() {
.profile {
margin: 40px 0;
&-ctrl {
&-card {
margin-top: 30px;
width: 100%;
//border: 1px solid var(--color-main-border);
//background: var(--color-secondary-background);
//padding: 25px;
border-radius: 1rem;
}
&-buttons {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 20px;
}
&-btn {
//width: 100%;
padding: 15px 30px;
border-radius: 1rem;
&:hover {
border: 1px solid var(--color-third-border);
}
@media (max-width: 500px) {
width: 100%;
}
&--create {
color: var(--color-main);
}
&--deleteacc {
color: var(--color-red);
//border: 1px solid var(--color-red);
}
}
}
&-cards {
margin-top: 30px;
display: flex;