Skip to content

Commit

Permalink
Merge pull request #95 from ArunaStorage/feat/improve-upload-modal
Browse files Browse the repository at this point in the history 
merge: Improve upload modal
  • Loading branch information
@das-Abroxas
das-Abroxas authored Aug 15, 2024
2 parents ca2d5eb + 1e88412 commit ac47861
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 32 deletions.
24 changes: 11 additions & 13 deletions components/card/downloads.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,8 @@ function toReplicationStatusColor(variant: storagemodelsv2ReplicationStatus | un
<th scope="col" class="px-6 py-3 text-start text-sm font-medium text-gray-500 uppercase">
Replication Status
</th>
<th scope="col" class="px-6 py-3 text-start text-sm font-medium text-gray-500 uppercase">
<center>Download</center>
<th scope="col" class="px-6 py-3 text-center text-sm font-medium text-gray-500 uppercase">
Download
</th>
</tr>
</thead>
Expand All @@ -69,17 +69,15 @@ function toReplicationStatusColor(variant: storagemodelsv2ReplicationStatus | un
<span class="">{{ toReplicationStatusStr(endpoint.status) }}</span>
<component :is="toReplicationStatusIcon(endpoint.status)" class="flex-shrink-0" :color="toReplicationStatusColor(endpoint.status)"></component>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-200">
<center>
<button
type="button"
title="Download Object"
@click="emit('download', endpoint.id)"
:disabled="endpoint.status != storagemodelsv2ReplicationStatus.REPLICATION_STATUS_FINISHED"
class="inline-flex grow justify-center font-semibold rounded-lg border border-transparent text-gray-600 dark:text-white hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none">
<IconCloudDown class="flex-shrink-0"/>
</button>
</center>
<td class="px-6 py-4 text-center whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-200">
<button
type="button"
title="Download Object"
@click="emit('download', endpoint.id)"
:disabled="endpoint.status != storagemodelsv2ReplicationStatus.REPLICATION_STATUS_FINISHED"
class="inline-flex grow justify-center font-semibold rounded-lg border border-transparent text-gray-600 dark:text-white hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none">
<IconCloudDown class="flex-shrink-0"/>
</button>
</td>
</tr>
</tbody>
Expand Down
45 changes: 27 additions & 18 deletions components/modal/object_display.vue → components/modal/ObjectDisplay.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ const props = defineProps<{
const object = toRef(props, 'object')
const progress = toRef(props, 'progress')
const errorMsg = toRef(props, 'errorMsg')
</script>

<template>
Expand All @@ -37,47 +36,57 @@ const errorMsg = toRef(props, 'errorMsg')
<div v-if="errorMsg" v-html="errorMsg" class="p-4 overflow-y-auto text-center text-red-500"></div>

<div v-else-if="object" class="p-4 overflow-y-auto">
<div class="border-t border-gray-100">
<dl class="divide-y divide-gray-100">
<div class="">
<dl class="border-y border-gray-100 divide-y divide-gray-100 mb-5">
<div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-sm font-medium leading-6 text-gray-900">ID</dt>
<dt class="text-sm font-medium leading-6 text-gray-900 dark:text-gray-200">ID</dt>
<dd class="mt-1 text-sm leading-6 font-bold text-aruna-800 dark:text-aruna-700 sm:col-span-2 sm:mt-0">
{{ object.id }}
</dd>
</div>
<div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-sm font-medium leading-6 text-gray-900">Name</dt>
<dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">{{ object.name }}</dd>
<dt class="text-sm font-medium leading-6 text-gray-900 dark:text-gray-200">Name</dt>
<dd class="mt-1 text-sm leading-6 text-gray-700 dark:text-gray-300 sm:col-span-2 sm:mt-0">{{ object.name }}</dd>
</div>
<div v-if="object.title" class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-sm font-medium leading-6 text-gray-900">Title</dt>
<dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">{{ object.title }}</dd>
<dt class="text-sm font-medium leading-6 text-gray-900 dark:text-gray-200">Title</dt>
<dd class="mt-1 text-sm leading-6 text-gray-700 dark:text-gray-300 sm:col-span-2 sm:mt-0">{{ object.title }}</dd>
</div>
<div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-sm font-medium leading-6 text-gray-900">Link</dt>
<dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
<dt class="text-sm font-medium leading-6 text-gray-900 dark:text-gray-200">Link</dt>
<dd class="mt-1 text-sm leading-6 text-gray-700 dark:text-gray-300 sm:col-span-2 sm:mt-0">
<a :href="`/objects/${object.id}`">
<IconExternalLink/>
</a>
</dd>
</div>
</dl>
<div v-if="object.dataLicenseTag" class="text-sm text-center font-medium leading-6 text-orange-500">
<hr class="border-gray-200 my-5">
Please wait for your upload to finish before you leave the resource creation form.
<div v-if="object.dataLicenseTag" class="text-sm text-center font-medium leading-6">
<!-- <hr class="border-gray-200 my-5"> -->
<span class="text-orange-500">Please wait for your upload to finish before you leave the resource creation form.</span>

<!-- Progress -->
<div class="flex items-center my-2 gap-x-3 whitespace-nowrap">
<div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700"
<div class="flex w-5/6 h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700"
role="progressbar"
:aria-valuenow="progress" aria-valuemin="0" aria-valuemax="100">
<div
class="flex flex-col justify-center rounded-full overflow-hidden bg-aruna-800 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-500"
:style="`width: ${progress}%`"></div>
</div>
<div class="w-10 text-end">
<span v-if="progress <= 0" class="animate-spin inline-block size-4 border-[3px] border-current border-t-transparent text-gray-500 rounded-full" role="status" aria-label="loading"></span>
<span v-else-if="progress < 100" class="text-sm text-gray-800 dark:text-white">{{ progress }}%</span>
<IconCircleCheck v-else class="text-teal-500"/>
<span v-if="progress < 100">
{{ progress }}%
</span>
<IconCircleCheck v-else class="text-teal-500"/>
<div class="ms-4 text-end">
<button
type="button"
@click="closeModal(props.modalId)"
:data-hs-overlay="`#${props.modalId}`"
class="py-2 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-aruna-800 text-white hover:bg-aruna-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none"
:disabled="progress < 100">
Close
</button>
</div>
</div>
<!-- End Progress -->
Expand Down
2 changes: 1 addition & 1 deletion pages/objects/[id].vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -356,7 +356,7 @@ useHead({
<!-- End Relations Row -->

<!-- Locations -->
<div v-if="isDownloadable()" class="flex flex-wrap justify-center gap-x-4 gap-y-2 container mx-auto mb-6">
<div v-if="objectInfo.variant == v2ResourceVariant.RESOURCE_VARIANT_OBJECT" class="flex flex-wrap justify-center gap-x-4 gap-y-2 container mx-auto mb-6">
<div
class="flex flex-col grow p-2 bg-white/[.5] border border-gray-400 dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
<div class="flex flex-row justify-start items-center p-4 font-bold text-xl">
Expand Down

0 comments on commit ac47861

Please sign in to comment.