goc_daniel/b2b
2
0
Fork 0
Code Issues 8 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: selects

Browse Source
This commit is contained in:
Arina Yakovenko
2026-04-01 13:41:21 +02:00
parent 729b54ca1a
commit aa57d38bd6
12 changed files with 197 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
bo/src/components/admin/PageProducts.vue
View File

@@ -7,7 +7,7 @@
<UTable :data="productsList" :columns="columns" class="flex-1 w-full" />
<UPagination v-model:page="page" :total="total" :items-per-page="perPage" />
</div>
</div> -->
</div>
</component>
</suspense>
</template>
@@ -173,6 +173,7 @@ const UInput = resolveComponent('UInput')
const UButton = resolveComponent('UButton')
const UIcon = resolveComponent('UIcon')
import errorImg from '@/assets/error.svg'
const columns: TableColumn<Product>[] = [
{
accessorKey: 'product_id',
@@ -209,9 +210,13 @@ const columns: TableColumn<Product>[] = [
cell: ({ row }) => {
return h('img', {
src: row.getValue('image_link') as string,
style: 'width:40px;height:40px;object-fit:cover;'
style: 'width:40px;height:40px;object-fit:cover;',
onError: (e: Event) => {
const target = e.target as HTMLImageElement
target.src = errorImg
}
})
}
},
},
{
accessorKey: 'name',
@@ -272,8 +277,9 @@ const columns: TableColumn<Product>[] = [
onClick: () => {
goToProduct(row.original.product_id)
},
color: 'primary',
variant: 'solid'
class: 'cursor-pointer',
color: 'info',
variant: 'soft'
}, () => 'Show product')
},
}

53
bo/src/components/admin/ProductDetailView.vue
View File

@@ -1,22 +1,19 @@
<template>
<component :is="Default || 'div'">
<p @click="backToProducts()">Back to products</p>
<div class="container my-10 mx-auto">
<div class="flex items-end justify-between gap-4 mb-6 bg-(--second-light) dark:bg-(--main-dark) border border-(--border-light) dark:border-(--border-dark) p-4 rounded-md">
<div
class="flex items-end justify-between gap-4 mb-6 bg-(--second-light) dark:bg-(--main-dark) border border-(--border-light) dark:border-(--border-dark) p-4 rounded-md">
<div class="flex items-center gap-3">
<template v-if="!isViewingExistingTranslation">
<USelectMenu
v-model="selectedLangId"
:items="langOptions"
value-key="id"
class="w-40"
:search-input="false"
>
<USelectMenu v-model="selectedLangId" :items="langOptions" value-key="id" class="w-40"
:search-input="false">
<template #default="{ modelValue }">
<span class="dark:text-white text-black">
{{ langOptions.find(l => l.id === modelValue)?.name }}
{{langOptions.find(l => l.id === modelValue)?.name}}
</span>
</template>
@@ -27,24 +24,15 @@
</template>
</USelectMenu>
<UButton
@click="translateOrSave"
:disabled="selectedLangId === defaultLangId"
:loading="translating"
class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) px-12!"
>
<UButton @click="translateOrSave" :disabled="selectedLangId === defaultLangId" :loading="translating"
class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) px-12!">
Translate
</UButton>
</template>
<template v-else>
<UButton
@click="goBackToDefault"
color="neutral"
variant="outline"
class="cursor-pointer"
>
<UButton @click="goBackToDefault" color="neutral" variant="outline" class="cursor-pointer">
<UIcon name="i-lucide-arrow-left" class="mr-1" />
<p class="dark:text-white">Back to Polish</p>
</UButton>
@@ -116,25 +104,34 @@
<!-- USAGE -->
<div v-if="activeTab === 'usage'" class="box">
<div class="flex justify-end mb-4 gap-2">
<UButton v-if="!isEditing" @click="enableUsageEdit" class="bg-(--accent-blue-light)! dark:bg-(--accent-blue-dark)! text-white px-3 py-1 rounded">
<UButton v-if="!isEditing" @click="enableUsageEdit"
class="bg-(--accent-blue-light)! dark:bg-(--accent-blue-dark)! text-white px-3 py-1 rounded">
Edit Usage
</UButton>
<UButton v-if="isEditing" @click="saveUsage" class="px-3 py-1 border rounded">Save</UButton>
<UButton v-if="isEditing" @click="cancelUsageEdit" class="px-3 py-1 border rounded">Cancel</UButton>
</div>
<p ref="usageRef" v-html="displayedUsage || 'Usage information not available'" class="text-black dark:text-white"></p>
<p ref="usageRef" v-html="displayedUsage || 'Usage information not available'"
class="text-black dark:text-white">
</p>
</div>
<!-- DESCRIPTION -->
<div v-if="activeTab === 'description'" class="box">
<div class="flex justify-end mb-4 gap-2">
<UButton v-if="!descriptionEdit.isEditing.value" @click="enableDescriptionEdit" class="bg-(--accent-blue-light)! dark:bg-(--accent-blue-dark)! text-white px-3 py-1 rounded">
<UButton v-if="!descriptionEdit.isEditing.value" @click="enableDescriptionEdit"
class="bg-(--accent-blue-light)! dark:bg-(--accent-blue-dark)! text-white px-3 py-1 rounded">
Edit Description
</UButton>
<UButton v-if="descriptionEdit.isEditing.value" @click="saveDescription" class="px-3 py-1 border rounded">Save</UButton>
<UButton v-if="descriptionEdit.isEditing.value" @click="cancelDescriptionEdit" class="px-3 py-1 border rounded">Cancel</UButton>
<UButton v-if="descriptionEdit.isEditing.value" @click="saveDescription" class="px-3 py-1 border rounded">
Save
</UButton>
<UButton v-if="descriptionEdit.isEditing.value" @click="cancelDescriptionEdit"
class="px-3 py-1 border rounded">
Cancel</UButton>
</div>
<div ref="descriptionRef" v-html="displayedDescription || 'Description not available'" class="text-black dark:text-white"></div>
<div ref="descriptionRef" v-html="displayedDescription || 'Description not available'"
class="text-black dark:text-white"></div>
</div>
</div>