Mandat UI fixes (#73)

* Style tom app Add AdvertisementCard Add routes for create, list of demands apply styles for dackl tabs Add customt dackl tablist Apply auto-load by using watchers * Add stepper to create demands * feat: Move tabs to shared ui components * Moved components and composables to shared * Styled Service Provider step * Styled Create Demand step * Fix minor dropdown positions * Finish Create Demand Styles * Finish Active Loan Page * Fix bugs in Demands * Remove Service component * WIP Demand process layout added status according to the layout created new layout for the demands * Enhance UX by rerouting and change sorting * Minor styling fixes in create demand * Scroll into card with same amount if it is set * Scroll into card after accepting an offer * Add Dackl Header Bar * Add tab in bank app Add tab in bank app Change the background color for the header * wip showing relevant data on tab clicked wip showing relevant data on tab clicked * fix: use red label for terminated demands * Add Reload Button to Page heade * Fix styling for card fix styling for card * Fix Tab states fix tab states for demands * integrated data with dialog box integrated data in dialog box * Add loading skeletons for demands Add loading skeletons for demands * update styling for demand card update styling for demand card * fix disable state of dropdown fix disable state of dropdown * Refactoring remove unused code remove unused code move constatns and enums to another folder * fix title for active loans fix title for active loans * Refactor chip status add chip status component * add test sample for tom/sme app * add test samples to all apps * add jest setup to declare textencoder and so on * move request access body to request access file move request access body to request access file * move code to the service request access * add computed values for the template * fix file path fix file path for status chip component * add test for lisa app - Status chip - Business Data Panel - Demand Processor - Demand Skeleton * Fix no data issue in bank app Fix no data card issue in the bank app * Header background color change Header background color change for lisa and max * update header color for max update header color for max app * add link for tom app add link for tom app * remove underline from link remove underline from link * remove unused code in DemandProcessor remove unused code in DemandProcessor * fix style changes fix style changes * fix styling fix styling * fix tab color for lisa app fix tab color for lisa app * fix style for dialog fix style for dialog * styling fixes styling fix * feat: add package json information * v1.0.0 * feat: add types to package json improved docker environment * v1.0.1 * fix: use 1.0.1 in dependencies * fix: order in github action fixed Need build BEFORE test because we need to have all dist folders. * fix: order in dockerfile fixed Need build BEFORE test because we need to have all dist folders. * fix: ignore dist folder in docker * fix: cache dist folders * fix: ci clean up * Revert "fix: ci clean up" This reverts commit b241e34. * fix: fix ci caching * fix: enhance ci.yml using variables * Revert "fix: enhance ci.yml using variables" This reverts commit cafba6f. * fix: chore in ci.yml * Fix styling for button, demand and tab Fix styling for button, demand and tab * Fix button style for disable Fix button style for disable * Merge market branch Merge market branch * format money amount in lisa app format money amount in lisa app * fix merge style changes fix style changes cause by merge --------- Co-authored-by: Christian Illies (FINATIX) <c.illies@finatix.de>
mandat-project · Dec 18, 2024 · 3351784 · 3351784
1 parent 281abb5
commit 3351784
Show file tree

Hide file tree

Showing 18 changed files with 117 additions and 60 deletions.
diff --git a/apps/auth/src/components/requests/AccessRequest.vue b/apps/auth/src/components/requests/AccessRequest.vue
@@ -4,7 +4,7 @@
       {{ $t("accessRequest.title") }}
     </template>
     <template #content>
-      <div class="grid">
+      <div class="grid m-0">
         <div class="col-12 md:col">
           <div class="text-black-alpha-60">
             {{ $t("accessRequest.purpose") }}
@@ -121,7 +121,10 @@
     </template>
   </Card>
 
-  <ConfirmDialog :group="'accessRequest-' + informationResourceURI" />
+  <ConfirmDialog
+    :group="'accessRequest-' + informationResourceURI"
+    style="width: 40rem"
+  />
 </template>
 
 <script setup lang="ts">
@@ -413,6 +416,7 @@ function confirmGrantWithAccessReceipt(): void {
     message: t("accessRequest.confirmDialog.message"),
     header: t("accessRequest.confirmDialog.header"),
     rejectLabel: t("accessRequest.confirmDialog.cancel"),
+    rejectClass: "p-button-secondary",
     acceptLabel: t("accessRequest.confirmDialog.authorize"),
     accept: () => {
       // TODO add authorizations from groups and data-authorizations
@@ -431,6 +435,7 @@ function confirmDeclineWithAccessReceipt(): void {
     header: t("accessRequest.declineDialog.header"),
     acceptClass: "p-button-danger",
     rejectLabel: t("accessRequest.declineDialog.cancel"),
+    rejectClass: "p-button-secondary",
     acceptLabel: t("accessRequest.declineDialog.decline"),
     accept: () => {
       declineWithAccessReceipt();

diff --git a/apps/auth/src/views/Home.vue b/apps/auth/src/views/Home.vue
@@ -1,7 +1,9 @@
 <template>
   <section>
     <header class="w-full md:w-11 lg:w-10 xl:w-9 mx-auto mt-7">
-      <h1 class="px-4 md:px-0 flex align-items-center gap-2">
+      <h1
+        class="text-petrol-650 px-3 font-normal text-4xl md:text-6xl gap-2 flex align-items-center"
+      >
         Access Manager
         <Button
           icon="pi pi-refresh"

diff --git a/apps/lisa/src/components/DemandProcessor.vue b/apps/lisa/src/components/DemandProcessor.vue
@@ -3,7 +3,7 @@
     <Card :data-demand-id="demandUri">
       <template #content>
         <div class="card-container">
-        <div class="grid">
+        <div class="grid pt-0">
           <div class="col-12" v-if ="currentState === STATES.Terminated" >
             <StatusChip :status="STATES.Terminated"></StatusChip>
           </div>
@@ -13,48 +13,44 @@
           </div>
           <div class="col-6">
             <span>Amount</span>
-            <h2>{{ amount }} - {{ currency }}</h2>
+            <h2>{{ Number(amount).toLocaleString('de-DE') }} - {{ currency }}</h2>
           </div>
         </div>
-        <div class="border-round-2xl p-2" style="background-color:rgba(246, 247, 249, 1);">
-          <div class=" grid gap-3 ml-2 py-2" v-if="currentState === STATES.DataNeeded">
+        <div class="border-round-2xl p-4 ml-2" style="background-color:rgba(246, 247, 249, 1);">
+          <div class=" grid gap-3 pt-0" v-if="currentState === STATES.DataNeeded">
             <StatusChip :status="STATES.DataNeeded"></StatusChip>
-            <div class="w-full ml-2">
+            <div class="w-full">
               <p class="font-medium" >Business Assessment data</p>
             </div>
 
-              <div class="dropdown relative w-full ml-2">
+              <div class="dropdown relative w-full">
                   <label class="z-1 pt-2.5 pl-2 text-sm text-black-alpha-70 absolute w-full">Select data</label>
                   <Dropdown class="w-full h-3.75rem pt-4 mt-1 mb-2 control-shadow" v-model="selectedShapeTree" :options="shapeTrees" option-label="label" />
               </div>
               <Button class="step-button" v-bind:disabled="accessRequestUri !== undefined || isOfferCreated"
                       @click="requestAccessToData()">Request Data</Button>
           </div>
-          <div v-else-if="currentState === STATES.PendingDataRequest || currentState === STATES.DataSuccessfullyProvided" class="gap-2 ml-2 py-2">
+          <div v-else-if="currentState === STATES.PendingDataRequest || currentState === STATES.DataSuccessfullyProvided" class="gap-2">
             <StatusChip :status="currentState"></StatusChip>
-            <div class="ml-2">
               <h5>Business Assessemnent data</h5>
               <p class="text-xs pb-2">Requested Data</p>
               <p class="pb-4 text-sm font-medium">{{selectedShapeTree.label}}</p>
-            </div>
             <Button class="step-button"
                     v-bind:disabled="isDialogShowDataBtnDisabled"
-                    @click="processDataDialogBox()">Show Data</Button>
+                    @click="processDataDialogBox()" severity="secondary">Show Data</Button>
           </div>
-          <div v-else-if="currentState === STATES.WaitingForResponse || currentState === STATES.OfferAccepted || currentState === STATES.Terminated" class=" gap-2 ml-2 py-2">
+          <div v-else-if="currentState === STATES.WaitingForResponse || currentState === STATES.OfferAccepted || currentState === STATES.Terminated" class=" gap-2">
             <StatusChip :status="currentState" v-if="currentState !== STATES.Terminated"></StatusChip>
-            <div class="ml-2">
-              <h5>Business assessment data</h5>
+              <h5  :class="{ 'mt-0' : currentState === STATES.Terminated }">Business assessment data</h5>
               <p class="text-xs pb-2">Requested Data:</p>
               <p class="pb-4 text-sm font-medium">{{selectedShapeTree.label}}</p>
-            </div>
-            <Button class="step-button"
+            <Button type="button" class="step-button"
                     v-bind:disabled="!isAccessRequestGranted || isAccessRequestGranted === 'false'"
                     @click="processDataDialogBox()" severity="secondary">Show Data</Button>
           </div>
         </div>
         <div class="grid pt-2 pb-2">
-          <div class="col-6 pl-0">
+          <div class="col-6">
             <DacklTextInput type="number" :disabled="!(currentState === STATES.DataSuccessfullyProvided)" :maxFractionDigits="2" class="w-full md:w-auto mt-2" label="Annual Percentage rate in %" v-model="enteredAnnualPercentageRate"/>
           </div>
           <div class="col-6">
@@ -65,9 +61,9 @@
           </div>
         </div>
         <Button v-if="isTerminateBtnVisible" severity="danger"
-                class="step-button text-0" @click="SetTerminationFlagInOrder(offersForDemand)">Terminate business relation
+                class="step-button text-0 ml-2" @click="SetTerminationFlagInOrder(offersForDemand)">Terminate business relation
         </Button>
-        <Button v-else-if="currentState !== STATES.Terminated" class="step-button" :disabled="isCreateOfferBtnDisabled"
+        <Button v-else-if="currentState !== STATES.Terminated" class="step-button ml-2" :disabled="isCreateOfferBtnDisabled"
                 @click="createOfferResource(props.demandUri, accessRequestUri!)">Create Offer and grant Access</Button>
         </div>
       </template>
@@ -755,9 +751,7 @@ setTimeout(()=>{
 </script>
 
 <style scoped>
-.p-component :deep(.p-card-body){
-  padding-top:0px
-}
+
 .p-component :deep(.p-card-content ){
   padding-top:0px
 }
@@ -826,7 +820,6 @@ setTimeout(()=>{
     width: fit-content;
     font-weight: bold;
     border: none;
-    margin-left: 0.5rem;
 
     &:hover {
       background-color: rgba(65, 132, 153, 0.2);

diff --git a/apps/lisa/src/components/StatusChip.vue b/apps/lisa/src/components/StatusChip.vue
@@ -1,10 +1,10 @@
 <template>
   <Chip v-if="chipStatus === STATES.Terminated" :label="chipStatus" class="text-color text-sm terminated" />
-  <Chip v-else-if="chipStatus === STATES.DataNeeded" label="Data needed" class="text-0 text-sm ml-2 data-needed"/>
-  <Chip v-else-if="chipStatus === STATES.PendingDataRequest" label="Pending Data Request" class=" text-color text-sm ml-2 pending-data-request"/>
-  <Chip v-else-if="chipStatus === STATES.DataSuccessfullyProvided" label="Data successfully provided" class="text-color text-sm ml-2 data-successfully-provided"/>
-  <Chip v-else-if="chipStatus === STATES.WaitingForResponse" label="Waiting for response" class=" text-color text-sm ml-2 waiting-for-response"/>
-  <Chip v-else-if="chipStatus === STATES.OfferAccepted" label="Offer Accepted" class="text-sm ml-2 offer-accepted"/>
+  <Chip v-else-if="chipStatus === STATES.DataNeeded" label="Data needed" class="text-0 text-sm data-needed"/>
+  <Chip v-else-if="chipStatus === STATES.PendingDataRequest" label="Pending Data Request" class=" text-color text-sm pending-data-request"/>
+  <Chip v-else-if="chipStatus === STATES.DataSuccessfullyProvided" label="Data successfully provided" class="text-color text-sm data-successfully-provided"/>
+  <Chip v-else-if="chipStatus === STATES.WaitingForResponse" label="Waiting for response" class=" text-color text-sm waiting-for-response"/>
+  <Chip v-else-if="chipStatus === STATES.OfferAccepted" label="Offer Accepted" class="text-sm offer-accepted"/>
 </template>
 <script setup>
 import {ref, watch} from "vue";

diff --git a/apps/lisa/src/views/Home.vue b/apps/lisa/src/views/Home.vue
@@ -1,10 +1,11 @@
 <template>
-  <TabList class="mt-2 pl-4 w-full" @item-change="tabListItemChange" :model="tabMenu" :active="activeTab" style="background:linear-gradient(90deg, #2e399e 0%, #00c6ff 100%)"/>
-
+  <div class="px-4 pt-3 tab-background">
+    <TabList class="mt-4"  @item-change="tabListItemChange" :model="tabMenu" :active="activeTab" />
+  </div>
   <div class="grid px-1 sm:px-8" >
-    <h1 v-if="activeTab === TAB_STATE.OfferAccepted">Active Loans <Button v-if="session.webId" icon="pi pi-refresh" class="p-button-text p-button-rounded p-button-icon-only"
+    <h1 v-if="activeTab === TAB_STATE.OfferAccepted" class="px-3 font-normal text-4xl md:text-6xl gap-2 flex align-items-center">Active Loans <Button v-if="session.webId" icon="pi pi-refresh" class="p-button-text p-button-rounded p-button-icon-only"
                                                                                @click="fetchDemandUris(memberOf)" /></h1>
-    <h1 v-else >{{activeTab}} <Button v-if="session.webId" icon="pi pi-refresh" class="p-button-text p-button-rounded p-button-icon-only"
+    <h1 v-else class="px-3 font-normal text-4xl md:text-6xl gap-2 flex align-items-center">{{activeTab}} <Button v-if="session.webId" icon="pi pi-refresh" class="p-button-text p-button-rounded p-button-icon-only"
                                           @click="fetchDemandUris(memberOf)" /></h1>
 
     <div class="col-12 flex flex-column" style="background-color:white">
@@ -53,6 +54,17 @@
 .tab:not(.active){
   background-color: #033B4A26;
 }
+.tab-list :deep(.tab){
+  background-color:#CBD5DA;
+  text-color:black;
+}
+.tab-list :deep(.tab_content){
+  color:black;
+}
+.tab-background{
+  background:linear-gradient(90deg, #2e399e 0%, #00c6ff 100%)
+}
+
 </style>
 
 <script setup lang="ts">

diff --git a/apps/max/src/views/Home.vue b/apps/max/src/views/Home.vue
@@ -118,7 +118,7 @@ function getObject(store: Store, quad1: string, quad2?: Quad): string {
 <template>
   <div class="grid">
     <div class="col lg:col-12 wrapper">
-      <h1 class="heading">Client Requests</h1>
+      <h1 class="text-petrol-650 px-3 font-normal text-4xl md:text-6xl gap-2 flex align-items-center">Client Requests</h1>
       <ul v-if="isLoggedIn" class="pb-2">
         <Card class="mb-4" v-for="([uri, store], index) of documentCreationDemands" :key="index">
           <template #title><div class="col-12 block">Request #{{ index + 1 }}:</div></template>
@@ -153,9 +153,6 @@ function getObject(store: Store, quad1: string, quad2?: Quad): string {
   margin: 5px;
   .wrapper {
     width: -webkit-fill-available;
-    .heading{
-      color: #007577;
-    }
     ul{
       padding-left:0px;
       .word-break{

diff --git a/apps/tom/src/components/AdvertisementCard.spec.ts b/apps/tom/src/components/AdvertisementCard.spec.ts
@@ -3,6 +3,7 @@ import PrimeVue from "primevue/config";
 import ConfirmationService from "primevue/confirmationservice";
 import ToastService from "primevue/toastservice";
 import AdvertisementCard from "./AdvertisementCard.vue";
+import Chip from "primevue/chip";
 
 // TODO setupTestMount
 // - add plugins

diff --git a/apps/tom/src/components/AdvertisementCard.vue b/apps/tom/src/components/AdvertisementCard.vue
@@ -1,14 +1,15 @@
 <template>
   <Card>
     <template #content>
-      <div class="grid">
-          <div class="md:col-4 p-2 bg-bluegray-50 flex justify-content-center">
+      <div class="grid m-0">
+          <div class="md:col-4 p-2 bg-bluegray-50 flex justify-content-center"  style="width: 112px; height: 112px;">
             <img class="max-w-full" :src="toAdvertisementImage(ad)" :alt="toAdvertisementName(ad)">
           </div>
           <div class="col-8">
-            <h2>{{ toAdvertisementName(ad) }} <a :href="ad" target="_blank" class="no-underline">*</a></h2>
+            <h2><a :href="ad" target="_blank" class="no-underline">{{ toAdvertisementName(ad) }} *</a></h2>
           </div>
         </div>
+      <HorizontalLine class="mt-0"/>
     </template>
     <template #footer>
       <Button @click="emit('adClick', ad)" class="w-full justify-content-center">Find Provider</Button>
@@ -18,10 +19,20 @@
 <script setup lang="ts">
 import {toAdvertisementImage} from "@/utils/toAdvertisementImage";
 import {toAdvertisementName} from "@/utils/toAdvertisementName";
+import {HorizontalLine} from "@datev-research/mandat-shared-components";
 
 const props = defineProps<{ ad: string }>();
 const emit = defineEmits<{
   (e: 'adClick', ad: string): void,
 }>();
 
 </script>
+<style scoped>
+.p-card :deep(.p-card-content) {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.p-card :deep(.p-card-footer) {
+  padding-top: 0;
+}
+</style>
diff --git a/apps/tom/src/views/CreateDemand.vue b/apps/tom/src/views/CreateDemand.vue
@@ -300,8 +300,8 @@ async function createDemand(demandContainerUris: string[], payload: string) {
         <template #content>
           <SmeCard>
             <SmeCardHeadline>Service Type</SmeCardHeadline>
-            <ul class="list-none gap-5 p-0 flex flex-column md:flex-row">
-              <li v-for="ad of listedAdvertisements" :key="ad" class="md:col-6">
+            <ul class="list-none gap-5 p-0 flex flex-column md:flex-row justify-content-between">
+              <li v-for="ad of listedAdvertisements" :key="ad" class="w-auto flex-grow-1 flex-shrink-1 flex-basis-0">
                 <AdvertisementCard @adClick="adClick" :ad="ad"/>
               </li>
             </ul>
@@ -330,9 +330,9 @@ async function createDemand(demandContainerUris: string[], payload: string) {
             <p class="break-all">{{ chosenAdvertisement }}</p>
             <HorizontalLine/>
             <div role="list" v-if="advertisements" class="flex flex-column gap-3 p-0">
-              <Card role="listitem" v-for="(ad, index) in advertisements" :key="ad.id">
+              <Card role="listitem" class="consumer-credit p-4" v-for="(ad, index) in advertisements" :key="ad.id">
                 <template #header>
-                  <header class="flex gap-4 m-4">
+                  <header class="flex gap-4">
                     <div class="w-6rem h-6rem p-3 bg-bluegray-50 flex justify-content-center align-items-center">
                       <a class="" :href="ad.inbox"><img :src="ad.creatorIconURI" class="max-w-full"></a>
                     </div>
@@ -347,20 +347,20 @@ async function createDemand(demandContainerUris: string[], payload: string) {
                 <template #content>
 
                   <div class="grid">
-                    <div class="col-12 md:col-3">
+                    <div class="col-4 xl:col-3">
                       <p class="my-0 text-xs text-black-alpha-70">Lowest interest rate: </p>
                       <p class="my-0 text-xl font-semibold">{{ad.lowestInterestRate}} %</p>
                     </div>
-                    <div class="col-12 md:col-3">
+                    <div class="col-4 xl:col-3">
                       <p class="my-0 text-xs text-black-alpha-70">Repayment Periods (months)</p>
                       <p class="my-0 text-xl font-semibold">{{ad.minCreditPeriodMonths}} - {{ad.maxCreditPeriodMonths}}</p>
                     </div>
-                    <div class="col-12 md:col-3">
+                    <div class="col-4  xl:col-3 ">
                       <p class="my-0 text-xs text-black-alpha-70">Contact advertiser at:</p>
                       <a class="my-0 text-xl font-semibold" :href="ad.inbox">advertiser</a>
                     </div>
-                    <div class="col-12 md:col-3 align-content-end">
-                      <Button class="w-full md:w-auto" @click="chosedAdvertiser(ad, index)" icon="pi pi-check">
+                    <div class="col-12 mt-2 xl:mt-0 xl:col-3 flex justify-content-end">
+                      <Button class="w-full xl:w-auto" @click="chosedAdvertiser(ad, index)" icon="pi pi-check">
                         Select&nbsp;
                         <span class="md:hidden">Provider</span>
                         <span class="hidden md:inline">{{ ad.label }}</span>
@@ -425,3 +425,15 @@ async function createDemand(demandContainerUris: string[], payload: string) {
   </div>
 </template>
 
+<style scoped>
+
+.p-stepper :deep(.p-stepper-nav) {
+  width:40rem;
+}
+.consumer-credit :deep(.p-card-body){
+  padding:0;
+}
+.consumer-credit :deep(.p-card-content){
+  padding:0;
+}
+</style>
diff --git a/apps/tom/src/views/Demands.vue b/apps/tom/src/views/Demands.vue
@@ -392,7 +392,7 @@ function handleAuthorizationRequest(inspectedAccessRequestURI: string) {
   <ProgressBar v-show="isLoading" mode="indeterminate" style="height: 2px" />
 
   <div role="list" v-if="displayedDemands" class="flex flex-column gap-3 py-0 px-3">
-    <Card :class="{'bg-yellow-100' : highlightAmountValue === demand.amount, ['amount-'+demand.amount]: true }"
+    <Card :class="{'highlight' : highlightAmountValue === demand.amount, ['amount-'+demand.amount]: true }"
           role="listitem" v-for="demand in displayedDemands" :key="demand.id" :data-demand-id="demand.id">
       <template #title>
         <a class="font-normal text-black-alpha-90 no-underline" :href="demand.providerWebID">{{ demand.providerName }}</a>
@@ -483,5 +483,16 @@ function handleAuthorizationRequest(inspectedAccessRequestURI: string) {
 <style scoped>
 .-top-1rem {
   top: -1rem;
+}
+ .p-card :deep(.p-card-content) {
+   padding-top: 0;
+   padding-bottom: 0;
+ }
+.p-card :deep(.p-card-footer) {
+  padding-top: 0;
+}
+.highlight{
+  border: 2px solid rgba(182,202,209,1);
+  background: rgba(246,247,249,1);
 }
 </style>
diff --git a/libs/components/src/DacklHeaderBar.vue b/libs/components/src/DacklHeaderBar.vue
@@ -69,7 +69,7 @@ export default defineComponent({
             class="white-space-nowrap overflow-hidden text-overflow-ellipsis hidden sm:inline w-5 md:w-auto"
             >{{ name }}</span
           >
-          <Avatar v-if="isLoggedIn" shape="circle" class="border-1">
+          <Avatar v-if="isLoggedIn" shape="circle" class="border-1 mx-2">
             <img v-if="img" :src="img" />
             <i v-else class="pi pi-user" />
           </Avatar>