Merge pull request #3 from julix14/feature/show-list

Feature/show list

.gitignore

@@ -23,3 +23,6 @@ logs
 .env.*
 !.env.example
 service-account.json
+
+# Build files
+.firebase

components/multiSelect.vue

@@ -2,7 +2,7 @@
   <div class="flex flex-col w-fit">
     <p>Categories</p>
     <div
-      class="flex gap-x-2 shadow-sm ring-1 ring-inset ring-gray-300 rounded-md border-0 bg-white px-2.5 py-1.5 focus:ring-2 focus:ring-primary-500">
+      class="flex gap-x-2 shadow-sm ring-1 ring-inset ring-gray-300 rounded-md border-0 bg-white px-2.5 py-1.5 focus:ring-2 focus:ring-primary-500 dark:bg-gray-900 dark:text-white dark:focus:ring-primary-400 dark:ring-gray-700 dark:placeholder-gray-500">
       <div
         class="flex items-center gap-x-2 bg-gray-200 rounded-md"
         v-for="category in selectedCategories">

firebase.json

@@ -4,6 +4,7 @@
     {
       "site": "activityapp-419511",
       "public": ".output/public",
+      "predeploy": "npm run build -- --preset=firebase",
       "cleanUrls": true,
       "rewrites": [{ "source": "**", "function": "server" }]
     }

layouts/default.vue

@@ -1,5 +1,31 @@
 <template>
   <div>
+    <header>
+      <UHorizontalNavigation
+        :links="links"
+        class="border-b border-gray-200 dark:border-gray-800" />
+    </header>
     <slot> </slot>
   </div>
 </template>
+
+<script setup>
+  const links = [
+    { label: "Home", to: "/", icon: "i-heroicons-home" },
+    {
+      label: "Add Attraction",
+      to: "/add-attraction",
+      icon: "i-heroicons-plus-circle",
+    },
+    {
+      label: "List Attractions",
+      to: "/list-attractions",
+      icon: "i-heroicons-list-bullet",
+    },
+    {
+      label: "List Categories",
+      to: "/list-categories",
+      icon: "i-heroicons-list-bullet",
+    },
+  ];
+</script>

nuxt.config.ts

