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

Author: ValJed

modules/@apostrophecms/image/ui/apos/components/AposMediaManager.vue

@@ -77,6 +77,7 @@
             @search="search"
             @filter="filter"
             @batch="handleBatchAction"
+            @refresh-data="refreshData"
           />
         </template>
         <template #bodyMain>
@@ -315,7 +316,7 @@ export default {
       this.isFirstLoading = false;
     });
 
-    this.batchTags = await this.getTags();
+    await this.getTags();
   },
 
   beforeUnmount() {
@@ -373,28 +374,26 @@ export default {
           delete qs[prop];
         };
       }
-      const apiResponse = (await apos.http.get(
-        this.moduleOptions.action, {
-          qs,
-          draft: true
-        }
-      ));
+      const apiResponse = await apos.http.get(this.moduleOptions.action, {
+        qs,
+        draft: true
+      });
 
       if (options.tags) {
         if (filtered) {
           // We never filter the tag list because they are presented like
           // folders, and folders don't disappear when empty. So we need to make
           // a separate query for distinct tags if our first query was filtered
-          const apiResponse = (await apos.http.get(
+          const tagApiResponse = await apos.http.get(
             this.moduleOptions.action, {
               busy: true,
               qs: {
                 choices: '_tags'
               },
               draft: true
             }
-          ));
-          result.tagList = apiResponse.choices._tags;
+          );
+          result.tagList = tagApiResponse.choices._tags;
         } else {
           result.tagList = apiResponse.choices ? apiResponse.choices._tags : [];
         }
@@ -629,27 +628,7 @@ export default {
       }
 
       if (docIds && action === 'tag') {
-        const { items: updatedImages, tagList } = await this.getMedia({
-          _ids: docIds,
-          tags: true
-        });
-        updatedImages.forEach(this.updateStateDoc);
-
-        this.batchTags = await this.getTags();
-        if (Array.isArray(tagList)) {
-          this.tagList = tagList;
-        }
-
-        await this.updateEditing(null);
-
-        // If we were editing one, replacing it.
-        if (this.editing && updatedImages.length === 1) {
-          this.modified = false;
-          // Needed to refresh the AposMediaManagerEditor
-          await this.$nextTick();
-          await this.updateEditing(updatedImages.at(0)._id);
-        }
-
+        await this.refreshData(docIds);
         return;
       }
 
@@ -662,6 +641,29 @@ export default {
       await this.updateEditing(null);
     },
 
+    async refreshData(docIds) {
+      const { items: updatedImages, tagList } = await this.getMedia({
+        ...docIds && { _ids: docIds },
+        tags: true
+      });
+      updatedImages.forEach(this.updateStateDoc);
+
+      await this.getTags();
+      if (Array.isArray(tagList)) {
+        this.tagList = tagList;
+      }
+
+      await this.updateEditing(null);
+
+      // If we were editing one, replacing it.
+      if (this.editing && updatedImages.length === 1) {
+        this.modified = false;
+        // Needed to refresh the AposMediaManagerEditor
+        await this.$nextTick();
+        await this.updateEditing(updatedImages.at(0)._id);
+      }
+    },
+
     updateStateDoc(doc) {
       const index = this.items.findIndex(item => item._id === doc._id);
       const checkedIndex = this.checkedDocs
@@ -817,7 +819,7 @@ export default {
           };
         });
 
-        return tags;
+        this.batchTags = tags;
       } catch (error) {
         // TODO: notify message
         apos.notify(error.message);

modules/@apostrophecms/modal/ui/apos/components/AposDocsManagerToolbar.vue

@@ -30,6 +30,7 @@
           @added="title => updateTag('create', { title })"
           @checked="slug => updateTag('add', { slug })"
           @unchecked="slug => updateTag('remove', { slug })"
+          @refresh-data="$emit('refresh-data')"
         />
         <AposButton
           v-else-if="!operations"
@@ -159,11 +160,12 @@ export default {
     }
   },
   emits: [
-    'select-click',
+    'batch',
     'filter',
-    'search',
     'page-change',
-    'batch'
+    'refresh-data',
+    'search',
+    'select-click'
   ],
   data() {
     return {

modules/@apostrophecms/ui/ui/apos/components/AposContextMenu.vue

@@ -205,6 +205,7 @@ const menuResizeObserver = new ResizeObserver((entries) => {
 
 defineExpose({
   hide,
+  show,
   setDropdownPosition
 });
 

modules/@apostrophecms/ui/ui/apos/components/AposTagApply.vue

@@ -1,9 +1,11 @@
 <template>
   <AposContextMenu
+    ref="contextMenu"
     :menu-placement
     :button
     :disabled="isDisabled"
     class="apos-apply-tag-menu"
+    :class="{ 'apos-apply-tag-menu--create-ui': createUi }"
     @open="isOpen = $event"
     @close="clearSearch"
   >
@@ -61,7 +63,7 @@
           type="quiet"
           :disabled="isTagFound"
           :disable-focus="!isOpen"
-          @click.stop="createOrManage"
+          @click.stop="createOrSearch"
         />
       </div>
     </div>
@@ -128,9 +130,10 @@ const props = defineProps({
   }
 });
 
-const emit = defineEmits([ 'added', 'checked', 'unchecked' ]);
+const emit = defineEmits([ 'added', 'checked', 'unchecked', 'refresh-data' ]);
 
 const textInputEl = useTemplateRef('textInput');
+const contextMenuEl = useTemplateRef('contextMenu');
 
 const isOpen = ref(false);
 const searchValue = ref({ data: '' });
@@ -259,7 +262,26 @@ function checkOrCreate() {
   create();
 };
 
-function createOrManage() {
+async function createOrManage() {
+  if (createUi.value) {
+    const imageTagMod = apos.modules['@apostrophecms/image-tag'];
+    await apos.modal.execute(imageTagMod.components.managerModal, {
+      moduleName: imageTagMod.name
+    });
+
+    emit('refresh-data');
+    contextMenuEl.value.show();
+    return;
+  }
+
+  if (searchValue.value.data) {
+    return create();
+  }
+
+  toggleCreateUi();
+}
+
+function createOrSearch() {
   if (!createUi.value && searchValue.value.data) {
     return create();
   }
@@ -348,6 +370,11 @@ function getCheckedState(tag) {
   padding: 0;
 }
 
+.apos-apply-tag-menu:not(.apos-apply-tag-menu--create-ui)
+:deep(.apos-context-menu__pane) {
+  height: 450px;
+}
+
 .apos-apply-tag-menu__inner,
 .apos-apply-tag-menu__tags,
 .apos-apply-tag-menu__empty {
@@ -383,27 +410,31 @@ function getCheckedState(tag) {
 
 .apos-apply-tag-menu__tags {
   @include apos-list-reset();
-
-  & {
-    max-height: 315px;
-    overflow-y: auto;
-  }
 }
 
 .apos-apply-tag-menu__tag {
-  padding: $spacing-base $spacing-double;
+  padding: 11px 20px;
   border-top: 1px solid var(--a-base-9);
+
+  &:last-child {
+    border-bottom: 1px solid var(--a-base-9);
+  }
 }
 
 .apos-apply-tag-menu__search-body {
   flex: 1;
+  overflow-y: auto;
 }
 
+/* TODO: Fix UI when no tags found or none exist */
 .apos-apply-tag-menu__empty {
   display: flex;
+  box-sizing: border-box;
   flex-direction: column;
   align-items: center;
-  padding: 50px 20px 60px;
+  justify-content: center;
+  height: 100%;
+  padding: 0 0 10px;
 }
 
 .apos-apply-tag-menu__empty-message {