@adminforth/crud-approve-plugin 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,39 @@
+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
+
+  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/05-CRUDApprove.md

@@ -0,0 +1,150 @@
+CRUDApprove plugin allows to send all changes in the resources done from the admin panel for a manual approvement to a trusted users or roles. 
+It will allow you to split the responsibility for updating records between users by providing manual approvement features with flexible configuration.
+Requires separate table in the database to store approvement requests.
+
+## Installation
+
+
+```bash
+npm i @adminforth/crud-approve --save
+```
+
+Create `crud_manual_approve.ts` in `resources` folder:
+
+```ts title="./resources/crud_manual_approve.ts"
+import CRUDApprovePlugin from '@adminforth/crud-approve';
+import { AdminForthResourceInput, AdminForthDataTypes } from 'adminforth'
+```
+
+[Getting Started](<../001-gettingStarted.md>) will be used as base for this example.
+
+
+## Creating table for storing activity data
+For the first, to track records changes, we need to set up the database and table with certain fields inside where requests for changes will be stored.
+
+First of all you should create this table in your own database `./schema.prisma`:
+
+```ts title='./schema.prisma'
+model crud_manual_approve {
+  _id               String      @id
+  created_at        DateTime  /// timestamp of applied change
+  resource_id       String    /// identifier of resource where change were applied
+  author_id         String    /// identifier of user who made the changes
+  responser_id      String    /// identifier of user who approved/rejected the request
+  action            String    /// type of change (create, edit, delete)
+  status            String    /// status of request (pending, approved, rejected)
+  data              String?   /// delta betwen before/after versions
+  record_id         String?   /// identifier of record that been changed
+}
+```
+
+And `prisma migrate`:
+
+```bash
+npm run makemigration -- --name add-crud-manual-approve ; npm run migrate:local
+```
+
+Also to make this code start 
+
+## Setting up the resource and dataSource for plugin
+Add this code in `crud_manual_approve.ts`:
+
+```ts title='./resources/crud_manual_approve.ts'
+
+import AuditLogPlugin from "@adminforth/crud-approve/index.js";
+import { AdminForthDataTypes } from "adminforth";
+import { randomUUID } from "crypto";
+
+export default {
+  dataSource: 'maindb', 
+  table: 'crud_manual_approve',
+  columns: [
+    { name: 'id', primaryKey: true, required: false, fillOnCreate: ({initialRecord}: any) => randomUUID(),
+      showIn: {
+        list: false,
+        edit: false,
+        create: false,
+        filter: false,
+      } },
+    { name: 'created_at', required: false },
+    { name: 'resource_id', required: false },
+    { name: 'user_id', required: false, 
+        foreignResource: {
+        resourceId: 'adminuser',
+      } },
+    { name: 'action', required: false },
+    { name: 'diff', required: false, type: AdminForthDataTypes.JSON, showIn: {
+        list: false,
+        edit: false,
+        create: false,
+        filter: false,
+      } },
+    { name: 'record_id', required: false },
+  ],
+  options: {
+    allowedActions: {
+      edit: false,
+      delete: false,
+      create: false
+    }
+  },
+  plugins: [
+    new AuditLogPlugin({
+      // if you want to exclude some resources from logging
+      //excludeResourceIds: ['adminuser'],
+      resourceColumns: {
+        resourceIdColumnName: 'resource_id',
+        resourceActionColumnName: 'action',
+        resourceDataColumnName: 'diff',
+        resourceUserIdColumnName: 'user_id',
+        resourceRecordIdColumnName: 'record_id',
+        resourceCreatedColumnName: 'created_at'
+      }
+    }),
+  ],
+}
+```
+
+Then you need to import `./resources/auditLogs`:
+
+```ts title="./index.ts"
+//diff-add
+import auditLogsResource from "./resources/auditLogs"
+
+
+... new AdminForth({
+  dataSources: [...],
+    ...
+  resources: [
+    apartmentsResource,
+    usersResource,
+//diff-add
+    auditLogsResource
+  ],
+    ...
+]
+```
+
+Also, we need to add it to menu:
+```ts
+menu: [
+  ...
+//diff-add
+  {
+//diff-add
+      label: 'Audit Logs',
+//diff-add
+      icon: 'flowbite:search-outline',
+//diff-add
+      resourceId: 'audit_logs',
+//diff-add
+  }
+]
+```
+
+That's it! Now you can see the logs in the table 
+
+![alt text](AuditLog.png)
+
+<!-- See [API Reference](/docs/api/plugins/audit-log/types/type-aliases/PluginOptions.md) for more all options. -->
+

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Devforth.io
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,7 @@
+# AdminForth CRUD Approve plugin
+
+<img src="https://img.shields.io/badge/License-MIT-blue.svg" alt="License: MIT" />
+
+Adds manual approval for editing actions. Make your admins blame each other for their mistakes 😉
+
+## For usage, see [AdminForth CRUDApprove Documentation](https://adminforth.dev/docs/tutorial/Plugins/CRUDApprove/)

