Merge pull request #155 from KaiShoya/refactor/#145_create_stores

Refactor/#145 create stores drinks

package.json

@@ -1,6 +1,6 @@
 {
   "name": "drink-counter",
-  "version": "1.9.9",
+  "version": "1.9.10",
   "license": "MIT",
   "engines": {
     "node": "18"

pages/drinks/[id].vue

@@ -1,60 +1,12 @@
 <script setup lang="ts">
-import { useDrinksStore } from '~/store/data/drinks'
+import { storeToRefs } from 'pinia'
+import { usePageDrinkEditStore } from '~/store/pages/drinks/edit'
 
-const route = useRoute()
+const drinkEditStore = usePageDrinkEditStore()
+const { name, color } = storeToRefs(drinkEditStore)
+const { initPage, updateDrinkById } = drinkEditStore
 
-const { $i18n } = useNuxtApp()
-
-const drinksStore = useDrinksStore()
-const { fetchDrinks, findDrink, updateDrink, createDrink } = drinksStore
-
-const error = await fetchDrinks()
-if (error) {
-  showDangerToast($i18n.t(error))
-}
-
-const name = ref<string>('')
-const color = ref<string | null>(null)
-
-const drinkId = Number(route.params.id)
-const newDrink = ref<boolean>(true)
-if (route.params.id === 'new') {
-  name.value = ''
-  color.value = generateRandomColor()
-  newDrink.value = true
-} else {
-  newDrink.value = false
-  const drink = findDrink(drinkId)
-  if (drink === undefined) {
-    showDangerToast($i18n.t('error.GET_RECORD'))
-    navigateTo('/drinks')
-  } else {
-    name.value = drink.name
-    color.value = drink.color
-  }
-}
-
-const create = async () => {
-  const error = await createDrink(name.value, color.value)
-  if (error) {
-    showDangerToast($i18n.t(error, { name: name.value }))
-  } else {
-    showSuccessToast($i18n.t('drinks.create_success', { name: name.value }))
-    navigateTo('/drinks')
-  }
-}
-
-const updateDrinkById = async () => {
-  const error = await updateDrink(drinkId, name.value, color.value)
-  if (error) {
-    // eslint-disable-next-line no-console
-    console.error(error)
-    showDangerToast($i18n.t('drinks.update_failure', { name: name.value }))
-  } else {
-    showSuccessToast($i18n.t('drinks.update_success', { name: name.value }))
-    navigateTo('/drinks')
-  }
-}
+initPage()
 </script>
 
 <template>
@@ -108,9 +60,9 @@ const updateDrinkById = async () => {
     <div>
       <button
         class="button"
-        @click="newDrink ? create() : updateDrinkById()"
+        @click="updateDrinkById()"
       >
-        {{ newDrink ? $t('drinks.add') : $t('drinks.update') }}
+        {{ $t('drinks.update') }}
       </button>
 
       <NuxtLink

pages/drinks/index.vue

@@ -1,59 +1,17 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
+import { usePageDrinksStore } from '~/store/pages/drinks/index'
 import { useDrinksStore } from '~/store/data/drinks'
-import type { Drink } from '~/store/data/types/drink'
 
 const localePath = useLocalePath()
 
-const { $i18n } = useNuxtApp()
-
-const modalIsActive = ref<boolean>(false)
-
+const pageDrinksStore = usePageDrinksStore()
+const { deleteTarget, showDeleteModal } = storeToRefs(pageDrinksStore)
+const { initPage, updateHidden, deleteDrink, clickDeleteDrinkButton, save } = pageDrinksStore
 const drinksStore = useDrinksStore()
 const { drinks } = storeToRefs(drinksStore)
-const { fetchDrinks, updateDrinkVisible, updateDrinksSort, deleteDrinkById } = drinksStore
-
-fetchDrinks()
-
-const updateHidden = async (drink: Drink) => {
-  const error = await updateDrinkVisible(drink.id, !drink.visible)
-  if (error) {
-    showDangerToast($i18n.t(error, { name: drink.name }))
-    return
-  }
-  showSuccessToast($i18n.t('drinks.update_visible_success', { name: drink.name, status: $i18n.t(`drinks.${drink.visible ? 'visible' : 'invisible'}`) }))
-}
 
-const deleteTarget = ref<Drink | null>(null)
-const clickDeleteDrinkButton = (drink: Drink) => {
-  deleteTarget.value = drink
-  modalIsActive.value = true
-}
-
-const deleteDrink = async (drinkId: number | undefined, drinkName: string | undefined) => {
-  if (drinkId === undefined || drinkName === undefined) {
-    showDangerToast($i18n.t('error.GET_RECORD'))
-    modalIsActive.value = false
-    return
-  }
-  const error = await deleteDrinkById(drinkId)
-  if (error) {
-    showDangerToast($i18n.t(error, { name: drinkName }))
-    modalIsActive.value = false
-    return
-  }
-  showSuccessToast($i18n.t('drinks.delete_success', { name: drinkName }))
-  modalIsActive.value = false
-}
-
-const save = async () => {
-  const error = await updateDrinksSort()
-  if (error) {
-    showDangerToast($i18n.t(error))
-    return
-  }
-  showSuccessToast($i18n.t('drinks.sort_success'))
-}
+initPage()
 </script>
 
 <template>
@@ -150,8 +108,8 @@ const save = async () => {
       :title="$t('drinks.delete_modal_title', { name: deleteTarget?.name })"
       :content="$t('drinks.delete_modal_content', { name: deleteTarget?.name })"
       :success="() => { deleteDrink(deleteTarget?.id, deleteTarget?.name) }"
-      :cancel="() => modalIsActive = false"
-      :class="{ 'is-active': modalIsActive }"
+      :cancel="() => showDeleteModal = false"
+      :class="{ 'is-active': showDeleteModal }"
     />
   </div>
 </template>

pages/drinks/new.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { usePageDrinkNewStore } from '~/store/pages/drinks/new'
+
+const drinkNewStore = usePageDrinkNewStore()
+const { name, color } = storeToRefs(drinkNewStore)
+const { initPage, create } = drinkNewStore
+
+initPage()
+</script>
+
+<template>
+  <div>
+    <div class="field">
+      <label class="label">{{ $t('drinks.name') }}</label>
+      <div class="control">
+        <input
+          v-model="name"
+          class="input"
+          type="text"
+          placeholder="ビール"
+        >
+      </div>
+    </div>
+
+    <div class="field">
+      <label class="label">{{ $t('drinks.color') }}</label>
+      <div class="control columns is-vcentered is-mobile">
+        <div
+          class="column"
+          style="flex: none; margin-left: 12px;"
+        >
+          <input
+            v-model="color"
+            type="color"
+          >
+        </div>
+        <input
+          v-model="color"
+          class="input column"
+          type="text"
+          placeholder="#000000"
+        >
+        <div
+          class="column"
+          style="flex: none; margin-right: 12px;"
+        >
+          <button
+            class="button"
+            @click="color = generateRandomColor()"
+          >
+            <span class="icon is-medium">
+              <i class="mdi mdi-cached mdi-24px" />
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <button
+        class="button"
+        @click="create()"
+      >
+        {{ $t('drinks.add') }}
+      </button>
+
+      <NuxtLink
+        to="/drinks"
+        class="button"
+      >
+        {{ $t('drinks.cancel') }}
+      </NuxtLink>
+    </div>
+  </div>
+</template>

pages/settings.vue

@@ -1,21 +1,11 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 import { useUserSettingsStore } from '~/store/data/userSettings'
+import { useSettingsStore } from '~/store/pages/settings'
 
-const { $i18n } = useNuxtApp()
-
-const serSettingsStore = useUserSettingsStore()
-const { userSettings } = storeToRefs(serSettingsStore)
-const { updateThresholdForDetectingOverdrinking } = serSettingsStore
-
-const click = async () => {
-  const error = await updateThresholdForDetectingOverdrinking()
-  if (error) {
-    showDangerToast($i18n.t(error))
-  } else {
-    showSuccessToast($i18n.t('general.update_success'))
-  }
-}
+const userSettingsStore = useUserSettingsStore()
+const { userSettings } = storeToRefs(userSettingsStore)
+const { updateOverdrinkingThreshold } = useSettingsStore()
 </script>
 
 <template>
@@ -37,7 +27,7 @@ const click = async () => {
     </table>
     <button
       class="button"
-      @click="click"
+      @click="updateOverdrinkingThreshold"
     >
       {{ $t('settings.save') }}
     </button>

store/pages/drinks/edit.ts

@@ -0,0 +1,53 @@
+import { useDrinksStore } from '~/store/data/drinks'
+
+export const usePageDrinkEditStore = defineStore('pageDrinkEditStore', () => {
+  const { $i18n } = useNuxtApp()
+  const route = useRoute()
+  const drinksStore = useDrinksStore()
+  const { fetchDrinks, findDrink, updateDrink } = drinksStore
+
+  // 編集対象のドリンクID
+  const drinkId = Number(route.params.id)
+
+  // 編集対象のドリンク名
+  const name = ref<string>('')
+  // 編集対象の色
+  const color = ref<string | null>(null)
+
+  const initPage = async () => {
+    const error = await fetchDrinks()
+    if (error) {
+      showDangerToast($i18n.t(error))
+      return
+    }
+
+    const drink = findDrink(drinkId)
+    if (drink === undefined) {
+      showDangerToast($i18n.t('error.GET_RECORD'))
+      navigateTo('/drinks')
+    } else {
+      name.value = drink.name
+      color.value = drink.color
+    }
+  }
+
+  const updateDrinkById = async () => {
+    const error = await updateDrink(drinkId, name.value, color.value)
+    if (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+      showDangerToast($i18n.t('drinks.update_failure', { name: name.value }))
+    } else {
+      showSuccessToast($i18n.t('drinks.update_success', { name: name.value }))
+      navigateTo('/drinks')
+    }
+  }
+
+  return {
+    drinkId,
+    name,
+    color,
+    initPage,
+    updateDrinkById,
+  }
+})