started workingon pinia, adding sample data

package-lock.json

@@ -1879,6 +1879,15 @@
       "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
       "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY="
     },
+    "pinia": {
+      "version": "2.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.0-rc.10.tgz",
+      "integrity": "sha512-WY0KQoHxSBylhGc6aBQKPFfAupYHWpI1QBQKJSyK9btwwMTVQpwCdePgPho+ZoEMl832jb7RwfI5TN1srV5VEA==",
+      "requires": {
+        "@vue/devtools-api": "^6.0.0-beta.18",
+        "vue-demi": "*"
+      }
+    },
     "pinkie": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
@@ -2692,6 +2701,11 @@
         "@vue/shared": "3.2.19"
       }
     },
+    "vue-demi": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.11.4.tgz",
+      "integrity": "sha512-/3xFwzSykLW2HiiLie43a+FFgNOcokbBJ+fzvFXd0r2T8MYohqvphUyDQ8lbAwzQ3Dlcrb1c9ykifGkhSIAk6A=="
+    },
     "vue-month-picker": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/vue-month-picker/-/vue-month-picker-1.5.0.tgz",

package.json

@@ -11,6 +11,7 @@
     "bootstrap": "^5.1.1",
     "bootstrap-icons": "^1.5.0",
     "date-fns": "^2.24.0",
+    "pinia": "^2.0.0-rc.10",
     "vue": "^3.2.16",
     "vue-month-picker": "^1.5.0",
     "vue-router": "^4.0.11"

src/main.ts

@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 import App from './App.vue'
 import router from './router'
 import "bootstrap"
@@ -7,4 +8,5 @@ import "bootstrap-icons/font/bootstrap-icons.css"
 
 createApp(App)
 .use(router)
+.use(createPinia())
 .mount('#app')

src/stores/employees.js

@@ -0,0 +1,12 @@
+import { defineStore } from 'pinia'
+
+import emplJSON from '../sample-data/employees.json'
+
+export const useEmployees = defineStore('employees', {
+    state: () => {
+        return { 
+            /** @type {{id: number, name: string, handle: string, contractHours: number }[]} */
+            employees: emplJSON
+        }
+    },
+})

src/views/Home.vue

@@ -10,6 +10,7 @@ div(class="mt-5" v-for="(month, index) in months" :key="index")
 <script lang="ts" setup>
   import { ref, computed } from 'vue'
   import { getYear, getMonth, eachMonthOfInterval, getDaysInMonth, getISODay } from 'date-fns'
+  import { storeToRefs } from 'pinia'
   import Schedule from '/src/components/Schedule.vue'
   import MonthPicker from '/src/components/MonthPicker.vue'
 

tsconfig.json

@@ -11,5 +11,5 @@
     "esModuleInterop": true,
     "lib": ["esnext", "dom"]
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/stores/employees.js"]
 }