@adminforth/list-in-place-edit 1.0.0

package/.woodpecker/buildRelease.sh

@@ -0,0 +1,13 @@
+
+#!/bin/bash
+
+# write npm run output both to console and to build.log
+npm run build 2>&1 | tee build.log
+build_status=${PIPESTATUS[0]}
+
+# if exist status from the npm run build is not 0
+# then exit with the status code from the npm run build
+if [ $build_status -ne 0 ]; then
+  echo "Build failed. Exiting with status code $build_status"
+  exit $build_status
+fi

package/.woodpecker/buildSlackNotify.sh

@@ -0,0 +1,44 @@
+#!/bin/sh
+
+set -x
+
+COMMIT_SHORT_SHA=$(echo $CI_COMMIT_SHA | cut -c1-8)
+
+
+if [ "$CI_STEP_STATUS" = "success" ]; then
+  MESSAGE="Did a build without issues on \`$CI_REPO_NAME/$CI_COMMIT_BRANCH\`. Commit: _${CI_COMMIT_MESSAGE}_ (<$CI_COMMIT_URL|$COMMIT_SHORT_SHA>)"
+
+  curl  -s -X POST -H "Content-Type: application/json" -d '{
+    "username": "'"$CI_COMMIT_AUTHOR"'",
+    "icon_url": "'"$CI_COMMIT_AUTHOR_AVATAR"'",
+    "attachments": [
+      {
+          "mrkdwn_in": ["text", "pretext"],
+          "color": "#36a64f",
+          "text": "'"$MESSAGE"'"
+      }
+    ]
+  }' "$DEVELOPERS_SLACK_WEBHOOK"
+  exit 0
+fi
+export BUILD_LOG=$(cat ./build.log)
+
+BUILD_LOG=$(echo $BUILD_LOG | sed 's/"/\\"/g')
+
+MESSAGE="Broke \`$CI_REPO_NAME/$CI_COMMIT_BRANCH\` with commit _${CI_COMMIT_MESSAGE}_ (<$CI_COMMIT_URL|$COMMIT_SHORT_SHA>)"
+CODE_BLOCK="\`\`\`$BUILD_LOG\n\`\`\`"
+
+echo "Sending slack message to developers $MESSAGE"
+# Send the message
+curl -sS -X POST -H "Content-Type: application/json" -d '{
+  "username": "'"$CI_COMMIT_AUTHOR"'",
+  "icon_url": "'"$CI_COMMIT_AUTHOR_AVATAR"'",
+  "attachments": [
+    {
+        "mrkdwn_in": ["text", "pretext"],
+        "color": "#8A1C12",
+        "text": "'"$CODE_BLOCK"'",
+        "pretext": "'"$MESSAGE"'"
+    }
+  ]
+}' "$DEVELOPERS_SLACK_WEBHOOK" 2>&1

package/.woodpecker/release.yml

@@ -0,0 +1,42 @@
+clone:
+  git:
+    image: woodpeckerci/plugin-git
+    settings:
+      partial: false
+      depth: 5
+
+steps:
+  init-secrets:
+    when:
+      - event: push
+    image: infisical/cli
+    environment:
+      INFISICAL_TOKEN:
+        from_secret: VAULT_TOKEN
+    commands:
+      - infisical export --domain https://vault.devforth.io/api --format=dotenv-export --env="prod" > /woodpecker/deploy.vault.env
+    secrets:
+      - VAULT_TOKEN
+
+  release:
+    image: node:20
+    when:
+      - event: push
+    commands:
+      - apt update && apt install -y rsync
+      - export $(cat /woodpecker/deploy.vault.env | xargs)
+      - npm clean-install
+      - /bin/bash ./.woodpecker/buildRelease.sh
+      - npm audit signatures
+      - npx semantic-release
+
+  slack-on-failure:
+    when:
+      - event: push
+        status: [failure, success]
+      - event: push
+    image: curlimages/curl
+    commands:
+      - export $(cat /woodpecker/deploy.vault.env | xargs)
+      - /bin/sh ./.woodpecker/buildSlackNotify.sh
+

package/build.log

@@ -0,0 +1,11 @@
+
+> @adminforth/list-in-place-edit@1.0.2 build
+> tsc && rsync -av --exclude 'node_modules' custom dist/
+
+sending incremental file list
+custom/
+custom/InPlaceEdit.vue
+custom/tsconfig.json
+
+sent 4,900 bytes  received 58 bytes  9,916.00 bytes/sec
+total size is 4,685  speedup is 0.94

