Differential D3544 Diff 10168 src/resources/vue/Widgets/ListTools.vue

Changeset View

Standalone View

src/resources/vue/Widgets/ListTools.vue

	<template>			<template>
	<div></div>			<div></div>
	</template>			</template>

	<script>			<script>

	const ListSearch = {			export const ListSearch = {
	props: {			props: {
	onSearch: { type: Function, default: () => {} },			onSearch: { type: Function, default: () => {} },
	placeholder: { type: String, default: '' }			placeholder: { type: String, default: '' }
	},			},
	data() {			data() {
	return {			return {
	search: ''			search: ''
	}			}
	},			},
	template: `<form @submit.prevent="onSearch(search)" id="search-form" class="input-group" style="flex:1">			template: `<form @submit.prevent="onSearch(search)" id="search-form" class="input-group" style="flex:1">
	<input class="form-control" type="text" :placeholder="placeholder" v-model="search">			<input class="form-control" type="text" :placeholder="placeholder" v-model="search">
	<button type="submit" class="btn btn-primary"><svg-icon icon="magnifying-glass"></svg-icon> {{ $t('btn.search') }}</button>			<button type="submit" class="btn btn-primary"><svg-icon icon="magnifying-glass"></svg-icon> {{ $t('btn.search') }}</button>
	</form>`			</form>`
	}			}

	const ListFoot = {			export const ListFoot = {
	props: {			props: {
	colspan: { type: Number, default: 1 },			colspan: { type: Number, default: 1 },
	text: { type: String, default: '' }			text: { type: String, default: '' }
	},			},
	template: `<tfoot class="table-fake-body"><tr><td :colspan="colspan">{{ text }}</td></tr></tfoot>`			template: `<tfoot class="table-fake-body"><tr><td :colspan="colspan">{{ text }}</td></tr></tfoot>`
	}			}

	const ListMore = {			export const ListMore = {
	props: {			props: {
	onClick: { type: Function, default: () => {} }			onClick: { type: Function, default: () => {} }
	},			},
	template: `<div class="text-center p-3 more-loader">			template: `<div class="text-center p-3 more-loader">
	<button class="btn btn-secondary" @click="onClick({})">{{ $t('nav.more') }}</button>			<button class="btn btn-secondary" @click="onClick({})">{{ $t('nav.more') }}</button>
	</div>`			</div>`
	}			}

				export const ListTable = {
				components: {
				ListFoot
				},
				props: {
				current: { type: Object, default: () => null },
				list: { type: Array, default: () => [] },
				setup: { type: Object, default: () => {} },
				},
				methods: {
				label(label) {
				let l = `${this.setup.prefix \|\| this.setup.model}${label}`
				return this.$te(l) ? l : `form${label}`
				},
				url(item) {
				return `/${this.setup.model}/${item.id}`
				}
				},
				template:
				`<table class="table table-sm table-hover">
				<thead>
				<tr>
				<th v-for="col in setup.cols" scope="col">{{ $t(col.label \|\| label('.' + col.prop)) }}</th>
				</tr>
				</thead>
				<tbody>
				<tr v-for="item in list" :key="item.id" @click="$root.clickRecord">
				<td v-for="col in setup.cols" :key="col.prop + item.id">
				<svg-icon v-if="col.icon" :icon="col.icon" :class="$root.statusClass(item)" :title="$root.statusText(item)"></svg-icon>
				<span v-if="col.contentLabel" >{{ $t(col.contentLabel(item)) }}</span>
				<router-link v-else-if="!current \|\| current.id != item.id" :to="url(item)">{{ item[col.prop] }}</router-link>
				<span v-else>{{ item[col.prop] }}</span>
				</td>
				</tr>
				</tbody>
				<list-foot :text="$t(label('.list-empty'))" :colspan="setup.cols.length"></list-foot>
				</table>`
				}

	export default {			export default {
	components: {			components: {
	ListFoot,			ListFoot,
	ListMore,			ListMore,
	ListSearch			ListSearch,
				ListTable
	},			},
	data() {			data() {
	return {			return {
	currentSearch: '',			currentSearch: '',
	hasMore: false,			hasMore: false,
	page: 1			page: 1
	}			}
	},			},
	▲ Show 20 Lines • Show All 47 Lines • Show Last 20 Lines