芝麻web文件管理V1.00

编辑当前文件:/home/pulsehostuk9/www/invoicer.pulsehost.co.uk/resources/scripts/admin/views/modules/View.vue

<div
        class="
          max-w-2xl
          mx-auto
          mt-10
          lg:max-w-none lg:mt-0 lg:row-end-2 lg:row-span-2 lg:col-span-3
          w-full
        "
      >

<h3 class="sr-only">Reviews</h3>

<div class="flex items-center">
          <BaseRating :rating="averageRating" />
        </div>
        <p class="sr-only">4 out of 5 stars</p>

<div class="flex flex-col-reverse">
          <div class="mt-4">
            <h1
              class="
                text-2xl
                font-extrabold
                tracking-tight
                text-gray-900
                sm:text-3xl
              "
            >
              {{ moduleData.name }}
            </h1>

<h2 id="information-heading" class="sr-only">
              Product information
            </h2>

<p
              v-if="moduleData.latest_module_version"
              class="text-sm text-gray-500 mt-2"
            >
              {{ $t('modules.version') }}
              {{ moduleVersion }} ({{ $t('modules.last_updated') }}
              {{ updatedAt }})
            </p>
          </div>
        </div>

<div
          class="prose prose-sm max-w-none text-gray-500 text-sm my-10"
          v-html="moduleData.long_description"
        />

<div v-if="!moduleData.purchased">
          <RadioGroup v-model="selectedPlan">
            <RadioGroupLabel class="sr-only"> Pricing plans </RadioGroupLabel>
            <div class="relative bg-white rounded-md -space-y-px">
              <RadioGroupOption
                v-for="(size, sizeIdx) in modulePrice"
                :key="size.name"
                v-slot="{ checked, active }"
                as="template"
                :value="size"
              >
                <div
                  :class="[
                    sizeIdx === 0 ? 'rounded-tl-md rounded-tr-md' : '',
                    sizeIdx === modulePrice.length - 1
                      ? 'rounded-bl-md rounded-br-md'
                      : '',
                    checked
                      ? 'bg-primary-50 border-primary-200 z-10'
                      : 'border-gray-200',
                    'relative border p-4 flex flex-col cursor-pointer md:pl-4 md:pr-6 md:grid md:grid-cols-2 focus:outline-none',
                  ]"
                >
                  <div class="flex items-center text-sm">
                    <span
                      :class="[
                        checked
                          ? 'bg-primary-600 border-transparent'
                          : 'bg-white border-gray-300',
                        active ? 'ring-2 ring-offset-2 ring-primary-500' : '',
                        'h-4 w-4 rounded-full border flex items-center justify-center',
                      ]"
                      aria-hidden="true"
                    >
                      <span class="rounded-full bg-white w-1.5 h-1.5" />
                    </span>
                    <RadioGroupLabel
                      as="span"
                      :class="[
                        checked ? 'text-primary-900' : 'text-gray-900',
                        'ml-3 font-medium',
                      ]"
                    >
                      {{ size.name }}
                    </RadioGroupLabel>
                  </div>
                  <RadioGroupDescription
                    class="ml-6 pl-1 text-base md:ml-0 md:pl-0 md:text-center"
                  >
                    <span
                      :class="[
                        checked ? 'text-primary-900' : 'text-gray-900',
                        'font-medium',
                      ]"
                    >
                      $ {{ size.price }}
                    </span>
                  </RadioGroupDescription>
                </div>
              </RadioGroupOption>
            </div>
          </RadioGroup>
        </div>

<a
          v-if="!moduleData.purchased"
          :href="`${globalStore.config.base_url}/modules/${moduleData.slug}`"
          target="_blank"
          class="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2"
        >
          <BaseButton
            size="xl"
            class="items-center flex justify-center text-base mt-10"
          >
            <BaseIcon name="ShoppingCartIcon" class="mr-2" />
            {{ $t('modules.buy_now') }}
          </BaseButton>
        </a>

