WIP

src/pages/Item/ItemRequest.vue

@@ -1,12 +1,13 @@
 <script setup>
 import { onMounted, ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
 
 import FetchData from 'components/FetchData.vue';
 import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import VnInput from 'src/components/common/VnInput.vue';
+import ItemRequestDenyForm from './ItemRequestDenyForm.vue';
 
 import { toDateFormat } from 'src/filters/date';
 import { toCurrency } from 'filters/index';
@@ -17,6 +18,8 @@ import axios from 'axios';
 const { t } = useI18n();
 const { notify } = useNotify();
 
+const denyFormRef = ref(null);
+const denyRequestId = ref(null);
 const itemRequestsOptions = ref([]);
 
 const columns = computed(() => [
@@ -158,6 +161,21 @@ const confirmRequest = async (request) => {
     }
 };
 
+const getState = (isOk) => {
+    if (isOk === null) return 'Pending';
+    else if (isOk) return 'Accepted';
+    else return 'Denied';
+};
+
+const showDenyRequestForm = (requestId) => {
+    denyRequestId.value = requestId;
+    denyFormRef.value.show();
+};
+
+const onDenyAccept = (_, responseData) => {
+    console.log('response data:: ', responseData);
+};
+
 onMounted(async () => {});
 </script>
 
@@ -216,7 +234,6 @@ onMounted(async () => {});
                 <QTd>
                     <VnInput
                         class="dense"
-                        v-focus
                         v-model.number="row.itemFk"
                         type="number"
                         :disable="row.isOk != null"
@@ -227,7 +244,6 @@ onMounted(async () => {});
                 <QTd>
                     <VnInput
                         class="dense"
-                        v-focus
                         v-model.number="row.saleQuantity"
                         @change="changeQuantity(row)"
                         type="number"
@@ -235,10 +251,54 @@ onMounted(async () => {});
                     />
                 </QTd>
             </template>
+            <template #body-cell-concept="{ row }">
+                <QTd>
+                    <QBtn flat dense color="primary"> {{ row.itemDescription }}</QBtn>
+                    <ItemDescriptorProxy :id="row.itemFk" />
+                </QTd>
+            </template>
+            <template #body-cell-state="{ row }">
+                <QTd>
+                    <span>{{ getState(row.isOk) }}</span>
+                </QTd>
+            </template>
+            <template #body-cell-action="{ row }">
+                <QTd>
+                    <QIcon
+                        v-if="row.response?.length"
+                        name="insert_drive_file"
+                        color="primary"
+                        size="sm"
+                    >
+                        <QTooltip>
+                            {{ row.response }}
+                        </QTooltip>
+                    </QIcon>
+                    <QIcon
+                        v-if="row.isOk == null"
+                        name="thumb_down"
+                        color="primary"
+                        size="sm"
+                        class="cursor-pointer"
+                        @click="showDenyRequestForm(row.id)"
+                    >
+                        <QTooltip>
+                            {{ t('Discard') }}
+                        </QTooltip>
+                    </QIcon>
+                </QTd>
+            </template>
         </QTable>
+        <QDialog ref="denyFormRef" transition-show="scale" transition-hide="scale">
+            <ItemRequestDenyForm
+                :request-id="denyRequestId"
+                @on-data-saved="onDenyAccept"
+            />
+        </QDialog>
     </QPage>
 </template>
 
 <i18n>
-
+es:
+    Discard: Descartar
 </i18n>

src/pages/Item/ItemRequestDenyForm.vue

@@ -0,0 +1,57 @@
+<script setup>
+import { reactive, ref, onMounted, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+import VnInput from 'src/components/common/VnInput.vue';
+
+import VnRow from 'components/ui/VnRow.vue';
+import FormModelPopup from 'src/components/FormModelPopup.vue';
+
+defineProps({
+    requestId: {
+        type: Number,
+        default: null,
+    },
+});
+
+const emit = defineEmits(['onDataSaved']);
+const { t } = useI18n();
+const textAreaRef = ref(null);
+const bankEntityFormData = reactive({});
+
+const onDataSaved = (formData, requestResponse) => {
+    emit('onDataSaved', formData, requestResponse);
+};
+
+onMounted(async () => {
+    await nextTick();
+    textAreaRef.value.focus();
+});
+</script>
+
+<template>
+    <FormModelPopup
+        :url-create="`TicketRequests/${$props.requestId}/deny`"
+        :title="t('Specify the reasons to deny this request')"
+        :form-initial-data="bankEntityFormData"
+        @on-data-saved="onDataSaved"
+    >
+        <template #form-inputs="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        ref="textAreaRef"
+                        type="textarea"
+                        v-model="data.observation"
+                        fill-input
+                        autogrow
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModelPopup>
+</template>
+
+<i18n>
+es:
+    Specify the reasons to deny this request: Especifica las razones para descartar la petición
+</i18n>