Link to record info in a smart view

This example shows you how to redirect to:

  • the detail view of a record

  • the detail view of the associated record

in a smart view.

Here a Book belongsTo an Author. We will see how to redirect to the book detail view and author detail view from a book gallery view.

Requirements

  • An admin backend running on forest-express-sequelize

How it works

Directory: /models

This directory contains the books.js and authors.js files where the models are defined.

books.js
authors.js
books.js
/models/books.js
module.exports = (sequelize, DataTypes) => {
const { Sequelize } = sequelize;
const Books = sequelize.define('books', {
attributes: {
type: DataTypes.JSONB,
},
}, {
tableName: 'books',
timestamps: false,
schema: process.env.DATABASE_SCHEMA,
});
Books.associate = (models) => {
Books.belongsTo(models.authors, {
foreignKey: {
name: 'authorIdKey',
field: 'authorId',
},
as: 'author',
});
};
return Books;
};
authors.js
/models/authors.js
module.exports = (sequelize, DataTypes) => {
const { Sequelize } = sequelize;
const Authors = sequelize.define('authors', {
name: {
type: DataTypes.STRING,
},
}, {
tableName: 'authors',
timestamps: false,
schema: process.env.DATABASE_SCHEMA,
});
return Authors;
};

File: template.hbs

This file contains handlebars and HTML declaration.

template.hbs
<style>
.l-gallery-view-container {
flex-grow: 1;
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.c-gallery {
padding: 15px;
overflow-y: auto;
width: 100%;
position: absolute;
left: 0;
top: 0;
bottom: 40px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.c-gallery__image {
height: 197px;
width: 138px;
margin: 10px;
border: 1px solid var(--color-beta-on-surface_border);
border-radius: 2px;
transition: all .3s ease-out;
}
.c-gallery__image:hover {
transform: scale(1.05);
}
.l-gallery-book-container {
position: relative;
}
.c-gallery__author {
position: absolute;
left: 0;
right: 0;
bottom: 8px;
padding: 2px 4px;
border-radius: 2px;
background-color: var(--color-beta-surface);
text-align: center;
align-items: center;
}
</style>
<div class="l-gallery-view-container">
<section class="c-gallery">
{{#each @records as |record|}}
<div class="l-gallery-book-container">
<!-- redirect to book detail view -->
<LinkTo
@route="rendering.data.collection.list.viewEdit.details"
@models={{array @collection.id record.id}}
class="c-gallery__image-container"
>
<img class="c-gallery__image" src={{record.forest-attributes.picture}}>
</LinkTo>
<!-- redirect to author detail view -->
<BetaLinkTo
@type="primary"
@size="normal"
@underline={{false}}
@text={{record.forest-author.forest-name}}
@routeName="rendering.data.collection.list.viewEdit.details"
@routeParameters={{array this.authorCollectionId record.forest-author.id}}
@class="c-gallery__author"
/>
</div>
{{/each}}
</section>
<Table::TableFooter
@collection={{@collection}}
@viewList={{@viewList}}
@records={{@records}}
@currentPage={{@currentPage}}
@numberOfPages={{@numberOfPages}}
@recordsCount={{@recordsCount}}
@isLoading={{@isLoading}}
@fetchRecords={{@fetchRecords}}
/>
</div>

File: javascript.js

This file handle all events or actions

component.js
import Component from '@ember/component';
import { computed } from '@ember/object';
import SmartViewMixin from 'client/mixins/smart-view-mixin';
export default Component.extend(SmartViewMixin, {
tagName: '',
authorCollectionId: computed(function () {
return this.getCollectionId('authors');
}),
});