Merge pull request #940 from AppQuality/fix-action-bar

Fix-action-bar

Author: iDome89

src/locales/en/translation.json

@@ -772,8 +772,10 @@
   "__INSIGHTS_PAGE_ACTION_BAR_BUTTON_CANCEL": "Cancel",
   "__INSIGHTS_PAGE_ACTION_BAR_BUTTON_CREATE_INSIGHT": "Create insight",
   "__INSIGHTS_PAGE_ACTION_BAR_BUTTON_EDIT_INSIGHT": "Update insight",
-  "__INSIGHTS_PAGE_ACTION_BAR_INSIGHTS_COUNT_LABEL_one": "Selected observation: <1>{{count}}</1>",
-  "__INSIGHTS_PAGE_ACTION_BAR_INSIGHTS_COUNT_LABEL_other": "Selected observations: <1>{{count}}</1>",
+  "__INSIGHTS_PAGE_ACTION_BAR_INSIGHTS_COUNT_OBSERVATIONS_LABEL_one": "Selected observations: <1>{{observations}}</1>",
+  "__INSIGHTS_PAGE_ACTION_BAR_INSIGHTS_COUNT_OBSERVATIONS_LABEL_other": "Selected observations: <1>{{observations}}</1>",
+  "__INSIGHTS_PAGE_ACTION_BAR_INSIGHTS_COUNT_THEMES_LABEL_one": "Selected themes: <1>{{themes}}</1>",
+  "__INSIGHTS_PAGE_ACTION_BAR_INSIGHTS_COUNT_THEMES_LABEL_other": "Selected themes: <1>{{themes}}</1>",
   "__INSIGHTS_PAGE_CLOSE_DRAWER_BUTTON": "Close",
   "__INSIGHTS_PAGE_COLLECTION_GROUP_BY_USECASE": "Group by Use Case",
   "__INSIGHTS_PAGE_COLLECTION_UNGROUP": "Show all",

src/locales/it/translation.json

@@ -799,9 +799,12 @@
   "__INSIGHTS_PAGE_ACTION_BAR_BUTTON_CANCEL": "Annulla",
   "__INSIGHTS_PAGE_ACTION_BAR_BUTTON_CREATE_INSIGHT": "",
   "__INSIGHTS_PAGE_ACTION_BAR_BUTTON_EDIT_INSIGHT": "",
-  "__INSIGHTS_PAGE_ACTION_BAR_INSIGHTS_COUNT_LABEL_one": "Osservazione selezionata: <1>{{count}}</1>",
-  "__INSIGHTS_PAGE_ACTION_BAR_INSIGHTS_COUNT_LABEL_many": "Osservazioni selezionate: <1>{{count}}</1>",
-  "__INSIGHTS_PAGE_ACTION_BAR_INSIGHTS_COUNT_LABEL_other": "Osservazioni selezionate: <1>{{count}}</1>",
+  "__INSIGHTS_PAGE_ACTION_BAR_INSIGHTS_COUNT_OBSERVATIONS_LABEL_one": "Selected observations: <1>{{observations}}</1>",
+  "__INSIGHTS_PAGE_ACTION_BAR_INSIGHTS_COUNT_OBSERVATIONS_LABEL_many": "Selected observations: <1>{{observations}}</1>",
+  "__INSIGHTS_PAGE_ACTION_BAR_INSIGHTS_COUNT_OBSERVATIONS_LABEL_other": "Selected observations: <1>{{observations}}</1>",
+  "__INSIGHTS_PAGE_ACTION_BAR_INSIGHTS_COUNT_THEMES_LABEL_one": "Selected themes: <1>{{themes}}</1>",
+  "__INSIGHTS_PAGE_ACTION_BAR_INSIGHTS_COUNT_THEMES_LABEL_many": "Selected themes: <1>{{themes}}</1>",
+  "__INSIGHTS_PAGE_ACTION_BAR_INSIGHTS_COUNT_THEMES_LABEL_other": "Selected themes: <1>{{themes}}</1>",
   "__INSIGHTS_PAGE_CLOSE_DRAWER_BUTTON": "Close drawer",
   "__INSIGHTS_PAGE_COLLECTION_GROUP_BY_USECASE": "Organizza per Use Case",
   "__INSIGHTS_PAGE_COLLECTION_UNGROUP": "",

src/pages/Insights/ActionBar.tsx

@@ -1,14 +1,16 @@
 import { useFormikContext } from 'formik';
 import { Trans, useTranslation } from 'react-i18next';
-import { Button, MD, Span } from '@appquality/unguess-design-system';
+import { Button, MD, SM, Span } from '@appquality/unguess-design-system';
 import { appTheme } from 'src/app/theme';
 import styled from 'styled-components';