package/custom/InPlaceEdit.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="relative group flex items-center" @click.stop>
+    <!-- Normal value display -->
+    <div v-if="!isEditing" class="flex items-center">
+      <ValueRenderer :column="column" :record="record" />
+      <button 
+        v-if="!column.editReadonly"
+        @click="startEdit"
+        class="ml-2 opacity-0 group-hover:opacity-100 transition-opacity"
+      >
+        <IconPenSolid class="w-5 h-5 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"/>
+      </button>
+    </div>
+
+    <!-- Edit mode -->
+    <div v-else class="flex items-center min-w-full max-w-full gap-2">
+      <ColumnValueInputWrapper
+        ref="input"
+        :source="'edit'"
+        :column="column"
+        :currentValues="currentValues"
+        :mode="mode"
+        :columnOptions="columnOptions"
+        :unmasked="unmasked"
+        :setCurrentValue="setCurrentValue"
+      />
+      <div class="flex gap-1">
+        <button 
+          @click="saveEdit"
+          :disabled="saving"
+          class="text-green-600 hover:text-green-700 dark:text-green-500 dark:hover:text-green-400"
+        >
+          <IconCheckOutline class="w-5 h-5" />
+        </button>
+        <button 
+          @click="cancelEdit"
+          :disabled="saving"
+          class="text-red-600 hover:text-red-700 dark:text-red-500 dark:hover:text-red-400"
+        >
+          <IconXOutline class="w-5 h-5" />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { IconPenSolid, IconCheckOutline, IconXOutline } from '@iconify-prerendered/vue-flowbite';
+import { callAdminForthApi } from '@/utils';
+import { showErrorTost, showSuccesTost } from '@/composables/useFrontendApi';
+import ValueRenderer from '@/components/ValueRenderer.vue';
+import ColumnValueInputWrapper from '@/components/ColumnValueInputWrapper.vue';
+
+const props = defineProps(['column', 'record', 'resource', 'adminUser', 'meta']);
+const isEditing = ref(false);
+const editValue = ref(null);
+const saving = ref(false);
+const input = ref(null);
+const columnOptions = ref({});
+const mode = ref('edit');
+const currentValues = ref({});
+const unmasked = ref({});
+
+function startEdit() {
+  const value = props.record[props.column.name];
+  currentValues.value = {
+    [props.column.name]: props.column.isArray?.enabled 
+      ? (Array.isArray(value) ? value : [value]).filter(v => v !== null && v !== undefined)
+      : value
+  };
+  isEditing.value = true;
+}
+
+function cancelEdit() {
+  isEditing.value = false;
+  editValue.value = null;
+}
+
+function setCurrentValue(field, value, arrayIndex = undefined) {
+  if (arrayIndex !== undefined && props.column.isArray?.enabled) {
+    // Handle array updates
+    if (!Array.isArray(currentValues.value[field])) {
+      currentValues.value[field] = [];
+    }
+    
+    const newArray = [...currentValues.value[field]];
+    
+    if (arrayIndex >= newArray.length) {
+      // When adding a new item, always add null
+      newArray.push(null);
+    } else {
+      // For existing items, handle type conversion
+      if (props.column.isArray?.itemType && ['integer', 'float', 'decimal'].includes(props.column.isArray.itemType)) {
+        newArray[arrayIndex] = value !== null && value !== '' ? +value : null;
+      } else {
+        newArray[arrayIndex] = value;
+      }
+    }
+    
+    // Assign the new array
+    currentValues.value[field] = newArray;
+    editValue.value = newArray;
+  } else {
+    // Handle non-array updates
+    currentValues.value[field] = value;
+    editValue.value = value;
+  }
+}
+
+async function saveEdit() {
+  saving.value = true;
+  try {
+    const result = await callAdminForthApi({
+      method: 'POST',
+      path: `/plugin/${props.meta.pluginInstanceId}/update-field`,
+      body: {
+        resourceId: props.resource.resourceId,
+        recordId: props.record._primaryKeyValue,
+        field: props.column.name,
+        value: currentValues.value[props.column.name]
+      }
+    });
+
+    if (result.error) {
+      showErrorTost(result.error);
+      return;
+    }
+
+    showSuccesTost('Field updated successfully');
+    props.record[props.column.name] = currentValues.value[props.column.name];
+    isEditing.value = false;
+  } finally {
+    saving.value = false;
+  }
+}
+</script>

