New modals for conveniently creating associations #6
Conversation
Wang-Yu-Chao
changed the title
|
Modal opens Ok with new button Create Associations. 👍 |
| var checkedBoxes = document.querySelectorAll("td.row-selected input[type='checkbox']"); | ||
| var languageIds = []; | ||
|
|
||
| checkedBoxes.forEach(function(box) { |
There was a problem hiding this comment.
forEach will not work with NodeList on Microsoft edge and IE.
Replace var checkedBoxes = document.querySelectorAll("td.row-selected input[type='checkbox']");
with
var checkedBoxes = [].slice.call(document.querySelectorAll("td.row-selected input[type='checkbox']"));
There was a problem hiding this comment.
# Conflicts: # administrator/components/com_associations/Helper/AssociationsHelper.php
|
We have quite a few errors in the modal This happens when there is no associated article yet. You should look at the modal_category field The page where such a field displays is for example The main difference is Select category should use EDIT: in fact we should use there Another aspect: If we do have already an associated article, we still can try to change its category but we can't save that as anyway there is no tick box. Also: The modal should be able to adapt its columns and specific field per item in function of the parameters of the item. It's coming. Courage. :-) |
|
Forgot: |
|
Conflicts to solve too. |
|
Also found out that |
|
@infograf768 Many thanks! I've modified the codes according to your comment. |
| </tr> | ||
| </tfoot> | ||
| <tbody> | ||
| <?php foreach ($this->items as $i => $item) :?> |
There was a problem hiding this comment.
Is it possible that $this->items is empty?
There was a problem hiding this comment.
This loop won't be executed if $this->items is false/null/an empty array. So I think it's ok.
There was a problem hiding this comment.
$this->items are the Content Languages.
If there are no Content Languages, there is no possible associations and, normally, the component will never display.
|
Results of my tests and suggestions:
Also: The reason is that we also want to be able to Create associations for other type of items than components using categories. As I wrote earlier, we may want to choose Parent Category, Parent Menu item, etc. and we would also have a conditional to display the parameter to choose via a new layout in the parameter column. Therefore, I do not think that we should add the code to define a category in the category column. I propose this kind of layout: As you can see I totally took off the category column as it displays in the Parameter column which would be used for all cases. |
|
BTW, when this will be completed, I have a patch ready to get better titles for the Modal. |
|
UI good 👍 Tests
|
|
That's strange... I couldn't reproduce that error on my computer. Articles manager works in the right way. |
|
About refreshing the page after closing modals, I'm not sure how to change |
|
It does not exist yet as es6, but are you sure this is the place where the changes should occur and not in admin-autoassoc-modal ? |
|
I did not explain clearly. 😛This kind of code is used in admin-menus-default.js. And it's perfectly fit for admin-associations-default.js. Once the |
|
BTW, I solved here the undefined property $featured with this code |
|
@Wang-Yu-Chao |
|
and a lot of other changes in 4.0-dev ;) |
|
Oh thanks @infograf768! I should have found that problem. There was a bug in multiselect.js. Seems that it was solved in the latest updates. So no bother 😄 |
|
Added a new parameter "Parent Item" for menus. |
|
Hmm |
|
@infograf768 do you have the PR for the tinyMCE? If not please resync this to the 4.0-dev |
|
@dgrammatiko If I simply add and then run npm install |
|
does this branch has the multiselect.es6.js or the old one? Please resync the repo, this is already patched |
|
Are you testing a staging branch here, not the 4.0-dev? |
|
I am using the specific GSOC branch called |
|
It contains a multiselect.es6.js which I modofied with the code you gave above.
|
|
try this
```js
/**
* @copyright Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
/**
* JavaScript behavior to allow shift select in administrator grids
*/
(() => {
class JMultiSelect {
constructor(formElement) {
this.tableEl = document.querySelector(formElement);
this.boxes = [];
this.rows = [];
if (this.tableEl) {
this.boxes = [].slice.call(this.tableEl.querySelectorAll('input[type=checkbox]'));
this.rows = [].slice.call(document.querySelectorAll('tr[class^="row"]'));
this.checkallToggle = document.querySelector('[name="checkall-toggle"]');
this.onCheckallToggleClick = this.onCheckallToggleClick.bind(this);
this.onRowClick = this.onRowClick.bind(this);
if (this.checkallToggle) {
this.checkallToggle.addEventListener('click', this.onCheckallToggleClick);
}
if (this.rows.length) {
this.rows.forEach((row) => {
row.addEventListener('click', this.onRowClick);
});
}
}
}
// Changes the background-color on every cell inside a <tr>
// eslint-disable-next-line class-methods-use-this
changeBg(row, isChecked) {
// Check if it should add or remove the background colour
if (isChecked) {
[].slice.call(row.querySelectorAll('td, th')).forEach((elementToMark) => {
elementToMark.classList.add('row-selected');
});
} else {
[].slice.call(row.querySelectorAll('td, th')).forEach((elementToMark) => {
elementToMark.classList.remove('row-selected');
});
}
}
onCheckallToggleClick(event) {
const isChecked = event.target.checked;
this.rows.forEach((row) => {
this.changeBg(row, isChecked);
});
}
onRowClick(event) {
if (!this.boxes.length) {
return;
}
const currentRowNum = this.rows.indexOf(event.target.closest('tr'));
const currentCheckBox = this.checkallToggle ? currentRowNum + 1 : currentRowNum;
let isChecked = this.boxes[currentCheckBox].checked;
if (currentCheckBox >= 0) {
if (!(event.target.id === this.boxes[currentCheckBox].id)) {
// We will prevent selecting text to prevent artifacts
if (event.shiftKey) {
document.body.style['-webkit-user-select'] = 'none';
document.body.style['-moz-user-select'] = 'none';
document.body.style['-ms-user-select'] = 'none';
document.body.style['user-select'] = 'none';
}
this.boxes[currentCheckBox].checked = !this.boxes[currentCheckBox].checked;
isChecked = this.boxes[currentCheckBox].checked;
Joomla.isChecked(this.boxes[currentCheckBox].checked);
}
this.changeBg(this.rows[currentCheckBox - 1], isChecked);
// Restore normality
if (event.shiftKey) {
document.body.style['-webkit-user-select'] = 'none';
document.body.style['-moz-user-select'] = 'none';
document.body.style['-ms-user-select'] = 'none';
document.body.style['user-select'] = 'none';
}
}
}
}
((Joomla) => {
'use strict';
const onBoot = () => {
if (!Joomla) {
// eslint-disable-next-line no-new
new JMultiSelect('#adminForm');
} else if (Joomla.getOptions && typeof Joomla.getOptions === 'function' && Joomla.getOptions('js-multiselect')) {
if (Joomla.getOptions('js-multiselect').formName) {
// eslint-disable-next-line no-new
new JMultiSelect(`#${Joomla.getOptions('js-multiselect').formName}`);
} else {
// eslint-disable-next-line no-new
new JMultiSelect('#adminForm');
}
}
};
document.addEventListener('DOMContentLoaded', onBoot);
})(Joomla);
})(window.Joomla);
```
|
|
Looks like the file is very different in that Also, this patch contains an extraneous admin-autoassoc-modal.js in build/media which I now take off as we have an es6 one in media_src I copied the build from last 4.0-dev and ran npm install @Wang-Yu-Chao the line is I changed some stuff there and ended the js by (Changes to be done in the es.6 file) Now the modal works when creating an association for ONE language. In any case, choosing a parent item does not work at all. Is missing in the list @dgrammatiko in the media multiselect.js here. |
there is no ES5 in 4.-dev. I guess you've messed up things here. The code here is for J3 and you try to run in J4... |
|
Yeah, in fact it is sufficient for the admin-autoassoc-modal.es6.js to change the last line to It is AFTER running npm install that is also created in media/ the file |
|
@Wang-Yu-Chao BTW for the new menu stuff I modified here a bit to get "No Parent item" at least. But it is still quite hard to choose a parent when the list is not filtered by Menu, including all menu items set to the desired language or ALL. |
|
@infograf768 Sorry for the late reply. I've been traveling around in the summer vacation. Will update this code recently. |
|
No p @Wang-Yu-Chao hard to go on working with all the changes we have with workflow and the necessitiy of using npm/node to test stuff. |
|
IMHO, we need new modals for menus (Parent items) and categories to choose stuff: |
* Load correct core files of override files (#2) Start implements loadcorefile() in administrator/components/com_templates/Model/TemplateModel.php * CS (#3) Coding Standards * codingstandards * codingstandards (#4) * Test (#6) Phase 2 (2 part) Mechanism to find correct core file and implementation. * Remove Notice: Only available for html-folder * Remove Warning if core file not found (#11) Thanks. So one part of the issue joomla-projects/gsoc18_override_management#12 is done. * Implement the diff view in template manager Implement the diff view in template manager * coding standard (#17) * fix diff (#18) Fix bug in path in case of administrator template override. Fix bug in path in case of administrator template override. * Notification after update and TEST (#16) Find changed files of overridden files and show message. * coding standard (#21) * correction * correction (#26) * Correcthtmlpath (#27) * correction * change oldhtml to newhtml * List of updated override files. (#30) * addcss (#34) * Final Product (#39) Core and Diff view Updated override history list. Quick icon notification plugin. Override control plugin. * save 3 lines :) * New feature show status. (#47) show status in com_template view templates * link * corrected namespace * Button to Switch (#35) * wip add Switcher * wip style switcher * wip style switch make inline and change on off text * wip start with js * wip js * wip delete buttons and make js more robust * wip save to storage * wip delete old code * wip * wip lint * wip css * set default value for switcher * wip make switcher blue * wip * wip * build * correct names * create new functions * fist test code * use onchange * undo installer.min.js * add forgotten new line at the end of css file * correct align * correct compare.es6 - only deleted the toggle part * correct compare.js - only deleted the toggle part * wip * reduce timeout * wrap in funcitons * wip * add use strict to both js-files(compare and toggle) * add the timeout value of 500 again, because 200 are not enought in my case * use css class 'active' for toggle views * add strict * time out for editor * wip * improvments use newActive and switch * correction * width of switcher-spans * correct align * do not use global * wip * removed timeouts * JTEXT to TEXT * forgotton last line * deleted duplicated comments * css fix align * use unnamed functions in es6 * Sql files for fix database (#50) * sql files for database fix * delete space * Suggestion for displaying Dates in view updates files (#52) Correct Dates and do not use date of file any more * Store Date as UTC and show it in server time zone (#57) * modified and created date are created and stored in UTC * convert dates for displaying in model * spar a loop * normalize timezone in view * use language constants for dateformat * JToolbarHelper to ToolbarHelper * CS * namespace * plural * name * clean * text * fx * sin * files * s * Suggestion for language strings (#60) * language strings * correct typo * delete media folder plg_quickicon * add folder plg_quickicon to build/media_src * delete files in media folder * Move media folder - System (#66) * multi * cs * delete files in media folder for joomla toolbar (#67) * Fix button switchers style. (#70) * button * CS * changed uitab.addTab for updated files * Bring back core.js changes. (#69) * core.js * const * fix * form * core * hound * CS * scopr * grid * alpha * cs * lang * only override file * lang * override lang installer * Cs * sub * Update list of core extensions (#71) * Language changes (#76) * update * Update en-GB.com_templates.ini * override JLIB_HTML_PUBLISH_ITEM this is the hover text on the publish icon in the list of files * Change icon (#74) change the icon to use an outline for more consistency * lang * not core (#75) * not core * Update en-GB.plg_installer_override.ini * namespace * cs * Updated files (#82) * Update default_updated_files.php * Update en-GB.com_templates.ini * Update en-GB.com_templates.ini (#81) * Update en-GB.plg_quickicon_overridecheck.ini (#80) * Update en-GB.plg_quickicon_overridecheck.ini (#79) * remove space (#78) * Update en-GB.plg_quickicon_overridecheck.ini * Update en-GB.plg_quickicon_overridecheck.sys.ini * remove hardcoded id * null get function * state * clean * More changes "core" to "original" (#85) * cs * update * plural
4 participants
Pull Request for Issue # .
Summary of Changes
New modals for conveniently creating associations
Testing Instructions
Expected result
Actual result
Documentation Changes Required