github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

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

pull/2791/head
Braks 2 years ago committed by GitHub
parent
fbce86848b dbb6acfea1
commit
0108d41d43
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 76 additions and 43 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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);
}

Write Preview
Loading…
Cancel
Save