@alstar/studio 0.0.0-beta.4 → 0.0.0-beta.6

package/public/main.css

@@ -1,5 +1,9 @@
 /* @import './../node_modules/@alstar/ui/red.css'; */
 @import 'https://esm.sh/@alstar/ui/red.css';
+@import './admin-panel.css';
+@import './entry.css';
+@import './blocks.css';
+@import './settings.css';
 
 body {
   min-height: 100vh;
@@ -15,6 +19,8 @@ body {
 
   > main {
     padding: 40px;
+    height: 100vh;
+    overflow: auto;
 
     section {
       max-width: 900px;
@@ -90,4 +96,8 @@ div.ink-mde {
 .disclamer {
   display: flex;
   justify-content: center;
-}
+}
+
+.text-secondary {
+  color: var(--pico-secondary);
+}

package/public/main.js

@@ -3,6 +3,7 @@ import Sortable from 'sortablejs'
 // import { wrap } from 'ink-mde'
 
 barba.init({
+  cacheIgnore: true,
   views: [
     {
       namespace: 'default',
@@ -19,11 +20,14 @@ function init() {
     const els = document.querySelectorAll('[data-sortable]')
 
     els.forEach((el) => {
+      const id = el.dataset.sortable
+
       var sortable = Sortable.create(el, {
         delay: 0,
         animation: 250,
         dragClass: 'sortable-drag',
         easing: 'ease-in-out',
+        handle: `[data-handle="${id}"]`,
       })
     })
   }

package/public/settings.css

@@ -0,0 +1,24 @@
+#settings {
+  ul {
+    padding: 0;
+  }
+
+  li {
+    width: 100%;
+    display: grid;
+    align-items: center;
+    grid-template-columns: 15% 1fr auto;
+    gap: 1rem;
+    border-bottom: 1px solid var(--pico-form-element-border-color);
+    margin-bottom: 0;
+    padding: 1rem 0;
+
+    input {
+      font-family: var(--pico-font-family-monospace);
+    }
+
+    * {
+      margin-bottom: 0;
+    }
+  }
+}

package/queries/block-with-children.ts

@@ -0,0 +1,74 @@
+import { sql } from '../utils/sql.ts'
+
+export const blockWithChildren = sql`
+  with recursive
+    block_tree as (
+      -- Start from the root block you want
+      select
+        id,
+        name,
+        label,
+        type,
+        sort_order,
+        value,
+        options,
+        status,
+        parent_id,
+        0 as depth
+      from
+        blocks
+      where
+        id = ? -- <-- put your starting block id here
+      union all
+      -- Recursively select children
+      select
+        b.id,
+        b.name,
+        b.label,
+        b.type,
+        b.sort_order,
+        b.value,
+        b.options,
+        b.status,
+        b.parent_id,
+        bt.depth + 1
+      from
+        blocks b
+        inner join block_tree bt on b.parent_id = bt.id
+    )
+  select
+    *
+  from
+    block_tree
+  order by
+    depth,
+    sort_order;
+`
+
+export const deleteBlockWithChildren = sql`
+  with recursive
+    block_tree as (
+      -- start from the root block you want to delete
+      select
+        id
+      from
+        blocks
+      where
+        id = ? -- <-- put your root block id here
+      union all
+      -- recursively select children
+      select
+        b.id
+      from
+        blocks b
+        inner join block_tree bt on b.parent_id = bt.id
+    )
+  delete from blocks
+  where
+    id in (
+      select
+        id
+      from
+        block_tree
+    );
+`

package/queries/block.ts

@@ -0,0 +1,287 @@
+import { db } from '@alstar/db'
+import { sql } from '../utils/sql.ts'
+import { type DBBlockResult } from '../types.ts'
+
+function buildForest(blocks: DBBlockResult[]): DBBlockResult[] {
+  const map = new Map<number, DBBlockResult>()
+  const roots: DBBlockResult[] = []
+
+  for (const block of blocks) {
+    block.children = []
+    map.set(block.id, block)
+  }
+
+  for (const block of blocks) {
+    if (block.parent_id === null) {
+      roots.push(block)
+    } else {
+      const parent = map.get(block.parent_id)
+      if (parent) parent.children!.push(block)
+    }
+  }
+
+  // Sort children by sort_order recursively
+  const sortChildren = (node: DBBlockResult) => {
+    node.children!.sort((a, b) => a.sort_order - b.sort_order)
+    node.children!.forEach(sortChildren)
+  }
+  roots.forEach(sortChildren)
+
+  return roots
+}
+
+function buildTree(blocks: DBBlockResult[]): DBBlockResult {
+  const map = new Map<number, DBBlockResult>()
+  const roots: DBBlockResult[] = []
+
+  for (const block of blocks) {
+    block.children = []
+    map.set(block.id, block)
+  }
+
+  for (const block of blocks) {
+    if (block.parent_id === null) {
+      roots.push(block)
+    } else {
+      const parent = map.get(block.parent_id)
+      if (parent) parent.children!.push(block)
+    }
+  }
+
+  // Sort children by sort_order recursively
+  const sortChildren = (node: DBBlockResult) => {
+    node.children!.sort((a, b) => a.sort_order - b.sort_order)
+    node.children!.forEach(sortChildren)
+  }
+  roots.forEach(sortChildren)
+
+  return roots[0]
+}
+
+function transformBlocksTree(
+  block: DBBlockResult,
+  isBlocksChild?: boolean,
+): DBBlockResult {
+  const fields: Record<string, DBBlockResult> = {}
+  let hasFields = false
+
+  for (const child of block.children ?? []) {
+    const transformedChild = transformBlocksTree(
+      child,
+      child.type === 'blocks',
+    )
+
+    if (!isBlocksChild) {
+      hasFields = true
+      fields[transformedChild.name] = transformedChild
+    }
+  }
+
+  if(hasFields) {
+    block.fields = fields
+  }
+  
+  if (!isBlocksChild) {
+    delete block.children
+  } else {
+    delete block.fields
+  }
+
+  return block
+}
+
+function transformForest(blocks: DBBlockResult[]): DBBlockResult[] {
+  return blocks.map((block) => transformBlocksTree(block))
+}
+
+function rootQuery(filterSql: string, depthLimit?: number) {
+  const depthLimitClause =
+    depthLimit !== undefined ? `WHERE d.depth + 1 <= ${depthLimit}` : ''
+
+  return sql`
+    with recursive
+      ancestors as (
+        select
+          id,
+          created_at,
+          updated_at,
+          name,
+          label,
+          type,
+          sort_order,
+          value,
+          options,
+          status,
+          parent_id,
+          0 as depth
+        from
+          blocks
+        where
+          ${filterSql}
+        union all
+        select
+          b.id,
+          b.created_at,
+          b.updated_at,
+          b.name,
+          b.label,
+          b.type,
+          b.sort_order,
+          b.value,
+          b.options,
+          b.status,
+          b.parent_id,
+          a.depth + 1
+        from
+          blocks b
+          inner join ancestors a on b.id = a.parent_id
+      ),
+      roots as (
+        select
+          id,
+          created_at,
+          updated_at,
+          name,
+          label,
+          type,
+          sort_order,
+          value,
+          options,
+          status,
+          parent_id,
+          0 as depth
+        from
+          ancestors
+        where
+          parent_id is null
+      ),
+      descendants as (
+        select
+          id,
+          created_at,
+          updated_at,
+          name,
+          label,
+          type,
+          sort_order,
+          value,
+          options,
+          status,
+          parent_id,
+          depth
+        from
+          roots
+        union all
+        select
+          b.id,
+          b.created_at,
+          b.updated_at,
+          b.name,
+          b.label,
+          b.type,
+          b.sort_order,
+          b.value,
+          b.options,
+          b.status,
+          b.parent_id,
+          d.depth + 1
+        from
+          blocks b
+          inner join descendants d on b.parent_id = d.id ${depthLimitClause}
+      )
+    select
+      *
+    from
+      descendants
+    order by
+      sort_order,
+      id;
+  `
+}
+
+function buildFilterSql(params: Record<string, any>) {
+  const entries = Object.entries(params)
+  const filterSql = entries
+    .map(([key, value]) =>
+      value === null ? `${key} is null` : `${key} = :${key}`,
+    )
+    .join(' and ')
+
+  let sqlParams: Record<keyof typeof params, any> = {}
+
+  for (const param in params) {
+    if (params[param] !== null) {
+      sqlParams[param] = params[param]
+    }
+  }
+
+  return { filterSql, sqlParams }
+}
+
+export function roots(
+  params: Record<string, any>,
+  options?: {
+    depth?: number
+  },
+): DBBlockResult[] | [] {
+  const { filterSql, sqlParams } = buildFilterSql(params)
+
+  const query = rootQuery(filterSql, options?.depth)
+  const rows = db.database
+    .prepare(query)
+    .all(sqlParams) as unknown as DBBlockResult[]
+
+  if (!rows.length) return []
+
+  const forest = buildForest(rows)
+
+  return transformForest(forest)
+}
+
+export function root(
+  params: Record<string, any>,
+  options?: { depth?: number },
+): DBBlockResult | null {
+  const { filterSql, sqlParams } = buildFilterSql(params)
+
+  const query = rootQuery(filterSql, options?.depth)
+  const rows = db.database
+    .prepare(query)
+    .all(sqlParams) as unknown as DBBlockResult[]
+
+  if (!rows.length) return null
+
+  const tree = buildTree(rows)
+
+  return transformBlocksTree(tree)
+}
+
+export function block(params: Record<string, any>) {
+  const { filterSql, sqlParams } = buildFilterSql(params)
+
+  const query = sql`
+    select
+      *
+    from
+      blocks
+    where
+      ${filterSql}
+  `
+
+  return db.database.prepare(query).get(sqlParams) as unknown as DBBlockResult
+}
+
+export function blocks(params: Record<string, any>) {
+  const { filterSql, sqlParams } = buildFilterSql(params)
+
+  const query = sql`
+    select
+      *
+    from
+      blocks
+    where
+      ${filterSql}
+  `
+
+  return db.database.prepare(query).all(sqlParams) as unknown as DBBlockResult[]
+}

package/queries/db-types.ts

@@ -0,0 +1,15 @@
+// db-types.ts
+export type DBBase = {
+  id: number;
+  created_at: string;
+  updated_at: string;
+  name: string;
+  label: string;
+  type: string;
+  sort_order: number;
+  value: string | null;
+  options: any | null;
+  status: string;
+  parent_id: number | null;
+  depth: number;
+};