First commit

application/user/edit/edit.user.checkbox.js

@@ -0,0 +1,78 @@
+
+
+import checkbox 	from "/elements/checkbox.js"
+
+import user 		from "/user/user.js"
+
+import tools 		from "/unify/tools.js"
+
+export default class customCheckbox extends checkbox{
+
+	async create() {
+
+		var selected = await this.checkSelected();
+
+		this.customElement.checked = selected;
+
+	}
+
+	debug	= "true"
+
+	node async checkSelected() {
+
+		var editUser		= this.parents("editUser");
+
+		var collection		= editUser.selectedUsers;
+
+		collection.sync();
+
+		var id				= this.parent.id;
+
+		tools.log("check selected??", id);
+
+		var v = collection.rowExists( id );
+
+		console.log(v);
+
+		return v;
+
+	}
+
+	async change() {
+
+		this.value	= this.customElement.checked;
+
+		await this.changeCollection( this.value );
+
+		var editUser	= this.parent.parent.parent.parent;
+
+		editUser.showSelectedUser.sync();
+
+	}
+
+	node async changeCollection( checked ) {
+
+		var editUser	= this.parents("editUser");
+
+		var collection	= editUser.selectedUsers;
+
+		var userObject	= this.parent;
+
+		tools.log(userObject );
+
+
+		if( checked ) {
+
+			collection.add( userObject );
+
+		} else {
+
+			collection.remove( userObject );
+
+		}
+
+		return 1234;
+
+	}
+
+}

application/user/edit/edit.user.checkbox.renderCollection.js

@@ -0,0 +1,25 @@
+
+import groups					from '/user/group/user.group.permission.js';
+
+import renderCollection			from "/unify/renderCollection.js";
+
+
+export default class checkRenderCollection extends renderCollection{
+
+	debug		= true;
+
+	display		= "table"
+
+	permission() {
+
+		this.allow( groups.admin, "WRITE" );
+
+		this.allow( groups.member, "READ" );
+
+		this.allow( groups.admin, "READ" );
+
+		this.allow( groups.visitor, "READ" );
+	
+	}
+
+}

application/user/edit/edit.user.checkbox.row.js

@@ -0,0 +1,19 @@
+
+import label 					from '/elements/label.js';
+
+import checkRenderCollection	from "./edit.user.checkbox.renderCollection.js";
+
+import checkbox					from "./edit.user.checkbox.tableRow.js";
+
+import user 					from "/user/user.js";
+
+import collection				from "/unify/collection.js";
+
+
+export default class checkboxRow{
+
+	label				= new label("Select users");
+
+	renderCollection	= new checkRenderCollection( checkbox , new collection( user ) );
+
+}

application/user/edit/edit.user.checkbox.tableRow.js

@@ -0,0 +1,37 @@
+
+import checkbox 		from './edit.user.checkbox.js';
+
+import radio 			from '/elements/radioButton.js';
+
+import label 			from '/elements/label.js';
+
+import user 			from "/user/user.js";
+
+
+export default class customCheckbox extends user{
+
+	setup() {
+
+		console.log("customCheckbox", this);
+
+		this.label.text			= this.username.value;
+
+		this.checkbox.id		= this.id;
+
+	}
+
+	label			= new label();
+
+	checkbox		= new checkbox();
+
+	value			= false;
+
+	layers			= 1;
+
+	parseTable		= false;
+
+	display 		= "table-row";
+
+	layers			= 1;
+
+}

application/user/edit/edit.user.js

@@ -0,0 +1,73 @@
+
+
+import user 					from "/user/user.js";
+
+import groups					from '/user/group/user.group.permission.js';
+
+import label 					from '/elements/label.js';
+
+import header 					from '/elements/header.js';
+
+import usernameRow 				from "./edit.username.row.js";
+
+import saveButtonRow 			from "./user.edit.button.row.js";
+
+import page						from "/elements/page.js";
+
+import checkboxRow 				from "./edit.user.checkbox.row.js";
+
+import selectRow 				from "./edit.user.select.row.js";
+
+import option						from "./edit.user.select.option.js";
+
+import renderCollection				from "./edit.user.select.renderCollection.js";
+
+
+
+export default class editUser extends user, page{
+
+	padding				= 20;
+
+	debug				= true;
+
+	flexDirection		= "column"
+
+	header				= new header("Edit user");
+
+	usernameRow			= new usernameRow();
+
+	selectRow			= new selectRow();
+
+	checkboxRow			= new checkboxRow();
+
+
+	showSelectedUser	= new renderCollection( option, this.selectedUsers );
+
+
+	saveButtonRow		= new saveButtonRow();
+
+
+	create() {
+
+		this.selectRow.renderCollection.sync();
+
+		this.checkboxRow.renderCollection.sync();
+
+
+		this.showSelectedUser.sync();
+
+	}
+
+	permission() {
+
+		this.allow( groups.admin, "WRITE" );
+
+		this.allow( groups.member, "READ" );
+
+		this.allow( groups.admin, "READ" );
+
+		this.allow( groups.visitor, "READ" );
+	
+	}
+
+}

application/user/edit/edit.user.select.option.js

@@ -0,0 +1,19 @@
+
+import option					from "/elements/option.js";
+
+import user 					from "/user/user.js";
+
+
+export default class customOption extends option, user{
+
+	setup() {
+		
+		// use username as label
+		this.customElement.innerHTML		= this.username.value;
+
+		// username as value
+		this.customElement.value 			= this.id;
+
+	}
+
+}

application/user/edit/edit.user.select.renderCollection.js

