From 636fb89c15d3c51359012b86f218c5df4e3009ef Mon Sep 17 00:00:00 2001 From: Pranav C Date: Sat, 30 Jul 2022 12:52:34 +0530 Subject: [PATCH 001/208] feat(gui-v2): add column resize in grid view Signed-off-by: Pranav C --- packages/nc-gui-v2/components.d.ts | 1 + .../nc-gui-v2/components/smartsheet/Grid.vue | 44 ++++++++++++-- .../composables/useGridViewColumnWidth.ts | 58 ++++++++++++++++++ packages/nc-gui-v2/plugins/directives.ts | 59 +++++++++++++++++++ 4 files changed, 157 insertions(+), 5 deletions(-) create mode 100644 packages/nc-gui-v2/composables/useGridViewColumnWidth.ts create mode 100644 packages/nc-gui-v2/plugins/directives.ts diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts index 692c3f667c..10a50bc8e7 100644 --- a/packages/nc-gui-v2/components.d.ts +++ b/packages/nc-gui-v2/components.d.ts @@ -7,6 +7,7 @@ export {} declare module '@vue/runtime-core' { export interface GlobalComponents { + AAlert: typeof import('ant-design-vue/es')['Alert'] AAnchorLink: typeof import('ant-design-vue/es')['AnchorLink'] AAutoComplete: typeof import('ant-design-vue/es')['AutoComplete'] AButton: typeof import('ant-design-vue/es')['Button'] diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue index 624049a0a4..edafe9bf84 100644 --- a/packages/nc-gui-v2/components/smartsheet/Grid.vue +++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue @@ -1,7 +1,7 @@ diff --git a/packages/nc-gui-v2/components/cell/DateTimePicker.vue b/packages/nc-gui-v2/components/cell/DateTimePicker.vue index 39ccc68406..68f4a9087a 100644 --- a/packages/nc-gui-v2/components/cell/DateTimePicker.vue +++ b/packages/nc-gui-v2/components/cell/DateTimePicker.vue @@ -50,12 +50,12 @@ const localState = $computed({ :bordered="false" class="!w-full px-1" format="YYYY-MM-DD HH:mm" - :placeholder="isDateInvalid ? 'Invalid date' : !readOnlyMode ? 'Select date' : ''" + :placeholder="isDateInvalid ? 'Invalid date' : !readOnlyMode ? 'Select date and time' : ''" :allow-clear="!readOnlyMode" :input-read-only="true" :open="readOnlyMode ? false : undefined" > - + diff --git a/packages/nc-gui-v2/components/cell/YearPicker.vue b/packages/nc-gui-v2/components/cell/YearPicker.vue index 3d07f68184..a167dab5ed 100644 --- a/packages/nc-gui-v2/components/cell/YearPicker.vue +++ b/packages/nc-gui-v2/components/cell/YearPicker.vue @@ -52,7 +52,7 @@ const localState = $computed({ :input-read-only="true" :open="readOnlyMode ? false : undefined" > - + From 161b080ca95ec8ee519f78157bf6434f2f321dfc Mon Sep 17 00:00:00 2001 From: Muhammed Mustafa Date: Wed, 27 Jul 2022 18:31:56 +0530 Subject: [PATCH 010/208] refactor/gui-v2-user-management-added --- packages/nc-gui-v2/components.d.ts | 1 + .../dashboard/settings/SettingsModal.vue | 3 +- .../dashboard/settings/UserManagement.vue | 247 ++++++++++++++++++ .../settings/userManagement/ShareBase.vue | 209 +++++++++++++++ .../settings/userManagement/UsersModal.vue | 215 +++++++++++++++ packages/nc-gui-v2/lib/enums.ts | 7 + packages/nc-gui-v2/package-lock.json | 38 +++ packages/nc-gui-v2/package.json | 2 + packages/nc-gui-v2/utils/miscUtils.ts | 56 ++++ packages/nc-gui-v2/utils/urlUtils.ts | 4 + packages/nc-gui-v2/utils/userUtils.ts | 8 + 11 files changed, 789 insertions(+), 1 deletion(-) create mode 100644 packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue create mode 100644 packages/nc-gui-v2/components/dashboard/settings/userManagement/ShareBase.vue create mode 100644 packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue create mode 100644 packages/nc-gui-v2/utils/miscUtils.ts create mode 100644 packages/nc-gui-v2/utils/userUtils.ts diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts index 72c980072e..f5e940f2ba 100644 --- a/packages/nc-gui-v2/components.d.ts +++ b/packages/nc-gui-v2/components.d.ts @@ -19,6 +19,7 @@ declare module '@vue/runtime-core' { ADatePicker: typeof import('ant-design-vue/es')['DatePicker'] ADivider: typeof import('ant-design-vue/es')['Divider'] ADropdown: typeof import('ant-design-vue/es')['Dropdown'] + ADropdownButton: typeof import('ant-design-vue/es')['DropdownButton'] AForm: typeof import('ant-design-vue/es')['Form'] AFormItem: typeof import('ant-design-vue/es')['FormItem'] AInput: typeof import('ant-design-vue/es')['Input'] diff --git a/packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue b/packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue index b3eb076fa7..207152df00 100644 --- a/packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue +++ b/packages/nc-gui-v2/components/dashboard/settings/SettingsModal.vue @@ -4,6 +4,7 @@ import AuditTab from './AuditTab.vue' import AppStore from './AppStore.vue' import Metadata from './Metadata.vue' import UIAcl from './UIAcl.vue' +import UserManagement from './UserManagement.vue' import StoreFrontOutline from '~icons/mdi/storefront-outline' import TeamFillIcon from '~icons/ri/team-fill' import MultipleTableIcon from '~icons/mdi/table-multiple' @@ -39,7 +40,7 @@ const tabsInfo: TabGroup = { subTabs: { usersManagement: { title: 'Users Management', - body: () => AuditTab, + body: () => UserManagement, }, apiTokenManagement: { title: 'API Token Management', diff --git a/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue b/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue new file mode 100644 index 0000000000..dd7c683ac1 --- /dev/null +++ b/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue @@ -0,0 +1,247 @@ + + + + + diff --git a/packages/nc-gui-v2/components/dashboard/settings/userManagement/ShareBase.vue b/packages/nc-gui-v2/components/dashboard/settings/userManagement/ShareBase.vue new file mode 100644 index 0000000000..54cf704f0e --- /dev/null +++ b/packages/nc-gui-v2/components/dashboard/settings/userManagement/ShareBase.vue @@ -0,0 +1,209 @@ + + + + + diff --git a/packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue b/packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue new file mode 100644 index 0000000000..3f14d324b0 --- /dev/null +++ b/packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue @@ -0,0 +1,215 @@ + + + + + diff --git a/packages/nc-gui-v2/lib/enums.ts b/packages/nc-gui-v2/lib/enums.ts index d2705374bc..11acd9ae1c 100644 --- a/packages/nc-gui-v2/lib/enums.ts +++ b/packages/nc-gui-v2/lib/enums.ts @@ -4,6 +4,13 @@ export enum Role { User = 'user', } +export enum ProjectRole { + Owner = 'owner', + Editor = 'editor', + User = 'user', + Guest = 'guest', +} + export enum ClientType { MYSQL = 'mysql2', MSSQL = 'mssql', diff --git a/packages/nc-gui-v2/package-lock.json b/packages/nc-gui-v2/package-lock.json index b80358c982..8a97243ea7 100644 --- a/packages/nc-gui-v2/package-lock.json +++ b/packages/nc-gui-v2/package-lock.json @@ -26,7 +26,9 @@ "devDependencies": { "@antfu/eslint-config": "^0.25.2", "@iconify-json/clarity": "^1.1.4", + "@iconify-json/eva": "^1.1.2", "@iconify-json/ic": "^1.1.7", + "@iconify-json/lucide": "^1.1.36", "@iconify-json/material-symbols": "^1.1.8", "@iconify-json/mdi": "^1.1.25", "@iconify-json/ri": "^1.1.3", @@ -10427,6 +10429,15 @@ "@iconify/types": "*" } }, + "node_modules/@iconify-json/eva": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@iconify-json/eva/-/eva-1.1.2.tgz", + "integrity": "sha512-4n3sAzXYH4vX2ehi2+kMPP7VHM1TTZ2AKJyUrAogAdbEKWhHr891huFhOSZPRJ9F2/4D4Us8SjRxBHYyUvX80w==", + "dev": true, + "dependencies": { + "@iconify/types": "*" + } + }, "node_modules/@iconify-json/ic": { "version": "1.1.7", "dev": true, @@ -10435,6 +10446,15 @@ "@iconify/types": "*" } }, + "node_modules/@iconify-json/lucide": { + "version": "1.1.37", + "resolved": "https://registry.npmjs.org/@iconify-json/lucide/-/lucide-1.1.37.tgz", + "integrity": "sha512-GfeDEy61ols35CYLfNxQWCIWdVTf/V0GI29D5IT74ToxcwqjtInQ6YVeNJCfKSGsTnnuyG+M6drd6YXLEfdjvQ==", + "dev": true, + "dependencies": { + "@iconify/types": "*" + } + }, "node_modules/@iconify-json/material-symbols": { "version": "1.1.8", "dev": true, @@ -23062,6 +23082,15 @@ "@iconify/types": "*" } }, + "@iconify-json/eva": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@iconify-json/eva/-/eva-1.1.2.tgz", + "integrity": "sha512-4n3sAzXYH4vX2ehi2+kMPP7VHM1TTZ2AKJyUrAogAdbEKWhHr891huFhOSZPRJ9F2/4D4Us8SjRxBHYyUvX80w==", + "dev": true, + "requires": { + "@iconify/types": "*" + } + }, "@iconify-json/ic": { "version": "1.1.7", "dev": true, @@ -23069,6 +23098,15 @@ "@iconify/types": "*" } }, + "@iconify-json/lucide": { + "version": "1.1.37", + "resolved": "https://registry.npmjs.org/@iconify-json/lucide/-/lucide-1.1.37.tgz", + "integrity": "sha512-GfeDEy61ols35CYLfNxQWCIWdVTf/V0GI29D5IT74ToxcwqjtInQ6YVeNJCfKSGsTnnuyG+M6drd6YXLEfdjvQ==", + "dev": true, + "requires": { + "@iconify/types": "*" + } + }, "@iconify-json/material-symbols": { "version": "1.1.8", "dev": true, diff --git a/packages/nc-gui-v2/package.json b/packages/nc-gui-v2/package.json index 2ade8b06ff..38f3be3d54 100644 --- a/packages/nc-gui-v2/package.json +++ b/packages/nc-gui-v2/package.json @@ -32,7 +32,9 @@ "devDependencies": { "@antfu/eslint-config": "^0.25.2", "@iconify-json/clarity": "^1.1.4", + "@iconify-json/eva": "^1.1.2", "@iconify-json/ic": "^1.1.7", + "@iconify-json/lucide": "^1.1.36", "@iconify-json/material-symbols": "^1.1.8", "@iconify-json/mdi": "^1.1.25", "@iconify-json/ri": "^1.1.3", diff --git a/packages/nc-gui-v2/utils/miscUtils.ts b/packages/nc-gui-v2/utils/miscUtils.ts new file mode 100644 index 0000000000..6506fd9df7 --- /dev/null +++ b/packages/nc-gui-v2/utils/miscUtils.ts @@ -0,0 +1,56 @@ +export const copyTextToClipboard = (text: string) => { + const textArea = document.createElement('textarea') + + // + // *** This styling is an extra step which is likely not required. *** + // + // Why is it here? To ensure: + // 1. the element is able to have focus and selection. + // 2. if element was to flash render it has minimal visual impact. + // 3. less flakyness with selection and copying which **might** occur if + // the textarea element is not visible. + // + // The likelihood is the element won't even render, not even a + // flash, so some of these are just precautions. However in + // Internet Explorer the element is visible whilst the popup + // box asking the user for permission for the web page to + // copy to the clipboard. + // + + // Place in top-left corner of screen regardless of scroll position. + textArea.style.position = 'fixed' + textArea.style.top = '0' + textArea.style.left = '0' + + // Ensure it has a small width and height. Setting to 1px / 1em + // doesn't work as this gives a negative w/h on some browsers. + textArea.style.width = '2em' + textArea.style.height = '2em' + + // We don't need padding, reducing the size if it does flash render. + textArea.style.padding = '0' + + // Clean up any borders. + textArea.style.border = 'none' + textArea.style.outline = 'none' + textArea.style.boxShadow = 'none' + + // Avoid flash of white box if rendered for any reason. + textArea.style.background = 'transparent' + + textArea.addEventListener('focusin', (e) => e.stopPropagation()) + + textArea.value = text + + document.body.appendChild(textArea) + textArea.focus() + textArea.select() + + try { + document.execCommand('copy') + } catch (err) { + console.log('Oops, unable to copy') + } + + document.body.removeChild(textArea) +} diff --git a/packages/nc-gui-v2/utils/urlUtils.ts b/packages/nc-gui-v2/utils/urlUtils.ts index c43f9a1efc..5f71c720a1 100644 --- a/packages/nc-gui-v2/utils/urlUtils.ts +++ b/packages/nc-gui-v2/utils/urlUtils.ts @@ -17,6 +17,10 @@ export const replaceUrlsWithLink = (text: string): boolean | string => { return found && out } +export const dashboardUrl = () => { + return `${location.origin}${location.pathname || ''}` +} + // ref : https://stackoverflow.com/a/5717133 export const isValidURL = (str: string) => { const pattern = diff --git a/packages/nc-gui-v2/utils/userUtils.ts b/packages/nc-gui-v2/utils/userUtils.ts new file mode 100644 index 0000000000..27f70ef391 --- /dev/null +++ b/packages/nc-gui-v2/utils/userUtils.ts @@ -0,0 +1,8 @@ +import { ProjectRole } from '~/lib/enums' + +export const projectRoleTagColors = { + [ProjectRole.Owner]: '#cfdffe', + [ProjectRole.Editor]: '#c2f5e8', + [ProjectRole.User]: '#4caf50', + [ProjectRole.Guest]: '#9e9e9e', +} From c9dc180f44cc75afac4c490f40f1a4a87eb462db Mon Sep 17 00:00:00 2001 From: Muhammed Mustafa Date: Thu, 28 Jul 2022 11:39:49 +0530 Subject: [PATCH 011/208] refactor/gui-v2-user-management-tooltip-added and ui improvemnts --- .../dashboard/settings/UserManagement.vue | 88 ++++++++++++++----- .../settings/userManagement/ShareBase.vue | 82 ++++++++++------- .../settings/userManagement/UsersModal.vue | 21 +++-- 3 files changed, 123 insertions(+), 68 deletions(-) diff --git a/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue b/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue index dd7c683ac1..846875bb11 100644 --- a/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue +++ b/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue @@ -1,5 +1,6 @@ @@ -207,7 +203,7 @@ onMounted(() => { () const emits = defineEmits(['closed']) const toast = useToast() + interface Props { show: boolean selectedUser?: User } interface Users { - emails: string + emails?: string role: ProjectRole invitationToken?: string } @@ -28,8 +29,7 @@ interface Users { const { project } = useProject() const { $api, $e } = useNuxtApp() -const usersData = $ref({ emails: '', role: ProjectRole.Guest, invitationToken: undefined }) -let isFirstRender = $ref(true) +const usersData = $ref({ emails: undefined, role: ProjectRole.Guest, invitationToken: undefined }) const inviteToken = $ref(null) const formRef = ref() @@ -58,11 +58,10 @@ const validators = computed(() => { const { validateInfos } = useForm(usersData, validators) onMounted(() => { - if (isFirstRender && selectedUser) { + if (!usersData.emails && selectedUser?.email) { usersData.emails = selectedUser.email usersData.role = selectedUser.roles } - if (isFirstRender) isFirstRender = false }) const saveUser = async () => { @@ -112,7 +111,7 @@ const clickInviteMore = () => { $e('c:user:invite-more') usersData.invitationToken = undefined usersData.role = ProjectRole.Guest - usersData.emails = '' + usersData.emails = undefined } From 4be23a7b912e2aa2305cdc6c29ca1910a2e696d1 Mon Sep 17 00:00:00 2001 From: Muhammed Mustafa Date: Thu, 28 Jul 2022 13:46:17 +0530 Subject: [PATCH 014/208] refactor/gui-v2-user-management-invite-ui-improvements --- .../dashboard/settings/userManagement/UsersModal.vue | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue b/packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue index b14c554bed..89c4f4fcd1 100644 --- a/packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue +++ b/packages/nc-gui-v2/components/dashboard/settings/userManagement/UsersModal.vue @@ -151,9 +151,9 @@ const clickInviteMore = () => {
Looks like you have not configured mailer yet! Please copy above invite link and send it to - {{ usersData.invitationToken && usersData.emails }}. + {{ usersData.invitationToken && usersData.emails }}
-
+
@@ -198,7 +198,8 @@ const clickInviteMore = () => {
-
+
Save
+
Invite
From 48138df979d7f72aa0a335e63695492fa0cf29e9 Mon Sep 17 00:00:00 2001 From: Muhammed Mustafa Date: Thu, 28 Jul 2022 14:18:54 +0530 Subject: [PATCH 015/208] refactor/gui-v2-user-management-invite-cleanup --- .../dashboard/settings/UserManagement.vue | 32 +++++++++++-------- .../settings/userManagement/ShareBase.vue | 20 ++++++------ .../settings/userManagement/UsersModal.vue | 11 ++++--- 3 files changed, 36 insertions(+), 27 deletions(-) diff --git a/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue b/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue index 846875bb11..12e89319d3 100644 --- a/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue +++ b/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue @@ -1,6 +1,7 @@ + + From 38f3a34673634484d81e7d1a91cd1cc52bfda70e Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 27 Jul 2022 14:09:30 +0200 Subject: [PATCH 059/208] feat(gui-v2): edit view name on dblclick --- .../components/smartsheet/Sidebar.vue | 95 +++++++++++++++++-- 1 file changed, 86 insertions(+), 9 deletions(-) diff --git a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue index 73b35ecc0e..c16bedaf31 100644 --- a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue +++ b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue @@ -1,7 +1,7 @@ From e052aa19072db78b6b8fce2c20f6c3423e8de53f Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 27 Jul 2022 14:42:38 +0200 Subject: [PATCH 060/208] feat(gui-v2): properly cancel input --- .../components/smartsheet/Sidebar.vue | 89 ++++++++++++++----- 1 file changed, 66 insertions(+), 23 deletions(-) diff --git a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue index c16bedaf31..a37282aa62 100644 --- a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue +++ b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue @@ -1,9 +1,10 @@ -
@@ -251,7 +324,7 @@ function onStopEdit() {

{{ $t('activity.createView') }}

- +