mrkrk/formaptix-web
1
0
Fork 0
mirror of https://github.com/grey-cat-1908/formaptix-web.git synced 2024-11-11 18:47:27 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update Profile.vue

Browse source
This commit is contained in:
Vyacheslav 2024-09-03 17:58:28 +03:00
parent 63fc4b9058
commit 258dd14b10
1 changed files with 91 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

92
src/views/Profile.vue
View file

@ -8,6 +8,8 @@ import { makeAPIRequest } from '@/utils/http'
const authStore = useAuthStore() const authStore = useAuthStore()
const userForms = ref([]) const userForms = ref([])
import {PhEye, PhPen, PhPencil, PhTrash} from "@phosphor-icons/vue";
onMounted(async () => { onMounted(async () => {
await authStore.prepareStore() await authStore.prepareStore()
if (!authStore.isAuthorized) { if (!authStore.isAuthorized) {
@ -29,15 +31,95 @@ async function deleteForm(index: Number) {
</script> </script>
<template> <template>
<div class="profile">
<div class="container">
<h1 class="profile-title">Управление формами</h1>
<div class="profile-cards">
<div v-for="(form, index) in userForms" v-if="userForms.length > 0"> <div v-for="(form, index) in userForms" v-if="userForms.length > 0">
<h3>{{ form.data.name }}</h3> <div class="profile-card">
<button @click="$router.push('/form/view/' + form.id)">view</button> <div class="profile-card-title">{{ form.data.name }}</div>
<button @click="$router.push('/form/update/' + form.id)">upd</button> <div class="profile-card-buttons">
<button @click="deleteForm(index)">del</button> <button class="profile-card-btn profile-card-btn--view" @click="$router.push('/form/view/' + form.id)"><div class="profile-card-btn-inner"><PhEye :size="24" /></div></button>
<button class="profile-card-btn profile-card-btn--update" @click="$router.push('/form/update/' + form.id)"><div class="profile-card-btn-inner"><PhPencil :size="24" /></div></button>
<button class="profile-card-btn profile-card-btn--delete" @click="deleteForm(index)"><div class="profile-card-btn-inner"><PhTrash :size="24" /></div></button>
</div>
</div>
</div> </div>
<div v-else> <div v-else>
<h1>Формы не найдены.</h1> <h1>Формы не найдены.</h1>
</div> </div>
</div>
</div>
</div>
</template> </template>
<style scoped></style> <style scoped lang="scss">
.profile {
margin: 40px 0;
&-cards {
margin-top: 30px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 25px;
}
&-card {
border: 1px solid var(--color-main-border);
background: var(--color-secondary-background);
transition: 0.25s ease;
padding: 15px;
border-radius: 0.5rem;
&-title {
font-weight: 400;
}
&-buttons {
margin-top: 25px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 15px;
}
&-btn {
display: flex;
justify-content: center;
align-items: center;
height: 45px;
border-radius: 0.5rem;
transition: 0.25s ease;
&--view {
background: #d6e1ff;
border: 1px solid #a7beff;
&:hover {
background: #ccd9ff;
}
}
&--update {
background: #fff7cc;
border: 1px solid #f6e17a;
&:hover {
background: #fff4b2;
}
}
&--delete {
background: #ffd8d8;
border: 1px solid #ffb1b1;
&:hover {
background: #ffcece;
}
}
}
}
}
</style>