tethys.backend/resources/js/Pages/Submitter/Dataset/Category.vue
Arno Kaimbacher f67b736a88
Some checks failed
CI Pipeline / japa-tests (push) Failing after 1m0s
feat: Enhance dataset management and improve frontend components
- Added preloads 'allowed_extensions_mimetypes' and 'dependent_array_min_length' in adonisrc.ts
- Updated @symfony/webpack-encore from ^4.6.1 to ^5.0.1
- AdminuserController: Implemented pagination for 10 records in index method
- Enabled reviewers to reject datasets to editors with email notifications (DatasetController.ts)
- Submitter DatasetController: Files now loaded in ascending order (sort_order) in edit mode
- file.ts: Removed serialization of fileData due to browser issues
- Modified FileUpload.vue to mark already uploaded files as deleted
- Improved keyword search in SearchCategoryAutocomplete.vue
- Started development on Category.vue for submitters to categorize DDC
- Added new route /dataset/categorize in routes.ts
- Introduced 2 new rules in start/rules: allowed_extensions_mimetypes.ts and dependent_array_min_length.ts
- Performed npm updates
2024-11-29 15:46:26 +01:00

92 lines
3.5 KiB
Vue

<template>
<div class="flex flex-col h-screen p-4 bg-gray-100">
<header class="flex justify-between items-center mb-4">
<h1 class="text-xl font-bold">SKOS Browser</h1>
<div class="flex space-x-2">
<button @click="updateApp" title="Update the application">
<img src="/Resources/Images/refresh.png" alt="Update" class="w-4 h-4" />
</button>
<button @click="showInfo" title="Info">
<img src="/Resources/Images/info.png" alt="Info" class="w-4 h-4" />
</button>
</div>
</header>
<div class="bg-white shadow-md rounded-lg p-4 mb-6">
<h2 class="text-lg font-semibold">GBA-Thesaurus</h2>
<label class="block text-sm font-medium">Aktueller Endpoint:</label>
<!-- <TreeView :items="endpoints" @select="onEndpointSelected" /> -->
</div>
<div class="bg-white shadow-md rounded-lg p-4">
<h2 class="text-lg font-semibold">Konzept-Suche</h2>
<!-- <Autocomplete v-model="selectedConcept" :items="concepts" placeholder="Search for a concept" @change="onConceptSelected" /> -->
<div class="mt-4">
<h3 class="text-md font-medium">Ausgewähltes Konzept</h3>
<p>{{ selectedConcept.title }}</p>
<a :href="selectedConcept.uri" target="_blank" class="text-blue-500">URI</a>
<textarea
v-model="selectedConcept.description"
class="mt-2 w-full h-24 border rounded"
placeholder="Description"
></textarea>
</div>
<div class="mt-4">
<h3 class="text-md font-medium">Untergeordnete Konzepte</h3>
<!-- <LinkLabelList :items="narrowerConcepts" /> -->
</div>
<div class="mt-4">
<h3 class="text-md font-medium">Übergeordnete Konzepte</h3>
<!-- <LinkLabelList :items="broaderConcepts" /> -->
</div>
<div class="mt-4">
<h3 class="text-md font-medium">Verwandte Konzepte</h3>
<!-- <LinkLabelList :items="relatedConcepts" /> -->
</div>
</div>
</div>
</template>
<script>
// import TreeView from './TreeView.vue'; // Assuming you have a TreeView component
// import Autocomplete from './Autocomplete.vue'; // Assuming you have an Autocomplete component
// import LinkLabelList from './LinkLabelList.vue'; // Assuming you have a LinkLabelList component
export default {
components: {
// TreeView,
// Autocomplete,
// LinkLabelList,
},
data() {
return {
endpoints: [], // This should be populated with your data
concepts: [], // This should be populated with your data
selectedConcept: {},
narrowerConcepts: [], // Populate with data
broaderConcepts: [], // Populate with data
relatedConcepts: [], // Populate with data
};
},
methods: {
updateApp() {
// Handle app update logic
},
showInfo() {
// Handle showing information
},
onEndpointSelected(endpoint) {
// Handle endpoint selection
},
onConceptSelected(concept) {
this.selectedConcept = concept;
// Handle concept selection logic, e.g., fetching related concepts
},
},
};
</script>
<style scoped>
/* Add your styles here */
</style>