341 comments found.
I update my piaf, and know authentication change!, where i will add my old code of firebase. can help me with new firebase code format
const db = firebase.firestore(); db.collection(“users”).doc(firebase.auth().currentUser.uid).get().then( doc => { const currentUser= { id: doc.data().id, title: doc.data().title, img: doc.data().img, date: doc.data().date.toDate(), }
const item = { uid: firebase.auth().currentUser.uid, ...currentUser }
localStorage.setItem('user', JSON.stringify(item))
commit('setUser', { uid: firebase.auth().currentUser.uid, ...currentUser })}) err => { localStorage.removeItem(‘user’) commit(‘setError’, err.message)
Hi,
We have included a major change with the Firebase library in the new update so the problems you might having is mostly related to new Firebase version.
You may either use the old library and implementation from earlier template version or adapt your code to the new one. Unfortunately, I don’t think there is anything we can help you with it.
All the best.
Hey,
First of all, great job with the template. Definiately one of the most comprehensive, robust, and modular templates that I’ve come across to date.
I have two questions:
(1) How exactly do I use the Vue Context Menu? I tried to imitate the Survey page example, but I don’t seem to be getting anything. (I’m using ‘piaf-vue-start’ as template, so includes are OK).
(2) Out of curiosity – is there a plan to upgrade from Vue 2 to Vue 3 in the near future?
Look forward to hearing from you.
Kind regards,
Tej
Hi,
Thank you for your kind words, it’s nice to hear that you like the template.
As for the question,
You may find another example usage in src/containers/page/ListPageListing.vue file. I don’t think there is any hidden trick kind of thing. Here is a simple usage from the repo: https://github.com/heynext/v-contextmenu/blob/master/examples/Simple.vue
I believe we will continue to develop the template for the future Vue releases. That being said, I think it will take quite some time for us to catch up the new versions since we need to wait for libraries such as bootstrap-vue to update.
All the best.
...
{
path: "/task",
component: () => import("./views/task"),
redirect: "/task/mytask",
beforeEnter: AuthRequired,
children: [
{
path: "mytask",
name: "task.mytask",
component: () =>
import("./views/task/task"),
},
{
path: "task-detail/:id",
name: "task.detail",
component: () =>
import("./views/task/task-show"),
},
{
path: "delegated",
name: "task.delegated",
component: () =>
import("./views/task/delegated"),
}
]
},
...
Focus on path: “task-detail/:id”
but then an error appears https://i.ibb.co/BnChVss/error-piaf.png
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'toLowerCase' of undefined"
found in
---> <Sidebar> at src/containers/navs/Sidebar.vue
<AppLayout> at src/layouts/AppLayout.vue
<Index> at src/views/task/task-show/index.vue
<Index> at src/views/task/index.vue
<App> at src/App.vue
<Root>
...
vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'toLowerCase' of undefined
at VueComponent.selectMenu (Sidebar.vue?2ed7:104)
at VueComponent.mounted (Sidebar.vue?2ed7:83)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
at callHook (vue.runtime.esm.js?2b0e:4219)
at Object.insert (vue.runtime.esm.js?2b0e:3139)
at invokeInsertHook (vue.runtime.esm.js?2b0e:6346)
at VueComponent.patch [as __patch__] (vue.runtime.esm.js?2b0e:6565)
at VueComponent.Vue._update (vue.runtime.esm.js?2b0e:3948)
at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4066)
at Watcher.get (vue.runtime.esm.js?2b0e:4479)
I know the problem is in line 104 of Sidebar.vue,
this.selectedParentMenu = currentParentUrl.toLowerCase();
but I don’t know how to solve it.
Please helpme with this and Thanks
I double-checked my code and found a typo on the page that called the router. My code is now running well. My mistake. Please leave or delete this comment. I’m really sorry. Really like the xxs and dark mode!
It looks like everything is good and it’s nice to hear that you like the template.
Cheers.
Hi Do you have any plans to integrate a timepicker? The “vuejs-datepicker” you have used has no time support (Right?)
IMO The most obvious case is “vue2-datepicker” which has time support
Hi,
Currently there is no timepicker implemented in the project. We have not included it since we believe it is quite simple to provide two dropdowns for hour and minute and it is a very common usage.
We will probably implement it for our templates in a future update but currently working on other parts of it.
All the best.
Hi, may i know how can i integrate the template into Laravel framework? Or is there any references that you can share to us?
Thank you. Your help is much appreciated.
Thanks.
Hi,
Unfortunately we can not provide a decent guidence for Laravel since nobody in our team has any experience with it.
Cheers.
Hi I authenticate users with JWT and I need to create different menus per user’s group. Is that possible with your template?
Hi,
Unfortunately there is no implementation for JWT and user roles currently. We will add it in our future update but can’t provide an ETA.
Cheers.
hi, where is the firebase initialized for login? I can’t find where they added firebase.initializeApp (firebaseConfig);
I am going to use firebase for my database, and I want to know if I have to initialize the firebase again or it is already initialized somewhere.
And how do I call him?
Hi,
It’s initialized in “src/main.js” with below lines.
firebase.initializeApp(firebaseConfig);
Credentials are located at “src/constants/config.js”
Cheers.
Hi,
You may alter the render of the menu in “src/containers/navs/Sidebar.vue” file by changing below lines.
<i :class="item.icon" />
You may include your png paths in “src/constants/menu.js” and it will be available in Sidebar.vue.
Cheers.
Hi, if I reload my browser, sometimes the chart color vanishes, just becomes grey-ish. Another 1-2 reload brings the color back. Any fix to that?
Hi,
Do you also experience the problem at our preview page here: https://piaf-vue.coloredstrategies.com/
Do you have any changes that might lead to the problem?
I’m testing with the setup you have provided with the template itself, doing nothing crazy, using ThemeColor function, chart.js data etc, just using chart in other Vue files. With browser refresh sometime color works, sometime it does not
With the current information at hand, I can’t provide a certain fix. We can’t reproduce the error. It may be related to a problem within the template, a broswer issue, difference between your and our environments or your implementation.
If you may check below scenarios to narrow the problem down, it would be quite helpful.
1. Please check the online demo to see if the error occurs. If these pages have the same error, we should try to reproduce with your browser and os.
https://piaf-vue.coloredstrategies.com/app/ui/components/charts
https://piaf-vue.coloredstrategies.com/app/dashboards/analytics
2. If above step works, please check the same pages on your dev environment. If error occurs on your local, might be related to node, npm or os.
http://localhost:8080/app/ui/components/charts
http://localhost:8080/app/dashboards/analytics
3. If all of them works and you only experience the error with your new implementation we should look into your code.
We have developed the app on a Windows machine with a LTS Node version(Current one is 12.6.2)
Keep us posted please.
Instead of using firebase for the login, do you have an implementation of nodejs + mongodb implementation of the user.js file? do you have any documentation that would guide us how to customize the login / authentication or actions section of the src/store/modules/user.js?
Instead of using firebase for the login, do you have an implementation of nodejs + mongodb implementation of the user.js file? do you have any documentation that would guide us how to customize the login / authentication or actions section of the src/store/modules/user.js?
Hi,
We don’t have any alternative implementation to Firebase but auth pages are connected to a store with inputs from the views. This store currently calls Firebase methods but you may change this file to call your own api methods.
Here is a small guide for the file contents:https://piaf-vue-docs.coloredstrategies.com/docs/guides/changing-auth-api
Action names in src/store/module/user.js file is self explanatory.
All the best.
Hi , I like the theme so much, May I know you can customize it to my project, because I’m not a developer and I want you to do that for me?
Hi,
It’s nice to hear that you like the template, we appreciate it.
As for the customization, unfortunately we don’t accept any kind of freelance jobs.
All the best.
You have a great template, but the menu is just awful for UX/UI. Is it possible to make only the Subhidden part visible?
Hi,
Thank you for the kind words, we appreciate it.
As for your question, unfortunately there is not an option to hide main part of the menu. There is an option to hide sub part for all resolutions except for the mobile. https://piaf-vue.coloredstrategies.com/app/menu/types
Thanks for the quick response. Your jQuery version has https://dore-jquery.coloredstrategies.com/Menu.Mainhidden.html
Hi,
You are right, I have forgotten about that. I think we have implemented it for jQuery version but since there was no request for it, we did not continue with other versions.
The menu is one of the a few things that makes our templates a bit unique but I agree with you about ux. It may not be suitable for some projects.
Cheers.
> but I agree with you about ux. It may not be suitable for some projects.
Yes, too many clicks…
May be you can add Mainhidden functionality to the version with Vue?
I am sorry but I don’t think we can focus on it soon. We are currently working on React updates and it will take a while.
Hi, I just noticed that I can’t group a button with v-select tag, gives weird width issue. Also, the v-select height is little bit more than all other inputs. Any fix to that? Another thing is, with the new calendar component, can we alight the popover to right or left like previous v-Calendar?
Hi,
I don’t think new calendar has built-in aligment but it seems like adding a container class works.
Vue
<datepicker
:calendar-class='"align-right"'
...
Css to add src/assets/css/sass/_piaf.style.scss
.align-right.vdp-datepicker__calendar {
right: 0;
}
Adding below lines to src/assets/css/sass/_piaf.style.scss file should solve the unequal height problem at least for default input layout.
.form-group:not(.has-top-label):not(.has-float-label) .v-select .vs__selected-options {
height: 40px;
}
.form-control {
height: 42px;
}
As for the combining v-select and a button, I don’t think there is an easy way to do it. It’s an external plugin and has absolute positioning and width&height settings. You may check out input groups page to see implementation with a standard select: http://localhost:8080/app/ui/components/input-groups
All the best.
I really like the template, thanks! I would like to use it with a new project using TypeScript. How much work would it be to make a TypeScript conversion? Do you see any reason why it would not be possible?
Hi,
It’s nice to hear that you like the template, we really appreciate it.
As for your question, we have not tried typescript with Vue and don’t know the possible pitfalls. We used typescript for Angular version but I really don’t think we have enough experince to provide a decent answer for this.
All the best.
Can I use vuetify in this template?
Hi,
It should be possible to use Vuetify but unfortunately we don’t have any experience with it so we choosed Bootstrap. Possible downsides that I can think of are file size increase and mismatched styles.
Regards.
Hi , I like the theme so much, May I know if there a documentation included how to import this project on VUE CLI 3 Ui? im using it for the first time .Before im using HTML + VUeJS. Im struggling with commandlines. Thanks
Hi,
It’s nice to hear that you like the template, we appreciate it.
As for your question, the project uses Vue CLI but unfortunately we don’t have any experience with UI to provide any guidence for it.
All the best.
I really like your template but I cant understand that why dont you write any descriptive line in your codes.I thought its first rule in programming
Hi,
We have tried to chose self explanatory names for methods and variables instead of comments. If you have any specific code block that needs explanation please let us know so we try our best to help.
All the best.
Hi, I donwloaded this admin template, but unable to use as struggling with the documentaiton. Do you have a user manual, or guided tutorial how to use the template.
Thanks,
Hi,
We have a documentation: https://piaf-vue-docs.coloredstrategies.com/
Here is how to get started part: https://piaf-vue-docs.coloredstrategies.com/docs/gettingstarted/development
You may also find guides about common concepts here: https://piaf-vue-docs.coloredstrategies.com/docs/guide-list
Let us know if you have any questions.
Cheers.
For the BestSellers.vue file under “src/containers/dashoards” it uses the vuetable-2 component which i am not very familiar with. I am trying to setup a striped / zebra alternate rows on the table but can’t seem to do it for vuetable. Likewise i would like to allow color change of the row on hover. Is there a way to setup the class for the vuetable?
Nevermind i figured it out:
<vuetable
:css=”{ tableClass: ‘table table-bordered table-hover table-striped’, loadingClass: ‘Please wait…’ }”
ref=”vuetable” . . . >
. . . </vuetable>
Its not showing the borders on the table details
Hi,
Unfortunately vuetable plugin is not fully styled with bootstrap classes so some of them might be overriden by plugin’s styles. Adding below lines to _piaf.style.scss file should solve the border issue.
.table-bordered, .table-bordered td, .table-bordered th {
border: 1px solid $separator-color-light !important;
}
