From ab1c546f3050dc281d727263feb04589797fe248 Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Tue, 9 Mar 2021 15:57:15 +0900
Subject: [PATCH] Add filter button

---
 .../tasks/toolbar/buttons/ButtonFilter.vue    | 72 +++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 frontend/components/tasks/toolbar/buttons/ButtonFilter.vue

diff --git a/frontend/components/tasks/toolbar/buttons/ButtonFilter.vue b/frontend/components/tasks/toolbar/buttons/ButtonFilter.vue
new file mode 100644
index 00000000..a161d11b
--- /dev/null
+++ b/frontend/components/tasks/toolbar/buttons/ButtonFilter.vue
@@ -0,0 +1,72 @@
+<template>
+  <v-menu>
+    <template v-slot:activator="{ on: menu }">
+      <v-tooltip bottom>
+        <template v-slot:activator="{ on: tooltip }">
+          <v-btn
+            icon
+            v-on="{ ...tooltip, ...menu }"
+          >
+            <v-icon>
+              mdi-filter
+            </v-icon>
+          </v-btn>
+        </template>
+        <span>{{ $t('annotation.selectFilterTooltip') }}</span>
+      </v-tooltip>
+    </template>
+    <v-list>
+      <v-list-item-group v-model="selected" mandatory>
+        <v-list-item
+          v-for="(item, i) in items"
+          :key="i"
+        >
+          <v-list-item-icon>
+            <v-icon v-if="selected === i">
+              mdi-check
+            </v-icon>
+          </v-list-item-icon>
+          <v-list-item-content>
+            <v-list-item-title>
+              {{ item.title }}
+            </v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+      </v-list-item-group>
+    </v-list>
+  </v-menu>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: '',
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      items: [
+        { title: this.$t('annotation.filterOption1'), param: '' },
+        { title: this.$t('annotation.filterOption2'), param: 'false' },
+        { title: this.$t('annotation.filterOption3'), param: 'true' }
+      ]
+    }
+  },
+
+  computed: {
+    selected: {
+      get() {
+        const index = this.items.findIndex(item => item.param === this.value)
+        return index === -1 ? 0 : index
+      },
+      set(value) {
+        this.$emit('click:filter', this.items[value].param)
+      }
+    }
+  }
+}
+</script>