From 7cebbc94256d980e9477cf43dc520a60ebbf28db Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 17 Feb 2024 06:09:49 +0000
Subject: [PATCH] feat(nc-gui): user management placeholder oss

---
 .../nc-gui/components/account/UserList.vue    | 20 +++++++++++++++----
 .../workspace/CollaboratorsList.vue           |  2 +-
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/account/UserList.vue b/packages/nc-gui/components/account/UserList.vue
index 53b3c2ebfc..8c24bf0048 100644
--- a/packages/nc-gui/components/account/UserList.vue
+++ b/packages/nc-gui/components/account/UserList.vue
@@ -273,9 +273,9 @@ const openDeleteModal = (user: UserType) => {
                       class="w-4 h-4 text-primary"
                     />
                   </div>
-                  <span class="text-gray-500 text-xs whitespace-normal" data-rec="true">
+                  <div class="text-gray-500 text-xs whitespace-normal" data-rec="true">
                     {{ $t('msg.info.roles.orgCreator') }}
-                  </span>
+                  </div>
                 </a-select-option>
 
                 <a-select-option
@@ -292,9 +292,9 @@ const openDeleteModal = (user: UserType) => {
                       class="w-4 h-4 text-primary"
                     />
                   </div>
-                  <span class="text-gray-500 text-xs whitespace-normal" data-rec="true">
+                  <div class="text-gray-500 text-xs whitespace-normal" data-rec="true">
                     {{ $t('msg.info.roles.orgViewer') }}
-                  </span>
+                  </div>
                 </a-select-option>
               </NcSelect>
               <div v-else class="font-weight-bold" data-rec="true">
@@ -345,6 +345,18 @@ const openDeleteModal = (user: UserType) => {
               </div>
             </span>
           </div>
+          <div
+            v-if="sortedUsers.length === 1"
+            class="user pt-12 pb-4 flex flex-col items-center gap-6 text-center border-b-1 border-l-1 border-r-1"
+          >
+            <div class="text-2xl text-gray-800 font-bold">
+              {{ $t('placeholder.inviteYourTeam') }}
+            </div>
+            <div class="text-sm text-gray-700">
+              {{ $t('placeholder.inviteYourTeamLabel') }}
+            </div>
+            <img src="~assets/img/placeholder/invite-team.png" class="!w-[30rem] flex-none" />
+          </div>
         </section>
       </div>
       <div v-if="pagination.total > 10" class="flex items-center justify-center mt-4">
diff --git a/packages/nc-gui/components/workspace/CollaboratorsList.vue b/packages/nc-gui/components/workspace/CollaboratorsList.vue
index 0c4d707e91..ded6041bba 100644
--- a/packages/nc-gui/components/workspace/CollaboratorsList.vue
+++ b/packages/nc-gui/components/workspace/CollaboratorsList.vue
@@ -152,7 +152,7 @@ onMounted(async () => {
               </NcDropdown>
             </div>
           </div>
-          <div class="pt-12 pb-4 flex flex-col items-center gap-6 text-center">
+          <div v-if="sortedCollaborators.length === 1" class="pt-12 pb-4 flex flex-col items-center gap-6 text-center">
             <div class="text-2xl text-gray-800 font-bold">
               {{ $t('placeholder.inviteYourTeam') }}
             </div>