ejs 和 Javascript 中的过滤器

问题描述 投票:0回答:0

所以我一直在尝试制作一个过滤器,根据创建产品的用户过滤产品,有两种可能性角色“管理员”或角色“成员”。

这是控制器

exports.getProducts = async (req, res, next) => {
  let filter = { userId: req.user._id }; // por defecto, solo mostrar productos del usuario autenticado
  const products = await Product.find().populate('userId');

  // si el usuario es admin, no aplicar filtro de usuario
  if (req.user.role === 'admin') {
    filter = {};
  }

  // Busca todos los usuarios
  User.find({})
    .then(users => {
      // Busca los productos según el filtro aplicado
      return Product.find(filter)
        .then(products => {
          res.render('admin/products', {
            prods: products,
            pageTitle: 'Admin Products',
            path: '/admin/products',
            users: users // Pasa los usuarios a la vista
          });
        });
    })
    .catch(err => {
      const error = new Error(err);
      error.httpStatusCode = 500;
      return next(error);
    });
};

这是视图.ejs

<%- include('../includes/head.ejs') %>
<link rel="stylesheet" href="/css/product.css">
<link rel="stylesheet" href="/css/forms.css">
</head>

<body>
    <%- include('../includes/navigation.ejs') %>

    <% if( role === "admin") { %>
    <div class="dropdown">
        <button class="btn">Created by</button>
        <div class="dropdown-content">
            <a href="#" id="me-link">Me</a>
            <a href="#" id="others-link">Others</a>
        </div>
        </div>
    <% } %>

    <main class="<%= role %>">
        <% if (prods.length > 0) { %>
        <div class="grid">
            <% let userIds = []; %>
            <% for (let product of prods) { %>
            <article class="card product-item <%= product.userId.role %>">
                <header class="card__header">
                    <h1 class="product__title">
                        <%= product.title %>
                    </h1>
                </header>
                <div class="card__image">
                    <img src="/<%= product.imageUrl %>" alt="<%= product.title %>">
                </div>
                <div class="card__content">
                    <h2 class="product__price">
                        <%= product.price %> €
                    </h2>
                    <p class="product__description">
                        <%= product.description %>
                    </p>
                </div>
                <div class="card__actions">
                    <a href="/admin/edit-product/<%= product._id %>?edit=true" class="btn">Edit</a>
                    <input type="hidden" value="<%= product._id %>" name="productId">
                    <input type="hidden" value="<%= product.userId %>" name="userId">
                    <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                    <button class="btn" type="button" onclick="deleteProduct(this)">Delete</button>
                </div>
            </article>

             <% userIds.push(product.userId); } %> 
        </div>

        <% let userRolesIds = []; %>
        <% for (let user of users) { %>
            userRolesIds.push({ role: '<%= user.role %>', id: '<%= user._id %>' });
            
                     <% } %>
        <% } else { %>
        <h1>No Products Found!</h1>
        <% } %>
    </main>
    <%- include('../includes/end.ejs') %>
    <script src="/js/admin.js"></script>
    <script>
        const meLink = document.querySelector('#me-link');
        const othersLink = document.querySelector('#others-link');
        const main = document.querySelector('main');
        let role = '';

        meLink.addEventListener('click', (event) => {
            event.preventDefault();
            role = 'admin';
            main.classList.remove('member');
            main.classList.add('admin');
        });

        othersLink.addEventListener('click', (event) => {
            event.preventDefault();
            role = 'member';
            main.classList.remove('admin');
            main.classList.add('member');
        });

    </script>
</body>

最大的问题是,由于明显的原因,产品和用户在不同的集合中,因此在创建产品的 userId 中它们之间的引用。

我希望当我点击“我”按钮时隐藏角色“成员”制作的产品,当我点击“其他”按钮时反之亦然。

javascript node.js ejs
© www.soinside.com 2019 - 2024. All rights reserved.