From c873649ae7e22588ee3d5d9ae0f653e195b0ebd5 Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Fri, 1 Nov 2019 11:42:05 +0900
Subject: [PATCH] Add filter button

---
 .../containers/annotation/FilterButton.vue    | 55 +++++++++++++++++++
 .../containers/annotation/GuidelineButton.vue |  2 +-
 .../projects/_id/sequence-labeling/index.vue  |  3 +
 3 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 frontend/components/containers/annotation/FilterButton.vue

diff --git a/frontend/components/containers/annotation/FilterButton.vue b/frontend/components/containers/annotation/FilterButton.vue
new file mode 100644
index 00000000..fdcfd4d5
--- /dev/null
+++ b/frontend/components/containers/annotation/FilterButton.vue
@@ -0,0 +1,55 @@
+<template>
+  <v-menu>
+    <template v-slot:activator="{ on: menu }">
+      <v-tooltip bottom>
+        <template v-slot:activator="{ on: tooltip }">
+          <v-btn
+            class="text-capitalize ps-1 pe-1"
+            min-width="36"
+            outlined
+            v-on="{ ...tooltip, ...menu }"
+          >
+            <v-icon>
+              mdi-filter
+            </v-icon>
+          </v-btn>
+        </template>
+        <span>Select a filter</span>
+      </v-tooltip>
+    </template>
+    <v-list>
+      <v-list-item-group v-model="selected">
+        <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 {
+  data() {
+    return {
+      selected: 0,
+      items: [
+        { title: 'All' },
+        { title: 'Done' },
+        { title: 'Undone' }
+      ]
+    }
+  }
+}
+</script>
diff --git a/frontend/components/containers/annotation/GuidelineButton.vue b/frontend/components/containers/annotation/GuidelineButton.vue
index ccd6fe74..87054452 100644
--- a/frontend/components/containers/annotation/GuidelineButton.vue
+++ b/frontend/components/containers/annotation/GuidelineButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="display:inline;">
     <v-tooltip bottom>
       <template v-slot:activator="{ on }">
         <v-btn
diff --git a/frontend/pages/projects/_id/sequence-labeling/index.vue b/frontend/pages/projects/_id/sequence-labeling/index.vue
index bef61e07..b6b6ac0f 100644
--- a/frontend/pages/projects/_id/sequence-labeling/index.vue
+++ b/frontend/pages/projects/_id/sequence-labeling/index.vue
@@ -6,6 +6,7 @@
         class="d-none d-sm-flex"
       >
         <v-col>
+          <filter-button />
           <guideline-button />
         </v-col>
         <v-spacer />
@@ -38,6 +39,7 @@ import { mapGetters } from 'vuex'
 import EntityItemBox from '~/components/containers/annotation/EntityItemBox'
 import Paginator from '~/components/containers/annotation/Paginator'
 import GuidelineButton from '@/components/containers/annotation/GuidelineButton'
+import FilterButton from '@/components/containers/annotation/FilterButton'
 import MetadataBox from '@/components/organisms/annotation/MetadataBox'
 import BottomNavigator from '@/components/organisms/annotation/BottomNavigator'
 
@@ -49,6 +51,7 @@ export default {
   components: {
     BottomNavigator,
     EntityItemBox,
+    FilterButton,
     Paginator,
     GuidelineButton,
     MetadataBox