✨ feature/#24 - Custom notes colors (#26)

- Add color dialog - Fix updated date on hover
loicngr · Feb 17, 2024 · 1e187e4 · 1e187e4
1 parent 6026b3b
commit 1e187e4
Show file tree

Hide file tree

Showing 7 changed files with 131 additions and 14 deletions.
diff --git a/src/components/DialogColorPicker.vue b/src/components/DialogColorPicker.vue
@@ -0,0 +1,75 @@
+<template>
+  <q-dialog
+    v-bind="$attrs"
+    ref="dialogRef"
+    position="standard"
+    @hide="onDialogHide"
+  >
+    <q-card>
+      <q-card-section
+        class="bg-dark"
+        style="margin: 10px; padding: 0;"
+      >
+        <q-form @submit.prevent="onSubmit">
+          <q-color
+            v-model.trim="color"
+            default-view="palette"
+            :rules="[$rules.required, $rules.validColor]"
+            style="width: 100%"
+            no-footer
+            :palette="[
+              '#019A9D',
+              '#D9B801',
+              '#E8045A',
+              '#B2028A',
+              '#2A0449',
+              '#1d8a01',
+              '#5e1e05',
+              '#937e76',
+              '#151515',
+            ]"
+          />
+
+          <q-btn
+            :label="$t('save')"
+            class="full-width q-mt-md"
+            type="submit"
+            color="primary"
+          />
+
+          <q-btn
+            :label="$t('reset')"
+            class="full-width q-mt-sm"
+            color="negative"
+            @click="onDialogOK(undefined)"
+          />
+        </q-form>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script lang="ts" setup>
+import { useDialogPluginComponent } from 'quasar'
+import { ref } from 'vue'
+
+defineEmits([
+  ...useDialogPluginComponent.emits,
+])
+
+const color = ref<string>('')
+
+const {
+  dialogRef,
+  onDialogHide,
+  onDialogOK,
+} = useDialogPluginComponent()
+
+function onSubmit () {
+  const _color = color.value.trim()
+
+  onDialogOK(_color.length > 0
+    ? _color
+    : undefined)
+}
+</script>
diff --git a/src/components/ListNotesView.vue b/src/components/ListNotesView.vue
@@ -2,14 +2,20 @@
   <div
     ref="listRef"
     class="fit row wrap justify-start items-start col-12"
+    :class="{
+      'justify-center': $q.screen.lt.sm,
+    }"
   >
     <q-card
       v-for="(note, loopIndex) in notes"
       :key="note.id"
-      class="col-12 col-md-3 col-sm-4 self-start q-my-sm"
+      class="col-11 col-md-3 col-sm-4 self-start q-my-sm"
       :class="{
-        'q-mx-sm': $q.screen.gt.xs
+        'q-mx-sm': $q.screen.gt.xs,
       }"
+      :style="typeof note.color !== 'undefined'
+        ? 'background:'.concat(note.color)
+        : ''"
       flat
       bordered
     >
@@ -102,8 +108,11 @@
       </div>
 
       <q-card-section
-        class="col-12 row justify-end card-note-buttons"
+        class="col-12 row justify-end"
         horizontal
+        :class="{
+          'card-note-buttons': $q.screen.gt.sm
+        }"
       >
         <q-btn
           unelevated
@@ -128,17 +137,17 @@
         >
           <q-tooltip>
             {{ $t('createdAt') }}: {{ dateTimeFormat(note.createdAt) }} <br>
