feat: query multiple states

src/application/domain/interface/githubAccessor.ts

@@ -17,7 +17,7 @@ export type Option = {
   count?: number
   sortField?: SortField
   sortDirection?: SortDirection
-  states?: QueryState
+  states?: QueryState[]
 }
 
 export interface GitHubAccessor {

src/components/QueryOption.vue

@@ -24,11 +24,12 @@
     </div>
     <div v-if="isStateSpecifiable" class="option-line">
       <span class="option-title">State:</span>
-      <select v-model="viewModel.queryState" class="state-input">
-        <option v-for="name in states" :key="name">
-          {{ name }}
-        </option>
-      </select>
+      <p class="state-checkbox">
+        <span v-for="(state, index) in states" :key="index">
+          <input :id="state" v-model="viewModel.checkedStates" type="checkbox" :value="state" />
+          <label :for="state">{{ state.toLowerCase() }}</label>
+        </span>
+      </p>
     </div>
   </div>
 </template>
@@ -146,14 +147,13 @@ class OptionViewModel {
   sortField: Ref<SortField>
   sortDirection: Ref<SortDirection>
   selectedValue: Ref<SortName>
-  queryState: Ref<QueryState | undefined>
+  checkedStates: Ref<QueryState[]> = ref(['OPEN'])
 
-  constructor(defaultState?: QueryState) {
+  constructor() {
     this.#defaultSort = namedSortList[0]
     this.sortField = ref(this.#defaultSort.sortField)
     this.sortDirection = ref(this.#defaultSort.sortDirection)
     this.selectedValue = ref(this.#defaultSort.sortName)
-    this.queryState = ref(defaultState)
   }
 
   setOption = (option: Option): void => {
@@ -183,7 +183,7 @@ class OptionViewModel {
       count: this.itemCount.value,
       sortField: sort.sortField,
       sortDirection: sort.sortDirection,
-      states: this.queryState.value,
+      states: this.checkedStates.value,
     }
   }
 }
@@ -198,7 +198,7 @@ export default defineComponent({
   },
   setup(props: PropsType) {
     const isStateSpecifiable = props.viewType === 'issues' || props.viewType === 'pullRequests'
-    const viewModel = reactive(new OptionViewModel(isStateSpecifiable ? 'OPEN' : undefined))
+    const viewModel = reactive(new OptionViewModel())
     const itemCounts = ref(definedCounts)
     const sortNames = ref(
       namedSortList.filter(v => v.supportedBy.includes(props.viewType)).map(v => v.sortName)
@@ -288,4 +288,11 @@ export default defineComponent({
     margin-top: 10px;
   }
 }
+
+.state-checkbox {
+  text-transform: capitalize;
+  text-align: right;
+  margin: 0;
+  padding-right: 10px;
+}
 </style>

src/store/queryOption.ts

@@ -9,14 +9,14 @@ const issueOption = reactive<Option>({
   count: 10,
   sortField: 'UPDATED_AT',
   sortDirection: 'DESC',
-  states: 'OPEN',
+  states: ['OPEN'],
 })
 
 const prOption = reactive<Option>({
   count: 10,
   sortField: 'UPDATED_AT',
   sortDirection: 'DESC',
-  states: 'OPEN',
+  states: ['OPEN'],
 })
 
 const releaseOption = reactive<Option>({

src/views/issues/GitHubIssue.vue

@@ -92,7 +92,7 @@ export default defineComponent({
       loading.value = true
       const { repositorySetting } = props
       const option = queryOption.issues()
-      queryState.value = option.states?.toLocaleLowerCase() || ''
+      queryState.value = option.states?.join('/').toLowerCase() || ''
       isFailed.value = await getIssuesUseCase
         .execute(repositorySetting, option)
         .then((i: Issues) => mutations.replace(i))

src/views/pullrequests/GitHubPullRequest.vue

@@ -96,7 +96,7 @@ export default defineComponent({
       loading.value = true
       const { repositorySetting } = props
       const option = queryOption.pullRequests()
-      queryState.value = option.states?.toLocaleLowerCase() || ''
+      queryState.value = option.states?.join('/').toLowerCase() || ''
       isFailed.value = await getPullRequestsUseCase
         .execute(repositorySetting, option)
         .then((prs: PullRequests) => mutations.replace(prs))

tests/unit/component/QueryOption.spec.ts

@@ -1,5 +1,5 @@
-import { shallowMount } from '@vue/test-utils'
 import QueryOption from '@/components/QueryOption.vue'
+import { shallowMount } from '@vue/test-utils'
 
 describe('QueryOption.vue', () => {
   it('shows/hides option', async () => {
@@ -100,37 +100,44 @@ describe('QueryOption.vue', () => {
       count: 10,
       sortField: 'UPDATED_AT',
       sortDirection: 'DESC',
-      states: 'OPEN',
+      states: ['OPEN'],
     })
 
     await wrapper.find('.fa-cog').trigger('click')
 
+    const checkboxes = wrapper.findAll('input[type="checkbox"]')
+    expect(checkboxes).toHaveLength(2)
+
     // update options (1)
     // - count -> 3
     // - sort -> Newest
     // - state -> CLOSED
     await wrapper.find('select.number-input').setValue(3)
     await wrapper.find('select.sort-input').setValue('Newest')
-    await wrapper.find('select.state-input').setValue('CLOSED')
+    await checkboxes[0].setValue(false)
+    await checkboxes[1].setValue(true)
+
     const actual2 = wrapper.vm.viewModel.getOption()
     expect(actual2).toEqual({
       count: 3,
       sortField: 'CREATED_AT',
       sortDirection: 'DESC',
-      states: 'CLOSED',
+      states: ['CLOSED'],
     })
 
     // update options (2)
     // - count -> 20
     // - sort -> Least commented
+    // - state -> OPEN, CLOSED
     await wrapper.find('select.number-input').setValue(20)
     await wrapper.find('select.sort-input').setValue('Least commented')
+    await checkboxes[0].setValue(true)
     const actual3 = wrapper.vm.viewModel.getOption()
     expect(actual3).toEqual({
       count: 20,
       sortField: 'COMMENTS',
       sortDirection: 'ASC',
-      states: 'CLOSED',
+      states: ['CLOSED', 'OPEN'],
     })
   })
 })

tests/unit/views/issues/GitHubIssue.spec.ts

@@ -50,7 +50,7 @@ mockedQueryOption.issues.mockReturnValue({
   count: 10,
   sortField: 'UPDATED_AT',
   sortDirection: 'DESC',
-  states: 'OPEN',
+  states: ['OPEN'],
 })
 
 const githubUrl = GitHubUrl.from('https://github.com')

tests/unit/views/pullrequests/GitHubPullRequest.spec.ts

@@ -61,7 +61,7 @@ mockedQueryOption.pullRequests.mockReturnValue({
   count: 10,
   sortField: 'UPDATED_AT',
   sortDirection: 'DESC',
-  states: 'OPEN',
+  states: ['OPEN'],
 })
 
 const githubUrl = GitHubUrl.from('https://github.com')