@jskit-ai/crud 0.1.4

package/templates/src/elements/EditElement.vue

@@ -0,0 +1,140 @@
+<template>
+  <section class="crud-edit-element d-flex flex-column ga-4">
+    <v-card rounded="lg" elevation="1" border>
+      <v-card-item>
+        <div class="d-flex align-center ga-3 flex-wrap w-100">
+          <div>
+            <v-card-title class="px-0">Edit ${option:namespace|singular|pascal|default(Record)}</v-card-title>
+            <v-card-subtitle class="px-0">Update the selected ${option:namespace|singular|default(record)}.</v-card-subtitle>
+          </div>
+          <v-spacer />
+          <v-btn variant="text" :to="viewPath || listPath">Cancel</v-btn>
+          <v-btn
+            color="primary"
+            :loading="addEdit.isSaving"
+            :disabled="addEdit.isInitialLoading || addEdit.isRefetching || !addEdit.canSave"
+            @click="addEdit.submit"
+          >
+            Save changes
+          </v-btn>
+        </div>
+      </v-card-item>
+      <v-divider />
+      <v-card-text class="pt-4">
+        <p v-if="addEdit.loadError" class="text-body-2 text-medium-emphasis mb-0">
+          {{ addEdit.loadError }}
+        </p>
+        <template v-else-if="showFormSkeleton">
+          <v-skeleton-loader type="text@2, list-item-two-line@4, button" />
+        </template>
+        <v-form v-else @submit.prevent="addEdit.submit" novalidate>
+          <v-progress-linear v-if="addEdit.isRefetching" indeterminate class="mb-4" />
+          <v-row>
+            <v-col cols="12" md="6">
+              <v-text-field
+                v-model="recordForm.textField"
+                label="Text field"
+                variant="outlined"
+                density="comfortable"
+                maxlength="160"
+                :readonly="!addEdit.canSave || addEdit.isSaving || addEdit.isRefetching"
+                :error-messages="addEdit.fieldErrors.textField ? [addEdit.fieldErrors.textField] : []"
+              />
+            </v-col>
+            <v-col cols="12" md="6">
+              <v-text-field
+                v-model="recordForm.dateField"
+                label="Date field"
+                type="date"
+                variant="outlined"
+                density="comfortable"
+                :readonly="!addEdit.canSave || addEdit.isSaving || addEdit.isRefetching"
+                :error-messages="addEdit.fieldErrors.dateField ? [addEdit.fieldErrors.dateField] : []"
+              />
+            </v-col>
+            <v-col cols="12" md="6">
+              <v-text-field
+                v-model="recordForm.numberField"
+                label="Number field"
+                type="number"
+                variant="outlined"
+                density="comfortable"
+                :readonly="!addEdit.canSave || addEdit.isSaving || addEdit.isRefetching"
+                :error-messages="addEdit.fieldErrors.numberField ? [addEdit.fieldErrors.numberField] : []"
+              />
+            </v-col>
+          </v-row>
+        </v-form>
+      </v-card-text>
+    </v-card>
+  </section>
+</template>
+
+<script setup>
+import { computed, reactive } from "vue";
+import { validateOperationSection } from "@jskit-ai/http-runtime/shared/validators/operationValidation";
+import { useAddEdit } from "@jskit-ai/users-web/client/composables/useAddEdit";
+import {
+  crudResource,
+  useCrudRecordRuntime,
+  useCrudModulePolicyRuntime
+} from "./clientSupport.js";
+
+const {
+  listPath,
+  recordId,
+  viewPath,
+  apiSuffix,
+  viewQueryKey,
+  invalidateAndGoView
+} = useCrudRecordRuntime();
+const { ownershipFilter, surfaceId } = useCrudModulePolicyRuntime();
+const recordForm = reactive({
+  textField: "",
+  dateField: "",
+  numberField: ""
+});
+
+function toDateInputValue(value) {
+  const normalized = String(value || "").trim();
+  if (!normalized) {
+    return "";
+  }
+
+  return normalized.slice(0, 10);
+}
+
+const addEdit = useAddEdit({
+  ownershipFilter,
+  surfaceId,
+  resource: crudResource,
+  apiSuffix,
+  queryKeyFactory: viewQueryKey,
+  writeMethod: "PATCH",
+  fallbackLoadError: "Unable to load record.",
+  fallbackSaveError: "Unable to save record.",
+  fieldErrorKeys: ["textField", "dateField", "numberField"],
+  model: recordForm,
+  parseInput: (rawPayload) =>
+    validateOperationSection({
+      operation: crudResource.operations.patch,
+      section: "bodyValidator",
+      value: rawPayload
+    }),
+  mapLoadedToModel: (model, payload = {}) => {
+    model.textField = String(payload?.textField || "");
+    model.dateField = toDateInputValue(payload?.dateField);
+    model.numberField = String(payload?.numberField ?? "");
+  },
+  buildRawPayload: (model) => ({
+    textField: model.textField,
+    dateField: model.dateField,
+    numberField: model.numberField
+  }),
+  onSaveSuccess: async (payload, { queryClient }) => {
+    await invalidateAndGoView(queryClient, payload?.id || recordId.value);
+  }
+});
+
+const showFormSkeleton = computed(() => Boolean(addEdit.isInitialLoading));
+</script>

