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

Merge pull request #212 from dderbentsov/UC-155

Browse Source 
[WIP] Исправил стили, добавил расписание и возможность удаления note, фикс стилей
This commit is contained in:
frontgavrilin
2022-12-19 18:06:55 +03:00
committed by GitHub
parent 2b718c136d 969b260e36
commit 5b80eff2e9
16 changed files with 131 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/assets/icons/close_circle_remove_delete_icon_149506 1 (1).svg
View File

@@ -1,10 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2219_45392)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 23.375C18.2822 23.375 23.375 18.2822 23.375 12C23.375 5.71776 18.2822 0.625 12 0.625C5.71776 0.625 0.625 5.71776 0.625 12C0.625 18.2822 5.71776 23.375 12 23.375ZM16.5459 18.8899L18.844 16.5918L14.2478 11.9956L18.8555 7.38793L16.5574 5.08984L11.9497 9.69751L7.35351 5.10131L5.05541 7.39941L9.65161 11.9956L5.06689 16.5803L7.36499 18.8784L11.9497 14.2937L16.5459 18.8899Z" fill="#FF6565"/>
</g>
<defs>
<clipPath id="clip0_2219_45392">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 692 B

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

@@ -50,6 +50,7 @@
--btn-light-green-color: rgba(60, 217, 75, 0.2)
--border-light-grey-color-1: rgba(211, 212, 220, 0.5)
--bg-white-color-0: rgba(255, 255, 255, 0.3)
--bg-white-color-1: rgba(255, 255, 255, 0.5)
--border-red-color: #ff6565
--btn-grey-color: #e8e8f3
--pagination-item-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%)

2
src/components/TheHeader.vue
View File

