diff --git a/CHANGELOG.md b/CHANGELOG.md index 194b84b..87bdeb5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,10 @@ # bedrock-vue-wallet ChangeLog +## 29.4.2 - 2024-10-xx + +### Changed +- Refactor render method fetch to use Promise.all. + ## 29.4.1 - 2024-10-15 ### Fixed diff --git a/components/CredentialDetailsViews.vue b/components/CredentialDetailsViews.vue index 54c61cf..d456842 100644 --- a/components/CredentialDetailsViews.vue +++ b/components/CredentialDetailsViews.vue @@ -134,8 +134,9 @@ /*! * Copyright (c) 2015-2024 Digital Bazaar, Inc. All rights reserved. */ -import {onBeforeMount, onMounted, reactive, ref} from 'vue'; +import {onMounted, reactive, ref} from 'vue'; import {date} from 'quasar'; +import {httpClient} from '@digitalbazaar/http-client'; import Mustache from 'mustache'; const {formatDate} = date; @@ -181,6 +182,7 @@ export default { } else if(showDisplays.value) { tab.value = 'displays'; } + getDisplaysFromRenderMethod(); }); // Constants @@ -197,37 +199,28 @@ export default { backgroundColor: 'gray', }; - // Fetch style, overrides, & highlights before component mounts - onBeforeMount(() => { - getDisplaysFromRenderMethod(); - }); - // Extract and parse images from credential's render method property async function getDisplaysFromRenderMethod() { if(props.credential?.renderMethod?.length) { - props.credential.renderMethod.forEach(async rm => { - if(supportedRenderMethods.includes(rm.type)) { - if(rm.type === 'SvgRenderingTemplate2023') { - useRenderTemplate2023(rm.id); - } else if(rm.type === 'SvgRenderingTemplate2024') { - const {template, url} = rm; - const values = props.credential; - await useRenderTemplate2024(template, url, values); + const imageValues = await Promise.all( + props.credential.renderMethod.map(async rm => { + let imageValue; + if(supportedRenderMethods.includes(rm.type)) { + if(rm.type === 'SvgRenderingTemplate2023') { + imageValue = useRenderTemplate2023(rm.id); + } else if(rm.type === 'SvgRenderingTemplate2024') { + const {template, url} = rm; + const values = props.credential; + imageValue = await useRenderTemplate2024(template, url, values); + } } - } - }); + return imageValue; + }) + ); + imageValues.filter(Boolean).forEach(v => credentialImages.push(v)); } } - /** - * Uses id for src value in image. - * - * @param {string} srcValue - Data URI. - */ - function useRenderTemplate2023(srcValue) { - credentialImages.push(srcValue); - } - /* * Functions used to format Mustache template values * See: https://github.com/janl/mustache.js#functions @@ -242,34 +235,46 @@ export default { } }; + /** + * Uses id for src value in image. + * + * @param {string} srcValue - Data URI. + * @returns {string} Src value. + */ + function useRenderTemplate2023(srcValue) { + return srcValue; + } + /** * Load svg from url or template then hydrate with credentialSubject values. * * @param {string} template - Svg. * @param {string} url - Url. * @param {object} values - Credential.credentialSubject. + * @returns {string} Src value. */ async function useRenderTemplate2024(template, url, values) { - // Example credential renderMethod property: - // "renderMethod": [ - // { - // "name": "Landscape", - // "mediaQuery": "@media (orientation: landscape)", - // "type": "SvgRenderingTemplate2024", - // "template": "", - // "url": "https://credentialTemplates.dev/example.svg", - // "mediaType": "image/svg+xml", - // } - // ] - // + /* + * Example credential renderMethod property: + * "renderMethod": [ + * { + * "name": "Landscape", + * "mediaQuery": "@media (orientation: landscape)", + * "type": "SvgRenderingTemplate2024", + * "template": "", + * "url": "https://credentialTemplates.dev/example.svg", + * "mediaType": "image/svg+xml", + * } + * ] + */ if(!template || url) { - const resp = await fetch(url); - template = await resp.text(); + const headers = {headers: {accept: 'application/json'}}; + const {data} = await httpClient.get(url, {headers}); + template = await data.text(); } - const rv = Mustache.render(template, {...values, ...formattingFunctions}); const image = `data:image/svg+xml;base64,${btoa(rv)}`; - credentialImages.push(image); + return image; } return {