feat: cache showActivity componentn in sate

wajeht · Oct 8, 2022 · ea4f50c · ea4f50c
1 parent 44c34c3
commit ea4f50c
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 6 deletions.
diff --git a/src/apps/ui/components/admin/ActivityLog.vue b/src/apps/ui/components/admin/ActivityLog.vue
@@ -8,6 +8,7 @@ import { onMounted, ref, reactive } from 'vue';
 const activities = ref([]);
 const appStore = useAppStore();
 const alert = reactive({ type: '', msg: '' });
+const collapsed = ref(false);
 
 onMounted(async () => {
   let fa = await fetchActivities();
@@ -53,17 +54,39 @@ async function fetchActivities() {
 
 <template>
   <div class="card">
-    <div class="card-body">
-      <h5 class="card-title">Activities</h5>
-      <h6 class="card-subtitle mb-2 text-muted">Latest 50 logs</h6>
+    <div class="card-body" v-auto-animate>
+      <div class="d-flex justify-content-between">
+        <!-- left -->
+        <div class="d-flex gap-3">
+          <!-- title -->
+          <h5 class="card-title mb-0">
+            <span>Activities</span>
+            <small class="text-muted"> - view activities of gains</small>
+          </h5>
+        </div>
+
+        <!-- right -->
+        <div class="d-flex gap-3">
+          <!-- refresh -->
+          <span v-if="collapsed" role="button">
+            <i class="bi bi-arrow-repeat"></i>
+          </span>
+
+          <!-- show/hide -->
+          <span role="button" @click="collapsed = !collapsed">
+            <i v-if="!collapsed" class="bi bi-chevron-down"></i>
+            <i v-else class="bi bi-chevron-up"></i>
+          </span>
+        </div>
+      </div>
 
       <!-- alert -->
       <div v-if="alert.type" :class="`alert-${alert.type}`" class="alert">
         <span>{{ alert.msg }}</span>
       </div>
 
       <!-- table -->
-      <small v-else>
+      <small v-else v-if="collapsed">
         <table class="table table-sm">
           <thead>
             <tr>

diff --git a/src/apps/ui/components/admin/AdminMenuBar.vue b/src/apps/ui/components/admin/AdminMenuBar.vue
@@ -1,3 +1,8 @@
+<script setup>
+import useAppStore from '../../store/app.store.js';
+const appStore = useAppStore();
+</script>
+
 <template>
   <div class="list-group">
     <!-- home -->
@@ -31,6 +36,27 @@
       :class="{ active: $route.path === '/admin/sessions' }"
       >Sessions</router-link
     >
+
+    <!-- show activity -->
+    <div
+      @click="appStore.showActivity = !appStore.showActivity"
+      class="list-group-item list-group-item-action"
+    >
+      <div class="form-check form-switch d-flex justify-content-between p-0">
+        <label class="form-check-label inline-block p-0" for="show-activity">
+          <span @click="appStore.showActivity = false" v-if="appStore.showActivity"
+            >Hide activities</span
+          >
+          <span @click="appStore.showActivity = true" v-else>Show activities</span>
+        </label>
+        <input
+          class="form-check-input"
+          v-model="appStore.showActivity"
+          type="checkbox"
+          id="show-activity"
+        />
+      </div>
+    </div>
   </div>
 </template>
 

diff --git a/src/apps/ui/layouts/AdminLayout.vue b/src/apps/ui/layouts/AdminLayout.vue
@@ -4,6 +4,8 @@ import RegularFooter from '../components/regular/RegularFooter.vue';
 import ActivityLog from '../components/admin/ActivityLog.vue';
 import AdminMenuBar from '../components/admin/AdminMenuBar.vue';
 import LogoutButton from '../components/dashboard/LogoutButton.vue';
+import useAppStore from '../store/app.store.js';
+const appStore = useAppStore();
 </script>
 
 <template>
@@ -25,7 +27,7 @@ import LogoutButton from '../components/dashboard/LogoutButton.vue';
           <router-view> </router-view>
 
           <!-- log -->
-          <ActivityLog />
+          <ActivityLog v-if="appStore.showActivity" />
         </div>
       </div>
     </div>

diff --git a/src/apps/ui/store/app.store.js b/src/apps/ui/store/app.store.js
@@ -18,6 +18,7 @@ const useAppStore = defineStore({
         label: 'lbs',
       },
       appVersion: null,
+      showActivity: false,
     };
   },
   getters: {
@@ -49,7 +50,14 @@ const useAppStore = defineStore({
   persist: {
     id: 'app',
     storage: window.localStorage,
-    paths: ['numberOfSessionsPerWeek', 'unit', 'appVersion', 'community', 'darkMode'],
+    paths: [
+      'numberOfSessionsPerWeek',
+      'unit',
+      'appVersion',
+      'community',
+      'darkMode',
+      'showActivity',
+    ],
   },
 });