Skip to content

Commit

Permalink
feat: ✨ added study metadata keywords (#34)
Browse files Browse the repository at this point in the history
* feat: ✨ added keywords sidebar in the metadata

* feat: ✨ added keywords in minimized version steps

* fix: 🐛 format

* fix: 🐛 minor syntax fix
  • Loading branch information
Aydawka authored Dec 28, 2023
1 parent 3002543 commit 86fb2e3
Show file tree
Hide file tree
Showing 7 changed files with 168 additions and 7 deletions.
8 changes: 4 additions & 4 deletions src/components/cards/CollapsibleCard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@ const props = defineProps({
},
});
const slots = useSlots();
// const slots = useSlots();
const hasHeaderExtra = computed(() => {
return !!slots["header-extra"];
});
// const hasHeaderExtra = computed(() => {
// return !!slots["header-extra"];
// });
const collapseContent = ref(false);
Expand Down
7 changes: 6 additions & 1 deletion src/components/sidebar/AppSidebar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,11 @@ const UpperMenuOptions = computed(() => [
key: "study:metadata:conditions",
label: "Conditions",
},
{
icon: renderIcon("codicon:symbol-keyword"),
key: "study:metadata:keywords",
label: "Keywords",
},
{
icon: renderIcon("iconoir:design-pencil"),
key: "study:metadata:design",
Expand Down Expand Up @@ -390,7 +395,7 @@ const selectAndExpand = (key: string) => {
menuInstRef.value?.showOption(key);
};
router.beforeEach((to, from) => {
router.beforeEach((to) => {
if (typeof to.name !== "string") return;
const name: string = to.meta && to.meta.menuItem ? (to.meta.menuItem as string) : to.name;
selectAndExpand(name);
Expand Down
2 changes: 1 addition & 1 deletion src/components/sidebar/DatasetSidebar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -206,7 +206,7 @@ const selectAndExpand = (key: string) => {
menuInstRef.value?.showOption(key);
};
router.beforeEach((to, from) => {
router.beforeEach((to) => {
if (typeof to.name !== "string") return;
const name: string = to.meta && to.meta.menuItem ? (to.meta.menuItem as string) : to.name;
selectAndExpand(name);
Expand Down
6 changes: 6 additions & 0 deletions src/router/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ import StudyLocations from "@/views/study/metadata/enrollment/locations/StudyLoc
import StudyOfficials from "@/views/study/metadata/enrollment/officials/StudyOfficials.vue";
import StudyIdentification from "@/views/study/metadata/identification/StudyIdentification.vue";
import StudyIPDSharing from "@/views/study/metadata/ipdsharing/StudyIPDSharing.vue";
import StudyKeywords from "@/views/study/metadata/keywords/StudyKeywords.vue";
import StudyOversight from "@/views/study/metadata/oversight/StudyOversight.vue";
import StudyAvailableIPD from "@/views/study/metadata/references/availableipd/StudyAvailableIPD.vue";
import StudyLinks from "@/views/study/metadata/references/links/StudyLinks.vue";
Expand Down Expand Up @@ -376,6 +377,11 @@ const router = createRouter({
path: "conditions",
component: StudyConditions,
},
{
name: "study:metadata:keywords",
path: "keywords",
component: StudyKeywords,
},
{
name: "study:metadata:design",
path: "design",
Expand Down
3 changes: 2 additions & 1 deletion src/types/Version.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,14 @@ export interface VersionStudyMetadata {
arms: VersionStudyArm[];
available_ipd: VersionStudyIPD[];
collaborators: VersionStudyCollaborator[];
conditions: string;
conditions: string[];
contacts: VersionStudyContact[];
description: VersionStudyDescription;
design: VersionDesign;
eligibility: VersionStudyEligibility;
interventions: VersionStudyIntervention[];
ipd_sharing: VersionStudyIPDSharing;
keywords: string[];
links: VersionStudyLink[];
locations: VersionStudyLocation[];
overall_officials: VersionStudyOverallOfficial[];
Expand Down
26 changes: 26 additions & 0 deletions src/views/study/dataset/publish/metadata/PublishStudyMetadata.vue
Original file line number Diff line number Diff line change
Expand Up @@ -336,6 +336,32 @@ function handleNextButton() {
</template>
</CollapsibleCard>

<CollapsibleCard title="Keywords" bordered>
<n-space>
<n-tag type="info" v-for="item in study_metadata.keywords" :key="item">{{ item }} </n-tag>
</n-space>

<div v-if="!study_metadata.keywords.length" class="italic text-gray-500">No Keywords</div>

<template #action>
<RouterLink
:to="{
name: 'study:metadata:keywords',
params: {
studyId: routeParams.studyId,
},
}"
>
<n-button type="info" secondary>
<template #icon>
<f-icon icon="material-symbols:edit" />
</template>
Edit Keywords
</n-button>
</RouterLink>
</template>
</CollapsibleCard>

<CollapsibleCard title="Design" bordered>
<n-table
:bordered="true"
Expand Down
123 changes: 123 additions & 0 deletions src/views/study/metadata/keywords/StudyKeywords.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
<script setup lang="ts">
import type { FormInst } from "naive-ui";
import { baseURL } from "@/utils/constants";
const route = useRoute();
const push = usePush();
const formRef = ref<FormInst | null>(null);
const moduleData = ref<string[]>(["Diabetes"]);
onBeforeMount(async () => {
const studyId = route.params.studyId;
const response = await fetch(`${baseURL}/study/${studyId}/metadata/keywords`, {
method: "GET",
});
console.log(response);
if (!response.ok) {
throw new Error("Network response was not ok");
}
const data = await response.json();
moduleData.value = data;
});
const addKeyword = () => {
moduleData.value.push("");
};
const removeKeyword = (index: number) => {
moduleData.value.splice(index, 1);
};
const saveMetadata = (e: MouseEvent) => {
e.preventDefault();
formRef.value?.validate(async (errors) => {
if (!errors) {
// remove empty Keyword
const keywords = moduleData.value.filter((Keyword) => Keyword !== "");
// remove Keywords with duplicate names
const uniqueKeywords = [...new Set(keywords)];
const response = await fetch(`${baseURL}/study/${route.params.studyId}/metadata/keywords`, {
body: JSON.stringify(uniqueKeywords),
method: "PUT",
});
if (!response.ok) {
push.error("Something went wrong.");
return;
} else {
push.success("Study updated successfully.");
}
console.log("success");
} else {
console.log("error");
console.log(errors);
}
});
};
</script>

<template>
<main class="flex h-full w-full flex-col pr-6">
<PageBackNavigationHeader
title="Keywords"
description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quod quia voluptatibus, voluptatem, quibusdam, quos voluptas quae quas voluptatum"
linkName="study:overview"
:linkParams="{
studyId: route.params.studyId,
}"
/>

<n-divider />

<n-form ref="formRef" :model="moduleData" size="large" label-placement="top" class="pr-4">
<SubHeadingText
title=""
description="Words or phrases that best describe the study. Keywords help users find studies in the database. Use NLM's Medical Subject Heading (MeSH)-controlled vocabulary terms where appropriate. Be as specific and precise as possible. Avoid acronyms and abbreviations."
/>

<n-form-item v-for="(keyword, index) in moduleData" :key="index" label="Name" path="keywords">
<n-input v-model:value="moduleData[index]" placeholder="Biomedical science" />

<n-popconfirm @positive-click="removeKeyword(index)">
<template #trigger>
<n-button class="ml-5">
<f-icon icon="gridicons:trash" />
</n-button>
</template>

Are you sure you want to remove this keyword?
</n-popconfirm>
</n-form-item>

<n-button class="mb-10 w-full" dashed type="success" @click="addKeyword">
<template #icon>
<f-icon icon="gridicons:create" />
</template>

Add a Keyword
</n-button>

<n-divider />

<div class="flex justify-start">
<n-button size="large" type="primary" @click="saveMetadata">
<template #icon>
<f-icon icon="material-symbols:save" />
</template>
Save Metadata
</n-button>
</div>
</n-form>
</main>
</template>

0 comments on commit 86fb2e3

Please sign in to comment.