Merge pull request #22 from fair4health/v1.0.1

V1.0.1
fair4health · Mar 10, 2021 · 9a4dca7 · 9a4dca7
2 parents d3cee3f + ec08e37
commit 9a4dca7
Show file tree

Hide file tree

Showing 23 changed files with 467 additions and 315 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "fair4health-data-privacy-tool",
     "productName": "FAIR4Health Privacy Tool",
-    "version": "1.0.0",
+    "version": "1.0.1",
     "private": true,
     "author": "SRDC Corporation <[email protected]>",
     "description": "FAIR4Health | Data Privacy Tool",

diff --git a/src/assets/f4h-512x512.png b/src/assets/f4h-512x512.png
diff --git a/src/common/utils/fhir-util.ts b/src/common/utils/fhir-util.ts
@@ -139,4 +139,12 @@ export class FHIRUtils {
         }
     }
 
+    static sortProfiles (profiles: string[]) {
+        return profiles?.sort((p1, p2) => {
+            const p1Name = p1.split('/').pop()!.toLowerCase()
+            const p2Name = p2.split('/').pop()!.toLowerCase()
+            return (p1Name > p2Name) ? 1 : ((p2Name > p1Name) ? -1 : 0)
+        }) || []
+    }
+
 }
diff --git a/src/components/AlgorithmConfigDialog.vue b/src/components/AlgorithmConfigDialog.vue
@@ -32,7 +32,7 @@
 				</template>
 			</q-select>
 			<q-item-label class="text-weight-bold q-mt-lg q-mb-xs">
-				<span class="text-info"><q-icon name="fas fa-info" size="xs" class="q-mr-xs q-mb-sm" /> {{getInfoText()}} </span>
+				<span class="text-primary"><q-icon name="fas fa-info" size="xs" class="q-mr-xs q-mb-sm" /> {{getInfoText()}} </span>
 			</q-item-label>
 		</q-card-section>
 		<q-card-section v-if="isSensitive() && getAlgorithmName() !== envAlgorithms.REPLACE.name" class="q-pt-none">

diff --git a/src/components/AttributeSelector.vue b/src/components/AttributeSelector.vue
@@ -1,22 +1,24 @@
 <template>
 	<div>
-		<q-toolbar class="bg-grey-4">
-			<q-toolbar-title class="text-grey-8"> {{ $t('COMMON.ATTRIBUTE_SELECTOR') }} </q-toolbar-title>
-			<q-btn unelevated :label="$t('BUTTONS.SELECT')" color="primary" @click="selectSavedConfigurations" icon="fas fa-archive" no-caps class="q-mr-sm" >
-				<q-tooltip anchor="bottom middle" self="top middle"> {{ $t('TOOLTIPS.SELECT_SAVED_CONFIGURATION') }} </q-tooltip>
-			</q-btn>
-			<q-btn unelevated :label="$t('BUTTONS.IMPORT')" color="primary" @click="importSavedConfigurations" icon="fas fa-file-import" no-caps >
-				<q-tooltip anchor="bottom middle" self="top middle"> {{ $t('TOOLTIPS.IMPORT_CONFIGURATION') }} </q-tooltip>
-			</q-btn>
+		<q-toolbar class="bg-grey-4 top-fix-column">
+			<q-btn unelevated :label="$t('BUTTONS.BACK')" color="primary" icon="chevron_left" @click="previousStep" no-caps />
+			<q-toolbar-title class="text-grey-8" align="center">
+				<q-icon name="fas fa-database" color="primary" class="q-px-md" />
+				{{ $t('COMMON.ATTRIBUTE_SELECTOR') }}
+			</q-toolbar-title>
+			<div class="q-gutter-md">
+				<q-btn unelevated :label="$t('BUTTONS.SELECT')" color="white" text-color="primary" @click="selectSavedConfigurations" icon="fas fa-archive" no-caps>
+					<q-tooltip anchor="bottom middle" self="top middle"> {{ $t('TOOLTIPS.SELECT_SAVED_CONFIGURATION') }} </q-tooltip>
+				</q-btn>
+				<q-btn unelevated :label="$t('BUTTONS.IMPORT')" color="white" text-color="primary" @click="importSavedConfigurations" icon="fas fa-file-import" no-caps>
+					<q-tooltip anchor="bottom middle" self="top middle"> {{ $t('TOOLTIPS.IMPORT_CONFIGURATION') }} </q-tooltip>
+				</q-btn>
+				<q-btn unelevated :label="$t('BUTTONS.NEXT')" icon-right="chevron_right" color="primary" @click="nextStep" no-caps />
+			</div>
 		</q-toolbar>
 
 		<div class="q-ma-sm">
 			<FhirAttributeTable :key="fhirAttributeTableKey" />
