Manual chunking

src/App.vue

@@ -3,6 +3,7 @@
     <TaskModal />
     <SettingsModal />
     <DayModal />
+    <ChunkModal />
     <Navbar />
     <div class="row mr-0 ml-0">
       <Calendar class="col" />
@@ -23,6 +24,7 @@ import TaskModal from "./components/TaskModal.vue";
 import vxm from "./store/index.vuex";
 import SettingsModal from "./components/SettingsModal.vue";
 import DayModal from "./components/DayModal.vue";
+import ChunkModal from "./components/ChunkModal.vue";
 @Component({
   components: {
     TaskList,
@@ -31,6 +33,7 @@ import DayModal from "./components/DayModal.vue";
     TaskModal,
     SettingsModal,
     DayModal,
+    ChunkModal,
   },
 })
 export default class App extends Vue {
@@ -65,4 +68,8 @@ hr {
 .day:hover {
   background-color: $secondary-lightened;
 }
+
+.chunk:hover {
+  background-color: $primary-darkened !important;
+}
 </style>

src/components/ChunkModal.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="chunkmodal-container">
+    <b-modal
+      id="chunk-modal"
+      :title="`${chunk?.task.name} - ${chunk?.duration} minutes`"
+    >
+      <div class="container">
+        <div class="row mb-2" v-if="chunk">
+          <b-input-group prepend="Date" class="col">
+            <b-form-datepicker
+              v-model="chunk.date"
+              value-as-date
+              @input="lock"
+            />
+            <b-input-group-append is-text>
+              <b-form-checkbox
+                :checked="locked"
+                @input="handleChange"
+                class="mr-n2"
+              />
+            </b-input-group-append>
+          </b-input-group>
+        </div>
+        <div class="row no-gutters">
+          <b-button class="col" @click="launchTask">Edit Task</b-button>
+        </div>
+      </div>
+    </b-modal>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+import vxm from "@/store/index.vuex";
+import Chunk from "@/types/Chunk";
+import DateUtils from "@/util/DateUtils";
+
+@Component
+export default class ChunkModal extends Vue {
+  get chunk(): Chunk | undefined {
+    return vxm.store.editedChunk;
+  }
+
+  get simplifiedChunk(): {
+    date: Date;
+    number: number;
+  } {
+    const { date, number } = this.chunk || {
+      date: DateUtils.currentDate,
+      number: 0,
+    };
+    return { date, number };
+  }
+
+  get locked() {
+    return (
+      this.chunk &&
+      this.simplifiedChunk &&
+      this.chunk.task.lockedChunks.some(
+        (chunk) => chunk.number === this.chunk?.number
+      )
+    );
+  }
+
+  handleChange(checked: boolean) {
+    if (checked) {
+      this.lock();
+    } else {
+      this.unlock();
+    }
+  }
+
+  unlock() {
+    console.log("unlocked");
+    if (!this.chunk) {
+      return;
+    }
+    this.chunk.task.lockedChunks = this.chunk.task.lockedChunks.filter(
+      (chunk) => chunk.number !== this.chunk?.number
+    );
+    vxm.store.uploadTasks();
+    vxm.store.updateChunks();
+  }
+
+  lock() {
+    console.log("locked");
+    if (
+      this.chunk?.task.lockedChunks.some(
+        (chunk) => chunk.number === this.chunk?.number
+      )
+    ) {
+      return;
+    }
+    this.chunk?.task.lockedChunks.push(this.simplifiedChunk);
+    vxm.store.uploadTasks();
+    vxm.store.updateChunks();
+  }
+
+  launchTask() {
+    if (!this.chunk) {
+      return;
+    }
+    vxm.store.editedIndex = vxm.store.tasks.indexOf(this.chunk?.task);
+    this.$bvModal.show("task-modal");
+  }
+}
+</script>
+<style lang="scss" scoped></style>

src/components/Day.vue

@@ -8,7 +8,7 @@
         v-for="(chunk, i) in chunks"
         :key="`${month}/${day}_chunk_${i}`"
         class="chunk row m-0 mb-1 justify-content-between bg-primary rounded text-dark"
-        @click.stop
+        @click.stop="launchChunk(chunk)"
       >
         <div class="col-auto">
           {{ chunk.task.name }}
@@ -58,6 +58,11 @@ export default class Day extends Vue {
     vxm.store.dayModalDay = this.day;
     vxm.store.dayModalMonth = this.month;
   }
+
+  launchChunk(chunk: Chunk) {
+    vxm.store.editedChunk = chunk;
+    this.$bvModal.show("chunk-modal");
+  }
 }
 </script>
 <style lang="scss" scoped>

src/components/DayModal.vue

@@ -6,6 +6,7 @@
         v-for="(chunk, i) in chunks"
         :key="`${month}/${day}_chunk_${i}`"
         class="chunk row m-0 mb-1 justify-content-between bg-primary rounded text-dark"
+        @click="launchChunk(chunk)"
       >
         <div class="col-auto">
           {{ chunk.task.name }}
@@ -43,6 +44,11 @@ export default class DayModal extends Vue {
     return vxm.store.dayModalMonth;
   }
 
+  launchChunk(chunk: Chunk) {
+    vxm.store.editedChunk = chunk;
+    this.$bvModal.show("chunk-modal");
+  }
+
   get chunks(): Chunk[] {
     return vxm.store.chunks.filter(
       (chunk) =>

src/store/index.vuex.ts

@@ -32,6 +32,8 @@ export class Store extends VuexModule {
 
   settings: Settings = new Settings();
 
+  editedChunk: Chunk | undefined = undefined;
+
   /**
    * Splits the tasks into chunks
    */
@@ -45,14 +47,35 @@ export class Store extends VuexModule {
     const getTotalEffort = (day: Chunk[]) =>
       day.reduce((prev, curr) => prev + curr.effort, 0);
 
+    for (const task of this.tasks) {
+      for (const lockedChunk of task.lockedChunks) {
+        const convertedDay = DateUtils.daysBetween(
+          DateUtils.currentDate,
+          lockedChunk.date
+        );
+        chunksByDay[convertedDay] = chunksByDay[convertedDay] ?? [];
+        const newChunk = new Chunk(
+          task,
+          task.duration / task.chunks,
+          lockedChunk.date,
+          lockedChunk.number
+        );
+        chunksByDay[convertedDay].push(newChunk);
+      }
+    }
+
     // For each task, with tasks due earlier scheduled first
     for (const task of this.tasks.sort(
       (a, b) => a.due.getTime() - b.due.getTime()
     )) {
-      const { chunks, due } = task;
+      let { chunks } = task;
+      chunks -= task.lockedChunks.length;
+      const { due } = task;
       const daysUntilDue = DateUtils.daysBetween(DateUtils.currentDate, due);
       const chunkDuration = task.duration / task.chunks;
 
+      const usedNumbers = task.lockedChunks.map((chunk) => chunk.number);
+
       // For each chunk
       for (let i = 0; i < chunks; i++) {
         let dayToAssign = 0;
@@ -101,12 +124,19 @@ export class Store extends VuexModule {
         // Avoids errors (if there are no tasks/chunks)
         chunksByDay[dayToAssign] = chunksByDay[dayToAssign] ?? [];
 
+        let number = 0;
+        while (usedNumbers.includes(number)) {
+          number++;
+        }
+        usedNumbers.push(number);
+
         // Create the chunk and add it to the list
         chunksByDay[dayToAssign].push(
           new Chunk(
             task,
             chunkDuration,
-            DateUtils.applyDayOffset(dayToAssign, DateUtils.currentDate)
+            DateUtils.applyDayOffset(dayToAssign, DateUtils.currentDate),
+            number
           )
         );
       }
@@ -118,6 +148,7 @@ export class Store extends VuexModule {
 
   @action
   async uploadTasks() {
+    console.log(this.tasks);
     localStorage["tasks"] = JSON.stringify(this.tasks);
   }
 
@@ -134,6 +165,12 @@ export class Store extends VuexModule {
         return {
           ...task,
           due: new Date(task.due),
+          lockedChunks: task.lockedChunks.map((lockedChunk) => {
+            return {
+              date: new Date(lockedChunk.date),
+              number: lockedChunk.number,
+            };
+          }),
         };
       });
     }

src/style/custom.scss

@@ -1,5 +1,6 @@
 $primary: #04E762;
 $primary-lightened: lighten($primary, 20%);
+$primary-darkened: darken($primary, 10%);
 
 $secondary: #89023E;
 $secondary-lightened: lighten($secondary, 10%);

src/types/Chunk.ts

@@ -7,10 +7,13 @@ export default class Chunk {
 
   date: Date;
 
-  constructor(task: UserTask, duration: number, date: Date) {
+  number: number;
+
+  constructor(task: UserTask, duration: number, date: Date, number: number) {
     this.task = task;
     this.duration = duration;
     this.date = date;
+    this.number = number;
   }
 
   get effort(): number {

src/types/Task.ts

@@ -6,6 +6,8 @@ export default class UserTask {
   effort = 1;
   description = "";
 
+  lockedChunks: { date: Date; number: number }[] = [];
+
   get totalEffort(): number {
     return this.effort * this.duration;
   }