<div v-else>
          
          <div
            v-if="!moduleData.installed"
            class="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2"
          >
            <BaseButton
              v-if="moduleData.latest_module_version"
              size="xl"
              variant="primary-outline"
              outline
              :loading="isInstalling"
              :disabled="isInstalling"
              class="mr-4 flex items-center justify-center text-base"
              @click="installModule()"
            >
              <BaseIcon v-if="!isInstalling" name="DownloadIcon" class="mr-2" />
              {{ $t('modules.install') }}
            </BaseButton>
          </div>

<div v-else-if="isModuleInstalled">

<div class="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2">
              <BaseButton
                v-if="moduleData.update_available"
                variant="primary"
                size="xl"
                :loading="isInstalling"
                :disabled="isInstalling"
                class="mr-4 flex items-center justify-center text-base"
                @click="installModule()"
              >
                {{ $t('modules.update_to') }}
                <span class="ml-2">{{ moduleData.latest_module_version }}</span>
              </BaseButton>

<BaseButton
                v-if="moduleData.enabled"
                variant="danger"
                size="xl"
                :loading="isDisabling"
                :disabled="isDisabling"
                class="mr-4 flex items-center justify-center text-base"
                @click="disableModule"
              >
                <BaseIcon v-if="!isDisabling" name="BanIcon" class="mr-2" />
                {{ $t('modules.disable') }}
              </BaseButton>
              <BaseButton
                v-else
                variant="primary-outline"
                size="xl"
                :loading="isEnabling"
                :disabled="isEnabling"
                class="mr-4 flex items-center justify-center text-base"
                @click="enableModule"
              >
                <BaseIcon v-if="!isEnabling" name="CheckIcon" class="mr-2" />
                {{ $t('modules.enable') }}
              </BaseButton>
            </div>
          </div>
        </div>

<div class="border-t border-gray-200 mt-10 pt-10">
          <h3 class="text-sm font-medium text-gray-900">
            {{ $t('modules.what_you_get') }}
          </h3>
          <div class="mt-4 prose prose-sm max-w-none text-gray-500">
            <div
              class="prose prose-sm max-w-none text-gray-500 text-sm"
              v-html="moduleData.highlights"
            />
          </div>
        </div>
        <div class="border-t border-gray-200 mt-10 pt-10">
          <div
            v-for="(link, key) in moduleData.links"
            :key="key"
            class="mb-4 last:mb-0 flex"
          >
            <BaseIcon :name="link.icon" class="mr-4" />
            <a :href="link.link" class="text-primary-500" target="_blank">
              {{ link.label }}
            </a>
          </div>
        </div>
        
        <div v-if="isInstalling" class="border-t border-gray-200 mt-10 pt-10">
          <ul class="w-full p-0 list-none">
            <li
              v-for="step in installationSteps"
              :key="step.stepUrl"
              class="
                flex
                justify-between
                w-full
                py-3
                border-b border-gray-200 border-solid
                last:border-b-0
              "
            >
              <p class="m-0 text-sm leading-8">
                {{ $t(step.translationKey) }}
              </p>
              <div class="flex flex-row items-center">
                <span v-if="step.time" class="mr-3 text-xs text-gray-500">
                  {{ step.time }}
                </span>
                <span
                  :class="statusClass(step)"
                  class="block py-1 text-sm text-center uppercase rounded-full"
                  style="width: 88px"
                >
                  {{ getStatus(step) }}
                </span>
              </div>
            </li>
          </ul>
        </div>

</div>

