complete every routes v-1
This commit is contained in:
HAM!DREZA
@@ -0,0 +1,314 @@
|
||||
|
||||
<template>
|
||||
<section class="flex flex-col gap-4 pt-7">
|
||||
<div class="flex gap-7">
|
||||
<div class="flex flex-col gap-7 items-center">
|
||||
<div class="flex flex-col gap-1 w-96">
|
||||
<FloatLabel>
|
||||
<InputText class="w-full" v-model="headline"/>
|
||||
<label>{{ $t("عنوان ویدیو") }}</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1 w-96">
|
||||
<FloatLabel>
|
||||
<Textarea v-model="description" rows="3" class="w-full" />
|
||||
<label>{{ $t("توضیحات متا") }}</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1 w-96">
|
||||
<FloatLabel>
|
||||
<Dropdown
|
||||
v-model="type"
|
||||
@change="setType"
|
||||
:options="['تکمیل شده', 'غیرفعال', 'درحال ضبط', 'به زودی...']"
|
||||
:optionLabel="levels"
|
||||
:optionValue="levels"
|
||||
class="w-full"
|
||||
/>
|
||||
<label>{{ $t("وضعیت ویدیو") }}</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-7 items-center">
|
||||
<div>
|
||||
<div class="card w-[400px]">
|
||||
<Toast />
|
||||
<FileUpload
|
||||
name="demo[]"
|
||||
url="/api/upload"
|
||||
@upload="onTemplatedUpload($event)"
|
||||
:multiple="true"
|
||||
accept="image/*"
|
||||
:maxFileSize="1000000"
|
||||
@select="onSelectedFiles"
|
||||
>
|
||||
<template
|
||||
#header="{
|
||||
chooseCallback,
|
||||
uploadCallback,
|
||||
clearCallback,
|
||||
files,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="flex flex-wrap justify-between items-center flex-1 gap-4"
|
||||
>
|
||||
<div class="flex gap-2">
|
||||
<Button
|
||||
@click="chooseCallback()"
|
||||
icon="pi pi-images"
|
||||
rounded
|
||||
outlined
|
||||
severity="secondary"
|
||||
></Button>
|
||||
<Button
|
||||
@click="uploadEvent(uploadCallback)"
|
||||
icon="pi pi-cloud-upload"
|
||||
rounded
|
||||
outlined
|
||||
severity="success"
|
||||
:disabled="!files || files.length === 0"
|
||||
></Button>
|
||||
<Button
|
||||
@click="clearCallback()"
|
||||
icon="pi pi-times"
|
||||
rounded
|
||||
outlined
|
||||
severity="danger"
|
||||
:disabled="!files || files.length === 0"
|
||||
></Button>
|
||||
</div>
|
||||
<ProgressBar
|
||||
:value="totalSizePercent"
|
||||
:showValue="false"
|
||||
class="md:w-20rem h-1 w-full md:ml-auto"
|
||||
>
|
||||
<span class="whitespace-nowrap"
|
||||
>{{ totalSize }}B / 1Mb</span
|
||||
>
|
||||
</ProgressBar>
|
||||
</div>
|
||||
</template>
|
||||
<template
|
||||
#content="{
|
||||
files,
|
||||
uploadedFiles,
|
||||
removeUploadedFileCallback,
|
||||
removeFileCallback,
|
||||
}"
|
||||
>
|
||||
<div class="flex flex-col gap-8 pt-4">
|
||||
<div v-if="files.length > 0">
|
||||
<h5>Pending</h5>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<div
|
||||
v-for="(file, index) of files"
|
||||
:key="file.name + file.type + file.size"
|
||||
class="p-8 rounded-border flex flex-col border border-surface items-center gap-4"
|
||||
>
|
||||
<div>
|
||||
<img
|
||||
role="presentation"
|
||||
:alt="file.name"
|
||||
:src="file.objectURL"
|
||||
width="100"
|
||||
height="50"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
class="font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden"
|
||||
>{{ file.name }}</span
|
||||
>
|
||||
<div>{{ formatSize(file.size) }}</div>
|
||||
<Badge value="Pending" severity="warn" />
|
||||
<Button
|
||||
icon="pi pi-times"
|
||||
@click="
|
||||
onRemoveTemplatingFile(
|
||||
file,
|
||||
removeFileCallback,
|
||||
index
|
||||
)
|
||||
"
|
||||
outlined
|
||||
rounded
|
||||
severity="danger"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="uploadedFiles.length > 0">
|
||||
<h5>Completed</h5>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<div
|
||||
v-for="(file, index) of uploadedFiles"
|
||||
:key="file.name + file.type + file.size"
|
||||
class="p-8 rounded-border flex flex-col border border-surface items-center gap-4"
|
||||
>
|
||||
<div>
|
||||
<img
|
||||
role="presentation"
|
||||
:alt="file.name"
|
||||
:src="file.objectURL"
|
||||
width="100"
|
||||
height="50"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
class="font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden"
|
||||
>{{ file.name }}</span
|
||||
>
|
||||
<div>{{ formatSize(file.size) }}</div>
|
||||
<Badge
|
||||
value="Completed"
|
||||
class="mt-4"
|
||||
severity="success"
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-times"
|
||||
@click="removeUploadedFileCallback(index)"
|
||||
outlined
|
||||
rounded
|
||||
severity="danger"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #empty>
|
||||
<div class="flex items-center justify-center flex-col">
|
||||
<i
|
||||
class="pi pi-cloud-upload border-2 rounded-full p-8 text-4xl text-muted-color"
|
||||
/>
|
||||
<p class="mt-6 mb-0">ویدیو را اینجا رها کنید</p>
|
||||
</div>
|
||||
</template>
|
||||
</FileUpload>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full flex gap-2 mt-4">
|
||||
<Button
|
||||
:label="$t('back')"
|
||||
outlined
|
||||
severity="secondary"
|
||||
class="ml-auto"
|
||||
@click="dialog.close()"
|
||||
/>
|
||||
<Button
|
||||
:label="$t('save')"
|
||||
icon="pi pi-save"
|
||||
severity="success"
|
||||
@click="save()"
|
||||
:loading="saving"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { inject, reactive, ref } from "vue";
|
||||
import { usePrimeVue } from "primevue/config";
|
||||
import { useToast } from "primevue/usetoast";
|
||||
import { useHeadlinesStore } from "@/stores/Headlines"
|
||||
const store = useHeadlinesStore()
|
||||
const dialog = inject("dialogRef");
|
||||
const type = ref();
|
||||
const produc = reactive(Object.assign({}, dialog.value.data));
|
||||
const sabt = () => {
|
||||
console.log(produc);
|
||||
};
|
||||
const videoStatus = ref(null);
|
||||
const setType = () => {
|
||||
if (type.value === "غیرفعال") {
|
||||
videoStatus.value = "DeActivate";
|
||||
}
|
||||
if (type.value === "تکمیل شده") {
|
||||
videoStatus.value = "Completed";
|
||||
}
|
||||
if (type.value === "درحال ضبط") {
|
||||
videoStatus.value = "Recording";
|
||||
}
|
||||
if (type.value === "به زودی...") {
|
||||
videoStatus.value = "Soon";
|
||||
}
|
||||
console.log("type:", videoStatus.value, produc.produc);
|
||||
console.log(type.value);
|
||||
};
|
||||
const headline = ref('');
|
||||
const description = ref('');
|
||||
const videoUrl = ref('');
|
||||
const $primevue = usePrimeVue();
|
||||
const toast = useToast();
|
||||
|
||||
const totalSize = ref(0);
|
||||
const totalSizePercent = ref(0);
|
||||
const files = ref([]);
|
||||
const course = ref(produc.produc)
|
||||
|
||||
const save = async() =>{
|
||||
const send = await store.create({
|
||||
headline: headline.value,
|
||||
description: description.value,
|
||||
course: produc.produc,
|
||||
videoUrl: 'https://dlearn.storage.iran.liara.space/test/1cb985c8-26a0-4120-824c-f496349e45bfmatt_devir--one_minute_drive_preview.webm',
|
||||
status: videoStatus.value
|
||||
})
|
||||
console.log('send', send);
|
||||
}
|
||||
|
||||
const onRemoveTemplatingFile = (file, removeFileCallback, index) => {
|
||||
removeFileCallback(index);
|
||||
totalSize.value -= parseInt(formatSize(file.size));
|
||||
totalSizePercent.value = totalSize.value / 10;
|
||||
};
|
||||
|
||||
const onClearTemplatingUpload = (clear) => {
|
||||
clear();
|
||||
totalSize.value = 0;
|
||||
totalSizePercent.value = 0;
|
||||
};
|
||||
|
||||
const onSelectedFiles = (event) => {
|
||||
files.value = event.files;
|
||||
files.value.forEach((file) => {
|
||||
totalSize.value += parseInt(formatSize(file.size));
|
||||
});
|
||||
};
|
||||
|
||||
const uploadEvent = (callback) => {
|
||||
totalSizePercent.value = totalSize.value / 10;
|
||||
callback();
|
||||
};
|
||||
|
||||
const onTemplatedUpload = () => {
|
||||
toast.add({
|
||||
severity: "info",
|
||||
summary: "Success",
|
||||
detail: "File Uploaded",
|
||||
life: 3000,
|
||||
});
|
||||
};
|
||||
|
||||
const formatSize = (bytes) => {
|
||||
const k = 1024;
|
||||
const dm = 3;
|
||||
const sizes = $primevue.config.locale.fileSizeTypes;
|
||||
|
||||
if (bytes === 0) {
|
||||
return `0 ${sizes[0]}`;
|
||||
}
|
||||
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
const formattedSize = parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
|
||||
|
||||
return `${formattedSize} ${sizes[i]}`;
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<section class="flex flex-col gap-6 w-96">
|
||||
<ul class="flex flex-col gap-5">
|
||||
|
||||
<li class="flex items-center justify-between">
|
||||
<video :src="head.product.videoUrl" autoplay></video>
|
||||
</li>
|
||||
<li class="flex items-center justify-between">
|
||||
<strong>{{ $t('عنوان') }}</strong>
|
||||
<div class="flex items-center gap-2 w-max">
|
||||
<!-- <i v-if="user.confirmEmail" class="pi pi-verified text-green-600"></i> -->
|
||||
<span>{{ head.product.headline }}</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-center justify-between">
|
||||
<strong>{{ $t('توضیحات') }}</strong>
|
||||
<span>{{ head.product.description }}</span>
|
||||
</li>
|
||||
<li class="flex items-center justify-between">
|
||||
<strong>{{ $t('تعداد نظرات') }}</strong>
|
||||
<span>{{ head.product.Comment.length }}</span>
|
||||
</li>
|
||||
<!--
|
||||
<li class="flex items-center justify-between">
|
||||
<strong>{{ $t('createdAt') }}</strong>
|
||||
<span>{{ jDate(user.product.createdAt) }}</span>
|
||||
</li>
|
||||
<li class="flex items-center justify-between">
|
||||
<strong>{{ $t('updatedAt') }}</strong>
|
||||
<span>{{ jDate(user.product.updatedAt) }}</span>
|
||||
</li>
|
||||
<li class="flex items-center justify-between">
|
||||
<strong>{{ $t('زمان دوره') }}</strong>
|
||||
<span>{{ user.product.duration }} ساعت</span>
|
||||
</li>
|
||||
<li class="flex items-center justify-between">
|
||||
<strong>{{ $t('زبان') }}</strong>
|
||||
<span>{{ user.product.language }}</span>
|
||||
</li>
|
||||
<li class="flex items-center justify-between">
|
||||
<strong>{{ $t('price') }}</strong>
|
||||
<span>{{ numberFormat(user.product.price) }} تومان</span>
|
||||
</li>
|
||||
<li class="flex items-center justify-between">
|
||||
<strong>{{ $t('تعداد دانشجو ها') }}</strong>
|
||||
<span>{{ user.product.studentsCount }}</span>
|
||||
</li>
|
||||
<li class="flex items-center justify-between">
|
||||
<strong>{{ $t('مدرس دوره') }}</strong>
|
||||
<span>{{ user.product.teacher.name }}</span>
|
||||
</li>
|
||||
<li class="flex items-center justify-between">
|
||||
<strong>{{ $t('حجم دوره') }}</strong>
|
||||
<span>{{ user.product.totalFileSize }} گیگابایت</span>
|
||||
</li>
|
||||
<li class="flex items-center justify-between">
|
||||
<strong>{{ $t('امتیاز دانشجویان') }}</strong>
|
||||
<span>{{ user.product.averageRating }}</span>
|
||||
</li> -->
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { inject, reactive } from 'vue';
|
||||
import { jDate } from '@/utils/jDate';
|
||||
import { numberFormat } from '@/utils/numberFormat';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const tabs = ref([
|
||||
{ title: 'Tab 1', content: 'Tab 1 Content', value: '0' },
|
||||
{ title: 'Tab 2', content: 'Tab 2 Content', value: '1' },
|
||||
{ title: 'Tab 3', content: 'Tab 3 Content', value: '2' }
|
||||
]);
|
||||
const dialog = inject('dialogRef')
|
||||
|
||||
const head = reactive(Object.assign({}, dialog.value.data))
|
||||
console.log('der', head);
|
||||
// const confirmToSales = (value) => {
|
||||
// dialog.value.data.confirm(user, value)
|
||||
// }
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
Reference in New Issue
Block a user