finish map#178

src/Pages/Admin/Reseller/Form/AttachmentForm.tsx

@@ -2,6 +2,8 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { FaImage } from "react-icons/fa";
 import ImageBoxField from "./ImageBoxField/ImageBoxField";
+import ValidationField from "../../../../Components/ValidationField/ValidationField";
+import MyMap from "../field/MyMap";
 
 const AttachmentForm = () => {
   const [t] = useTranslation();
@@ -12,10 +14,17 @@ const AttachmentForm = () => {
         <FaImage />
         <h4>{t("header.attachment")}</h4>
       </header>
-      <main className="main_form_body">
+     <div className="AttachmentFormBody ">
+     <main className="main_form_body">
         <ImageBoxField name="personal_image" />
         <ImageBoxField name="id_image" />
       </main>
+      <div className="MapField">
+      <ValidationField name="lat" placeholder="lat" label="lat" />
+        <ValidationField name="lng" placeholder="lng" label="lng" />        
+      <MyMap/>
+      </div>
+     </div>
     </div>
   );
 };

src/Pages/Admin/Reseller/Form/formUtils.ts

@@ -23,6 +23,8 @@ interface PersonalDetailsForm {
     username: string | null;
     password: string | null;
     area_id: number | null;
+    lat:number,
+    lng:number
 }
 
 interface PersonalDetailsEditForm {
@@ -35,10 +37,12 @@ interface PersonalDetailsEditForm {
   card_number: string | null;
   user: User;
   area_id: number | null;
+  lat:number,
+  lng:number
 }
 
 export const getInitialValues = (objectToEdit: Partial<PersonalDetailsForm>) => {
-  const location = objectToEdit?.location?.[0] || { lat: 0, lng: 0 }; 
+  const location = objectToEdit?.location?.[0] || { lat: 33.5138, lng: 36.2765 }; 
   return {
       id: objectToEdit?.id ?? 0,
       first_name: objectToEdit?.first_name ?? null,
@@ -51,6 +55,8 @@ export const getInitialValues = (objectToEdit: Partial<PersonalDetailsForm>) =>
       username: objectToEdit?.username ?? null,
       password: objectToEdit?.password ?? null,
       area_id: objectToEdit?.area_id ?? null,
+      lat: location.lat ?? 33.5138,
+      lng: location.lng ?? 36.2765,
   };
 };
 

src/Pages/Admin/Reseller/field/MyMap.tsx

@@ -51,7 +51,7 @@ const MyMap: React.FC = () => {
     return (
         <div className='mb-4'>
             <div className='MapInputs '>
-                <Button onClick={() => setShowMap(!showMap)} type="primary">
+                <Button className='mb-4' onClick={() => setShowMap(!showMap)} type="primary">
                     {showMap ? `${t("practical.Hide")} ${t("practical.Map")}` : `${t("practical.Show")} ${t("practical.Map")}`}
                 </Button>
             </div>

src/Styles/Pages/reSeller.scss

@@ -83,3 +83,24 @@
 
 
 
+
+
+.MapField{
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  min-height: 400px;
+
+}
+.AttachmentFormBody{
+  display: flex;
+  margin-top: 20px;
+  padding-left: 50px;
+  .ImageBoxField{
+    min-width: 200px;
+  }
+
+ >*{
+  min-width: 50%;
+ }
+}

src/translate/ar.json

@@ -309,7 +309,10 @@
     "account_activities":"أنشطة الحساب",
     "This will close your account. Your account will be interactive when you log in again":"سيؤدي هذا إلى إغلاق حسابك. سيكون حسابك تفاعليا عند تسجيل الدخول مرة أخرى",
     "Your account will be permanently deleted":"سيتم حذف حسابك نهائيا",
-    "search":"بحث"
+    "search":"بحث",
+    "Map":"الخريطة",
+    "Show":"عرض",
+    "Hide":"اخفاء"
   },
   "Table": {
     "header": "",