feat: close connection single or with filter (#64)

1 files changed, 102 insertions, 0 deletions

diff --git a/src/components/ModalManageConnectionColumns.tsx b/src/components/ModalManageConnectionColumns.tsx
new file mode 100644
index 0000000..e7a25fb
--- /dev/null
+++ b/src/components/ModalManageConnectionColumns.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
+import { Menu } from 'react-feather';
+import { useTranslation } from 'react-i18next';
+
+import BaseModal from '~/components/shared/BaseModal';
+
+import s from './ModalManageConnectionColumns.module.scss';
+import Switch from './SwitchThemed';
+
+const getItemStyle = (isDragging, draggableStyle) => {
+  return {
+    ...draggableStyle,
+    ...(isDragging && {
+      background: 'transparent',
+    }),
+  };
+};
+
+export default function ModalManageConnectionColumns({
+  isOpen,
+  onRequestClose,
+  columns,
+  hiddenColumns,
+  setColumns,
+  setHiddenColumns,
+}) {
+  const { t } = useTranslation();
+
+  const onDragEnd = (result) => {
+    if (!result.destination) {
+      return;
+    }
+
+    const items = Array.from(columns);
+    const [removed] = items.splice(result.source.index, 1);
+    items.splice(result.destination.index, 0, removed);
+    setColumns(items);
+    localStorage.setItem('columns', JSON.stringify(items));
+  };
+
+  const onShowChange = (column, val) => {
+    if (!val) {
+      hiddenColumns.push(column.accessor);
+    } else {
+      const idx = hiddenColumns.indexOf(column.accessor);
+
+      hiddenColumns.splice(idx, 1);
+    }
+    setHiddenColumns(Array.from(hiddenColumns));
+    localStorage.setItem('hiddenColumns', JSON.stringify(hiddenColumns));
+  };
+
+  return (
+    <BaseModal isOpen={isOpen} onRequestClose={onRequestClose}>
+      <div>
+        <DragDropContext onDragEnd={onDragEnd}>
+          <Droppable droppableId="droppable-modal">
+            {(provided) => (
+              <div {...provided.droppableProps} ref={provided.innerRef}>
+                {columns
+                  .filter((i) => i.accessor !== 'id')
+                  .map((column) => {
+                    const show = !hiddenColumns.includes(column.accessor);
+
+                    return (
+                      <Draggable
+                        key={column.accessor}
+                        draggableId={column.accessor}
+                        index={columns.findIndex((a) => a.accessor === column.accessor)}
+                      >
+                        {(provided, snapshot) => (
+                          <div
+                            ref={provided.innerRef}
+                            {...provided.draggableProps}
+                            {...provided.dragHandleProps}
+                            className={s.columnManagerRow}
+                            style={getItemStyle(snapshot.isDragging, provided.draggableProps.style)}
+                          >
+                            <Menu />
+                            <span className={s.columnManageLabel}>{t(column.Header)}</span>
+                            <div className={s.columnManageSwitch}>
+                              <Switch
+                                size="mini"
+                                checked={show}
+                                onChange={(val) => onShowChange(column, val)}
+                              />
+                            </div>
+                          </div>
+                        )}
+                      </Draggable>
+                    );
+                  })}
+                {provided.placeholder}
+              </div>
+            )}
+          </Droppable>
+        </DragDropContext>
+      </div>
+    </BaseModal>
+  );
+}