From a988acbfc75fa34ef2a66593aca9274ccb530071 Mon Sep 17 00:00:00 2001 From: DarkPhoenix2704 Date: Tue, 12 Sep 2023 13:30:01 +0530 Subject: [PATCH] feat: links modal revamp --- .../nc-gui/assets/icons/FileIconImageBox.png | Bin 462 -> 6314 bytes packages/nc-gui/assets/nc-icons/belongsto.svg | 16 + packages/nc-gui/assets/nc-icons/file.svg | 7 + packages/nc-gui/assets/nc-icons/hasmany.svg | 16 + packages/nc-gui/assets/nc-icons/info.svg | 12 + .../nc-gui/assets/nc-icons/manytomany.svg | 10 + packages/nc-gui/assets/nc-icons/maximize.svg | 6 + .../nc-gui/assets/nc-icons/multi-file.svg | 8 + packages/nc-gui/assets/nc-icons/onetoone.svg | 5 + packages/nc-gui/assets/style.scss | 47 ++- .../nc-gui/components/smartsheet/Cell.vue | 5 +- .../smartsheet/expanded-form/Header.vue | 6 +- .../components/smartsheet/header/Cell.vue | 5 +- .../smartsheet/header/VirtualCell.vue | 4 +- .../nc-gui/components/virtual-cell/Links.vue | 47 ++- .../virtual-cell/components/Header.vue | 114 +++++++ .../components/ListChildItems.vue | 239 +++++++------- .../virtual-cell/components/ListItem.vue | 122 ++++++++ .../virtual-cell/components/ListItems.vue | 295 ++++++++---------- .../composables/useExpandedFormStore.ts | 25 +- packages/nc-gui/composables/useLTARStore.ts | 86 ++++- packages/nc-gui/windi.config.ts | 48 +++ .../Dashboard/Grid/Column/LTAR/LinkRecord.ts | 2 +- .../tests/db/features/undo-redo.spec.ts | 6 +- 24 files changed, 813 insertions(+), 318 deletions(-) create mode 100644 packages/nc-gui/assets/nc-icons/belongsto.svg create mode 100644 packages/nc-gui/assets/nc-icons/file.svg create mode 100644 packages/nc-gui/assets/nc-icons/hasmany.svg create mode 100644 packages/nc-gui/assets/nc-icons/info.svg create mode 100644 packages/nc-gui/assets/nc-icons/manytomany.svg create mode 100644 packages/nc-gui/assets/nc-icons/maximize.svg create mode 100644 packages/nc-gui/assets/nc-icons/multi-file.svg create mode 100644 packages/nc-gui/assets/nc-icons/onetoone.svg create mode 100644 packages/nc-gui/components/virtual-cell/components/Header.vue create mode 100644 packages/nc-gui/components/virtual-cell/components/ListItem.vue diff --git a/packages/nc-gui/assets/icons/FileIconImageBox.png b/packages/nc-gui/assets/icons/FileIconImageBox.png index c2ac3cb103fd7acb0c67e439c58f9b938fc2ac2d..9815024ca08ec581f34f7ee88409281bf18fde35 100644 GIT binary patch literal 6314 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 Ef@O};Y5)KL diff --git a/packages/nc-gui/assets/nc-icons/belongsto.svg b/packages/nc-gui/assets/nc-icons/belongsto.svg new file mode 100644 index 0000000000..306bb782bd --- /dev/null +++ b/packages/nc-gui/assets/nc-icons/belongsto.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/packages/nc-gui/assets/nc-icons/file.svg b/packages/nc-gui/assets/nc-icons/file.svg new file mode 100644 index 0000000000..931fe7264a --- /dev/null +++ b/packages/nc-gui/assets/nc-icons/file.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/nc-gui/assets/nc-icons/hasmany.svg b/packages/nc-gui/assets/nc-icons/hasmany.svg new file mode 100644 index 0000000000..0514bae918 --- /dev/null +++ b/packages/nc-gui/assets/nc-icons/hasmany.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/packages/nc-gui/assets/nc-icons/info.svg b/packages/nc-gui/assets/nc-icons/info.svg new file mode 100644 index 0000000000..4d7f8e313f --- /dev/null +++ b/packages/nc-gui/assets/nc-icons/info.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/packages/nc-gui/assets/nc-icons/manytomany.svg b/packages/nc-gui/assets/nc-icons/manytomany.svg new file mode 100644 index 0000000000..9ccae85eec --- /dev/null +++ b/packages/nc-gui/assets/nc-icons/manytomany.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/nc-gui/assets/nc-icons/maximize.svg b/packages/nc-gui/assets/nc-icons/maximize.svg new file mode 100644 index 0000000000..5ebeb1d312 --- /dev/null +++ b/packages/nc-gui/assets/nc-icons/maximize.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/nc-gui/assets/nc-icons/multi-file.svg b/packages/nc-gui/assets/nc-icons/multi-file.svg new file mode 100644 index 0000000000..b9540989e4 --- /dev/null +++ b/packages/nc-gui/assets/nc-icons/multi-file.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/packages/nc-gui/assets/nc-icons/onetoone.svg b/packages/nc-gui/assets/nc-icons/onetoone.svg new file mode 100644 index 0000000000..e95ce0646f --- /dev/null +++ b/packages/nc-gui/assets/nc-icons/onetoone.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss index c50fa26b64..192fe47592 100644 --- a/packages/nc-gui/assets/style.scss +++ b/packages/nc-gui/assets/style.scss @@ -422,7 +422,7 @@ a { } .ant-modal { - @apply !top-[50px]; + @apply !top-[50px] !w-[700px]; } .ant-modal-content { @apply !p-6; @@ -542,3 +542,48 @@ a { input[type='number'] { @apply !outline-none !ring-0 !border-0; } + +.ant-pagination { + @apply !flex !flex-row !gap-1; +} + +.ant-pagination .ant-pagination-prev { + @apply !border-1 !rounded-md !border-gray-200 transform scale-95; +} + +.ant-pagination .ant-pagination-item { + @apply !bg-white !rounded-md !border-1 !scale-110 !border-gray-200 !flex !items-center !justify-center; +} + +.ant-pagination .ant-pagination-item a { + @apply !no-underline !text-gray-700; +} +.ant-pagination .ant-pagination-item-active a { + @apply !text-brand-500; +} + +.ant-pagination .ant-pagination-next { + @apply !border-1 !rounded-md !border-gray-200 scale-95; +} + +.ant-pagination .ant-pagination-item-active { + @apply !bg-brand-50 !text-brand-500 !border-0 !scale-110; +} +.ant-pagination .ant-pagination-item-link { + @apply !flex !items-center !justify-center; +} + +.ant-pagination .ant-pagination-jump-next-custom-icon .ant-pagination-item-link { + @apply !block; +} +.ant-pagination .ant-pagination-jump-prev-custom-icon .ant-pagination-item-link { + @apply !block; +} + +.ant-card-body { + @apply !p-2; +} + +.ant-pagination .ant-pagination-item-link-icon { + @apply !block !py-1.5; +} diff --git a/packages/nc-gui/components/smartsheet/Cell.vue b/packages/nc-gui/components/smartsheet/Cell.vue index 9a71313a8a..e3de75a925 100644 --- a/packages/nc-gui/components/smartsheet/Cell.vue +++ b/packages/nc-gui/components/smartsheet/Cell.vue @@ -6,6 +6,7 @@ import { ColumnInj, EditColumnInj, EditModeInj, + IsExpandedFormOpenInj, IsFormInj, IsLockedInj, IsPublicInj, @@ -90,6 +91,8 @@ const isSurveyForm = inject(IsSurveyFormInj, ref(false)) const isEditColumnMenu = inject(EditColumnInj, ref(false)) +const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false)) + const { currentRow } = useSmartsheetRowStoreOrThrow() const { sqlUis } = storeToRefs(useProject()) @@ -200,7 +203,7 @@ onUnmounted(() => { class="nc-cell w-full h-full relative" :class="[ `nc-cell-${(column?.uidt || 'default').toLowerCase()}`, - { 'text-blue-600': isPrimary(column) && !props.virtual && !isForm }, + { 'text-brand-500': isPrimary(column) && !props.virtual && !isForm }, { 'nc-grid-numeric-cell': isGrid && !isForm && isNumericField }, { 'h-[40px]': !props.editEnabled && isForm && !isSurveyForm && !isAttachment(column) && !props.virtual }, ]" diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue index 991daa19e2..0de4f5c584 100644 --- a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue +++ b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue @@ -20,7 +20,7 @@ const route = useRoute() const { meta, isSqlView } = useSmartsheetStoreOrThrow() -const { commentsDrawer, displayValue, primaryKey, save: _save, loadRow } = useExpandedFormStoreOrThrow() +const { commentsDrawer, displayValue, primaryKey, save: _save, loadRow, deleteRowById } = useExpandedFormStoreOrThrow() const { isNew, syncLTARRefs, state } = useSmartsheetRowStoreOrThrow() @@ -72,8 +72,6 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => { const showDeleteRowModal = ref(false) -const { deleteRowById } = useViewData(meta, ref(props.view)) - const onDeleteRowClick = () => { showDeleteRowModal.value = true } @@ -81,7 +79,7 @@ const onDeleteRowClick = () => { const onConfirmDeleteRowClick = async () => { showDeleteRowModal.value = false await deleteRowById(primaryKey.value) - reloadTrigger.trigger() + await reloadTrigger.trigger() emit('cancel') message.success('Row deleted') } diff --git a/packages/nc-gui/components/smartsheet/header/Cell.vue b/packages/nc-gui/components/smartsheet/header/Cell.vue index 4ba762705d..1887328765 100644 --- a/packages/nc-gui/components/smartsheet/header/Cell.vue +++ b/packages/nc-gui/components/smartsheet/header/Cell.vue @@ -6,6 +6,7 @@ interface Props { column: ColumnType required?: boolean | number hideMenu?: boolean + hideIcon?: boolean } const props = defineProps() @@ -53,7 +54,7 @@ const openHeaderMenu = () => { @click.right="isDropDownOpen = !isDropDownOpen" @click="isDropDownOpen = false" > - +
{ diff --git a/packages/nc-gui/components/smartsheet/header/VirtualCell.vue b/packages/nc-gui/components/smartsheet/header/VirtualCell.vue index fad5af03b7..153537e894 100644 --- a/packages/nc-gui/components/smartsheet/header/VirtualCell.vue +++ b/packages/nc-gui/components/smartsheet/header/VirtualCell.vue @@ -22,7 +22,7 @@ import { useUIPermission, } from '#imports' -const props = defineProps<{ column: ColumnType; hideMenu?: boolean; required?: boolean | number }>() +const props = defineProps<{ column: ColumnType; hideMenu?: boolean; required?: boolean | number; hideIcon?: boolean }>() const { t } = useI18n() @@ -126,7 +126,7 @@ const closeAddColumnDropdown = () => { :class="{ 'h-full': column }" @click.right="isDropDownOpen = !isDropDownOpen" > - +