Merge pull request #193 from KaiShoya/release/v1.15.0

Release/v1.15.0

components/molecules/MinusButton.vue

@@ -0,0 +1,16 @@
+<script
+  setup
+  lang="ts"
+>
+defineProps<{
+  clickFunction: Function,
+}>()
+</script>
+<template>
+  <button
+    class="column is-2 button is-large"
+    @click="() => { clickFunction() }"
+  >
+    &lt;
+  </button>
+</template>

components/molecules/PlusButton.vue

@@ -0,0 +1,16 @@
+<script
+  setup
+  lang="ts"
+>
+defineProps<{
+  clickFunction: Function,
+}>()
+</script>
+<template>
+  <button
+    class="column is-2 button is-large"
+    @click="() => { clickFunction() }"
+  >
+    &gt;
+  </button>
+</template>

components/organisms/picker/DatePicker.vue

@@ -0,0 +1,23 @@
+<script
+  setup
+  lang="ts"
+>
+import { storeToRefs } from 'pinia'
+import { useIndexStore } from '@/store/pages/index'
+
+const indexStore = useIndexStore()
+const { date } = storeToRefs(indexStore)
+const { prevDate, nextDate } = indexStore
+</script>
+
+<template>
+  <div class="columns is-mobile my-4 mx-0">
+    <MoleculesMinusButton :click-function="prevDate" />
+    <input
+      v-model="date"
+      class="column input is-large mx-2"
+      type="date"
+    >
+    <MoleculesPlusButton :click-function="nextDate" />
+  </div>
+</template>

components/organisms/picker/MonthPicker.vue

@@ -0,0 +1,23 @@
+<script
+  setup
+  lang="ts"
+>
+import { storeToRefs } from 'pinia'
+import { useMonthlyStore } from '~/store/pages/data/monthly'
+
+const monthlyStore = useMonthlyStore()
+const { yearMonth } = storeToRefs(monthlyStore)
+const { prevMonth, nextMonth } = monthlyStore
+</script>
+
+<template>
+  <div class="columns is-mobile my-2 mx-0">
+    <MoleculesMinusButton :click-function="prevMonth" />
+    <input
+      v-model="yearMonth"
+      class="column input is-large"
+      type="month"
+    >
+    <MoleculesPlusButton :click-function="nextMonth" />
+  </div>
+</template>

components/organisms/picker/YearPicker.vue

@@ -0,0 +1,23 @@
+<script
+  setup
+  lang="ts"
+>
+import { storeToRefs } from 'pinia'
+import { useAnnualStore } from '~/store/pages/data/annual'
+
+const annualStore = useAnnualStore()
+const { year } = storeToRefs(annualStore)
+const { prevYear, nextYear } = annualStore
+</script>
+
+<template>
+  <div class="columns is-mobile my-2 mx-0">
+    <MoleculesMinusButton :click-function="prevYear" />
+    <input
+      v-model="year"
+      class="column input is-large"
+      type="number"
+    >
+    <MoleculesPlusButton :click-function="nextYear" />
+  </div>
+</template>

layouts/custom.vue

@@ -133,7 +133,16 @@ const active = ref<boolean>(false)
               exact-active-class="is-active"
               @click="active = false"
             >
-              飲み物
+              {{ $t('routes.drinks') }}
+            </NuxtLink>
+
+            <NuxtLink
+              class="navbar-item"
+              :to="localePath('/labels')"
+              exact-active-class="is-active"
+              @click="active = false"
+            >
+              {{ $t('routes.labels') }}
             </NuxtLink>
 
             <NuxtLink

locales/en.json

@@ -6,6 +6,8 @@
     "annual": "Annual",
     "monthly": "Monthly",
     "about": "About",
