Skip to content

Commit

Permalink
Standardize list inputs
Browse files Browse the repository at this point in the history 
***Refactor field row view component in module***
***Add small responsive design to unique values table***
***Update system fields table in module edit view
  • Loading branch information
@EmmyMay @Fajfa
EmmyMay authored and Fajfa committed Apr 15, 2024
1 parent 7b15493 commit 1a248c7
Show file tree
Hide file tree
Showing 25 changed files with 602 additions and 589 deletions.
59 changes: 28 additions & 31 deletions client/web/admin/src/components/Authclient/CAuthclientEditorInfo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,41 +63,38 @@
:label="$t('redirectURI')"
label-class="text-primary"
>
<b-button
data-test-id="button-add-redirect-uris"
variant="light"
class="align-top"
@click="redirectURI.push('')"
<c-form-table-wrapper
:labels="{ addButton: $t('general:label.add') }"
test-id="button-add-redirect-uris"
add-button-class="mt-2"
@add-item="redirectURI.push('')"
>
+ {{ $t('add') }}
</b-button>

<div
v-if="redirectURI.length"
>
<b-input-group
v-for="(value, index) in redirectURI"
:key="index"
class="mt-2"
<div
v-if="redirectURI.length"
>
<b-form-input
v-model="redirectURI[index]"
data-test-id="input-uri"
:placeholder="$t('uri')"
/>

<b-button
data-test-id="button-remove-uri"
class="ml-1 text-danger"
variant="link"
@click="redirectURI.splice(index, 1)"
<b-input-group
v-for="(value, index) in redirectURI"
:key="index"
class="mt-2"
>
<font-awesome-icon
:icon="['fas', 'times']"
<b-form-input
v-model="redirectURI[index]"
data-test-id="input-uri"
:placeholder="$t('uri')"
/>
</b-button>
</b-input-group>
</div>
<b-button
data-test-id="button-remove-uri"
class="ml-1 text-danger"
variant="link"
@click="redirectURI.splice(index, 1)"
>
<font-awesome-icon
:icon="['fas', 'times']"
/>
</b-button>
</b-input-group>
</div>
</c-form-table-wrapper>
</b-form-group>
</b-col>

Expand Down
173 changes: 87 additions & 86 deletions client/web/admin/src/components/Settings/UI/CUITopbarSettings.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@

<div>
<hr>

<b-row>
<b-col
cols="12"
Expand All @@ -62,66 +63,67 @@
</b-form-checkbox>
</b-form-group>
</b-col>

<b-col>
<b-form-group
label-class="pb-1 text-primary"
:label="$t('links.title')"
label-class="text-primary"
>
<template #label>
{{ $t('links.title') }}
<b-button
variant="link"
class="text-decoration-none"
@click="topbarSettings.helpLinks.push({ handle: '', url: '', newTab: true })"
>
{{ $t('general:label.plus-add') }}
</b-button>
</template>
<b-table
:fields="links.fields"
:items="topbarSettings.helpLinks"
head-variant="light"
responsive="sm"
small
class="mb-0"
<c-form-table-wrapper
:labels="{ addButton: $t('general:label.add') }"
@add-item="topbarSettings.helpLinks.push({ handle: '', url: '', newTab: true })"
>
<template #cell(handle)="data">
<b-form-input
v-model="data.item.handle"
size="sm"
/>
</template>
<template #cell(url)="data">
<b-form-input
v-model="data.item.url"
type="url"
size="sm"
/>
</template>
<template #cell(newTab)="data">
<b-form-checkbox
v-model="data.item.newTab"
/>
</template>
<template #cell(actions)="data">
<c-input-confirm
show-icon
@confirmed="topbarSettings.helpLinks.splice(data.index, 1)"
/>
</template>
</b-table>
<b-table
:fields="links.fields"
:items="topbarSettings.helpLinks"
thead-tr-class="text-primary"
responsive="sm"
small
>
<template #cell(handle)="data">
<b-form-input
v-model="data.item.handle"
size="sm"
/>
</template>

<template #cell(url)="data">
<b-form-input
v-model="data.item.url"
type="url"
size="sm"
/>
</template>

<template #cell(newTab)="data">
<b-form-checkbox
v-model="data.item.newTab"
/>
</template>

<template #cell(actions)="data">
<c-input-confirm
show-icon
@confirmed="topbarSettings.helpLinks.splice(data.index, 1)"
/>
</template>
</b-table>
</c-form-table-wrapper>
</b-form-group>
</b-col>
</b-row>
</div>

<div>
<hr>

<b-row>
<b-col
cols="12"
lg="3"
>
<h5>{{ $t('profile.title') }}</h5>

<b-form-group>
<b-form-checkbox
v-model="topbarSettings.hideProfileLink"
Expand All @@ -142,53 +144,52 @@
</b-form-checkbox>
</b-form-group>
</b-col>

