feat: scrollable activities

wajeht · Oct 8, 2022 · 5d34704 · 5d34704
1 parent ec9a910
commit 5d34704
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 33 deletions.
diff --git a/src/apps/ui/components/admin/ActivityLog.vue b/src/apps/ui/components/admin/ActivityLog.vue
@@ -12,15 +12,16 @@ const alert = reactive({ type: '', msg: '' });
 const collapsed = ref(false);
 const loading = ref(false);
 
+const AMOUNT = ref(25);
+
 onMounted(async () => {
   collapsed.value = true;
-
   await fetchActivities();
 });
 
 async function fetchActivities() {
   try {
-    const res = await api.get(`/api/admin/view-logs?latest=-25`);
+    const res = await api.get(`/api/admin/view-logs?latest=-${AMOUNT.value}`);
     const json = await res.json();
 
     if (!res.ok) {
@@ -66,7 +67,8 @@ async function refetch() {
 <template>
   <div class="card">
     <div class="card-body" v-auto-animate>
-      <div class="d-flex justify-content-between">
+      <!-- title -->
+      <div class="d-flex justify-content-between mb-2">
         <!-- left -->
         <div class="d-flex gap-3">
           <!-- title -->
@@ -103,34 +105,41 @@ async function refetch() {
       </div>
 
       <!-- table -->
-      <small v-else v-if="collapsed">
-        <table class="table table-sm">
-          <thead>
-            <tr>
-              <th scope="col">level</th>
-              <th scope="col">time</th>
-              <th scope="col">message</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="(a, index) in activities" :key="`activities-key-$${index}`">
-              <td>
-                <small
-                  :class="{
-                    'bg-info text-black px-1 rounded': a.level === 'info',
-                    'bg-warning text-black px-1 rounded': a.level === 'warn',
-                    'bg-danger text-white px-1 rounded': a.level === 'error',
-                  }"
-                >
-                  {{ a.level }}
-                </small>
-              </td>
-              <td>{{ dayjs(a.time).format('YYYY/DD/MM hh:MM:ss a') }}</td>
-              <td>{{ a.msg }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </small>
+      <div
+        v-else
+        v-if="collapsed"
+        style="overflow-y: scroll !important"
+        :style="{ 'max-height': `${30 * activities.length}px !important` }"
+      >
+        <small>
+          <table class="table table-sm">
+            <thead>
+              <tr>
+                <th scope="col">level</th>
+                <th scope="col">time</th>
+                <th scope="col">message</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(a, index) in activities" :key="`activities-key-$${index}`">
+                <td>
+                  <small
+                    :class="{
+                      'bg-info text-black px-1 rounded': a.level === 'info',
+                      'bg-warning text-black px-1 rounded': a.level === 'warn',
+                      'bg-danger text-white px-1 rounded': a.level === 'error',
+                    }"
+                  >
+                    {{ a.level }}
+                  </small>
+                </td>
+                <td>{{ dayjs(a.time).format('YYYY/DD/MM hh:MM:ss a') }}</td>
+                <td>{{ a.msg }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </small>
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/apps/ui/pages/admin/AdminUsers.vue b/src/apps/ui/pages/admin/AdminUsers.vue
@@ -1,11 +1,57 @@
+<script setup>
+import { ref, onMounted, reactive } from 'vue';
+import useAppStore from '../../store/app.store.js';
+import api from '../../../../utils/fetch-with-style.js';
+
+const appStore = useAppStore();
+const alert = reactive({ type: '', msg: '' });
+const users = ref([]);
+
+onMounted(async () => {
+  await fetchUsers();
+});
+
+async function fetchUsers() {
+  try {
+    const res = await api.get(`/api/v1/users`);
+    const json = await res.json();
+
+    if (!res.ok) {
+      if (json.errors) {
+        throw json.errors;
+      } else {
+        throw json.message;
+      }
+    }
+
+    users.value = json.data;
+  } catch (e) {
+    appStore.loading = false;
+    alert.type = 'danger';
+    if (Array.isArray(e)) {
+      alert.msg = e.map((cur) => cur.msg).join(' ');
+      return;
+    } else {
+      alert.msg = e;
+    }
+  }
+}
+</script>
+
 <template>
+  <!-- alert -->
+  <div v-if="alert.type" :class="`alert-${alert.type}`" class="alert mb-0">
+    <span>{{ alert.msg }}</span>
+  </div>
+
   <div class="card">
     <div class="card-body">
       <h5 class="card-title">Admin Users</h5>
       <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
       <p class="card-text">
-        Some quick example text to build on the card title and make up the bulk of the card's
-        content.
+        <pre>
+        {{ users }}
+        </pre>
       </p>
       <a href="#" class="card-link">Card link</a>
       <a href="#" class="card-link">Another link</a>