Skip to content

Add Job Management Views, Homepage Metadata & UI Enhancements #3

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

Merged
cesarbenjamindotnet merged 6 commits into from
Jun 24, 2025
Merged

Add Job Management Views, Homepage Metadata & UI Enhancements #3

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
be1cd6f
rename jobs.vue,update jobs.jobid
anushacs-dell Jun 18, 2025
bff9330
add delete btn and update job list
anushacs-dell Jun 19, 2025
29ef20a
update home and add view btn to the job list-actions
anushacs-dell Jun 20, 2025
e65e5d3
resolve conflict
anushacs-dell Jun 20, 2025
e57cb75
Update pages/jobs/index.vue
cesarbenjamindotnet Jun 24, 2025
e79538f
Update pages/jobs/[jobId].vue
cesarbenjamindotnet Jun 24, 2025
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
245 changes: 89 additions & 156 deletions pages/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,180 +1,113 @@
<template>
<q-page class="row no-wrap">
<q-page class="q-pa-md">
<p class="text-h4 q-mb-md">Home</p>

<!-- Left Main Content -->
<div class="col q-pa-md">
<h3>Main Content</h3>
<p>This is the left side of the page where your main content goes.</p>

<p>You are currently {{ status }}</p>
<!-- <p>Token: {{ authStore.token }}</p> -->
<p>User: {{ authStore.user.name }}</p>

</div>
<q-card v-if="apiInfo" class="q-pa-md q-mb-lg">
<q-card-section>
<div class="text-h6">{{ apiInfo.title }}</div>
<div class="text-subtitle2">Version: {{ apiInfo.version }}</div>
<div class="q-mt-sm">{{ apiInfo.description }}</div>

<div class="q-mt-sm">Contact: {{ apiInfo.contact?.name }} ({{ apiInfo.contact?.email }})</div>


<div class="q-mt-sm" v-if="apiInfo.license">
License:
<a
:href="apiInfo.license.ucrl"
target="_blank"
class="text-primary"
style="text-decoration: underline"
>
{{ apiInfo.license.name }}
</a>
</div>

<!-- Right Side Panel -->
<div class="q-pa-md bg-grey-2" style="width: 300px;" v-if="metadata_contact">
<h5>Object Descriptions</h5>

<div
v-for="(object, index) in metadata_contact"
:key="index"
class="q-mb-md q-pa-sm bg-white rounded-borders shadow-1"
>
<h6>{{ index }}</h6>
<div v-for="(value, key) in object" :key="key" class="text-body2">
<strong>{{ key }}:</strong> {{ value }}
<div class="q-mt-md" v-if="apiInfo['x-keywords']">
<div class="text-subtitle2 q-mb-xs">Keywords:</div>
<q-chip
v-for="(kw, i) in apiInfo['x-keywords']"
:key="i"
color="primary"
text-color="white"
class="q-mr-sm"
dense
>
{{ kw }}
</q-chip>
</div>
<q-separator class="q-my-sm" />

</div>
</div>
<!--
<p>Home</p>

<!-- Barre latérale gauche: liste des liens --
<q-col cols="8">
<q-card>
<q-card-section>
<h6>Liens</h6>
<!--
<q-list>
<q-item v-for="(link, index) in links" :key="index" clickable>
<q-item-section>{{ link.name }}</q-item-section>
</q-item>
</q-list>
--
</q-card-section>
</q-card>
</q-col>

<!-- Provider description --
<q-col cols="4">
<q-card>
<q-card-section>
<div class="row items-center justify-between mb-2">
<h6>Provider</h6>
<div v-if="metadata_contact">
<div class="q-pa-md">
<div v-for="(value, key) in metadata_contact" :key="key" class="q-mb-sm">
<strong>{{ key }}:</strong> {{ value }}
</div>
</div>

<div class="q-mt-md" v-if="apiInfo['x-ows-servicecontact']">
<div class="text-subtitle2 q-mb-xs">Service Contact:</div>
<div><b>Name:</b> {{ apiInfo['x-ows-servicecontact'].individualName }}</div>
<div><b>Organization:</b> {{ apiInfo['x-ows-servicecontact'].providerName }}</div>
<div>
<b>Email:</b>
<a :href="`mailto:${apiInfo['x-ows-servicecontact'].addressElectronicMailAddress}`" class="text-primary">
{{ apiInfo['x-ows-servicecontact'].addressElectronicMailAddress }}
</a>
</div>
<div v-if="metadata_contact">
<div class="q-pa-md">
<div v-for="(value, key) in metadata_contact" :key="key" class="q-mb-sm">
<strong>{{ key }}:</strong> {{ value }}
</div>
</div>
<div><b>Address:</b>
{{ apiInfo['x-ows-servicecontact'].addressDeliveryPoint }},
{{ apiInfo['x-ows-servicecontact'].addressCity }} -
{{ apiInfo['x-ows-servicecontact'].addressPostalCode }},
{{ apiInfo['x-ows-servicecontact'].addressCountry }}
</div>
<q-btn flat icon="edit" @click="toggleDescription" :label="showDescription ? 'Cacher' : 'Afficher'" />
</div>
<div v-if="showDescription" class="q-mb-md" style="max-height: 300px; overflow: auto;">
<pre v-html="highlightedDescription"></pre>
</div>
<!-- Textarea caché pour JSON description --
<div v-if="showJson" class="q-mt-md">
<q-input
filled
type="textarea"
ref="jsonTextarea"
v-model="jsonDescription"
label="Description JSON"
autogrow
style="height: 200px;"
/>
</div>
</q-card-section>
</q-card>
</q-col>

