[beam] add DayDivider to list views (#180)

* added DayDivider to Beam * fixed some padding styles for the list elements and updated prefixed variables * DayDivider now uses linkComponent. Added sample to data.json. * updated daydivider prop to accept Date object. Added optional flag for ISOString output vs. dateString output * fix: modify date formatter * updated day divider to use cell-changed color --------- Co-authored-by: Rohan Bansal <[email protected]>
agritheory · Nov 27, 2024 · 56fc061 · 56fc061
1 parent b0a7e85
commit 56fc061
Show file tree

Hide file tree

Showing 8 changed files with 134 additions and 12 deletions.
diff --git a/beam/src/components/BeamDayDivider.vue b/beam/src/components/BeamDayDivider.vue
@@ -0,0 +1,56 @@
+<template>
+	<div class="beam_day-divider">
+		<h2>{{ date }}</h2>
+	</div>
+
+	<slot></slot>
+</template>
+
+<script setup lang="ts">
+import { defineProps, computed } from 'vue'
+
+import type { ListViewItem } from '@/types'
+
+defineSlots<{ default(): any }>()
+const { item } = defineProps<{ item: ListViewItem }>()
+
+const date = computed(() => {
+	if (!item.date || isNaN(Date.parse(item.date))) {
+		return item.date
+	}
+
+	// if needed, the user can specify a Date format flag that will dictate how the output is formatted,
+	// defaults to toDateString(); using switch/case here in case more values wanted to be added
+	const dateObj = new Date(item.date)
+	if (item.dateFormat) {
+		switch (item.dateFormat.toLowerCase()) {
+			case 'iso':
+				return dateObj.toISOString()
+		}
+	}
+	return dateObj.toDateString()
+})
+</script>
+
+<style scoped>
+.beam_day-divider {
+	text-align: left;
+	padding: 1rem;
+	background: var(--sc-cell-changed-color);
+	border-bottom: 1px solid var(--sc-row-border-color);
+	box-sizing: border-box;
+	margin: 1rem 0;
+
+	& h2 {
+		text-align: left;
+		font-size: 1rem;
+		color: var(--sc-primary-text-color);
+		margin: 0;
+		padding: 0;
+	}
+}
+
+.beam_day-divider:first-of-type {
+	margin-top: 0;
+}
+</style>
diff --git a/beam/src/components/ListView.vue b/beam/src/components/ListView.vue
@@ -1,11 +1,16 @@
 <template>
 	<ul class="beam_list-view">
 		<li v-for="item in items" :key="item.label">
-			<template v-if="item.linkComponent">
+			<template v-if="item.linkComponent == 'BeamDayDivider'">
+				<BeamDayDivider :item="item"></BeamDayDivider>
+			</template>
+
+			<template v-else-if="item.linkComponent">
 				<component :is="item.linkComponent" :to="item.route" tabindex="-1">
 					<ListItem :item="item" @update="handleUpdate"></ListItem>
 				</component>
 			</template>
+
 			<template v-else>
 				<ListItem :item="item" @update="handleUpdate"></ListItem>
 			</template>
@@ -16,6 +21,7 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted } from 'vue'
 
+import BeamDayDivider from '@/components/BeamDayDivider.vue'
 import ListItem from '@/components/ListItem.vue'
 import type { ListViewItem } from '@/types'
 
@@ -45,8 +51,12 @@ const handleScroll = () => {
 	list-style-type: none;
 	margin: var(--sc-list-margin);
 	padding: 0;
-	padding-bottom: 2.5em;
+	/* padding-bottom: 2.5em; */
 	margin-top: 1px;
 	font-family: var(--sc-font-family);
 }
+
+ul.beam_list-view:last-of-type {
+	padding-bottom: 2.5em;
+}
 </style>
diff --git a/beam/src/index.ts b/beam/src/index.ts
@@ -3,6 +3,7 @@ import { App } from 'vue'
 import ActionFooter from '@/components/ActionFooter.vue'
 import BeamArrow from '@/components/BeamArrow.vue'
 import BeamBtn from '@/components/BeamBtn.vue'
+import BeamDayDivider from '@/components/BeamDayDivider.vue'
 import BeamFilter from '@/components/BeamFilter.vue'
 import BeamFilterOption from '@/components/BeamFilterOption.vue'
 import BeamHeading from '@/components/BeamHeading.vue'
@@ -22,6 +23,7 @@ import ScanInput from '@/components/ScanInput.vue'
 import SplitColumn from '@/components/SplitColumn.vue'
 import ToggleArrow from '@/components/ToggleArrow.vue'
 import { useMqttStream } from '@/composables/mqtt'
