Napisałem aplikację w Vue.js. organization-unit-selector przy zmianie wartości wysyła request do /api/services/app/PrinterPosnet/Search, jednak bez wartości OrganizationUnitId, co powoduje że filtrowanie nie działa. Zmodyfikuj pliki, aby filtrowanie działało prawidłowo.

/// printers-posnet-view.vue

<template>

/// organizatiom-unit-selector.vue

<template>
  <v-autocomplete
    v-model="model"
    dense
    :items="items"
    hide-details
    :readonly="readonly"
    :filled="readonly"
    item-text="formatted"
    item-value="id"
    label="Oddział"
    :rules="rules"
    outlined
    :clearable="!required"
    :loading="isLoading"
    placeholder="Dowolny" />
</template>
<script lang="ts">
import { computed, defineComponent, inject, onMounted, ref, watch } from "@vue/composition-api";
import AppState from "@/views/main-wrap/app-state";
import { RulesUtils } from "@/lib/rules-utils";
import GovServiceEntityIds from "@/views/commerce/gov-services/gov-service-entity-ids";
import axios from "@/lib/axios";

const OrganizationUnitSelector = defineComponent({
  components: {},
  props: {
    value: {
      type: Number,
      required: true
    },
    staffId: {
      type: Number,
      required: false,
      default: null
    },
    readonly: {
      type: Boolean,
      required: false,
      default: false
    },
    required: {
      type: Boolean,
      required: false,
      default: false
    }
  },

  setup(props, context) {
    const appState = inject(AppState.Key) as AppState;
    const model = ref(props.value);
    const isLoading = ref(true);

    const staffOrganizationUnitIds = ref(new Set<number>());

    const items = computed(() => {
      if (props.staffId == null) return appState.orgUnits;
      return appState.orgUnits.filter(v => staffOrganizationUnitIds.value.has(v.id));
    });

    const loadData = async (staffId: number | null) => {
      isLoading.value = true;
      if (props.staffId != null)
        staffOrganizationUnitIds.value = GovServiceEntityIds.fromBaseDto(
          (
            await axios.get("/api/services/app/MedicalStaff/GetEntityIds", {
              params: { id: staffId }
            })
          ).data.result
        ).organizationUnitIds;
      isLoading.value = false;
    };

    onMounted(async () => await loadData(props.staffId));

    watch(
      () => props.value,
      (nv, _) => {
        if (nv !== model.value) model.value = nv;
      }
    );

    watch(
      () => props.staffId,
      async (nv, _) => await loadData(nv)
    );

    watch(model, (nv, _) => context.emit("input", nv));

    const rules = computed(() => (props.required && !props.readonly ? RulesUtils.NotEmpty : []));

    return { model, items, rules, isLoading };
  }
});

export default OrganizationUnitSelector;
</script>

  <loading-container :is-loaded="pagedState.isLoaded">
    <v-overlay v-if="pagedState.isCardVisible" z-index="10" :dark="false">
      <printer-posnet-card
        :readonly="pagedState.readonly"
        :value="pagedState.selectedId"
        @close="v => pagedState.onCardClose(v)" />
    </v-overlay>
    <v-row dense align="center">
      <v-col cols="4">
        <organization-unit-selector v-model="pagedState.query.organizationUnitId" />
      </v-col>
      <v-col cols="4">
        <search-input v-model="pagedState.query.searchPhrase" />
      </v-col>
    </v-row>

    <paged-data-iterator v-model="pagedState.query.pagedModel" :paged-items="pagedState">
      <template #default="{ item, idx }">
        <printer-posnet-row
          :key="item.id"
          :value="item"
          :readonly="pagedState.readonly"
          @select="() => pagedState.select(item.id)"
          @update="() => pagedState.onSearchUpdate()" />
      </template>
    </paged-data-iterator>

  </loading-container>
</template>