-			<div class="row q-ma-md">
-				<q-btn unelevated :label="$t('BUTTONS.BACK')" color="primary" icon="chevron_left" @click="previousStep" no-caps />
-				<q-space />
-				<q-btn unelevated :label="$t('BUTTONS.NEXT')" icon-right="chevron_right" color="primary" @click="nextStep" no-caps />
-			</div>
 		</div>
 
 		<q-dialog v-model="selectDialog">
@@ -158,4 +160,8 @@ export default class AttributeSelector extends Vue {
         width: 500px
         max-width: 80vw
     }
+		.fhir-element-text:hover {
+				text-decoration: underline
+				cursor: pointer
+		}
 </style>
diff --git a/src/components/ConfigurationManager.vue b/src/components/ConfigurationManager.vue
@@ -1,12 +1,23 @@
 <template>
     <div>
-        <q-toolbar class="bg-grey-4">
-            <q-toolbar-title class="text-grey-8"> {{ $t('COMMON.CONFIGURATION_MANAGER') }} </q-toolbar-title>
+        <q-toolbar class="bg-grey-4 top-fix-column">
+            <q-btn unelevated :label="$t('BUTTONS.BACK')" color="primary" icon="chevron_left" @click="previousStep" no-caps />
+            <q-toolbar-title class="text-grey-8" align="center">
+                <q-icon name="fas fa-sliders-h" color="primary" class="q-px-md" />
+                {{ $t('COMMON.CONFIGURATION_MANAGER') }}
+            </q-toolbar-title>
+            <q-btn unelevated :label="$t('BUTTONS.NEXT')" icon-right="chevron_right" color="primary" @click="nextStep" no-caps />
         </q-toolbar>
 
         <div class="q-ma-sm">
-            <q-item-label class="text-weight-bold q-mt-lg q-mb-lg">
-                <span class="text-info"><q-icon name="fas fa-info" size="xs" class="q-mr-xs" /> {{ $t('INFO.CONFIGURATION_MANAGER_INFO') }} </span>
+            <q-item-label class="text-weight-bold q-my-lg">
+                <q-banner inline-actions rounded v-show="showBanner" class="bg-primary text-white">
+                    <q-icon name="fas fa-info" size="xs" class="q-mr-xs" />
+                    {{ $t('INFO.CONFIGURATION_MANAGER_INFO') }}
+                    <template v-slot:action>
+                        <q-btn flat color="white" :label="$t('BUTTONS.OK')" @click="setShowBanner(false)" />
+                    </template>
+                </q-banner>
             </q-item-label>
             <q-card flat class="bg-white">
                 <q-card-section class="row q-col-gutter-sm">
@@ -34,14 +45,16 @@
                             <span><q-icon name="far fa-file-alt" size="xs" color="primary" class="q-mr-xs" /> {{ $t('LABELS.PROFILES') }} </span>
                         </q-item-label>
                         <q-separator spaced />
-                        <q-select clearable outlined dense v-model="currentFHIRProf" :options="resourceProfileMappings[currentFHIRRes]" :label="$t('LABELS.PROFILES')" :disable="!this.resourceProfileMappings[this.currentFHIRRes] || !resourceProfileMappings[currentFHIRRes].length">
+                        <q-select clearable outlined dense options-dense v-model="currentFHIRProf" :options="sortProfiles(resourceProfileMappings[currentFHIRRes])"
+                                  :disable="!this.resourceProfileMappings[this.currentFHIRRes] || !resourceProfileMappings[currentFHIRRes].length"
+                                  :option-label="item => item.split('/').pop()" :label="$t('LABELS.PROFILES')">
                             <template v-slot:option="scope">
                                 <q-item v-bind="scope.itemProps" v-on="scope.itemEvents">
                                     <q-item-section avatar>
                                         <q-icon name="fas fa-file-alt" size="xs" />
                                     </q-item-section>
                                     <q-item-section>
-                                        <q-item-label v-html="scope.opt" />
+                                        <q-item-label v-html="scope.opt.split('/').pop()" />
                                     </q-item-section>
                                 </q-item>
                             </template>
@@ -69,11 +82,6 @@
                     </q-tab-panels>
                 </q-card-section>
             </q-card>
