Skip to content

Commit

Permalink
Refactored designer
Browse files Browse the repository at this point in the history
  • Loading branch information
@cagataycivici
cagataycivici committed Dec 28, 2024
1 parent 686eba4 commit b8ef092
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 56 deletions.
44 changes: 25 additions & 19 deletions apps/showcase/components/layout/AppDesigner.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,27 +65,30 @@ export default {
this.deferredTabs = true;
},
async downloadTheme(theme) {
try {
const response = await $fetch(this.designerApiBase + '/theme/download/' + this.$appState.designer.licenseKey + '/' + theme.t_key, {
responseType: 'blob'
});
if (!this.$appState.designer.licenseKey) {
this.$toast.add({ severity: 'error', summary: 'Not Available', detail: 'A license is required to download', life: 3000 });
} else {
try {
const response = await $fetch(this.designerApiBase + '/theme/download/' + this.$appState.designer.licenseKey + '/' + theme.t_key, {
responseType: 'blob'
});
if (response.error) {
this.$toast.add({ severity: 'error', summary: 'An Error Occurred', detail: error.message, life: 3000 });
} else {
const blobUrl = window.URL.createObjectURL(response);
const link = document.createElement('a');
if (response.error) {
this.$toast.add({ severity: 'error', summary: 'An Error Occurred', detail: error.message, life: 3000 });
} else {
const blobUrl = window.URL.createObjectURL(response);
const link = document.createElement('a');
link.href = blobUrl;
link.download = theme.t_name + '.zip';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(blobUrl);
link.href = blobUrl;
link.download = theme.t_name + '.zip';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(blobUrl);
}
} catch (err) {
this.$toast.add({ severity: 'error', summary: 'An Error Occurred', detail: 'Failed to download file', life: 3000 });
}
} catch (err) {
console.log(err);
this.$toast.add({ severity: 'error', summary: 'An Error Occurred', detail: 'Failed to download file', life: 3000 });
}
},
async updateTheme(theme) {
Expand All @@ -104,7 +107,10 @@ export default {
}
},
applyTheme(theme) {
this.updateTheme(theme);
if (this.$appState.designer.licenseKey) {
this.updateTheme(theme);
}
updatePreset(theme.preset);
EventBus.emit('theme-palette-change');
},
Expand Down
68 changes: 40 additions & 28 deletions apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,43 +96,55 @@ export default {
document.body.classList.remove('material');
}
const { data, error } = await $fetch(this.designerApiBase + '/theme/create', {
method: 'POST',
body: {
name: this.themeName,
preset: newPreset,
license_key: this.$appState.designer.licenseKey,
config: {
font_size: '14px',
font_family: 'Inter var'
if (this.$appState.designer.licenseKey) {
const { data, error } = await $fetch(this.designerApiBase + '/theme/create', {
method: 'POST',
body: {
name: this.themeName,
preset: newPreset,
license_key: this.$appState.designer.licenseKey,
config: {
font_size: '14px',
font_family: 'Inter var'
}
}
}
});
});
if (error) {
this.$toast.add({ severity: 'error', summary: 'An error occured', detail: error.message, life: 3000 });
if (error) {
this.$toast.add({ severity: 'error', summary: 'An error occured', detail: error.message, life: 3000 });
} else {
this.loadThemeEditor(data.t_key, newPreset);
}
} else {
this.loadThemeEditor(data.t_key, newPreset);
this.loadThemeEditor('trial', newPreset);
}
},
async createThemeFromFigma() {
const { data, error } = await $fetch(this.designerApiBase + '/theme/figma', {
method: 'POST',
body: {
name: this.themeName,
figma_tokens: this.figmaData,
license_key: this.$appState.designer.licenseKey,
config: {
font_size: '14px',
font_family: 'Inter var'
if (this.figmaData) {
if (this.$appState.designer.licenseKey) {
const { data, error } = await $fetch(this.designerApiBase + '/theme/figma', {
method: 'POST',
body: {
name: this.themeName,
figma_tokens: this.figmaData,
license_key: this.$appState.designer.licenseKey,
config: {
font_size: '14px',
font_family: 'Inter var'
}
}
});
if (error) {
this.$toast.add({ severity: 'error', summary: 'An error occured', detail: error.message, life: 3000 });
} else {
this.loadThemeEditor(data.t_key, newPreset);
}
} else {
this.$toast.add({ severity: 'error', summary: 'An error occured', detail: 'A valid license required', life: 3000 });
}
});
if (error) {
this.$toast.add({ severity: 'error', summary: 'An error occured', detail: error.message, life: 3000 });
} else {
this.loadThemeEditor(data.t_key, newPreset);
this.$toast.add({ severity: 'error', summary: 'An error occured', detail: 'File is required', life: 3000 });
}
},
onFileSelect(event) {
Expand Down
22 changes: 13 additions & 9 deletions apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
<template>
<div class="text-lg font-semibold mb-2">License Key</div>
<span class="block text-muted-color leading-6 mb-4"
>A license can be purchased from PrimeStore, if you do not have a license key, you are still able to use the Designer in free tier. <NuxtLink to="/designer" class="doc-link">Learn more</NuxtLink> about the Theme Designer.</span
>A license can be purchased from PrimeStore, if you do not have a license key, you are still able to experience the Designer with limited features. <NuxtLink to="/designer" class="doc-link">Learn more</NuxtLink> about the Theme
Designer.</span
>
<form @submit.prevent class="flex gap-4">
<input v-model="$appState.designer.licenseKey" type="password" autocomplete="off" class="px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700 flex-1" />
<input v-model="licenseKey" type="password" autocomplete="off" class="px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700 flex-1" />
<button
type="button"
@click="activate(false)"
icon="pi pi-download"
:disabled="!$appState.designer.licenseKey"
class="px-3 py-2 bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black rounded-md font-medium cursor-pointer transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white disabled:opacity-60"
:disabled="!licenseKey"
class="px-3 py-2 bg-zinc-950 disabled:hover:bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:disabled:hover:bg-white dark:text-black rounded-md font-medium cursor-pointer disabled:cursor-auto transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white disabled:opacity-60"
>
Activate
</button>
Expand Down Expand Up @@ -71,6 +72,7 @@ export default {
inject: ['designerService'],
data() {
return {
licenseKey: null,
loading: false,
currentTheme: null,
confirmDialogVisible: false,
Expand Down Expand Up @@ -115,7 +117,7 @@ export default {
const keyValue = localStorage.getItem(this.$appState.designer.localStoreKey);
if (keyValue) {
this.$appState.designer.licenseKey = keyValue;
this.licenseKey = keyValue;
this.activate(true);
}
} else {
Expand All @@ -124,13 +126,14 @@ export default {
},
methods: {
async activate(silent) {
this.loading = true;
const { data, error } = await $fetch(this.designerApiBase + '/license/verify/' + this.$appState.designer.licenseKey);
const { data, error } = await $fetch(this.designerApiBase + '/license/verify/' + this.licenseKey);
if (error) {
this.$toast.add({ severity: 'error', summary: 'An Error Occurred', detail: error.message, life: 3000 });
} else {
if (data.valid) {
this.$appState.designer.licenseKey = this.licenseKey;
if (!silent) {
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'License is activated.', life: 3000 });
}
Expand All @@ -142,20 +145,21 @@ export default {
this.$appState.designer.themes = [];
}
}
this.loading = false;
},
openNewTheme() {
this.$appState.designer.activeView = 'create_theme';
},
async loadThemes() {
this.loading = true;
const { data, error } = await $fetch(this.designerApiBase + '/theme/list/' + this.$appState.designer.licenseKey);
if (error) {
this.$toast.add({ severity: 'error', summary: 'An Error Occurred', detail: error.message, life: 3000 });
} else {
this.$appState.designer.themes = data;
}
this.loading = false;
},
async loadTheme(theme) {
const { data, error } = await $fetch(this.designerApiBase + '/theme/load/' + this.$appState.designer.licenseKey + '/' + theme.t_key);
Expand Down

0 comments on commit b8ef092

Please sign in to comment.