sub-menu(description): Change Description functionality added for act…

…ive apps
eclipse-tractusx · Jul 11, 2023 · 5825efd · 5825efd
1 parent 3df160d
commit 5825efd
Show file tree

Hide file tree

Showing 6 changed files with 361 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -25,6 +25,7 @@
   - Change Image(sub menu) functionality added for active apps
   - App overview 'in review' style fix
   - Enhance Sub Menu by adding 'Change Description' for active apps
+  - Change Description(sub menu) functionality added for active apps
 - Bugfix
   - Service Release Process
     - Service Release process not working

diff --git a/src/assets/locales/de/main.json b/src/assets/locales/de/main.json
@@ -415,6 +415,18 @@
       "successMsg": "successfully changed app lead image",
       "errorMsg": "Unable to change the lead image"
     },
+    "changeDescription": {
+      "headerTitle": "Change Descriptions",
+      "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .",
+      "longDescription": "Long Description",
+      "longDescriptionEN": "Long Description - EN *",
+      "longDescriptionDE": "Long Description - DE *",
+      "shortDescription": "Short Description",
+      "shortDescriptionEN": "Short Description - EN *",
+      "shortDescriptionDE": "Short Description - DE *",
+      "successMsg": "successfully changed description",
+      "errorMsg": "Unable to change description"
+    },
     "appreleaseprocess": {
       "message": "App Release Process Message"
     },

diff --git a/src/assets/locales/en/main.json b/src/assets/locales/en/main.json
@@ -414,6 +414,18 @@
       "successMsg": "successfully changed app lead image",
       "errorMsg": "Unable to change the lead image"
     },
+    "changeDescription": {
+      "headerTitle": "Change Descriptions",
+      "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .",
+      "longDescription": "Long Description",
+      "longDescriptionEN": "Long Description - EN *",
+      "longDescriptionDE": "Long Description - DE *",
+      "shortDescription": "Short Description",
+      "shortDescriptionEN": "Short Description - EN *",
+      "shortDescriptionDE": "Short Description - DE *",
+      "successMsg": "successfully changed description",
+      "errorMsg": "Unable to change description"
+    },
     "appreleaseprocess": {
       "message": "App Release Process Message"
     },

