feat: add product select to price alerts

Customer can pick a product when creating an alert and see it on the card.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/views/base/priceTrigger/components/Item.vue

@@ -3,6 +3,10 @@
     <p class="dptr-card__price">{{ usePrice(item.target_price) }}</p>
 
     <div class="dptr-card__meta">
+      <div class="dptr-card__row">
+        <span class="dptr-card__label">محصول:</span>
+        <span class="dptr-card__value">{{ productTitle }}</span>
+      </div>
       <div class="dptr-card__row">
         <span class="dptr-card__label">جهت قیمت:</span>
         <span class="dptr-card__value">{{ returnPriceCondition(item.price_condition) }}</span>
@@ -76,6 +80,7 @@
       </div>
     </div>
     <div class="flex flex-col gap-2 mt-2">
+      <BasicInfoItem is-line title="محصول" :value="productTitle" />
       <BasicInfoItem is-line title="جهت قیمت" :value="returnPriceCondition(item.price_condition)" />
       <BasicInfoItem is-line title="نوع هشدار" :value="returnAction(item.action)" />
     </div>
@@ -108,7 +113,7 @@
 
 <script lang="ts" setup>
 import { usePrice } from '../../../../utils/usePrice'
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { toJalali } from '../../../../utils/useDateTime'
 import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 import type { PriceTrigger } from '@/models/PriceTrigger'
@@ -132,6 +137,8 @@ const props = withDefaults(
 
 const emits = defineEmits(['edit', 'refresh'])
 
+const productTitle = computed(() => props.item.product?.title || 'طلا')
+
 onMounted(() => {
   isActive.value = props.item.is_active
 })

src/views/base/priceTrigger/components/PriceTriggerForm.vue

@@ -7,6 +7,16 @@
     @finish="ok()"
   >
     <div class="flex flex-col gap-4 w-full">
+      <a-form-item :rules="[required()]" label="محصول" name="product_id">
+        <BasicSelect
+          v-model:value="form.product_id"
+          :items="products"
+          key-name="id"
+          placeholder="آبشده، سکه، نقره و ..."
+          size="large"
+          value-name="title"
+        />
+      </a-form-item>
       <a-form-item :rules="[required()]" label="جهت قیمت" name="price_condition">
         <BasicSelect
           v-model:value="form.price_condition"
@@ -58,6 +68,7 @@ const {
   loading,
   radioStyle,
   typeItems,
+  products,
   ok,
 } = usePriceTriggerPageContext()
 </script>

src/views/base/priceTrigger/composables/usePriceTriggerPage.ts

@@ -2,12 +2,25 @@ import { inject, onMounted, provide, reactive, ref, type InjectionKey, type Ref
 import { cloneDeep } from 'lodash'
 import { type FormInstance, message } from 'ant-design-vue'
 import { createPriceTrigger, getPriceTriggers, updatePriceTrigger } from '@/api/triggerPrice'
+import { getProducts } from '@/api/products'
 import type { SelectItem } from '@/models/SelectItem'
 import type { PriceTrigger } from '@/models/PriceTrigger'
+import type { Product } from '@/models/products'
 import { loading } from '@/utils'
 
+function emptyForm(): PriceTrigger {
+  return {
+    product_id: undefined,
+    price_condition: '',
+    is_active: true,
+    action: '',
+    target_price: '',
+  }
+}
+
 export interface PriceTriggerPageContext {
   items: Ref<PriceTrigger[]>
+  products: Ref<Product[]>
   addTriggerVisible: Ref<boolean>
   editId: Ref<number | undefined>
   form: Ref<PriceTrigger>
@@ -27,6 +40,7 @@ export const PRICE_TRIGGER_PAGE_CONTEXT_KEY: InjectionKey<PriceTriggerPageContex
 
 export function usePriceTriggerPage() {
   const items = ref<PriceTrigger[]>([])
+  const products = ref<Product[]>([])
   const addTriggerVisible = ref(false)
   const editId = ref<number | undefined>(undefined)
   const formRef = ref<FormInstance>()
@@ -37,12 +51,7 @@ export function usePriceTriggerPage() {
     lineHeight: '30px',
   })
 
-  const form = ref<PriceTrigger>({
-    price_condition: '',
-    is_active: true,
-    action: '',
-    target_price: '',
-  })
+  const form = ref<PriceTrigger>(emptyForm())
 
   const typeItems: SelectItem[] = [
     { value: 'بزرگتر', key: '>' },
@@ -51,12 +60,7 @@ export function usePriceTriggerPage() {
   ]
 
   function resetFields() {
-    form.value = {
-      price_condition: '',
-      is_active: true,
-      action: '',
-      target_price: '',
-    }
+    form.value = emptyForm()
   }
 
   function openAdd() {
@@ -66,7 +70,10 @@ export function usePriceTriggerPage() {
   }
 
   function openEdit(val: PriceTrigger) {
-    form.value = cloneDeep(val)
+    form.value = cloneDeep({
+      ...val,
+      product_id: val.product_id ?? val.product?.id,
+    })
     editId.value = form.value.id
     addTriggerVisible.value = true
   }
@@ -82,6 +89,14 @@ export function usePriceTriggerPage() {
     }
   }
 
+  async function loadProducts() {
+    try {
+      products.value = ((await getProducts()) as Product[]) ?? []
+    } catch (e) {
+      console.log(e)
+    }
+  }
+
   async function ok() {
     await formRef.value?.validateFields().then(async () => {
       try {
@@ -104,10 +119,12 @@ export function usePriceTriggerPage() {
 
   onMounted(() => {
     initItems()
+    loadProducts()
   })
 
   const context: PriceTriggerPageContext = {
     items,
+    products,
     addTriggerVisible,
     editId,
     form,