<p>You are currently {{ status }}</p>
<p>Token: {{ authStore.token }}</p>
<p>User: {{ authStore.user }}</p>
<q-card v-if="landingLinks.length" class="q-pa-md">
<q-card-section>
<div class="text-h6">Available Links</div>
<q-list bordered separator>
<q-item
v-for="(link, index) in landingLinks"
:key="index"
clickable
tag="a"
:href="link.href"
target="_blank"
>
<q-item-section>
<div class="text-subtitle1">{{ link.title || link.rel }}</div>
<div class="text-caption text-grey">{{ link.href }}</div>
</q-item-section>
</q-item>
</q-list>
</q-card-section>
</q-card>

<div v-if="data">
<pre itemprop="info">{{ formattedData }}</pre>
</div>
-->
<q-spinner v-if="loading" class="q-mt-lg" />
</q-page>
</template>

<script setup lang="ts">
import {ref, computed, onMounted} from 'vue'
import {useRuntimeConfig} from '#imports'
import { ref, onMounted } from 'vue'

const { status } = useAuth()
const authStore = useAuthStore()
const config = useRuntimeConfig()
const data = ref(null)
const landingLinks = ref<any[]>([])
const apiInfo = ref<any>(null)
const loading = ref(false)

const fetchData = async () => {
try {
data.value = await $fetch(`${config.public.NUXT_ZOO_BASEURL}/ogc-api/api`, {
headers: {
Authorization: `Bearer ${authStore.token.access_token}`
}
})
} catch (error) {
console.error('Error fetching data:', error)
try {
data.value = await $fetch(`${config.public.NUXT_ZOO_BASEURL}/ogc-api/api`, {})
} catch (error) {
console.error('Error fetching data:', error)
}
const landingUrl = 'http://192.168.1.6/ogc-api/'
const apiSpecUrl = 'http://192.168.1.6/ogc-api/api'

const fetchLandingAndApiInfo = async () => {
loading.value = true
try {
const landingRes = await $fetch(landingUrl)
landingLinks.value = landingRes.links || []

const apiRes = await $fetch(apiSpecUrl)
apiInfo.value = apiRes.info || {}
} catch (err) {
console.error('Error loading homepage data:', err)
} finally {
loading.value = false
}
}

onMounted(() => {
fetchData()
})

const columns = [
{ name: 'id', label: '#', field: 'id', align: 'left', sortable: true },
{ name: 'description', label: 'Description', field: 'description', align: 'left', sortable: true },
{
name: 'link',
label: 'Lien',
field: row => row.links?.[0]?.href || '',
align: 'left',
sortable: false
}
]

/*const rows = computed(() => {
console.log(data.value)
try{
return data.value["processes"]
}catch(error){
console.log('Error fetching processes list:',error)
return []
}
})*/

const formattedData = computed(() => {
return data.value
})

const metadata_contact = computed(() => {
console.log(data.value)
try{
var contact = {};
for(var i in data.value["info"]){
if(i=="contact" || i=="x-ows-servicecontact"){
contact[i] = data.value["info"][i];
}
}
return contact
} catch (error) {
console.log('Error fetching metadata contact:', error)
return {}
}
})

onMounted(fetchLandingAndApiInfo)
</script>

<style scoped>

</style>
88 changes: 88 additions & 0 deletions pages/jobs-old.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<template>
<q-page class="q-pa-sm">
<div class="row justify-center">
<div class="col-12 q-pa-md" style="max-width: 1080px;">
<p class="text-h3">Jobs List</p>
<q-separator />

<q-input v-model="filter" filled label="Search" class="q-mb-md" debounce="300" />
<q-table
title="Jobs List"
:rows="rows"
:columns="columns"
row-key="jobID"
>
<template v-slot:body-cell-actions="{ row }">
<q-td class="text-center">
<q-btn
label="View"
color="primary"
size="sm"
:to="`/jobs/${row.jobID}`"
target="_blank"
flat
/>
</q-td>
</template>
</q-table>

<q-separator />

<br />
<div v-if="data">
<pre>{{ formattedData }}</pre>
</div>
<q-spinner v-else />
</div>
</div>
</q-page>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRuntimeConfig } from '#imports'
import { useAuthStore } from '~/stores/auth'

const config = useRuntimeConfig()
const authStore = useAuthStore()
const filter = ref('')

const data = ref(null)

const fetchData = async () => {
try {
const response = await $fetch(`${config.public.NUXT_ZOO_BASEURL}/ogc-api/jobs`, {
headers: {
Authorization: `Bearer ${authStore.token.access_token}`
}
})
data.value = response
} catch (error) {
console.error('Error fetching jobs:', error)
}
}

onMounted(() => {
fetchData()
})


const rows = computed(() => {
try {
return data.value?.jobs || []
} catch (error) {
console.log('Jobs parsing error:', error)
return []
}
})

const columns = [
{ name: 'jobID', label: 'Job ID', field: 'jobID', align: 'left', sortable: true },
{ name: 'processID', label: 'Process', field: 'processID', align: 'left' },
{ name: 'status', label: 'Status', field: 'status', align: 'left' },
{ name: 'created', label: 'Created', field: 'created', align: 'left' },
{ name: 'actions', label: 'Actions', field: 'actions', align: 'center' }
]

const formattedData = computed(() => JSON.stringify(data.value, null, 2))
</script>
Loading