├── public
    └── favicon.ico
├── .vscode
    └── extensions.json
├── src
    ├── directives
    │   └── vAutofocus.js
    ├── assets
    │   ├── logo.svg
    │   ├── main.css
    │   └── base.css
    ├── main.js
    ├── composables
    │   └── useCharactersLimit.js
    ├── App.vue
    ├── js
    │   └── firebase.js
    ├── router
    │   └── index.js
    ├── Views
    │   ├── StatsView.vue
    │   ├── EditNoteView.vue
    │   ├── NotesView.vue
    │   └── AuthView.vue
    ├── components
    │   ├── Notes
    │   │   ├── AddEditNote.vue
    │   │   ├── DeleteNoteModal.vue
    │   │   └── SingleNote.vue
    │   └── Layout
    │   │   └── NavBar.vue
    └── stores
    │   └── NotesStore.js
├── vite.config.js
├── .gitignore
├── index.html
├── package.json
└── README.md


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leelanarasimha/noteslist-vue/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
3 | }
4 | 


--------------------------------------------------------------------------------
/src/directives/vAutofocus.js:
--------------------------------------------------------------------------------
1 | export const vAutofocus = {
2 |   mounted(el) {
3 |     el.focus();
4 |   }
5 | };
6 | 


--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
2 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue';
 2 | import App from './App.vue';
 3 | import router from './router/index';
 4 | import { createPinia } from 'pinia';
 5 | 
 6 | const app = createApp(App);
 7 | 
 8 | const pinia = createPinia();
 9 | app.use(router);
10 | app.use(pinia);
11 | app.mount('#app');
12 | 


--------------------------------------------------------------------------------
/src/composables/useCharactersLimit.js:
--------------------------------------------------------------------------------
 1 | import { watch } from 'vue';
 2 | 
 3 | export function useCharactersLimit(value, limit = 100) {
 4 |   watch(value, (newValue, oldValue) => {
 5 |     if (newValue.length === limit) {
 6 |       alert(`Sorry!! more than ${limit} characters are not allowed`);
 7 |     }
 8 |   });
 9 | }
