Merge pull request #861 from AppQuality/UTT-34-quotes

Utt 34 quotes

Author: marcbon

src/common/schema.ts

@@ -759,6 +759,7 @@ export interface components {
       /** Format: float */
       end: number;
       tags: components['schemas']['VideoTag'][];
+      quotes: string;
     };
     /**
      * Output
@@ -2775,6 +2776,7 @@ export interface operations {
           start?: number;
           /** Format: float */
           end?: number;
+          quotes?: string;
           tags?: number[];
         };
       };

src/features/api/index.ts

@@ -1389,6 +1389,7 @@ export type PatchVideosByVidObservationsAndOidApiArg = {
     description?: string;
     start?: number;
     end?: number;
+    quotes?: string;
     tags?: number[];
   };
 };
@@ -1810,6 +1811,7 @@ export type Observation = {
   start: number;
   end: number;
   tags: VideoTag[];
+  quotes: string;
 };
 export type Insight = {
   id: number;

src/pages/Video/components/Observation.tsx

@@ -63,15 +63,6 @@ const Observation = ({
   const title = tags.find((tag) => tag.group.name.toLowerCase() === 'title')
     ?.tag.name;
 
-  const quots = transcript?.paragraphs
-    .flatMap((paragraph) =>
-      paragraph.words.filter(
-        (w) => w.start >= observation.start && w.end <= observation.end
-      )
-    )
-    .map((w) => w.word)
-    .join(' ');
-
   const handleAccordionChange = () => {
     setIsOpen(!isOpen);
     if (!isOpen) {
@@ -237,7 +228,7 @@ const Observation = ({
           <ObservationForm
             observation={observation}
             onSubmit={handleSubmit}
-            {...(quots && { quots })}
+            paragraphs={transcript?.paragraphs}
           />
         </Accordion.Panel>
       </Accordion.Section>

src/pages/Video/components/ObservationForm.tsx

@@ -19,6 +19,7 @@ import { useParams } from 'react-router-dom';
 import {
   GetCampaignsByCidVideoTagsApiResponse,
   GetVideosByVidObservationsApiResponse,
+  Paragraph,
   useGetCampaignsByCidVideoTagsQuery,
   usePatchVideosByVidObservationsAndOidMutation,
   usePostCampaignsByCidVideoTagsMutation,
@@ -53,14 +54,13 @@ const RadioTag = styled(Tag)<{
     user-select: none;
   }
 `;
-
 const ObservationForm = ({
   observation,
-  quots,
+  paragraphs,
   onSubmit,
 }: {
   observation: GetVideosByVidObservationsApiResponse[number];
-  quots?: string;
+  paragraphs?: Paragraph[];
   onSubmit: (
     values: ObservationFormValues,
     actions: FormikHelpers<ObservationFormValues>
@@ -145,6 +145,18 @@ const ObservationForm = ({
     }
   }, [tags, selectedOptions]);
 
+  function generateQuotes() {
+    if (!paragraphs) return undefined;
+    return paragraphs
+      .flatMap((paragraph) =>
+        paragraph.words.filter(
+          (w) => w.start >= observation.start && w.end <= observation.end
+        )
+      )
+      .map((w) => w.word)
+      .join(' ');
+  }
+
   const formInitialValues = {
     title:
       observation?.tags?.find((tag) => tag.group.name.toLowerCase() === 'title')
@@ -154,6 +166,7 @@ const ObservationForm = ({
         (tag) => tag.group.name.toLowerCase() === 'severity'
       )?.tag.id || 0,
     notes: observation?.description || '',
+    quotes: observation?.quotes || generateQuotes() || '',
   };
 
   const onSubmitPatch = async (
@@ -166,6 +179,7 @@ const ObservationForm = ({
       oid: observation.id.toString(),
       body: {
         description: values.notes,
+        quotes: values.quotes,
         start: observation.start,
         end: observation.end,
         tags: [
@@ -376,22 +390,17 @@ const ObservationForm = ({
                   />
                 )}
               </div>
-              {quots && (
-                <div style={{ marginTop: appTheme.space.md }}>
-                  <StyledLabel>
-                    {t(
-                      '__VIDEO_PAGE_ACTIONS_OBSERVATION_FORM_FIELD_QUOTS_LABEL'
-                    )}
-                  </StyledLabel>
-                  <Textarea
-                    readOnly
-                    disabled
-                    style={{ margin: 0 }}
-                    value={quots}
-                    rows={4}
-                  />
-                </div>
-              )}
+
+              <div style={{ marginTop: appTheme.space.md }}>
+                <StyledLabel>
+                  {t('__VIDEO_PAGE_ACTIONS_OBSERVATION_FORM_FIELD_QUOTS_LABEL')}
+                </StyledLabel>
+                <Textarea
+                  style={{ margin: 0 }}
+                  {...formProps.getFieldProps('quotes')}
+                  rows={4}
+                />
+              </div>
               <div style={{ marginTop: appTheme.space.md }}>
                 <StyledLabel>
                   {t('__VIDEO_PAGE_ACTIONS_OBSERVATION_FORM_FIELD_NOTES_LABEL')}

src/pages/Video/components/TitleDropdown.tsx

@@ -25,6 +25,7 @@ export interface ObservationFormValues {
   title: number;
   severity: number;
   notes: string;
+  quotes?: string;
 }
 
 export const TitleDropdown = ({