feat(nc-gui): ui acl

packages/nc-gui/components/smartsheet/calendar/DayView.vue

@@ -9,6 +9,8 @@ const fields = inject(FieldsInj, ref([]))
 
 const container = ref()
 
+const { isUIAllowed } = useRoles()
+
 const displayField = computed(() => meta.value?.columns?.find((c) => c.pv && fields.value.includes(c)) ?? null)
 
 const { selectedTime, selectedDate, calDataType, formattedData, formattedSideBarData, calendarRange, updateRowProperty } =
@@ -109,6 +111,7 @@ const hours = computed(() => {
 const dragElement = ref<HTMLElement | null>(null)
 
 const dragStart = (event: DragEvent, record: Row) => {
+  if (isUIAllowed('dataEdit')) return
   dragElement.value = event.target as HTMLElement
 
   dragElement.value.classList.add('hide')
@@ -129,6 +132,7 @@ const dragStart = (event: DragEvent, record: Row) => {
 }
 
 const dropEvent = (event: DragEvent) => {
+  if (isUIAllowed('dataEdit')) return
   event.preventDefault()
   const data = event.dataTransfer?.getData('text/plain')
   if (data) {

packages/nc-gui/components/smartsheet/calendar/MonthView.vue

@@ -19,6 +19,8 @@ const {
 
 const isMondayFirst = ref(true)
 
+const { isUIAllowed } = useRoles()
+
 const meta = inject(MetaInj, ref())
 
 const days = computed(() => {
@@ -357,6 +359,8 @@ const useDebouncedRowUpdate = useDebounceFn((row: Row, updateProperty: string[],
 }, 500)
 
 const onResize = (event: MouseEvent) => {
+  if (!isUIAllowed('dataEdit')) return
+
   const { top, height, width, left } = calendarGridContainer.value.getBoundingClientRect()
 
   const percentY = (event.clientY - top - window.scrollY) / height
@@ -438,6 +442,8 @@ const onResizeEnd = () => {
 }
 
 const onResizeStart = (direction: 'right' | 'left', event: MouseEvent, record: Row) => {
+  if (!isUIAllowed('dataEdit')) return
+
   if (draggingId.value) return
   resizeInProgress.value = true
   resizeDirection.value = direction
@@ -447,6 +453,8 @@ const onResizeStart = (direction: 'right' | 'left', event: MouseEvent, record: R
 }
 
 const stopDrag = (event: MouseEvent) => {
+  if (!isUIAllowed('dataEdit')) return
+
   event.preventDefault()
   clearTimeout(dragTimeout.value)
 
@@ -542,6 +550,7 @@ const stopDrag = (event: MouseEvent) => {
 }
 
 const dragStart = (event: MouseEvent, record: Row) => {
+  if (!isUIAllowed('dataEdit')) return
   if (resizeInProgress.value) return
   let target = event.target as HTMLElement
 
@@ -621,7 +630,7 @@ onBeforeUnmount(() => {
           class="text-right relative group text-sm h-full border-r-1 border-b-1 border-gray-200 font-semibold hover:bg-gray-50 text-gray-800 bg-white"
           @click="selectDate(day)"
         >
-          <div class="flex justify-between p-1">
+          <div v-if="isUIAllowed('dataEdit')" class="flex justify-between p-1">
             <span
               :class="{
                 block: !isDateSelected(day),
@@ -669,7 +678,6 @@ onBeforeUnmount(() => {
               </template>
             </NcDropdown>
             <NcButton
-              v-else
               :class="{
                 '!block': isDateSelected(day),
                 '!hidden': !isDateSelected(day),
@@ -690,9 +698,10 @@ onBeforeUnmount(() => {
             >
               <component :is="iconMap.plus" class="h-4 w-4" />
             </NcButton>
-
             <span class="px-1 py-2">{{ dayjs(day).format('DD') }}</span>
           </div>
+          <div v-if="!isUIAllowed('dataEdit')" class="p-3">{{ dayjs(day).format('DD') }}</div>
+
           <div
             v-if="
               recordsToDisplay.count[dayjs(day).format('YYYY-MM-DD')] &&
@@ -732,7 +741,7 @@ onBeforeUnmount(() => {
             :name="record.row[displayField.title]"
             :position="record.rowMeta.position"
             :record="record"
-            :resize="!!record.rowMeta.range?.fk_to_col"
+            :resize="!!record.rowMeta.range?.fk_to_col && isUIAllowed('dataEdit')"
             :selected="
               dragRecord
                 ? dragRecord.rowMeta.id === record.rowMeta.id

packages/nc-gui/components/smartsheet/calendar/RecordCard.vue

@@ -62,7 +62,7 @@ const emit = defineEmits(['resize-start'])
     </div>
 
     <div
-      v-if="position === 'leftRounded' || (position === 'rounded' && resize)"
+      v-if="(position === 'leftRounded' || position === 'rounded') && resize"
       :class="{
         '!block border-2 rounded-lg border-brand-500': selected,
       }"
@@ -80,7 +80,7 @@ const emit = defineEmits(['resize-start'])
       <span v-if="position === 'leftRounded' || position === 'none'" class="absolute my-0 right-5"> .... </span>
     </div>
     <div
-      v-if="position === 'rightRounded' || (position === 'rounded' && resize)"
+      v-if="(position === 'rightRounded' || position === 'rounded') && resize"
       :class="{
         '!block border-2 rounded-lg border-brand-500': selected,
       }"

packages/nc-gui/components/smartsheet/calendar/SideMenu.vue

@@ -12,6 +12,8 @@ const emit = defineEmits(['expand-record', 'new-record'])
 
 const INFINITY_SCROLL_THRESHOLD = 100
 
+const { isUIAllowed } = useRoles()
+
 const { appInfo } = useGlobal()
 
 const { t } = useI18n()
@@ -282,7 +284,12 @@ const sideBarListScrollHandle = useDebounceFn(async (e: Event) => {
         class="gap-2 flex flex-col nc-scrollbar-md overflow-y-auto nc-calendar-top-height"
         @scroll="sideBarListScrollHandle"
       >
-        <NcButton class="!absolute right-5 bottom-5 !h-12 !w-12" type="secondary" @click="emit('new-record', { row: {} })">
+        <NcButton
+          v-if="isUIAllowed('dataEdit')"
+          class="!absolute right-5 bottom-5 !h-12 !w-12"
+          type="secondary"
+          @click="emit('new-record', { row: {} })"
+        >
           <div class="px-4 flex items-center gap-2 justify-center">
             <component :is="iconMap.plus" class="h-6 w-6 text-lg text-brand-500" />
           </div>

packages/nc-gui/components/smartsheet/calendar/WeekView.vue

@@ -20,6 +20,8 @@ const container = ref<null | HTMLElement>(null)
 
 const { width: containerWidth } = useElementSize(container)
 
+const { isUIAllowed } = useRoles()
+
 const meta = inject(MetaInj, ref())
 
 const weekDates = computed(() => {
@@ -220,6 +222,7 @@ const useDebouncedRowUpdate = useDebounceFn((row: Row, updateProperty: string[],
 }, 500)
 
 const onResize = (event: MouseEvent) => {
+  if (!isUIAllowed('dataEdit')) return
   if (!container.value || !resizeRecord.value) return
   const { width, left } = container.value.getBoundingClientRect()
 
@@ -299,6 +302,7 @@ const onResizeEnd = () => {
 }
 
 const onResizeStart = (direction: 'right' | 'left', event: MouseEvent, record: Row) => {
+  if (!isUIAllowed('dataEdit')) return
   resizeInProgress.value = true
   resizeDirection.value = direction
   resizeRecord.value = record
@@ -307,6 +311,7 @@ const onResizeStart = (direction: 'right' | 'left', event: MouseEvent, record: R
 }
 
 const onDrag = (event: MouseEvent) => {
+  if (!isUIAllowed('dataEdit')) return
   if (!container.value || !dragRecord.value) return
   const { width, left } = container.value.getBoundingClientRect()
 
@@ -361,6 +366,7 @@ const onDrag = (event: MouseEvent) => {
 
 const stopDrag = (event: MouseEvent) => {
   event.preventDefault()
+  if (!isUIAllowed('dataEdit')) return
   if (!isDragging.value || !container.value || !dragRecord.value) return
 
   const { width, left } = container.value.getBoundingClientRect()
@@ -447,6 +453,7 @@ const stopDrag = (event: MouseEvent) => {
 }
 
 const dragStart = (event: MouseEvent, record: Row) => {
+  if (!isUIAllowed('dataEdit')) return
   if (resizeInProgress.value) return
   let target = event.target as HTMLElement
 
@@ -521,7 +528,7 @@ const dragStart = (event: MouseEvent, record: Row) => {
             :name="record.row[displayField!.title!]"
             :position="record.rowMeta.position"
             :record="record"
-            :resize="!!record.rowMeta.range?.fk_to_col"
+            :resize="!!record.rowMeta.range?.fk_to_col && isUIAllowed('dataEdit')"
             color="blue"
             @click="emits('expand-record', record)"
             @resize-start="onResizeStart"