Upgrade packages, added tags

apps/blueprints/src/components/Select.tsx

@@ -6,15 +6,15 @@ interface Tag {
 }
 
 interface SelectProps {
-  options: string[];
+  options: Array<string | { value: string; label: string }>;
   value: string[];
   onChange: (tags: string[]) => void;
   className?: string;
 }
 
 export const Select: React.FC<SelectProps> = ({ options, value, onChange, className }) => {
-  const TAGS = options.map((key) => {
-    return { value: key, label: key.replace(/[_-]/g, " ") };
+  const TAGS = options.map((tag) => {
+    return typeof tag === "string" ? { value: tag, label: tag.replace(/[_-]/g, " ") } : tag;
   });
 
   return (

apps/blueprints/src/pages/api/blueprint/create.ts

@@ -15,7 +15,7 @@ const handler = apiHandler(async (req, res, { session }) => {
     return res.status(401).json({ status: "Not authenticated" });
   }
 
-  const { title, description, string } = req.body;
+  const { title, description, string, tags } = req.body;
 
   const parsed = await parseBlueprintString(string).catch(() => null);
 
@@ -35,7 +35,7 @@ const handler = apiHandler(async (req, res, { session }) => {
     const info = {
       user_id: session.user.id,
       title,
-      tags: [],
+      tags: Array.isArray(tags) ? tags : [],
       description_markdown: description,
     };
 

apps/blueprints/src/pages/index.tsx

@@ -20,8 +20,10 @@ import {
   RadioGroup,
   Stack,
   Radio,
+  Checkbox,
 } from "@chakra-ui/react";
 import { MdSearch } from "react-icons/md";
+import { TAGS } from "@factorio-sites/common-utils";
 
 interface IndexProps {
   totalItems: number;
@@ -46,12 +48,17 @@ export const Index: NextPage<IndexProps> = ({
   }, [router.query.q]);
 
   if (!data) return null;
+  console.log(JSON.stringify(router.query, null, 2));
 
   const entityOptions = Object.keys(data.entities).filter(
     (key) => !key.startsWith("factorio-logo") && !key.startsWith("crash-site")
   );
   const recipeOptions = Object.keys(data.recipes);
   const itemOptions = Object.keys(data.items).filter((key) => key.includes("module"));
+  const tagsOptions = TAGS.map((tag) => ({
+    label: `${tag.category}: ${tag.label}`,
+    value: tag.value,
+  }));
 
   return (
     <SimpleGrid columns={1} margin="0.7rem">
@@ -100,6 +107,29 @@ export const Index: NextPage<IndexProps> = ({
                 </RadioGroup>
               </Box>
             </Box>
+            <Box css={{ marginTop: "1rem" }}>
+              <Text css={{ marginRight: "1rem" }}>Search mode</Text>
+              <Box css={{ marginRight: "1rem" }}>
+                <RadioGroup
+                  onChange={(value: string) => router.push(routerQueryToHref({ mode: value }))}
+                  value={(router.query.mode as string) || "and"}
+                >
+                  <Stack>
+                    <Radio value="and">AND</Radio>
+                    <Radio value="or">OR</Radio>
+                  </Stack>
+                </RadioGroup>
+              </Box>
+            </Box>
+            <Box css={{ marginTop: "1rem" }}>
+              <Text css={{ marginRight: "1rem" }}>Tags</Text>
+              <Select
+                options={tagsOptions}
+                value={queryValueAsArray(router.query.tags)}
+                onChange={(tags) => router.push(routerQueryToHref({ tags }))}
+                css={{ width: "200px", marginRight: "1rem" }}
+              />
+            </Box>
             <Box css={{ marginTop: "1rem" }}>
               <Text css={{ marginRight: "1rem" }}>Entities</Text>
               <Select
@@ -127,6 +157,16 @@ export const Index: NextPage<IndexProps> = ({
                 css={{ width: "200px", marginRight: "1rem" }}
               />
             </Box>
+            <Box css={{ marginTop: "1rem", display: "flex", alignItems: "center" }}>
+              <Text css={{ marginRight: "1rem", display: "inline-block" }}>Snaps to grid</Text>
+              <Checkbox
+                value="true"
+                onChange={(ev) =>
+                  router.push(routerQueryToHref({ absolute_snapping: String(ev.target.checked) }))
+                }
+                isChecked={router.query.absolute_snapping === "true"}
+              />
+            </Box>
           </Box>
           <Box>
             <Box css={{ display: "flex", flexWrap: "wrap", minHeight: "400px" }}>
@@ -154,17 +194,23 @@ export async function getServerSideProps({ query }: NextPageContext) {
   const items = query.items ? String(query.items).split(",") : undefined;
   const recipes = query.recipes ? String(query.recipes).split(",") : undefined;
   const user = query.user ? String(query.user) : undefined;
+  const absolute_snapping = query.absolute_snapping
+    ? String(query.absolute_snapping) === "true"
+    : false;
+  const mode = String(query.mode).toUpperCase() === "OR" ? "OR" : "AND";
 
   const { count, rows } = await searchBlueprintPages({
     page,
     perPage,
     query: query.q as string,
     order,
+    mode,
     tags,
     entities,
     items,
     recipes,
     user,
+    absolute_snapping,
   });
 
   return {

apps/blueprints/src/pages/user/blueprint-create.tsx

@@ -15,6 +15,7 @@ import {
 import { Formik, Field, FieldProps } from "formik";
 import { css } from "@emotion/react";
 import { chakraResponsive } from "@factorio-sites/web-utils";
+import { TAGS } from "@factorio-sites/common-utils";
 import { Panel } from "../../components/Panel";
 import { validateCreateBlueprintForm } from "../../utils/validate";
 import { ImageEditor } from "../../components/ImageEditor";
@@ -28,6 +29,11 @@ const FieldStyle = css`
 export const UserBlueprintCreate: NextPage = () => {
   const router = useRouter();
 
+  const tagsOptions = TAGS.map((tag) => ({
+    label: `${tag.category}: ${tag.label}`,
+    value: tag.value,
+  }));
+
   return (
     <div css={{ margin: "0.7rem" }}>
       <Formik
@@ -98,9 +104,9 @@ export const UserBlueprintCreate: NextPage = () => {
                       isInvalid={meta.touched && !!meta.error}
                       css={FieldStyle}
                     >
-                      <FormLabel>Tags (WIP)</FormLabel>
+                      <FormLabel>Tags</FormLabel>
                       <Select
-                        options={[]}
+                        options={tagsOptions}
                         value={field.value}
                         onChange={(tags) => setFieldValue("tags", tags)}
                       />

apps/blueprints/src/pages/user/blueprint/[blueprintId].tsx

@@ -27,6 +27,7 @@ import { Panel } from "../../../components/Panel";
 import { validateCreateBlueprintForm } from "../../../utils/validate";
 import { ImageEditor } from "../../../components/ImageEditor";
 import { Select } from "../../../components/Select";
+import { TAGS } from "@factorio-sites/common-utils";
 
 const FieldStyle = css`
   margin-bottom: 1rem;
@@ -45,14 +46,19 @@ export const UserBlueprint: NextPage<UserBlueprintProps> = ({ blueprintPage, sel
 
   if (!blueprintPage) return null;
 
+  const tagsOptions = TAGS.map((tag) => ({
+    label: `${tag.category}: ${tag.label}`,
+    value: tag.value,
+  }));
+
   return (
     <div css={{ margin: "0.7rem" }}>
       <Formik
         initialValues={{
           title: blueprintPage.title,
           description: blueprintPage.description_markdown,
           string: selected.string,
-          tags: [] as string[],
+          tags: blueprintPage.tags || ([] as string[]),
         }}
         validate={validateCreateBlueprintForm}
         onSubmit={async (values, { setSubmitting, setErrors, setStatus }) => {
@@ -123,9 +129,9 @@ export const UserBlueprint: NextPage<UserBlueprintProps> = ({ blueprintPage, sel
                       isInvalid={meta.touched && !!meta.error}
                       css={FieldStyle}
                     >
-                      <FormLabel>Tags (WIP)</FormLabel>
+                      <FormLabel>Tags</FormLabel>
                       <Select
-                        options={[]}
+                        options={tagsOptions}
                         value={field.value}
                         onChange={(tags) => setFieldValue("tags", tags)}
                       />

apps/blueprints/src/utils/validate.ts

@@ -86,6 +86,10 @@ export const validateCreateBlueprintForm = (values: CreateBlueprintValues) => {
   errors.description = validateRequired(values.description);
   errors.string = validateRequired(values.string);
 
+  if (values.string) {
+    console.log(parseBlueprintStringClient(values.string));
+  }
+
   // If string is set also validate it to be parsable
   if (!errors.string && !parseBlueprintStringClient(values.string)) {
     errors.string = "Not recognised as a blueprint string";

libs/common-utils/src/index.ts

@@ -1 +1,2 @@
 export * from "./lib/common-utils";
+export * from "./lib/tags";

libs/common-utils/src/lib/tags.ts

@@ -0,0 +1,42 @@
+type Tag = { value: string; label: string; category: string };
+
+export const TAGS: Tag[] = [
+  { value: "belt/balancer", label: "Balancer", category: "Belt" },
+  { value: "belt/prioritizer", label: "Prioritizer", category: "Belt" },
+  { value: "belt/tap", label: "Tap", category: "Belt" },
+
+  { value: "circuit/indicator", label: "circuit indicator", category: "Circuit" },
+  { value: "circuit/counter", label: "circuit counter", category: "Circuit" },
+
+  { value: "state/early_game", label: "Early game", category: "State" },
+  { value: "state/mid_game", label: "Mid game", category: "State" },
+  { value: "state/late_game", label: "Late game", category: "State" },
+  // { value: "meta/beaconized", label: "Beaconized", category: "Meta" },
+  { value: "meta/compact", label: "Compact", category: "Meta" },
+  { value: "meta/marathon", label: "Marathon", category: "Meta" },
+  { value: "meta/inputs_are_marked", label: "Inputs are marked", category: "Meta" },
+
+  { value: "mods/modded", label: "Modded", category: "Mods" },
+
+  // { value: "power/nuclear", label: "power nuclear", category: "power" },
+  // { value: "power/solar", label: "power solar", category: "power" },
+  // { value: "power/steam", label: "power steam", category: "power" },
+  // { value: "power/accumulator", label: "power accumulator", category: "power" },
+
+  // { value: "oil processing", label: "oil processing", category: "" },
+  // { value: "coal liquification", label: "coal liquification", category: "" },
+
+  { value: "train/loading_station", label: "Loading station", category: "Train" },
+  { value: "train/unloading_station", label: "Unloading station", category: "Train" },
+  { value: "train/pax", label: "Pax", category: "Train" },
+  { value: "train/intersection", label: "Intersection", category: "Train" },
+  { value: "train/stacker", label: "Stacker", category: "Train" },
+  { value: "train/track", label: "Track", category: "Train" },
+  { value: "train/LHD", label: "Left hand drive", category: "Train" },
+  { value: "train/RHD", label: "Right hand drive", category: "Train" },
+];
+
+export const TAGS_BY_KEY = TAGS.reduce((tags, tag) => {
+  tags[tag.value] = tag;
+  return tags;
+}, {} as Record<string, Tag>);

libs/database/src/lib/data/blueprint_book.ts

@@ -60,7 +60,7 @@ export async function createBlueprintBook(
       child_tree.push({
         type: "blueprint",
         id: result.id,
-        name: blueprint.blueprint.label,
+        name: blueprint.blueprint.label || "",
       });
       blueprint_ids.push(result.id);
     } else if (blueprint.blueprint_book) {