Order form for #301

web/admin/src/components/ConfigTabs.vue

@@ -14,5 +14,8 @@ const props = defineProps({
     <li class="nav-item">
       <router-link :class="['nav-link', { active: props.activeTab === 'TaskTypes' }]" :to="{ name: 'TaskTypesList'}">TaskTypes</router-link>
     </li>
+    <li class="nav-item">
+      <router-link :class="['nav-link', { active: props.activeTab === 'Orders' }]" :to="{ name: 'OrdersSettingsPage'}">Orders</router-link>
+    </li>
   </ul>
 </template>

web/admin/src/composables/useUnits.js

@@ -0,0 +1,23 @@
+import { ref } from 'vue'
+
+export function useUnits() {
+
+  const units = ref([
+    {
+      'name':'ounces',
+      'displayName': 'Ounces (dry)',
+    },
+    {
+      'name': 'ounces-liquid',
+      'displayName': 'Ounces (liquid)',
+    },
+    {
+      'name': 'pounds',
+      'displayName': 'Pounds',
+    }
+  ])
+
+  return {
+    units
+  }
+}

web/admin/src/config.js

@@ -6,6 +6,9 @@ export let config = {
   OrganizationName: import.meta.env.VITE_ORGANIZATION_NAME || 'ORGANIZATION_NAME',
   ProjectLongName: import.meta.env.VITE_PROJECT_LONG_NAME || 'PROJECT_LONG_NAME',
   AdminProjectLongName: import.meta.env.VITE_ADMIN_PROJECT_LONG_NAME || 'ADMIN_PROJECT_LONG_NAME',
+  orders: {
+    showWeights: false,
+  },
 
   meta: {
     Home: {

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

@@ -1,66 +1,29 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, onBeforeMount } from 'vue'
+import { config } from '@/config.js'
+import { collection, getFirestore, query, where, doc, getDoc, getDocs, addDoc, updateDoc, deleteDoc, orderBy } from 'firebase/firestore'
 import OrdersTabs from '@/components/OrdersTabs.vue'
 import dayjs from 'dayjs'
 import { VueDraggable } from 'vue-draggable-plus'
+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('')
 const errMessage = ref('')
+const deleteMessage = ref('Form deleted')
+const units = useUnits().units
 
 
-const items = ref([
-  {
-    name: 'Apples',
-    id: 'apples',
-    num: 6,
-    maxTotal: 400,
-    weight: 6,      // weight in ounces
-  },
-  {
-    name: 'Beans',
-    id: 'beans',
-    num: 2,
-    maxTotal: 400,
-    weight: 6,
-  },
-  {
-    name: 'Milk',
-    id: 'milk',
-    num: 1,
-    maxTotal: 400,
-    weight: 6,
-  },
-  {
-    name: 'Peas',
-    id: 'peas',
-    num: 2,
-    maxTotal: 400,
-    weight: 6,
-  },
-  {
-    name: 'Rice',
-    id: 'rice',
-    num: 1,
-    maxTotal: 400,
-    weight: 6,
-  },
-  {
-    name: 'Diapers',
-    id: 'diapers',
-    num: 1,
-    maxTotal: 20,
-    weight: 6,
-  },
-  {
-    name: 'Toothpaste',
-    id: 'toothpaste',
-    num: 1,
-    maxTotal: 10,
-    weight: 6,
-  },
-])
+const items = ref([])
 
 const formData = ref({
   beginDate: dayjs().toDate(),
@@ -88,6 +51,38 @@ const onRemoveOrder = (ev) => {
   calculateWeight()
 }
 
+const resetShowMessages = () => {
+  showSaveMessage.value = false
+  showErrMessage.value = false
+  showDeleteMessage.value = false
+  errMessage.value = 'An error occurred'
+}
+
+const getItems = async() => {
+  try {
+    const q = query(collection(db, 'item'), orderBy('name', 'asc'))
+    const orderItems = await getDocs(q)
+    const itemArray = []
+    orderItems.forEach( (item) => {
+      itemArray.push({
+        id: item.id,
+        num: 1,
+        maxTotal: 100,
+        ...item.data()})
+    })
+    items.value = itemArray
+
+  } catch (err) {
+    errMessage.value = 'Error occurred reading items'
+    console.error(err)
+    showErrMessage.value = true
+  }
+}
+
+
+onBeforeMount(async() => {
+  await getItems()
+})
 </script>
 
 <template>
@@ -180,7 +175,7 @@ const onRemoveOrder = (ev) => {
       </div>
     </div>
 
-    <div class="row mb-3">
+    <div class="row mb-3" v-if="config.orders.showWeights">
       <div class="col">
         Estimated weight of order: {{ orderForm.estimatedTotalWeight / 16.0 }} pounds
       </div>

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

@@ -1,12 +1,65 @@
 <script setup>
-import { ref } from 'vue'
+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, "item"), 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="Items" />
 
+  <div class="mt-3">
+    <router-link class="btn btn-primary" :to="{'name':'OrderItemPage'}">New Item</router-link>
+  </div>
+
+    <div class="table-responsive-md">
+      <table class="table table-striped table-hover">
+        <thead>
+          <tr>
+            <SortableTableHeader heading="Name" sortKey="name" :sortBy="sortBy" :sortAsc="sortAsc" @sort-list="sortList" />
+            <th scope="col">Inventory</th>
+            <th scope="col">Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="item in items" :key="item.id">
+            <td>{{item.name}}</td>
+            <td>{{item.numInventory}}</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>