feat: Add functionalities for bulk tag operations (GSoC)

public/locales/en/translation.json

@@ -335,11 +335,24 @@
     "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"
+    "noOneSelected": "No One Selected",
+    "assignToTags": "Assign to Tags",
+    "removeFromTags": "Remove from Tags",
+    "assign": "Assign",
+    "remove": "Remove",
+    "successfullyAssignedToTags": "Successfully Assigned to Tags",
+    "successfullyRemovedFromTags": "Successfully Removed from Tags",
+    "errorOccurredWhileLoadingOrganizationUserTags": "Error occured while loading organization tags",
+    "removeUserTag": "Delete Tag",
+    "removeUserTagMessage": "Do you want to delete this tag? It delete all the sub tags and all the associations.",
+    "tagDetails": "Tag Details",
+    "tagName": "Name",
+    "tagUpdationSuccess": "Tag updated successfully",
+    "tagRemovalSuccess": "Tag deleted successfully",
+    "noTagSelected": "No Tag Selected"
   },
   "userListCard": {
     "addAdmin": "Add Admin",

public/locales/fr/translation.json

@@ -330,7 +330,6 @@
     "unassignUserTag": "Désassigner l'étiquette",
     "unassignUserTagMessage": "Voulez-vous retirer l'étiquette de cet utilisateur?",
     "successfullyUnassigned": "Étiquette retirée de l'utilisateur",
-    "addPeople": "Ajouter des personnes",
     "add": "Ajouter",
     "subTags": "Sous-étiquettes",
     "assignedToAll": "Étiquette attribuée à tous",
@@ -339,7 +338,21 @@
     "errorOccurredWhileLoadingMembers": "Erreur survenue lors du chargement des membres",
     "userName": "Nom d'utilisateur",
     "actions": "Actions",
-    "noOneSelected": "Personne sélectionnée"
+    "noOneSelected": "Personne sélectionnée",
+    "assignToTags": "Attribuer aux tags",
+    "removeFromTags": "Retirer des tags",
+    "assign": "Attribuer",
+    "remove": "Retirer",
+    "successfullyAssignedToTags": "Attribué aux tags avec succès",
+    "successfullyRemovedFromTags": "Retiré des tags avec succès",
+    "errorOccurredWhileLoadingOrganizationUserTags": "Erreur lors du chargement des tags de l'organisation",
+    "removeUserTag": "Supprimer le tag",
+    "removeUserTagMessage": "Voulez-vous supprimer ce tag ? Cela supprimera tous les sous-tags et toutes les associations.",
+    "tagDetails": "Détails du tag",
+    "tagName": "Nom",
+    "tagUpdationSuccess": "Étiquette mise à jour avec succès",
+    "tagRemovalSuccess": "Étiquette supprimée avec succès",
+    "noTagSelected": "Aucun tag sélectionné"
   },
   "userListCard": {
     "addAdmin": "Ajouter un administrateur",

public/locales/hi/translation.json

@@ -335,11 +335,24 @@
     "subTags": "उप-टैग्स",
     "assignedToAll": "सभी को टैग असाइन किया गया",
     "successfullyAssignedToPeople": "टैग सफलतापूर्वक असाइन किया गया",
-    "assignPeople": "असाइन करें",
     "errorOccurredWhileLoadingMembers": "सदस्यों को लोड करते समय त्रुटि हुई",
     "userName": "उपयोगकर्ता नाम",
     "actions": "क्रियाएँ",
-    "noOneSelected": "कोई चयनित नहीं"
+    "noOneSelected": "कोई चयनित नहीं",
+    "assignToTags": "टैग्स को असाइन करें",
+    "removeFromTags": "टैग्स से हटाएं",
+    "assign": "असाइन करें",
+    "remove": "हटाएं",
+    "successfullyAssignedToTags": "सफलतापूर्वक टैग्स को असाइन किया गया",
+    "successfullyRemovedFromTags": "सफलतापूर्वक टैग्स से हटाया गया",
+    "errorOccurredWhileLoadingOrganizationUserTags": "संगठन टैग्स को लोड करते समय त्रुटि हुई",
+    "removeUserTag": "टैग हटाएं",
+    "removeUserTagMessage": "क्या आप इस टैग को हटाना चाहते हैं? यह सभी उप-टैग्स और सभी संबंधों को हटा देगा।",
+    "tagDetails": "टैग विवरण",
+    "tagName": "नाम",
+    "tagUpdationSuccess": "टैग सफलतापूर्वक अपडेट की गई",
+    "tagRemovalSuccess": "टैग सफलतापूर्वक हटाई गई",
+    "noTagSelected": "कोई टैग चयनित नहीं"
   },
   "userListCard": {
     "addAdmin": "व्यवस्थापक जोड़ें",

public/locales/sp/translation.json

@@ -335,11 +335,24 @@
     "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"
+    "noOneSelected": "Nadie seleccionado",
+    "assignToTags": "Asignar a etiquetas",
+    "removeFromTags": "Eliminar de etiquetas",
+    "assign": "Asignar",
+    "remove": "Eliminar",
+    "successfullyAssignedToTags": "Asignado a etiquetas con éxito",
+    "successfullyRemovedFromTags": "Eliminado de etiquetas con éxito",
+    "errorOccurredWhileLoadingOrganizationUserTags": "Error al cargar las etiquetas de la organización",
+    "removeUserTag": "Eliminar etiqueta",
+    "removeUserTagMessage": "¿Desea eliminar esta etiqueta? Esto eliminará todas las subetiquetas y todas las asociaciones.",
+    "tagDetails": "Detalles de la etiqueta",
+    "tagName": "Nombre",
+    "tagUpdationSuccess": "Etiqueta actualizada con éxito",
+    "tagRemovalSuccess": "Etiqueta eliminada con éxito",
+    "noTagSelected": "Ninguna etiqueta seleccionada"
   },
   "userListCard": {
     "joined": "Unido",

public/locales/zh/translation.json

@@ -335,11 +335,24 @@
     "subTags": "子标签",
     "assignedToAll": "标签分配给所有人",
     "successfullyAssignedToPeople": "标签分配成功",
-    "assignPeople": "分配",
     "errorOccurredWhileLoadingMembers": "加载成员时出错",
     "userName": "用户名",
     "actions": "操作",
-    "noOneSelected": "未选择任何人"
+    "noOneSelected": "未选择任何人",
+    "assignToTags": "分配到标签",
+    "removeFromTags": "从标签中移除",
+    "assign": "分配",
+    "remove": "移除",
+    "successfullyAssignedToTags": "成功分配到标签",
+    "successfullyRemovedFromTags": "成功从标签中移除",
+    "errorOccurredWhileLoadingOrganizationUserTags": "加载组织标签时出错",
+    "removeUserTag": "删除标签",
+    "removeUserTagMessage": "您要删除此标签吗？这将删除所有子标签和所有关联。",
+    "tagDetails": "标签详情",
+    "tagName": "名称",
+    "tagUpdationSuccess": "标签更新成功",
+    "tagRemovalSuccess": "标签删除成功",
+    "noTagSelected": "未选择标签"
   },
   "userListCard": {
     "addAdmin": "添加管理员",

src/GraphQl/Mutations/TagMutations.ts

@@ -87,3 +87,37 @@ export const ADD_PEOPLE_TO_TAG = gql`
     }
   }
 `;
+
+/**
+ * GraphQL mutation to assign people to multiple tags.
+ *
+ * @param currentTagId - Id of the current tag.
+ * @param selectedTagIds - Ids of the selected tags to be assined.
+ */
+
+export const ASSIGN_TO_TAGS = gql`
+  mutation AssignToUserTags($currentTagId: ID!, $selectedTagIds: [ID!]!) {
+    assignToUserTags(
+      input: { currentTagId: $currentTagId, selectedTagIds: $selectedTagIds }
+    ) {
+      _id
+    }
+  }
+`;
+
+/**
+ * GraphQL mutation to remove people from multiple tags.
+ *
+ * @param currentTagId - Id of the current tag.
+ * @param selectedTagIds - Ids of the selected tags to be removed from.
+ */
+
+export const REMOVE_FROM_TAGS = gql`
+  mutation RemoveFromUserTags($currentTagId: ID!, $selectedTagIds: [ID!]!) {
+    removeFromUserTags(
+      input: { currentTagId: $currentTagId, selectedTagIds: $selectedTagIds }
+    ) {
+      _id
+    }
+  }
+`;

src/components/AddPeopleToTag/AddPeopleToTag.tsx

@@ -365,7 +365,7 @@ const AddPeopleToTag: React.FC<InterfaceAddPeopleToTagProps> = ({
               variant="primary"
               data-testid="assignPeopleBtn"
             >
-              {t('assignPeople')}
+              {t('assign')}
             </Button>
           </Modal.Footer>
         </Form>

src/components/TagActions/TagActions.module.css

@@ -0,0 +1,174 @@
+.btnsContainer {
+  display: flex;
+  margin: 2rem 0;
+}
+
+.btnsContainer .btnsBlock {
+  display: flex;
+  width: max-content;
+}
+
+.btnsContainer .btnsBlock button {
+  margin-left: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.btnsContainer .input {
+  flex: 1;
+  position: relative;
+  max-width: 60%;
+  justify-content: space-between;
+}
+
+.btnsContainer input {
+  outline: 1px solid var(--bs-gray-400);
+}
+
+.btnsContainer .input button {
+  width: 52px;
+}
+
+@media (max-width: 1020px) {
+  .btnsContainer {
+    flex-direction: column;
+    margin: 1.5rem 0;
+  }
+
+  .btnsContainer .btnsBlock {
+    margin: 1.5rem 0 0 0;
+    justify-content: space-between;
+  }
+
+  .btnsContainer .btnsBlock button {
+    margin: 0;
+  }
+
+  .btnsContainer .btnsBlock div button {
+    margin-right: 1.5rem;
+  }
+}
+
+/* For mobile devices  */
+
+@media (max-width: 520px) {
+  .btnsContainer {
+    margin-bottom: 0;
+  }
+
+  .btnsContainer .btnsBlock {
+    display: block;
+    margin-top: 1rem;
+    margin-right: 0;
+  }
+
+  .btnsContainer .btnsBlock div {
+    flex: 1;
+  }
+
+  .btnsContainer .btnsBlock div[title='Sort organizations'] {
+    margin-right: 0.5rem;
+  }
+
+  .btnsContainer .btnsBlock button {
+    margin-bottom: 1rem;
+    margin-right: 0;
+    width: 100%;
+  }
+}
+
+.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;
+}
+
+.tagsBreadCrumbs {
+  color: var(--bs-gray);
+  cursor: pointer;
+}
+
+.tagsBreadCrumbs:hover {
+  color: var(--bs-blue);
+  font-weight: 600;
+  text-decoration: underline;
+}
+
+.scrollContainer {
+  max-height: 100px; /* Adjust as needed */
+  overflow-y: auto;
+  margin-bottom: 1rem;
+}
+
+.tagBadge {
+  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;
+}
+
+.scrContainer {
+  max-height: 300px;
+  overflow: scroll;
+  /* padding-right: 8px; */
+}
+
+.allTagsHeading {
+  color: rgb(77, 76, 76);
+  font-weight: 600;
+}
+
+/* SimpleLoader.css */
+.simpleLoader {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid var(--bs-gray);
+  border-top-color: var(--bs-gray);
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}