package/templates/src/elements/ListElement.vue

@@ -0,0 +1,88 @@
+<template>
+  <section class="crud-list-element d-flex flex-column ga-4">
+    <v-card rounded="lg" elevation="1" border>
+      <v-card-item>
+        <div class="d-flex align-center ga-3 flex-wrap w-100">
+          <div>
+            <v-card-title class="px-0">${option:namespace|plural|pascal}</v-card-title>
+            <v-card-subtitle class="px-0">Manage ${option:namespace|plural|default(records)}.</v-card-subtitle>
+          </div>
+          <v-spacer />
+          <v-btn variant="outlined" :loading="isFetching" @click="records.reload">Refresh</v-btn>
+          <v-btn color="primary" :to="createPath">New ${option:namespace|singular|default(record)}</v-btn>
+        </div>
+      </v-card-item>
+      <v-divider />
+      <v-card-text class="pt-4">
+        <template v-if="showListSkeleton">
+          <v-skeleton-loader type="text@2, list-item-two-line@5" />
+        </template>
+        <template v-else>
+          <v-progress-linear v-if="isRefetching" indeterminate class="mb-3" />
+
+          <v-table density="comfortable">
+            <thead>
+              <tr>
+                <th>Text field</th>
+                <th>Date field</th>
+                <th>Number field</th>
+                <th>Updated</th>
+                <th class="text-right">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-if="items.length < 1">
+                <td colspan="5" class="text-center py-6 text-medium-emphasis">No records yet.</td>
+              </tr>
+              <tr v-for="record in items" :key="record.id">
+                <td>{{ record.textField }}</td>
+                <td>{{ crudContext.formatDateTime(record.dateField) }}</td>
+                <td>{{ record.numberField }}</td>
+                <td>{{ crudContext.formatDateTime(record.updatedAt) }}</td>
+                <td class="text-right">
+                  <v-btn size="small" variant="text" :to="crudContext.resolveViewPath(record.id)">
+                    Open
+                  </v-btn>
+                </td>
+              </tr>
+            </tbody>
+          </v-table>
+
+          <div v-if="hasMore" class="d-flex justify-center pt-4">
+            <v-btn variant="text" :loading="isLoadingMore" @click="records.loadMore">Load more</v-btn>
+          </div>
+        </template>
+      </v-card-text>
+    </v-card>
+  </section>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useList } from "@jskit-ai/users-web/client/composables/useList";
+import { useCrudListRuntime, useCrudModulePolicyRuntime } from "./clientSupport.js";
+
+const {
+  crudContext,
+  createPath,
+  apiSuffix,
+  listQueryKey
+} = useCrudListRuntime();
+const { ownershipFilter, surfaceId } = useCrudModulePolicyRuntime();
+
+const records = useList({
+  ownershipFilter,
+  surfaceId,
+  apiSuffix,
+  queryKeyFactory: listQueryKey,
+  fallbackLoadError: "Unable to load records."
+});
+
+const items = records.items;
+const isLoading = records.isInitialLoading;
+const isFetching = records.isFetching;
+const isRefetching = records.isRefetching;
+const hasMore = records.hasMore;
+const isLoadingMore = records.isLoadingMore;
+const showListSkeleton = computed(() => Boolean(isLoading.value && items.value.length < 1));
+</script>

package/templates/src/elements/ViewElement.vue

