admin/astra-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #26 from dderbentsov/UC-13

Browse Source 
Добавлена таблица клиентов и popup окно для удаления
This commit is contained in:
Алексей Дёмин
2022-10-13 09:55:00 +03:00
committed by GitHub
parent 506b0d779e 852f41719d
commit 820d181527
13 changed files with 254 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@@ -1,5 +1,5 @@
<template lang="pug">
.flex.flex-col.w-full.h-full.gap-y-2
.flex.flex-col.w-full.h-full.gap-y-4
the-header
.flex.flex-auto
the-sidebar

3
src/assets/sass/variables.sass
View File

@@ -9,3 +9,6 @@
--font-grey-color: #9294a7
--border-light-grey-color: #d3d4dc
--default-shadow: 4px 4px 8px rgba(9, 10, 21, 0.1), -4px -4px 8px rgba(9, 10, 21, 0.1)
--bg-hover-row-table: rgba(215, 217, 255, 0.25)
--default-white: #FFFFFF
--btn-red-color: #FF6F6F

5
src/components/TheSidebar.vue
View File

@@ -5,7 +5,7 @@
.icon-home
the-button-sidebar(id="calendar" path="#/calendar")
.icon-calendar-2
the-button-sidebar(id="user" path="#/user")
the-button-sidebar(id="user" path="#/clients")
.icon-person-2
.flex.text-4xl.flex-col.gap-y-6
the-button-sidebar(id="settings" path="#/settings")
@@ -24,5 +24,6 @@ export default {
<style lang="sass" scoped>
.sidebar
max-width: 80px
background-color: #F8F8FF
background-color: #FFFFFF
border-top-right-radius: 4px
</style>

1
src/pages/calendar/TheCalendar.vue
View File

@@ -27,3 +27,4 @@ export default {
},
};
</script>
,

11
src/pages/clients/TheClients.vue Normal file
View File

@@ -0,0 +1,11 @@
<template lang="pug">
clients-wrapper
</template>
<script>
import ClientsWrapper from "@/pages/clients/components/ClientsWrapper";
export default {
name: "TheClients",
components: { ClientsWrapper },
};
</script>

33
src/pages/clients/components/ClientsActionPopup.vue Normal file
View File

@@ -0,0 +1,33 @@
<template lang="pug">
.popup-wrapper.absolute.flex.flex-col.gap-y-3.w-10.h-10.right-2.top-5.p-4
.keep-redaction.flex.gap-x-3
.icon-edit.icon-redaction
span Редактировать
.keep-redaction.flex.gap-x-3
.icon-star.icon-redaction
span На ведение
.delete.flex.gap-x-3
.icon-basket
span Удалить
</template>
<script>
export default {
name: "ClientsActionPopup",
};
</script>
<style lang="sass" scoped>
.popup-wrapper
width: 180px
height: 136px
border-radius: 4px 0 4px 4px
background-color: var(--default-white)
box-shadow: var(--default-shadow)
.keep-redaction
color: var(--font-dark-blue-color)
.icon-redaction
color: var(--btn-blue-color)
.delete
color: var(--btn-red-color)
</style>

99
src/pages/clients/components/ClientsTable.vue Normal file
View File

@@ -0,0 +1,99 @@
<template lang="pug">
.wrapper.px-6.pt-6.h-full.w-full.min-w-fit
table.w-full
thead.head-table
tr.head-row
th.w-3
.checkbox.px-4.py-3
clients-table-checkbox
th.name
.flex.px-4.justify-between.gap-x-40
span.text-sm ФИО
.icon-down-arrow.text-xsm.mt-1
th.age
.flex.px-4.justify-between
span.text-sm Возраст
.icon-down-arrow.text-xsm.mt-1
th
.px-4.text-left
span.text-sm Должность
th.priority
.flex.px-4.justify-between
span.text-sm Приоритет
.icon-down-arrow.text-xsm.mt-1
th
.phone.px-4.text-left
span.text-sm Телефон
th
.email.px-4.text-left
span.text-sm Email
th
.networks.px-4.text-left
span.text-sm Сети
th.meeting
.flex.px-4.justify-between.gap-x-11
span.text-sm Ближайшая встреча
.icon-down-arrow.text-xsm.mt-1
th.w-5
.do.px-4
span.text-sm Do
tbody
clients-table-row(v-for="client in dataClients"
:key="client.id"
:id="client.id"
:full-name="client.fullName"
:age="client.age"
:job-title="client.jobTitle"
:priority="client.priority"
:phone="client.phone"
:email="client.email"
:networks="client.networks"
:meeting-time="client.meetingTime"
)
</template>
<script>
import ClientsTableRow from "@/pages/clients/components/ClientsTableRow";
import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbox";
export default {
name: "ClientsTable",
components: { ClientsTableCheckbox, ClientsTableRow },
data() {
return {
dataClients: [
{
id: "1",
fullName: "Вильгейльм Арнольд Витальевич",
age: "34",
jobTitle: "Менеджер",
priority: "Высокий",
phone: "+7 (915) 657–21–14",
email: "Superboyband@yandex.ru",
networks: [],
meetingTime: {
date: "02.06.22",
time: "18:30–19:30",
},
},
],
};
},
};
</script>
<style lang="sass" scoped>
.head-table
color: var(--font-grey-color)
border-collapse: separate
border-bottom: 8px solid transparent
.meeting
max-width: 180px
.priority
max-width: 80px
.head-row
border-bottom: 1px solid #D3D4DC
.wrapper
background-color: var(--default-white)
.color
background-color: red
</style>

