cambalab / vue-admin Goto Github PK

This may be a .vue file. Instead of using template syntax, the file exports only the <script></script> part.

So, with this you are in charge of rendering something, with the use of the (createElement) function provided by vue to all component render function.

Read the doc to become familiar with the API.

Example:

• BirthDay, Mail, Name and PhoneNumber are simple vue components exported with <template></template>, <script></script> and <style></style> tags.
• The render function of smartRendererComponent must return a valid createElement object.
• You can use the known properties too: computed, props, etc.

smartRendererComponent.vue

<script>
import { postForm } from '@/api'
import BirthDay from '@/components/Inputs/BirthDay'
import Mail from '@/components/Inputs/Mail'
import Name from '@/components/Inputs/Name'
import PhoneNumber from '@/components/Inputs/PhoneNumber'

import Vue from 'vue'
import VeeValidate, { Validator } from 'vee-validate'
import es from 'vee-validate/dist/locale/es'

// Add locale helper.
Validator.addLocale(es)
Vue.use(VeeValidate, {
  locale: 'es',
  inject: false
})

export default {
  $validates: true,
  render: function (createElement) {
    let self = this
    let csrfTokenInput = createElement(
      'input',
      {
        attrs: {
          type: 'hidden',
          value: self.csrfToken
        }
      }
    )

    let childInputs = this.options.map(function (element) {
      let toCreateElement = ''

      switch (element.formField.name.toUpperCase()) {
        case 'NOMBRE':
          toCreateElement = Name
          break
        case 'CUMPLEANOS':
          toCreateElement = BirthDay
          break
        case 'MAIL':
          toCreateElement = Mail
          break
        case 'WHATSAPP':
          toCreateElement = PhoneNumber
          break
      }

      return createElement(toCreateElement, {
        props: {
          mysqlType: element.formField.mysql_type,
          inputName: element.formField.name.toUpperCase(),
          placeholder: element.formField.html_placeholder,
          validationRules: element.placeFormFieldValidations,
          formFieldId: element.formField.id
        }
      })
    })

    let vForm = createElement('form', {
      on: {
        submit: function (event) {
          event.preventDefault()

          self.$validator.validateAll().then(result => {
            let data = {
              _csrf: self.csrfToken,
              connectorId: self.$store.state.customer.id,
              responses: []
            }
            data.responses = self.$children.map(function (currentValue) {
              return {
                mysqlType: currentValue.mysqlType,
                formFieldId: currentValue.formFieldId,
                data: currentValue.formData
              }
            })
            postForm(self.$store.state.place.slug, data)
          })
        }
      }
    }, [
      csrfTokenInput,
      childInputs,
      createElement('button', {
        attrs: {
          class: 'button disabled',
          disabled: !self.isSubmitDisabled,
          type: 'submit',
          variant: 'success'
        },
        domProps: {
          innerHTML: 'INGRESAR'
        }
      })
    ]
  )

    return createElement('div', {
      'class': {
        'text-center': true
      }
    }, [vForm])
  },
  computed: {
    isSubmitDisabled () {
      let fields = Object.values(this.fields)

      return fields.every(function (element) {
        return element.valid
      })
    }
  },
  props: {
    csrfToken: {
      type: String,
      required: true
    },
    options: {
      type: Array,
      required: true
    }
  }
}
</script>

The current situation is:

• Resource accepts a list of objects that declare different attributes of a resource (entity in a db)
• Resource accepts a custom Vue component and gets a few vue-admin functions injected to perform requests to an API

Our goal:

• A user should be able to declare a Resource by using a Vue component
• Resource will be wrapped by a functional component that must provide valid data (props) to the Resource component.
• VueAdmin must also expose a new functional component for every action (List, Create, Show, Edit)
• In a first instance this component will work as a wrapper of the original Action component (List, Create, Show, Edit). VueAdmin must manipulate and reorder props as necessary to bring valid data to the Action component.
• A user should declare UI components such as TextField, TextInput, etc as children of one of the Action components. This component can be exposed or can be native html elements such as p, div, input, etc (To review)