@@ -0,0 +1,126 @@
+<template>
+  <section class="crud-view-element d-flex flex-column ga-4">
+    <v-card rounded="lg" elevation="1" border>
+      <v-card-item>
+        <div class="d-flex align-center ga-3 flex-wrap w-100">
+          <div>
+            <v-card-title class="px-0">{{ title }}</v-card-title>
+            <v-card-subtitle class="px-0">View and manage this ${option:namespace|singular|default(record)}.</v-card-subtitle>
+          </div>
+          <v-spacer />
+          <v-btn variant="text" :to="listPath">Back to ${option:namespace|plural|default(records)}</v-btn>
+          <v-btn color="primary" variant="outlined" :to="editPath" :disabled="!editPath">Edit</v-btn>
+          <v-btn color="error" variant="tonal" :loading="deleteCommand.isRunning" @click="confirmDelete">Delete</v-btn>
+        </div>
+      </v-card-item>
+      <v-divider />
+      <v-card-text class="pt-4">
+        <div v-if="view.loadError.value || view.isNotFound.value" class="text-body-2 text-medium-emphasis py-2">
+          Record unavailable.
+        </div>
+
+        <template v-else-if="view.isLoading.value">
+          <v-skeleton-loader type="text@2, list-item-two-line@5" />
+        </template>
+
+        <template v-else>
+          <v-progress-linear v-if="view.isRefetching.value" indeterminate class="mb-4" />
+          <v-row>
+            <v-col cols="12" md="6">
+              <div class="text-caption text-medium-emphasis">Text field</div>
+              <div class="text-body-1">{{ record.textField }}</div>
+            </v-col>
+            <v-col cols="12" md="6">
+              <div class="text-caption text-medium-emphasis">Date field</div>
+              <div class="text-body-1">{{ crudContext.formatDateTime(record.dateField) }}</div>
+            </v-col>
+            <v-col cols="12" md="6">
+              <div class="text-caption text-medium-emphasis">Number field</div>
+              <div class="text-body-1">{{ record.numberField }}</div>
+            </v-col>
+            <v-col cols="12" md="6">
+              <div class="text-caption text-medium-emphasis">Created</div>
+              <div class="text-body-1">{{ crudContext.formatDateTime(record.createdAt) }}</div>
+            </v-col>
+            <v-col cols="12" md="6">
+              <div class="text-caption text-medium-emphasis">Updated</div>
+              <div class="text-body-1">{{ crudContext.formatDateTime(record.updatedAt) }}</div>
+            </v-col>
+          </v-row>
+        </template>
+
+      </v-card-text>
+    </v-card>
+  </section>
+</template>
+
+<script setup>
+import { computed, reactive } from "vue";
+import { useCommand } from "@jskit-ai/users-web/client/composables/useCommand";
+import { useView } from "@jskit-ai/users-web/client/composables/useView";
+import { useCrudRecordRuntime, useCrudModulePolicyRuntime } from "./clientSupport.js";
+
+const {
+  crudContext,
+  listPath,
+  recordId,
+  editPath,
+  apiSuffix,
+  viewQueryKey,
+  invalidateAndGoList
+} = useCrudRecordRuntime();
+const { ownershipFilter, surfaceId } = useCrudModulePolicyRuntime();
+const record = reactive({
+  id: 0,
+  textField: "",
+  dateField: "",
+  numberField: 0,
+  createdAt: "",
+  updatedAt: ""
+});
+
+const title = computed(() => {
+  const textField = String(record.textField || "").trim();
+  return textField || "${option:namespace|singular|pascal|default(Record)}";
+});
+
+const view = useView({
+  ownershipFilter,
+  surfaceId,
+  apiSuffix,
+  queryKeyFactory: viewQueryKey,
+  fallbackLoadError: "Unable to load record.",
+  notFoundMessage: "Record not found.",
+  model: record,
+  mapLoadedToModel: (model, payload = {}) => {
+    model.id = Number(payload.id || 0);
+    model.textField = String(payload.textField || "");
+    model.dateField = String(payload.dateField || "");
+    model.numberField = Number(payload.numberField || 0);
+    model.createdAt = String(payload.createdAt || "");
+    model.updatedAt = String(payload.updatedAt || "");
+  }
+});
+const deleteCommand = useCommand({
+  ownershipFilter,
+  surfaceId,
+  apiSuffix,
+  writeMethod: "DELETE",
+  fallbackRunError: "Unable to delete record.",
+  messages: {
+    success: "Record deleted.",
+    error: "Unable to delete record."
+  },
+  onRunSuccess: async (_, { queryClient }) => {
+    await invalidateAndGoList(queryClient);
+  }
+});
+
+async function confirmDelete() {
+  if (!window.confirm("Delete this record?")) {
+    return;
+  }
+
+  await deleteCommand.run();
+}
+</script>

