From 1c7e4f9bafae15a14dc844b5f35f17b8f7b74d4f Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 27 Dec 2024 23:17:25 +0300
Subject: [PATCH] Adjustments to API updates

---
 .../components/layout/AppDesigner.vue         | 36 ++-------
 .../designer/create/DesignCreateTheme.vue     | 73 ++++++++++---------
 .../designer/dashboard/DesignDashboard.vue    | 26 ++++---
 .../designer/editor/DesignEditorFooter.vue    | 61 ++++++++++++++++
 .../editor/custom/DesignCustomTokens.vue      |  6 +-
 apps/showcase/plugins/app-state.js            |  4 +-
 6 files changed, 129 insertions(+), 77 deletions(-)
 create mode 100644 apps/showcase/components/layout/designer/editor/DesignEditorFooter.vue

diff --git a/apps/showcase/components/layout/AppDesigner.vue b/apps/showcase/components/layout/AppDesigner.vue
index bc9760df0..703a9186f 100644
--- a/apps/showcase/components/layout/AppDesigner.vue
+++ b/apps/showcase/components/layout/AppDesigner.vue
@@ -25,24 +25,7 @@
         <DesignEditor v-else-if="$appState.designer.activeView === 'editor'" :deferred="deferredTabs" />
 
         <template #footer>
-            <div v-if="$appState.designer.active.view === 'editor'" class="flex justify-between gap-2">
-                <button
-                    type="button"
-                    @click="download"
-                    icon="pi pi-download"
-                    class="px-3 py-2 bg-transparent border border-gray-200 dark:border-gray-700 hover:border-gray-800 dark:hover:border-gray-500 text-black dark:text-white rounded-md font-medium cursor-pointer transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white"
-                >
-                    Download
-                </button>
-                <button
-                    type="button"
-                    @click="apply"
-                    icon="pi pi-download"
-                    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"
-                >
-                    Apply
-                </button>
-            </div>
+            <DesignEditorFooter v-if="$appState.designer.activeView === 'editor'" />
         </template>
     </Drawer>
 </template>
@@ -53,9 +36,10 @@ import { $dt } from '@primevue/themes';
 export default {
     provide() {
         return {
-            designerUtils: {
+            designerService: {
                 refreshACTokens: this.refreshACTokens,
-                saveTheme: this.saveTheme
+                saveTheme: this.saveTheme,
+                downloadTheme: this.downloadTheme
             }
         };
     },
@@ -71,18 +55,9 @@ export default {
         onHide() {
             this.deferredTabs = true;
         },
-        download() {
+        downloadTheme(theme) {
             // TODO: Fetch from endpoint
         },
-        apply() {
-            saveTheme();
-            updatePreset(this.$appState.designer.theme.preset);
-            EventBus.emit('theme-palette-change');
-        },
-        saveTheme() {
-            // TODO: Save to DB or Local Storage
-            console.log('theme saved');
-        },
         camelCaseToDotCase(name) {
             return name.replace(/([a-z])([A-Z])/g, '$1.$2').toLowerCase();
         },
@@ -111,7 +86,6 @@ export default {
         refreshACTokens() {
             this.$appState.designer.theme.acTokens = [];
             this.generateACTokens(null, this.$appState.designer.theme.preset);
-            console.log('refresh tokens');
         },
         openDashboard() {
             this.$appState.designer.activeView = 'dashboard';
diff --git a/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue b/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
index 4bda91626..9b8c1d699 100644
--- a/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
+++ b/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
@@ -1,7 +1,7 @@
 <template>
     <section class="mb-6">
         <span class="block text-lg font-semibold mb-2">Theme Name</span>
-        <input v-model="themeName" type="text" autocomplete="off" class="px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700 flex-1" />
+        <input v-model="themeName" type="text" autocomplete="off" class="px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700 flex-1" maxlength="25" />
     </section>
 
     <section class="mb-6">
@@ -96,28 +96,43 @@ export default {
                 document.body.classList.remove('material');
             }
 
-            const { error } = await $fetch(this.designerApiBase + '/theme/create', {
+            const { data, error } = await $fetch(this.designerApiBase + '/theme/create', {
                 method: 'POST',
                 body: {
                     name: this.themeName,
                     preset: newPreset,
-                    license_key: this.$appState.designer.licenseKey
+                    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.$appState.designer.theme = {
+                this.loadThemeEditor(data.t_key, newPreset);
+            }
+        },
+        async createThemeFromFigma() {
+            const { data, error } = await $fetch(this.designerApiBase + '/theme/figma', {
+                method: 'POST',
+                body: {
                     name: this.themeName,
-                    preset: newPreset,
-                    customTokens: [],
-                    acTokens: []
-                };
-                this.replaceColorPalette();
-                usePreset(newPreset);
+                    figma_tokens: this.figmaData,
+                    license_key: this.$appState.designer.licenseKey,
+                    config: {
+                        font_size: '14px',
+                        font_family: 'Inter var'
+                    }
+                }
+            });
 
-                this.$appState.designer.activeView = 'editor';
+            if (error) {
+                this.$toast.add({ severity: 'error', summary: 'An error occured', detail: error.message, life: 3000 });
+            } else {
+                this.loadThemeEditor(data.t_key, newPreset);
             }
         },
         onFileSelect(event) {
@@ -139,30 +154,22 @@ export default {
 
             reader.readAsText(file);
         },
-        async createThemeFromFigma() {
-            const { data: newPreset, error } = await $fetch(this.designerApiBase + '/theme/figma', {
-                method: 'POST',
-                body: {
-                    name: this.themeName,
-                    figma_tokens: this.figmaData,
-                    license_key: this.$appState.designer.licenseKey
+        loadThemeEditor(t_key, preset) {
+            this.$appState.designer.theme = {
+                name: this.themeName,
+                key: t_key,
+                preset: preset,
+                customTokens: [],
+                acTokens: [],
+                config: {
+                    baseFontSize: '14px',
+                    fontFamily: 'Inter var'
                 }
-            });
+            };
+            this.replaceColorPalette();
+            usePreset(preset);
 
-            if (error) {
-                this.$toast.add({ severity: 'error', summary: 'An error occured', detail: error.message, life: 3000 });
-            } else {
-                this.$appState.designer.theme = {
-                    name: this.themeName,
-                    preset: newPreset,
-                    customTokens: [],
-                    acTokens: []
-                };
-                this.replaceColorPalette();
-                usePreset(newPreset);
-
-                this.$appState.designer.activeView = 'editor';
-            }
+            this.$appState.designer.activeView = 'editor';
         }
     }
 };
diff --git a/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue b/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
index 8ee109fbe..e9f0115bf 100644
--- a/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
+++ b/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
@@ -40,7 +40,7 @@
                         <input v-model="theme.t_name" type="text" class="w-24 text-sm px-2 py-1" maxlength="100" @blur="renameTheme(theme)" />
                         <i class="hidden group-hover:block pi pi-pencil !text-sm absolute top-50 right-0 text-muted-color"></i>
                     </div>
-                    <span class="text-muted-color text-xs">{{ formatTimestamp(theme.last_updated) }}</span>
+                    <span class="text-muted-color text-xs">{{ formatTimestamp(theme.t_last_updated) }}</span>
                 </div>
                 <button
                     type="button"
@@ -68,7 +68,7 @@ export default {
             designerApiBase: runtimeConfig.public.designerApiBase
         };
     },
-    inject: ['designerUtils'],
+    inject: ['designerService'],
     data() {
         return {
             loading: false,
@@ -100,7 +100,13 @@ export default {
                         this.duplicateTheme(this.currentTheme);
                     }
                 },
-                { label: 'Download', icon: 'pi pi-download' }
+                {
+                    label: 'Download',
+                    icon: 'pi pi-download',
+                    command: () => {
+                        this.designerService.downloadTheme(this.currentTheme);
+                    }
+                }
             ]
         };
     },
@@ -119,12 +125,12 @@ export default {
     methods: {
         async activate(silent) {
             this.loading = true;
-            const { data, error } = await $fetch(this.designerApiBase + '/license/' + this.$appState.designer.licenseKey);
+            const { data, error } = await $fetch(this.designerApiBase + '/license/verify/' + this.$appState.designer.licenseKey);
 
             if (error) {
                 this.$toast.add({ severity: 'error', summary: 'An Error Occurred', detail: error.message, life: 3000 });
             } else {
-                if (data) {
+                if (data.valid) {
                     if (!silent) {
                         this.$toast.add({ severity: 'success', summary: 'Success', detail: 'License is activated.', life: 3000 });
                     }
@@ -152,20 +158,22 @@ export default {
             }
         },
         async loadTheme(theme) {
-            const { data, error } = await $fetch(this.designerApiBase + '/theme/' + theme.t_key);
+            const { data, error } = await $fetch(this.designerApiBase + '/theme/load/' + this.$appState.designer.licenseKey + '/' + theme.t_key);
 
             if (error) {
-                this.$toast.add({ severity: 'error', summary: 'An Error Occurred', detail: 'Code: ' + error.code, life: 3000 });
+                this.$toast.add({ severity: 'error', summary: 'An Error Occurred', detail: error.message, life: 3000 });
             } else {
                 this.$appState.designer.theme = {
+                    key: data.t_key,
                     name: data.t_name,
-                    preset: JSON.parse(data.preset),
+                    preset: JSON.parse(data.t_preset),
+                    config: JSON.parse(data.t_config),
                     customTokens: [],
                     acTokens: []
                 };
 
                 usePreset(this.$appState.designer.theme.preset);
-                this.designerUtils.refreshACTokens();
+                this.designerService.refreshACTokens();
                 this.$appState.designer.activeView = 'editor';
             }
         },
diff --git a/apps/showcase/components/layout/designer/editor/DesignEditorFooter.vue b/apps/showcase/components/layout/designer/editor/DesignEditorFooter.vue
new file mode 100644
index 000000000..6fbec46c9
--- /dev/null
+++ b/apps/showcase/components/layout/designer/editor/DesignEditorFooter.vue
@@ -0,0 +1,61 @@
+<template>
+    <div class="flex justify-between gap-2">
+        <button
+            type="button"
+            @click="download"
+            icon="pi pi-download"
+            class="px-3 py-2 bg-transparent border border-gray-200 dark:border-gray-700 hover:border-gray-800 dark:hover:border-gray-500 text-black dark:text-white rounded-md font-medium cursor-pointer transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white"
+        >
+            Download
+        </button>
+        <button
+            type="button"
+            @click="apply"
+            icon="pi pi-download"
+            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"
+        >
+            Apply
+        </button>
+    </div>
+</template>
+
+<script>
+import EventBus from '@/app/AppEventBus';
+import { updatePreset } from '@primevue/themes';
+
+export default {
+    setup() {
+        const runtimeConfig = useRuntimeConfig();
+
+        return {
+            designerApiBase: runtimeConfig.public.designerApiBase
+        };
+    },
+    inject: ['designerService'],
+    methods: {
+        download() {
+            this.designerService.downloadTheme(this.$appState.desiger.theme);
+        },
+        apply() {
+            this.updateTheme();
+            updatePreset(this.$appState.designer.theme.preset);
+            EventBus.emit('theme-palette-change');
+        },
+        async updateTheme() {
+            const { error } = await $fetch(this.designerApiBase + '/theme/update', {
+                method: 'POST',
+                body: {
+                    key: this.$appState.designer.theme.key,
+                    preset: this.$appState.designer.theme.preset,
+                    config: this.$appState.designer.theme.config,
+                    license_key: this.$appState.designer.licenseKey
+                }
+            });
+
+            if (error) {
+                this.$toast.add({ severity: 'error', summary: 'An error occured', detail: error.message, life: 3000 });
+            }
+        }
+    }
+};
+</script>
diff --git a/apps/showcase/components/layout/designer/editor/custom/DesignCustomTokens.vue b/apps/showcase/components/layout/designer/editor/custom/DesignCustomTokens.vue
index 5df26b842..29bf92219 100644
--- a/apps/showcase/components/layout/designer/editor/custom/DesignCustomTokens.vue
+++ b/apps/showcase/components/layout/designer/editor/custom/DesignCustomTokens.vue
@@ -42,7 +42,7 @@
 
 <script>
 export default {
-    inject: ['designer'],
+    inject: ['designerService'],
     methods: {
         addToken() {
             this.$appState.designer.theme.customTokens = [...this.$appState.designer.theme.customTokens, ...[{}]];
@@ -56,8 +56,8 @@ export default {
                 this.$appState.designer.theme.preset.extend[this.transformTokenName(token.name)] = token.value;
             });
 
-            designer.refreshACTokens();
-            designer.saveTheme();
+            this.designerService.refreshACTokens();
+            this.designerService.saveTheme();
 
             this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Tokens saved', life: 3000 });
         },
diff --git a/apps/showcase/plugins/app-state.js b/apps/showcase/plugins/app-state.js
index aad054d0a..cdcc74f9e 100644
--- a/apps/showcase/plugins/app-state.js
+++ b/apps/showcase/plugins/app-state.js
@@ -21,10 +21,12 @@ const $appState = {
                 activeView: 'dashboard',
                 activeTab: '0',
                 theme: {
+                    key: null,
                     name: null,
                     preset: null,
                     customTokens: [],
-                    acTokens: []
+                    acTokens: [],
+                    config: null
                 },
                 themes: []
             }