@@ -0,0 +1,198 @@
+
+
+import renderCollection			from "/unify/renderCollection.js";
+
+import groups					from '/user/group/user.group.permission.js';
+
+import document					from "/unify/document.js";
+
+
+export default class customSelect extends renderCollection{
+
+	customElement 			= document.createElement("select");
+
+	useCustomElement		= true;
+
+	debug					= true;
+
+
+	#ifdef MACOS
+
+		width					= "70%";
+
+		#ifdef LIGHT
+
+	
+
+
+			borderBottom			= "1px solid #dedede"
+
+			background				= "#f7f7f7";
+
+
+			color					= "black";
+
+			opaqueBackgroundColor	= "#f7f7f7";
+
+
+
+			focusBackgroundColor	= "#f7f7f7";
+
+			focusBorderBottom		= "1px solid #dedede";
+
+
+			blurBackgroundColor		= "#F7FAFC";
+
+			blurBorderBottom		= "1px solid #E5E5E5";
+
+
+			color					= "#b1b1b1";
+
+
+
+		#endif
+
+
+		#ifdef DARK
+
+			background				= "rgb(255 255 255 / 3%)";
+
+			color					= "white";
+
+			opaqueBackgroundColor	= "rgb(255 255 255 / 3%)";
+
+
+
+			focusBackgroundColor	= "rgb(255 255 255 / 3%)";
+
+			focusBorderBottom		= "";
+
+
+			blurBackgroundColor		= "#fbfbfb";
+
+			blurBorderBottom		= "";
+
+
+		#endif
+
+
+
+		padding					= 6;
+
+		margin					= 6;
+
+		marginRight				= 20;
+
+		height					= "fit-content";
+
+		borderRadius			= 0;
+
+		fontWeight				= "bold";
+
+		fontSize				= 10;
+
+		border					= "1px solid rgb(255 255 255 / 18%)";
+
+		padding					= 12;
+
+		fontSize				= "";
+
+		borderRadius			= 6;
+
+		borderBottom			= "none";
+
+		width					= "auto"
+
+
+
+		
+
+	#endif
+	
+
+	
+
+	#ifdef WINDOWS
+
+		borderBottom			= "2px solid #868686"
+
+		borderRadius			= 6;
+
+		padding					= 8;
+
+		margin					= 12;
+
+		#ifdef LIGHT
+
+			background				= "#F7FAFC";
+
+			border					= "1px solid #E5E5E5";
+
+			opaqueBackgroundColor	= "#F7FAFC";
+
+
+			focusBackgroundColor	= "white";
+
+			focusBorderBottom		= "2px solid #4CC2FF";
+
+
+			blurBackgroundColor		= "#F7FAFC";
+
+			blurBorderBottom		= "1px solid #E5E5E5";
+
+
+		#endif
+
+
+		#ifdef DARK
+
+			background				= "#2D2D2D!important"
+
+			webkitBoxShadow			= "0 0 0px 30px #2D2D2D inset!important";
+
+			webkitTextFillColor		= "white";
+
+			color					= "white"
+
+			transition				= "background-color 5000s ease-in-out 0s";
+
+
+			border					= "1px solid #303030";
+
+			borderBottom			= "2px solid #9A9A9A";
+
+			color					= "WHITE";
+
+			opaqueBackgroundColor	= "#2D2D2D!important";
+
+
+			focusBackgroundColor	= "#1F1F1F";
+
+			focusBorderBottom		= "2px solid #0067C0";
+
+
+			blurBackgroundColor		= "#fbfbfb";
+
+			blurBorderBottom		= "1px solid #9A9A9A";
+
+	
+
+		#endif
+	
+
+	#endif
+
+
+	permission() {
+
+		this.allow( groups.admin, "WRITE" );
+
+		this.allow( groups.member, "READ" );
+
+		this.allow( groups.admin, "READ" );
+
+		this.allow( groups.visitor, "READ" );
+	
+	}
+
+}

application/user/edit/edit.user.select.row.js

@@ -0,0 +1,19 @@
+
+import label 						from '/elements/label.js';
+
+import collection					from "/unify/collection.js";
+
+import user 						from "/user/user.js";
+
+import option						from "./edit.user.select.option.js";
+
+import renderCollection				from "./edit.user.select.renderCollection.js";
+
+
+export default class optionRow{
+
+	label				= new label("Select user");
+
+	renderCollection	= new renderCollection( option , new collection( user ) );
+
+}

application/user/edit/edit.username.js

@@ -0,0 +1,10 @@
+
+import username		from "../user.username.js";
+
+import input		from "/elements/input.js";
+
+
+export default class editUsername extends username, input{
+
+
+}

application/user/edit/edit.username.row.js

@@ -0,0 +1,14 @@
+
+import label 					from '/elements/label.js';
+
+
+import editUsername 			from "./edit.username.js";
+
+
+export default class usernameRow{
+
+	label		= new label("Username");
+
+	username 	= new editUsername();
+
+}

application/user/edit/user.edit.button.js

@@ -0,0 +1,13 @@
+import button 	from '/elements/button.js';
+
+export default class userEditButton extends button {
+
+	label 		= "Save"; 
+
+	async click( event, object ){
+
+		await this.parent.parent.save();
+
+	}
+
+}

application/user/edit/user.edit.button.row.js

@@ -0,0 +1,13 @@
+
+
+import empty 					from '/elements/empty.js';
+
+import userEditButton 			from "./user.edit.button.js";
+
+export default class saveButtonRow{
+
+	empty			= new empty();
+
+	userEditButton 	= new userEditButton();
+
+}