All planetposen routes at version 0.1

src/routes/warehouse/+page.server.ts

@@ -0,0 +1,17 @@
+import { dev } from '$app/environment';
+import { env } from '$env/dynamic/private';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ fetch }) => {
+  let url = '/api/warehouse';
+  if (dev || env.API_HOST) {
+    url = (env.API_HOST || 'http://localhost:30010').concat(url);
+  }
+
+  const res = await fetch(url);
+  const warehouse = await res.json();
+
+  return {
+    products: warehouse?.warehouse
+  };
+};

src/routes/warehouse/+page.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import ProductList from './WarehouseProductList.svelte';
+  import type IProduct from '$lib/interfaces/IProduct';
+  import Button from '$lib/components/Button.svelte';
+  import type { PageData } from './$types';
+
+  export let data: PageData;
+  const products = data.products as Array<IProduct>;
+
+  async function createProduct() {
+    let url = '/api/product';
+    if (window.location.href.includes('localhost')) {
+      url = 'http://localhost:30010'.concat(url);
+    }
+
+    fetch(url, { method: 'POST' })
+      .then((resp) => resp.json())
+      .then((response) => {
+        console.log('response::', response);
+        const { product } = response;
+        goto(`/warehouse/${product.product_no} `);
+      });
+  }
+  console.log('warehouse:', products);
+</script>
+
+<div class="warehouse-page">
+  <h1>Warehouse</h1>
+
+  <section class="content">
+    <h2>Your products</h2>
+
+    <ProductList products="{products}" />
+  </section>
+
+  <Button text="Add" on:click="{createProduct}" />
+</div>
+
+<style lang="scss">
+  :global(.warehouse-page button) {
+    margin-top: 2rem;
+    margin-left: auto;
+  }
+</style>

src/routes/warehouse/WarehouseProductList.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import type IProduct from '$lib/interfaces/IProduct';
+
+  export let products: Array<IProduct>;
+
+  function navigate(product: IProduct) {
+    goto(`/warehouse/${product.product_no}`);
+  }
+</script>
+
+<table>
+  <thead>
+    <tr>
+      <th class="image-column"></th>
+      <th>Name</th>
+      <th class="stock-column">In-Stock</th>
+      <th class="date-column">created</th>
+      <th class="date-column">updated</th>
+    </tr>
+  </thead>
+
+  <tbody>
+    {#each products as product}
+      <tr on:click="{() => navigate(product)}">
+        <td class="image-column">
+          <img src="{product.image}" alt="{product.name}" />
+        </td>
+
+        <td class="name-and-price">
+          <p><a href="/warehouse/{product.product_no}">{product.name}</a></p>
+          <p>{product.variation_count} variation(s)</p>
+        </td>
+
+        <td class="stock-column">{product.sum_stock}</td>
+
+        <td class="date-column"
+          >{new Intl.DateTimeFormat('nb-NO', { dateStyle: 'short', timeStyle: 'short' }).format(
+            new Date(product.created || 0)
+          )}</td
+        >
+
+        <td class="date-column"
+          >{new Intl.DateTimeFormat('nb-NO', { dateStyle: 'short', timeStyle: 'short' }).format(
+            new Date(product.updated || 0)
+          )}</td
+        >
+      </tr>
+    {/each}
+  </tbody>
+</table>
+
+<style lang="scss">
+  // @import "../styles/global.scss";
+  @import '../../styles/media-queries.scss';
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+
+    thead {
+      tr th {
+        text-align: left;
+        text-transform: uppercase;
+        font-size: 0.8rem;
+        font-weight: 500;
+      }
+
+      tr {
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+      }
+    }
+
+    .stock-column {
+      width: 80px;
+      max-width: 80px;
+      text-align: center;
+    }
+
+    .date-column {
+      width: 150px;
+      max-width: 150px;
+    }
+
+    .image-column {
+      width: 4rem;
+      max-width: 4rem;
+      margin: 0 0.5rem;
+    }
+
+    .name-and-price > p {
+      margin: 0.5rem 0;
+
+      &:not(:nth-of-type(1)) {
+        opacity: 0.6;
+      }
+    }
+
+    td,
+    th {
+      white-space: nowrap;
+      padding: 0.4rem 0.6rem;
+    }
+
+    tbody {
+      a {
+        font-size: inherit;
+      }
+
+      img {
+        width: 4rem;
+        height: 4rem;
+        border-radius: 0.4rem;
+      }
+
+      .image-column {
+        display: grid;
+        place-items: center;
+      }
+
+      tr {
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+        cursor: pointer;
+
+        &:hover {
+          background-color: #f6f8fa;
+        }
+      }
+    }
+
+    // @include mobile {
+    //   tr > *:first-child {
+    //     display: none;
+    //   }
+    // }
+
+    @include mobile {
+      tr > *:last-child,
+      tr > :nth-child(4) {
+        display: none;
+      }
+    }
+  }
+</style>