+export type { ListViewItem } from '@/types'
 import 'themes/beam.css'
 
 /**
@@ -33,6 +35,7 @@ function install(app: App /* options */) {
 	app.component('ActionFooter', ActionFooter)
 	app.component('BeamArrow', BeamArrow)
 	app.component('BeamBtn', BeamBtn)
+	app.component('BeamDayDivider', BeamDayDivider)
 	app.component('BeamFilter', BeamFilter)
 	app.component('BeamFilterOption', BeamFilterOption)
 	app.component('BeamHeading', BeamHeading)
@@ -57,6 +60,7 @@ export {
 	ActionFooter,
 	BeamArrow,
 	BeamBtn,
+	BeamDayDivider,
 	BeamFilter,
 	BeamFilterOption,
 	BeamHeading,

diff --git a/beam/src/types/index.ts b/beam/src/types/index.ts
@@ -1,13 +1,16 @@
 export type ListViewItem = {
 	description: string
 	label: string
+
 	checked?: boolean
-	debounce?: number
-	linkComponent?: string
-	route?: string
 	count?: {
 		count: number
 		of: number
 		uom: string
 	}
+	date?: string
+	dateFormat?: string
+	debounce?: number
+	linkComponent?: string
+	route?: string
 }
diff --git a/beam/themes/beam.css b/beam/themes/beam.css
@@ -20,6 +20,8 @@
 	--sc-btn-label-color: black;
 
 	--sc-list-margin: 0rem 0.625rem;
+
+	--sc-cell-changed-color: #d8edff;
 }
 
 /* body {

diff --git a/common/changes/@stonecrop/beam/feat-beam-listview-day-divider_2024-11-04-16-47.json b/common/changes/@stonecrop/beam/feat-beam-listview-day-divider_2024-11-04-16-47.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/beam",
+      "comment": "added day divider to beam",
+      "type": "none"
+    }
+  ],
+  "packageName": "@stonecrop/beam"
+}
diff --git a/common/reviews/api/beam.api.md b/common/reviews/api/beam.api.md
@@ -8,6 +8,7 @@ import ActionFooter from '@/components/ActionFooter.vue';
 import { App } from 'vue';
 import BeamArrow from '@/components/BeamArrow.vue';
 import BeamBtn from '@/components/BeamBtn.vue';
+import BeamDayDivider from '@/components/BeamDayDivider.vue';
 import BeamFilter from '@/components/BeamFilter.vue';
 import BeamFilterOption from '@/components/BeamFilterOption.vue';
 import BeamHeading from '@/components/BeamHeading.vue';
@@ -22,6 +23,7 @@ import ItemCount from '@/components/ItemCount.vue';
 import ListAnchor from '@/components/ListAnchor.vue';
 import ListItem from '@/components/ListItem.vue';
 import ListView from '@/components/ListView.vue';
+import { ListViewItem } from '@/types';
 import Navbar from '@/components/Navbar.vue';
 import ScanInput from '@/components/ScanInput.vue';
 import SplitColumn from '@/components/SplitColumn.vue';
@@ -34,6 +36,8 @@ export { BeamArrow }
 
 export { BeamBtn }
 
+export { BeamDayDivider }
+
 export { BeamFilter }
 
 export { BeamFilterOption }
@@ -65,6 +69,8 @@ export { ListItem }
 
 export { ListView }
 
+export { ListViewItem }
+
 export { Navbar }
 
 export { ScanInput }

diff --git a/examples/beam/default.story.vue b/examples/beam/default.story.vue
@@ -50,6 +50,24 @@
 			</BeamMetadata>
 		</Variant>
 
+		<Variant title="list with day-divider">
+			<BeamModal @confirmmodal="confirmModal" @closemodal="closeModal" :showModal="showModal">
+				<Confirm @confirmmodal="confirmModal" @closemodal="closeModal" />
+			</BeamModal>
+
+			<Navbar @click="handlePrimaryAction">
+				<template #title>
+					<BeamHeading>Items to Receive</BeamHeading>
+				</template>
+				<template #navbaraction>Done</template>
+			</Navbar>
+
+			<ListView :items="itemsWithDivider" @scrollbottom="loadMoreItems" />
+			<ActionFooter @click="handlePrimaryAction">Done</ActionFooter>
+			<ScanInput :scanHandler="incrementItemCount" />
+			<BeamModalOutlet @confirmmodal="confirmModal" @closemodal="closeModal"></BeamModalOutlet>
+		</Variant>
+
 		<Variant title="toast">
 			<template #controls>
 				<HstText v-model="toastMsg" title="Toast Message" />
@@ -112,6 +130,7 @@
 						]" />
 				</BeamFilter>
 			</FixedTop>
+
 			<ListView :items="items" @scrollbottom="loadMoreItems" />
 			<ActionFooter @click="handlePrimaryAction">Done</ActionFooter>
 			<ScanInput :scanHandler="incrementItemCount" />
@@ -121,13 +140,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import type { ListViewItem } from '@stonecrop/beam'
+import { ref, reactive, computed } from 'vue'
 import { type ToastPosition, useToast } from 'vue-toast-notification'
 import 'vue-toast-notification/dist/theme-default.css'
 
 import data from './data/items.json'
 
-const items = ref(data)
+const items = ref<ListViewItem[]>(data)
+const showModal = ref(false)
 const workOrder = reactive({
 	orderNumber: 'WO#2024-01-00001',
 	product: 'Ambrosia Pie',
@@ -153,11 +174,20 @@ const showNotification = () => {
 }
 // End Toast //
 
-const showModal = ref(false)
-
-const handlePrimaryAction = () => {
-	showModal.value = true
-}
+const itemsWithDivider = computed(() => {
+	const itemsCopy = [...items.value]
+	itemsCopy.splice(3, 0, {
+		date: '2024-11-12T00:00:00.000Z',
+		linkComponent: 'BeamDayDivider',
+		dateFormat: 'default',
+	})
+	itemsCopy.splice(7, 0, {
+		date: '2024-10-18T00:00:00.000Z',
+		linkComponent: 'BeamDayDivider',
+		dateFormat: 'iso',
+	})
+	return itemsCopy
+})
 
 const incrementItemCount = (barcode: string, qty: number) => {
 	// return indices of the matching barcode
@@ -241,4 +271,5 @@ const loadMoreItems = () => {
 
 const confirmModal = () => (showModal.value = false)
 const closeModal = () => (showModal.value = false)
+const handlePrimaryAction = () => (showModal.value = true)
 </script>