+    "drinks": "Drinks",
+    "labels": "Drink labels",
     "settings": "Settings"
   },
   "auth": {
@@ -59,6 +61,8 @@
   "drinks": {
     "name": "Name",
     "color": "Color",
+    "amount": "Amount(ml, %, etc)",
+    "drink_label": "Drink label",
     "delete_modal_title": "Delete \"{name}\".",
     "delete_modal_content": "If you delete \"{name}\", all the drink counts you drank will also be deleted. Do you want to delete it?",
     "add": "Add drink",
@@ -76,6 +80,9 @@
     "invisible": "invisible",
     "update_visible_success": "\"{name}\" was successfully updated to be {status}."
   },
+  "labels": {
+    "standard_amount": "Standard amount(ml, %, etc)"
+  },
   "data": {
     "total": "Total"
   },

locales/ja.json

@@ -6,6 +6,8 @@
     "annual": "年別",
     "monthly": "月別",
     "about": "About",
+    "drinks": "飲み物",
+    "labels": "飲み物ラベル",
     "settings": "設定"
   },
   "auth": {
@@ -59,6 +61,8 @@
   "drinks": {
     "name": "名前",
     "color": "色",
+    "amount": "量(ml,合など)",
+    "drink_label": "ラベル",
     "delete_modal_title": "「{name}」を削除します。",
     "delete_modal_content": "「{name}」を削除すると、飲んだ杯数もすべて削除されます。それでも削除しますか？",
     "add": "追加する",
@@ -76,6 +80,9 @@
     "invisible": "非表示",
     "update_visible_success": "「{name}」を{status}に変更しました。"
   },
+  "labels": {
+    "standard_amount": "基準量(ml,合など)"
+  },
   "data": {
     "total": "合計"
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "drink-counter",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "license": "MIT",
   "engines": {
     "node": "20"
@@ -49,6 +49,6 @@
     "timezone-support": "^3.1.0",
     "vue-google-charts": "^1.1.0",
     "vue-gtag": "^2.0.1",
-    "vuedraggable": "^4.1.0"
+    "vuedraggable": "[email protected]:KaiShoya/vue.draggable.next.git"
   }
 }

pages/data/annual.vue

@@ -8,7 +8,7 @@ import { useAnnualStore } from '~/store/pages/data/annual'
 const annualStore = useAnnualStore()
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const { year, calendarTitle, computeCalendarData } = storeToRefs(annualStore)
-const { prevYear, nextYear, fetchDrinkCounters } = annualStore
+const { fetchDrinkCounters } = annualStore
 
 await fetchDrinkCounters()
 
@@ -19,27 +19,7 @@ watch(year, async () => {
 
 <template>
   <div class="container">
-    <div class="columns is-mobile my-2 mx-0">
-      <button
-        class="column is-2 button is-large"
-        @click="prevYear"
-      >
-        &lt;
-      </button>
-
-      <input
-        v-model="year"
-        class="column input is-large"
-        type="number"
-      >
-
-      <button
-        class="column is-2 button is-large"
-        @click="nextYear"
-      >
-        &gt;
-      </button>
-    </div>
+    <OrganismsPickerYearPicker />
 
     <!-- メモリリークするため一旦コメントアウト -->
     <!-- <PagesDataGraphsCalendar

pages/data/monthly.vue

@@ -7,7 +7,7 @@ import { useMonthlyStore } from '~/store/pages/data/monthly'
 
 const monthlyStore = useMonthlyStore()
 const { yearMonth, computeCalendarData, computeGraphData, computedChartOptions } = storeToRefs(monthlyStore)
-const { prevMonth, nextMonth, fetchDrinkCounters } = monthlyStore
+const { fetchDrinkCounters } = monthlyStore
 
 // カレンダー再描画用
 const updateCalendar = ref<number>(0)
@@ -23,25 +23,7 @@ watch(yearMonth, async () => {
 
 <template>
   <div class="container">
-    <div class="columns is-mobile my-2 mx-0">
-      <button
-        class="column is-2 button is-large"
-        @click="prevMonth"
-      >
-        &lt;
-      </button>
-      <input
-        v-model="yearMonth"
-        class="column input is-large"
-        type="month"
-      >
-      <button
-        class="column is-2 button is-large"
-        @click="nextMonth"
-      >
-        &gt;
-      </button>
-    </div>
+    <OrganismsPickerMonthPicker />
 
     <PagesDataGraphsFCalendar
       :key="updateCalendar"

pages/drinks/[id].vue

@@ -1,10 +1,16 @@
-<script setup lang="ts">
+<script
+  setup
+  lang="ts"
+>
 import { storeToRefs } from 'pinia'
 import { usePageDrinkEditStore } from '~/store/pages/drinks/edit'
+import { useDrinkLabelsStore } from '~/store/data/drinkLabels'
 
 const drinkEditStore = usePageDrinkEditStore()
-const { name, color } = storeToRefs(drinkEditStore)
+const { name, color, amount, drinkLabelId } = storeToRefs(drinkEditStore)
 const { initPage, updateDrinkById } = drinkEditStore
+const drinkLabelsStore = useDrinkLabelsStore()
+const { drinkLabels } = storeToRefs(drinkLabelsStore)
 
 initPage()
 </script>
@@ -57,6 +63,41 @@ initPage()
       </div>
     </div>
 
+    <div class="field">
+      <label class="label">{{ $t('drinks.amount') }}</label>
+      <div class="control">
+        <input
+          v-model="amount"
+          class="input"
+          type="number"
+          placeholder="1"
+        >
+      </div>
+    </div>
+
+    <div class="field">
+      <label class="label">{{ $t('drinks.drink_label') }}</label>
+      <div class="control">
+        <div class="select">
+          <select @change="drinkLabelId = Number(($event.target as HTMLInputElement).value)">
+            <option
+              key=""
+              value=""
+              label="なし"
+              :selected="drinkLabelId === null"
+            />
+            <option
+              v-for="label in drinkLabels"
+              :key="label.id"
+              :value="label.id"
+              :label="label.name"
+              :selected="drinkLabelId === label.id"
+            />
+          </select>
+        </div>
+      </div>
+    </div>
+
     <div>
       <button
         class="button"