Woodshop
Search…
How to's
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
/models/books.js
1
module.exports = (sequelize, DataTypes) => {
2
const { Sequelize } = sequelize;
3
​
4
const Books = sequelize.define('books', {
5
attributes: {
6
type: DataTypes.JSONB,
7
},
8
}, {
9
tableName: 'books',
10
timestamps: false,
11
schema: process.env.DATABASE_SCHEMA,
12
});
13
​
14
Books.associate = (models) => {
15
Books.belongsTo(models.authors, {
16
foreignKey: {
17
name: 'authorIdKey',
18
field: 'authorId',
19
},
20
as: 'author',
21
});
22
};
23
​
24
return Books;
25
};
Copied!
/models/authors.js
1
module.exports = (sequelize, DataTypes) => {
2
const { Sequelize } = sequelize;
3
​
4
const Authors = sequelize.define('authors', {
5
name: {
6
type: DataTypes.STRING,
7
},
8
}, {
9
tableName: 'authors',
10
timestamps: false,
11
schema: process.env.DATABASE_SCHEMA,
12
});
13
​
14
return Authors;
15
};
Copied!
File: template.hbs
This file contains handlebars and HTML declaration.
1
template.hbs
2
​
3
<style>
4
.l-gallery-view-container {
5
flex-grow: 1;
6
width: 100%;
7
height: 100%;
8
overflow: hidden;
9
position: relative;
10
}
11
​
12
.c-gallery {
13
padding: 15px;
14
overflow-y: auto;
15
width: 100%;
16
position: absolute;
17
left: 0;
18
top: 0;
19
bottom: 40px;
20
display: flex;
21
flex-direction: row;
22
flex-wrap: wrap;
23
}
24
​
25
.c-gallery__image {
26
height: 197px;
27
width: 138px;
28
margin: 10px;
29
border: 1px solid var(--color-beta-on-surface_border);
30
border-radius: 2px;
31
transition: all .3s ease-out;
32
}
33
​
34
.c-gallery__image:hover {
35
transform: scale(1.05);
36
}
37
​
38
.l-gallery-book-container {
39
position: relative;
40
}
41
​
42
.c-gallery__author {
43
position: absolute;
44
left: 0;
45
right: 0;
46
bottom: 8px;
47
padding: 2px 4px;
48
border-radius: 2px;
49
background-color: var(--color-beta-surface);
50
text-align: center;
51
align-items: center;
52
}
53
</style>
54
​
55
<div class="l-gallery-view-container">
56
<section class="c-gallery">
57
{{#each @records as |record|}}
58
<div class="l-gallery-book-container">
59
<!-- redirect to book detail view -->
60
<LinkTo
61
@route="rendering.data.collection.list.viewEdit.details"
62
@models={{array @collection.id record.id}}
63
class="c-gallery__image-container"
64
>
65
<img class="c-gallery__image" src={{record.forest-attributes.picture}}>
66
</LinkTo>
67
68
<!-- redirect to author detail view -->
69
<BetaLinkTo
70
@type="primary"
71
@size="normal"
72
@underline={{false}}
73
@text={{record.forest-author.forest-name}}
74
@routeName="rendering.data.collection.list.viewEdit.details"
75
@routeParameters={{array this.authorCollectionId record.forest-author.id}}
76
@class="c-gallery__author"
77
/>
78
</div>
79
{{/each}}
80
</section>
81
82
<Table::TableFooter
83
@collection={{@collection}}
84
@viewList={{@viewList}}
85
@records={{@records}}
86
@currentPage={{@currentPage}}
87
@numberOfPages={{@numberOfPages}}
88
@recordsCount={{@recordsCount}}
89
@isLoading={{@isLoading}}
90
@fetchRecords={{@fetchRecords}}
91
/>
92
</div>
Copied!
File: javascript.js
This file handle all events or actions
1
component.js
2
​
3
import Component from '@ember/component';
4
import { computed } from '@ember/object';
5
import SmartViewMixin from 'client/mixins/smart-view-mixin';
6
​
7
export default Component.extend(SmartViewMixin, {
8
tagName: '',
9
​
10
authorCollectionId: computed(function () {
11
return this.getCollectionId('authors');
12
}),
13
});
Copied!
Last modified 1yr ago