anahita-front/components/product/comment/dialog/Form.vue

<template>
    <div class="product-comment-form">
        <div>
            <div>
                <h2>{{ $t('yourComment') }}</h2>
                <Button v-bind="closeBtn.props" @click="dialog.close()" />
            </div>
            <p>{{ $t('aboutTheProdcut', { title }) }}</p>
        </div>
        <div>
            <ul>
                <li v-for="(item, key) in fields" :key="key">
                    <component :is="item.is" ref="chips" :id="key" v-bind="item.props" v-model="form[key]" />
                    <label :for="key">{{ item.label }}</label>
                    <template v-if="['positive', 'negative'].includes(key)">
                        <Button icon="isax isax-add" severity="secondary" text @click="addChip(key)" />
                    </template> 
                    <small v-if="errors[key]">{{ errors[key] }}</small>
                </li>
                <li>
                    <label> {{ $t('yourScore') }} : </label>
                    <ul>
                        <li v-for="i in 5" :key="i" @click="form.point = i">
                            <img src="/icons/star.svg" :class="starsClass(i)" />
                        </li>
                    </ul>
                    <small v-if="errors.point">{{ errors.point }}</small>
                </li>
                <li>
                    <label>{{ $t('description') }} :</label>
                    <Textarea v-model="form.content" :placeholder="$t('writeDesc')" />
                    <small v-if="errors.content">{{ errors.content }}</small>
                </li>
            </ul>
        </div>
        <Button :label="$t('submitComment')" :loading="loading" @click="submit()" />
    </div>
</template>

<script setup>
import init from '../../../../initialize/productCommentForm.js'
const { closeBtn, fields } = init()
const { toast, t } = inject('service')
const dialog = inject('dialogRef')
const { title, id } = dialog.value.data
const chips = ref()

const form = reactive({})
const errors = ref({});

const loading = ref(false);

const submit = async () => {
    if (Object.keys(errors.value).length < 1) {
        loading.value = true

        const { status, error } = await useFetch(`/api/comments/${id}`, {
            headers: { Authorization: useCookie('token') }, method: 'post', body: form
        })

        if (status.value == 'success') {
            toast.add({
                life: 3000, severity: 'success', summary: t('success'), detail: t('yourCommentSummited')
            })
            dialog.value.close()
        } else {
            if (error.value.statusCode == 422)
                {errors.value = error.value.data}
            else
                toast.add({
                    life: 3000, severity: 'error', summary: t('error'), detail: error.value.message
                })
        }
        loading.value = false
    }

}

const addChip = (key) => {
    const index = ['title', 'positive', 'negative'].indexOf(key)
    chips.value[index]?.addItem(new Event('keydown'), chips.value[index].$data.inputValue, true)
}

const starsClass = (i) => (i > (form?.point || 0) ? 'opacity-25' : '')


watch(computed(() => form), (value, old) => {
    Object.keys(errors.value).forEach(key => {
        if (value[key] != old[key]) delete errors.value[key]
    });
})
</script>

<style lang="scss">
.product-comment-form {
    @apply w-full lg:w-[40.1rem] lg:h-[48.6rem] bg-white rounded-t-[0.6rem] lg:rounded-[0.6rem] flex flex-col relative;

    &::before {
        @apply content-['_'] absolute inset-x-0 bottom-[4.5rem] h-3 shadow-[0px_-2px_5px_#0000000a] lg:shadow-none z-0;
    }

    &>div:nth-of-type(1) {
        @apply flex flex-col gap-1.5 lg:gap-2 p-6 lg:px-10 lg:py-8 lg:border-b-2 border-[#E5E5E5];

        &>div {
            @apply flex justify-between items-center;

            h2 {
                @apply text-zinc-800 text-sm lg:text-xl font-bold font-vazir;
            }

            button {
                @apply -mx-4 -my-3;

                .p-button-icon {
                    @apply text-[1.4em] lg:text-3xl text-[#191919];
                }
            }
        }

        p {
            @apply text-[#7F7F7F] text-[0.7em] lg:text-lg font-vazir;
        }
    }

    &>div:nth-of-type(2) {
        @apply lg:h-[29.9rem] grow p-6 lg:py-8 lg:px-10 lg:overflow-y-auto;

        &>ul {
            @apply w-full flex flex-col items-center gap-[1.9rem] lg:gap-6 lg:py-1.5 lg:pr-14 lg:pl-16;

            &>li:nth-of-type(-n + 3) {
                @apply w-[21.4rem] lg:w-[27.1rem] lg:min-h-[3.5rem] relative mt-1.5 lg:mt-3 flex items-center [&_button]:first:hidden;

                button {
                    @apply text-2xl absolute left-0 top-0 text-[#7F7F7F];
                }

                label {
                    @apply w-max absolute right-3 top-4 lg:top-3.5 px-1 bg-white transition-['top'];
                    @apply text-neutral-400 text-sm lg:text-base font-medium font-vazir cursor-text;
                    @apply pointer-events-none;
                }

                &>input {
                    @apply h-[3.4rem] pl-10 rtl w-full rounded-[0.6rem] border shadow-none;
                    @apply text-zinc-800 font-vazir;
                }

                .p-chips {
                    @apply w-full max-w-full rounded-[0.6rem];

                    ul {
                        @apply pl-8 w-full h-max grow flex-row-reverse;

                        input {
                            @apply w-full rtl text-zinc-800 font-vazir;
                        }

                        .p-chips-token {
                            @apply ltr my-1;

                            .p-chips-token-label {
                                @apply font-vazir;
                            }
                        }
                    }
                }

                &:has(input:focus),
                &:has(.p-chips-token-label),
                &:has(input:not(:placeholder-shown)) {
                    label {
                        @apply -top-2 h-4;
                        @apply text-zinc-800 text-xs font-normal font-vazir;
                    }
                }

                small{
                    @apply absolute -bottom-6 left-0 ;
                }
            }

            &>li:nth-of-type(4) {
                @apply w-[21.4rem] lg:w-[27.1rem] flex items-center gap-4 lg:mt-2;

                label {
                    @apply text-[#4C4C4C] text-sm lg:text-xl font-medium font-vazir;
                }

                ul {
                    @apply flex gap-1.5;

                    img {
                        @apply w-[1.1rem] h-[1.1rem] lg:w-6 lg:h-6 cursor-pointer;
                    }
                }
            }

            &>li:nth-of-type(5) {
                @apply flex flex-col gap-4 relative;

                label {
                    @apply text-[#4C4C4C] text-sm lg:text-xl font-medium font-vazir;
                }

                textarea {
                    @apply w-[21.4rem] h-[12.1rem] lg:w-[27.1rem] lg:h-[12.1rem] p-4 rounded-[0.6rem] border border-[#E5E5E5];

                    &::placeholder {
                        @apply text-[#999999] text-xs lg:text-lg font-normal font-vazir;
                    }
                }
            }

            &>li::after {
                content: attr(error);
                @apply text-red-500 text-sm absolute -bottom-6 left-0;
            }

            small {
                @apply text-red-500 font-vazir mr-auto;
            }

            li:has(small) * {
                @apply border-red-500 #{!important};
            }
        }
    }

    &>button {
        @apply w-[21.4rem] lg:w-[35.1rem] h-[2.9rem] my-6 self-center lg:h-14 lg:m-10 #{!important};

        .p-button-label {
            @apply font-bold font-vazir leading-tight text-sm lg:text-base;
        }
    }
}
</style>