Последняя версия с сервера прошлого разработчика

resources/js/Pages/Music/Create.vue

@@ -0,0 +1,243 @@
+<template>
+  <meta-head title="Загрузить музыку"></meta-head>
+  <div class="mt-16 container mx-auto px-2 md:px-6 2xl:px-28 buttons-filter-line">
+    <form class=" bg-indigo-200 shadow-classic rounded-md p-5" @submit.prevent="submit">
+      <div class="mb-4 flex items-center text-gray-light text-lg font-medium">
+        <link-back class="default block hover:underline">
+          Вернуться
+        </link-back>
+        <span class="px-3">/</span>
+        <h1 class="text-gray">
+          Загрузка музыки
+        </h1>
+      </div>
+      <div class="space-y-5">
+        <div class="flex flex-col">
+          <text-input v-model="form.title" :error="form.errors.title"
+                      type="text" class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light"
+                      label="Название"
+          />
+          <warning-text />
+        </div>
+        <div class="flex flex-col">
+          <textarea-input v-model="form.body" :error="form.errors.body"
+                          class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md" cols="30"
+                          rows="4" label="Описание"
+          />
+        </div>
+
+        <div class="flex flex-col">
+          <file-input
+            v-model="form.preview"
+            accept="image/png, image/jpeg, image/jpg"
+            :error="form.errors.preview"
+            label="Загрузить превью"
+          />
+        </div>
+
+        <div class="flex flex-col">
+          <file-input-multiple-decode
+            v-model="form.musics"
+            accept=".mp3"
+            :error="form.errors.musics"
+            label="Выбрать музыку"
+            @fileTime="saveTimeFile"
+            @loadFileStart="incrementLoadFile"
+          />
+        </div>
+
+        <div class="text-gray-light">
+          <TagInput v-model="form.tags" />
+        </div>
+
+        <div>
+          <div class="text-gray-light text-lg mb-2">
+            Тип контента
+          </div>
+          <div class="flex flex-wrap gap-4">
+            <div class="flex items-center">
+              <input id="feed-paid-1" v-model="form.is_paid"
+                     value="0" type="radio"
+                     class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent"
+              >
+              <label for="feed-paid-1" class="select-none ml-3 text-gray">Бесплатный</label>
+            </div>
+            <div class="flex items-center">
+              <input id="feed-paid-2" v-model="form.is_paid"
+                     value="1" type="radio"
+                     class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent"
+              >
+              <label for="feed-paid-2" class="select-none ml-3 text-gray">Эксклюзивный</label>
+            </div>
+            <div v-if="authUser.private" class="flex items-center">
+              <input id="feed-paid-3" v-model="form.is_paid"
+                     value="2" type="radio"
+                     class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent"
+              >
+              <label for="feed-paid-3" class="select-none ml-3 text-gray">Доступен по личной подписке</label>
+            </div>
+          </div>
+        </div>
+
+        <!-- <div class="flex items-center">
+          <input id="is_adult_feed" v-model="form.is_adult"
+                 type="checkbox"
+                 class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent"
+          >
+          <label for="is_adult_feed" class="select-none ml-3 text-gray">Контент для взрослых</label>
+        </div> -->
+
+        <div v-if="form.is_paid == 1" class="space-y-5">
+          <div class="flex flex-col">
+            <text-input v-model="form.price" :error="form.errors.price"
+                        type="number" class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light"
+                        label="Цена"
+            />
+          </div>
+          <div class="flex flex-col">
+            <file-input-multiple-decode
+              v-model="form.musics_paid"
+              accept=".mp3"
+              :error="form.errors.musics_paid"
+              label="Выбрать музыку"
+              @fileTime="savePaidTimeFile"
+              @loadFileStart="incrementLoadFile"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="mt-12 flex flex-wrap -my-1 -mx-3">
+        <progress
+          v-if="form.progress"
+          class="mx-3 my-1 w-full"
+          :value="form.progress.percentage"
+          max="100"
+        >
+          {{ form.progress.percentage }}%
+        </progress>
+
+        <div v-if="!is_disabled_create">
+          <loading-button :loading="form.processing" class="mx-3 my-1 transition shadow-none hover:shadow-classic2 inline-flex items-center px-8 py-3 justify-center  text-base rounded-md text-white bg-orange focus:outline-none"
+                          type="submit"
+          >
+            Создать
+          </loading-button>
+          <link-back class="mx-3 my-1 transition shadow-none hover:shadow-classic inline-flex items-center px-8 py-3 justify-center text-base rounded-md text-white bg-indigo-300 focus:outline-none">
+            Отменить
+          </link-back>
+        </div>
+        <div v-else>
+          <button type="button" class="mx-3 my-1 transition shadow-none hover:shadow-classic2 inline-flex items-center px-8 py-3 justify-center  text-base rounded-md text-white bg-orange focus:outline-none ease-in-out duration-150 cursor-not-allowed"
+                  disabled
+          >
+            <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg"
+                 fill="none" viewBox="0 0 24 24"
+            ><circle class="opacity-25" cx="12"
+                     cy="12" r="10"
+                     stroke="currentColor" stroke-width="4"
+            ></circle><path class="opacity-75" fill="currentColor"
+                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            ></path></svg>
+            Обработка
+          </button>
+        </div>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+import { useForm, usePage } from '@inertiajs/inertia-vue3'
+import { ref, computed } from 'vue'
+
+import Layout from '@/Shared/Layout.vue'
+import MetaHead from '@/Shared/MetaHead.vue'
+import TextInput from '@/Shared/Form/TextInput.vue'
+import FileInputMultipleDecode from '@/Shared/Form/FileInputMultipleDecode.vue'
+import FileInput from '@/Shared/Form/FileInput.vue'
+import TextareaInput from '@/Shared/Form/TextareaInput.vue'
+import LoadingButton from '@/Shared/Form/LoadingButton.vue'
+import TagInput from '@/Shared/Form/TagInput.vue'
+import WarningText from '@/Shared/Misc/WarningText.vue'
+import LinkBack from '@/Shared/Misc/LinkBack.vue'
+
+export default {
+    components: {
+        MetaHead,
+        TextInput,
+        FileInput,
+        FileInputMultipleDecode,
+        LoadingButton,
+        TextareaInput,
+        TagInput,
+        WarningText,
+        LinkBack,
+    },
+    layout: Layout,
+
+    setup() {
+        let is_disabled_create = ref(0)
+        let countFiles = ref(0)
+        let countFilesLoaded = ref(0)
+
+        // let isFeedPaid = ref(0)
+        // let openPaidBlock = ref(0)
+
+        const form = useForm({
+            title: null,
+            body: null,
+            preview: null,
+            musics: null,
+            musics_paid: null,
+            price: null,
+            is_paid: 0,
+            times: [],
+            times_paid: [],
+            tags: [],
+        })
+
+        // watch(isFeedPaid, (value) => {
+        //     openPaidBlock.value = value
+        //     form.is_paid = value
+        // })
+
+        const submit = () => {
+            form.post(route('musics.store'))
+        }
+
+        const saveTimeFile = (time) => {
+            form.times.push(time)
+            countFilesLoaded.value++
+            if (countFilesLoaded.value === countFiles.value) {
+                is_disabled_create.value = 0
+            }
+        }
+        const savePaidTimeFile = (time) => {
+            form.times_paid.push(time)
+            countFilesLoaded.value++
+            if (countFilesLoaded.value === countFiles.value) {
+                is_disabled_create.value = 0
+            }
+        }
+        const incrementLoadFile = () => {
+            countFiles.value++
+            is_disabled_create.value = 1
+        }
+        const authUser = computed(() => usePage().props.value.auth.user)
+
+
+
+        return {
+            form,
+            submit,
+            saveTimeFile,
+            savePaidTimeFile,
+            incrementLoadFile,
+            is_disabled_create,
+            authUser,
+            // isFeedPaid,
+            // openPaidBlock,
+        }
+    },
+}
+</script>