Start to implement payment module

package.json

@@ -21,7 +21,9 @@
 		"@nextcloud/router": "^2.1.2",
 		"@nextcloud/vue": "^7.12.1",
 		"vue": "^2.7.14",
+		"vue-frag": "^1.4.3",
 		"vue-router": "^3.6.5",
+		"vue-virtual-scroller": "^1.1.2",
 		"vuex": "^3.6.2"
 	},
 	"devDependencies": {

src/components/LeftSidebar.vue

@@ -5,19 +5,34 @@
 				:title="t('my_company', 'Home')"
 				icon="icon-home"
 				:exact="true" />
+			<NcAppNavigationItem :to="{name: 'payments'}"
+				:title="t('my_company', 'Payments')"
+				:exact="true">
+				<NcIconSvgWrapper slot="icon" :svg="iconPaymentsRaw" />
+			</NcAppNavigationItem>
 		</template>
 	</NcAppNavigation>
 </template>
 
 <script>
 import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
 import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+
+// eslint-disable-next-line import/no-unresolved
+import iconPaymentsRaw from '../../img/payments.svg?raw'
 
 export default {
 	name: 'LeftSidebar',
 	components: {
 		NcAppNavigation,
 		NcAppNavigationItem,
+		NcIconSvgWrapper,
+	},
+	data() {
+		return {
+			iconPaymentsRaw,
+		}
 	},
 }
 </script>

src/router/router.js

@@ -4,6 +4,7 @@ import VueRouter from 'vue-router'
 import { generateUrl } from '@nextcloud/router'
 
 import Home from '../views/Home.vue'
+import PaymentsList from '../views/Payments/PaymentsList.vue'
 
 Vue.use(VueRouter)
 
@@ -18,5 +19,10 @@ export default new VueRouter({
 			component: Home,
 			name: 'home',
 		},
+		{
+			path: '/payments',
+			component: PaymentsList,
+			name: 'payments',
+		},
 	],
 })

src/views/Payments/PaymentListRow.vue

@@ -0,0 +1,36 @@
+<template>
+	<Fragment :data-index="index">
+		<td>
+			<span>{{ item.uuid }}</span>
+		</td>
+		<td>
+			<span>{{ item.value }}</span>
+		</td>
+		<td>
+			<span>{{ item.date }}</span>
+		</td>
+	</Fragment>
+</template>
+
+<script>
+import { Fragment } from 'vue-frag'
+
+export default {
+	name: 'PaymentListRow',
+
+	components: {
+		Fragment,
+	},
+
+	props: {
+		item: {
+			type: Object,
+			required: true,
+		},
+		index: {
+			type: Number,
+			required: true,
+		},
+	},
+}
+</script>

src/views/Payments/PaymentsList.vue

@@ -0,0 +1,91 @@
+<template>
+	<Fragment>
+		<NcEmptyContent v-if="list.length === 0"
+			:title="t('my_company', 'No payments')">
+			<template #icon>
+				<NcIconSvgWrapper :svg="iconPaymentsRaw" />
+			</template>
+		</NcEmptyContent>
+		<RecycleScroller v-else
+			class="scroller"
+			:items="list"
+			key-field="uuid"
+			list-tag="tbody"
+			role="table">
+			<template #before>
+				<PaymentsListHeader />
+			</template>
+			<template #default="{ item, index }">
+				<PaymentListRow :item="item"
+					:index="index" />
+			</template>
+		</RecycleScroller>
+	</Fragment>
+</template>
+
+<script>
+import { Fragment } from 'vue-frag'
+import { RecycleScroller } from 'vue-virtual-scroller'
+
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+
+import PaymentListRow from './PaymentListRow.vue'
+import PaymentsListHeader from './PaymentsListHeader.vue'
+
+// eslint-disable-next-line import/no-unresolved
+import iconPaymentsRaw from '../../../img/payments.svg?raw'
+
+export default {
+	name: 'PaymentsList',
+	components: {
+		Fragment,
+		RecycleScroller,
+		NcEmptyContent,
+		NcIconSvgWrapper,
+		PaymentsListHeader,
+		PaymentListRow,
+	},
+	props: {
+		list: {
+			type: Array,
+			default: () => [
+				{
+					uuid: 'cb91cea7-5ce3-45c3-8879-fdd96b86006a',
+					value: 2000.00,
+					date: '2023-03-30',
+				},
+				{
+					uuid: 'cb91cea7-5ce3-45c3-8879-fdd96b86006a',
+					value: 1000.00,
+					date: '2023-01-30',
+				},
+			],
+		},
+	},
+	data() {
+		return {
+			iconPaymentsRaw,
+		}
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.scroller {
+	height: 100%;
+}
+.empty {
+	:deep {
+		.icon-vue {
+			width: 64px;
+			height: 64px;
+
+			svg {
+				max-width: 64px;
+				max-height: 64px;
+			}
+		}
+	}
+}
+</style>

src/views/Payments/PaymentsListHeader.vue

@@ -0,0 +1,21 @@
+<template>
+	<tr>
+		<th scope="col">
+			<span class="hidden-visually">
+				{{ t('my_company', 'File') }}
+			</span>
+		</th>
+		<th scope="col">
+			<span>{{ t('my_company', 'Date') }}</span>
+		</th>
+		<th scope="col">
+			<span>{{ t('my_company', 'Value') }}</span>
+		</th>
+	</tr>
+</template>
+
+<script>
+export default {
+	name: 'PaymentsListHeader',
+}
+</script>