Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🐛 fix: rework dashboard page for clarity #44

Merged
merged 6 commits into from
Aug 6, 2024
Merged

🐛 fix: rework dashboard page for clarity #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
02eb9e2
🚧 wip: update dashboard ui
megasanjay Aug 1, 2024
41735f1
🚧 wip: update dashboard ui
megasanjay Aug 1, 2024
826b4a6
💄 style: add breadcrumbs to pages
megasanjay Aug 2, 2024
61d61dc
🐛 fix: rework license ui on dashboard
megasanjay Aug 3, 2024
bd51873
✏️ fix: update license body text
megasanjay Aug 3, 2024
c08f3b9
🐛 fix: vhange view to edit on dashboard buttons
megasanjay Aug 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 46 additions & 0 deletions ui/components/card/CardDashboard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<script setup lang="ts">
defineProps({
title: {
default: "Card Title",
type: String,
},
subheader: {
default: "",
type: String,
},
});

const slots = useSlots();
</script>

<template>
<div
class="flex w-full gap-4 rounded-lg border border-slate-200 bg-white px-5 py-6 shadow-sm"
>
<div>
<slot name="icon"></slot>
</div>

<div class="flex w-full flex-col">
<div class="flex flex-col border-b border-slate-100 pb-2">
<h2 v-if="!slots.title" name="title" class="text-xl font-bold">
{{ title }}
</h2>

<slot v-else name="title"></slot>

<p v-if="!slots.subheader" class="text-sm text-slate-500">
{{ subheader }}
</p>

<slot v-else name="subheader"></slot>
</div>

<div class="flex items-center justify-between gap-8 pt-6">
<slot name="content"></slot>