10 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { fileURLToPath, URL } from 'node:url'
 2 | 
 3 | import { defineConfig } from 'vite'
 4 | import vue from '@vitejs/plugin-vue'
 5 | 
 6 | // https://vitejs.dev/config/
 7 | export default defineConfig({
 8 |   plugins: [vue()],
 9 |   resolve: {
10 |     alias: {
11 |       '@': fileURLToPath(new URL('./src', import.meta.url))
12 |     }
13 |   }
14 | })
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | .DS_Store
12 | dist
13 | dist-ssr
14 | coverage
15 | *.local
16 | 
17 | /cypress/videos/
18 | /cypress/screenshots/
19 | 
20 | # Editor directories and files
21 | .vscode/*
22 | !.vscode/extensions.json
23 | .idea
24 | *.suo
25 | *.ntvs*
26 | *.njsproj
27 | *.sln
28 | *.sw?
29 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" class="has-background-danger-light">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" href="/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vite App</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module" src="/src/main.js"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <NavBar />
 3 |   <div class="container px-2">
 4 |     <RouterView />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script setup>
 9 |   import { onMounted } from 'vue';
10 |   import NavBar from './components/Layout/NavBar.vue';
11 |   import { useNotesStore } from './stores/NotesStore';
12 | 
13 |   const notesStore = useNotesStore();
14 | 
15 |   onMounted(() => {
16 |     notesStore.getNotes();
17 |   });
18 | </script>
19 | 
20 | <style>
21 |   @import 'bulma/css/bulma.min.css';
22 | </style>
23 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "noteslist-vue",
 3 |   "version": "0.0.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "vite",
 7 |     "build": "vite build",
 8 |     "preview": "vite preview"
 9 |   },
10 |   "dependencies": {
11 |     "@vueuse/core": "^10.2.0",
12 |     "bulma": "^0.9.4",
13 |     "firebase": "^9.23.0",
14 |     "pinia": "^2.1.3",
15 |     "vue": "^3.3.2",
16 |     "vue-router": "^4.2.2"
17 |   },
18 |   "devDependencies": {
19 |     "@vitejs/plugin-vue": "^4.2.3",
20 |     "vite": "^4.3.5"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/src/assets/main.css:
--------------------------------------------------------------------------------
 1 | @import './base.css';
 2 | 
 3 | #app {
 4 |   max-width: 1280px;
 5 |   margin: 0 auto;
 6 |   padding: 2rem;
 7 | 
 8 |   font-weight: normal;
 9 | }
10 | 
11 | a,
12 | .green {
13 |   text-decoration: none;
14 |   color: hsla(160, 100%, 37%, 1);
15 |   transition: 0.4s;
16 | }
17 | 
18 | @media (hover: hover) {
19 |   a:hover {
20 |     background-color: hsla(160, 100%, 37%, 0.2);
21 |   }
22 | }
23 | 
24 | @media (min-width: 1024px) {
25 |   body {
26 |     display: flex;
27 |     place-items: center;
28 |   }
29 | 
30 |   #app {
31 |     display: grid;
32 |     grid-template-columns: 1fr 1fr;
33 |     padding: 0 2rem;
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # noteslist-vue
 2 | 
 3 | This template should help get you started developing with Vue 3 in Vite.
 4 | 
 5 | ## Recommended IDE Setup
 6 | 
 7 | [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
 8 | 
 9 | ## Customize configuration
10 | 
11 | See [Vite Configuration Reference](https://vitejs.dev/config/).
12 | 
13 | ## Project Setup
14 | 
15 | ```sh
16 | npm install
17 | ```
18 | 
19 | ### Compile and Hot-Reload for Development
20 | 
21 | ```sh
22 | npm run dev
23 | ```
24 | 
25 | ### Compile and Minify for Production
26 | 
27 | ```sh
28 | npm run build
29 | ```
30 | 


--------------------------------------------------------------------------------
/src/js/firebase.js:
--------------------------------------------------------------------------------
 1 | // Import the functions you need from the SDKs you need
 2 | import { initializeApp } from 'firebase/app';
 3 | import { getFirestore } from 'firebase/firestore';
 4 | // TODO: Add SDKs for Firebase products that you want to use
 5 | // https://firebase.google.com/docs/web/setup#available-libraries
 6 | 
 7 | // Your web app's Firebase configuration
 8 | const firebaseConfig = {
 9 |   apiKey: 'AIzaSyCgCsSurdcSSGp1Tuik8L9GqOE65eenISU',
10 |   authDomain: 'noteslist-vue.firebaseapp.com',
11 |   projectId: 'noteslist-vue',
12 |   storageBucket: 'noteslist-vue.appspot.com',
13 |   messagingSenderId: '692628756704',
14 |   appId: '1:692628756704:web:70ccaed79e28eea4ec1885'
15 | };
16 | 
17 | // Initialize Firebase
18 | const app = initializeApp(firebaseConfig);
19 | 
20 | const db = getFirestore(app);
21 | 
22 | export { db };
23 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHashHistory } from 'vue-router';
 2 | 
 3 | import NotesView from '../Views/NotesView.vue';
 4 | import StatsView from '../Views/StatsView.vue';
 5 | import EditNoteView from '../Views/EditNoteView.vue';
 6 | import AuthView from '../Views/AuthView.vue';
 7 | 
 8 | const routes = [
 9 |   {
10 |     path: '/',
11 |     component: NotesView,
12 |     name: 'notes'
13 |   },
14 |   {
15 |     path: '/edit-note/:id',
16 |     component: EditNoteView,
17 |     name: 'editNote'
18 |   },
19 |   {
20 |     path: '/stats',
21 |     component: StatsView,
22 |     name: 'stats'
23 |   },
24 |   {
25 |     path: '/auth',
26 |     component: AuthView,
27 |     name: 'auth'
28 |   }
29 | ];
30 | 
31 | const router = createRouter({
32 |   history: createWebHashHistory(),
33 |   routes
34 | });
35 | 
36 | export default router;
37 | 


--------------------------------------------------------------------------------
/src/Views/StatsView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="mt-3">
 3 |     <table class="table is-fullwidth">
 4 |       <thead>
 5 |         <tr>
 6 |           <th>Stat</th>
 7 |           <th>Value</th>
 8 |         </tr>
 9 |       </thead>
10 | 
11 |       <tbody>
12 |         <tr>
13 |           <td>Total Notes Count</td>
14 |           <td>{{ notesCount }}</td>
15 |         </tr>
16 |         <tr>
17 |           <td>Total Characters Count</td>
18 |           <td>{{ totalCharactersCount }}</td>
19 |         </tr>
20 |       </tbody>
21 |     </table>
22 | 
23 |     <input type="text" class="input" placeholder="Enter Feedback..." v-autofocus v-model="feedback" />
24 |   </div>
25 | </template>
26 | 
27 | <script setup>
28 |   import { useNotesStore } from '../stores/NotesStore';
29 |   import { vAutofocus } from '../directives/vAutofocus';
30 |   import { useCharactersLimit } from '../composables/useCharactersLimit';
31 |   import { ref } from 'vue';
32 | 
33 |   const notesStore = useNotesStore();
34 |   const feedback = ref('');
35 | 
36 |   const notesCount = notesStore.totalNotesCount;
37 |   const totalCharactersCount = notesStore.totalCharactersCount;
38 | 
39 |   useCharactersLimit(feedback, 50);
40 | </script>
41 | 


--------------------------------------------------------------------------------
/src/Views/EditNoteView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <AddEditNote
 3 |     v-model="noteContent"
 4 |     ref="addEditNoteRef"
 5 |     bgColor="link"
 6 |     label="Edit Note"
 7 |     placeholder="Edit Note"
 8 |   >
 9 |     <template #button>
10 |       <button class="button" @click.prevent="$router.back()">Cancel</button>
11 |       <!-- <RouterLink class="button" :to="{ name: 'notes' }">Cancel</RouterLink> -->
12 | 
13 |       <button :disabled="!noteContent" class="button is-link" @click.prevent="onNoteSave">Save Note</button>
14 |     </template>
15 |   </AddEditNote>
16 | </template>
17 | 
18 | <script setup>
19 |   import AddEditNote from '../components/Notes/AddEditNote.vue';
20 |   import { useRoute, useRouter } from 'vue-router';
21 |   import { ref } from 'vue';
22 |   import { useNotesStore } from '../stores/NotesStore';
23 | 
24 |   const route = useRoute();
25 |   const router = useRouter();
26 | 
27 |   const notesStore = useNotesStore();
28 | 
29 |   const noteContent = ref('');
30 | 
31 |   noteContent.value = notesStore.getNoteContentById(route.params.id);
32 | 
33 |   const onNoteSave = () => {
34 |     notesStore.updateNote(route.params.id, noteContent.value);
35 |     router.push({ name: 'notes' });
36 |   };
37 | </script>
38 | 


--------------------------------------------------------------------------------
/src/Views/NotesView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <AddEditNote v-model="newNote" ref="addEditNoteRef">
 3 |     <template #button>
 4 |       <button :disabled="!newNote" class="button is-link is-danger" @click.prevent="addNote">
 5 |         Add New Note
 6 |       </button>
 7 |     </template>
 8 |   </AddEditNote>
 9 | 
10 |   <progress class="progress is-large is-info" max="100" v-if="!notesStore.notesLoaded" />
11 | 
12 |   <template v-else>
13 |     <SingleNote v-for="note in notes" :key="note.id" :note="note" />
14 |   </template>
15 | 
16 |   <div
17 |     class="has-text-centered py-6 is-size-4 has-text-grey-light is-family-monospace"
18 |     v-if="!notes.length && notesStore.notesLoaded"
19 |   >
20 |     No Notes Added here yet!!
21 |   </div>
22 | </template>
23 | 
24 | <script setup>
25 |   import SingleNote from '../components/Notes/SingleNote.vue';
26 |   import AddEditNote from '../components/Notes/AddEditNote.vue';
27 |   import { ref } from 'vue';
28 |   import { useNotesStore } from '../stores/NotesStore';
29 |   import { storeToRefs } from 'pinia';
30 |   import { useCharactersLimit } from '../composables/useCharactersLimit';
31 | 
32 |   const notesStore = useNotesStore();
33 | 
34 |   const addEditNoteRef = ref(null);
35 | 
36 |   const { notes } = storeToRefs(notesStore);
37 | 
38 |   const newNote = ref('');
39 | 
40 |   const addNote = () => {
41 |     notesStore.addNote(newNote.value);
42 |     newNote.value = '';
43 |     addEditNoteRef.value.focusTextArea();
44 |   };
45 | 
46 |   useCharactersLimit(newNote);
47 | </script>
48 | 


--------------------------------------------------------------------------------
/src/components/Notes/AddEditNote.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="my-4 p-4" :class="`has-background-${bgColor}-dark`">
 3 |     <div class="field">
 4 |       <label class="label has-text-white" v-if="label">{{ label }}</label>
 5 |       <div class="control">
 6 |         <textarea
 7 |           class="textarea"
 8 |           :placeholder="placeholder"
 9 |           :value="modelValue"
10 |           @input="$emit('update:modelValue', $event.target.value)"
11 |           maxlength="100"
12 |           v-autofocus
13 |           ref="textareaRef"
14 |         ></textarea>
15 |       </div>
16 |     </div>
17 | 
18 |     <div class="field is-grouped is-grouped-right">
19 |       <div class="control">
20 |         <slot name="button"></slot>
21 |       </div>
22 |     </div>
23 |   </div>
24 | </template>
25 | 
26 | <script setup>
27 |   import { ref } from 'vue';
28 |   import { vAutofocus } from '../../directives/vAutofocus';
29 | 
30 |   const props = defineProps({
31 |     modelValue: {
32 |       type: String,
33 |       required: true
34 |     },
35 |     bgColor: {
36 |       type: String,
37 |       default: 'danger'
38 |     },
39 |     label: {
40 |       type: String
41 |     },
42 |     placeholder: {
43 |       type: String,
44 |       default: 'Type Some Thing ....'
45 |     }
46 |   });
47 |   const emit = defineEmits(['update:modelValue']);
48 | 
49 |   const textareaRef = ref(null);
50 | 
51 |   const focusTextArea = () => {
52 |     textareaRef.value.focus();
53 |   };
54 | 
55 |   defineExpose({
56 |     focusTextArea
57 |   });
58 | </script>
59 | 


--------------------------------------------------------------------------------
/src/Views/AuthView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="tabs is-centered">
 4 |       <ul>
 5 |         <li :class="{ 'is-active': !register }"><a @click.prevent="register = false">Login</a></li>
 6 |         <li :class="{ 'is-active': register }"><a @click.prevent="register = true">Register</a></li>
 7 |       </ul>
 8 |     </div>
 9 | 
10 |     <form>
11 |       <div class="card auth-form">
12 |         <div class="card-content">
13 |           <div class="title has-text-centered">Login</div>
14 |           <div class="content">
15 |             <div class="field">
16 |               <label class="label">Email</label>
17 |               <div class="control">
18 |                 <input class="input" type="email" placeholder="Email Address" />
19 |               </div>
20 |             </div>
21 |             <div class="field">
22 |               <label class="label">Password</label>
23 |               <div class="control">
24 |                 <input class="input" type="Password" placeholder="Enter Password" />
25 |               </div>
26 |             </div>
27 | 
28 |             <div class="field is-grouped is-grouped-right">
29 |               <p class="control">
30 |                 <a class="button is-danger"> Submit </a>
31 |               </p>
32 |             </div>
33 |           </div>
34 |         </div>
35 |       </div>
36 |     </form>
37 |   </div>
38 | </template>
39 | 
40 | <script setup>
41 |   import { ref } from 'vue';
42 | 
43 |   const register = ref(false);
44 | </script>
45 | 
46 | <style scoped>
47 |   .auth-form {
48 |     max-width: 400px;
49 |     margin: 0 auto;
50 |   }
51 | </style>
52 | 


--------------------------------------------------------------------------------
/src/components/Layout/NavBar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <nav class="navbar is-danger" role="navigation" aria-label="main navigation">
 3 |     <div class="container px-2">
 4 |       <div class="navbar-brand">
 5 |         <RouterLink :to="{ name: 'notes' }" class="navbar-item is-size-4 is-family-monospace">
 6 |           NotesList
 7 |         </RouterLink>
 8 | 
 9 |         <a
10 |           role="button"
11 |           class="navbar-burger"
12 |           :class="{ 'is-active': showNavBarMenu }"
13 |           @click.prevent="showNavBarMenu = !showNavBarMenu"
14 |           aria-label="menu"
15 |           aria-expanded="false"
16 |           data-target="navbarBasicExample"
17 |         >
18 |           <span aria-hidden="true"></span>
19 |           <span aria-hidden="true"></span>
20 |           <span aria-hidden="true"></span>
21 |         </a>
22 |       </div>
23 | 
24 |       <div id="navbarBasicExample" :class="{ 'is-active': showNavBarMenu }" class="navbar-menu">
25 |         <div class="navbar-end">
26 |           <RouterLink :to="{ name: 'notes' }" active-class="is-active" class="navbar-item">
27 |             Notes
28 |           </RouterLink>
29 | 
30 |           <RouterLink :to="{ name: 'stats' }" active-class="is-active" class="navbar-item">
31 |             Stats
32 |           </RouterLink>
33 |         </div>
34 |       </div>
35 |     </div>
36 |   </nav>
37 | </template>
38 | 
39 | <script setup>
40 |   import { ref } from 'vue';
41 | 
42 |   const showNavBarMenu = ref(false);
43 | </script>
44 | 
45 | <style scoped>
46 |   @media (max-width: 1023px) {
47 |     .navbar-menu {
48 |       position: absolute;
49 |       left: 0;
50 |       right: 0;
51 |     }
52 |   }
53 | </style>
54 | 


--------------------------------------------------------------------------------
/src/components/Notes/DeleteNoteModal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="modal is-active">
 3 |     <div class="modal-background"></div>
 4 |     <div class="modal-card" ref="deleteModalRef">
 5 |       <header class="modal-card-head">
 6 |         <p class="modal-card-title">Delete Note?</p>
 7 |         <button class="delete" aria-label="close" @click="closeModal"></button>
 8 |       </header>
 9 |       <section class="modal-card-body">Are you sure you want to Delete?</section>
10 |       <footer class="modal-card-foot">
11 |         <button class="button is-danger" @click="deleteNote">Delete</button>
12 |         <button class="button" @click="closeModal">Cancel</button>
13 |       </footer>
14 |     </div>
15 |   </div>
16 | </template>
17 | 
18 | <script setup>
19 |   import { onMounted, onUnmounted, ref } from 'vue';
20 |   import { onClickOutside } from '@vueuse/core';
21 |   import { useNotesStore } from '../../stores/NotesStore';
22 | 
23 |   const props = defineProps({
24 |     modelValue: {
25 |       type: Boolean,
26 |       required: true
27 |     },
28 |     noteId: {
29 |       type: String,
30 |       required: true
31 |     }
32 |   });
33 | 
34 |   const notesStore = useNotesStore();
35 | 
36 |   const handleClose = (event) => {
37 |     console.log('key close event');
38 |     if (event.key === 'Escape') {
39 |       closeModal();
40 |     }
41 |   };
42 | 
43 |   const deleteNote = () => {
44 |     //console.log(props.noteId);
45 |     notesStore.deleteNote(props.noteId);
46 |   };
47 | 
48 |   const closeModal = () => {
49 |     emits('update:modelValue', false);
50 |   };
51 | 
52 |   const deleteModalRef = ref(null);
53 | 
54 |   onClickOutside(deleteModalRef, closeModal);
55 | 
56 |   onMounted(() => {
57 |     document.addEventListener('keyup', handleClose);
58 |   });
59 | 
60 |   onUnmounted(() => {
61 |     document.removeEventListener('keyup', handleClose);
62 |   });
63 | 
64 |   const emits = defineEmits(['update:modelValue']);
65 | </script>
66 | 


--------------------------------------------------------------------------------
/src/components/Notes/SingleNote.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="card mb-4">
 3 |     <div class="card-content">
 4 |       <div class="content">
 5 |         {{ note.content }}
 6 |         <div class="columns has-text-grey-light mt-3">
 7 |           <small class="column">{{ formattedDate }}</small>
 8 |           <small class="column has-text-right">{{ characterLength }}</small>
 9 |         </div>
10 |       </div>
11 |     </div>
12 |     <footer class="card-footer">
13 |       <RouterLink :to="{ name: 'editNote', params: { id: note.id } }" class="card-footer-item"
14 |         >Edit</RouterLink
15 |       >
16 |       <a href="#" class="card-footer-item" @click.prevent="handleDeleteClick">Delete</a>
17 |     </footer>
18 |     <DeleteNoteModal v-if="modals.deleteModal" v-model="modals.deleteModal" :noteId="note.id" />
19 |   </div>
20 | </template>
21 | 
22 | <script setup>
23 |   import { useDateFormat } from '@vueuse/core';
24 |   import { computed, reactive } from 'vue';
25 |   import { useNotesStore } from '../../stores/NotesStore';
26 |   import DeleteNoteModal from './DeleteNoteModal.vue';
27 | 
28 |   const props = defineProps({
29 |     note: {
30 |       type: Object,
31 |       required: true
32 |     }
33 |   });
34 | 
35 |   const notesStore = useNotesStore();
36 | 
37 |   const formattedDate = computed(() => {
38 |     console.log(props.note.date);
39 |     const date = new Date(+props.note.date);
40 |     const formatDate = useDateFormat(date, 'MM-DD-YYYY @ HH:mm');
41 |     return formatDate.value;
42 |   });
43 | 
44 |   const characterLength = computed(() => {
45 |     const noteLength = props.note.content.length;
46 |     const description = noteLength > 1 ? 'characters' : 'character';
47 | 
48 |     return `${props.note.content.length} ${description}`;
49 |   });
50 | 
51 |   const handleDeleteClick = () => {
52 |     modals.deleteModal = true;
53 |     //notesStore.deleteNote(props.note.id);
54 |   };
55 | 
56 |   const modals = reactive({
57 |     deleteModal: false
58 |   });
59 | </script>
60 | 


--------------------------------------------------------------------------------
/src/assets/base.css:
--------------------------------------------------------------------------------
 1 | /* color palette from <https://github.com/vuejs/theme> */
 2 | :root {
 3 |   --vt-c-white: #ffffff;
 4 |   --vt-c-white-soft: #f8f8f8;
 5 |   --vt-c-white-mute: #f2f2f2;
 6 | 
 7 |   --vt-c-black: #181818;
 8 |   --vt-c-black-soft: #222222;
 9 |   --vt-c-black-mute: #282828;
10 | 
11 |   --vt-c-indigo: #2c3e50;
12 | 
13 |   --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
14 |   --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
15 |   --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
16 |   --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
17 | 
18 |   --vt-c-text-light-1: var(--vt-c-indigo);
19 |   --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
20 |   --vt-c-text-dark-1: var(--vt-c-white);
21 |   --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
22 | }
23 | 
24 | /* semantic color variables for this project */
25 | :root {
26 |   --color-background: var(--vt-c-white);
27 |   --color-background-soft: var(--vt-c-white-soft);
28 |   --color-background-mute: var(--vt-c-white-mute);
29 | 
30 |   --color-border: var(--vt-c-divider-light-2);
31 |   --color-border-hover: var(--vt-c-divider-light-1);
32 | 
33 |   --color-heading: var(--vt-c-text-light-1);
34 |   --color-text: var(--vt-c-text-light-1);
35 | 
36 |   --section-gap: 160px;
37 | }
38 | 
39 | @media (prefers-color-scheme: dark) {
40 |   :root {
41 |     --color-background: var(--vt-c-black);
42 |     --color-background-soft: var(--vt-c-black-soft);
43 |     --color-background-mute: var(--vt-c-black-mute);
44 | 
45 |     --color-border: var(--vt-c-divider-dark-2);
46 |     --color-border-hover: var(--vt-c-divider-dark-1);
47 | 
48 |     --color-heading: var(--vt-c-text-dark-1);
49 |     --color-text: var(--vt-c-text-dark-2);
50 |   }
51 | }
52 | 
53 | *,
54 | *::before,
55 | *::after {
56 |   box-sizing: border-box;
57 |   margin: 0;
58 |   font-weight: normal;
59 | }
60 | 
61 | body {
62 |   min-height: 100vh;
63 |   color: var(--color-text);
64 |   background: var(--color-background);
65 |   transition: color 0.5s, background-color 0.5s;
66 |   line-height: 1.6;
67 |   font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
68 |     Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
69 |   font-size: 15px;
70 |   text-rendering: optimizeLegibility;
71 |   -webkit-font-smoothing: antialiased;
72 |   -moz-osx-font-smoothing: grayscale;
73 | }
74 | 


