mysqlsyncr 1.0.15 → 1.0.16

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-Bgaq8Ay7.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/index-DbZFTc3Z.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-8ohClfZU.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-767_aev0.css">
 </head><body><div id=q-app></div></body></html>

package/ui/src/components/FolderBrowser.vue

@@ -0,0 +1,194 @@
+<template>
+    <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 />
+            </q-card-section>
+
+            <q-card-section>
+                <div class="path-section">
+                    <div class="text-subtitle2 q-mb-sm">Current Path:</div>
+                    <q-input
+                        v-model="currentPath"
+                        dense
+                        readonly
+                        filled
+                        class="current-path-input"
+                        bg-color="grey-2"
+                    >
+                        <template v-slot:prepend>
+                            <q-icon name="folder" color="primary" />
+                        </template>
+                    </q-input>
+                </div>
+
+                <q-list bordered separator class="directory-list">
+                    <q-item
+                        v-for="item in sortedItems"
+                        :key="item.path"
+                        clickable
+                        v-ripple
+                        @click="item.isDirectory ? navigateToFolder(item.path) : null"
+                        class="directory-item"
+                    >
+                        <q-item-section avatar>
+                            <q-icon
+                                :name="getItemIcon(item)"
+                                :color="getItemColor(item)"
+                                size="sm"
+                            />
+                        </q-item-section>
+                        <q-item-section>
+                            {{ item.name }}
+                        </q-item-section>
+                        <q-item-section side v-if="item.isDirectory">
+                            <q-icon name="chevron_right" color="grey-6" size="xs" />
+                        </q-item-section>
+                    </q-item>
+                </q-list>
+            </q-card-section>
+
+            <q-card-actions align="right" class="action-buttons">
+                <q-btn
+                    flat
+                    label="Cancel"
+                    color="grey-7"
+                    v-close-popup
+                    class="q-px-md"
+                />
+                <q-btn
+                    unelevated
+                    label="Select"
+                    color="primary"
+                    @click="selectCurrentFolder"
+                    class="q-px-md q-ml-sm"
+                />
+            </q-card-actions>
+        </q-card>
+    </q-dialog>
+</template>
+
+<script>
+import axios from 'axios';
+
+export default {
+    name: 'FolderBrowser',
+    props: {
+        modelValue: {
+            type: Boolean,
+            required: true
+        },
+        initialPath: {
+            type: String,
+            default: ''
+        }
+    },
+    data() {
+        return {
+            currentPath: '',
+            items: []
+        }
+    },
+    computed: {
+        isOpen: {
+            get() {
+                return this.modelValue
+            },
+            set(value) {
+                this.$emit('update:modelValue', value)
+            }
+        },
+        sortedItems() {
+            return this.items;
+        }
+    },
+    methods: {
+        async navigateToFolder(folderPath) {
+            await this.loadFolderContents(folderPath);
+        },
+
+        async loadFolderContents(path) {
+            try {
+                const response = await axios.post('http://localhost:3000/api/browse-folders', {
+                    currentPath: path
+                });
+
+                if (response.data) {
+                    this.currentPath = response.data.currentPath;
+                    this.items = response.data.items || [];
+                }
+            } catch (error) {
+                console.error('Error loading folder contents:', error);
+                this.$q.notify({
+                    type: 'negative',
+                    message: 'Error loading folder contents'
+                });
+            }
+        },
+
+        selectCurrentFolder() {
+            this.$emit('folder-selected', this.currentPath);
+            this.isOpen = false;
+        },
+
+        getItemIcon(item) {
+            if (item.isParent) return 'reply';
+            if (item.isDirectory) return 'folder';
+            return 'insert_drive_file';
+        },
+
+        getItemColor(item) {
+            if (item.isParent) return 'grey-7';
+            if (item.isDirectory) return 'primary';
+            return 'grey-6';
+        }
+    },
+    async mounted() {
+        await this.loadFolderContents(this.initialPath || process.cwd());
+    }
+}
+</script>
+
+<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);
+}
+
+.header-section {
+    background-color: #f5f5f5;
+    border-bottom: 1px solid #e0e0e0;
+    padding: 12px 20px;
+}
+
+.path-section {
+    margin-bottom: 20px;
+}
+
+.current-path-input {
+    font-family: monospace;
+}
+
+.directory-list {
+    max-height: 400px;
+    overflow-y: auto;
+    border-radius: 4px;
+    border: 1px solid #e0e0e0;
+}
+
+.directory-item {
+    transition: background-color 0.2s;
+}
+
+.directory-item:hover {
+    background-color: #f0f4f8;
+}
+
+.action-buttons {
+    padding: 16px;
+    border-top: 1px solid #e0e0e0;
+}
+</style>

package/ui/src/pages/MainComponent.vue

@@ -200,7 +200,6 @@
                                     <q-input
                                         v-model="dbFolder"
                                         label="Database Folder"
-
                                         default="db-dump"
                                         filled
                                         class="q-mb-md"
@@ -209,6 +208,16 @@
                                         <template v-slot:prepend>
                                             <q-icon name="folder" />
                                         </template>
+                                        <template v-slot:append>
+                                            <q-btn
+                                                flat
+                                                dense
+                                                icon="folder_open"
+                                                @click="showFolderBrowser = true"
+                                            >
+                                                <q-tooltip>Browse</q-tooltip>
+                                            </q-btn>
+                                        </template>
                                     </q-input>
                                 </div>
                             </div>
@@ -374,13 +383,24 @@
                 </q-card-actions>
             </q-card>
         </q-dialog>
+
+        <FolderBrowser v-if="showFolderBrowser"
+            v-model="showFolderBrowser"
+            :initial-path="dbFolder"
+            @folder-selected="onFolderSelected"
+        />
     </q-page>
 </template>
 
 <script>
 import axios from 'axios'
+import FolderBrowser from '../components/FolderBrowser.vue'
+
 
 export default {
+    components: {
+        FolderBrowser
+    },
     data() {
         return {
             isDbSetup: false,
@@ -407,6 +427,7 @@ export default {
             selectedIssues: [],
             selectedNode: null,
             isNodeFixing: {}, // Tracks loading state for each node
+            showFolderBrowser: false,
         }
     },
     methods: {
@@ -989,6 +1010,19 @@ export default {
                 this.isApplying = false
             }
         },
+        onFolderSelected(path) {
+            this.dbFolder = path;
+            // If you want to save the setting immediately
+            const dbConfig = {
+                host: this.host,
+                port: this.port,
+                user: this.user,
+                password: this.password,
+                database: this.database,
+                output: this.dbFolder,
+            }
+            localStorage.setItem('dbConfig', JSON.stringify(dbConfig));
+        },
     },
     mounted() {
         const dbConfig = localStorage.getItem('dbConfig')