New Sorting using local data

service/new-web-vue/package.json

@@ -14,6 +14,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/vue-fontawesome": "^3.0.0-5",
+    "@vueuse/core": "^8.7.5",
     "axios": "^0.25.0",
     "marked": "^4.0.12",
     "pinia": "^2.0.14",

service/new-web-vue/src/components/MenuFilters/FilterMenu.vue

@@ -235,40 +235,61 @@
             <span class="navbar-submenu-item__span">Bilibili</span>
           </router-link>
         </li>
+      </ul>
+    </li>
 
-        <li class="navbar-submenu-item">
+    <li
+      class="navbar-filter-item"
+      v-if="livePlatforms.length > 0 || inactiveCheck"
+    >
+      <a
+        href="#"
+        class="navbar-filter-item__link sub-menu"
+        onclick="return false"
+      >
+        <font-awesome-icon
+          class="fa-fw navbar-filter-item__svg"
+          icon="people-group"
+        />
+        <span class="navbar-filter-item__span">Groups</span>
+      </a>
+      <ul class="navbar-submenu-items">
+        <li class="navbar-submenu-item" v-if="livePlatforms.length > 0">
           <router-link
             :to="{
               params: { id: $route.params.id },
               query: urlParams({ noLive: 'toggle' }),
             }"
             @click="changeFilter()"
             class="navbar-submenu-item__link"
-            :class="{ active: nolive !== 'false' }"
+            :class="{ active: nolive === 'false' }"
           >
             <font-awesome-icon
               class="fa-fw navbar-submenu-item__svg"
               icon="users"
             />
-            <span class="navbar-submenu-item__span">Show No Live</span>
+            <span class="navbar-submenu-item__span">Live Only</span>
           </router-link>
         </li>
-      </ul>
-    </li>
 
-    <li class="navbar-filter-item" v-if="inactiveCheck">
-      <router-link
-        :to="{
-          params: { id: $route.params.id },
-          query: urlParams({ inactive: 'toggle' }),
-        }"
-        @click="changeFilter()"
-        class="navbar-filter-item__link"
-        :class="{ active: inac == 'true' }"
-      >
-        <font-awesome-icon class="fa-fw navbar-filter-item__svg" icon="skull" />
-        <span class="navbar-filter-item__span">Inactive Only</span>
-      </router-link>
+        <li class="navbar-submenu-item" v-if="inactiveCheck">
+          <router-link
+            :to="{
+              params: { id: $route.params.id },
+              query: urlParams({ inactive: 'toggle' }),
+            }"
+            @click="changeFilter()"
+            class="navbar-submenu-item__link"
+            :class="{ active: inac == 'true' }"
+          >
+            <font-awesome-icon
+              class="fa-fw navbar-submenu-item__svg"
+              icon="skull"
+            />
+            <span class="navbar-submenu-item__span">Inactive Only</span>
+          </router-link>
+        </li>
+      </ul>
     </li>
 
     <li class="navbar-filter-item">

service/new-web-vue/src/components/MenuFilters/NavbarList.vue

@@ -15,6 +15,17 @@ import SortMenu from "./SortMenu.vue"
       >
         <GroupsMenu />
       </li>
+      <li class="navbar-filter click" :class="{ disabled: !checkMembers }">
+        <a
+          href="#"
+          class="navbar-filter__link"
+          onclick="return false"
+          @click="refresh"
+        >
+          <font-awesome-icon class="fa-fw" icon="arrow-rotate-right" />
+          <span class="navbar-filter__span-mobile"> Refresh</span>
+        </a>
+      </li>
       <li
         class="navbar-filter"
         :class="{
@@ -46,9 +57,12 @@ import SortMenu from "./SortMenu.vue"
 
 <script>
 import { library } from "@fortawesome/fontawesome-svg-core"
-import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons"
+import {
+  faMagnifyingGlass,
+  faArrowRotateRight,
+} from "@fortawesome/free-solid-svg-icons"
 
-library.add(faMagnifyingGlass)
+library.add(faMagnifyingGlass, faArrowRotateRight)
 
 import { useGroupStore } from "@/stores/groups"
 import { useMemberStore } from "@/stores/members.js"
@@ -82,6 +96,9 @@ export default {
     checkFilteredData() {
       return useMemberStore().members.filteredData.length > 0
     },
+    checkMembers() {
+      return useMemberStore().members.data.length > 0
+    },
     placeholderSearch() {
       const store = useMemberStore()
 
@@ -110,6 +127,11 @@ export default {
       await new Promise((resolve) => setTimeout(resolve, 60))
       useMemberStore().searchMembers(this.$refs.search_input.value)
     },
+    async refresh() {
+      await useMemberStore().fetchMembers(this.$route.params?.id || null)
+      useMemberStore().filterMembers()
+      useMemberStore().sortingMembers()
+    },
   },
 }
 </script>