@ryancyq, DOH! Thanks.
@mmukkara - no, I didn't get portlets working. I simply don't have the time to work out what needs to be done and, having got close, I realised there were far too many changes to core files (package.json, angular.json etc) making future upgrades more difficult. Hopefully the upgrade to 5.5 should help but I'm not holding my breath! Let me know if you manage to get the wizard working because it's definitely something I would like to use.
Hi @ismcagdas - My request is to upgrade to Metronic 5.5, the full angular version: [https://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469]) Can you indicate the release this will be targeted for?
@alper. Thanks, problem solved.
Hi @ismcagdas, @jizhongdi - thanks for your input.
I've drawn a blank on this one and it seems very messy with all the changes to angular.json and typings.d.ts and package.json. These are not files i like to mess with because they cause all kinds of problems when trying to merge an upgrade to the latest Zero version (something for which I have set aside one or two days). Here's the steps, in case anyone can point to a quick fix.
I create a new file "angular\src\assets\metronic\src\js\framework\components\general\portlet-tool.js". I copy and paste the contents of the file @ismcagdas directed me to. I add the path for the new file to angular.json for the build and test nodes: "src/assets/metronic/src/js/framework/components/general/portlet-tools.js". I add the line "declare var PortletTools: any; // Related to Metronic" to typings.d.ts. I implement AfterViewInit in my component and call
ngAfterViewInit() {
PortletTools.init();
}
I run yarn and ng serve and have the error message "Uncaught ReferenceError: mPortlet is not defined" which is an error from my "portlet-tool.js" file. I take that file out of angular.json and the functions do not work so I put them back in and follow the instructions pointed out by @jizhongdi (thanks) at: [https://forum.aspnetboilerplate.com/viewtopic.php?f=5&t=11214&hilit=jizhongqi]). From this set of instructions I add "@types/jqueryui": "1.11.28", to my devdependencies in package.json and "node_modules/jqueryui/jquery-ui.js" in angular.json for the build and test nodes. I get the same error message "Uncaught ReferenceError: mPortlet is not defined" which is an error from my "portlet-tool.js" file.
This not a show stopper, I can live with0uot this functionality and use an accordion instead but i like the full screen expansion for the purpose of editing a large document-type data segment of the application. If anyone can point me to quick fix, great. If not, thanks for all the help.
@ismcagdas, thanks for getting back, always a pleasure working with you guys. You make this sound easy but I have a few questions having tried to get this to work. I created a new file "angular\src\assets\metronic\src\js\framework\components\general\portlet-tool.js". I copied and pasted the contents of the file you directed me to. I add the path for the new file toangular.json for the build and test nodes: "src/assets/metronic/src/js/framework/components/general/portlet-tools.js". I rebuild and serve and still nothing. There's a few things I don't understand here:
Let me put this another way. When I copy the code below from the Metronic template why don't toggle, reload, fullscreen and remove work? I am getting no errors in the browser.
<div class="m-portlet m-portlet--accent m-portlet--head-solid-bg m-portlet--head-sm" data-portlet="true" id="m_portlet_tools_1">
<div class="m-portlet__head">
<div class="m-portlet__head-caption">
<div class="m-portlet__head-title">
<span class="m-portlet__head-icon">
<i class="flaticon-placeholder-2"></i>
</span>
<h3 class="m-portlet__head-text">
Action Tools
</h3>
</div>
</div>
<div class="m-portlet__head-tools">
<ul class="m-portlet__nav">
<li class="m-portlet__nav-item">
<a href="" data-portlet-tool="toggle" class="m-portlet__nav-link m-portlet__nav-link--icon">
<i class="la la-angle-down"></i>
</a>
</li>
<li class="m-portlet__nav-item">
<a href="" data-portlet-tool="reload" class="m-portlet__nav-link m-portlet__nav-link--icon">
<i class="la la-refresh"></i>
</a>
</li>
<li class="m-portlet__nav-item">
<a href="" data-portlet-tool="fullscreen" class="m-portlet__nav-link m-portlet__nav-link--icon">
<i class="la la-expand"></i>
</a>
</li>
<li class="m-portlet__nav-item">
<a href="#" data-portlet-tool="remove" class="m-portlet__nav-link m-portlet__nav-link--icon">
<i class="la la-close"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="m-portlet__body">
<div class="m-scrollable" data-scrollbar-shown="true" data-scrollable="true" data-max-height="300" style="overflow:hidden; height: 300px">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is
simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.
<div class="m-separator m-separator--space m-separator--dashed"></div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is
simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum
is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum
is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.
<div class="m-separator m-separator--space m-separator--dashed"></div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is
simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.
</div>
</div>
</div>
I have searched the Metronic forms to no avail, I believe these functions should just work????
Thanks @ismcagdas. I will follow the issue.
aspnet-core, angular; 5.4.1 Everyone seems to suggest that displaying the Hangfire dashboard is easy but I have not yet found a way to do it using the aspnet-core/angular project. I understand that the dashboard requires cookies and all the solutions for adding cookies to authentication seem like overkill. The method outline by Caskia at [https://github.com/aspnetboilerplate/aspnetboilerplate/issues/1971]) seemed to suggest a way forward but the code outlined is deprecated. I do not want to use authentication and the following two lines of code:
app.UseHangfireDashboard("/hangfire");
app.UseHangfireServer();
when placed in the Web.Host project simply redirect me back to the fallback route (<a class="postlink" href="http://localhost:4200/app/notifications">http://localhost:4200/app/notifications</a>) when the route <a class="postlink" href="http://localhost:4200/hangfire">http://localhost:4200/hangfire</a> is entered directly into the browser.
Can anyone help with some sample code please?
@ismcagdas, thanks, makes perfect sense now!