@freteclick/quasar-financial-ui 1.0.113 → 1.0.114

package/src/components/invoice/expense/DetailExpense.vue

@@ -1,56 +1,163 @@
 <template>
-  <div>
-    <div class="row q-mb-md q-gutter-sm justify-end">
-      <q-btn :label="$t('Cancelar despesa')" icon="cancel" color="negative" @click="removeExpense"
-        :loading="deleting" />
-    </div>
-    <q-form @submit="editExpense">
-      <div class="row">
-        <div class="col-xs-12 q-mb-md">
-          <q-select stack-label emit-value map-options lazy-rules v-model="item.category"
-            :label="$t('Categoria da despesa')" :options="categories"
-            :rules="[(val) => val !== null || 'Selecione uma categoria']" />
-        </div>
-        <div class="col-xs-12 q-mb-md">
-          <q-input lazy-rules stack-label v-model="item.description" type="text" :label="$t('Descrição da despesa')"
-            class="q-mt-md" :rules="[isInvalid()]" />
+  <div class="expense-detail-form">
+    <header class="expense-detail-form__header">
+      <div class="expense-detail-form__heading">
+        <span class="expense-detail-form__eyebrow">GESTÃO DA DESPESA</span>
+        <h2>Dados da conta a pagar</h2>
+        <p>Atualize as informações e mantenha o histórico financeiro organizado.</p>
+      </div>
+      <q-btn
+        outline
+        no-caps
+        rounded
+        color="negative"
+        icon="cancel"
+        :label="$t('Cancelar despesa')"
+        :loading="deleting"
+        :disable="saving"
+        @click="removeExpense"
+      />
+    </header>
+
+    <q-form @submit="editExpense" class="expense-detail-form__form">
+      <div class="expense-detail-form__grid">
+        <div class="expense-detail-form__field expense-detail-form__field--category">
+          <q-select
+            outlined
+            stack-label
+            emit-value
+            map-options
+            lazy-rules
+            v-model="item.category"
+            :label="$t('Categoria da despesa')"
+            :options="categories"
+            :rules="[(val) => val !== null || 'Selecione uma categoria']"
+          />
         </div>
-        <div class="col-xs-12 q-mb-md">
-          <q-select v-if="item.provider" stack-label emit-value map-options lazy-rules v-model="item.provider"
-            :label="$t('Fornecedor')" :options="providers"
-            :rules="[(val) => val !== null || 'Selecione um fornecedor']" />
-          <PeopleAutocomplete v-else :source="searchPeople" option-value="optionValue" :isLoading="isSearching"
-            label="Definir o fornecedor" @selected="onSelectClient" placeholder="Pesquisar..." />
-
-          <q-btn v-if="item.provider" @click="item.provider = null" align="right">
-            Alterar
-          </q-btn>
+
+        <div class="expense-detail-form__field expense-detail-form__field--status">
+          <q-select
+            outlined
+            stack-label
+            emit-value
+            map-options
+            lazy-rules
+            v-model="item.status"
+            :label="$t('Status')"
+            :options="statuses"
+            :rules="[(val) => val !== null || 'Selecione um status']"
+          />
         </div>
-        <div class="col-xs-12 q-mb-md">
-          <q-input lazy-rules stack-label reverse-fill-mask v-model="item.amount" prefix="R$" type="text"
-            :label="$t('Valor')" class="q-mt-md" :rules="[isInvalid()]" mask="#,##" fill-mask="0" />
+
+        <div class="expense-detail-form__field expense-detail-form__field--description">
+          <q-input
+            outlined
+            lazy-rules
+            stack-label
+            v-model="item.description"
+            type="text"
+            :label="$t('Descrição da despesa')"
+            :rules="[isInvalid()]"
+          />
         </div>
-        <div class="col-xs-12 q-mb-md">
-          <q-input stack-label v-model="item.dueDate" :label="$t('Data primeiro vencimento')" mask="##/##/####"
-            class="q-mb-sm" :rules="[isInvalid('date')]">
+
+        <div class="expense-detail-form__field expense-detail-form__field--date">
+          <q-input
+            outlined
+            stack-label
+            v-model="item.dueDate"
+            :label="$t('Data primeiro vencimento')"
+            mask="##/##/####"
+            :rules="[isInvalid('date')]"
+          >
             <template v-slot:append>
               <q-icon name="event" class="cursor-pointer">
                 <q-popup-proxy ref="qDateProxy1" transition-show="scale" transition-hide="scale">
-                  <q-date v-model="item.dueDate" mask="DD/MM/YYYY" @update:model-value="() => $refs.qDateProxy1.hide()" />
+                  <q-date
+                    v-model="item.dueDate"
+                    mask="DD/MM/YYYY"
+                    @update:model-value="() => $refs.qDateProxy1.hide()"
+                  />
                 </q-popup-proxy>
               </q-icon>
             </template>
           </q-input>
         </div>
