From 0fadfed7f6bad3d9d9c66a3c559148c6f127c86c Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Sun, 23 Apr 2023 19:53:10 +1000
Subject: [PATCH] bug fixes

---
 resources/js/components/SMButton.vue          |  9 ++
 resources/js/components/SMInput.vue           | 17 ++--
 resources/js/components/SMPagination.vue      |  6 +-
 .../js/components/dialogs/SMDialogMedia.vue   | 98 +++++++------------
 4 files changed, 57 insertions(+), 73 deletions(-)

diff --git a/resources/js/components/SMButton.vue b/resources/js/components/SMButton.vue
index cfcd1d8..877c93c 100644
--- a/resources/js/components/SMButton.vue
+++ b/resources/js/components/SMButton.vue
@@ -157,6 +157,15 @@ if (props.form !== undefined) {
     );
 }
 
+if (props.disabled !== undefined) {
+    watch(
+        () => props.disabled,
+        (newValue) => {
+            disabled.value = newValue;
+        }
+    );
+}
+
 onMounted(() => {
     if (buttonRef.value) {
         minWidth.value = `${buttonRef.value.clientWidth}px`;
diff --git a/resources/js/components/SMInput.vue b/resources/js/components/SMInput.vue
index c6ec9b7..2113fec 100644
--- a/resources/js/components/SMInput.vue
+++ b/resources/js/components/SMInput.vue
@@ -132,6 +132,7 @@ import SMControl from "./SMControl.vue";
 import SMButton from "./SMButton.vue";
 import { openDialog } from "./SMDialog";
 import SMDialogMedia from "./dialogs/SMDialogMedia.vue";
+import { Media } from "../helpers/api.types";
 
 const emits = defineEmits(["update:modelValue", "blur", "keyup"]);
 const props = defineProps({
@@ -357,17 +358,17 @@ const handleChange = (event) => {
     }
 };
 
-const handleMediaSelect = async (event) => {
+const handleMediaSelect = async () => {
     let result = await openDialog(SMDialogMedia);
     if (result) {
-        console.log(result);
-        // mediaUrl.value = result.url;
-        // emits("update:modelValue", result.id);
+        const mediaResult = result as Media;
+        mediaUrl.value = mediaResult.url;
+        emits("update:modelValue", mediaResult);
 
-        // if (control) {
-        //     control.value = result.id;
-        //     feedbackInvalid.value = "";
-        // }
+        if (control) {
+            control.value = mediaResult;
+            feedbackInvalid.value = "";
+        }
     }
 };
 </script>
diff --git a/resources/js/components/SMPagination.vue b/resources/js/components/SMPagination.vue
index 136472f..df6293e 100644
--- a/resources/js/components/SMPagination.vue
+++ b/resources/js/components/SMPagination.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, watch } from "vue";
 
 const props = defineProps({
     modelValue: {
@@ -127,10 +127,10 @@ const handleClickPage = (page: number): void => {
     emits("update:modelValue", page);
 };
 
-if (props.modelValue < 1) {
+const totalPages = computedTotalPages.value;
+if (props.modelValue < 1 || totalPages < 1) {
     emits("update:modelValue", 1);
 } else {
-    const totalPages = computedTotalPages.value;
     if (totalPages < props.modelValue) {
         emits("update:modelValue", totalPages);
     }
diff --git a/resources/js/components/dialogs/SMDialogMedia.vue b/resources/js/components/dialogs/SMDialogMedia.vue
index 5e6d49c..2e840cc 100644
--- a/resources/js/components/dialogs/SMDialogMedia.vue
+++ b/resources/js/components/dialogs/SMDialogMedia.vue
@@ -20,7 +20,8 @@
                 label="Search"
                 class="toolbar-search"
                 size="small"
-                @keyup.enter="handleSearch">
+                @keyup.enter="handleSearch"
+                @blur="handleSearch">
                 <template #append>
                     <SMButton
                         type="primary"
@@ -55,16 +56,12 @@
                             }"
                             class="media-image"></div>
                         <span class="media-title">{{ item.title }}</span>
-                        <span class="media-size">{{
-                            bytesReadable(item.size)
-                        }}</span>
                     </li>
                 </ul>
             </div>
         </div>
         <SMRow>
             <SMPagination
-                v-if="mediaItems.length < totalItems"
                 v-model="page"
                 :total="totalItems"
                 :per-page="perPage"
@@ -194,20 +191,6 @@ const perPage = ref(24);
 
 const applicationStore = useApplicationStore();
 
-/**
- * Returns the pagination info
- */
-const computedPaginationInfo = computed(() => {
-    if (totalItems.value == 0) {
-        return "0 - 0 of 0";
-    }
-
-    const start = (page.value - 1) * perPage.value + 1;
-    const end = start + perPage.value - 1;
-
-    return `${start} - ${end} of ${totalItems.value}`;
-});
-
 /**
  * Returns the file types accepted.
  */
@@ -223,27 +206,6 @@ const computedAccepts = computed(() => {
     return props.mime;
 });
 
-/**
- * Return the total number of pages.
- */
-const computedTotalPages = computed(() => {
-    return Math.ceil(totalItems.value / perPage.value);
-});
-
-/**
- * Return if the previous button should be disabled.
- */
-const computedDisablePrevButton = computed(() => {
-    return page.value <= 1;
-});
-
-/**
- * Return if the next button should be disabled.
- */
-const computedDisableNextButton = computed(() => {
-    return page.value >= computedTotalPages.value;
-});
-
 /**
  * Get the media item by id.
  *
@@ -435,18 +397,37 @@ const handleChangeUpload = async () => {
     }
 };
 
+const itemSearch = ref("");
+
+const handleSearch = () => {
+    mediaItems.value = [];
+    totalItems.value = 0;
+    page.value = 1;
+
+    handleLoad();
+};
+
 /**
  * Load the data of the dialog
  */
 const handleLoad = async () => {
     mediaLoading.value = true;
 
+    let params = {
+        page: page.value,
+        limit: perPage.value,
+    };
+
+    if (itemSearch.value.length > 0) {
+        let value = itemSearch.value.replace(/"/g, '\\"');
+        params[
+            "filter"
+        ] = `(title:"${value}",OR,name:"${value}",OR,description:"${value}")`;
+    }
+
     api.get({
         url: "/media",
-        params: {
-            page: page.value,
-            limit: perPage.value,
-        },
+        params: params,
     })
         .then((result) => {
             if (result.data) {
@@ -518,15 +499,15 @@ handleLoad();
             background-color: #fff;
             justify-content: center;
             align-items: center;
-            margin: 0 0 1rem 0;
+            margin: 0 0 16px 0;
 
             .media-none {
-                font-size: 1.5rem;
+                font-size: 150%;
                 text-align: center;
 
                 ion-icon {
-                    font-size: 3rem;
-                    margin-bottom: 0.5rem;
+                    font-size: 200%;
+                    margin-bottom: 16px;
                 }
             }
 
@@ -537,9 +518,9 @@ handleLoad();
                 max-height: 40vh;
                 height: 100%;
                 width: 100%;
-                gap: 1rem;
+                gap: 8px;
                 justify-content: center;
-                padding: map-get($spacer, 3);
+                padding: 0;
 
                 li {
                     display: flex;
@@ -576,17 +557,13 @@ handleLoad();
             .media-image {
                 width: 64px;
                 height: 64px;
-                margin-right: map-get($spacer, 1);
+                margin-right: 8px;
             }
 
             .media-title {
                 flex: 1;
                 text-align: left;
             }
-
-            .media-size {
-                font-size: 75%;
-            }
         }
 
         &.media-browser-grid {
@@ -598,7 +575,7 @@ handleLoad();
 
             li {
                 flex-direction: column;
-                height: 194px;
+                height: 160px;
                 width: 220px;
 
                 .media-image {
@@ -608,17 +585,14 @@ handleLoad();
 
                 .media-title {
                     text-align: center;
-                    padding: map-get($spacer, 1) 4px;
-                    width: 13rem;
+                    padding: 4px;
+                    font-size: 80%;
+                    width: 224px;
                     display: block;
                     white-space: nowrap;
                     overflow: hidden;
                     text-overflow: ellipsis;
                 }
-
-                .media-size {
-                    font-size: 75%;
-                }
             }
         }
     }