socrates/duty-schedule-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

reworked month-picker

Browse Source
This commit is contained in:
Sockenklaus
2021-10-03 12:12:04 +02:00
parent 51c9b3ea9e
commit 1ed7cdada8
3 changed files with 41 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/components/MonthPicker.vue
View File

@@ -1,47 +1,55 @@
<template>
<div class="d-flex justify-content-center" >
<button type="button" class="btn btn-outline-primary" @click="openPicker" v-show="state === 'closed'">
<button type="button" class="btn btn-outline-secondary" @click="state = 'open'" v-show="state === 'closed'">
Startmonat: {{months[selectedMonth]}} {{selectedYear}}
</button>
<button type="button" class="btn btn-outline-primary"><i class="bi bi-caret-left" /></button>
<input type="number" v-model="selectedYear" @change="emit('getYear', selectedYear)" />
<button type="button" class="btn btn-outline-primary"><i class="bi bi-caret-right" /></button>
<table v-show="state === 'month'" class="table table-bordered table-sm">
<tbody>
<tr v-for="n in 3">
<td v-for="m in 4" @click="updateMonth(m+4*n-5)" :class="{selected: selectedMonth===(m+4*n-5)}">
{{months[m+4*n-5]}}
</td>
</tr>
</tbody>
</table>
<div v-show="state === 'open'" class="card">
<div class="card-body">
<div class="row">
<div class="col d-flex flex-row-reverse mb-3">
<button @click="state = 'closed'" type="button" class="btn-close" aria-label="Close"></button>
</div>
</div>
<div class="row">
<div class="col">
<button type="button" class="btn btn-outline-secondary" @click="selectedYear--"><i class="bi bi-caret-left" /></button>
</div>
<div class="col col-auto">
<input type="number" class="form-control text-center" v-model="selectedYear" @change="emit('getYear', selectedYear)" />
</div>
<div class="col">
<button type="button" class="btn btn-outline-secondary" @click="selectedYear++"><i class="bi bi-caret-right" /></button>
</div>
</div>
<table v-show="state === 'year'" class="table table-bordered table-sm">
<tbody>
<tr v-for="n in 3">
<td v-for="m in 3" @click="updateYear(years[m+3*n-4])" :class="{selected: selectedYear === years[m+3*n-4]}">
{{years[m+3*n-4]}}
</td>
</tr>
</tbody>
</table>
<table class="table table-bordered mt-2">
<tbody>
<tr v-for="n in 3">
<td v-for="m in 4" @click="selectedMonth = m+4*n-5" :class="{selected: selectedMonth===(m+4*n-5)}">
{{months[m+4*n-5]}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed, Ref, ComputedRef } from 'vue'
import { ref, computed, watch, Ref, ComputedRef } from 'vue'
const props = defineProps<{
selectedMonth: number,
selectedYear: number,
state: ('closed'|'year'|'month')
state: ('closed'|'open')
}>()
const selectedMonth : Ref<number>= ref(props.selectedMonth)
const selectedYear : Ref<number> = ref(props.selectedYear)
const state : Ref<'closed'|'year'|'month'> = ref(props.state)
const state : Ref<'closed'|'open'> = ref(props.state)
const months : string[] = [
'Jan', 'Feb', 'Mrz', 'Apr',
@@ -63,48 +71,25 @@
return arr
})
function updateMonth(monthId : number) {
selectedMonth.value = monthId
emit('getMonth', selectedMonth.value)
emit('getYear', selectedYear.value)
state.value = 'closed'
}
function updateYear(year : number) {
selectedYear.value = year
state.value = 'month'
}
function openPicker() {
state.value = 'year'
}
const emit = defineEmits<{
(e: 'getYear', year: number): number
(e: 'getMonth', month: number): number
}>()
watch(selectedYear, currentValue => emit('getYear', currentValue))
watch(selectedMonth, currentValue => emit('getMonth', currentValue))
</script>
<style scoped>
table {
width: 250px;
border-radius: 4px;
}
td, tr {
border: 1px solid #0d6efd ;
border-collapse: collapse;
color: #0D6EFD
}
td:hover {
background-color: #0D6EFD;
background-color: rgb(108,117,125);
color: #fff;
cursor: pointer
}
.selected {
background-color: #0D6EFD;
background-color: rgb(108,117,125);
color: #fff;
}
</style>

6
src/components/Schedule.vue
View File

@@ -15,7 +15,7 @@ table(class='table' v-for="(row, rIndex) in dates" :key="rIndex")
</template>
<script setup lang="ts">
import { toRef, computed } from 'vue'
import { toRef, computed, ref } from 'vue'
import { addMonths, subDays, addDays, format, getISODay, isValid, eachDayOfInterval } from 'date-fns'
import { de } from 'date-fns/locale'
@@ -40,7 +40,7 @@ table(class='table' v-for="(row, rIndex) in dates" :key="rIndex")
start: startDate.value,
end: endDate.value
})
const offset : number = getISODay(startDate.value) - 1 + props.initialOffset
const offset = computed(() => getISODay(startDate.value) - 1 + props.initialOffset)
const dates = computed( () => {
@@ -50,7 +50,7 @@ table(class='table' v-for="(row, rIndex) in dates" :key="rIndex")
let end = endDate.value
let i
for (i = 0; i < offset ; i++) {
for (i = 0; i < offset.value ; i++) {
row.push(null)
}

4
src/views/Home.vue
View File

@@ -1,9 +1,5 @@
<template lang="pug">
p {{iOffsets}}
p SelectedMonth: {{selectedMonth}}, SelectedYear: {{selectedYear}}
MonthPicker(:selectedMonth="selectedMonth" :selectedYear="selectedYear" @getMonth="selectedMonth = $event" @getYear="selectedYear = $event" state="closed")
div(class="mt-5" v-for="(month, index) in months" :key="index")