UI Improvements and Vue Integration for Processes Module

pages/processes/[processId].vue

@@ -1,15 +1,17 @@
 <script setup lang="ts">
-import {ref, computed, onMounted} from 'vue'
-import {useRuntimeConfig} from '#imports'
+import { ref, computed, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
+import { useRuntimeConfig } from '#imports'
 
 const {
-  params: { processId },
+  params: { processId }
 } = useRoute()
 
 const authStore = useAuthStore()
 const config = useRuntimeConfig()
 const data = ref(null)
+const inputValues = ref({})
+const response = ref(null)
 
 const fetchData = async () => {
   try {
@@ -20,25 +22,70 @@ const fetchData = async () => {
     })
   } catch (error) {
     console.error('Error fetching data:', error)
-    data.value 
   }
 }
 
 onMounted(() => {
   fetchData()
 })
 
+const submitProcess = async () => {
+  try {
+    const payload = {
+      inputs: Object.entries(inputValues.value).map(([id, val]) => ({
+        id,
+        input: {
+          value: val
+        }
+      }))
+    }
 
-const formattedData = computed(() => {
-  return JSON.stringify(data.value, null, 2)
-})
-
+    response.value = await $fetch(`${config.public.NUXT_ZOO_BASEURL}/ogc-api/processes/${processId}/execution`, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${authStore.token.access_token}`,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(payload)
+    })
+  } catch (error) {
+    console.error('Execution error:', error)
+  }
+}
 </script>
 
 <template>
-  <q-page class="q-pa-sm">
+  <q-page class="q-pa-md">
     <div v-if="data">
-      <pre itemprop="info">{{ formattedData }}</pre>
+      <h4>{{ data.id }} - {{ data.description }}</h4>
+
+      <q-form @submit.prevent="submitProcess">
+        <div
+          v-for="(input, inputId) in data.inputs"
+          :key="inputId"
+          class="q-mb-md"
+        >
+          <q-input
+            filled
+            v-model="inputValues[inputId]"
+            :label="`${inputId} (${input.schema?.type || 'text'})`"
+            :type="input.schema?.type === 'number' ? 'number' : 'text'"
+            :hint="input.title || ''"
+          />
+        </div>
+
+        <q-btn label="Submit" type="submit" color="primary" />
+      </q-form>
+
+      <div class="q-mt-lg" v-if="response">
+        <h6>Execution Response</h6>
+
+        <details>
+          <summary class="text-primary text-bold cursor-pointer">Show Raw JSON</summary>
+          <pre>{{ JSON.stringify(response, null, 2) }}</pre>
+        </details>
+      </div>
     </div>
+    <q-spinner v-else />
   </q-page>
-</template>
+</template>

pages/processes/index.vue

@@ -1,59 +1,11 @@
-<template>
-
-  <q-page class="q-pa-sm">
-
-
-    <div class="row justify-center ">
-      <div class="col-12 q-pa-md" style="max-width: 1080px;">
-        <p itemprop="title" class="text-h3">Processes List</p>
-        <q-separator/>
-
-        <div class="q-mb-md">
-          <q-input
-            filled
-            v-model="filter"
-            label="Rechercher"
-            debounce="300"
-            clearable
-            prepend-icon="search"
-          />
-        </div>
-
-        <q-table
-          title="Processes List"
-          :rows="rows"
-          :columns="columns"
-          row-key="id"
-        >
-
-          <template v-slot:body-cell-link="{ row }">
-            <q-td >
-              <a href="/processes/${row.id}" target="_blank">{{ row.id }}</a>
-            </q-td>
-          </template>
-        </q-table>   
-
-        <q-separator/>
-
-        <br/>
-        <div v-if="data">
-          <pre itemprop="info">{{ 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 { ref, computed, onMounted } from 'vue'
+import { useRuntimeConfig } from '#imports'
 
 const authStore = useAuthStore()
 const config = useRuntimeConfig()
 const data = ref(null)
+const filter = ref('')
 
 const fetchData = async () => {
   try {
@@ -84,16 +36,57 @@ const columns = [
 ]
 
 const rows = computed(() => {
-  console.log(data.value)
-  try{
-    return data.value["processes"]
-  }catch(error){
-    console.log('Error fetching processes list:',error)
-    return []
-  }
+  if (!data.value?.processes) return []
+  const term = filter.value.toLowerCase()
+  return data.value.processes.filter(p => {
+    const idMatch = p.id.toLowerCase().includes(term)
+    const descMatch = (p.description ?? '').toLowerCase().includes(term)
+    return idMatch || descMatch
+  })
 })
 
-const formattedData = computed(() => {
-  return JSON.stringify(data.value, null, 2)
-})
-</script>
+const formattedData = computed(() => JSON.stringify(data.value, null, 2))
+</script>
+
+<template>
+  <q-page class="q-pa-sm">
+    <div class="row justify-center">
+      <div class="col-12 q-pa-md" style="max-width: 1080px;">
+        <p itemprop="title" class="text-h3">Processes List</p>
+        <q-separator />
+
+        <div class="q-mb-md">
+          <q-input
+            filled
+            v-model="filter"
+            label="Rechercher"
+            debounce="300"
+            clearable
+            prepend-icon="search"
+          />
+        </div>
+
+        <q-table
+          title="Processes List"
+          :rows="rows"
+          :columns="columns"
+          row-key="id"
+        >
+          <template v-slot:body-cell-link="{ row }">
+            <q-td>
+              <NuxtLink :to="`/processes/${row.id}`" target="_blank">{{ row.id }}</NuxtLink>
+            </q-td>
+          </template>
+        </q-table>
+
+        <q-separator />
+
+        <br />
+        <div v-if="data">
+          <pre itemprop="info">{{ formattedData }}</pre>
+        </div>
+        <q-spinner v-else />
+      </div>
+    </div>
+  </q-page>
+</template>