feat: Add people to tag functaionality (GSoC)

public/locales/en/translation.json

@@ -332,7 +332,10 @@
     "successfullyUnassigned": "Tag unassigned from user",
     "addPeople": "Add People",
     "add": "Add",
-    "subTags": "Sub Tags"
+    "subTags": "Sub Tags",
+    "assignedToAll": "Tag Assigned to All",
+    "successfullyAssignedToPeople": "Tag assigned successfully",
+    "assignPeople": "Assign"
   },
   "userListCard": {
     "addAdmin": "Add Admin",

public/locales/fr/translation.json

@@ -332,7 +332,10 @@
     "successfullyUnassigned": "Étiquette retirée de l'utilisateur",
     "addPeople": "Ajouter des personnes",
     "add": "Ajouter",
-    "subTags": "Sous-étiquettes"
+    "subTags": "Sous-étiquettes",
+    "assignedToAll": "Étiquette attribuée à tous",
+    "successfullyAssignedToPeople": "Étiquette attribuée avec succès",
+    "assignPeople": "Attribuer"
   },
   "userListCard": {
     "addAdmin": "Ajouter un administrateur",

public/locales/hi/translation.json

@@ -332,7 +332,10 @@
     "successfullyUnassigned": "उपयोगकर्ता से टैग हटा दिया गया",
     "addPeople": "लोगों को जोड़ें",
     "add": "जोड़ें",
-    "subTags": "उप-टैग्स"
+    "subTags": "उप-टैग्स",
+    "assignedToAll": "सभी को टैग असाइन किया गया",
+    "successfullyAssignedToPeople": "टैग सफलतापूर्वक असाइन किया गया",
+    "assignPeople": "असाइन करें"
   },
   "userListCard": {
     "addAdmin": "व्यवस्थापक जोड़ें",

public/locales/sp/translation.json

@@ -332,7 +332,10 @@
     "successfullyUnassigned": "Etiqueta desasignada del usuario",
     "addPeople": "Agregar Personas",
     "add": "Agregar",
-    "subTags": "Subetiquetas"
+    "subTags": "Subetiquetas",
+    "assignedToAll": "Etiqueta asignada a todos",
+    "successfullyAssignedToPeople": "Etiqueta asignada con éxito",
+    "assignPeople": "Asignar"
   },
   "userListCard": {
     "joined": "Unido",

public/locales/zh/translation.json

@@ -332,7 +332,10 @@
     "successfullyUnassigned": "标签已从用户中取消分配",
     "addPeople": "添加人员",
     "add": "添加",
-    "subTags": "子标签"
+    "subTags": "子标签",
+    "assignedToAll": "标签分配给所有人",
+    "successfullyAssignedToPeople": "标签分配成功",
+    "assignPeople": "分配"
   },
   "userListCard": {
     "addAdmin": "添加管理员",

src/GraphQl/Mutations/TagMutations.ts

@@ -72,3 +72,18 @@ export const REMOVE_USER_TAG = gql`
     }
   }
 `;
+
+/**
+ * GraphQL mutation to add people to tag.
+ *
+ * @param tagId - Id of the tag to be assigned.
+ * @param userIds - Ids of the users to assign to.
+ */
+
+export const ADD_PEOPLE_TO_TAG = gql`
+  mutation AddPeopleToUserTag($tagId: ID!, $userIds: [ID!]!) {
+    addPeopleToUserTag(input: { tagId: $tagId, userIds: $userIds }) {
+      _id
+    }
+  }
+`;

src/GraphQl/Queries/userTagQueries.ts

@@ -84,6 +84,48 @@ export const USER_TAG_SUB_TAGS = gql`
   }
 `;
 
+/**
+ * GraphQL query to retrieve organization members that aren't assigned a certain tag.
+ *
+ * @param id - The ID of the tag.
+ * @returns The list of organization members.
+ */
+
+export const USER_TAGS_MEMBERS_TO_ASSIGN_TO = gql`
+  query GetMembersToAssignTo(
+    $id: ID!
+    $after: String
+    $before: String
+    $first: PositiveInt
+    $last: PositiveInt
+  ) {
+    getUserTag(id: $id) {
+      name
+      usersToAssignTo(
+        after: $after
+        before: $before
+        first: $first
+        last: $last
+      ) {
+        edges {
+          node {
+            _id
+            firstName
+            lastName
+          }
+        }
+        pageInfo {
+          startCursor
+          endCursor
+          hasNextPage
+          hasPreviousPage
+        }
+        totalCount
+      }
+    }
+  }
+`;
+
 /**
  * GraphQL query to retrieve the ancestor tags of a certain tag.
  *

src/components/AddPeopleToTag/AddPeopleToTag.module.css

@@ -0,0 +1,77 @@
+.errorContainer {
+  min-height: 100vh;
+}
+
+.errorMessage {
+  margin-top: 25%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.errorIcon {
+  transform: scale(1.5);
+  color: var(--bs-danger);
+  margin-bottom: 1rem;
+}
+
+.tableHeader {
+  background-color: var(--bs-primary);
+  color: var(--bs-white);
+  font-size: 1rem;
+}
+
+.rowBackground {
+  background-color: var(--bs-white);
+  max-height: 120px;
+}
+
+.scrollContainer {
+  max-height: 100px; /* Adjust as needed */
+  overflow-y: auto;
+  margin-bottom: 1rem;
+}
+
+.memberBadge {
+  display: flex;
+  align-items: center;
+  padding: 5px 10px;
+  border-radius: 12px;
+  background-color: #f8f9fa; /* Light background */
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  max-width: calc(100% - 30px); /* Ensure it fits within the container */
+}
+
+.removeFilterIcon {
+  cursor: pointer;
+}
+
+.scrollContainer {
+  max-height: 350px; /* Set your desired max height */
+  overflow-y: auto; /* Enable vertical scrolling */
+}
+
+/* SimpleLoader.css */
+.simple-loader {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid rgba(0, 0, 0, 0.1);
+  border-top-color: #3498db;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}