feat: Search and Filter definition for Instrument Picker done.

apps/user-office-backend/src/models/questionTypes/InstrumentPicker.ts

@@ -1,6 +1,8 @@
+/* eslint-disable quotes */
 import { GraphQLError } from 'graphql';
 
 import { InstrumentPickerConfig } from '../../resolvers/types/FieldConfig';
+import { QuestionFilterCompareOperator } from '../Questionary';
 import { DataType, QuestionTemplateRelation } from '../Template';
 import { Question } from './QuestionRegistry';
 
@@ -23,4 +25,15 @@ export const instrumentPickerDefinition: Question = {
     return config;
   },
   getDefaultAnswer: () => null,
+  filterQuery: (queryBuilder, filter) => {
+    const value = JSON.parse(filter.value).value;
+    switch (filter.compareOperator) {
+      case QuestionFilterCompareOperator.EQUALS:
+        return queryBuilder.andWhereRaw("answers.answer->>'value'=?", value);
+      default:
+        throw new GraphQLError(
+          `Unsupported comparator for SelectionFromOptions ${filter.compareOperator}`
+        );
+    }
+  },
 };

apps/user-office-frontend/src/components/common/proposalFilters/QuestionaryFilter.tsx

@@ -5,7 +5,9 @@ import React, { FC, useEffect, useState } from 'react';
 
 import { getQuestionaryComponentDefinition } from 'components/questionary/QuestionaryComponentRegistry';
 import {
+  Call,
   GetTemplateQuery,
+  InputMaybe,
   QuestionFilterCompareOperator,
   QuestionFilterInput,
   QuestionTemplateRelation,
@@ -25,6 +27,7 @@ export interface SearchCriteria {
 
 interface QuestionaryFilterProps {
   templateId: number;
+  callId?: InputMaybe<Call['id']>;
   onSubmit?: (questionFilter?: QuestionFilterInput) => void;
 }
 
@@ -68,7 +71,11 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-function QuestionaryFilter({ templateId, onSubmit }: QuestionaryFilterProps) {
+function QuestionaryFilter({
+  templateId,
+  onSubmit,
+  callId,
+}: QuestionaryFilterProps) {
   const { template, isLoadingTemplate } = useTemplate(templateId);
   const classes = useStyles();
 
@@ -163,6 +170,7 @@ function QuestionaryFilter({ templateId, onSubmit }: QuestionaryFilterProps) {
                 });
               }}
               questionTemplateRelation={selectedQuestion}
+              callId={callId}
             />
           )}
         </Collapse>

apps/user-office-frontend/src/components/proposal/ProposalFilterBar.tsx

@@ -138,6 +138,7 @@ const ProposalFilterBar: React.FC<ProposalFilterBarProps> = ({
       {selectedCallTemplateId && (
         <Collapse in={showQuestionFilter}>
           <QuestionaryFilter
+            callId={filter.callId}
             templateId={selectedCallTemplateId}
             onSubmit={(questionFilter) => {
               setProposalFilter({

apps/user-office-frontend/src/components/proposal/SearchCriteriaInputProps.tsx

@@ -1,4 +1,6 @@
 import {
+  Call,
+  InputMaybe,
   QuestionFilterCompareOperator,
   QuestionTemplateRelationFragment,
 } from 'generated/sdk';
@@ -12,4 +14,5 @@ export interface SearchCriteriaInputProps {
     value: string | number | boolean | unknown[] | null
   ) => unknown;
   questionTemplateRelation: QuestionTemplateRelationFragment;
+  callId?: InputMaybe<Call['id']>;
 }

apps/user-office-frontend/src/components/questionary/questionaryComponents/InstrumentPicker/InstrumentPickerDefinition.tsx

@@ -6,8 +6,8 @@ import defaultRenderer from 'components/questionary/DefaultQuestionRenderer';
 import { DataType } from 'generated/sdk';
 
 import { QuestionaryComponentDefinition } from '../../QuestionaryComponentRegistry';
-import MultipleChoiceSearchCriteriaComponent from '../MultipleChoice/MultipleChoiceSearchCriteriaComponent';
 import InstrumentPickerAnswerRenderer from './InstrumentPickerAnswerRenderer';
+import InstrumentPickerSearchCriteriaComponent from './InstrumentPickerSearchCriteriaComponent';
 import { QuestionaryComponentInstrumentPicker } from './QuestionaryComponentInstrumentPicker';
 import { QuestionInstrumentPickerForm } from './QuestionInstrumentPickerForm';
 import { QuestionTemplateRelationInstrumentPickerForm } from './QuestionTemplateRelationInstrumentPickerForm';
@@ -28,7 +28,7 @@ export const instrumentPickerDefinition: QuestionaryComponentDefinition = {
   },
   createYupValidationSchema: instrumentPickerValidationSchema,
   getYupInitialValue: ({ answer }) => answer.value || null,
-  searchCriteriaComponent: MultipleChoiceSearchCriteriaComponent,
+  searchCriteriaComponent: InstrumentPickerSearchCriteriaComponent,
 };
 
 export {};

apps/user-office-frontend/src/components/questionary/questionaryComponents/InstrumentPicker/InstrumentPickerSearchCriteriaComponent.tsx

@@ -0,0 +1,49 @@
+import { Grid, TextField, Autocomplete } from '@mui/material';
+import React, { useState } from 'react';
+
+import {
+  Call,
+  InstrumentWithAvailabilityTime,
+  QuestionFilterCompareOperator,
+} from 'generated/sdk';
+import { useCallData } from 'hooks/call/useCallData';
+
+import { SearchCriteriaInputProps } from '../../../proposal/SearchCriteriaInputProps';
+
+function InstrumentPickerSearchCriteriaComponent({
+  onChange,
+  callId,
+}: SearchCriteriaInputProps) {
+  const [value, setValue] = useState<InstrumentWithAvailabilityTime | null>(
+    null
+  );
+
+  const { call } = useCallData(callId);
+
+  return (
+    <Grid container spacing={2}>
+      <Grid item xs={12}>
+        <Autocomplete
+          id="answer"
+          options={call?.instruments ?? []}
+          getOptionLabel={(option) => option.name as string}
+          renderInput={(params) => (
+            <TextField {...params} margin="none" label="Answer" />
+          )}
+          onChange={(_event, newValue) => {
+            setValue(newValue);
+            if (!newValue) return;
+            onChange(
+              QuestionFilterCompareOperator.EQUALS,
+              newValue.id as Call['id']
+            );
+          }}
+          value={value}
+          data-cy="value"
+        />
+      </Grid>
+    </Grid>
+  );
+}
+
+export default InstrumentPickerSearchCriteriaComponent;

apps/user-office-frontend/src/hooks/call/useCallData.ts

@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react';
 
-import { Call } from 'generated/sdk';
+import { Call, InputMaybe } from 'generated/sdk';
 import { useDataApi } from 'hooks/common/useDataApi';
 
-export function useCallData(callId: number | undefined) {
+export function useCallData(callId?: InputMaybe<Call['id']>) {
   const [call, setCall] = useState<Call | null>(null);
   const [loading, setLoading] = useState(true);