feat: Add people to tag functaionality (GSoC) (#2355)

* add people to tag functaionality * minor change * more translations * minor change * add a variable for page size
PalisadoesFoundation · Oct 27, 2024 · d9d7269 · d9d7269
1 parent 6393648
commit d9d7269
Show file tree

Hide file tree

Showing 16 changed files with 1,040 additions and 58 deletions.
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -332,7 +332,14 @@
     "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",
+    "errorOccurredWhileLoadingMembers": "Error occured while loading members",
+    "userName": "User Name",
+    "actions": "Actions",
+    "noOneSelected": "No One Selected"
   },
   "userListCard": {
     "addAdmin": "Add Admin",

diff --git a/public/locales/fr/translation.json b/public/locales/fr/translation.json
@@ -332,7 +332,14 @@
     "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",
+    "errorOccurredWhileLoadingMembers": "Erreur survenue lors du chargement des membres",
+    "userName": "Nom d'utilisateur",
+    "actions": "Actions",
+    "noOneSelected": "Personne sélectionnée"
   },
   "userListCard": {
     "addAdmin": "Ajouter un administrateur",

diff --git a/public/locales/hi/translation.json b/public/locales/hi/translation.json
@@ -332,7 +332,14 @@
     "successfullyUnassigned": "उपयोगकर्ता से टैग हटा दिया गया",
     "addPeople": "लोगों को जोड़ें",
     "add": "जोड़ें",
-    "subTags": "उप-टैग्स"
+    "subTags": "उप-टैग्स",
+    "assignedToAll": "सभी को टैग असाइन किया गया",
+    "successfullyAssignedToPeople": "टैग सफलतापूर्वक असाइन किया गया",
+    "assignPeople": "असाइन करें",
+    "errorOccurredWhileLoadingMembers": "सदस्यों को लोड करते समय त्रुटि हुई",
+    "userName": "उपयोगकर्ता नाम",
+    "actions": "क्रियाएँ",
+    "noOneSelected": "कोई चयनित नहीं"
   },
   "userListCard": {
     "addAdmin": "व्यवस्थापक जोड़ें",

diff --git a/public/locales/sp/translation.json b/public/locales/sp/translation.json
@@ -332,7 +332,14 @@
     "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",
+    "errorOccurredWhileLoadingMembers": "Error al cargar los miembros",
+    "userName": "Nombre de usuario",
+    "actions": "Acciones",
+    "noOneSelected": "Nadie seleccionado"
   },
   "userListCard": {
     "joined": "Unido",

diff --git a/public/locales/zh/translation.json b/public/locales/zh/translation.json
@@ -332,7 +332,14 @@
     "successfullyUnassigned": "标签已从用户中取消分配",
     "addPeople": "添加人员",
     "add": "添加",
-    "subTags": "子标签"
+    "subTags": "子标签",
+    "assignedToAll": "标签分配给所有人",
+    "successfullyAssignedToPeople": "标签分配成功",
+    "assignPeople": "分配",
+    "errorOccurredWhileLoadingMembers": "加载成员时出错",
+    "userName": "用户名",
+    "actions": "操作",
+    "noOneSelected": "未选择任何人"
   },
   "userListCard": {
     "addAdmin": "添加管理员",

diff --git a/src/GraphQl/Mutations/TagMutations.ts b/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
+    }
+  }
+`;
diff --git a/src/GraphQl/Queries/userTagQueries.ts b/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.
  *

diff --git a/src/components/AddPeopleToTag/AddPeopleToTag.module.css b/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);
+  }
+}