Merge pull request #6575 from nocodb/nc-fix/expand

Fix: expanded Record

packages/nc-gui/assets/nc-icons/lookup.svg

@@ -0,0 +1,15 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Field Icons">
+<mask id="mask0_3_121" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect id="Bounding box" width="24" height="24" fill="#6a7184"/>
+</mask>
+<g mask="url(#mask0_3_121)">
+<g id="Group 58">
+<path id="Vector" d="M15.4615 15.0769L21 15.0769" stroke="#6a7184" stroke-width="1.33333" stroke-linecap="square" stroke-linejoin="round"/>
+<path id="Vector_2" d="M15.4615 9.53845L21 9.53845" stroke="#6a7184" stroke-width="1.33333" stroke-linecap="square" stroke-linejoin="round"/>
+<rect id="Rectangle 1" width="5.53846" height="16.6154" rx="1" transform="matrix(-1 0 0 1 21 4)" stroke="#6a7184" stroke-width="1.33"/>
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M12.0256 12.3077C12.0256 10.3817 10.4644 8.82049 8.53846 8.82049C6.61254 8.82049 5.05128 10.3817 5.05128 12.3077C5.05128 14.2336 6.61254 15.7948 8.53846 15.7948C10.4644 15.7948 12.0256 14.2336 12.0256 12.3077ZM8.53846 7.48715C11.2008 7.48715 13.359 9.64537 13.359 12.3077C13.359 14.97 11.2008 17.1282 8.53846 17.1282C7.4872 17.1282 6.51454 16.7917 5.72231 16.2205L5.47138 16.4714L3.47138 18.4714C3.21103 18.7318 2.78892 18.7318 2.52858 18.4714C2.26823 18.2111 2.26823 17.789 2.52858 17.5286L4.52858 15.5286L4.75813 15.299C4.10685 14.4771 3.71794 13.4378 3.71794 12.3077C3.71794 9.64537 5.87616 7.48715 8.53846 7.48715Z" fill="#6a7184"/>
+</g>
+</g>
+</g>
+</svg>

packages/nc-gui/components/cell/attachment/Image.vue

@@ -16,7 +16,7 @@ const onError = () => index.value++
 <template>
   <LazyNuxtImg
     v-if="index < props.srcs.length"
-    class="m-auto"
+    class="m-auto object-cover"
     :src="props.srcs[index]"
     :alt="props?.alt || ''"
     placeholder

packages/nc-gui/components/cell/attachment/Modal.vue

