Merge pull request #61 from iranpsc/fix/logic-bugs

fix map polygan and building logic

Author: theAwmin

src/App.jsx

@@ -1,7 +1,6 @@
-import { useEffect, useLayoutEffect, useState } from "react";
-import { BrowserRouter, useNavigate } from "react-router-dom"; // Import useNavigate
+import { useLayoutEffect } from "react";
+import { BrowserRouter } from "react-router-dom"; // Import useNavigate
 import { Toaster } from "react-hot-toast";
-import { useTranslation } from "react-i18next";
 import "./App.css";
 import "react-quill/dist/quill.snow.css";
 import styled from "styled-components";
@@ -21,7 +20,6 @@ import { MapProvider } from "react-map-gl";
 import { SelectedEnvironmentProvider } from "./services/reducers/SelectedEnvironmentContext.jsx";
 import { AlertProvider } from "./services/reducers/AlertContext.jsx";
 import Routers from "./layouts/map/Routers.jsx";
-import { getFieldTranslationByNames } from "./services/Utility/index.jsx";
 import { LanguageProvider } from "./services/reducers/LanguageContext.jsx";
 import { LoaderProvider } from "./services/reducers/LoaderProvider.jsx";
 import RotateDevice from "./components/RotateDevice";
@@ -49,7 +47,6 @@ const Container = styled.section`
 function App() {
   useAppHeight();
 
-  console.log(useTranslation());
   useLayoutEffect(() => {
     window.Echo = new Echo({
       broadcaster: "pusher",

src/assets/gif/Time Hourglass.gif.mp4

@@ -50,7 +50,7 @@ const ButtonElement = styled.button`
   }
 
   @media (min-width: 998px) {
-    height: 50px;
+    height: ${(props) => (props.large ? "40px" : "50px")};
   }
   img {
     width: 25px;

src/assets/gif/clockdark.gif

@@ -0,0 +1,111 @@
+import "react-quill/dist/quill.snow.css";
+import React, { useState, useEffect } from "react";
+import ReactQuill from "react-quill";
+import { CiEdit } from "react-icons/ci";
+import {
+  convertToPersian,
+  getFieldTranslationByNames,
+} from "../../services/Utility";
+import {
+  EditorContainer as StyledEditorContainer,
+  Label,
+  Char,
+  formats,
+  modulesWithoutImage,
+} from "../editorContainerStyle";
+
+/**
+ * Reusable RichTextEditor with strict char limit
+ *
+ * Props:
+ * - value: string (initial content)
+ * - onChange: function (called when value changes)
+ * - charLimit: number (max characters)
+ * - label: string (optional label above editor)
+ * - showIcon: boolean (whether to show CiEdit icon)
+ * - placeholder: string (placeholder when empty)
+ */
+const CustomEditor = ({
+  value = "",
+  onChange,
+  charLimit = 2000,
+  label,
+  showIcon = true,
+  placeholder = "",
+}) => {
+  const [content, setContent] = useState(value);
+
+  useEffect(() => {
+    setContent(value);
+  }, [value]);
+  const handleChange = (val, delta, source, editor) => {
+    // طول واقعی متن بدون html
+    const text = editor.getText(); // این متن plain text است
+    let newValue = val;
+
+    if (text.length - 1 > charLimit) {
+      // -1 چون editor یه \n اضافه می‌کنه
+      const allowedText = text.slice(0, charLimit);
+      // جایگزینی متن editor با محدودیت
+      const quill = editor;
+      quill.deleteText(charLimit, text.length); // بقیه رو حذف می‌کنه
+      newValue = quill.root.innerHTML;
+    }
+
+    setContent(newValue);
+    onChange?.(newValue);
+  };
+
+  const handleKeyDown = (event) => {
+    const allowedKeys = [
+      "Backspace",
+      "Delete",
+      "ArrowLeft",
+      "ArrowRight",
+      "ArrowUp",
+      "ArrowDown",
+    ];
+    if (content.length >= charLimit && !allowedKeys.includes(event.key)) {
+      event.preventDefault();
+    }
+  };
+
+  const handlePaste = (event) => {
+    event.preventDefault();
+    const paste = event.clipboardData.getData("text");
+    const remaining = charLimit - content.length;
+    if (remaining <= 0) return; // هیچ چیزی اضافه نشود
+    const toPaste = paste.slice(0, remaining);
+    const newValue = content + toPaste;
+    setContent(newValue);
+    onChange?.(newValue);
+  };
+
+  const remainingChars = charLimit - content.length;
+  const isOverLimit = remainingChars <= 0;
+
+  return (
+    <div>
+      {label && <Label>{label}</Label>}
+      <StyledEditorContainer>
+        <ReactQuill
+          value={content}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          onPaste={handlePaste}
+          modules={modulesWithoutImage}
+          formats={formats}
+          placeholder={placeholder}
+        />
+      </StyledEditorContainer>
+      <Char isOverLimit={isOverLimit}>
+        <span>
+          {convertToPersian(remainingChars)} {getFieldTranslationByNames("530")}
+        </span>
+        {showIcon && <CiEdit size={20} />}
+      </Char>
+    </div>
+  );
+};
+
+export default CustomEditor;

src/assets/gif/clocklight.gif

@@ -0,0 +1,73 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  cursor: pointer;
+`;
+
+const Menu = styled.ul`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 8px;
+`;
+
+const Item = styled.li`
+  width: 100%;
+  display: flex;
+  gap: 10px;
+  justify-content: flex-start;
+  color: flex-start;
+  padding: 6px 0;
+  cursor: pointer;
+
+  &:hover {
+    color: #0066ff;
+  }
+`;
+
+const Name = styled.p`
+  max-width: 200px;
+  overflow: hidden;
+  transition: max-width 0.2s ease;
+
+  color: ${(p) => (p.selected ? p.theme.colors.primary : "#858585")};
+  :hover {
+    color: ${({ theme }) => theme.colors.primary};
+  }
+`;
+
+// ===============================
+//          COMPONENT
+// ===============================
+export default function DropdownLanguageModule({
+  langArray,
+  currentLangObject,
+  changeLanguage,
+  currentLang,
+  setIsLangOpen,
+  isLangOpen,
+}) {
+  return (
+    <Wrapper>
+      <Menu>
+        {langArray?.map((item) => (
+          <Item
+            key={item.id}
+            onClick={() => {
+              changeLanguage(item.code); // ← تغییر زبان با انتخاب آیتم
+              setIsLangOpen(!isLangOpen);
+            }}
+          >
+            <img
+              src={item.icon}
+              alt={item.native_name}
+              width={28}
+              height={28}
+            />
+            <Name selected={currentLang === item.code}>{item.native_name}</Name>
+          </Item>
+        ))}
+      </Menu>
+    </Wrapper>
+  );
+}