magento2 – Magento 2 How to implement UI Component XML Infinite Scroll data

I am working on One custom Module and loading all the Old orders items on the frontend page by using the UI component form. Currently data is coming in pagination but we have required it to load with infinite scroll.

I have usually worked in when data is coming in phtml then can implement infinite scroll successfully, In the current scenario data is loading with UI component so I don’t have any idea to achieve it.

Please help me to implement it and share your ideas.

Thanks

html – Can’t target last of type in React Styled Component input

Hi using Styled components with React – building a split date input for day/month/year – the only change I want to make is that the width of the year input is double the length of the other two inputs, I’ve tried using :nth last-of-type etc but to no avail, I have a suspicion it is because how I’m rendering the inputs as components? Can anyone advise of a nice workaround?

Code:

const StyledInput = styled.input`

  display: block;

  height: 48px;
  width: 50px;
  margin-right: 12px;
  margin-top: 12px;
`;

  return (
    <StyledInputGroup>
      <label>
      <span>Day</span>
      <StyledInput
        type="text"
        maxLength="2"
        label="Day"
        value={day}
        onChange={(e) => setDay(e.target.value)}
      />
      </label>
      <label>
      <span>Month</span>
      <StyledInput
        type="text"
        maxLength="2"
        label="Month"
        value={month}
        onChange={(e) => setMonth(e.target.value)}
      />
      </label>
      <label>
      <span>Year</span>
      <StyledInput
        type="text"
        maxLength="4"
        value={year}
        onChange={(e) => setYear(e.target.value)}
      />
      </label>
    </StyledInputGroup>
  );

Simplified codepen:
https://jsfiddle.net/4xzn8a5q/11/

upper lower bounds – On an inequality involving the abundancy index of the Eulerian component $p^k$ of an odd perfect number $p^k m^2$

The topic of odd perfect numbers likely needs no introduction.

Denote the classical sum of divisors of the positive integer $x$ by $sigma(x)=sigma_1(x)$, the abundancy index of $x$ by $I(x)=sigma(x)/x$, and the deficiency of $x$ by $D(x)=2x-sigma(x)$.

Euler proved that a hypothetical odd perfect number must take the form
$$n = p^k m^2$$
where the Eulerian component $p^k$ satisfies the constraints $p equiv k equiv 1 pmod 4$ and $gcd(p,m)=1$.

Since $p$ is (the special) prime, we have the formula
$$I(p^k)=frac{sigma(p^k)}{p^k}=frac{p^{k+1} – 1}{p^k (p – 1)}$$
and corresponding (sharp?) upper bound
$$I(p^k)<frac{p^{k+1}}{p^k (p – 1)}=frac{p}{p – 1}.$$
We also have the formula
$$frac{D(p^k)}{p^k}=2-I(p^k),$$
and corresponding (sharp?) upper bound
$$frac{D(p^k)}{p^k}=2-I(p^k) leq 2-frac{p+1}{p}=frac{p-1}{p}.$$

We obtain
$$I(p^k)bigg(2 – I(p^k)bigg) < frac{p}{p-1}cdotfrac{p-1}{p}=1.$$

Here are my questions:

(1) Can one substantially improve on the bound
$$I(p^k)bigg(2 – I(p^k)bigg) < 1?$$

(2) If the answer to Question (1) is YES, my next question is “How?”.

(3) If the answer to Question (1) is NO, can you explain/show why the bound cannot be substantially improved?

MY ATTEMPT

I do am aware of the fact that
$$f(k):=g(p):=I(p^k)bigg(2 – I(p^k)bigg)=frac{sigma(p^k) D(p^k)}{p^{2k}}=frac{(p^{k+1} – 1)(p^{k+1} – 2p^k + 1)}{Bigg(p^k (p – 1)Bigg)^2}$$
and that
$$frac{partial f}{partial k} = -frac{2(p^k – 1)log(p)}{Bigg(p^k (p – 1)Bigg)^2} < 0$$
while
$$frac{partial g}{partial p} = frac{2(p^k – 1)(p^{k+1} – (k+1)p + k)}{p^{2k+1} (p – 1)^3} > 0.$$

This means that
$$g(5) leq g(q) = f(k) leq f(1)$$
since the computations above show that $f(k)$ is decreasing while $g(q)$ is increasing.

In particular, the quantity $f(1)$ in the inequality $f(k) leq f(1)$ simplifies to:
$$f(k) = I(p^k)bigg(2 – I(p^k)bigg) leq f(1) = I(p)bigg(2 – I(p)bigg) = frac{p+1}{p}bigg(frac{2p – (p+1)}{p}bigg) = frac{p^2 – 1}{p^2},$$
which somehow improves on the upper bound of $1$.

javascript – Prevent webform from submitting when clicking button in markup component