package/templates/src/elements/clientSupport.js

@@ -0,0 +1,41 @@
+import { createCrudClientSupport } from "@jskit-ai/crud-core/client";
+import { usePaths } from "@jskit-ai/users-web/client/composables/usePaths";
+import { crudResource } from "../shared/${option:namespace|singular|camel}Resource.js";
+import {
+  crudModuleConfig,
+  resolveCrudModulePolicyFromPlacementContext
+} from "../shared/moduleConfig.js";
+
+const crudClientSupport = createCrudClientSupport(crudModuleConfig);
+
+const {
+  useCrudClientContext,
+  useCrudListRuntime,
+  useCrudCreateRuntime,
+  useCrudRecordRuntime,
+  toRouteRecordId
+} = crudClientSupport;
+
+function useCrudModulePolicyRuntime() {
+  const paths = usePaths();
+  const modulePolicy = resolveCrudModulePolicyFromPlacementContext(paths.placementContext.value, {
+    moduleConfig: crudModuleConfig,
+    context: "crud client runtime"
+  });
+
+  return Object.freeze({
+    modulePolicy,
+    surfaceId: modulePolicy.surfaceId,
+    ownershipFilter: modulePolicy.ownershipFilter
+  });
+}
+
+export {
+  crudResource,
+  useCrudModulePolicyRuntime,
+  useCrudClientContext,
+  useCrudListRuntime,
+  useCrudCreateRuntime,
+  useCrudRecordRuntime,
+  toRouteRecordId
+};

package/templates/src/local-package/client/index.js

@@ -0,0 +1,4 @@
+export { default as List${option:namespace|plural|pascal}Element } from "./List${option:namespace|plural|pascal}Element.vue";
+export { default as View${option:namespace|singular|pascal}Element } from "./View${option:namespace|singular|pascal}Element.vue";
+export { default as Create${option:namespace|singular|pascal}Element } from "./Create${option:namespace|singular|pascal}Element.vue";
+export { default as Edit${option:namespace|singular|pascal}Element } from "./Edit${option:namespace|singular|pascal}Element.vue";

package/templates/src/local-package/package.descriptor.mjs

@@ -0,0 +1,83 @@
+export default Object.freeze({
+  packageVersion: 1,
+  packageId: "@local/${option:namespace|kebab}",
+  version: "0.1.0",
+  description: "App-local CRUD package (${option:namespace|kebab}).",
+  dependsOn: [
+    "@jskit-ai/auth-core",
+    "@jskit-ai/crud-core",
+    "@jskit-ai/database-runtime",
+    "@jskit-ai/http-runtime",
+    "@jskit-ai/realtime",
+    "@jskit-ai/shell-web",
+    "@jskit-ai/users-core",
+    "@jskit-ai/users-web"
+  ],
+  capabilities: {
+    provides: [
+      "crud.${option:namespace|kebab}"
+    ],
+    requires: [
+      "runtime.actions",
+      "runtime.database",
+      "auth.policy",
+      "users.core",
+      "users.web",
+      "runtime.web-placement",
+      "runtime.realtime.client"
+    ]
+  },
+  runtime: {
+    server: {
+      providers: [
+        {
+          entrypoint: "src/server/${option:namespace|pascal}ServiceProvider.js",
+          export: "${option:namespace|pascal}ServiceProvider"
+        }
+      ]
+    },
+    client: {
+      providers: []
+    }
+  },
+  metadata: {
+    apiSummary: {
+      surfaces: [
+        {
+          subpath: "./server/diTokens",
+          summary: "App-local CRUD public server DI token constants."
+        },
+        {
+          subpath: "./server/actionIds",
+          summary: "App-local CRUD public action identifiers."
+        },
+        {
+          subpath: "./shared",
+          summary: "App-local CRUD shared resource."
+        },
+        {
+          subpath: "./client/*",
+          summary: "App-local CRUD Vue client elements."
+        }
+      ],
+      containerTokens: {
+        server: [
+          "repository.${option:namespace|snake}",
+          "crud.${option:namespace|snake}"
+        ],
+        client: []
+      }
+    }
+  },
+  mutations: {
+    dependencies: {
+      runtime: {},
+      dev: {}
+    },
+    packageJson: {
+      scripts: {}
+    },
+    procfile: {},
+    files: []
+  }
+});