diff --git a/src/components/pages/AppOverview/ChangeDescription.tsx b/src/components/pages/AppOverview/ChangeDescription.tsx
@@ -17,6 +17,328 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
+import { PageBreadcrumb } from 'components/shared/frame/PageBreadcrumb/PageBreadcrumb'
+import {
+  Typography,
+  PageHeader,
+  Button,
+  LoadingButton,
+  TabPanel,
+} from '@catena-x/portal-shared-components'
+import { useTranslation } from 'react-i18next'
+import { useLocation, useNavigate, useParams } from 'react-router-dom'
+import { Box, IconButton, Tab, Tabs } from '@mui/material'
+import { useEffect, useMemo, useState } from 'react'
+import { error, success } from 'services/NotifyService'
+import ConnectorFormInputFieldShortAndLongDescription from 'components/shared/basic/ReleaseProcess/components/ConnectorFormInputFieldShortAndLongDescription'
+import Patterns from 'types/Patterns'
+import { useForm } from 'react-hook-form'
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline'
+import {
+  useFetchDescriptionQuery,
+  useSaveDescriptionMutation,
+} from 'features/appManagement/apiSlice'
+import TextSnippetOutlinedIcon from '@mui/icons-material/TextSnippetOutlined'
+
 export default function ChangeDescription() {
-  return <>In Progress</>
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const appId = useParams().appId
+  const [isLoading, setIsLoading] = useState(false)
+  const { state } = useLocation()
+  const items: any = state
+  const app = items?.filter((item: any) => item.id === appId)
+  const [activeTab, setActiveTab] = useState<number>(0)
+  const longDescriptionMaxLength = 2000
+  const { data: description, refetch } = useFetchDescriptionQuery(appId ?? '')
+  const [saveDescription] = useSaveDescriptionMutation()
+
+  const defaultValues = useMemo(() => {
+    return {
+      longDescriptionEN: description?.[0].longDescription,
+      longDescriptionDE: description?.[1].longDescription,
+      shortDescriptionEN: description?.[0].shortDescription,
+      shortDescriptionDE: description?.[1].shortDescription,
+    }
+  }, [state, description])
+
+  useEffect(() => {
+    refetch()
+    reset(defaultValues)
+  }, [state, description])
+
+  const {
+    handleSubmit,
+    control,
+    trigger,
+    formState: { errors, isDirty },
+    getValues,
+    reset,
+  } = useForm({
+    defaultValues: defaultValues,
+    mode: 'onChange',
+  })
+
+  const handleSave = async (data: any) => {
+    setIsLoading(true)
+
+    const saveData = {
+      appId: appId,
+      body: [
+        {
+          languageCode: 'de',
+          longDescription: getValues().longDescriptionDE,
+          shortDescription: getValues().shortDescriptionDE,
+        },
+        {
+          languageCode: 'en',
+          longDescription: getValues().longDescriptionEN,
+          shortDescription: getValues().shortDescriptionEN,
+        },
+      ],
+    }
+
+    await saveDescription(saveData)
+      .unwrap()
+      .then(() => {
+        navigate('/appoverview', {
+          state: 'change-description-success',
+        })
+        success(t('content.changeDescription.successMsg'))
+      })
+      .catch((err) => {
+        setIsLoading(false)
+        error(t('content.changeDescription.errorMsg'), '', err)
+      })
+  }
+
+  const handleChange = (event: any, newValue: number) => {
+    setActiveTab(newValue)
+  }
+
+  const patternValidation = (item: string) => {
+    if (
+      (item === 'longDescriptionEN' &&
+        /[ @=<>*\-+#?%&_:;]/.test(getValues().longDescriptionEN?.charAt(0))) ||
+      item === 'longDescriptionEN'
+    ) {
+      return `${t(
+        'content.apprelease.appReleaseForm.validCharactersIncludes'
+      )} a-zA-Z0-9 !?@&#'"()[]_-+=<>/*.,;:% and should not start with @=<>*-+ #?%&_:;`
+    } else {
+      return `${t(
+        'content.apprelease.appReleaseForm.validCharactersIncludes'
+      )} a-zA-ZÀ-ÿ0-9 !?@&#'"()[]_-+=<>/*.,;:% and should not start with @=<>*-+ #?%&_:;`
+    }
+  }
+
+  return (
+    <main className="change-image-main">
+      <PageHeader title={app?.[0]?.title} headerHeight={200} topPage={true}>
+        <PageBreadcrumb backButtonVariant="contained" />
+      </PageHeader>
+      <section>
+        <Typography mb={3} variant="body2" align="center">
+          {app?.[0]?.title}
+        </Typography>
+        <Typography mb={3} variant="h2" align="center">
+          {t('content.changeDescription.headerTitle')}
+        </Typography>
+        <Typography align="center" variant="body2">
+          {t('content.changeDescription.description')}
+        </Typography>
+      </section>
+      <div className="main-container">
+        <div className="main-row">
+          <Tabs
+            value={activeTab}
+            onChange={handleChange}
+            centered
+            sx={{
+              '.MuiTab-root': {
+                textTransform: 'none',
+              },
+            }}
+          >
+            <Tab
+              sx={{
+                fontSize: '16px',
+                '&.Mui-selected': {
+                  borderBottom: '3px solid #0f71cb',
+                },
+              }}
+              label={t('content.changeDescription.longDescription')}
+              icon={<TextSnippetOutlinedIcon />}
+              id={`simple-tab-${activeTab}`}
+              aria-controls={`simple-tabpanel-${activeTab}`}
+              iconPosition="start"
+            />
+            <Tab
+              sx={{
+                fontSize: '16px',
+                '&.Mui-selected': {
+                  borderBottom: '3px solid #0f71cb',
+                },
+              }}
+              label={t('content.changeDescription.shortDescription')}
+              icon={<TextSnippetOutlinedIcon />}
+              id={`simple-tab-${activeTab}`}
+              aria-controls={`simple-tabpanel-${activeTab}`}
+              iconPosition="start"
+            />
+          </Tabs>
+
+          <TabPanel value={activeTab} index={0}>
+            <div className="form-field">
+              {['longDescriptionEN', 'longDescriptionDE'].map(
+                (item: string) => (
+                  <div key={item}>
+                    <ConnectorFormInputFieldShortAndLongDescription
+                      {...{
+                        control,
+                        trigger,
+                        errors,
+                        item,
+                      }}
+                      label={
+                        <>
+                          {item === 'longDescriptionEN'
+                            ? t('content.changeDescription.longDescriptionEN')
+                            : t('content.changeDescription.longDescriptionDE')}
+                          <IconButton sx={{ color: '#939393' }} size="small">
+                            <HelpOutlineIcon />
+                          </IconButton>
+                        </>
+                      }
+                      value={
+                        (item === 'longDescriptionEN'
+                          ? getValues().longDescriptionEN?.length || 0
+                          : getValues().longDescriptionDE?.length || 0) +
+                        `/${longDescriptionMaxLength}`
+                      }
+                      patternKey="longDescriptionEN"
+                      patternEN={Patterns.appPage.longDescriptionEN}
+                      patternDE={Patterns.appPage.longDescriptionDE}
+                      rules={{
+                        required:
+                          t(`content.apprelease.appPage.${item}`) +
+                          t('content.apprelease.appReleaseForm.isMandatory'),
+                        minLength: `${t(
+                          'content.apprelease.appReleaseForm.minimum'
+                        )} 10 ${t(
+                          'content.apprelease.appReleaseForm.charactersRequired'
+                        )}`,
+                        pattern: patternValidation(item),
+                        maxLength: `${t(
+                          'content.apprelease.appReleaseForm.maximum'
+                        )} ${longDescriptionMaxLength} ${t(
+                          'content.apprelease.appReleaseForm.charactersAllowed'
+                        )}`,
+                      }}
+                      maxLength={longDescriptionMaxLength}
+                    />
+                  </div>
+                )
+              )}
+            </div>
+          </TabPanel>
+          <TabPanel value={activeTab} index={1}>
+            <div className="form-field">
+              {['shortDescriptionEN', 'shortDescriptionDE'].map(
+                (item: string, i) => (
+                  <div key={item}>
+                    <ConnectorFormInputFieldShortAndLongDescription
+                      {...{
+                        control,
+                        trigger,
+                        errors,
+                        item,
+                      }}
+                      label={
+                        <>
+                          {item === 'shortDescriptionEN'
+                            ? t('content.changeDescription.shortDescriptionEN')
+                            : t('content.changeDescription.shortDescriptionDE')}
+                          <IconButton sx={{ color: '#939393' }} size="small">
+                            <HelpOutlineIcon />
+                          </IconButton>
+                        </>
+                      }
+                      value={
+                        (item === 'shortDescriptionEN'
+                          ? getValues().shortDescriptionEN?.length || 0
+                          : getValues().shortDescriptionDE?.length || 0) +
+                        '/255'
+                      }
+                      patternKey="shortDescriptionEN"
+                      patternEN={Patterns.appMarketCard.shortDescriptionEN}
+                      patternDE={Patterns.appMarketCard.shortDescriptionDE}
+                      rules={{
+                        required: `${t(
+                          `content.apprelease.appMarketCard.${item}`
+                        )} ${t(
+                          'content.apprelease.appReleaseForm.isMandatory'
+                        )}`,
+                        minLength: `${t(
+                          'content.apprelease.appReleaseForm.minimum'
+                        )} 10 ${t(
+                          'content.apprelease.appReleaseForm.charactersRequired'
+                        )}`,
+                        pattern: `${t(
+                          'content.apprelease.appReleaseForm.validCharactersIncludes'
+                        )} ${
+                          item === 'shortDescriptionEN'
+                            ? 'a-zA-Z0-9 !?@&#\'"()_-=/*.,;:'
+                            : 'a-zA-ZÀ-ÿ0-9 !?@&#\'"()_-=/*.,;:'
+                        }`,
+                        maxLength: `${t(
+                          'content.apprelease.appReleaseForm.maximum'
+                        )} 255 ${t(
+                          'content.apprelease.appReleaseForm.charactersAllowed'
+                        )}`,
+                      }}
+                    />
+                  </div>
+                )
+              )}
+            </div>
+          </TabPanel>
+        </div>
+      </div>
+      <section>
+        <hr style={{ border: 0, borderTop: '1px solid #DCDCDC' }} />
+        <Box sx={{ position: 'relative', marginTop: '30px' }}>
+          <Button
+            color="secondary"
+            size="small"
+            onClick={() => navigate('/appoverview')}
+          >
+            {t('global.actions.cancel')}
+          </Button>
+
+          <span style={{ position: 'absolute', right: '10px' }}>
+            {isLoading ? (
+              <LoadingButton
+                size="small"
+                loading={isLoading}
+                variant="contained"
+                onButtonClick={() => {}}
+                loadIndicator="Loading..."
+                label={`${t('global.actions.confirm')}`}
+              />
+            ) : (
+              <Button
+                size="small"
+                variant="contained"
+                disabled={!isDirty}
+                onClick={handleSubmit((data) => handleSave(data))}
+              >
+                {t('global.actions.save')}
+              </Button>
+            )}
+          </span>
+        </Box>
+      </section>
+    </main>
+  )
 }
diff --git a/src/components/pages/AppOverview/index.tsx b/src/components/pages/AppOverview/index.tsx
@@ -74,6 +74,7 @@ export default function AppOverview() {
   useEffect(() => {
     state === 'deactivate-success' && refetch()
     state === 'change-image-success' && refetch()
+    state === 'change-description-success' && refetch()
   }, [state, refetch])
 
   useEffect(() => {