feature/webgl-preview-update (#21)

Co-authored-by: itoshi <kkzemeow@gmail.com>
Reviewed-on: #21

src/widgets/CitySelector/index.tsx

@@ -6,71 +6,140 @@ import {
   SelectChangeEvent,
   Typography,
   Box,
+  keyframes,
 } from "@mui/material";
 import { observer } from "mobx-react-lite";
-import { cityStore, selectedCityStore } from "@shared";
+import { authStore, cityStore, selectedCityStore, snapshotStore, type City } from "@shared";
 import { MapPin } from "lucide-react";
 
+const borderSpin = keyframes`
+  0% {
+    background-position: 0% 50%;
+  }
+  100% {
+    background-position: 200% 50%;
+  }
+`;
+
 export const CitySelector: React.FC = observer(() => {
-  const { getCities, cities } = cityStore;
-  const { selectedCity, setSelectedCity } = selectedCityStore;
+  const { selectedCity, setSelectedCity, isLocked } = selectedCityStore;
+  const canLoadAllCities = authStore.isAdmin && authStore.canRead("cities");
 
   useEffect(() => {
-    getCities("ru");
-  }, []);
+    if (canLoadAllCities) {
+      cityStore.getCities("ru");
+      return;
+    }
+    authStore.fetchMeCities().catch(() => undefined);
+  }, [canLoadAllCities]);
+
+  const baseCities: City[] = canLoadAllCities
+    ? cityStore.cities["ru"].data
+    : authStore.meCities["ru"].map((uc) => ({
+        id: uc.city_id,
+        name: uc.name,
+        country: "",
+        country_code: "",
+        arms: "",
+      }));
+
+  const currentCities: City[] = selectedCity?.id
+    ? (() => {
+        const exists = baseCities.some((city) => city.id === selectedCity.id);
+        if (exists) {
+          return baseCities;
+        }
+        return [selectedCity, ...baseCities];
+      })()
+    : baseCities;
+
+  const noCitySelected = !selectedCity?.id;
 
   const handleCityChange = (event: SelectChangeEvent<string>) => {
     const cityId = event.target.value;
     if (cityId === "") {
+      snapshotStore.clearStoreCache();
       setSelectedCity(null);
       return;
     }
 
-    const city = cities["ru"].data.find((c) => c.id === Number(cityId));
+    const city = currentCities.find((c) => c.id === Number(cityId));
     if (city) {
+      snapshotStore.clearStoreCache();
       setSelectedCity(city);
     }
   };
 
-  const currentCities = cities["ru"].data;
+  const selectElement = (
+    <Select
+      value={selectedCity?.id?.toString() || ""}
+      onChange={handleCityChange}
+      displayEmpty
+      disabled={isLocked}
+      sx={{
+        height: "40px",
+        color: "white",
+        borderRadius: "4px",
+        ...(noCitySelected && !isLocked
+          ? {
+              backgroundColor: "#48989f",
+              "& .MuiOutlinedInput-notchedOutline": { border: "none" },
+            }
+          : {
+              "& .MuiOutlinedInput-notchedOutline": {
+                borderColor: isLocked
+                  ? "rgba(255, 255, 255, 0.1)"
+                  : "rgba(255, 255, 255, 0.3)",
+              },
+            }),
+        "&.Mui-disabled": {
+          color: "rgba(255, 255, 255, 0.5)",
+          WebkitTextFillColor: "rgba(255, 255, 255, 0.5)",
+        },
+        "&:hover .MuiOutlinedInput-notchedOutline": {
+          borderColor: isLocked
+            ? "rgba(255, 255, 255, 0.1)"
+            : "rgba(255, 255, 255, 0.5)",
+        },
+        "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+          borderColor: "white",
+        },
+        "& .MuiSvgIcon-root": {
+          color: isLocked ? "rgba(255, 255, 255, 0.3)" : "white",
+        },
+      }}
+    >
+      <MenuItem value="">
+        <Typography variant="body2">Выберите город</Typography>
+      </MenuItem>
+      {currentCities.map((city) => (
+        <MenuItem key={city.id} value={city.id?.toString()}>
+          <Typography variant="body2">{city.name}</Typography>
+        </MenuItem>
+      ))}
+    </Select>
+  );
 
   return (
     <Box className="flex items-center gap-2">
-      <MapPin size={16} className="text-white" />
+      <MapPin size={16} className={isLocked ? "text-gray-400" : "text-white"} />
       <FormControl size="medium" sx={{ minWidth: 120 }}>
-        <Select
-          value={selectedCity?.id?.toString() || ""}
-          onChange={handleCityChange}
-          displayEmpty
-          sx={{
-            height: "40px",
-            color: "white",
-            "& .MuiOutlinedInput-notchedOutline": {
-              borderColor: "rgba(255, 255, 255, 0.3)",
-            },
-            "&:hover .MuiOutlinedInput-notchedOutline": {
-              borderColor: "rgba(255, 255, 255, 0.5)",
-            },
-            "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-              borderColor: "white",
-            },
-            "& .MuiSvgIcon-root": {
-              color: "white",
-            },
-          }}
-          MenuProps={{
-            PaperProps: {},
-          }}
-        >
-          <MenuItem value="">
-            <Typography variant="body2">Выберите город</Typography>
-          </MenuItem>
-          {currentCities.map((city) => (
-            <MenuItem key={city.id} value={city.id?.toString()}>
-              <Typography variant="body2">{city.name}</Typography>
-            </MenuItem>
-          ))}
-        </Select>
+        {noCitySelected && !isLocked ? (
+          <Box
+            sx={{
+              position: "relative",
+              borderRadius: "4px",
+              padding: "2px",
+              background: "linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.7), rgba(255,255,255,0.1), rgba(255,255,255,0.7), rgba(255,255,255,0.1))",
+              backgroundSize: "200% 100%",
+              animation: `${borderSpin} 2.5s linear infinite`,
+            }}
+          >
+            {selectElement}
+          </Box>
+        ) : (
+          selectElement
+        )}
       </FormControl>
     </Box>
   );