mirror of
https://github.com/wekan/wekan.git
synced 2026-03-14 01:16:13 +01:00
Migrate sidebar and settings components from BlazeComponent to Template
Convert sidebar, sidebarArchives, sidebarCustomFields, sidebarFilters, sidebarSearches, and all settings panel components to use native Meteor Template.onCreated/helpers/events pattern.
This commit is contained in:
Harry Adel
parent
d3625db755
commit
bae23f9ed8
12 changed files with 2937 additions and 3046 deletions
|
|
@ -1,111 +1,119 @@
|
|||
import { ReactiveCache } from '/imports/reactiveCache';
|
||||
import { TAPi18n } from '/imports/i18n';
|
||||
|
||||
BlazeComponent.extendComponent({
|
||||
Template.customFieldsSidebar.helpers({
|
||||
customFields() {
|
||||
const ret = ReactiveCache.getCustomFields({
|
||||
boardIds: { $in: [Session.get('currentBoard')] },
|
||||
});
|
||||
return ret;
|
||||
},
|
||||
});
|
||||
|
||||
events() {
|
||||
return [
|
||||
{
|
||||
'click .js-open-create-custom-field': Popup.open('createCustomField'),
|
||||
'click .js-edit-custom-field': Popup.open('editCustomField'),
|
||||
},
|
||||
];
|
||||
},
|
||||
}).register('customFieldsSidebar');
|
||||
Template.customFieldsSidebar.events({
|
||||
'click .js-open-create-custom-field': Popup.open('createCustomField'),
|
||||
'click .js-edit-custom-field': Popup.open('editCustomField'),
|
||||
});
|
||||
|
||||
const CreateCustomFieldPopup = BlazeComponent.extendComponent({
|
||||
_types: [
|
||||
'text',
|
||||
'number',
|
||||
'date',
|
||||
'dropdown',
|
||||
'currency',
|
||||
'checkbox',
|
||||
'stringtemplate',
|
||||
],
|
||||
const CUSTOM_FIELD_TYPES = [
|
||||
'text',
|
||||
'number',
|
||||
'date',
|
||||
'dropdown',
|
||||
'currency',
|
||||
'checkbox',
|
||||
'stringtemplate',
|
||||
];
|
||||
|
||||
_currencyList: [
|
||||
{
|
||||
name: 'US Dollar',
|
||||
code: 'USD',
|
||||
},
|
||||
{
|
||||
name: 'Euro',
|
||||
code: 'EUR',
|
||||
},
|
||||
{
|
||||
name: 'Yen',
|
||||
code: 'JPY',
|
||||
},
|
||||
{
|
||||
name: 'Pound Sterling',
|
||||
code: 'GBP',
|
||||
},
|
||||
{
|
||||
name: 'Australian Dollar',
|
||||
code: 'AUD',
|
||||
},
|
||||
{
|
||||
name: 'Canadian Dollar',
|
||||
code: 'CAD',
|
||||
},
|
||||
{
|
||||
name: 'Swiss Franc',
|
||||
code: 'CHF',
|
||||
},
|
||||
{
|
||||
name: 'Yuan Renminbi',
|
||||
code: 'CNY',
|
||||
},
|
||||
{
|
||||
name: 'Hong Kong Dollar',
|
||||
code: 'HKD',
|
||||
},
|
||||
{
|
||||
name: 'New Zealand Dollar',
|
||||
code: 'NZD',
|
||||
},
|
||||
],
|
||||
const CURRENCY_LIST = [
|
||||
{ name: 'US Dollar', code: 'USD' },
|
||||
{ name: 'Euro', code: 'EUR' },
|
||||
{ name: 'Yen', code: 'JPY' },
|
||||
{ name: 'Pound Sterling', code: 'GBP' },
|
||||
{ name: 'Australian Dollar', code: 'AUD' },
|
||||
{ name: 'Canadian Dollar', code: 'CAD' },
|
||||
{ name: 'Swiss Franc', code: 'CHF' },
|
||||
{ name: 'Yuan Renminbi', code: 'CNY' },
|
||||
{ name: 'Hong Kong Dollar', code: 'HKD' },
|
||||
{ name: 'New Zealand Dollar', code: 'NZD' },
|
||||
];
|
||||
|
||||
onCreated() {
|
||||
this.type = new ReactiveVar(
|
||||
this.data().type ? this.data().type : this._types[0],
|
||||
);
|
||||
function getDropdownItems(tpl) {
|
||||
const items = tpl.dropdownItems.get();
|
||||
Array.from(tpl.findAll('.js-field-settings-dropdown input')).forEach(
|
||||
(el, index) => {
|
||||
if (!items[index])
|
||||
items[index] = {
|
||||
_id: Random.id(6),
|
||||
};
|
||||
items[index].name = el.value.trim();
|
||||
},
|
||||
);
|
||||
return items;
|
||||
}
|
||||
|
||||
this.currencyCode = new ReactiveVar(
|
||||
this.data().settings && this.data().settings.currencyCode
|
||||
? this.data().settings.currencyCode
|
||||
: this._currencyList[0].code,
|
||||
);
|
||||
function getSettings(tpl) {
|
||||
const settings = {};
|
||||
switch (tpl.type.get()) {
|
||||
case 'currency': {
|
||||
const currencyCode = tpl.currencyCode.get();
|
||||
settings.currencyCode = currencyCode;
|
||||
break;
|
||||
}
|
||||
case 'dropdown': {
|
||||
const dropdownItems = getDropdownItems(tpl).filter(
|
||||
item => !!item.name.trim(),
|
||||
);
|
||||
settings.dropdownItems = dropdownItems;
|
||||
break;
|
||||
}
|
||||
case 'stringtemplate': {
|
||||
const stringtemplateFormat = tpl.stringtemplateFormat.get();
|
||||
settings.stringtemplateFormat = stringtemplateFormat;
|
||||
|
||||
this.dropdownItems = new ReactiveVar(
|
||||
this.data().settings && this.data().settings.dropdownItems
|
||||
? this.data().settings.dropdownItems
|
||||
: [],
|
||||
);
|
||||
const stringtemplateSeparator = tpl.stringtemplateSeparator.get();
|
||||
settings.stringtemplateSeparator = stringtemplateSeparator;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return settings;
|
||||
}
|
||||
|
||||
this.stringtemplateFormat = new ReactiveVar(
|
||||
this.data().settings && this.data().settings.stringtemplateFormat
|
||||
? this.data().settings.stringtemplateFormat
|
||||
: '',
|
||||
);
|
||||
Template.createCustomFieldPopup.onCreated(function () {
|
||||
const data = Template.currentData();
|
||||
this.type = new ReactiveVar(
|
||||
data.type ? data.type : CUSTOM_FIELD_TYPES[0],
|
||||
);
|
||||
|
||||
this.stringtemplateSeparator = new ReactiveVar(
|
||||
this.data().settings && this.data().settings.stringtemplateSeparator
|
||||
? this.data().settings.stringtemplateSeparator
|
||||
: '',
|
||||
);
|
||||
},
|
||||
this.currencyCode = new ReactiveVar(
|
||||
data.settings && data.settings.currencyCode
|
||||
? data.settings.currencyCode
|
||||
: CURRENCY_LIST[0].code,
|
||||
);
|
||||
|
||||
this.dropdownItems = new ReactiveVar(
|
||||
data.settings && data.settings.dropdownItems
|
||||
? data.settings.dropdownItems
|
||||
: [],
|
||||
);
|
||||
|
||||
this.stringtemplateFormat = new ReactiveVar(
|
||||
data.settings && data.settings.stringtemplateFormat
|
||||
? data.settings.stringtemplateFormat
|
||||
: '',
|
||||
);
|
||||
|
||||
this.stringtemplateSeparator = new ReactiveVar(
|
||||
data.settings && data.settings.stringtemplateSeparator
|
||||
? data.settings.stringtemplateSeparator
|
||||
: '',
|
||||
);
|
||||
});
|
||||
|
||||
Template.createCustomFieldPopup.helpers({
|
||||
types() {
|
||||
const currentType = this.data().type;
|
||||
return this._types.map(type => {
|
||||
const currentType = Template.currentData().type;
|
||||
return CUSTOM_FIELD_TYPES.map(type => {
|
||||
return {
|
||||
value: type,
|
||||
name: TAPi18n.__(`custom-field-${type}`),
|
||||
|
|
@ -115,13 +123,13 @@ const CreateCustomFieldPopup = BlazeComponent.extendComponent({
|
|||
},
|
||||
|
||||
isTypeNotSelected(type) {
|
||||
return this.type.get() !== type;
|
||||
return Template.instance().type.get() !== type;
|
||||
},
|
||||
|
||||
getCurrencyCodes() {
|
||||
const currentCode = this.currencyCode.get();
|
||||
const currentCode = Template.instance().currencyCode.get();
|
||||
|
||||
return this._currencyList.map(({ name, code }) => {
|
||||
return CURRENCY_LIST.map(({ name, code }) => {
|
||||
return {
|
||||
name: `${code} - ${name}`,
|
||||
value: code,
|
||||
|
|
@ -131,176 +139,128 @@ const CreateCustomFieldPopup = BlazeComponent.extendComponent({
|
|||
},
|
||||
|
||||
getDropdownItems() {
|
||||
const items = this.dropdownItems.get();
|
||||
Array.from(this.findAll('.js-field-settings-dropdown input')).forEach(
|
||||
(el, index) => {
|
||||
//console.log('each item!', index, el.value);
|
||||
if (!items[index])
|
||||
items[index] = {
|
||||
_id: Random.id(6),
|
||||
};
|
||||
items[index].name = el.value.trim();
|
||||
},
|
||||
);
|
||||
return items;
|
||||
return getDropdownItems(Template.instance());
|
||||
},
|
||||
|
||||
getStringtemplateFormat() {
|
||||
return this.stringtemplateFormat.get();
|
||||
return Template.instance().stringtemplateFormat.get();
|
||||
},
|
||||
|
||||
getStringtemplateSeparator() {
|
||||
return this.stringtemplateSeparator.get();
|
||||
},
|
||||
|
||||
getSettings() {
|
||||
const settings = {};
|
||||
switch (this.type.get()) {
|
||||
case 'currency': {
|
||||
const currencyCode = this.currencyCode.get();
|
||||
settings.currencyCode = currencyCode;
|
||||
break;
|
||||
}
|
||||
case 'dropdown': {
|
||||
const dropdownItems = this.getDropdownItems().filter(
|
||||
item => !!item.name.trim(),
|
||||
);
|
||||
settings.dropdownItems = dropdownItems;
|
||||
break;
|
||||
}
|
||||
case 'stringtemplate': {
|
||||
const stringtemplateFormat = this.stringtemplateFormat.get();
|
||||
settings.stringtemplateFormat = stringtemplateFormat;
|
||||
|
||||
const stringtemplateSeparator = this.stringtemplateSeparator.get();
|
||||
settings.stringtemplateSeparator = stringtemplateSeparator;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return settings;
|
||||
},
|
||||
|
||||
events() {
|
||||
return [
|
||||
{
|
||||
'change .js-field-type'(evt) {
|
||||
const value = evt.target.value;
|
||||
this.type.set(value);
|
||||
},
|
||||
'change .js-field-currency'(evt) {
|
||||
const value = evt.target.value;
|
||||
this.currencyCode.set(value);
|
||||
},
|
||||
'keydown .js-dropdown-item.last'(evt) {
|
||||
if (evt.target.value.trim() && evt.keyCode === 13) {
|
||||
const items = this.getDropdownItems();
|
||||
this.dropdownItems.set(items);
|
||||
evt.target.value = '';
|
||||
}
|
||||
},
|
||||
'input .js-field-stringtemplate-format'(evt) {
|
||||
const value = evt.target.value;
|
||||
this.stringtemplateFormat.set(value);
|
||||
},
|
||||
'input .js-field-stringtemplate-separator'(evt) {
|
||||
const value = evt.target.value;
|
||||
this.stringtemplateSeparator.set(value);
|
||||
},
|
||||
'click .js-field-show-on-card'(evt) {
|
||||
let $target = $(evt.target);
|
||||
if (!$target.hasClass('js-field-show-on-card')) {
|
||||
$target = $target.parent();
|
||||
}
|
||||
$target.find('.materialCheckBox').toggleClass('is-checked');
|
||||
$target.toggleClass('is-checked');
|
||||
},
|
||||
'click .js-field-automatically-on-card'(evt) {
|
||||
let $target = $(evt.target);
|
||||
if (!$target.hasClass('js-field-automatically-on-card')) {
|
||||
$target = $target.parent();
|
||||
}
|
||||
$target.find('.materialCheckBox').toggleClass('is-checked');
|
||||
$target.toggleClass('is-checked');
|
||||
},
|
||||
'click .js-field-always-on-card'(evt) {
|
||||
let $target = $(evt.target);
|
||||
if (!$target.hasClass('js-field-always-on-card')) {
|
||||
$target = $target.parent();
|
||||
}
|
||||
$target.find('.materialCheckBox').toggleClass('is-checked');
|
||||
$target.toggleClass('is-checked');
|
||||
},
|
||||
'click .js-field-showLabel-on-card'(evt) {
|
||||
let $target = $(evt.target);
|
||||
if (!$target.hasClass('js-field-showLabel-on-card')) {
|
||||
$target = $target.parent();
|
||||
}
|
||||
$target.find('.materialCheckBox').toggleClass('is-checked');
|
||||
$target.toggleClass('is-checked');
|
||||
},
|
||||
'click .js-field-show-sum-at-top-of-list'(evt) {
|
||||
let $target = $(evt.target);
|
||||
if (!$target.hasClass('js-field-show-sum-at-top-of-list')) {
|
||||
$target = $target.parent();
|
||||
}
|
||||
$target.find('.materialCheckBox').toggleClass('is-checked');
|
||||
$target.toggleClass('is-checked');
|
||||
},
|
||||
'click .primary'(evt) {
|
||||
evt.preventDefault();
|
||||
|
||||
const data = {
|
||||
name: this.find('.js-field-name').value.trim(),
|
||||
type: this.type.get(),
|
||||
settings: this.getSettings(),
|
||||
showOnCard: this.find('.js-field-show-on-card.is-checked') !== null,
|
||||
showLabelOnMiniCard:
|
||||
this.find('.js-field-showLabel-on-card.is-checked') !== null,
|
||||
automaticallyOnCard:
|
||||
this.find('.js-field-automatically-on-card.is-checked') !== null,
|
||||
alwaysOnCard:
|
||||
this.find('.js-field-always-on-card.is-checked') !== null,
|
||||
showSumAtTopOfList:
|
||||
this.find('.js-field-show-sum-at-top-of-list.is-checked') !== null,
|
||||
};
|
||||
|
||||
// insert or update
|
||||
if (!this.data()._id) {
|
||||
data.boardIds = [Session.get('currentBoard')];
|
||||
CustomFields.insert(data);
|
||||
} else {
|
||||
CustomFields.update(this.data()._id, { $set: data });
|
||||
}
|
||||
|
||||
Popup.back();
|
||||
},
|
||||
'click .js-delete-custom-field': Popup.afterConfirm(
|
||||
'deleteCustomField',
|
||||
function() {
|
||||
const customField = ReactiveCache.getCustomField(this._id);
|
||||
if (customField.boardIds.length > 1) {
|
||||
CustomFields.update(customField._id, {
|
||||
$pull: {
|
||||
boardIds: Session.get('currentBoard'),
|
||||
},
|
||||
});
|
||||
} else {
|
||||
CustomFields.remove(customField._id);
|
||||
}
|
||||
Popup.back();
|
||||
},
|
||||
),
|
||||
},
|
||||
];
|
||||
return Template.instance().stringtemplateSeparator.get();
|
||||
},
|
||||
});
|
||||
CreateCustomFieldPopup.register('createCustomFieldPopup');
|
||||
|
||||
(class extends CreateCustomFieldPopup {
|
||||
template() {
|
||||
return 'createCustomFieldPopup';
|
||||
}
|
||||
}.register('editCustomFieldPopup'));
|
||||
Template.createCustomFieldPopup.events({
|
||||
'change .js-field-type'(evt, tpl) {
|
||||
const value = evt.target.value;
|
||||
tpl.type.set(value);
|
||||
},
|
||||
'change .js-field-currency'(evt, tpl) {
|
||||
const value = evt.target.value;
|
||||
tpl.currencyCode.set(value);
|
||||
},
|
||||
'keydown .js-dropdown-item.last'(evt, tpl) {
|
||||
if (evt.target.value.trim() && evt.keyCode === 13) {
|
||||
const items = getDropdownItems(tpl);
|
||||
tpl.dropdownItems.set(items);
|
||||
evt.target.value = '';
|
||||
}
|
||||
},
|
||||
'input .js-field-stringtemplate-format'(evt, tpl) {
|
||||
const value = evt.target.value;
|
||||
tpl.stringtemplateFormat.set(value);
|
||||
},
|
||||
'input .js-field-stringtemplate-separator'(evt, tpl) {
|
||||
const value = evt.target.value;
|
||||
tpl.stringtemplateSeparator.set(value);
|
||||
},
|
||||
'click .js-field-show-on-card'(evt) {
|
||||
let $target = $(evt.target);
|
||||
if (!$target.hasClass('js-field-show-on-card')) {
|
||||
$target = $target.parent();
|
||||
}
|
||||
$target.find('.materialCheckBox').toggleClass('is-checked');
|
||||
$target.toggleClass('is-checked');
|
||||
},
|
||||
'click .js-field-automatically-on-card'(evt) {
|
||||
let $target = $(evt.target);
|
||||
if (!$target.hasClass('js-field-automatically-on-card')) {
|
||||
$target = $target.parent();
|
||||
}
|
||||
$target.find('.materialCheckBox').toggleClass('is-checked');
|
||||
$target.toggleClass('is-checked');
|
||||
},
|
||||
'click .js-field-always-on-card'(evt) {
|
||||
let $target = $(evt.target);
|
||||
if (!$target.hasClass('js-field-always-on-card')) {
|
||||
$target = $target.parent();
|
||||
}
|
||||
$target.find('.materialCheckBox').toggleClass('is-checked');
|
||||
$target.toggleClass('is-checked');
|
||||
},
|
||||
'click .js-field-showLabel-on-card'(evt) {
|
||||
let $target = $(evt.target);
|
||||
if (!$target.hasClass('js-field-showLabel-on-card')) {
|
||||
$target = $target.parent();
|
||||
}
|
||||
$target.find('.materialCheckBox').toggleClass('is-checked');
|
||||
$target.toggleClass('is-checked');
|
||||
},
|
||||
'click .js-field-show-sum-at-top-of-list'(evt) {
|
||||
let $target = $(evt.target);
|
||||
if (!$target.hasClass('js-field-show-sum-at-top-of-list')) {
|
||||
$target = $target.parent();
|
||||
}
|
||||
$target.find('.materialCheckBox').toggleClass('is-checked');
|
||||
$target.toggleClass('is-checked');
|
||||
},
|
||||
'click .primary'(evt, tpl) {
|
||||
evt.preventDefault();
|
||||
|
||||
const data = {
|
||||
name: tpl.find('.js-field-name').value.trim(),
|
||||
type: tpl.type.get(),
|
||||
settings: getSettings(tpl),
|
||||
showOnCard: tpl.find('.js-field-show-on-card.is-checked') !== null,
|
||||
showLabelOnMiniCard:
|
||||
tpl.find('.js-field-showLabel-on-card.is-checked') !== null,
|
||||
automaticallyOnCard:
|
||||
tpl.find('.js-field-automatically-on-card.is-checked') !== null,
|
||||
alwaysOnCard:
|
||||
tpl.find('.js-field-always-on-card.is-checked') !== null,
|
||||
showSumAtTopOfList:
|
||||
tpl.find('.js-field-show-sum-at-top-of-list.is-checked') !== null,
|
||||
};
|
||||
|
||||
const currentData = Template.currentData();
|
||||
// insert or update
|
||||
if (!currentData._id) {
|
||||
data.boardIds = [Session.get('currentBoard')];
|
||||
CustomFields.insert(data);
|
||||
} else {
|
||||
CustomFields.update(currentData._id, { $set: data });
|
||||
}
|
||||
|
||||
Popup.back();
|
||||
},
|
||||
'click .js-delete-custom-field': Popup.afterConfirm(
|
||||
'deleteCustomField',
|
||||
function() {
|
||||
const customField = ReactiveCache.getCustomField(this._id);
|
||||
if (customField.boardIds.length > 1) {
|
||||
CustomFields.update(customField._id, {
|
||||
$pull: {
|
||||
boardIds: Session.get('currentBoard'),
|
||||
},
|
||||
});
|
||||
} else {
|
||||
CustomFields.remove(customField._id);
|
||||
}
|
||||
Popup.back();
|
||||
},
|
||||
),
|
||||
});
|
||||
|
||||
/*Template.deleteCustomFieldPopup.events({
|
||||
'submit'(evt) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue