feat: typings & add IndexDb instead of ls ✨

Signed-off-by: Vinayak Kulkarni <19776877+vinayakkulkarni@users.noreply.github.com>

components/map/layers/Cluster.vue

@@ -22,7 +22,7 @@
     SymbolLayerSpecification,
   } from 'maplibre-gl';
   import type { PropType } from 'vue';
-  import type { FeatureCollection, Point } from 'geojson';
+  import type { ExpenseFeatureCollection } from '~/types/expense';
   import { VLayerMapboxGeojson } from '~/lib/v-mapbox';
 
   export default defineComponent({
@@ -32,7 +32,7 @@
     },
     props: {
       data: {
-        type: Object as PropType<FeatureCollection<Point>>,
+        type: Object as PropType<ExpenseFeatureCollection>,
         required: true,
       },
       visibility: {
@@ -43,6 +43,13 @@
     },
     setup(props) {
       const cluster = ref({
+        // source: {
+        //   type: 'geojson',
+        //   data: props.data,
+        //   cluster: true,
+        //   clusterMaxZoom: 20,
+        //   clusterRadius: 40,
+        // } as GeoJSONSourceSpecification,
         source: computed(() => {
           return {
             type: 'geojson',

components/map/layers/Heatmap.vue

@@ -22,7 +22,7 @@
     CircleLayerSpecification,
   } from 'maplibre-gl';
   import type { PropType } from 'vue';
-  import type { FeatureCollection, Point } from 'geojson';
+  import type { ExpenseFeatureCollection } from '~/types/expense';
   import { VLayerMapboxGeojson } from '~/lib/v-mapbox';
 
   export default defineComponent({
@@ -32,7 +32,7 @@
     },
     props: {
       data: {
-        type: Object as PropType<FeatureCollection<Point>>,
+        type: Object as PropType<ExpenseFeatureCollection>,
         required: true,
       },
       visibility: {
@@ -46,9 +46,6 @@
         source: {
           type: 'geojson',
           data: props.data,
-          cluster: true,
-          clusterMaxZoom: 20,
-          clusterRadius: 40,
         } as GeoJSONSourceSpecification,
         circleLayer: {
           id: 'expenses-heatmap-circle-layer',

components/map/layers/Marker.vue

@@ -5,6 +5,7 @@
         v-if="visibility"
         :key="idx"
         :coordinates="getExpenseMarkerCoordinates(marker)"
+        :popup-options="popupOptions"
         @click="$emit('update:popup-visibility', true)"
       >
         <template #markers="{ setRef }">
@@ -113,11 +114,10 @@
 <script lang="ts">
   import type { PropType } from 'vue';
   import type {
-    Feature,
-    FeatureCollection,
-    GeoJsonProperties,
-    Point,
-  } from 'geojson';
+    ExpenseFeature,
+    ExpenseFeatureCollection,
+  } from '~/types/expense';
+  import type { PopupOptions } from 'maplibre-gl';
   import { VMarker } from '~/lib/v-mapbox';
 
   export default defineComponent({
@@ -127,7 +127,7 @@
     },
     props: {
       data: {
-        type: Object as PropType<FeatureCollection<Point>>,
+        type: Object as PropType<ExpenseFeatureCollection>,
         required: true,
         description: 'Point type features within the FeatureCollection',
       },
@@ -136,6 +136,11 @@
         required: true,
         description: 'Whether to show the marker or not',
       },
+      popupOptions: {
+        type: Object as PropType<PopupOptions>,
+        required: true,
+        description: 'Options for the popup',
+      },
       popupVisibility: {
         type: Boolean as PropType<boolean>,
         required: true,
@@ -146,11 +151,11 @@
       /**
        * Gets the coordinates for the marker
        *
-       * @param {Feature<Point, GeoJsonProperties>} m - Marker
-       * @returns {number[]} - Coordinates
+       * @param {ExpenseFeature} m - Marker
+       * @returns {[number, number]} - Coordinates
        */
       function getExpenseMarkerCoordinates(
-        m: Feature<Point, GeoJsonProperties>,
+        m: ExpenseFeature,
       ): [number, number] {
         return [m.geometry.coordinates[0], m.geometry.coordinates[1]];
       }
@@ -159,11 +164,11 @@
        * Gets the color for the svg
        * marker based on the expense type
        *
-       * @param {Feature<Point>} m - Expense type
+       * @param {ExpenseFeature} m - Expense type
        * @returns {Record<string, boolean> | string} - Color object
        */
       function getExpenseMarkerColor(
-        m: Feature<Point, GeoJsonProperties>,
+        m: ExpenseFeature,
       ): Record<string, boolean> | string {
         if (m.properties) {
           return {

composables/useExpense.ts

@@ -1,20 +1,80 @@
 import { defineStore } from 'pinia';
+import { v4 as uuid } from 'uuid';
+import type { PopupOptions } from 'maplibre-gl';
+import type { ExpenseForm, ExpenseFeatureCollection } from '~/types/expense';
 
 /**
  * Expense Store
  */
 export const useExpense = defineStore({
   id: 'expense',
-  state: () => {
-    return {
+  state: () => ({
+    map: {
       ui: {
-        loaded: false as boolean,
+        isMarker: true,
+        isCluster: false,
+        isHeatmap: false,
       },
-    };
-  },
-  actions: {
-    setLoaded(loaded: boolean) {
-      this.ui.loaded = loaded;
+      center: [73.8567, 18.5204],
+      zoom: 11,
+      marker: {
+        options: { draggable: true },
+        popup: {
+          options: {
+            closeButton: false,
+            closeOnClick: false,
+            offset: {
+              top: [0, 10],
+              bottom: [0, -10],
+            },
+          } as PopupOptions,
+        },
+        coordinates: [73.8567, 18.5204] as [number, number],
+      },
+    },
+    form: {
+      amount: undefined as number | undefined,
+      description: '' as string,
+      type: 'debit' as 'credit' | 'debit',
+    } as ExpenseForm,
+    geojson: {
+      id: uuid().split('-').join(''),
+      type: 'FeatureCollection',
+      features: [],
+    } as ExpenseFeatureCollection,
+    popup: {
+      shown: false,
+      options: {
+        closeButton: false,
+        closeOnClick: false,
+        offset: {
+          top: [0, 10],
+          bottom: [0, -10],
+        },
+      } as PopupOptions,
+    },
+  }),
+  getters: {
+    isMarker: (state): boolean => {
+      return (
+        !state.map.ui.isCluster &&
+        state.map.ui.isMarker &&
+        !state.map.ui.isHeatmap
+      );
+    },
+    isCluster: (state): boolean => {
+      return (
+        state.map.ui.isCluster &&
+        !state.map.ui.isMarker &&
+        !state.map.ui.isHeatmap
+      );
+    },
+    isHeatmap: (state): boolean => {
+      return (
+        !state.map.ui.isCluster &&
+        !state.map.ui.isMarker &&
+        state.map.ui.isHeatmap
+      );
     },
   },
 });

composables/useIdb.ts

@@ -0,0 +1,23 @@
+import { openDB } from 'idb';
+import type { IDBPDatabase } from 'idb';
+import type { MyDB } from '~/types/expense';
+
+/**
+ * Composable for using idb
+ *
+ * @returns {Promise<IDBPDatabase<MyDB>>} - The IndexDB database
+ */
+async function useIdb(): Promise<IDBPDatabase<MyDB>> {
+  const db = await openDB<MyDB>('db', 1, {
+    upgrade(db) {
+      // Create Language Store
+      const expenseStore = db.createObjectStore('expenses', {
+        keyPath: 'id',
+      });
+      expenseStore.createIndex('by-id', 'id');
+    },
+  });
+  return db;
+}
+
+export { useIdb };