From 7871eb55ad3ea75a440b158daa5816300d9595ee Mon Sep 17 00:00:00 2001
From: Sockenklaus <sockenklaus@gmail.com>
Date: Mon, 4 Oct 2021 00:07:36 +0200
Subject: [PATCH] worked on monthpicker

---
 src/components/MonthPicker.vue | 109 ++++++++++++++++++++++-----------
 1 file changed, 74 insertions(+), 35 deletions(-)

diff --git a/src/components/MonthPicker.vue b/src/components/MonthPicker.vue
index 8461bd3..a7023a8 100644
--- a/src/components/MonthPicker.vue
+++ b/src/components/MonthPicker.vue
@@ -1,37 +1,37 @@
 <template>
-<div class="d-flex justify-content-center" >
-    <button type="button" class="btn btn-outline-secondary" @click="state = 'open'" v-show="state === 'closed'">
-        Startmonat: {{months[selectedMonth]}} {{selectedYear}}
-    </button>
+<div class="d-flex justify-content-center">
+    <div class="accordion" id="accMonthPicker">
+        <div class="accordion-item">
+            <h2 class="accordion-header" id="headingMonthSelector">
+                <button class="accordion-button collapsed bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#collapseMonthPicker">
+                    Startmonat: {{months[selectedMonth]}} {{selectedYear}}
+                </button>
+            </h2>
+            <div id="collapseMonthPicker" class="accordion-collapse collapse" data-bs-parent="#accMonthPicker">
+                <div class="accordion-body">
+                    <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>
 
-    <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>
+                    <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="{ 'table-active': selectedMonth === (m+4*n-5)}">
+                                    {{monthsShort[m+4*n-5]}}
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
                 </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 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="{ 'table-active': selectedMonth === (m+4*n-5)}">
-                            {{months[m+4*n-5]}}
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
         </div>
     </div>
 </div>
@@ -39,7 +39,7 @@
 </template>
 
 <script setup lang="ts">
-    import { ref, watch, Ref } from 'vue'
+    import { ref, watch, Ref, ComputedRef, computed } from 'vue'
 
     const props = defineProps<{
         selectedMonth: number,
@@ -51,12 +51,29 @@
     const selectedYear : Ref<number> = ref(props.selectedYear)
     const state : Ref<'closed'|'open'> = ref(props.state)
 
-    const months : string[] = [
+    const monthsShort : string[] = [
         'Jan', 'Feb', 'Mrz', 'Apr', 
         'Mai', 'Jun', 'Jul', 'Aug',
         'Sept', 'Okt', 'Nov', 'Dez'
     ]
 
+    const months : string[] = [
+        'Januar', 'Februar', 'März',
+        'April', 'Mai', 'Juni', 'Juli',
+        'August', 'September', 'Oktober',
+        'November', 'Dezember'
+    ]
+
+    function toggleState() {
+        if(state.value === 'open') state.value = 'closed'
+        else state.value = 'open'
+    }
+
+    const btnCloseBg : ComputedRef<string> = computed(() => {
+        if(state.value === 'open') return ''
+        else return ''
+    })
+
     const emit = defineEmits<{
         (e: 'getYear', year: number): number
         (e: 'getMonth', month: number): number
@@ -74,8 +91,30 @@
         cursor: pointer
     }
 
-    .selected {
-        background-color: rgb(108,117,125);
-        color: #fff;
+    .accordion {
+        width: 370px
     }
+    .accordion-button.bg-light {
+        color:black;
+    }
+    .accordion-button.bg-light::after {
+        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
+    }
+
+    /* Chrome, Safari, Edge, Opera */
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+
+    /* Firefox */
+    input[type=number] {
+        -moz-appearance: textfield;
+    }
+
+    button.btn-outline-secondary {
+        border-color: #ced4da;
+    }
+    
 </style>