Admin tag category management

frontend/src/components/admin_next/router/index.js

@@ -6,6 +6,8 @@ import AdminSyncSetting from "../sync/AdminSyncSetting.vue";
 import AdminTagsList from "../tags/AdminTagsList.vue";
 import AdminTagsDetail from "../tags/AdminTagsDetail.vue";
 import AdminTagsForm from "../tags/AdminTagsForm.vue";
+import AdminTagCategoriesList from "../tag_categories/AdminTagCategoriesList.vue";
+import AdminTagCategoriesForm from "../tag_categories/AdminTagCategoriesForm.vue";
 import { Setting, User, Connection } from "@element-plus/icons-vue";
 import { useCookies } from 'vue3-cookies'
 
@@ -93,6 +95,26 @@ export const MENU_SETTING = [
     name: adminLocale.tags.tagDetailTitle,
     parentName: PARENT_NAME.BASE_CONFIG
   },
+  {
+    path: `${BASE_URL}/tag_categories`,
+    component: AdminTagCategoriesList,
+    name: adminLocale.tagCategories.title,
+    parentName: PARENT_NAME.BASE_CONFIG,
+    icon: 'admin-menu-cloud',
+    type: 'item'
+  },
+  {
+    path: `${BASE_URL}/tag_categories/new`,
+    component: AdminTagCategoriesForm,
+    name: adminLocale.tagCategories.create,
+    parentName: PARENT_NAME.BASE_CONFIG
+  },
+  {
+    path: `${BASE_URL}/tag_categories/:id/edit`,
+    component: AdminTagCategoriesForm,
+    name: adminLocale.tagCategories.edit,
+    parentName: PARENT_NAME.BASE_CONFIG
+  },
 ];
 
 export const menuRenderList = PARENT_NAME_LIST.reduce((acc, item) => {

frontend/src/components/admin_next/tag_categories/AdminTagCategoriesForm.vue

@@ -0,0 +1,198 @@
+<template>
+  <Container
+    :title="breadcrumbsTitle"
+    :showBack="true"
+    :breadcrumbs="[
+      {
+        text: $t('admin.tagCategories.title'),
+        to: `${BASE_URL}/tag_categories`
+      },
+      { text: breadcrumbsTitle }
+    ]"
+  >
+    <el-form
+      ref="dataFormRef"
+      :model="dataForm"
+      :rules="rules"
+      class="w-full flex flex-col gap-[14px]"
+      label-position="top"
+    >
+      <el-form-item
+        :label="$t('admin.tagCategories.name')"
+        prop="name"
+        class="w-full"
+      >
+        <el-input v-model="dataForm.name" />
+      </el-form-item>
+
+      <el-form-item
+        :label="$t('admin.tagCategories.showName')"
+        prop="show_name"
+        class="w-full"
+      >
+        <el-input v-model="dataForm.show_name" />
+      </el-form-item>
+
+      <el-form-item
+        :label="$t('admin.tagCategories.scope')"
+        prop="scope"
+        class="w-full"
+      >
+        <el-select v-model="dataForm.scope">
+          <el-option
+            label="Model"
+            value="model"
+          />
+          <el-option
+            label="Dataset"
+            value="dataset"
+          />
+          <el-option
+            label="Code"
+            value="code"
+          />
+          <el-option
+            label="Space"
+            value="space"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item
+        :label="$t('admin.tagCategories.enabled')"
+        prop="enabled"
+        class="w-full"
+      >
+        <el-switch
+          v-model="dataForm.enabled"
+          :active-value="true"
+          :inactive-value="false"
+          size="large"
+        />
+      </el-form-item>
+
+      <el-form-item class="w-full">
+        <div class="flex justify-end w-full">
+          <CsgButton
+            class="btn btn-primary btn-md"
+            :name="$t('admin.tagCategories.submit')"
+            @click="handleSubmit"
+          />
+        </div>
+      </el-form-item>
+    </el-form>
+  </Container>
+</template>
+
+<script setup>
+  import { Container } from '../admin_component'
+  import { ref, computed } from 'vue'
+  import useFetchApi from '../../../packs/useFetchApi'
+  import { ElMessage } from 'element-plus'
+  import { useRoute, useRouter } from 'vue-router'
+  import { BASE_URL } from '../router'
+  import { useI18n } from 'vue-i18n'
+
+  const { t } = useI18n()
+  const route = useRoute()
+  const router = useRouter()
+
+  const breadcrumbsTitle = computed(() =>
+    route.params.id
+      ? t('admin.tagCategories.editTitle')
+      : t('admin.tagCategories.newTitle')
+  )
+
+  const dataForm = ref({
+    name: '',
+    show_name: '',
+    scope: 'model',
+    enabled: true
+  })
+
+  if (route.params.id) {
+    dataForm.value = { ...route.query }
+    dataForm.value.enabled = route.query.enabled === 'true'
+  }
+
+  const dataFormRef = ref(null)
+  const rules = {
+    name: [
+      { required: true, message: 'Category name is required', trigger: 'blur' }
+    ],
+    scope: [{ required: true, message: 'Scope is required', trigger: 'change' }]
+  }
+
+  const handleSubmit = () => {
+    dataFormRef.value.validate((valid) => {
+      if (valid) {
+        createOrUpdate()
+      } else {
+        return false
+      }
+    })
+  }
+
+  const createOrUpdate = () => {
+    if (dataForm.value.id) {
+      update()
+    } else {
+      create()
+    }
+  }
+
+  const create = async () => {
+    const { data } = await useFetchApi('/tags/categories', {
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(dataForm.value)
+    })
+      .post()
+      .json()
+    if (data.value) {
+      ElMessage({
+        message: t('admin.createSuccess'),
+        type: 'success'
+      })
+      router.push({ path: '/admin_panel/tag_categories' })
+    } else {
+      ElMessage.error('Failed to create Tag Category')
+    }
+  }
+
+  const update = async () => {
+    const { data } = await useFetchApi(`/tags/categories/${dataForm.value.id}`, {
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(dataForm.value)
+    })
+      .put()
+      .json()
+    if (data.value) {
+      ElMessage({
+        message: t('admin.updateSuccess'),
+        type: 'success'
+      })
+      router.push('/admin_panel/tag_categories')
+    } else {
+      ElMessage.error('Failed to update Tag Category')
+    }
+  }
+</script>
+
+<style>
+  .el-form-item {
+    margin-bottom: 24px;
+  }
+  .el-form-item__label {
+    margin-bottom: 6px;
+  }
+  :deep(.el-input__wrapper) {
+    border-radius: 8px;
+  }
+  :deep(.el-textarea__inner) {
+    border-radius: 8px;
+  }
+</style>

frontend/src/components/admin_next/tag_categories/AdminTagCategoriesList.vue

@@ -0,0 +1,124 @@
+<template>
+  <Container
+    :title="$t('admin.tagCategories.title')"
+    subtitle=""
+    :breadcrumbs="[{ text: $t('admin.tagCategories.title') }]"
+  >
+    <div class="flex items-center justify-between gap-3 w-full pt-1">
+      <router-link
+        to="/admin_panel/tag_categories/new"
+        class="shrink-0"
+      >
+        <CsgButton
+          class="btn btn-primary btn-md"
+          :name="$t('admin.tagCategories.create')"
+        />
+      </router-link>
+    </div>
+    <Table
+      :title="$t('admin.tagCategories.listTitle')"
+      :data="categories"
+      size="small"
+      :border="false"
+      v-loading="loading"
+      class="custom-table"
+    >
+      <el-table-column
+        prop="name"
+        :label="$t('admin.tagCategories.name')"
+      />
+      <el-table-column
+        prop="show_name"
+        :label="$t('admin.tagCategories.showName')"
+      >
+        <template #default="{ row }">
+          {{ row.show_name || '-' }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="scope"
+        :label="$t('admin.tagCategories.scope')"
+      />
+      <el-table-column
+        prop="enabled"
+        :label="$t('admin.tagCategories.enabled')"
+      >
+        <template #default="{ row }">
+          {{ row.enabled ? 'Enabled' : 'Disabled' }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        :label="$t('admin.operations')"
+        width="260px"
+        fixed="right"
+      >
+        <template #default="scope">
+          <div class="flex gap-2">
+            <CsgButton
+              class="btn btn-primary btn-sm"
+              :name="$t('admin.tagCategories.edit')"
+              @click="
+                $router.push({
+                  path: `/admin_panel/tag_categories/${scope.row.id}/edit`,
+                  query: { ...scope.row }
+                })
+              "
+            />
+            <el-popconfirm
+              popper-class="evaluation-popconfirm"
+              :title="`${$t('admin.tagCategories.deleteConfirm')}?`"
+              @confirm="deleteCategory(scope.row)"
+            >
+              <template #reference>
+                <CsgButton
+                  class="btn btn-danger btn-sm px-[12px]"
+                  :name="$t('admin.tagCategories.delete')"
+                />
+              </template>
+            </el-popconfirm>
+          </div>
+        </template>
+      </el-table-column>
+    </Table>
+  </Container>
+</template>
+
+<script setup>
+  import { Container, Table } from '../admin_component'
+  import { ref, onMounted } from 'vue'
+  import useFetchApi from '@/packs/useFetchApi'
+  import { ElMessage } from 'element-plus'
+  import { useI18n } from 'vue-i18n'
+
+  const { t } = useI18n()
+
+  const categories = ref([])
+  const loading = ref(false)
+
+  const fetchCategories = async () => {
+    loading.value = true
+    const { data, error } = await useFetchApi('/tags/categories').json()
+    if (data.value) {
+      categories.value = data.value.data
+    } else {
+      ElMessage.error(error.value.msg)
+    }
+    loading.value = false
+  }
+
+  const deleteCategory = async (category) => {
+    const { response } = await useFetchApi(`/tags/categories/${category.id}`, {
+      method: 'DELETE'
+    }).json()
+    if (response.value.ok) {
+      ElMessage.success(t('admin.tagCategories.opSuccess'))
+      fetchCategories()
+    } else {
+      ElMessage.error('Failed to delete Tag Category')
+    }
+  }
+
+  onMounted(() => {
+    fetchCategories()
+  })
+</script>

frontend/src/locales/en_js/admin.js

@@ -1,6 +1,8 @@
 export const admin = {
   baseConfigTitle: 'Basic Settings',
   createSuccess: 'Create Success',
+  updateSuccess: 'Update Success',
+  operations: 'Operations',
   dashboard: {
     title: 'Admin Dashboard',
     intro: 'This is the admin panel, admin users can do the system settings here.'
@@ -45,5 +47,21 @@ export const admin = {
     newCategoryBtn: "New Category",
     editCancelBtn: 'Cancel',
     editConfirmBtn: 'Confirm',
+  },
+  tagCategories: {
+    title: 'Tag Category Management',
+    listTitle: 'Tag Category List',
+    newTitle: 'Create Tag Category',
+    editTitle: 'Edit Tag Category',
+    create: 'Create',
+    edit: 'Edit',
+    delete: 'Delete',
+    deleteConfirm: 'Confirm Delete',
+    opSuccess: 'Operation Success',
+    submit: 'Submit',
+    name: 'Name',
+    showName: 'Show Name',
+    scope: 'Scope',
+    enabled: 'Enabled',
   }
 }