<div
        class="
          w-full
          max-w-2xl
          mx-auto
          mt-16
          lg:max-w-none lg:mt-0 lg:col-span-4
        "
      >
        <TabGroup as="div">
          <TabList class="-mb-px flex space-x-8 border-b border-gray-200">
            <Tab v-slot="{ selected }" as="template">
              <button
                :class="[
                  selected
                    ? 'border-primary-600 text-primary-600'
                    : 'border-transparent text-gray-700 hover:text-gray-800 hover:border-gray-300',
                  'whitespace-nowrap py-6 border-b-2 font-medium text-sm',
                ]"
              >
                {{ $t('modules.customer_reviews') }}
              </button>
            </Tab>
            <Tab v-slot="{ selected }" as="template">
              <button
                :class="[
                  selected
                    ? 'border-primary-600 text-primary-600'
                    : 'border-transparent text-gray-700 hover:text-gray-800 hover:border-gray-300',
                  'whitespace-nowrap py-6 border-b-2 font-medium text-sm',
                ]"
              >
                {{ $t('modules.faq') }}
              </button>
            </Tab>
            <Tab v-slot="{ selected }" as="template">
              <button
                :class="[
                  selected
                    ? 'border-primary-600 text-primary-600'
                    : 'border-transparent text-gray-700 hover:text-gray-800 hover:border-gray-300',
                  'whitespace-nowrap py-6 border-b-2 font-medium text-sm',
                ]"
              >
                {{ $t('modules.license') }}
              </button>
            </Tab>
          </TabList>
          <TabPanels as="template">
            
            <TabPanel class="-mb-10">
              <h3 class="sr-only">Customer Reviews</h3>
              <div v-if="moduleData.reviews.length">
                <div
                  v-for="(review, reviewIdx) in moduleData.reviews"
                  :key="reviewIdx"
                  class="flex text-sm text-gray-500 space-x-4"
                >
                  <div class="flex-none py-10">
                    <span
                      class="
                        inline-flex
                        items-center
                        justify-center
                        h-12
                        w-12
                        rounded-full
                        bg-gray-500
                      "
                    >
                      <span
                        class="
                          text-lg
                          font-medium
                          leading-none
                          text-white
                          uppercase
                        "
                        >{{ review.customer.name[0] }}</span
                      >
                    </span>
                  </div>
                  <div
                    :class="[
                      reviewIdx === 0 ? '' : 'border-t border-gray-200',
                      'py-10',
                    ]"
                  >
                    <h3 class="font-medium text-gray-900">
                      {{ review.customer.name }}
                    </h3>
                    <p>
                      {{ moment(review.created_at).format('MMMM Do YYYY') }}
                    </p>

<div
                      class="mt-4 prose prose-sm max-w-none text-gray-500"
                      v-html="review.feedback"
                    />
                  </div>
                </div>
              </div>
              <div v-else class="flex w-full items-center justify-center">
                <p class="text-gray-500 mt-10 text-sm">
                  {{ $t('modules.no_reviews_found') }}
                </p>
              </div>
            </TabPanel>

<TabPanel as="dl" class="text-sm text-gray-500">
              <h3 class="sr-only">Frequently Asked Questions</h3>

<template v-for="faq in moduleData.faq" :key="faq.question">
                <dt class="mt-10 font-medium text-gray-900">
                  {{ faq.question }}
                </dt>
                <dd class="mt-2 prose prose-sm max-w-none text-gray-500">
                  <p>{{ faq.answer }}</p>
                </dd>
              </template>
            </TabPanel>

<TabPanel class="pt-10">
              <h3 class="sr-only">License</h3>

<div
      v-if="otherModules && otherModules.length"
      class="mt-24 sm:mt-32 lg:max-w-none"
    >
      <div class="flex items-center justify-between space-x-4">
        <h2 class="text-lg font-medium text-gray-900">
          {{ $t('modules.other_modules') }}
        </h2>
        <a
          href="/admin/modules"
          class="
            whitespace-nowrap
            text-sm
            font-medium
            text-primary-600
            hover:text-primary-500
          "
          >{{ $t('modules.view_all')
          }}<span aria-hidden="true"> →</span></a
        >
      </div>
      <div
        class="
          mt-6
          grid grid-cols-1
          gap-x-8 gap-y-8
          sm:grid-cols-2 sm:gap-y-10
          lg:grid-cols-4
        "
      >
        <div v-for="(other, moduleIdx) in otherModules" :key="moduleIdx">
          <RecentModuleCard :data="other" />
        </div>
      </div>
    </div>

