feat:added basic table app extenion

contentstack · May 27, 2024 · f77e226 · f77e226
1 parent a76f2be
commit f77e226
Show file tree

Hide file tree

Showing 9 changed files with 12,466 additions and 0 deletions.
diff --git a/basic-table-extension/.eslintrc.json b/basic-table-extension/.eslintrc.json
@@ -0,0 +1,24 @@
+{
+    "env": {
+        "browser": true,
+        "es6": true,
+        "jquery": true
+    },
+    "extends": "airbnb-base/legacy",
+    "parserOptions": {
+        "ecmaVersion": 2016,
+        "sourceType": "module"
+    },
+     "globals": {
+        "ContentstackUIExtension": false
+    },
+    "rules": {
+        "no-restricted-syntax": ["error", "LabeledStatement", "WithStatement"],
+        "no-use-before-define":"off",
+        "func-names":"off",
+        "consistent-return":"off",
+        "no-unused-vars":"off",
+        "no-plusplus":"off",
+        "no-shadow":"off"
+    }
+}
diff --git a/basic-table-extension/README.md b/basic-table-extension/README.md
@@ -0,0 +1,31 @@
+# Table – Contentstack Extension
+
+#### About this Extension
+
+The Table extension lets you add a table as a field in your content type. The content managers can then add values to the table, while creating entries. 
+
+![Table Plugin Screenshot](--URL--)
+
+#### How to use this extension
+
+We have created a step-by-step guide on how to create a Table extension for your Stack. You can refer the [Table extension guide](https://www.contentstack.com/docs/guide/extensions/custom-fields/table-extension-setup-guide) on our documentation site for more info.
+
+#### Modifying Extension
+
+To modify the extension, first, you need to clone this repo and install the dependencies. Then, edit the HTML, CSS, and JS files from the source folder, and create a build using gulp task.
+
+To install dependencies, run the following command in the root folder:
+
+```
+    npm install gulp-cli -g
+    npm install
+```
+To create a new build for the extension, run the following command (index.html):
+```
+    gulp
+```
+
+#### Other Documentation
+
+- [Extensions guide](https://www.contentstack.com/docs/guide/extensions)
+- [Common questions about Extensions](https://www.contentstack.com/docs/faqs#extensions)
diff --git a/basic-table-extension/gulpfile.js b/basic-table-extension/gulpfile.js
@@ -0,0 +1,49 @@
+const gulp = require('gulp');
+const inline = require('gulp-inline');
+const uglify = require('gulp-uglify');
+const gulpStylelint = require('gulp-stylelint');
+const minifyCss = require('gulp-clean-css');
+const babel = require('gulp-babel');
+const eslint = require('gulp-eslint');
+
+gulp.task('lint-js', () => {
+  return gulp.src('src/*.js')
+    .pipe(eslint())
+    .pipe(eslint.format())
+    .pipe(eslint.failAfterError());
+});
+
+gulp.task('lint-css', () => {
+  return gulp
+    .src('src/*.css')
+    .pipe(gulpStylelint({
+      config: {
+        extends: 'stylelint-config-standard'
+      },
+      reporters: [{
+        formatter: 'string',
+        console: true
+      }],
+      failAfterError: false
+    }));
+});
+
+gulp.task('inline', () => {
+  return gulp.src('./src/index.html')
+    .pipe(inline({
+      js: [babel({
+        presets: ['@babel/preset-env']
+      }), uglify],
+      css: [minifyCss],
+      disabledTypes: ['svg', 'img']
+    }))
+    .pipe(gulp.dest('./'));
+});
+
+gulp.task('build', gulp.series('lint-js', 'lint-css', 'inline'));
+
+gulp.task('watch', () => {
+  gulp.watch('src/*', gulp.series('build'));
+});
+
+gulp.task('default', gulp.series('build'));
diff --git a/basic-table-extension/index.html b/basic-table-extension/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<script src="https://www.contentstack.com/sdks/contentstack-ui-extensions/dist/latest/ui-extension-sdk.js"></script>
+<link href="https://www.contentstack.com/sdks/contentstack-ui-extensions/dist/latest/ui-extension-sdk.css" rel="stylesheet" type="text/css" media="all">    
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+<style>
+table{width:100%;margin-bottom:2px;border-collapse:collapse;table-layout:fixed}td,th{border:1px solid #cdcdcd}table td,table th{padding:10px;text-align:left}td:last-child{width:100px;border:none;background-color:#fff}tr:first-child{background-color:#e6f0f2}.addColumnButton,.addRowButton,.deleteColumnButton,.deleteRowButton{cursor:pointer}.icon-move{cursor:grab}.icon-plus{color:#b3b3b3}tr .icon-move{display:none}tr:hover .icon-move{display:inline-block}
+</style>
+<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+<script>
+"use strict";$(document).ready(function(){var c,t=!0,a=10,l=50;function i(t){if(void 0!==t&&t.columns&&t.columns.length){var n=t.columns,i=t.rows;$("#dynamicTable").html("");for(var e="<tr>",s=0;s<n.length&&s<a;s++)e+="<td class='td_id_"+(s+1)+"'><strong>"+n[s]+"</strong></td>";e+="<td></td></tr>";var o="";i&&i.length||(o="hide",i=[n.map(function(t){return""})]);for(var d=0;d<i.length&&d<l;d++){e+="<tr class='dataRow'>";for(var c=0;c<n.length&&c<a;c++)e+="<td class='td_id_"+(c+1)+"' contenteditable='true'>"+(i[d][c]||"")+"</td>";e+="<td><i id=row_delete_id_'"+(d+1)+"' class='icon-trash deleteRowButton "+o+"'></i>&nbsp;&nbsp;&nbsp;&nbsp;<i id=row_add_id_'"+(d+1)+"' class='icon-plus addRowButton'></i>&nbsp;&nbsp;&nbsp;&nbsp;<i class='icon-move'></i></td></tr>"}$("#dynamicTable").html(e),"hide"===o&&r($("tr:nth-child(2) td:first-child"))}}function e(){var t,n,i,e={},s=[],o=[],d=$("#dynamicTable tr:nth-child(1) td");0!==d.length&&(d.each(function(t){t!==d.length-1&&o.push($(this).text())}),t=$("#dynamicTable tr"),i=[],t.each(function(t){0<t&&(i=[],(n=$(this).children("td")).each(function(t){t!==n.length-1&&i.push($(this).text())}),i.length&&s.push(i))}),e.columns=o,e.rows=s,c.field.setData(e))}function n(){var t=$("#dynamicTable tr:nth-child(2) td:last-child .deleteRowButton"),n=$("#dynamicTable tr").length;if(2<n&&t.hasClass("hide"))return t.removeClass("hide");n<=2&&!t.hasClass("hide")&&t.addClass("hide")}function s(){if(400<$("body").height()&&t)return t=0,c.window.disableAutoResizing();t||(c.window.enableAutoResizing(),t=1)}function r(t){t.attr("tabindex",0),t.focus()}$("#dynamicTable").keyup(function(){e()}),$("body").on("click",".addRowButton",function(t){t.preventDefault(),function(t){var n=$(t).closest("tr"),i=$("#dynamicTable tr:first td").length,e="<td class='td_id_1' contenteditable='true'></td>",t=$("#dynamicTable tr").length-1;if(!(l<=t)&&0!==i){if(2<i)for(var s=2;s<i;s++)e+="<td class='td_id_"+s+"' contenteditable='true'></td>";t="<tr class='dataRow'><i class='icon-move'></i>"+e+"<td ><i id=row_delete_id_'"+(i+1)+"' class='icon-trash deleteRowButton'></i>&nbsp;&nbsp;&nbsp;&nbsp;<i id=row_add_id_'"+(i+1)+"' class='icon-plus addRowButton'></i>&nbsp;&nbsp;&nbsp;&nbsp;<i class='icon-move'></i></td></tr>";if(n)return $(t).insertAfter(n);$("#dynamicTable:last-child").append(t)}}(this);t=$(this).closest("tr").next("tr").find("td:first-child");t&&r(t),s(),n()}),$("body").on("click",".deleteRowButton",function(t){t.preventDefault(),function(t){var n=$("#dynamicTable tr").length;if($(t).closest("tr").remove(),2===n)i({columns:c.config.columns,rows:[]})}(this),e(),s(),n()}),ContentstackUIExtension.init().then(function(t){(c=t).window.enableAutoResizing();var n={},t=c.config;if(Object.keys(c.field.schema.config).length&&(t=c.field.schema.config),n.rows=c.field.getData().rows||[],n.columns=t.columns,t.rowsLimit&&(l=t.rowsLimit),t.columnsLimit&&(a=t.columnsLimit),!n.columns)return $("#dynamicTable").html("Please define your columns in extension's config");i(n)}),$("table tbody").sortable({items:"> tr:not(:first)",helper:function(t,n){return n.children().each(function(){$(this).width($(this).width())}),n},cancel:"[contenteditable]",containment:"document",axis:"y",stop:function(t,n){e()}})});
+</script>
+</head>
+<body>
+<table><tbody id="dynamicTable"> </tbody></table>
+</body>
+</html>