package/custom/ListPageDiffView.vue

@@ -0,0 +1,82 @@
+<script setup>
+import { useCoreStore } from '@/stores/core';
+import { computed, ref, watch } from 'vue';
+import "@git-diff-view/vue/styles/diff-view.css";
+import { DiffView, DiffModeEnum } from "@git-diff-view/vue";
+import { generateDiffFile } from "@git-diff-view/file";
+import { callAdminForthApi } from '@/utils';
+import adminforth from '@/adminforth';
+import { Button } from '@/afcl'
+
+
+const props = defineProps(['column', 'record', 'meta', 'resource', 'adminUser']);
+const coreStore = useCoreStore();
+const theme = computed(() => coreStore.theme);
+
+const oldContent = JSON.stringify(props.record[props.meta.resourceColumns.dataColumnName].oldRecord, null, 2)
+const newContent = JSON.stringify(props.record[props.meta.resourceColumns.dataColumnName].newRecord, null, 2)
+
+const diffFile = ref();
+
+
+async function sendApproveRequest(approved) {
+  const code = await (window).adminforthTwoFaModal.get2FaConfirmationResult?.(undefined, "Approve/Reject Action Confirmation");
+  const data = await callAdminForthApi({
+    path: `/plugin/crud-approve/update-status`,
+    method: 'POST',
+    body: {
+      meta: { confirmationResult: code },
+      connectorId: props.resource.connectorId,
+      resourceId: props.resource.resourceId,
+      action: props.record[props.meta.resourceColumns.actionColumnName],
+      recordId: props.record[props.meta.resourceColumns.recordIdColumnName],
+      diffId: props.record[props.meta.resourceColumns.idColumnName],
+      approved: approved
+    }
+  });
+  if (data.error) {
+    adminforth.alert({ message: `Error: ${data.error}`, variant: 'warning' });
+  } else {
+    adminforth.alert({ message: `Successfully ${approved ? 'approved' : 'rejected'} the change.`, variant: 'success' });
+    // reload page
+    window.location.reload();
+  }
+}
+
+function initDiffFile() {
+  const file = generateDiffFile(
+    'diff.json', oldContent.slice(2, -1),
+    'diff.json', newContent.slice(2, -1),
+    'json', 'json'
+  );
+  file.initTheme(theme.value === 'dark' ? 'dark' : 'light');
+  file.init();
+  file.buildUnifiedDiffLines();
+  diffFile.value = file;
+}
+
+initDiffFile();
+
+watch([theme], ([t]) => {
+  if (!diffFile.value) return;
+  diffFile.value.initTheme(t === 'dark' ? 'dark' : 'light');
+  diffFile.value.buildUnifiedDiffLines();
+});
+
+</script>
+
+<template>
+  <DiffView
+    :diff-file="diffFile"
+    :diff-view-mode="DiffModeEnum.Unified"
+    :diff-view-theme="theme === 'dark' ? 'dark' : 'light'"
+    :diff-view-highlight="true"
+    :diff-view-wrap="true"
+    :diff-view-font-size="14"
+  />
+  <div v-if="record[meta.resourceColumns.statusColumnName] === 1" style="margin-top: 16px; display: flex; gap: 8px;">
+    <Button style="background-color: green; color: white;" @click="sendApproveRequest(true)" :loader="false" class="w-full">Approve</Button>
+    <Button style="background-color: red; color: white;" @click="sendApproveRequest(false)" :loader="false" class="w-full">Reject</Button>
+  </div>
+</template>
+  