const moduleStore = useModuleStore()
const notificationStore = useNotificationStore()
const dialogStore = useDialogStore()

const route = useRoute()
const { t } = useI18n()
let isInstalling = ref(false)
let isFetchingInitialData = ref(true)
let displayImage = ref('')
let isEnabling = ref(false)
let isDisabling = ref(false)
let isUpdating = ref(false)

loadData()

watch(
  () => route.params.slug,
  async (newSlug) => {
    loadData()
  }
)

const moduleData = computed(() => {
  return moduleStore.currentModule.data
})

const modulePrice = computed(() => {
  let priceList = []

let monthlyPrice = reactive({
    name: t('modules.monthly'),
    price: moduleData?.value?.monthly_price / 100,
  })

let yearlyPrice = reactive({
    name: t('modules.yearly'),
    price: moduleData?.value?.yearly_price / 100,
  })

if (typeYearly.value) {
    priceList.push(yearlyPrice)
  } else if (typeMonthly.value) {
    priceList.push(monthlyPrice)
  } else {
    priceList.push(monthlyPrice)
    priceList.push(yearlyPrice)
  }

return priceList
})

const typeYearly = computed(() => {
  if (moduleData.value) {
    return moduleData.value.type === 'YEARLY'
  }

return false
})

const typeMonthly = computed(() => {
  if (moduleData.value) {
    return moduleData.value.type === 'MONTHLY'
  }

return false
})

const isModuleInstalled = computed(() => {
  if (moduleData.value.installed && moduleData.value.latest_module_version) {
    return true
  }
  return false
})

const otherModules = computed(() => {
  return moduleStore.currentModule.meta.modules
})

let updatedAt = computed(() => {
  let latest = ref(moduleData.value.latest_module_version_updated_at)
  let installed = ref(moduleData.value.installed_module_version_updated_at)

const date = installed.value ? installed.value : latest.value

return moment(date).format('MMMM Do YYYY')
})

let moduleVersion = computed(() => {
  let latest = ref(moduleData.value.latest_module_version)
  let installed = ref(moduleData.value.installed_module_version)

let data = installed.value ? installed.value : latest.value

return data
})

let averageRating = computed(() => {
  return parseInt(moduleData.value.average_rating)
})

const displayImages = computed(() => {
  let images = reactive([])

let cover = reactive({
    id: null,
    url: moduleData.value.cover,
  })

images.push(cover)

if (moduleData.value.screenshots) {
    moduleData.value.screenshots.forEach((image) => {
      images.push(image)
    })
  }

return images
})

const displayVideo = ref(false)

const thumbnail = ref(null)

const videoUrl = ref(null)

const selectedPlan = ref(modulePrice.value[0])

const installationSteps = reactive([
  {
    translationKey: 'modules.download_zip_file',
    stepUrl: '/api/v1/modules/download',
    time: null,
    started: false,
    completed: false,
  },
  {
    translationKey: 'modules.unzipping_package',
    stepUrl: '/api/v1/modules/unzip',
    time: null,
    started: false,
    completed: false,
  },
  {
    translationKey: 'modules.copying_files',
    stepUrl: '/api/v1/modules/copy',
    time: null,
    started: false,
    completed: false,
  },
  {
    translationKey: 'modules.completing_installation',
    stepUrl: '/api/v1/modules/complete',
    time: null,
    started: false,
    completed: false,
  },
])

