Browse Source

Merge pull request #2757 from nocodb/feat/user-settings

pull/2791/head
Braks 2 years ago committed by GitHub
parent
commit
0108d41d43
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 7
      packages/nc-gui-v2/pages/index/index.vue
  2. 4
      packages/nc-gui-v2/pages/index/index/index.vue
  3. 46
      packages/nc-gui-v2/pages/index/index/list.vue
  4. 20
      packages/nc-gui-v2/pages/index/user/index.vue
  5. 42
      packages/nc-gui-v2/pages/index/user/index/index.vue

7
packages/nc-gui-v2/pages/index/index.vue

@ -1,5 +1,4 @@
<script lang="ts" setup>
import { createVNode } from '@vue/runtime-core'
import { Modal } from 'ant-design-vue'
import type { ProjectType } from 'nocodb-sdk'
import { useToast } from 'vue-toastification'
@ -10,7 +9,6 @@ import MaterialSymbolsGridView from '~icons/material-symbols/grid-view'
import MdiPlus from '~icons/mdi/plus'
import MdiDatabaseOutline from '~icons/mdi/database-outline'
import MdiFolderOutline from '~icons/mdi/folder-outline'
import ExclamationCircleOutlined from '~icons/mdi/information-outline'
const navDrawerOptions = [
{
@ -34,9 +32,11 @@ const navDrawerOptions = [
const route = useRoute()
const { $api } = useNuxtApp()
const { $api, $state } = useNuxtApp()
const toast = useToast()
$state.sidebarOpen.value = false
const response = await $api.project.list({})
const projects = $ref(response.list)
const activePage = $ref(navDrawerOptions[0].title)
@ -59,7 +59,6 @@ const deleteProject = (project: ProjectType) => {
})
}
console.log(route.name)
const visible = ref(true)
</script>

4
packages/nc-gui-v2/pages/index/index/index.vue

@ -9,10 +9,10 @@ import MdiDatabaseOutline from '~icons/mdi/database-outline'
import MdiEditOutline from '~icons/mdi/edit-outline'
interface Props {
projects: ProjectType[]
projects?: ProjectType[]
}
const { projects } = defineProps<Props>()
const { projects = [] } = defineProps<Props>()
const emit = defineEmits(['delete-project'])

46
packages/nc-gui-v2/pages/index/index/list.vue

@ -6,10 +6,10 @@ import MdiDeleteOutline from '~icons/mdi/delete-outline'
import MdiEditOutline from '~icons/mdi/edit-outline'
interface Props {
projects: ProjectType[]
projects?: ProjectType[]
}
const { projects } = defineProps<Props>()
const { projects = [] } = defineProps<Props>()
const emit = defineEmits(['delete-project'])
@ -22,28 +22,26 @@ const openProject = async (project: ProjectType) => {
</script>
<template>
<div class="mx-auto max-w-[700px]">
<div class="grid grid-cols-4 gap-2 prose-md p-2 font-semibold">
<div>{{ $t('general.title') }}</div>
<div>Updated At</div>
<div></div>
</div>
<v-divider class="col-span-3" />
<div class="grid grid-cols-4 gap-2 prose-md p-2 font-semibold">
<div>{{ $t('general.title') }}</div>
<div>Updated At</div>
<div></div>
</div>
<template v-for="project of projects" :key="project.id">
<div
class="cursor-pointer grid grid-cols-4 gap-2 prose-md hover:(bg-gray-100 shadow-sm dark:text-black) p-2 transition-color ease-in duration-100"
@click="openProject(project)"
>
<div class="font-semibold">{{ project.title || 'Untitled' }}</div>
<div>{{ project.updated_at }}</div>
<div>
<MdiDeleteOutline class="text-gray-500 hover:text-red-500 mr-2" @click.stop @click="emit('delete-project', project)" />
<MdiEditOutline class="text-gray-500 hover:text-primary mr-2" @click.stop />
</div>
<v-divider class="col-span-3" />
<template v-for="project of projects" :key="project.id">
<div
class="cursor-pointer grid grid-cols-4 gap-2 prose-md hover:(bg-gray-100 shadow-sm dark:text-black) p-2 transition-color ease-in duration-100"
@click="openProject(project)"
>
<div class="font-semibold">{{ project.title || 'Untitled' }}</div>
<div>{{ project.updated_at }}</div>
<div>
<MdiDeleteOutline class="text-gray-500 hover:text-red-500 mr-2" @click.stop @click="emit('delete-project', project)" />
<MdiEditOutline class="text-gray-500 hover:text-primary mr-2" @click.stop />
</div>
<v-divider class="col-span-3" />
</template>
</div>
</div>
<v-divider class="col-span-3" />
</template>
</template>

20
packages/nc-gui-v2/pages/index/user/index.vue

@ -1,25 +1,39 @@
<script setup lang="ts">
import { useNuxtApp, useRoute } from '#app'
import { navigateTo, useNuxtApp, useRoute } from '#app'
import MdiAccountCog from '~icons/mdi/account-cog'
import MdiFolderOutline from '~icons/mdi/folder-outline'
const { $api } = useNuxtApp()
const route = useRoute()
const navDrawerOptions = [
{
title: 'My NocoDB',
route: '/',
icon: MdiFolderOutline,
},
{
title: 'Settings',
route: '/user',
icon: MdiAccountCog,
},
]
const selectedKey = computed(() => [navDrawerOptions.findIndex((opt) => opt.route === route.path)])
</script>
<template>
<NuxtLayout>
<template #sidebar>
<div class="flex flex-col h-full">
<a-menu :selected-keys="[0]" class="pr-4 dark:bg-gray-800 dark:text-white flex-1 border-0">
<a-menu-item v-for="(option, index) in navDrawerOptions" :key="index" class="!rounded-r-lg">
<a-menu :selected-keys="selectedKey" class="pr-4 dark:bg-gray-800 dark:text-white flex-1 border-0">
<a-menu-item
v-for="(option, index) in navDrawerOptions"
:key="index"
class="!rounded-r-lg"
@click="navigateTo(option.route)"
>
<div class="flex items-center gap-4">
<component :is="option.icon" />

42
packages/nc-gui-v2/pages/index/user/index/index.vue

@ -1,12 +1,13 @@
<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
import { message } from 'ant-design-vue'
import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
import { useNuxtApp } from '#app'
import MaterialSymbolsWarning from '~icons/material-symbols/warning'
import MaterialSymbolsRocketLaunchOutline from '~icons/material-symbols/rocket-launch-outline'
import { reactive, ref } from '#imports'
import MaterialSymbolsWarning from '~icons/material-symbols/warning'
import MdiKeyChange from '~icons/mdi/key-change'
const { $api } = useNuxtApp()
const { $api, $state } = useNuxtApp()
const { t } = useI18n()
@ -51,8 +52,11 @@ const passwordChange = async () => {
error = null
try {
const { msg } = await $api.auth.passwordChange(form)
console.log(msg)
const { msg } = await $api.auth.passwordChange({
currentPassword: form.currentPassword,
newPassword: form.password,
})
message.success(msg)
} catch (e: any) {
error = await extractSdkResponseErrorMsg(e)
}
@ -67,7 +71,10 @@ const resetError = () => {
<template>
<a-form ref="formValidator" layout="vertical" :model="form" class="change-password h-full w-full" @finish="passwordChange">
<div class="md:relative flex flex-col gap-2 w-full h-full p-8 max-w-1/2">
<div
class="md:relative flex flex-col gap-2 w-full h-full p-8 lg:(max-w-1/2)"
:class="{ 'mx-auto': !$state.sidebarOpen.value }"
>
<h1 class="prose-2xl font-bold mb-4">{{ $t('activity.changePwd') }}</h1>
<Transition name="layout">
@ -76,9 +83,9 @@ const resetError = () => {
</div>
</Transition>
<a-form-item :label="$t('placeholder.password.current')" name="currentPassword" :rules="formRules.password">
<a-form-item :label="$t('placeholder.password.current')" name="currentPassword" :rules="formRules.currentPassword">
<a-input-password
v-model:value="form.password"
v-model:value="form.currentPassword"
size="large"
class="password"
:placeholder="$t('placeholder.password.current')"
@ -86,7 +93,7 @@ const resetError = () => {
/>
</a-form-item>
<a-form-item :label="$t('placeholder.password.new')" name="newPassword" :rules="formRules.password">
<a-form-item :label="$t('placeholder.password.new')" name="password" :rules="formRules.password">
<a-input-password
v-model:value="form.password"
size="large"
@ -108,7 +115,7 @@ const resetError = () => {
<div class="flex flex-wrap gap-4 items-center mt-4 md:justify-between w-full">
<button class="submit" type="submit">
<span class="flex items-center gap-2"><MaterialSymbolsRocketLaunchOutline /> {{ $t('activity.changePwd') }}</span>
<span class="flex items-center gap-2"><MdiKeyChange /> {{ $t('activity.changePwd') }}</span>
</button>
</div>
</div>
@ -117,6 +124,21 @@ const resetError = () => {
<style lang="scss">
.change-password {
.ant-input-affix-wrapper,
.ant-input {
@apply dark:(!bg-gray-700 !text-white) !appearance-none my-1 border-1 border-solid border-primary/50 rounded;
}
.password {
input {
@apply !border-none;
}
.ant-input-password-icon {
@apply dark:!text-white;
}
}
.submit {
@apply ml-1 bordered border-gray-300 rounded-lg p-4 bg-gray-100/50 text-white bg-primary hover:bg-primary/75 dark:(!bg-secondary/75 hover:!bg-secondary/50);
}

Loading…
Cancel
Save