+import { VideoTag } from 'src/features/api';
+import { useMemo } from 'react';
 import { InsightFormValues } from './FormProvider';
 import { useInsightContext } from './InsightContext';
 
 const FloatingContainer = styled.div`
   position: fixed;
-  bottom: 100px;
+  bottom: ${({ theme }) => theme.space.xxl};
   left: 50%;
   transform: translateX(-50%);
   z-index: ${({ theme }) => theme.levels.front};
@@ -31,6 +33,21 @@ const ActionBar = () => {
     useFormikContext<InsightFormValues>();
   const { isDrawerOpen, setIsDrawerOpen } = useInsightContext();
 
+  const themesCount = useMemo(() => {
+    const tags = values.observations.flatMap((obs) => obs.tags);
+    const titles = tags.filter((tag) => tag.group.name === 'title');
+
+    // Get count of unique titles (tag.name)
+    const uniqueTitles = titles.reduce((acc, tag) => {
+      if (!acc.find((_t) => _t.tag.name === tag.tag.name)) {
+        acc.push(tag);
+      }
+      return acc;
+    }, [] as VideoTag[]);
+
+    return uniqueTitles.length;
+  }, [values.observations]);
+
   // Do not show action bar cta if in editing or creating mode
   const hideCta = (values.id > 0 || values.id === -1) && isDrawerOpen;
 
@@ -40,51 +57,62 @@ const ActionBar = () => {
     <FloatingContainer>
       <Container>
         <div style={{ marginRight: appTheme.space.md }}>
-          <MD style={{ marginRight: appTheme.space.md }}>
+          <MD>
             <Trans
               count={values.observations.length}
-              i18nKey="__INSIGHTS_PAGE_ACTION_BAR_INSIGHTS_COUNT_LABEL"
+              i18nKey="__INSIGHTS_PAGE_ACTION_BAR_INSIGHTS_COUNT_OBSERVATIONS_LABEL"
             >
               Selected observations:
-              <Span isBold>{{ count: values.observations.length }}</Span>
+              <Span isBold>{{ observations: values.observations.length }}</Span>
             </Trans>
           </MD>
+          <SM style={{ marginTop: appTheme.space.xs }}>
+            <Trans
+              count={values.observations.length}
+              i18nKey="__INSIGHTS_PAGE_ACTION_BAR_INSIGHTS_COUNT_THEMES_LABEL"
+            >
+              Selected themes:
+              <Span isBold>{{ themes: themesCount }}</Span>
+            </Trans>
+          </SM>
         </div>
-        <Button
-          isLink
-          size="small"
-          onClick={() => {
-            resetForm();
-          }}
-          style={{
-            marginRight: appTheme.space.md,
-            color: appTheme.palette.white,
-          }}
-        >
-          {t('__INSIGHTS_PAGE_ACTION_BAR_BUTTON_CANCEL')}
-        </Button>
         {!hideCta && (
-          <Button
-            isPrimary
-            isAccent
-            size="small"
-            onClick={() => {
-              setIsDrawerOpen(true);
-              if (values.id === 0) {
-                setValues({
-                  ...values,
-                  id: -1,
-                });
-              }
-              if (values.id > 0) {
-                setValues(values);
-              }
-            }}
-          >
-            {values.id === 0 || values.id === -1
-              ? t('__INSIGHTS_PAGE_ACTION_BAR_BUTTON_CREATE_INSIGHT')
-              : t('__INSIGHTS_PAGE_ACTION_BAR_BUTTON_EDIT_INSIGHT')}
-          </Button>
+          <div style={{ marginLeft: appTheme.space.md }}>
+            <Button
+              isLink
+              size="small"
+              onClick={() => {
+                resetForm();
+              }}
+              style={{
+                marginRight: appTheme.space.md,
+                color: appTheme.palette.white,
+              }}
+            >
+              {t('__INSIGHTS_PAGE_ACTION_BAR_BUTTON_CANCEL')}
+            </Button>
+            <Button
+              isPrimary
+              isAccent
+              size="small"
+              onClick={() => {
+                setIsDrawerOpen(true);
+                if (values.id === 0) {
+                  setValues({
+                    ...values,
+                    id: -1,
+                  });
+                }
+                if (values.id > 0) {
+                  setValues(values);
+                }
+              }}
+            >
+              {values.id === 0 || values.id === -1
+                ? t('__INSIGHTS_PAGE_ACTION_BAR_BUTTON_CREATE_INSIGHT')
+                : t('__INSIGHTS_PAGE_ACTION_BAR_BUTTON_EDIT_INSIGHT')}
+            </Button>
+          </div>
         )}
       </Container>
     </FloatingContainer>