Feat/add bulma (#1)

* remove fixture for task and steps

* install bulma

* convert to scss files

* reset and implement first style classes

* design task form

* design task view

* design step record

* 💄 (home) new task and reset styling

* fix step title height

* add a record progress

* ♻️ (record) extract record controls

* ♿️ (record) add text for progress

* 💄 (step record) fix blob size

* ♻️ (record) no more getters who do an action too

src/modules/record/components/RecordControls.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { useTaskStore } from '@/modules/task/stores/useTask.store'
+import { toISODate } from '@/shared/types/date'
+import { useMagicKeys, whenever } from '@vueuse/core'
+import { computed } from 'vue'
+import { useTaskRecordStore } from '../stores/useTaskRecordStore'
+
+const props = defineProps<{
+  taskId: string
+  recordId: string
+}>()
+
+const taskStore = useTaskStore()
+const recordStore = useTaskRecordStore()
+
+const task = computed(() => taskStore.getTask(props.taskId))
+const record = computed(() => recordStore.getTaskRecord(props.recordId))
+
+const getNextStepId = () => {
+  if (!task.value) {
+    return null
+  }
+
+  if (!recordStore.currentStepId) {
+    const [firstStep] = task.value.steps
+    return firstStep.id
+  }
+
+  const currentStepIndex = task.value.steps.findIndex(
+    (step) => step.id === recordStore.currentStepId
+  )
+
+  const canHaveNextIndex =
+    currentStepIndex >= 0 && currentStepIndex < task.value.steps.length - 1
+
+  if (canHaveNextIndex) {
+    return task.value.steps[currentStepIndex + 1].id
+  }
+
+  return null
+}
+
+const canStart = computed(() => !recordStore.currentStepId)
+
+const startRecording = () => {
+  if (!canStart.value || !task.value) {
+    return
+  }
+
+  recordStore.startStepRecord({
+    recordId: props.recordId,
+    stepId: task.value.steps[0].id,
+    start: toISODate(new Date())
+  })
+}
+
+const nextStep = () => {
+  if (!task.value || !recordStore.currentStepId || !record.value) {
+    return
+  }
+
+  recordStore.nextStepRecord({
+    recordId: record.value.id,
+    currentStepId: recordStore.currentStepId,
+    nextStepId: getNextStepId(),
+    tick: toISODate(new Date())
+  })
+}
+
+const { n, s } = useMagicKeys()
+
+whenever(n, () => {
+  nextStep()
+})
+
+whenever(s, () => {
+  startRecording()
+})
+</script>
+
+<template>
+  <div class="record-controls buttons">
+    <template v-if="!record || !record.end">
+      <button v-if="canStart" @click="startRecording" class="button is-primary">
+        start
+      </button>
+      <button class="button" v-else @click="nextStep">next</button>
+    </template>
+
+    <button class="button is-warning" @click="recordStore.reset(recordId)">
+      reset
+    </button>
+  </div>
+</template>

src/modules/record/components/RecordProgress.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { useTaskStore } from '@/modules/task/stores/useTask.store'
+import { computed } from 'vue'
+import { useTaskRecordStore } from '../stores/useTaskRecordStore'
+
+const props = defineProps<{
+  taskId: string
+  recordId: string
+}>()
+
+const taskStore = useTaskStore()
+const taskRecordStore = useTaskRecordStore()
+
+const task = computed(() => taskStore.getTask(props.taskId))
+const record = computed(() => taskRecordStore.getRecord(props.recordId))
+
+const numberOfFinishedSteps = computed(
+  () =>
+    Object.values(record.value?.stepRecords ?? {}).filter((step) => !!step.end)
+      .length
+)
+</script>
+
+<template>
+  <progress
+    v-if="task && record"
+    class="progress is-primary"
+    :value="numberOfFinishedSteps"
+    :max="task.steps.length ?? 0"
+  >
+    {{ numberOfFinishedSteps }}/{{ task.steps.length }}
+  </progress>
+</template>

src/modules/record/components/StepRecord.vue

@@ -59,17 +59,21 @@ const isSuperiorToEstimation = computed(() => {
       <span v-else-if="isSuperiorToEstimation"> ⚠️ </span>
       <span v-else>⌛</span>
     </td>
-    <td class="title">
-      <div v-if="isCurrentStep" class="blob green"></div>
-      {{ step.title }}
+    <td>
+      <div class="step-title">
+        <div v-if="isCurrentStep" class="blob green"></div>
+        {{ step.title }}
+      </div>
     </td>
-    <td class="estimation">{{ step.estimation }} minutes</td>
-    <td v-if="stepRecord">{{ duration }} minutes</td>
+    <td class="estimation minutes">{{ step.estimation }} min</td>
+    <td class="minutes" v-if="stepRecord">{{ duration }} min</td>
     <td v-else></td>
   </tr>
 </template>
 
 <style scoped lang="scss">
+$blob-size: 15px;
+
 .step-record {
   .status {
     text-align: center;
@@ -85,19 +89,23 @@ const isSuperiorToEstimation = computed(() => {
 
   .blob {
     border-radius: 50%;
-    height: 10px;
-    width: 10px;
+    min-height: $blob-size;
+    min-width: $blob-size;
     background: rgba(51, 217, 178, 1);
     box-shadow: 0 0 0 0 rgba(51, 217, 178, 1);
     animation: pulse 2s infinite;
   }
 
-  .title {
+  .step-title {
     display: flex;
     align-items: center;
     padding-right: 1rem;
     gap: 1rem;
   }
+
+  .minutes {
+    text-align: right;
+  }
 }
 
 @keyframes pulse {

src/modules/record/components/TaskRecord.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { useTaskStore } from '@/modules/task/stores/useTask.store'
 import { formatLongDate } from '@/shared/format-date'
-import { toISODate } from '@/shared/types/date'
-import { useMagicKeys, whenever } from '@vueuse/core'
 import { computed } from 'vue'
 import { useTaskRecordMetadata } from '../hooks/useTaskRecordMetadata'
 import { useTaskRecordStore } from '../stores/useTaskRecordStore'
+import RecordControls from './RecordControls.vue'
+import RecordProgress from './RecordProgress.vue'
 import StepRecord from './StepRecord.vue'
 
 const props = defineProps<{
@@ -16,69 +16,14 @@ const props = defineProps<{
 const taskStore = useTaskStore()
 const recordStore = useTaskRecordStore()
 
+recordStore.addRecord(props.taskId, props.recordId)
+
 const task = computed(() => taskStore.getTask(props.taskId))
 
-const record = computed(() =>
-  recordStore.createAndRetrieveTaskRecord(props.taskId, props.recordId)
-)
+const record = computed(() => recordStore.getTaskRecord(props.recordId))
 const recordNotes = computed(() => recordStore.getRecordNotes(props.recordId))
 const { duration } = useTaskRecordMetadata(record)
 
-const getNextStepId = () => {
-  if (!task.value) {
-    return null
-  }
-
-  if (!recordStore.currentStepId) {
-    const [firstStep] = task.value.steps
-    return firstStep.id
-  }
-
-  const currentStepIndex = task.value.steps.findIndex(
-    (step) => step.id === recordStore.currentStepId
-  )
-
-  const canHaveNextIndex =
-    currentStepIndex >= 0 && currentStepIndex < task.value.steps.length - 1
-
-  if (canHaveNextIndex) {
-    return task.value.steps[currentStepIndex + 1].id
-  }
-
-  return null
-}
-
-const startRecording = () => {
-  if (!task.value) {
-    return
-  }
-
-  recordStore.startStepRecord({
-    recordId: props.recordId,
-    stepId: task.value.steps[0].id,
-    start: toISODate(new Date())
-  })
-}
-
-const nextStep = () => {
-  if (!task.value || !recordStore.currentStepId) {
-    return
-  }
-
-  recordStore.nextStepRecord({
-    recordId: record.value.id,
-    currentStepId: recordStore.currentStepId,
-    nextStepId: getNextStepId(),
-    tick: toISODate(new Date())
-  })
-}
-
-const { n } = useMagicKeys()
-
-whenever(n, () => {
-  nextStep()
-})
-
 const isSuperiorToEstimation = computed(() => {
   if (!task.value || !record.value || !duration.value) {
     return false
@@ -90,25 +35,18 @@ const isSuperiorToEstimation = computed(() => {
 
 <template>
   <main class="task-record" v-if="task">
-    <h1>
-      Task:
-      <router-link :to="{ name: 'task-view', params: { id: task.id } }">
+    <record-progress :task-id="taskId" :record-id="recordId" />
+    <h1 class="title">
+      <router-link
+        :to="{ name: 'task-view', params: { id: task.id } }"
+        class="button is-link is-light"
+      >
         {{ task.title }}
       </router-link>
     </h1>
-    <h2>{{ formatLongDate(record.start) }}</h2>
-    <template v-if="!record.end">
-      <button
-        v-if="!recordStore.currentStepId && !record.hasStepRecords"
-        @click="startRecording"
-      >
-        start
-      </button>
-      <button v-else @click="nextStep">next</button>
-    </template>
-
-    <button @click="recordStore.$reset">reset</button>
-    <table>
+    <h2 class="subtitle" v-if="record">{{ formatLongDate(record.start) }}</h2>
+    <record-controls :task-id="taskId" :record-id="recordId" />
+    <table class="table is-striped is-narrow is-hoverable is-fullwidth">
       <thead>
         <tr>
           <th>#</th>
@@ -119,44 +57,42 @@ const isSuperiorToEstimation = computed(() => {
         </tr>
       </thead>
       <tbody>
-        <StepRecord
+        <step-record
           v-for="(step, key) in task.steps"
           :task-id="taskId"
           :record-id="recordId"
           :key="step.id"
           :step-id="step.id"
-          :step-number="key"
+          :step-number="key + 1"
         />
       </tbody>
     </table>
-    <div v-if="record.end">
-      <hr />
-      The task took {{ duration }} minutes instead of
-      {{ task.totalEstimation }} minutes.
-      <span>
-        <span v-if="isSuperiorToEstimation">More</span><span v-else>Less</span>
-        than expected.
-      </span>
+    <div v-show="record && record.end" class="content">
+      <p
+        :class="{
+          'has-text-primary-dark': !isSuperiorToEstimation,
+          'has-text-warning-dark': isSuperiorToEstimation
+        }"
+      >
+        The task took {{ duration }} minutes instead of
+        {{ task.totalEstimation }} minutes.
+      </p>
+    </div>
+    <div class="columns is-centered">
+      <div class="column is-half">
+        <textarea
+          name="record-notes"
+          id="record-notes"
+          rows="10"
+          :value="recordNotes"
+          @input="
+            //@ts-ignore
+            recordStore.updateRecordNotes(recordId, $event.target.value)
+          "
+          placeholder="Take notes while you're doing the task. It can be helpful at the end to retrieve your thought."
+          class="textarea"
+        ></textarea>
+      </div>
     </div>
-    <textarea
-      name="record-notes"
-      id="record-notes"
-      cols="30"
-      rows="10"
-      :value="recordNotes"
-      @input="
-        //@ts-ignore
-        recordStore.updateRecordNotes(recordId, $event.target?.value)
-      "
-      placeholder="Take notes while you're doing the task. It can be helpful at the end to retrieve your thought."
-    ></textarea>
   </main>
 </template>
-
-<style scoped lang="scss">
-.task-record {
-  table {
-    width: 100%;
-  }
-}
-</style>

src/modules/record/components/TaskRecordLink.vue

@@ -11,20 +11,23 @@ const { duration } = useTaskRecordMetadata(props.record)
 </script>
 
 <template>
-  <span>
+  <div class="task-record-link-container content">
     <router-link
-      class="task-record-link"
+      class="task-record-link button is-outlined"
       :to="{
         name: 'record-view',
         params: { taskId: record.taskId, recordId: record.id }
       }"
       >{{ formatDate(record.start) }}</router-link
     >
-    {{ duration }} minutes
-  </span>
+    <span v-if="duration !== null"> {{ duration }} minutes </span>
+  </div>
 </template>
 
 <style scoped lang="scss">
-.task-record-link {
+.task-record-link-container {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
 }
 </style>

src/modules/record/components/TaskRecordList.vue

@@ -14,22 +14,20 @@ const newRecordId = createUuid()
 </script>
 
 <template>
-  <ol v-if="records.length" class="task-record-list">
-    <li v-for="record in records" :key="record.id">
-      <task-record-link :record="record" />
-    </li>
-  </ol>
-  <div v-else>No record yet</div>
+  <div class="content">
+    <ol v-if="records.length" class="task-record-list">
+      <li v-for="record in records" :key="record.id">
+        <task-record-link :record="record" />
+      </li>
+    </ol>
+    <div v-else>No record yet</div>
+  </div>
   <router-link
     :to="{
       name: 'record-view',
       params: { taskId, recordId: newRecordId }
     }"
+    class="button is-primary is-light"
     >start a new record</router-link
   >
 </template>
-
-<style scoped lang="scss">
-.task-record-list {
-}
-</style>

src/modules/record/hooks/useTaskRecordMetadata.ts

@@ -2,7 +2,9 @@ import { formatDiffInMinutes } from '@/shared/format-date'
 import { computed, isRef, type Ref } from 'vue'
 import type { TaskRecord } from '../models/task-record'
 
-export const useTaskRecordMetadata = (record: TaskRecord | Ref<TaskRecord>) => {
+export const useTaskRecordMetadata = (
+  record: TaskRecord | Ref<TaskRecord | null>
+) => {
   const duration = computed(() => {
     const recordValue = isRef(record) ? record.value : record
     if (!recordValue?.end) {

src/modules/record/stores/useTaskRecordStore.ts

@@ -16,8 +16,11 @@ export const useTaskRecordStore = defineStore('task-record-store', {
     records: {}
   }),
   actions: {
-    addRecord(taskRecord: TaskRecord) {
-      this.records[taskRecord.id] = taskRecord
+    addRecord(taskId: string, recordId: string) {
+      if (recordId in this.records) {
+        return
+      }
+      this.records[recordId] = new TaskRecord(recordId, taskId)
     },
     removeRecord(recordId: string) {
       delete this.records[recordId]
@@ -51,7 +54,7 @@ export const useTaskRecordStore = defineStore('task-record-store', {
     },
     endStepRecord(params: { recordId: string; stepId: string; end: ISODate }) {
       const stepRecord =
-        this.records[params.recordId].stepRecords[params.stepId]
+        this.records[params.recordId]?.stepRecords[params.stepId]
 
       if (!stepRecord) {
         return
@@ -83,6 +86,10 @@ export const useTaskRecordStore = defineStore('task-record-store', {
       })
     },
     endRecord(recordId: string) {
+      if (!this.records[recordId]) {
+        return
+      }
+
       this.records[recordId].end = toISODate(new Date())
       this.currentStepId = null
     },
@@ -100,6 +107,14 @@ export const useTaskRecordStore = defineStore('task-record-store', {
           }
         })
       }
+    },
+    reset(recordId: string) {
+      this.currentStepId = null
+      if (!this.records[recordId]) {
+        return
+      }
+      this.records[recordId].stepRecords = {}
+      this.records[recordId].end = undefined
     }
   },
   getters: {
@@ -109,22 +124,20 @@ export const useTaskRecordStore = defineStore('task-record-store', {
           .filter((record) => record.taskId === taskId)
           .map((record) => TaskRecord.fromRecordable(record))
     },
-    createAndRetrieveTaskRecord() {
-      return (taskId: string, recordId: string): TaskRecord => {
+    getTaskRecord() {
+      return (recordId: string): TaskRecord | null => {
         const hasTaskRecord = !!this.records[recordId]
 
         if (hasTaskRecord) {
           return TaskRecord.fromRecordable(this.records[recordId])
         }
 
-        const newTaskRecord = new TaskRecord(recordId, taskId)
-        this.records[recordId] = newTaskRecord
-
-        return newTaskRecord
+        return null
       }
     },
     getRecord() {
-      return (recordId: string) => this.records[recordId] ?? null
+      return (recordId: string): Recordable | null =>
+        this.records[recordId] ?? null
     },
     getStepRecord() {
       return (recordId: string, stepId: string): StepRecordable | null =>

src/modules/task/components/NewTaskForm.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { createUuid } from '@/shared/create-uuid'
-import { faker } from '@faker-js/faker'
 import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { createStepFixture } from '../models/step.fixture'
+import type { Stepable } from '../interfaces/stepable'
 import { Task } from '../models/task'
 import { useTaskStore } from '../stores/useTask.store'
 import StepInput from './StepInput.vue'
@@ -13,13 +12,11 @@ const router = useRouter()
 
 const id = createUuid()
 
-const title = ref(faker.animal.bird())
-const link = ref(faker.internet.url())
-const steps = ref(
-  Array.from({ length: Math.floor(Math.random() * 10) }, () =>
-    createStepFixture()
-  )
-)
+const title = ref('')
+const link = ref('')
+
+const steps = ref<Stepable[]>([])
+
 const totalEstimation = computed(() =>
   steps.value.map((step) => step.estimation).reduce((a, b) => a + b, 0)
 )
@@ -46,21 +43,29 @@ const saveTask = () => {
 </script>
 
 <template>
-  <div>
-    <h1>Create a task</h1>
-    <h2>Estimation: {{ totalEstimation }} minutes</h2>
-    <form @submit.prevent="saveTask">
-      <button type="submit">save task</button>
-      <div>
-        <label for="title">Title</label>
-        <input type="text" id="title" v-model="title" />
-      </div>
-      <div>
-        <label for="link">User story link</label>
-        <input type="text" id="link" v-model="link" />
-      </div>
-      <StepInput v-model="steps" />
-    </form>
+  <div class="columns is-centered">
+    <div class="column is-half">
+      <h1 class="title">Create a task</h1>
+      <h2 class="subtitle">Estimation: {{ totalEstimation }} minutes</h2>
+      <form @submit.prevent="saveTask">
+        <div class="field">
+          <label class="label" for="title">Title</label>
+          <div class="control">
+            <input class="input" type="text" id="title" v-model="title" />
+          </div>
+        </div>
+        <div class="field">
+          <label class="label" for="link">User story link</label>
+          <div class="control">
+            <input class="input" type="text" id="link" v-model="link" />
+          </div>
+        </div>
+        <StepInput v-model="steps" />
+        <button class="button is-primary is-fullwidth" type="submit">
+          save
+        </button>
+      </form>
+    </div>
   </div>
 </template>
 

src/modules/task/components/StepInput.vue

@@ -29,15 +29,18 @@ const stepsTextarea = computed({
 </script>
 
 <template>
-  <div class="step-input">
-    <label for="steps">steps</label>
-    <textarea
-      id="steps"
-      name="steps"
-      v-model="stepsTextarea"
-      cols="40"
-      rows="20"
-    ></textarea>
+  <div class="step-input field">
+    <label class="label" for="steps">steps</label>
+    <div class="control">
+      <textarea
+        id="steps"
+        name="steps"
+        v-model="stepsTextarea"
+        rows="15"
+        class="textarea"
+        placeholder="- [step] | <minutes you estimate it will take>"
+      ></textarea>
+    </div>
   </div>
 </template>
 

src/modules/task/components/TaskList.vue

@@ -6,18 +6,25 @@ const taskStore = useTaskStore()
 </script>
 
 <template>
-  <ul class="task-list">
-    <li v-for="task in taskStore.recentTasks" :key="task.id">
-      <router-link :to="{ name: 'task-view', params: { id: task.id } }">{{
-        task.title
-      }}</router-link>
-      | {{ task.totalEstimation }} minutes |
-      {{ formatDate(task.date) }}
-    </li>
-  </ul>
+  <div class="content">
+    <ul class="task-list">
+      <li v-for="task in taskStore.recentTasks" :key="task.id">
+        <router-link
+          :to="{ name: 'task-view', params: { id: task.id } }"
+          class="button is-link is-outlined"
+          >{{ task.title }}</router-link
+        >
+        <span> {{ task.totalEstimation }} minutes </span>
+        <span>{{ formatDate(task.date) }}</span>
+      </li>
+    </ul>
+  </div>
 </template>
 
 <style scoped>
-.task-list {
+.task-list li {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
 }
 </style>