I have a very complex webform in a Drupal 7 website I’ve inherited. I have added a markup component which builds a button and added some JS that links this button to trigger a modal window to open. In the modal a block is displayed which contains a view listing some user profiles.

When I visit the webform everything functions normally and I can click the button to open the modal, but when revisiting a draft submission the button triggers the webform to be submitted. I have been looking around for answers and trying lots of different things but nothing seems to be able to stop the button submitting the form. If I change the markup to use a different tag such as a span tag then it doesn’t submit. The markup is exactly the same inside the two forms (initial submission and draft edit) but the behavior is different!

So the question is, does anyone know a way to prevent buttons in markup components from submitting the form they are inside?

The form is absolutely massive so I don’t think it’s useful to post the markup of the whole thing here, but the button looks like this:

<button id="ref-1-modal-trigger" class="ref-modal-trigger button--gold" data-ref-number="1">Button Name</button>

And the JS looks like this:

// Get the button that opens the modal
        var btnRef1 = document.getElementById("ref-1-modal-trigger");
// When the user clicks on the button, open the modal
        btnRef1.onclick = function() {
            refNumber = btnRef1.getAttribute("data-ref-number");
            modalRef1.style.display = "block";
            modalRef1.setAttribute('data-ref-number', refNumber);
        }

The basics of the project:

Thanks in advance!

Are you supposed to perform partial fraction decomposition for a quadratic component that factorizes to rational numbers?

Let’s say you have to spread a cubic equation into partial fraction. What you would normally get is a linear factor and a quadratic or a linear and 2 linears expressions. My question is, for that quadratic factor ,if the solutions are fractions (for example : $ (x + 1/2)(x+2/3) $), then are you supposed to break it down to $ (A)/(x + 1/2) + (B)/(x+2/3) $ ? What i want to know is : if solutions are not whole numbers , do you have to reduce the factor, and why not or why?

magento2 – Magento 2 how to use phtml jquery events on knockouts js component template?

I’m struggling trying to approach the following objective:

Use jquery events on a knockout js component template.

On phtml file I have my knockout js component like this:

<div class="container">
  <div class="notification content-form">
    <?php //if($identificator == "port"):  ?>
      <div id="port-form" data-bind="scope:'port-form'">
      <!-- ko template: getTemplate() --><!-- /ko -->
      <?php if($hasSpouse): ?>
      <!-- ko template: template2 --><!-- /ko -->
      <!-- ko template: template3 --><!-- /ko -->
      <?php endif; ?>
      <!-- ko template: template4 --><!-- /ko -->
        <script type="text/x-magento-init">
        {
            "#port-form": {
                "Magento_Ui/js/core/app": {
                  "components": {
                        "port-form": {
                            "component": "Vendor_Application/js/port-app-form",
                            "quote_data": <?= /* @escapeNotVerified */ $data ?>,
                            "quantities": <?= /* @escapeNotVerified */ $quantities ?>,
                            "states": <?= /* @escapeNotVerified */ $states ?>
                        }
                    }
                }
            }
        }
        </script>
      </div>
  </div>
</div>

As you can see I have 4 different templates, at the bottom of phtml I try the following:

<script>
require(('jquery', 'jquery/ui'), function($){
  $(document).ready( function() {
    $("#beneficiary-button").click(function(){
      alert("clicked!");
    });
  });
});
</script>

When I click the button #beneficiary-button it’s not doing anything, my guess is because I can’t reach knockoutjs templates, so I would need to require my jquery validations on knockoutjs component?

Thanks!

satisfiability – How to prove that $overline{L}$ is a strong connected component of an implication graph

Task:
Let $G$ be an implication graph.
Suppose that a set $L$ of literals is a strong connected component of $G$. Show that the set $overline{L} = {overline{l}space vert space l in L}$ is also a strong connected component of $G$. (Hint: Show by induction that for every path from $l$ to $l′$ a path from $overline{l′}$ to $l$ exists).

My Question:
I know that $overline{L}$ must also be a strong connected component of $G$, but how can I prove it using induction? Or is there another way to prove it?

matrix – How to make first component of eigenvectors on grid real and normalize using Map and Normalize?

I am trying to use the following approach: How get eigenvectors without phase jump?
to apply the same conditions to an array of complex-valued Mathematica eigenvectors.

The matrix solved for is a 3 x 3 matrix. I get my eigenvectors at points on a two-dimensional N x N grid, and so my array of eigenvectors has dimensions N x N x 3 x 3. The documentation for Map allows one to specify levelspec, but so far, I have not been able to successfully impose the conditions of normalization and real-first-component to my eigenvectors. I am still having trouble understanding multi-dimensional arrays and indexing. Ideally, I would have an N x N x 3 x 3 array of eigenvectors whose first component is real, and all eigenvectors normalized. With my limited understanding, I cannot seem to find a way to do this without flattening my array and losing information on the underlying N x N grid.

