Skip to content
Closed
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
ae5d325
UX FormCollection
stakovicz May 3, 2021
c305f0c
Remove hard coded property_name __name__
stakovicz May 4, 2021
5e6dd84
PHP CS Fixer
stakovicz May 4, 2021
eea2313
First jests
stakovicz May 4, 2021
f651d90
Rename CollectionType > UXCollectionType
stakovicz May 6, 2021
cc02076
Rename CollectionType > UXCollectionType
stakovicz May 6, 2021
dceb2cf
DependencyInjection Clean
stakovicz May 6, 2021
dfb54f8
Fix .gitattributes
stakovicz May 6, 2021
9300cda
Move default values
stakovicz May 7, 2021
ec4342a
Predefined theme or not
stakovicz May 23, 2021
b4f40cd
Update src/FormCollection/README.md
stakovicz May 24, 2021
0584757
Update src/FormCollection/README.md
stakovicz May 24, 2021
abd2b8f
Update src/FormCollection/README.md
stakovicz May 24, 2021
3996f3b
Update src/FormCollection/Resources/views/form_theme_div.html.twig
stakovicz May 24, 2021
aaa6811
Update src/FormCollection/README.md
stakovicz May 24, 2021
4791ff9
Update src/FormCollection/Resources/views/form_theme_table.html.twig
stakovicz May 24, 2021
8539ff9
Split in 4 options
stakovicz May 24, 2021
2d1ed04
Default startIndex value
stakovicz Jun 6, 2021
1e3105d
Update src/FormCollection/Resources/views/form_theme_div.html.twig
stakovicz Jul 21, 2021
0a9cc54
Update src/FormCollection/Resources/views/form_theme_div.html.twig
stakovicz Jul 21, 2021
94be94c
Update src/FormCollection/Resources/views/form_theme_table.html.twig
stakovicz Jul 21, 2021
c805c0e
Update src/FormCollection/Resources/views/form_theme_table.html.twig
stakovicz Jul 21, 2021
e56d04b
Fix coding-style-js
stakovicz Nov 6, 2021
7467cee
Prettier
stakovicz Nov 6, 2021
a8c730c
Merge branch 'symfony:2.x' into main
stakovicz Jan 19, 2022
ecd774a
Merge branch 'symfony:2.x' into main
stakovicz May 7, 2022
25d8306
Rebase and refresh the code
stakovicz May 21, 2022
8e5cd8a
fix TU
stakovicz May 21, 2022
3b110f9
change buttons attr
stakovicz May 21, 2022
c36157c
Merge branch 'symfony:2.x' into main
stakovicz Jun 14, 2022
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Rebase and refresh the code
  • Loading branch information
stakovicz committed May 21, 2022
commit 25d830671f1e43168f7a35ef5fc058a08e68d9c9
300 changes: 95 additions & 205 deletions src/FormCollection/Resources/assets/dist/controller.js
Original file line number Diff line number Diff line change
@@ -1,215 +1,105 @@
'use strict';
import { Controller } from '@hotwired/stimulus';

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;

