mirror of
https://github.com/EvolutionAPI/evolution-manager.git
synced 2025-07-13 07:04:50 -06:00
profile tab
This commit is contained in:
Gabriel Pastori
parent
33f7a84a3f
commit
2bd8efca83
@ -8,7 +8,7 @@
|
||||
|
||||
<v-window v-model="tab">
|
||||
<v-window-item v-for="tab in tabs" :key="tab.id" :value="tab.id">
|
||||
<div class="d-flex flex-column gap-8">
|
||||
<div class="d-flex flex-column gap-6">
|
||||
<component
|
||||
v-for="component in tab.components"
|
||||
:key="component"
|
||||
@ -33,6 +33,10 @@ import MyGroups from "./message/MyGroups.vue";
|
||||
import MyChats from "./message/MyChats.vue";
|
||||
import MyContacts from "./message/MyContacts.vue";
|
||||
import HasWhatsapp from "./message/HasWhatsapp.vue";
|
||||
|
||||
import ConnectionAlert from "./profile/ConnectionAlert.vue";
|
||||
import BasicInfo from "./profile/BasicInfo.vue";
|
||||
import Privacy from "./profile/Privacy.vue";
|
||||
export default {
|
||||
components: {
|
||||
Options,
|
||||
@ -46,6 +50,9 @@ export default {
|
||||
MyChats,
|
||||
HasWhatsapp,
|
||||
MyContacts,
|
||||
ConnectionAlert,
|
||||
BasicInfo,
|
||||
Privacy,
|
||||
},
|
||||
data: () => ({
|
||||
tab: "settings",
|
||||
@ -75,6 +82,12 @@ export default {
|
||||
"MyChats",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "profile",
|
||||
icon: "mdi-account",
|
||||
title: "Perfil",
|
||||
components: ["ConnectionAlert", "BasicInfo", "Privacy"],
|
||||
},
|
||||
],
|
||||
}),
|
||||
props: {
|
||||
|
||||
173
src/components/instance/profile/BasicInfo.vue
Normal file
173
src/components/instance/profile/BasicInfo.vue
Normal file
@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<v-card variant="outlined" :loading="loading">
|
||||
<v-card-title
|
||||
class="d-flex align-center"
|
||||
@click="toggleExpanded"
|
||||
style="cursor: pointer"
|
||||
v-ripple
|
||||
>
|
||||
<v-icon start>mdi-account</v-icon>
|
||||
Nome e Recado
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn
|
||||
size="small"
|
||||
icon
|
||||
:disabled="loading"
|
||||
variant="tonal"
|
||||
@click.stop="toggleExpanded"
|
||||
:style="{ transform: expanded ? 'rotate(180deg)' : '' }"
|
||||
>
|
||||
<v-icon>mdi-chevron-down</v-icon>
|
||||
</v-btn>
|
||||
</v-card-title>
|
||||
<v-card-text v-if="expanded">
|
||||
<v-alert v-if="error" type="error" class="mb-3">
|
||||
{{ error }}
|
||||
</v-alert>
|
||||
|
||||
<v-form v-model="valid" class="d-flex flex-column gap-2">
|
||||
<v-text-field
|
||||
class="flex-grow-1 flex-shrink-0"
|
||||
v-model="data.name"
|
||||
:disabled="true || loading"
|
||||
label="Nome"
|
||||
counter
|
||||
maxlength="25"
|
||||
:rules="[
|
||||
(v) => !!v || 'Nome é obrigatório',
|
||||
(v) => v.length <= 25 || 'Nome deve ter no máximo 25 caracteres',
|
||||
]"
|
||||
hint="Indisponível no momento"
|
||||
persistent-hint
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
class="flex-grow-1 flex-shrink-0"
|
||||
v-model="data.status"
|
||||
:disabled="loading"
|
||||
label="Recado (Status)"
|
||||
:rules="[
|
||||
(v) => !!v || 'Nome é obrigatório',
|
||||
(v) =>
|
||||
v.length <= 139 || 'Recado deve ter no máximo 139 caracteres',
|
||||
]"
|
||||
counter
|
||||
maxlength="139"
|
||||
></v-text-field>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
<v-card-actions v-if="expanded">
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn
|
||||
:disabled="
|
||||
!valid ||
|
||||
JSON.stringify(data) === JSON.stringify(defaultData) ||
|
||||
!isOpen
|
||||
"
|
||||
:loading="loading"
|
||||
color="primary"
|
||||
@click="saveOptions"
|
||||
variant="tonal"
|
||||
>
|
||||
Salvar
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import instanceController from "@/services/instanceController";
|
||||
import { useAppStore } from "@/store/app";
|
||||
export default {
|
||||
name: "BasicInfo",
|
||||
props: {
|
||||
instance: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data: () => ({
|
||||
AppStore: useAppStore(),
|
||||
|
||||
expanded: false,
|
||||
loading: false,
|
||||
error: false,
|
||||
valid: false,
|
||||
data: {
|
||||
name: "",
|
||||
status: "",
|
||||
},
|
||||
defaultData: {
|
||||
name: "",
|
||||
status: "",
|
||||
},
|
||||
}),
|
||||
|
||||
methods: {
|
||||
toggleExpanded() {
|
||||
if (this.loading) return;
|
||||
this.expanded = !this.expanded;
|
||||
},
|
||||
async saveOptions() {
|
||||
try {
|
||||
this.loading = true;
|
||||
this.error = false;
|
||||
|
||||
if (!this.isOpen) return;
|
||||
|
||||
if (this.data.name !== this.defaultData.name)
|
||||
await instanceController.profile.updateName(
|
||||
this.instance.instance.instanceName,
|
||||
this.data.name
|
||||
);
|
||||
|
||||
if (this.data.status !== this.defaultData.status)
|
||||
await instanceController.profile.updateStatus(
|
||||
this.instance.instance.instanceName,
|
||||
this.data.status
|
||||
);
|
||||
|
||||
await this.AppStore.reconnect();
|
||||
this.loadOptions();
|
||||
} catch (e) {
|
||||
this.error = e.message?.message || e.message || e;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
async loadOptions() {
|
||||
try {
|
||||
this.loading = true;
|
||||
this.error = false;
|
||||
const instance = this.instance.instance;
|
||||
const { isOpen } = this;
|
||||
var data = {
|
||||
name: isOpen ? instance.profileName || "" : "",
|
||||
status: isOpen ? instance.profileStatus || "" : "",
|
||||
};
|
||||
|
||||
this.data = Object.assign({}, data);
|
||||
this.defaultData = Object.assign({}, data);
|
||||
} catch (e) {
|
||||
this.error = e.message?.message || e.message || e;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
isOpen() {
|
||||
return this.instance.instance.status === "open";
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
expanded(val) {
|
||||
if (val) this.loadOptions();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
25
src/components/instance/profile/ConnectionAlert.vue
Normal file
25
src/components/instance/profile/ConnectionAlert.vue
Normal file
@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<v-alert v-if="instance.instance.status != 'open'" type="error" class="mb-0">
|
||||
Não é possível alterar o perfil de uma instância desconectada.
|
||||
</v-alert>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "ConnectionAlert",
|
||||
props: {
|
||||
instance: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data: () => ({}),
|
||||
|
||||
methods: {},
|
||||
|
||||
watch: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
224
src/components/instance/profile/Privacy.vue
Normal file
224
src/components/instance/profile/Privacy.vue
Normal file
@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<v-card variant="outlined" :loading="loading">
|
||||
<v-card-title
|
||||
class="d-flex align-center"
|
||||
@click="toggleExpanded"
|
||||
style="cursor: pointer"
|
||||
v-ripple
|
||||
>
|
||||
<v-icon start>mdi-shield-account</v-icon>
|
||||
Privacidade
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn
|
||||
size="small"
|
||||
icon
|
||||
:disabled="loading"
|
||||
variant="tonal"
|
||||
@click.stop="toggleExpanded"
|
||||
:style="{ transform: expanded ? 'rotate(180deg)' : '' }"
|
||||
>
|
||||
<v-icon>mdi-chevron-down</v-icon>
|
||||
</v-btn>
|
||||
</v-card-title>
|
||||
<v-card-text v-if="expanded">
|
||||
<v-alert v-if="error" type="error" class="mb-3">
|
||||
{{ error }}
|
||||
</v-alert>
|
||||
|
||||
<v-form v-model="valid">
|
||||
<v-select
|
||||
v-model="privacyData.last"
|
||||
:items="WAPrivacyValue"
|
||||
label="Visto por último"
|
||||
:rules="[(v) => !!v || 'Visto por último é obrigatório']"
|
||||
density="comfortable"
|
||||
prepend-inner-icon="mdi-clock-outline"
|
||||
></v-select>
|
||||
<v-select
|
||||
v-model="privacyData.online"
|
||||
:items="WAPrivacyOnlineValue"
|
||||
label="Online"
|
||||
:rules="[(v) => !!v || 'Online é obrigatório']"
|
||||
density="comfortable"
|
||||
prepend-inner-icon="mdi-cellphone"
|
||||
></v-select>
|
||||
<v-select
|
||||
v-model="privacyData.profile"
|
||||
:items="WAPrivacyValue"
|
||||
label="Foto do Perfil"
|
||||
:rules="[(v) => !!v || 'Foto de Perfil é obrigatório']"
|
||||
density="comfortable"
|
||||
prepend-inner-icon="mdi-account-box"
|
||||
></v-select>
|
||||
<v-select
|
||||
v-model="privacyData.status"
|
||||
:items="WAPrivacyValue"
|
||||
label="Recado (Status)"
|
||||
:rules="[(v) => !!v || 'Recado é obrigatório']"
|
||||
density="comfortable"
|
||||
prepend-inner-icon="mdi-text-short"
|
||||
></v-select>
|
||||
<v-select
|
||||
v-model="privacyData.readreceipts"
|
||||
:items="WAReadReceiptsValue"
|
||||
label="Confirmação de leitura"
|
||||
:rules="[(v) => !!v || 'Confirmação de leitura é obrigatório']"
|
||||
density="comfortable"
|
||||
prepend-inner-icon="mdi-check-all"
|
||||
></v-select>
|
||||
<v-select
|
||||
v-model="privacyData.groupadd"
|
||||
:items="WAPrivacyValue"
|
||||
label="Ser adicionado em grupos"
|
||||
:rules="[(v) => !!v || 'Ser adicionado em grupos é obrigatório']"
|
||||
density="comfortable"
|
||||
prepend-inner-icon="mdi-account-multiple-plus"
|
||||
></v-select>
|
||||
<v-select
|
||||
v-model="privacyData.calladd"
|
||||
:items="WAPrivacyValue"
|
||||
label="Ser adicionado em chamadas"
|
||||
color="primary"
|
||||
:rules="[(v) => !!v || 'Ser adicionado em chamadas é obrigatório']"
|
||||
density="comfortable"
|
||||
prepend-inner-icon="mdi-phone-plus"
|
||||
></v-select>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
<v-card-actions v-if="expanded" class="d-flex flex-wrap gap-x-1">
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn
|
||||
:disabled="
|
||||
!valid ||
|
||||
JSON.stringify(privacyData) === JSON.stringify(defaultPrivacyData)
|
||||
"
|
||||
:loading="loading"
|
||||
color="primary"
|
||||
@click="savePrivacy"
|
||||
variant="tonal"
|
||||
>
|
||||
Salvar
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
<chatwoot-config :instance="instance" ref="chatwootConfig" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import instanceController from "@/services/instanceController";
|
||||
import { useAppStore } from "@/store/app";
|
||||
|
||||
const defaultObj = () => ({
|
||||
enabled: false,
|
||||
url: "",
|
||||
account_id: "",
|
||||
token: "",
|
||||
sign_msg: true,
|
||||
reopen_conversation: true,
|
||||
conversation_pending: false,
|
||||
});
|
||||
|
||||
export default {
|
||||
name: "ProfilePrivacy",
|
||||
props: {
|
||||
instance: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data: () => ({
|
||||
AppStore: useAppStore(),
|
||||
expanded: false,
|
||||
loading: false,
|
||||
error: false,
|
||||
valid: false,
|
||||
WAPrivacyValue: [
|
||||
{ value: "all", title: "Todos" },
|
||||
{ value: "contacts", title: "Contatos" },
|
||||
{ value: "contact_blacklist", title: "Contatos exeto os da lista negra" },
|
||||
{ value: "none", title: "Ninguém" },
|
||||
],
|
||||
WAPrivacyOnlineValue: [
|
||||
{ value: "all", title: "Todos" },
|
||||
{ value: "match_last_seen", title: "Igual ao visto por último" },
|
||||
],
|
||||
WAReadReceiptsValue: [
|
||||
{ value: "all", title: "Todos" },
|
||||
{ value: "none", title: "Ninguém" },
|
||||
],
|
||||
|
||||
privacyData: {
|
||||
readreceipts: "all",
|
||||
profile: "all",
|
||||
status: "all",
|
||||
online: "all",
|
||||
last: "all",
|
||||
groupadd: "all",
|
||||
calladd: "all",
|
||||
},
|
||||
defaultChatwootData: {
|
||||
readreceipts: "all",
|
||||
profile: "all",
|
||||
status: "all",
|
||||
online: "all",
|
||||
last: "all",
|
||||
groupadd: "all",
|
||||
calladd: "all",
|
||||
},
|
||||
}),
|
||||
methods: {
|
||||
toggleExpanded() {
|
||||
if (this.loading) return;
|
||||
this.expanded = !this.expanded;
|
||||
},
|
||||
chatwootConfig() {
|
||||
this.$refs.chatwootConfig.open();
|
||||
},
|
||||
async savePrivacy() {
|
||||
try {
|
||||
this.loading = true;
|
||||
this.error = false;
|
||||
await instanceController.profile.updatePrivacy(
|
||||
this.instance.instance.instanceName,
|
||||
this.privacyData
|
||||
);
|
||||
this.defaultPrivacyData = Object.assign({}, this.privacyData);
|
||||
} catch (e) {
|
||||
this.error = e.message?.message || e.message || e;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
async loadPrivacy() {
|
||||
try {
|
||||
this.loading = true;
|
||||
this.error = false;
|
||||
const privacyData = await instanceController.profile.getPrivacy(
|
||||
this.instance.instance.instanceName
|
||||
);
|
||||
this.privacyData = Object.assign(defaultObj(), privacyData || {});
|
||||
this.defaultPrivacyData = Object.assign(
|
||||
defaultObj(),
|
||||
privacyData || {}
|
||||
);
|
||||
} catch (e) {
|
||||
this.error = e.message?.message || e.message || e;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
isOpen() {
|
||||
return this.instance.instance.status === "open";
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
expanded(expanded) {
|
||||
if (expanded) this.loadPrivacy();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -74,7 +74,7 @@ const deleteInstance = async (instanceName) => {
|
||||
import settings from "./instanceSettingsController.js";
|
||||
import group from "./instanceGroupController.js";
|
||||
import chat from "./instanceChatController.js";
|
||||
|
||||
import profile from "./instanceProfileController.js";
|
||||
export default {
|
||||
fetchAll,
|
||||
create,
|
||||
@ -84,6 +84,6 @@ export default {
|
||||
delete: deleteInstance,
|
||||
...settings,
|
||||
group,
|
||||
chat
|
||||
|
||||
chat,
|
||||
profile,
|
||||
};
|
||||
|
||||
62
src/services/instanceProfileController.js
Normal file
62
src/services/instanceProfileController.js
Normal file
@ -0,0 +1,62 @@
|
||||
|
||||
import http from "../http-common";
|
||||
|
||||
const updateName = async (instanceName, name) => {
|
||||
return await http
|
||||
.post("/chat/updateProfileName/:instance", { name }, {
|
||||
params: {
|
||||
instance: instanceName
|
||||
}
|
||||
})
|
||||
.then((r) => r.data)
|
||||
.catch((error) => {
|
||||
throw error.response?.data || error.response || error;
|
||||
});
|
||||
}
|
||||
|
||||
const updateStatus = async (instanceName, status) => {
|
||||
return await http
|
||||
.post("/chat/updateProfileStatus/:instance", { status }, {
|
||||
params: {
|
||||
instance: instanceName
|
||||
}
|
||||
})
|
||||
.then((r) => r.data)
|
||||
.catch((error) => {
|
||||
throw error.response?.data || error.response || error;
|
||||
});
|
||||
}
|
||||
|
||||
const getPrivacy = async (instanceName) => {
|
||||
return await http
|
||||
.get("/chat/fetchPrivacySettings/:instance", {
|
||||
params: {
|
||||
instance: instanceName
|
||||
}
|
||||
})
|
||||
.then((r) => r.data)
|
||||
.catch((error) => {
|
||||
throw error.response?.data || error.response || error;
|
||||
});
|
||||
}
|
||||
|
||||
const updatePrivacy = async (instanceName, privacySettings) => {
|
||||
return await http
|
||||
.put("/chat/updatePrivacySettings/:instance", { privacySettings }, {
|
||||
params: {
|
||||
instance: instanceName
|
||||
}
|
||||
})
|
||||
.then((r) => r.data)
|
||||
.catch((error) => {
|
||||
throw error.response?.data || error.response || error;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
export default {
|
||||
updateName: updateName,
|
||||
updateStatus: updateStatus,
|
||||
getPrivacy: getPrivacy,
|
||||
updatePrivacy: updatePrivacy
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user