Almost every time, I end up with an array that is flattened (so, 100x100x3 becomes 100, etc). I tried working with just one eigenvector as in the referenced question, but I really want to preserve the underlying N x N structure, as I want to be able to associate each eigenvector to its respective 2D grid’s coordinates without losing that information by Flattening.

I have attached my code.

(* First generate matrix and get eigenvector array. *)
a = 3.19; 
e1 = 1.046; e2 = 2.104; t0 = -0.184; t1 = 0.401; t2 = 0.507; t11 = 
0.218; t12 = 0.338; t22 = 0.057;

h0 = 2*t0*(Cos(2*((1/2)*kx*a)) + 
      2*Cos(((1/2)*kx*a))*Cos((ky*a*Sqrt(3)/2))) + e1;
h1 = -2*Sqrt(3)*t2*Sin(((1/2)*kx*a))*Sin((ky*a*Sqrt(3)/2)) + 
   2*1 I*t1*(Sin(2*((1/2)*kx*a)) + 
      Sin(((1/2)*kx*a))*Cos((ky*a*Sqrt(3)/2)));
h1star = -2*Sqrt(3)*t2*Sin(((1/2)*kx*a))*Sin((ky*a*Sqrt(3)/2)) - 
   2*1 I*t1*(Sin(2*((1/2)*kx*a)) + 
      Sin(((1/2)*kx*a))*Cos((ky*a*Sqrt(3)/2)));
h2 = 2*t2*(Cos(2*((1/2)*kx*a)) - 
      Cos(((1/2)*kx*a))*Cos((ky*a*Sqrt(3)/2))) + 
   2*Sqrt(3)*1 I*t1*Cos(((1/2)*kx*a))*Sin((ky*a*Sqrt(3)/2));
h2star = 2*
    t2*(Cos(2*((1/2)*kx*a)) - 
      Cos(((1/2)*kx*a))*Cos((ky*a*Sqrt(3)/2))) - 
   2*Sqrt(3)*1 I*t1*Cos(((1/2)*kx*a))*Sin((ky*a*Sqrt(3)/2));
h11 = 2*t11*Cos(2*((1/2)*kx*a)) + (t11 + 3*t22)*Cos(((1/2)*kx*a))*
    Cos((ky*a*Sqrt(3)/2)) + e2;
h22 = 2*t22*Cos(2*((1/2)*kx*a)) + (3*t11 + t22)*Cos(((1/2)*kx*a))*
    Cos((ky*a*Sqrt(3)/2)) + e2;
h12 = Sqrt(3)*(t22 - t11)*Sin(((1/2)*kx*a))*Sin((ky*a*Sqrt(3)/2)) + 
   4*1 I*t12*
    Sin(((1/2)*kx*a))*(Cos(((1/2)*kx*a)) - Cos((ky*a*Sqrt(3)/2)));
h12star = 
  Sqrt(3)*(t22 - t11)*Sin(((1/2)*kx*a))*Sin((ky*a*Sqrt(3)/2)) - 
   4*1 I*t12*
    Sin(((1/2)*kx*a))*(Cos(((1/2)*kx*a)) - Cos((ky*a*Sqrt(3)/2)));
H(kx_, ky_) = {{h0, h1, h2}, {h1star, h11, h12}, {h2star, h12star, 
    h22}};

numsquares = 100;
kxs = N(Subdivide(-0.1, 0.1, numsquares)); kys = 
 N(Subdivide(-0.1, 0.1, numsquares));
evecs = Table(
   Eigenvectors(H(kxs((i)), kys((j)))), {i, 1, numsquares}, {j, 1, 
    numsquares});
Dimensions(wfcs)

