Merge pull request #26 from levante-framework/germany-consent

Consent forms (Germany) - Part 1
levante-framework · Sep 5, 2024 · ce7a06f · ce7a06f
2 parents ed5a7fd + ee4692c
commit ce7a06f
Show file tree

Hide file tree

Showing 10 changed files with 184 additions and 119 deletions.
diff --git a/src/components/ConsentModal.vue b/src/components/ConsentModal.vue
@@ -19,9 +19,11 @@ import { marked } from 'marked';
 import { useAuthStore } from '@/store/auth';
 import { useI18n } from 'vue-i18n';
 import _lowerCase from 'lodash/lowerCase';
+import { useRouter } from 'vue-router';
 
 const authStore = useAuthStore();
 const i18n = useI18n();
+const router = useRouter();
 
 const props = defineProps({
   consentText: { type: String, require: true, default: 'Text Here' },
@@ -44,20 +46,19 @@ onMounted(() => {
   const delayPromise = delay(1000);
   confirm.require({
     group: 'templating',
-    header: props.consentType.includes('-es')
-      ? `FORMULARIO DE ${_lowerCase(props.consentType).toUpperCase()}`
-      : `${_lowerCase(props.consentType).toUpperCase()} FORM`,
+    header: i18n.t(`consentModal.header`, props.consentType.toUpperCase()),
     icon: 'pi pi-question-circle',
-    acceptLabel: i18n.t('consentModal.acceptButton'),
-    acceptClass: 'bg-primary text-white border-none border-round p-2 hover:bg-red-900',
+    acceptLabel: i18n.t('consentModal.acceptButton', 'Accept'),
+    rejectLabel: i18n.t('consentModal.rejectButton', 'Reject'),
+    acceptClass: 'bg-green-600 text-white border-none border-round p-2 hover:bg-green-800',
     acceptIcon: 'pi pi-check mr-2',
+    rejectClass: 'bg-red-600 text-white border-none border-round p-2 hover:bg-red-800',
+    rejectIcon: 'pi pi-times mr-2',
     accept: async () => {
       toast.add({
         severity: 'info',
         summary: i18n.t('consentModal.toastHeader'),
-        detail: props.consentType.includes('-es')
-          ? `ESTADO DE ${_lowerCase(props.consentType).toUpperCase()} ACTUALIZADO`
-          : `${_lowerCase(props.consentType).toUpperCase()} STATUS UPDATED.`,
+        detail: i18n.t(`consentModal.${_lowerCase(props.consentType)}UpdatedStatus`),
         life: 3000,
       });
       emit('accepted');
@@ -67,6 +68,10 @@ onMounted(() => {
         emit('delayed');
       });
     },
+    reject: () => {
+      authStore.signOut();
+      router.push({ name: 'SignOut' });
+    },
   });
 });
 </script>
@@ -83,8 +88,22 @@ onMounted(() => {
   border-radius: 5px;
 }
 
-.confirm .p-confirm-dialog-reject {
-  display: none !important;
+/* .confirm .p-confirm-dialog-reject {
+  display: block !important;
+} */
+
+.p-dialog .p-dialog-content {
+  padding: 1rem;
+}
+
+.confirm .p-dialog-footer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.p-dialog .p-dialog-footer {
+  padding: 1rem;
 }
 
 .confirm .p-dialog-header-close {

diff --git a/src/components/ConsentPicker.vue b/src/components/ConsentPicker.vue
@@ -1,7 +1,7 @@
 <template>
   <PvPanel class="m-0 p-0 w-full" header="Select Consent and Assent Forms">
     <div class="card flex justify-content-center">
-      <div class="flex flex-wrap gap-3">
+      <div v-if="!noConsent" class="flex flex-wrap gap-3">
         <div class="flex align-items-center">
           <PvRadioButton
             v-model="decision"
@@ -31,7 +31,7 @@
     <div class="flex justify-content-center mt-2">
       <PvCheckbox v-model="noConsent" input-id="no-consent" class="flex" value="noConsent" />
       <label class="ml-2 flex text-center" for="no-consent"
-        >This administration does not require consent or assent forms</label
+        >This administration does not require consent {{ isLevante ? '' : 'or assent' }} forms</label
       >
     </div>
     <div class="flex flex-row">
@@ -172,16 +172,18 @@
           :placeholder="props.legal?.consent[0]?.fileName || 'Select a Consent Form'"
           @change="updateConsent"
         />
-        <h3 class="pt-3">Select an Assent Form</h3>
-        <PvDropdown
-          v-model="selectedAssent"
-          :options="listOfDocs.assent"
-          option-label="fileName"
-          style="width: 70%"
-          :placeholder="props.legal?.assent[0]?.fileName || 'Select an Assent Form'"
-          @change="updateAssent"
-        />
-        <div div class="hidden">
+        <div v-if="!isLevante">
+          <h3 class="pt-3">Select an Assent Form</h3>
+          <PvDropdown
+            v-model="selectedAssent"
+            :options="listOfDocs.assent"
+            option-label="fileName"
+            style="width: 70%"
+            :placeholder="props.legal?.assent[0]?.fileName || 'Select an Assent Form'"
+            @change="updateAssent"
+            />
+        </div>
+        <div class="hidden">
           <h3 class="mb-4 mt-5">Consent Amount and Expected Time</h3>
           <div class="flex flex-row">
             <div class="mr-1">
@@ -207,12 +209,14 @@
               <div style="width: 80%">
                 <p class="m-0">
                   <span class="font-bold">Name: </span>{{ result.consent[0]?.fileName }} <br />
-                  <span class="font-bold">Current Commit: </span>{{ result.consent[0]?.currentCommit }}
-                  <br />
-                  <span class="font-bold">GitHub Org: </span>{{ result.consent[0]?.gitHubOrg }} <br />
-                  <span class="font-bold">GitHub Repository: </span>{{ result.consent[0]?.gitHubRepository }}
-                  <br />
-                  <span class="font-bold">Last Updated: </span>{{ result.consent[0]?.lastUpdated }} <br />
+                  <div v-if="!isLevante">
+                    <span class="font-bold">Current Commit: </span>{{ result.consent[0]?.currentCommit }}
+                    <br />
+                    <span class="font-bold">GitHub Org: </span>{{ result.consent[0]?.gitHubOrg }} <br />
+                    <span class="font-bold">GitHub Repository: </span>{{ result.consent[0]?.gitHubRepository }}
+                    <br />
+                    <span class="font-bold">Last Updated: </span>{{ result.consent[0]?.lastUpdated }} <br />
+                  </div>
                 </p>
               </div>
               <div class="flex align-items-center justify-content-center">
@@ -229,30 +233,32 @@
           </div>
         </div>
         <div class="w-full mt-2">
-          <PvFieldset v-if="consents && consents.length > 0" legend="Assent">
-            <div class="flex flex-row w-full">
-              <div style="width: 80%">
-                <p class="m-0">
-                  <span class="font-bold">Name: </span>{{ result.assent[0]?.fileName }} <br />
-                  <span class="font-bold">Current Commit: </span>{{ result.assent[0]?.currentCommit }}
-                  <br />
-                  <span class="font-bold">GitHub Org: </span>{{ result.assent[0]?.gitHubOrg }} <br />
-                  <span class="font-bold">GitHub Repository: </span>{{ result.assent[0]?.gitHubRepository }}
-                  <br />
-                  <span class="font-bold">Last Updated: </span>{{ result.assent[0]?.lastUpdated }} <br />
-                </p>
-              </div>
-              <div class="flex align-items-center justify-content-center">
-                <PvButton
-                  class="border-circle w-6rem h-6rem m-2 surface-hover text-primary border-none font-bold flex align-items-center justify-content-center hover:text-100 hover:bg-primary"
-                  label="Show Assent"
-                  @click="seeConsent(result.assent[0])"
-                />
+          <div v-if="!isLevante">
+            <PvFieldset v-if="consents && consents.length > 0" legend="Assent">
+              <div class="flex flex-row w-full">
+                <div style="width: 80%">
+                  <p class="m-0">
+                    <span class="font-bold">Name: </span>{{ result.assent[0]?.fileName }} <br />
+                    <span class="font-bold">Current Commit: </span>{{ result.assent[0]?.currentCommit }}
+                    <br />
+                    <span class="font-bold">GitHub Org: </span>{{ result.assent[0]?.gitHubOrg }} <br />
+                    <span class="font-bold">GitHub Repository: </span>{{ result.assent[0]?.gitHubRepository }}
+                    <br />
+                    <span class="font-bold">Last Updated: </span>{{ result.assent[0]?.lastUpdated }} <br />
+                  </p>
+                </div>
+                <div class="flex align-items-center justify-content-center">
+                  <PvButton
+                    class="border-circle w-6rem h-6rem m-2 surface-hover text-primary border-none font-bold flex align-items-center justify-content-center hover:text-100 hover:bg-primary"
+                    label="Show Assent"
+                    @click="seeConsent(result.assent[0])"
+                  />
+                </div>
               </div>
+            </PvFieldset>
+            <div v-else>
+              <p>No assent available.</p>
             </div>
-          </PvFieldset>
-          <div v-else>
-            <p>No assent available.</p>
           </div>
         </div>
       </div>
@@ -279,6 +285,7 @@ import { useQuery } from '@tanstack/vue-query';
 import { useAuthStore } from '@/store/auth';
 import { marked } from 'marked';
 import _forEach from 'lodash/forEach';
+import { isLevante } from '@/helpers';
 
 const props = defineProps({
   legal: { type: Object, required: false, default: null },
@@ -380,6 +387,7 @@ onMounted(() => {
   }
 });
 
+
 watch(
   () => props.legal,
   // eslint-disable-next-line no-unused-vars
@@ -451,6 +459,7 @@ async function seeConsent(consent) {
   } else {
     consentDoc = await authStore.getLegalDoc(consent?.type.toLowerCase());
   }
+
   consentVersion.value = consentDoc.version;
   confirmText.value = marked(consentDoc.text);
   showConsent.value = true;
@@ -581,6 +590,7 @@ watch(noConsent, () => {
   }
 });
 </script>
+
 <style scoped>
 .p-checkbox-box.p-highlight {
   background-color: var(--primary-color);

diff --git a/src/components/CreateAdministration.vue b/src/components/CreateAdministration.vue
@@ -140,10 +140,10 @@
                 />
                 <label for="No">No</label>
               </span>
-              <small v-if="v$.sequential.$invalid && submitted" class="p-error mt-2"
+            </div>
+            <small v-if="v$.sequential.$invalid && submitted" class="p-error mt-2"
                 >Please specify sequential behavior.</small
               >
-            </div>
             <div v-if="!isLevante" class="mt-2 mb-2">
               <PvCheckbox v-model="isTestData" :binary="true" data-cy="checkbutton-test-data" input-id="isTestData" />
               <label for="isTestData" class="ml-2">Mark As <b>Test Administration</b></label>

diff --git a/src/components/LEVANTE/RegisterUsersInfo.vue b/src/components/LEVANTE/RegisterUsersInfo.vue
@@ -30,6 +30,7 @@
       id="example-image"
       src="https://storage.googleapis.com/road-dashboard/example_researcher_csv.png"
       alt="CSV upload example"
+      style="width: 100%; max-width: 600px; height: auto;"
     />
   </PvPanel>
 </template>
@@ -53,11 +54,6 @@
   }
 }
 
-#example-image {
-  width: 100%;
-  border-radius: 0.5rem;
-}
-
 .required {
   color: var(--bright-red);
 }