{
	"name": "form/nc/nc-list-form/nc-list-form.json",
	"layout": {
		"component": "nc-form",
		"attribute": {
			"id": "nc-list-form"
		},
		"element": [
			{
				"component": "nc-modal",
				"attribute": {
					":cancelText": "hdr.apply.cancel",
					":content": "rec.apply.content",
					":header": "rec.apply.header",
					":okText": "hdr.apply.ok",
					":show": "rec.apply.show",
					"v-on:modal-cancel": "applyKeyword('modal-cancel')",
					"v-on:modal-ok": "applyKeyword('modal-ok')"
				}
			},
			{
				"component": "nc-row",
				"element": [
					{
						"component": "nc-progress-bar",
						"attribute": {
							":message": "rec.progress_bar.message",
							":percent": "rec.progress_bar.percent",
							":status": "rec.progress_bar.status",
							"v-on:close-message": "rec.progress_bar.message = ''"
						}
					}
				]
			},
			{
				"component": "nc-row",
				"element": [
					{
						"component": "nc-col",
						"attribute": {
							"class": ["nc-center-v"],
							"width": "auto"
						},
						"element": [
							{
								"component": "transition-group",
								"attribute": {
									"name": "nc-fade-fast",
									"tag": "div",
									"class": ["nc-row"]
								},
								"element": [
									{
										"component": "nc-row",
										"attribute": {
											":key": "item.idx",
											"v-for": "(item, index) in arr && arr.query && arr.query[rec.table]"
										},
										"element": [
											{
												"component": "nc-col",
												"attribute": {
													"height": "",
													"width": "14em"
												},
												"element": [
													{
														"component": "nc-dropdown",
														"attribute": {
															"id": "table_field",
															":array": "arr.query[rec.table][index].table_field",
															":value": "arr.query[rec.table][index].field",
															"multiple": false,
															"v-on:change": "setQueryItem('field', index, $event)"
														}
													}
												]
											},
											{
												"component": "nc-col",
												"attribute": {
													"width": "4.5em"
												},
												"element": [
													{
														"component": "nc-dropdown",
														"attribute": {
															"hdr": "hdr.nc_list.operator",
															"id": "operator",
															":value": "arr.query[rec.table][index].operator",
															"model": "rec.operator",
															"v-on:change": "setQueryItem('operator', index, $event)"
														}
													}
												]
											},
											{
												"component": "nc-col",
												"attribute": {
													"width": "auto"
												},
												"element": [
													{
														"component": "nc-input",
														"attribute": {
															"id": "query_value1",
															":value": "arr.query[rec.table][index].query_value1",
															"autofocus": "autofocus",
															"style": "width: 100%;min-width: 6em",
															"v-on:change": "setQueryItem('query_value1', index, $event)",
															"v-on:enterKey": "query($event)"
														}
													}
												]
											},
											{
												"component": "nc-col",
												"attribute": {
													"class": ["nc-center-v", "nc-center-h"],
													"v-show": "arr.query[rec.table][index].query_dropdown == null"
												},
												"element": [
													{
														"component": "nc-label",
														"text": "–",
														"attribute": {
															"model": "hdr.nc_list.query_divider"
														}
													}
												]
											},
											{
												"component": "nc-col",
												"attribute": {
													"v-show": "arr.query[rec.table][index].query_dropdown == null",
													"width": "auto"
												},
												"element": [
													{
														"component": "nc-input",
														"attribute": {
															"id": "query_value2",
															":disabled": "queryValue2Disabled(index)",
															":value": "arr.query[rec.table][index].query_value2",
															"style": "width: 100%;min-width: 6em",
															"v-on:change": "setQueryItem('query_value2', index, $event)",
															"v-on:enterKey": "query($event)"
														}
													}
												]
											},
											{
												"component": "nc-col",
												"attribute": {
													"v-show": "arr.query[rec.table][index].query_dropdown != null",
													"width": "auto"
												},
												"element": [
													{
														"component": "nc-dropdown",
														"attribute": {
															"id": "query_dropdown",
															":array": "arr.query[rec.table][index].query_dropdown",
															":value": "arr.query[rec.table][index].query_value1",
															"style": "width: 100%;min-width: 6em",
															"v-on:change": "setQueryItem('query_value1', index, $event)"
														}
													}
												]
											},
											{
												"component": "nc-col",
												"attribute": {
													"width": "12em"
												},
												"element": [
													{
														"component": "nc-dropdown",
														"attribute": {
															"id": "selection_type",
															":disabled": "index < 1",
															":value": "arr.query[rec.table][index].selection_type",
															"model": "rec.selection_type",
															"v-on:change": "setQueryItem('selection_type', index, $event)"
														}
													}
												]
											},
											{
												"component": "nc-col",
												"attribute": {
													"class": ["nc-center-h"],
													"width": "40px"
												},
												"element": [
													{
														"component": "nc-button",
														"attribute": {
															"id": "remove-query-row",
															"class": ["basic", "small", "circular"],
															"style": "width: 34px !important; min-width: 34px !important; padding-left: 12px;",
															"v-on:click": "removeQueryRow(index)"
														},
														"element": [
															{
																"component": "nc-icon",
																"attribute": {
																	"icon": "minus"
																}
															}
														]
													}
												]
											},
											{
												"component": "nc-col",
												"attribute": {
													"class": ["nc-center-h"],
													"width": "40px"
												},
												"element": [
													{
														"component": "nc-button",
														"attribute": {
															"id": "add-query-row",
															"class": ["basic", "small", "circular"],
															"style": "width: 34px !important; min-width: 34px !important; padding-left: 12px;",
															"v-on:click": "addQueryRow(index)"
														},
														"element": [
															{
																"component": "nc-icon",
																"attribute": {
																	"icon": "plus"
																}
															}
														]
													}
												]
											}
										]
									}
								]
							}
						]
					},
					{
						"component": "nc-col",
						"attribute": {
							"class": ["nc-align-bottom"],
							"height": "",
							"width": "23em"
						},
						"element": [
							{
								"component": "nc-col",
								"attribute": {
									"width": "8em"
								},
								"element": [
									{
										"component": "nc-dropdown",
										"text": "Dropdown",
										"attribute": {
											"id": "saved_query",
											"model": "rec.saved_query",
											"v-on:change": "selectSavedQuery"
										}
									}
								]
							},
							{
								"component": "nc-col",
								"attribute": {
									"class": ["nc-end-h"],
									"height": "",
									"width": "auto"
								},
								"element": [
									{
										"component": "nc-button",
										"attribute": {
											"id": "query",
											"class": ["nc-margin-right"],
											"v-on:click": "query(null)"
										},
										"element": [
											{
												"component": "nc-icon",
												"attribute": {
													"icon": "search"
												}
											},
											{
												"component": "nc-translate",
												"text": "Update",
												"attribute": {
													"model": "hdr.nc_list.update"
												}
											}
										]
									},
									{
										"component": "nc-button",
										"attribute": {
											"id": "query-all",
											"style": "margin-right: 0;",
											"v-on:click": "query(null, 'all')"
										},
										"element": [
											{
												"component": "nc-translate",
												"text": "All",
												"attribute": {
													":style": "{color: allSelected ? 'green' : ''}",
													"model": "hdr.nc_list.all_records"
												}
											}
										]
									}
								]
							}
						]
					}
				]
			},
			{
				"component": "nc-row",
				"element": [
					{
						"component": "nc-col",
						"attribute": {
							"width": "auto"
						}
					},
					{
						"component": "nc-col",
						"attribute": {
							"class": ["nc-center-v", "nc-move-down"],
							"width": "2.2em",
							"height": "2.5em"
						},
						"element": [
							{
								"component": "nc-droparea",
								"attribute": {
									"icon": "file-excel",
									"v-on:import-file": "importFile",
									"style": "margin-top: 1em;"
								}
							}
						]
					},
					{
						"component": "nc-tab",
						"attribute": {
							"model": "rec.tab",
							"v-on:change": "callServer('query')"
						},
						"element": [
							{
								"component": "nc-col",
								"attribute": {
									"height": "calc(100vh - 17em)",
									"width": "100%"
								},
								"element": [
									{
										"component": "nc-grid",
										"attribute": {
											"id": "list",
											":rowMultiSelectWithClick": "true",
											":style": "gridStyle",
											"model": "grid.list",
											"v-on:grid-cell-key-down": "gridCellKeyDown",
											"v-on:grid-cell-value-changed": "gridCellValueChanged",
											"v-on:grid-context-menu": "gridContextMenu",
											"v-on:grid-row-clicked": "gridRowClicked",
											"v-on:grid-row-double-clicked": "gridRowDoubleClicked",
											"v-on:grid-tool-selected": "gridToolSelected"
										}
									}
								]
							}
						]
					}
				]
			}
		]
	}
}
