Updating playground setup

Author: webdevnerdstuff

src/playground/.gitignore

@@ -1,2 +1,6 @@
-PlaygroundPage.vue
-tableDefaults.ts
+*
+
+!.gitignore
+
+!configs/
+!configs/**/*

src/playground/configs/build.sh

@@ -7,15 +7,16 @@ export CHECKMARK="$(printf '\e[1;32m\xE2\x9C\x94\e[0m')"
 
 # Playground path and template #
 PLAYGROUND_VUE_DIR=src/playground
-PLAYGROUND_VUE_TEMPLATE=PlaygroundPage.template.vue
+
 PLAYGROUND_VUE_FILE=PlaygroundPage.vue
 
 
 # Check if Playground.vue file exists before trying to create it #
 if [ ! -f "$PLAYGROUND_VUE_DIR/$PLAYGROUND_VUE_FILE" ]; then
-	cp "$PLAYGROUND_VUE_DIR/configs/$PLAYGROUND_VUE_TEMPLATE" "$PLAYGROUND_VUE_DIR/$PLAYGROUND_VUE_FILE"
+	cp "$PLAYGROUND_VUE_DIR/configs/templates/$PLAYGROUND_VUE_FILE" "$PLAYGROUND_VUE_DIR/$PLAYGROUND_VUE_FILE"
 
 	echo ""
 	echo "  ${BOLD_GREEN}${CHECKMARK}${BOLD_WHITE} $PLAYGROUND_VUE_FILE file has been created.${WHITE}"
 	echo ""
 fi
+

…ound/configs/PlaygroundPage.template.vue …und/configs/templates/PlaygroundPage.vuesrc/playground/configs/PlaygroundPage.template.vue renamed to src/playground/configs/templates/PlaygroundPage.vue src/playground/configs/PlaygroundPage.template.vue renamed to src/playground/configs/templates/PlaygroundPage.vue

@@ -64,6 +64,7 @@
 								item-value="id"
 								:items="users"
 								:label="componentOptions.label"
+								:menu="componentOptions.menu"
 								name="active"
 								:return-object="true"
 								:save-button-color="componentOptions.saveButtonColor"
@@ -225,12 +226,13 @@ const componentOptions = reactive({
 	emptyText: 'empty',
 	fieldOnly: false,
 	hideDetails: true,
-	hideSelected: true,
+	hideSelected: false,
 	iconFalse: undefined,
 	iconFalseTitle: undefined,
 	iconTrue: undefined,
 	iconTrueTitle: undefined,
 	label: '',
+	menu: true,
 	rules: {
 		minLength(value) {
 			return value?.length >= 5 || 'Min 5 characters';
@@ -305,7 +307,10 @@ function getUsers() {
 	fetch('api/users')
 		.then((response) => response.json())
 		.then((json) => {
-			users.value = [...json.users];
+			users.value = json.users.map((user) => ({
+				id: user.id,
+				name: user.name,
+			}));
 		});
 };
 
@@ -319,7 +324,7 @@ function getUsers() {
 // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
 function updatedValue(val, field) {
 	// Save updated values
-	// console.log('updatedValue', val, field);
+	console.log('updatedValue', val, field);
 }
 </script>