<script lang="ts">
import { defineComponent } from "@vue/composition-api";
import LoadingContainer from "@/components/loading/loading-container.vue";
import SearchInput from "@/components/simple/search-input.vue";
import AddItemButton from "@/components/simple/add-item-button.vue";
import PrinterPosnet from "@/views/commerce/printers-posnet/printer-posnet";
import PrinterPosnetCard from "@/views/commerce/printers-posnet/printer-posnet-card.vue";
import PrinterPosnetRow from "@/views/commerce/printers-posnet/printer-posnet-row.vue";
import PagedDataIterator from "@/components/paging/paged-data-iterator.vue";
import { usePagedSearch } from "@/components/paging/paged-view-helpers";
import { PermissionNames } from "@/lib/permissions";
import type { PagedSearchOptions } from "@/components/paging/paged-search-options";
import { PrinterPosnetQuery } from "@/views/commerce/printers-posnet/printers-posnet-query";
import OrganizationUnitSelector from "@/views/commerce/common/selectors/organization-unit-selector.vue";

const PrintersPosnetsView = defineComponent({
  components: {
    PagedDataIterator,
    PrinterPosnetRow,
    PrinterPosnetCard,
    OrganizationUnitSelector,
    AddItemButton,
    SearchInput,
    LoadingContainer
  },

  props: {},

  setup(props, context) {
    const options: PagedSearchOptions<PrinterPosnetQuery> = {
      addItemButton: true,
      editPermission: PermissionNames.Printers_Manage,
      fixedQuerySetup: q => {
      }
    };

    const pagedState = usePagedSearch(
      PrinterPosnet.fromDto,
      PrinterPosnetQuery,
      "/api/services/app/PrinterPosnet/Search",
      context,
      options
    );

    return {
      pagedState
    };
  }
});

export default PrintersPosnetsView;
</script>

/// printer-posnet-row.vue

<template>
    <v-row align="center">
    <v-col>
      <v-row dense>
        <v-col cols="auto">
          <span :class="{ 'text-body-2': true, 'text--bold': true }" v-text="value.displayName"></span>
        </v-col>
      </v-row>
    </v-col>
    <v-col cols="auto">
      <div class="text-body-2" style="min-width: 100px" v-text="value.target.name"></div>
    </v-col>
    <v-col cols="1" class="px-2">
      <span class="text-body-2"><strong>{{ value.name }}</strong>
      </span>
      <div class="text-caption">
        IP: {{ value.ipAddress }}
      </div>
    </v-col>

    <v-col cols="auto" class="pt-2">
      <edit-async-delete-buttons :readonly="readonly" :delete-action="onDelete" @select="select" />
    </v-col>
  </v-row>
</template>

<script lang="ts">
import type { PropType } from "@vue/composition-api";
import { defineComponent, inject, ref } from "@vue/composition-api";
import axios from "@/lib/axios";
import AppState from "@/views/main-wrap/app-state";
import StateMappings from "@/views/main-wrap/state-mappings";
import SubmitButton from "@/components/action-buttons/submit-button.vue";
import TooltipIcon from "@/components/simple/tooltip-icon.vue";
import InlineIcon from "@/components/simple/inline-icon.vue";
import TextUtils from "@/lib/text-utils";
import type PrinterPosnet from "@/views/commerce/printers-posnet/printer-posnet";
import EditAsyncDeleteButtons from "@/components/action-buttons/edit-async-delete-buttons.vue";

const PrinterPosnetRow = defineComponent({
  components: {
    EditAsyncDeleteButtons,
    InlineIcon,
    TooltipIcon,
    SubmitButton
  },
  props: {
    value: {
      type: Object as PropType<PrinterPosnet>,
      required: true
    },
    readonly: {
      type: Boolean,
      required: false,
      default: false
    }
  },

  emits: ["update", "select"],

  setup(props, context) {
    const appState = inject(AppState.Key) as AppState;
    const stateMappings = ref(StateMappings.create(appState));

    const onDelete = async () => {
      await axios.delete(`/api/services/app/PrinterPosnet/${props.value.id}`);
      context.emit("update");
    };

    return {
      stateMappings,
      onDelete,
      trim: TextUtils.trim,
      select: () => context.emit("select")
    };
  }
});

export default PrinterPosnetRow;
</script>

/// printers-posnet-query.ts

import { PagedTextQuery } from "@/views/commerce/common/paged-text-query";

export class PrinterPosnetQuery extends PagedTextQuery {
  target: string | null = null;
  organizationUnitId: number | null = null;

  get serializableQuery(): any {
    return this.nonDefaultValues(new PrinterPosnetQuery());
  }

  get dto(): any {
    return {
      ...super.dto,
      target: this.target,
      organizationUnitId: this.organizationUnitId
    };
  }
}