From 51c9b3ea9eb193b94531b55f6914fff75449bfe5 Mon Sep 17 00:00:00 2001
From: Sockenklaus <sockenklaus@gmail.com>
Date: Sun, 3 Oct 2021 09:26:34 +0200
Subject: [PATCH] started working on a leaner picker, added emit to picker

---
 package-lock.json              | 5 +++++
 package.json                   | 1 +
 src/components/MonthPicker.vue | 7 ++++++-
 src/main.ts                    | 3 ++-
 src/views/Home.vue             | 8 +++++---
 5 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9715f89..2b0bc05 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -397,6 +397,11 @@
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.1.tgz",
       "integrity": "sha512-/jUa4sSuDZWlDLQ1gwQQR8uoYSvLJzDd8m5o6bPKh3asLAMYVZKdRCjb1joUd5WXf0WwCNzd2EjwQQhupou0dA=="
     },
+    "bootstrap-icons": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.5.0.tgz",
+      "integrity": "sha512-44feMc7DE1Ccpsas/1wioN8ewFJNquvi5FewA06wLnqct7CwMdGDVy41ieHaacogzDqLfG8nADIvMNp9e4bfbA=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
diff --git a/package.json b/package.json
index 215275a..7fb91d4 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
   "dependencies": {
     "@popperjs/core": "^2.10.2",
     "bootstrap": "^5.1.1",
+    "bootstrap-icons": "^1.5.0",
     "date-fns": "^2.24.0",
     "vue": "^3.2.16",
     "vue-month-picker": "^1.5.0",
diff --git a/src/components/MonthPicker.vue b/src/components/MonthPicker.vue
index a4a490f..7c44e9b 100644
--- a/src/components/MonthPicker.vue
+++ b/src/components/MonthPicker.vue
@@ -1,9 +1,12 @@
 <template>
 <div class="d-flex justify-content-center" >
     <button type="button" class="btn btn-outline-primary" @click="openPicker" v-show="state === 'closed'">
-        {{months[selectedMonth]}} {{selectedYear}}
+        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">
@@ -62,6 +65,8 @@
 
     function updateMonth(monthId : number) {
         selectedMonth.value = monthId
+        emit('getMonth', selectedMonth.value)
+        emit('getYear', selectedYear.value)
         state.value = 'closed'
 
     }
diff --git a/src/main.ts b/src/main.ts
index 70ed2e2..eea4361 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,7 +2,8 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import "bootstrap"
-import "bootstrap/dist/css/bootstrap.min.css"
+import "bootstrap/dist/css/bootstrap.css"
+import "bootstrap-icons/font/bootstrap-icons.css"
 
 createApp(App)
 .use(router)
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 9afae85..4bdabbe 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,8 +1,10 @@
 <template lang="pug">
 
+p {{iOffsets}}
+
 p SelectedMonth: {{selectedMonth}}, SelectedYear: {{selectedYear}}
 
-MonthPicker(:selectedMonth="selectedMonth" :selectedYear="selectedYear" state="closed")
+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") 
   Schedule(  :startDate="month" :initialOffset="iOffsets[index]")
@@ -20,8 +22,8 @@ div(class="mt-5" v-for="(month, index) in months" :key="index")
 
   const months = computed(() => {
     return eachMonthOfInterval({
-      start: new Date(selectedYear.value, selectedMonth.value - 1),
-      end : new Date(selectedYear.value, selectedMonth.value + 1)
+      start: new Date(selectedYear.value, selectedMonth.value),
+      end : new Date(selectedYear.value, selectedMonth.value + 2)
     })
   })