package/custom/ShowPageDiffView.vue

@@ -0,0 +1,91 @@
+<script setup>
+import { useCoreStore } from '@/stores/core';
+import { computed, ref, watch } from 'vue';
+import "@git-diff-view/vue/styles/diff-view.css";
+import { DiffView, DiffModeEnum } from "@git-diff-view/vue";
+import { generateDiffFile } from "@git-diff-view/file";
+import { callAdminForthApi } from '@/utils';
+import adminforth from '@/adminforth';
+import { Button } from '@/afcl'
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+const props = defineProps(['column', 'record', 'meta', 'resource', 'adminUser']);
+const coreStore = useCoreStore();
+const theme = computed(() => coreStore.theme);
+const isMobile = computed(() => /(Android|iPhone|iPad|iPod)/i.test(navigator.userAgent));
+const mode = computed(() => isMobile.value ? DiffModeEnum.Unified : DiffModeEnum.Split);
+
+const oldContent = JSON.stringify(props.record[props.meta.resourceColumns.dataColumnName].oldRecord, null, 2)
+const newContent = JSON.stringify(props.record[props.meta.resourceColumns.dataColumnName].newRecord, null, 2)
+
+const diffFile = ref();
+
+async function sendApproveRequest(approved) {
+  const code = await (window).adminforthTwoFaModal.get2FaConfirmationResult?.(undefined, "Approve/Reject Action Confirmation");
+  const data = await callAdminForthApi({
+    path: `/plugin/crud-approve/update-status`,
+    method: 'POST',
+    body: {
+      meta: { confirmationResult: code },
+      connectorId: props.resource.connectorId,
+      resourceId: props.resource.resourceId,
+      action: props.record[props.meta.resourceColumns.actionColumnName],
+      recordId: props.record[props.meta.resourceColumns.recordIdColumnName],
+      diffId: props.record[props.meta.resourceColumns.idColumnName],
+      approved: approved
+    }
+  });
+  if (data.error) {
+    adminforth.alert({ message: `Error: ${data.error}`, variant: 'warning' });
+  } else {
+    adminforth.alert({ message: `Successfully ${approved ? 'approved' : 'rejected'} the change.`, variant: 'success' });
+    router.push(router.currentRoute.value.fullPath.split('/show')[0]);
+  }
+}
+
+function initDiffFile() {
+  const file = generateDiffFile(
+    'diff.json', oldContent,
+    'diff.json', newContent,
+    'json', 'json'
+  );
+  file.initTheme(theme.value === 'dark' ? 'dark' : 'light');
+  file.init();
+  if (mode.value === DiffModeEnum.Split) {
+    file.buildSplitDiffLines();
+  } else {
+    file.buildUnifiedDiffLines();
+  }
+  diffFile.value = file;
+}
+
+initDiffFile();
+
+watch([mode, theme], ([m, t]) => {
+  if (!diffFile.value) return;
+  diffFile.value.initTheme(t === 'dark' ? 'dark' : 'light');
+  if (m === DiffModeEnum.Split) {
+    diffFile.value.buildSplitDiffLines();
+  } else {
+    diffFile.value.buildUnifiedDiffLines();
+  }
+});
+
+</script>
+
+<template>
+  <DiffView
+    :diff-file="diffFile"
+    :diff-view-mode="mode"
+    :diff-view-theme="theme === 'dark' ? 'dark' : 'light'"
+    :diff-view-highlight="true"
+    :diff-view-wrap="true"
+    :diff-view-font-size="14"
+  />
+  <div v-if="record[meta.resourceColumns.statusColumnName] === 1" style="margin-top: 16px; display: flex; gap: 8px;">
+    <Button style="background-color: green; color: white;" @click="sendApproveRequest(true)" :loader="false" class="w-full">Approve</Button>
+    <Button style="background-color: red; color: white;" @click="sendApproveRequest(false)" :loader="false" class="w-full">Reject</Button>
+  </div>
+</template>
+