Eci 15 add dropdown with metadata ids

bundle/Controller/EzAdminUI/BrowseController.php

@@ -31,11 +31,13 @@ public function __invoke(Request $request)
         $limit = 25;
         $userQuery = $request->get('q', '');
         $tag = $request->get('tag', 'all');
+        $metadata = $request->get('metadata', 'all');
         $type = $request->get('mediatype', 'all');
         $folder = $request->get('folder', 'all');
         $type = $type !== 'all' ? $type : null;
         $folder = $folder !== 'all' ? $folder : null;
         $tag = $tag !== 'all' ? $tag : null;
+        $metadata = $metadata !== 'all' ? $metadata : null;
 
         switch ($folder) {
             case '(all)':
@@ -60,7 +62,8 @@ public function __invoke(Request $request)
             $limit,
             $folder,
             $tag,
-            $nextCursor,
+            $metadata,
+            $nextCursor
         );
 
         $results = $this->remoteMediaProvider->searchResources($query);

bundle/Controller/EzAdminUI/Facets/Load.php

@@ -24,6 +24,7 @@ public function __invoke(): Response
     {
         $folders = $this->remoteMediaProvider->listFolders();
         $tags = $this->remoteMediaProvider->listTags();
+        $metadataFields = $this->remoteMediaProvider->listMetadataFields();
 
         $formattedFolders = [];
         foreach ($folders as $folder) {
@@ -42,9 +43,18 @@ public function __invoke(): Response
             ];
         }
 
+        $formattedMetadataFields = [];
+        foreach ($metadataFields as $metadataField) {
+            $formattedMetadataFields[] = [
+                'id' => $metadataField['external_id'],
+                'label' => $metadataField['label'],
+            ];
+        }
+
         $result = [
             'folders' => $formattedFolders,
             'tags' => $formattedTags,
+            'metadataFields' => $formattedMetadataFields,
         ];
 
         return new JsonResponse($result);

bundle/RemoteMedia/Provider/Cloudinary/CloudinaryProvider.php

@@ -258,6 +258,14 @@ public function updateTags(string $resourceId, string $tags, string $resourceTyp
         $this->gateway->update($resourceId, $resourceType, $options);
     }
 
+    /**
+     * Lists metadata fields.
+     */
+    public function listMetadataFields(): array
+    {
+        return $this->gateway->listMetadataFields();
+    }
+
     /**
      * Updates the resource context.
      * eg. alt text and caption:

bundle/RemoteMedia/Provider/Cloudinary/Gateway.php

@@ -135,6 +135,13 @@ abstract public function removeTag($id, $type, $tag);
      */
     abstract public function removeAllTags($id, $type);
 
+    /**
+     * Lists metadata fields.
+     *
+     * @return array
+     */
+    abstract public function listMetadataFields();
+
     /**
      * Updates the remote resource.
      *

bundle/RemoteMedia/Provider/Cloudinary/Gateway/Cache/Psr6CachedGateway.php

@@ -45,6 +45,10 @@ class Psr6CachedGateway extends Gateway
      * @var string
      */
     const TAG_LIST = 'tag_list';
+    /**
+     * @var string
+     */
+    const METADATA_FIELDS = 'metadata_fields';
     /**
      * @var string
      */
@@ -386,6 +390,31 @@ public function removeAllTags($id, $type)
         return $value;
     }
 
+    /**
+     * Lists metadata fields.
+     *
+     * @return array
+     */
+    public function listMetadataFields()
+    {
+        $listMetadataCacheKey = $this->washKey(
+            implode('-', [self::PROJECT_KEY, self::PROVIDER_KEY, self::METADATA_FIELDS]),
+        );
+        $cacheItem = $this->cache->getItem($listMetadataCacheKey);
+
+        if ($cacheItem->isHit()) {
+            return $cacheItem->get();
+        }
+
+        $list = $this->gateway->listMetadataFields();
+        $cacheItem->set($list);
+        $cacheItem->expiresAfter($this->ttl);
+        $cacheItem->tag($this->getCacheTags(self::METADATA_FIELDS));
+        $this->cache->save($cacheItem);
+
+        return $list;
+    }
+
     /**
      * Updates the remote resource.
      *

bundle/RemoteMedia/Provider/Cloudinary/Gateway/CloudinaryApiGateway.php

@@ -165,7 +165,8 @@ public function search(Query $query): Result
             ->expression($expression)
             ->max_results($query->getLimit())
             ->with_field('context')
-            ->with_field('tags');
+            ->with_field('tags')
+            ->with_field('metadata');
 
         if ($query->getNextCursor() !== null) {
             $search->next_cursor($query->getNextCursor());
@@ -336,6 +337,30 @@ public function removeAllTags($id, $type)
         return $this->cloudinaryUploader->remove_all_tags([$id], ['resource_type' => $type]);
     }
 
+    /**
+     * Lists metadata fields.
+     *
+     * @return array
+     */
+    public function listMetadataFields()
+    {
+        $options = [
+            'max_results' => 500,
+        ];
+
+        $metadataFields = [];
+        do {
+            $result = $this->cloudinaryApi->list_metadata_fields($options);
+            $metadataFields = array_merge($metadataFields, $result['metadata_fields']);
+
+            if (array_key_exists('next_cursor', $result)) {
+                $options['next_cursor'] = $result['next_cursor'];
+            }
+        } while (array_key_exists('next_cursor', $result));
+
+        return $metadataFields;
+    }
+
     /**
      * Updates the remote resource.
      *
@@ -431,6 +456,10 @@ private function buildSearchExpression(Query $query)
             $expressions[] = sprintf('tags:%s', $query->getTag());
         }
 
+        if ($query->getMetadata()) {
+            $expressions[] = sprintf('metadata:%s', $query->getMetadata());
+        }
+
         if ($query->getFolder() !== null) {
             $expressions[] = sprintf('folder:"%s"', $query->getFolder());
         }

bundle/RemoteMedia/Provider/Cloudinary/Search/Query.php

@@ -34,13 +34,18 @@ final class Query
 
     /** @var array */
     private $sortBy = ['created_at' => 'desc'];
