OneAuth/oaweb/pages/index.vue

<!--
 * index.vue
 * Copyright (C) 2024 veypi <i@veypi.com>
 * 2024-05-31 17:10
 * Distributed under terms of the MIT license.
 -->

<template>
  <div>
    <div class="mb-20" v-if="ofApps.length > 0 && ready">
      <div class="flex justify-between">
        <h1 class="page-h1">{{ $t('c.myapps') }}</h1>
        <div class="my-5 mr-10">
          <div class='vbtn bg-gray-300' @click="new_flag = true" v-if="oaer.access().Get('app', '').CanCreate()">
            {{ $t('p.index.create') }}
          </div>
        </div>
      </div>
      <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 text-center">
        <div v-for="(item, k) in ofApps" class="flex items-center justify-center" :key="k">
          <Appcard :core="item" :is_part="true"></Appcard>
        </div>
      </div>
    </div>
    <div class="" v-if="apps.length > 0">
      <h1 class="page-h1">{{ $t('c.app store') }}</h1>
      <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 text-center">
        <div v-for="(item, k) in apps" class="flex items-center justify-center" :key="k">
          <Appcard :core="item" :is_part="false"></Appcard>
        </div>
      </div>
    </div>
    <UModal v-model="new_flag">
      <UCard>
        <template #header>
          <div class="text-h6">{{ $t('p.index.create') }} </div>
        </template>
        <div class="p-4">
          <Uploader @success="temp_app.icon = $event" dir="/pub/icon/">
            <!-- <img alt="LOGO" class="rounded-full w-16 h-16 mx-auto my-4" :src="temp_app.icon"> -->
            <div alt="LOGO" class="divimg rounded-full w-16 h-16 mx-auto" :style="`--bgurl:url('${temp_app.icon}')`">
            </div>
          </Uploader>
          <Vinput class="mt-4" v-model="temp_app.name" :validate="/^\w{2,}$/" :label="$t('c.appname')" type="text">
          </Vinput>
          <Vinput class='mt-12' v-model="temp_app.typ" type="radio"
            :options="{ 'public': $t('atyp.public'), 'apply': $t('atyp.apply'), 'private': $t('atyp.private') }"
            :validate="/^\w{2,}$/">
          </Vinput>
        </div>
        <template #footer>
          <div class='flex justify-end gap-4'>
            <div class="vbtn bg-vignore" @click="new_flag = false">{{ $t('c.cancel') }}</div>
            <div class="vbtn bg-vsuccess" @click="create_new">{{ $t('c.ok') }}</div>
          </div>
        </template>
      </UCard>
    </UModal>
  </div>
</template>

<script setup lang="ts">
import type { models } from '#imports';
import msg from '@veypi/msg';
import oaer from '@veypi/oaer';


let ready = useAppConfig().ready


let allApps = ref<models.App[]>([]);
let apps = computed(() => allApps.value.filter(e => e.user_status !== 'ok'))
let ofApps = computed(() => allApps.value.filter(e => e.user_status === 'ok'))

function getApps() {
  api.app.List({}).then(
    (e) => {
      allApps.value = e;
    }
  );
}
watch(() => ready.value, getApps)


let new_flag = ref(false);
let temp_app = ref({
  name: "",
  icon: '',
  typ: 'public',
});

function create_new() {
  api.app.Post({
    name: temp_app.value.name,
    icon: temp_app.value.icon,
    typ: temp_app.value.typ,
    status: "ok"
  }).then((e: models.App) => {
    ofApps.value.push(e);
    msg.Info("创建成功");
    new_flag.value = false;
  }).catch(e => {
    msg.Warn("创建失败: " + e);
  })
}
onMounted(() => {
  getApps();
});

</script>