<slot name="action"></slot>
</div>
</div>
</div>
</template>
23 changes: 23 additions & 0 deletions ui/pages/add/code-metadata/[identifier].vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -319,6 +319,29 @@ const navigateToPR = () => {
<template>
<main>
<div class="mx-auto mb-4 max-w-screen-xl rounded bg-white p-8 shadow-md">
<n-breadcrumb class="pb-5">
<n-breadcrumb-item :clickable="false">
<Icon name="ri:dashboard-fill" />

Dashboard
</n-breadcrumb-item>

<n-breadcrumb-item :href="`/dashboard/${data?.owner}`">
<Icon name="uil:github" />
{{ data?.owner }}
</n-breadcrumb-item>

<n-breadcrumb-item :href="`/dashboard/${data?.owner}/${data?.repo}`">
<Icon name="vscode-icons:folder-type-git" />
{{ data?.repo }}
</n-breadcrumb-item>

<n-breadcrumb-item>
<Icon name="tabler:code" />
Edit Code Metadata
</n-breadcrumb-item>
</n-breadcrumb>

<n-flex vertical size="large" class="pb-5">
<div class="flex flex-row justify-between">
<h1 class="text-2xl font-bold">
Expand Down
23 changes: 23 additions & 0 deletions ui/pages/add/license/[identifier].vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,6 +194,29 @@ const navigateToPR = () => {

<template>
<main class="mx-auto max-w-screen-xl bg-white p-8">
<n-breadcrumb class="pb-5">
<n-breadcrumb-item :clickable="false">
<Icon name="ri:dashboard-fill" />

Dashboard
</n-breadcrumb-item>

<n-breadcrumb-item :href="`/dashboard/${data?.owner}`">
<Icon name="uil:github" />
{{ data?.owner }}
</n-breadcrumb-item>

<n-breadcrumb-item :href="`/dashboard/${data?.owner}/${data?.repo}`">
<Icon name="vscode-icons:folder-type-git" />
{{ data?.repo }}
</n-breadcrumb-item>

<n-breadcrumb-item>
<Icon name="tabler:license" />
Edit License
</n-breadcrumb-item>
</n-breadcrumb>

<n-flex vertical size="large" class="pb-5">
<div class="flex flex-row justify-between">
<h1 class="text-2xl font-bold">
Expand Down
214 changes: 126 additions & 88 deletions ui/pages/dashboard/[owner]/[repo].vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,28 +26,6 @@ if (error.value) {
}
}

const licenseRequests = computed(() => {
if (!data.value) {
return {
closed: [],
open: [],
};
}

const openLicenseRequests = data.value?.licenseRequests.filter(
(request) => request.open,
);

const closedLicenseRequests = data.value?.licenseRequests.filter(
(request) => !request.open,
);

return {
closed: closedLicenseRequests,
open: openLicenseRequests,
};
});

const generateSeed = (seed: string) => {
return generate({
join: "-",
Expand Down Expand Up @@ -133,74 +111,142 @@ const rerunCwlValidation = async () => {
<div v-else>
<n-divider />

<CardCollapsible
<CardDashboard
title="License"
subheader="The license for the repository is shown here. You can review open
license requests and view closed license requests."
class="rounded-lg bg-white shadow-md"
bordered
subheader="The license for the repository is shown here."
>
<div class="my-3">
<div
v-for="licenseRequest in licenseRequests.open"
:key="licenseRequest.identifier"
>
<n-card>
<n-flex align="center" justify="space-between">
<div>
<h3>ID: {{ generateSeed(licenseRequest.identifier) }}</h3>

<p>
{{
$dayjs
.unix(parseInt(licenseRequest.timestamp) / 1000)
.format("MMMM DD, YYYY HH:mmA")
}}
</p>
</div>
<template #icon>
<Icon name="tabler:license" size="40" />
</template>

<template #content>
<p>A License is required according to the FAIR-BioRS guidelines</p>
</template>

<template #action>
<NuxtLink :to="`/add/license/${data?.licenseRequest?.identifier}`">
<n-button type="primary">
<template #icon>
<Icon name="akar-icons:edit" size="16" />
</template>
Edit License
</n-button>
</NuxtLink>
</template>
</CardDashboard>

<NuxtLink
:to="`/add/license/${licenseRequest.identifier}`"
target="__blank"
>
<n-button type="primary"> View License </n-button>
</NuxtLink>
</n-flex>
</n-card>
</div>
<n-divider />

<!-- <n-divider />
<CardDashboard
title="Code Metadata"
subheader="The code metadata for the repository is shown here."
>
<template #icon>
<Icon name="tabler:code" size="40" />
</template>

<h3>Closed License Requests</h3>
<template #content>
<p>
The code metadata for the repository is shown here. This includes
the number of files, the number of lines of code, and the number of
commits.
</p>
</template>

<n-alert
v-if="licenseRequests.closed.length === 0"
type="info"
class="my-5"
<template #action>
<NuxtLink
:to="`/add/code-metadata/${data?.codeMetadataRequest?.identifier}`"
>
There are no closed license requests for this repository.
</n-alert>
<n-button type="primary">
<template #icon>
<Icon name="akar-icons:edit" size="16" />
</template>
Edit Code Metadata
</n-button>
</NuxtLink>
</template>
</CardDashboard>

<div
v-for="licenseRequest in licenseRequests.closed"
v-else
:key="licenseRequest.identifier"
:to="`/dashboard/${owner}/${repo}/license/${licenseRequest.identifier}`"
>
<n-card>
<n-flex align="center" justify="space-between">
<div>
<h3>{{ licenseRequest.identifier }}</h3>
<n-divider />

<CardDashboard
title="CWL Validation"
subheader="Common Workflow Language (CWL) is an open standard for describing how to run command line tools and connect them to create workflows."
>
<template #icon>
<Icon name="cib:common-workflow-language" size="40" />
</template>

<template #content>
<p>
Common Workflow Language (CWL) is an open standard for describing
how to run command line tools and connect them to create workflows.
</p>
</template>

<template #action>
<div class="flex space-x-3">
<n-tooltip trigger="hover" placement="bottom-start">
<template #trigger>
<n-button
type="success"
secondary
:loading="cwlValidationRerunRequestLoading"
@click="rerunCwlValidation"
>
<template #icon>
<Icon name="mynaui:redo" size="16" />
</template>

<p>{{ licenseRequest.timestamp }}</p>
</div>
Rerun CWL Validation
</n-button>
</template>
This may take a few minutes to complete.
</n-tooltip>

<NuxtLink
:to="`/view/cwl-validation/${data?.cwlValidation?.identifier}`"
>
<n-button type="primary">
<template #icon>
<Icon name="mdi:eye" size="16" />
</template>
View CWL Validation Results
</n-button>
</NuxtLink>
</div>
</template>
</CardDashboard>

<NuxtLink :to="licenseRequest.pullRequest" target="__blank">
<n-button type="primary">View Pull Request</n-button>
</NuxtLink>
</n-flex>
</n-card>
</div> -->
<n-divider />

<CardCollapsible
title="License"
subheader="The license for the repository is shown here. You can review open
license requests and view closed license requests."
class="rounded-lg bg-white shadow-md"
bordered
>
<div class="my-3">
<n-card>
<n-flex align="center" justify="space-between">
<div>
<h3>
ID:
{{
generateSeed(data?.licenseRequest?.identifier || "hello")
}}
</h3>
</div>

<NuxtLink
:to="`/add/license/${data?.licenseRequest?.identifier}`"
target="__blank"
>
<n-button type="primary"> View License </n-button>
</NuxtLink>
</n-flex>
</n-card>
</div>
</CardCollapsible>

Expand All @@ -214,15 +260,7 @@ const rerunCwlValidation = async () => {
class="rounded-lg bg-white shadow-md"
bordered
>
<!-- <h2>Code Metadata</h2> -->

<div>
<!-- <p>
The code metadata for the repository is shown here. This includes
the number of files, the number of lines of code, and the number of
commits.
</p> -->

<n-alert v-if="!data?.codeMetadataRequest" type="info" class="my-5">
There are no codemetadata requests for this repository yet.
</n-alert>
Expand Down
23 changes: 23 additions & 0 deletions ui/pages/view/cwl-validation/[identifier].vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,29 @@ if (data.value) {

<template>
<main class="mx-auto max-w-screen-xl bg-white p-8">
<n-breadcrumb class="pb-5">
<n-breadcrumb-item :clickable="false">
<Icon name="ri:dashboard-fill" />

Dashboard
</n-breadcrumb-item>

<n-breadcrumb-item :href="`/dashboard/${data?.owner}`">
<Icon name="uil:github" />
{{ data?.owner }}
</n-breadcrumb-item>

<n-breadcrumb-item :href="`/dashboard/${data?.owner}/${data?.repo}`">
<Icon name="vscode-icons:folder-type-git" />
{{ data?.repo }}
</n-breadcrumb-item>

<n-breadcrumb-item>
<Icon name="cib:common-workflow-language" />
View CWL Validation
</n-breadcrumb-item>
</n-breadcrumb>

<n-flex vertical size="large" class="pb-5">
<div class="flex flex-row justify-between">
<h1 class="text-2xl font-bold">
Expand Down
Loading