Untitled

<template>
    <q-page padding>
        <div class="row justify-center">
            <q-form
                @submit="onSubmit"
                class="q-gutter-md col-lg-6 col-sm-10 col-xs-11"
            >
                <div class="col-12">
                    <q-input
                        filled
                        type="string"
                        v-model="reference"
                        label="Référence *"
                        lazy-rules
                        :rules="[
                        val => val !== null && val !== '' || 'Veuillez remplir ce champs',
                        ]"
                    />
                </div>

                <q-editor v-model="precisions" placeholder="Veuillez donner plus de précisions sur votre proposition" min-height="12rem" />

                <div class="row justify-between">
                    <div class="col q-mr-sm">
                        <q-input
                            filled
                            type="number"
                            v-model="tjm"
                            label="Tarif Journalier Moyen (TJM) *"
                            lazy-rules
                            :rules="[
                                val => val !== null && val !== '' || 'Veuillez remplir ce champs',
                            ]"
                        />
                    </div>
                    <div class="col q-ml-sm">
                        <q-input
                            @update:model-value="val => { file = val[0] }"
                            filled
                            type="file"
                            style="border-style: dashed; border: 1px dashed"
                        >
                            <q-tooltip class="shadow-4" :offset="[10, 10]">
                                Veuillez charger votre cv
                            </q-tooltip>
                        </q-input>
                    </div>
                </div>
    
                <p>Disponibilité</p>

                <div class="row bg-grey-1" style="height: 100px">
                    <q-radio class="col-4 items-center justify-center" v-model="date_dispo" name="date_dispo" val="immédiate" label="Immédiate" />
                    <q-radio class="col-4 items-center justify-center" v-model="date_dispo" name="date_dispo" val="dans 1 mois" label="Dans 1 mois" />
                    <q-radio class="col-4 items-center justify-center" v-model="date_dispo" name="date_dispo" val="dans 3 mois" label="Dans 3 mois" />
                </div>

                <div>
                    <q-btn label="Envoyer" type="submit" color="primary" class="float-right"/>
                </div>
            </q-form>
        </div>
    </q-page>
</template>

<script>
    import "@aws-amplify/ui-vue/styles.css"
    import { Amplify, API } from 'aws-amplify'
    import awsconfig from '../aws-exports'
    import { ref } from 'vue'
    import { useRoute } from 'vue-router'
    import * as mutations from '../graphql/mutations'
    import * as queries from '../graphql/queries'
    import { useOpStore } from "../stores/OpStore"
    import { useAuthStore } from '../stores/AuthStore'

    Amplify.configure(awsconfig)

    export default {
        props: {
            id: {
                type: String,
                default: '',
            }
        },
        methods: {
            async onSubmit () {
                const createPropositionDetails = {
                cv: this.ajoutcv,
                tjm: this.tjm,
                disponibilte_date: this.date_dispo,
                precisions: this.precisions,
                user_id: this.currentUser.id,
                offre_id: this.Opcurrent.id,
            }
            await API.graphql(
                { 
                query: mutations.createProposition, 
                variables:
                {
                    input: createPropositionDetails
                }
                });
                this.$router.push({ path: '/confirmPage' })
            },
        },
        setup (props) {
            const Opcurrent = useOpStore()
            const currentUser = useAuthStore()
            const router = useRoute()

            const proposition = ref([])
            const reference = ref('')
            const cv = ref('')
            const tjm = ref(null)
            const precisions = ref('')
            const score = ref(null)

            console.log('props id proposition ', props.id)

            const getPropositionInfo = async () => {
                const currentProposition = await API.graphql({
                    query: queries.getProposition,
                    variables: { id: router.params.id }
                })

                console.log('current proposition ', currentProposition)

                proposition.value = currentProposition.data.getProposition

                // const { id, reference, cv, tjm, precisions, score } = proposition
                // console.log('reference ', reference)
                // console.log('tjm ', tjm)
                reference.value = proposition.value.reference

            }

        return {
            proposition,
            reference,
            cv,
            tjm,
            precisions,
            score,
            ajoutcv: ref(null),
            tjm: ref(null),
            date_dispo: ref(null),
            precisions: ref(null),
            Opcurrent,
            currentUser,
            getPropositionInfo,
            }
        },
    }
</script>

<style scoped>
    .item {
        height: 50px;
    }
</style>