Skip to content
Snippets Groups Projects
Commit 142286b1 authored by Mathieu Massaviol's avatar Mathieu Massaviol
Browse files

Merge branch '5-implementer-la-page-home-de-l-espace-driihm' into 'main'

Implémentation du composant oc-tree

See merge request !3
parents bd5a002f a211ea28
No related branches found
No related tags found
1 merge request!3Implémentation du composant oc-tree
import type { Meta, StoryObj } from '@storybook/vue3'
import { fn } from '@storybook/test';
import OcTree from './OcTree.vue'
import type { OcTreeNode } from '@/declarations'
const meta: Meta<typeof OcTree> = {
component: OcTree
}
export default meta
type Story = StoryObj<typeof OcTree>
export const Primary: Story = {
render: (args) => ({
components: { OcTree },
setup() {
return { args }
},
template: '<OcTree v-bind="args" />'
}),
args: {
onNodeSelect: fn(),
onNodeExpand: fn(),
nodes: [
{
uri: 'uri1',
identifier: 'id1',
title: { en: 'Home', fr: 'Accueil' },
description: { en: 'Home', fr: 'Accueil' },
type: 'home',
children: [
{
uri: 'https://www.irit.fr/opencommon/resourceTree/PublicResources',
identifier: 'id2',
title: { en: 'Public resources', fr: 'Les ressources publiques' },
description: {
en: 'Public ressources of DRIIHM community',
fr: 'Les ressources publiques de la communauté DRIIHM'
},
type: 'catalog',
children: []
}
]
}
]
}
}
export const WithTitle: Story = {
render: (args) => ({
components: { OcTree },
setup() {
return { args }
},
template: '<OcTree v-bind="args" />'
}),
args: {
...Primary.args,
title: "LabEx DRIIHM"
}
}
\ No newline at end of file
<template>
<div :class="`p-4 bg-${props.color}-300`">
<h3 v-if="props.title" class="font-title text-4xl uppercase font-bold text-white mb-4">{{ props.title }}</h3>
<Tree id="tree" :class="`bg-${props.color}-300`" :value="formattedNodes" v-model:selection-keys="selectedKey"
selection-mode="single" @node-select="node => $emit('nodeSelect', node)" @node-expand="node => $emit('nodeExpand', node)" class="pl-0"></Tree>
</div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import Tree from 'primevue/tree';
import type { OcTreeNode } from '@/declarations';
import type { TreeNode } from 'primevue/treenode';
import { type2IconsDict } from '@/helpers/icons'
const { locale, fallbackLocale } = useI18n()
const props = defineProps({
nodes: {
type: Array<OcTreeNode>,
required: true,
},
title: {
type: String,
required: false
},
color: {
type: String,
required: false,
default: "olivine"
}
})
const selectedKey = ref<Map<string, boolean>>()
defineEmits<{
nodeSelect: [node: TreeNode],
nodeExpand: [node: TreeNode]
}>()
function OcTreeNode2PrimeVueTreeNode(node: OcTreeNode): TreeNode {
return {
key: node.identifier,
label: node.title?.[locale.value] ?? node.title?.[fallbackLocale.value as string] ?? '',
icon: type2IconsDict[node.type as keyof typeof type2IconsDict] ?? '',
children: node.children.map((childnode) => OcTreeNode2PrimeVueTreeNode(childnode))
}
}
const formattedNodes = computed(() => {
return props.nodes.map((node) => OcTreeNode2PrimeVueTreeNode(node))
})
</script>
<style scoped>
#tree {
--p-tree-node-hover-background: none;
--p-tree-node-selected-background: none;
--p-tree-node-icon-color: black;
--p-tree-node-icon-selected-color: white;
--p-tree-node-color: black;
--p-tree-node-hover-color: grey;
--p-tree-node-selected-color: white;
--p-tree-node-toggle-button-color: black;
--p-tree-node-toggle-button-hover-color: black;
--p-tree-node-toggle-button-selected-hover-color: black;
}
</style>
\ No newline at end of file
...@@ -14,3 +14,12 @@ export type OcJsonLdDocument<T> = { ...@@ -14,3 +14,12 @@ export type OcJsonLdDocument<T> = {
graph: T[] graph: T[]
context: ContextDefinition context: ContextDefinition
} }
export type OcTreeNode = {
uri: string
identifier: string
title: { [locale: string]: string }
description: undefined | { [locale: string]: string }
type: string
children: Array<OcTreeNode>
}
\ No newline at end of file
export const type2IconsDict = {
home: 'fa-solid fa-house',
catalog: 'fa-solid fa-book-open',
dataset: 'fa-solid fa-table',
distribution: 'fa-solid fa-file'
}
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment