mysqlsyncr 1.0.16 → 1.0.18

package/ui/dist/spa/index.html

@@ -1,3 +1,3 @@
-<!DOCTYPE html><html><head><title>MySQLsyncr</title><meta charset=utf-8><meta name=description content="A simple ui for the sync features in mysqlsyncr"><meta name=format-detection content="telephone=no"><meta name=msapplication-tap-highlight content=no><meta name=viewport content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width"><link rel=icon type=image/png sizes=128x128 href=/icons/favicon-128x128.png><link rel=icon type=image/png sizes=96x96 href=/icons/favicon-96x96.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=icon type=image/ico href=/favicon.ico>  <script type="module" crossorigin src="/assets/index-8ohClfZU.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/index-767_aev0.css">
+<!DOCTYPE html><html><head><title>MySQLsyncr</title><meta charset=utf-8><meta name=description content="A simple ui for the sync features in mysqlsyncr"><meta name=format-detection content="telephone=no"><meta name=msapplication-tap-highlight content=no><meta name=viewport content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width"><link rel=icon type=image/png sizes=128x128 href=/icons/favicon-128x128.png><link rel=icon type=image/png sizes=96x96 href=/icons/favicon-96x96.png><link rel=icon type=image/png sizes=32x32 href=/icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/icons/favicon-16x16.png><link rel=icon type=image/ico href=/favicon.ico>  <script type="module" crossorigin src="/assets/index-i-I_hjUd.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-C3SFaSRt.css">
 </head><body><div id=q-app></div></body></html>

package/ui/quasar.config.js

@@ -93,7 +93,8 @@ export default defineConfig((/* ctx */) => {
       // Quasar plugins
       plugins: [
         'Notify',
-        'Dialog'
+        'Dialog',
+        'Loading'
       ]
     },
 

package/ui/src/components/FolderBrowser.vue

@@ -2,8 +2,8 @@
     <q-dialog v-model="isOpen" persistent>
         <q-card class="folder-browser-card">
             <q-card-section class="header-section row items-center justify-between">
-                <div class="text-h6">Select Folder</div>
-                <q-btn icon="close" flat round dense v-close-popup />
+                <div class="text-h6 text-white">Select Folder</div>
+                <q-btn icon="close" flat round dense v-close-popup class="text-white" />
             </q-card-section>
 
             <q-card-section>
@@ -21,6 +21,14 @@
                             <q-icon name="folder" color="primary" />
                         </template>
                     </q-input>
+                    <q-btn
+                        flat
+                        color="primary"
+                        icon="create_new_folder"
+                        label="New Folder"
+                        class="q-mt-sm"
+                        @click="promptNewFolder"
+                    />
                 </div>
 
                 <q-list bordered separator class="directory-list">
@@ -67,6 +75,30 @@
             </q-card-actions>
         </q-card>
     </q-dialog>
+
+    <!-- Add new folder dialog -->
+    <q-dialog v-model="newFolderDialog" persistent>
+        <q-card style="min-width: 300px">
+            <q-card-section class="row items-center">
+                <div class="text-h6">Create New Folder</div>
+            </q-card-section>
+
+            <q-card-section>
+                <q-input
+                    v-model="newFolderName"
+                    label="Folder Name"
+                    dense
+                    autofocus
+                    @keyup.enter="createNewFolder"
+                />
+            </q-card-section>
+
+            <q-card-actions align="right">
+                <q-btn flat label="Cancel" color="grey-7" v-close-popup />
+                <q-btn flat label="Create" color="primary" @click="createNewFolder" />
+            </q-card-actions>
+        </q-card>
+    </q-dialog>
 </template>
 
 <script>
@@ -87,7 +119,9 @@ export default {
     data() {
         return {
             currentPath: '',
-            items: []
+            items: [],
+            newFolderDialog: false,
+            newFolderName: ''
         }
     },
     computed: {
@@ -142,6 +176,38 @@ export default {
             if (item.isParent) return 'grey-7';
             if (item.isDirectory) return 'primary';
             return 'grey-6';
+        },
+
+        promptNewFolder() {
+            this.newFolderName = '';
+            this.newFolderDialog = true;
+        },
+
+        async createNewFolder() {
+            if (this.newFolderName.trim()) {
+                const newFolderPath = `${this.currentPath}/${this.newFolderName}`;
+
+                try {
+                    await axios.post('http://localhost:3000/api/create-folder', {
+                        folderPath: newFolderPath
+                    });
+
+                    // Refresh the current directory to show the new folder
+                    await this.loadFolderContents(this.currentPath);
+                    this.newFolderDialog = false;
+
+                    this.$q.notify({
+                        type: 'positive',
+                        message: 'Folder created successfully'
+                    });
+                } catch (error) {
+                    console.error('Error creating folder:', error);
+                    this.$q.notify({
+                        type: 'negative',
+                        message: 'Error creating folder'
+                    });
+                }
+            }
         }
     },
     async mounted() {
@@ -152,43 +218,46 @@ export default {
 
 <style scoped>
 .folder-browser-card {
-    min-width: 450px;
-    max-width: 700px;
-    border-radius: 8px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    min-width: 600px;
+    max-width: 900px;
+    border-radius: 4px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .header-section {
-    background-color: #f5f5f5;
-    border-bottom: 1px solid #e0e0e0;
-    padding: 12px 20px;
+    background-color: var(--q-primary);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 16px 20px;
 }
 
 .path-section {
-    margin-bottom: 20px;
+    margin-bottom: 16px;
 }
 
 .current-path-input {
     font-family: monospace;
+    font-size: 13px;
 }
 
 .directory-list {
-    max-height: 400px;
+    max-height: 450px;
     overflow-y: auto;
     border-radius: 4px;
     border: 1px solid #e0e0e0;
 }
 
 .directory-item {
-    transition: background-color 0.2s;
+    transition: background-color 0.15s;
+    min-height: 40px;
 }
 
 .directory-item:hover {
-    background-color: #f0f4f8;
+    background-color: #f5f9ff;
 }
 
 .action-buttons {
-    padding: 16px;
+    padding: 12px 20px;
     border-top: 1px solid #e0e0e0;
+    background-color: #fafafa;
 }
 </style>

package/ui/src/pages/MainComponent.vue

@@ -802,54 +802,72 @@ export default {
                 }).onOk(async () => {
                     console.log('Overwriting existing dump')
                     await this.createNewDump(false)
+                    await this.getDatabasesFromExistingDumps()
+                    await this.fetchAllDifferences()
                 })
                 return
             }
 
-            let response = await axios
-                .post('http://localhost:3000/api/dump', {
+            this.$q.loading.show({
+                message: 'Creating new dump...',
+                spinnerColor: 'primary',
+                backgroundColor: 'grey-1',
+                spinnerSize: 80,
+                messageColor: 'primary',
+                customClass: 'custom-loading',
+            })
+
+            try {
+
+                let response = await axios.post('http://localhost:3000/api/dump', {
                     config: {
                         host: this.host,
                         port: this.port,
                         user: this.user,
                         password: this.password,
                         output: this.dbFolder,
-                        // database: this.database,
                     },
                 })
-                .catch((error) => {
-                    if (error.response.data.message) {
-                        this.$q.dialog({
-                            title: 'Error',
-                            message: error.response.data.message,
-                        })
-                    }
-                    console.error('Error creating new dump:', error)
-                    return
-                })
 
-            if (!response) return
-            if (response.data.message) {
-                this.$q.dialog({
-                    title: 'Error',
-                    message: response.data.message,
+                if (response.data.message) {
+                    this.$q.notify({
+                        type: 'positive',
+                        message: response.data.message,
+                        position: 'top'
+                    })
+                }
+
+                // Update loading message for each subsequent operation
+                this.$q.loading.show({
+                    message: 'Loading databases...',
+                    spinnerColor: 'primary',
+                    backgroundColor: 'grey-1',
+                    spinnerSize: 80,
+                    messageColor: 'primary',
+                    customClass: 'custom-loading',
                 })
-            }
-            this.differences = await this.fetchAllDifferences()
-            console.log('Differences in createNewDump:', this.differences)
-            if (
-                response.data &&
-                typeof response.data === 'object' &&
-                Object.keys(response.data).length > 0
-            ) {
-                this.existingDatabases = response.data
-                this.buildDatabaseTree()
-            } else {
-                this.existingDatabases = {}
+                await this.getDatabasesFromExistingDumps()
+
+                this.$q.loading.show({
+                    message: 'Fetching differences...',
+                    spinnerColor: 'primary',
+                    backgroundColor: 'grey-1',
+                    spinnerSize: 80,
+                    messageColor: 'primary',
+                    customClass: 'custom-loading',
+                })
+                await this.fetchAllDifferences()
+
+            } catch (error) {
+                this.$q.loading.hide()
                 this.$q.notify({
-                    message: 'Error creating new dump',
-                    color: 'red',
+                    type: 'negative',
+                    message: error.response?.data?.message || 'Error creating dump',
+                    position: 'top'
                 })
+                console.error('Error creating new dump:', error)
+            } finally {
+                this.$q.loading.hide()
             }
         },
         showIssueDetails(issue, node) {