--------------------------------------------------------------------------------
/src/stores/NotesStore.js:
--------------------------------------------------------------------------------
  1 | import { defineStore } from 'pinia';
  2 | import { computed, ref } from 'vue';
  3 | import {
  4 |   getDocs,
  5 |   collection,
  6 |   onSnapshot,
  7 |   setDoc,
  8 |   doc,
  9 |   updateDoc,
 10 |   deleteDoc,
 11 |   addDoc,
 12 |   query,
 13 |   orderBy,
 14 |   limit
 15 | } from 'firebase/firestore';
 16 | import { db } from '../js/firebase';
 17 | 
 18 | export const useNotesStore = defineStore('notesStore', () => {
 19 |   const notes = ref([]);
 20 |   const notesLoaded = ref(false);
 21 | 
 22 |   const notesCollectionRef = collection(db, 'notes');
 23 |   const notesCollectionQuery = query(notesCollectionRef, orderBy('date', 'desc'));
 24 | 
 25 |   const getNoteContentById = computed(() => {
 26 |     return (id) => {
 27 |       return notes.value.find((note) => note.id === id).content;
 28 |     };
 29 |   });
 30 | 
 31 |   const getNotes = async () => {
 32 |     // const querySnapshot = await getDocs(collection(db, 'notes'));
 33 |     // querySnapshot.forEach((doc) => {
 34 |     //   let note = {
 35 |     //     id: doc.id,
 36 |     //     content: doc.data().content
 37 |     //   };
 38 |     //   notes.value.push(note);
 39 |     // });
 40 | 
 41 |     onSnapshot(notesCollectionQuery, (querySnapshot) => {
 42 |       let notesData = [];
 43 |       notesLoaded.value = false;
 44 |       querySnapshot.forEach((doc) => {
 45 |         let note = {
 46 |           id: doc.id,
 47 |           content: doc.data().content,
 48 |           date: doc.data().date
 49 |         };
 50 |         notesData.push(note);
 51 |       });
 52 | 
 53 |       notes.value = notesData;
 54 |       notesLoaded.value = true;
 55 |     });
 56 |   };
 57 | 
 58 |   const totalNotesCount = computed(() => {
 59 |     return notes.value.length;
 60 |   });
 61 | 
 62 |   const totalCharactersCount = computed(() => {
 63 |     let count = 0;
 64 |     for (let note of notes.value) {
 65 |       count += note.content.length;
 66 |     }
 67 |     return count;
 68 |   });
 69 | 
 70 |   const addNote = async (noteContent) => {
 71 |     const currentDate = new Date().getTime().toString();
 72 |     // const note = {
 73 |     //   id: currentDate,
 74 |     //   content: noteContent
 75 |     // };
 76 | 
 77 |     //notes.value.unshift(note);
 78 | 
 79 |     await addDoc(notesCollectionRef, { content: noteContent, date: currentDate });
 80 |   };
 81 | 
 82 |   const deleteNote = async (noteId) => {
 83 |     await deleteDoc(doc(notesCollectionRef, noteId));
 84 |   };
 85 | 
 86 |   const updateNote = async (id, content) => {
 87 |     await updateDoc(doc(notesCollectionRef, id), {
 88 |       content
 89 |     });
 90 |   };
 91 | 
 92 |   return {
 93 |     notes,
 94 |     updateNote,
 95 |     getNoteContentById,
 96 |     addNote,
 97 |     deleteNote,
 98 |     totalCharactersCount,
 99 |     totalNotesCount,
100 |     getNotes,
101 |     notesLoaded
102 |   };
103 | });
104 | 


--------------------------------------------------------------------------------