+    /**
+     * @var string|null
+     */
+    private $metadata;
 
     public function __construct(
         string $query,
         $resourceType,
         int $limit,
         ?string $folder = null,
         ?string $tag = null,
+        ?string $metadata = null,
         ?string $nextCursor = null,
         array $sortBy = ['created_at' => 'desc'],
         array $resourceIds = []
@@ -49,6 +54,7 @@ public function __construct(
         $this->resourceType = $resourceType;
         $this->folder = $folder;
         $this->tag = $tag;
+        $this->metadata = $metadata;
         $this->limit = $limit;
         $this->nextCursor = $nextCursor;
         $this->sortBy = $sortBy;
@@ -83,6 +89,7 @@ public static function createResourceIdsSearchQuery(
             $limit,
             null,
             null,
+            null,
             $nextCursor,
             $sortBy,
             $resourceIds
@@ -118,6 +125,14 @@ public function getTag(): ?string
         return $this->tag;
     }
 
+    /**
+     * @return string|null
+     */
+    public function getMetadata(): ?string
+    {
+        return $this->metadata;
+    }
+
     /**
      * @return string[]
      */
@@ -148,4 +163,12 @@ public function getSortBy(): array
     {
         return $this->sortBy;
     }
+
+    /**
+     * @param string|null $metadata
+     */
+    public function setMetadata(?string $metadata): void
+    {
+        $this->metadata = $metadata;
+    }
 }

bundle/RemoteMedia/RemoteMediaProvider.php

@@ -139,6 +139,11 @@ abstract public function removeAllTagsFromResource(string $resourceId, string $r
      */
     abstract public function updateTags(string $resourceId, string $tags, string $resourceType = 'image');
 
+    /**
+     * Lists metadata fields.
+     */
+    abstract public function listMetadataFields(): array;
+
     /**
      * Updates the resource context.
      * eg. alt text and caption:

bundle/Resources/translations/ngremotemedia.en.yml

@@ -36,6 +36,8 @@ ngrm:
                     select_tag: 'Select tag'
                     loading_tags: 'Loading tags...'
                     all_tags: 'All tags'
+                    metadata_fields: 'Meta'
+                    all_metadata_fields: 'All'
                     search: 'Search (by name, tag, folder, alternate text etc.)'
                     search_placeholder: 'Enter your search term'
                 empty_folder: 'Folder is empty'

bundle/Resources/translations/ngremotemedia.no.yml

@@ -35,6 +35,8 @@ ngrm:
                     all_folders: 'All folders'
                     select_tag: 'Select tag'
                     loading_tags: 'Loading tags...'
+                    metadata_fields: 'Meta'
+                    all_metadata_fields: 'All'
                     all_tags: 'All tags'
                     search: 'Search (by name, tag, folder, alternate text etc.)'
                     search_placeholder: 'Enter your search term'

bundle/Resources/views/ezadminui/js_config.html.twig

@@ -15,6 +15,8 @@
             'browse_select_tag': "{{ "ngrm.edit.vue.browse.facets.select_tag"|trans }}",
             'browse_loading_tags': "{{ "ngrm.edit.vue.browse.facets.loading_tags"|trans }}",
             'browse_all_tags': "{{ "ngrm.edit.vue.browse.facets.all_tags"|trans }}",
+            'browse_metadata_fields': "{{ "ngrm.edit.vue.browse.facets.metadata_fields"|trans }}",
+            'browse_all_metadata_fields': "{{ "ngrm.edit.vue.browse.facets.all_metadata_fields"|trans }}",
             'search': "{{ "ngrm.edit.vue.browse.facets.search"|trans }}",
             'search_placeholder': "{{ "ngrm.edit.vue.browse.facets.search_placeholder"|trans }}",
             'browse_empty_folder': "{{ "ngrm.edit.vue.browse.empty_folder"|trans }}",

frontend/src/components/Interactions.vue

@@ -27,7 +27,7 @@
 
     <input type="hidden" :name="this.$root.$data.NgRemoteMediaInputFields.image_variations" v-model="stringifiedVariations" class="media-id"/>
     <crop-modal v-if="cropModalOpen" @change="handleVariationCropChange" @close="handleCropModalClose" :selected-image="selectedImage" :available-variations="this.$root.$data.NgRemoteMediaAvailableVariations"></crop-modal>
-    <media-modal :tags="tags" :selected-media-id="selectedImage.id" v-if="mediaModalOpen" @close="handleMediaModalClose" @media-selected="handleMediaSelected" :paths="config.paths"></media-modal>
+    <media-modal :tags="tags" :metadataFields="metadataFields" :selected-media-id="selectedImage.id" v-if="mediaModalOpen" @close="handleMediaModalClose" @media-selected="handleMediaSelected" :paths="config.paths"></media-modal>
     <upload-modal v-if="uploadModalOpen" @close="handleUploadModalClose" @save="handleUploadModalSave" :name="selectedImage.name" ></upload-modal>
   </div>
 </template>
@@ -67,6 +67,7 @@ export default {
       uploadModalOpen: false,
       folders: [],
       tags: [],
+      metadataFields: [],
       facetsLoading: true
     };
   },
@@ -108,6 +109,7 @@ export default {
         previewUrl: item.preview_url,
         alternateText: item.alt_text,
         tags: item.tags,
+        metadataFields: item.metadata,
         size: item.filesize,
         variations: {},
         height: item.height,
@@ -148,6 +150,7 @@ export default {
         previewUrl: '',
         alternateText: '',
         tags: [],
+        metadataFields: [],
         size: 0,
         variations: {},
         height: 0,
@@ -159,6 +162,7 @@ export default {
       const response = await fetch(this.config.paths.load_facets);
       const data = await response.json();
       this.tags = data.tags;
+      this.metadataFields = data.metadataFields;
       this.facetsLoading = false;
     },
     async handleBrowseMediaClicked() {
@@ -203,6 +207,7 @@ export default {
           previewUrl: '',
           alternateText: '',
           tags: [],
+          metadataFields: [],
           size: file.size,
           variations: {},
           height: 0,

frontend/src/components/MediaFacets.vue

@@ -39,6 +39,19 @@
         />
       </div>
 
+      <div class="form-field">
+          <label for="metadata">{{ this.$root.$data.NgRemoteMediaTranslations.browse_metadata_fields }}</label>
+          <v-select
+                  :options="metadataFields"
+                  label="label"
+                  v-model="metadata"
+                  @input="handleMetadataChange"
+                  :reduce="option => option.id"
+                  :placeholder="facetsLoading ? this.$root.$data.NgRemoteMediaTranslations.browse_all_metadata_fields : this.$root.$data.NgRemoteMediaTranslations.browse_all_metadata_fields"
+                  :disabled="facetsLoading"
+          />
+      </div>
+
       <div class="search-wrapper">
         <span class="search-label">{{ this.$root.$data.NgRemoteMediaTranslations.search }}</span>
         <div class="search">
@@ -66,6 +79,7 @@ import {
   FOLDER_ALL,
   FOLDER_ROOT,
   TAG_ALL,
+  METADATA_ALL
 } from "../constants/facets";
 
 import vSelect from "vue-select";
@@ -75,7 +89,7 @@ import {encodeQueryData} from "@/utility/utility";
 
 export default {
   name: "MediaFacets",
-  props: ["tags", "facets", "facetsLoading", "mediaTypes"],
+  props: ["tags", "metadataFields", "facets", "facetsLoading", "mediaTypes"],
   data() {
     return {
       TYPE_ALL,
@@ -86,6 +100,7 @@ export default {
       FOLDER_ALL,
       FOLDER_ROOT,
       TAG_ALL,
+      METADATA_ALL,
       folders: [{
         id: FOLDER_ROOT,
         label: FOLDER_ROOT,
@@ -113,6 +128,9 @@ export default {
     handleTagChange() {
       this.$emit("change", { tag: this.tag });
     },
+    handleMetadataChange() {
+        this.$emit("change", { metadata: this.metadata });
+    },
     async loadSubFolders(data) {
       const node = data.parentNode;
       const query = {