okami101 / vuetify-admin Goto Github PK

When creating new user, clicking X and than trying to create again, the side form wont open

To Reproduce
Steps to reproduce the behavior:

1. Go to the VA demo
2. Login
3. Click "Users" on the left menu
4. Click "+ Create"
5. On the right side form, at the top of it, there is an "X" button - click it
6. Now, click the "+ Create" button again
   results = nothing happens.

• OS: Windows 10
• Browser with version chrome 92.0.4515.159 (Official Build) (64-bit)

Additional context
I found out about it in my project

hi
thanks for your great framework
I was wondering how i can use a RTL Side nav for my projects
languages such as arabic and persian should be on rtl style
i would be so happy if you help me
i look forward to hear from you
best regards

Hi, I think the format of the respons is correct according to the documentation, but it returns the following error.

respons:
{"message":"Creation Failed",
"errors":{
"name":["Name is required."]
}
}
error
Invalid attempt to iterate non-iterable instance. In order to be iterable, non-array objects must have a Symbol.iterator method.

Where am I making mistake?

Thanks

Describe the bug
fields = [
...,
{
source: "fieldName",
type: "array",
attributes: {
chip: true,
select: false,
color: "yellow",
small: true,
column: true,
itemText: (value) => value.name,
},
},
...
];

Error
TypeError: this.item is not a function
at VueComponent.getItemText (ArrayField.vue?6144:55)
at _vm._t.value (ArrayField.vue?5725:26)
at Proxy.renderSlot (vue.runtime.esm.js?2b0e:2702)
at eval (ArrayField.vue?5725:13)
at Proxy.renderList (vue.runtime.esm.js?2b0e:2646)
at Proxy.render (ArrayField.vue?5725:8)
at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3569)
at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4081)
at Watcher.get (vue.runtime.esm.js?2b0e:4495)
at Watcher.run (vue.runtime.esm.js?2b0e:4570)

Additional context
vuetify-admin/blob/master/packages/admin/src/components/ui/fields/ArrayField.vue on line 55
Need to write this:
return this.itemText(item);

Describe the bug
'Aside' cannot re-open after closed.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://va-demo.okami101.io/admin/users/
2. Click on 'Create' button
3. Aside opened
4. Close aside
5. Click on 'Create' button again
6. Aside not opened

Screenshots
https://streamable.com/fnt627

Desktop (please complete the following information):

• OS: Windows 7
• Browser: Chrome 86

Disclaimer
Be sure to use the last Vue CLI 4.x version before create the issue.

Describe the bug

We had many issues. Like: Edit did not work at all. It fetches data from the API but does not put it in the store.
Also: we tried to add external URL to navigation but it does not work. We do not see code for doing what was described in the documentation.

I wonder if this project is ready for use and if it is actively maintained.

Disclaimer
Be sure to use the last Vue CLI 4.x version before create the issue.

Describe the bug
If necessary precise if it's related to the Admin Library or his Vue CLI plugin.
Write a clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. Windows 10 / Ubuntu 18.04]
• Browser with version [e.g. chrome 80, firefox 77]
• Vue CLI version
• Any NPM package version that can be useful as version of Vuetify, Vue I18n, etc.
• Version of Vtec Admin Library or his Vue CLI plugin if applicable [e.g. 0.2.25]

Additional context
Add any other context about the problem here.

The CHECK_AUTH method in the JWT auth provider returns response.data, when a "user" route is provided in configuration.

/**
  * Get user infos
  */
  if (routes.user) {
        let response = await httpClient.get(routes.user);

        if (response.status < 200 || response.status >= 300) {
          throw new Error(response.statusText);
        }
        return response.data;
  }

But then in store/auth.js it's commiting the "setUser" mutation using response.data as a parameter again:

[CHECK_AUTH]: async ({ commit }) => {
        try {
          let response = await provider[CHECK_AUTH]();
          if (response) {
            commit("setUser", response.data);
          }
          return response.data;
        } catch (e) {
          commit("setUser", null);
        }
      },

This means incoming data from the axios request would have to be response.data.data. I believe that's an error. In store/auth.js it should just commit "setUser" with the parameter response, since it's already containing the user data at this point.