<b-col>
<b-form-group
label-class="pb-1 text-primary"
:label="$t('links.title')"
label-class="text-primary"
>
<template #label>
{{ $t('links.title') }}
<b-button
variant="link"
class="text-decoration-none"
@click="topbarSettings.profileLinks.push({ handle: '', url: '', newTab: true })"
>
{{ $t('general:label.plus-add') }}
</b-button>
</template>
<b-table
:fields="links.fields"
:items="topbarSettings.profileLinks"
head-variant="light"
responsive="sm"
small
class="mb-0"
<c-form-table-wrapper
:labels="{ addButton: $t('general:label.add') }"
@add-item="topbarSettings.profileLinks.push({ handle: '', url: '', newTab: true })"
>
<template #cell(handle)="data">
<b-form-input
v-model="data.item.handle"
size="sm"
/>
</template>
<template #cell(url)="data">
<b-form-input
v-model="data.item.url"
type="url"
size="sm"
/>
</template>
<template #cell(newTab)="data">
<b-form-checkbox
v-model="data.item.newTab"
/>
</template>
<template #cell(actions)="data">
<c-input-confirm
show-icon
@confirmed="topbarSettings.profileLinks.splice(data.index, 1)"
/>
</template>
</b-table>
<b-table
:fields="links.fields"
:items="topbarSettings.profileLinks"
thead-tr-class="text-primary"
responsive="sm"
small
>
<template #cell(handle)="data">
<b-form-input
v-model="data.item.handle"
size="sm"
/>
</template>

<template #cell(url)="data">
<b-form-input
v-model="data.item.url"
type="url"
size="sm"
/>
</template>

<template #cell(newTab)="data">
<b-form-checkbox
v-model="data.item.newTab"
/>
</template>

<template #cell(actions)="data">
<c-input-confirm
show-icon
@confirmed="topbarSettings.profileLinks.splice(data.index, 1)"
/>
</template>
</b-table>
</c-form-table-wrapper>
</b-form-group>
</b-col>
</b-row>
Expand Down
3 changes: 2 additions & 1 deletion client/web/admin/src/components/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import {
TooltipComponent,
} from 'echarts/components'

const { CCorredorManualButtons, CPermissionsButton, CInputConfirm, CButtonSubmit, CInputCheckbox, CInputSelect } = components
const { CCorredorManualButtons, CPermissionsButton, CInputConfirm, CButtonSubmit, CInputCheckbox, CInputSelect, CFormTableWrapper } = components

Vue.use(PortalVue)
Vue.component('c-corredor-manual-buttons', CCorredorManualButtons)
Expand All @@ -36,6 +36,7 @@ Vue.component('c-button-submit', CButtonSubmit)
Vue.component('c-input-checkbox', CInputCheckbox)
Vue.component('c-system-fields', CSystemFields)
Vue.component('c-input-select', CInputSelect)
Vue.component('c-form-table-wrapper', CFormTableWrapper)

use([
LineChart,
Expand Down
4 changes: 2 additions & 2 deletions client/web/compose/src/components/Admin/Module/FieldRowEdit.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,8 +97,8 @@
</td>

<td
class="text-right align-middle pr-2"
style="min-width: 100px;"
class="text-right align-middle"
style="min-width: 110px;"
>
<c-permissions-button
v-if="canGrant && exists"
Expand Down
11 changes: 7 additions & 4 deletions client/web/compose/src/components/Admin/Module/FieldRowView.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<template>
<tr>
<td />
<td class="pl-3">
<td class="pr-2" />

<td style="width: 250px;">
{{ field.name }}
<b-badge
v-if="field.omit"
Expand All @@ -11,10 +12,12 @@
{{ $t('unavailable') }}
</b-badge>
</td>
<td class="pl-3">

<td style="width: 250px;">
{{ field.label }}
</td>
<td class="pl-3">

<td>
{{ field.kind }}
</td>
</tr>
Expand Down
9 changes: 6 additions & 3 deletions client/web/compose/src/components/Admin/Module/UniqueValues.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,12 +59,14 @@
</b-form-group>
</div>

<div
<c-form-table-wrapper
v-if="rule.constraints && rule.constraints.length > 0"
class="list-background rounded border border-light p-1"
hide-add-button
>
<b-table-simple
borderless
small
responsive
class="mb-0"
>
<thead>
Expand All @@ -84,6 +86,7 @@
<th style="width: 150px;" />
</tr>
</thead>

<tbody v-if="rule.constraints">
<tr
v-for="(constraint, consIndex) in rule.constraints"
Expand Down Expand Up @@ -119,7 +122,7 @@
</tr>
</tbody>
</b-table-simple>
</div>
</c-form-table-wrapper>

<hr>
</div>
Expand Down
Loading

0 comments on commit 1a248c7

Please sign in to comment.