Updated template

Author: webdevnerdstuff

src/playground/configs/templates/PlaygroundPage.vue

@@ -13,7 +13,6 @@
 							<VInlineSwitch
 								v-model="item.raw.active"
 								:align-items="componentOptions.alignItems"
-								api-route="api/posts"
 								:cancel-button-color="componentOptions.cancelButtonColor"
 								:cancel-button-variant="componentOptions.cancelButtonVariant"
 								:cancel-icon="componentOptions.cancelIcon"
@@ -23,29 +22,28 @@
 								:color="componentOptions.color"
 								:density="componentOptions.density"
 								:disabled="componentOptions.disabled"
-								:do-not-save="componentOptions.doNotSave"
 								:field-only="componentOptions.fieldOnly"
 								:icon-false="componentOptions.iconFalse"
 								:icon-false-title="componentOptions.iconFalseTitle"
 								:icon-true="componentOptions.iconTrue"
 								:icon-true-title="componentOptions.iconTrueTitle"
 								:item="item"
 								:label="componentOptions.label"
+								:loading="item.raw.loading"
 								name="active"
 								:underline-color="componentOptions.underlineColor"
 								:underline-style="componentOptions.underlineStyle"
 								:underline-width="componentOptions.underlineWidth"
 								:underlined="componentOptions.underlined"
 								@error="showError = $event"
-								@loading="loading = $event"
-								@update="updatedValue($event, 'switch')"
+								@update="updatedValue(item.raw, 'reviewed')"
 							/>
 						</template>
+
 						<template #[`item.userId`]="{ item }">
 							<VInlineSelect
 								v-model="item.raw.user"
 								:align-items="componentOptions.alignItems"
-								api-route="api/posts"
 								:cancel-button-color="componentOptions.cancelButtonColor"
 								:cancel-button-variant="componentOptions.cancelButtonVariant"
 								:cancel-icon-color="componentOptions.cancelIconColor"
@@ -54,7 +52,6 @@
 								:color="componentOptions.color"
 								:density="componentOptions.density"
 								:disabled="componentOptions.disabled"
-								:do-not-save="componentOptions.doNotSave"
 								:empty-text="componentOptions.emptyText"
 								:field-only="componentOptions.fieldOnly"
 								:hide-details="componentOptions.hideDetails"
@@ -64,8 +61,9 @@
 								item-value="id"
 								:items="users"
 								:label="componentOptions.label"
+								:loading="item.raw.loading"
 								:menu="componentOptions.menu"
-								name="active"
+								name="userId"
 								:return-object="true"
 								:save-button-color="componentOptions.saveButtonColor"
 								:save-icon="componentOptions.saveIcon"
@@ -77,8 +75,7 @@
 								:underlined="componentOptions.underlined"
 								:variant="componentOptions.variant"
 								@error="showError = $event"
-								@loading="loading = $event"
-								@update="updatedValue($event, 'select')"
+								@update="updatedValue(item.raw, 'userId')"
 							>
 							</VInlineSelect>
 						</template>
@@ -87,7 +84,6 @@
 							<VInlineTextField
 								v-model="item.raw.title"
 								:align-items="componentOptions.alignItems"
-								api-route="api/posts"
 								:cancel-button-color="componentOptions.cancelButtonColor"
 								:cancel-button-variant="componentOptions.cancelButtonVariant"
 								:cancel-icon-color="componentOptions.cancelIconColor"
@@ -96,11 +92,11 @@
 								:color="componentOptions.color"
 								:density="componentOptions.density"
 								:disabled="componentOptions.disabled"
-								:do-not-save="componentOptions.doNotSave"
 								:field-only="componentOptions.fieldOnly"
 								:hide-details="componentOptions.hideDetails"
 								:item="item"
 								:label="componentOptions.label"
+								:loading="item.raw.loading"
 								name="title"
 								required
 								:save-button-color="componentOptions.saveButtonColor"
@@ -113,16 +109,14 @@
 								:underlined="componentOptions.underlined"
 								:variant="componentOptions.variant"
 								@error="showError = $event"
-								@loading="loading = $event"
-								@update="updatedValue($event, 'text-field')"
+								@update="updatedValue(item.raw, 'title')"
 							/>
 						</template>
 
 						<template #[`item.body`]="{ item }">
 							<VInlineTextarea
 								v-model="item.raw.body"
 								:align-items="componentOptions.alignItems"
