Feature/batch tagging (#4997)

* Pro 7746 batch tag images (#4963)

* batch tagging UI
* back tagging backend

---------

Co-authored-by: Harouna Traoré <haroun@users.noreply.github.com>
Co-authored-by: Jed <vjeudy@protonmail.com>

* Pro 7916 batch tagging notifs (#4980)

Co-authored-by: Harouna Traoré <haroun@users.noreply.github.com>

* rework UI when no tags or none have been found (#4987)

* Pro 8003 manage tags (#4992)

* apos context menu expose show method to be called from template ref like we do with hide
* updates manage tags button to open image tags manager, refresh images and tags when closing

* Big get request (#4993)

* adds middleware to convert post request containing __aposGetWithQuery in get request
* uses new middleware in media manager
* asks for first page when requesting images through IDs

* Pro 8000 batch tagging reordering (#4998)

* tags are properly sorted when opening popover, or going back to list. Not when checking or unchecking.
* when using `__apostGetWithQuery` in body, we keep existing `req.query` instead of erasing it (to keep things like mode and locale).
* don't get images when requesting tags only, lighter request.
* search empty states wins over the no tags yet state.
* hides create button if user has no create permission on tags.
* improves tags watcher, works if a tag has its title or slug updated.

* adds missing translations for batch tagging (#4995)

* removes space

* adds changelog

* fix lint

* removes unused translation key

* adds batch operation button identifier for tests

---------

Co-authored-by: haroun <1765606+haroun@users.noreply.github.com>
Co-authored-by: Harouna Traoré <haroun@users.noreply.github.com>

Author: ValJed

CHANGELOG.md

@@ -9,6 +9,9 @@
 * Adds keyboard shortcuts for manipulating widgets in areas. Includes Cut, Copy, Paste, Delete, and Duplicate.
 * Adds dynamic choices working with piece manager filters. 
 * Allow `import.imageTags` (array of image tag IDs) to be passed to the rich text widget when importing (see https://docs.apostrophecms.org/reference/api/rich-text.html#importing-inline-images).
+* Adds a new way to make `GET` requests with a large query string. It can become a `POST` request containing the key `__aposGetWithQuery` in its body.
+A middleware checks for this key and converts the request back to a `GET` request with the right `req.query` property.
+* Adds a new batch operation to tag images.
 
 ### Changes
 

modules/@apostrophecms/express/index.js

@@ -417,7 +417,23 @@ module.exports = {
       bodyParserJson: bodyParser.json({
         limit: '16mb',
         ...(self.options.bodyParser && self.options.bodyParser.json)
-      })
+      }),
+      // Supports POST that are supposed to be GET requests
+      // when the query string is too big, we convert it back to GET here.
+      convertPostToGetWithQuery(req, res, next) {
+        if (req.method === 'POST' && req.body?.__aposGetWithQuery) {
+          req.method = 'GET';
+          req.query = {
+            ...req.query,
+            ...req.body.__aposGetWithQuery
+          };
+          delete req.body;
+          const [ url ] = req.url.split('?');
+          req.url = `${url}?${qs.stringify(req.query)}`;
+        }
+
+        return next();
+      }
     };
   },
 

modules/@apostrophecms/i18n/i18n/de.json

@@ -62,6 +62,8 @@
   "batchPublishCompleted": "{{ count }} {{ type }} veröffentlicht.",
   "batchPublishProgress": "Veröffentlichung {{ type }}...",
   "batchRestoreCompleted": "{{ count }} {{ type }} wiederhergestellt.",
+  "batchTagProgress": "Taggen von {{ count }} {{ type }}...",
+  "batchUntagProgress": "Entfernen der Markierung von {{ count }} {{ type }}...",
   "batchRestoreProgress": "Wiederherstellung {{ type }}...",
   "breakpointPreviewClear": "Klarer Haltepunkt",
   "breakpointPreviewDesktop": "Desktop",
@@ -550,14 +552,19 @@
   "table": "Tabelle",
   "tableDescription": "Fügen Sie tabellarische Inhalte zu Ihrer Seite hinzu",
   "tableImport": "Tabelle importieren",
+  "tag": "Tag",
   "tagAddTag": "Tag hinzufügen",
+  "tagCreateHelp": "Das neue Tag wird auf Ihre Auswahl angewendet",
   "tagCreateNewTag": "Neuen Tag erstellen",
-  "tagCreateTag": "Tag \"{{ tag }}\" erstellen",
-  "tagNewTag": "Neuer Tag",
-  "tagNoTagsFoundCreateOne": "Erstellen {{ tag }}?",
-  "tagNoTagsFoundPerhaps": "Wir konnten keine passenden Tags finden. Vielleicht",
+  "tagCreateNewTagName": "Neues Tag erstellen \"{{ tag }}\"",
+  "tagCreateTag": "Tag Erstellen",
+  "tagCreateTagName": "Erstellen {{ tag }}?",
+  "tagExist": "Dieses Tag existiert bereits",
+  "tagManage": "Tags verwalten",
+  "tagNoResultFor": "Keine Ergebnisse für \"{{ tag }}\"",
+  "tagNoTagsYet": "Noch keine Tags",
   "tagSearchApplyTags": "Tags anwenden",
-  "tagSearchPlaceholder": "Tags...",
+  "tagSearchPlaceholder": "Tag...",
   "tagYourImages": "Weise deinen Bildern Tags zu, um die Suche und das Filtern im Medienmanager zu erleichtern.",
   "tags": "Tags",
   "takeActionAndCreateNew": "{{ saveLabel }} und erstelle Neues",

modules/@apostrophecms/i18n/i18n/en.json

@@ -63,6 +63,8 @@
   "batchPublishProgress": "Publishing {{ type }}...",
   "batchRestoreCompleted": "Restored {{ count }} {{ type }}.",
   "batchRestoreProgress": "Restoring {{ type }}...",
+  "batchTagProgress": "Tagging {{ count }} {{ type }}...",
+  "batchUntagProgress": "Untagging {{ count }} {{ type }}...",
   "breakpointPreviewClear": "Clear Breakpoint",
   "breakpointPreviewDesktop": "Desktop",
   "breakpointPreviewExit": "Exit",
@@ -550,14 +552,19 @@
   "table": "Table",
   "tableDescription": "Add tabular content to your page",
   "tableImport": "Import Table",
+  "tag": "Tag",
   "tagAddTag": "Add Tag",
+  "tagCreateHelp": "The new tag will be applied to your selection",
   "tagCreateNewTag": "Create new tag",
-  "tagCreateTag": "Create tag \"{{ tag }}\"",
-  "tagNewTag": "New Tag",
-  "tagNoTagsFoundCreateOne": "create {{ tag }}?",
-  "tagNoTagsFoundPerhaps": "We couldn't find any matching tags. Perhaps",
+  "tagCreateNewTagName": "Create new Tag \"{{ tag }}\"",
+  "tagCreateTag": "Create Tag",
+  "tagCreateTagName": "create \"{{ tag }}\"",
+  "tagExist": "This tag already exist",
+  "tagManage": "Manage Tags",
+  "tagNoResultFor": "No results for \"{{ tag }}\"",
+  "tagNoTagsYet": "No tags yet",
   "tagSearchApplyTags": "Apply Tags",
-  "tagSearchPlaceholder": "Tags...",
+  "tagSearchPlaceholder": "Tag...",
   "tagYourImages": "Tag your images to make searching and filtering the media manager easier",
   "tags": "Tags",
   "takeActionAndCreateNew": "{{ saveLabel }} and Create New",

modules/@apostrophecms/i18n/i18n/es.json

@@ -63,6 +63,8 @@
   "batchPublishProgress": "Publicando {{ type }}...",
   "batchRestoreCompleted": "Restaurado {{ count }} {{ type }}.",
   "batchRestoreProgress": "Restaurando {{ type }}...",
+  "batchTagProgress": "Etiquetando {{ count }} {{ type }}...",
+  "batchUntagProgress": "Desetiquetando {{ count }} {{ type }}...",
   "breakpointPreviewClear": "Punto de ruptura claro",
   "breakpointPreviewDesktop": "Escritorio",
   "breakpointPreviewExit": "Salir",
@@ -550,12 +552,17 @@
   "table": "Tabla",
   "tableDescription": "Agregar contenido tabular a tu página",
   "tableImport": "Importar tabla",
+  "tag": "Etiqueta",
   "tagAddTag": "Agregar etiqueta",
+  "tagCreateHelp": "La nueva etiqueta se aplicará a su selección",
   "tagCreateNewTag": "Crear nueva etiqueta",
-  "tagCreateTag": "Crear etiqueta \"{{ tag }}\"",
-  "tagNewTag": "Nueva etiqueta",
-  "tagNoTagsFoundCreateOne": "¿Crear {{ tag }}?",
-  "tagNoTagsFoundPerhaps": "No pudimos encontrar ninguna etiqueta coincidente. Quizás",
+  "tagCreateNewTagName": "Crear nueva etiqueta \"{{ tag }}\"",
+  "tagCreateTag": "Crear etiqueta",
+  "tagCreateTagName": "crear \"{{ tag }}\"",
+  "tagExist": "Esta etiqueta ya existe",
+  "tagManage": "Administrar etiquetas",
+  "tagNoResultFor": "No hay resultados para \"{{ tag }}\"",
+  "tagNoTagsYet": "No hay etiquetas todavía",
   "tagSearchApplyTags": "Aplicar etiquetas",
   "tagSearchPlaceholder": "Etiquetas...",
   "tagYourImages": "Etiquete sus imágenes para facilitar la busqueda y filtrado en el gestor multimedia",

modules/@apostrophecms/i18n/i18n/fr.json

@@ -63,6 +63,8 @@
   "batchPublishProgress": "Publication {{ type }}...",
   "batchRestoreCompleted": "Restauré {{ count }} {{ type }}.",
   "batchRestoreProgress": "Restaurer {{ type }}...",
+  "batchTagProgress": "Taggage de {{ count }} {{ type }}...",
+  "batchUntagProgress": "Dé-taggage de {{ count }} {{ type }}...",
   "breakpointPreviewClear": "Point d'arrêt clair",
   "breakpointPreviewDesktop": "Bureau",
   "breakpointPreviewExit": "Sortir",
@@ -550,12 +552,17 @@
   "table": "Tableau",
   "tableDescription": "Ajouter du contenu tabulaire à votre page",
   "tableImport": "Importer tableau",
+  "tag": "Tag",
   "tagAddTag": "Ajouter un tag",
+  "tagCreateHelp": "Le nouveau tag sera appliqué à votre sélection",
   "tagCreateNewTag": "Créer un nouveau tag",
-  "tagCreateTag": "Créer un tag \"{{ tag }}\"",
-  "tagNewTag": "Nouveau tag",
-  "tagNoTagsFoundCreateOne": "créer {{ tag }} ?",
-  "tagNoTagsFoundPerhaps": "Nous n'avons trouvé aucun tag correspondant. Peut-être",
+  "tagCreateNewTagName": "Créer le tag \"{{ tag }}\"",
+  "tagCreateTag": "Créer un tag",
+  "tagCreateTagName": "créer \"{{ tag }}\"",
+  "tagExist": "Ce tag existe déjà",
+  "tagManage": "Gérer Tags",
+  "tagNoResultFor": "Pas de résultats pour \"{{ tag }}\"",
+  "tagNoTagsYet": "Pas encore de tags",
   "tagSearchApplyTags": "Appliquer des tags",
   "tagSearchPlaceholder": "Tags...",
   "tagYourImages": "Taguez vos images pour faciliter la recherche et le filtrage du gestionnaire de médias",

modules/@apostrophecms/i18n/i18n/it.json

@@ -63,6 +63,8 @@
   "batchPublishProgress": "Pubblicazione {{ type }}...",
   "batchRestoreCompleted": "Ripristinati {{ count }} {{ type }}.",
   "batchRestoreProgress": "Ripristino {{ type }}...",
+  "batchTagProgress": "Aggiungere tag a {{ count }} {{ type }}",
+  "batchUntagProgress": "Rimozione dei tag da {{ count }} {{ type }}",
   "breakpointPreviewClear": "Chiaro punto di interruzione",
   "breakpointPreviewDesktop": "Desktop",
   "breakpointPreviewExit": "Esci",
@@ -550,14 +552,19 @@
   "table": "Tabella",
   "tableDescription": "Aggiungi una tabella alla tua pagina",
   "tableImport": "Importa tabella",
-  "tagAddTag": "Aggiungi etichetta",
-  "tagCreateNewTag": "Crea nuova etichetta",
-  "tagCreateTag": "Crea etichetta \"{{ tag }}\"",
-  "tagNewTag": "Nuova etichetta",
-  "tagNoTagsFoundCreateOne": "crea {{ tag }}?",
-  "tagNoTagsFoundPerhaps": "Non siamo riusciti a trovare etichette corrispondenti. Forse",
-  "tagSearchApplyTags": "Applica etichette",
-  "tagSearchPlaceholder": "Etichette...",
+  "tag": "Tag",
+  "tagAddTag": "Aggiungi tag",
+  "tagCreateHelp": "Il nuovo tag verrà applicato alla tua selezione",
+  "tagCreateNewTag": "Crea etichetta",
+  "tagCreateNewTagName": "Create new Tag \"{{ tag }}\"",
+  "tagCreateTag": "Creare tag",
+  "tagCreateTagName": "creare \"{{ tag }}\"",
+  "tagExist": "Questo tag esiste già",
+  "tagManage": "Gestisci tag",
+  "tagNoResultFor": "Nessun risultato per \"{{ tag }}\"",
+  "tagNoTagsYet": "Nessun tag ancora",
+  "tagSearchApplyTags": "Applica tag",
+  "tagSearchPlaceholder": "Tag...",
   "tagYourImages": "Tagga le tue immagini per facilitare la ricerca e il filtraggio nel gestore dei media",
   "tags": "Tag",
   "takeActionAndCreateNew": "{{ saveLabel }} e crea nuovo",

modules/@apostrophecms/i18n/i18n/pt-BR.json

@@ -63,6 +63,8 @@
   "batchPublishProgress": "Publicando {{ type }}...",
   "batchRestoreCompleted": "Restaurado {{ count }} {{ type }}.",
   "batchRestoreProgress": "Restaurando {{ type }}...",
+  "batchTagProgress": "Marcando {{ count }} {{ type }}...",
+  "batchUntagProgress": "Desmarcando {{ count }} {{ type }}...",
   "breakpointPreviewClear": "Ponto de interrupção claro",
   "breakpointPreviewDesktop": "Desktop",
   "breakpointPreviewExit": "Sair",
@@ -550,12 +552,17 @@
   "table": "Tabela",
   "tableDescription": "Adicionar conteúdo tabular à sua página",
   "tableImport": "Importar tabela",
+  "tag": "Tag",
   "tagAddTag": "Adicionar Tag",
+  "tagCreateHelp": "A nova tag será aplicada à sua seleção",
   "tagCreateNewTag": "Criar nova tag",
-  "tagCreateTag": "Criar tag \"{{ tag }}\"",
-  "tagNewTag": "Nova Tag",
-  "tagNoTagsFoundCreateOne": "criar {{ tag }}?",
-  "tagNoTagsFoundPerhaps": "Não conseguimos encontrar tags correspondentes. Talvez",
+  "tagCreateNewTagName": "Criar nova tag \"{{ tag }}\"",
+  "tagCreateTag": "Criar tag",
+  "tagCreateTagName": "criar \"{{ tag }}\"",
+  "tagExist": "Esta tag já existe",
+  "tagManage": "Gerenciar tags",
+  "tagNoResultFor": "Nenhum resultado para \"{{ tag }}\"",
+  "tagNoTagsYet": "Nenhuma tag ainda",
   "tagSearchApplyTags": "Aplicar Tags",
   "tagSearchPlaceholder": "Tags...",
   "tagYourImages": "Adicione tags nas suas imagens para facilitar a pesquisa e a filtragem do gerenciador de mídia",

modules/@apostrophecms/i18n/i18n/sk.json

@@ -63,6 +63,8 @@
   "batchPublishProgress": "Publikovanie {{ type }}...",
   "batchRestoreCompleted": "Obnovené {{ count }} {{ type }}.",
   "batchRestoreProgress": "Obnovenie {{ type }}...",
+  "batchTagProgress": "Označovanie {{ count }} {{ type }}...",
+  "batchUntagProgress": "Odznačenie {{ count }} {{ type }}...",
   "breakpointPreviewClear": "Bod prerušenia",
   "breakpointPreviewDesktop": "Desktop",
   "breakpointPreviewExit": "Odísť",
@@ -550,10 +552,15 @@
   "table": "Tabuľka",
   "tableDescription": "Pridať tabuľkový obsah na vašu stránku",
   "tableImport": "Importovať tabuľku",
+  "tag": "Tag",
   "tagAddTag": "Pridať tag",
-  "tagCreateNewTag": "Vytvoriť nový tag",
-  "tagCreateTag": "Vytvoriť tag \"{{ tag }}\"",
-  "tagNewTag": "Nový tag",
+  "tagCreateHelp": "Nová tag sa použije na váš výber",
+  "tagCreateNewTag": "Vytvoriť tag",
+  "tagCreateNewTagName": "Vytvoriť novej tag \"{{ tag }}\"",
+  "tagCreateTag": "Vytvoriť tag",
+  "tagCreateTagName": "vytvoriť \"{{ tag }}\"",
+  "tagExist": "Táto tag už existuje",
+  "tagManage": "Spravovať Tags",
   "tagNoTagsFoundCreateOne": "vytvoriť {{ tag }}?",
   "tagNoTagsFoundPerhaps": "Nenašli sme žiadne zodpovedajúce tagy. Možno",
   "tagSearchApplyTags": "Použiť tagy",

modules/@apostrophecms/image/index.js

@@ -63,6 +63,28 @@ module.exports = {
     relationshipSuggestionIcon: 'image-icon',
     relationshipSuggestionFields: []
   },
+  batchOperations: {
+    add: {
+      tag: {
+        label: 'apostrophe:tag',
+        messages: {
+          create: {
+            progress: 'apostrophe:batchTagProgress'
+          },
+          add: {
+            progress: 'apostrophe:batchTagProgress'
+          },
+          remove: {
+            progress: 'apostrophe:batchUntagProgress'
+          }
+        },
+        icon: 'label-icon',
+        action: 'tag',
+        permission: 'edit'
+      }
+    },
+    order: [ 'tag', 'archive', 'restore' ]
+  },
   utilityOperations: {
     remove: [ 'new' ]
   },
@@ -292,6 +314,56 @@ module.exports = {
           b = b * 100 / max;
           return Math.abs(a - b) < 1;
         }
+      },
+      async tag(req) {
+        const title = self.apos.launder.string(req.body.title);
+        const slug = self.apos.launder.string(req.body.slug);
+        const operation = self.apos.launder.string(req.body.operation);
+
+        if (!Array.isArray(req.body._ids)) {
+          throw self.apos.error('invalid', 'Missing _ids');
+        }
+        if (![ 'create', 'add', 'remove' ].includes(operation)) {
+          throw self.apos.error('invalid', `"${operation}" is not a valid operation`);
+        }
+
+        req.body._ids = req.body._ids.map(_id => {
+          return self.inferIdLocaleAndMode(req, self.apos.launder.id(_id));
+        });
+
+        const imageTagManager = self.apos.doc.getManager('@apostrophecms/image-tag');
+        const tag = (operation === 'create')
+          ? await imageTagManager.insert(
+            req,
+            {
+              ...imageTagManager.newInstance(),
+              title
+            }
+          )
+          : await imageTagManager.find(req, { slug }).toObject();
+
+        return self.apos.modules['@apostrophecms/job'].runBatch(
+          req,
+          req.body._ids,
+          async function(req, id) {
+            const piece = await self.findOneForEditing(req, { _id: id });
+            if (!piece) {
+              throw self.apos.error('notfound');
+            }
+
+            piece._tags = operation === 'remove'
+              ? piece._tags.filter(pieceTag => pieceTag.aposDocId !== tag.aposDocId)
+              : piece._tags
+                .filter(pieceTag => pieceTag.aposDocId !== tag.aposDocId)
+                .concat(tag);
+
+            await self.update(req, piece);
+          },
+          {
+            action: 'tag',
+            docTypes: [ self.__meta.name ]
+          }
+        );
       }
     }
   }),