Tobi develop (#1346)

* feat(magazine): implement search functionality in MagazineList and Magazine.vue

- Added a search bar in Magazine.vue to allow users to filter magazines based on a search query.
- Enhanced MagazineList.vue to handle permalink formats for filtering magazines, improving the search experience.
- Implemented debounced search handling to optimize performance and user experience.
- Updated the magazine fetching logic to accommodate search parameters from the URL.

Overall: This commit enhances the magazine browsing experience by introducing a search feature, allowing users to easily find specific magazines.

* refactor(Magazine.vue): reposition search bar for improved layout

- Moved the search bar within the Magazine.vue component to enhance the layout and visual flow.
- Adjusted the margin of the search bar for better spacing and alignment.

Overall: This commit refines the user interface of the Magazine page by optimizing the placement of the search functionality.

* feat(WorksiteFilters): add 'claimed by me' checkbox and update filter logic

- Introduced a new checkbox in WorksiteFilters.vue for filtering works claimed by the current user.
- Updated WorksiteStatusGroupFilter.ts to include logic for handling the new filter option.

Overall: This commit enhances the filtering capabilities for works by allowing users to easily view items they have claimed.

* feat(dashboard): enhance data fetching and event handling across components

- Added a new `dataFetched` event to `AjaxTable.vue` to emit the count of fetched data.
- Updated `IncidentApprovalTable.vue` and `OrganizationApprovalTable.vue` to handle the new `dataFetched` event and emit corresponding approval data counts.
- Enhanced `AdminDashboard.vue` to manage and emit total counts for incident and organization approvals, improving dashboard data visibility.
- Integrated the total count emission into `PageTabBar.vue` and `Index.vue` for better dashboard updates.

Overall: This commit improves the data handling and event communication across various components, enhancing the overall functionality and responsiveness of the admin dashboard.

Author: tabiodun

src/components/AjaxTable.vue

@@ -111,8 +111,8 @@ export default defineComponent({
       default: '',
     },
   },
-  emits: ['rowClick', 'selectionChanged'],
-  setup(props) {
+  emits: ['rowClick', 'selectionChanged', 'dataFetched'],
+  setup(props, { emit }) {
     const { emitter } = useEmitter();
 
     const defaultColumns = ref<any[]>([]);
@@ -158,6 +158,7 @@ export default defineComponent({
         ...sorter,
       };
       loading.value = false;
+      emit('dataFetched', response.data.count);
     };
 
     onMounted(async () => {

src/components/admin/IncidentApprovalTable.vue

@@ -6,6 +6,7 @@
     :url="url"
     @change="$emit('change', $event)"
     @row-click="showContacts"
+    @data-fetched="handleDataFetched"
   >
     <template #created_at="slotProps">
       <div :title="slotProps.item.created_at">
@@ -217,12 +218,17 @@ export default defineComponent({
       emit('reload');
     }
 
+    function handleDataFetched(count: number) {
+      emit('onIncidentApprovalDataFetched', count);
+    }
+
     return {
       showContacts,
       approveRequest,
       rejectRequest,
       clearApproval,
       momentFromNow,
+      handleDataFetched,
       moment,
       url,
       columns: [

src/components/admin/OrganizationApprovalTable.vue

@@ -10,6 +10,7 @@
     }"
     @change="$emit('change', $event)"
     @row-click="showContacts"
+    @data-fetched="handleDataFetched"
   >
     <template #statuses="slotProps">
       <div class="w-full flex items-center">
@@ -257,6 +258,10 @@ export default defineComponent({
       }
     }
 
+    function handleDataFetched(count: number) {
+      emit('onOrganizationApprovalDataFetched', count);
+    }
+
     return {
       currentUser,
       getIncidentName,
@@ -267,6 +272,7 @@ export default defineComponent({
       notifyOrganization,
       moment,
       url,
+      handleDataFetched,
       columns: [
         {
           title: t('ID'),

src/components/work/WorksiteFilters.vue

@@ -225,6 +225,14 @@
                 class="block my-1"
                 >{{ $t('worksiteFilters.claimed_by_my_org') }}
               </base-checkbox>
+
+              <base-checkbox
+                v-model="filters.statusGroups.data['claimed_by_me']"
+                data-testid="testClaimedByMeCheckbox"
+                class="block my-1"
+                >{{ $t('worksiteFilters.claimed_by_me') }}
+              </base-checkbox>
+
               <base-checkbox
                 v-model="filters.statusGroups.data['reported_by_org']"
                 data-testid="testReportedByOrgCheckbox"

src/layouts/page/PageTabBar.vue

@@ -19,6 +19,12 @@ const { selectorStyle, setTab, activeIndex, state } = useTabs({
     return route;
   },
 });
+
+const emit = defineEmits(['onTotalDashboardCountFetched']);
+
+function handleTotalDashboardCountFetched(count: number) {
+  emit('onTotalDashboardCountFetched', count);
+}
 </script>
 
 <template>
@@ -47,7 +53,10 @@ const { selectorStyle, setTab, activeIndex, state } = useTabs({
     <div class="flex-grow p-3 mb-16">
       <router-view v-slot="{ Component }">
         <keep-alive>
-          <component :is="Component" />
+          <component
+            :is="Component"
+            @on-total-dashboard-count-fetched="handleTotalDashboardCountFetched"
+          />
         </keep-alive>
       </router-view>
     </div>

src/pages/admin/AdminBugs.vue

@@ -108,6 +108,7 @@ export default defineComponent({
     const tableUrl = `${import.meta.env.VITE_APP_API_BASE_URL}/bug_reports`;
     const tableQuery = ref({
       resolved_at__isnull: true,
+      created_at__gte: moment().subtract(60, 'day').format('YYYY-MM-DD'),
     });
     const columns = makeTableColumns([
       ['title', '0.75fr', 'Title'],

src/pages/admin/AdminDashboard.vue

@@ -132,6 +132,9 @@
           <OrganizationApprovalTable
             :query="organizationApprovalQuery"
             @reload="setOrganizationApprovalQuery"
+            @on-organization-approval-data-fetched="
+              handleOrganizationApprovalDataFetched
+            "
           ></OrganizationApprovalTable>
         </div>
       </div>
@@ -189,6 +192,9 @@
           <IncidentApprovalTable
             :query="incidentApprovalQuery"
             @reload="setIncidentApprovalQuery"
+            @on-incident-approval-data-fetched="
+              handleIncidentApprovalDataFetched
+            "
           ></IncidentApprovalTable>
         </div>
       </div>
@@ -474,13 +480,15 @@ export default defineComponent({
     OrganizationApprovalTable,
     InviteUsers,
   },
-  setup() {
+  setup(props, { emit }) {
     const { t } = useI18n();
     const store = useStore();
     const $toasted = useToast();
     const { $can } = useAcl();
     const { component } = useDialogs();
 
+    const organizationApprovalCount = ref(0);
+    const incidentApprovalCount = ref(0);
     const usersToInvite = ref('');
     const globalSearch = ref('');
     const organizations = ref({
@@ -811,6 +819,29 @@ export default defineComponent({
       });
     }
 
+    function handleOrganizationApprovalDataFetched(count: number) {
+      if (organizationApprovalView.value === 'default') {
+        organizationApprovalCount.value = count;
+      }
+    }
+
+    function handleIncidentApprovalDataFetched(count: number) {
+      if (redeployView.value === 'default') {
+        incidentApprovalCount.value = count;
+      }
+    }
+
+    const totalCount = computed(() => {
+      return (
+        (organizationApprovalCount.value || 0) +
+        (incidentApprovalCount.value || 0)
+      );
+    });
+
+    watch(totalCount, () => {
+      emit('onTotalDashboardCountFetched', totalCount.value);
+    });
+
     onMounted(async () => {
       loading.value = true;
       await reloadDashBoard();
@@ -828,6 +859,8 @@ export default defineComponent({
       reloadDashBoard,
       showArcGisUploader,
       getInvitations,
+      handleOrganizationApprovalDataFetched,
+      handleIncidentApprovalDataFetched,
       usersToInvite,
       globalSearch,
       organizations,
@@ -847,6 +880,8 @@ export default defineComponent({
       redeployView,
       setApprovalView,
       setRedeployViewView,
+      organizationApprovalCount,
+      incidentApprovalCount,
     };
   },
 });

src/pages/admin/Index.vue

@@ -1,99 +1,110 @@
 <template>
-  <PageTabBar v-if="bugReportsData && ticketCountData" :tabs="tabs" />
+  <PageTabBar
+    v-if="bugReportsData && ticketCountData"
+    :tabs="tabs"
+    @on-total-dashboard-count-fetched="handleTotalDashboardCountFetched"
+  />
 </template>
 
-<script lang="ts">
-import { reactive, ref, watch, onMounted } from 'vue';
+<script setup lang="ts">
 import PageTabBar from '../../layouts/page/PageTabBar.vue';
 import useAcl from '@/hooks/useAcl';
 import type { Tab } from '@/hooks/useTabs';
 import { useCurrentUser } from '@/hooks';
+import moment from 'moment';
 
-export default defineComponent({
-  name: 'AdminPage',
-  components: { PageTabBar },
-  setup() {
-    const tabs = reactive<Tab[]>([
-      {
-        key: 'nav.admin_dashboard',
-      },
-      // reactive({
-      //   key: 'nav.admin_events',
-      // }),
-      {
-        key: 'nav.admin_event_stream',
-      },
-      {
-        key: 'nav.admin_tickets',
-      },
-      {
-        key: 'nav.bugs',
-      },
-      {
-        key: 'nav.cms',
-      },
-      {
-        key: 'nav.incident_wizard',
-      },
-      {
-        key: 'nav.localizations',
-      },
-      {
-        key: 'nav.rag',
-      },
-      {
-        key: 'nav.reports',
-      },
-    ]);
-
-    const ccuApi = useApi();
-    const { $can } = useAcl();
+const tabs = reactive<Tab[]>([
+  {
+    key: 'nav.admin_dashboard',
+  },
+  {
+    key: 'nav.admin_event_stream',
+  },
+  {
+    key: 'nav.admin_tickets',
+  },
+  {
+    key: 'nav.bugs',
+  },
+  {
+    key: 'nav.cms',
+  },
+  {
+    key: 'nav.incident_wizard',
+  },
+  {
+    key: 'nav.localizations',
+  },
+  {
+    key: 'nav.rag',
+  },
+  {
+    key: 'nav.reports',
+  },
+]);
 
-    const bugReportsData = ref({ count: 0 });
-    const ticketCountData = ref({ count: 0 });
-    const { currentUser } = useCurrentUser();
-    const router = useRouter();
+const ccuApi = useApi();
+const { $can } = useAcl();
 
-    onMounted(async () => {
-      if (!currentUser.value?.isAdmin) {
-        return router.push('/dashboard');
-      }
-      if (!$can('development_mode')) {
-        const bugsData = await ccuApi('/bug_reports', {
-          method: 'GET',
-        });
-        if (bugsData.data) {
-          bugReportsData.value = bugsData.data;
-        }
+const bugReportsData = ref({ count: 0 });
+const ticketCountData = ref({ count: 0 });
+const totalDashboardCount = ref(0);
+const { currentUser } = useCurrentUser();
+const router = useRouter();
 
-        const ticketsData = await ccuApi(
-          'zendesk/search/count.json?query=type:ticket status<solved',
-          {
-            method: 'GET',
-          },
-        );
-        if (bugsData.data) {
-          bugsData.value = ticketsData.data;
-        }
-      }
+onMounted(async () => {
+  if (!currentUser.value?.isAdmin) {
+    return router.push('/dashboard');
+  }
+  if (!$can('development_mode')) {
+    const bugsData = await ccuApi('/bug_reports', {
+      method: 'GET',
+      params: {
+        created_at__gte: moment().subtract(60, 'day').format('YYYY-MM-DD'),
+      },
     });
+    if (bugsData.data) {
+      bugReportsData.value = bugsData.data;
+    }
 
-    watch(bugReportsData, () => {
-      const bugsTab = tabs.find((tab) => tab.key === 'nav.bugs');
-      bugsTab.title = `Bugs (${bugReportsData.value.count})`;
-    });
+    const ticketsData = await ccuApi(
+      'zendesk/search/count.json?query=type:ticket status<solved',
+      {
+        method: 'GET',
+      },
+    );
+    if (ticketsData.data) {
+      ticketCountData.value = ticketsData.data;
+    }
+  }
+});
 
-    watch(ticketCountData, () => {
-      const ticketTab = tabs.find((tab) => tab.key === 'nav.admin_tickets');
-      ticketTab.title = `Tickets (${ticketCountData.value.count})`;
-    });
+function handleTotalDashboardCountFetched(count: number) {
+  totalDashboardCount.value = count;
+  console.log('totalDashboardCount', totalDashboardCount.value);
+}
 
-    return {
-      tabs,
-      bugReportsData,
-      ticketCountData,
-    };
-  },
+watch(bugReportsData, () => {
+  const bugsTab = tabs.find((tab: Tab) => tab.key === 'nav.bugs');
+  if (bugsTab) {
+    bugsTab.title = `Bugs (${bugReportsData.value.count})`;
+  }
+});
+
+watch(ticketCountData, () => {
+  const ticketTab = tabs.find((tab: Tab) => tab.key === 'nav.admin_tickets');
+  if (ticketTab) {
+    ticketTab.title = `Tickets (${ticketCountData.value.count})`;
+  }
+});
+
+watch(totalDashboardCount, () => {
+  const dashboardTab = tabs.find(
+    (tab: Tab) => tab.key === 'nav.admin_dashboard',
+  );
+  if (dashboardTab) {
+    dashboardTab.title = `Dashboard (${totalDashboardCount.value})`;
+  }
 });
 </script>