chore: filter functionality for PR and Issue tab (#1953)

* chore: issues pr * chore: fix test * chore: fix lint * chore: fix lint * chore: fix styles * chore: fix build * chore: fix build * chore: fixing storybook * chore: fix loading state * chore: fix loading state for PR * chore: remove something
thisdot · Aug 29, 2023 · 98e03a3 · 98e03a3
1 parent eec3622
commit 98e03a3
Show file tree

Hide file tree

Showing 38 changed files with 1,515 additions and 355 deletions.
diff --git a/.github/workflows/ci-vue3-apollo-quasar.yml b/.github/workflows/ci-vue3-apollo-quasar.yml
@@ -78,7 +78,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node-version: [16.x, 18.x]
+        node-version: [16.x]
 
     steps:
       - uses: actions/checkout@v2

diff --git a/vue3-apollo-quasar/.env.development b/vue3-apollo-quasar/.env.development
@@ -1,3 +1,4 @@
 VUE_APP_API_URL = 'https://api.starter.dev/.netlify/functions/server'
 VUE_APP_GRAPHQL_URL = 'https://api.github.com/graphql'
+VUE_APP_URL = 'https://api.github.com'
 VUE_APP_REDIRECT_URL = 'http://localhost:8080/redirect'
diff --git a/vue3-apollo-quasar/.env.production b/vue3-apollo-quasar/.env.production
@@ -1,3 +1,4 @@
 VUE_APP_API_URL = 'https://api.starter.dev/.netlify/functions/server'
 VUE_APP_GRAPHQL_URL = 'https://api.github.com/graphql'
+VUE_APP_URL = 'https://api.github.com'
 VUE_APP_REDIRECT_URL = 'https://vue3-apollo-quasar.starter.dev/redirect'
diff --git a/vue3-apollo-quasar/src/components/ClearIssuePRFilter/ClearIssuePRFilter.vue b/vue3-apollo-quasar/src/components/ClearIssuePRFilter/ClearIssuePRFilter.vue
@@ -0,0 +1,40 @@
+<template>
+  <a
+    :href="$route.path"
+    v-if="isFiltered"
+    class="row items-center text-caption q-my-sm q-ml-2 cursor-pointer clear_wrapper"
+    @click="resetFilter"
+  >
+    <span class="q-mr-sm close_icon row just0fy-center items-center">
+      <q-icon name="close" size="xs" />
+    </span>
+    Clear filter
+  </a>
+</template>
+
+<script lang="ts" setup>
+import { useRepoStore } from '@/store/respoStore';
+import { computed } from 'vue';
+const repoStore = useRepoStore();
+
+const resetFilter = () => repoStore.resetFilter();
+const isFiltered = computed(
+  () =>
+    repoStore.selectedLabel || repoStore.selectedMilestone || repoStore.sortBy,
+);
+</script>
+
+<style lang="scss" scoped>
+.clear_wrapper {
+  &:hover {
+    .close_icon {
+      background-color: rgb(46, 94, 190);
+    }
+  }
+}
+.close_icon {
+  background-color: rgb(107 114 128);
+  color: white;
+  border-radius: 0.375rem;
+}
+</style>
diff --git a/vue3-apollo-quasar/src/components/ClearIssuePRFilter/index.ts b/vue3-apollo-quasar/src/components/ClearIssuePRFilter/index.ts
@@ -0,0 +1,2 @@
+import ClearIssuePRFilter from './ClearIssuePRFilter.vue';
+export default ClearIssuePRFilter;
diff --git a/vue3-apollo-quasar/src/components/IssuePullRequestTab/IssuePullRequestTab.vue b/vue3-apollo-quasar/src/components/IssuePullRequestTab/IssuePullRequestTab.vue
@@ -17,7 +17,9 @@
             name="svguse:app-icons/issue.svg#issue"
             v-else
           />
-          <span class="q-mr-xs" v-if="openCounts">{{ openCounts }}</span>
+          <span class="q-mr-xs" v-if="!isNaN(openCounts)">{{
+            openCounts
+          }}</span>
           Open
         </button>
         <button
@@ -29,7 +31,9 @@
             class="text-h6 custom-icon"
             name="svguse:app-icons/correct.svg#correct"
           />
-          <span class="q-mr-xs" v-if="closedCounts">{{ closedCounts }}</span>
+          <span class="q-mr-xs" v-if="!isNaN(closedCounts)">{{
+            closedCounts
+          }}</span>
           Closed
         </button>
       </div>
@@ -38,49 +42,105 @@
           label="Label"
           flat
           class="text-capitalize q-px-xs dropdown-label dropdown-label--label text-caption row justify-center items-center bg-transparent no-border cursor-pointer"
-          @click="toggleLabelMenu()"
         >
-          <q-list class="dropdown-menu q-menu" v-if="labelRef">
-            <slot name="label-list">
-              <q-item
-                class="text-center text-caption text-primary text-bold q-py-xs block"
-              >
-                Label options
-              </q-item>
-            </slot>
+          <q-list separator class="dropdown-menu">
+            <div
+              class="q-py-sm q-px-md row justify-between items-center text-caption text-weight-bold"
+            >
+              Select Label
+              <q-icon name="close" size="xs" v-close-popup />
+            </div>
+            <q-separator />
+            <q-item
+              v-for="label in labelsOpt"
+              class="text-caption"
+              :key="label.name"
+              clickable
+              v-close-popup
+              @click="setlabel(label.name)"
+            >
+              <q-item-section>
+                <span class="row items-center q-gutter-x-xs">
+                  <span v-if="repoStore.selectedLabel === label.name">
+                    <q-icon name="check" size="xs" />
+                  </span>
+                  <span class="q-mr-md" v-else />
+                  <span>
+                    {{ label.name }}
+                  </span>
+                </span>
+              </q-item-section>
+            </q-item>
           </q-list>
         </q-btn-dropdown>
         <q-btn-dropdown
-          v-if="tabType === TAB_TYPE.ISSUE"
           label="Milestones"
           flat
           class="text-capitalize q-px-xs dropdown-label dropdown-label--milestones text-caption row justify-center items-center bg-transparent no-border cursor-pointer"
-          @click="toggleMilestonesMenu()"
         >
-          <q-list separator class="dropdown-menu q-menu" v-if="milestonesRef">
-            <slot name="sort-list">
-              <q-item
-                class="text-center text-caption text-primary text-bold q-py-xs block"
-              >
-                Milestones options
-              </q-item>
-            </slot>
+          <q-list separator class="dropdown-menu">
+            <div
+              class="q-py-sm q-px-md row justify-between items-center text-caption text-weight-bold"
+            >
+              Select Milestone
+              <q-icon name="close" size="xs" v-close-popup />
+            </div>
+            <q-separator />
+            <q-item
+              v-for="milestone in milestoneOpt"
+              class="text-caption"
+              :key="milestone.id"
+              clickable
+              v-close-popup
+              @click="setMilestone(milestone.title)"
+            >
+              <q-item-section>
+                <span class="row items-center q-gutter-x-xs">
+                  <span v-if="repoStore.selectedMilestone === milestone.title">
+                    <q-icon name="check" size="xs" />
+                  </span>
+                  <span class="q-mr-md" v-else />
+                  <span>
+                    {{ milestone.title }}
+                  </span>
+                </span>
+              </q-item-section>
+            </q-item>
           </q-list>
         </q-btn-dropdown>
         <q-btn-dropdown
           label="Sort"
           flat
           class="text-capitalize q-px-xs dropdown-label dropdown-label--sort text-caption row justify-center items-center bg-transparent no-border cursor-pointer posi"
-          @click="toggleSortMenu()"
         >
-          <q-list separator class="dropdown-menu q-menu" v-if="sortRef">
-            <slot name="sort-list">
-              <q-item
-                class="text-center text-caption text-primary text-bold q-py-xs block"
-              >
-                Sort options
-              </q-item>
-            </slot>
+          <q-list separator class="dropdown-menu">
+            <div
+              class="q-py-sm q-px-md row justify-between items-center text-caption text-weight-bold"
+            >
+              Sort By
+              <q-icon name="close" size="xs" v-close-popup />
+            </div>
+            <q-separator />
+            <q-item
+              v-for="option in sortOptions"
+              class="text-caption"
+              :key="option"
+              clickable
+              v-close-popup
+              @click="setSortBy(option)"
+            >
+              <q-item-section>
+                <span class="row items-center q-gutter-x-xs">
+                  <span v-if="repoStore.sortBy === option">
+                    <q-icon name="check" size="xs" />
+                  </span>
+                  <span class="q-mr-md" v-else />
+                  <span>
+                    {{ option }}
+                  </span>
+                </span>
+              </q-item-section>
+            </q-item>
           </q-list>
         </q-btn-dropdown>
       </div>
@@ -90,8 +150,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
+import { computed, defineComponent, ref } from 'vue';
 import { TAB_TYPE, TABS } from './data';
+import { useRepoStore } from '@/store/respoStore';
+import { getSelectedMilestoneNumber, SORT_OPTIONS } from '@/helpers';
 
 export default defineComponent({
   name: 'IssuePullRequestTab',
@@ -116,6 +178,22 @@ export default defineComponent({
     const labelRef = ref(false);
     const sortRef = ref(false);
     const milestonesRef = ref(false);
+    const sortOptions = Object.values(SORT_OPTIONS);
+    const repoStore = useRepoStore();
+
+    const labelsOpt = computed(() => repoStore.labels);
+    const milestoneOpt = computed(() => repoStore.milestones);
+
+    const setMilestone = (value: string) => {
+      repoStore.setSelectedMilestone(value);
+      const milestoneNum = getSelectedMilestoneNumber(
+        repoStore.milestones || [],
+        value,
+      );
+      repoStore.setSelectedMilestoneNumber(milestoneNum);
+    };
+    const setlabel = (value: string) => repoStore.setSelectedLabel(value);
+    const setSortBy = (value: string) => repoStore.setSortBy(value);
 
     const isTab = (value) => value === activeTab.value;
 
@@ -158,11 +236,18 @@ export default defineComponent({
       milestonesRef,
       sortRef,
       TAB_TYPE,
+      milestoneOpt,
+      labelsOpt,
+      repoStore,
+      sortOptions,
       isTab,
       toggleLabelMenu,
       toggleSortMenu,
       updateActiveTab,
       toggleMilestonesMenu,
+      setMilestone,
+      setlabel,
+      setSortBy,
     };
   },
 });
@@ -200,4 +285,11 @@ export default defineComponent({
     transform: translateY(0.1rem);
   }
 }
+
+.dropdown-menu {
+  width: 100%;
+  height: 100%;
+  min-width: 200px;
+  max-height: unset;
+}
 </style>
diff --git a/vue3-apollo-quasar/src/components/IssueTabView/IssueTabView.stories.ts b/vue3-apollo-quasar/src/components/IssueTabView/IssueTabView.stories.ts
@@ -18,9 +18,13 @@ const Template = (args) => ({
 export const Default = Template.bind({});
 Default.args = {
   openIssues: {
-    edges: ISSUES.openIssue,
+    pullRequests: ISSUES.openIssue,
+    totalCount: 20,
+    pageInfo: { hasNextPage: false, hasPreviousPage: false },
   },
   closedIssues: {
-    edges: ISSUES.closedIssue,
+    pullRequests: ISSUES.closedIssue,
+    totalCount: 20,
+    pageInfo: { hasNextPage: false, hasPreviousPage: false },
   },
 };