boonkerz/printshopcreator
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases 2 Wiki Activity

workin

Browse Source
This commit is contained in:
Thomas Peterson 2025-07-31 14:18:59 +02:00
parent e1192ee506
commit 10ef24ffe0
3 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/media/MediaBrowser.vue
View File

@ -25,11 +25,16 @@ interface Media {
name: string;
}
const emit = defineEmits(['select-media']);
const folders = ref<Folder[]>([]);
const selectMedia = (media: Media) => {
emit('select-media', media);
};
const media = ref<Media[]>([]);
const selectedFolder = ref<string | null>(null);
const currentPage = ref(1);
const totalPages = ref(1);
const totalMedia = ref(0);
const loadFolders = async () => {
try {
@ -48,7 +53,7 @@ const loadMedia = async (folderId: string, page: number = 1) => {
const response: any = await fetchMediaByFolder(folderId, page);
media.value = response.data;
currentPage.value = response.currentPage;
totalPages.value = response.lastPage;
totalMedia.value = response.count;
} catch (error) {
console.error(`Failed to fetch media for folder ${folderId}`, error);
}
@ -75,7 +80,7 @@ onMounted(() => {
<h1 class="text-2xl font-bold mb-4">Media Browser</h1>
<ResizablePanelGroup direction="horizontal" class="flex-grow rounded-lg border">
<ResizablePanel :default-size="25">
<div class="flex h-full items-start justify-center p-6">
<div class="h-full overflow-y-auto p-6">
<FolderTree :folders="folders" :selected-folder-id="selectedFolder" @select-folder="selectFolder" />
</div>
</ResizablePanel>
@ -83,12 +88,12 @@ onMounted(() => {
<ResizablePanel :default-size="75">
<div class="flex flex-col h-full p-6">
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 flex-grow">
<div v-for="item in media" :key="item.uuid" class="aspect-square bg-gray-100 rounded-lg overflow-hidden">
<div v-for="item in media" :key="item.uuid" class="aspect-square bg-gray-100 rounded-lg overflow-hidden cursor-pointer" @click="selectMedia(item)">
<img :src="item.url" :alt="item.name" class="w-full h-full object-cover" />
</div>
</div>
<div class="mt-4 flex justify-center">
<Pagination v-if="totalPages > 1" :total="totalPages" :sibling-count="1" show-edges :default-page="currentPage" @update:page="onPageChange">
<Pagination v-if="totalMedia > 12" :items-per-page="12" :total="totalMedia" :sibling-count="1" show-edges :default-page="currentPage" @update:page="onPageChange">
<PaginationContent v-slot="{ items }" class="flex items-center gap-1">
<PaginationPrevious />
<template v-for="(page, index) in items">

11
src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/properties/MediaElement.vue
View File

@ -23,7 +23,14 @@ interface Folder {
uuid: string
title: string
}
const dialogOpen = ref(false);
const uploadProgress = ref(0);
const handleMediaSelect = (media: any) => {
theModel.value.default = media.uuid;
theModel.value.url = media.url;
dialogOpen.value = false;
};
const isDragging = ref(false);
const directories = ref<Folder[]>([]);
const selectedDirectory = ref<string>('');
@ -89,12 +96,12 @@ const handleFile = async (file: File) => {
<div>
<label>{{ $t('id') }}</label>
<Input v-model="theModel!.id" />
<Dialog>
<Dialog v-model:open="dialogOpen">
<DialogTrigger as-child>
<Button class="my-2 w-full">Mediabrowser</Button>
</DialogTrigger>
<DialogContent class="sm:max-w-5xl max-h-[80vh] overflow-y-auto">
<MediaBrowser />
<MediaBrowser @select-media="handleMediaSelect" />
</DialogContent>
</Dialog>
<div

2
src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/vite.config.ts
View File

@ -33,7 +33,7 @@ export default defineConfig({
changeOrigin: true,
configure: (proxy) => {
proxy.on('proxyReq', (proxyReq) => {
proxyReq.setHeader('Authorization', 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJpYXQiOjE3NTM5NTU4MzMsImV4cCI6MTc1Mzk1OTQzMywicm9sZXMiOlsiUk9MRV9BRE1JTiIsIlJPTEVfU0hPUF9PUEVSQVRPUiIsIlJPTEVfVVNFUiIsIlJPTEVfVVNFUiIsIlJPTEVfUFNDX0NvbGxlY3RfQ29udGFjdF9FZGl0IiwiUk9MRV9QU0NfQ29sbGVjdF9Db250YWN0X0FkZCIsIlJPTEVfUFNDX0NvbGxlY3RfQ29udGFjdF9EZWxldGUiLCJST0xFX1BTQ19Db2xsZWN0X0NvbnRhY3RfTG9jayIsIlJPTEVfUFNDX1IyX1NlbmRjbG91ZF9TaG93Il0sInVpZCI6MX0.rUlkpFBa-RKQAxSa6e0UmggiqPlDj-Mz4I56T-kTOT5j5veI3JFYHOvptbeEjITPdmHM_Dm86CpEuIkezQC1UBsuzGkSYLQRy8Cb_YnNEEbaoCsg28q60Wu_dfBbDEFRjXnbEVSrwbfawRMq4FUTuky7r8qstORRhL1bPtfL3cN_lPEruffSreuvUReM7inkjOHU4utGuVhMm1D3oK1p398YmZACmQfiYLYOM6c07Isop5IZ0Mfq0LZ_BEVptQi7Thb4nAHiEUZfyBqhLrrWxmUFcpF2Mp7-_dZZeiA9w2ZYZBA-sGMAF0EwCDU1_WK-o0BDZDk-qKMj4zrFHe8TEg');
proxyReq.setHeader('Authorization', 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJpYXQiOjE3NTM5NjM0MjksImV4cCI6MTc1Mzk2NzAyOSwicm9sZXMiOlsiUk9MRV9BRE1JTiIsIlJPTEVfU0hPUF9PUEVSQVRPUiIsIlJPTEVfVVNFUiIsIlJPTEVfVVNFUiIsIlJPTEVfUFNDX0NvbGxlY3RfQ29udGFjdF9FZGl0IiwiUk9MRV9QU0NfQ29sbGVjdF9Db250YWN0X0FkZCIsIlJPTEVfUFNDX0NvbGxlY3RfQ29udGFjdF9EZWxldGUiLCJST0xFX1BTQ19Db2xsZWN0X0NvbnRhY3RfTG9jayIsIlJPTEVfUFNDX1IyX1NlbmRjbG91ZF9TaG93Il0sInVpZCI6MX0.OdEjvrvnZQs5Rty_t5gPIr7N4FV4Sq8KWvWDD76qHiIcLdj89IGtShFfFBUk4jtF6Y4heS7uDOAsTuY1KhhiusCPp9zXhCne3HoygK5EQPQ72u9LkMghpuGjStBVAPECaxoxufSfoKYAmBl7D3bcowZ8rfx2fKRwWl0vDWO7Vj9uu2cf3HrRzNl4zrbJMk0xtrQjPs5zF5j1AFSnd2OpYU7j3od5GPZqmQPZofd-vhbO85eMyDpaucJ7UMsef8G1Gq0TO6CBh1Hg7hqCXVX_nDKhhNz4Hi26DqK6GjX8a4AkJFeyfCxictYsAvIQsEmhL8oP52WcXdRV3Tqr2RwaSw');
});
},
},