99 />
1010 </SectionHeader >
1111
12- <div v-if =" originalFile" class =" bg-gray-100 p-4 rounded-md shadow-md" >
13- <h3 class =" text-lg font-semibold" >{{ t('Original File') }}</h3 >
14- <p ><strong >{{ t('Title:') }}</strong > {{ originalFile.originalName }}</p >
15- <p ><strong >{{ t('Format:') }}</strong > {{ originalFile.mimeType }}</p >
16- <p ><strong >{{ t('Size:') }}</strong > {{ prettyBytes(originalFile.size) }}</p >
12+ <div
13+ v-if =" originalFile"
14+ class =" bg-gray-100 p-4 rounded-md shadow-md"
15+ >
16+ <h3 class =" text-lg font-semibold" >{{ t("Original File") }}</h3 >
17+ <p >
18+ <strong >{{ t("Title:") }}</strong > {{ originalFile.originalName }}
19+ </p >
20+ <p >
21+ <strong >{{ t("Format:") }}</strong > {{ originalFile.mimeType }}
22+ </p >
23+ <p >
24+ <strong >{{ t("Size:") }}</strong > {{ prettyBytes(originalFile.size) }}
25+ </p >
1726 </div >
1827
1928 <div class =" space-y-6" >
20- <h3 class =" text-xl font-bold" >{{ t(' Upload New Variation' ) }}</h3 >
29+ <h3 class =" text-xl font-bold" >{{ t(" Upload New Variation" ) }}</h3 >
2130
22- <form @submit.prevent =" uploadVariation" class =" flex flex-col space-y-4" >
31+ <form
32+ @submit.prevent =" uploadVariation"
33+ class =" flex flex-col space-y-4"
34+ >
2335 <div class =" grid grid-cols-1 md:grid-cols-2 gap-4" >
2436 <BaseFileUpload
2537 @file-selected =" onFileSelected"
5264 </div >
5365
5466 <div >
55- <h3 class =" text-xl font-bold mb-4" >{{ t('Current Variations') }}</h3 >
56- <DataTable :value =" variations" class =" w-full" >
57- <Column field =" title" :header =" t('Title')" />
58- <Column field =" mimeType" :header =" t('Format')" />
59- <Column field =" size" :header =" t('Size')" >
67+ <h3 class =" text-xl font-bold mb-4" >{{ t("Current Variations") }}</h3 >
68+ <DataTable
69+ :value =" variations"
70+ class =" w-full"
71+ >
72+ <Column
73+ field =" title"
74+ :header =" t('Title')"
75+ />
76+ <Column
77+ field =" mimeType"
78+ :header =" t('Format')"
79+ />
80+ <Column
81+ field =" size"
82+ :header =" t('Size')"
83+ >
6084 <template #body =" slotProps " >
6185 {{ prettyBytes(slotProps.data.size) }}
6286 </template >
6387 </Column >
64- <Column field =" updatedAt" :header =" t('Updated At')" />
65- <Column field =" url" :header =" t('URL')" >
88+ <Column
89+ field =" updatedAt"
90+ :header =" t('Updated At')"
91+ />
92+ <Column
93+ field =" url"
94+ :header =" t('URL')"
95+ >
6696 <template #body =" slotProps " >
97+ <video
98+ v-if =" slotProps.data.mimeType.startsWith('video/')"
99+ controls
100+ class =" max-w-xs"
101+ >
102+ <source :src =" slotProps.data.path" />
103+ </video >
67104 <a
105+ v-else
68106 :href =" slotProps.data.path"
69107 target =" _blank"
70108 class =" text-blue-500 hover:underline"
71109 >
72- {{ t(' View' ) }}
110+ {{ t(" View" ) }}
73111 </a >
74112 </template >
75113 </Column >
76- <Column field =" creator" :header =" t('Creator')" />
77- <Column field =" accessUrl" :header =" t('Associated URL')" >
114+ <Column
115+ field =" creator"
116+ :header =" t('Creator')"
117+ />
118+ <Column
119+ field =" accessUrl"
120+ :header =" t('Associated URL')"
121+ >
78122 <template #body =" slotProps " >
79123 <span >
80- {{ slotProps.data.url ? slotProps.data.url : t(' Default (No URL)' ) }}
124+ {{ slotProps.data.url ? slotProps.data.url : t(" Default (No URL)" ) }}
81125 </span >
82126 </template >
83127 </Column >
84128 <Column >
85- <template #header >{{ t(' Actions' ) }}</template >
129+ <template #header >{{ t(" Actions" ) }}</template >
86130 <template #body =" slotProps " >
87131 <BaseButton
88132 :label =" t('Delete')"
99143
100144<script setup>
101145import { ref , onMounted , computed } from " vue"
102- import { useRoute , useRouter } from ' vue-router'
103- import { useI18n } from ' vue-i18n'
104- import axios from ' axios'
105- import DataTable from ' primevue/datatable'
106- import Column from ' primevue/column'
146+ import { useRoute , useRouter } from " vue-router"
147+ import { useI18n } from " vue-i18n"
148+ import axios from " axios"
149+ import DataTable from " primevue/datatable"
150+ import Column from " primevue/column"
107151import SectionHeader from " ../../components/layout/SectionHeader.vue"
108152import BaseButton from " ../../components/basecomponents/BaseButton.vue"
109153import BaseFileUpload from " ../../components/basecomponents/BaseFileUpload.vue"
110- import prettyBytes from ' pretty-bytes'
154+ import prettyBytes from " pretty-bytes"
111155import { useCidReq } from " ../../composables/cidReq"
112156import { useSecurityStore } from " ../../store/securityStore"
113157
@@ -126,7 +170,7 @@ const isAdmin = computed(() => securityStore.isAdmin)
126170
127171onMounted (async () => {
128172 if (! isAdmin .value ) {
129- await router .push ({ name: ' DocumentsList' })
173+ await router .push ({ name: " DocumentsList" })
130174 return
131175 }
132176
@@ -137,7 +181,7 @@ onMounted(async () => {
137181
138182async function fetchVariations () {
139183 if (! originalFile .value ? .resourceNode ? .id ) {
140- console .error (' ResourceNodeId is undefined. Cannot fetch variations.' )
184+ console .error (" ResourceNodeId is undefined. Cannot fetch variations." )
141185 return
142186 }
143187
@@ -146,24 +190,22 @@ async function fetchVariations() {
146190 const response = await axios .get (` /r/resource_files/${ resourceNodeId} /variants` )
147191 variations .value = response .data
148192 } catch (error) {
149- console .error (' Error fetching variations:' , error)
193+ console .error (" Error fetching variations:" , error)
150194 }
151195}
152196
153197async function fetchAccessUrls () {
154198 try {
155- const response = await axios .get (' /api/access_urls' )
156- if (Array .isArray (response .data [' hydra:member' ])) {
199+ const response = await axios .get (" /api/access_urls" )
200+ if (Array .isArray (response .data [" hydra:member" ])) {
157201 const currentAccessUrlId = window .access_url_id
158202
159- accessUrls .value = response .data [' hydra:member' ].filter (
160- (url ) => url .id !== currentAccessUrlId
161- )
203+ accessUrls .value = response .data [" hydra:member" ].filter ((url ) => url .id !== currentAccessUrlId)
162204 } else {
163205 accessUrls .value = []
164206 }
165207 } catch (error) {
166- console .error (' Error fetching access URLs:' , error)
208+ console .error (" Error fetching access URLs:" , error)
167209 accessUrls .value = []
168210 }
169211}
@@ -173,42 +215,42 @@ async function fetchOriginalFile() {
173215 const response = await axios .get (` /api/resource_files/${ resourceFileId} ` )
174216 originalFile .value = response .data
175217 } catch (error) {
176- console .error (' Error fetching original file:' , error)
218+ console .error (" Error fetching original file:" , error)
177219 }
178220}
179221
180222async function uploadVariant (file , resourceNodeId , accessUrlId ) {
181223 if (! resourceNodeId) {
182- console .error (' ResourceNodeId is undefined. Check originalFile:' , originalFile .value )
224+ console .error (" ResourceNodeId is undefined. Check originalFile:" , originalFile .value )
183225 return
184226 }
185227
186228 const formData = new FormData ()
187- formData .append (' file' , file)
188- formData .append (' resourceNodeId' , resourceNodeId)
229+ formData .append (" file" , file)
230+ formData .append (" resourceNodeId" , resourceNodeId)
189231 if (accessUrlId) {
190- formData .append (' accessUrlId' , accessUrlId)
232+ formData .append (" accessUrlId" , accessUrlId)
191233 }
192234
193235 try {
194- const response = await axios .post (' /api/resource_files/add_variant' , formData)
195- console .log (' Variant uploaded or updated successfully:' , response .data )
236+ const response = await axios .post (" /api/resource_files/add_variant" , formData)
237+ console .log (" Variant uploaded or updated successfully:" , response .data )
196238
197239 await fetchVariations ()
198240 file .value = null
199241 selectedAccessUrl .value = null
200242 } catch (error) {
201- console .error (' Error uploading variant:' , error)
243+ console .error (" Error uploading variant:" , error)
202244 }
203245}
204246
205247async function deleteVariant (variantId ) {
206248 try {
207249 await axios .delete (` /r/resource_files/${ variantId} /delete_variant` )
208- console .log (' Variant deleted successfully.' )
250+ console .log (" Variant deleted successfully." )
209251 await fetchVariations ()
210252 } catch (error) {
211- console .error (' Error deleting variant:' , error)
253+ console .error (" Error deleting variant:" , error)
212254 }
213255}
214256
0 commit comments