Merge pull request #2893 from opral/nilsjacobsen/inlmc-99-create-mess…

…age-via-message-component feat: add message when first pattern added to a language
opral · Jun 6, 2024 · 4eea76a · 4eea76a
2 parents d40bb95 + 4ae16b3
commit 4eea76a
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 26 deletions.
diff --git a/inlang/source-code/message-bundle-component/src/stories/inlang-message-bundle.ts b/inlang/source-code/message-bundle-component/src/stories/inlang-message-bundle.ts
@@ -48,6 +48,13 @@ export default class InlangMessageBundle extends LitElement {
 		}
 	}
 
+	_addMessage = (message: Message) => {
+		if (this.messageBundle) {
+			this.messageBundle.messages.push(message)
+			this.requestUpdate()
+		}
+	}
+
 	override async firstUpdated() {
 		await this.updateComplete
 		// override primitive colors to match the design system
@@ -146,13 +153,17 @@ export default class InlangMessageBundle extends LitElement {
 											.message=${message}
 											.inputs=${this._fakeInputs()}
 											.triggerSave=${this._triggerSave}
+											.addMessage=${this._addMessage}
+											.languageTag=${languageTag}
 											.lintReports=${messageLintReports}
 										></inlang-variant>`
 							  )
 							: html`<inlang-variant
 									.message=${message}
 									.inputs=${this._fakeInputs()}
 									.triggerSave=${this._triggerSave}
+									.addMessage=${this._addMessage}
+									.languageTag=${languageTag}
 									.lintReports=${messageLintReports}
 							  ></inlang-variant>`}
 					</div>

diff --git a/inlang/source-code/message-bundle-component/src/stories/inlang-variant.ts b/inlang/source-code/message-bundle-component/src/stories/inlang-variant.ts
@@ -1,4 +1,4 @@
-import type { Variant, Message } from "@inlang/sdk/v2"
+import { type Variant, type Message, createMessage, type LanguageTag } from "@inlang/sdk/v2"
 import { LitElement, css, html } from "lit"
 import { customElement, property, state } from "lit/decorators.js"
 import upsertVariant from "../helper/crud/variant/upsert.js"
@@ -89,6 +89,9 @@ export default class InlangVariant extends LitElement {
 	@property()
 	message: Message | undefined
 
+	@property()
+	languageTag: LanguageTag | undefined
+
 	@property()
 	variant: Variant | undefined
 
@@ -98,12 +101,41 @@ export default class InlangVariant extends LitElement {
 	@property()
 	lintReports: MessageLintReport[] | undefined
 
+	@property()
+	addMessage: (newMessage: Message) => void = () => {}
+
 	@property()
 	triggerSave: () => void = () => {}
 
 	@state()
 	private _pattern: string | undefined = undefined
 
+	_save = () => {
+		if (this.message && this.variant && this._pattern) {
+			// upsert variant
+			upsertVariant({
+				message: this.message,
+				variant: {
+					match: this.variant.match,
+					pattern: [
+						{
+							type: "text",
+							value: this._pattern,
+						},
+					],
+				},
+			})
+			this.triggerSave()
+		} else {
+			// new message
+			if (this.languageTag && this._pattern) {
+				//TODO: only text pattern supported
+				this.addMessage(createMessage({ locale: this.languageTag, text: this._pattern }))
+				this.triggerSave()
+			}
+		}
+	}
+
 	private get _selectors(): string[] | undefined {
 		// @ts-ignore - just for prototyping
 		return this.message ? this.message.selectors.map((selector) => selector.arg.name) : undefined
@@ -118,6 +150,7 @@ export default class InlangVariant extends LitElement {
 	}
 
 	override render() {
+		//console.log(this.message)
 		return html`<div class="variant">
 			${this.variant && this._matches
 				? this._matches.map((match) => html`<div class="match">${match}</div>`)
@@ -142,31 +175,7 @@ export default class InlangVariant extends LitElement {
 				}}
 			></sl-input>
 			<div class="actions">
-				<sl-button
-					size="small"
-					@click=${() => {
-						if (this.message && this.variant && this._pattern) {
-							// upsert variant
-							upsertVariant({
-								message: this.message,
-								variant: {
-									match: this.variant.match,
-									pattern: [
-										{
-											type: "text",
-											value: this._pattern,
-										},
-									],
-								},
-							})
-							this.triggerSave()
-						} else {
-							// new message
-							console.info("TODO create new message")
-						}
-					}}
-					>Save</sl-button
-				>
+				<sl-button size="small" @click=${() => this._save()}>Save</sl-button>
 				${this.message?.selectors && this.message.selectors.length === 0
 					? html`<inlang-selector-configurator .inputs=${this.inputs} .message=${this.message}>
 							<sl-tooltip content="Add Selector to message"