From 262029c0997e85137fe67be8c91074bae6ca9903 Mon Sep 17 00:00:00 2001
From: Ethan Dickinson <ethan.dickinson@gmail.com>
Date: Fri, 29 Mar 2024 08:29:17 -0400
Subject: [PATCH] fixes to model manager view

---
 .../src/components/sidebar/ModelManager.vue   | 16 ++++------
 .../sidebar/model/AddEditorToModelPopup.vue   | 29 +++++++++++++------
 frontend/src/store/modules/editors.ts         |  3 ++
 3 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/sidebar/ModelManager.vue b/frontend/src/components/sidebar/ModelManager.vue
index 5bb0f84..85780a5 100644
--- a/frontend/src/components/sidebar/ModelManager.vue
+++ b/frontend/src/components/sidebar/ModelManager.vue
@@ -6,16 +6,16 @@
         <div v-else class="header">
             No active model
         </div>
-        <v-select theme="dark" variant="solo" density="compact" 
-        class="minimal-select" v-model="selectedModel"
-            label="Change Connection Model" :items="models" item-title="name" @update:modelValue="changeConnectionModel">
+        <v-select theme="dark" variant="solo" density="compact" class="minimal-select" v-model="selectedModel"
+            label="Change Connection Model" :items="models" item-title="name"
+            @update:modelValue="changeConnectionModel">
         </v-select>
 
         <div class="connection-list py-0">
             <v-expansion-panels theme="dark" variant="accordion">
                 <v-expansion-panel class="py-0">
                     <v-expansion-panel-title>
-                        <div class="pl-4">Editor Sources</div>
+                        <div class="pl-4">Editor Sources ({{ editors.length }})</div>
                     </v-expansion-panel-title>
                     <v-expansion-panel-text class="px-0">
                         <template v-if="activeModelFromConnection">
@@ -26,14 +26,8 @@
                         </template>
                         <div class="connection-list-item" v-else>No active model</div>
                         <div class="d-flex flex-column align-center  pa-0">
-                            <v-toolbar height="24" extension-height="24" class="sidebar-button-list">
+                            <v-toolbar height="24" extension-height="24" class="sidebar-button-list align-center">
                                 <AddEditorToModelPopup :model="activeModelFromConnection" />
-                                <!-- <v-btn icon="mdi-format-align-left"></v-btn>
-                                <v-btn density="compact" icon="mdi-format-align-center"></v-btn> -->
-                                <!-- <v-btn @click="removeConnection(connection)"  density="compact" icon="mdi-cancel"></v-btn>
-                                <EditConnectionPopup :connection="connection" />
-                                <RemoveConnectionPopup :connection="connection" />
-                                <NewEditorPopup :defaultConnection="connection.name" /> -->
                             </v-toolbar>
                         </div>
                     </v-expansion-panel-text>
diff --git a/frontend/src/components/sidebar/model/AddEditorToModelPopup.vue b/frontend/src/components/sidebar/model/AddEditorToModelPopup.vue
index 27632b8..9f10b28 100644
--- a/frontend/src/components/sidebar/model/AddEditorToModelPopup.vue
+++ b/frontend/src/components/sidebar/model/AddEditorToModelPopup.vue
@@ -1,9 +1,7 @@
-
-
 <template>
     <v-dialog v-model="dialog" max-width="500" min-width=400>
         <template v-slot:activator="{ props }">
-            <v-btn class="tab-btn pa-0 ba-0" v-bind="props" density="compact" icon="mdi-plus"
+            <v-btn class="sidebar-action-button pa-0 ba-0" v-bind="props" density="compact" icon="mdi-plus"
                 v-shortkey.once="['ctrl', 'n']" @shortkey="showPopup()">
                 +
             </v-btn>
@@ -15,7 +13,7 @@
                     </v-text-field>
                     <v-divider />
                     <v-select variant="solo" density="compact" :readonly="loading" v-model="editor" label="Editor"
-                        :rules="[required]" :items="editors" item-title="name">
+                        :items="editors" item-title="name">
                     </v-select>
                 </v-container>
                 <v-divider></v-divider>
@@ -65,13 +63,10 @@ export default {
         model: [Model, LocalModel],
     },
     computed: {
-        ...mapGetters(['editors']),
-    },
-    mounted: () => {
-        // console.log(this.connections)
+        ...mapGetters(['editors', 'activeEditor', 'getConnectionByName',]),
     },
     methods: {
-        ...mapActions(['addEditorToModel']),
+        ...mapActions(['addEditorToModel', 'newEditor']),
         showPopup() {
             this.dialog = true;
         },
@@ -79,6 +74,22 @@ export default {
             this.localAddEditorToModel();
         },
         localAddEditorToModel() {
+            // create it with alias name if not exist
+            let local = this;
+            if (!this.editor) {
+                const fullConnection = local.getConnectionByName(local.activeEditor.connection)
+
+                local.newEditor({
+                    name: local.name,
+                    connection: fullConnection,
+                    syntax: 'preql',
+                }).then(() => {
+                    local.editor = local.name
+                    return localAddEditortoModel()
+                })
+
+            }
+            //otherwise add
             this.addEditorToModel({
                 alias: this.name,
                 editor: this.editor,
diff --git a/frontend/src/store/modules/editors.ts b/frontend/src/store/modules/editors.ts
index 926d21b..6ed8684 100644
--- a/frontend/src/store/modules/editors.ts
+++ b/frontend/src/store/modules/editors.ts
@@ -191,6 +191,9 @@ const mutations = {
     },
     newEditor(state, data) {
         let newEd: Editor | RawEditor | null = null
+        if (!data.name) {
+            throw Error('Editor name is required')
+        }
         if (data.syntax === 'preql') {
             newEd = new Editor(data.name, data.connection.type, data.connection.name,);
         }