cottagecabbage / vu-dooit

Task Manager application for Web, Desktop and Mobile. Still in development

Vu-dooit

An open source and cross-platform Task Manager, completely offline.

About the Project(Features)

• Create multiple projects, organize your tasks.
• All your data is saved locally, through Indexeddb.
• No tracking or anything similar.
• An unfinished dark mode

I apologize for the lack of updates to Vu-dooit. I'm at my last year of highschool and I feel that it's more important to focus on my grades & entering college rn.

Installation

Clone Repository

• Get HTTPS link

• Open your terminal and type "git clone" and paste the HTTPS link you copied to clone the project locally

  git clone https://github.com/github-username/vu-dooit.git

• Locally locate that project's directory using terminal

  C:\OSS> cd vu-dooit

Install the dependencies

yarn
# or
npm install

Start the app in development mode (hot-code reloading, error reporting, etc.)

# to open on browser:
quasar dev
# to open on browser but in desired port
quasar dev --port=8080
# or with Electron:
quasar dev -m electron

Lint the files

yarn lint
# or
npm run lint

Format the files

yarn format
# or
npm run format

Build the app for production

quasar build

---

Customize the configuration

See Configuring quasar.config.js.

vu-dooit's Issues

When 'priority: ---' doesn't exist in the Task object, task doesn't get the null styling

Relevant: 8e85ac2

I assumed that if a property didn't exist, it would return null and the switch () would get that, but it doesn't seem so?

It should be easy enough making so that tasks always get the priority property when they're created, but this should be a nice failsafe?

Also, the priority classes rn are literally just {background: red} & {background: green}.
It's kinda ugly. Fix that later.

Exclude Inbox from project tree

Title. Necessary so that the sidebar can be divided in Projetcs/Labels/etc later on.

Make the app somewhat more responsive.

Vu-dooit is first and foremost a desktop app. Making it look fine on mobile isn't really important right now, but opening the Dev Tools is enough to somewhat break the layout as it is 😮‍💨

Editing tasks

Had completely forgot about this.

Not sure whether I should make it work through dialogs or just editing the text. Either way should work.

Dark Mode

Tasks:

• Find a good color pallete (palette / pallette?)
• Link it with Theme switch on header
• Persist dark mode even if app has been closed (#17)

And whatever. I edit it later if necessary.

Make a better New Task Dialog

Should have inputs for task's title, description (not implemented yet) and priority at the very least. A button to submit.

Was also thinking of a button (fixed to bottom-right of dialog) that minimizes dialog to only include the title input.

Current one works, but it seriously sucks.

Deploy app to Github Pages

fix .github/workflows/deply.yml on main branch? Not sure if that's what's wrong

Switch Vuex to Pina

Right now, Vuex is installed as a dependency, but I haven't made enough progress on app to actually begin using. I'm assuming that Pina may have a smaller amount of recourses available about it, but it seems worth it?

Am unsure of how to do it right away, but shouldn't be too difficult.

Profile Page (Basic)

Let user set an Username, description (could accept markdown, but try to make headings smaller than Username), profile picture and banner (not really that necessary right away).

Relevant: #17

Other Task-priority classes

Priority-1 and 2 are done. Make more?

• Decide if importance goes from 1 (most important) to 9 (least) or vice-versa: 9 (most) to 1 (least)
  • Not actually 9 tho. That's too many. Was just an example.
• Choose a color pallete for them.
• Add options to the array in the project store
• Update the assignPriority function to work with new classes

I think 4 should be a good number? Grey, green, yellow, red?

When screen size is below certain point, make sidebar overlay

Title basically. Right now, it occupies its own space. Would help a lot in making the app more responsive. I think the solution would be position: fixed?

Index position is being used as ID to get values. If that works, improve it somewhat. If not, change to use proper ID later

title

Switch unique classes into ids

There are too many classes that are used only once and should've been IDs from the start, such as project-details, task-list, if-no-tasks, etc.

Change them into IDs.

Dark mode for dropdown buttons

They don't have it right now

DataError when attempting to get project data

Edit this later? The error should be on ProjectStore probably

Make el-tree at sidebar toggle to show children only if chevron icon is clicked, not the text or whitespaces

Relevant: src/components/SidebarContainer.vue

[Reminder] Check and maybe fix color pallete ltr

Just remembered I had Redshift on while deciding on the colors. Not sure if they're good when it's off though. Will check it out ltr.

README Step-by-Step tutorial for installation

Clone repo, install dependencies, npm run build:electron

but more detailed

Effecting Element-Plus components with theme change.

Right now, these components receive no change on toggling on dark mode. That can be jarring to the eyes. Try fixing that.

Relevant info: https://element-plus.org/en-US/guide/theming.html

Illustrations look real crappy in dark-mode.

I'll post images ltr, but for now, just knowing that it looks real bad is enough.

If not possible to fix, probably will delete them, but don't really want to do that. Not until the app is more finished and doesn't look so empty at least.

Delay while resizing sidebar

For the open-close animation, I've used transition: width 0.2s. It makes it prettier.

#wide-sidebar {
  overflow-x: hidden;
  resize: horizontal;
  max-width: 300px;
  transition: background 0s, width 0.2s; // THIS RIGHT HERE
}

