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.
aspnet-core, angular - 5.4.1 I have implemented subdomain control which is working well (subdomain.projectname.com...) but when I go to register a new tenant through the public facing register-new-tenant page (the visitor selects the "free trial" on the editions page) recaptcha is informing me:
ERROR for site owner:
Invalid domain for site key
What do I have to do to get recaptcha working again?
@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????
aspnet-core, angular 5.4.1 I am trying to use Metronic's portlet tools. I believe that to get the expand/collapse close etc functionality to work I need to include the portlet.js library. How do i go about including this for an individual page in Zero? If i can't do it for an individual page how do i import across the board?
aspnet-core, angular, 5.4.1 In the angular project OrganizationTreeComponent contains a JQuery tree component. Is this a plugin and, if so, is there any documentation beyond the 300 lines of code in the typescript file?
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!
aspnet-core, angular: 5.4.1 Can anyone tell me what the purpose of the following lines are? [https://github.com/aspnetzero/aspnet-zero-core/blob/dev/angular/src/app/admin/audit-logs/audit-log-detail-modal.component.html#L55-L61]) In the same modal can anyone tell me why we have (ngSubmit)="save()" on the form declaration at line 5 when there is no corresponding method in the component and the fact that this is a display only modal? The value AuditLogImpersonatedOperationInfo is not populated anywhere, can anyone tell me what's meant to be there?