Feature/Ui view handle by Vue.js #678

ibelar · 2019-03-29T18:47:52Z

Implementation of Vue.js with Ui view.

Add vueService to atkjs-ui.js for handling creation of Vue component within atk4\ui;
Add two new view component:
- InlineEdit for saving a simple field to db;
- ItemSearch for searching into db and reloading a view.

Atkjs File name

Refactoring and standardizing atkjs-ui file name.

Demo in vue-composent.php

Add Vue js to Atk with two components.

… into feature/vue-js-refactoring

codecov · 2019-03-29T18:56:32Z

Codecov Report

Merging #678 into develop will increase coverage by 0.25%.
The diff coverage is 72.89%.

@@              Coverage Diff              @@
##             develop     #678      +/-   ##
=============================================
+ Coverage      72.69%   72.94%   +0.25%     
- Complexity      1870     1924      +54     
=============================================
  Files            102      105       +3     
  Lines           4421     4558     +137     
=============================================
+ Hits            3214     3325     +111     
- Misses          1207     1233      +26

Impacted Files	Coverage Δ	Complexity Δ
src/View.php	`82.89% <100%> (+0.62%)`	`147 <5> (+5)`	⬆️
src/jsVueService.php	`100% <100%> (ø)`	`4 <4> (?)`
src/Component/InlineEdit.php	`52.54% <52.54%> (ø)`	`30 <30> (?)`
src/Component/ItemSearch.php	`96.42% <96.42%> (ø)`	`11 <11> (?)`
src/FormField/Input.php	`100% <0%> (ø)`	`33% <0%> (+2%)`	⬆️
src/FormField/DropDown.php	`91.17% <0%> (+0.26%)`	`31% <0%> (+1%)`	⬆️
src/FormField/Upload.php	`64.78% <0%> (+6.05%)`	`35% <0%> (+1%)`	⬆️
... and 1 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0b926ca...e24be24. Read the comment docs.

codecov · 2019-03-29T18:56:32Z

Codecov Report

Merging #678 into develop will decrease coverage by 28.89%.
The diff coverage is 0%.

@@             Coverage Diff              @@
##             develop    #678      +/-   ##
============================================
- Coverage      72.69%   43.8%   -28.9%     
- Complexity      1870    1911      +41     
============================================
  Files            102     105       +3     
  Lines           4421    4639     +218     
============================================
- Hits            3214    2032    -1182     
- Misses          1207    2607    +1400

Impacted Files	Coverage Δ	Complexity Δ
src/jsVueService.php	`0% <0%> (ø)`	`4 <4> (?)`
src/Component/InlineEdit.php	`0% <0%> (ø)`	`23 <23> (?)`
src/Component/ItemSearch.php	`0% <0%> (ø)`	`10 <10> (?)`
src/AccordionSection.php	`0% <0%> (-100%)`	`3% <0%> (ø)`
src/HelloWorld.php	`0% <0%> (-100%)`	`1% <0%> (ø)`
src/Layout/Centered.php	`0% <0%> (-100%)`	`1% <0%> (ø)`
src/FormField/Radio.php	`0% <0%> (-100%)`	`16% <0%> (ø)`
src/FormField/Money.php	`0% <0%> (-100%)`	`6% <0%> (ø)`
src/Columns.php	`0% <0%> (-100%)`	`10% <0%> (ø)`
src/TableColumn/Password.php	`0% <0%> (-100%)`	`1% <0%> (ø)`
... and 77 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0b926ca...4eceb65. Read the comment docs.

Add testing

romaninsh · 2019-04-01T20:34:14Z

js/src/components/inline-edit.component.js