package/templates/src/local-package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@local/${option:namespace|kebab}",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "exports": {
+    "./client": "./src/client/index.js",
+    "./client/*": "./src/client/*.vue",
+    "./client/clientSupport": "./src/client/clientSupport.js",
+    "./server/diTokens": "./src/server/diTokens.js",
+    "./server/actionIds": "./src/server/actionIds.js",
+    "./shared": "./src/shared/index.js"
+  }
+}

package/templates/src/local-package/server/CrudServiceProvider.js

@@ -0,0 +1,87 @@
+import { KERNEL_TOKENS } from "@jskit-ai/kernel/shared/support/tokens";
+import { resolveAppConfig } from "@jskit-ai/kernel/server/support";
+import { withActionDefaults } from "@jskit-ai/kernel/shared/actions";
+import { createRepository } from "./repository.js";
+import {
+  createService,
+  serviceEvents
+} from "./service.js";
+import { createActions } from "./actions.js";
+import { registerRoutes } from "./registerRoutes.js";
+import {
+  crudModuleConfig,
+  resolveCrudModulePolicyFromAppConfig
+} from "../shared/moduleConfig.js";
+import {
+  NAMESPACE_${option:namespace|snake|upper}_REPOSITORY_TOKEN,
+  NAMESPACE_${option:namespace|snake|upper}_SERVICE_TOKEN
+} from "./diTokens.js";
+
+const NAMESPACE_${option:namespace|snake|upper}_PROVIDER_ID = NAMESPACE_${option:namespace|snake|upper}_SERVICE_TOKEN;
+const NAMESPACE_${option:namespace|snake|upper}_TABLE_NAME = "crud_${option:namespace|snake}";
+
+function resolveCrudPolicyFromApp(app) {
+  return resolveCrudModulePolicyFromAppConfig(resolveAppConfig(app), {
+    moduleConfig: crudModuleConfig,
+    context: "${option:namespace|pascal}ServiceProvider"
+  });
+}
+
+class ${option:namespace|pascal}ServiceProvider {
+  static id = NAMESPACE_${option:namespace|snake|upper}_PROVIDER_ID;
+
+  static dependsOn = ["runtime.actions", "runtime.database", "auth.policy.fastify", "local.main", "users.core"];
+
+  register(app) {
+    if (!app || typeof app.singleton !== "function" || typeof app.service !== "function" || typeof app.actions !== "function") {
+      throw new Error("${option:namespace|pascal}ServiceProvider requires application singleton()/service()/actions().");
+    }
+
+    const crudPolicy = resolveCrudPolicyFromApp(app);
+
+    app.singleton(NAMESPACE_${option:namespace|snake|upper}_REPOSITORY_TOKEN, (scope) => {
+      const knex = scope.make(KERNEL_TOKENS.Knex);
+      return createRepository(knex, {
+        tableName: NAMESPACE_${option:namespace|snake|upper}_TABLE_NAME
+      });
+    });
+
+    app.service(
+      NAMESPACE_${option:namespace|snake|upper}_SERVICE_TOKEN,
+      (scope) => {
+        return createService({
+          ${option:namespace|camel}Repository: scope.make(NAMESPACE_${option:namespace|snake|upper}_REPOSITORY_TOKEN)
+        });
+      },
+      {
+        events: serviceEvents
+      }
+    );
+
+    app.actions(
+      withActionDefaults(
+        createActions({
+          surface: crudPolicy.surfaceId
+        }),
+        {
+          domain: "crud",
+          dependencies: {
+            ${option:namespace|camel}Service: NAMESPACE_${option:namespace|snake|upper}_SERVICE_TOKEN
+          }
+        }
+      )
+    );
+  }
+
+  boot(app) {
+    const crudPolicy = resolveCrudPolicyFromApp(app);
+    registerRoutes(app, {
+      routeOwnershipFilter: crudPolicy.ownershipFilter,
+      routeSurface: crudPolicy.surfaceId,
+      routeSurfaceRequiresWorkspace: crudPolicy.surfaceDefinition.requiresWorkspace === true,
+      routeRelativePath: crudPolicy.relativePath
+    });
+  }
+}
+
+export { ${option:namespace|pascal}ServiceProvider };

package/templates/src/local-package/server/actionIds.js

@@ -0,0 +1,9 @@
+const actionIds = Object.freeze({
+  list: "crud.${option:namespace|snake}.list",
+  view: "crud.${option:namespace|snake}.view",
+  create: "crud.${option:namespace|snake}.create",
+  update: "crud.${option:namespace|snake}.update",
+  delete: "crud.${option:namespace|snake}.delete"
+});
+
+export { actionIds };