From 8216e7b36f17418110582f343e7faa60dbc8a50f Mon Sep 17 00:00:00 2001 From: KarimAldeen Date: Thu, 4 Apr 2024 14:59:01 +0300 Subject: [PATCH] add_type_image_for_key_page --- src/Components/Columns/ColumnsImage.tsx | 3 +- src/Components/ValidationField/View/File.tsx | 16 ++++--- src/Pages/Key/View/AddForm.tsx | 35 ++++++++++++++- src/Pages/Key/View/EditForm.tsx | 43 ++++++++++++++++--- src/Pages/Key/formUtil.ts | 4 +- src/Pages/Key/useTableColumns.tsx | 22 +++++++--- .../RequestQuotation/useTableColumns.tsx | 5 ++- src/api/config.ts | 1 + 8 files changed, 106 insertions(+), 23 deletions(-) diff --git a/src/Components/Columns/ColumnsImage.tsx b/src/Components/Columns/ColumnsImage.tsx index 0247df7..15a8c56 100644 --- a/src/Components/Columns/ColumnsImage.tsx +++ b/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 diff --git a/src/Components/ValidationField/View/File.tsx b/src/Components/ValidationField/View/File.tsx index f2816aa..77929e4 100644 --- a/src/Components/ValidationField/View/File.tsx +++ b/src/Components/ValidationField/View/File.tsx @@ -1,20 +1,26 @@ 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[] = [ { uid: '-1', name: '', status: 'done', - url: FormikName, - thumbUrl: FormikName + url: FormikName === ""? imageUrl : imageUrl?.replace("public", "/storage"), + 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 (
('text') + const handelchange = ()=>{ + setFieldValue("value",null) + + if(valueType === "image"){ + + setvalueType("text") + setFieldValue("value_type","text") + + }else{ + setvalueType("image") + setFieldValue("value_type","image") + + } + + } return ( + {valueType === "text" + ? + + + : + + + } - + + diff --git a/src/Pages/Key/View/EditForm.tsx b/src/Pages/Key/View/EditForm.tsx index ca6f193..e2ac4f3 100644 --- a/src/Pages/Key/View/EditForm.tsx +++ b/src/Pages/Key/View/EditForm.tsx @@ -1,27 +1,58 @@ import { Col, Row } from 'reactstrap'; import ValidationField from '../../../Components/ValidationField/ValidationField'; +import React from 'react'; +import { useFormikContext } from 'formik'; function Form() { const typeselect = [ - {label : "home" , value : "home"}, - {label : "setting" , value : "setting"}, - {label : "contact_us" , value : "contact_us"}, - {label : "about_us" , value : "about_us"} + { label: "home", value: "home" }, + { label: "setting", value: "setting" }, + { label: "contact_us", value: "contact_us" }, + { label: "about_us", value: "about_us" } ] + const typeValueselect = [ + { label: "image", value: "image" }, + { label: "text", value: "text" }, + + ] + const {values, setFieldValue } = useFormikContext() + 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 ( + {valueType === "text" + ? + + + : + + + } - - + + + diff --git a/src/Pages/Key/formUtil.ts b/src/Pages/Key/formUtil.ts index 3aff4df..8a8999b 100644 --- a/src/Pages/Key/formUtil.ts +++ b/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", + diff --git a/src/Pages/Key/useTableColumns.tsx b/src/Pages/Key/useTableColumns.tsx index 65755c8..e39f999 100644 --- a/src/Pages/Key/useTableColumns.tsx +++ b/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 + } else { + return row?.value; + } + } + }, { name: "#", sortable: false, diff --git a/src/Pages/RequestQuotation/useTableColumns.tsx b/src/Pages/RequestQuotation/useTableColumns.tsx index 2d14815..7d8dcb6 100644 --- a/src/Pages/RequestQuotation/useTableColumns.tsx +++ b/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 diff --git a/src/api/config.ts b/src/api/config.ts index 57634c0..1863dfd 100644 --- a/src/api/config.ts +++ b/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"