-            <div class="row q-ma-md">
-                <q-btn unelevated :label="$t('BUTTONS.BACK')" color="primary" icon="chevron_left" @click="previousStep" no-caps />
-                <q-space />
-                <q-btn unelevated :label="$t('BUTTONS.NEXT')" icon-right="chevron_right" color="primary" @click="nextStep" no-caps />
-            </div>
         </div>
     </div>
 </template>
@@ -82,6 +90,7 @@
 import {Component, Vue, Watch} from 'vue-property-decorator'
 import Loading from '@/components/Loading.vue';
 import {VuexStoreUtil as types} from '@/common/utils/vuex-store-util';
+import {FHIRUtils} from '@/common/utils/fhir-util'
 
 @Component({
     components: {
@@ -101,6 +110,7 @@ export default class ConfigurationManager extends Vue {
     private loadingFhir: boolean = false;
     private fhirResourceOptions: string[] = [];
     private tab: string = 'quasi';
+    private showBanner: boolean = true;
 
     get fhirResourceList (): string[] { return this.$store.getters[types.Fhir.RESOURCE_LIST] }
 
@@ -115,6 +125,12 @@ export default class ConfigurationManager extends Vue {
 
     created () {
         this.getElements();
+        // Set showBanner
+        if (sessionStorage.getItem('showBannerConfigurationManager')) {
+            this.showBanner = sessionStorage.getItem('showBannerConfigurationManager') === 'true'
+        } else {
+            this.showBanner = true;
+        }
     }
 
     @Watch('currentFHIRRes')
@@ -130,8 +146,21 @@ export default class ConfigurationManager extends Vue {
         this.getElements();
     }
 
+    setShowBanner (value: boolean) {
+        sessionStorage.setItem('showBannerConfigurationManager', String(value))
+        this.showBanner = value
+    }
+
     getElements () {
-        this.$store.dispatch(types.Fhir.GET_ELEMENTS, !this.currentFHIRProf ? this.currentFHIRRes : this.currentFHIRProf)
+        const params = {parameterName: '', profile: ''}
+        if (this.currentFHIRProf) {
+            params.parameterName = 'url'
+            params.profile = this.currentFHIRProf
+        } else {
+            params.parameterName = '_id'
+            params.profile = this.currentFHIRRes
+        }
+        this.$store.dispatch(types.Fhir.GET_ELEMENTS, params)
             .then(() => {
                 this.loadingFhir = false;
                 this.$forceUpdate();
@@ -162,6 +191,10 @@ export default class ConfigurationManager extends Vue {
         this.$store.commit(types.DECREMENT_STEP)
     }
 
+    sortProfiles (profiles: string[]) {
+        return FHIRUtils.sortProfiles(profiles)
+    }
+
 }
 
 </script>

diff --git a/src/components/Deidentifier.vue b/src/components/Deidentifier.vue
@@ -1,23 +1,35 @@
 <template>
 	<div>
-		<q-toolbar class="bg-grey-4">
-			<q-toolbar-title class="text-grey-8"> {{ $t('COMMON.DEIDENTIFIER') }} </q-toolbar-title>
-			<q-btn unelevated label="Save" color="primary" @click="saveConfigurations" icon="save" no-caps class="q-mr-sm" >
-				<q-tooltip anchor="bottom middle" self="top middle"> {{ $t('TOOLTIPS.SAVE_CONFIGURATION') }} </q-tooltip>
-			</q-btn>
-			<q-btn unelevated :label="$t('BUTTONS.EXPORT')" color="primary" @click="exportConfigurations" icon="publish" no-caps >
-				<q-tooltip anchor="bottom middle" self="top middle"> {{ $t('TOOLTIPS.EXPORT_CONFIGURATION') }} </q-tooltip>
-			</q-btn>
+		<q-toolbar class="bg-grey-4 top-fix-column">
+			<q-btn unelevated :label="$t('BUTTONS.BACK')" color="primary" icon="chevron_left" @click="previousStep" no-caps />
+			<q-toolbar-title class="text-grey-8" align="center">
+				<q-icon name="fas fa-user-secret" color="primary" class="q-px-md" />
+				{{ $t('COMMON.DEIDENTIFIER') }}
+			</q-toolbar-title>
+			<div class="q-gutter-md">
+				<q-btn unelevated :label="$t('BUTTONS.SAVE')" color="white" text-color="primary" @click="saveConfigurations" icon="save" no-caps >
+					<q-tooltip anchor="bottom middle" self="top middle"> {{ $t('TOOLTIPS.SAVE_CONFIGURATION') }} </q-tooltip>
+				</q-btn>
+				<q-btn unelevated :label="$t('BUTTONS.EXPORT')" color="white" text-color="primary" @click="exportConfigurations" icon="publish" no-caps >
+					<q-tooltip anchor="bottom middle" self="top middle"> {{ $t('TOOLTIPS.EXPORT_CONFIGURATION') }} </q-tooltip>
+				</q-btn>
+			</div>
 		</q-toolbar>
 
 		<div class="q-ma-sm">
-			<q-item-label class="text-weight-bold q-mt-lg q-mb-lg">
-				<span class="text-info"><q-icon name="fas fa-info" size="xs" class="q-mr-xs" /> {{ $t('INFO.DEIDENTIFIER_INFO') }} </span>
+			<q-item-label class="text-weight-bold q-my-lg">
+				<q-banner inline-actions rounded v-show="showBanner" class="bg-primary text-white">
+					<q-icon name="fas fa-info" size="xs" class="q-mr-xs" />
+					{{ $t('INFO.DEIDENTIFIER_INFO') }}
+					<template v-slot:action>
+						<q-btn flat color="white" :label="$t('BUTTONS.OK')" @click="setShowBanner(false)" />
+					</template>
+				</q-banner>
 			</q-item-label>
-			<q-card flat bordered class="q-ma-sm">
-				<q-card-section>
+			<q-card flat class="bg-white">
+				<q-card-section class="q-col-gutter-sm">
 					<q-table flat binary-state-sort :title="$t('LABELS.RESOURCES')" :data="mappingList" :columns="columns" row-key="resource"
-					         :rows-per-page-options="[0]" :pagination.sync="pagination" class="sticky-header-table" selection="multiple"
+					         :rows-per-page-options="[0]" :pagination.sync="pagination" class="sticky-header-table col-12" selection="multiple"
                              table-class="resources-table" :loading="loading" color="primary" :selected.sync="selectedResources"
 					>
 						<template v-slot:header-cell="props">
@@ -92,15 +104,15 @@
 									</q-chip>
 								</q-td>
 								<q-td key="final" :props="props">
-									<q-chip v-if="isInProgress(props.row.status)" square class="bg-secondary text-white">
+									<q-chip v-if="isInProgress(props.row.status)" square class="bg-positive text-white">
 										<q-spinner color="white" />
 									</q-chip>
 									<q-chip v-else-if="(isDone(props.row.status) || isError(props.row.status)
 											|| isWarning(props.row.status)) && props.row.entries.length"
-									        square class="bg-secondary text-white" clickable @click="showJSONResources(props.row.resource, false)">
+									        square class="bg-positive text-white" clickable @click="showJSONResources(props.row.resource, false)">
 										{{ props.row.entries.length }}
 									</q-chip>
-									<q-chip v-else square class="bg-secondary text-white"> - </q-chip>
+									<q-chip v-else square class="bg-positive text-white"> - </q-chip>
 								</q-td>
 								<q-td key="restricted" :props="props">
 									<q-chip v-if="isInProgress(props.row.status)" square class="bg-negative text-white">
@@ -134,14 +146,14 @@
 													<q-list>
 														<q-item>
 															<div class="col-2">
-																<q-item-label class="text-weight-bold text-secondary q-mt-sm">
+																<q-item-label class="text-weight-bold text-positive q-mt-sm">
 																	{{ $t('LABELS.INFORMATION_LOSS') }}
 																</q-item-label>
 															</div>
 															<div class="col-3">
-																<q-linear-progress rounded size="30px" :value="props.row.informationLoss" color="secondary">
+																<q-linear-progress rounded size="30px" :value="props.row.informationLoss" color="positive">
 																	<div class="absolute-full flex flex-center">
-																		<q-badge text-color="white" color="secondary">
+																		<q-badge text-color="white" color="positive">
 																			{{progressLabel(props.row.informationLoss)}} <q-icon size="10px" class="q-ml-xs" name="fas fa-percent" color="white" />
 																		</q-badge>
 																	</div>
@@ -191,7 +203,7 @@
 					<div class="row content-end q-gutter-sm">
 						<q-space />
 						<q-btn v-if="isSuccess(deidentificationStatus) || isError(deidentificationStatus)"
-						       :disable="disableSave()" label="Save" color="secondary" icon="save"
+						       :disable="disableSave()" label="Save" color="positive" icon="save"
 						       class="q-mt-lg" @click="saveDialog = true" no-caps>
 							<q-tooltip anchor="bottom middle" self="top middle"> {{ $t('TOOLTIPS.SAVE_DEIDENTIFIED_DATA') }} </q-tooltip>
 						</q-btn>
@@ -209,10 +221,6 @@
 
 				</q-card-section>
 			</q-card>
-
-			<div class="row q-ma-md">
-				<q-btn unelevated :label="$t('BUTTONS.BACK')" color="primary" icon="chevron_left" @click="previousStep" no-caps />
-			</div>
 		</div>
 
 		<q-dialog v-model="saveDialog">
@@ -298,7 +306,7 @@
 				<q-separator />
 				<q-card-section v-if="selectedResource && deidentificationResults[selectedResource]" class="scroll json-resources-card-section">
 					<q-item-label class="text-weight-bold q-mb-lg q-mt-sm">
-						<span class="text-info"><q-icon name="fas fa-info" size="xs" class="q-mr-xs" />
+						<span class="text-primary"><q-icon name="fas fa-info" size="xs" class="q-mr-xs" />
 							<template v-if="isRestricted"> {{ $t('INFO.RESTRICTED_JSONS') }} </template>
 							<template v-else> {{ $t('INFO.DEIDENTIFIED_JSONS') }} </template>
 						</span>
@@ -369,6 +377,7 @@ export default class Deidentifier extends Mixins(StatusMixin) {
     private currentPage: number = 1;
     private maxPage: number = 1;
     private isRestricted: boolean = true;
+    private showBanner: boolean = true;
 
     get attributeMappings (): any { return this.$store.getters[types.Fhir.ATTRIBUTE_MAPPINGS] }
     set attributeMappings (value) { this.$store.commit(types.Fhir.SET_ATTRIBUTE_MAPPINGS, value) }
@@ -415,6 +424,18 @@ export default class Deidentifier extends Mixins(StatusMixin) {
         } else {
             this.deidentificationStatus = Status.PENDING;
         }
+
+        // Set showBanner
+        if (sessionStorage.getItem('showBannerDeidentifier')) {
+            this.showBanner = sessionStorage.getItem('showBannerDeidentifier') === 'true';
+        } else {
+            this.showBanner = true;
+        }
+    }
+
+    setShowBanner (value: boolean) {
+        sessionStorage.setItem('showBannerDeidentifier', String(value));
+        this.showBanner = value;
     }
 
     fetchAllData (groupedByResources): Promise<any> {

diff --git a/src/components/OnFHIRConfig.vue b/src/components/OnFHIRConfig.vue
@@ -1,13 +1,13 @@
 <template>
-	<q-card flat class="col-6">
+	<q-card flat class="col-xs-12 col-sm-12 col-md-6">
 		<q-card-section>
-			<q-item-label class="text-weight-bold q-mb-lg q-mt-sm">
-				<span class="text-info"><q-icon name="fas fa-info" size="xs" class="q-mr-xs" />
+			<q-item-label class="text-weight-bold q-mb-lg">
+				<span class="text-primary"><q-icon name="fas fa-info" size="xs" class="q-mr-xs" />
 					<template v-if="isSource"> {{ $t('LABELS.PROVIDE_FHIR_URL_TO_DEIDENTIFY') }} </template>
 					<template v-else> {{ $t('LABELS.PROVIDE_FHIR_URL_TO_SAVE') }} </template>
 				</span>
 			</q-item-label>
-			<q-input filled type="url" class="col-10" v-model="onfhirUrl" color="accent"
+			<q-input outlined square dense type="url" class="col-10" v-model="onfhirUrl" color="primary"
 			         @input="changeVerificationStatus(Status.PENDING)"
 			         :placeholder="$t('LABELS.FHIR_REPOSITORY_URL')"
 			         :disable="(isSource && isInProgress(fhirSourceVerificationStatus)) || (!isSource && isInProgress(fhirTargetVerificationStatus))"

diff --git a/src/components/OnFHIRVerifier.vue b/src/components/OnFHIRVerifier.vue
@@ -1,9 +1,7 @@
 <template>
-	<div class="q-mt-xl">
-		<div class="q-py-xl">
-			<div class="row justify-center">
-				<OnFHIRConfig />
-			</div>
+	<div class="q-py-xl">
+		<div class="row justify-center q-mx-lg">
+			<OnFHIRConfig />
 		</div>
 	</div>
 </template>