Inicio de usuários
This commit is contained in:
LeoMortari
@@ -6,7 +6,7 @@
|
||||
<meta description="This project is a front-end base project with Vue app" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<title>Vue Base JS</title>
|
||||
<title>Clipper AI</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
17
src/App.vue
17
src/App.vue
@@ -176,23 +176,6 @@
|
||||
</p>
|
||||
</div>
|
||||
</q-scroll-area>
|
||||
|
||||
<div class="app-drawer__footer">
|
||||
<div class="app-drawer__cta">
|
||||
<div class="app-drawer__cta-title">Precisa de ajuda?</div>
|
||||
<div class="app-drawer__cta-text">
|
||||
Nossa equipe está pronta para acelerar seus cortes.
|
||||
</div>
|
||||
<Button
|
||||
color="secondary"
|
||||
text-color="primary"
|
||||
variant="ghost"
|
||||
icon="sym_o_help"
|
||||
label="Abrir suporte"
|
||||
full-width
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-drawer>
|
||||
|
||||
<q-page-container>
|
||||
|
||||
@@ -103,19 +103,6 @@
|
||||
</q-form>
|
||||
|
||||
<p v-if="error" class="login-card__error">{{ error }}</p>
|
||||
|
||||
<div class="login-card__footer">
|
||||
<span>Precisa de ajuda?</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
color="secondary"
|
||||
text-color="primary"
|
||||
icon="sym_o_chat"
|
||||
label="Falar com suporte"
|
||||
full-width
|
||||
@click.prevent="handleSupport"
|
||||
/>
|
||||
</div>
|
||||
</q-card>
|
||||
</section>
|
||||
</div>
|
||||
@@ -244,7 +231,7 @@ export default {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.login-page {
|
||||
min-height: 100vh;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
|
||||
@@ -4,203 +4,246 @@
|
||||
<div>
|
||||
<h2 class="app-page__title">Gestão de usuários</h2>
|
||||
<p class="app-page__subtitle">
|
||||
Controle quem pode acessar o Clipper IA, convide novos membros e acompanhe o status de cada conta.
|
||||
Controle quem pode acessar o Clipper IA, convide novos membros e
|
||||
acompanhe o status de cada conta.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="app-actions-bar">
|
||||
<Button
|
||||
icon="sym_o_person_add"
|
||||
label="Convidar usuário"
|
||||
@click="handleInvite"
|
||||
variant="ghost"
|
||||
icon="sym_o_refresh"
|
||||
label="Atualizar"
|
||||
:disabled="loading"
|
||||
@click="handleRefresh"
|
||||
/>
|
||||
<Button
|
||||
variant="ghost"
|
||||
color="secondary"
|
||||
text-color="primary"
|
||||
icon="sym_o_download"
|
||||
label="Exportar"
|
||||
@click="handleExport"
|
||||
icon="sym_o_person_add"
|
||||
label="Adicionar Usuário"
|
||||
@click="handleNewUser"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="users-page__grid">
|
||||
<q-card flat bordered class="app-card users-page__card">
|
||||
<header class="users-page__card-head">
|
||||
<div>
|
||||
<h3>Times e permissões</h3>
|
||||
<span>Use os níveis de acesso para definir o que cada grupo pode operar.</span>
|
||||
</div>
|
||||
<q-card flat bordered class="users-page__filters app-card">
|
||||
<div class="users-page__filters-head">
|
||||
<div>
|
||||
<h3>Filtrar usuários</h3>
|
||||
<span
|
||||
>Busque por nome ou e-mail para localizar rapidamente qualquer
|
||||
membro.</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="users-page__filters-actions">
|
||||
<Button
|
||||
variant="ghost"
|
||||
color="secondary"
|
||||
text-color="primary"
|
||||
icon="sym_o_settings"
|
||||
label="Configurar permissões"
|
||||
@click="handlePermissions"
|
||||
/>
|
||||
</header>
|
||||
|
||||
<div class="users-page__roles">
|
||||
<q-item v-for="role in roles" :key="role.name" class="users-page__role-item">
|
||||
<q-item-section avatar>
|
||||
<q-avatar :color="role.color" text-color="white" icon="sym_o_badge" />
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ role.name }}</q-item-label>
|
||||
<q-item-label caption>{{ role.description }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-chip outline color="primary" :label="role.membersLabel" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card flat bordered class="app-card users-page__card">
|
||||
<header class="users-page__card-head">
|
||||
<div>
|
||||
<h3>Status da equipe</h3>
|
||||
<span>Indicadores rápidos para acompanhar convites e acessos recentes.</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="users-page__stats">
|
||||
<div v-for="stat in stats" :key="stat.label" class="users-page__stat">
|
||||
<div class="users-page__stat-label">{{ stat.label }}</div>
|
||||
<div class="users-page__stat-value">{{ stat.value }}</div>
|
||||
<div class="users-page__stat-caption">{{ stat.caption }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="users-page__cta">
|
||||
<Button
|
||||
variant="ghost"
|
||||
icon="sym_o_smart_toy"
|
||||
label="Automatizar aprovações"
|
||||
@click="handleWorkflow"
|
||||
/>
|
||||
<Button
|
||||
icon="sym_o_notifications_active"
|
||||
label="Ativar alertas"
|
||||
@click="handleAlerts"
|
||||
icon="sym_o_close"
|
||||
label="Limpar filtros"
|
||||
:disabled="!hasFilters"
|
||||
@click="resetFilters"
|
||||
/>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-card flat bordered class="app-card users-page__roadmap">
|
||||
<header class="users-page__card-head">
|
||||
<div>
|
||||
<h3>Próximas entregas</h3>
|
||||
<span>Fique de olho nos recursos que estão chegando para a gestão da sua equipe.</span>
|
||||
</div>
|
||||
</header>
|
||||
<div class="users-page__filters-grid">
|
||||
<TextField
|
||||
v-model="filters.name"
|
||||
label="Nome"
|
||||
placeholder="Ex.: Ana Silva"
|
||||
>
|
||||
<template #prepend>
|
||||
<q-icon name="sym_o_person" color="primary" />
|
||||
</template>
|
||||
</TextField>
|
||||
|
||||
<ul class="users-page__roadmap-list">
|
||||
<li v-for="item in roadmap" :key="item.title">
|
||||
<div class="users-page__roadmap-title">{{ item.title }}</div>
|
||||
<p class="users-page__roadmap-description">{{ item.description }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
<TextField
|
||||
v-model="filters.email"
|
||||
label="E-mail"
|
||||
placeholder="Ex.: ana@clipperia.com"
|
||||
>
|
||||
<template #prepend>
|
||||
<q-icon name="sym_o_alternate_email" color="primary" />
|
||||
</template>
|
||||
</TextField>
|
||||
</div>
|
||||
|
||||
<div class="users-page__filters-footer">
|
||||
<Button
|
||||
label="Buscar usuários"
|
||||
icon="sym_o_search"
|
||||
:loading="loading"
|
||||
:disabled="loading"
|
||||
@click="handleSearch({ ...pagination, page: 1 })"
|
||||
/>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<Table
|
||||
key="users-table"
|
||||
class="users-page__table"
|
||||
title="Usuários"
|
||||
subtitle="Visualize quem tem acesso ao Clipper IA e acompanhe o status de cada conta."
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
:pagination="pagination"
|
||||
:loading="loading"
|
||||
@update:pagination="updatePagination"
|
||||
>
|
||||
<template #empty-message>
|
||||
Nenhum usuário encontrado para os filtros selecionados.
|
||||
</template>
|
||||
|
||||
<template #body="props">
|
||||
<q-tr :props="props">
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div class="users-page__cell">
|
||||
<div class="users-page__cell-label">{{ col.label }}</div>
|
||||
<div class="users-page__cell-value">{{ col.value }}</div>
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</Table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Button from "@components/Button";
|
||||
import Table from "@components/Table";
|
||||
import TextField from "@components/TextField";
|
||||
|
||||
import { API } from "@config/axios";
|
||||
|
||||
const columns = [
|
||||
{
|
||||
name: "id",
|
||||
label: "ID",
|
||||
align: "left",
|
||||
field: "id",
|
||||
},
|
||||
{
|
||||
name: "name",
|
||||
label: "Nome",
|
||||
align: "left",
|
||||
field: "name",
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
label: "E-mail",
|
||||
align: "left",
|
||||
field: "email",
|
||||
},
|
||||
{
|
||||
name: "role",
|
||||
label: "Papel",
|
||||
align: "center",
|
||||
field: "role",
|
||||
},
|
||||
{
|
||||
name: "status",
|
||||
label: "Status",
|
||||
align: "center",
|
||||
field: "status",
|
||||
},
|
||||
{
|
||||
name: "lastAccess",
|
||||
label: "Último acesso",
|
||||
align: "center",
|
||||
field: "lastAccess",
|
||||
},
|
||||
];
|
||||
|
||||
export default {
|
||||
name: "UsersPage",
|
||||
components: {
|
||||
Button,
|
||||
Table,
|
||||
TextField,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
roles: [
|
||||
{
|
||||
name: "Administradores",
|
||||
description: "Acesso total às configurações, convites e billing.",
|
||||
membersLabel: "3 membros",
|
||||
color: "primary",
|
||||
},
|
||||
{
|
||||
name: "Editores",
|
||||
description: "Podem criar cortes, revisar sugestões e publicar.",
|
||||
membersLabel: "8 membros",
|
||||
color: "secondary",
|
||||
},
|
||||
{
|
||||
name: "Leitores",
|
||||
description: "Acompanham relatórios e status dos clipes gerados.",
|
||||
membersLabel: "12 membros",
|
||||
color: "accent",
|
||||
},
|
||||
],
|
||||
stats: [
|
||||
{
|
||||
label: "Convites pendentes",
|
||||
value: "04",
|
||||
caption: "Envie lembretes automáticos em 1 clique",
|
||||
},
|
||||
{
|
||||
label: "Último acesso",
|
||||
value: "há 2h",
|
||||
caption: "Bruna adicionou novos cortes",
|
||||
},
|
||||
{
|
||||
label: "Contas bloqueadas",
|
||||
value: "01",
|
||||
caption: "Revise motivos e restaure acessos",
|
||||
},
|
||||
],
|
||||
roadmap: [
|
||||
{
|
||||
title: "Fluxo de aprovação com múltiplos níveis",
|
||||
description: "Defina revisores responsáveis por validar cortes antes da publicação automática.",
|
||||
},
|
||||
{
|
||||
title: "Integração com Slack / Discord",
|
||||
description: "Envie alertas de novos convites e aprovações direto para os canais do time.",
|
||||
},
|
||||
{
|
||||
title: "Perfis avançados",
|
||||
description: "Crie papéis personalizados combinando permissões de forma granular.",
|
||||
},
|
||||
],
|
||||
columns,
|
||||
rows: [],
|
||||
loading: false,
|
||||
pagination: {
|
||||
page: 1,
|
||||
direction: "asc",
|
||||
perPage: 10,
|
||||
total: 0,
|
||||
totalPages: 1,
|
||||
hasNext: false,
|
||||
hasPrev: false,
|
||||
},
|
||||
filters: {
|
||||
name: "",
|
||||
email: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
hasFilters() {
|
||||
return Boolean(this.filters.name) || Boolean(this.filters.email);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.handleSearch(this.pagination);
|
||||
},
|
||||
methods: {
|
||||
handleInvite() {
|
||||
this.$q.notify({
|
||||
type: "positive",
|
||||
message: "Convites em lote estarão disponíveis em breve.",
|
||||
});
|
||||
async handleSearch(pagination = this.pagination) {
|
||||
const basePagination = {
|
||||
...this.pagination,
|
||||
page: pagination.page ?? this.pagination.page,
|
||||
perPage: pagination.perPage ?? this.pagination.perPage,
|
||||
};
|
||||
|
||||
try {
|
||||
this.loading = true;
|
||||
|
||||
const {
|
||||
data: { content, pagination: nextPagination },
|
||||
} = await API.get("/usuarios", {
|
||||
params: {
|
||||
page: basePagination.page,
|
||||
perPage: basePagination.perPage,
|
||||
name: this.filters.name,
|
||||
email: this.filters.email,
|
||||
},
|
||||
});
|
||||
|
||||
console.log("====================================");
|
||||
console.log(content);
|
||||
console.log("====================================");
|
||||
|
||||
this.rows = content;
|
||||
this.pagination = {
|
||||
...basePagination,
|
||||
...nextPagination,
|
||||
};
|
||||
} catch (error) {
|
||||
this.$q.notify({
|
||||
type: "negative",
|
||||
message: "Não foi possível carregar os usuários simulados.",
|
||||
});
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
handlePermissions() {
|
||||
this.$q.notify({
|
||||
type: "info",
|
||||
message: "Configurações avançadas de permissões ainda não foram conectadas ao backend.",
|
||||
});
|
||||
updatePagination(pagination) {
|
||||
this.handleSearch(pagination);
|
||||
},
|
||||
handleExport() {
|
||||
this.$q.notify({
|
||||
type: "info",
|
||||
message: "Exportação de usuários será liberada após a integração com o Keycloak.",
|
||||
});
|
||||
resetFilters() {
|
||||
this.filters = {
|
||||
name: "",
|
||||
email: "",
|
||||
};
|
||||
|
||||
this.handleSearch({ ...this.pagination, page: 1 });
|
||||
},
|
||||
handleWorkflow() {
|
||||
this.$q.notify({
|
||||
type: "info",
|
||||
message: "Automação de aprovações está em desenvolvimento.",
|
||||
});
|
||||
},
|
||||
handleAlerts() {
|
||||
this.$q.notify({
|
||||
type: "info",
|
||||
message: "Em breve você poderá receber alertas no email ou no Slack.",
|
||||
});
|
||||
handleRefresh() {
|
||||
this.handleSearch({ ...this.pagination });
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -210,138 +253,106 @@ export default {
|
||||
.users-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: clamp(32px, 6vw, 48px);
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.users-page__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: clamp(24px, 4vw, 32px);
|
||||
}
|
||||
|
||||
.users-page__card-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.users-page__card-head h3 {
|
||||
.users-page__filters h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #101828;
|
||||
}
|
||||
|
||||
.users-page__card-head span {
|
||||
.users-page__filters span {
|
||||
color: #475467;
|
||||
font-size: 14px;
|
||||
color: #475467;
|
||||
}
|
||||
|
||||
.users-page__roles {
|
||||
.users-page__filters-head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.users-page__role-item {
|
||||
border: 1px solid rgba(127, 86, 217, 0.1);
|
||||
border-radius: 14px;
|
||||
padding: 8px 12px;
|
||||
background: rgba(127, 86, 217, 0.04);
|
||||
}
|
||||
|
||||
.users-page__stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.users-page__stat {
|
||||
padding: 16px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(127, 86, 217, 0.08);
|
||||
background: rgba(127, 86, 217, 0.05);
|
||||
.users-page__filters-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.users-page__stat-label {
|
||||
font-size: 13px;
|
||||
color: #475467;
|
||||
}
|
||||
|
||||
.users-page__stat-value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #101828;
|
||||
}
|
||||
|
||||
.users-page__stat-caption {
|
||||
font-size: 12px;
|
||||
color: #667085;
|
||||
}
|
||||
|
||||
.users-page__cta {
|
||||
margin-top: 28px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.users-page__roadmap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.users-page__filters-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.users-page__roadmap-list {
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
.users-page__filters-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.users-page__roadmap-title {
|
||||
.users-page__table {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.users-page__cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.users-page__cell-label {
|
||||
display: none;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #98a2b3;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.users-page__cell-value {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #101828;
|
||||
}
|
||||
|
||||
.users-page__roadmap-description {
|
||||
margin: 4px 0 0;
|
||||
color: #475467;
|
||||
body.body--dark .users-page__filters h3 {
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
}
|
||||
|
||||
body.body--dark .users-page__card-head h3,
|
||||
body.body--dark .users-page__stat-value,
|
||||
body.body--dark .users-page__roadmap-title {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
body.body--dark .users-page__card-head span,
|
||||
body.body--dark .users-page__stat-label,
|
||||
body.body--dark .users-page__stat-caption,
|
||||
body.body--dark .users-page__roadmap-description {
|
||||
body.body--dark .users-page__filters span {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
body.body--dark .users-page__role-item {
|
||||
background: rgba(244, 235, 255, 0.1);
|
||||
border-color: rgba(244, 235, 255, 0.18);
|
||||
body.body--dark .users-page__cell-value {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.users-page__card-head {
|
||||
@media (max-width: 768px) {
|
||||
.users-page__filters-head {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.users-page__cta {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
.app-actions-bar {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.users-page__filters-footer {
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.users-page__filters-footer > * {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.users-page__cell-label {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user