feat!: db changed (#323)

* feat!: db changed

* chore: removed old repository

* chore: old package removed

* chore: add checkout to registry on finish

.vscode/settings.json

@@ -50,5 +50,9 @@
     "scss",
     "pcss",
     "postcss"
-  ]
+  ],
+  "sonarlint.connectedMode.project": {
+    "connectionId": "next-orders",
+    "projectKey": "next-orders_food"
+  }
 }

apps/web-app/.env.example

@@ -4,9 +4,6 @@ NUXT_CHANNEL_ID="burger"
 # Session password for Nuxt Auth Utils
 NUXT_SESSION_PASSWORD=""
 
-# Locale for Nuxt I18n
-NUXT_PUBLIC_LOCALE="en"
-
 # URL to media server (probably s3 bucket with static URL)
 NUXT_PUBLIC_MEDIA_URL=""
 
@@ -17,5 +14,8 @@ NUXT_S3_ENDPOINT=""
 NUXT_S3_ACCESS_KEY_ID=""
 NUXT_S3_SECRET_ACCESS_KEY=""
 
+# Redis as main database and cache
+NUXT_REDIS_URL="redis://localhost:6379"
+
 # App version
 VERSION=""

apps/web-app/app/components/Cart/Line.vue

@@ -36,5 +36,6 @@ const checkout = useCheckoutStore()
 const line = computed(() => checkout.lines?.find((l) => l.id === lineId))
 const productVariant = channel.getProductVariant(line.value?.productVariantId ?? '')
 const product = channel.getProduct(productVariant.value?.productId ?? '')
-const productUrl = computed(() => `/catalog/${product.value?.category?.slug}/${product.value?.slug}`)
+const category = channel.getMenuCategoryByProduct(product.value?.id ?? '')
+const productUrl = computed(() => `/catalog/${category?.slug}/${product.value?.slug}`)
 </script>

apps/web-app/app/components/CategoryBlock.vue

@@ -19,9 +19,10 @@
     class="mb-12 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4 gap-4 md:gap-6"
   >
     <ProductCard
-      v-for="product in category?.products.filter((p) => p.isAvailableForPurchase).slice(0, 8)"
+      v-for="product in products"
       :key="product.id"
       :product-id="product.id"
+      :category-slug="category?.slug ?? ''"
       :lazy="!isFirst"
     />
   </div>