-            {{ $t('updatedAt') }}: {{ dateTimeFormat(note.createdAt) === dateTimeFormat(note.createdAt)
-              ? 'never'
+            {{ $t('updatedAt') }}: {{ dateTimeFormat(note.createdAt) === dateTimeFormat(note.updatedAt)
+              ? $t('never')
               : dateTimeFormat(note.updatedAt) }}
           </q-tooltip>
         </q-btn>
-        <!--        <q-btn-->
-        <!--          unelevated-->
-        <!--          size="sm"-->
-        <!--          icon="fa fa-ellipsis-vertical"-->
-        <!--          @click="showNoteMenu(note)"-->
-        <!--        />-->
+        <q-btn
+          unelevated
+          size="sm"
+          icon="fa fa-palette"
+          @click="openColorDialog(note)"
+        />
       </q-card-section>
     </q-card>
   </div>
@@ -215,6 +224,8 @@ import SaveButton from 'components/SaveButton.vue'
 import isEqual from 'lodash/fp/isEqual'
 import { dateTimeFormat } from 'src/utils/date'
 import { useI18n } from 'vue-i18n'
+import { keyBy } from 'lodash'
+import DialogColorPicker from 'components/DialogColorPicker.vue'
 import { useSortable } from '@vueuse/integrations/useSortable'
 
 const mainStore = useMainStore()
@@ -467,8 +478,21 @@ function onSave () {
     .then(async () => {
       Loading.show()
 
+      const actual = cloneDeep(notes.value)
+      const base = keyBy(cloneDeep(baseNotes.value), 'id')
+      const dateNow = new Date()
+
+      actual.forEach((i) => {
+        if (
+          typeof base[i.id] !== 'undefined' &&
+          !isEqual(i, base[i.id])
+        ) {
+          i.updatedAt = dateNow.toString()
+        }
+      })
+
       const status = await API.writeInFile(JSON.stringify({
-        items: notes.value,
+        items: actual,
       }))
 
       if (status) {
@@ -479,6 +503,14 @@ function onSave () {
     })
 }
 
+function openColorDialog (item: Item) {
+  $q.dialog({
+    component: DialogColorPicker,
+  }).onOk((color: Item['color']) => {
+    item.color = color
+  })
+}
+
 async function main () {
   await getFileContent()
 }
@@ -496,7 +528,7 @@ await main()
 
 .card-note-buttons {
   transition: ease-in-out .3s;
-  opacity: 0.2;
+  opacity: 0.3;
 
   &:hover {
     opacity: 1;

diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -29,6 +29,7 @@ export const DEFAULT_NOTE: Item = {
   updatedAt: '',
   status: ITEM_STATUS_DEFAULT,
   type: ITEM_TYPE_NOTE,
+  color: undefined,
 }
 
 export const DEFAULT_FILE: NotesFile = {

diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
@@ -13,6 +13,7 @@ export default {
   close: 'Close',
   create: 'Create',
   save: 'Save',
+  reset: 'Reset',
   confirmSave: 'Do you want save',
   notingToSave: 'No changes',
   options: 'Options',
@@ -34,6 +35,7 @@ export default {
   tooSmall: 'Too small',
 
   title: 'Title',
+  never: 'Never',
   content: 'Content',
   id: 'ID',
   add: 'Add',

diff --git a/src/i18n/fr-FR/index.ts b/src/i18n/fr-FR/index.ts
@@ -13,6 +13,7 @@ export default {
   close: 'Fermer',
   create: 'Créer',
   save: 'Sauvegarder',
+  reset: 'Réinitialiser',
   confirmSave: 'Voulez-vous sauvegarder',
   notingToSave: 'Aucun changement',
   options: 'Options',
@@ -34,6 +35,7 @@ export default {
   tooSmall: 'Trop petit',
 
   title: 'Titre',
+  never: 'Jamais',
   content: 'Contenu',
   id: 'ID',
   add: 'Ajouter',

diff --git a/src/interfaces/item.ts b/src/interfaces/item.ts
@@ -8,4 +8,5 @@ export interface Item {
   updatedAt: string
   status: number
   type: number
+  color: string | undefined
 }
diff --git a/src/utils/rules.ts b/src/utils/rules.ts
@@ -2,7 +2,7 @@ import { t } from 'boot/i18n'
 
 export const Rules = {
   required (val: string | undefined) {
-    return typeof val === 'string' || t('required')
+    return typeof (val === 'string' && val.length > 0) || t('required')
   },
 
   validFileNameOrFolder (val: string | undefined) {
@@ -27,4 +27,8 @@ export const Rules = {
   validNewString (val: string | undefined) {
     return (val?.length ?? 0) >= 1 || t('tooSmall')
   },
+
+  validColor (val: string | undefined) {
+    return (val?.length ?? 0) >= 4 || t('notValid')
+  },
 }