Merge pull request #16 from outl1ne/feature/1

MediaHub sorting and filtering features

lang/en.json

@@ -37,5 +37,8 @@
   "novaMediaHub.contextDeselect": "Deselect",
   "novaMediaHub.contextDeselectOthers": "Deselect others",
   "novaMediaHub.contextOpenCollection": "Open collection",
-  "novaMediaHub.existingMediaDetected": "Some media items were already found on the server and were not (re)uploaded. However, they were moved to the start of the collection to make them easier to find."
+  "novaMediaHub.existingMediaDetected": "Some media items were already found on the server and were not (re)uploaded. However, they were moved to the start of the collection to make them easier to find.",
+  "novaMediaHub.searchMediaTitle": "Search by name",
+  "novaMediaHub.orderBy.updated_at": "Updated at",
+  "novaMediaHub.orderBy.created_at": "Created at"
 }

resources/js/api.js

@@ -1,10 +1,8 @@
 const PREFIX = '/nova-vendor/media-hub';
 
 export default {
-  async getMedia(collection, page) {
-    return Nova.request().get(`${PREFIX}/media`, {
-      params: { collection, page },
-    });
+  async getMedia(params) {
+    return Nova.request().get(`${PREFIX}/media`, { params });
   },
 
   async getCollections() {

resources/js/components/MediaOrderSelect.vue

@@ -0,0 +1,17 @@
+<template>
+  <SelectControl v-bind="$attrs">
+    <option value="">{{ '> Show all' }}</option>
+    <template v-for="column in columns" :key="column">
+      <option v-for="direction in ['asc', 'desc']" :key="`${column}:${direction}`" :value="`${column}:${direction}`">
+        <span class="o1-ml-auto">{{ direction === 'asc' ? '&uarr;' : '&darr;' }}</span>
+        {{ __(`novaMediaHub.orderBy.${column}`) }}
+      </option>
+    </template>
+  </SelectControl>
+</template>
+
+<script>
+export default {
+  props: ['columns'],
+};
+</script>

resources/js/components/ModalFilterItem.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="o1-flex o1-flex-col o1-w-full">
+    <div class="o1-leading-tight o1-text-teal-500 o1-font-bold o1-text-md o1-mb-2">
+      {{ title }}
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['title'],
+};
+</script>

resources/js/mixins/HandlesMediaLists.js

@@ -2,10 +2,13 @@ import API from '../api';
 
 export default {
   data: () => ({
-    collection: void 0,
+    collection: undefined,
+    search: undefined,
+    orderBy: undefined,
 
     collections: [],
     mediaItems: [],
+    orderColumns: ['updated_at', 'created_at'],
 
     currentPage: 1,
     mediaResponse: {},
@@ -15,17 +18,24 @@ export default {
   }),
 
   methods: {
-    async getMedia(collection = void 0, pageNr = void 0) {
+    async getMedia({
+      collection = this.collection,
+      search = this.search,
+      orderBy = this.orderBy,
+      orderDirection = this.orderDirection,
+      page = this.currentPage,
+    } = {}) {
       this.loadingMedia = true;
 
-      if (!collection) collection = this.collection;
-      if (!pageNr) pageNr = this.currentPage;
-
-      const { data } = await API.getMedia(collection, pageNr);
-      this.mediaResponse = data;
-      this.mediaItems = data.data || [];
-
-      this.loadingMedia = false;
+      await API.getMedia({ collection, page, search, orderBy, orderDirection })
+        .then(({ data: res }) => {
+          this.mediaResponse = res;
+          this.mediaItems = res.data || [];
+          if (this.currentPage !== page) this.currentPage = page;
+        })
+        .finally(() => {
+          this.loadingMedia = false;
+        });
     },
 
     async getCollections() {