package/custom/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".", // This should point to your project root
+    "paths": {
+      "@/*": [
+        // "node_modules/adminforth/dist/spa/src/*"
+        "../../../spa/src/*"
+      ],
+      "*": [
+        // "node_modules/adminforth/dist/spa/node_modules/*"
+        "../../../spa/node_modules/*"
+      ],
+      "@@/*": [
+        // "node_modules/adminforth/dist/spa/src/*"
+        "."
+      ]
+    }
+  }
+}

package/dist/custom/InPlaceEdit.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="relative group flex items-center" @click.stop>
+    <!-- Normal value display -->
+    <div v-if="!isEditing" class="flex items-center">
+      <ValueRenderer :column="column" :record="record" />
+      <button 
+        v-if="!column.editReadonly"
+        @click="startEdit"
+        class="ml-2 opacity-0 group-hover:opacity-100 transition-opacity"
+      >
+        <IconPenSolid class="w-5 h-5 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"/>
+      </button>
+    </div>
+
+    <!-- Edit mode -->
+    <div v-else class="flex items-center min-w-full max-w-full gap-2">
+      <ColumnValueInputWrapper
+        ref="input"
+        :source="'edit'"
+        :column="column"
+        :currentValues="currentValues"
+        :mode="mode"
+        :columnOptions="columnOptions"
+        :unmasked="unmasked"
+        :setCurrentValue="setCurrentValue"
+      />
+      <div class="flex gap-1">
+        <button 
+          @click="saveEdit"
+          :disabled="saving"
+          class="text-green-600 hover:text-green-700 dark:text-green-500 dark:hover:text-green-400"
+        >
+          <IconCheckOutline class="w-5 h-5" />
+        </button>
+        <button 
+          @click="cancelEdit"
+          :disabled="saving"
+          class="text-red-600 hover:text-red-700 dark:text-red-500 dark:hover:text-red-400"
+        >
+          <IconXOutline class="w-5 h-5" />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { IconPenSolid, IconCheckOutline, IconXOutline } from '@iconify-prerendered/vue-flowbite';
+import { callAdminForthApi } from '@/utils';
+import { showErrorTost, showSuccesTost } from '@/composables/useFrontendApi';
+import ValueRenderer from '@/components/ValueRenderer.vue';
+import ColumnValueInputWrapper from '@/components/ColumnValueInputWrapper.vue';
+
+const props = defineProps(['column', 'record', 'resource', 'adminUser', 'meta']);
+const isEditing = ref(false);
+const editValue = ref(null);
+const saving = ref(false);
+const input = ref(null);
+const columnOptions = ref({});
+const mode = ref('edit');
+const currentValues = ref({});
+const unmasked = ref({});
+
+function startEdit() {
+  const value = props.record[props.column.name];
+  currentValues.value = {
+    [props.column.name]: props.column.isArray?.enabled 
+      ? (Array.isArray(value) ? value : [value]).filter(v => v !== null && v !== undefined)
+      : value
+  };
+  isEditing.value = true;
+}
+
+function cancelEdit() {
+  isEditing.value = false;
+  editValue.value = null;
+}
+
+function setCurrentValue(field, value, arrayIndex = undefined) {
+  if (arrayIndex !== undefined && props.column.isArray?.enabled) {
+    // Handle array updates
+    if (!Array.isArray(currentValues.value[field])) {
+      currentValues.value[field] = [];
+    }
+    
+    const newArray = [...currentValues.value[field]];
+    
+    if (arrayIndex >= newArray.length) {
+      // When adding a new item, always add null
+      newArray.push(null);
+    } else {
+      // For existing items, handle type conversion
+      if (props.column.isArray?.itemType && ['integer', 'float', 'decimal'].includes(props.column.isArray.itemType)) {
+        newArray[arrayIndex] = value !== null && value !== '' ? +value : null;
+      } else {
+        newArray[arrayIndex] = value;
+      }
+    }
+    
+    // Assign the new array
+    currentValues.value[field] = newArray;
+    editValue.value = newArray;
+  } else {
+    // Handle non-array updates
+    currentValues.value[field] = value;
+    editValue.value = value;
+  }
+}
+
+async function saveEdit() {
+  saving.value = true;
+  try {
+    const result = await callAdminForthApi({
+      method: 'POST',
+      path: `/plugin/${props.meta.pluginInstanceId}/update-field`,
+      body: {
+        resourceId: props.resource.resourceId,
+        recordId: props.record._primaryKeyValue,
+        field: props.column.name,
+        value: currentValues.value[props.column.name]
+      }
+    });
+
+    if (result.error) {
+      showErrorTost(result.error);
+      return;
+    }
+
+    showSuccesTost('Field updated successfully');
+    props.record[props.column.name] = currentValues.value[props.column.name];
+    isEditing.value = false;
+  } finally {
+    saving.value = false;
+  }
+}
+</script>

