From 1f7477700100658d7210df41cdf5e42a5194e99e Mon Sep 17 00:00:00 2001 From: Pranav C Date: Wed, 27 Jul 2022 15:14:11 +0530 Subject: [PATCH] feat(gui-v2): add column menu and edit column option Signed-off-by: Pranav C --- packages/nc-gui-v2/assets/style-v2.scss | 3 +- .../smartsheet-column/AdvancedOptions.vue | 161 +++++++++++++++ .../components/smartsheet-column/Edit.vue | 83 ++++++++ .../components/smartsheet-header/Cell.vue | 5 +- .../components/smartsheet-header/Menu.vue | 42 ++++ packages/nc-gui-v2/composables/useProject.ts | 7 +- packages/nc-gui-v2/utils/columnUtils.ts | 189 ++++++++++++++++++ 7 files changed, 484 insertions(+), 6 deletions(-) create mode 100644 packages/nc-gui-v2/components/smartsheet-column/AdvancedOptions.vue create mode 100644 packages/nc-gui-v2/components/smartsheet-column/Edit.vue create mode 100644 packages/nc-gui-v2/components/smartsheet-header/Menu.vue create mode 100644 packages/nc-gui-v2/utils/columnUtils.ts diff --git a/packages/nc-gui-v2/assets/style-v2.scss b/packages/nc-gui-v2/assets/style-v2.scss index f698cdcf7a..cfc809dfc2 100644 --- a/packages/nc-gui-v2/assets/style-v2.scss +++ b/packages/nc-gui-v2/assets/style-v2.scss @@ -72,9 +72,8 @@ html { overflow-y: auto !important; } - .nc-menu-item { - @apply cursor-pointer text-xs flex align-center gap-2 p-4 relative after:(content-[''] absolute top-0 left-0 w-full h-full right 0 bg-current opacity-0 transition transition-opactity duration-100) hover:(after:(opacity-5)); + @apply cursor-pointer text-xs flex align-center gap-2 px-4 py-3 relative after:(content-[''] absolute top-0 left-0 w-full h-full right 0 bg-current opacity-0 transition transition-opactity duration-100) hover:(after:(opacity-5)); } .nc-sidebar-right-item { diff --git a/packages/nc-gui-v2/components/smartsheet-column/AdvancedOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/AdvancedOptions.vue new file mode 100644 index 0000000000..307d847da4 --- /dev/null +++ b/packages/nc-gui-v2/components/smartsheet-column/AdvancedOptions.vue @@ -0,0 +1,161 @@ + + + + + diff --git a/packages/nc-gui-v2/components/smartsheet-column/Edit.vue b/packages/nc-gui-v2/components/smartsheet-column/Edit.vue new file mode 100644 index 0000000000..5abb7284dd --- /dev/null +++ b/packages/nc-gui-v2/components/smartsheet-column/Edit.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue index 6db3a86053..efb71e58aa 100644 --- a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue +++ b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue @@ -70,13 +70,14 @@ export default { + + diff --git a/packages/nc-gui-v2/composables/useProject.ts b/packages/nc-gui-v2/composables/useProject.ts index ed3eb1464c..e61a222f27 100644 --- a/packages/nc-gui-v2/composables/useProject.ts +++ b/packages/nc-gui-v2/composables/useProject.ts @@ -1,5 +1,5 @@ import { SqlUiFactory } from 'nocodb-sdk' -import type { ProjectType, TableType } from 'nocodb-sdk' +import type { OracleUi, ProjectType, TableType } from 'nocodb-sdk' import type { MaybeRef } from '@vueuse/core' import { useNuxtApp, useState } from '#app' import { USER_PROJECT_ROLES } from '~/lib/constants' @@ -21,6 +21,7 @@ export default (projectId?: MaybeRef) => { projectRoles.value = user.roles } } + async function loadTables() { if (project.value.id) { const tablesResponse = await $api.dbTable.list(project.value.id) @@ -44,7 +45,9 @@ export default (projectId?: MaybeRef) => { const isMysql = computed(() => ['mysql', 'mysql2'].includes(projectBaseType)) const isPg = computed(() => projectBaseType === 'pg') - const sqlUi = computed(() => SqlUiFactory.create({ client: projectBaseType })) + const sqlUi = computed>(() => + SqlUiFactory.create({ client: projectBaseType }), + ) return { project, tables, loadProjectRoles, loadProject, loadTables, isMysql, isPg, sqlUi } } diff --git a/packages/nc-gui-v2/utils/columnUtils.ts b/packages/nc-gui-v2/utils/columnUtils.ts new file mode 100644 index 0000000000..3db1717e66 --- /dev/null +++ b/packages/nc-gui-v2/utils/columnUtils.ts @@ -0,0 +1,189 @@ +import { UITypes } from 'nocodb-sdk' +import LinkVariant from '~icons/mdi/link-variant' +import TableColumnPlusBefore from '~icons/mdi/table-column-plus-before' +import FormatColorText from '~icons/mdi/format-color-text' +import TextSubject from '~icons/mdi/text-subject' +import Attachment from '~icons/mdi/attachment' +import CheckboxMarkedOutline from '~icons/mdi/checkbox-marked-outline' +import FormatListBulletedSquare from '~icons/mdi/format-list-bulleted-square' +import ArrowDownDropCircle from '~icons/mdi/arrow-down-drop-circle' +import CalendarMonth from '~icons/mdi/calendar-month' +import Calendar from '~icons/mdi/calendar' +import Clock from '~icons/mdi/clock' +import FilePhone from '~icons/mdi/file-phone' +import Email from '~icons/mdi/email' +import Web from '~icons/mdi/web' +import Numeric from '~icons/mdi/numeric' +import Decimal from '~icons/mdi/decimal' +import CurrencyUsdCircleOutline from '~icons/mdi/currency-usd-circle-outline' +import PercentOutline from '~icons/mdi/percent-outline' +import TimerOutline from '~icons/mdi/timer-outline' +import Star from '~icons/mdi/star' +import MathIntegral from '~icons/mdi/math-integral' +import MovieRoll from '~icons/mdi/movie-roll' +import Counter from '~icons/mdi/counter' +import CalendarClock from '~icons/mdi/calendar-clock' + +const uiTypes = [ + { + name: UITypes.LinkToAnotherRecord, + icon: LinkVariant, + virtual: 1, + }, + { + name: UITypes.Lookup, + icon: TableColumnPlusBefore, + virtual: 1, + }, + { + name: UITypes.SingleLineText, + icon: FormatColorText, + }, + { + name: UITypes.LongText, + icon: TextSubject, + }, + { + name: UITypes.Attachment, + icon: Attachment, + }, + { + name: UITypes.Checkbox, + icon: CheckboxMarkedOutline, + }, + { + name: UITypes.MultiSelect, + icon: FormatListBulletedSquare, + }, + { + name: UITypes.SingleSelect, + icon: ArrowDownDropCircle, + }, + { + name: UITypes.Date, + icon: CalendarMonth, + }, + { + name: UITypes.Year, + icon: Calendar, + }, + { + name: UITypes.Time, + icon: Clock, + }, + { + name: UITypes.PhoneNumber, + icon: FilePhone, + }, + { + name: UITypes.Email, + icon: Email, + }, + { + name: UITypes.URL, + icon: Web, + }, + { + name: UITypes.Number, + icon: Numeric, + }, + { + name: UITypes.Decimal, + icon: Decimal, + }, + { + name: UITypes.Currency, + icon: CurrencyUsdCircleOutline, + }, + { + name: UITypes.Percent, + icon: PercentOutline, + }, + { + name: UITypes.Duration, + icon: TimerOutline, + }, + { + name: UITypes.Rating, + icon: Star, + }, + { + name: UITypes.Formula, + icon: MathIntegral, + virtual: 1, + }, + { + name: UITypes.Rollup, + icon: MovieRoll, + virtual: 1, + }, + { + name: UITypes.Count, + icon: Counter, + }, + { + name: UITypes.DateTime, + icon: CalendarClock, + }, + { + name: UITypes.AutoNumber, + icon: Numeric, + }, + { + name: UITypes.Geometry, + icon: 'mdi-ruler-square-compass', + }, + { + name: UITypes.JSON, + icon: 'mdi-code-json', + }, + { + name: UITypes.SpecificDBType, + icon: 'mdi-database-settings', + }, +] + +const getUIDTIcon = (uidt: UITypes) => { + return ( + [ + ...uiTypes, + { + name: UITypes.CreateTime, + icon: 'mdi-calendar-clock', + }, + { + name: UITypes.ID, + icon: 'mdi-identifier', + }, + { + name: UITypes.ForeignKey, + icon: 'mdi-link-variant', + }, + ].find((t) => t.name === uidt) || {} + ).icon +} + +export { uiTypes, getUIDTIcon } + +/** + * @copyright Copyright (c) 2021, Xgene Cloud Ltd + * + * @author Naveen MR + * @author Pranav C Balan + * + * @license GNU AGPL version 3 or any later version + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + */