From 807a7e6be887169f184d9a440aa2c537d4fed1b2 Mon Sep 17 00:00:00 2001
From: Paul Pestov <kontakt@paulpestov.de>
Date: Wed, 28 Sep 2022 00:13:56 +0200
Subject: [PATCH] Display more data in workflows list
---
src/assets/main.scss | 2 +-
src/components/workflows/WorkflowsList.vue | 47 ++++++++++++++++++----
src/main.js | 11 ++++-
3 files changed, 50 insertions(+), 10 deletions(-)
diff --git a/src/assets/main.scss b/src/assets/main.scss
index e19eaaa..a5d06e1 100644
--- a/src/assets/main.scss
+++ b/src/assets/main.scss
@@ -19,4 +19,4 @@
.p-tooltip-text {
white-space: nowrap;
-}
\ No newline at end of file
+}
diff --git a/src/components/workflows/WorkflowsList.vue b/src/components/workflows/WorkflowsList.vue
index bca59d0..50f01d4 100644
--- a/src/components/workflows/WorkflowsList.vue
+++ b/src/components/workflows/WorkflowsList.vue
@@ -1,19 +1,51 @@
<template>
<div>
- <Card v-for="(item, i) in list" :key="i" class="mb-3 shadow-3 border-gray-200">
+ <Card v-for="(item, i) in list" :key="i" class="mb-3 shadow-3 border-gray-200 p-4">
<template #header>
- <h3 class="text-xl font-bold p-3">{{ item.label }}</h3>
+ <div class="grid align-items-center gap-2">
+ <h3 class="text-xl font-bold">{{ item.label }}</h3>
+ <Tag :value="item.metadata.workflow_model" class="bg-gray-300 text-gray-700 ml-3"></Tag>
+ <Tag v-for="font in item.metadata.document_metadata.fonts" :key="font" :value="font" class="bg-gray-300 text-gray-700"></Tag>
+ </div>
</template>
<template #content>
<div class="grid">
+ <div class="col-7 grid">
+ <Accordion class="text-sm mr-3 flex-1">
+ <AccordionTab :header="item.metadata.gt_workspace.label">
+ <div class="grid">
+ <div class="col">
+ <p class="font-bold">{{ $t('number_of_pages') }}:</p>
+ <p>{{ item.metadata.document_metadata.number_of_pages }}</p>
+ <p class="mt-2 font-bold">{{ $t('publication_year') }}:</p>
+ <p> {{ item.metadata.document_metadata.publication_year }}</p>
+ </div>
+ <div class="col">
+ <p class="font-bold">{{ $t('layout') }}:</p>
+ <p>{{ item.metadata.document_metadata.layout }}</p>
+ <p class="mt-2 font-bold">{{ $t('publication_century') }}:</p>
+ <p> {{ item.metadata.document_metadata.publication_century }}</p>
+ </div>
+ </div>
+
+ </AccordionTab>
+ </Accordion>
+ <Accordion class="text-sm flex-1">
+ <AccordionTab :header="item.metadata.ocr_workflow.label">
+ <div class="flex gap-2">
+ <div v-for="step in item.metadata.workflow_steps" :key="step"><Chip :label="step" class="text-sm" /></div>
+ </div>
+ </AccordionTab>
+ </Accordion>
+ </div>
<div class="col-5 py-0 ml-auto">
- <div class="grid">
- <div class="col py-0" v-for="(evalKey, i) in evals" :key="i">
+ <div class="grid mb-1">
+ <div class="col py-0 text-center" v-for="(evalKey, i) in evals" :key="i">
<span class="font-bold">{{defs[evalKey] ? defs[evalKey].label : evalKey}}</span>
</div>
</div>
<div class="grid">
- <div v-for="(evaluation, i) in item.evaluations" :key="i" class="col">
+ <div v-for="(evaluation, i) in item.evaluations" :key="i" class="col text-center">
<span
class="border-round-3xl py-1 px-3"
:class="getEvalColor(evaluation.name, evaluation.value)">
@@ -38,8 +70,9 @@ const evals = ref([]);
const setListData = (data) => {
- list.value = data.map(({ label, evaluation }) => ({
+ list.value = data.map(({ label, evaluation, metadata }) => ({
label,
+ metadata,
evaluations: Object.keys(evaluation.document_wide).map(key => ({
name: key,
value: evaluation.document_wide[key]
@@ -72,7 +105,7 @@ watch(() => props.data, () => {
padding: 0;
}
:deep(.p-card-body) {
- @include styleclass('p-3');
+ @include styleclass('p-0 pt-5')
}
}
</style>
diff --git a/src/main.js b/src/main.js
index b20a491..77151fe 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,7 +7,10 @@ import Button from 'primevue/button';
import Card from 'primevue/card';
import Dropdown from 'primevue/dropdown';
import SelectButton from 'primevue/selectbutton';
-import Tooltip from 'primevue/tooltip';
+import Accordion from 'primevue/accordion';
+import AccordionTab from 'primevue/accordiontab';
+import Chip from 'primevue/chip';
+import Tag from 'primevue/tag';
import { createI18n } from "vue-i18n";
@@ -37,5 +40,9 @@ app.component('Button', Button);
app.component('Card', Card);
app.component('Dropdown', Dropdown);
app.component('SelectButton', SelectButton);
-app.directive('tooltip', Tooltip);
+app.component('Chip', Chip);
+app.component('Accordion', Accordion);
+app.component('AccordionTab', AccordionTab);
+app.component('Tag', Tag);
+
app.mount('#app');
--
GitLab