9
9
/>
10
10
</SectionHeader >
11
11
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 >
17
26
</div >
18
27
19
28
<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 >
21
30
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
+ >
23
35
<div class =" grid grid-cols-1 md:grid-cols-2 gap-4" >
24
36
<BaseFileUpload
25
37
@file-selected =" onFileSelected"
52
64
</div >
53
65
54
66
<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
+ >
60
84
<template #body =" slotProps " >
61
85
{{ prettyBytes(slotProps.data.size) }}
62
86
</template >
63
87
</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
+ >
66
96
<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 >
67
104
<a
105
+ v-else
68
106
:href =" slotProps.data.path"
69
107
target =" _blank"
70
108
class =" text-blue-500 hover:underline"
71
109
>
72
- {{ t(' View' ) }}
110
+ {{ t(" View" ) }}
73
111
</a >
74
112
</template >
75
113
</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
+ >
78
122
<template #body =" slotProps " >
79
123
<span >
80
- {{ slotProps.data.url ? slotProps.data.url : t(' Default (No URL)' ) }}
124
+ {{ slotProps.data.url ? slotProps.data.url : t(" Default (No URL)" ) }}
81
125
</span >
82
126
</template >
83
127
</Column >
84
128
<Column >
85
- <template #header >{{ t(' Actions' ) }}</template >
129
+ <template #header >{{ t(" Actions" ) }}</template >
86
130
<template #body =" slotProps " >
87
131
<BaseButton
88
132
:label =" t('Delete')"
99
143
100
144
<script setup>
101
145
import { 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"
107
151
import SectionHeader from " ../../components/layout/SectionHeader.vue"
108
152
import BaseButton from " ../../components/basecomponents/BaseButton.vue"
109
153
import BaseFileUpload from " ../../components/basecomponents/BaseFileUpload.vue"
110
- import prettyBytes from ' pretty-bytes'
154
+ import prettyBytes from " pretty-bytes"
111
155
import { useCidReq } from " ../../composables/cidReq"
112
156
import { useSecurityStore } from " ../../store/securityStore"
113
157
@@ -126,7 +170,7 @@ const isAdmin = computed(() => securityStore.isAdmin)
126
170
127
171
onMounted (async () => {
128
172
if (! isAdmin .value ) {
129
- await router .push ({ name: ' DocumentsList' })
173
+ await router .push ({ name: " DocumentsList" })
130
174
return
131
175
}
132
176
@@ -137,7 +181,7 @@ onMounted(async () => {
137
181
138
182
async function fetchVariations () {
139
183
if (! originalFile .value ? .resourceNode ? .id ) {
140
- console .error (' ResourceNodeId is undefined. Cannot fetch variations.' )
184
+ console .error (" ResourceNodeId is undefined. Cannot fetch variations." )
141
185
return
142
186
}
143
187
@@ -146,24 +190,22 @@ async function fetchVariations() {
146
190
const response = await axios .get (` /r/resource_files/${ resourceNodeId} /variants` )
147
191
variations .value = response .data
148
192
} catch (error) {
149
- console .error (' Error fetching variations:' , error)
193
+ console .error (" Error fetching variations:" , error)
150
194
}
151
195
}
152
196
153
197
async function fetchAccessUrls () {
154
198
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" ])) {
157
201
const currentAccessUrlId = window .access_url_id
158
202
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)
162
204
} else {
163
205
accessUrls .value = []
164
206
}
165
207
} catch (error) {
166
- console .error (' Error fetching access URLs:' , error)
208
+ console .error (" Error fetching access URLs:" , error)
167
209
accessUrls .value = []
168
210
}
169
211
}
@@ -173,42 +215,42 @@ async function fetchOriginalFile() {
173
215
const response = await axios .get (` /api/resource_files/${ resourceFileId} ` )
174
216
originalFile .value = response .data
175
217
} catch (error) {
176
- console .error (' Error fetching original file:' , error)
218
+ console .error (" Error fetching original file:" , error)
177
219
}
178
220
}
179
221
180
222
async function uploadVariant (file , resourceNodeId , accessUrlId ) {
181
223
if (! resourceNodeId) {
182
- console .error (' ResourceNodeId is undefined. Check originalFile:' , originalFile .value )
224
+ console .error (" ResourceNodeId is undefined. Check originalFile:" , originalFile .value )
183
225
return
184
226
}
185
227
186
228
const formData = new FormData ()
187
- formData .append (' file' , file)
188
- formData .append (' resourceNodeId' , resourceNodeId)
229
+ formData .append (" file" , file)
230
+ formData .append (" resourceNodeId" , resourceNodeId)
189
231
if (accessUrlId) {
190
- formData .append (' accessUrlId' , accessUrlId)
232
+ formData .append (" accessUrlId" , accessUrlId)
191
233
}
192
234
193
235
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 )
196
238
197
239
await fetchVariations ()
198
240
file .value = null
199
241
selectedAccessUrl .value = null
200
242
} catch (error) {
201
- console .error (' Error uploading variant:' , error)
243
+ console .error (" Error uploading variant:" , error)
202
244
}
203
245
}
204
246
205
247
async function deleteVariant (variantId ) {
206
248
try {
207
249
await axios .delete (` /r/resource_files/${ variantId} /delete_variant` )
208
- console .log (' Variant deleted successfully.' )
250
+ console .log (" Variant deleted successfully." )
209
251
await fetchVariations ()
210
252
} catch (error) {
211
- console .error (' Error deleting variant:' , error)
253
+ console .error (" Error deleting variant:" , error)
212
254
}
213
255
}
214
256
0 commit comments