feat: add option to auto-sort columns alphabetically (#2252)

parse-community · Sep 8, 2022 · 2b7f20f · 2b7f20f
1 parent 9fecc43
commit 2b7f20f
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 2 deletions.
diff --git a/src/components/ColumnsConfiguration/ColumnConfigurationItem.scss b/src/components/ColumnsConfiguration/ColumnConfigurationItem.scss
@@ -18,7 +18,6 @@
 }
 
 .columnConfigItemName {
-  width: 110px;
   text-overflow: ellipsis;
   overflow: hidden;
   line-height: 24px;

diff --git a/src/components/ColumnsConfiguration/ColumnsConfiguration.react.js b/src/components/ColumnsConfiguration/ColumnsConfiguration.react.js
@@ -54,6 +54,23 @@ export default class ColumnsConfiguration extends React.Component {
     this.props.handleColumnsOrder(this.props.order.map(order => ({ ...order, visible: false })));
   }
 
+  autoSort() {
+    const defaultOrder = ['objectId', 'createdAt', 'updatedAt', 'ACL']
+    const order = {
+      default: [],
+      other: []
+    };
+    for (const column of this.props.order) {
+      const index = defaultOrder.indexOf(column.name);
+      if (index !== -1) {
+        order.default[index] = column;
+      } else {
+        order.other.push(column)
+      }
+    }
+    this.props.handleColumnsOrder([...order.default.filter(column => column), ...order.other.sort((a,b) => a.name.localeCompare(b.name))]);
+  }
+
   render() {
     const { handleColumnDragDrop, handleColumnsOrder, order, disabled } = this.props;
     let [ title, entry ] = [styles.title, styles.entry ].map(className => (
@@ -118,6 +135,10 @@ export default class ColumnsConfiguration extends React.Component {
                   color='white'
                   value='Show all'
                   onClick={this.showAll.bind(this)} />
+                <Button
+                  color='white'
+                  value='Autosort'
+                  onClick={this.autoSort.bind(this)} />
               </div>
             </div>
           </div>

diff --git a/src/components/ColumnsConfiguration/ColumnsConfiguration.scss b/src/components/ColumnsConfiguration/ColumnsConfiguration.scss
@@ -64,7 +64,7 @@
   right: 0;
   border-radius: 5px 0 5px 5px;
   background: #797691;
-  width: 220px;
+  width: 320px;
   font-size: 14px;
 
   .columnConfigContainer {