feat: option to toggle line wrap mode

src/renderer/components/ModalSettings.vue

@@ -114,6 +114,21 @@
                               </div>
                            </div>
                         </div>
+                        <div class="column col-8 col-sm-12">
+                           <div class="form-group">
+                              <div class="col-6 col-sm-12">
+                                 <label class="form-label">
+                                    {{ $t('message.wrapLongLines') }}:
+                                 </label>
+                              </div>
+                              <div class="col-6 col-sm-12">
+                                 <label class="form-switch d-inline-block" @click.prevent="toggleLineWrap">
+                                    <input type="checkbox" :checked="selectedLineWrap">
+                                    <i class="form-icon" />
+                                 </label>
+                              </div>
+                           </div>
+                        </div>
                      </form>
                   </div>
                </div>
@@ -280,6 +295,7 @@ export default {
          selectedSettingTab: 'application/selectedSettingTab',
          selectedLocale: 'settings/getLocale',
          selectedAutoComplete: 'settings/getAutoComplete',
+         selectedLineWrap: 'settings/getLineWrap',
          notificationsTimeout: 'settings/getNotificationsTimeout',
          applicationTheme: 'settings/getApplicationTheme',
          editorTheme: 'settings/getEditorTheme',
@@ -333,6 +349,7 @@ ORDER BY
          closeModal: 'application/hideSettingModal',
          changeLocale: 'settings/changeLocale',
          changeAutoComplete: 'settings/changeAutoComplete',
+         changeLineWrap: 'settings/changeLineWrap',
          changeEditorTheme: 'settings/changeEditorTheme',
          updateNotificationsTimeout: 'settings/updateNotificationsTimeout'
       }),
@@ -355,6 +372,9 @@ ORDER BY
       },
       toggleAutoComplete () {
          this.changeAutoComplete(!this.selectedAutoComplete);
+      },
+      toggleLineWrap () {
+         this.changeLineWrap(!this.selectedLineWrap);
       }
    }
 };

src/renderer/components/QueryEditor.vue

@@ -35,7 +35,8 @@ export default {
    computed: {
       ...mapGetters({
          editorTheme: 'settings/getEditorTheme',
-         autoComplete: 'settings/getAutoComplete'
+         autoComplete: 'settings/getAutoComplete',
+         lineWrap: 'settings/getLineWrap'
       }),
       tables () {
          return this.workspace
@@ -100,6 +101,13 @@ export default {
                enableLiveAutocompletion: this.autoComplete
             });
          }
+      },
+      lineWrap () {
+         if (this.editor) {
+            this.editor.setOptions({
+               wrap: this.lineWrap
+            });
+         }
       }
    },
    mounted () {
@@ -114,6 +122,7 @@ export default {
 
       this.editor.setOptions({
          enableBasicAutocompletion: true,
+         wrap: this.lineWrap,
          enableSnippets: true,
          enableLiveAutocompletion: this.autoComplete
       });

src/renderer/i18n/en-US.js

@@ -67,7 +67,8 @@ module.exports = {
       dark: 'Dark',
       autoCompletion: 'Auto Completion',
       application: 'Application',
-      editor: 'Editor'
+      editor: 'Editor',
+      view: 'View'
    },
    message: {
       appWelcome: 'Welcome to Antares SQL Client!',
@@ -131,7 +132,8 @@ module.exports = {
       invalidDefault: 'Invalid default',
       onDelete: 'On delete',
       applicationTheme: 'Application Theme',
-      editorTheme: 'Editor Theme'
+      editorTheme: 'Editor Theme',
+      wrapLongLines: 'Wrap long lines'
    },
    // Date and Time
    short: {

src/renderer/store/modules/settings.store.js

@@ -11,6 +11,7 @@ export default {
       explorebar_size: persistentStore.get('explorebar_size') || null,
       notifications_timeout: persistentStore.get('notifications_timeout') || 5,
       auto_complete: persistentStore.get('auto_complete') || true,
+      line_wrap: persistentStore.get('line_wrap') || true,
       application_theme: persistentStore.get('application_theme') || 'dark',
       editor_theme: persistentStore.get('editor_theme') || 'twilight'
    },
@@ -19,6 +20,7 @@ export default {
       getExplorebarSize: state => state.explorebar_size,
       getNotificationsTimeout: state => state.notifications_timeout,
       getAutoComplete: state => state.auto_complete,
+      getLineWrap: state => state.line_wrap,
       getApplicationTheme: state => state.application_theme,
       getEditorTheme: state => state.editor_theme
    },
@@ -36,6 +38,10 @@ export default {
          state.auto_complete = val;
          persistentStore.set('auto_complete', state.auto_complete);
       },
+      SET_LINE_WRAP (state, val) {
+         state.line_wrap = val;
+         persistentStore.set('line_wrap', state.line_wrap);
+      },
       SET_EXPLOREBAR_SIZE (state, size) {
          state.explorebar_size = size;
          persistentStore.set('explorebar_size', state.explorebar_size);
@@ -57,6 +63,9 @@ export default {
       changeAutoComplete ({ commit }, val) {
          commit('SET_AUTO_COMPLETE', val);
       },
+      changeLineWrap ({ commit }, val) {
+         commit('SET_LINE_WRAP', val);
+      },
       changeEditorTheme ({ commit }, theme) {
          commit('SET_EDITOR_THEME', theme);
       }