-        <div class="col-xs-12 q-mb-md">
-          <q-select stack-label emit-value map-options lazy-rules v-model="item.status" :label="$t('Status')"
-            :options="statuses" :rules="[(val) => val !== null || 'Selecione um status']" />
+
+        <div class="expense-detail-form__field expense-detail-form__field--provider">
+          <div class="expense-detail-form__provider">
+            <q-select
+              v-if="item.provider"
+              outlined
+              stack-label
+              emit-value
+              map-options
+              lazy-rules
+              v-model="item.provider"
+              :label="$t('Fornecedor')"
+              :options="providers"
+              :rules="[(val) => val !== null || 'Selecione um fornecedor']"
+            />
+            <PeopleAutocomplete
+              v-else
+              class="expense-detail-form__autocomplete"
+              :source="searchPeople"
+              option-value="optionValue"
+              :isLoading="isSearching"
+              label="Definir o fornecedor"
+              placeholder="Pesquisar..."
+              @selected="onSelectClient"
+            />
+            <q-btn
+              v-if="item.provider"
+              flat
+              round
+              dense
+              color="primary"
+              icon="edit"
+              aria-label="Alterar fornecedor"
+              class="expense-detail-form__provider-edit"
+              @click="item.provider = null"
+            >
+              <q-tooltip>Alterar fornecedor</q-tooltip>
+            </q-btn>
+          </div>
         </div>
+
+        <div class="expense-detail-form__field expense-detail-form__field--amount">
+          <q-input
+            outlined
+            lazy-rules
+            stack-label
+            reverse-fill-mask
+            v-model="item.amount"
+            prefix="R$"
+            type="text"
+            :label="$t('Valor')"
+            :rules="[isInvalid()]"
+            mask="#,##"
+            fill-mask="0"
+          />
+        </div>
+
       </div>
-      <div class="row justify-end">
-        <q-btn :loading="saving" icon="save" type="submit" :label="$t('Salvar')" size="md" color="primary"
-          class="q-mt-md" />
-      </div>
+
+      <footer class="expense-detail-form__footer">
+        <div class="expense-detail-form__hint">
+          <q-icon name="info_outline" />
+          <span>Confira os valores e vencimentos antes de salvar.</span>
+        </div>
+        <q-btn
+          unelevated
+          no-caps
+          :loading="saving"
+          :disable="deleting"
+          icon="save"
+          type="submit"
+          :label="$t('Salvar alterações')"
+          color="primary"
+        />
+      </footer>
     </q-form>
   </div>
 </template>
@@ -391,3 +498,161 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.expense-detail-form {
+  width: 100%;
+  min-width: 0;
+  color: #1b2d43;
+}
+
+.expense-detail-form__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 18px;
+  padding: 4px 2px 20px;
+  border-bottom: 1px solid #edf1f6;
+}
+
+.expense-detail-form__heading {
+  min-width: 0;
+}
+
+.expense-detail-form__eyebrow {
+  color: #7890aa;
+  font-size: 10px;
+  font-weight: 750;
+  letter-spacing: 0.12em;
+}
+
+.expense-detail-form__heading h2 {
+  margin: 5px 0 0;
+  color: #1a2e45;
+  font-size: 20px;
+  font-weight: 750;
+  letter-spacing: -0.025em;
+}
+
+.expense-detail-form__heading p {
+  margin: 6px 0 0;
+  color: #7b8b9c;
+  font-size: 12px;
+}
+
+.expense-detail-form__form {
+  padding: 22px 2px 2px;
+}
+
+.expense-detail-form__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-areas:
+    "category status"
+    "description date"
+    "provider amount";
+  gap: 18px 20px;
+}
+
+.expense-detail-form__field {
+  min-width: 0;
+}
+
+.expense-detail-form__field--category {
+  grid-area: category;
+}
+
+.expense-detail-form__field--status {
+  grid-area: status;
+}
+
+.expense-detail-form__field--description {
+  grid-area: description;
+}
+
+.expense-detail-form__field--date {
+  grid-area: date;
+}
+
+.expense-detail-form__field--provider {
+  grid-area: provider;
+}
+
+.expense-detail-form__field--amount {
+  grid-area: amount;
+}
+
+.expense-detail-form__provider {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 8px;
+}
+
+.expense-detail-form__provider :deep(.q-field),
+.expense-detail-form__autocomplete {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.expense-detail-form__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-top: 22px;
+  padding-top: 18px;
+  border-top: 1px solid #edf1f6;
+}
+
+.expense-detail-form__hint {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  color: #8191a3;
+  font-size: 11px;
+}
+
+.expense-detail-form__hint .q-icon {
+  color: #6f89a5;
+  font-size: 17px;
+}
+
+.expense-detail-form__footer .q-btn,
+.expense-detail-form__header > .q-btn {
+  min-height: 40px;
+  border-radius: 10px;
+  font-weight: 700;
+}
+
+@media (max-width: 700px) {
+  .expense-detail-form__header {
+    flex-direction: column;
+  }
+
+  .expense-detail-form__header > .q-btn {
+    width: 100%;
+  }
+
+  .expense-detail-form__grid {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas:
+      "category"
+      "status"
+      "description"
+      "date"
+      "provider"
+      "amount";
+    gap: 14px;
+  }
+
+  .expense-detail-form__footer {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .expense-detail-form__footer .q-btn {
+    width: 100%;
+  }
+}
+</style>