In the columns view is now possible to change the ordering of column …

…names. This overrides the settings.
ernstc · Jan 5, 2024 · 7d9f0b9 · 7d9f0b9
1 parent c9f51b8
commit 7d9f0b9
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 10 deletions.
diff --git a/src/controllers/visualization.controller.ts b/src/controllers/visualization.controller.ts
@@ -29,6 +29,7 @@ interface IOutgoingMessage {
     objects?: DatabaseObject[];
     objectsSchema?: string[];
     columns?: DatabaseColumn[];
+    sortColumnNames?: string;
     values?: DatabaseColumnValue[];
     rows?: DatabaseTableRow[];
     rowsColumnsName?: string[];
@@ -213,6 +214,9 @@ const updateViewModel = (viewModel: ViewModel, vmUpdates?: ViewModel) => {
             case 'showRecordDetails':
                 viewModel.showRecordDetails = vmUpdates?.showRecordDetails;
                 break;
+            case 'sortColumnNames':
+                viewModel.sortColumnNames = vmUpdates?.sortColumnNames;
+                break;
             case 'sortAscendingColumnValues':
                 viewModel.sortAscendingColumnValues = vmUpdates?.sortAscendingColumnValues;
                 break;
@@ -341,14 +345,15 @@ const loadObjects = async (connectionId: string, webview: azdata.DashboardWebvie
 const loadColumns = async (connectionId: string, webview: azdata.DashboardWebview | vscode.Webview, viewModel: ViewModel) => {
     const object = viewModel.selectedObject!;
 
-    viewModel.columns = await getMssqlDbColumns(connectionId, object);
+    viewModel.columns = await getMssqlDbColumns(connectionId, object, viewModel.sortColumnNames);
     viewModel.values = undefined;
     viewModel.selectedColumnIndex = undefined;
     viewModel.selectedValueIndex = undefined;
 
     postMessage(webview, {
         status: Status.RenderingData,
         columns: viewModel.columns,
+        sortColumnNames: viewModel.sortColumnNames,
         object: object
     });
 };

diff --git a/src/models/view.model.ts b/src/models/view.model.ts
@@ -25,6 +25,8 @@ export class ViewModel {
     selectTables?: boolean;
     selectViews?: boolean;
 
+    sortColumnNames?: string;
+
     sortAscendingColumnValues?: boolean;
     sortAscendingColumnValuesCount?: boolean;
 

diff --git a/src/repositories/mssql.repository.ts b/src/repositories/mssql.repository.ts
@@ -134,7 +134,8 @@ export const getMssqlDbObjects = async (
 
 export const getMssqlDbColumns = async (
     connectionId: string,
-    table: DatabaseObject
+    table: DatabaseObject,
+    sortColumnNames?: string
 ): Promise<DatabaseColumn[]> => {
 
     if (table === undefined || table === null) {
@@ -143,6 +144,20 @@ export const getMssqlDbColumns = async (
 
     const vscodeSettings = VscodeSettings.getInstance();
 
+    let sortingExpression = '';
+    if (sortColumnNames === 'ascending') {
+        sortingExpression = 'c.name';
+    }
+    else if (sortColumnNames === 'descending') {
+        sortingExpression = 'c.name DESC';
+    }
+    else {
+        sortingExpression = `
+            ${vscodeSettings.columnsShowPrimaryKeyFirst ? 'is_primary_key desc,' : ''}
+            ${vscodeSettings.columnsOrderAlphabetically ? 'c.name' : 'c.column_id'}
+        `;
+    }
+
     let query = `
         SELECT distinct
             c.name
@@ -190,8 +205,7 @@ export const getMssqlDbColumns = async (
             (o.name = N'${table.Name}') 
             and (schema_Name(o.schema_id) = N'${table.Schema}')
         ORDER BY
-            ${vscodeSettings.columnsShowPrimaryKeyFirst ? 'is_primary_key desc,' : ''}
-            ${vscodeSettings.columnsOrderAlphabetically ? 'c.name' : 'c.column_id'}
+            ${sortingExpression}
     `;
 
     let dbResult = await runQuery<DbColumnsResponse>(Provider.MSSQL, connectionId, query);

diff --git a/src/web/index.html b/src/web/index.html
@@ -78,7 +78,7 @@ <h2>
                     <h2>Columns <span id="columnsCount" class="count"></span></h2>
                     <div class="table">
                         <div class="table-header">
-                            <div class="col1">Name</div>
+                            <div class="col1 sortable">Name</div>
                             <div class="col2">Type</div>
                         </div>
                         <!--<div class="table-data">

diff --git a/src/web/index.js b/src/web/index.js
@@ -176,7 +176,7 @@
                     hideLoading();
                 }
                 if (e.data.columns !== undefined) {
-                    await renderColumns(e.data.columns);
+                    await renderColumns(e.data.columns, undefined, e.data.sortColumnNames);
                     hideLoading();
                 }
                 if (e.data.values !== undefined) {
@@ -291,7 +291,7 @@
         }
 
         if (vm.columns !== undefined) {
-            await renderColumns(vm.columns, vm.selectedColumnIndex);
+            await renderColumns(vm.columns, vm.selectedColumnIndex, vm.sortColumnNames);
         }
 
         if (vm.values !== undefined) {
@@ -371,6 +371,26 @@
     }
 
 
+    const sortingTypes = ['', 'ascending', 'descending'];
+
+    function setHeaderCircularSorting($header) {
+        let sort = $header.data('sort');
+        if (sort === undefined || sort === null || sortingTypes.indexOf(sort) < 0) {
+            sort = '';
+            $header.data('sort', sort);
+        }
+        $header.find('i').remove();
+        switch (sort) {
+            case 'ascending': 
+                $header.append('<i class="ms-Icon ms-Icon--CaretSolidUp"></i>');
+                break;
+            case 'descending':
+                $header.append('<i class="ms-Icon ms-Icon--CaretSolidDown"></i>');
+                break;
+        }
+    }
+
+
     function renderObjects(objects, selectedIndex) {
         let tablesCount = objects.filter(o => o.ObjectType === 0).length;
         let viewsCount = objects.filter(o => o.ObjectType === 1).length;
@@ -436,14 +456,15 @@
     }
 
 
-    async function renderColumns(columns, selectedIndex) {
+    async function renderColumns(columns, selectedIndex, sortColumnNames) {
         _columns = columns;
         $columnsCount.innerText = _selectedObject !== undefined ? `(${columns.length})` : '';
+        let $table;
         renderCollection(columns,
-            $('#columns .table'),
+            $table = $('#columns .table'),
             () =>
                 $(`<div class="table-header">
-                    <div class="col1">Name</div>
+                    <div class="col1 sortable">Name</div>
                     <div class="col2">Type</div>
                 </div>`),
             (column) =>
@@ -463,10 +484,28 @@
                     .click(columnClicked),
             selectedIndex
         );
+        setHeaderCircularSorting($table.find('.table-header .col1').data('sort', sortColumnNames).click(columnsHeaderNameClicked));
         $btnCopyValues.hide();
     }
 
 
+    function columnsHeaderNameClicked() {
+        let $this = $(this);
+        let sort = $this.data('sort') ?? '';
+        let sortIndex = sortingTypes.indexOf(sort);
+        sort = sortingTypes[(sortIndex + 1) % sortingTypes.length];
+        $this.data('sort', sort);
+        setHeaderCircularSorting($this);
+        showLoading();
+        updateViewModel({
+            'sortColumnNames': sort
+        });
+        sendMessage({
+            'command': 'loadColumns|loadRows'
+        });
+    }
+
+
     function renderValues(values, column, selectedIndex, sortAscendingValues, sortAscendingValuesCount) {
         $valuesCount.innerText = values && values.length ? `(${values.length})` : '';
         let $table;