feat: add exclude tags filter for directory entries

herteleo · Nov 2, 2022 · cd38e64 · cd38e64
1 parent 6e456d7
commit cd38e64
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -23,6 +23,7 @@ Open a local folder and explore your files inside the browser. Your files stay p
   IMG001 [2021, Berlin].jpg
   IMG002 [2022, New York].jpg
   ```
+  Right-click tags in filter to exclude entries with the respective tag from the list.
 - Place an image file named like the folder to define a permanent cover/thumbnail. Example:
   - Folder name: `Wallpapers`
   - Image inside folder: `Wallpapers.jpg`

diff --git a/src/features/useDirFilter.ts b/src/features/useDirFilter.ts
@@ -1,4 +1,4 @@
-import { computed, ref, type Ref } from 'vue';
+import { computed, reactive, ref, type Ref } from 'vue';
 import type { CurrentDirEntry } from '@/features/useDir';
 
 const showFilter = ref(false);
@@ -9,16 +9,29 @@ const toggleFilter = () => {
 
 const stringFilter = ref('');
 
-const tagFilter = ref<Array<string>>([]);
+const tagFilter = reactive<Record<'include' | 'exclude', Array<string>>>({
+  include: [],
+  exclude: [],
+});
 
-const isTagInFilter = (tag: string) => tagFilter.value.includes(tag);
+const isTagFilterActive = computed(() => tagFilter.include.length || tagFilter.exclude.length);
 
-const toggleTag = (tag: string) => {
-  if (isTagInFilter(tag)) {
-    tagFilter.value = tagFilter.value.filter((t) => t !== tag);
+const isTagInFilter = (tag: string, mode: keyof typeof tagFilter) => tagFilter[mode].includes(tag);
+
+const removeTag = (tag: string, mode: keyof typeof tagFilter) => {
+  tagFilter[mode] = tagFilter[mode].filter((t) => t !== tag);
+};
+
+const toggleTag = (tag: string, mode: keyof typeof tagFilter) => {
+  if (isTagInFilter(tag, mode)) {
+    removeTag(tag, mode);
     return;
   }
-  tagFilter.value.push(tag);
+
+  if (mode === 'exclude' && isTagInFilter(tag, 'include')) removeTag(tag, 'include');
+  if (mode === 'include' && isTagInFilter(tag, 'exclude')) removeTag(tag, 'exclude');
+
+  tagFilter[mode].push(tag);
 };
 
 const isUntaggedActive = ref(false);
@@ -28,7 +41,8 @@ const toggleUntagged = () => {
 };
 
 const resetTagFilter = () => {
-  tagFilter.value = [];
+  tagFilter.include = [];
+  tagFilter.exclude = [];
   isUntaggedActive.value = false;
 };
 
@@ -60,7 +74,7 @@ const useDirFilter = (dirEntries: Ref<CurrentDirEntry[]>) => {
       .flat()
       .sort();
 
-    return [...new Set([...tags, ...tagFilter.value].sort())];
+    return [...new Set([...tags, ...tagFilter.include, ...tagFilter.exclude].sort())];
   });
 
   const filteredDirEntries = computed(() => {
@@ -73,8 +87,10 @@ const useDirFilter = (dirEntries: Ref<CurrentDirEntry[]>) => {
       let hasMatchingTags = false;
       let show = hasMatchingString;
 
-      if (hasMatchingString && tagFilter.value.length) {
-        hasMatchingTags = tagFilter.value.every((t) => tags.includes(t));
+      if (hasMatchingString && isTagFilterActive.value) {
+        hasMatchingTags =
+          tagFilter.include.every((t) => tags.includes(t)) &&
+          !tagFilter.exclude.some((t) => tags.includes(t));
         show = hasMatchingTags;
       }
 
@@ -96,6 +112,7 @@ const useDirFilter = (dirEntries: Ref<CurrentDirEntry[]>) => {
     stringFilter,
 
     getTagsFromString,
+    isTagFilterActive,
     isTagInFilter,
     isUntaggedActive,
     removeTagsFromString,

diff --git a/src/views/Dir.vue b/src/views/Dir.vue
@@ -23,10 +23,10 @@ const {
   stringFilter,
 
   getTagsFromString,
+  isTagFilterActive,
   isTagInFilter,
   removeTagsFromString,
   resetTagFilter,
-  tagFilter,
   tagFilterOptions,
   toggleTag,
   isUntaggedActive,
@@ -119,8 +119,14 @@ const dirThumbSrc = computed(
         v-for="tag in tagFilterOptions"
         :key="tag"
         class="rounded-full px-2 text-sm"
-        :class="isTagInFilter(tag) ? 'bg-amber-700 text-amber-100' : 'bg-slate-800 text-slate-400'"
-        @click="toggleTag(tag)"
+        :class="{
+          'bg-amber-700 text-amber-100': isTagInFilter(tag, 'include'),
+          'bg-slate-900 text-slate-400 line-through': isTagInFilter(tag, 'exclude'),
+          'bg-slate-800 text-slate-400':
+            !isTagInFilter(tag, 'include') && !isTagInFilter(tag, 'exclude'),
+        }"
+        @click="toggleTag(tag, 'include')"
+        @contextmenu.prevent="toggleTag(tag, 'exclude')"
         v-text="tag"
       />
       <button
@@ -129,10 +135,10 @@ const dirThumbSrc = computed(
           isUntaggedActive ? 'border-amber-700 text-amber-300' : 'border-slate-800 text-slate-600'
         "
         @click="toggleUntagged()"
-        v-text="tagFilter.length ? '+ Untagged' : 'Untagged'"
+        v-text="isTagFilterActive ? '+ Untagged' : 'Untagged'"
       />
       <button
-        v-if="tagFilter.length || isUntaggedActive"
+        v-if="isTagFilterActive || isUntaggedActive"
         class="text-sm text-slate-500"
         @click="resetTagFilter"
       >