imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: acct mgmt search bar and data grid header.

Browse Source
This commit is contained in:
Cindy Chang
2024-06-19 11:35:16 +08:00
parent 96ee2eb7fb
commit 69835ad05b
5 changed files with 39 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/icon-search.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.5 19C15.1944 19 19 15.1944 19 10.5C19 5.80558 15.1944 2 10.5 2C5.80558 2 2 5.80558 2 10.5C2 15.1944 5.80558 19 10.5 19Z" stroke="#4E5969" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M21 21L17 17" stroke="#4E5969" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 430 B

12
src/components/AccountMenu/SearchBar.vue
View File

@@ -1,13 +1,21 @@
<template>
<div id="search_bar_container" class="w-[280px] h-8 px-4 border-[#64748B] border-[1px] rounded-full ">
<div id="search_bar_container" class="flex w-[280px] h-8 px-4 items-center border-[#64748B] border-[1px] rounded-full
justify-between">
<input id="input_search" class="w-full outline-0" :placeholder="i18next.t('AcctMgmt.Search')"/>
<img src="@/assets/icon-search.svg" class="w-[17px] h-[17px] flex"/>
</div>
</template>
<script>
import i18next from '@/i18n/i18n.js';
export default {
setup() {
},
data() {
return {
i18next: i18next,
}
},
created() {

2
src/components/Navbar.vue
View File

@@ -110,7 +110,7 @@ export default {
DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE'],
// 舉例：COMPARE: ['PROCESS MAP', 'DASHBOARD']
COMPARE: ['PERFORMANCE'],
'ACCOUNT MANAGEMENT': ['ALL', 'CREATE',],
'ACCOUNT MANAGEMENT': [],
},
navViewName: 'FILES',
uploadModal: false,

9
src/i18n/en.json
View File

@@ -11,7 +11,14 @@
"hi": "Hi, ",
"acctMgmt": "Account management",
"mangUrAcct": "Manage your account",
"Logout": "Log out"
"Logout": "Log out",
"Search": "Search",
"Account": "Account",
"FullName": "Full Name",
"AdminRights": "Admin Rights",
"AccountActivation": "Account Activation",
"Detail": "Detail",
"Edit": "Edit"
},
"Compare": {
"timeUsage": "Time Usage",

21
src/views/AccountManagement/AccountAdmin/index.vue
View File

@@ -1,10 +1,20 @@
<template>
<div class="flex w-[1216px] items-center pt-2 flex-col">
<div class="flex">Account Admin SSO/General cases</div>
<div class="flex justify-end">
<div class="flex">
<div class="flex justify-center pt-2">
<div class="flex w-[1216px] flex-col items-center">
<div class="flex w-full justify-end py-2">
<SearchBar/>
</div>
<div id="acct_mgmt_data_grid" class="flex w-full">
<DataTable dataKey="id" tableClass="w-full mt-4 text-sm cursor-pointer relative table-fixed"
>
<Column field="account" :header="i18next.t('AcctMgmt.Account')" bodyClass="font-medium" sortable></Column>
<Column field="fullName" :header="i18next.t('AcctMgmt.FullName')" bodyClass="text-neutral-500" sortable></Column>
<Column field="adminRights" :header="i18next.t('AcctMgmt.AdminRights')" bodyClass="text-neutral-500"></Column>
<Column field="accountActivation" :header="i18next.t('AcctMgmt.AccountActivation')" bodyClass="text-neutral-500"></Column>
<Column field="detail" :header="i18next.t('AcctMgmt.Detail')" bodyClass="text-neutral-500"></Column>
<Column field="edit" :header="i18next.t('AcctMgmt.Edit')" bodyClass="text-neutral-500"></Column>
</DataTable>
</div>
</div>
</div>
</template>
@@ -13,6 +23,7 @@
import { storeToRefs, mapState, } from 'pinia';
import LoadingStore from '@/stores/loading.js';
import SearchBar from '../../../components/AccountMenu/SearchBar.vue';
import i18next from '@/i18n/i18n.js';
export default {
setup() {
@@ -25,7 +36,7 @@ export default {
},
data() {
return {
i18next: i18next,
};
},
components: {