implement domain filter

dashboard/composables/useDomain.ts

@@ -3,7 +3,7 @@
 const { token } = useAccessToken();
 const { projectId } = useProject();
 
-const domainsRequest = useFetch<{ _id: string }[]>('/api/domains/list', {
+const domainsRequest = useFetch<{ _id: string, visits: number }[]>('/api/domains/list', {
     headers: computed(() => {
         return {
             'Authorization': `Bearer ${token.value}`,
@@ -12,18 +12,30 @@ const domainsRequest = useFetch<{ _id: string }[]>('/api/domains/list', {
     })
 });
 
+function refreshDomains() {
+    domainsRequest.refresh();
+}
+
+const refreshingDomains = computed(() => domainsRequest.pending.value);
+
 const domainList = computed(() => {
-    return domainsRequest.data.value?.map(e => e._id);
+    return [
+        {
+            _id: 'ALL DOMAINS', visits: domainsRequest.data.value?.reduce((a, e) => a + e.visits, 0)
+        },
+        ...(domainsRequest.data.value?.sort((a, b) => b.visits - a.visits) || [])
+    ]
 })
 
+
 const activeDomain = ref<string>();
 
 const domain = computed(() => {
     if (activeDomain.value) return activeDomain.value;
     if (!domainList.value) return;
     if (domainList.value.length == 0) return;
-    activeDomain.value = domainList.value[0];
-    return domainList.value[0];
+    setActiveDomain(domainList.value[0]._id);
+    return domainList.value[0]._id;
 })
 
 function setActiveDomain(domain: string) {
@@ -31,6 +43,5 @@ function setActiveDomain(domain: string) {
 }
 
 export function useDomain() {
-
-    return { domainList, domain, setActiveDomain }
+    return { domainList, domain, setActiveDomain, refreshDomains, refreshingDomains }
 }