src/routes/warehouse/[id]/+page.server.ts

@@ -0,0 +1,18 @@
+import { dev } from '$app/environment';
+import { env } from '$env/dynamic/private';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ fetch, params }) => {
+  const { id } = params;
+
+  // let url = `/api/warehouse/product/${id}`;
+  let url = `/api/warehouse/${id}`;
+  if (dev || env.API_HOST) {
+    url = (env.API_HOST || 'http://localhost:30010').concat(url);
+  }
+
+  const res = await fetch(url);
+  const product = await res.json();
+  console.log('product::', product);
+  return product;
+};

src/routes/warehouse/[id]/+page.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import PricingSection from './PricingSection.svelte';
+  import DetailsSection from './DetailsSection.svelte';
+  import Button from '$lib/components/Button.svelte';
+  import type { PageServerData } from './$types';
+  import type IProduct from '$lib/interfaces/IProduct';
+
+  export let data: PageServerData;
+  const product = data.product as IProduct;
+  let edit = false;
+
+  function save() {
+    console.log('savvvving');
+    edit = false;
+  }
+</script>
+
+<h1>Product details</h1>
+<div class="info row">
+  <img src="{product.image}" alt="Product" />
+  <div class="name-and-price">
+    <p>{product.name}</p>
+    <p>NOK {product.price}</p>
+  </div>
+
+  <div class="edit-button">
+    {#if !edit}
+      <Button text="Edit" on:click="{() => (edit = !edit)}" />
+    {:else}
+      <Button text="Save" on:click="{save}" />
+    {/if}
+  </div>
+</div>
+
+<h2>Details</h2>
+<DetailsSection product="{product}" edit="{edit}" />
+
+<h2>Variations</h2>
+<PricingSection product="{product}" />
+
+<h2>Metadata</h2>
+<div>
+  <p class="empty">No metadata</p>
+</div>
+
+<h2>Audit log</h2>
+<div>
+  <p class="empty">No logs</p>
+</div>
+
+<style lang="scss">
+  @import '../../../styles/media-queries.scss';
+
+  .row {
+    display: flex;
+    width: 100%;
+  }
+
+  h2 {
+    width: 100%;
+    font-size: 1.5rem;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+  }
+
+  .info {
+    align-items: center;
+
+    .edit-button {
+      margin-left: auto;
+    }
+
+    img {
+      width: 64px;
+      height: 64px;
+      border-radius: 6px;
+    }
+
+    .name-and-price > p {
+      margin: 0.5rem 0 0.5rem 2rem;
+
+      &:nth-of-type(2) {
+        opacity: 0.6;
+      }
+    }
+  }
+
+  .label,
+  .empty {
+    color: grey;
+  }
+</style>

src/routes/warehouse/[id]/DetailsSection.svelte

@@ -0,0 +1,146 @@
+<script lang="ts">
+  import type IProduct from '$lib/interfaces/IProduct';
+
+  export let product: IProduct;
+  export let edit: boolean;
+</script>
+
+<div class="details row">
+  <div class="left">
+    <ul class="property-list">
+      <li>
+        <span class="label">Name</span>
+        {#if !edit}
+          <span>{product.name}</span>
+        {:else}
+          <input bind:value="{product.name}" />
+        {/if}
+      </li>
+
+      <li>
+        <span class="label">Created</span>
+        <span>{product.created}</span>
+      </li>
+
+      <li>
+        <span class="label">Subtext</span>
+        {#if !edit}
+          <span>{product.subtext || '(empty)'}</span>
+        {:else}
+          <input bind:value="{product.subtext}" />
+        {/if}
+      </li>
+
+      <li>
+        <span class="label">Description</span>
+        {#if !edit}
+          <span>{product.description || '(empty)'}</span>
+        {:else}
+          <input class="wide" bind:value="{product.description}" />
+        {/if}
+      </li>
+
+      <li>
+        <span class="label">Primary color</span>
+        {#if !edit}
+          <span>{product.primary_color || '(empty)'}</span>
+        {:else}
+          <input bind:value="{product.primary_color}" />
+        {/if}
+        {#if product.primary_color}
+          <div class="color-box" style="{`--color: ${product.primary_color}`}"></div>
+        {/if}
+      </li>
+
+      <li>
+        <span class="label">Feature list</span>
+        <span class="empty">(empty)</span>
+      </li>
+    </ul>
+  </div>
+
+  <div class="right">
+    <span class="label">Image</span>
+    <img src="{product.image}" alt="Product" />
+  </div>
+</div>
+
+<style lang="scss">
+  @import '../../../styles/media-queries.scss';
+
+  .details {
+    display: flex;
+
+    .left {
+      width: 50%;
+      display: flex;
+      flex-direction: column;
+    }
+
+    input {
+      margin: 0;
+      padding: 0;
+
+      &.wide {
+        width: -webkit-fill-available;
+      }
+    }
+
+    .right {
+      width: 50%;
+      display: flex;
+
+      span {
+        padding: 0.4rem 0;
+        margin-right: 1.5rem;
+      }
+
+      img {
+        width: 110px;
+        height: 110px;
+        border-radius: 4px;
+        margin-top: 0.4rem;
+      }
+    }
+
+    @include mobile {
+      flex-direction: column;
+
+      .left,
+      .right {
+        width: 100%;
+      }
+
+      .right {
+        margin-top: 2rem;
+      }
+    }
+
+    ul.property-list {
+      list-style: none;
+      padding-left: 0;
+      margin-top: 0;
+
+      li {
+        padding: 0.4rem 0;
+        display: flex;
+        align-items: center;
+      }
+
+      li span:first-of-type {
+        display: inline-block;
+        margin-bottom: auto;
+        min-width: 30%;
+      }
+
+      .color-box {
+        margin-left: 1rem;
+        display: inline-block;
+        background-color: var(--color);
+        width: 20px;
+        height: 20px;
+        border-radius: 4px;
+      }
+    }
+  }
+</style>

src/routes/warehouse/[id]/PricingSection.svelte

@@ -0,0 +1,257 @@
+<script lang="ts">
+  import type IProduct from '$lib/interfaces/IProduct';
+  import type IProductVariation from '$lib/interfaces/IProductVariation';
+  import Button from '$lib/components/Button.svelte';
+  import Badge from '$lib/components/Badge.svelte';
+  import BadgeType from '$lib/interfaces/BadgeType';
+
+  export let product: IProduct;
+  let table: HTMLElement;
+  let editingVariationIndex = -1;
+
+  interface ISkuResponse {
+    skus: IProductVariation[];
+    success: boolean;
+  }
+
+  const resetEditingIndex = () => (editingVariationIndex = -1);
+  const updateProductsVariations = (response: ISkuResponse) => {
+    product.variations = response?.skus;
+  };
+
+  function setDefault(variation: IProductVariation) {
+    if (!product.variations) return;
+
+    let url = `/api/product/${product.product_no}/sku/${variation.sku_id}/default_price`;
+    if (window?.location?.href.includes('localhost')) {
+      url = 'http://localhost:30010'.concat(url);
+    }
+
+    fetch(url, { method: 'POST' })
+      .then((resp) => resp.json())
+      .then(updateProductsVariations);
+  }
+
+  function addSkuVariation() {
+    // ADD OVER API - update product.variations with result --> set edit
+    // const newSku: IProductVariation = {
+    //   sku_id: null,
+    //   stock: 0,
+    //   size: null,
+    //   price: 0,
+    //   default_price: false
+    // }
+
+    // if (!product.variations || product.variations.length === 0) {
+    //   product.variations = []
+    // }
+
+    // product.variations.push(newSku)
+    // editingVariationIndex = product.variations.length - 1
+
+    let url = `/api/product/${product.product_no}/sku`;
+    if (window?.location?.href.includes('localhost')) {
+      url = 'http://localhost:30010'.concat(url);
+    }
+
+    fetch(url, { method: 'POST' })
+      .then((resp) => resp.json())
+      .then(updateProductsVariations)
+      .then(() => (editingVariationIndex = product.variations.length - 1));
+  }
+
+  function saveSkuVariation(variation: IProductVariation) {
+    let url = `/api/product/${product.product_no}/sku/${variation?.sku_id}`;
+    if (window?.location?.href.includes('localhost')) {
+      url = 'http://localhost:30010'.concat(url);
+    }
+
+    const { stock, size, price } = variation;
+    const options = {
+      method: 'PATCH',
+      body: JSON.stringify({ stock, price, size }),
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    };
+
+    fetch(url, options)
+      .then((resp) => resp.json())
+      .then(updateProductsVariations)
+      .then(() => resetEditingIndex());
+  }
+
+  function deleteVariation(variation: IProductVariation) {
+    console.log('delete it using api', variation);
+    let url = `/api/product/${product.product_no}/sku/${variation?.sku_id}`;
+    if (window?.location?.href.includes('localhost')) {
+      url = 'http://localhost:30010'.concat(url);
+    }
+
+    fetch(url, { method: 'DELETE' })
+      .then((resp) => resp.json())
+      .then(updateProductsVariations)
+      .then(() => resetEditingIndex());
+  }
+
+  function disableEditIfClickOutsideTable(event: MouseEvent) {
+    console.log('target:', event.target);
+    if (!table.contains(event.target as Node)) {
+      console.log('outside?');
+    } else {
+      console.log('inside');
+    }
+  }
+</script>
+
+<svelte:window on:click="{disableEditIfClickOutsideTable}" />
+<table class="pricing" bind:this="{table}">
+  <thead>
+    <tr>
+      <th>Price</th>
+      <th>Stock</th>
+      <th>Type/size</th>
+      {#if editingVariationIndex >= 0}
+        <th class="cta">Save</th>
+        <th class="cta">Delete</th>
+      {:else}
+        <th class="cta"></th>
+        <th class="cta"></th>
+      {/if}
+    </tr>
+  </thead>
+
+  <tbody>
+    {#if product?.variations?.length}
+      {#each product?.variations as variation, index}
+        {#if editingVariationIndex !== index}
+          <tr
+            on:click="{() => (editingVariationIndex = index)}"
+            on:drop="{() => setDefault(variation)}"
+            on:dragover|preventDefault
+          >
+            <td>
+              <span>Nok {variation.price}</span>
+              {#if variation.default_price}
+                <div draggable="true">
+                  <Badge title="Default price" type="{BadgeType.PENDING}" icon="{''}" />
+                </div>
+              {/if}
+            </td>
+            <td>{variation.stock}</td>
+            <td>{variation.size}</td>
+            <td></td>
+            <td></td>
+          </tr>
+        {:else}
+          <tr class="edit" on:drop="{() => setDefault(variation)}" on:dragover|preventDefault>
+            <td>
+              <span>Nok <input type="number" bind:value="{variation.price}" /></span>
+
+              {#if variation.default_price}
+                <div draggable="true">
+                  <Badge title="Default price" type="{BadgeType.PENDING}" icon="{''}" />
+                </div>
+              {/if}
+            </td>
+            <td><input type="number" bind:value="{variation.stock}" /></td>
+            <td><input bind:value="{variation.size}" /></td>
+            <td class="cta">
+              <button on:click="{() => saveSkuVariation(variation)}">💾</button>
+            </td>
+            <td class="cta">
+              <button on:click="{() => deleteVariation(variation)}">🗑️</button>
+            </td>
+          </tr>
+        {/if}
+      {/each}
+    {/if}
+  </tbody>
+</table>
+
+<Button text="add new" on:click="{addSkuVariation}" />
+
+<style lang="scss" module="scoped">
+  @import '../../../styles/media-queries.scss';
+
+  table.pricing {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 1.85rem;
+
+    thead th {
+      text-align: left;
+      font-weight: 500;
+
+      &:not(&:first-of-type) {
+        width: 10%;
+      }
+    }
+
+    .cta {
+      width: 45px !important;
+      text-align: center;
+    }
+
+    [draggable='true'] {
+      cursor: move;
+    }
+
+    tbody {
+      td {
+        min-height: 2rem;
+      }
+
+      tr:hover {
+        cursor: pointer;
+        background-color: #f6f8fa;
+      }
+
+      tr:not(.edit) {
+        td {
+          padding-right: 3rem;
+        }
+
+        &:hover > td:first-of-type {
+          position: relative;
+
+          &::before {
+            content: '✏️';
+            position: absolute;
+            left: -1.5rem;
+            top: 0.5rem;
+            font-size: 1rem;
+          }
+        }
+      }
+
+      button {
+        -webkit-appearance: none;
+        background-color: transparent;
+        border: unset;
+        cursor: pointer;
+      }
+
+      input {
+        max-width: 4rem;
+        padding: 0;
+        margin: 0;
+      }
+
+      td:first-of-type {
+        display: flex;
+        align-items: center;
+
+        span {
+          margin-right: 1rem;
+        }
+      }
+    }
+
+    td {
+      white-space: nowrap;
+      -webkit-user-select: none;
+      user-select: none;
+    }
+  }
+</style>

src/routes/warehouse/[id]/edit/+page.server.ts

@@ -0,0 +1,16 @@
+import { dev } from '$app/environment';
+import { env } from '$env/dynamic/private';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ fetch, params }) => {
+  const { id } = params;
+
+  let url = `/api/warehouse/${id}`;
+  if (dev || env.API_HOST) {
+    url = (env.API_HOST || 'http://localhost:30010').concat(url);
+  }
+
+  const res = await fetch(url);
+  const product = await res.json();
+  return product;
+};

src/routes/warehouse/[id]/edit/+page.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  import Input from '$lib/components/Input.svelte';
+  import type IProduct from '$lib/interfaces/IProduct';
+  import type { PageServerData } from './$types';
+
+  export let data: PageServerData;
+  const product = data.product as IProduct;
+</script>
+
+<h1>Attribute edit product</h1>
+<div class="edit-product-page">
+  <div>
+    <h2>Product attributes</h2>
+    <Input label="Name" value="{product.name}" required="{false}" />
+    <Input label="Description" value="{product.description}" required="{false}" />
+    <Input label="Subtext" value="{product.subtext}" required="{false}" />
+    <Input label="Color" value="{product.primary_color}" required="{false}" />
+  </div>
+
+  <div>
+    <h2>Images</h2>
+    <img src="{product.image}" />
+  </div>
+
+  <div class="variations">
+    <h2>Variations</h2>
+
+    {#if product?.variations?.length}
+      {#each product.variations as variation}
+        <span>{variation.size}</span>
+        <span>{variation.price}</span>
+        <span>{variation.stock}</span>
+        <span>{variation.default_price}</span>
+        <p></p>
+        <hr />
+      {/each}
+    {/if}
+  </div>
+
+  <div>
+    <h2>Add variations</h2>
+    <label for="variations">Set/size</label>
+    <select name="variations">
+      <option>Set</option>
+      <option>Large</option>
+      <option>Medium</option>
+      <option>Small</option>
+      <option>Wine</option>
+    </select>
+
+    <Input label="Price" type="number" />
+    <Input label="Stock" type="number" />
+    <input type="checkbox" checked />
+  </div>
+</div>
+
+<style lang="scss">
+  @import '../../../../styles/media-queries.scss';
+
+  :global(.edit-product-page label:not(:first-of-type)) {
+    margin-top: 1.5rem;
+  }
+
+  :global(.edit-product-page label span) {
+    font-size: 1rem !important;
+  }
+
+  // :global(.edit-product-page label input) {
+  //   border-radius: 3.5px !important;
+  // }
+
+  h2 {
+    font-size: 1.7rem;
+  }
+
+  .edit-product-page {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    column-gap: 2rem;
+
+    @include mobile {
+      grid-template-columns: 1fr;
+    }
+
+    img {
+      max-width: 150px;
+      border-radius: 6px;
+    }
+  }
+
+  .variations {
+    label {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+</style>

src/routes/warehouse/add/+page.svelte

@@ -0,0 +1 @@
+<h1>add new product</h1>