hello-world-crud-skymass.mjs

import { SkyMass } from "@skymass/skymass"; //  "@skymass/skymass": "^0.3.7"
import "dotenv/config";

import pgPromise from "pg-promise";

const db = await initDB(); // pgp(process.env["CONNECTION_DB"]);
const sm = new SkyMass({ key: process.env["SKYMASS_KEY"] });

//
// function to initialize the database - Some random names, numbers and other stuff so it will be a 'full table'
//
async function initDB() {
  const DB_URL = process.env["CONNECTION_DB"];
  console.log("DB_URL: ", DB_URL);

  const pgp = pgPromise({});
  const new_db = pgp(DB_URL);
  const table_name = "employee";

  const exists = await new_db.query(
    "SELECT EXISTS (SELECT 1 FROM information_schema.tables WHERE table_name = $1)",
    [table_name]
  );

  // If the table exists, the `exists` variable will be `true`.
  if (exists[0].exists === true) {
    return new_db;
  }

  // Create a new table of employees
  new_db
    .any(
      `
  CREATE TABLE employee (
    id INT PRIMARY KEY GENERATED ALWAYS AS IDENTITY (START WITH 1000),
    name VARCHAR(100) NOT NULL,
    email VARCHAR(100) NOT NULL,
    role VARCHAR(20) NOT NULL
  );
  `
    )
    .then((data) => {
      // Process the query results
      console.log("Created the table: " + JSON.stringify(data));
    })
    .catch((error) => {
      // Handle any errors
      console.error(error);
    });

  // Insert values to the employee table
  // Define an array of employee data
  const employees = [
    { name: "John Doe", email: "johndoe@example.com", role: "Manager" },
    { name: "Jane Smith", email: "janesmith@example.com", role: "Developer" },
    { name: "Mike Johnson", email: "mikejohnson@example.com", role: "Analyst" },
    { name: "Emily Brown", email: "emilybrown@example.com", role: "Designer" },
  ];

  // Insert values into the employee table
  new_db.tx((transaction) => {
    const queries = employees.map((employee) => {
      return transaction.none(
        "INSERT INTO employee(name, email, role) VALUES($1, $2, $3)",
        [employee.name, employee.email, employee.role]
      );
    });

    return transaction.batch(queries);
  })
    .then(() => {
      console.log("Values inserted successfully.");
    })
    .catch((error) => {
      console.error("Error inserting values:", error);
    });

  return new_db;
}

//
//
//
sm.page("/crud", async (ui) => {
  ui.md`### ☎️ Employee Tool`;

  const rows = db.any("SELECT id, name, email, role FROM employee");
  const table = ui.table(
    "employees", rows,
    // ({ search, sort = "id", descending = false }) => {
    //   const sql =
    //     "SELECT id, name, email, role FROM employees" +
    //     (search ? " WHERE name LIKE $(search)" : "") +
    //     (sort ? " ORDER BY $(sort:name) " + (descending ? "DESC" : "ASC") : "");

    //   return db.any(sql, { search: `%${search}%`, sort });
    // },
    {
      label: "Employees",
      columns: {
        "*": { sort: true },
        name: { search: true },
      },
    }
  );

  // 👉 new button to trigger the update modal
  const edit = ui.button("edit", { label: "Edit Employee" });
  if (table.selection.length && edit.didClick) {
    const employee = table.selection[0];
    await ui.modal("modal", (ui) => editEmployee(ui, employee));
  }

  const del = ui.button("delete", { label: "Delete Employee" });
  if (table.selection.length && del.didClick) {
    const row = table.selection[0];
    await db.any("DELETE FROM employee WHERE id = $(id)", { id: row.id });
  }

  const add = ui.button("add", { label: "Add Employee" });
  if (add.didClick) {
    await ui.modal("modal", (ui) => addEmployee(ui));
  }

});

//
//
//
async function editEmployee(ui, employee) {
  ui.md`### Update Employee`;
  const edited = ui.form("employee", {
    fields: {
      name: ui.string("name", { label: "Name", required: true }),
      email: ui.email("email", { label: "Email", required: true }),
      role: ui.radioGroup("role", ["IC3", "IC4", "IC5"], {
        label: "Role",
        required: true,
      }),
    },
    action: ui.button("update", { label: "Update Employee" }),
    defaultVal: employee,
  });
  if (edited.didSubmit) {
    await db.any(
      "UPDATE employees SET name = $(name), email = $(email), role = $(role) WHERE id = $(id)",
      { id: employee.id, ...edited.val }
    );
    ui.close();
  }
}

async function addEmployee(ui) {
  ui.md`### Add an Employee`;
  const employee = ui.form("employee", {
    fields: {
      name: ui.string("name", { label: "Name", required: true }),
      email: ui.email("email", { label: "Email", required: true }),
      role: ui.radioGroup("role", ["IC3", "IC4", "IC5"], {
        label: "Role",
        required: true,
      }),
    },
    action: ui.button("add", { label: "Add Employee" }),
  });
  if (employee.didSubmit) {
    await db.any(
      "INSERT INTO employees (name, email, role) VALUES ($(name), $(email), $(role))",
      employee.val
    );
    ui.close();
  }
}

/*

Getting this error when clicking on 'Add' or 'Edit':
Error: Unrecognized prop "0"
    at Builder.set (/Applications/MAMP/htdocs/skymass/survey-mang-2/node_modules/@skymass/skymass/dist/Builder.mjs:56:23)
    at WidgetCapture.makeBuilder (/Applications/MAMP/htdocs/skymass/survey-mang-2/node_modules/@skymass/skymass/dist/widgets/Widget.mjs:70:34)
    at /Applications/MAMP/htdocs/skymass/survey-mang-2/node_modules/@skymass/skymass/dist/widgets/makeWidget.mjs:66:33
    at makeWidget (/Applications/MAMP/htdocs/skymass/survey-mang-2/node_modules/@skymass/skymass/dist/widgets/makeWidget.mjs:239:12)
    at UI.radioGroup (/Applications/MAMP/htdocs/skymass/survey-mang-2/node_modules/@skymass/skymass/dist/api.mjs:471:16)
    at addEmployee (/Applications/MAMP/htdocs/skymass/survey-mang-2/main.mjs:159:16)
    at /Applications/MAMP/htdocs/skymass/survey-mang-2/main.mjs:122:37
    at render (/Applications/MAMP/htdocs/skymass/survey-mang-2/node_modules/@skymass/skymass/dist/runner.mjs:45:20)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {stack: 'Error: Unrecognized prop "0"
    at Builder.s…ions (node:internal/p...