Skip to content

Commit 3887a3b

Browse files
ejdysingerejdysinger
authored
Merge pull request #154 from AI-READI/staging
Staging
2 parents 6fe5142 + 8331266 commit 3887a3b

File tree

13 files changed

+828
-532
lines changed

13 files changed

+828
-532
lines changed

‎components/files/FolderViewer.vue‎

Lines changed: 83 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
<script setup lang="ts">
22
import type { TreeOption } from "naive-ui";
3-
import { NButton } from "naive-ui";
3+
import { NButton, NDivider } from "naive-ui";
4+
import prettyBytes from "pretty-bytes";
45
import identifierType from "../../dev/related_identifier.json";
56
import { Icon } from "#components";
7+
68
const drawerActive = ref(false);
79
810
const props = defineProps({
@@ -12,10 +14,22 @@ const props = defineProps({
1214
},
1315
});
1416
15-
const drawerTitle = ref("");
16-
const drawerDescription = ref<string | undefined>("");
17-
const drawerIcon = ref("");
18-
const drawerText = ref("");
17+
const drawerDetails = ref<{
18+
title: string;
19+
description: string | undefined;
20+
icon: string;
21+
numberOfFiles: number;
22+
size: number | undefined;
23+
text: string;
24+
}>({
25+
title: "",
26+
description: "",
27+
icon: "",
28+
numberOfFiles: 0,
29+
size: 0,
30+
text: "",
31+
});
32+
1933
const relationType = ref<RelatedIdentifier[] | undefined>(undefined);
2034
2135
function convertMetadataFile(
@@ -67,15 +81,27 @@ function convertDirectory(
6781
}),
6882
suffix: () =>
6983
h(
70-
NButton,
84+
"div",
7185
{
72-
class: "",
73-
onClick: () => {
74-
openMetadataDrawer([...previousPath, directory.directoryName]);
75-
},
76-
size: "tiny",
86+
class: "flex",
7787
},
78-
{ default: () => "Learn More" },
88+
[
89+
directory.size
90+
? h("span", { class: "text-sm" }, prettyBytes(directory.size) || "")
91+
: null,
92+
directory.size ? h(NDivider, { vertical: true }) : null,
93+
h(
94+
NButton,
95+
{
96+
class: "",
97+
onClick: () => {
98+
openMetadataDrawer([...previousPath, directory.directoryName]);
99+
},
100+
size: "tiny",
101+
},
102+
{ default: () => "Learn More" },
103+
),
104+
],
79105
),
80106
};
81107
}
@@ -140,29 +166,44 @@ const openMetadataDrawer = (currentPath: Array<string>) => {
140166
}
141167
142168
if (filetype) {
143-
drawerTitle.value = filetype.metadataFileName;
144-
drawerIcon.value = "iconamoon:file-fill";
145-
drawerText.value = "This file";
146-
drawerDescription.value = filetype.metadataFileDescription;
169+
drawerDetails.value = {
170+
title: filetype.metadataFileName,
171+
description: filetype.metadataFileDescription,
172+
icon: "iconamoon:file-fill",
173+
numberOfFiles: 0,
174+
size: 0,
175+
text: "This file",
176+
};
147177
relationType.value = filetype.relatedIdentifier?.map((r) => {
148178
return {
149179
...r,
150180
relationType: getRelationName(r.relationType),
151181
};
152182
});
153183
} else if (foldertype) {
154-
drawerTitle.value = foldertype.directoryName;
155-
drawerIcon.value = "ic:baseline-folder";
156-
drawerText.value = "This directory";
157-
drawerDescription.value = foldertype.directoryDescription;
184+
drawerDetails.value = {
185+
title: foldertype.directoryName,
186+
description: foldertype.directoryDescription,
187+
icon: "ic:baseline-folder",
188+
numberOfFiles: foldertype.numberOfFiles || 0,
189+
size: foldertype.size || 0,
190+
text: "This directory",
191+
};
158192
relationType.value = foldertype.relatedIdentifier?.map((r) => {
159193
return {
160194
...r,
161195
relationType: getRelationName(r.relationType),
162196
};
163197
});
164198
} else {
165-
drawerDescription.value = "No metadata found for this file";
199+
drawerDetails.value = {
200+
title: "No metadata found for this file",
201+
description: "",
202+
icon: "iconamoon:file-fill",
203+
numberOfFiles: 0,
204+
size: 0,
205+
text: "This file",
206+
};
166207
}
167208
168209
drawerActive.value = true;
@@ -187,17 +228,31 @@ const openMetadataDrawer = (currentPath: Array<string>) => {
187228
>
188229
<n-drawer-content>
189230
<n-flex vertical>
190-
<div class="mb-1 text-lg font-bold">
191-
<Icon :name="drawerIcon" size="22" color="#0284c7" />
192-
{{ drawerTitle }}
193-
</div>
231+
<n-flex justify="space-between">
232+
<div class="mb-1 text-lg font-bold">
233+
<Icon :name="drawerDetails.icon" size="22" color="#0284c7" />
234+
{{ drawerDetails.title }}
235+
</div>
236+
237+
<div class="flex items-center">
238+
<p v-if="drawerDetails.numberOfFiles">
239+
{{ drawerDetails.numberOfFiles }} files
240+
</p>
241+
242+
<n-divider v-if="drawerDetails.numberOfFiles" vertical />
243+
244+
<p v-if="drawerDetails.size">
245+
{{ prettyBytes(drawerDetails.size) }}
246+
</p>
247+
</div>
248+
</n-flex>
194249

195250
<p class="text-md my-1 w-full border-b pb-2 font-semibold">
196251
Description
197252
</p>
198253

199-
<p v-if="drawerDescription">
200-
{{ drawerDescription }}
254+
<p v-if="drawerDetails.description">
255+
{{ drawerDetails.description }}
201256
</p>
202257

203258
<p v-else>
@@ -215,7 +270,7 @@ const openMetadataDrawer = (currentPath: Array<string>) => {
215270
class="mt-4 flex"
216271
>
217272
<li>
218-
{{ drawerText }}
273+
{{ drawerDetails.text }}
219274
<span class="mr-2 lowercase">{{ type.relationType }}</span>
220275

221276
<a

‎components/side/CitationViewer.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,8 @@ onMounted(() => {
111111

112112
<div v-else class="py-2">
113113
<n-alert v-if="citationError" type="error">
114-
Something went wrong with creating the citation
114+
Something went wrong with generating the citation. Please try again
115+
later.
115116
</n-alert>
116117

117118
<p v-else class="text-sm">{{ citation?.formattedText }}</p>

‎components/side/VersionSelector.vue‎

Lines changed: 33 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,52 @@
11
<script setup lang="ts">
2-
const props = defineProps({
2+
defineProps({
33
id: {
44
required: true,
55
type: String,
66
},
7-
});
8-
9-
const { data: versions, pending } = await useFetch(
10-
`/api/versions/${props.id}`,
11-
{
12-
lazy: true,
13-
server: false,
7+
versions: {
8+
required: true,
9+
type: Array as PropType<VersionArray>,
1410
},
15-
);
16-
17-
// todo: add a watchEffect for the error responses
11+
});
1812
</script>
1913

2014
<template>
2115
<n-flex vertical class="rounded-xl border border-sky-200 bg-white pb-5 pt-3">
2216
<n-flex vertical :size="[0, 0]">
2317
<h3 class="mb-3 px-4">Versions</h3>
2418

25-
<TransitionFade>
26-
<div v-if="pending" class="flex justify-center p-2">
27-
<Icon name="svg-spinners:3-dots-scale" size="30" />
28-
</div>
29-
30-
<div v-else>
31-
<n-flex
32-
v-for="version in versions"
33-
:key="version.id"
34-
justify="space-between"
35-
align="start"
36-
class="px-4 py-2 transition-all hover:bg-blue-50"
37-
:class="{
38-
'!bg-sky-100': version.id === id,
39-
}"
19+
<n-flex
20+
v-for="version in versions"
21+
:key="version.id"
22+
justify="space-between"
23+
align="start"
24+
class="px-4 py-2 transition-all hover:bg-blue-50"
25+
:class="{
26+
'!bg-sky-100': version.id === id,
27+
}"
28+
>
29+
<div class="flex flex-col space-y-1">
30+
<NuxtLink
31+
:to="`/datasets/${version.id}`"
32+
class="text-sm font-medium transition-all hover:text-slate-600 hover:underline"
4033
>
41-
<div class="flex flex-col space-y-1">
42-
<NuxtLink
43-
:to="`/datasets/${version.id}`"
44-
class="text-sm font-medium transition-all hover:text-slate-600 hover:underline"
45-
>
46-
Version {{ version.title }}
47-
</NuxtLink>
48-
49-
<NuxtLink
50-
:to="`https://doi.org/${version.doi}`"
51-
target="_blank"
52-
class="text-sm transition-all hover:text-slate-600 hover:underline"
53-
>
54-
{{ version.doi }}
55-
</NuxtLink>
56-
</div>
34+
Version {{ version.title }}
35+
</NuxtLink>
5736

58-
<p class="text-right text-xs text-gray-500">
59-
{{ $dayjs.unix(version.createdAt).format("MMM D, YYYY") }}
60-
</p>
61-
</n-flex>
37+
<NuxtLink
38+
:to="`https://doi.org/${version.doi}`"
39+
target="_blank"
40+
class="text-sm transition-all hover:text-slate-600 hover:underline"
41+
>
42+
{{ version.doi }}
43+
</NuxtLink>
6244
</div>
63-
</TransitionFade>
45+
46+
<p class="text-right text-xs text-gray-500">
47+
{{ $dayjs.unix(version.createdAt).format("MMM D, YYYY") }}
48+
</p>
49+
</n-flex>
6450
</n-flex>
6551
</n-flex>
6652
</template>

0 commit comments

Comments
 (0)