forked from
tobinio.dev/task-line
A simple to-do app focused on tasks that can be completed within a specific time span.
move filter components to Filter folder
+74
-10
+64
app/components/Filter/TagSelect.vue
+64
app/components/Filter/TagSelect.vue
···
1
+
<script setup lang="ts">
2
+
import { useFilteredTodos } from "~/composables/useFilteredTodos";
3
+
import { useTagStore } from "~/stores/useTagStore";
4
+
import type { Label as LabelType, UUID } from "~~/shared/types";
5
+
import TagLabel from "../Utils/Label/TagLabel.vue";
6
+
7
+
const selectedTags = defineModel<UUID[]>("tags", { required: true });
8
+
9
+
const props = defineProps<{ showAll: boolean }>();
10
+
11
+
const tagStore = useTagStore();
12
+
13
+
function onPress(tag: UUID) {
14
+
if (selectedTags.value!.includes(tag)) {
15
+
selectedTags.value = selectedTags.value!.filter((id) => id !== tag);
16
+
} else {
17
+
selectedTags.value = [tag, ...selectedTags.value!];
18
+
}
19
+
}
20
+
21
+
function isSelected(tag: LabelType): boolean {
22
+
return selectedTags.value!.includes(tag.uuid);
23
+
}
24
+
25
+
const filteredTodos = useFilteredTodos();
26
+
27
+
const tags = computed(() => {
28
+
if (props.showAll) {
29
+
return tagStore.data;
30
+
}
31
+
32
+
const activeTags = filteredTodos.value.flatMap((todo) => todo.tags);
33
+
const tagCount = activeTags.reduce(
34
+
(acc, id) => {
35
+
acc[id] = (acc[id] || 0) + 1;
36
+
return acc;
37
+
},
38
+
{} as Record<UUID, number>,
39
+
);
40
+
41
+
return tagStore.data
42
+
.filter((tag) => tagCount[tag.uuid]! > 0)
43
+
.sort((a, b) => {
44
+
const diff = tagCount[b.uuid]! - tagCount[a.uuid]!;
45
+
if (diff !== 0) return diff;
46
+
47
+
return a.name.localeCompare(b.name);
48
+
});
49
+
});
50
+
</script>
51
+
52
+
<template>
53
+
<div class="overflow-auto">
54
+
<TagLabel
55
+
v-for="tag in tags"
56
+
:key="tag.uuid"
57
+
:label="tag"
58
+
type="tag"
59
+
:is-selected="isSelected(tag)"
60
+
class="mr-1 mb-1"
61
+
@press="onPress(tag.uuid)"
62
+
/>
63
+
</div>
64
+
</template>
+5
-5
app/components/FilterSheet.vue
app/components/Filter/FilterSheet.vue
+5
-5
app/components/FilterSheet.vue
app/components/Filter/FilterSheet.vue
···
1
1
<script setup lang="ts">
2
-
import TimeSelect from "./filter/TimeSelect.vue";
3
-
import MultiCategorySelect from "./Utils/Label/MultiCategorySelect.vue";
4
-
import TagSelect from "./Utils/Label/TagSelect.vue";
5
-
import Sheet from "./Utils/Sheet.vue";
2
+
import TimeSelect from "../Filter/TimeSelect.vue";
3
+
import Sheet from "../Utils/Sheet.vue";
4
+
import CategorySelect from "./CategorySelect.vue";
5
+
import TagSelect from "./TagSelect.vue";
6
6
7
7
const isOpen = defineModel<boolean>("isOpen", { required: true });
8
8
···
24
24
</div>
25
25
<div>
26
26
<h2 class="text-muted-text text-lg">{{ t("categories") }}</h2>
27
-
<MultiCategorySelect v-model:categorys="category" />
27
+
<CategorySelect v-model:categorys="category" />
28
28
</div>
29
29
<div>
30
30
<h2 class="text-muted-text text-lg">{{ t("tags") }}</h2>
+1
-1
app/components/Utils/Label/MultiCategorySelect.vue
app/components/Filter/CategorySelect.vue
+1
-1
app/components/Utils/Label/MultiCategorySelect.vue
app/components/Filter/CategorySelect.vue
···
1
1
<script setup lang="ts">
2
2
import { useCategoryStore } from "~/stores/useCategoryStore";
3
3
import type { Label as LabelType, UUID } from "~~/shared/types";
4
-
import CategoryLabel from "./CategoryLabel.vue";
4
+
import CategoryLabel from "../Utils/Label/CategoryLabel.vue";
5
5
6
6
const activeCategorys = defineModel<UUID[]>("categorys", {
7
7
required: true,
app/components/filter/TimeSelect.vue
app/components/Filter/TimeSelect.vue
app/components/filter/TimeSelect.vue
app/components/Filter/TimeSelect.vue