create searchBox section
This commit is contained in:
HAM!DREZA
+60
-14
@@ -17,20 +17,28 @@
|
||||
<div class="flex flex-col flex-col-reverse pb-[10vw]">
|
||||
<ul
|
||||
class="space-y-[2vw] md:space-y-[0.5vw] mt-[0.5vw] border-b"
|
||||
v-for="ticket in tickets"
|
||||
v-for="(ticket, index) in tickets"
|
||||
:key="ticket.id"
|
||||
>
|
||||
|
||||
<li class="flex justify-between items-center pt-[1.5vw] md:pt-0">
|
||||
<p
|
||||
<li class="flex justify-between pt-[1.5vw] md:pt-0">
|
||||
|
||||
|
||||
<p
|
||||
@click="openTicket(ticket.id)"
|
||||
class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
|
||||
class="basis-2/6 text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
|
||||
{{ ticket.subject }}
|
||||
</p>
|
||||
<p class="text-[3.19vw] md:text-[0.833vw] text-[#878787]">
|
||||
{{ ticket.createdAt }}
|
||||
|
||||
|
||||
<p class="basis-2/6 flexBox relative text-[3.19vw] md:text-[0.833vw] text-[#878787]">
|
||||
<span v-show="num === index"
|
||||
v-for="(item, num) in jalali" :key="num"
|
||||
>{{item[2]}} / {{item[1]}} / {{item[0]}}</span>
|
||||
</p>
|
||||
<div class="flex items-center gap-[1vw]">
|
||||
|
||||
|
||||
<div class="basis-2/6 flex items-center justify-end gap-[1vw]">
|
||||
<button
|
||||
@click="openTicket(ticket.id)"
|
||||
class="hidden md:block text-[0.741vw] bg-[#F5F5F5] text-[#878787] h-[2.135vw] w-[3.646vw] rounded-[0.521vw]"
|
||||
@@ -52,7 +60,7 @@
|
||||
<div class="flex flex-col flex-col-reverse">
|
||||
<div v-if="loading" class="loadingText">درحال دریافت اطلاعات...</div>
|
||||
<div
|
||||
class="justify-self-start mt-[5vw] md:mt-0"
|
||||
class="grid mt-[5vw] md:mt-0"
|
||||
v-for="(message, index) in ticketMessages[0]
|
||||
?.ticketMessages"
|
||||
:key="index"
|
||||
@@ -60,13 +68,20 @@
|
||||
|
||||
|
||||
<div
|
||||
class="rounded-b-[5.128vw] md:rounded-b-[1.042vw] rounded-l-[5.128vw] md:rounded-l-[1.042vw] w-[80vw] md:w-[40vw] p-[4vw] md:p-[2vw] bg-[#F8F8F8] mb-[1vw] text-[#383E43]"
|
||||
class="justify-self-start rounded-b-[5.128vw] md:rounded-b-[1.042vw] rounded-l-[5.128vw] md:rounded-l-[1.042vw] w-[80vw] md:w-[40vw] p-[4vw] md:p-[2vw] bg-[#F8F8F8] mb-[1vw] text-[#383E43]"
|
||||
:class="{ 'justify-self-end rounded-b-[5.128vw] md:rounded-b-[1.042vw] rounded-l-[5.128vw] md:rounded-l-[1.042vw] w-[80vw] md:w-[40vw] p-[4vw] md:p-[2vw] !bg-[#F4FDFD] mb-[1vw] text-[#383E43]' : message.createdBy.roles[0] === 'Admin' }"
|
||||
|
||||
>
|
||||
<p class="text-[3.59vw] md:text-[1.055vw]">
|
||||
{{ message.createdBy && "کاربر مهمان" }}
|
||||
{{ message.createdBy && "کاربر مهمان" }} {{ }}
|
||||
</p>
|
||||
<p class="text-[#878787] text-[2.836vw] md:text-[0.741vw] mt-[0.5vw]">
|
||||
<!-- <p class="text-[#878787] text-[2.836vw] md:text-[0.741vw] mt-[0.5vw]">
|
||||
{{ message.createdAt }}
|
||||
</p> -->
|
||||
<p class="text-[#878787] text-[2.836vw] md:text-[0.741vw] mt-[0.5vw]">
|
||||
<span v-show="num === index"
|
||||
v-for="(item, num) in jalali" :key="num"
|
||||
>{{item[2]}} / {{item[1]}} / {{item[0]}}</span>
|
||||
</p>
|
||||
<p class="text-[3.19vw] md:text-[0.833vw] mt-[5vw] md:mt-[2vw]">
|
||||
{{ message.content }}
|
||||
@@ -252,6 +267,7 @@
|
||||
<p class="text-[3.59vw] md:text-[1.055vw]">
|
||||
{{ message.createdBy && "کاربر مهمان" }}
|
||||
</p>
|
||||
|
||||
<p class="text-[#878787] text-[2.836vw] md:text-[0.741vw] mt-[0.5vw]">
|
||||
{{ message.createdAt }}
|
||||
</p>
|
||||
@@ -365,6 +381,35 @@ const subject = ref(null);
|
||||
const content = ref(null);
|
||||
const ticketMessages = ref([]);
|
||||
const update = ref(null)
|
||||
const day = ref([])
|
||||
const month = ref([])
|
||||
const year = ref([])
|
||||
const shamsi = ref([])
|
||||
|
||||
tickets.value.map(item =>{
|
||||
item = new Date(item.createdAt)
|
||||
year.value.push(item.getFullYear())
|
||||
month.value.push(item.getMonth() + 1)
|
||||
day.value.push(item.getDate())
|
||||
})
|
||||
|
||||
const combinedItems = year.value.map((year, index) => ({
|
||||
year,
|
||||
month: month.value[index],
|
||||
day: day.value[index],
|
||||
}));
|
||||
|
||||
|
||||
const values = combinedItems.map(item =>(
|
||||
Object.values(item)
|
||||
))
|
||||
const jalali = ref([])
|
||||
const shamsis = values.map(item => (
|
||||
jalali.value.push(gregorian_to_jalali(item[0],item[1],item[2]))
|
||||
|
||||
))
|
||||
|
||||
|
||||
|
||||
|
||||
const sendTicket = async () => {
|
||||
@@ -377,9 +422,10 @@ const sendTicket = async () => {
|
||||
subject: subject.value,
|
||||
},
|
||||
});
|
||||
load()
|
||||
// load()
|
||||
addTicketForm.value = false;
|
||||
subject.value = null;
|
||||
location.reload()
|
||||
|
||||
};
|
||||
|
||||
@@ -390,7 +436,7 @@ const openTicket = async (data) => {
|
||||
const slides = document.getElementsByClassName("close");
|
||||
for (let i = 0; i < slides.length; i++) {
|
||||
if (slides[i].id === data) {
|
||||
slides[i].style.maxHeight = (slides[i].scrollHeight * 2) + "px";
|
||||
slides[i].style.maxHeight = slides[i].scrollHeight + "vh";
|
||||
} else {
|
||||
slides[i].style.maxHeight = null;
|
||||
}
|
||||
@@ -406,7 +452,6 @@ const openTicket = async (data) => {
|
||||
ticketMessages.value.push(single.value);
|
||||
reload()
|
||||
loading.value = false;
|
||||
|
||||
};
|
||||
const sendMessage = async (data, reload) => {
|
||||
if (content.value === null || '') {
|
||||
@@ -424,6 +469,7 @@ const sendMessage = async (data, reload) => {
|
||||
openTicket().reload()
|
||||
};
|
||||
|
||||
|
||||
const tab1 = `<p class="flex items-center gap-[0.5vw] p-[2vw] md:p-0 md:px-[0.6vw] rounded-[2.564vw]">
|
||||
<svg
|
||||
class="hidden md:block w-[1.406vw] h-[1.406vw]"
|
||||
|
||||
Reference in New Issue
Block a user