add_type_image_for_key_page

src/Components/Columns/ColumnsImage.tsx

@@ -9,12 +9,13 @@ import {
 import React from 'react';
 import { Image, Space } from 'antd';
 import useImageError from '../../Hooks/useImageError';
+import { ImageBaseURL } from '../../api/config';
 
 
 const ColumnsImage= ({src}:any) => {
    const ErrorImage = "https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/No-Image-Placeholder.svg/832px-No-Image-Placeholder.svg.png"
     
-  const imageUrl =  src || ErrorImage;
+   const imageUrl = ImageBaseURL + src || ErrorImage;
     
   const handleError = useImageError;
   // or you can download flipped and rotated image

src/Components/ValidationField/View/File.tsx

@@ -1,11 +1,17 @@
 import { Button, Upload, UploadFile } from 'antd'
 import useFormField from '../../../Hooks/useFormField';
 import { UploadOutlined } from '@ant-design/icons';
+import {  ImageBaseURL } from '../../../api/config';
 
 
-const File = ({ name, label, onChange, isDisabled,placholder,className, props }: any) => {
+const File = ({ name, label, onChange, isDisabled,placholder,className, props , label2 }: any) => {
   const { formik, t ,isError} = useFormField(name, props)
   let FormikName = formik.values[name];
+  const imageUrl = formik.values[name] ? ImageBaseURL + FormikName :  '';
+    console.log(imageUrl,"imageUrl");
+    
+
+  const last_name = label2 ? t(label) +" " + t(label2) :t(`${label ?  label: name}`)
 
   const fileList: UploadFile[] = [
 
@@ -13,8 +19,8 @@ const File = ({ name, label, onChange, isDisabled,placholder,className, props }:
       uid: '-1',
       name: '',
       status: 'done',
-      url: FormikName,
+      url: FormikName === ""? imageUrl : imageUrl?.replace("public", "/storage"),
-      thumbUrl: FormikName  
+      thumbUrl: FormikName === ""? imageUrl : imageUrl?.replace("public", "/storage")
     }
   ];
   const FilehandleChange = (value:any) => {
@@ -28,7 +34,7 @@ const File = ({ name, label, onChange, isDisabled,placholder,className, props }:
   return (
     <div className="ValidationField">
       <label htmlFor={name} className="text">
-        {t(`${label || name}`)}
+        {t(`${last_name}`)}
       </label>
 
       <Upload

src/Pages/Key/View/AddForm.tsx

@@ -1,6 +1,8 @@
 
 import { Col, Row } from 'reactstrap';
 import ValidationField from '../../../Components/ValidationField/ValidationField';
+import React from 'react';
+import { useFormikContext } from 'formik';
 
 function Form() {
 
@@ -12,17 +14,48 @@ function Form() {
 
 
   ]
+  const typeValueselect = [
+    {label : "image" , value : "image"},
+    {label : "text" , value : "text"},
+
+  ]
+  const {setFieldValue} = useFormikContext()
+  const [valueType, setvalueType] = React.useState<"image" | "text">('text')
+  const handelchange = ()=>{
+    setFieldValue("value",null)
+
+    if(valueType === "image"){
+
+      setvalueType("text")
+      setFieldValue("value_type","text")
+
+    }else{
+      setvalueType("image")
+      setFieldValue("value_type","image")
+
+    }
+
+  }
   return (
     <Row xs={1} sm={1} md={1} lg={2} xl={2}>
       <Col>
         <ValidationField name="key" />
-
+          {valueType === "text"
+          ?  
           <ValidationField name="value" />
 
+          : 
+          <ValidationField type='File' name="value" />
+
+          }
+
+
       </Col>
       <Col>
       <ValidationField name="type" type='Select' option={typeselect} />
 
+      <ValidationField name="value_type"  onChange={handelchange} type='Select' option={typeValueselect} />
+
       </Col>
 
 

src/Pages/Key/View/EditForm.tsx

@@ -1,6 +1,8 @@
 
 import { Col, Row } from 'reactstrap';
 import ValidationField from '../../../Components/ValidationField/ValidationField';
+import React from 'react';
+import { useFormikContext } from 'formik';
 
 function Form() {
 
@@ -12,17 +14,46 @@ function Form() {
 
 
   ]
+  const typeValueselect = [
+    { label: "image", value: "image" },
+    { label: "text", value: "text" },
+
+  ]
+  const {values, setFieldValue } = useFormikContext<any>()
+  const [valueType, setvalueType] = React.useState<"image" | "text">(values?.value_type)
+  const handelchange = () => {
+    setFieldValue("value", null)
+    if (valueType === "image") {
+      setvalueType("text")
+      setFieldValue("value_type", "text")
+
+    } else {
+      setvalueType("image")
+      setFieldValue("value_type", "image")
+
+    }
+
+  }
   return (
     <Row xs={1} sm={1} md={1} lg={2} xl={2}>
       <Col>
         <ValidationField name="key" />
-
+        {valueType === "text"
+          ?
           <ValidationField name="value" />
 
+          :
+          <ValidationField type='File' name="value" />
+
+        }
+
+
       </Col>
       <Col>
         <ValidationField name="type" type='Select' option={typeselect} />
 
+        <ValidationField name="value_type" onChange={handelchange} type='Select' option={typeValueselect} />
+
       </Col>
 
 

src/Pages/Key/formUtil.ts

@@ -1,7 +1,6 @@
 
 import * as Yup from "yup";
 import { buildFormData } from "../../api/helper/buildFormData";
-import * as dayjs from 'dayjs'
 
 
 
@@ -12,6 +11,7 @@ export const getInitialValues = (objectToEdit: any | null = null): any => {
     key: objectToEdit?.key ,
     type: objectToEdit?.type ,
     value: objectToEdit?.value ,
+    value_type: objectToEdit?.value.startsWith("/") ?  "image" : "text" ,
 
 
   };
@@ -22,6 +22,8 @@ export const getInitialValuesForAdd = (objectToEdit: any | null = null): any =>
     key: null ,
     type: null ,
     value: null ,
+    value_type: "text",
+
 
     
 

src/Pages/Key/useTableColumns.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 import Actions from "../../Components/Ui/tables/Actions";
 import { useNavigate } from "react-router-dom";
 import { useDeleteKey } from "../../api/Key";
+import ColumnsImage from "../../Components/Columns/ColumnsImage";
 
 
 const useTableColumns :any = () => {
@@ -26,19 +27,26 @@ const useTableColumns :any = () => {
         cell: (row:any) => row?.key
       },
 
-      {
-        name: t("value"),
-        sortable: false,
-        center: "true",
-        cell: (row:any) => row?.value
-      },
-
       {
         name: t("type"),
         sortable: false,
         center: "true",
         cell: (row:any) => row?.type
       },
+
+      {
+        name: t("value"),
+        sortable: false,
+        center: true,
+        cell: (row:any) => {
+            if (row?.value.startsWith("/")) {
+              let src = row?.value;
+              return <ColumnsImage src={src} />
+                        } else {
+                return row?.value;
+            }
+        }
+    },    
       {
         name: "#",
         sortable: false,

src/Pages/RequestQuotation/useTableColumns.tsx

@@ -3,6 +3,7 @@ import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import Actions from "../../Components/Ui/tables/Actions";
 import { Button } from "antd";
+import { ImageBaseURL } from "../../api/config";
 
 
 const useTableColumns :any = () => {
@@ -47,10 +48,10 @@ const useTableColumns :any = () => {
         sortable: false,
         center: "true",
         cell: (row:any) =>  {
-          let src = row?.attachment;
+          let src =  ImageBaseURL+row?.attachment;
           const handleClick = () => {
             if (row?.attachment) {
-                window.open(row.attachment, '_blank');
+                window.open(src, '_blank');
             }
         };
           return    <Button onClick={handleClick}>attachment</Button>

src/api/config.ts

@@ -2,6 +2,7 @@
 //  export const BaseURL = `https://etaxiapi.rayantaxi.com/`;
 // export const BaseURL = `https://etaxi.Point.net/`;
 export const BaseURL = `http://127.0.0.1:8000/api/`;
+export const ImageBaseURL = `http://127.0.0.1:8000`;
 
 const PROJECT_NAME = "Point"