(* Try to impose condition in several ways. *)
evecs2 = Map(Normalize(#/#((1))) &, evecs);
Dimensions(evecs2)

evecs2 = Map(Normalize(#/#((1))) &, evecs((All,All,1)));
Dimensions(evecs2)

Any thoughts? Thanks.

dnd 5e – Can Thunder Gauntlets meet the material component requirement of Booming Blade and Green Flame Blade?

There should be no problem with using these spells in combination with an Artificer’s Thunder Gauntlets.

The gauntlets count as weapons for the Artificer, and it should be obvious that a pair of armored gauntlets is worth some amount of money, whatever that amount is, so it ought to meet the requirement even if we don’t know what the actual value is.

The purpose of adding the 1 silver piece cost to the weapon component of booming blade and greenflame blade was to fix a weird exploit related to component pouches.

A component pouch “hold[s] all the material components and other special items you need to cast your spells, except for those components that have a specific cost”. Since booming blade and greenflame blade had “a melee weapon” listed as a material component, but didn’t list a cost, in theory this allowed a caster to just produce any melee weapon out of their component pouch in order to cast the spell, which then I suppose just vanishes back into the ether.

This is absurd and obviously not the intent of the spell, but to fix the exploit, the devs added an explicit cost to the weapon material component equal to the cost of the cheapest weapon in the PHB.

In theory this does exclude weapons that do not have an explicit value, but since that wasn’t the purpose or intent behind the update, it really shouldn’t be a limitation on the players. As long as you have an actual object that counts as a weapon, you should be able to use it to cast these spells.

react.js – Are the tests setup correctly for a single component?

I have finished writing a simple test based on ReactJS’s functionality to render a button and have it update a state variable which is displayed to the user. There are also two other buttons that both retrieve data by executing a fetch request to random-data-api.com (querying a random_coffee at https://random-data-api.com/api/coffee/random_coffee).

My question is: Are these tests setup correctly to reflect what a user using this very basic functionality will do?

Specifically I am wondering about the way the tests are written, eg. by first checking that a ‘pre’ tag is empty (no data returned/fetched yet) and afterwards firing an event to click the button which then returns data and thereafter asserting that data was returned by checking the existence of an ‘id’ field in the ‘pre’ tag. (Data is displayed in the front-end by using {JSON.stringify(data)}

For completeness I will include the component being tested as well as the written tests for the component below:

Component (ElementTest or <ElementTest />):

import React, { useState } from "react";

const ElementTest = () => {
  const (count, setCount) = useState(0);
  const (data, setData) = useState();
  const (data2, setData2) = useState();

  const goFetch = () => {
    fetch("https://random-data-api.com/api/coffee/random_coffee").then((res) =>
      res
        .json()
        .then((jsonData) => {
          // if(jsonData) {
          //     throw Error('ERROR!');
          // }
          //console.log(jsonData);
          setData(jsonData);
        })
        .catch((err) => {
          window.alert(err);
        })
    );
  };

  const goFetch2 = () => {
    fetch("https://random-data-api.com/api/coffee/random_coffee").then((res) =>
      res
        .json()
        .then((jsonData) => {
          // if(jsonData) {
          //     throw Error('ERROR!');
          // }
          //console.log(jsonData);
          setData2(jsonData);
        })
        .catch((err) => {
          window.alert(err);
        })
    );
  };
  return (
    <>
      <p data-testid="counter" id="counter">
        {count}
      </p>
      <button data-testid="btn" onClick={() => setCount(count + 1)}>
        Click me!
      </button>
      <button data-testid="btnFetch" onClick={goFetch}>
        Get data!
      </button>
      <button data-testid="btnFetch2" onClick={goFetch2}>
        Get data! (2)
      </button>
      <pre data-testid="pre">{JSON.stringify(data)}</pre>
      <pre data-testid="pre2">{JSON.stringify(data2)}</pre>
    </>
  );
};

export default ElementTest;

Tests for ElementTest component:

import React from 'react';
import {act, cleanup, fireEvent, render, waitFor} from '@testing-library/react';
import ElementTest from '../ElementTest';

afterEach(cleanup);

it('when component renders value of counter is 0', () => {
    //setup
    const component = render(
        <ElementTest />
    );
    const counter = component.queryByTestId('counter');
    const button = component.queryByTestId('btn');
    //initial check for value
    expect(counter.textContent).toBe('0');
    //act
    act(() => {
        fireEvent.click(button);
    });
    //assert
    waitFor(() => expect(counter.textContent).toBe('1'));

});

it('btnFetch click displays data in <pre>',  () =>
   { 
       //setup
       const component = render(<ElementTest />);
       const pre = component.queryByTestId('pre');
       const loadDataButton = component.queryByTestId('btnFetch');
       //this bothers me, as the test can be passed by hardcoding a value that is
       //expected later
       expect(pre.textContent).toBe('');
       //act
       act(() => {
            fireEvent.click(loadDataButton);   
       });
       //assert
       waitFor(() => expect(pre.textContent).toContain('id'));
});

it('btnFetch2 click displays data in <pre> 2', () => {
    //setup
    const component = render(<ElementTest />);
    const pre2 = component.queryByTestId('pre2');
    const loadDataButton2 = component.queryByTestId('btnFetch2');
    //this await/waitFor below bothers me, is it needed or can it be checked differently?
    //the test can be passed by hardcoding a value that is expected later
    expect(pre2.textContent).toEqual('');
    //act
    act(() => {
        fireEvent.click(loadDataButton2); 
    });

    //assert
  waitFor(() =>  expect(pre2.textContent).toContain('id'));
});

Any advice on if above approach is wrong/badly done/could be done much better would be very helpful!

The approach I took while writing these tests made sense to me, keeping the possible actions an end-user might take in mind and testing only those functionalities seperately, and I even endeavoured to write the test for the second button which fetches data before writing any code to implement it (TDD FTW! :D).