Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cs 7691 add event card #2041

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
+269 −24
Open

Cs 7691 add event card #2041

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
cf5b0ea
remove stale document code and field
lucaslyl Jan 14, 2025
25cdf0e
create deal-event card extends from event & enhance isolated and atom…
lucaslyl Jan 14, 2025
01b1a8a
create deal event instances
lucaslyl Jan 14, 2025
a1be0f2
add event field & udpate instances
lucaslyl Jan 14, 2025
893e6e7
fix lint
lucaslyl Jan 14, 2025
efa8a2a
fix lint
lucaslyl Jan 14, 2025
8acd873
fix lint
lucaslyl Jan 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions packages/experiments-realm/Deal/4fdd3053-14f1-4800-827f-d3e2a5c44ae8.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,22 +80,22 @@
"relationships": {
"account": {
"links": {
"self": "../Account/bf437dc3-1f96-45e5-a057-3487c6a5c2f7"
"self": null
}
},
"document": {
"event": {
"links": {
"self": "../Document/2b0f357f-89da-4b34-a0b9-866956389d79"
"self": "../DealEvent/60cf6fcf-10ec-4d04-b6a8-e409679ccc0a"
}
},
"primaryStakeholder": {
"links": {
"self": null
"self": "../Lead/9d7b2f20-c7da-4ddc-8e77-b75d88c97b48"
}
},
"stakeholders.0": {
"stakeholders": {
"links": {
"self": "../Customer/0e5aec99-798b-4417-9426-a338432e0ee5"
"self": null
}
}
},
Expand Down
5 changes: 0 additions & 5 deletions packages/experiments-realm/Deal/50b65110-8335-4391-84ec-28cc9c0f22b3.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,11 +46,6 @@
"self": null
}
},
"document": {
"links": {
"self": null
}
},
"primaryStakeholder": {
"links": {
"self": null
Expand Down
5 changes: 0 additions & 5 deletions packages/experiments-realm/Deal/f0d769bd-e347-4203-9a96-89332cfba0e2.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,11 +46,6 @@
"self": null
}
},
"document": {
"links": {
"self": null
}
},
"primaryStakeholder": {
"links": {
"self": null
Expand Down
28 changes: 28 additions & 0 deletions packages/experiments-realm/DealEvent/60cf6fcf-10ec-4d04-b6a8-e409679ccc0a.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
{
"data": {
"type": "card",
"attributes": {
"attendees": 1200,
"subject": null,
"location": "SF Convention Center",
"startDateTime": "2025-01-16T04:40:00.000Z",
"endDateTime": null,
"eventType": "Meeting",
"description": null,
"thumbnailURL": null
},
"relationships": {
"assignee": {
"links": {
"self": null
}
}
},
"meta": {
"adoptsFrom": {
"module": "../crm/deal-event",
"name": "DealEvent"
}
}
}
}
233 changes: 233 additions & 0 deletions packages/experiments-realm/crm/deal-event.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,233 @@
import { contains, field } from 'https://cardstack.com/base/card-api';
import { Event } from '../event';
import { Component } from 'https://cardstack.com/base/card-api';
import StringField from 'https://cardstack.com/base/string';
import NumberField from 'https://cardstack.com/base/number';
import { FieldContainer, BoxelSelect } from '@cardstack/boxel-ui/components';
import CalendarPlus from '@cardstack/boxel-icons/calendar-plus';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
import Info from '@cardstack/boxel-icons/info';
import EntityDisplayWithIcon from '../components/entity-icon-display';

class IsolatedTemplate extends Component<typeof DealEvent> {
<template>
<div class='deal-event-summary'>
<FieldContainer @label='Subject'>
<@fields.subject />
</FieldContainer>
<FieldContainer @label='Location'>
<@fields.location />
</FieldContainer>
<FieldContainer @label='Start'>
<div class='inner-row'>
<@fields.startDateTime />
</div>
</FieldContainer>
<FieldContainer @label='End'>
<div class='inner-row'>
<@fields.endDateTime />
</div>
</FieldContainer>
<FieldContainer @label='Event Date'>
<@fields.eventDate />
</FieldContainer>
<FieldContainer @label='Event type'>
<@fields.eventType />
</FieldContainer>
<FieldContainer @label='Description'>
<@fields.description />
</FieldContainer>
<FieldContainer @label='Title'>
<@fields.title />
</FieldContainer>
<FieldContainer @label='Assigned to'>
<@fields.assignee />
</FieldContainer>
<FieldContainer @label='Attendees'>
<@fields.attendees />
</FieldContainer>
</div>
<style scoped>
.deal-event-summary {
display: flex;
flex-direction: column;
gap: var(--boxel-sp);
padding: var(--boxel-sp-lg);
}
</style>
</template>
}

class AtomTemplate extends Component<typeof DealEvent> {
<template>
<div class='event-summary'>
{{#if @model.eventDate}}
<EntityDisplayWithIcon>
<:icon>
<Info width='16px' height='16px' class='event-info-icon' />
</:icon>
<:title><label>Event Date</label></:title>
<:content>
<span class='event-item-value'><@fields.eventDate /></span>
</:content>
</EntityDisplayWithIcon>
{{/if}}

{{#if @model.attendees}}
<EntityDisplayWithIcon>
<:title><label>Attendees</label></:title>
<:content>
<span class='event-item-value'><@fields.attendees /></span>
</:content>
</EntityDisplayWithIcon>
{{/if}}

{{#if @model.location}}
<EntityDisplayWithIcon>
<:title><label>Venue</label></:title>
<:content>
<span class='event-item-value'><@fields.location /></span>
</:content>
</EntityDisplayWithIcon>
{{/if}}
</div>
<style scoped>
.event-summary {
display: inline-flex;
flex-wrap: wrap;
gap: var(--boxel-sp-xl);
padding: var(--boxel-sp);
background-color: var(--boxel-200);
border-radius: var(--boxel-form-control-border-radius);
}
label {
font-size: var(--boxel-font-size-xs);
font-weight: 600;
color: #777;
}
.event-item-value {
font-size: var(--boxel-font-size);
font-weight: 600;
color: var(--boxel-dark);
}
</style>
</template>
}

class EditTemplate extends Component<typeof DealEvent> {
@tracked selectedEventType = { name: this.args.model.eventType };
@tracked eventTypeItems = [
{ name: 'Email' },
{ name: 'Meeting' },
{ name: 'Call' },
{ name: 'Other' },
{ name: 'None' },
];

@action updateEventType(type: { name: string }) {
this.selectedEventType = type;
this.args.model.eventType = type.name;
}

<template>
<div class='deal-event-form'>
<FieldContainer @label='Subject'>
<@fields.subject />
</FieldContainer>
<FieldContainer @label='Location'>
<@fields.location />
</FieldContainer>
<FieldContainer @label='Start'>
<@fields.startDateTime />
</FieldContainer>
<FieldContainer @label='End'>
<@fields.endDateTime />
</FieldContainer>
<FieldContainer @label='Event Date'>
<@fields.eventDate />
</FieldContainer>
<FieldContainer @label='Event type'>
<BoxelSelect
@placeholder={{'Select Item'}}
@selected={{this.selectedEventType}}
@onChange={{this.updateEventType}}
@options={{this.eventTypeItems}}
@dropdownClass='boxel-select-usage'
class='select'
as |item|
>
<div>{{item.name}}</div>
</BoxelSelect>
</FieldContainer>
<FieldContainer @label='Description'>
<@fields.description />
</FieldContainer>
<FieldContainer @label='Title'>
<@fields.title />
</FieldContainer>
<FieldContainer @label='Attendees'>
<@fields.attendees />
</FieldContainer>
<FieldContainer @label='Assigned to'>
<@fields.assignee />
</FieldContainer>
</div>

<style scoped>
.deal-event-form {
display: flex;
flex-direction: column;
gap: var(--boxel-sp);
padding: var(--boxel-sp-lg);
}
.select {
text-align: left;
height: var(--boxel-form-control-height);
border-radius: var(--boxel-form-control-border-radius);
transition: border-color var(--boxel-transition);
border: 1px solid var(--boxel-form-control-border-color);
padding: var(--boxel-sp-xs) 0 var(--boxel-sp-xs) 0;
background-color: white;
display: flex;
flex-direction: row;
align-items: center;
}
</style>
</template>
}

// @ts-ignore
export class DealEvent extends Event {
static displayName = 'Deal Event';
static icon = CalendarPlus;

@field attendees = contains(NumberField);

@field title = contains(StringField, {
computeVia(this: DealEvent) {
if (!this.eventType || !this.location || !this.startDateTime) {
return '';
}
return `${this.eventType} at ${this.location} (${this.startDateTime})`;
},
});

@field eventDate = contains(StringField, {
computeVia(this: DealEvent) {
if (!this.startDateTime) {
return '';
}
const date = new Date(this.startDateTime);
return date.toLocaleDateString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric',
});
},
});

static isolated = IsolatedTemplate;
static atom = AtomTemplate;
static edit = EditTemplate;
}
10 changes: 2 additions & 8 deletions packages/experiments-realm/crm/deal.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,12 @@ import FilePen from '@cardstack/boxel-icons/file-pen';
import ArrowLeftRight from '@cardstack/boxel-icons/arrow-left-right';
import Award from '@cardstack/boxel-icons/award';
import AwardOff from '@cardstack/boxel-icons/award-off';
import { Document } from './document';
import { AmountWithCurrency as AmountWithCurrencyField } from '../fields/amount-with-currency';
import BooleanField from 'https://cardstack.com/base/boolean';
import { getCards } from '@cardstack/runtime-common';
import { Query } from '@cardstack/runtime-common/query';
import { Company } from './company';
import { DealEvent } from './deal-event';

interface DealSizeSummary {
summary: string;
Expand Down Expand Up @@ -478,12 +478,6 @@ class IsolatedTemplate extends Component<typeof Deal> {
gap: var(--boxel-sp-sm);
font-weight: 600;
}
.view-document-btn {
font-weight: 600;
padding: 2px 5px;
min-width: 0px;
min-height: 0px;
}
@container (max-width: 447px) {
.progress-container {
flex-direction: column-reverse;
Expand Down Expand Up @@ -1013,8 +1007,8 @@ export class Deal extends CardDef {
},
});
@field healthScore = contains(PercentageField);
@field event = linksTo(() => DealEvent);
@field notes = contains(MarkdownField);
@field document = linksTo(() => Document);
@field primaryStakeholder = linksTo(() => Contact);
@field stakeholders = linksToMany(() => Contact);
@field valueBreakdown = containsMany(ValueLineItem);
Expand Down
Loading