@@ -172,7 +172,7 @@ const handleFileDelete = (i: number) => {
               <LazyCellAttachmentImage
                 v-if="isImage(item.title, item.mimetype)"
                 :srcs="getPossibleAttachmentSrc(item)"
-                class="max-w-full max-h-full m-auto justify-center"
+                class="object-cover h-64 m-auto justify-center"
                 @click.stop="onClick(item)"
               />
 

packages/nc-gui/components/cell/attachment/index.vue

@@ -173,7 +173,7 @@ const onExpand = () => {
     ref="attachmentCellRef"
     tabindex="0"
     :style="{
-      height: isForm ? undefined : `max(${(rowHeight || 1) * 1.8}rem, 41px)`,
+      height: isForm || isExpandedForm ? undefined : `max(${(rowHeight || 1) * 1.8}rem, 41px)`,
     }"
     class="nc-attachment-cell relative flex color-transition flex items-center w-full"
     :class="{ 'justify-center': !active, 'justify-between': active }"
@@ -226,7 +226,7 @@ const onExpand = () => {
         :class="{ 'justify-center': !isExpandedForm && !isGallery }"
         class="flex cursor-pointer w-full items-center flex-wrap gap-2 py-1.5 scrollbar-thin-dull overflow-hidden mt-0 items-start"
         :style="{
-          maxHeight: isForm ? undefined : `max(${(rowHeight || 1) * 1.8}rem, 41px)`,
+          maxHeight: isForm || isExpandedForm ? undefined : `max(${(rowHeight || 1) * 1.8}rem, 41px)`,
         }"
       >
         <template v-for="(item, i) of visibleItems" :key="item.url || item.title">

packages/nc-gui/components/smartsheet/expanded-form/Comments.vue

@@ -102,15 +102,6 @@ const saveComment = async () => {
 watch(commentsWrapperEl, () => {
   scrollComments()
 })
-
-// Ignore first line if its the only one
-const processedAudit = (log: string) => {
-  const dotSplit = log.split('.')
-
-  if (dotSplit.length === 1) return log
-
-  return log.substring(log.indexOf('.') + 1)
-}
 </script>
 
 <template>
@@ -238,7 +229,7 @@ const processedAudit = (log: string) => {
           </div>
         </template>
         <div v-for="log of audits" :key="log.id">
-          <div class="bg-white rounded-xl border-1 gap-3 border-gray-200">
+          <div v-if="log.details" class="bg-white rounded-xl border-1 gap-3 border-gray-200">
             <div class="flex flex-col p-4 gap-3">
               <div class="flex justify-between">
                 <div class="flex items-center gap-2">
@@ -253,9 +244,7 @@ const processedAudit = (log: string) => {
                   </div>
                 </div>
               </div>
-              <div class="text-sm font-medium text-gray-700">
-                {{ processedAudit(log.description) }}
-              </div>
+              <div v-dompurify-html="log.details" class="text-sm font-medium"></div>
             </div>
           </div>
         </div>
@@ -271,4 +260,16 @@ const processedAudit = (log: string) => {
   white-space: 'nowrap';
   display: 'inline';
 }
+
+.text-decoration-line-through {
+  text-decoration: line-through;
+}
+
+:deep(.red.lighten-4) {
+  @apply bg-red-100 rounded-md line-through;
+}
+
+:deep(.green.lighten-4) {
+  @apply bg-green-100 rounded-md !mr-3 !leading-6;
+}
 </style>

packages/nc-gui/components/smartsheet/expanded-form/index.vue

@@ -51,6 +51,10 @@ const key = ref(0)
 
 const wrapper = ref()
 
+const { dashboardUrl } = useDashboard()
+
+const { copy } = useClipboard()
+
 const { isMobileMode } = useGlobal()
 
 const { t } = useI18n()
@@ -63,6 +67,8 @@ const state = toRef(props, 'state')
 
 const meta = toRef(props, 'meta')
 
+const route = useRoute()
+
 const router = useRouter()
 
 const isPublic = inject(IsPublicInj, ref(false))
@@ -188,6 +194,17 @@ const onNext = async () => {
   }
 }
 
+const copyRecordUrl = () => {
+  copy(
+    encodeURI(
+      `${dashboardUrl?.value}#/${route.params.typeOrId}/${route.params.projectId}/${meta.value?.id}${
+        props.view ? `/${props.view.title}` : ''
+      }?rowId=${primaryKey.value}`,
+    ),
+  )
+  message.success('Copied to clipboard')
+}
+
 const saveChanges = async () => {
   isUnsavedFormExist.value = false
   await save()
@@ -418,6 +435,12 @@ export default {
                       {{ $t('general.reload') }}
                     </div>
                   </NcMenuItem>
+                  <NcMenuItem v-if="!isNew" class="text-gray-700" @click="!isNew ? copyRecordUrl() : () => {}">
+                    <div v-e="['c:row-expand:copy-url']" data-testid="nc-expanded-form-copy-url" class="flex gap-2 items-center">
+                      <component :is="iconMap.link" class="cursor-pointer nc-duplicate-row" />
+                      Copy record URL
+                    </div>
+                  </NcMenuItem>
                   <NcMenuItem
                     v-if="isUIAllowed('dataEdit') && !isNew"
                     class="text-gray-700"
@@ -683,9 +706,9 @@ export default {
     <template #entity-preview>
       <span>
         <div class="flex flex-row items-center py-2.25 px-2.5 bg-gray-50 rounded-lg text-gray-700 mb-4">
-          <component :is="iconMap.table" class="nc-view-icon" />
+          <component :is="iconMap.record" class="nc-view-icon" />
           <div class="capitalize text-ellipsis overflow-hidden select-none w-full pl-1.75 break-keep whitespace-nowrap">
-            {{ meta.title }}
+            {{ displayValue }}
           </div>
         </div>
       </span>

packages/nc-gui/utils/iconUtils.ts

@@ -89,6 +89,7 @@ import ManytoManySolidIcon from '~icons/nc-icons/mm-solid'
 import BelongsToSolidIcon from '~icons/nc-icons/bt-solid'
 import Record from '~icons/nc-icons/record'
 import Project from '~icons/nc-icons/project'
+import LookupIcon from '~icons/nc-icons/lookup'
 
 // Roles
 import Owner from '~icons/nc-icons/owner'
@@ -347,7 +348,7 @@ export const iconMap = {
   deleteListItem: h('span', { class: 'material-symbols' }, 'delete'),
   import: h('span', { class: 'material-symbols' }, 'system_update_alt'),
   edit: MaterialSymbolsEdit,
-  lookup: h('span', { class: 'material-symbols' }, 'search'),
+  lookup: LookupIcon,
   text: h('span', { class: 'material-symbols' }, 'text_fields'),
   longText: h('span', { class: 'material-symbols' }, 'view_headline'),
   clock: h('span', { class: 'material-symbols' }, 'access_time'),