+  props: {
+    url: String,
+    initialValue: String,
+    id: Number,


i think ID should be a inside URL as a sticky get. The reasons are:

there may not be ID, we might want to edit something that has no ID, like "status" of a currently logged-in user.

ID is not something that component can change as it wishes.

If we introduce a special way to protect "get" arguments by signing them with limited-time token, this may not apply on "ID" and would require a separate protection.

similarly - form does not have "ID" as a separate get argument.

On other hand - perhaps we can pass OTHER arguments, for example if i have multiple inline fields on a page and i want them all to communicate with the same callback JS. Or ability to reference value of other field when submitting.

Perhaps the reason for ID field is so that we can use this component inside table, which would kinda justify the "ID" field. I'd prefer to have either "args" or nothing.

Id value was not mandatory and thought it could be good to have. I removed it.

romaninsh · 2019-04-01T20:37:44Z

js/src/plugins/ajaxec.plugin.js

@@ -1,4 +1,4 @@
-import atkPlugin from 'plugins/atkPlugin';
+import atkPlugin from './atk.plugin';


why atk is not is plugins ? I'm not saying to move it, just curious.

not sure what you mean here. atk.plugin.js is the base class for all other plugins. ex: class ajaxec extends atkPlugin...

romaninsh · 2019-04-01T20:39:17Z

js/src/services/vue.service.js

+
+let atkComponents = {
+  'atk-inline-edit' : atkInlineEdit,
+  'atk-item-search' : itemSearch,


does this have to be populated for all new components? does not seem very universal.

Vue instance need to have it's component register when you created it. This is one way of doing it and it is ok for component that atk managed. For external component, there would be another way for registering them like the createVue method in Vue service.

at some point if we have a vue create guide, should mention that then ;)

romaninsh · 2019-04-01T20:40:44Z

js/src/services/vue.service.js

+  }
+
+  /**
+   * Created a Vue component and add it to the vues array.


description is unclear. Does that mean that other than those existing 2 components others would need to invoke this method to register themselves? is the name "createAtkVue" miss-leading? maybe not, just raising a question.

Yes. Component defined externally would have to use this method to create the Vue instance.

romaninsh · 2019-04-01T20:43:55Z

js/src/services/vue.service.js

+   * @param event
+   * @param data
+   */
+  emitEvent(event, data = {}) {


unclear what this does and how to use it. No doc or example.

This would allow for component define in seperate Vue instance to be able to talk to each other.
For example, I use this is saasty for updating the add-ons category when using the item-search component of the add-on market page. The button emit an event that tell the item-search component the category needed to include in it's query.
Been said, the mechanism is in place but I do not have proper use case yet to use it.

yes, but i mean - this need documentation.

romaninsh · 2019-04-01T20:49:58Z

src/Component/InlineEdit.php

+     *
+     * @return \atk4\ui\jsToast
+     */
+    public function jsError($message)


is that consistent with $form->error() ?

Update to use field validation in model.

romaninsh · 2019-04-01T20:50:42Z

src/Component/ItemSearch.php

+     */
+    public function getQuery()
+    {
+        return $_GET['_q'] ? $_GET['_q'] : null;


what if multiple search fields present? can they be nested? wouldn't this conflict?

Updated to accept multiple item search. Also doing via __atk_reload argument.

romaninsh · 2019-04-01T20:51:40Z

src/Component/ItemSearch.php

+    public function setModelCondition($m)
+    {
+        $q = $this->getQuery();
+        if ($q && ($_GET['__atk_reload'] ? $_GET['__atk_reload'] : null) === $this->reload->name) {


I think App should have a method for those magic get arguments. Like here: https://github.com/atk4/ui/blob/develop/src/App.php#L264

This is just to make sure we are setting up the model for the proper reload view.

romaninsh · 2019-04-01T20:52:45Z

src/Component/ItemSearch.php

+            $reloadId = $this->reload;
+        }
+
+        $this->js(true, (new jsVueService())->createAtkVue('#'.$this->name,


If VUE is built-in component of ATK, then this line should be simpler:

$this->vue('atk-item-search', ['reload'=>............... ]);

Do you mean adding a vue method inside View class?

romaninsh · 2019-04-01T20:53:13Z

src/jsVueService.php

+     * Emit an event that other component can listen too.
+     * Allow Vue instances to talk to each other.
+     *
+     * This output js: atk.vueService.emitEvent("eventName", {});


no examples given.

No example to show yet. Will come later.

update to Romans comment. fix minor issue.

add vue method comment add demo comment

… into feature/vue-js-refactoring

romaninsh · 2019-04-03T19:45:09Z

To be documented in #683

Updating initial prop variable name so it make more sense. update method and comment accordingly

ibelar · 2019-04-04T13:27:34Z

@romans - just push a quick update.
I changed the initial component variable name from "item" to "initData". Think this will reflect more the purpose of the variable. Prior name "item" was referring to the first item-search component we had in Saasty.

romans · 2019-04-04T13:29:13Z

Guys, stop mentioning me. Thanks! :)

codecov · 2019-04-04T14:49:03Z

Codecov Report

Merging #678 into develop will increase coverage by 0.25%.
The diff coverage is 72.89%.

@@              Coverage Diff              @@
##             develop     #678      +/-   ##
=============================================
+ Coverage      72.69%   72.94%   +0.25%     
- Complexity      1870     1924      +54     
=============================================
  Files            102      105       +3     
  Lines           4421     4558     +137     
=============================================
+ Hits            3214     3325     +111     
- Misses          1207     1233      +26

Impacted Files	Coverage Δ	Complexity Δ
src/View.php	`82.89% <100%> (+0.62%)`	`147 <5> (+5)`	⬆️
src/jsVueService.php	`100% <100%> (ø)`	`4 <4> (?)`
src/Component/InlineEdit.php	`52.54% <52.54%> (ø)`	`30 <30> (?)`
src/Component/ItemSearch.php	`96.42% <96.42%> (ø)`	`11 <11> (?)`
src/FormField/Input.php	`100% <0%> (ø)`	`33% <0%> (+2%)`	⬆️
src/FormField/DropDown.php	`91.17% <0%> (+0.26%)`	`31% <0%> (+1%)`	⬆️
src/FormField/Upload.php	`64.78% <0%> (+6.05%)`	`35% <0%> (+1%)`	⬆️
... and 1 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0b926ca...71b2827. Read the comment docs.

… into feature/vue-js-refactoring

ibelar and others added 4 commits March 29, 2019 14:35

feature/Vue Component

311934c

Add Vue js to Atk with two components.

Apply fixes from StyleCI

7997900

add param declaration

eace232

Merge branch 'feature/vue-js-refactoring' of https://github.com/atk4/ui…

4eceb65

… into feature/vue-js-refactoring

ibelar added the in progress label Mar 29, 2019

ibelar and others added 3 commits April 1, 2019 12:22

add testing

46d4e7c

Add testing

Apply fixes from StyleCI

2d61e1f

fix demo test

cb93314

ibelar added in review and removed in progress labels Apr 1, 2019

romaninsh requested changes Apr 1, 2019

View reviewed changes

ibelar and others added 2 commits April 2, 2019 17:10

fix

eb74041

update to Romans comment. fix minor issue.

Apply fixes from StyleCI

029fed2

ibelar added in progress and removed in review labels Apr 3, 2019

ibelar and others added 5 commits April 3, 2019 14:34

temp commit

a2cf527

final

8c91780

add vue method comment add demo comment

Apply fixes from StyleCI

707b78b

remove log

15dbc76

Merge branch 'feature/vue-js-refactoring' of https://github.com/atk4/ui…

c54e3cf

… into feature/vue-js-refactoring

ibelar added in review and removed in progress labels Apr 3, 2019

ibelar and others added 2 commits April 4, 2019 09:21

enhancement

b3367ab

Updating initial prop variable name so it make more sense. update method and comment accordingly

Apply fixes from StyleCI

f5b936f

adding eventBus sample

7c9ae4b

Apply fixes from StyleCI

e24be24

ibelar added 5 commits April 4, 2019 10:58

update event name

4406fb6

Merge branch 'feature/vue-js-refactoring' of https://github.com/atk4/ui…

1315056

… into feature/vue-js-refactoring

enhancing lister

a2ddcf2

enhancement lister

6130178

typo

71b2827

romaninsh merged commit 5848836 into develop Apr 4, 2019

romaninsh deleted the feature/vue-js-refactoring branch April 4, 2019 17:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature/Ui view handle by Vue.js #678

Feature/Ui view handle by Vue.js #678

ibelar commented Mar 29, 2019

codecov bot commented Mar 29, 2019 •

edited

Loading

codecov bot commented Mar 29, 2019

romaninsh Apr 1, 2019

romaninsh Apr 1, 2019

ibelar Apr 2, 2019

romaninsh Apr 1, 2019

ibelar Apr 2, 2019

romaninsh Apr 3, 2019

romaninsh Apr 1, 2019

ibelar Apr 2, 2019

romaninsh Apr 3, 2019

romaninsh Apr 3, 2019

romaninsh Apr 1, 2019

ibelar Apr 2, 2019

romaninsh Apr 1, 2019

ibelar Apr 2, 2019

romaninsh Apr 3, 2019

romaninsh Apr 1, 2019

ibelar Apr 2, 2019

romaninsh Apr 1, 2019

ibelar Apr 2, 2019 •

edited

Loading

romaninsh Apr 1, 2019

ibelar Apr 2, 2019

romaninsh Apr 1, 2019

ibelar Apr 2, 2019

romaninsh Apr 3, 2019

romaninsh Apr 1, 2019

ibelar Apr 2, 2019

romaninsh commented Apr 3, 2019

ibelar commented Apr 4, 2019

romans commented Apr 4, 2019

codecov bot commented Apr 4, 2019 •

edited

Loading

		@@ -1,4 +1,4 @@
		import atkPlugin from 'plugins/atkPlugin';
		import atkPlugin from './atk.plugin';

Feature/Ui view handle by Vue.js #678

Feature/Ui view handle by Vue.js #678

Conversation

ibelar commented Mar 29, 2019

Implementation of Vue.js with Ui view.

Atkjs File name

Demo in vue-composent.php

codecov bot commented Mar 29, 2019 • edited Loading

Codecov Report

codecov bot commented Mar 29, 2019

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ibelar Apr 2, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

romaninsh commented Apr 3, 2019

ibelar commented Apr 4, 2019

romans commented Apr 4, 2019

codecov bot commented Apr 4, 2019 • edited Loading

Codecov Report

codecov bot commented Mar 29, 2019 •

edited

Loading

ibelar Apr 2, 2019 •

edited

Loading

codecov bot commented Apr 4, 2019 •

edited

Loading