filters #26

Merged
goc_marek merged 6 commits from filters into main 2026-03-25 01:53:13 +00:00
3 changed files with 111 additions and 88 deletions
Showing only changes of commit bb1cdee3f4 - Show all commits

View File

@@ -7,7 +7,8 @@
<div v-if="!customerStore.hasAccount" class="flex flex-col items-center justify-center py-12"> <div v-if="!customerStore.hasAccount" class="flex flex-col items-center justify-center py-12">
<div class="text-center flex flex-col items-center justify-center mb-6"> <div class="text-center flex flex-col items-center justify-center mb-6">
<UIcon name="mdi:domain" class="text-[60px] text-gray-400 dark:text-gray-500" /> <UIcon name="mdi:domain" class="text-[60px] text-gray-400 dark:text-gray-500" />
<p class="mt-4 text-lg text-gray-600 dark:text-gray-400">{{ t('No customer account found') }}</p> <p class="mt-4 text-lg text-gray-600 dark:text-gray-400">{{ t('No customer account found') }}
</p>
<p class="text-sm text-gray-500 dark:text-gray-500">{{ t('Create an account to manage your company data') }}</p> <p class="text-sm text-gray-500 dark:text-gray-500">{{ t('Create an account to manage your company data') }}</p>
</div> </div>
<UButton color="primary" @click="goToCreateAccount" <UButton color="primary" @click="goToCreateAccount"
@@ -26,6 +27,7 @@
class="text-[24px] text-(--accent-blue-light) dark:text-(--accent-blue-dark)" /> class="text-[24px] text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
{{ t('Company Information') }} {{ t('Company Information') }}
</h2> </h2>
<div class="grid grid-cols-1 gap-10">
<div class="grid grid-cols-1 md:grid-cols-2 gap-2"> <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
<div> <div>
<label <label
@@ -34,38 +36,47 @@
</p> </p>
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">{{t('Company Email') }}</label> <label
class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">{{
t('Company Email') }}</label>
<p class="text-black dark:text-white">{{ customerStore.customer?.companyEmail || '-'}} <p class="text-black dark:text-white">{{ customerStore.customer?.companyEmail || '-'}}
</p> </p>
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">{{t('REGON') }}</label> <label
<p class="text-black dark:text-white">{{ customerStore.customer?.regon || '-' }}</p> class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">{{ t('REGON')}}</label>
<p class="text-black dark:text-white">{{ customerStore.customer?.regon || '-' }}
</p>
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">{{t('NIP') }}</label> <label
<p class="text-black dark:text-white">{{ customerStore.customer?.nip || '-' }}</p> class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">{{t('NIP')}}</label>
<p class="text-black dark:text-white">{{ customerStore.customer?.nip || '-' }}
</p>
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">{{t('VAT') }}</label> <label
<p class="text-black dark:text-white">{{ customerStore.customer?.vat || '-' }}</p> class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">{{t('VAT')}}</label>
<p class="text-black dark:text-white">{{ customerStore.customer?.vat || '-' }}
</p>
</div> </div>
</div> </div>
</div> <div>
<div class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) p-4"> <h2
<h2 class="text-xl font-semibold text-black dark:text-white mb-4 flex items-center gap-2"> class="text-xl font-semibold text-black dark:text-white mb-2 flex items-center gap-2">
<UIcon name="mdi:map-marker" <UIcon name="mdi:map-marker"
class="text-[24px] text-(--accent-blue-light) dark:text-(--accent-blue-dark)" /> class="text-[24px] text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
{{ t('Addresses') }} {{ t('Addresses') }}
</h2> </h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div> <div>
<label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">{{ t('Company Address') }}</label> <label
class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">{{ t('Company Address') }}</label>
<div v-if="companyAddress" <div v-if="companyAddress"
class="p-4 bg-white dark:bg-(--black) rounded-md border border-(--border-light) dark:border-(--border-dark)"> class="p-4 bg-white dark:bg-(--black) rounded-md border border-(--border-light) dark:border-(--border-dark)">
<p class="text-black dark:text-white">{{ companyAddress.street }}</p> <p class="text-black dark:text-white">{{ companyAddress.street }}</p>
<p class="text-black dark:text-white">{{ companyAddress.zipCode }}, {{ <p class="text-black dark:text-white">{{ companyAddress.zipCode }},
companyAddress.city }}</p> {{ companyAddress.city }}</p>
<p class="text-black dark:text-white">{{ companyAddress.country }}</p> <p class="text-black dark:text-white">{{ companyAddress.country }}</p>
</div> </div>
<p v-else class="text-gray-400 dark:text-gray-500">-</p> <p v-else class="text-gray-400 dark:text-gray-500">-</p>
@@ -73,6 +84,8 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<div class="flex justify-end"> <div class="flex justify-end">
<UButton color="primary" variant="outline" <UButton color="primary" variant="outline"
class="text-(--accent-blue-light) dark:text-(--accent-blue-dark) border-(--accent-blue-light) dark:border-(--accent-blue-dark)" class="text-(--accent-blue-light) dark:text-(--accent-blue-dark) border-(--accent-blue-light) dark:border-(--accent-blue-dark)"

