alchemy-chimera 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 1.2.0 (2022-11-02)
+
+* Update to `alchemy-form` v0.2.0
+
+## 1.1.1 (2022-10-12)
+
+* Add more alchemy-field options
+* Disable translations when getting records from the chimera api
+* Style inline translatable fields
+* Style inline enum field view
+* Fix sidebar routes not being marked as active
+
 ## 1.1.0 (2022-07-23)
 
 * Upgrade `alchemy-acl` and `alchemy-form`

package/assets/stylesheets/chimera/chimera.scss

@@ -5,6 +5,7 @@ body {
 	font-family: 'Roboto', sans-serif;
 }
 
+.default-form-editor,
 .chimera-wrapper {
 	--sidebar-bg-color: #4a4e58;
 	--text-color: #475466;
@@ -25,6 +26,11 @@ body {
 	--color-text: #475466;
 	--color-input-border: #CCD7E6;
 
+	--alchemy-tab-button-border: var(--color-box-border);
+	--alchemy-tab-panel-border: var(--color-box-border);
+}
+
+.chimera-wrapper {
 	display: flex;
 	min-height: 100vh;
 	width: 100%;
@@ -60,7 +66,7 @@ body {
 		//filter: brightness(1.05);
 	}
 
-	al-ico {
+	al-icon {
 		margin-right: 4px;
 	}
 }
@@ -190,18 +196,18 @@ body {
 .chimera-editor-widgets {
 	padding: 1rem;
 
-	alchemy-widget[type="alchemy_field"] {
+	al-widget[type="alchemy_field"] {
 		margin-bottom: 1rem;
 	}
 
 	.form-field-info label,
-	.form-field-info alchemy-label {
+	.form-field-info al-label {
 		display: block;
 		font-size: 1.2rem;
 	}
 }
 
-alchemy-widgets-navigation {
+al-widgets-navigation {
 	--border-color: #333333;
 
 	ul {
@@ -217,7 +223,7 @@ alchemy-widgets-navigation {
 		}
 	}
 
-	alchemy-widget[type="link"] {
+	al-widget[type="link"] {
 		width: 100%;
 		height: 3rem;
 		display: flex;
@@ -232,7 +238,8 @@ alchemy-widgets-navigation {
 			color: white;
 
 			&:hover,
-			&.active-link {
+			&.active-link,
+			&.active-sublink {
 				background-color: rgba(190, 190, 190, 0.5);
 			}
 		}
@@ -266,21 +273,86 @@ alchemy-widgets-navigation {
 	opacity: 0;
 }
 
+.alchemy-field-enum.alchemy-field-value {
+	margin: auto;
+	background: #777;
+	display: inline-block;
+	padding: 6px;
+	border-radius: 7px;
+	color: white;
+}
+
+al-field-translatable {
+	.prefix-buttons {
+		width: 100%;
+		border-bottom: 1px solid var(--color-box-border);
+		display: flex;
+
+		button {
+			flex: 10;
+			font-size: 16px;
+			font-weight: 500;
+			color: var(--button-text-color);
+			letter-spacing: 0px;
+			background: transparent;
+			border: none;
+			cursor: pointer;
+
+			height: 3rem;
+			display: flex;
+			flex-flow: column;
+			justify-content: center;
+			align-items: center;
+
+			&.active {
+				box-shadow: inset 0 -2px var(--color-active);
+			}
+
+			&:hover {
+				background-color: var(--button-bg-hover-color);
+			}
+		}
+	}
+}
+
+al-field[mode="inline"] {
+	al-field-translatable {
+		.prefix-buttons {
+			button {
+				height: 2rem;
+				font-size: 14px;
+			}
+		}
+
+		.entries {
+
+		}
+	}
+
+	al-field-translatable-entry {
+		display: block;
+		padding: 9px;
+		background: rgba(190,190,190,0.1);
+		min-height: 37px;
+	}
+}
+
+.default-form-editor,
 .chimera-wrapper {
 
-	alchemy-table .aft-column-filters input {
+	al-table .aft-column-filters input {
 		@extend .chimera-input-field;
 		width: 100%;
 	}
 
-	alchemy-form {
+	al-form {
 		.error-area:not(:empty) {
 			@extend .error, .alert-box;
 			margin-top: 0;
 		}
 	}
 
-	alchemy-field {
+	al-field {
 		.wrapped-inline {
 			> .field {
 				padding: 0 !important;
@@ -288,11 +360,11 @@ alchemy-widgets-navigation {
 		}
 	}
 
-	alchemy-field[mode="inline"] {
+	al-field[mode="inline"] {
 		border: none;
 	}
 
-	alchemy-field:not([mode="inline"]) {
+	al-field:not([mode="inline"]) {
 		border: 1px solid var(--color-box-border);
 		background-color: white;
 		border-radius: 4px;
@@ -300,7 +372,7 @@ alchemy-widgets-navigation {
 		// In case something goes wrong:
 		min-height: 1rem;
 
-		alchemy-label {
+		al-label {
 			padding-left: 1rem;
 			line-height: 3rem;
 			font-size: 16px;
@@ -309,39 +381,6 @@ alchemy-widgets-navigation {
 			border-bottom: 1px solid var(--color-box-border);
 		}
 
-		alchemy-field-translatable {
-			.prefix-buttons {
-				width: 100%;
-				border-bottom: 1px solid var(--color-box-border);
-				display: flex;
-
-				button {
-					flex: 10;
-					font-size: 16px;
-					font-weight: 500;
-					color: var(--button-text-color);
-					letter-spacing: 0px;
-					background: transparent;
-					border: none;
-					cursor: pointer;
-
-					height: 3rem;
-					display: flex;
-					flex-flow: column;
-					justify-content: center;
-					align-items: center;
-
-					&.active {
-						box-shadow: inset 0 -2px var(--color-active);
-					}
-
-					&:hover {
-						background-color: var(--button-bg-hover-color);
-					}
-				}
-			}
-		}
-
 		.field {
 			display: flex;
 			padding: 1rem;
@@ -351,7 +390,7 @@ alchemy-widgets-navigation {
 				flex: 10;
 			}
 
-			> alchemy-widget {
+			> al-widget {
 				border: 1px solid var(--color-input-border);
 				padding: 0 12px;
 			}
@@ -381,7 +420,7 @@ alchemy-widgets-navigation {
 		}
 	}
 
-	alchemy-field-array {
+	al-field-array {
 		.add-entry {
 			@extend .btn;
 			margin: 1rem 0 0 1rem;
@@ -398,7 +437,7 @@ alchemy-widgets-navigation {
 			margin-top: 0.5rem;
 		}
 
-		alchemy-field-array-entry:not(:last-of-type) {
+		al-field-array-entry:not(:last-of-type) {
 			//border-bottom: 1px solid gray;
 			position: relative;
 
@@ -415,18 +454,18 @@ alchemy-widgets-navigation {
 			}
 		}
 
-		alchemy-field-array-entry:not(:first-of-type) {
+		al-field-array-entry:not(:first-of-type) {
 			margin-top: 1rem;
 		}
 	}
 
 	.chimera-editor-widgets {
 
-		alchemy-widgets-column.toc-col {
+		al-widgets-column.toc-col {
 			flex: 2 2;
 		}
 
-		table-of-contents[elements-selector="alchemy-field"] {
+		al-toc[elements-selector="al-field"] {
 			align-self: start;
 			top: 2rem;
 			position: sticky;
@@ -454,21 +493,22 @@ alchemy-widgets-navigation {
 		}
 	}
 
-	alchemy-field-schema {
-		alchemy-field {
+	al-field-schema {
+		al-field {
 			border: none;
 			margin-bottom: 1rem;
 		}
 	}
 
 	.aft-actions {
+		al-button,
 		a {
 			color: var(--button-text-color);
 			background-color: var(--button-bg-color);
 			padding: 0.5rem;
 			border-radius: 6px;
 			margin: 0.2rem;
-			display: inline-block;
+			display: inline-flex;
 
 			&:hover {
 				background-color: var(--button-bg-hover-color);
@@ -496,7 +536,7 @@ alchemy-widgets-navigation {
 		}
 	}
 
-	alchemy-password-input {
+	al-password-input {
 		label:first-of-type {
 			margin-bottom: 0;
 		}

package/config/routes.js

@@ -12,13 +12,12 @@ chimera_section.add({
 	paths      : '/',
 	handler    : 'Chimera.Static#dashboard',
 });
-
 // Editor index action
 chimera_section.add({
 	name       : 'Chimera.Editor#index',
 	methods    : 'get',
 	paths      : '/editor/{model}/index',
-	breadcrumb : 'chimera.editor.{model}.index'
+	breadcrumb : 'chimera.editor.{model}'
 });
 
 // Editor add action

package/controller/chimera_editor_controller.js

@@ -227,7 +227,7 @@ Editor.setAction(async function trash(conduit, model_name, pk_val) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    1.0.0
- * @version  1.1.0
+ * @version  1.2.0
  *
  * @param    {Conduit}   conduit
  * @param    {String}    model_name
@@ -237,6 +237,8 @@ Editor.setAction(async function records(conduit, model_name) {
 	let body = conduit.body,
 	    model = this.getModel(model_name),
 	    crit = model.find();
+	
+	model.disableTranslations();
 
 	let page_size = body.page_size,
 	    fields = body.fields,
@@ -252,6 +254,10 @@ Editor.setAction(async function records(conduit, model_name) {
 		crit.select(fields);
 	}
 
+	if (page_size && !page) {
+		page = 1;
+	}
+
 	if (page) {
 		crit.page(page, page_size);
 	}

package/lib/chimera_config.js

@@ -65,7 +65,7 @@ Config.setMethod(function getFieldSet(name) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    1.0.0
- * @version  1.1.0
+ * @version  1.2.0
  *
  * @param    {String}   action
  * @param    {Conduit}  conduit
@@ -84,23 +84,76 @@ Config.setMethod(function getWidgetConfig(action, conduit) {
 	if (action == 'edit') {
 		fieldset = this.getFieldSet('edit');
 
-		let field_widgets = [];
-
+		let action_widgets = [];
 		let field;
 
+		let groups = {
+			main : {
+				title   : 'Main',
+				widgets : [],
+			},
+		};
+
 		for (field of fieldset) {
 
-			field_widgets.push({
+			let field_group = groups.main;
+
+			let field_widget ={
 				type   : 'alchemy_field',
 				config : {
 					field           : field.name,
+					purpose         : field.options.purpose,
+					mode            : field.options.mode,
+					readonly        : field.options.readonly,
 					view            : field.options.view,
+					wrapper         : field.options.wrapper,
+					data_src        : field.options.data_src,
+					title           : field.options.title,
 					widget_settings : field.options.widget_settings || {},
 				}
+			};
+
+			if (field.options.group) {
+				field_group = groups[field.options.group];
+
+				if (!field_group) {
+					field_group = {
+						widgets : [],
+					};
+
+					groups[field.options.group] = field_group;
+				}
+			}
+
+			field_group.widgets.push(field_widget);
+		}
+
+		if (Object.size(groups) == 1) {
+			action_widgets.include(groups.main.widgets);
+		} else {
+			let tabs = [];
+
+			for (let name in groups) {
+				let group = groups[name];
+
+				let tab = {
+					name     : name,
+					title    : name.titleize(),
+					contents : group.widgets,
+				};
+
+				tabs.push(tab);
+			}
+
+			action_widgets.push({
+				type   : 'alchemy_tabs',
+				config : {
+					tabs : tabs,
+				}
 			});
 		}
 
-		field_widgets.push({
+		action_widgets.push({
 			type   : 'html',
 			config : {
 				html : '<button class="btn btn-submit" type="submit">Save</button>'
@@ -132,7 +185,7 @@ Config.setMethod(function getWidgetConfig(action, conduit) {
 													"config": {
 														model     : this.ModelClass.type_name,
 														purpose   : 'edit',
-														widgets   : field_widgets
+														widgets   : action_widgets
 													}
 												}
 											]
@@ -146,9 +199,9 @@ Config.setMethod(function getWidgetConfig(action, conduit) {
 												{
 													type: "table_of_contents",
 													config: {
-														parent_selector: 'alchemy-widgets-row',
-														elements_selector: 'alchemy-field',
-														title_selector: 'alchemy-label'
+														parent_selector: 'al-widgets-row',
+														elements_selector: 'al-field',
+														title_selector: 'al-label'
 													}
 												}
 											]
@@ -174,9 +227,10 @@ Config.setMethod(function getWidgetConfig(action, conduit) {
 							"type": "alchemy_table",
 							"config": {
 								fieldset     : fieldset,
-								page_size    : 50,
+								page_size    : 25,
 								show_filters : true,
 								id           : 'aft-' + this.ModelClass.type_name,
+								use_url_pagination : true,
 								recordsource : {
 									route      : 'Chimera.Editor#records',
 									parameters : {

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "alchemy-chimera",
 	"description": "Chimera plugin for Alchemy MVC",
-	"version": "1.1.0",
+	"version": "1.2.0",
 	"author": "Jelle De Loecker <jelle@elevenways.be>",
 	"keywords": [
 		"alchemy",
@@ -11,10 +11,10 @@
 	],
 	"repository": "11ways/alchemy-chimera",
 	"peerDependencies": {
-		"alchemy-acl"    : "~0.8.0",
-		"alchemymvc"     : "~1.2.4",
-		"alchemy-form"   : "~0.1.11",
-		"alchemy-widget" : "~0.1.5"
+		"alchemy-acl"    : "~0.8.3",
+		"alchemymvc"     : "~1.2.7",
+		"alchemy-form"   : "~0.2.0",
+		"alchemy-widget" : "~0.2.0"
 	},
 	"license": "MIT",
 	"engines": {

package/view/chimera/dashboard.hwk

@@ -1,8 +1,7 @@
 {% extend "layouts/chimera_body" %}
 
 {% block "main" %}
-Dashboard Widgets:
-<alchemy-widgets>
+<al-widgets>
 
-</alchemy-widgets>
+</al-widgets>
 {% /block %}

package/view/chimera/editor/index.hwk

@@ -1,11 +1,11 @@
 {% include "layouts/chimera_basics" %}
 
 {% block "main" %}
-	<alchemy-widgets
+	<al-widgets
 		class="main-widgets"
 		#context_variables={% context_variables %}
 		#value={% widget_config %}
-	></alchemy-widgets>
+	></al-widgets>
 {% /block %}
 
 {% block "page-actions" %}
@@ -14,7 +14,7 @@
 		#model={% model_name %}
 		class="btn"
 	>
-		<al-ico type="plus"></al-ico>
+		<al-icon icon-name="plus"></al-icon>
 		{%t "new" model=model_name %}
 	</a>
 {% /block %}

package/view/chimera/editor/trash.hwk

@@ -15,7 +15,10 @@
 				{%t "cancel" %}
 			</a>
 			<button class="btn danger">
-				<al-ico type="trash" class="fas fa-trash"></al-ico>
+				<al-icon
+					icon-name="trash"
+					icon-style="duotone"
+				></al-icon>
 				{%t "delete" %}
 			</button>
 		</form>
@@ -28,7 +31,7 @@
 		#model={% model_name %}
 		class="btn"
 	>
-		<al-ico type="plus"></al-ico>
+		<al-icon icon-name="plus"></al-icon>
 		{%t "new" model=model_name %}
 	</a>
 {% /block %}

package/view/chimera/sidebar.hwk

@@ -1,4 +1,4 @@
-<alchemy-widgets
+<al-widgets
 	class="sidebar-widgets"
 	#value=<% navigation_widgets %>
-></alchemy-widgets>
+></al-widgets>

package/view/chimera/widgets.hwk

@@ -1,8 +1,8 @@
 {% include "layouts/chimera_basics" %}
 
 {% block "main" %}
-<alchemy-widgets
+<al-widgets
 	#context_variables={% context_variables %}
 	#value={% widget_config %}
-></alchemy-widgets>
+></al-widgets>
 {% /block %}