From 7200484dcfbdbc9e09fcd1c3cbeefbad6bc5b2f6 Mon Sep 17 00:00:00 2001
From: 2427021 <s.a.vink@students.uu.nl>
Date: Thu, 28 Mar 2024 12:30:40 +0100
Subject: [PATCH] feat(visManager): asana link
---
libs/shared/lib/vis/configuration/panel.tsx | 144 +++++++++++---------
1 file changed, 80 insertions(+), 64 deletions(-)
diff --git a/libs/shared/lib/vis/configuration/panel.tsx b/libs/shared/lib/vis/configuration/panel.tsx
index d635719bd..f6d1fb4ba 100644
--- a/libs/shared/lib/vis/configuration/panel.tsx
+++ b/libs/shared/lib/vis/configuration/panel.tsx
@@ -14,75 +14,91 @@ export function ConfigPanel({ manager }: Props) {
const session = useSessionCache();
return (
- <div className="w-full h-full flex flex-col border">
- {manager.active ? (
- <>
- <div className="border-b border-secondary-200 py-2">
- <div className="flex justify-between items-center px-4 py-2">
- <span className="text-xs font-bold">Visualisation</span>
- <Button
- type="secondary"
- variant="ghost"
- size="xs"
- iconComponent={<Delete />}
- onClick={() => {
- if (manager.active) manager.deleteVisualization(manager.active);
- }}
- />
- </div>
- <div className="flex justify-between items-center px-4 py-1">
- <span className="text-xs font-normal">Type</span>
- <div className="w-36">
- <Input type="dropdown" size="xs" options={VISUALIZATION_TYPES} value={manager.active} onChange={() => {}} />
+ <div className="w-full h-full flex flex-col border justify-between">
+ <div>
+ {manager.active ? (
+ <>
+ <div className="border-b border-secondary-200 py-2">
+ <div className="flex justify-between items-center px-4 py-2">
+ <span className="text-xs font-bold">Visualisation</span>
+ <Button
+ type="secondary"
+ variant="ghost"
+ size="xs"
+ iconComponent={<Delete />}
+ onClick={() => {
+ if (manager.active) manager.deleteVisualization(manager.active);
+ }}
+ />
+ </div>
+ <div className="flex justify-between items-center px-4 py-1">
+ <span className="text-xs font-normal">Type</span>
+ <div className="w-36">
+ <Input type="dropdown" size="xs" options={VISUALIZATION_TYPES} value={manager.active} onChange={() => {}} />
+ </div>
+ </div>
+ <div className="flex justify-between items-center px-4 py-1">
+ <span className="text-xs font-normal">Name</span>
+ <input type="text" className="border rouded text-xs w-36" value={manager.active} onChange={() => {}} />
</div>
</div>
- <div className="flex justify-between items-center px-4 py-1">
- <span className="text-xs font-normal">Name</span>
- <input type="text" className="border rouded w-36" value={manager.active} onChange={() => {}} />
- </div>
- </div>
- {manager.active && (
- <div className="border-b border-secondary-200 p-4">
- <SettingsHeader name="Configuration" />
- {manager.renderSettings()}
- </div>
- )}
- </>
- ) : (
- <div>
- {session && session.currentSaveState && (
+ {manager.active && (
+ <div className="border-b border-secondary-200 p-4">
+ <SettingsHeader name="Configuration" />
+ {manager.renderSettings()}
+ </div>
+ )}
+ </>
+ ) : (
+ <div>
+ {session && session.currentSaveState && (
+ <div className="flex flex-col p-4 border-b border-secondary-200">
+ <span className="text-sm font-bold">Connection details</span>
+ <span className="text-xs">Database: {session.saveStates[session.currentSaveState].name}</span>
+ <span className="text-xs">Port: {session.saveStates[session.currentSaveState].db.port}</span>
+ <span className="text-xs">Protocol: {session.saveStates[session.currentSaveState].db.protocol}</span>
+ </div>
+ )}
<div className="flex flex-col p-4 border-b border-secondary-200">
- <span className="text-sm font-bold">Connection details</span>
- <span className="text-xs">Database: {session.saveStates[session.currentSaveState].name}</span>
- <span className="text-xs">Port: {session.saveStates[session.currentSaveState].db.port}</span>
- <span className="text-xs">Protocol: {session.saveStates[session.currentSaveState].db.protocol}</span>
- </div>
- )}
- <div className="flex flex-col p-4 border-b border-secondary-200">
- <span className="text-sm font-bold">Sessions</span>
- {Object.entries(session.saveStates).map(([id, info]) => (
- <div key={id} className="flex justify-between items-center">
- <span className="text-xs font-normal truncate">{id.slice(0, 15)}...</span>
- <div className="flex -space-x-4 rtl:space-x-reverse">
- {info.share_state.users.slice(0, 2).map((user: string) => (
- <div
- key={user}
- className="relative inline-flex items-center justify-center w-5 h-5 overflow-hidden bg-secondary-500 rounded-full"
- >
- <Icon component={<Person />} size={12} />
- </div>
- ))}
- {info.share_state.users.length > 3 && (
- <div className="flex items-center justify-center w-5 h-5 text-xs font-medium text-white bg-gray-700 border-2 border-white rounded-full hover:bg-gray-600 dark:border-gray-800">
- +2
- </div>
- )}
+ <span className="text-sm font-bold">Sessions</span>
+ {Object.entries(session.saveStates).map(([id, info]) => (
+ <div key={id} className="flex justify-between items-center">
+ <span className="text-xs font-normal truncate">{id.slice(0, 15)}...</span>
+ <div className="flex -space-x-4 rtl:space-x-reverse">
+ {info.share_state.users.slice(0, 2).map((user: string) => (
+ <div
+ key={user}
+ className="relative inline-flex items-center justify-center w-5 h-5 overflow-hidden bg-secondary-500 rounded-full"
+ >
+ <Icon component={<Person />} size={12} />
+ </div>
+ ))}
+ {info.share_state.users.length > 3 && (
+ <div className="flex items-center justify-center w-5 h-5 text-xs font-medium text-white bg-gray-700 border-2 border-white rounded-full hover:bg-gray-600 dark:border-gray-800">
+ +2
+ </div>
+ )}
+ </div>
</div>
- </div>
- ))}
+ ))}
+ </div>
</div>
- </div>
- )}
+ )}
+ </div>
+
+ <Button
+ type="primary"
+ variant="outline"
+ size="xs"
+ label="Report an issue"
+ onClick={() =>
+ window.open(
+ 'https://app.asana.com/-/login?u=https%3A%2F%2Fform.asana.com%2F%3Fk%3D2QEC88Dl7ETs2wYYWjkMXg%26d%3D1206648675960041&error=01',
+ '_blank',
+ )
+ }
+ additionalClasses="m-2"
+ />
</div>
);
}
--
GitLab