Remove JUAN, etc on the menu.

#34 inspired me to experiment with functional rendering and jsx syntax in Vue. I took into consideration a few aspects while working on it:

• it is possible to inject props and functionality in custom components passed to Resource using JSX syntax, though it's not very popular among Vue developers. We would also be forcing them (users) to take a strange path when building their own components for a view in JSX syntax, since most Vue UI frameworks use the tag to layout their interfaces.
• Similar to the previous consideration, we could build custom components, such as buttons, textfields, forms, pagination tables, that would behave as wrappers and trigger different actions (a submit button would store information in database, for example.). We will have to somehow interact between the form elements and keep track of the inputted information before a database call is requested.
• Since it's possible to pass a component by props, I thought a simple set of a few functions can be injected into a user component, so that any form input and button in any view behave the way we expect. We let users build their own interfaces and we provide the event listener and submitting functions for their elements. We still take care of keeping track of their form data and do the database calls when requested.

The third idea led me to implement a simple API that could be injected to any user component that is passed to Resource as a prop.

Right now it is including not minified version.

Check here: https://cli.vuejs.org/guide/build-targets.html#library

Depends on #18

Updates:

• Remove private repository attribute
• Add project description (similar to github homepage)
• add author: Cambá [email protected]
• Licence: GPL (same as master)
• update version to 0.0.0
• add keywords (similar to topics #18)
• add repository

 "repository": {
    "type": "git",
    "url": "git+https://github.com/josx/ra-data-feathers.git"
  }

• add bugs

 "bugs": {
    "url": "https://github.com/Cambalab/vue-admin/issues"
  },
  "homepage": "https://github.com/Cambalab/vue-admin#readme",

• add publish commands

Is your feature request related to a problem? Please describe.
It would be nice to have a gif showing some of the vue-admin features. The gif could include:

• Sign in process
• A tour through a resource views: how a resource is created, how it's edited, etc.

It could be centered placed right after the Introduction brief in the README.md file.

Describe the solution you'd like
Any other ideas are welcome.

Tag with v0.0.1
Create Release
PR to master

We decided to use vuex-crud for store management. Apaprently the urls are kind of fixed at the moment, for each crud modul.

• Verify if we can dynamically use the urls on rest calls
• Use vuex crud along with a data provider cilent
• Decide if we want to colaborate with vuex-crud to implement a client feature

Right now We are importing all possible Components to use them as props.
If the number of components increase we need to think about async importing only components we are using in that moment.

Example: https://medium.com/@codetheorist/using-vuejs-computed-properties-for-dynamic-module-imports-2046743afcaf

It would be nice to use the Cambá banner

At least We need to write:

• How to install, configure and run (client)
• How to install and run test server
• How to use Admin and resources components
• How to send props and which props are available

Currently, actions are displayed by default on the last 2 columns. We should let a user use their custom actions if provided.

We need to define a structure, how are they going to be provided to Resource. Any ideas?

Depends on #19

We need to document the attributes that are passed to the Resource component.

Describe the bug
When a user changes from a resource to another (from articles to magazines, for example), this.name is not updated so that if a user first went to articles List and then navigates to magazines List, then this.name for the magazines Resource is 'articles'.

To Reproduce
Steps to reproduce the behavior:

• More than 1 resource is needed, it can be tested using the #40 branch

1. Go to the drawer
2. Click on articles
3. Open dev tools and dive to a div with name 'articles-list-container'
4. Go to the drawer
5. Click on magazines

Expected behavior
The div name attribute has the same value, it should have changed to 'magazines-list-container'. Use resourceName as a computed property in List.

Is your feature request related to a problem? Please describe.
There're no unit tests for the DeleteButton component. It would be nice to implement a simple unit test for that.

Describe the solution you'd like
The test should include:

• the component initialises with default props
• the component initialises with given props (those that are not provided by default)
• onDelete method: the store dispatch method should be called once when clicked
• onDelete method: the router push method should be called once when clicked

Take the [date input spec] as example.

In order to perform authentication, we'll need the Admin component to accept an auth provider that can handle login requests from a user

Users should be able to declare an array of permissions as a prop of a Resource view. The should also be able to declare a view as private or public, meaning an unauthenticated user should or should not have the rights to visit that view.

An approach would be something like:

<Resource name="articles" ... >
  <View slot="create" :component="CreateArticles" :permissions="['admin', 'developer']" />
  <View slot="show" :component="ShowArticles" :public="true" />
  <View slot="list" :component="ListArticles" />
</Resource>

...where:

• CreateArticles is not public and restricted to admin and developer permissions only
• ShowArticles is a public, so that it can be accessed by unauthorized users
• ListArticles is not public, but not restricted to specific permissions, meaning any unauthorized user has access.

Right We are using the components thru including components directly

• https://github.com/Cambalab/vue-admin/blob/develop/src/App.vue#L16

But We need to use it from npm, at first at least installing locally (without uploading to npm registry).

Here is the entry point and We need to expose all components:

• https://github.com/Cambalab/vue-admin/blob/develop/src/index.js

To use it from user point of view we need to:

• npm installl vue-admin
• import { Admin, Resource } from VueAdmin;

We're currently using defaults modules to get the initial values and validations for the Resource component and the List, Show, Create, Edit views.

We probably want to have a generalized defaults module that can return a defaults object given a string: eg: Resource

The best approach would be to take advantage of vuex-crud callbacks, for example:

Full vuex-crud callbacks docs here

  // Callback for POST start
  onCreateStart: () => {
    // Updates the store with an 'isLoading' boolean, attribute
  },
  // Callback for POST success
  onCreateSuccess: () => {
    // Updates the store with an isLoading: false, attribute
    // Here we can also add a success dialog in the future, with an UNDO feature
  },
  // Callback for POST erro
  onCreateError: () => {
    // Updates the store with an isLoading: false, attribute
    // Here we can also add an error dialog in the future
  }

Vuex-crud automatically commits the START, SUCCESS or ERROR state to the store. Then the component (Create in this case) should look up the updated store state with the getter methods and render or hide a spinner depending on the isLoading boolean state.

This issue is an epic to smaller issues for the list, create and edit components.

Searching for different options, I think the best choice would be to use prettier because it's less bureaucratic than airbnb. We just want clean and pretty indented/formatted code to enforce a style among contributors.

The vue-cli installs all the required dependencies to get it running. The bad thing is that it automatically fixes all code with it's default configuration (which is not what we're aiming for: we don't want double quotes, for example).

Prettier needs a custom .prettierrc.json file. Looking at the current code, the following rules should not harm the current code so much, plus we intent not to use semicolons and avoid double quotes in plain javascript.

taken from prettier configuration. There are other rules that could be useful.

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

In order to instantiate prettier we'll have to configure an .eslintrc.json file. I found this one from an old project that could do the trick.

Then I've had a little thought about the fix option that runs by default in the vue-cli-service at npm run lint. I think it would be safer if we disable the auto fix option for that service. We'll be including a pre-commit hook feature to prevent pushing dirty code. That way we can use the npm run lint script just as a code state checker.

We're currently handling custom components the following way:

1. A custom component is passed to Resource by a user
2. Resource injects a va props into this component with crud functionality
3. The user accesses it's props to use the crud functions, like this.va.fetchList

Gabi Buenou (aka @glmaljkovich) suggested mixins to inject this functionality. This would not only provide a facility to the user (usage be like: $va.fetchList), but would also help decoupling the binding utils from the resource utils: more information in this WIP

We have to explicitly assign a redirect prop to App so that we don't have to rely on Resource's default behavior.

The best and simplest choice would be to use the github-changelog-generator.

• We need to add a script in the package.json that runs the changelog, recreates the changelog.md file and commits the change
• That script should also be added to the npm publish command, so that it gets updated on every release.

I think we need to replace prepublish with prepare in package.json

npm/npm#3055 (comment)