🚀 feat(ObservationForm.tsx): handle title as a tag

src/locales/en/translation.json

@@ -856,6 +856,8 @@
   "__VIDEO_PAGE_ACTIONS_OBSERVATION_FORM_FIELD_TAGS_SHOW_MORE_other": "",
   "__VIDEO_PAGE_ACTIONS_OBSERVATION_FORM_FIELD_TITLE_ERROR": "You must insert a title",
   "__VIDEO_PAGE_ACTIONS_OBSERVATION_FORM_FIELD_TITLE_LABEL": "Title",
+  "__VIDEO_PAGE_ACTIONS_OBSERVATION_FORM_FIELD_TITLE_MAX_ERROR": "You must insert a title between 1 and 40 characters",
+  "__VIDEO_PAGE_ACTIONS_OBSERVATION_FORM_FIELD_TITLE_NO_MATCHING_TITLES": "No matching titles",
   "__VIDEO_PAGE_ACTIONS_OBSERVATION_FORM_FIELD_TITLE_PLACEHOLDER": "Add a title to identify this observation",
   "__VIDEO_PAGE_ACTIONS_OBSERVATION_FORM_SAVE_BUTTON": "Save",
   "__VIDEO_PAGE_ACTIONS_OBSERVATION_FORM_SAVE_TOAST_SUCCESS": "Observation saved successfully",

src/locales/it/translation.json

@@ -881,6 +881,8 @@
   "__VIDEO_PAGE_ACTIONS_OBSERVATION_FORM_FIELD_TAGS_SHOW_MORE_other": "",
   "__VIDEO_PAGE_ACTIONS_OBSERVATION_FORM_FIELD_TITLE_ERROR": "Devi inserire un titolo",
   "__VIDEO_PAGE_ACTIONS_OBSERVATION_FORM_FIELD_TITLE_LABEL": "Titolo",
+  "__VIDEO_PAGE_ACTIONS_OBSERVATION_FORM_FIELD_TITLE_MAX_ERROR": "Devi inserire un titolo compreso tra 1 e 40 caratteri",
+  "__VIDEO_PAGE_ACTIONS_OBSERVATION_FORM_FIELD_TITLE_NO_MATCHING_TITLES": "Nessun titolo trovato",
   "__VIDEO_PAGE_ACTIONS_OBSERVATION_FORM_FIELD_TITLE_PLACEHOLDER": "Inserisci un titolo per identificare l'osservazione",
   "__VIDEO_PAGE_ACTIONS_OBSERVATION_FORM_SAVE_BUTTON": "Salva",
   "__VIDEO_PAGE_ACTIONS_OBSERVATION_FORM_SAVE_TOAST_SUCCESS": "Osservazione salvata con successo",

src/pages/Video/components/Observation.tsx

