feat: add button

packages/apps/purchase/src/components/atoms/RequestHeader/RequestHeader.tsx

@@ -18,13 +18,12 @@
 
 import React from 'react';
 import {StyleSheet, View} from 'react-native';
-import {Text, LabelText, Badge, useThemeColor} from '@axelor/aos-mobile-ui';
+import {Text, LabelText, Badge} from '@axelor/aos-mobile-ui';
 import {useSelector, useTypeHelpers, useTypes} from '@axelor/aos-mobile-core';
 
 const RequestHeader = ({}) => {
-  const Colors = useThemeColor();
   const {PurchaseRequest} = useTypes();
-  const {getItemTitle} = useTypeHelpers();
+  const {getItemColor, getItemTitle} = useTypeHelpers();
 
   const {purchaseRequest} = useSelector(
     state => state.purchase_purchaseRequest,
@@ -39,7 +38,10 @@ const RequestHeader = ({}) => {
             PurchaseRequest?.statusSelect,
             purchaseRequest.statusSelect,
           )}
-          color={Colors.infoColor}
+          color={getItemColor(
+            PurchaseRequest?.statusSelect,
+            purchaseRequest.statusSelect,
+          )}
         />
       </View>
       <LabelText
@@ -53,7 +55,8 @@ const RequestHeader = ({}) => {
 
 const styles = StyleSheet.create({
   container: {
-    marginHorizontal: 15,
+    marginHorizontal: 24,
+    marginBottom: 5,
   },
   chlidrenContainer: {
     flexDirection: 'row',

packages/apps/purchase/src/components/atoms/RequestValidationButton/RequestValidationButton.tsx

@@ -0,0 +1,62 @@
+/*
+ * Axelor Business Solutions
+ *
+ * Copyright (C) 2024 Axelor (<http://axelor.com>).
+ *
+ * This program is free software: you can redistribute it and/or  modify
+ * it under the terms of the GNU Affero General Public License, version 3,
+ * as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react';
+import {View, StyleSheet} from 'react-native';
+
+import {Button, useThemeColor} from '@axelor/aos-mobile-ui';
+import {useSelector, useTranslator, useTypes} from '@axelor/aos-mobile-core';
+
+const RequestValidationButton = ({}) => {
+  const Colors = useThemeColor();
+  const I18n = useTranslator();
+  const {PurchaseRequest} = useTypes();
+  const {purchaseRequest} = useSelector(
+    state => state.purchase_purchaseRequest,
+  );
+
+  if (purchaseRequest.statusSelect === PurchaseRequest?.statusSelect.Draft) {
+    return (
+      <View style={styles.buttonContainer}>
+        <Button
+          title={I18n.t('Base_Cancel')}
+          onPress={() => {}}
+          width="45%"
+          color={Colors.errorColor}
+          iconName="x-lg"
+        />
+        <Button
+          title={I18n.t('Purchase_Request')}
+          onPress={() => {}}
+          width="45%"
+          iconName="check-lg"
+        />
+      </View>
+    );
+  }
+  return null;
+};
+
+const styles = StyleSheet.create({
+  buttonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+  },
+});
+
+export default RequestValidationButton;

packages/apps/purchase/src/components/atoms/index.ts

@@ -20,3 +20,4 @@ export {default as DropdownRequestCharacteristics} from './DropdownRequestCharac
 export {default as PurchaseSeeLinesButton} from './PurchaseSeeLinesButton/PurchaseSeeLinesButton';
 export {default as RequestCard} from './RequestCard/RequestCard';
 export {default as RequestHeader} from './RequestHeader/RequestHeader';
+export {default as RequestValidationButton} from './RequestValidationButton/RequestValidationButton';

packages/apps/purchase/src/components/molecules/RequestDropdownCards/RequestDropdownCards.tsx

@@ -21,11 +21,12 @@ import {useTranslator} from '@axelor/aos-mobile-core';
 import {DropdownCardSwitch} from '@axelor/aos-mobile-ui';
 import {DropdownRequestCharacteristics} from '../../atoms';
 
-const RequestDropdownCards = () => {
+const RequestDropdownCards = ({style}: {style: any}) => {
   const I18n = useTranslator();
 
   return (
     <DropdownCardSwitch
+      style={style}
       dropdownItems={[
         {
           key: 1,

packages/apps/purchase/src/i18n/en.json

@@ -11,10 +11,11 @@
   "Purchase_StockLocation": "Stock location",
   "Purchase_RequesterUser": "Requester",
   "Purchase_ValidatorUser": "Validator",
-  "Purchase_Characteristics": "Characteristic",
+  "Purchase_Characteristics": "Characteristics",
   "Purchase_SeeLines": "See lines",
+  "Purchase_Request": "Request",
   "Purchase_SliceAction_SearchPurchaseRequest": "search purchase request",
   "Purchase_SliceAction_SearchSupplier": "search supplier",
   "Purchase_SliceAction_GetPurchaseRequest": "get purchase request",
-  "Purchase_SliceAction_SearchPurchaseRequestLine": ""
+  "Purchase_SliceAction_SearchPurchaseRequestLine": "search purchase request line"
 }

packages/apps/purchase/src/i18n/fr.json

@@ -11,10 +11,11 @@
   "Purchase_StockLocation": "Emplacement de stock",
   "Purchase_RequesterUser": "Demandeur",
   "Purchase_ValidatorUser": "Valideur",
-  "Purchase_Characteristics": "Caractéristique",
+  "Purchase_Characteristics": "Caractéristiques",
   "Purchase_SeeLines": "Voir les lignes",
+  "Purchase_Request": "Demande",
   "Purchase_SliceAction_SearchPurchaseRequest": "recherche sur les demandes d'achat",
   "Purchase_SliceAction_SearchSupplier": "recherche sur les fournisseurs",
   "Purchase_SliceAction_GetPurchaseRequest": "récupération de la demande d'achat",
-  "Purchase_SliceAction_SearchPurchaseRequestLine": ""
+  "Purchase_SliceAction_SearchPurchaseRequestLine": "recherche sur les lignes de demandes d'achat"
 }

packages/apps/purchase/src/screens/RequestDetailsView.tsx → packages/apps/purchase/src/screens/RequestDetailsScreen.tsx

@@ -16,18 +16,20 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {useEffect} from 'react';
+import React, {useEffect, useMemo} from 'react';
 import {HeaderContainer, NotesCard, Screen} from '@axelor/aos-mobile-ui';
 import {useDispatch, useSelector, useTranslator} from '@axelor/aos-mobile-core';
 import {getPurchaseRequest} from '../features/purchaseRequestSlice';
 import {
   PurchaseSeeLinesButton,
   RequestDropdownCards,
   RequestHeader,
+  RequestValidationButton,
 } from '../components';
 import {searchPurchaseRequestLine} from '../features/purchaseRequestLineSlice';
+import {StyleSheet} from 'react-native';
 
-const RequestDetailsView = ({route}) => {
+const RequestDetailsScreen = ({route}) => {
   const {idRequest} = route.params;
   const dispatch = useDispatch();
   const I18n = useTranslator();
@@ -49,8 +51,16 @@ const RequestDetailsView = ({route}) => {
     );
   }, [dispatch, idRequest]);
 
+  const isDescription = useMemo(() => {
+    return purchaseRequest.description != null;
+  }, [purchaseRequest.description]);
+
+  const styles = useMemo(() => {
+    return getStyles(isDescription);
+  }, [isDescription]);
+
   return (
-    <Screen removeSpaceOnTop={true}>
+    <Screen removeSpaceOnTop={true} fixedItems={<RequestValidationButton />}>
       <HeaderContainer
         fixedItems={<RequestHeader />}
         expandableFilter={false}
@@ -59,12 +69,19 @@ const RequestDetailsView = ({route}) => {
         title={I18n.t('Base_Description')}
         data={purchaseRequest.description}
       />
-      <RequestDropdownCards />
+      <RequestDropdownCards style={styles.margin} />
       {totalPurchaseRequestLine > 0 && (
         <PurchaseSeeLinesButton numberLines={totalPurchaseRequestLine} />
       )}
     </Screen>
   );
 };
 
-export default RequestDetailsView;
+export default RequestDetailsScreen;
+
+const getStyles = isDescription =>
+  StyleSheet.create({
+    margin: {
+      marginTop: isDescription ? 0 : 10,
+    },
+  });

packages/apps/purchase/src/screens/index.ts

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import RequestDetailsView from './RequestDetailsView';
+import RequestDetailsScreen from './RequestDetailsScreen';
 import RequestListScreen from './RequestListScreen';
 
 export default {
@@ -29,12 +29,13 @@ export default {
     isUsableOnShortcut: true,
   },
   RequestDetailsView: {
-    title: 'Purchase_InternalRequests',
-    component: RequestDetailsView,
+    title: 'Purchase_Request',
+    component: RequestDetailsScreen,
     options: {
       shadedHeader: false,
     },
   },
 };
 
+export {RequestDetailsScreen};
 export {RequestListScreen};