frontend-web/src/views/LogsList.vue

<template>
	<div>
		<h1>Logs List</h1>
		<n-table :bordered="false" :single-line="true">
			<thead>
				<th>Photo Log Title</th>
				<th>Date created</th>
				<th>delete</th>
			</thead>
			<tbody>
				<tr v-for="photolog in photoLogList" :key="photolog.id">
					<td>{{ photolog.title }}</td>
					<td>{{ photolog.date }}</td>
					<td>
						<n-button type="error" @click="askDeleteLog(photolog.id)">Delete</n-button>
					</td>
				</tr>
			</tbody>
		</n-table>

		<n-modal
			v-model:show="showDeleteModal"
			:mask-closable="true"
			preset="dialog"
			type="warning"
			title="Delete Log"
			:content=deleteModalContent
			positive-text="Cancel"
			negative-text="Delete"
			@negative-click="deleteLog"
		/>
	</div>
</template>

<script>
import { useMeta } from 'vue-meta'

export default {
	name: 'LogsList',
	setup() {
		useMeta({ title: 'All Photo Logs' })
	},
	data() {
		return { 
			showDeleteModal: false,
			deleteId: null,
			deleteModalContent: '',
		}
	},
	mounted() {
		this.$store.dispatch('loadPhotoLogList')
	},
	computed: {
		photoLogList() {
			let list = this.$store.state.photoLogList
			if (list !== null) {
				list.sort((a,b) => {
					return a.date < b.date ? 1 : -1
				})
				return list
			}
			return null
		}
	},
	methods: { 
		askDeleteLog(logId) {
			this.showDeleteModal = true
			this.deleteId = logId
			let logtitle = this.photoLogList.filter((o) => {
				return o.id == logId
			})[0].title
			this.deleteModalContent = 'Do you want to permanently delete "' + logtitle + '"?'
		},
		deleteLog() {
			console.log('delete ' + this.deleteId)
		}
	}
}
</script>