<template>
	<div class="widget-data-type-page">
		<h1>Definire il tipo di dato consumato dal widget</h1>

		<p>
			Quando si lavora sul widget, è utile avere suggerimenti dall'intellisense per i dati che arrivano da Arca.<br>
			La cosa ovviamente non è automatica, e va configurata a mano nel file data.ts dentro la cartella del widget.
		</p>

		<code-sample lang="javascript" :code="codeSamples.init" />

		<p>
			Se il payload JSON inviato da Arca è JSON autogenerato dalla query, allora basta definire il tipo di ciascuna tupla del risultato della query che alimenta il widget.
			<br>
			Per esempio, se ottengo questo risultato dalla query:
		</p>

		<table class="query-sample">
			<thead>
				<tr>
					<td>nome</td>
					<td>cognome</td>
					<td>eta</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Pinco</td>
					<td>Pallino</td>
					<td>23</td>
				</tr>
				<tr>
					<td>Mario</td>
					<td>Rossi</td>
					<td>34</td>
				</tr>
			</tbody>
		</table>

		<p>
			Capisco che il json che mi arriva sarà:
		</p>

		<code-sample lang="json" :code="codeSamples.jsonResult" />

		<p>
			Di conseguenza mi basta specificare in data.ts il tipo di elemento presente nell'array "rows".
		</p>

		<code-sample lang="javascript" :code="codeSamples.dataDef" />

		<hr class="section-separator">

		<h2>Tipizzazione di un payload JSON personalizzato</h2>

		<p>
			Se invece il JSON per alimentare il widget lo si crea senza l'ausilio del generatore di Arca, allora bisogna agire diversamente.<br>
			Di seguito un esempio di JSON custom e la relativa tipizzazione.
		</p>

		<code-sample lang="json" :code="codeSamples.jsonCustom" />
		<code-sample lang="javascript" :code="codeSamples.dataDefCustom" />
	</div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator"

@Component
export default class WidgetDataTypePage extends Vue
{
	codeSamples = {
		init: [
			`// data.ts`,
			`export interface IWidgetDataFormat extends IArcaJsonPayload<IWidgetDataItem> {}`,
			``,
			`export interface IWidgetDataItem`,
			`{`,
			``,
			`}`
		].join("\n"),

		jsonResult: JSON.stringify({
			rows: [
				{ nome: "Pinco", cognome: "Pallino", eta: 23 },
				{ nome: "Mario", cognome: "Rossi", eta: 34 },
			]
		}, null, '\t'),

		dataDef: [
			`export interface IWidgetDataItem`,
			`{`,
			`\tnome   : string`,
			`\tcognome: string`,
			`\teta    : number`,
			`}`
		].join('\n'),

		jsonCustom: JSON.stringify({
			from: "https://myapi.it/people",
			code: 200,

			data: {
				items: [
					{ nome: "Pinco", cognome: "Pallino", eta: 23 },
					{ nome: "Mario", cognome: "Rossi", eta: 34 },
				]
			}
		}, null, '\t'),

		dataDefCustom: [
			`/**`,
			`* Nota che abbiamo eliminato la parte "extends ArcaJsonPayload...etc" in quanto non ci stiamo più basando`,
			`* sulla forma del payload del generatore di Arca`,
			`*/`,
			`export interface IWidgetDataFormat // extends IArcaJsonPayload<IWidgetDataItem>`,
			`{`,
			`\tfrom: string`,
			`\tcode: number`,
			`\tdata: { items: Array<IWidgetDataItem> }`,
			`}`,
			``,
			`export interface IWidgetDataItem`,
			`{`,
			`\tnome   : string`,
			`\tcognome: string`,
			`\teta    : number`,
			`}`
		].join('\n')
	}
}
</script>

<style lang="less" scoped>
.widget-data-type-page {
	
}
</style>