Feature/move data

app/composables/useBrand.ts

@@ -17,7 +17,7 @@ const { converter: converterSake } = useSake()
 
 export type Brand = {
   name: string
-  logo: string
+  logo: string | null | undefined
   description: string
   brewery: DocumentReference<DocumentData, DocumentData> | null
 }
@@ -104,6 +104,18 @@ export const useBrand = () => {
     })
   }
 
+  const moveItem = async (brandPath: string, breweryPath: string, params: Brand) => {
+    const _params = params
+    if (typeof breweryPath === "string") {
+      const path = breweryPath
+      _params.brewery = await getReference(path)
+    }
+
+    await addItemFirestore(`${breweryPath}/brands`, params)
+    //削除
+    await deleteItem(brandPath)
+  }
+
   return {
     getList,
     getItem,
@@ -114,5 +126,6 @@ export const useBrand = () => {
     deleteItem,
     converter,
     getSakeList,
+    moveItem,
   }
 }

app/composables/useSake.ts

@@ -1,5 +1,14 @@
 import type { DocumentData, DocumentReference, DocumentSnapshot } from "firebase/firestore"
-import { collectionGroup, query, where, orderBy, collection, documentId, doc, getDoc } from "firebase/firestore"
+import {
+  collectionGroup,
+  query,
+  where,
+  orderBy,
+  collection,
+  documentId,
+  doc,
+  getDoc,
+} from "firebase/firestore"
 import type { Data } from "./useFirestore"
 
 const {
@@ -61,9 +70,10 @@ export const useSake = () => {
     console.log("SakeParams", params)
     if (typeof params.limit !== "number" || params.limit < 0)
       throw new Error("express-paginate: `limit` is not a number >= 0")
-    const coll = (params.breweryId && params.brandId)
-      ? collection(db, `breweries/${params.breweryId}/brands/${params.brandId}/${collectionName}`)
-      : collectionGroup(db, collectionName)
+    const coll =
+      params.breweryId && params.brandId
+        ? collection(db, `breweries/${params.breweryId}/brands/${params.brandId}/${collectionName}`)
+        : collectionGroup(db, collectionName)
     // let snapshot;
     let q = query(coll, orderBy("name"))
     // snapshot = await getCountFromServer(query(coll));
@@ -90,6 +100,19 @@ export const useSake = () => {
     )
   }
 
+  const moveItem = async (
+    sakePath: string,
+    breweryPath: string,
+    brandPath: string,
+    params: Sake,
+  ) => {
+    const _params = params
+
+    await addItemFirestore(`${brandPath}/sakes`, _params)
+
+    await deleteItem(sakePath)
+  }
+
   return {
     getList,
     getItem,
@@ -99,5 +122,6 @@ export const useSake = () => {
     setItem,
     deleteItem,
     converter,
+    moveItem,
   }
 }

app/pages/breweries/[breweryId]/brands/[brandId]/sakes/[sakeId]/update.vue

@@ -5,9 +5,9 @@ import type { FormSubmitEvent } from "#ui/types"
 const { t } = useI18n()
 const route = useRoute()
 
-const { getItem: getBrewery } = useBrewery()
+const { getItem: getBrewery, getList: getBreweriesList, getBrandList } = useBrewery()
 const { getItem: getBrand } = useBrand()
-const { getItem, setItem } = useSake()
+const { getItem, setItem, moveItem } = useSake()
 const localePath = useLocalePath()
 const toast = useToast()
 
@@ -31,12 +31,61 @@ const schema = object({
 type Schema = InferType<typeof schema>
 
 const state = reactive<Sake>(sake.data)
+const newBrewery = ref<string>("")
+const newBrand = ref<string>("")
+
+const breweries = await getBreweriesList({
+  searchText: "",
+  before: undefined,
+  limit: 3000,
+}).then((breweries) => {
+  return breweries.list.map((brewery) => {
+    return {
+      path: brewery.path,
+      label: brewery.data.name,
+    }
+  })
+})
+
+const brands = ref<{ path: string; label: string }[]>([])
+async function onChangeBrewery(brewery: string | undefined | null) {
+  console.log("brewery", brewery)
+  if (!brewery) {
+    brands.value = []
+    return
+  }
+
+  brands.value = await getBrandList({
+    breweryId: String(brewery).replace("breweries/", ""),
+    searchText: "",
+    before: undefined,
+    limit: 100,
+  }).then((brands) => {
+    return brands.list.map((brand) => {
+      return {
+        path: brand.path,
+        label: brand.data.name,
+      }
+    })
+  })
+}
 
 async function onSubmit(event: FormSubmitEvent<Schema>) {
   // Do something with event.data
-  await setItem(sake.path, event.data)
-  toast.add({ title: t("updated"), timeout: 2000, icon: "i-heroicons-check-circle" })
-  await navigateTo(localePath("/" + sake.path))
+
+  if (newBrewery.value) {
+    await moveItem(sake.path, newBrewery.value, newBrand.value, event.data)
+    toast.add({ title: t("updated"), timeout: 2000, icon: "i-heroicons-check-circle" })
+    await navigateTo(localePath("/" + newBrand.value))
+  } else if (newBrand.value) {
+    await moveItem(sake.path, `breweries/${route.params.breweryId}`, newBrand.value, event.data)
+    toast.add({ title: t("updated"), timeout: 2000, icon: "i-heroicons-check-circle" })
+    await navigateTo(localePath("/" + newBrand.value))
+  } else {
+    await setItem(sake.path, event.data)
+    toast.add({ title: t("updated"), timeout: 2000, icon: "i-heroicons-check-circle" })
+    await navigateTo(localePath("/" + sake.path))
+  }
 }
 
 if (route.params.breweryId) {
@@ -51,6 +100,12 @@ if (route.params.breweryId) {
     brandName.value = brand.data.name
   }
 }
+
+if (!Array.isArray(state.type)) {
+  state.type = [state.type]
+}
+
+// onChangeBrewery(state.brewery?.path)
 </script>
 
 <template>
@@ -63,15 +118,42 @@ if (route.params.breweryId) {
       </UFormGroup>
       <UFormGroup :label="$t('brewery')" name="brewery">
         {{ breweryName }}
+        <USelectMenu
+          v-if="!breweryName"
+          v-model="newBrewery"
+          :options="breweries"
+          option-attribute="label"
+          value-attribute="path"
+          searchable
+          @change="onChangeBrewery(newBrewery)"
+        />
       </UFormGroup>
       <UFormGroup :label="$t('brand')" name="brand">
         {{ brandName }}
+        <USelectMenu
+          v-if="!brandName"
+          v-model="newBrand"
+          :options="brands"
+          option-attribute="label"
+          value-attribute="path"
+          searchable
+        />
       </UFormGroup>
       <UFormGroup :label="$t('type')" name="type">
-        <TagSelect v-model="state.type" :options="sakeTypes" placeholder="" />
+        <TagSelect
+          v-if="Array.isArray(state.type)"
+          v-model="state.type"
+          :options="sakeTypes"
+          placeholder=""
+        />
       </UFormGroup>
       <UFormGroup :label="$t('pairing')" name="pairing">
-        <TagSelect v-model="state.mariages" :options="appetizers" placeholder="" />
+        <TagSelect
+          v-if="Array.isArray(state.mariages)"
+          v-model="state.mariages"
+          :options="appetizers"
+          placeholder=""
+        />
       </UFormGroup>
       <UFormGroup :label="$t('explanation')" name="explanation">
         <UInput v-model="state.description" />

app/pages/breweries/[breweryId]/brands/[brandId]/update.vue

@@ -5,30 +5,53 @@ import type { FormSubmitEvent } from "#ui/types"
 const { t } = useI18n()
 const route = useRoute()
 
-const { getItem: getBrewery } = useBrewery()
-const { getItem, setItem } = useBrand()
+const { getItem: getBrewery, getList: getBreweriesList } = useBrewery()
+const { getItem, setItem, moveItem } = useBrand()
 const localePath = useLocalePath()
 const toast = useToast()
 
 const brand = await getItem(`/breweries/${route.params.breweryId}/brands/${route.params.brandId}`)
+
+const breweries = await getBreweriesList({
+  searchText: "",
+  before: undefined,
+  limit: 3000,
+}).then((breweries) => {
+  return breweries.list.map((brewery) => {
+    return {
+      path: brewery.path,
+      label: brewery.data.name,
+    }
+  })
+})
+
 const breweryName = ref<string>("")
 
 const schema = object({
   name: string().required("名前は必須です"),
   brewery: object().required("酒蔵は必須です"),
   description: string().nullable(),
+  logo: string().nullable(),
 })
 
 type Schema = InferType<typeof schema>
 
 const state = reactive<Brand>(brand.data)
+const newBrewery = ref<string>("")
 
 async function onSubmit(event: FormSubmitEvent<Schema>) {
   // Do something with event.data
   console.log(event.data)
-  await setItem(brand.path, event.data)
-  toast.add({ title: t("updated"), timeout: 2000, icon: "i-heroicons-check-circle" })
-  await navigateTo(localePath("/" + brand.path))
+
+  if (newBrewery.value) {
+    await moveItem(brand.path, newBrewery.value, event.data)
+    toast.add({ title: t("updated"), timeout: 2000, icon: "i-heroicons-check-circle" })
+    await navigateTo(localePath("/" + newBrewery.value))
+  } else {
+    await setItem(brand.path, event.data)
+    toast.add({ title: t("updated"), timeout: 2000, icon: "i-heroicons-check-circle" })
+    await navigateTo(localePath("/" + brand.path))
+  }
 }
 
 if (route.params.breweryId) {
@@ -48,6 +71,14 @@ if (route.params.breweryId) {
       </UFormGroup>
       <UFormGroup :label="$t('brewery')" name="brewery">
         {{ breweryName }}
+        <USelectMenu
+          v-if="!breweryName"
+          v-model="newBrewery"
+          :options="breweries"
+          option-attribute="label"
+          value-attribute="path"
+          searchable
+        />
       </UFormGroup>
       <UFormGroup :label="$t('logo')" name="logo">
         <UInput v-model="state.logo" />