feat: Sync projects by creating an account

npm/src/index.ts

@@ -150,7 +150,6 @@ function placeAllParts(
       board.width - extraSpace,
       board.length - extraSpace,
     );
-    console.log({ boardRect, board, extraSpace });
 
     // Fill the bin
     const partsToPlace = unplacedPartsArray

package.json

@@ -31,6 +31,7 @@
   },
   "dependencies": {
     "@aklinker1/check": "^1.3.1",
+    "firebaseui": "^6.1.0",
     "nanoid": "^5.0.7",
     "panzoom": "^9.4.3",
     "standard-version": "^9.5.0",

web/components/BomTab.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
 import type { BoardLayoutLeftover } from '@aklinker1/cutlist';
 
-const { data: doc } = useDocumentQuery();
+const url = useAssemblyUrl();
+const { data: doc } = useDocumentQuery(url);
 const { data, isLoading } = useBoardLayoutsQuery();
-const distanceUnit = useDistanceUnit();
+const { distanceUnit } = useProjectSettings();
 const formatDistance = useFormatDistance();
 
 const rows = computed(() => {

web/components/OnshapeProjectDetails.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  url: string;
+}>();
+
+const { data: doc } = useDocumentQuery(() => props.url);
+</script>
+
+<template>
+  <div v-if="doc" class="flex-1 page-break-after">
+    <h1 class="text-lg font-medium">{{ doc.name }}</h1>
+    <p class="text-sm opacity-50">
+      by {{ doc.owner.name }} &bull;
+      <ULink
+        class="hover:underline inline-flex gap-1 items-center"
+        :to="url"
+        target="blank"
+        title="Open in Onshape"
+      >
+        <span>{{ doc.defaultWorkspace.name }} Revision</span>
+        <UIcon
+          name="i-heroicons-arrow-top-right-on-square-16-solid"
+          class="size-4"
+        />
+      </ULink>
+    </p>
+    <a
+      class="text-sm opacity-50 hidden print:block"
+      :href="url"
+      target="_blank"
+      >{{ url }}</a
+    >
+  </div>
+</template>

web/components/PartListItem.vue

@@ -21,7 +21,7 @@ const fontSize = usePx(() =>
   ),
 );
 
-const showPartNumbers = useShowPartNumbers();
+const { showPartNumbers } = useProjectSettings();
 </script>
 
 <template>

web/components/ProfileTab.vue

@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+const currentUser = useCurrentUser();
+</script>
+
+<template>
+  <TabListItem to="/account" hide-close>
+    <span v-if="!currentUser" class="text-sm">Sign In</span>
+    <UIcon name="i-heroicons-user-circle" class="size-6" />
+  </TabListItem>
+</template>

web/components/ProjectList.vue

@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+const createNewProject = useCreateNewProject();
+
+const { data: projects, isFetching } = useProjectListQuery();
+const filter = ref('');
+const filteredProjects = useArrayFilter(projects, (p) =>
+  p.name.toLowerCase().includes(filter.value.toLowerCase()),
+);
+
+const openProject = useOpenProject();
+const deleteProject = useDeleteProject();
+</script>
+
+<template>
+  <ul class="flex flex-col gap-2">
+    <li>
+      <UInput
+        v-model="filter"
+        placeholder="Filter projects..."
+        icon="i-heroicons-magnifying-glass"
+      />
+    </li>
+    <ProjectListItem
+      v-for="project of filteredProjects"
+      :key="project.id"
+      :project
+      @open="openProject"
+      @delete="deleteProject"
+    />
+    <li v-if="isFetching" class="flex justify-center">
+      <UButton
+        class="pointer-events-none"
+        loading
+        variant="ghost"
+        color="white"
+        disabled
+      >
+        Loading...
+      </UButton>
+    </li>
+    <li v-else-if="filteredProjects.length === 0" class="text-center py-16">
+      No projects,
+      <ULink variant="link" @click="createNewProject">add one</ULink>
+    </li>
+    <slot />
+  </ul>
+</template>

web/components/ProjectSidebar.vue

@@ -1,10 +1,8 @@
 <script lang="ts" setup>
 import type { HorizontalNavigationLink } from '#ui/types';
 
-const url = useAssemblyUrl();
-const { data: doc } = useDocumentQuery();
-const { isFetching: isFetchingLayouts } = useBoardLayoutsQuery();
-const { data: boardLayouts } = useBoardLayoutsQuery();
+const { data: boardLayouts, isFetching: isFetchingLayouts } =
+  useBoardLayoutsQuery();
 const refresh = useRefreshOnshapeQueries();
 
 const warningsBadge = computed(() => {
@@ -21,10 +19,10 @@ const links = computed<HorizontalNavigationLink[]>(() => [
     click: () => void (tab.value = 'bom'),
   },
   {
-    label: 'Stock',
-    icon: 'i-heroicons-truck',
-    active: tab.value === 'stock',
-    click: () => void (tab.value = 'stock'),
+    label: 'Boards',
+    icon: 'i-fluent-emoji-high-contrast-wood',
+    active: tab.value === 'boards',
+    click: () => void (tab.value = 'boards'),
   },
   {
     label: 'Warnings',
@@ -56,33 +54,10 @@ const editProject = useEditProject();
   <div class="flex flex-col">
     <header class="flex flex-col shrink-0">
       <div
-        v-if="doc"
+        v-if="project"
         class="mx-2 mt-2 p-2 pl-3 flex gap-2 items-center print:m-0 print:p-0"
       >
-        <div class="flex-1 page-break-after">
-          <h1 class="text-lg font-medium">{{ doc.name }}</h1>
-          <p class="text-sm opacity-50">
-            by {{ doc.owner.name }} &bull;
-            <ULink
-              class="hover:underline inline-flex gap-1 items-center"
-              :to="url"
-              target="blank"
-              title="Open in Onshape"
-            >
-              <span>{{ doc.defaultWorkspace.name }} Revision</span>
-              <UIcon
-                name="i-heroicons-arrow-top-right-on-square-16-solid"
-                class="size-4"
-              />
-            </ULink>
-          </p>
-          <a
-            class="text-sm opacity-50 hidden print:block"
-            :href="url"
-            target="_blank"
-            >{{ url }}</a
-          >
-        </div>
+        <OnshapeProjectDetails :url="project.source.url" />
 
         <UButton
           class="print:hidden"
@@ -115,7 +90,7 @@ const editProject = useEditProject();
     <div class="relative flex-1">
       <div class="absolute inset-0 overflow-auto">
         <BomTab v-if="tab === 'bom'" />
-        <StockTab v-else-if="tab === 'stock'" />
+        <StockTab v-else-if="tab === 'boards'" />
         <WarningsTab v-else-if="tab === 'warnings'" class="p-8" />
         <SettingsTab v-else-if="tab === 'settings'" class="p-8" />
       </div>

web/components/SettingsTab.vue

@@ -1,33 +1,55 @@
 <script lang="ts" setup>
 import { Distance } from '@aklinker1/cutlist';
 
-const optimize = useOptimizeForSetting();
-const bladeWidth = useBladeWidthSetting();
-const distanceUnit = useDistanceUnit();
-const showPartNumbers = useShowPartNumbers();
-const extraSpace = useExtraSpaceSetting();
+const {
+  bladeWidth,
+  distanceUnit,
+  extraSpace,
+  optimize,
+  showPartNumbers,
+  isLoading,
+  changes,
+  resetSettings: resetLocal,
+} = useProjectSettings();
 
 // Convert values when units change
 watch(distanceUnit, (newUnit, oldUnit) => {
   if (!newUnit || !oldUnit) return;
 
-  const convertValue = (value: Ref<string | number>) => {
+  const convertDistance = (value: Ref<string | number | undefined>) => {
+    if (value.value == null) return;
     const dist = new Distance(value.value + oldUnit);
     value.value = dist[newUnit];
   };
-  convertValue(bladeWidth);
-  convertValue(extraSpace);
+  convertDistance(bladeWidth);
+  convertDistance(extraSpace);
 });
+
+const projectId = useProjectId();
+const { mutate: _save, isPending: isSaving } = useSetSettingsMutation();
+function save() {
+  _save({
+    projectId: projectId.value,
+    changes: toRaw(changes.value),
+  });
+}
+
+const { mutate: _reset, isPending: isResetting } = useDeleteSettingsMutation();
+function reset() {
+  _reset(projectId.value, {
+    onSettled: () => resetLocal(),
+  });
+}
 </script>
 
 <template>
-  <div class="flex flex-col gap-4">
+  <form v-if="!isLoading" class="flex flex-col gap-4" @submit.prevent="save">
     <UFormGroup label="Distance unit">
       <USelect v-model="distanceUnit" :options="['in', 'm', 'mm']" />
     </UFormGroup>
 
     <UFormGroup :label="`Blade width (${distanceUnit}):`">
-      <UInput v-model="bladeWidth" type="number" />
+      <UInput v-model="bladeWidth" type="number" min="0" step="0.00001" />
     </UFormGroup>
 
     <UFormGroup :label="`Extra space (${distanceUnit}):`">
@@ -40,8 +62,11 @@ watch(distanceUnit, (newUnit, oldUnit) => {
 
     <UCheckbox v-model="showPartNumbers" label="Show part numbers in preview" />
 
-    <p class="text-sm opacity-50 text-center pt-8">
-      Settings are saved when returning to the website.
-    </p>
-  </div>
+    <div class="flex flex-row-reverse gap-4">
+      <UButton type="submit" :loading="isSaving">Save Changes</UButton>
+      <UButton color="gray" :loading="isResetting" @click="reset"
+        >Reset</UButton
+      >
+    </div>
+  </form>
 </template>

web/components/StockMatrixInput.vue

@@ -1,46 +1,48 @@
 <script lang="ts" setup>
-import { StockMatrix } from '@aklinker1/cutlist';
-import { z } from 'zod';
-import YAML from 'js-yaml';
+import { reduceStockMatrix } from '@aklinker1/cutlist';
 
-const model = defineModel<StockMatrix[]>();
+const value = defineModel<string>({ required: true });
 
-const getModelString = () =>
-  YAML.dump(model.value, { indent: 2, flowLevel: 2 });
-
-const text = ref(getModelString());
+const internalValue = ref(value.value);
+onMounted(() => {
+  internalValue.value = value.value;
+});
 
-const textModel = computed<string>({
-  get() {
-    return text.value;
-  },
-  set(value) {
+const parseStock = useParseStock();
+const err = ref<unknown>();
+watchThrottled(
+  internalValue,
+  (internalValue) => {
     try {
-      text.value = value;
-      model.value = z.array(StockMatrix).parse(YAML.load(value));
-      error.value = undefined;
-    } catch (err) {
-      error.value = err;
+      console.log(1);
+      const stock = reduceStockMatrix(parseStock(internalValue));
+      console.log(2, stock);
+      value.value = internalValue;
+      err.value = undefined;
+    } catch (error) {
+      err.value = error;
+      console.error(error);
     }
   },
-});
-
-const error = ref<unknown>();
+  {
+    throttle: 500,
+    leading: false,
+    trailing: true,
+  },
+);
 </script>
 
 <template>
-  <div class="absolute inset-0 flex flex-col p-4 overlfow-auto gap-4">
-    <textarea
-      v-model="textModel"
-      class="font-mono flex-1 resize-none bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 p-4 outline-none rounded-lg whitespace-pre"
-    />
-    <div
-      v-if="error"
-      class="bg-red-900 shrink-0 p-4 rounded-lg border border-red-600"
-    >
-      <p class="text-white whitespace-pre-wrap">
-        {{ error }}
-      </p>
-    </div>
+  <textarea
+    v-model="internalValue"
+    class="font-mono flex-1 resize-none bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 p-4 outline-none rounded-lg whitespace-pre"
+  />
+  <div
+    v-if="err"
+    class="bg-red-900 shrink-0 p-4 rounded-lg border border-red-600"
+  >
+    <p class="text-white whitespace-pre-wrap">
+      {{ err }}
+    </p>
   </div>
 </template>