Created
July 24, 2019 19:32
-
-
Save habdelra/967f190a577ec327ffba410e0a02eaf3 to your computer and use it in GitHub Desktop.
Card Implements Example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
data: { | |
type: 'cards' | |
id: '@acme/ticket-tools::ticket-card:123', | |
attributes: { | |
'edit-template': ` | |
{{delegate-to content.event}} {{!-- framework decides the format to use, appears as embedded until a user clicks on it, for example --}} | |
{{delegate-to content.price}} | |
`, | |
'isolated-template': ` | |
Event: {{cardstack-content content.event}} | |
Attendee: {{content.user.name}} | |
Start time: {{moment-format content.time 'MM/DD/YYYY hh:mm A'}} {{!-- we can access adopted cards metadata the same as our own --}} | |
Price: {{content.price}} | |
Purchased date: {{moment-format content.purchaseDate 'MM/DD/YYYY'}} | |
`, | |
'embedded-template': ` | |
Event name: {{content.eventName}} | |
Start time: {{moment-format content.eventTime 'MM/DD/YYYY hh:mm A'}} | |
Price: {{content.price}} | |
`, | |
'isolated-js': ` | |
import Component from '@glimmer/component'; | |
import moment from 'moment'; | |
export default class TicketIsolatedComponent extends Component { ... } | |
`, | |
// Maybe this actually comes from the base-card | |
'embedded-js': ` | |
import Component from '@glimmer/component'; | |
export default class TicketEmbeddedComponent extends Component { ... } | |
`, | |
'embedded-css': '', | |
'edit-css': '', | |
'isolated-css': '', | |
'dependencies': [ | |
'moment': '^2.24.0' | |
], | |
// Maybe this actually comes from the base-card | |
'peer-dependencies': [ | |
'@glimmer/component': '*' | |
], | |
// intentionally not including dev-dependencies, I dont think the hub actually cares about those... | |
}, | |
relationships: { | |
fields: [ | |
{ data: { type: 'fields', id: '@acme/ticket-tools::ticket-card::price' } }, | |
{ data: { type: 'fields', id: '@acme/ticket-tools::ticket-card::purchase-date' } }, | |
{ data: { type: 'fields', id: '@acme/ticket-tools::ticket-card::attendee' } }, | |
{ data: { type: 'fields', id: '@acme/ticket-tools::ticket-card::event' } }, | |
], | |
// a card always implements it's own interface, so it's implemeting its own ticket card | |
// interface as well as implementing the interfaces below. the implements definitions | |
// below allow the ticket card to be able to act as a user card and as an event card | |
implements: [{ | |
data: { | |
type: 'cards', | |
id: '@cardstack/core-types::user-card::0::v1.0.0', // unclear about the card ID here... | |
meta: { | |
// here we provide mappings from our card's metadata fields to the user interface's fields. | |
// in this case the mapping is traversing the ticket card's attenee relationship, for which | |
// the attenee is a metadata field, and the fields specified from the attendee card are the | |
// attenee's metadata fields | |
'metadata-mappings': { | |
id: 'attendee.id', | |
username: 'attentee.username', | |
name: 'attendee.name', | |
email: 'attendee.email' | |
} | |
} | |
} | |
},{ | |
data: { | |
type: 'cards', | |
id: '@cardstack/core-types::event-card::0::v1.0.0', // unclear about the card ID here... | |
meta: { | |
// here we provide mappings from our card's metadata fields to the user interface's fields. | |
// in this case the mapping is traversing the ticket card's event relationship, for which | |
// the event is a metadata field, and the fields specified from the event card are the | |
// event's metadata fields | |
'metadata-mappings': { | |
name: 'event.name', | |
address: 'event.address', | |
'date-time': 'event.date-time' | |
} | |
} | |
} | |
}], | |
model: { | |
data: { type: '@acme/ticket-tools::ticket-cards', id: '@acme/ticket-tools::ticket-card::123' }, // note the model id matches the card id | |
} | |
} | |
}, | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment