Skip to content

Commit

Permalink
Enterキーを押して検索できる機能を追加 (#82)
Browse files Browse the repository at this point in the history
* Remove AppFormSearch.vue

* Add `@keydown.enter`

* Remove AppFormUser.vue

* Update help

* Remove AppFormDate.vue

* Remove AppFormKeyword.vue

* Fix `@keydown.enter` event

* Remove AppFormIncludesRetweets.vue

* Remove AppFormTwilogDate.vue

* Remove AppFormTwilogSearch.vue

* Update style

* Remove AppFormTwisaveDate.vue

* Remove AppFormTwisaveSearch.vue

* Update help

* Update help
  • Loading branch information
munierujp authored Apr 23, 2023
1 parent 63f4279 commit 4769292
Show file tree
Hide file tree
Showing 13 changed files with 177 additions and 202 deletions.
4 changes: 4 additions & 0 deletions assets/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,3 +17,7 @@ body {
background-color: var(--app-background-color);
color: var(--app-text-color);
}

.el-checkbox {
--el-checkbox-checked-text-color: unset !important
}
1 change: 1 addition & 0 deletions components/AppDialog.vue
Original file line number Diff line number Diff line change
Expand Up @@ -37,5 +37,6 @@ const showDialog = computed<boolean>({
.app-dialog {
width: calc(100vw - 8px * 2);
max-width: 600px;
word-break: break-word
}
</style>
166 changes: 157 additions & 9 deletions components/AppForm.vue
Original file line number Diff line number Diff line change
@@ -1,13 +1,161 @@
<script lang="ts" setup>
import {
parseISO,
subDays,
subYears
} from 'date-fns'
const form = useFormStore()
const now = new Date()
const setToToday = () => {
form.date = formatISODate(now)
}
const setToYesterday = () => {
form.date = formatISODate(subDays(now, 1))
}
const setToOneYearAgo = () => {
form.date = formatISODate(subYears(now, 1))
}
const openTwitter = () => {
const url = createTwitterSearchURL({
user: form.user,
date: parseISO(form.date),
keyword: form.keyword,
includesRetweets: form.includesRetweets
})
window.open(url)
}
const handleEnter = (event: KeyboardEvent | Event) => {
if (event instanceof KeyboardEvent && event.keyCode === 13) {
openTwitter()
}
}
const openTwilogDate = () => {
const url = createTwilogDateURL({
user: form.user,
date: parseISO(form.date)
})
window.open(url)
}
const openTwilogSearch = () => {
const url = createTwilogKeywordSearchURL({
user: form.user,
keyword: form.keyword
})
window.open(url)
}
const openTwisaveDate = () => {
const url = createTwisaveDateURL({
user: form.user,
date: parseISO(form.date)
})
window.open(url)
}
const openTwisaveSearch = () => {
const url = createTwisaveKeywordSearchURL({
user: form.user,
keyword: form.keyword
})
window.open(url)
}
</script>

<template>
<el-form label-position="top">
<AppFormUser />
<AppFormDate />
<AppFormKeyword />
<AppFormIncludesRetweets />
<AppFormSearch />
<AppFormTwilogDate />
<AppFormTwilogSearch />
<AppFormTwisaveDate />
<AppFormTwisaveSearch />
<el-form-item label="ユーザー">
<el-input
v-model="form.user"
placeholder="munieru_jp"
clearable
autofocus
@keydown.enter="handleEnter"
/>
</el-form-item>
<el-form-item label="日付">
<el-date-picker
v-model="form.date"
type="date"
value-format="YYYY-MM-DD"
clearable
@keydown.enter="handleEnter"
/>
</el-form-item>
<el-form-item>
<el-button
size="small"
:circle="false"
@click="setToToday"
>
今日
</el-button>
<el-button
size="small"
:circle="false"
@click="setToYesterday"
>
昨日
</el-button>
<el-button
size="small"
:circle="false"
@click="setToOneYearAgo"
>
1年前
</el-button>
</el-form-item>
<el-form-item label="キーワード">
<el-input
v-model="form.keyword"
clearable
@keydown.enter="handleEnter"
/>
</el-form-item>
<el-form-item>
<el-checkbox
v-model="form.includesRetweets"
label="リツイートを含む"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
:circle="false"
@click="openTwitter"
>
検索
</el-button>
</el-form-item>
<el-form-item>
<el-button
:circle="false"
@click="openTwilogDate"
>
Twilog(日付)
</el-button>
</el-form-item>
<el-form-item>
<el-button
:circle="false"
@click="openTwilogSearch"
>
Twilog(検索)
</el-button>
</el-form-item>
<el-form-item>
<el-button
:circle="false"
@click="openTwisaveDate"
>
ツイセーブ(日付)
</el-button>
</el-form-item>
<el-form-item>
<el-button
:circle="false"
@click="openTwisaveSearch"
>
ツイセーブ(検索)
</el-button>
</el-form-item>
</el-form>
</template>
49 changes: 0 additions & 49 deletions components/AppFormDate.vue

This file was deleted.

16 changes: 0 additions & 16 deletions components/AppFormIncludesRetweets.vue

This file was deleted.

12 changes: 0 additions & 12 deletions components/AppFormKeyword.vue

This file was deleted.

25 changes: 0 additions & 25 deletions components/AppFormSearch.vue

This file was deleted.

20 changes: 0 additions & 20 deletions components/AppFormTwilogDate.vue

This file was deleted.

18 changes: 0 additions & 18 deletions components/AppFormTwilogSearch.vue

This file was deleted.

20 changes: 0 additions & 20 deletions components/AppFormTwisaveDate.vue

This file was deleted.

18 changes: 0 additions & 18 deletions components/AppFormTwisaveSearch.vue

This file was deleted.

14 changes: 0 additions & 14 deletions components/AppFormUser.vue

This file was deleted.

Loading

0 comments on commit 4769292

Please sign in to comment.