View File

@@ -35,7 +35,7 @@
<tr v-for="product in productsList" :key="product.product_id" <tr v-for="product in productsList" :key="product.product_id"
class="hover:bg-gray-50 dark:hover:bg-gray-800"> class="hover:bg-gray-50 dark:hover:bg-gray-800">
<td class="px-6 py-4 whitespace-nowrap"> <td class="px-6 py-4 whitespace-nowrap">
<img :src="getImageUrl(product.ImageID, product.LinkRewrite,)" alt="product image" <img :src="product.ImageID" alt="product image"
class="w-16 h-16 object-cover rounded" /> class="w-16 h-16 object-cover rounded" />
</td> </td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{
@@ -49,6 +49,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<UPagination v-model:page="page" :total="total" :page-size="perPage" />
<div v-if="productsList.length === 0" class="text-center py-8 text-gray-500 dark:text-gray-400"> <div v-if="productsList.length === 0" class="text-center py-8 text-gray-500 dark:text-gray-400">
No products found No products found
</div> </div>
@@ -59,17 +60,21 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, Suspense } from 'vue' import { ref, onMounted, watch } from 'vue'
import { useFetchJson } from '@/composable/useFetchJson' import { useFetchJson } from '@/composable/useFetchJson'
import Default from '@/layouts/default.vue' import Default from '@/layouts/default.vue'
// import CategoryMenu from '@/components/inner/categoryMenu.vue'
interface Product { interface Product {
product_id: number product_id: number
name: string name: string
ImageID: number ImageID: string
LinkRewrite: string LinkRewrite: string
} }
const page = ref(1)
const perPage = ref(15)
const total = ref(0)
interface ApiResponse { interface ApiResponse {
message: string message: string
items: Product[] items: Product[]
@@ -80,21 +85,26 @@ const productsList = ref<Product[]>([])
const loading = ref(true) const loading = ref(true)
const error = ref<string | null>(null) const error = ref<string | null>(null)
function getImageUrl(imageID: number, linkRewrite: string, size: string = 'small_default') {
return `https://www.naluconcept.com/${imageID}-${size}/${linkRewrite}.webp`
}
async function fetchProductList() { async function fetchProductList() {
loading.value = true loading.value = true
error.value = null error.value = null
try { try {
const response = await useFetchJson('/api/v1/restricted/list-products/get-listing?p&elems&shopID=1') as ApiResponse const response = await useFetchJson(
`api/v1/restricted/list-products/get-listing?p=${page.value}&elems=${perPage.value}`
) as ApiResponse
productsList.value = response.items || [] productsList.value = response.items || []
total.value = response.count || 0
} catch (e: unknown) { } catch (e: unknown) {
error.value = e instanceof Error ? e.message : 'Failed to load products' error.value = e instanceof Error ? e.message : 'Failed to load products'
console.error(e)
} finally { } finally {
loading.value = false loading.value = false
} }
} }
watch(page, () => {
fetchProductList()
})
onMounted(fetchProductList) onMounted(fetchProductList)
</script> </script>

View File

@@ -238,7 +238,7 @@ const columns = computed<TableColumn<IssueTimeSummary>[]>(() => [
</h2> </h2>
<UTable :data="issues" :columns="columns" class="flex-1 dark:text-white! text-dark" /> <UTable :data="issues" :columns="columns" class="flex-1 dark:text-white! text-dark" />
<div class="pt-4 flex justify-center items-center dark:text-white! text-dark"> <div class="pt-4 flex justify-center items-center dark:text-white! text-dark">
<UPagination v-model:page="page" :total="totalItems" /> <UPagination v-model:page="page" :total="totalItems" :page-size="10" />
</div> </div>
</div> </div>