Update identityForm actions and logs routing

Author: tacxou

src/components/identityForm/actions.vue

@@ -57,7 +57,7 @@ async function sync() {
 }
 
 function logs() {
-  router.push(`/jobs?filters[=concernedTo]=${(props.identity as any)._id}`)
+  router.push(`/jobs?filters[%concernedTo]=${(props.identity as any)._id}`)
 }
 
 function back() {

src/components/identityForm/index.vue

@@ -70,7 +70,7 @@ async function submit() {
   delete sanitizedIdentity.metadata
   if (sanitizedIdentity.additionalFields?.validations) delete sanitizedIdentity.additionalFields.validations
 
-  const { data: result, pending, error, refresh } = await useHttp(`/management/identities/${props.identity._id}`, {
+  const { data: result, pending, error, refresh } = await useHttp<any>(`/management/identities/${props.identity._id}`, {
     method: 'PATCH',
     body: sanitizedIdentity,
   });
@@ -90,7 +90,7 @@ async function submit() {
       position: 'top-right',
       icon: 'mdi-check-circle-outline',
     })
-    emits('refreshTarget')
+    emits('refreshTarget', result.value.data)
   }
 }
 
@@ -109,7 +109,7 @@ function getTabValidations(tab: string) {
 }
 
 async function sync() {
-  const { data: result, pending, error, refresh } = await useHttp(`/management/identities/${props.identity._id}/state`, {
+  const { data: result, pending, error, refresh } = await useHttp<any>(`/management/identities/${props.identity._id}/state`, {
     method: 'PATCH',
     body: {
       state: IdentityState.TO_SYNC,
@@ -125,7 +125,7 @@ async function sync() {
       position: 'top-right',
       icon: 'mdi-check-circle-outline',
     })
-    emits('refreshTarget')
+    emits('refreshTarget', result.value.data)
     // props.identity. = result.value.data
   }
 }

src/pages/identities/index.vue

@@ -55,7 +55,7 @@ div
         ref="form" @refresh="refresh"
         @submit="submit($event)"
         @sync="sync" @logs="logs"
-        @refreshTarget="refreshTarget(target)"
+        @refreshTarget="refreshTarget"
       )
 </template>
 

src/pages/jobs/index.vue

@@ -1,18 +1,53 @@
 <template lang="pug">
-div.fit
+div
   //- .q-px-md
   //-   sesame-searchfilters(:fields="fieldsList")
-  q-scroll-area.fit.q-px-lg
-    q-timeline.q-px-lg
+  q-timeline.q-px-lg
+    q-infinite-scroll.q-px-lg(@load="load" :offset="250")
+      template(#loading)
+        .row.justify-center.q-my-md
+          q-spinner-dots(color="primary" size="40px")
+
       q-timeline-entry(heading) November, 2017
       q-timeline-entry(
-        v-for="(job, key) in jobs.data" :key="key"
+        v-for="(job, key) in jobs" :key="key"
         icon="mdi-account" color="orange"
       )
-        template(#title) Titre
-        template(#subtitle) Titre
-        div
-          pre(v-html="JSON.stringify(job, null, 2)")
+        template(#title)
+          span(v-text="'[' + job.jobId + ']'")
+          | &nbsp; - &nbsp;
+          span(v-text="job.params?.identity?.identity?.inetOrgPerson?.cn")
+          | &nbsp;
+          span(v-text="job.params?.identity?.identity?.inetOrgPerson?.givenName")
+        template(#subtitle)
+          q-card.bg-transparent(flat)
+            q-card-actions
+              div(v-text="job.action")
+              q-space
+              div
+                q-icon(name="mdi-clock" size="20px" left)
+                time(v-text="$dayjs(job.metadata?.createdAt).format('DD/MM/YYYY HH:mm:ss').toString()")
+        q-card(flat)
+          q-tabs(
+            v-model="tabs[key]"
+            align="justify"
+            dense
+          )
+            q-tab(name="params") Paramètres d'appel
+            q-tab(name="result") Résultat
+            q-btn(
+              v-if="tabs[key]"
+              @click="delete tabs[key]"
+              slot="right"
+              color="primary"
+              icon="mdi-close"
+              flat
+            )
+          q-tab-panels.overflow-auto(v-model="tabs[key]" style="max-height: 300px")
+            q-tab-panel(name="params")
+              pre(v-html="JSON.stringify(job.params, null, 2)")
+            q-tab-panel(name="result")
+              pre(v-html="JSON.stringify(job.result, null, 2)")
 </template>
 
 <script lang="ts" setup>
@@ -30,18 +65,31 @@ div.fit
 //   }, [])
 // })
 
+const scrollTargetRef = ref(null)
+const tabs = ref([])
+
 const $route = useRoute();
 
+const offset = ref(0);
 const query = computed(() => {
   return {
-    limit: 100,
+    limit: 10,
+    skip: offset.value * 10,
     'sort[metadata.lastUpdatedAt]': 'desc',
     ...$route.query,
   };
 });
 
-const { data: jobs, pending, error, refresh } = await useHttp(`/core/jobs/`, {
-  method: 'GET',
-  query,
-});
+const jobs = ref<any>([]);
+
+const load = async (index, done) => {
+  offset.value = index;
+  const { data, pending, error, refresh } = await useHttp<any>(`/core/jobs/`, {
+    method: 'GET',
+    query,
+  });
+
+  jobs.value.push(...data.value.data);
+  done(data.value.data.length === 0);
+}
 </script>