diff --git a/frontend/components/ColumnDialog.vue b/frontend/components/ColumnDialog.vue
new file mode 100644
index 0000000..56b664f
--- /dev/null
+++ b/frontend/components/ColumnDialog.vue
@@ -0,0 +1,64 @@
+
+
+
+ Hidden Columns
+
+
+
+
+ {{ c.text }}
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/components/TaskList.vue b/frontend/components/TaskList.vue
index 85b9652..4a85e14 100644
--- a/frontend/components/TaskList.vue
+++ b/frontend/components/TaskList.vue
@@ -7,7 +7,7 @@
@yes="confirmation.handler"
/>
-
+
@@ -40,7 +40,7 @@
mdi-plus
+
+ mdi-cogs
+
@@ -193,6 +203,7 @@ import { Task } from 'taskwarrior-lib';
import _ from 'lodash';
import TaskDialog from '../components/TaskDialog.vue';
import ConfirmationDialog from '../components/ConfirmationDialog.vue';
+import ColumnDialog from '../components/ColumnDialog.vue';
import moment from 'moment';
import urlRegex from 'url-regex-safe';
import normalizeUrl from 'normalize-url';
@@ -293,6 +304,12 @@ export default defineComponent({
{ text: 'Actions', value: 'actions', sortable: false }
]);
+ const filteredHeaders = computed(()=>
+ headers.value.filter((v)=> !store.state.hiddenColumns.includes(v.value))
+ )
+
+ const showColumnDialog = ref(false);
+
const tempTasks: { [key: string]: ComputedRef } = {};
for (const status of allStatus) {
tempTasks[status] = computed((): Task[] => props.tasks?.filter(task => {
@@ -393,6 +410,7 @@ export default defineComponent({
linkify,
refresh,
headers,
+ filteredHeaders,
classifiedTasks,
status,
allStatus,
@@ -406,12 +424,14 @@ export default defineComponent({
restoreTasks,
showTaskDialog,
showConfirmationDialog,
+ showColumnDialog,
confirmation,
displayDate,
rowClass,
TaskDialog,
- ConfirmationDialog
+ ConfirmationDialog,
+ ColumnDialog,
};
}
});
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index d62e175..0fb0b7c 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -60,6 +60,7 @@ export default defineComponent({
const context = useContext();
const store = useStore();
store.dispatch('fetchSettings');
+ store.dispatch('fetchHiddenColumns');
context.$vuetify.theme.dark = store.state.settings.dark;
diff --git a/frontend/store/index.ts b/frontend/store/index.ts
index e7252c6..710d4fd 100644
--- a/frontend/store/index.ts
+++ b/frontend/store/index.ts
@@ -13,7 +13,8 @@ export const state = () => ({
dark: false,
autoRefresh: '5', // in minutes
autoSync: '0' // in minutes
- }
+ },
+ hiddenColumns: [] as string[]
});
export type RootState = ReturnType;
@@ -34,6 +35,10 @@ export const mutations: MutationTree = {
state.tasks = tasks;
},
+ setHiddenColumns(state, hiddenColumns) {
+ state.hiddenColumns = hiddenColumns
+ },
+
setNotification(state, notification) {
state.notification = notification;
// Show notification
@@ -58,6 +63,18 @@ export const actions: ActionTree = {
localStorage.setItem('settings', JSON.stringify(settings));
},
+ fetchHiddenColumns(context) {
+ const columns = localStorage.getItem('hiddenColumns');
+ if (columns) {
+ context.commit('setHiddenColumns', JSON.parse(columns));
+ }
+ },
+
+ updateHiddenColumns(context, columns) {
+ context.commit('setHiddenColumns', columns);
+ localStorage.setItem('hiddenColumns', JSON.stringify(columns));
+ },
+
async fetchTasks(context) {
const tasks: Task[] = await this.$axios.$get('/api/tasks');
context.commit('setTasks', tasks);