@@ -50,7 +50,7 @@ const Observation = ({
   refScroll: React.RefObject<HTMLDivElement>;
   transcript?: GetVideosByVidApiResponse['transcript'];
 }) => {
-  const { title, start, end } = observation;
+  const { tags, start, end } = observation;
   const [isOpen, setIsOpen] = useState(false);
   const { openAccordion, setOpenAccordion } = useVideoContext();
   const { campaignId, videoId } = useParams();
@@ -60,6 +60,9 @@ const Observation = ({
   const { addToast } = useToast();
   const { t } = useTranslation();
 
+  const title = tags.find((tag) => tag.group.name.toLowerCase() === 'title')
+    ?.tag.name;
+
   const quots = transcript?.paragraphs
     .flatMap((paragraph) =>
       paragraph.words.filter(
@@ -194,7 +197,7 @@ const Observation = ({
               </Circle>
               <div>
                 <StyledTitle>
-                  <LG isBold>{title} </LG>
+                  <LG isBold>{title}</LG>
                 </StyledTitle>
               </div>
               <Tooltip

src/pages/Video/components/ObservationForm.tsx

@@ -5,7 +5,6 @@ import { styled } from 'styled-components';
 import { appTheme } from 'src/app/theme';
 import {
   Button,
-  Input,
   Label,
   Message,
   MultiSelect,
@@ -28,6 +27,7 @@ import { Field as FormField } from '@zendeskgarden/react-forms';
 import { useEffect, useRef, useState } from 'react';
 import { getColorWithAlpha } from 'src/common/utils';
 import { ConfirmDeleteModal } from './ConfirmDeleteModal';
+import { ObservationFormValues, TitleDropdown } from './TitleDropdown';
 
 const FormContainer = styled.div`
   padding: ${({ theme }) => theme.space.md} ${({ theme }) => theme.space.xxs};
@@ -54,12 +54,6 @@ const RadioTag = styled(Tag)<{
   }
 `;
 
-interface ObservationFormValues {
-  title: string;
-  severity: number;
-  notes: string;
-}
-
 const ObservationForm = ({
   observation,
   quots,
@@ -89,7 +83,11 @@ const ObservationForm = ({
     { id: number; label: string }[]
   >(
     observation.tags
-      ?.filter((tag) => tag.group.name.toLowerCase() !== 'severity')
+      ?.filter(
+        (tag) =>
+          tag.group.name.toLowerCase() !== 'severity' &&
+          tag.group.name.toLowerCase() !== 'title'
+      )
       .map((tag) => ({
         id: tag.tag.id,
         label: tag.tag.name,
@@ -108,9 +106,9 @@ const ObservationForm = ({
   });
 
   const validationSchema = Yup.object().shape({
-    title: Yup.string().required(
-      t('__VIDEO_PAGE_ACTIONS_OBSERVATION_FORM_FIELD_TITLE_ERROR')
-    ),
+    title: Yup.number()
+      .min(1, t('__VIDEO_PAGE_ACTIONS_OBSERVATION_FORM_FIELD_TITLE_ERROR'))
+      .required(t('__VIDEO_PAGE_ACTIONS_OBSERVATION_FORM_FIELD_TITLE_ERROR')),
     severity: Yup.number()
       .min(1, t('__VIDEO_PAGE_ACTIONS_OBSERVATION_FORM_FIELD_SEVERITY_ERROR'))
       .required(
@@ -122,11 +120,19 @@ const ObservationForm = ({
     (tag) => tag.group.name.toLowerCase() === 'severity'
   )?.[0];
 
+  const titles = tags?.filter(
+    (tag) => tag.group.name.toLowerCase() === 'title'
+  )?.[0];
+
   useEffect(() => {
     if (tags) {
       setOptions(
         tags
-          .filter((group) => group.group.name.toLowerCase() !== 'severity')
+          .filter(
+            (group) =>
+              group.group.name.toLowerCase() !== 'severity' &&
+              group.group.name.toLowerCase() !== 'title'
+          )
           .map((group) =>
             group.tags.map((tag) => ({
               id: tag.id,
@@ -140,7 +146,9 @@ const ObservationForm = ({
   }, [tags, selectedOptions]);
 
   const formInitialValues = {
-    title: observation?.title || '',
+    title:
+      observation?.tags?.find((tag) => tag.group.name.toLowerCase() === 'title')
+        ?.tag.id || 0,
     severity:
       observation?.tags?.find(
         (tag) => tag.group.name.toLowerCase() === 'severity'
@@ -157,11 +165,14 @@ const ObservationForm = ({
       vid: videoId ?? '',
       oid: observation.id.toString(),
       body: {
-        title: values.title,
         description: values.notes,
         start: observation.start,
         end: observation.end,
-        tags: [...selectedOptions.map((tag) => tag.id), values.severity],
+        tags: [
+          ...selectedOptions.map((tag) => tag.id),
+          values.severity,
+          values.title,
+        ],
       },
     })
       .unwrap()
@@ -210,33 +221,29 @@ const ObservationForm = ({
           validationSchema={validationSchema}
           onSubmit={onSubmitPatch}
         >
-          {({
-            errors,
-            getFieldProps,
-            handleSubmit,
-            ...formProps
-          }: FormikProps<ObservationFormValues>) => (
+          {(formProps: FormikProps<ObservationFormValues>) => (
             <Form
-              onSubmit={handleSubmit}
+              onSubmit={formProps.handleSubmit}
               style={{ marginBottom: appTheme.space.sm }}
             >
               <StyledLabel>
                 {t('__VIDEO_PAGE_ACTIONS_OBSERVATION_FORM_FIELD_TITLE_LABEL')}
               </StyledLabel>
-              <Input
-                style={{ margin: 0 }}
-                placeholder={t(
-                  '__VIDEO_PAGE_ACTIONS_OBSERVATION_FORM_FIELD_TITLE_PLACEHOLDER'
-                )}
-                {...getFieldProps('title')}
-                {...(errors.title && { validation: 'error' })}
+              <TitleDropdown
+                titles={titles?.tags}
+                title={
+                  observation.tags?.find(
+                    (tag) => tag.group.name.toLowerCase() === 'title'
+                  )?.tag
+                }
+                formProps={formProps}
               />
-              {errors.title && (
+              {formProps.errors.title && (
                 <Message
                   validation="error"
                   style={{ marginTop: appTheme.space.sm }}
                 >
-                  {errors.title}
+                  {formProps.errors.title}
                 </Message>
               )}
               {severities && severities.tags.length > 0 && (
@@ -291,12 +298,12 @@ const ObservationForm = ({
                           </RadioTag>
                         ))}
                       </div>
-                      {errors.severity && (
+                      {formProps.errors.severity && (
                         <Message
                           validation="error"
                           style={{ marginTop: appTheme.space.sm }}
                         >
-                          {errors.severity}
+                          {formProps.errors.severity}
                         </Message>
                       )}
                     </>
@@ -395,7 +402,7 @@ const ObservationForm = ({
                     '__VIDEO_PAGE_ACTIONS_OBSERVATION_FORM_FIELD_NOTES_PLACEHOLDER'
                   )}
                   rows={4}
-                  {...getFieldProps('notes')}
+                  {...formProps.getFieldProps('notes')}
                 />
               </div>
               <PullRight>

src/pages/Video/components/TitleDropdown.tsx

@@ -0,0 +1,179 @@
+import {
+  Autocomplete,
+  Dropdown,
+  Item,
+  MediaBody,
+  MediaFigure,
+  Menu,
+  Separator,
+  Span,
+} from '@appquality/unguess-design-system';
+import { Field } from '@zendeskgarden/react-dropdowns';
+import { useEffect, useState } from 'react';
+import useDebounce from 'src/hooks/useDebounce';
+import { ReactComponent as AddIcon } from 'src/assets/icons/grid-add.svg';
+import { useTranslation } from 'react-i18next';
+import {
+  GetCampaignsByCidVideoTagsApiResponse,
+  usePostCampaignsByCidVideoTagsMutation,
+} from 'src/features/api';
+import { useParams } from 'react-router-dom';
+import { FormikProps } from 'formik';
+import { appTheme } from 'src/app/theme';
+
+export interface ObservationFormValues {
+  title: number;
+  severity: number;
+  notes: string;
+}
+
+export const TitleDropdown = ({
+  titles,
+  title,
+  formProps,
+}: {
+  titles?: GetCampaignsByCidVideoTagsApiResponse[number]['tags'];
+  title?: GetCampaignsByCidVideoTagsApiResponse[number]['tags'][number];
+  formProps: FormikProps<ObservationFormValues>;
+}) => {
+  const { t } = useTranslation();
+  const { campaignId } = useParams();
+  const [selectedItem, setSelectedItem] =
+    useState<GetCampaignsByCidVideoTagsApiResponse[number]['tags'][number]>();
+  const [inputValue, setInputValue] = useState('');
+  const [matchingOptions, setMatchingOptions] = useState(titles);
+  const debouncedInputValue = useDebounce<string>(inputValue, 300);
+  const [addVideoTags] = usePostCampaignsByCidVideoTagsMutation();
+
+  const filterMatchingOptions = (value: string) => {
+    const matchedOptions = titles?.filter(
+      (i) =>
+        i.name.trim().toLowerCase().indexOf(value.trim().toLowerCase()) !== -1
+    );
+
+    setMatchingOptions(matchedOptions);
+  };
+
+  useEffect(() => {
+    filterMatchingOptions(debouncedInputValue);
+  }, [debouncedInputValue]);
+
+  useEffect(() => {
+    if (title) {
+      setSelectedItem(title);
+    }
+  }, [title]);
+
+  return (
+    <Dropdown
+      inputValue={inputValue}
+      selectedItem={selectedItem}
+      onSelect={(
+        item: GetCampaignsByCidVideoTagsApiResponse[number]['tags'][number]
+      ) => {
+        if (item)
+          if (!item.id) {
+            if (item.name.length > 40) {
+              formProps.setErrors({
+                title: t(
+                  '__VIDEO_PAGE_ACTIONS_OBSERVATION_FORM_FIELD_TITLE_MAX_ERROR'
+                ),
+              });
+              setSelectedItem(item);
+            } else {
+              addVideoTags({
+                cid: campaignId?.toString() || '0',
+                body: {
+                  group: {
+                    name: 'title',
+                  },
+                  tag: {
+                    name: inputValue,
+                  },
+                },
+              })
+                .unwrap()
+                .then((res) => {
+                  setSelectedItem(res.tag);
+                  formProps.setFieldValue('title', res.tag.id);
+                  setInputValue('');
+                })
+                .catch((err) => {
+                  // eslint-disable-next-line no-console
+                  console.error(err);
+                });
+            }
+          } else {
+            setInputValue('');
+            setSelectedItem(item);
+            formProps.setFieldValue('title', item.id);
+          }
+      }}
+      onInputValueChange={(value) => {
+        setInputValue(value);
+      }}
+      downshiftProps={{
+        itemToString: (
+          item: GetCampaignsByCidVideoTagsApiResponse[number]['tags'][number]
+        ) => item && item.name,
+      }}
+    >
+      <Field>
+        <Autocomplete>
+          {selectedItem ? (
+            selectedItem.name
+          ) : (
+            <Span
+              style={{
+                opacity: 0.3,
+                fontWeight: appTheme.fontWeights.semibold,
+              }}
+            >
+              {t(
+                '__VIDEO_PAGE_ACTIONS_OBSERVATION_FORM_FIELD_TITLE_PLACEHOLDER'
+              )}
+            </Span>
+          )}
+        </Autocomplete>
+      </Field>
+      <Menu style={{ maxHeight: '205px' }}>
+        {matchingOptions && matchingOptions.length ? (
+          matchingOptions.map((item) => (
+            <Item key={item.id} value={item}>
+              <Span>{item.name}</Span>
+            </Item>
+          ))
+        ) : (
+          <Item disabled>
+            <Span>
+              {t(
+                '__VIDEO_PAGE_ACTIONS_OBSERVATION_FORM_FIELD_TITLE_NO_MATCHING_TITLES'
+              )}
+            </Span>
+          </Item>
+        )}
+        {inputValue && (
+          <>
+            <Separator />
+            <Item
+              key="new"
+              value={{
+                name: inputValue,
+              }}
+            >
+              <MediaFigure>
+                <AddIcon />
+              </MediaFigure>
+              <MediaBody>
+                {t('__WIZARD_EXPRESS_BODY_SELECT_PROJECT_ADD_ITEM_LABEL')}
+                &nbsp; &quot;
+                {inputValue}
+                &quot;
+              </MediaBody>
+            </Item>
+          </>
+        )}
+      </Menu>
+    </Dropdown>
+  );
+};