fixes

resources/js/views/dashboard/MediaList.vue

@@ -8,23 +8,36 @@
         :type="formMessage.type"
         :message="formMessage.message"
         :icon="formMessage.icon" />
-
+    <SMContainer>
         <SMToolbar>
             <template #left>
-            <!-- <SMButton
-                :to="{ name: 'media-upload' }"
+                <SMButton
+                    :to="{ name: 'workshops' }"
                     type="primary"
-                label="Upload Media" /> -->
+                    label="Upload Media" />
             </template>
             <template #right>
                 <SMInput
                     v-model="search"
                     label="Search"
                     :small="true"
-                style="max-width: 250px" />
+                    style="max-width: 350px"
+                    :show-clear="true">
+                    <template #append>
+                        <SMButton
+                            type="primary"
+                            label="Search"
+                            icon="search-outline"
+                            @click="handleClickSearch" />
+                    </template>
+                </SMInput>
             </template>
         </SMToolbar>
 
+        <SMPagination
+            :model-value="pageValue"
+            :total="total"
+            :per-page="perPage" />
         <SMTable :headers="headers" :items="items" @row-click="handleRowClick">
             <template #item-size="item">
                 {{ bytesReadable(item.size) }}
@@ -40,6 +53,7 @@
                     @click="handleClick(item, $event)"></SMButton>
             </template>
         </SMTable>
+    </SMContainer>
 
     <!-- @click-row="handleClickRow" -->
     <!-- <EasyDataTable
@@ -88,9 +102,10 @@ import { debounce } from "../../helpers/debounce";
 import { bytesReadable } from "../../helpers/types";
 import { useUserStore } from "../../store/UserStore";
 import { useToastStore } from "../../store/ToastStore";
-import SMInput from "../../depreciated/SMInput-old.vue";
+import SMInput from "../../components/SMInput.vue";
 import SMMastHead from "../../components/SMMastHead.vue";
 import SMTable from "../../components/SMTable.vue";
+import SMPagination from "../../components/SMPagination.vue";
 
 const router = useRouter();
 const search = ref("");
@@ -123,6 +138,10 @@ const serverOptions = ref({
     sortType: null,
 });
 
+const total = 108;
+const perPage = 25;
+const pageValue = ref(1);
+
 const handleRowClick = (item) => {
     alert(JSON.stringify(item));
 };
@@ -291,10 +310,14 @@ const handleDownload = (item) => {
 </script>
 
 <style lang="scss">
-.vue3-easy-data-table {
-    th:nth-child(1),
-    td:nth-child(1) {
-        max-width: 30vw;
+body[data-route-name="page-dashboard-media-list"] {
+    .table tr td:last-of-type {
+        padding-left: 0;
+        text-align: center;
+
+        &:before {
+            display: none;
+        }
     }
 }
 </style>