feat: #294 add cache prop to c-select and c-select-many-to-many

IntelliTect · Sep 26, 2023 · 261ace9 · 261ace9
1 parent 9594ade
commit 261ace9
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 2 deletions.
diff --git a/docs/stacks/vue/coalesce-vue-vuetify/components/c-select-many-to-many.md b/docs/stacks/vue/coalesce-vue-vuetify/components/c-select-many-to-many.md
@@ -60,6 +60,10 @@ If binding the component with ``v-model``, accepts the ``value`` part of ``v-mod
 <Prop def="params?: ListParameters" lang="ts" />
 
 An optional set of [Data Source Standard Parameters](/modeling/model-components/data-sources.md#standard-parameters) to pass to API calls made to the server.
+
+<Prop def="cache?: ResponseCachingConfiguration | boolean" lang="ts" />
+
+If provided and non-false, enables [response caching](/stacks/vue/layers/api-clients.html#response-caching) on the component's internal API caller.
 
 
 ## Events

diff --git a/docs/stacks/vue/coalesce-vue-vuetify/components/c-select.md b/docs/stacks/vue/coalesce-vue-vuetify/components/c-select.md
@@ -104,6 +104,10 @@ If true, the list results will be reloaded when the dropdown menu is opened. By
 
 An optional set of [Data Source Standard Parameters](/modeling/model-components/data-sources.md#standard-parameters) to pass to API calls made to the server.
 
+<Prop def="cache?: ResponseCachingConfiguration | boolean" lang="ts" />
+
+If provided and non-false, enables [response caching](/stacks/vue/layers/api-clients.html#response-caching) on the component's internal API callers.
+
 <Prop def="create?: {
   getLabel: (search: string, items: TModel[]) => string | false,
   getItem: (search: string, label: string) => Promise<TModel>

diff --git a/src/coalesce-vue-vuetify2/src/components/input/c-select-many-to-many.vue b/src/coalesce-vue-vuetify2/src/components/input/c-select-many-to-many.vue
@@ -57,6 +57,16 @@ export default defineComponent({
     ...makeMetadataProps(),
     value: { required: false, type: Array },
     params: { required: false, type: Object as PropType<ListParameters> },
+
+    /** Response caching configuration for the `/get` and `/list` API calls made by the component.
+     * See https://intellitect.github.io/Coalesce/stacks/vue/layers/api-clients.html#response-caching. */
+    cache: {
+      required: false,
+      type: [Object, Boolean] as PropType<
+        ResponseCachingConfiguration | boolean
+      >,
+      default: false as any,
+    },
   },
 
   data() {
@@ -345,6 +355,16 @@ export default defineComponent({
       })
       .setConcurrency("debounce");
 
+    this.$watch(
+      () => this.cache,
+      () => {
+        this.listCaller.useResponseCaching(
+          this.cache === true ? {} : this.cache
+        );
+      },
+      { immediate: true }
+    );
+
     this.$watch(
       () => JSON.stringify(mapParamsToDto(this.listParams)),
       () => {

diff --git a/src/coalesce-vue-vuetify2/src/components/input/c-select.vue b/src/coalesce-vue-vuetify2/src/components/input/c-select.vue
@@ -94,6 +94,7 @@ import {
   getMessageForError,
   mapValueToModel,
   modelDisplay,
+  ResponseCachingConfiguration,
 } from "coalesce-vue";
 
 export default defineComponent({
@@ -123,6 +124,17 @@ export default defineComponent({
     openOnClear: { required: false, type: Boolean, default: true },
     reloadOnOpen: { required: false, type: Boolean, default: false },
     params: { required: false, type: Object as PropType<ListParameters> },
+
+    /** Response caching configuration for the `/get` and `/list` API calls made by the component.
+     * See https://intellitect.github.io/Coalesce/stacks/vue/layers/api-clients.html#response-caching. */
+    cache: {
+      required: false,
+      type: [Object, Boolean] as PropType<
+        ResponseCachingConfiguration | boolean
+      >,
+      default: false as any,
+    },
+
     create: {
       required: false,
       type: Object as PropType<{
@@ -534,6 +546,19 @@ export default defineComponent({
       })
       .setConcurrency("debounce");
 
+    this.$watch(
+      () => this.cache,
+      () => {
+        this.getCaller.useResponseCaching(
+          this.cache === true ? {} : this.cache
+        );
+        this.listCaller.useResponseCaching(
+          this.cache === true ? {} : this.cache
+        );
+      },
+      { immediate: true }
+    );
+
     this.$watch(
       () => JSON.stringify(mapParamsToDto(this.params)),
       () => this.listCaller()

diff --git a/src/coalesce-vue-vuetify3/src/components/input/c-select-many-to-many.vue b/src/coalesce-vue-vuetify3/src/components/input/c-select-many-to-many.vue
@@ -38,6 +38,7 @@ import {
   ApiState,
   Indexable,
   ModelCollectionNavigationProperty,
+  ResponseCachingConfiguration,
 } from "coalesce-vue";
 
 import { defineComponent, PropType } from "vue";
@@ -58,6 +59,16 @@ export default defineComponent({
     ...makeMetadataProps(),
     modelValue: { required: false, type: Array },
     params: { required: false, type: Object as PropType<ListParameters> },
+
+    /** Response caching configuration for the `/get` and `/list` API calls made by the component.
+     * See https://intellitect.github.io/Coalesce/stacks/vue/layers/api-clients.html#response-caching. */
+    cache: {
+      required: false,
+      type: [Object, Boolean] as PropType<
+        ResponseCachingConfiguration | boolean
+      >,
+      default: false as any,
+    },
   },
 
   data() {
@@ -368,7 +379,17 @@ export default defineComponent({
       .$makeCaller("list", (c) => {
         return c.list(this.listParams);
       })
-      .setConcurrency("debounce");
+      .setConcurrency("debou nce");
+
+    this.$watch(
+      () => this.cache,
+      () => {
+        this.listCaller.useResponseCaching(
+          this.cache === true ? {} : this.cache
+        );
+      },
+      { immediate: true }
+    );
 
     this.$watch(
       () => JSON.stringify(mapParamsToDto(this.listParams)),

diff --git a/src/coalesce-vue-vuetify3/src/components/input/c-select.vue b/src/coalesce-vue-vuetify3/src/components/input/c-select.vue
@@ -225,6 +225,7 @@ import {
   Indexable,
   ModelValue,
   AnyArgCaller,
+  ResponseCachingConfiguration,
 } from "coalesce-vue";
 
 export default defineComponent({
@@ -259,6 +260,17 @@ export default defineComponent({
     openOnClear: { required: false, type: Boolean, default: true },
     reloadOnOpen: { required: false, type: Boolean, default: false },
     params: { required: false, type: Object as PropType<ListParameters> },
+
+    /** Response caching configuration for the `/get` and `/list` API calls made by the component.
+     * See https://intellitect.github.io/Coalesce/stacks/vue/layers/api-clients.html#response-caching. */
+    cache: {
+      required: false,
+      type: [Object, Boolean] as PropType<
+        ResponseCachingConfiguration | boolean
+      >,
+      default: false as any,
+    },
+
     create: {
       required: false,
       type: Object as PropType<{
@@ -756,6 +768,19 @@ export default defineComponent({
       () => this.listCaller()
     );
 
+    this.$watch(
+      () => this.cache,
+      () => {
+        this.getCaller.useResponseCaching(
+          this.cache === true ? {} : this.cache
+        );
+        this.listCaller.useResponseCaching(
+          this.cache === true ? {} : this.cache
+        );
+      },
+      { immediate: true }
+    );
+
     this.$watch(
       () => this.pendingSelection,
       async () => {

diff --git a/src/coalesce-vue-vuetify3/test/util.ts b/src/coalesce-vue-vuetify3/test/util.ts
@@ -44,7 +44,7 @@ const mountVuetify = function (
           routes: [
             {
               path: "/",
-              component: () => h("div"),
+              component: async () => h("div"),
             },
             {
               path: "/admin/:type",