async function installModule() {
  let path = null

for (let index = 0; index < installationSteps.length; index++) {
    let currentStep = installationSteps[index]

try {
      isInstalling.value = true
      currentStep.started = true
      let updateParams = {
        version: moduleData.value.latest_module_version,
        path: path || null,
        module: moduleData.value.module_name,
      }

let requestResponse = await axios.post(currentStep.stepUrl, updateParams)

currentStep.completed = true
      if (requestResponse.data) {
        path = requestResponse.data.path
      }

if (!requestResponse.data.success) {
        let displayMsg = ref('')

if (
          requestResponse.data.message === 'invoiceshelf_version_is_not_supported'
        ) {
          displayMsg.value = t('modules.version_not_supported', {
            version: requestResponse.data.min_invoiceshelf_version,
          })
        } else {
          displayMsg.value = getErrorMessage(requestResponse.data.message)
        }

notificationStore.showNotification({
          type: 'error',
          message: displayMsg.value,
        })

isInstalling.value = false
        currentStep.started = false
        currentStep.completed = true
        return false
      }
      if (currentStep.translationKey == 'modules.completing_installation') {
        isInstalling.value = false
        notificationStore.showNotification({
          type: 'success',
          message: t('modules.install_success'),
        })

setTimeout(() => {
          location.reload()
        }, 1500)
      }
    } catch (error) {
      isInstalling.value = false
      currentStep.started = false
      currentStep.completed = true
      return false
    }
  }
}

function getErrorMessage(message) {
  let msg = ref('')

switch (message) {
    case 'module_not_found':
      msg = t('modules.module_not_found')
      break

case 'module_not_purchased':
      msg = t('modules.module_not_purchased')
      break

case 'version_not_supported':
      msg = t('modules.version_not_supported')
      break

default:
      msg = message
      break
  }

return msg
}

async function loadData() {
  if (!route.params.slug) {
    return
  }

isFetchingInitialData.value = true
  await moduleStore.fetchModule(route.params.slug).then((response) => {
    selectedPlan.value = modulePrice.value[0]

videoUrl.value = moduleData.value.video_link
    thumbnail.value = moduleData.value.video_thumbnail

if (videoUrl.value) {
      setDisplayVideo()
      isFetchingInitialData.value = false
      return
    }
    displayImage.value = moduleData.value.cover
    isFetchingInitialData.value = false
    return
  })
}

function statusClass(step) {
  const status = getStatus(step)

switch (status) {
    case 'pending':
      return 'text-primary-800 bg-gray-200'
    case 'finished':
      return 'text-teal-500 bg-teal-100'
    case 'running':
      return 'text-blue-400 bg-blue-100'
    case 'error':
      return 'text-danger bg-red-200'
    default:
      return ''
  }
}

function disableModule() {
  dialogStore
    .openDialog({
      title: t('general.are_you_sure'),
      message: t('modules.disable_warning'),
      yesLabel: t('general.ok'),
      noLabel: t('general.cancel'),
      variant: 'danger',
      hideNoButton: false,
      size: 'lg',
    })
    .then(async (res) => {
      if (res) {
        isDisabling.value = true
        await moduleStore
          .disableModule(moduleData.value.module_name)
          .then((res) => {
            if (res.data.success) {
              moduleData.value.enabled = 0
              isDisabling.value = false

setTimeout(() => {
                location.reload()
              }, 1500)
              return
            }
          })
        isDisabling.value = false
        return
      }
    })
}

async function enableModule() {
  isEnabling.value = true

await moduleStore.enableModule(moduleData.value.module_name).then((res) => {
    if (res.data.success) {
      moduleData.value.enabled = 1

setTimeout(() => {
        location.reload()
      }, 1500)
    }
    isEnabling.value = false
    return
  })
  isEnabling.value = false
  return
}

function getStatus(step) {
  if (step.started && step.completed) {
    return 'finished'
  } else if (step.started && !step.completed) {
    return 'running'
  } else if (!step.started && !step.completed) {
    return 'pending'
  } else {
    return 'error'
  }
}

function setDisplayImage(url) {
  displayVideo.value = false
  displayImage.value = url
}

function setDisplayVideo() {
  displayVideo.value = true
  displayImage.value = null
}
</script>