From 7e1fced429c112973fe0c5ff8d2ad9b217f3da4a Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 30 Jan 2024 10:20:40 -0300
Subject: [PATCH] WIP

---
 src/components/EditPictureForm.vue            | 82 +++++++++++++++++++
 src/pages/Item/Card/ItemDescriptor.vue        | 79 ++++++++++++++----
 .../Supplier/Card/SupplierDescriptor.vue      | 22 +++++
 3 files changed, 165 insertions(+), 18 deletions(-)
 create mode 100644 src/components/EditPictureForm.vue

diff --git a/src/components/EditPictureForm.vue b/src/components/EditPictureForm.vue
new file mode 100644
index 000000000..a1d994399
--- /dev/null
+++ b/src/components/EditPictureForm.vue
@@ -0,0 +1,82 @@
+<script setup>
+import { reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import FetchData from 'components/FetchData.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import FormModelPopup from './FormModelPopup.vue';
+
+const emit = defineEmits(['onDataSaved']);
+
+const props = defineProps({});
+
+const { t } = useI18n();
+
+const editFormData = reactive({
+    uploadMethod: 'computer',
+    file: null,
+    quantity: null,
+});
+
+const options = [
+    { label: t('Select from computer'), value: 'computer' },
+    { label: t('Import from external URL'), value: 'URL' },
+];
+
+const onDataSaved = (data) => {
+    emit('onDataSaved', data);
+};
+</script>
+
+<template>
+    <!-- <FetchData
+        url="Warehouses"
+        @on-fetch="(data) => (warehousesOptions = data)"
+        auto-load
+    /> -->
+    <FormModelPopup
+        url-create="Items/regularize"
+        model="Items"
+        :title="t('Edit photo')"
+        :form-initial-data="editFormData"
+        @on-data-saved="onDataSaved($event)"
+    >
+        <template #form-inputs="{}">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QOptionGroup
+                        :options="options"
+                        type="radio"
+                        v-model="editFormData.uploadMethod"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QFile
+                        :label="t('entry.buys.file')"
+                        :multiple="false"
+                        v-model="editFormData.file"
+                        @update:model-value="onFileChange($event)"
+                        class="required"
+                    >
+                        <template #append>
+                            <QIcon name="vn:attach" class="cursor-pointer">
+                                <QTooltip>{{ t('Select a file') }}</QTooltip>
+                            </QIcon>
+                        </template>
+                    </QFile>
+                </div>
+            </VnRow>
+            <pre>{{ editFormData }}</pre>
+        </template>
+    </FormModelPopup>
+</template>
+
+<i18n>
+es:
+    Edit photo: Editar foto
+    Select from computer: Seleccionar desde ordenador
+    Import from external URL: Importar desde URL externa
+</i18n>
diff --git a/src/pages/Item/Card/ItemDescriptor.vue b/src/pages/Item/Card/ItemDescriptor.vue
index e5183779b..f30104303 100644
--- a/src/pages/Item/Card/ItemDescriptor.vue
+++ b/src/pages/Item/Card/ItemDescriptor.vue
@@ -9,6 +9,7 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
 import RegularizeStockForm from 'components/RegularizeStockForm.vue';
+import EditPictureForm from 'components/EditPictureForm.vue';
 
 import { useState } from 'src/composables/useState';
 import useCardDescription from 'src/composables/useCardDescription';
@@ -43,6 +44,7 @@ const entityId = computed(() => {
     return $props.id || route.params.id;
 });
 const regularizeStockFormDialog = ref(null);
+const editPhotoFormDialog = ref(null);
 const item = ref(null);
 const available = ref(null);
 const visible = ref(null);
@@ -122,6 +124,10 @@ const openRegularizeStockForm = () => {
     regularizeStockFormDialog.value.show();
 };
 
+const openEditPhotoForm = () => {
+    editPhotoFormDialog.value.show();
+};
+
 const cloneItem = async () => {
     try {
         const { data } = await axios.post(`Items/${entityId.value}/clone`);
@@ -181,30 +187,54 @@ const openCloneDialog = async () => {
             </QItem>
         </template>
         <template #before>
-            <QImg :src="getItemAvatar()" class="photo">
-                <template #error>
-                    <div
-                        class="absolute-full picture text-center q-pa-md flex flex-center"
-                    >
-                        <div>
-                            <div class="text-grey-5" style="opacity: 0.4; font-size: 5vh">
-                                <QIcon name="vn:item" />
-                            </div>
-                            <div class="text-grey-5" style="opacity: 0.4">
-                                {{ t('item.descriptor.item') }}
+            <div class="relative-position">
+                <QImg :src="getItemAvatar()" class="photo" style="position: relative">
+                    <template #error>
+                        <div
+                            class="absolute-full picture text-center q-pa-md flex flex-center"
+                        >
+                            <div>
+                                <div
+                                    class="text-grey-5"
+                                    style="opacity: 0.4; font-size: 5vh"
+                                >
+                                    <QIcon name="vn:item" />
+                                </div>
+                                <div class="text-grey-5" style="opacity: 0.4">
+                                    {{ t('item.descriptor.item') }}
+                                </div>
                             </div>
                         </div>
-                    </div>
-                </template>
-            </QImg>
-            <div class="row justify-between full-width bg-primary">
+                    </template>
+                </QImg>
+                <QBtn
+                    color="primary"
+                    size="lg"
+                    round
+                    class="edit-photo-btn"
+                    @click="openEditPhotoForm()"
+                >
+                    <QIcon name="edit" size="sm" />
+                    <QDialog ref="editPhotoFormDialog">
+                        <EditPictureForm />
+                    </QDialog>
+                </QBtn>
+            </div>
+
+            <div
+                class="row justify-between items-center full-width bg-primary"
+                style="height: 54px"
+            >
                 <div class="col column items-center">
-                    <span class="text-uppercase">
+                    <span class="text-uppercase" style="font-size: 11px">
                         {{ t('item.descriptor.visible') }}
                     </span>
                     <span class="text-weight-bold text-h5">{{ visible }}</span>
                 </div>
-                <div class="col column items-center">
+                <div
+                    class="col column items-center separation-borders"
+                    style="font-size: 11px"
+                >
                     <span class="text-uppercase">
                         {{ t('item.descriptor.available') }}
                     </span>
@@ -231,7 +261,7 @@ const openCloneDialog = async () => {
             <VnLv :label="t('item.descriptor.stems')" :value="entity.value7" />
         </template>
         <template #actions="{}">
-            <QCardActions>
+            <QCardActions class="row justify-center">
                 <QBtn
                     :to="{ name: 'ItemDiary' }"
                     size="md"
@@ -257,4 +287,17 @@ es:
 .photo {
     height: 256px;
 }
+
+.edit-photo-btn {
+    position: absolute;
+    right: 12px;
+    bottom: 12px;
+    z-index: 1;
+    cursor: pointer;
+}
+
+.separation-borders {
+    border-left: 1px solid #ffffff;
+    border-right: 1px solid #ffffff;
+}
 </style>
diff --git a/src/pages/Supplier/Card/SupplierDescriptor.vue b/src/pages/Supplier/Card/SupplierDescriptor.vue
index 104dad661..83bad87d2 100644
--- a/src/pages/Supplier/Card/SupplierDescriptor.vue
+++ b/src/pages/Supplier/Card/SupplierDescriptor.vue
@@ -133,6 +133,26 @@ const getEntryQueryParams = (supplier) => {
             <VnLv :label="t('supplier.summary.payDay')" :value="entity.payDay" />
             <VnLv :label="t('supplier.summary.account')" :value="entity.account" />
         </template>
+        <template #icons="{ entity }">
+            <QCardActions class="q-gutter-x-md">
+                <QIcon
+                    v-if="!entity.isActive"
+                    name="vn:disabled"
+                    color="primary"
+                    size="xs"
+                >
+                    <QTooltip>{{ t('Inactive supplier') }}</QTooltip>
+                </QIcon>
+                <QIcon
+                    v-if="!entity.isSerious"
+                    name="vn:supplierfalse"
+                    color="primary"
+                    size="xs"
+                >
+                    <QTooltip>{{ t('Unverified supplier') }}</QTooltip>
+                </QIcon>
+            </QCardActions>
+        </template>
         <template #actions="{ entity }">
             <QCardActions>
                 <QBtn
@@ -176,4 +196,6 @@ es:
     Go to client: Ir a cliente
     Create invoiceIn: Crear factura recibida
     Go to module index: Ir al índice del módulo
+    Inactive supplier: Proveedor inactivo
+    Unverified supplier: Proveedor no verificado
 </i18n>