As is I'm getting redirected to the login screen despite logging in successfully (token is set in localStorage) whenever I set a route to get the "user" data from.

Hello,
I got this everytime even I'm able to login and get token.

Uncaught (in promise) Error: Redirected when going from "/login" to "/dashboard" via a navigation guard.
createRouterError @ vue-router.esm.js?8c4f:2065
createNavigationRedirectedError @ vue-router.esm.js?8c4f:2024
eval @ vue-router.esm.js?8c4f:2376
eval @ admin.js?4914:362
.....

below my code:

import {
  LOGIN,
  LOGOUT,
  CHECK_AUTH,
  CHECK_ERROR,
  GET_NAME,
  GET_EMAIL,
  GET_PERMISSIONS,
} from "vuetify-admin/src/providers/auth/actions";

export default (httpClient, params = {}) => {
  params = {
    routes: {
      login: "/login/access-token",
      user: "/users/me",
    },
    storageKey: "token",
    getAuthHeaders(storageKey) {
      return {
        headers: {
          Authorization: `Bearer ${localStorage.getItem(storageKey)}`,
        },
      };
    },
    getCredentials: ({ username, password }) => {
      const form_data = new FormData();
      form_data.append("username", username);
      form_data.append("password", password);
      return form_data;
    },
    getName: (u) => u.username,
    getEmail: (u) => u.email,
    getToken: (u) => u.access_token,
    getPermissions: (u) => {
      if (u.is_superuser == true) {
        return ["admin", "reseller", "user"];
      }
      if (u.is_reseller == true) {
        return ["reseller", "user"];
      }
      return ["user"];
    },
    ...params,
  };

  let {
    routes,
    getCredentials,
    getName,
    getEmail,
    getPermissions,
    storageKey,
    getToken,
    getAuthHeaders,
  } = params;

  return {
    [LOGIN]: async ({ username, password }) => {
      let response = await httpClient.post(
        routes.login,
        getCredentials({ username, password })
      );

      if (response.status < 200 || response.status >= 300) {
        throw new Error(response.statusText);
      }
      localStorage.setItem(storageKey, getToken(response.data));
      //return Promise.resolve();
    },
    [LOGOUT]: async () => {
      localStorage.removeItem(storageKey);
      return Promise.resolve();
    },
    [CHECK_AUTH]: async () => {
      /**
       * Refresh token
       */
      if (routes.refresh) {
        let response = await httpClient.get(
          routes.refresh,
          getAuthHeaders(storageKey)
        );
        localStorage.setItem(storageKey, getToken(response.data));
      }

      /**
       * Get user infos
       */
      
      if (routes.user) {
        let response = await httpClient.get(
          routes.user,
          getAuthHeaders(storageKey)
        );

        if (response.status < 200 || response.status >= 300) {
          throw new Error(response.statusText);
        }

        return response.data;
      }

      return localStorage.getItem(storageKey)
        ? Promise.resolve({
            data: true,
          })
        : Promise.reject();
    },
    [CHECK_ERROR]: ({ status }) => {
      if (status === 401 || status === 403) {
        return Promise.reject();
      }
      return Promise.resolve();
    },
    [GET_NAME]: (user) => getName(user),
    [GET_EMAIL]: (user) => getEmail(user),
    [GET_PERMISSIONS]: (user) => getPermissions(user),
  };
};

Admin.js

const baseURL = process.env.VUE_APP_API_URL || "http://localhost:8001/api/v1";

const configHeaders = {
  "content-type": "application/x-www-form-urlencoded",
  // eslint-disable-next-line prettier/prettier
  "Accept": "application/json"
};

const http = axios.create({
  baseURL,
  headers: configHeaders,
});

/**
 * Init admin
 */
export default new VuetifyAdmin({
  router,
  store,
  i18n,
  title: "Vuetify Admin",
  routes,
  locales: {
    en,
    fr,
  },
  translations: ["en", "fr"],
  authProvider: authProvider(http),
  resources,
  options: {
    dateFormat: "long",
  },
});

Hi is there anybody tried to use vuelidate in Form.vue ?

