ui5-webcomponents-data-binding-example/applications/vite/main.js at main · SAP-samples/ui5-webcomponents-data-binding-example · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import { i18nModel, JSONModel } from "vanilla-data-binding"

import "@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js"
import "@ui5/webcomponents-fiori/dist/ShellBar"
import "@ui5/webcomponents/dist/Title.js"
import "@ui5/webcomponents/dist/Label.js"
import "@ui5/webcomponents/dist/Button.js"
import "@ui5/webcomponents/dist/Table.js";
import "@ui5/webcomponents/dist/TableColumn.js";
import "@ui5/webcomponents/dist/TableRow.js";
import "@ui5/webcomponents/dist/TableCell.js";

import "@ui5/webcomponents-icons/dist/full-screen";
import "@ui5/webcomponents-icons/dist/exit-full-screen";
import "@ui5/webcomponents-icons/dist/navigation-right-arrow";

const init = async () => {
	const i18n = new i18nModel(true) // set to true so we can await the init
	await i18n.initialize()

	const data = {
		name: "Supermarket123 🛒 ",
		products: [
			{ name: i18n.data.VanillaIceCream, quantity: 100 },
			{ name: i18n.data.Bananas, quantity: 8 },
			{ name: i18n.data.Apples, quantity: 3 }
		]
	}

	const model = new JSONModel("supermarket", data)

	const fcl = document.querySelector("#fcl")
	const openMidColumn = (e) => {
		fcl.layout = "TwoColumnsMidExpanded"
		const boundData = model.getBoundData(e.target)
		model.setProperty("context", boundData)
	}

	document.querySelector("#change-button").addEventListener("click", (e) => {
		let apples = i18n.data["Apples"]
		apples = apples.replace("🍎", "🍏")
		model.setProperty("products/2/name", apples)
	})

	document.querySelector("#add-button").addEventListener("click", (e) => {
		const newNode = model.appendListItem("products", { name: i18n.data.Apples, quantity: 4 })
		newNode.addEventListener("click", openMidColumn)
	})

	document.querySelectorAll(".list-item").forEach(item => item.addEventListener("click", openMidColumn))

	document.querySelector("#closeMidColumn").addEventListener("click", (e) => {
		fcl.layout = "OneColumn"
		document.querySelector("#openMidColumn").icon = "full-screen"
	})

	document.querySelector("#openMidColumn").addEventListener("click", (e) => {
		if (fcl.layout === "MidColumnFullScreen") {
			fcl.layout = "TwoColumnsMidExpanded"
			e.target.icon = "full-screen"
		} else {
			fcl.layout = "MidColumnFullScreen"
			e.target.icon = "exit-full-screen"
		}
	})

	document.querySelector("#bar").addEventListener("click", (e) => {
		console.log(model.getBoundData(e.target))
	})
}
init()

import "@ui5/webcomponents/dist/Assets.js"
import "@ui5/webcomponents/dist/generated/json-imports/Themes.js"
import "@ui5/webcomponents-fiori/dist/generated/json-imports/Themes.js"
import { setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js"
setTheme("sap_horizon_dark")