package/dist/custom/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".", // This should point to your project root
+    "paths": {
+      "@/*": [
+        // "node_modules/adminforth/dist/spa/src/*"
+        "../../../spa/src/*"
+      ],
+      "*": [
+        // "node_modules/adminforth/dist/spa/node_modules/*"
+        "../../../spa/node_modules/*"
+      ],
+      "@@/*": [
+        // "node_modules/adminforth/dist/spa/src/*"
+        "."
+      ]
+    }
+  }
+}

package/dist/index.js

@@ -0,0 +1,80 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { AdminForthPlugin } from "adminforth";
+export default class ListInPlaceEditPlugin extends AdminForthPlugin {
+    constructor(options) {
+        super(options, import.meta.url);
+        this.options = options;
+    }
+    modifyResourceConfig(adminforth, resourceConfig) {
+        const _super = Object.create(null, {
+            modifyResourceConfig: { get: () => super.modifyResourceConfig }
+        });
+        return __awaiter(this, void 0, void 0, function* () {
+            _super.modifyResourceConfig.call(this, adminforth, resourceConfig);
+            const targetColumns = resourceConfig.columns.filter(col => this.options.columns.includes(col.name));
+            targetColumns.forEach(column => {
+                var _a;
+                if ((_a = column.components) === null || _a === void 0 ? void 0 : _a.list) {
+                    throw new Error(`Column ${column.name} already has a list component defined. ListInplaceEdit plugin cannot be used on columns that already have list components.`);
+                }
+                if (!column.components) {
+                    column.components = {};
+                }
+                column.components.list = {
+                    file: this.componentPath('InPlaceEdit.vue'),
+                    meta: {
+                        pluginInstanceId: this.pluginInstanceId,
+                        columnName: column.name
+                    }
+                };
+            });
+        });
+    }
+    validateConfigAfterDiscover(adminforth, resourceConfig) {
+        // Validate that columns exist if specific columns were specified
+        this.options.columns.forEach(colName => {
+            if (!resourceConfig.columns.find(c => c.name === colName)) {
+                throw new Error(`Column ${colName} specified in ListInplaceEdit plugin not found in resource ${resourceConfig.label}`);
+            }
+        });
+    }
+    instanceUniqueRepresentation(pluginOptions) {
+        return 'single';
+    }
+    setupEndpoints(server) {
+        // Add endpoint to update single field
+        server.endpoint({
+            method: 'POST',
+            path: `/plugin/${this.pluginInstanceId}/update-field`,
+            handler: (_a) => __awaiter(this, [_a], void 0, function* ({ body, adminUser }) {
+                const { resourceId, recordId, field, value } = body;
+                const resource = this.adminforth.config.resources.find(r => r.resourceId === resourceId);
+                // Create update object with just the single field
+                const updateRecord = { [field]: value };
+                // Use AdminForth's built-in update method
+                const connector = this.adminforth.connectors[resource.dataSource];
+                const oldRecord = yield connector.getRecordByPrimaryKey(resource, recordId);
+                const result = yield this.adminforth.updateResourceRecord({
+                    resource,
+                    recordId,
+                    record: updateRecord,
+                    oldRecord,
+                    adminUser
+                });
+                if (result.error) {
+                    return { error: result.error };
+                }
+                const updatedRecord = yield connector.getRecordByPrimaryKey(resource, recordId);
+                return { record: updatedRecord };
+            })
+        });
+    }
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/index.ts

@@ -0,0 +1,83 @@
+import { AdminForthPlugin } from "adminforth";
+import type { IAdminForth, IHttpServer, AdminForthResourcePages, AdminForthResourceColumn, AdminForthDataTypes, AdminForthResource } from "adminforth";
+import type { PluginOptions } from './types.js';
+
+export default class ListInPlaceEditPlugin extends AdminForthPlugin {
+  options: PluginOptions;
+
+  constructor(options: PluginOptions) {
+    super(options, import.meta.url);
+    this.options = options;
+  }
+
+  async modifyResourceConfig(adminforth: IAdminForth, resourceConfig: AdminForthResource) {
+    super.modifyResourceConfig(adminforth, resourceConfig);
+
+    const targetColumns = resourceConfig.columns.filter(col => 
+      this.options.columns.includes(col.name)
+    );
+
+    targetColumns.forEach(column => {
+      if (column.components?.list) {
+        throw new Error(`Column ${column.name} already has a list component defined. ListInplaceEdit plugin cannot be used on columns that already have list components.`);
+      }
+      
+      if (!column.components) {
+        column.components = {};
+      }
+      column.components.list = {
+        file: this.componentPath('InPlaceEdit.vue'),
+        meta: {
+          pluginInstanceId: this.pluginInstanceId,
+          columnName: column.name
+        }
+      };
+    });
+  }
+
+  validateConfigAfterDiscover(adminforth: IAdminForth, resourceConfig: AdminForthResource) {
+    // Validate that columns exist if specific columns were specified
+    this.options.columns.forEach(colName => {
+      if (!resourceConfig.columns.find(c => c.name === colName)) {
+        throw new Error(`Column ${colName} specified in ListInplaceEdit plugin not found in resource ${resourceConfig.label}`);
+      }
+    });
+  }
+
+  instanceUniqueRepresentation(pluginOptions: any): string {
+    return 'single';
+  }
+
+  setupEndpoints(server: IHttpServer) {
+    // Add endpoint to update single field
+    server.endpoint({
+      method: 'POST',
+      path: `/plugin/${this.pluginInstanceId}/update-field`,
+      handler: async ({ body, adminUser }) => {
+        const { resourceId, recordId, field, value } = body;
+
+        const resource = this.adminforth.config.resources.find(r => r.resourceId === resourceId);
+        // Create update object with just the single field
+        const updateRecord = { [field]: value };
+        
+        // Use AdminForth's built-in update method
+        const connector = this.adminforth.connectors[resource.dataSource];
+        const oldRecord = await connector.getRecordByPrimaryKey(resource, recordId)
+        const result = await this.adminforth.updateResourceRecord({
+          resource,
+          recordId,
+          record: updateRecord,
+          oldRecord,
+          adminUser
+        });
+
+        if (result.error) {
+          return { error: result.error };
+        }
+
+        const updatedRecord = await connector.getRecordByPrimaryKey(resource, recordId);
+        return { record: updatedRecord };
+      }
+    });
+  }
+}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@adminforth/list-in-place-edit",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "build": "tsc && rsync -av --exclude 'node_modules' custom dist/",
+    "prepare": "npm link adminforth"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "adminforth"
+  ],
+  "author": "devforth",
+  "license": "MIT",
+  "description": "AdminForth List In Place Edit Plugin",
+  "devDependencies": {
+    "@types/node": "^22.10.7",
+    "semantic-release": "^24.2.1",
+    "semantic-release-slack-bot": "^4.0.2",
+    "typescript": "^5.7.3"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/devforth/adminforth-list-in-place-edit"
+  },
+  "dependencies": {
+    "adminforth": "latest"
+  },
+  "release": {
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator",
+      "@semantic-release/npm",
+      "@semantic-release/github",
+      [
+        "semantic-release-slack-bot",
+        {
+          "notifyOnSuccess": true,
+          "notifyOnFail": true,
+          "slackIcon": ":package:",
+          "markdownReleaseNotes": true
+        }
+      ]
+    ],
+    "branches": [
+      "main",
+      {
+        "name": "next",
+        "prerelease": true
+      }
+    ]
+  }
+}

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {
+      "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include*/ 
+      "module": "node16",                                /* Specify what module code is generated. */
+      "outDir": "./dist",                                   /* Specify an output folder for all emitted files. */
+      "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules.  */
+      "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
+      "strict": false,                                     /* Enable all strict type-checking options. */
+      "skipLibCheck": true,                                 /* Skip type checking all .d.ts files. */
+    },
+    "exclude": ["node_modules", "dist", "custom"],           /* Exclude files from compilation. */
+  }
+  

package/types.ts

@@ -0,0 +1,3 @@
+export interface PluginOptions {
+    columns: string[];
+}