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,

website/client/store/actions/tasks.js

@@ -50,6 +50,14 @@ export async function fetchCompletedTodos (store, forceLoad = false) {
   }
 }
 
+export async function clearCompletedTodos (store) {
+  await axios.post('/api/v3/tasks/clearCompletedTodos');
+  store.state.tasks.data.todos = store.state.tasks.data.todos.filter(task => {
+    return !task.completed;
+  });
+}
+
+
 export function order (store, [rawTasks, tasksOrder]) {
   const tasks = {
     habits: [],

website/common/locales/en/tasks.json

@@ -1,5 +1,7 @@
 {
   "clearCompleted": "Delete Completed",
+  "clearCompletedDescription": "Completed To-Dos are deleted after 30 days for non-subscribers and 90 days for subscribers.",
+  "clearCompletedConfirm": "Are you sure you want to clear your completed todos?",
   "lotOfToDos": "Your most recent 30 completed To-Dos are shown here. You can see older completed To-Dos from Data > Data Display Tool or Data > Export Data > User Data.",
   "deleteToDosExplanation": "If you click the button below, all of your completed To-Dos and archived To-Dos will be permanently deleted, except for To-Dos from active challenges and Group Plans. Export them first if you want to keep a record of them.",
   "addMultipleTip": "<strong>Tip:</strong> To add multiple Tasks, separate each one using a line break (Shift + Enter) and then press \"Enter.\"",