in Form.vue

i want you use vuelidate instead of form validate, how can i do this ?
I printed console log content of th $this.v but its undefined.

async save(redirect) {
      // if (!this.$refs.form.validate()) {
      //   return;
      // }
      this.$v.$touch();   // Here i use $this.v  but its undefined
      if (!this.$v.$invalid) {
        return;
      }
   }

Full file

<script>
import Resource from "../../../mixins/resource";
import set from "lodash/set";
import useVuelidate from '@vuelidate/core'

/**
 * Form component which handle resource saving by calling `create` or `update` data provider methods.
 * It's the better place for made heavy usage of any VA inputs.
 * Use injection which allowing unique global v-model for all inputs.
 */
export default {
  mixins: [Resource],
  provide() {
    return {
      formState: this.formState,
    };
  },
  setup () {
    return { v$: useVuelidate() }
  },
  props: {},
  data() {
    return {
      originalValue: this.value,
      formState: {
        edit: !!this.id,
        item: this.item,
        model: {},
        saving: false,
        errors: {},
        update: ({ source, value }) => {
          let model = { ...this.formState.model };
          set(model, source, value);

          this.formState.model = model;

          /**
           * Send model update, called after each single input change.
           */
          this.$emit("input", model);
        },
        submit: (redirect) => {
          this.save(redirect);
        },
      },
    };
  },
  watch: {
    item(val) {
      if (!val) {
        this.formState.model = this.originalValue;
      }
      this.formState.item = val;
    },
    value: {
      handler(val) {
        if (val) {
          this.formState.model = val;
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    onSubmit() {
      if (this.disableRedirect) {
        this.save();
        return;
      }
      this.save(this.redirect);
    },
    async save(redirect) {
      // if (!this.$refs.form.validate()) {
      //   return;
      // }
      this.$v.$touch();   // Here i use $this.v  but its undefined
      if (!this.$v.$invalid) {
        return;
      }
      /**
       * Set saving to childs.
       */
      this.formState.saving = true;
      
      try {
        let { data } = this.id
          ? await this.$store.dispatch(`${this.resource}/update`, {
              id: this.id,
              data: this.formState.model,
            })
          : await this.$store.dispatch(`${this.resource}/create`, {
              data: this.formState.model,
            });

        this.formState.errors = {};

        /**
         * Sent after success saving.
         */
        this.$emit("saved");

        switch (redirect) {
          case "list":
            this.$router.push({ name: `${this.resource}_list` });
            break;
          case "create":
            // Reset form in case of same route
            this.formState.item = null;
            this.formState.model = this.originalValue;

            this.$router.push({ name: `${this.resource}_create` });
            break;
          case "show":
            this.$router.push({
              name: `${this.resource}_show`,
              params: { id: data.id },
            });
            break;
          case "edit":
            this.$router.push({
              name: `${this.resource}_edit`,
              params: { id: data.id },
            });
            break;
        }
      } catch (e) {
        if (e.errors) {
          this.formState.errors = e.errors;
        }
      } finally {
        this.formState.saving = false;
      }
    },
  },
};
</script>

Hi folks,
2 Questions, please help.

1. I am testing the tutorial code on my laptop it works like a charm. I have separate data providers urls using GRAPHQL (axios:post) for each resources (page). does not seem working. How to point from which data provider the data should be pulled?

How to specify GRAPHQL or REST

2. my data url and auth url are different

thanks in advance
Aladin

Is your feature request related to a problem? Please describe.
Logging out when using JWT-based autnentication isn't done via a request to the API. Currently the App Bar only supports setting a router link for logout.

Describe the solution you'd like
Logout button should support calling a function or emit an event so you can just implement your own logic.

Additional context
I've solved it by creating a copy of the original component in my source and modifying it, but it won't benefit from any updates that way.

I just installed laravel vuetify admin.

When I create a new user I have the error:

Method Illuminate \ Validation \ Validator :: validateStrongPassword does not exist.

/vendor/laravel/framework/src/Illuminate/Validation/Validator.php
line | 1422

Ditto if I want to change the password of a user already present.

I searched everywhere but found null with "validateStrongPassword" do you have any idea of the problem?

Thank you

Describe the bug
This issue is related to bootstrapping a new project using the Vue CLI.
After answering the prompts in Vue CLI during project setup a TypeError: Cannot read property 'includes' of undefined is returned.

To Reproduce
Steps to reproduce the behavior:

1. nvm use 10.23.0
2. npm install -g @vue/cli
3. vue create my-admin-project --preset okami101/vuetify-admin-preset
4. complete prompts (as per screenshot attached)

Screenshots
https://ibb.co/MDjXNnZ

Desktop (please complete the following information):

• OS: macOS 10.15.7
• Browser: Chrome 86.0.4240.183
• Vue CLI version: 4.5.8
• NPM Packages: Vue 2.6.12

To reproduce

1. Create a list with multiple filters (at least 5-6)
2. Make them multiline
3. Filter components are inside the header and the list

There is a missing height: auto in the v-toolbar at packages/admin/src/components/ui/providers/List.vue:28

Login not working..
login api return Status Code: 302 Found

When using the FetchJSON or FetchHydra (which mostly inherits from it) providers there is no support for file uploads.

These providers use JSON.stringify() to get form data and send the result to the server using HTTP Fetch. This results in request bodies such as { file: {} } when using a va-file-input field in a create/edit form.

In opposition, the Laravel provider uses FormData which does seem to support file uploads.

I am running the API at http://localhost:8081 and the Admin UI at http://localhost:8080. The UI loads well but on accessing the API, I get "Access to XMLHttpRequest at ‘http://localhost:8081' from origin ‘http://localhost:8080/' has been blocked by CORS policy."

How can I avoid the error?

hi,
first of all thank you for this great template.
i add custom data provider and it is working well.
But my records id label is '_id' and default edit/delete action buttons not working with that label
(when i clicked show or edit buttton it is routing to the dashboard)
how can i tell your system to use '_id' instead 'id' ?

Hi Folks,
I want to add a Calendar page for scheduling

Any help would be greatly appreciated

Thanks in anticipation

First of all, thank you for this great Admin Framework and its engineering structure.

I suggest that Internationalization(I18n) be an optional feature in the project. In my opinion, most projects do not require translation and usually is used locally.
I tried to eliminate the I18n dependence in the project, I was somewhat successful, but this dependence is still at the core of the vuetify-admin(in file /node_modules/vuetify-admin/src/admin.js).

Hi all, i want to refresh city dropdown values when the country dropdown selected.
Please look at the example, how can i do this ?

  <va-form :id="id" :item="item">
    <v-row justify="center">
      <v-col sm="4">
        <v-card>
          <v-card-text>
            <va-text-input source="customerShortName" :label="$t('customerShortName')"></va-text-input>
            <va-text-input source="customerName"></va-text-input>
            <va-text-input source="address1"></va-text-input>
            <va-text-input source="address2"></va-text-input>
            <va-text-input source="zipCode"></va-text-input>
            <va-select-input 
              source="country" 
              model="countryId" 
              @change="refreshCities()" 
              reference="countries"
            ></va-select-input>
            <va-select-input 
              source="city" 
              :filter="{ countryId: this.item.countryId }" 
              model="cityId" 
              reference="cities">
            </va-select-input>
            <va-text-input source="taxOffice"></va-text-input>
            <va-text-input source="taxNumber"></va-text-input>
            <va-save-button></va-save-button>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </va-form>
</template>

<script>
export default {
  props: ["id", "item"],
    data() {
      return {

      }
    },
    mounted() {
      // console.error(this.item)
    },
    methods : {
      refreshCities() {
         // WHAT I NEED TO DO IN HERE ?
      },
      test() {
        alert("ok")
      }
    }
};
</script>

I created refreshCities() method but what i need to do ?

Describe the bug
If I use a va-number-input in a resource Create form, the value is sent as a string to the API. Couldn't find anything in the documentation about how to set what data types are sent in the requests to the API.

Additional context
I'm using vuetify-admin to interfact with API Platform. In API Platform integer type properties expect you to send the data as an integer, strings won't work.