mirror of
https://bitbucket.org/studiotem/jandl-taskmanager-app.git
synced 2026-10-21 14:29:34 +00:00
[Calendar] Fixed non working hours, added blockers to teams
This commit is contained in:
Matej Glasnák committed
1 parent
f3f86261f4
commit
11c73b2b37
8 files changed
+281
-212
No files matched your search
@@ -3,70 +3,44 @@
|
||||
<W-loadable :content="blocker" class="h-100">
|
||||
<v-card height="100%" class="d-flex flex-column">
|
||||
<div class="d-flex justify-space-between align-center modal-header">
|
||||
<h1>{{ blocker.id ? 'Upraviť' : 'Vytvoriť'}} blocker</h1>
|
||||
<v-icon
|
||||
@click.stop="closeModal()"
|
||||
icon="mdi-close"
|
||||
size="large"
|
||||
></v-icon>
|
||||
<h1>{{ blocker.id ? "Upraviť" : "Vytvoriť" }} blocker</h1>
|
||||
<v-icon @click.stop="closeModal()" icon="mdi-close" size="large"></v-icon>
|
||||
</div>
|
||||
|
||||
<v-card-actions class="d-flex flex-column modal-content">
|
||||
<v-text-field
|
||||
@focus="onInputFocus"
|
||||
class="modal-input"
|
||||
label="Názov blockeru"
|
||||
:class="{ error: v$.blocker.name.$errors.length }"
|
||||
:hint="
|
||||
v$.blocker.name.$errors
|
||||
? errorUtils.parseErrors(v$.blocker.name.$errors)
|
||||
: null
|
||||
"
|
||||
v-model="blocker.name"
|
||||
variant="solo"
|
||||
></v-text-field>
|
||||
<v-select v-model="blocker.employee_id" ref="employee-select" @focus="onInputFocus" class="modal-input border-select" label="Priradený" :class="{ error: v$.blocker.employee_id.$errors.length }" variant="solo" :items="enrichedEmployees" item-value="id" item-title="_fullName"></v-select>
|
||||
<Datepicker
|
||||
class="modal-input mb-5"
|
||||
v-model="datepicker"
|
||||
format="dd.MM.yyyy"
|
||||
locale="sk"
|
||||
:class="{ error: v$.datepicker.$errors?.length }"
|
||||
:validations="v$.datepicker"
|
||||
select-text="Vybrať"
|
||||
cancel-text="Zrušiť"
|
||||
placeholder="Dátum"
|
||||
:enable-time-picker="false"
|
||||
ref="datepicker"
|
||||
/>
|
||||
<v-text-field @focus="onInputFocus" class="modal-input" label="Názov blockeru" :class="{ error: v$.blocker.name.$errors.length }" :hint="v$.blocker.name.$errors ? errorUtils.parseErrors(v$.blocker.name.$errors) : null" v-model="blocker.name" variant="solo"></v-text-field>
|
||||
|
||||
<Z-autocomplete label="Vyhľadať zamestnanca" :value="blocker?.employee ? `${blocker?.employee?.name} ${blocker?.employee?.surname}` : ''" :options="enrichedEmployees.map(employee => ({key: employee.id, value: employee._fullName}))" :clear-on-submit="false" :class="{ error: v$.blocker.employee.$errors.length }" class="modal-input" @option-selected="onEmployeeSelected" />
|
||||
<Datepicker class="modal-input mb-5" v-model="datepicker" format="dd.MM.yyyy" locale="sk" :class="{ error: v$.datepicker.$errors?.length }" :validations="v$.datepicker" select-text="Vybrať" cancel-text="Zrušiť" placeholder="Dátum" :enable-time-picker="false" ref="datepicker" />
|
||||
|
||||
<v-text-field v-model="starts_at_time" type="time" variant="solo" bg-color="white" :hint="v$.starts_at_time.$errors ? errorUtils.parseErrors(v$.starts_at_time.$errors) : null" :class="{ error: v$.starts_at_time.$errors.length }" class="mb-1 modal-input" label="Začiatok" />
|
||||
<v-text-field v-model="ends_at_time" type="time" variant="solo" bg-color="white" :hint="v$.ends_at_time.$errors ? errorUtils.parseErrors(v$.ends_at_time.$errors) : null" :class="{ error: v$.ends_at_time.$errors.length }" class="modal-input" label="Koniec" />
|
||||
<v-text-field v-model="ends_at_time" type="time" variant="solo" bg-color="white" :hint="v$.ends_at_time.$errors ? errorUtils.parseErrors(v$.ends_at_time.$errors) : null" :class="{ error: v$.ends_at_time.$errors.length }" class="modal-input" label="Koniec" />
|
||||
</v-card-actions>
|
||||
|
||||
<v-btn class="button primary" @click="save()">{{ blocker.id ? 'UPRAVIŤ' : 'VYTVORIŤ'}}</v-btn>
|
||||
<v-btn class="button primary" @click="save()">{{ blocker.id ? "UPRAVIŤ" : "VYTVORIŤ" }}</v-btn>
|
||||
</v-card>
|
||||
</W-loadable>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Datepicker from '@vuepic/vue-datepicker'
|
||||
import useVuelidate from '@vuelidate/core'
|
||||
import { required } from '@vuelidate/validators'
|
||||
import errorUtils from '@/plugins/lib@auth/_utils/error.utils'
|
||||
import VuetifyFixFocusMixin from '@/plugins/tm@modal/_mixins/vuetify-fix-focus'
|
||||
import tmUtils from '@/plugins/tm@_utils/tm.utils'
|
||||
import { mapGetters } from 'vuex'
|
||||
import moment from 'moment'
|
||||
import Datepicker from "@vuepic/vue-datepicker"
|
||||
import useVuelidate from "@vuelidate/core"
|
||||
import { required } from "@vuelidate/validators"
|
||||
import errorUtils from "@/plugins/lib@auth/_utils/error.utils"
|
||||
import VuetifyFixFocusMixin from "@/plugins/tm@modal/_mixins/vuetify-fix-focus"
|
||||
import { mapGetters } from "vuex"
|
||||
import moment from "moment"
|
||||
import ZAutocomplete from '@/plugins/tm@_components/z-autocomplete.vue'
|
||||
|
||||
export default {
|
||||
mixins: [VuetifyFixFocusMixin],
|
||||
|
||||
emits: ['close'],
|
||||
emits: ["close"],
|
||||
|
||||
components: {
|
||||
Datepicker
|
||||
Datepicker,
|
||||
ZAutocomplete
|
||||
},
|
||||
|
||||
data() {
|
||||
@@ -82,13 +56,9 @@ export default {
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapGetters('tm', [
|
||||
'enrichedEmployees'
|
||||
]),
|
||||
...mapGetters("tm", ["enrichedEmployees"]),
|
||||
|
||||
...mapGetters('auth', [
|
||||
'user'
|
||||
])
|
||||
...mapGetters("auth", ["user"])
|
||||
},
|
||||
|
||||
validations() {
|
||||
@@ -97,7 +67,7 @@ export default {
|
||||
name: { required },
|
||||
start: { required },
|
||||
end: { required },
|
||||
employee_id: { required }
|
||||
employee: { required }
|
||||
},
|
||||
|
||||
starts_at_time: { required },
|
||||
@@ -108,26 +78,25 @@ export default {
|
||||
|
||||
methods: {
|
||||
async showModal({ blocker }) {
|
||||
this.visible = true
|
||||
this.blocker = null
|
||||
this.datepicker = null
|
||||
this.starts_at_time = null
|
||||
this.ends_at_time = null
|
||||
this.visible = true
|
||||
this.blocker = null
|
||||
this.datepicker = null
|
||||
this.starts_at_time = null
|
||||
this.ends_at_time = null
|
||||
|
||||
this.$nextTick(() => this.v$.$reset())
|
||||
|
||||
try {
|
||||
if (blocker?.id) {
|
||||
blocker = await this.$axios.get_auth_data(`v1/blockers/${blocker.id}`)
|
||||
blocker.employee_id = blocker.employee.id
|
||||
|
||||
this.starts_at_time = moment(blocker.start).format('HH:mm')
|
||||
this.ends_at_time = moment(blocker.end).format('HH:mm')
|
||||
this.datepicker = new Date(blocker.start)
|
||||
|
||||
this.starts_at_time = moment(blocker.start).format("HH:mm")
|
||||
this.ends_at_time = moment(blocker.end).format("HH:mm")
|
||||
this.datepicker = new Date(blocker.start)
|
||||
|
||||
this.blocker = blocker
|
||||
} else {
|
||||
this.blocker = {start: null}
|
||||
this.blocker = { start: null }
|
||||
}
|
||||
} catch (error) {
|
||||
this.$toast.error(error)
|
||||
@@ -135,15 +104,16 @@ export default {
|
||||
},
|
||||
|
||||
async save() {
|
||||
if (!(await this.v$.$validate()))
|
||||
return
|
||||
if (!(await this.v$.$validate())) return
|
||||
|
||||
try {
|
||||
this.blocker.employee_id = this.blocker.employee?.id
|
||||
|
||||
if (this.blocker.id) {
|
||||
const { blocker } = await this.$axios.put_auth(`v1/blockers/${this.blocker.id}`, this.blocker)
|
||||
this.blocker = blocker
|
||||
} else {
|
||||
const { blocker } = await this.$axios.post_auth('v1/blockers', this.blocker)
|
||||
const { blocker } = await this.$axios.post_auth("v1/blockers", this.blocker)
|
||||
this.blocker = blocker
|
||||
}
|
||||
|
||||
@@ -155,20 +125,27 @@ export default {
|
||||
},
|
||||
|
||||
closeModal() {
|
||||
this.$refs['datepicker'].clearValue()
|
||||
this.$refs["datepicker"].clearValue()
|
||||
this.visible = false
|
||||
this.$emit('close', this.blocker)
|
||||
this.$emit("close", this.blocker)
|
||||
},
|
||||
|
||||
onEmployeeSelected({ key }) {
|
||||
this.blocker.employee = this.enrichedEmployees.find(employee => employee.id == key)
|
||||
},
|
||||
|
||||
_syncDatesTimes() {
|
||||
if (!this.starts_at_time || !this.ends_at_time || !this.datepicker)
|
||||
return
|
||||
if (!this.starts_at_time || !this.ends_at_time || !this.datepicker) return
|
||||
|
||||
const splittedStart = this.starts_at_time.split(':')
|
||||
const splittedEnd = this.ends_at_time.split(':')
|
||||
const splittedStart = this.starts_at_time.split(":")
|
||||
const splittedEnd = this.ends_at_time.split(":")
|
||||
|
||||
this.blocker.start = moment(this.datepicker).set({hours: parseInt(splittedStart[0]), minutes: parseInt(splittedStart[1])}).format('YYYY-MM-DD HH:mm')
|
||||
this.blocker.end = moment(this.datepicker).set({hours: parseInt(splittedEnd[0]), minutes: parseInt(splittedEnd[1])}).format('YYYY-MM-DD HH:mm')
|
||||
this.blocker.start = moment(this.datepicker)
|
||||
.set({ hours: parseInt(splittedStart[0]), minutes: parseInt(splittedStart[1]) })
|
||||
.format("YYYY-MM-DD HH:mm")
|
||||
this.blocker.end = moment(this.datepicker)
|
||||
.set({ hours: parseInt(splittedEnd[0]), minutes: parseInt(splittedEnd[1]) })
|
||||
.format("YYYY-MM-DD HH:mm")
|
||||
}
|
||||
},
|
||||
|
||||
@@ -186,4 +163,4 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
Reference in new issue
Block a user