Added clear completed todos (#9782)

website/client/components/tasks/clearCompletedTodos.vue

@@ -0,0 +1,33 @@
+<template lang="pug">
+.text-center.delete-completed
+  .help-text {{ $t('clearCompletedDescription') }}
+  .btn.btn-danger(@click='clearTodos()') {{ $t('clearCompleted') }}
+</template>
+
+<style lang="scss">
+.delete-completed {
+  padding: 1em;
+
+  .help-text {
+    color: #878190;
+    font-size: 12px;
+  }
+
+  .btn-danger {
+    font-size: 12px;
+    padding: .4em .6em;
+    margin-top: .5em;
+  }
+}
+</style>
+
+<script>
+export default {
+  methods: {
+    clearTodos () {
+      if (!confirm(this.$t('clearCompletedConfirm'))) return;
+      this.$store.dispatch('tasks:clearCompletedTodos');
+    },
+  },
+};
+</script>

website/client/components/tasks/column.vue

@@ -26,6 +26,7 @@
     )
     transition(name="quick-add-tip-slide")
       .quick-add-tip.small-text(v-show="quickAddFocused", v-html="$t('addMultipleTip')")
+    clear-completed-todos(v-if="activeFilters[type].label === 'complete2'")
     .column-background(
       v-if="isUser === true",
       :class="{'initial-description': initialColumnDescription}",
@@ -243,6 +244,7 @@
 
 <script>
 import Task from './task';
+import ClearCompletedTodos from './clearCompletedTodos';
 import sortBy from 'lodash/sortBy';
 import throttle from 'lodash/throttle';
 import buyMixin from 'client/mixins/buy';
@@ -267,6 +269,7 @@ export default {
   mixins: [buyMixin, notifications],
   components: {
     Task,
+    ClearCompletedTodos,
     BuyQuestModal,
     shopItem,
     draggable,