feat: product availability switch

apps/food/app/components/CommandCenter/Header.vue

@@ -30,5 +30,5 @@
 
 <script setup lang="ts">
 const { icons } = useAppConfig()
-const { isNavbarOpened } = useCommandCenter()
+const { isNavbarOpened } = useApp()
 </script>

apps/food/app/components/form/CreateMenuCategory.vue

@@ -1,7 +1,5 @@
 <template>
   <form class="space-y-3" @submit="onSubmit">
-    <UiFormField :key="useId()" :value="menuId" hidden name="menuId" />
-
     <UiFormField v-slot="{ componentField }" name="name">
       <UiFormItem>
         <div>
@@ -38,14 +36,15 @@ const { refresh: refreshChannelData } = await useChannel()
 
 const formSchema = toTypedSchema(menuCategoryCreateSchema)
 
-const { handleSubmit, handleReset } = useForm({
+const { handleSubmit, handleReset, setFieldValue } = useForm({
   validationSchema: formSchema,
 })
 
 watch(
   () => isOpened,
   () => {
     handleReset()
+    setFieldValue('menuId', menuId)
   },
 )
 

apps/food/app/components/form/CreateProduct.vue

@@ -1,7 +1,5 @@
 <template>
   <form class="space-y-3" @submit="onSubmit">
-    <UiFormField :key="useId()" :value="categoryId" hidden name="categoryId" />
-
     <UiFormField v-slot="{ componentField }" name="name">
       <UiFormItem>
         <div>
@@ -50,14 +48,15 @@ const { refresh: refreshChannelData } = await useChannel()
 
 const formSchema = toTypedSchema(productCreateSchema)
 
-const { handleSubmit, handleReset } = useForm({
+const { handleSubmit, handleReset, setFieldValue } = useForm({
   validationSchema: formSchema,
 })
 
 watch(
   () => isOpened,
   () => {
     handleReset()
+    setFieldValue('categoryId', categoryId)
   },
 )
 

apps/food/app/components/form/CreateProductVariant.vue

@@ -1,7 +1,5 @@
 <template>
   <form class="space-y-3" @submit="onSubmit">
-    <UiFormField :key="useId()" :value="productId" hidden name="productId" />
-
     <UiFormField v-slot="{ componentField }" name="name">
       <UiFormItem>
         <div>
@@ -146,14 +144,15 @@ const { refresh: refreshProducts } = await useProduct()
 
 const formSchema = toTypedSchema(productVariantCreateSchema)
 
-const { handleSubmit, handleReset } = useForm({
+const { handleSubmit, handleReset, setFieldValue } = useForm({
   validationSchema: formSchema,
 })
 
 watch(
   () => isOpened,
   () => {
     handleReset()
+    setFieldValue('productId', productId)
   },
 )
 

apps/food/app/components/form/UpdateProduct.vue

@@ -7,7 +7,7 @@
           <UiFormMessage />
         </div>
         <UiFormControl>
-          <UiInput :key="useId()" :default-value="product?.name" v-bind="componentField" />
+          <UiInput v-bind="componentField" />
         </UiFormControl>
       </UiFormItem>
     </UiFormField>
@@ -19,7 +19,7 @@
           <UiFormMessage />
         </div>
         <UiFormControl>
-          <UiInput :key="useId()" :default-value="product?.description" v-bind="componentField" />
+          <UiInput v-bind="componentField" />
         </UiFormControl>
       </UiFormItem>
     </UiFormField>
@@ -31,7 +31,7 @@
           <UiFormMessage />
         </div>
         <UiFormControl>
-          <UiInput :key="useId()" :default-value="product?.slug" v-bind="componentField" />
+          <UiInput v-bind="componentField" />
         </UiFormControl>
       </UiFormItem>
     </UiFormField>
@@ -48,34 +48,41 @@ import { productUpdateSchema } from '~~/server/core/services/product'
 import { useForm } from 'vee-validate'
 import { useToast } from '~/components/ui/toast'
 
-const { isOpened, product } = defineProps<{
+const { isOpened, productId } = defineProps<{
   isOpened: boolean
-  product: any
+  productId: string
 }>()
 
 const emit = defineEmits(['success'])
+const { products } = await useProduct()
+const product = computed(() => products.value?.find((p) => p.id === productId))
 
 const { toast } = useToast()
 const { refresh: refreshChannelData } = await useChannel()
 const { refresh: refreshProducts } = await useProduct()
 
 const formSchema = toTypedSchema(productUpdateSchema)
 
-const { handleSubmit, handleReset } = useForm({
+const { handleSubmit, handleReset, setValues } = useForm({
   validationSchema: formSchema,
 })
 
 watch(
   () => isOpened,
   () => {
     handleReset()
+    setValues({
+      name: product.value?.name,
+      description: product.value?.description,
+      slug: product.value?.slug,
+    })
   },
 )
 
 const onSubmit = handleSubmit(async (values, { resetForm }) => {
   const { data, error } = await useAsyncData(
     'update-product',
-    () => $fetch(`/api/product/${product.id}`, {
+    () => $fetch(`/api/product/${product.value?.id}`, {
       method: 'PATCH',
       body: values,
     }),

apps/food/app/components/form/UpdateProductAvailability.vue

@@ -0,0 +1,69 @@
+<template>
+  <form>
+    <div class="min-w-60 px-4 py-3 bg-neutral-50 rounded-2xl">
+      <div class="flex items-center gap-4">
+        <UiSwitch id="product-switch" :default-checked="isAvailableForPurchase" @update:checked="onSubmit()" />
+        <UiLabel for="product-switch" class="leading-tight">
+          {{ isAvailableForPurchase ? $t('center.product.available-for-purchase') : $t('center.product.not-available-for-purchase') }}
+        </UiLabel>
+      </div>
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { toTypedSchema } from '@vee-validate/zod'
+import { productUpdateSchema } from '~~/server/core/services/product'
+import { useForm } from 'vee-validate'
+import { useToast } from '~/components/ui/toast'
+
+const { isAvailableForPurchase, productId } = defineProps<{
+  isAvailableForPurchase: boolean
+  productId: string
+}>()
+
+const emit = defineEmits(['success'])
+
+const { toast } = useToast()
+const { refresh: refreshChannelData } = await useChannel()
+const { refresh: refreshProducts } = await useProduct()
+
+const formSchema = toTypedSchema(productUpdateSchema)
+
+const { handleSubmit, handleReset, setFieldValue } = useForm({
+  validationSchema: formSchema,
+})
+
+watch(
+  () => isAvailableForPurchase,
+  () => {
+    handleReset()
+    setFieldValue('isAvailableForPurchase', isAvailableForPurchase)
+  },
+)
+
+const onSubmit = handleSubmit(async (_, { resetForm }) => {
+  const { data, error } = await useAsyncData(
+    'update-product',
+    () => $fetch(`/api/product/${productId}`, {
+      method: 'PATCH',
+      body: {
+        isAvailableForPurchase: !isAvailableForPurchase,
+      },
+    }),
+  )
+
+  if (error.value) {
+    console.error(error.value)
+    toast({ title: 'Ошибка', description: '...' })
+  }
+
+  if (data.value) {
+    await refreshChannelData()
+    await refreshProducts()
+    emit('success')
+    toast({ title: 'Продукт обновлен!', description: 'Сейчас обновим данные.' })
+    resetForm()
+  }
+})
+</script>

apps/food/app/components/form/UpdateProductVariant.vue

@@ -7,7 +7,7 @@
           <UiFormMessage />
         </div>
         <UiFormControl>
-          <UiInput :key="useId()" :default-value="productVariant?.name" v-bind="componentField" placeholder="25 см, 6 шт, на традиционном тесте, и т.п." />
+          <UiInput v-bind="componentField" placeholder="25 см, 6 шт, на традиционном тесте, и т.п." />
         </UiFormControl>
       </UiFormItem>
     </UiFormField>
@@ -19,7 +19,7 @@
           <UiFormMessage />
         </div>
         <UiFormControl>
-          <UiInput :key="useId()" :default-value="productVariant?.gross" v-bind="componentField" type="number" step="any" placeholder="0.00" />
+          <UiInput v-bind="componentField" type="number" step="any" placeholder="0.00" />
         </UiFormControl>
       </UiFormItem>
     </UiFormField>
@@ -32,7 +32,7 @@
             <UiFormMessage />
           </div>
           <UiFormControl>
-            <UiInput :key="useId()" :default-value="productVariant?.weightValue" v-bind="componentField" type="number" step="any" />
+            <UiInput v-bind="componentField" type="number" step="any" />
           </UiFormControl>
         </UiFormItem>
       </UiFormField>
@@ -43,7 +43,7 @@
             <UiFormLabel>Ед. измерения</UiFormLabel>
             <UiFormMessage />
           </div>
-          <UiSelect v-bind="componentField" :key="useId()" :default-value="productVariant?.weightUnit">
+          <UiSelect v-bind="componentField">
             <UiFormControl>
               <UiSelectTrigger>
                 <UiSelectValue placeholder="Выберите" />
@@ -75,7 +75,7 @@
               <UiFormMessage />
             </div>
             <UiFormControl>
-              <UiInput :key="useId()" :default-value="productVariant?.calories" v-bind="componentField" type="number" step="any" />
+              <UiInput v-bind="componentField" type="number" step="any" />
             </UiFormControl>
           </UiFormItem>
         </UiFormField>
@@ -87,7 +87,7 @@
               <UiFormMessage />
             </div>
             <UiFormControl>
-              <UiInput :key="useId()" :default-value="productVariant?.protein" v-bind="componentField" type="number" step="any" />
+              <UiInput v-bind="componentField" type="number" step="any" />
             </UiFormControl>
           </UiFormItem>
         </UiFormField>
@@ -99,7 +99,7 @@
               <UiFormMessage />
             </div>
             <UiFormControl>
-              <UiInput :key="useId()" :default-value="productVariant?.fat" v-bind="componentField" type="number" step="any" />
+              <UiInput v-bind="componentField" type="number" step="any" />
             </UiFormControl>
           </UiFormItem>
         </UiFormField>
@@ -111,7 +111,7 @@
               <UiFormMessage />
             </div>
             <UiFormControl>
-              <UiInput :key="useId()" :default-value="productVariant?.carbohydrate" v-bind="componentField" type="number" step="any" />
+              <UiInput v-bind="componentField" type="number" step="any" />
             </UiFormControl>
           </UiFormItem>
         </UiFormField>
@@ -145,14 +145,24 @@ const { refresh: refreshProducts } = await useProduct()
 
 const formSchema = toTypedSchema(productVariantUpdateSchema)
 
-const { handleSubmit, handleReset } = useForm({
+const { handleSubmit, handleReset, setValues } = useForm({
   validationSchema: formSchema,
 })
 
 watch(
   () => isOpened,
   () => {
     handleReset()
+    setValues({
+      name: productVariant?.name,
+      gross: productVariant?.gross,
+      weightValue: productVariant?.weightValue,
+      weightUnit: productVariant?.weightUnit,
+      calories: productVariant?.calories,
+      protein: productVariant?.protein,
+      fat: productVariant?.fat,
+      carbohydrate: productVariant?.carbohydrate,
+    })
   },
 )
 

apps/food/app/composables/useCommandCenter.ts

@@ -1,21 +1,18 @@
 function _useCommandCenter() {
   const route = useRoute()
 
-  const isNavbarOpened = ref(false)
   const isModalOpened = ref(false)
   const searchQuery = ref('')
 
   watch(
     () => route.fullPath,
     () => {
-      isNavbarOpened.value = false
       isModalOpened.value = false
       searchQuery.value = ''
     },
   )
 
   return {
-    isNavbarOpened,
     isModalOpened,
     searchQuery,
   }

apps/food/app/locales/en-EN.json

@@ -107,6 +107,10 @@
     "welcome-message": "We've been waiting for you!",
     "to-website": "To Website",
     "search-label": "Find anything",
+    "product": {
+      "available-for-purchase": "Available for purchase",
+      "not-available-for-purchase": "Not available for purchase"
+    },
     "menu": {
       "dashboard": "Control Panel",
       "menu": "Menu",
@@ -135,7 +139,7 @@
       "product-variant": "Delete Product Variant"
     },
     "edit": {
-      "title": "Редактировать"
+      "title": "Edit"
     }
   },
   "error": {

apps/food/app/locales/ru-RU.json

@@ -107,6 +107,10 @@
     "welcome-message": "Мы вас заждались!",
     "to-website": "К веб-сайту",
     "search-label": "Найти что-нибудь",
+    "product": {
+      "available-for-purchase": "Доступен для покупки",
+      "not-available-for-purchase": "Недоступен для покупки"
+    },
     "menu": {
       "dashboard": "Панель управления",
       "menu": "Меню",