Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: refactored QuickView in minor components to support setup throu…
…gh config file
- Loading branch information
Matteo Biasi
committed
Feb 4, 2023
1 parent
fd631c8
commit 9f7e625
Showing
11 changed files
with
668 additions
and
375 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
103 changes: 103 additions & 0 deletions
103
databrowser/src/components/quickview/QuickViewContactsCard.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,103 @@ | ||
<template> | ||
<QuickViewCardOverview | ||
:title="t('datasets.quickView.contact')" | ||
:sections="contactSections" | ||
/> | ||
</template> | ||
<script setup lang="ts"> | ||
import { computed, defineProps, withDefaults } from 'vue'; | ||
import { useI18n } from 'vue-i18n'; | ||
import { getTextValue } from './QuickViewUtils'; | ||
import QuickViewCardOverview from './QuickViewCardOverview.vue'; | ||
const { t } = useI18n(); | ||
const props = withDefaults( | ||
defineProps<{ | ||
companyName?: string; | ||
givenName?: string; | ||
surname?: string; | ||
address?: string; | ||
city?: string; | ||
zipCode?: string; | ||
countryName?: string; | ||
email?: string; | ||
phoneNumber?: string; | ||
url?: string; | ||
}>(), | ||
{ | ||
companyName: '', | ||
givenName: '', | ||
surname: '', | ||
address: '', | ||
city: '', | ||
zipCode: '', | ||
countryName: '', | ||
email: '', | ||
phoneNumber: '', | ||
url: '', | ||
} | ||
); | ||
const contactSections = computed(() => { | ||
return [ | ||
{ | ||
icon: 'IconDocument', | ||
content: [ | ||
{ | ||
title: t('datasets.quickView.nameCompanyName'), | ||
text: getTextValue(props.companyName), | ||
}, | ||
{ | ||
title: t('datasets.quickView.firstName'), | ||
text: getTextValue(props.givenName), | ||
}, | ||
{ | ||
title: t('datasets.quickView.surname'), | ||
text: getTextValue(props.surname), | ||
}, | ||
], | ||
}, | ||
{ | ||
icon: 'IconBuilding', | ||
content: [ | ||
{ | ||
title: t('datasets.quickView.streetAndNumber'), | ||
text: getTextValue(props.address), | ||
}, | ||
{ | ||
title: t('datasets.quickView.city'), | ||
text: getTextValue(props.city), | ||
}, | ||
{ | ||
title: t('datasets.quickView.zip'), | ||
text: getTextValue(props.zipCode), | ||
}, | ||
{ | ||
title: t('datasets.quickView.country'), | ||
text: getTextValue(props.countryName), | ||
}, | ||
], | ||
}, | ||
{ | ||
icon: 'IconPhonebook', | ||
content: [ | ||
{ | ||
title: t('datasets.quickView.email'), | ||
text: getTextValue(props.email), | ||
}, | ||
{ | ||
title: t('datasets.quickView.phoneNumber'), | ||
text: getTextValue(props.phoneNumber), | ||
}, | ||
{ | ||
title: t('datasets.quickView.webUrl'), | ||
text: getTextValue(props.url), | ||
}, | ||
], | ||
}, | ||
]; | ||
}); | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
<template> | ||
<QuickViewCardOverview | ||
:title="t('datasets.quickView.locationOnMap')" | ||
cta-icon="IconExpand" | ||
content-has-no-padding | ||
:sections="[]" | ||
@cta-click="openMapFullscreen()" | ||
> | ||
<template #content> | ||
<MapBase | ||
ref="mapComponent" | ||
:key="map.center.length" | ||
:center="map.center" | ||
:markers="map.markers" | ||
/> | ||
</template> | ||
</QuickViewCardOverview> | ||
</template> | ||
<script setup lang="ts"> | ||
import { computed, defineProps, withDefaults, ref } from 'vue'; | ||
import { useI18n } from 'vue-i18n'; | ||
import QuickViewCardOverview from './QuickViewCardOverview.vue'; | ||
import MapBase from '../../components/map/MapBase.vue'; | ||
const { t } = useI18n(); | ||
const mapComponent = ref(null); | ||
const props = withDefaults( | ||
defineProps<{ | ||
gpsInfo: Array<any>; | ||
}>(), | ||
{ | ||
gpsInfo: () => [], | ||
} | ||
); | ||
const openMapFullscreen = () => { | ||
const fullscreenButton = document.querySelector( | ||
'.ol-full-screen > button' | ||
) as HTMLElement; | ||
fullscreenButton!.click(); | ||
}; | ||
const map = computed(() => { | ||
if (!props.gpsInfo) { | ||
return { | ||
center: [], | ||
markers: [], | ||
}; | ||
} | ||
const { Longitude, Latitude } = props.gpsInfo[0]; | ||
const mapObj = { | ||
center: [Longitude, Latitude], | ||
markers: [ | ||
{ | ||
position: { | ||
lat: Latitude, | ||
lng: Longitude, | ||
}, | ||
}, | ||
], | ||
}; | ||
return mapObj; | ||
}); | ||
</script> |
124 changes: 124 additions & 0 deletions
124
databrowser/src/components/quickview/QuickViewOpeningHoursView.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,124 @@ | ||
<template> | ||
<QuickViewCardOverview | ||
:title="t('datasets.quickView.openingHours')" | ||
:sections=" | ||
operationScheduleSections.length | ||
? operationScheduleSections | ||
: [{ content: [{ text: '/' }] }] | ||
" | ||
/> | ||
</template> | ||
<script setup lang="ts"> | ||
import { computed, defineProps, withDefaults } from 'vue'; | ||
import { useI18n } from 'vue-i18n'; | ||
import { getValueOfLocale, getTextValue } from './QuickViewUtils'; | ||
import QuickViewCardOverview from './QuickViewCardOverview.vue'; | ||
const { t, locale } = useI18n(); | ||
const currentLocale = locale.value; | ||
const props = withDefaults( | ||
defineProps<{ | ||
scheduleData?: Array<any>; | ||
}>(), | ||
{ | ||
scheduleData: () => [], | ||
} | ||
); | ||
const operationSchedule = computed(() => { | ||
let foundHours = false; | ||
const timing = props.scheduleData ? [...props.scheduleData] : []; | ||
const days = [ | ||
'Monday', | ||
'Tuesday', | ||
'Wednesday', | ||
'Thursday', | ||
'Friday', | ||
'Saturday', | ||
'Sunday', | ||
]; | ||
const parsedData = []; | ||
for (const time of timing) { | ||
const operationScheduleTime = []; | ||
for (const schedule of time?.OperationScheduleTime || []) { | ||
foundHours = true; | ||
const daysHours = []; | ||
const [startHour, startMinute] = schedule.Start.split(':'); | ||
const [endHour, endMinute] = schedule.End.split(':'); | ||
for (const d of days) { | ||
daysHours.push({ | ||
Start: `${startHour}:${startMinute}`, | ||
End: `${endHour}:${endMinute}`, | ||
State: schedule.State, | ||
Timecode: schedule.Timecode, | ||
Day: d.slice(0, 3).toUpperCase(), | ||
Open: schedule[d], | ||
}); | ||
} | ||
operationScheduleTime.push(daysHours); | ||
} | ||
time.OperationScheduleTime = operationScheduleTime; | ||
parsedData.push({ | ||
...time, | ||
OperationScheduleTime: operationScheduleTime, | ||
TimePeriodRange: getTimePeriodRange(time.Start, time.Stop), | ||
}); | ||
} | ||
return foundHours ? parsedData : null; | ||
}); | ||
const operationScheduleSections = computed(() => { | ||
if (!operationSchedule.value) { | ||
return []; | ||
} | ||
const sections = []; | ||
for (const schedule of operationSchedule.value) { | ||
sections.push({ | ||
icon: 'IconClock', | ||
content: [ | ||
{ | ||
title: getTextValue( | ||
getValueOfLocale(currentLocale, schedule.OperationscheduleName) | ||
), | ||
text: schedule.TimePeriodRange, | ||
}, | ||
], | ||
fullwidthContent: [ | ||
{ operationScheduleTime: schedule.OperationScheduleTime }, | ||
], | ||
}); | ||
} | ||
return sections; | ||
}); | ||
const getTimePeriodRange = (start: string, end: string) => { | ||
const [yearStart, , dayStart] = start.split('T')[0].split('-'); | ||
const [yearEnd, , dayEnd] = end.split('T')[0].split('-'); | ||
const dateLocale = 'en-US'; | ||
const dateOptions = { | ||
month: 'long', | ||
}; | ||
const monthStart = new Date(start).toLocaleDateString( | ||
dateLocale, | ||
dateOptions | ||
); | ||
const monthEnd = new Date(end).toLocaleDateString(dateLocale, dateOptions); | ||
return `${parseInt(dayStart)}. ${monthStart}${ | ||
yearStart !== yearEnd ? ' ' + yearStart : '' | ||
} - ${parseInt(dayEnd)}. ${monthEnd} ${yearEnd}`; | ||
}; | ||
</script> |
88 changes: 88 additions & 0 deletions
88
databrowser/src/components/quickview/QuickViewRecordInfoView.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,88 @@ | ||
<template> | ||
<QuickViewCardOverview | ||
:title="t('datasets.quickView.recordInformation')" | ||
:sections="recordInformationSections" | ||
/> | ||
</template> | ||
<script setup lang="ts"> | ||
import { computed, defineProps, withDefaults } from 'vue'; | ||
import { useI18n } from 'vue-i18n'; | ||
import QuickViewCardOverview from './QuickViewCardOverview.vue'; | ||
const { t } = useI18n(); | ||
const props = withDefaults( | ||
defineProps<{ | ||
lastUpdate: string; | ||
active: boolean; | ||
odhActive: boolean; | ||
}>(), | ||
{ | ||
lastUpdate: '', | ||
active: false, | ||
odhActive: false, | ||
} | ||
); | ||
const recordInformationSections = computed(() => { | ||
const lastUpdate = props.lastUpdate; | ||
if (!lastUpdate) { | ||
return []; | ||
} | ||
const lastUpdateDate = new Date(lastUpdate).toISOString(); | ||
const [year, month, day] = lastUpdateDate.split('T')[0].split('-'); | ||
const isSourceActive = props.active; | ||
const isODHActive = props.odhActive; | ||
// FIXME: change based on dataset | ||
const isSuedtirolInfoActive = false; | ||
return [ | ||
{ | ||
icon: 'IconEditFilled', | ||
content: [ | ||
{ | ||
title: t('datasets.quickView.lastChanged'), | ||
text: `${day}.${month}.${year}`, | ||
}, | ||
], | ||
}, | ||
{ | ||
icon: 'IconServer', | ||
content: [ | ||
{ | ||
title: t('datasets.quickView.activeOnSource'), | ||
tag: getTagActiveInfoObject({ | ||
active: isSourceActive, | ||
}), | ||
}, | ||
{ | ||
title: t('datasets.quickView.activeOnODH'), | ||
tag: getTagActiveInfoObject({ | ||
active: isODHActive, | ||
}), | ||
}, | ||
{ | ||
title: t('datasets.quickView.suedtirolInfoActive'), | ||
tag: getTagActiveInfoObject({ | ||
active: isSuedtirolInfoActive, | ||
}), | ||
}, | ||
], | ||
}, | ||
]; | ||
}); | ||
const getTagActiveInfoObject = ({ active }) => { | ||
return { | ||
size: 'md', | ||
type: active ? 'blue' : 'red', | ||
text: active | ||
? t('datasets.quickView.active') | ||
: t('datasets.quickView.inactive'), | ||
hasDot: true, | ||
}; | ||
}; | ||
</script> |
Oops, something went wrong.