@@ -35,4 +36,5 @@ const { categoryId } = defineProps<{
 
 const channel = useChannelStore()
 const category = channel.getActiveMenuCategory(categoryId)
+const products = channel.getProductsInCategory(categoryId).value.filter((p) => p.isAvailableForPurchase && p.variants.length).slice(0, 8)
 </script>

apps/web-app/app/components/Checkout/Line.vue

@@ -43,8 +43,8 @@ const { line, canBeChanged = true } = defineProps<{
 
 const channel = useChannelStore()
 const productVariant = channel.getProductVariant(line.productVariantId ?? '')
-const product = channel.getProduct(productVariant.value?.productId ?? '')
-const productUrl = computed(() => `/catalog/${product.value?.category?.slug}/${product.value?.slug}`)
-
+const product = channel.getProductByProductVariant(productVariant.value?.id ?? '')
+const category = channel.getMenuCategoryByProduct(product?.id ?? '')
+const productUrl = computed(() => `/catalog/${category?.slug}/${product?.slug}`)
 const totalAmount = computed(() => formatNumberToLocal(productVariant.value?.gross ? productVariant.value?.gross * line.quantity : 0))
 </script>

apps/web-app/app/components/CommandCenter/CheckoutCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-(--ui-bg-muted) px-4 md:px-6 py-5 space-y-6">
+  <div class="bg-(--ui-bg-muted) rounded-xl px-4 md:px-6 py-5 space-y-6">
     <div>
       <div class="mb-2 flex flex-row gap-3 items-center">
         <img

apps/web-app/app/components/CommandCenter/CheckoutLine.vue

@@ -3,14 +3,14 @@
     <div class="max-w-[16rem] flex flex-row gap-2 flex-nowrap items-center">
       <div>
         <div class="font-medium leading-tight line-clamp-2">
-          {{ line?.productVariant.product.name }}
+          {{ product?.name }}
         </div>
         <div class="mt-1 flex flex-row gap-2 flex-nowrap items-center">
           <p class="text-neutral-500 dark:text-neutral-400 leading-tight">
-            {{ variant?.name }}
+            {{ productVariant?.name }}
           </p>
           <p class="text-neutral-500 dark:text-neutral-400">
-            {{ variant?.weightValue }}{{ getWeightLocalizedUnit(variant?.weightUnit) }}
+            {{ productVariant?.weightValue }}{{ getWeightLocalizedUnit(productVariant?.weightUnit) }}
           </p>
         </div>
       </div>
@@ -38,6 +38,7 @@ const { checkouts } = await useCheckoutList()
 
 const checkout = computed(() => checkouts.value?.find((c) => c.lines?.find((l) => l.id === lineId)))
 const line = computed(() => checkout.value?.lines?.find((l) => l.id === lineId))
-const totalAmount = computed(() => line.value ? formatNumberToLocal(line.value.productVariant?.gross * line.value.quantity) : 0)
-const variant = computed(() => line.value?.productVariant)
+const totalAmount = computed(() => line.value ? formatNumberToLocal(line.value.totalPrice) : 0)
+const productVariant = channel.getProductVariant(line.value?.productVariantId ?? '')
+const product = channel.getProduct(productVariant.value?.productId ?? '')
 </script>

apps/web-app/app/components/CommandCenter/ProductCard.vue

@@ -43,5 +43,5 @@ const { productId } = defineProps<{
 const { icons } = useAppConfig()
 const channel = useChannelStore()
 const product = channel.getProduct(productId)
-const isWarning = computed(() => product.value?.variants.length === 0 || !product.value?.isAvailableForPurchase)
+const isWarning = computed(() => product.value?.variants?.length === 0 || !product.value?.isAvailableForPurchase)
 </script>

apps/web-app/app/components/CommandCenter/WarehouseCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-(--ui-bg-muted) relative min-h-36 text-center flex flex-col items-center justify-center">
+  <div class="bg-(--ui-bg-muted) rounded-xl relative min-h-36 text-center flex flex-col items-center justify-center">
     <Icon :name="icons.house" class="size-12 mb-2 text-(--ui-text-dimmed)" />
 
     <h3 class="text-xl font-semibold">

apps/web-app/app/components/DeliveryInfoBlock.vue

@@ -22,5 +22,5 @@ const { t } = useI18n()
 const channel = useChannelStore()
 const checkout = useCheckoutStore()
 const title = computed(() => checkout.deliveryMethod === 'DELIVERY' ? t('app.cart.delivery') : t('app.cart.pickup'))
-const todayUntil = computed(() => channel.workingDay?.isActive ? `${channel.workingDay.closeHours.toString().padStart(2, '0')}:${channel.workingDay.closeMinutes.toString().padStart(2, '0')}` : undefined)
+const todayUntil = computed(() => channel.workingDay?.isActive ? channel.workingDay.close : undefined)
 </script>

apps/web-app/app/components/Form/CreateChannelPaymentMethod.vue

@@ -44,7 +44,7 @@ const { isOpened } = defineProps<{
   isOpened: boolean
 }>()
 
-const emit = defineEmits(['success'])
+const emit = defineEmits(['success', 'submitted'])
 
 const { t } = useI18n()
 const toast = useToast()
@@ -70,6 +70,8 @@ watch(
 )
 
 async function onSubmit(event: FormSubmitEvent<ChannelPaymentMethodCreateSchema>) {
+  emit('submitted')
+
   const { data, error } = await useAsyncData(
     'create-payment-method',
     () => $fetch('/api/channel/payment-method', {

apps/web-app/app/components/Form/DeleteChannelPaymentMethod.vue

@@ -5,7 +5,7 @@
     color="error"
     size="xl"
     class="w-full justify-center items-center"
-    @submit="onSubmit"
+    @click="onSubmit"
   >
     {{ $t('center.delete.title') }}
   </UButton>

apps/web-app/app/components/Form/DeleteProduct.vue

@@ -5,7 +5,7 @@
     color="error"
     size="xl"
     class="w-full justify-center items-center"
-    @submit="onSubmit"
+    @click="onSubmit"
   >
     {{ $t('center.delete.title') }}
   </UButton>

apps/web-app/app/components/Form/DeleteProductVariant.vue

@@ -5,7 +5,7 @@
     variant="soft"
     color="error"
     class="w-full justify-center"
-    @submit="onSubmit"
+    @click="onSubmit"
   >
     {{ $t('center.delete.title') }}
   </UButton>

apps/web-app/app/components/Form/UpdateWorkingDays.vue

@@ -1,19 +1,19 @@
 <template>
   <form class="space-y-4" @submit="onSubmit">
-    <div v-for="day in channel.workingDays" :key="day.id">
+    <div v-for="day in workingDays" :key="day.day">
       <div class="grid grid-cols-2 gap-4">
-        <UFormField :label="`${getLocalizedDayOfWeek(day.day)}, ${$t('common.time-from')}`" :name="`${day.day}.open`">
+        <UFormField :label="`${getLocalizedDayOfWeek(day.day)}, ${$t('common.time-from')}`">
           <UInput
-            v-model="workingDays[day.day as WorkingDay['day']].open"
+            v-model="workingDays[day.index].open"
             type="time"
             size="xl"
             class="w-full items-center justify-center"
           />
         </UFormField>
 
-        <UFormField :label="$t('common.time-to')" :name="`${day.day}.close`">
+        <UFormField :label="$t('common.time-to')">
           <UInput
-            v-model="workingDays[day.day as WorkingDay['day']].close"
+            v-model="workingDays[day.index].close"
             type="time"
             size="xl"
             class="w-full items-center justify-center"
@@ -45,31 +45,7 @@ const { t } = useI18n()
 const toast = useToast()
 const channel = useChannelStore()
 
-const days = ['MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY', 'SUNDAY'] as const
-
-const workingDays = reactive(prepareWorkingDays())
-
-function prepareWorkingDays() {
-  const preparedDays = {
-    MONDAY: { open: '', close: '' },
-    TUESDAY: { open: '', close: '' },
-    WEDNESDAY: { open: '', close: '' },
-    THURSDAY: { open: '', close: '' },
-    FRIDAY: { open: '', close: '' },
-    SATURDAY: { open: '', close: '' },
-    SUNDAY: { open: '', close: '' },
-  }
-
-  for (const day of days) {
-    const dayData = channel.workingDays.find((d) => d.day === day)
-    preparedDays[day] = {
-      open: `${dayData?.openHours.toString().padStart(2, '0')}:${dayData?.openMinutes.toString().padStart(2, '0')}`,
-      close: `${dayData?.closeHours.toString().padStart(2, '0')}:${dayData?.closeMinutes.toString().padStart(2, '0')}`,
-    }
-  }
-
-  return preparedDays
-}
+const workingDays = ref(channel.workingDays ?? [])
 
 async function onSubmit() {
   emit('submitted')
@@ -86,7 +62,7 @@ async function onSubmit() {
     'update-working-days',
     () => $fetch('/api/channel/working-day', {
       method: 'PATCH',
-      body: workingDaysCopy,
+      body: workingDays,
     }),
   )
 

apps/web-app/app/components/Modal/CreateChannelPaymentMethod.vue

@@ -3,6 +3,7 @@
     <template #body>
       <FormCreateChannelPaymentMethod
         :is-opened="modal.isOpen.value"
+        @submitted="modal.close()"
         @success="modal.close()"
       />
     </template>

apps/web-app/app/components/ProductCard.vue

@@ -42,19 +42,20 @@
 </template>
 
 <script setup lang="ts">
-const { productId } = defineProps<{
+const { productId, categorySlug } = defineProps<{
   productId: string
+  categorySlug: string
   lazy?: boolean
 }>()
 
 const channel = useChannelStore()
 const product = channel.getProduct(productId)
 
-const withSingleVariant = computed(() => product.value?.variants.length === 1)
-const smallestVariant = computed(() => withSingleVariant.value ? product.value?.variants[0] : product.value?.variants.reduce((prev, curr) => (prev.gross < curr.gross ? prev : curr)))
+const withSingleVariant = computed<boolean>(() => product.value?.variants.length === 1)
+const smallestVariant = computed(() => product.value?.variants[0])
 
 const price = computed(() => formatNumberToLocal(smallestVariant.value?.gross))
 const weightValue = computed(() => smallestVariant.value?.weightValue)
 const weightUnit = computed(() => getWeightLocalizedUnit(smallestVariant.value?.weightUnit))
-const productUrl = `/catalog/${product.value?.category?.slug}/${product.value?.slug}`
+const productUrl = `/catalog/${categorySlug}/${product.value?.slug}`
 </script>

apps/web-app/app/components/SearchBlock.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="invisible group-hover:visible group-focus:visible group-active:visible group-focus-within:visible group-focus-visible:visible fixed top-16 left-0 w-72 bg-(--ui-bg-accented) px-4 py-4 rounded-b-2xl shadow-lg duration-200">
-    <div v-if="searchQuery.length" class="flex flex-col gap-2">
+    <div v-if="searchQuery?.length" class="flex flex-col gap-2">
       <div v-if="showResults?.length" class="flex flex-col gap-2">
         <UButton
           v-for="product in showResults"
@@ -38,6 +38,6 @@
 const { searchQuery } = useApp()
 const channel = useChannelStore()
 
-const topResults = computed(() => channel.activeProducts.slice(0, 5))
+const topResults = computed(() => channel.getTopSearchedProducts())
 const showResults = computed(() => channel.getProductsByQuery(searchQuery.value)?.slice(0, 5))
 </script>

apps/web-app/app/middleware/02.staff.ts

@@ -6,10 +6,9 @@ export default defineNuxtRouteMiddleware(async () => {
   }
 
   // Check if staff has actual information
-  const { error } = await useFetch(`/api/user/${user.value?.id}`)
-  if (error.value?.message) {
+  const { error } = await useFetch(`/api/user/${user.value.id}`)
+  if (error.value) {
     await clear()
-
     return navigateTo('/command-center/sign-in')
   }
 })

apps/web-app/app/pages/catalog/[categorySlug]/[productSlug]/index.vue

@@ -134,11 +134,13 @@ const inCart = computed(() => {
   return checkout.lines.find((l) => l.productVariantId === selectedVariant.value?.id)
 })
 
+const category = channel.getMenuCategoryByProduct(product.value.id)
+
 const breadcrumbs = computed(() => [
   { label: t('common.home'), icon: 'food:home', to: '/' },
   {
-    label: product.value?.category.name ?? '',
-    to: `/catalog/${product.value?.category?.slug}`,
+    label: category?.name ?? '',
+    to: `/catalog/${category?.slug}`,
   },
 ])
 </script>

apps/web-app/app/pages/catalog/[categorySlug]/index.vue

@@ -8,9 +8,10 @@
 
   <div class="mt-4 max-w-7xl grid grid-cols-2 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4 gap-4 md:gap-6">
     <ProductCard
-      v-for="product in category?.products.filter((p) => p.isAvailableForPurchase)"
+      v-for="product in products"
       :key="product.id"
       :product-id="product.id"
+      :category-slug="category?.slug ?? ''"
     />
   </div>
 </template>
@@ -28,6 +29,8 @@ if (!category.value) {
   })
 }
 
+const products = channel.getProductsInCategory(category.value.id).value.filter((p) => p.isAvailableForPurchase && p.variants.length)
+
 useHead({
   title: category.value?.name,
 })