Adds placeholder and smaller icons to relationship auto-complete. Adds placeholder image when thumbnail not available in relationship autocomplete.

This commit is contained in:
Mateus Machado Luna 2018-07-05 11:15:17 -03:00
parent dca744ef0c
commit a8eb5c1e31
3 changed files with 11 additions and 3 deletions

View File

@ -346,6 +346,7 @@ return apply_filters( 'tainacan-admin-i18n', [
'info_updated_at' => __( 'Updated at', 'tainacan' ), 'info_updated_at' => __( 'Updated at', 'tainacan' ),
'info_editing_metadata_values' => __( 'Editing metadata values...', 'tainacan' ), 'info_editing_metadata_values' => __( 'Editing metadata values...', 'tainacan' ),
'info_updating_metadata_values' => __( 'Updating metadata values...', 'tainacan' ), 'info_updating_metadata_values' => __( 'Updating metadata values...', 'tainacan' ),
'info_type_to_search' => __( 'Type to search...', 'tainacan' ),
// Tainacan Metadatum Types // Tainacan Metadatum Types
'tainacan-text' => __( 'Text', 'tainacan' ), 'tainacan-text' => __( 'Text', 'tainacan' ),

View File

@ -6,17 +6,19 @@
:id="id" :id="id"
v-model="selected" v-model="selected"
:data="options" :data="options"
expanded
@input="search" @input="search"
:loading="isLoading" :loading="isLoading"
field="label" field="label"
@select="option => setResults(option) "> @select="option => setResults(option) "
:placeholder="$i18n.get('info_type_to_search')">
<template slot-scope="props"> <template slot-scope="props">
<div class="media"> <div class="media">
<div <div
class="media-left" class="media-left"
v-if="props.option.img"> v-if="props.option.img">
<img <img
width="32" width="24"
:src="`${props.option.img}`"> :src="`${props.option.img}`">
</div> </div>
<div class="media-content"> <div class="media-content">

View File

@ -1,6 +1,11 @@
import { tainacan as axios } from '../../js/axios/axios'; import { tainacan as axios } from '../../js/axios/axios';
export const filter_type_mixin = { export const filter_type_mixin = {
data () {
return {
thumbPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_square.png'
}
},
props: { props: {
filter: { filter: {
type: Object // concentrate all attributes metadatum id and type type: Object // concentrate all attributes metadatum id and type
@ -51,7 +56,7 @@ export const filter_type_mixin = {
.then(res => { .then(res => {
if (res.data.length > 0) { if (res.data.length > 0) {
for (let item of res.data) { for (let item of res.data) {
this.options.push({label: item.title, value: item.id, img: item.thumbnail.thumb }); this.options.push({label: item.title, value: item.id, img: ( item.thumbnail.thumb ? item.thumbnail.thumb : this.thumbPlaceholderPath ) });
} }
} }
}) })