var _stimulus = require("stimulus");

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var _default = /*#__PURE__*/function (_Controller) {
_inherits(_default, _Controller);

var _super = _createSuper(_default);

function _default() {
var _this;

_classCallCheck(this, _default);

for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
class default_1 extends Controller {
constructor() {
super(...arguments);
this.index = 0;
}

_this = _super.call.apply(_super, [this].concat(args));

_defineProperty(_assertThisInitialized(_this), "index", 0);

_defineProperty(_assertThisInitialized(_this), "controllerName", null);

return _this;
}

_createClass(_default, [{
key: "connect",
value: function connect() {
this.controllerName = this.context.scope.identifier;
this.index = this.startIndexValue ? this.startIndexValue : this.entryTargets.length - 1;

if (!this.prototypeNameValue) {
this.prototypeNameValue = '__name__';
}

this._dispatchEvent('form-collection:pre-connect', {
allowAdd: this.allowAddValue,
allowDelete: this.allowDeleteValue
});

if (true === this.allowAddValue) {
// Add button Add
var buttonAdd = this._textToNode(this.buttonAddValue);

this.element.prepend(buttonAdd);
} // Add buttons Delete


if (true === this.allowDeleteValue) {
for (var i = 0; i < this.entryTargets.length; i++) {
var entry = this.entryTargets[i];

this._addDeleteButton(entry, i);
connect() {
this.controllerName = this.context.scope.identifier;
this.index = this.startIndexValue ? this.startIndexValue : this.entryTargets.length - 1;
if (!this.prototypeNameValue) {
this.prototypeNameValue = '__name__';
}
}

this._dispatchEvent('form-collection:connect', {
allowAdd: this.allowAddValue,
allowDelete: this.allowDeleteValue
});
this._dispatchEvent('form-collection:pre-connect', {
allowAdd: this.allowAddValue,
allowDelete: this.allowDeleteValue,
});
if (this.allowAddValue) {
const buttonAdd = this._textToNode(this.buttonAddValue);
this.element.prepend(buttonAdd);
}
if (this.allowDeleteValue) {
for (let i = 0; i < this.entryTargets.length; i++) {
const entry = this.entryTargets[i];
this._addDeleteButton(entry, i);
}
}
this._dispatchEvent('form-collection:connect', {
allowAdd: this.allowAddValue,
allowDelete: this.allowDeleteValue,
});
}
}, {
key: "add",
value: function add(event) {
this.index++; // Compute the new entry

var newEntry = this.element.dataset.prototype;

if (!newEntry) {
newEntry = this.prototypeValue;
}

var regExp = new RegExp(this.prototypeNameValue + 'label__', 'g');
newEntry = newEntry.replace(regExp, this.index);
regExp = new RegExp(this.prototypeNameValue, 'g');
newEntry = newEntry.replace(regExp, this.index);
newEntry = this._textToNode(newEntry);

this._dispatchEvent('form-collection:pre-add', {
index: this.index,
element: newEntry
});

this.element.append(newEntry); // Retrieve the entry from targets to make sure that this is the one

var entry = this.entryTargets[this.entryTargets.length - 1];
entry = this._addDeleteButton(entry, this.index);

this._dispatchEvent('form-collection:add', {
index: this.index,
element: entry
});
add() {
this.index++;
let newEntry = this.element.dataset.prototype;
if (!newEntry) {
newEntry = this.prototypeValue;
}
let regExp = new RegExp(this.prototypeNameValue + 'label__', 'g');
newEntry = newEntry.replace(regExp, this.index);
regExp = new RegExp(this.prototypeNameValue, 'g');
newEntry = newEntry.replace(regExp, this.index);
newEntry = this._textToNode(newEntry);
this._dispatchEvent('form-collection:pre-add', {
index: this.index,
element: newEntry,
});
this.element.append(newEntry);
let entry = this.entryTargets[this.entryTargets.length - 1];
entry = this._addDeleteButton(entry, this.index);
this._dispatchEvent('form-collection:add', {
index: this.index,
element: entry,
});
}
}, {
key: "delete",
value: function _delete(event) {
var entry = event.target.closest('[data-' + this.controllerName + '-target="entry"]');

this._dispatchEvent('form-collection:pre-delete', {
index: entry.dataset.indexEntry,
element: entry
});

entry.remove();

this._dispatchEvent('form-collection:delete', {
index: entry.dataset.indexEntry,
element: entry
});
delete(event) {
const entry = event.target.closest('[data-' + this.controllerName + '-target="entry"]');
this._dispatchEvent('form-collection:pre-delete', {
index: entry.dataset.indexEntry,
element: entry,
});
entry.remove();
this._dispatchEvent('form-collection:delete', {
index: entry.dataset.indexEntry,
element: entry,
});
}
/**
* Add the delete button to the entry
* @param String entry
* @param Number index
* @returns {ChildNode}
* @private
*/

}, {
key: "_addDeleteButton",
value: function _addDeleteButton(entry, index) {
// link the button and the entry by the data-index-entry attribute
entry.dataset.indexEntry = index;

var buttonDelete = this._textToNode(this.buttonDeleteValue);

if (!buttonDelete) {
_addDeleteButton(entry, index) {
entry.dataset.indexEntry = index.toString();
const buttonDelete = this._textToNode(this.buttonDeleteValue);
if (!buttonDelete) {
return entry;
}
buttonDelete.dataset.indexEntry = index;
if ('TR' === entry.nodeName) {
entry.lastElementChild.append(buttonDelete);
}
else {
entry.append(buttonDelete);
}
return entry;
}

buttonDelete.dataset.indexEntry = index;

if ('TR' === entry.nodeName) {
entry.lastElementChild.append(buttonDelete);
} else {
entry.append(buttonDelete);
}

return entry;
}
/**
* Convert text to Element to insert in the DOM
* @param String text
* @returns {ChildNode}
* @private
*/

}, {
key: "_textToNode",
value: function _textToNode(text) {
var template = document.createElement('template');
text = text.trim(); // Never return a text node of whitespace as the result

template.innerHTML = text;
return template.content.firstChild;
_textToNode(text) {
const template = document.createElement('template');
text = text.trim();
template.innerHTML = text;
return template.content.firstChild;
}
}, {
key: "_dispatchEvent",
value: function _dispatchEvent(name) {
var payload = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
var canBubble = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
var cancelable = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
var userEvent = document.createEvent('CustomEvent');
userEvent.initCustomEvent(name, canBubble, cancelable, payload);
this.element.dispatchEvent(userEvent);
_dispatchEvent(name, payload) {
console.log('TTTT');
this.element.dispatchEvent(new CustomEvent(name, { detail: payload }));
}
}]);

return _default;
}(_stimulus.Controller);

exports["default"] = _default;

_defineProperty(_default, "targets", ['entry']);

_defineProperty(_default, "values", {
allowAdd: Boolean,
allowDelete: Boolean,
buttonAdd: String,
buttonDelete: String,
prototypeName: String,
prototype: String,
startIndex: Number
});
}
default_1.targets = ['entry'];
default_1.values = {
allowAdd: Boolean,
allowDelete: Boolean,
buttonAdd: String,
buttonDelete: String,
prototypeName: String,
prototype: String,
startIndex: Number,
};

export { default_1 as default };
5 changes: 5 additions & 0 deletions src/FormCollection/Resources/assets/jest.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
const config = require('../../../../jest.config.js');

config.setupFilesAfterEnv.push('./test/setup.js');

module.exports = config;
20 changes: 2 additions & 18 deletions src/FormCollection/Resources/assets/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,26 +13,10 @@
}
}
},
"scripts": {
"build": "babel src -d dist",
"test": "babel src -d dist && jest",
"lint": "eslint src test"
},
"peerDependencies": {
"stimulus": "^2.0.0"
"@hotwired/stimulus": "^3.0.0"
},
"devDependencies": {
"@babel/cli": "^7.12.1",
"@babel/core": "^7.12.3",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/preset-env": "^7.12.7",
"@symfony/stimulus-testing": "^1.1.0",
"stimulus": "^2.0.0"
},
"jest": {
"testRegex": "test/.*\\.test.js",
"setupFilesAfterEnv": [
"./test/setup.js"
]
"@hotwired/stimulus": "^3.0.0"
}
}
Loading