review, edit-team-modal, header responsive

This commit is contained in:
romankko2 committed 2022-11-30 19:48:52 +01:00
1 parent df4fe36576
commit 66996747f4
18 files changed
+162 -193

No files matched your search

@@ -11,7 +11,7 @@
></v-icon>
</div>
<v-card-actions class="mt-10 d-flex justify-start align-center">
<v-btn class="create-btn" variant="flat" @click="$emit('delete-task', task.id)">ÁNO</v-btn>
<v-btn class="z-btn" variant="flat" @click="$emit('delete-task', task.id)">ÁNO</v-btn>
<v-btn class="ml-7 cancel-btn" @click.stop="$emit('close-modal')">ZRUŠIŤ</v-btn>
</v-card-actions>
</v-card>
@@ -41,14 +41,3 @@ export default {
}
}
</script>
<style lang="sass" scoped>
.cancel-btn
border: thin solid rgba(var(--v-border-color), var(--v-border-opacity))
color: #7f39fb
.create-btn
background: #7f39fb
border-radius: 4px
color: #fff
</style>
@@ -10,7 +10,7 @@
></v-icon>
</div>
<v-card-actions class="mt-10 d-flex justify-start align-center">
<v-btn class="create-btn" variant="flat" @click="$emit('delete-team', team.id)">ÁNO</v-btn>
<v-btn class="z-btn" variant="flat" @click="$emit('delete-team', team.id)">ÁNO</v-btn>
<v-btn class="ml-7 cancel-btn" @click.stop="$emit('close-modal')">ZRUŠIŤ</v-btn>
</v-card-actions>
</v-card>
@@ -40,14 +40,3 @@ export default {
}
}
</script>
<style lang="sass" scoped>
.cancel-btn
border: thin solid rgba(var(--v-border-color), var(--v-border-opacity))
color: #7f39fb
.create-btn
background: #7f39fb
border-radius: 4px
color: #fff
</style>
@@ -1,11 +1,11 @@
<template>
<v-dialog v-model="show" max-width="650" max-height="90%" height="700px">
<!-- <W-loadable :content="employees" class="h-100"> -->
<v-card height="100%" class="d-flex flex-column">
<v-dialog v-model="showModal" max-width="650" max-height="90%" height="700px">
<W-loadable :content="employees" class="h-100">
<v-card v-if="employees" height="100%" class="d-flex flex-column">
<div class="d-flex justify-space-between align-center modal-header">
<h1>Editovať tím</h1>
<v-icon
@click.stop="show = false"
@click.stop="$emit('close-modal')"
icon="mdi-close"
size="large"
></v-icon>
@@ -14,8 +14,9 @@
<v-card-actions class="d-flex flex-column modal-content">
<v-text-field
class="modal-input"
label='teams.name'
label="Názov tímu"
variant="outlined"
v-model="teamName"
></v-text-field>
<div class="employee-position w-100" v-for="(employee, index) in selectedEmployees" :key="employee.id">
@@ -24,7 +25,7 @@
disabled
label="Zamestanec"
variant="outlined"
v-model="selectedEmployees[index].surname"
v-model="selectedEmployees[index]._fullName"
>
</v-text-field>
<v-icon
@@ -35,108 +36,121 @@
></v-icon
>
</div>
<v-autocomplete
class="modal-input"
label="Vyhľadať"
variant="outlined"
:items="employeesOptions"
v-model="selectedEmployee"
></v-autocomplete>
<W-autocomplete :options="employeesOptions" class="modal-input" @option-selected="employeeSelected" />
</v-card-actions>
<v-btn class="create-btn" @click="editTeam()">ULOŽIŤ</v-btn>
<v-btn class="z-btn" @click="editTeam()">EDITOVAŤ</v-btn>
</v-card>
<!-- </W-loadable> -->
</W-loadable>
</v-dialog>
</template>
<script>
export default {
props: [
'visible'
],
import WAutocomplete from './w-autocomplete.vue'
data() {
return {
// teams: null,
// selectedEmployee: "",
// selectedEmployees: [],
// currentEmployees: null,
export default {
emits: ['close-modal'],
components: {
WAutocomplete
},
props: {
show: {
type: Boolean,
required: true
},
team: {
type: Object,
required: true
}
},
// async created() {
// try {
// this.currentEmployees = await this.$axios.get_auth_data("v1/employees");
// } catch (error) {
// console.log(error)
// }
// },
data() {
return {
selectedEmployee: "",
selectedEmployees: [],
employees: null,
teamName: this.team.name
}
},
async created() {
try {
this.employees = await this.$axios.get_auth_data('v1/employees')
} catch (error) {
console.log(error)
}
},
methods: {
// removeInput(index) {
// this.selectedEmployees.splice(index, 1)
// },
removeInput(index) {
this.selectedEmployees.splice(index, 1)
},
// async editTeam(id) {
// try{
// this.teams = await this.$axios.get_auth_data(`v1/teams/${id}`)
// this.$router.push({ name: 'Overview - Teams' })
// this.show = false
// } catch (error) {
// this.$toast.error(error.response.data.error)
// }
// }
employeeSelected(selectedOption) {
const employee = this.employees.find(empl => empl.id == selectedOption.key)
employee._fullName = `${employee.name} ${employee.surname}`
this.selectedEmployees.push(employee)
},
async editTeam() {
try{
await this.$axios.post_auth('v1/teams')
this.$router.push({ name: 'Overview - Teams' })
this.showModal = false
} catch (error) {
this.$toast.error(error.response.data.error)
}
}
},
computed: {
// employeesOptions() {
// const selectedEmployeesIds = this.selectedEmployees.map(
// (employee) => employee.id
// );
// const currentEmployees = this.currentEmployees.filter(
// (employee) => !selectedEmployeesIds.includes(employee.id)
// );
employeesOptions() {
const selectedEmployeesIds = this.selectedEmployees.map(
(employee) => employee.id
)
const employees = this.employees.filter(
(employee) => !selectedEmployeesIds.includes(employee.id)
)
// return currentEmployees.map(
// (employee) => `${employee.name} ${employee.surname}`
// );
// },
show: {
get() {
return this.visible;
return employees.map(employee => {
return {
key: employee.id,
value: `${employee.name} ${employee.surname}`
}
})
},
set(value) {
if (!value) this.$emit('close')
},
},
showModal() {
return this.show
}
},
// watch: {
// selectedEmployee() {
// const selectedEmployee = this.selectedEmployee.split(" ");
watch: {
selectedEmployee() {
const selectedEmployee = this.selectedEmployee.split(" ")
// const employee = this.currentEmployees.find(
// (e) =>
// e.name == selectedEmployee[0] &&
// e.surname == selectedEmployee[1]
// );
const employee = this.employees.find(
(e) =>
e.name == selectedEmployee[0] &&
e.surname == selectedEmployee[1]
)
// this.currentEmployees.push(JSON.parse(JSON.stringify(employee)));
// // this.selectedEmployee = ''
// },
// },
};
this.selectedEmployees.push(JSON.parse(JSON.stringify(employee)))
},
},
}
</script>
<style lang="sass" scoped>
.modal-input
width: 100%
flex: 0 0 auto
.modal-header
flex: 0 0 auto
@@ -145,13 +159,10 @@ export default {
margin: 10px 0
overflow-y: scroll
.create-btn
.z-btn
height: 50px
width: 100%
flex: 0 0 auto
background: #7f39fb
border-radius: 4px
color: #fff
.remove-input
pointer-events: auto
@@ -36,23 +36,11 @@
>
</div>
<!-- <v-btn class="add-btn">
<v-icon icon="mdi-plus" size="large"></v-icon>PRIDAŤ
ZAMESTNANCA</v-btn
> -->
<!-- <v-autocomplete
class="modal-input"
label="Vyhľadať"
variant="outlined"
:items="employeesOptions"
v-model="selectedEmployee"
></v-autocomplete> -->
<W-autocomplete :options="employeesOptions" class="modal-input" @option-selected="employeeSelected" />
</v-card-actions>
<v-btn class="create-btn" @click="createTeam()">VYTVORIŤ</v-btn>
<v-btn class="z-btn" @click="createTeam()">VYTVORIŤ</v-btn>
</v-card>
</W-loadable>
</v-dialog>
@@ -75,12 +63,12 @@ export default {
selectedEmployee: "",
selectedEmployees: [],
employees: null,
};
}
},
async created() {
try {
this.employees = await this.$axios.get_auth_data("v1/employees");
this.employees = await this.$axios.get_auth_data('v1/employees')
} catch (error) {
console.log(error)
}
@@ -113,10 +101,10 @@ export default {
employeesOptions() {
const selectedEmployeesIds = this.selectedEmployees.map(
(employee) => employee.id
);
)
const employees = this.employees.filter(
(employee) => !selectedEmployeesIds.includes(employee.id)
);
)
return employees.map(employee => {
return {
@@ -128,7 +116,7 @@ export default {
show: {
get() {
return this.visible;
return this.visible
},
set(value) {
@@ -139,32 +127,24 @@ export default {
watch: {
selectedEmployee() {
const selectedEmployee = this.selectedEmployee.split(" ");
const selectedEmployee = this.selectedEmployee.split(" ")
const employee = this.employees.find(
(e) =>
e.name == selectedEmployee[0] &&
e.surname == selectedEmployee[1]
);
)
this.selectedEmployees.push(JSON.parse(JSON.stringify(employee)));
// this.selectedEmployee = ''
this.selectedEmployees.push(JSON.parse(JSON.stringify(employee)))
},
},
};
}
</script>
<style lang="sass" scoped>
.modal-input
width: 100%
flex: 0 0 auto
// .add-btn
// color: #6200EE
// background: #fff
// border: thin solid rgba(var(--v-border-color), var(--v-border-opacity))
// height: 50px
// width: 100%
.modal-header
flex: 0 0 auto
@@ -173,13 +153,10 @@ export default {
margin: 10px 0
overflow-y: scroll
.create-btn
.z-btn
height: 50px
width: 100%
flex: 0 0 auto
background: #7f39fb
border-radius: 4px
color: #fff
.remove-input
pointer-events: auto
@@ -5,13 +5,15 @@
<div class="d-flex justify-space-between align-center w-100">
<h1>{{ $route.meta.title }}</h1>
<div class="d-flex justify-end align-center w-100">
<img class="search-icon mx-3" :src="require('@/plugins/app/_layout/app/_img/search-icon.svg')" alt="search-icon" />
<div class="d-flex justify-end align-center w-100 header-sm">
<img class="search-icon" :src="require('@/plugins/app/_layout/app/_img/search-icon.svg')" alt="search-icon" />
<input class="search-input mx-2" type="text" placeholder="Vyhľadávanie" />
<v-menu>
<template v-slot:activator="{ props }">
<v-btn v-bind="props" class="button mr-5">+<span class="responsive-btn">Vytvoriť</span></v-btn>
<v-btn v-bind="props" class="button mr-5">
<v-icon icon="mdi-plus" size="large"></v-icon>Vytvoriť
</v-btn>
</template>
<v-list>
@@ -84,11 +86,6 @@ export default {
border-bottom: 1px solid rgba(0, 0, 0, 0.2)
padding: 25px 15px
.button
background: #7f39fb
border-radius: 4px
color: #fff
.menu-icon
display: none
@@ -100,7 +97,10 @@ export default {
padding: 6px
border-radius: 6px
.button
background: #7f39fb
border-radius: 4px
color: #fff
.menu-dropdown
border: 1px solid rgba(33, 33, 33, 0.08) !important
border-radius: 16px
@@ -118,6 +118,10 @@ export default {
background-color: rgba(0, 0, 0, var(--v-hover-opacity))
cursor: pointer
@media (max-width: 1173px)
.employee-name
display: none
@media (max-width: 991px)
.menu-icon
display: block !important
@@ -125,6 +129,10 @@ export default {
h1
display: none
.employee-name
display: none
@media (max-width: 560px)
.header
padding: 40px 0
.header-sm
justify-content: center !important
flex-wrap: wrap
</style>
@@ -2,7 +2,7 @@
<ion-menu ref="menu" content-id="main-content">
<ion-content>
<img
class="logo"
class="py-5 px-5"
:src="require('@/plugins/app/_layout/_img/jandl-logo.svg')"
alt="jandl-logo"
/>
@@ -12,17 +12,10 @@
v-for="page in pages"
:key="page.pageName"
:class="{ active: isActive(page.pageName) }"
@click="
$router.push({ name: page.pageName });
closeMenu()
"
>
{{ page.title
}}<span
@click="$router.push({ name: page.pageName }); closeMenu()"> {{ page.title }}
<span
v-if="page.pageName == 'Overview - Unscheduled tasks'"
class="mx-1 unfinished-tasks"
>{{ unscheduledTasksLength }}</span
>
class="mb-4 text-center rounded-circle badge">{{ unscheduledTasksLength }}</span>
</ion-item>
</ion-list>
</ion-content>
@@ -33,6 +26,7 @@
export default {
data() {
return {
unscheduledTasksLength: null,
pages: [{
title: 'Úlohy',
pageName: 'Dashboard - Tasks'
@@ -88,9 +82,6 @@ export default {
</script>
<style lang="sass" scoped>
img.logo
padding: 20px
ion-item
font-weight: 500 !important
--background: #fff
@@ -107,24 +98,12 @@ ion-item
.badge
color: #fff
background: #B00020
width: 30px
height: 30px
border-radius: 15px
line-height: 30px
margin: 0 0 0 7px
text-align: center
height: 17px
width: 17px
font-size: 12px
@media (min-width: 992px)
ion-menu
width: 300px
--width: 300px
.unfinished-tasks
color: #fff
background: #B00020
border-radius: 50%
margin-bottom: 15px
height: 25px
width: 25px
text-align: center
</style>
@@ -0,0 +1,3 @@
.cancel-btn
border: thin solid rgba(var(--v-border-color), var(--v-border-opacity)) !important
color: #7f39fb !important
@@ -0,0 +1,4 @@
.z-btn
background: #7f39fb !important
border-radius: 4px !important
color: #fff !important
+2
View File
@@ -1,6 +1,8 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap')
@import './vuetify/v-dialog'
@import './_components/z-default-btn'
@import './_components/z-cancel-btn'
@import './global'
@import '@/plugins/lib@auth/_theme/auth.theme'
+1 -1
View File
@@ -1,2 +1,2 @@
[] Nastav atributy pre automaticke ponukanie values do fieldov -> https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
[x] Nastav atributy pre automaticke ponukanie values do fieldov -> https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
[] Pridaj toasty (napr vue-toast) a naintegruj to do toho nasho pluginu
@@ -1,6 +1,6 @@
<template>
<v-form>
<v-text-field v-model="form.email" variant="solo" bg-color="white" :hint="v$.form.email.$errors ? errorUtils.parseErrors(v$.form.email.$errors) : null" :class="{ error: v$.form.email.$errors.length }" class="mb-2" label="E-mail" autocomplete="off" />
<v-text-field v-model="form.email" variant="solo" bg-color="white" :hint="v$.form.email.$errors ? errorUtils.parseErrors(v$.form.email.$errors) : null" :class="{ error: v$.form.email.$errors.length }" class="mb-2" label="E-mail" autocomplete="email" />
<div class="d-flex flex-column">
<v-btn class="button" color="#7F39FB" @click="submit()">Poslať kód</v-btn>
@@ -1,8 +1,8 @@
<template>
<v-form>
<v-text-field v-model="form.email" label="E-mail" variant="solo" autocomplete="off" class="mb-2" bg-color="white" :hint="v$.form.email.$errors ? errorUtils.parseErrors(v$.form.email.$errors) : null" :class="{ error: v$.form.email.$errors.length }" />
<v-text-field v-model="form.email" label="E-mail" variant="solo" autocomplete="email" class="mb-2" bg-color="white" :hint="v$.form.email.$errors ? errorUtils.parseErrors(v$.form.email.$errors) : null" :class="{ error: v$.form.email.$errors.length }" />
<v-text-field v-model="form.password" :type="showPassword ? 'text' : 'password'" variant="solo" bg-color="white" class="mb-2" :counter="8" label="Heslo" autocomplete="off" :hint="v$.form.password.$errors ? errorUtils.parseErrors(v$.form.password.$errors) : null"
<v-text-field v-model="form.password" :type="showPassword ? 'text' : 'password'" variant="solo" bg-color="white" class="mb-2" :counter="8" label="Heslo" autocomplete="current-password" :hint="v$.form.password.$errors ? errorUtils.parseErrors(v$.form.password.$errors) : null"
:class="{ error: v$.form.password.$errors.length }" :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'" @click:append="showPassword = !showPassword" />
<div class="d-flex flex-column">
@@ -1,12 +1,12 @@
<template>
<v-form>
<v-text-field v-model="form.code" label="Kód" bg-color="white" variant="solo" type="number" class="mb-2" :hint="v$.form.code.$errors ? errorUtils.parseErrors(v$.form.code.$errors) : null" :counter="6" :class="{ error: v$.form.code.$errors.length }" />
<v-text-field v-model="form.code" label="Kód" autocomplete="one-time-code" bg-color="white" variant="solo" type="number" class="mb-2" :hint="v$.form.code.$errors ? errorUtils.parseErrors(v$.form.code.$errors) : null" :counter="6" :class="{ error: v$.form.code.$errors.length }" />
<v-text-field v-model="form.email" label="E-mail" bg-color="white" variant="solo" type="email" class="mb-2" :hint="v$.form.email.$errors ? errorUtils.parseErrors(v$.form.email.$errors) : null" :class="{ error: v$.form.email.$errors.length }" />
<v-text-field v-model="form.email" label="E-mail" autocomplete="email" bg-color="white" variant="solo" type="email" class="mb-2" :hint="v$.form.email.$errors ? errorUtils.parseErrors(v$.form.email.$errors) : null" :class="{ error: v$.form.email.$errors.length }" />
<v-text-field v-model="form.password" label="Heslo" bg-color="white" variant="solo" :type="showPassword ? 'text' : 'password'" class="mb-2" :hint="v$.form.password.$errors ? errorUtils.parseErrors(v$.form.password.$errors) : null" :class="{ error: v$.form.password.$errors.length }" :counter="8" :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'" @click:append="showPassword = !showPassword" />
<v-text-field v-model="form.password" label="Heslo" autocomplete="new-password" bg-color="white" variant="solo" :type="showPassword ? 'text' : 'password'" class="mb-2" :hint="v$.form.password.$errors ? errorUtils.parseErrors(v$.form.password.$errors) : null" :class="{ error: v$.form.password.$errors.length }" :counter="8" :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'" @click:append="showPassword = !showPassword" />
<v-text-field v-model="form.password_confirmation" bg-color="white" variant="solo" label="Potvrdenie hesla" :type="showConfirmationPassword ? 'text' : 'password'" :counter="8" class="mb-2" :hint="v$.form.password_confirmation.$errors ? errorUtils.parseErrors(v$.form.password_confirmation.$errors) : null" :class="{ error: v$.form.password_confirmation.$errors.length }" :append-icon="showConfirmationPassword ? 'mdi-eye' : 'mdi-eye-off'" @click:append="showConfirmationPassword = !showConfirmationPassword" />
<v-text-field v-model="form.password_confirmation" autocomplete="new-password" bg-color="white" variant="solo" label="Potvrdenie hesla" :type="showConfirmationPassword ? 'text' : 'password'" :counter="8" class="mb-2" :hint="v$.form.password_confirmation.$errors ? errorUtils.parseErrors(v$.form.password_confirmation.$errors) : null" :class="{ error: v$.form.password_confirmation.$errors.length }" :append-icon="showConfirmationPassword ? 'mdi-eye' : 'mdi-eye-off'" @click:append="showConfirmationPassword = !showConfirmationPassword" />
<div class="d-flex flex-column">
<v-btn class="button" color="#7F39FB" @click="submit()">Zmeniť heslo</v-btn>
@@ -55,6 +55,7 @@ export default {
try {
await this.$axios.delete(`v1/teams/${id}`)
this.showDeleteModal = false
this.$toast.success('Úspešne ste odstránili task')
} catch (error) {
this.$toast.error(error)
}
@@ -22,7 +22,7 @@ export default {
try {
this.ongoingTasks = await this.$axios.get_auth_data('v1/overview/ongoing-tasks')
} catch (error) {
this.unscheduledTasks = {error: error.data.error}
this.ongoingTasks = {error: error.data.error}
this.$toast.error(error.data.error)
}
}
@@ -53,6 +53,7 @@ export default {
try {
await this.$axios.delete(`v1/teams/${id}`)
this.showDeleteModal = false
this.$toast.success('Úspešne ste odstránili task')
} catch (error) {
this.$toast.error(error)
}
@@ -12,9 +12,9 @@
<td>{{ team.name }}</td>
<td class="task-action">
<div class="d-flex justify-start">
<img class="pencil-icon" :src="require('@/plugins/tm@overview/_img/pencil-icon.svg')" alt="pencil-icon" />
<img class="pencil-icon" :src="require('@/plugins/tm@overview/_img/pencil-icon.svg')" alt="pencil-icon" @click.stop="showEditModal = true" />
<img class="trash-icon" :src="require('@/plugins/tm@overview/_img/trash-icon.svg')" alt="trash-icon" @click.stop="showDeleteModal = true" />
<A-edit-team-modal :show="showEditModal" :team="team" @close-modal="showEditModal = false" />
<A-delete-team-modal :show="showDeleteModal" :team="team" @delete-team="deleteTeam" @close-modal="showDeleteModal = false" />
</div>
</td>
@@ -25,10 +25,12 @@
<script>
import ADeleteTeamModal from '@/plugins/app/_components/a-delete-team-modal.vue'
import AEditTeamModal from '@/plugins/app/_components/a-edit-team-modal.vue'
export default {
components: {
ADeleteTeamModal
ADeleteTeamModal,
AEditTeamModal
},
props: {
@@ -40,7 +42,8 @@ export default {
data() {
return {
showDeleteModal: false
showDeleteModal: false,
showEditModal: false
}
},
@@ -49,6 +52,7 @@ export default {
try {
await this.$axios.delete(`v1/teams/${id}`)
this.showDeleteModal = false
this.$toast.success('Úspešne ste odstránili tím')
} catch (error) {
this.$toast.error(error)
}
+2 -1
View File
@@ -22,7 +22,8 @@ export default {
try {
this.teams = await this.$axios.get_auth_data('v1/teams')
} catch (error) {
console.error(error)
this.teams = {error: error.data.error}
this.$toast.error(error.data.error)
}
}
}