-								api-route="api/posts"
 								:cancel-button-color="componentOptions.cancelButtonColor"
 								:cancel-button-variant="componentOptions.cancelButtonVariant"
 								:cancel-icon-color="componentOptions.cancelIconColor"
@@ -131,11 +125,11 @@
 								:color="componentOptions.color"
 								:density="componentOptions.density"
 								:disabled="componentOptions.disabled"
-								:do-not-save="componentOptions.doNotSave"
 								:field-only="componentOptions.fieldOnly"
 								:hide-details="false"
 								:item="item"
 								:label="componentOptions.label"
+								:loading="item.raw.loading"
 								name="body"
 								:rules="[componentOptions.rules.required, componentOptions.rules.minLength]"
 								:save-button-color="componentOptions.saveButtonColor"
@@ -148,16 +142,14 @@
 								:underlined="componentOptions.underlined"
 								:variant="componentOptions.variant"
 								@error="showError = $event"
-								@loading="loading = $event"
-								@update="updatedValue($event, 'textarea')"
+								@update="updatedValue(item.raw, 'body')"
 							/>
 						</template>
 
 						<template #[`item.reviewed`]="{ item }">
 							<VInlineCheckbox
 								v-model="item.raw.reviewed"
 								:align-items="componentOptions.alignItems"
-								api-route="api/posts"
 								:cancel-button-color="componentOptions.cancelButtonColor"
 								:cancel-button-variant="componentOptions.cancelButtonVariant"
 								:cancel-icon-color="componentOptions.cancelIconColor"
@@ -166,7 +158,6 @@
 								:color="componentOptions.color"
 								:density="componentOptions.density"
 								:disabled="componentOptions.disabled"
-								:do-not-save="componentOptions.doNotSave"
 								:field-only="componentOptions.fieldOnly"
 								:icon-false-title="componentOptions.iconFalseTitle"
 								:icon-true-title="componentOptions.iconTrueTitle"
@@ -177,8 +168,7 @@
 								:underline-width="componentOptions.underlineWidth"
 								:underlined="componentOptions.underlined"
 								@error="showError = $event"
-								@loading="loading = $event"
-								@update="updatedValue($event, 'checkbox')"
+								@update="updatedValue(item.raw, 'reviewed')"
 							/>
 						</template>
 					</v-data-table>
@@ -218,11 +208,10 @@ const componentOptions = reactive({
 	cancelIcon: undefined,
 	cancelIconColor: 'default',
 	cancelIconText: 'Cancel',
-	closeSiblings: false,
+	closeSiblings: true,
 	color: 'primary',
 	density: 'compact',
 	disabled: false,
-	doNotSave: false,
 	emptyText: 'empty',
 	fieldOnly: false,
 	hideDetails: true,
@@ -290,12 +279,14 @@ const headers = [
 
 let posts = ref();
 const users = ref(null);
-const loading = ref(false);
 const showError = ref(false);
+const apiPostsRoute = 'api/posts';
+const apiUsersRoute = 'api/users';
 
 function getPosts() {
 	tableOptions.loading = true;
-	fetch('api/posts')
+
+	fetch(apiPostsRoute)
 		.then((response) => response.json())
 		.then((json) => {
 			posts = [...json.posts];
@@ -304,7 +295,7 @@ function getPosts() {
 };
 
 function getUsers() {
-	fetch('api/users')
+	fetch(apiUsersRoute)
 		.then((response) => response.json())
 		.then((json) => {
 			users.value = json.users.map((user) => ({
@@ -314,17 +305,18 @@ function getUsers() {
 		});
 };
 
+
 /**
- * ? You can use this function to update the value in the database.
- * ? Instead of using the internal axios call.
- *
- * @param {any} val
- * @param {string} field
+ * ? This is where you would save the item in the database.
  */
-// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
-function updatedValue(val, field) {
-	// Save updated values
-	console.log('updatedValue', val, field);
+function updatedValue(item, field) {
+	console.log('PlaygroundPage.vue: updatedValue', field, item);
+	item.loading = true;
+
+	// ? Simulate a delay while item is saving.
+	setTimeout(() => {
+		item.loading = false;
+	}, 1500);
 }
 </script>