@@ -84,7 +84,7 @@ export default {
methods: {
logout() {
localStorage.removeItem("tokenAccess");
this.$router.push("/login");
this.$router.go("/login");
},
openPopup() {
this.showPopup = !this.showPopup;

18
src/pages/clients/components/ClientDetailInfoSection.vue
View File

@@ -126,13 +126,26 @@
.flex.flex-col.gap-y-4(v-if="section === 'addresses' && isChange")
client-detail-section-address(:dope-address="dopeAddress")
.flex.flex-col.gap-y-2(v-if="section === 'additional' && isChange")
//- .title-section.text-xxs.font-semibold {{item.title}}
client-detail-input.text-sm.w-max-fit(
.flex.justify-between
.title-section.text-xxs.font-semibold Заголовок
.icon-cancel.cancel.cursor-pointer.pr-3.text-xsm(
v-if="isChange",
:id="item.id",
@click="deleteNote(item.id)"
)
client-detail-input.text-sm.w-max-fit.pr-12.relative(
:maxLength="40",
:style="{fontWeight:key === 'numba'&&600}",
v-model:value="sectionInfo[key].title",
placeholder="Заголовок"
)
.text.flex.absolute.text-xsx.top-18px(
class="right-2.5",
:style="{color: 'var(--font-grey-color)'}"
) {{`${sectionInfo[key].title.length}/40`}}
.title-section.text-xxs.font-semibold Описание
client-detail-input.text-sm.w-max-fit(
:maxLength="40",
:style="{fontWeight:key === 'numba'&&600}",
v-model:value="sectionInfo[key].description",
placeholder="Описание"
@@ -193,6 +206,7 @@ export default {
sectionInfo: Object,
section: String,
deleteDoc: Function,
deleteNote: Function,
updateDocument: Function,
updateAddress: Function,
updateNotes: Function,

4
src/pages/clients/components/ClientDetailInfoWrapper.vue
View File

@@ -32,7 +32,8 @@
:section-info="dataNotes",
:lack-notes="lackNotes",
:create-note="createNote",
:update-notes="updateNotes"
:update-notes="updateNotes",
:delete-note="deleteNote"
)
</template>
@@ -47,6 +48,7 @@ export default {
dataNotes: Array,
saveNewDoc: Function,
deleteDoc: Function,
deleteNote: Function,
dataDocument: Object,
updateDocument: Function,
updateAddress: Function,

2
src/pages/clients/components/ClientDetailInput.vue
View File

@@ -7,6 +7,7 @@
:cols="24",
@input="$emit('update:value', $event.target.value)",
:placeholder="placeholder",
:maxLength="maxLength"
)
input.w-full.outline-0.not-italic.font-medium(
v-else,
@@ -30,6 +31,7 @@ export default {
default: "Поиск",
},
rows: Number,
maxLength: Number,
},
directives: { mask },
computed: {

17
src/pages/clients/components/ClientsTableRow.vue
View File

@@ -95,14 +95,15 @@
:data-notes="dataNotes"
:save-new-doc="saveNewDoc",
:delete-doc="deleteDoc",
:delete-note="postDeleteNote"
:update-document="postUpdateIdentityDocument",
:update-address="postUpdateAddress",
:update-notes="postUpdateNotes",
:lack-data="lackData",
:lack-address="lackAddress",
:dope-address="dopeAddress",
:lack-attachments="lackAttachments",
:lack-notes="lackNotes"
:lack-notes="lackNotes",
:dope-address="dopeAddress",
:create-address="postCreateAddress",
:create-document="postCreateIdentityDocument",
:create-note="postCreateNote",
@@ -433,15 +434,14 @@ export default {
this.lackAttachments = this.dataAttachments[0]?.id ? true : false;
},
saveNote(data) {
if (data?.note[0]) {
this.dataNotes = [...data.note];
this.dataNotes = data?.note.filter((e) => !e.deleted_flg);
if (this.dataNotes[0]) {
this.lackNotes = true;
} else {
this.lackNotes = false;
this.dataNotes = [{ title: "", description: "" }];
}
},
saveIdentityDocument(data) {
if (data?.id) {
this.docId = data.id;
@@ -659,6 +659,11 @@ export default {
.then(() => this.fetchClientDetail(this.id));
});
},
postDeleteNote(noteId) {
fetchWrapper
.del(`general/note/${noteId}/delete/`)
.then(() => this.fetchClientDetail(this.id));
},
},
watch: {
@@ -764,5 +769,5 @@ export default {
.closed-detail .detail
max-height: 0
.dots-wrapper
width: 36px
width: 53px
</style>

1
src/pages/clients/components/ClientsWrapper.vue
View File

@@ -34,4 +34,5 @@ export default {
.wrapper
overflow: auto
border-top-left-radius: 4px
border-top-right-radius: 4px
</style>

2
src/pages/clients/components/TableCreateNote.vue
View File

@@ -16,6 +16,7 @@
<script>
import BaseButton from "@/components/base/BaseButton";
import BaseInput from "@/components/base/BaseInput";
export default {
name: "TableCreateNote",
components: { BaseButton, BaseInput },
@@ -25,7 +26,6 @@ export default {
},
data() {
return {
username: "",
title: "",
description: "",
};

2
src/pages/clients/components/cells/TableCellBodyName.vue
View File

@@ -1,5 +1,5 @@
<template lang="pug">
.flex.box-border.px-8.pr-4.items-center.gap-x-3.w-full.text-sm(
.flex.box-border.px-4.items-center.gap-x-3.w-full.text-sm(
:style="{ minWidth : width + 'px', maxWidth : width + 'px' }",
)
base-avatar(:size="36", :color="avatarColor", v-if="!photo") {{avatar}}

2
src/pages/login/TheLogin.vue
View File

@@ -25,7 +25,7 @@
:type="changeType",
placeholder="Введите ваш пароль"
)
img.absolute.z-10.right-4.bottom-14px.cursor-pointer(:src="changeIcon", alt="eyePassword", @click="changeView")
img.absolute.z-10.right-4.bottom-10px.cursor-pointer(:src="changeIcon", alt="eyePassword", @click="changeView")
span.font-medium(:style="{color: this.redColor}", v-show="wrongData") Неверный логин или пароль
.flex.items-center.gap-x-11px
input.w-4.h-4.checkbox.cursor-pointer(@click="persist", type="checkbox")

1
src/pages/medicalCard/components/MedicalCardWrapper.vue
View File

@@ -11,6 +11,7 @@ export default { name: "MedicalCardWrapper" };
.wrapper
overflow: auto
border-top-left-radius: 4px
border-top-right-radius: 4px
.wrapper-medical
background-color: var(--default-white)
height: calc(100vh - 64px)

86
src/pages/schedule/TheSchedule.vue Normal file
View File

@@ -0,0 +1,86 @@
<template lang="pug">
.wrapper.flex.w-full.relative.mx-2
.schedule-wrapper.relative.flex.flex-col.px-6.py-6.h-full.w-full
.schedule.flex-col
.schedule-header.flex.w-full
.flex.items-center(:style="{padding: '16px 102px'}")
.text.font-bold Сотрудник
.column-wrapper.flex
.schedule-column.flex.flex-col.items-center.justify-center.px-2(
v-for="day in result",
:style="{backgroundColor: day.format('ddd') === 'сб' || day.format('ddd') === 'вс' ? 'var(--bg-white-color-1)' : ''}"
)
.day.flex {{day.format("D")}}
.week.flex {{day.format("ddd")}}
.schedule-body.flex.w-full
.edit.flex.items-center.justify-center.h-9.w-9
.flex.icon-edit
.name.flex
</template>
<script>
import * as moment from "moment";
export default {
name: "TheSchedule",
data() {
return {
days: "",
result: [],
startMonth: moment("2022-12-01"),
};
},
methods: {
changeDays() {
this.days = moment().daysInMonth();
},
pushMonth() {
this.result.push(this.startMonth);
for (let i = 2; i <= this.days; i++) {
this.result.push(this.startMonth.clone().add(i - 1, "d"));
}
},
},
mounted() {
this.changeDays();
this.pushMonth();
},
};
</script>
<style lang="sass" scoped>
.wrapper
overflow: auto
border-top-left-radius: 4px
border-top-right-radius: 4px
.schedule-wrapper
background-color: var(--default-white)
height: calc(100vh - 64px)
.schedule
border: 1.5px solid var(--border-light-grey-color-1)
border-radius: 4px
min-height: 87px
.schedule-header
height: 50px
background-color: #D7D9FF
border-bottom: 1.5px solid var(--border-light-grey-color-1)
border-top-left-radius: 2px
border-top-right-radius: 2px
.column-wrapper
max-width: 1080px
overflow: auto
.text
color: var(--btn-blue-color)
.name
min-width: 255px
max-width: 255px
border-right: 1.5px solid var(--border-light-grey-color-1)
.edit
border-right: 1.5px solid var(--border-light-grey-color-1)
</style>

53
src/pages/settings/TheSettings.vue
View File

@@ -1,58 +1,11 @@
<template lang="pug">
div
v-select(:items="items", placeholder="Выберите значение", v-model="value" )
BaseButton(@click="showModal = true") Открыть модалку
base-modal(v-model="showModal", title="Тестовый заголовок окна" )
base-button(@click="addNotification") Добавить уведомление
base-loader
the-schedule
</template>
<script>
import VSelect from "@/components/base/BaseSelect";
import BaseModal from "@/components/base/BaseModal";
import BaseButton from "@/components/base/BaseButton";
import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider";
import { addNotification } from "@/components/Notifications/notificationContext";
import BaseLoader from "@/components/Loader/BaseLoader";
import TheSchedule from "@/pages/schedule/TheSchedule.vue";
export default {
name: "TheSettings",
components: {
BaseLoader,
TheNotificationProvider,
BaseButton,
BaseModal,
VSelect,
},
data() {
return {
items: [
{
id: "1",
label: "12312312",
},
{
id: "2",
label: "123123afsdfasdf12",
},
{
id: "3",
label: "123fasvcbxcvbxcvbxcvbxcvdfasdfasdfasdfasd12312",
},
],
value: "",
showModal: false,
};
},
methods: {
addNotification() {
addNotification(
new Date().getTime(),
"test",
"test-text",
"warning",
3000
);
},
},
components: { TheSchedule },
};
</script>

2
src/router.js
View File

@@ -4,6 +4,7 @@ import TheUser from "@/pages/clients/TheClients";
import TheSettings from "@/pages/settings/TheSettings";
import TheLogin from "@/pages/login/TheLogin";
import LoggedInLayout from "@/components/LoggedInLayout";
import TheMedicalCard from "@/pages/medicalCard/TheMedicalCard";
const ifNotAuthenticated = (to, from, next) => {
if (!localStorage.getItem("tokenAccess")) {
@@ -37,6 +38,7 @@ export default createRouter({
{ path: "calendar", component: TheCalendar },
{ path: "clients", component: TheUser },
{ path: "settings", component: TheSettings },
{ path: "medicalCard", component: TheMedicalCard },
],
},
],

1
tailwind.config.js
View File

@@ -41,6 +41,7 @@ module.exports = {
"13px": "13px",
"14px": "14px",
"15px": "15px",
"18px": "18px",
"19px": "19px",
"22px": "22px",
"23px": "23px",