site/resources/js/Pages/Settings/SettingsPacket.vue

<template>
  <meta-head title="Настроить оплату за подписку"></meta-head>

  <div class="xl:container xl:mx-auto px-2 md:px-3">
    <div class="mt-16 shadow-classic rounded-md bg-indigo-200">
      <div class="flex flex-col md:grid grid-cols-6 lg:grid-cols-5">
        <settings-menu />

        <div class="col-span-4">
          <div class="mx-4 2xl:mx-20 my-8">
            <form v-if="user.private" class="border-b border-indigo-400 pb-10 mt-10 grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-7  gap-5 lg:gap-10 items-start"
                  @submit.prevent="submit"
            >
              <div class="2xl:col-span-3 flex flex-col">
                <text-input v-model="form.price" :error="form.errors.price"
                            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="Цена подписки"
                            type="number"
                />
              </div>
              <div class="lg:col-span-2 2xl:col-span-1 2xl:mt-8">
                <loading-button :loading="form.processing" class="transition shadow-none hover:shadow-classic2 inline-flex items-center px-3 py-2.5 w-full justify-center  text-base rounded-md text-white bg-orange focus:outline-none"
                                type="submit"
                >
                  Обновить
                </loading-button>
              </div>
            </form>

            <hr />

            <div v-if="buyers.length || subscriptions.length" class="grid md:grid-cols-2 gap-3">
              <div v-if="buyers.length">
                <h2 class="mt-5 text-base text-gray-light font-medium">
                  Ваши платные подписчики
                </h2>
                <div class="mt-3 space-y-4">
                  <div v-for="buyer in buyers" :key="buyer.id"
                       class="bg-indigo-300 flex flex-col p-4 rounded-sm"
                  >
                    <div class="flex items-center">
                      <inertia-link :href="route('profile.user', buyer.user.username)" class="flex-shrink-0 block mr-2 md:mr-4">
                        <user-avatar :user="buyer.user" size="small"
                                     class="w-10 h-10 md:w-14 md:h-14 text-lg"
                        />
                      </inertia-link>
                      <inertia-link :href="route('profile.user', buyer.user.username)" class="flex flex-col">
                        <span class="hover:underline text-sm md:text-base block font-medium text-white">{{ buyer.user.first_name }} {{ buyer.user.last_name }}</span>
                      </inertia-link>
                    </div>
                    <div>
                      <ul>
                        <li v-for="list in buyer.lists" :key="list.time_end">
                          <span :class="[list.active ? 'text-green' : 'text-orange']" class="text-xs">
                            Дата окончания подписки: {{ list.time_end }}{{ list.active ? ' - активно' : '' }}. Цена {{ list.price }}
                          </span>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              <div v-if="subscriptions.length">
                <h2 class="mt-5 text-base text-gray-light font-medium">
                  Ваши платные подписки
                </h2>
                <div class="mt-3 space-y-4">
                  <div v-for="subscription in subscriptions" :key="subscription.id"
                       class="bg-indigo-300 flex flex-col p-4 rounded-sm"
                  >
                    <toggle
                      :user_id="subscription.user.id"
                      :enabled="subscription.autosubscription"
                      textin="Автоматическое списание отключено"
                      textout="Автоматическое списание включено" @clicked="makeAutoSubsUser"
                    />
                    <div class="mt-3 flex items-center gap-1">
                      <inertia-link :href="route('profile.user', subscription.user.username)" class="flex-shrink-0 block mr-2 md:mr-4">
                        <user-avatar :user="subscription.user" size="small"
                                     class="w-10 h-10 md:w-14 md:h-14 text-lg"
                        />
                      </inertia-link>
                      <inertia-link :href="route('profile.user', subscription.user.username)" class="flex flex-col">
                        <span class="hover:underline text-sm md:text-base block font-medium text-white">{{ subscription.user.first_name }} {{ subscription.user.last_name }}</span>
                      </inertia-link>

                      <div v-if="subscription.active === false" class="ml-auto text-gray-light text-xs">
                        <button class="hover:underline" @click="removePaidUser(subscription.user.id)">
                          Отписаться от пользователя
                        </button>
                      </div>
                    </div>
                    <div>
                      <ul>
                        <li v-for="list in subscription.lists" :key="list.time_end">
                          <span :class="[list.active ? 'text-green' : 'text-orange']" class="text-xs">
                            Дата окончания подписки: {{ list.time_end }}{{ list.active ? ' - активно' : '' }}. Цена {{ list.price }}
                          </span>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-else class="mt-10 text-gray-light text-lg">
              Данных нет!
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useForm } from '@inertiajs/inertia-vue3'
import { Inertia } from '@inertiajs/inertia'
import { toRefs } from 'vue'
import UserAvatar from '@/Shared/Misc/UserAvatar.vue'
import Layout from '@/Shared/Layout.vue'
import SettingsMenu from '@/Shared/LayoutParts/SettingsMenu.vue'
import MetaHead from '@/Shared/MetaHead.vue'
import LoadingButton from '@/Shared/Form/LoadingButton.vue'
import TextInput from '@/Shared/Form/TextInput.vue'
import Toggle from '@/Shared/Form/Toggle.vue'

export default {
    components: {
        MetaHead,
        SettingsMenu,
        LoadingButton,
        TextInput,
        UserAvatar,
        Toggle
    },
    layout: Layout,
    props: {
        user: Object,
        packet: Object,
        buyers: Array,
        subscriptions: Array,
    },
    setup(props) {
        const { user, packet } = toRefs(props)
        const form = useForm({
            id: packet.value?.id,
            price: packet.value?.price,
            user: user.value.id,
        })

        const submit = () => {
            form.post(route('user.package.update'))
        }

        const removePaidUser = (id) => {
            Inertia.post(route('users.removePaidSubs', id), {
                preserveScroll: true,
                preserveState: true,
            })
        }
        const makeAutoSubsUser = (id) => {
            Inertia.post(route('users.settingsPaidSubsUser', id), {
                preserveScroll: true,
                preserveState: true,
            })
        }


        return { form,  submit, removePaidUser, makeAutoSubsUser }

    },

}
</script>