@@ -22,8 +22,8 @@ export default defineNuxtConfig({
     appCheck: {
       debug: process.env.NODE_ENV !== "production",
       isTokenAutoRefreshEnabled: true,
-      provider: "ReCaptchaV3",
-      key: "6LctAsopAAAAAGPUQLCRKoxSjlMko-zRy17c8ikL",
+      provider: "ReCaptchaEnterprise",
+      key: "6LcKHMopAAAAAHfazxKPus78WHpM4hZ1Q0GStd6G",
     },
   },
   nitro: {

pages/add-attraction.vue

@@ -108,11 +108,12 @@
 
 <script setup>
   import { writeBatch, doc } from "firebase/firestore";
+  import { v4 as uuidv4 } from "uuid";
   definePageMeta({
     middleware: ["auth"],
   });
 
-  const isBerlin = ref(false);
+  const isBerlin = ref(true);
   const isRegional = ref(true);
   const name = ref("");
   const socialMediaLink = ref("");
@@ -206,6 +207,7 @@
     });
 
     const activity = {
+      id: uuidv4(),
       isBerlin: isBerlin.value,
       isRegional: isRegional.value,
       name: name.value,
@@ -219,15 +221,15 @@
       categories: categoryIds,
       createdAt: new Date(),
       updatedAt: new Date(),
-      createdBy: useCurrentUser().displayName,
-      updatedBy: useCurrentUser().displayName,
+      createdBy: useCurrentUser().value.displayName,
+      updatedBy: useCurrentUser().value.displayName,
     };
     try {
       const batch = writeBatch(firestore);
-      const activityRef = doc(firestore, "activities", activity.name);
+      const activityRef = doc(firestore, "activities", activity.id);
       batch.set(activityRef, activity);
       newCategories.forEach((category) => {
-        const categoryRef = doc(firestore, "categories", category.name);
+        const categoryRef = doc(firestore, "categories", category.id);
         batch.set(categoryRef, category);
       });
 

pages/attraction-[id].vue

@@ -0,0 +1,46 @@
+<template>
+  <pre>{{ JSON.stringify(attraction, undefined, 4) }}</pre>
+</template>
+
+<script setup>
+  import { collection, doc } from "firebase/firestore";
+
+  const route = useRoute();
+  const id = route.params.id;
+
+  const { firestore } = useFirebaseClient();
+  const categories = useCollection(
+    collection(firestore, "categories").withConverter({
+      fromFirestore(snapshot, options) {
+        const data = snapshot.data(options);
+        return {
+          id: snapshot.id,
+          name: data.name,
+        };
+      },
+    })
+  );
+  const attraction = useDocument(
+    doc(collection(firestore, "activities"), id).withConverter({
+      fromFirestore(snapshot, options) {
+        const data = snapshot.data(options);
+        return {
+          id: snapshot.id,
+          name: data.name,
+          socialMediaLink: data.socialMediaLink,
+          websiteUrl: data.websiteUrl,
+          price: data.price,
+          address: data.address,
+          isBerlin: data.isBerlin,
+          isRegional: data.isRegional,
+          categories: data.categories.map((category) => {
+            return categories.value.find((c) => c.id === category);
+          }),
+        };
+      },
+    }),
+    {
+      once: true,
+    }
+  );
+</script>

pages/index.vue

@@ -1,10 +1,9 @@
 <template>
   <div>
     <p>Hello</p>
-    <NuxtLink to="/add-attraction">Add Attraction</NuxtLink>
+    <NuxtLink to="/add-attraction">Add Attraction</NuxtLink><br />
+    <NuxtLink to="/list-attractions">List Attractions</NuxtLink>
   </div>
 </template>
 
 <script setup></script>
-
-<style></style>

pages/list-attractions.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <UTable
+      :rows="rows"
+      sortable
+      :loading="tableLoad"
+      @select="openDetails"
+      class="m-2" />
+    <div
+      class="flex justify-end px-3 py-3.5 border-t border-gray-200 dark:border-gray-700">
+      <UPagination
+        v-model="page"
+        :page-count="pageCount"
+        :total="attractions.length" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { collection } from "firebase/firestore";
+  const { firestore } = useFirebaseClient();
+  const attractions = useCollection(
+    collection(firestore, "activities").withConverter({
+      fromFirestore(snapshot, options) {
+        const data = snapshot.data(options);
+        return {
+          id: snapshot.id,
+          name: data.name,
+          socialMediaLink: data.socialMediaLink,
+          websiteUrl: data.websiteUrl,
+          price: data.price,
+          address: data.address,
+          isBerlin: data.isBerlin,
+          isRegional: data.isRegional,
+        };
+      },
+    }),
+    { once: true }
+  );
+
+  const openDetails = (row) => {
+    navigateTo(`/attraction-${row.id}`);
+  };
+
+  const tableLoad = computed(() => {
+    // Don't know why this operation works in that way, but it does
+    return attractions.value < true;
+  });
+
+  const page = ref(1);
+  const pageCount = 20;
+
+  const rows = computed(() => {
+    return attractions.value.slice(
+      (page.value - 1) * pageCount,
+      page.value * pageCount
+    );
+  });
+</script>

pages/list-categories.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <UTable
+      :rows="rows"
+      sortable
+      :loading="tableLoad"
+      @select="openDetails"
+      :columns="columns"
+      class="m-2" />
+    <div
+      class="flex justify-end px-3 py-3.5 border-t border-gray-200 dark:border-gray-700">
+      <UPagination
+        v-model="page"
+        :page-count="pageCount"
+        :total="categories.length" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { collection } from "firebase/firestore";
+  const { firestore } = useFirebaseClient();
+  const categories = useCollection(collection(firestore, "categories"), {
+    once: true,
+  });
+
+  const columns = [
+    { key: "name", label: "Name" },
+    { key: "id", label: "ID" },
+  ];
+
+  function openDetails(category) {
+    console.log("To be implemented");
+  }
+
+  const tableLoad = computed(() => {
+    // Don't know why this operation works in that way, but it does
+    return categories.value < true;
+  });
+
+  const page = ref(1);
+  const pageCount = 20;
+
+  const rows = computed(() => {
+    return categories.value.slice(
+      (page.value - 1) * pageCount,
+      page.value * pageCount
+    );
+  });
+</script>