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

Merge branch 'master' into UC-37

Browse Source
This commit is contained in:
Алексей Дёмин
2022-11-03 20:06:37 +03:00
committed by GitHub
parent 2a65bbdb2a bfd18cc68d
commit aba99ac07a
17 changed files with 680 additions and 506 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
src/pages/calendar/components/CalendarFormAddEvent.vue
View File

@@ -17,32 +17,19 @@
.flex.flex-col.gap-y-2
span.text-xs.opacity-40.font-bold.leading-3 Основная информация
.flex.gap-x-4.items-center
.icon-time.text-xl.icon
.flex.gap-x-2.items-center
.time-input.flex.px-4.py-2.items-center
input.item-input.text-base.cursor-text(
v-model="startTime"
placeholder ="11:00"
)
span —
.time-input.flex.px-4.py-2.items-center
input.item-input.text-base.cursor-text(
v-model="endTime"
placeholder ="12:30"
)
.flex.items-center.ml-10
base-input-date(v-model:value="eventDate")
.flex.items-center
.flex.gap-x-2.items-center
.date-input.flex.px-4.py-2.items-center
input.item-input.text-base.cursor-text(
v-model="startDate"
placeholder ="2022-10-01"
)
base-input-time.item-input.text-base.cursor-text(
v-model:value="startTime",
:width-input="72"
)
span —
.date-input.flex.px-4.py-2.items-center
input.item-input.text-base.cursor-text(
v-model="endDate"
placeholder ="2022-10-01"
)
base-input-time.item-input.text-base.cursor-text(
v-model:value="endTime",
:width-input="72"
)
.flex.gap-x-4.items-center
.icon-person.text-xl.icon
base-select(
@@ -71,22 +58,24 @@
.flex.gap-x-4.items-center
span.text-xs.opacity-40.font-bold.leading-3 Контакты
base-button(
left-icon="icon-plus"
rounded secondary
:size="24"
:icon-left-size="10"
id="addContact"
@click="(e)=>addContact(e)")
left-icon="icon-plus"
rounded secondary
:size="24"
:icon-left-size="10"
id="addContact"
@click="(e)=>addContact(e)"
)
.flex.gap-x-4.items-center(
v-for="(contact, index) in listContacts"
:key="index"
)
.icon-mail.text-xl.icon
.form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
input.item-input.cursor-text.text-base(
.form-item.flex.gap-x-2.items-center
base-input(
border-none
v-model="contacts"
type="text"
placeholder="E-mail"
:width-input="72"
)
base-button.styled-button.text-base.font-semibold(
:size="40"
@@ -97,10 +86,20 @@
<script>
import BaseSelect from "@/components/base/OldBaseSelect";
import BaseInputTime from "@/components/base/BaseInputTime.vue";
import BaseInput from "@/components/base/BaseInput.vue";
import BaseInputDate from "@/components/base/BaseInputDate.vue";
import BaseButton from "@/components/base/BaseButton";
import * as moment from "moment/moment";
export default {
name: "FormChangeEvent",
components: { BaseSelect, BaseButton },
components: {
BaseSelect,
BaseButton,
BaseInput,
BaseInputDate,
BaseInputTime,
},
props: {
closeForm: Function,
ownersData: {
@@ -127,22 +126,17 @@ export default {
listContacts: [1],
memberSelectSize: 29,
kindEvents: ["Встреча", "Планерка", "Интервью", "Важная работа"],
EMPLOYEE_TYPE: "owner",
eventData: {},
members: {
member: null,
role: null,
},
contacts: [],
startTime: "",
endTime: "",
employees: {
employee: null,
role: "owner",
},
startDate: "",
endDate: "",
members: {},
employees: {},
eventDate: "",
kind: "",
id: null,
ifClearedForm: true,
};
},
computed: {
@@ -180,30 +174,17 @@ export default {
return "";
},
memberName() {
if (this.members.member) {
return this.trimMemberName(this.members.member);
}
return "";
},
eventStartTime() {
if (this.startTime && this.startDate) {
return this.addDate(this.startDate, this.startTime);
}
return "";
},
eventEndTime() {
if (this.endTime && this.endDate) {
return this.addDate(this.endDate, this.endTime);
if (this.members.person) {
return this.trimMemberName(this.members.person);
}
return "";
},
disabledButton() {
if (
this.eventStartTime &&
this.eventEndTime &&
this.employees.employee &&
this.members.member &&
this.kind
(this.eventDate,
this.startTime,
this.endTime,
this.employees.employee && this.members.person && this.kind)
) {
return false;
}
@@ -221,6 +202,16 @@ export default {
}
return 10;
},
startDate() {
return this.selectedEventData.start
? moment.parseZone(this.selectedEventData.start)
: moment();
},
endDate() {
return this.selectedEventData.end
? moment.parseZone(this.selectedEventData.end)
: moment();
},
},
methods: {
chooseOptionOwner(e) {
@@ -241,7 +232,7 @@ export default {
let foundMember = this.membersData.find(
(elem) => elem.id === e.target.id
);
this.members.member = {
this.members.person = {
id: foundMember.id,
last_name: foundMember.last_name,
first_name: foundMember.first_name,
@@ -264,7 +255,7 @@ export default {
addMember(memberName) {
let memberData = memberName.split(" ");
if (memberData.length === 3) {
this.members.member = {
this.members.person = {
id: null,
last_name: memberData[0],
first_name: memberData[1],
@@ -275,39 +266,56 @@ export default {
sendEventData() {
this.eventData = {
id: this.id,
start: this.addDate(this.startTime, this.startDate),
end: this.addDate(this.endTime, this.endDate),
start: this.mergeDate(this.eventDate, this.startTime),
end: this.mergeDate(this.eventDate, this.endTime),
kind: this.kind,
employees: [this.employees],
members: [this.members],
};
this.closeForm();
this.eventData = {};
},
addDate(time, data) {
return `${data}T${time}:00Z`;
},
trimTime(str) {
return str.slice(11, -4);
},
trimDate(str) {
return str.slice(0, 12);
mergeDate(eventDate, time) {
return moment(`${eventDate} ${time}`).format();
},
},
mounted() {
this.id = this.selectedEventData.id || null;
this.startTime = this.trimTime(this.selectedEventData.start) || "";
this.endTime = this.trimTime(this.selectedEventData.end) || "";
this.kind = this.selectedEventData.kind || "";
this.employees = this.selectedEventData.employees[0] || {
employee: null,
role: "owner",
};
this.members = this.selectedEventData.members[0] || {
member: null,
role: null,
};
this.startDate = this.trimDate(this.selectedEventData.start);
this.endDate = this.trimDate(this.selectedEventData.end);
watch: {
startDate: {
immediate: true,
handler(newDate) {
if (newDate) {
this.eventDate = newDate.format("YYYY-MM-DD");
this.startTime = newDate.format("HH:mm");
}
},
},
endDate: {
immediate: true,
handler(newDate) {
if (newDate) {
this.endTime = newDate.format("HH:mm");
}
},
},
selectedEventData: {
immediate: true,
handler(newDate) {
if (newDate) {
this.id = this.selectedEventData.id || null;
this.kind = this.selectedEventData.kind || "";
this.employees = this.selectedEventData.employees[0] || {
id: null,
employee: null,
role: this.EMPLOYEE_TYPE,
};
this.members = this.selectedEventData.members[0] || {
id: null,
person: null,
role: this.EMPLOYEE_TYPE,
};
}
},
},
},
};
</script>
@@ -316,7 +324,7 @@ export default {
.event-form
height: fit-content
min-width: 448px
background-color: var(--default-white)
background-color: var(--bg-ligth-blue-color)
box-shadow: -4px -4px 16px rgba(9, 10, 21, 0.25), 4px 4px 16px rgba(9, 10, 21, 0.25)
border-radius: 4px
z-index: 5
@@ -324,14 +332,13 @@ export default {
.form-item
border-radius: 4px
width: 344px
background-color: var(--bg-ligth-blue-color)
background-color: var(--default-white)
.item-input
appearance: none
border: none
outline: none
color: var(--font-black-color)
background-color: var(--font-black-color-0)
height: 40px
&::-webkit-calendar-picker-indicator
display: none
-webkit-appearance: none
@@ -341,12 +348,12 @@ export default {
.time-input
width: 72px
border-radius: 4px
background-color: var(--bg-ligth-blue-color)
background-color: var(--default-white)
.date-input
width: 120px
width: 174px
border-radius: 4px
background-color: var(--bg-ligth-blue-color)
background-color: var(--default-white)
.icon
width: 24px

4
src/pages/calendar/components/CalendarSchedule.vue
View File

@@ -120,10 +120,12 @@ export default {
employees: {
employee: null,
role: "owner",
id: null,
},
members: {
member: null,
person: null,
role: null,
id: null,
},
},
};

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

@@ -17,6 +17,7 @@
</template>
<script>
import { fetchWrapper } from "@/shared/fetchWrapper.js";
import ClientsTableHeader from "@/pages/clients/components/ClientsTableHeader";
import ClientsTableHat from "@/pages/clients/components/ClientsTableHat";
import ClientsTableRow from "@/pages/clients/components/ClientsTableRow";

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

@@ -2,7 +2,7 @@
.login-wrapper.flex
.left-col.flex.flex-col.items-center
.logo-wrapper.absolute.left-12.top-12
img(src="@/assets/images/logoText.svg" alt="logoText")
img(:src="logoMark")
.login-panel.flex.flex-col.justify-center.gap-y-10
.flex.flex-col.gap-y-2
.text-welcome.flex.not-italic.font-bold.text-5xl Добро пожаловать!
@@ -11,21 +11,26 @@
.flex.flex-col.gap-y-5
.flex.flex-col.gap-y-6px
.flex.non-italic.font-semibold.text-xss Логин
base-input.h-12.font-medium(v-model:value="user.username", type="text", placeholder="Введите ваш логин")
base-input.h-12.font-medium(
:style="{borderColor: !this.authorized ? this.redColor : ''}"
v-model:value="user.username"
type="text"
placeholder="Введите ваш логин")
.flex.flex-col.gap-y-6px.relative
.flex.non-italic.font-semibold.text-xss Пароль
base-input.h-12(v-model:value="user.password", :type="changeType", placeholder="Введите ваш пароль")
base-input.h-12(
:style="{borderColor: this.authorized ? '' : this.redColor}"
v-model:value="user.password"
:type="changeType"
placeholder="Введите ваш пароль")
img.absolute.z-10.right-4.bottom-14px.cursor-pointer(:src="changeIcon", alt="eyePassword", @click="changeView")
span.font-medium(:style="{color: this.redColor}", v-show="!authorized") Неверный логин или пароль
.flex.items-center.gap-x-11px
input.w-4.h-4.checkbox.cursor-pointer(@click="persist", type="checkbox")
.flex.non-italic.font-medium.base Запомнить меня
base-button.font-semibold(:disabled="disabledButton", :size="48", @click="login") Войти в аккаунт
.absolute.left-12.bottom-12 2022 © Астра
.right-col.flex.items-center.justify-center.relative
img.absolute.z-10(src="@/assets/images/bigLogo.svg" alt="bigLogo")
img.absolute.z-10.absolute.left-0.bottom-0(src="@/assets/images/ellipseBottom.svg" alt="ellipseBottom")
img.absolute.z-10.absolute.right-0.top-0(src="@/assets/images/ellipseTop.svg" alt="ellipseTop")
img.opacity-10(src="@/assets/images/dots.svg" alt="Logo")
</template>
<script>
@@ -33,6 +38,9 @@ import BaseInput from "@/components/base/BaseInput";
import BaseButton from "@/components/base/BaseButton";
import viewPasswordIcon from "@/assets/icons/eye.svg";
import hidePasswordIcon from "@/assets/icons/openEye.svg";
import loginBackground from "@/assets/images/loginBG.svg";
import logoMark from "@/assets/images/logoMark.svg";
export default {
name: "TheLogin",
components: { BaseInput, BaseButton },
@@ -42,7 +50,11 @@ export default {
isView: false,
viewPassword: viewPasswordIcon,
hidePassword: hidePasswordIcon,
loginBackground,
logoMark,
authorized: true,
user: { username: "", password: "" },
redColor: "var(--border-red-color)",
};
},
computed: {
@@ -60,6 +72,7 @@ export default {
changeView() {
this.isView = !this.isView;
},
persist() {
localStorage.username = this.user.username;
localStorage.password = this.user.password;
@@ -71,9 +84,20 @@ export default {
body: JSON.stringify(this.user),
};
fetch("http://45.84.227.122:8080/auth/jwt/create/", requestOptions)
.then((result) => result.json())
.then((result) => {
if (result.status === 200) {
return result.json();
} else {
return (this.authorized = false);
}
})
.then((token) => {
localStorage.setItem("tokenAccess", token.access);
if (token) {
localStorage.setItem("tokenAccess", token.access);
this.$router.push("/");
} else {
this.$router.push("/login");
}
});
},
},
@@ -96,8 +120,7 @@ export default {
justify-content: center
background-color: var(--default-white)
height: 100%
width: 812px
flex: 1 1 auto
width: 40%
.logo-wrapper
width: 89.28px
height: 74.64px
@@ -111,7 +134,10 @@ export default {
border-width: 1.5px
.right-col
height: 100%
width: 1105px
background-color: var(--font-dark-blue-color)
flex: 1 1 auto
width: 60%
background-image: url("@/assets/images/loginBG.svg")
background-size: cover
background-repeat: no-repeat
background-position: center
</style>