Skip to content

Commit 3f1cb38

Browse files
StevenU21StevenU21
committed
Refactor image, speech audio, and transcription tables for improved layout and readability
1 parent c77914b commit 3f1cb38

File tree

3 files changed

+23
-99
lines changed

3 files changed

+23
-99
lines changed

‎resources/js/Pages/Images/Index.vue

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,8 @@
1717
<i class="fas fa-plus mr-2"></i> Generate Image
1818
</PrimaryButton>
1919
</div>
20-
<!-- Tabla de imágenes -->
21-
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
22-
<div class="overflow-x-auto">
20+
21+
<div class="bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg">
2322
<table class="w-full min-w-max">
2423
<thead>
2524
<tr>
@@ -71,7 +70,6 @@
7170
</tr>
7271
</tbody>
7372
</table>
74-
</div>
7573
</div>
7674

7775
<div class="flex justify-left mb-6 mt-6">

‎resources/js/Pages/SpeechAudio/Index.vue

Lines changed: 18 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,22 @@
33
<Head title="Speech Audio" />
44

55
<template #header>
6-
<h2
7-
class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight"
8-
>
6+
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
97
Speech Audios
108
</h2>
119
</template>
1210

1311
<div class="py-12">
1412
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
1513
<div class="flex justify-between mb-6">
16-
<Pagination
17-
class="hidden sm:block"
18-
:links="speechAudios.links"
19-
/>
14+
<Pagination class="hidden sm:block" :links="speechAudios.links"/>
2015

2116
<PrimaryButton @click="showModal = true">
2217
<i class="fas fa-plus mr-2"></i> Create Speech Audio
2318
</PrimaryButton>
2419
</div>
25-
<!-- Tabla de géneros -->
26-
<div
27-
class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg"
28-
>
29-
<div class="overflow-x-auto">
20+
21+
<div class="bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg">
3022
<table class="w-full min-w-max">
3123
<thead>
3224
<tr>
@@ -47,25 +39,12 @@
4739
</tr>
4840
</thead>
4941
<tbody>
50-
<tr
51-
v-if="
52-
!speechAudios ||
53-
!speechAudios.data ||
54-
speechAudios.data.length === 0
55-
"
56-
>
57-
<td
58-
colspan="5"
59-
class="text-white px-4 py-8 text-center bg-gray-700 rounded-lg"
60-
>
42+
<tr v-if="!speechAudios || !speechAudios.data || speechAudios.data.length === 0">
43+
<td colspan="5" class="text-white px-4 py-8 text-center bg-gray-700 rounded-lg">
6144
No speech audios found.
6245
</td>
6346
</tr>
64-
<tr
65-
v-else
66-
v-for="speechAudio in speechAudios.data"
67-
:key="speechAudio.id"
68-
>
47+
<tr v-else v-for="speechAudio in speechAudios.data" :key="speechAudio.id">
6948
<td class="text-white px-4 py-2">
7049
{{ speechAudio.id }}
7150
</td>
@@ -75,66 +54,23 @@
7554
</td>
7655

7756
<td class="text-white px-4 py-2">
78-
{{
79-
format(
80-
new Date(
81-
speechAudio.created_at
82-
),
83-
"dd/MM/yyyy HH:mm:ss"
84-
)
85-
}}
57+
{{ format(new Date(speechAudio.created_at),"dd/MM/yyyy HH:mm:ss") }}
8658
</td>
8759

88-
<td
89-
class="text-white px-4 py-2 space-x-2 text-center"
90-
>
91-
<div
92-
class="flex space-x-2 justify-center"
93-
>
94-
<AudioPlayer
95-
:audioUrl="speechAudio.audioUrl"
96-
v-model:isPlaying="
97-
speechAudio.isPlaying
98-
"
99-
/>
60+
<td class="text-white px-4 py-2 space-x-2 text-center">
61+
<div class="flex space-x-2 justify-center">
62+
<AudioPlayer :audioUrl="speechAudio.audioUrl" v-model:isPlaying=" speechAudio.isPlaying"/>
10063
<DropdownMenu>
101-
<PrimaryButton
102-
@click="
103-
downloadText(
104-
speechAudio.id
105-
)
106-
"
107-
class="bg-green-500 hover:bg-green-700 text-white w-full text-left"
108-
>
109-
<i
110-
class="fas fa-download mr-2"
111-
></i>
64+
<PrimaryButton @click="downloadText(speechAudio.id)" class="bg-green-500 hover:bg-green-700 text-white w-full text-left">
65+
<i class="fas fa-download mr-2"></i>
11266
Download Text
11367
</PrimaryButton>
114-
<PrimaryButton
115-
@click="
116-
downloadSpeechAudio(
117-
speechAudio.id
118-
)
119-
"
120-
class="bg-green-500 hover:bg-green-700 text-white w-full text-left"
121-
>
122-
<i
123-
class="fas fa-download mr-2"
124-
></i>
68+
<PrimaryButton @click="downloadSpeechAudio(speechAudio.id)" class="bg-green-500 hover:bg-green-700 text-white w-full text-left">
69+
<i class="fas fa-download mr-2"></i>
12570
Download Audio
12671
</PrimaryButton>
127-
<PrimaryButton
128-
@click="
129-
deleteSpeechAudio(
130-
speechAudio.id
131-
)
132-
"
133-
class="bg-red-500 hover:bg-red-700 text-white w-full text-left"
134-
>
135-
<i
136-
class="fas fa-trash mr-2"
137-
></i>
72+
<PrimaryButton @click="deleteSpeechAudio(speechAudio.id)" class="bg-red-500 hover:bg-red-700 text-white w-full text-left">
73+
<i class="fas fa-trash mr-2"></i>
13874
Delete
13975
</PrimaryButton>
14076
</DropdownMenu>
@@ -143,7 +79,6 @@
14379
</tr>
14480
</tbody>
14581
</table>
146-
</div>
14782
</div>
14883

14984
<div class="flex justify-left mb-6 mt-6">
@@ -154,15 +89,9 @@
15489

15590
<!-- Modal for Form -->
15691
<Modal :show="showModal" @close="showModal = false">
157-
<Form
158-
:submitAction="submitForm"
159-
buttonText="Generate Speech Audio"
160-
:errors="errors"
161-
/>
92+
<Form :submitAction="submitForm" buttonText="Generate Speech Audio" :errors="errors"/>
16293
</Modal>
16394

164-
<!-- Speech Audio Progress Animation -->
165-
<!-- <SpeechAudioProgress ref="speechAudioProgress" id="speech-audio-progress" /> -->
16695
</AuthenticatedLayout>
16796
</template>
16897

‎resources/js/Pages/Transcriptions/Index.vue

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,8 @@
2222
<i class="fas fa-plus mr-2"></i> Create transcription
2323
</PrimaryButton>
2424
</div>
25-
<!-- Tabla de géneros -->
26-
<div
27-
class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg"
28-
>
29-
<div class="overflow-x-auto">
25+
26+
<div class="bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg">
3027
<table class="w-full min-w-max">
3128
<thead>
3229
<tr>
@@ -151,7 +148,6 @@
151148
</tr>
152149
</tbody>
153150
</table>
154-
</div>
155151
</div>
156152

157153
<div class="flex justify-left mb-6 mt-6">
@@ -286,6 +282,7 @@ const page = usePage();
286282
onMounted(() => {
287283
window.Echo.channel(`processes.${page.props.auth.user.id}`).listen(
288284
"ProcessStatusCompleted",
285+
289286
() => {
290287
updateTranscriptions();
291288
}

0 commit comments

Comments
 (0)