UnitType create view

[jarlah]

Issue #3

[pingwiniasty]

Maybe we should look at vee-validate. It has error messages for each validation rule. Creating rules are simple, just in component/input. I'm using it in my projects

[jarlah]

okey .. do you also suggest using Vuetify? I feel its a little tiny bit annoying defining forms in bootstrap 4. have you tried Vuetify?

[pingwiniasty]

Yes, I'm using vuetify, it has very friendy api for all components. But sometimes we writes some hacks, to handle our needs

[jarlah]

I can try to use Vuetify and Vee-Validate, but lets keep our sanity and try to avoid the most hacks :)

[pingwiniasty]

We are hacking it by creating new components, using original with some addons ;) No any hack of original source

[jarlah]

👍 in practice, the tests i have made, should pass after i make the switch. Tests cannot be underestimated! 💃

[jarlah]

oh and btw.. we have a global store.. but i am not using a global store for creating stuff. I really hate redux and how almost everyone uses it for everything without even thinking . so .. axios in a method on the component .. is a pragmatic and conscious choice by me ;)

[jarlah]

My God that is a lot of extra code just to validate in vuetify. Are you sure you want to maintain all this vee provider stuff? yikes. I am going to make a version with just vuetify and simple validations ... and then you can explain to me how we can refactor it together with vee-validate...

[jarlah]

Nope. giving up for now. This was too difficult. There is no web app without tests, and therefore no vuetify until i have resolved how to test a component using vuetify.

[jarlah]

@pingwiniasty

you know what, what I really liked about Vue is the fact that you are allowed to mock up and express a html gui fairly quickly. I have worked with angular, and I know too well how far it can go with custom directives. I feel its a bit problematic that we introduce providers and observers and custom directives ONLY to validate a form, I mean .. come on :)

Bootstrap html markup is pretty standard stuff. Its easy to understand and easy to use. Especially with Bootstrap 4. Trying to make something inherently simple, overly complex by adding a material ui library like vuetify, will only lead to problems.

What I am saying is that if you really want to create an awesome app, don't try to pull in library after library that seem to be popular. Think about what you want to make and how easy it will be to extend and modify. And think tests!

I would suggest that we go for bootstrap 4 integration in vue and vuelidate, for now, and then you can give me a working example of something else, like for example rewriting this view, or creating another one. Problem is of course, having two ui frameworks compete won't work, so you will have to remove the import statements for bootstrap css.

[pingwiniasty]

Providing custom directives, are normal for vue. All things can be passed by props. For me, dirty are this code
https://github.com/freeacs/freeacs-web/pull/4/files#diff-36a9d47c0f4186e19afabbb3a259695dR13

Writing 6 or more additional lines, to show errors, which would be the same in whole project
Vuetify has components, which handling error in right way, with the same layout in any component.
IMO bootstrap-vue are currently poor documented, look at this https://bootstrap-vue.js.org/docs/components/form#helper-components

And components are simple wrappers, sometimes changing tags only:

<label for="text-password">Password</label>
    <b-input type="password" id="text-password" aria-describedby="password-help-block"></b-input>
    <b-form-text id="password-help-block">
      Your password must be 8-20 characters long, contain letters and numbers, and must not
      contain spaces, special characters, or emoji.
    </b-form-text>

three tags, for one thing.

Maybe we can look at other css frameworks, like lightweight Bulma
https://buefy.org/

[jarlah]

If we are going to do use vuetify we need tests anyhow. I will make one more try at it. But If i dont manage to port it vuetify and get the tests to pass. You would need to step in and show me how its done :)

[jarlah]

Oh and btw. The point about
three or four lines versus one or two. Of course you create components out of reusable parts. I think developers should think more about functionality and tests, than abstraction. But thats just old man ranting maybe

[jarlah]

<noob-alert>Ah dont mind me ranting. I have never used bootstrap-vue. It has components. I was just a bit locked into a thought that it only provides the css. I will try bootstrap-vue first then vuetify. </noob-alert>

[pingwiniasty]

Currently in my project, I'm using other test suite, based on Selenium and all test are written in php. Testing in this way, are so hard and I understand you.

I'm throwing suggestions. Yesterday I prepared my PC to maintain freeacs, I'm bought new NVME disk, to install Linux as normal OS. Today I will try to write some code with other concepts...

[jarlah]

Oh my. I understand if you think its difficult if you are using php and selenium! The most low hanging and simple tests should be done in frontend project.

Ok then. Ill try to continue on and elaborate on bootstrap-vue and you try other concept. Deal?

[pingwiniasty]

Deal :D

[jarlah]

i have done my part. I changed it to using tags. I actually saved a couple of lines, because bootstrap vue components automatically adds divs and classes etc. In addition i used an example from bootstrap-vue here https://bootstrap-vue.js.org/docs/reference/validation/#vuelidate-example ... i didnt try the vee-validate version but i felt it didn't speak to me right now .. maybe ill try it tomorrow.

[jarlah]

I tried vee-validate together with bootstrap-vue but there is a bug
bootstrap-vue/bootstrap-vue#3099
so i'll just leave it for now

[jarlah]

@pingwiniasty I have tried to make the tests pass, but I am not able to assert the error message displayed in the form that I see when testing the app live. I would like to get this working. Right now I can only assert that no error is present on the form after submitting, or that an error is present.

[jarlah]

Can you take a look? I have merged in develop into this branch, so its up to date. and tests pass. But I would like to assert the error messages.

[pingwiniasty]

Sure, give me some time :)

[pingwiniasty]

I tested everything what I can. There must be some bug, when displaying errors in test case...
I read about some troubles with vue-test-utils > 1.0.0-beta.12, we are using 1.0.0-beta.29

Currently, you can use wrapper.vm.errors.first('fieldname') to workaround. In computed method errors are visible :(

[jarlah]

Ok :) I am overriding. Merging now. We can figure this out later. To cut to the case right away, i am not too much awed by VueJS yet. But we have met a middleground on typescript in Vue. So for me its like emyea. It works.