ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Update dynamic component handling for illustrations on split layout

This commit is contained in:
Ramon Wenger 2023-04-20 16:13:49 +02:00
parent f0ec622cb6
commit f7232ffa33
3 changed files with 28 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/src/helpers/app-flavor.constants.ts
View File

@ -20,7 +20,7 @@ export const defaultFlavorValues: FlavorValues = {
showInstrumentFilterSidebar: true, showInstrumentFilterSidebar: true,
showPortfolio: true, showPortfolio: true,
showEHB: true, showEHB: true,
helloIllustration: () => import('@/components/illustrations/HelloIllustration.vue'), helloIllustration: 'HelloIllustration',
}; };
export const myKvValues: FlavorValues = { export const myKvValues: FlavorValues = {
@ -43,18 +43,18 @@ export const myKvValues: FlavorValues = {
showInstrumentFilterSidebar: true, showInstrumentFilterSidebar: true,
showPortfolio: true, showPortfolio: true,
showEHB: false, showEHB: false,
helloIllustration: () => import('@/components/illustrations/HelloMyKVIllustration.vue'), helloIllustration: 'HelloMyKvIllustration',
}; };
export const dhfValues: FlavorValues = Object.assign({}, myKvValues, { export const dhfValues: FlavorValues = Object.assign({}, myKvValues, {
appFlavor: 'my-dhf', appFlavor: 'my-dhf',
appLogo: 'https://skillbox-my-detailhandel-dhf-prod.s3.eu-central-1.amazonaws.com/myDHF-logo.png', appLogo: 'https://skillbox-my-detailhandel-dhf-prod.s3.eu-central-1.amazonaws.com/myDHF-logo.png',
textAppName: 'myDHF', textAppName: 'myDHF',
helloIllustration: () => import('@/components/illustrations/HelloMyDHFIllustration.vue'), helloIllustration: 'HelloMyDHFIllustration',
}); });
export const dhaValues: FlavorValues = Object.assign({}, myKvValues, { export const dhaValues: FlavorValues = Object.assign({}, myKvValues, {
appFlavor: 'my-dha', appFlavor: 'my-dha',
appLogo: 'https://skillbox-my-detailhandel-dha-prod.s3.eu-central-1.amazonaws.com/myDHA-logo.png', appLogo: 'https://skillbox-my-detailhandel-dha-prod.s3.eu-central-1.amazonaws.com/myDHA-logo.png',
textAppName: 'myDHA', textAppName: 'myDHA',
helloIllustration: () => import('@/components/illustrations/HelloMyDHAIllustration.vue'), helloIllustration: 'HelloMyDHAIllustration',
}); });

2
client/src/helpers/types.ts
View File

@ -14,5 +14,5 @@ export interface FlavorValues {
showInstrumentFilterSidebar: boolean; showInstrumentFilterSidebar: boolean;
showPortfolio: boolean; showPortfolio: boolean;
showEHB: boolean; showEHB: boolean;
helloIllustration: () => Promise<any>; helloIllustration: string;
} }

32
client/src/layouts/SplitLayout.vue
View File

@ -9,32 +9,46 @@
</div> </div>
</template> </template>
<script> <script lang="ts">
import { defineAsyncComponent } from 'vue'; import { defineAsyncComponent } from 'vue';
import flavorValues from '@/helpers/app-flavor'; import flavorValues from '@/helpers/app-flavor';
const ContentsIllustration = defineAsyncComponent(() => const ContentsIllustration = defineAsyncComponent(() => import('@/components/illustrations/ContentsIllustration.vue'));
import('@/components/illustrations/ContentsIllustration.vue') const PortfolioIllustration = defineAsyncComponent(
() => import('@/components/illustrations/PortfolioIllustration.vue')
); );
const PortfolioIllustration = defineAsyncComponent(() => const RoomsIllustration = defineAsyncComponent(() => import('@/components/illustrations/RoomsIllustration.vue'));
import('@/components/illustrations/PortfolioIllustration.vue') const HelloIllustration = defineAsyncComponent(() => import('@/components/illustrations/HelloIllustration.vue'));
const HelloMyKVIllustration = defineAsyncComponent(
() => import('@/components/illustrations/HelloMyKVIllustration.vue')
); );
const RoomsIllustration = defineAsyncComponent(() => const HelloMyDHAIllustration = defineAsyncComponent(
import('@/components/illustrations/RoomsIllustration.vue') () => import('@/components/illustrations/HelloMyDHAIllustration.vue')
);
const HelloMyDHFIllustration = defineAsyncComponent(
() => import('@/components/illustrations/HelloMyDHFIllustration.vue')
); );
const Hello = flavorValues.helloIllustration; const Hello = flavorValues.helloIllustration;
console.log(Hello);
export default { export default {
components: { components: {
contents: ContentsIllustration, contents: ContentsIllustration,
portfolio: PortfolioIllustration, portfolio: PortfolioIllustration,
rooms: RoomsIllustration, rooms: RoomsIllustration,
hello: Hello, HelloIllustration,
HelloMyKVIllustration,
HelloMyDHAIllustration,
HelloMyDHFIllustration,
}, },
computed: { computed: {
illustration() { illustration() {
return this.$route.meta.illustration; const illustration = this.$route.meta.illustration;
if (illustration === 'hello') {
return Hello;
}
return illustration;
}, },
illustrationAlignment() { illustrationAlignment() {
return this.$route.meta.illustrationAlign return this.$route.meta.illustrationAlign