Card Implements Example

gistfile1.txt

{
  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
      }
    }
  },
}