nocodb/packages/nc-gui/components/dlg/share-and-collaborate/View.vue

<script lang="ts" setup>
import { LoadingOutlined } from '@ant-design/icons-vue'
import ManageUsers from './ManageUsers.vue'
import { useViewsStore } from '~/store/views'

const { isViewToolbar } = defineProps<{
  isViewToolbar?: boolean
}>()

const { copy } = useCopy()
const { dashboardUrl } = useDashboard()
const projectStore = useProject()
const { project } = storeToRefs(projectStore)
const { navigateToProjectPage } = projectStore
const { activeView } = storeToRefs(useViewsStore())

let view
if (isViewToolbar) {
  try {
    const store = useSmartsheetStoreOrThrow()
    view = store.view
  } catch (e) {
    console.error(e)
  }
}

const { formStatus, showShareModal, invitationUsersData, isInvitationLinkCopied } = storeToRefs(useShare())
const { resetData } = useShare()
// const { inviteUser } = useManageUsers()

// const expandedSharedType = ref<'none' | 'project' | 'view'>('view')
const isOpeningManageAccess = ref(false)

const inviteUrl = computed(() =>
  invitationUsersData.value.invitationToken ? `${dashboardUrl.value}#/signup/${invitationUsersData.value.invitationToken}` : null,
)

const indicator = h(LoadingOutlined, {
  style: {
    fontSize: '24px',
  },
  spin: true,
})

/*
const onShare = async () => {
  if (!invitationValid) return

  await inviteUser({
    email: invitationUsersData.value.emails!,
    roles: invitationUsersData.value.role!,
  })
}
*/

const copyInvitationLink = async () => {
  await copy(inviteUrl.value!)

  isInvitationLinkCopied.value = true
}

const openManageAccess = async () => {
  isOpeningManageAccess.value = true
  try {
    await navigateToProjectPage({ page: 'collaborator' })
    showShareModal.value = false
  } catch (e) {
    console.error(e)
    message.error('Failed to open manage access')
  } finally {
    isOpeningManageAccess.value = false
  }
}

watch(showShareModal, (val) => {
  if (!val) {
    setTimeout(() => {
      resetData()
    }, 500)
  }
})
</script>

<template>
  <a-modal
    v-model:visible="showShareModal"
    class="!top-[55%]"
    :class="{ active: showShareModal }"
    wrap-class-name="nc-modal-share-collaborate"
    :closable="false"
    :mask-closable="formStatus === 'project-collaborateSaving' ? false : true"
    :ok-button-props="{ hidden: true } as any"
    :cancel-button-props="{ hidden: true } as any"
    :footer="null"
    :width="formStatus === 'manageCollaborators' ? '60rem' : '40rem'"
  >
    <div v-if="formStatus === 'project-collaborateSaving'" class="flex flex-row w-full px-5 justify-between items-center py-1">
      <div class="flex text-base" :style="{ fontWeight: 500 }">Adding Collaborators</div>
      <a-spin :indicator="indicator" />
    </div>
    <template v-else-if="formStatus === 'project-collaborateSaved'">
      <div class="flex flex-col py-1.5">
        <div class="flex flex-row w-full px-5 justify-between items-center py-0.5">
          <div class="flex text-base" :style="{ fontWeight: 500 }">Collaborators added</div>
          <div class="flex">
            <MdiCheck />
          </div>
        </div>
        <div class="flex flex-row mx-3 mt-2.5 pt-3.5 border-t-1 border-gray-100 justify-end gap-x-2">
          <a-button type="text" class="!border-1 !border-gray-200 !rounded-md" @click="showShareModal = false">Close </a-button>
          <a-button
            type="text"
            class="!border-1 !border-gray-200 !rounded-md"
            data-testid="docs-share-invitation-copy"
            :data-invite-link="inviteUrl"
            @click="copyInvitationLink"
          >
            <div v-if="isInvitationLinkCopied" class="flex flex-row items-center gap-x-1">
              <MdiTick class="h-3.5" />
              Copied invite link
            </div>
            <div v-else class="flex flex-row items-center gap-x-1">
              <MdiContentCopy class="h-3.3" />
              Copy invite link
            </div>
          </a-button>
        </div>
      </div>
    </template>
    <div v-else-if="formStatus === 'manageCollaborators'">
      <ManageUsers v-if="formStatus === 'manageCollaborators'" @close="formStatus = 'collaborate'" />
    </div>
    <div v-else class="flex flex-col px-1">
      <div class="flex flex-row justify-between items-center pb-1 mx-4 mt-3">
        <div class="flex text-base font-medium">Share</div>
      </div>
      <div v-if="isViewToolbar" class="share-view">
        <div class="flex flex-row items-center gap-x-2 px-4 pt-3 pb-3 select-none">
          <component
            :is="viewIcons[view?.type]?.icon"
            class="nc-view-icon group-hover"
            :style="{ color: viewIcons[view?.type]?.color }"
          />
          <div>Share View</div>
          <div
            class="max-w-79/100 ml-2 px-2 py-0.5 rounded-md bg-gray-100 capitalize text-ellipsis overflow-hidden"
            :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap' }"
          >
            {{ activeView.title }}
          </div>
        </div>
        <DlgShareAndCollaborateSharePage />
      </div>
      <div class="share-base">
        <div class="flex flex-row items-center gap-x-2 px-4 pt-3 pb-3 select-none">
          <GeneralProjectIcon :type="project.type" class="nc-view-icon group-hover" />

          <div>Share Base</div>
          <div
            class="max-w-79/100 ml-2 px-2 py-0.5 rounded-md bg-gray-100 capitalize text-ellipsis overflow-hidden"
            :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap' }"
          >
            {{ project.title }}
          </div>
        </div>
        <LazyDlgShareAndCollaborateShareBase />
      </div>
      <div class="flex flex-row justify-end mx-3 mt-1 mb-2 pt-4 gap-x-2">
        <NcButton type="secondary" data-testid="docs-cancel-btn" @click="showShareModal = false"> Close </NcButton>
        <NcButton
          data-testid="docs-share-manage-access"
          type="secondary"
          :loading="isOpeningManageAccess"
          @click="openManageAccess"
          >Manage project access</NcButton
        >

        <!-- <a-button
          v-if="formStatus === 'project-collaborate'"
          data-testid="docs-share-btn"
          class="!border-0 !rounded-md"
          type="primary"
          :disabled="!invitationValid"
          @click="onShare"
        >
          Share
        </a-button> -->
      </div>
    </div>
  </a-modal>
</template>

<style lang="scss" scoped>
.share-collapse-item {
  @apply !rounded-lg !mb-2 !mt-4 !border-0;
}

.ant-collapse {
  @apply !bg-white !border-0;
}
</style>

<style lang="scss">
.nc-modal-share-collaborate {
  .ant-modal {
    top: 28vh !important;
  }

  .share-view,
  .share-base {
    @apply !border-1 border-gray-200 mx-3 rounded-lg mt-3 px-1 py-1;
  }

  .ant-collapse-item {
    @apply !border-1 border-gray-100;
  }

  .ant-collapse-content {
    @apply !border-t-0;
  }

  .ant-collapse-content-box {
    @apply !p-0;
  }

  .ant-modal-content {
    @apply !rounded-lg !px-1 !py-2;
  }

  .ant-select-selector {
    @apply !rounded-md !border-gray-200 !border-1;
  }

  .ant-form-item {
    @apply !my-0;
  }

  .ant-form-item-explain {
    @apply !ml-3;
  }

  .ant-select {
    @apply !p-0.5;
  }

  .ant-select-selector {
    @apply !bg-white;
  }
}
</style>