For #301 adds order entry page and other scaffolding pages for guest …

…orders.

web/admin/src/components/OrdersTabs.vue

@@ -12,7 +12,10 @@ const props = defineProps({
       <router-link :class="['nav-link', { active: props.activeTab === 'Dashboard' }]" aria-current="page" :to="{ name: 'OrdersDashboardPage'}">Dashboard</router-link>
     </li>
     <li class="nav-item">
-      <router-link :class="['nav-link', { active: props.activeTab === 'Form' }]" :to="{ name: 'OrderFormPage'}">Form</router-link>
+      <router-link :class="['nav-link', { active: props.activeTab === 'Forms' }]" :to="{ name: 'OrderFormListPage'}">Forms</router-link>
+    </li>
+    <li class="nav-item">
+      <router-link :class="['nav-link', { active: props.activeTab === 'Orders' }]" :to="{ name: 'OrdersListPage'}">Orders</router-link>
     </li>
     <li class="nav-item">
       <router-link :class="['nav-link', { active: props.activeTab === 'Items' }]" :to="{ name: 'OrderItemListPage'}">Items</router-link>

web/admin/src/pages/orders/AdminOrderPage.vue

@@ -0,0 +1,131 @@
+<script setup>
+import { ref, onBeforeMount } from 'vue'
+import { config } from '@/config.js'
+import { collection, getFirestore, query, where, doc, getDoc, getDocs, addDoc, updateDoc, deleteDoc } from 'firebase/firestore'
+import OrdersTabs from '@/components/OrdersTabs.vue'
+import { useUnits } from '@/composables/useUnits.js'
+import { useRouter } from 'vue-router'
+
+const props = defineProps({
+  id: String,
+})
+
+const router = useRouter()
+const db = getFirestore()
+const showSaveMessage = ref(false)
+const showErrMessage = ref(false)
+const showDeleteMessage = ref(false)
+const saveMessage = ref('Item Saved')
+const errMessage = ref('An error occurred')
+const deleteMessage = ref('Item Deleted')
+
+const units = useUnits().units
+
+const item = ref(
+  {
+    guestid: '',
+    guestname: '',
+    delivery: false,
+    items: [],
+  }
+)
+const oldName = ref('')
+
+const resetShowMessages = () => {
+  showSaveMessage.value = false
+  showErrMessage.value = false
+  showDeleteMessage.value = false
+  errMessage.value = 'An error occurred'
+}
+
+const deleteItem = async() => {
+  resetShowMessages()
+  try {
+    await deleteDoc(doc(db, 'order', props.id))
+    showDeleteMessage.value = true
+    router.push({name: 'OrdersListPage'})
+  } catch(err) {
+    showErrMessage.value = true
+    console.error(err)
+  }
+}
+
+const saveItem = async () => {
+  resetShowMessages()
+  try {
+
+    if (props.id !== null && props.id !== '' && props.id !== undefined) {
+      const itemRef = doc(db, 'order', props.id)
+      await updateDoc(itemRef, item.value)
+      showSaveMessage.value = true
+    } else {
+
+      const q = query(collection(db, 'order'), where('name', '==', item.value.name))
+      const docs = await getDocs(q)
+      if (docs.size > 0) {
+        errMessage.value = 'Item with name ' + item.value.name + ' already exists'
+        showErrMessage = true
+        return
+      }
+
+      const itemRef = await addDoc(collection(db, 'order'), item.value)
+      router.push({name: 'OrdersListPage'})
+
+    }
+  } catch(err) {
+    showErrMessage.value = true
+    console.error(err)
+  }
+}
+
+onBeforeMount(async() => {
+  try {
+    if (props.id) {
+      const itemRef = doc(db, 'order', props.id)
+      const itemSnap = await getDoc(itemRef)
+      if (itemSnap.exists()) {
+        item.value = itemSnap.data()
+        oldName.value = itemSnap.data().name
+      } else {
+        showErrMessage.value = true
+        errMessage.value = 'Item does not exist'
+      }
+    }
+  } catch(err) {
+    showErrMessage.value = true
+    console.error(err)
+  }
+})
+</script>
+
+<template>
+<div class="container">
+  <OrdersTabs activeTab="Orders" />
+
+  <h1>Admin Order Page</h1>
+
+  <form @submit.prevent="saveItem">
+    <div v-if="showSaveMessage" class="p-3 text-bg-success">{{saveMessage}}</div>
+    <div v-if="showDeleteMessage" class="p-3 text-bg-success">{{deleteMessage}}</div>
+    <div v-if="showErrMessage" class="p-3 text-bg-danger">{{errMessage}}</div>
+
+    <div class="row mb-3">
+      <div class="col">
+        <label class="form-label" for="guestName">Guest Name</label>
+        <input id="guestName" type="text" class="form-control" v-model="item.guestname" required>
+        <div id="guestHelpBlock" class="form-text">Guest ID: {{item.guestid || 'not registered'}}</div>
+      </div>
+    </div>
+
+
+    <div class="row mb-3">
+      <div class="col">
+        <button type="submit" class="btn btn-primary">Save</button>
+      </div>
+      <div class="col text-end">
+        <button @click.prevent="deleteItem" class="btn btn-danger" :disabled="props.id === '' || props.id === null || props.id === undefined">Delete</button>
+      </div>
+    </div>
+  </form>
+</div>
+</template>

web/admin/src/pages/orders/OrderFormListPage.vue

@@ -0,0 +1,67 @@
+<script setup>
+import { ref, onBeforeMount } from 'vue'
+import OrdersTabs from '@/components/OrdersTabs.vue'
+import { collection, getFirestore, query, where, doc, getDocs, addDoc, updateDoc, orderBy } from 'firebase/firestore'
+import SortableTableHeader from '@/components/SortableTableHeader.vue'
+
+const db = getFirestore()
+const items = ref()
+const sortBy = ref("name")
+const sortAsc = ref(true)
+
+
+const refreshList = async () => {
+  const q = query(collection(db, "orderform"), orderBy(sortBy.value, sortAsc.value ? "asc" : "desc"))
+  const itemRef = await getDocs(q)
+  const itemarray = []
+  itemRef.forEach((item)=> {
+    itemarray.push({id:item.id,...item.data()})
+  })
+  items.value = itemarray
+}
+
+const sortList = param => {
+  sortAsc.value = sortBy.value === param ? !sortAsc.value : true
+  sortBy.value = param
+
+  refreshList()
+}
+
+onBeforeMount( async () => {
+  await refreshList()
+})
+</script>
+
+<template>
+<div class="container">
+  <OrdersTabs activeTab="Forms" />
+
+  <div class="mt-3">
+    <router-link class="btn btn-primary" :to="{'name':'OrderFormPage'}">New Form</router-link>
+  </div>
+
+    <div class="table-responsive-md">
+      <table class="table table-striped table-hover">
+        <thead>
+          <tr>
+            <SortableTableHeader heading="Start Date" sortKey="startdate" :sortBy="sortBy" :sortAsc="sortAsc" @sort-list="sortList" />
+            <SortableTableHeader heading="End Date" sortKey="enddate" :sortBy="sortBy" :sortAsc="sortAsc" @sort-list="sortList" />
+            <th scope="col">Active</th>
+            <th scope="col">Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="item in items" :key="item.id">
+            <td>{{item.startdate}}</td>
+            <td>{{item.enddate}}</td>
+            <td>{{item.active}}</td>
+            <td>
+              <router-link class="btn btn-sm btn-primary" :to="{name:'OrderItemPage', params:{id:item.id} }">Edit</router-link>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+</div>
+</template>

web/admin/src/pages/orders/OrderFormPage.vue

@@ -87,7 +87,9 @@ onBeforeMount(async() => {
 
 <template>
 <div class="container">
-  <OrdersTabs activeTab="Form" />
+  <OrdersTabs activeTab="Forms" />
+
+  <h1 class="mt-3">Order Form</h1>
 
   <form>
     <div v-if="showSaveMessage" class="text-bg-success">{{saveMessage}}</div>

web/admin/src/pages/orders/OrdersListPage.vue

@@ -0,0 +1,67 @@
+<script setup>
+import { ref, onBeforeMount } from 'vue'
+import OrdersTabs from '@/components/OrdersTabs.vue'
+import { collection, getFirestore, query, where, doc, getDocs, addDoc, updateDoc, orderBy } from 'firebase/firestore'
+import SortableTableHeader from '@/components/SortableTableHeader.vue'
+
+const db = getFirestore()
+const items = ref()
+const sortBy = ref("name")
+const sortAsc = ref(true)
+
+
+const refreshList = async () => {
+  const q = query(collection(db, "order"), orderBy(sortBy.value, sortAsc.value ? "asc" : "desc"))
+  const itemRef = await getDocs(q)
+  const itemarray = []
+  itemRef.forEach((item)=> {
+    itemarray.push({id:item.id,...item.data()})
+  })
+  items.value = itemarray
+}
+
+const sortList = param => {
+  sortAsc.value = sortBy.value === param ? !sortAsc.value : true
+  sortBy.value = param
+
+  refreshList()
+}
+
+onBeforeMount( async () => {
+  await refreshList()
+})
+</script>
+
+<template>
+<div class="container">
+  <OrdersTabs activeTab="Orders" />
+
+  <div class="mt-3">
+    <router-link class="btn btn-primary" :to="{'name':'AdminOrderPage'}">New Order</router-link>
+  </div>
+
+    <div class="table-responsive-md">
+      <table class="table table-striped table-hover">
+        <thead>
+          <tr>
+            <SortableTableHeader heading="Start Date" sortKey="startdate" :sortBy="sortBy" :sortAsc="sortAsc" @sort-list="sortList" />
+            <SortableTableHeader heading="End Date" sortKey="enddate" :sortBy="sortBy" :sortAsc="sortAsc" @sort-list="sortList" />
+            <th scope="col">Active</th>
+            <th scope="col">Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="item in items" :key="item.id">
+            <td>{{item.startdate}}</td>
+            <td>{{item.enddate}}</td>
+            <td>{{item.active}}</td>
+            <td>
+              <router-link class="btn btn-sm btn-primary" :to="{name:'OrderItemPage', params:{id:item.id} }">Edit</router-link>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+</div>
+</template>

web/admin/src/router.js

@@ -85,11 +85,31 @@ const routes = [
     meta: { requiresLogin: true, admin: true },
   },
   {
-    path: '/orders/form',
+    path: '/orders/forms',
+    name: 'OrderFormListPage',
+    component: () => import('@/pages/orders/OrderFormListPage.vue'),
+    meta: { requiresLogin: true, admin: true },
+  },
+  {
+    path: '/orders/forms/form/:id?',
     name: 'OrderFormPage',
+    props: true,
     component: () => import('@/pages/orders/OrderFormPage.vue'),
     meta: { requiresLogin: true, admin: true },
   },
+  {
+    path: '/orders/orders',
+    name: 'OrdersListPage',
+    component: () => import('@/pages/orders/OrdersListPage.vue'),
+    meta: { requiresLogin: true, admin: true },
+  },
+  {
+    path: '/orders/orders/order/:id?',
+    name: 'AdminOrderPage',
+    props: true,
+    component: () => import('@/pages/orders/AdminOrderPage.vue'),
+    meta: { requiresLogin: true, admin: true },
+  },
   {
     path: '/orders/history',
     name: 'OrdersHistoryPage',

web/firestore.rules

@@ -112,7 +112,17 @@ service cloud.firestore {
     }
 
     match /item/{id} {
-      allow create, read, update, delete: if request.auth != null && request.auth.token.admin == true;
+      allow create, update, delete, list: if request.auth != null && request.auth.token.admin == true;
+      allow read: if request.auth != null;
+    }
+
+    match /orderform/{id} {
+      allow create, update, delete, list: if request.auth != null && request.auth.token.admin == true;
+      allow read: if request.auth != null;
+    }
+
+    match /order/{id} {
+      allow read, create, update, delete, list: if request.auth != null && request.auth.token.admin == true;
     }