143 lines
3.8 KiB
Vue
143 lines
3.8 KiB
Vue
<template>
|
|
<div class="form-sort">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="" id="accordion">
|
|
<div class="card" v-for="(listItem, j) in workList" :key="j">
|
|
<div class="card-header" :id="'heading' + j">
|
|
<button
|
|
@click="getDetailsDay(listItem, j)"
|
|
class="btn d-flex justify-content-between collapsed w-100 pr-0"
|
|
type="button"
|
|
data-toggle="collapse"
|
|
:data-target="'#collapse' + j"
|
|
:aria-controls="'collapse' + j"
|
|
>
|
|
<span class="card-header_titles text-1 col-3"
|
|
>{{ getDayOfWeekFromTimestamp(listItem.taskDate) }}
|
|
</span>
|
|
<span class="card-header_titles text-2 col-3">{{
|
|
listItem.oldDate
|
|
}}</span>
|
|
<span class="card-header_titles text-3 col-3">
|
|
{{ listItem.minuteDay }}</span
|
|
>
|
|
<span class="card-header_titles text-4 col-2">
|
|
{{ listItem.noWork }}</span
|
|
>
|
|
<span class="card-header_titles col-1 text-5 rotate-icon">
|
|
<i
|
|
class="card-header_titles rotate-icon tavasi tavasi-Component-25--1"
|
|
></i
|
|
></span>
|
|
</button>
|
|
</div>
|
|
<div
|
|
:id="'collapse' + j"
|
|
class="collapse"
|
|
:class="{ show: 'collapse' + j == 'collapse0' }"
|
|
:aria-labelledby="'heading' + j"
|
|
data-parent="#accordion"
|
|
>
|
|
<div
|
|
v-for="(taskItem, k) in listItem.tasks"
|
|
:key="k"
|
|
class="card-body d-flex justify-content-between align-items-center"
|
|
>
|
|
<span class="card-body_items item-1"
|
|
>{{ taskItem.category }}
|
|
</span>
|
|
<span class="card-body_items item-2">{{ taskItem.title }}</span>
|
|
<span class="card-body_items item-3">{{
|
|
taskItem.duration
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import taskApi from "~/apis/taskApi";
|
|
export default {
|
|
props: {
|
|
workList: [],
|
|
userId: "",
|
|
},
|
|
|
|
beforeMount() {
|
|
this.httpService = new HttpService(
|
|
import.meta.env.VITE_BASE_URL + taskUrl()
|
|
);
|
|
},
|
|
|
|
computed: {
|
|
taskUrl() {
|
|
return import.meta.env.VITE_TASK;
|
|
},
|
|
},
|
|
methods: {
|
|
getDayOfWeekFromTimestamp(timestamp) {
|
|
let m = timestamp * 1000;
|
|
let d = new Date(m);
|
|
|
|
let options = { weekday: "long" };
|
|
let dayOfWeek = new Intl.DateTimeFormat("fa-IR", options).format(d);
|
|
|
|
return dayOfWeek;
|
|
},
|
|
getDetailsDay(hourItem) {
|
|
this.hoursForms = [];
|
|
let payload = {
|
|
user_id: this.userId,
|
|
taskDate: hourItem.oldDate,
|
|
};
|
|
const url = taskApi.workingHours.day;
|
|
|
|
this.httpService
|
|
.postRequest(url, payload)
|
|
.then((res) => {
|
|
this.$set(hourItem, "tasks", res.data);
|
|
// this.sortForms = res.data;
|
|
})
|
|
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
// .form-group {
|
|
// max-width: 44em !important;
|
|
// height: 4em;
|
|
// overflow: auto;
|
|
// border: 1px rgb(223 223 223) solid;
|
|
// border-radius: 0.25em;
|
|
// margin-top: 0;
|
|
// margin-bottom: 0;
|
|
// font-size: 0.8rem;
|
|
// }
|
|
#accordion {
|
|
width: 100% !important;
|
|
// min-width: 36em !important;
|
|
height: calc(100vh - 11em);
|
|
overflow: auto;
|
|
}
|
|
.card-header,
|
|
.card {
|
|
border-radius: 0.25em !important;
|
|
// min-width: 35em !important;
|
|
}
|
|
.table-responsive {
|
|
height: calc(100vh + -13em) !important;
|
|
}
|
|
.card-body {
|
|
border-bottom: 1px rgb(223 223 223) solid;
|
|
font-size: 0.9rem;
|
|
}
|
|
</style>
|