14
src/pages/clients/components/ClientsTableCheckbox.vue Normal file
View File

@@ -0,0 +1,14 @@
<template lang="pug">
input.checkbox(type="checkbox")
</template>
<script>
export default {
name: "ClientsTableCheckBox",
};
</script>
<style lang="sass" scoped>
.checkbox
border-color: var(--font-grey-color)
</style>

72
src/pages/clients/components/ClientsTableRow.vue Normal file
View File

@@ -0,0 +1,72 @@
<template lang="pug">
tr.row-client.text-ms.cursor-pointer(:id="id")
td.py-5
.px-4.items-center
clients-table-checkbox
td.py-5
.px-4.font-semibold {{fullName}}
td.py-5
.px-4 {{age}}
td.py-5
.px-4 {{jobTitle}}
td.py-5
.px-4.flex.items-center.gap-x-2
.circle.w-2.h-2
span {{priority}}
td.py-5
.px-4 {{phone}}
td.py-5
.px-4 {{email}}
td.py-5
.px-4.flex
.w-fit.h-fit(v-for="network in networks" :key="network")
td.py-5
.px-4.gap-x-2.flex
span {{meetingTime.date}}
span.meeting-time.text-xs.leading-5 {{meetingTime.time}}
td.py-5
.px-4
.relative.dots-button.icon-dots.text-center.cursor-pointer.leading-6
clients-action-popup
</template>
<script>
import ClientsActionPopup from "@/pages/clients/components/ClientsActionPopup";
import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbox";
export default {
name: "ClientsTableRow",
components: { ClientsTableCheckbox, ClientsActionPopup },
props: {
id: String,
fullName: String,
age: String,
jobTitle: String,
priority: String,
phone: String,
email: String,
networks: Array,
meetingTime: Object,
},
};
</script>
<style lang="sass" scoped>
.row-client
color: var(--font-dark-blue-color)
border-bottom: 1px solid #D3D4DC
&:hover
background-color: var(--bg-hover-row-table)
.circle
background-color: var(--font-grey-color)
border-radius: 50%
.meeting-time
color: var(--font-grey-color)
.dots-button
width: 20px
height: 20px
border-radius: 50%
color: var(--font-grey-color)
&:hover
background-color: var(--btn-blue-color)
color: var(--default-white)
</style>

14
src/pages/clients/components/ClientsWrapper.vue Normal file
View File

@@ -0,0 +1,14 @@
<template lang="pug">
.flex.w-full.mx-6
clients-table
</template>
<script>
import ClientsTable from "@/pages/clients/components/ClientsTable";
export default {
name: "ClientsWrapper",
components: { ClientsTable },
};
</script>
<style lang="sass" scoped></style>

9
src/pages/user/TheUser.vue
View File

@@ -1,9 +0,0 @@
<template lang="pug">
div UserPage
</template>
<script>
export default {
name: "TheUser",
};
</script>

4
src/router.js
View File

@@ -1,7 +1,7 @@
import { createRouter, createWebHashHistory } from "vue-router";
import TheHome from "@/pages/home/TheHome.vue";
import TheCalendar from "@/pages/calendar/TheCalendar";
import TheUser from "@/pages/user/TheUser";
import TheUser from "@/pages/clients/TheClients";
import TheSettings from "@/pages/settings/TheSettings";
export default createRouter({
@@ -9,7 +9,7 @@ export default createRouter({
routes: [
{ path: "/", component: TheHome },
{ path: "/calendar", component: TheCalendar },
{ path: "/user", component: TheUser },
{ path: "/clients", component: TheUser },
{ path: "/settings", component: TheSettings },
],
});

1
tailwind.config.js
View File

@@ -6,6 +6,7 @@ module.exports = {
sans: ["Raleway", "sans-serif"],
},
fontSize: {
xsm: ["10px", { lineHeight: "12px" }],
xxs: ["12px", { lineHeight: "14px" }],
xs: ["13px", { lineHeight: "15px" }],
sm: ["14px", { lineHeight: "16px" }],