From 537192c9bf45e55bfa35848cb30e6f02c180b01a Mon Sep 17 00:00:00 2001
From: Lucas Pinto <lucks@outlook.pt>
Date: Fri, 10 Dec 2021 23:36:56 +0000
Subject: [PATCH] finals

Co-authored-by: PedrosGuitarLegend <PedrosGuitarLegend@users.noreply.github.com>
Co-authored-by: Frankiice <Frankiice@users.noreply.github.com>
---
 src/App.vue                           |  6 ++--
 src/components/Messages.vue           |  6 +++-
 src/components/NavBar.vue             | 17 ++---------
 src/components/dialogs/CriarGrupo.vue | 42 ++++++++++++++++++++++-----
 src/components/dialogs/Jogos.vue      | 20 +++++++++----
 src/containers/ChatContainer.vue      | 16 ++++++++--
 src/scss/helpers.scss                 |  3 ++
 src/store/modules/contactos.ts        | 17 ++++++++++-
 src/views/Login.vue                   | 11 +++++--
 9 files changed, 101 insertions(+), 37 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 013e1a7..f29fc84 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -35,6 +35,8 @@ import Vue from 'vue';
 export default Vue.extend({
   created() {
     console.log('Hola que hace');
+    console.log('a mi me gusta la gasolina');
+
     const lightMode = localStorage.getItem('vsTheme') === 'light';
     this.$vs.setTheme(lightMode ? 'light' : 'dark');
 
@@ -51,9 +53,9 @@ export default Vue.extend({
   },
   mounted() {
     // this.ataque();
-    const primaryColor = localStorage.getItem('vsPrimary') || '#7289DA';
+    const primaryColor = sessionStorage.getItem('vsPrimary') || '#7289DA';
     this.$vs.setColor('primary', primaryColor);
-    localStorage.setItem('vsPrimary', primaryColor);
+    sessionStorage.setItem('vsPrimary', primaryColor);
   },
   methods: {
     getCor() {
diff --git a/src/components/Messages.vue b/src/components/Messages.vue
index a3b01ea..3e2392d 100644
--- a/src/components/Messages.vue
+++ b/src/components/Messages.vue
@@ -39,7 +39,7 @@
           <span
             v-if="j !== 0"
             class="ic-message-time">
-            {{ mensagem.momento.toTimeString().slice(0, -45) }}
+            {{ getHoras(mensagem.momento) }}
           </span>
 
           <div v-if="mensagem.texto">
@@ -174,6 +174,10 @@ export default Vue.extend({
       if (autor === '$$user$$') { return this.$store.state.user.contacto.nome; }
       return autor;
     },
+    getHoras(data: Date) {
+      const d = data.toTimeString();
+      return d.slice(0, d.indexOf(':') + 3);
+    },
   },
   computed: {
     computedMensagens() {
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 796f1de..7bc0fd0 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -6,19 +6,6 @@
         <vs-navbar-item @click="goHome">Concord</vs-navbar-item>
       </template>
 
-          <!-- <vs-switch
-            v-model="lightMode"
-            @click="changeTheme">
-            <template #on>
-              <i class='fa-solid fa-sun mr-2'></i>
-              Claro
-            </template>
-            <template #off>
-              <i class='fa-solid fa-moon mr-2'></i>
-              Escuro
-            </template>
-          </vs-switch> -->
-
       <template #right>
         <vs-tooltip
           bottom
@@ -93,7 +80,7 @@ export default Vue.extend({
   },
   beforeMount() {
     this.lightMode = localStorage.getItem('vsTheme') === 'light';
-    this.primaryColor = localStorage.getItem('vsPrimary') || '#7289DA';
+    this.primaryColor = sessionStorage.getItem('vsPrimary') || '#7289DA';
   },
   methods: {
     changeTheme() {
@@ -101,7 +88,7 @@ export default Vue.extend({
     },
     updatePrimary() {
       this.$vs.setColor('primary', this.primaryColor);
-      localStorage.setItem('vsPrimary', this.primaryColor);
+      sessionStorage.setItem('vsPrimary', this.primaryColor);
     },
     goHome() {
       if (this.$route.name !== 'Chat') this.$router.push({ name: 'Chat' });
diff --git a/src/components/dialogs/CriarGrupo.vue b/src/components/dialogs/CriarGrupo.vue
index e27115c..bf7a11a 100644
--- a/src/components/dialogs/CriarGrupo.vue
+++ b/src/components/dialogs/CriarGrupo.vue
@@ -21,6 +21,11 @@
             v-if="errosNome">
             {{ errosNome }}
           </template>
+          <template
+            #message-success
+            v-if="informacoesNome">
+            {{ informacoesNome }}
+          </template>
         </vs-input>
 
         <!-- ADICIONAR CONTACTOS -->
@@ -34,6 +39,11 @@
           collapse-chips
           v-model="selecionados"
           @input="contactosErrors">
+          <template
+            #message-success
+            v-if="informacoesContactos">
+            {{ informacoesContactos }}
+          </template>
           <template
             #message-danger
             v-if="errosContactos">
@@ -61,6 +71,16 @@
           collapse-chips
           v-model="selecionadosEmail"
           @input="contactosErrors">
+          <template
+            #message-success
+            v-if="informacoesContactos">
+            {{ informacoesContactos }}
+          </template>
+          <template
+            #message-danger
+            v-if="errosContactos">
+            {{ errosContactos }}
+          </template>
 
           <vs-option
             v-for="(contacto, i) in contactosEmail"
@@ -124,15 +144,17 @@ export default Vue.extend({
     selecionados: [],
     selecionadosEmail: [] as string[],
     errosNome: '',
+    informacoesNome: '',
     errosEmail: '',
+    informacoesEmail: '',
     errosContactos: '',
+    informacoesContactos: '',
     contactos: [],
     contactosEmail: [],
-
   }),
   computed: {
     canSubmit() {
-      return !this.errosNome && (this.selecionados.length || this.selecionadosEmail.length);
+      return !this.errosNome && !this.informacoesNome && (this.selecionados.length || this.selecionadosEmail.length);
     },
   },
   beforeMount() {
@@ -158,19 +180,22 @@ export default Vue.extend({
   },
   methods: {
     nomeErrors() {
+      this.informacoesNome = '';
       if (!this.nome.length) this.errosNome = 'Nome obrigatório';
       else if (this.nome.length > 20) this.errosNome = 'Comprimento máximo: 20 caracteres';
       else if (this.$store.state.contactos.recentes.find((c: Contacto) => c.nome === this.nome)) this.errosNome = 'Já existe um grupo ou contacto com esse nome';
       else this.errosNome = '';
     },
     emailErrors() {
+      this.informacoesEmail = '';
       if (!this.txtEmail.length) this.errosEmail = 'E-mail obrigatório';
       else if (this.txtEmail.length > 128) this.errosEmail = 'Comprimento máximo: 128 caracteres';
-      else if (!this.emailValid(this.txtEmail)) this.errosEmail = 'Email inválido — Não apresenta formato de e-mail.';
+      else if (!this.emailValid(this.txtEmail)) this.errosEmail = 'Email inválido';
       else this.errosEmail = '';
     },
     contactosErrors() {
-      if (!this.selecionados.length) this.errosContactos = 'Pelo menos um contacto obrigatório';
+      this.informacoesContactos = '';
+      if (!this.selecionados.length && !this.selecionadosEmail.length) this.errosContactos = 'Pelo menos um contacto obrigatório';
       else this.errosContactos = '';
     },
     submit() {
@@ -191,11 +216,14 @@ export default Vue.extend({
     },
     resetFields() {
       this.nome = '';
-      this.errosNome = 'Nome obrigatório';
+      this.errosNome = '';
+      this.informacoesNome = 'Nome obrigatório';
       this.txtEmail = '';
-      this.errosEmail = 'Insira um email válido.';
+      this.errosEmail = '';
+      this.informacoesEmail = 'Insira um email válido.';
       this.selecionados = [];
-      this.errosContactos = 'Pelo menos um contacto obrigatório';
+      this.errosContactos = '';
+      this.informacoesContactos = 'Pelo menos um contacto obrigatório';
       this.selecionadosEmail = [];
     },
     closeDialog() {
diff --git a/src/components/dialogs/Jogos.vue b/src/components/dialogs/Jogos.vue
index 9f3fa78..09fd40c 100644
--- a/src/components/dialogs/Jogos.vue
+++ b/src/components/dialogs/Jogos.vue
@@ -38,7 +38,7 @@
       </small>
 
       <div v-if="chat.grupo">
-        <p class="ml-5">Escolha um elemento do grupo!</p>
+        <p class="ml-5">Escolha um elemento do grupo</p>
         <div class="grid">
           <vs-select
             class="ml-5 mr-6"
@@ -46,7 +46,14 @@
             v-model="selecionado"
             primary
             @change="errosSelecionado">
-            <template #message-danger v-if="erroSelecionado">
+            <template
+              #message-success
+              v-if="informacoesSelecionado">
+              {{ informacoesSelecionado }}
+            </template>
+            <template
+              #message-danger
+              v-if="erroSelecionado">
               {{ erroSelecionado }}
             </template>
 
@@ -99,7 +106,7 @@
 
 #msgErroJogos {
   font-size: 11.2px;
-  color: rgb(var(--vs-danger));
+  color: rgb(var(--vs-success));
   margin-left:6px;
 }
 </style>
@@ -141,7 +148,8 @@ export default Vue.extend({
       },
     ],
     selecionado: '',
-    erroSelecionado: 'Contacto obrigatório',
+    erroSelecionado: '',
+    informacoesSelecionado: '',
     contactos: [] as ParticipanteChamada[],
   }),
   computed: {
@@ -171,12 +179,14 @@ export default Vue.extend({
   },
   methods: {
     errosSelecionado() {
+      this.informacoesSelecionado = '';
       if (!this.selecionado) this.erroSelecionado = 'Contacto obrigatório';
       else this.erroSelecionado = '';
     },
     resetFields() {
       this.selecionado = '';
-      this.erroSelecionado = 'Contacto obrigatório';
+      this.erroSelecionado = '';
+      this.informacoesSelecionado = 'Contacto obrigatório';
 
       for (let i = 0; i < this.imagensJogo.length; i += 1) { this.imagensJogo[i].ativo = false; }
     },
diff --git a/src/containers/ChatContainer.vue b/src/containers/ChatContainer.vue
index a562a1e..75cb6f3 100644
--- a/src/containers/ChatContainer.vue
+++ b/src/containers/ChatContainer.vue
@@ -14,6 +14,8 @@
             <vs-row justify="center" align="center" class="mb-1" >
               <vs-col w="8">
                 <vs-button
+                  v-shortkey="['ctrl', 'g']"
+                  @shortkey="openCriarGrupo"
                   block
                   @click="openCriarGrupo">
                   <i class="fa-solid fa-plus mr-2"></i>
@@ -409,11 +411,20 @@ export default Vue.extend({
 
           return valid;
         })
-        .map((r: Contacto) => ({ ...r, lastIteraction: r.mensagens?.length ? r.mensagens[r.mensagens.length - 1]?.momento?.getTime() : r.createdAt?.getTime() }))
+        // eslint-disable-next-line no-nested-ternary
+        .map((r: Contacto) => ({ ...r, lastIteraction: r.mensagens?.length ? r.mensagens[r.mensagens.length - 1]?.momento?.getTime() : (r.createdAt instanceof Date ? r.createdAt.getTime() : 0) }))
         .sort((a: Contacto & { lastIteraction: number }, b: Contacto & { lastIteraction: number }) => b.lastIteraction - a.lastIteraction);
     },
     computedContactosGrupo() {
-      return this.recenteSeleccionado?.naChamada
+      if (!this.recenteSeleccionado) return [];
+      console.log(this.recenteSeleccionado.naChamada);
+      return [...this.recenteSeleccionado.naChamada]
+        .sort((a, b) => {
+          if (a.nome < b.nome) return -1;
+          if (a.nome > b.nome) return 1;
+
+          return 0;
+        })
         .map((c) => c.nome)
         .join(', ');
     },
@@ -424,7 +435,6 @@ export default Vue.extend({
       if (eGrupo) cnt += 3;
       if (emChamada) cnt += 3;
 
-      console.log(nome, cnt);
       return nome.length >= 15 - cnt ? `${nome.slice(0, 13 - cnt)}...` : nome;
     },
     openCriarGrupo() {
diff --git a/src/scss/helpers.scss b/src/scss/helpers.scss
index 9f97b0b..6626176 100644
--- a/src/scss/helpers.scss
+++ b/src/scss/helpers.scss
@@ -28,6 +28,9 @@ body:not([vs-theme=dark]) {
 .bg-darker {
   background-color: rgb(var(--vs-darker));
 }
+.border-darker {
+  border: 3px rgb(var(--vs-darker)) solid;
+}
 .border-top-darker {
   border-top: 3px rgb(var(--vs-darker)) solid;
 }
diff --git a/src/store/modules/contactos.ts b/src/store/modules/contactos.ts
index e423c8c..945f01c 100644
--- a/src/store/modules/contactos.ts
+++ b/src/store/modules/contactos.ts
@@ -111,6 +111,7 @@ const state = {
       naChamada: [
         { nome: 'António' },
         { nome: 'Zé', micro: true },
+        { nome: 'Carlos', camera: true },
       ],
       createdAt: new Date('2019/03/11'),
       mensagens: [
@@ -163,6 +164,20 @@ const state = {
         { autor: 'Twix', texto: 'pois', momento: new Date('2021/10/19 11:50:00') },
       ],
     },
+    {
+      nome: 'Carlos',
+      naChamada: [
+        { nome: 'Carlos', micro: true },
+      ],
+      createdAt: new Date('2021/07/12'),
+      mensagens: [
+        { autor: 'Carlos', texto: 'ola e o carlos dormi bue oje gosto bue de dormir', momento: new Date('2021/07/12 10:00:23') },
+        { autor: 'Carlos', texto: 'queres morangos!', momento: new Date('2021/07/12 12:24:54') },
+        { autor: 'Carlos', texto: 'ou   ou nao', momento: new Date('2021/07/12 12:26:15') },
+        { autor: '$$user$$', texto: 'nao', momento: new Date('2021/07/12 23:08:49') },
+        { autor: 'Carlos', texto: 'queres sim abre aboca diz aaaaaaaaaa sao bons', momento: new Date('2021/07/12 23:13:10') },
+      ],
+    },
     // Hidden
     {
       nome: 'Carla',
@@ -175,7 +190,7 @@ const state = {
       hidden: true,
     },
     {
-      nome: 'Carlos Pipocas',
+      nome: 'Penélope Pipocas',
       email: 'pipocas_doces123@hotmail.com',
       hidden: true,
     },
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 8bc7f38..ddd30d8 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -29,15 +29,18 @@
             <template #message-danger v-if="erro" class="mb-0">
               {{ erro }}
             </template>
+            <template #message-success v-if="informacao" class="mb-0">
+              {{ informacao }}
+            </template>
           </vs-input>
 
           <vs-button
             color="primary"
-            :disabled="!!erro"
+            :disabled="!!erro || !!informacao"
             @click="iniciarSessao"
             class="ml-0"
             v-shortkey="['c']"
-            @shortkey="!erro ? iniciarSessao() : () => {}">
+            @shortkey="!erro && !informacao ? iniciarSessao() : () => {}">
             <u>C</u>ontinuar
           </vs-button>
         </vs-alert>
@@ -52,7 +55,8 @@ import Vue from 'vue';
 export default Vue.extend({
   data: () => ({
     nome: '',
-    erro: 'Nome obrigatório',
+    erro: '',
+    informacao: 'Nome obrigatório',
   }),
   beforeCreate() {
     // Limpar sessionStorage. é por domínio, portanto não queremos lixo de outros projetos
@@ -76,6 +80,7 @@ export default Vue.extend({
       if (code === 'Enter' && !this.erro) this.iniciarSessao();
     },
     checkErro() {
+      this.informacao = '';
       if (!this.nome) this.erro = 'Nome obrigatório';
       else if (this.nome.length > 20) this.erro = 'Comprimento máximo: 20 caracteres';
       else this.erro = '';