Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/fredy-rizo/ecommerce-delivery-frontend/llms.txt

Use this file to discover all available pages before exploring further.

The members page gives admin staff a single place to inspect every registered user, review their profile details, and update their access role. Members load through an infinite-scroll list of cards. Each card shows the member’s avatar, contact details, identity information, current role, and account status. A role selector on each card lets an admin upgrade or downgrade that member’s access with one click.

​
Route

/miembros renders pages/Members/MembersPage.vue. The page requires admin role (2) — validateUser({ rol: 2 }) is called before every API request.
Only users with role 2 (Admin) can access this page. Calling any of the member API endpoints without a valid admin session will fail. validateUser({ rol: 2 }) is checked before each request and redirects to /login on failure.

​
Listing members

Members are fetched through a q-infinite-scroll component. Each scroll event calls ListMembers(index, done), which increments the pagination counter and calls getMembers(): 
const getMembers = async () => {
  const sesionUser = validateUser({ rol: 2 });
  let headers = { "Content-Type": "application/json" };
  if (sesionUser) headers.Authorization = `Bearer ${sesionUser.token}`;

  let res = await fetch(
    process.env.API_SERVER +
      `/api/user/list-members/${pagination.value.pag}/${pagination.value.perpage}`,
    {
      method: "POST",
      mode: "cors",
      headers,
      body: JSON.stringify(filter),
    }
  );
  res = await res.json();
  ValidateSession(res, router);
  if (!res.status) return;
  return res;
};
Scrolling stops when pagination.pags === pagination.pag or when the server returns an empty data array.

​
Member card fields displayed

Each member card displays the following information:
FieldSource
Avatarmember.avatar[0].avatar (falls back to first letter of member.name)
Namemember.name
Emailmember.email
Phonemember.phone_number
Addressmember.address
Type of identificationmember.typeIdentification
Identification numbermember.identification
Rolemember.roles[0].name — color-coded badge
Statusmember.status[0].name — color-coded badge

​
Role assignment

Every card has a q-select pre-populated with the member’s current role. The admin selects the new role and clicks the save (💾) button to call updateRole(member):

​
Available roles

const rolesList = ref([
  { name: "Usuario",  value: "1" },
  { name: "Promotor", value: "3" },
  { name: "Admin",    value: "2" },
]);

​
Update-role request

const raw = JSON.stringify({
  roles: [
    {
      name:  selectedRoleObj.name.toLowerCase(),
      value: selectedRoleObj.value,
    },
  ],
});

const res = await fetch(
  process.env.API_SERVER + `/api/user/update-role/${member._id}`,
  {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${sesionUser.token}`,
    },
    body: raw,
  }
);
On a successful response, the member’s roles entry in the reactive array is updated in place so the badge refreshes without reloading the entire list.

​
Member status values (color-coded badges)

Status nameValueBadge color
usuario activo1teal
Pendiente de confirmacion2orange
usuario inactivo3purple
The badge color logic is evaluated directly in the template: 
<q-badge
  :color="
    member.status && member.status[0]
      ? member.status[0].name === 'usuario activo'
        ? 'teal'
        : member.status[0].name === 'Pendiente de confirmacion'
        ? 'orange'
        : member.status[0].name === 'usuario inactivo'
        ? 'purple'
        : 'grey'
      : 'grey'
  "
>
  {{ member.status && member.status[0] ? member.status[0].name : "Sin estado" }}
</q-badge>

​
Filtering

BarFilterMembers provides a debounced text input (1000 ms) that searches across name, address, email, phone, identification number, and identification type. When the input value changes, it calls the getdataFilter prop callback: 
// BarFilterMembers.vue
watch(filter, (data) => {
  props.getdataFilter(data);
});
In the parent, getdataFilter updates the filter ref and resets the list: 
const getdataFilter = (data) => {
  filter.value = data;
  resetlistMembers();
};
resetlistMembers() clears the members array, resets pagination.pag to 0, and re-fetches from the beginning with the new filter applied.

Build docs developers (and LLMs) love

Get started for freeTalk to us