This creates an annoying delay while resizing it with through dragging.

Not completely sure how to fix this, but I think switching the width 0.2s in transition to flex/flex-grow/flex-shrink (and doing the same to how the sidebar's animation class) maybe would work? Remember to test later

If you reload while in a project page, things break.

Can be fixed by reloading while in another type of page, such as 'Profile' or just home.

I think it has something to do with how right now, the tasks are passed as parameters through the router-links. I thought

if (this.$route.params.projectID !== null) {
      this.title = this.$route.params.projectID

      if (this.$route.params.tasks !== null) {
        this.tasks = JSON.parse(this.$route.params.tasks)
      }
    }

Would be enough to prevent that, but apparently not.

Installing and configuring UI Library

Can still change libraries since still haven't managed to use this, but decided to use Element Plus. Am having difficulty in configurating it though.

See https://element-plus.org/en-US/guide/quickstart.html#on-demand-import and https://element-plus.org/en-US/guide/quickstart.html#manually-import

Both options require adding code to either Vite or Webpack config files. Vu-dooit has neither of those.

Under the 'on-demand import' they link the following though:

For more bundlers (Rollup, Vue CLI) and configs please reference unplugin-vue-components and unplugin-auto-import.

Make wide sidebar resizeable when it's open

Relevant: https://quasar.dev/vue-components/splitter

Narrow sidebar's project page button not receiving the router-link-active class when in any project other than the inbox

It's only for a moment, since you're immediately pushed to the inbox by

created() {
    if (this.$route.path === '/project') {
      this.$router.push('/project/0');
    }
  }

but it's still annoying.

Line-breaks not appearing in tasks' descriptions

At NewTaskDialog, the description input is a textarea. You can type line-breaks there. They don't appear on descriptions though.

Might be because I've placed {{ task.desc }} inside a <p></p>? Doubt it, but it's worth a try.

I haven't looked on whether the line-break even gets saved when you create the task, or if it's just ignored.

Docs page not styled?

The files: https://github.com/CottageCabbage/Vu-dooit/tree/main/docs/.vuepress/dist

Rebranding: some better name than 'Vu-dooit'?

I'm bad with names. If anybody has any suggestion, please mention it.

Position: sticky not working on header?

Snippet:

position: sticky !important;
top: 0px;
left: 0px;

Setting up lowdb database

edit ltr with more details

Persistence

Planning to use https://github.com/dannyconnell/localbase for persistence. Can change if it doesn't work. Minimum requeriment is just that changes made are kept after the app has been closed

• Save changes to profile
• Save changes to setting
• Save changes to projects
• Save changes to tasks

Update README

Include screenshots?

Delete that database list. Already using dexie too much to switch.

Descriptions for tasks

Build Github Pages of app

Previously, since I planned on using lowdb for persistence, didn't think an web-app would be possible, so just used Github Pages for the docs. Since I switched over to Indexeddb/Localbase, just go back on this decision.

Also, created a repo for the documentation too. Maybe even another for a cool website introducing the product too?

Innefe

At the moment, when the app starts, getUserData() is called through mounted(). This calls getUsername, getBio, etc. These are where the problem is.

If one of these functions return undefined (as oposed to an empty object (with key: "whatever" tho)), it will create the default data (eg db.user.put({ key: 'username', value: 'Newbie' }); and call getUserData() again ― even if it's the only one that would've returned undefined out of the getWhatever functions.

It's something that would only affect the first time an user opens the app, but still bothers me.

You have to be in a /TodoList/ to open a TodoList

Title not completely correct. You have to be in a /#/TodoList/ route for the new route's details to load. Coming from /Profile, for example, gives you a blank page, and you have to move to another Project so things work. Then go back to whatever project you wanted to use.

No relevant links, but may be related to these:

methods: {
  getProjectInfo () {
    if (this.$route.params.projectID !== null) {
      this.title = this.$route.params.projectID
    }
    if (this.$route.params.tasks !== null) {
      this.tasks = JSON.parse(this.$route.params.tasks)
    }
  }
},
watch: {
  '$route' (to, from) {
    if (to.name === 'TodoList' && to.params.projectID !== null) {
      return this.getProjectInfo()
    }
  }
}

Difficulty on building electron app

running the command npm run electron:build, which on package.json's script is as quasar build -m electron returns the following:

 App •  WAIT  • Bundling app with electron-packager...
/home/cottagecabbage/Desktop/Dev/vu-dooit/node_modules/@quasar/app-vite/lib/modes/electron/electron-builder.js:130
            electronVersion: getPackageJson('electron').version
                                                       ^

TypeError: Cannot read properties of undefined (reading 'version')
    at /home/cottagecabbage/Desktop/Dev/vu-dooit/node_modules/@quasar/app-vite/lib/modes/electron/electron-builder.js:130:56
    at new Promise (<anonymous>)
    at /home/cottagecabbage/Desktop/Dev/vu-dooit/node_modules/@quasar/app-vite/lib/modes/electron/electron-builder.js:124:14
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async ElectronBuilder.build (/home/cottagecabbage/Desktop/Dev/vu-dooit/node_modules/@quasar/app-vite/lib/modes/electron/electron-builder.js:23:7)

There's more before this, but that's what producing the error though

Hold-and-Drag Task Sorting

Making buttons to push tasks to bottom/top of list should be easy be. Copy task, use push/unshift, delete old task. Not sure how to do this Hold-and-drag thing though. Posting resources I find on topic below.

Order of projects in sidebar changing

Inbox gets pushed to the bottom? I'm not sure how the order is decided.

When Projects page is reloaded, return Inbox page instead of a blank one

Something about parameters? I pass in more details later. Probably

Using liveQuery to get the open project's data, not sure if that's the best solution?

Code:

import { useObservable } from '@vueuse/rxjs';
import { liveQuery } from 'dexie';
import { db } from '../db';

const project = useObservable(
  liveQuery(() => db.projects.get({ id: route.params.id }))
);

Will try to learn more about this later, but is this performance friendly? I was thinking that maybe creating a new array with .filter and updating it independently would be better? Not sure if StackOverflow would be the right place to ask this kind of question.

Regardless, at least it works for now.

Project's tasks don't change when switching between each other, only if I go to another kind of view, then back to project

Possibly relevant links:

• https://michaelnthiessen.com/debugging-guide-why-your-component-isnt-updating/
• https://stackoverflow.com/questions/42603583/vue-js-same-component-with-different-routes
• https://stackoverflow.com/questions/41305573/vue-router-reload-components
• https://stackoverflow.com/questions/41764825/preserve-component-state-with-vue-router

Not sure tho, didn't read.

Styling issue: cut repetition with v-for

e.g. at NewTaskDialog.vue

<q-btn-dropdown
  dropdown-icon="flag"
  flat
  no-icon-animation
  :color="getIconColor()"
>
  <q-list>
    <q-item
      clickable
      v-close-popup
      @click="assignPriority(1)"
      :class="selected_priority === 1 ? 'selected-priority' : ''"
    >
      <q-btn icon="flag" dense flat color="grey-7" />
    </q-item>
    <q-item
      clickable
      v-close-popup
      @click="assignPriority(2)"
      :class="selected_priority === 2 ? 'selected-priority' : ''"
    >
      <q-btn icon="flag" dense flat color="amber-8" />
    </q-item>
    <q-item
      clickable
      v-close-popup
      @click="assignPriority(3)"
      :class="selected_priority === 3 ? 'selected-priority' : ''"
    >
      <q-btn icon="flag" dense flat color="red-5" />
    </q-item>
  </q-list>
</q-btn-dropdown>

I think it would be better if a v-for was used at q-item, but not really important rn.