Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RV 207 : Standard for non deletable items in OXD lists #829

Open
wants to merge 5 commits into
base: ent
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 20 additions & 1 deletion components/src/core/components/CardTable/Cell/Checkbox.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@
v-model="checkState"
:value="item"
:disabled="isDisabled"
:disabled-tooltip="disabledTooltip"
:tooltip-position="tooltipPosition"
@click="onClickCheckbox(item, $event)"
/>
</template>
Expand All @@ -18,6 +20,7 @@ import emitter from '../../../../utils/emitter';
import {defineComponent, inject, computed, onBeforeUnmount} from 'vue';
import Skeleton from '@orangehrm/oxd/core/components/Skeleton/Skeleton.vue';
import CheckboxInput from '@orangehrm/oxd/core/components/Input/CheckboxInput.vue';
import {TOP} from '@orangehrm/oxd/core/components/Input/types';

export default defineComponent({
name: 'oxd-table-cell-checkbox',
Expand Down Expand Up @@ -59,7 +62,21 @@ export default defineComponent({
tableProps?.disabled === undefined
? false
: Boolean(tableProps?.disabled);
return isTableDisabled ? isTableDisabled : isRowDisabled;
const isSelectDisabled = Boolean(props.rowItem?.isSelectDisabled);
return isTableDisabled || isRowDisabled || isSelectDisabled;
});


const tooltipPosition = computed(() => {
return props.rowItem?.selectDisabledTooltipPosition
? props.rowItem?.selectDisabledTooltipPosition
: TOP;
});

const disabledTooltip = computed(() => {
return props.rowItem?.isSelectDisabled
? props.rowItem?.selectDisabledTooltip ?? null
: null;
});

const isSelectable = computed(() => {
Expand Down Expand Up @@ -92,6 +109,8 @@ export default defineComponent({
checkState,
isDisabled,
isSelectable,
tooltipPosition,
disabledTooltip
};
},
methods: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`CardTable > Cell > Checkbox.vue should renders OXD CardTable > Cell > Checkbox Cell 1`] = `
<div class="oxd-checkbox-wrapper"><label class="">
<!--v-if-->
<!--v-if--><input type="checkbox" true-value="true" false-value="false" value="0"><span class="oxd-checkbox-input oxd-checkbox-input--active --label-right oxd-checkbox-input"><i class="oxd-svg-icon oxd-svg-icon--xx-small oxd-checkbox-input-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.51 27.2"><defs><style>{fill:currentColor;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="_ÎÓÈ_1" data-name="—ÎÓÈ_1"><path style="fill:currentColor" d="M0,13c.11-.32.21-.64.34-1a4.23,4.23,0,0,1,6.94-1.28c1.77,1.74,3.52,3.51,5.27,5.26.71.71,1.22.71,1.93,0Q21.79,8.68,29.09,1.38A4.23,4.23,0,0,1,32.22,0,4,4,0,0,1,36.1,2.5,4.08,4.08,0,0,1,35.44,7c-.08.1-.17.19-.26.29L16.59,25.89a4.22,4.22,0,0,1-3.23,1.31,4.1,4.1,0,0,1-2.85-1.26Q5.88,21.34,1.26,16.7A4.32,4.32,0,0,1,.08,14.56c0-.07,0-.15-.08-.18Z"></path></g></g></svg></i></span>
<!--v-if--><input type="checkbox" true-value="true" false-value="false" value="0"><span class="oxd-checkbox-input oxd-checkbox-input--active --label-right oxd-checkbox-input" flow="top"><i class="oxd-svg-icon oxd-svg-icon--xx-small oxd-checkbox-input-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.51 27.2"><defs><style>{fill:currentColor;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="_ÎÓÈ_1" data-name="—ÎÓÈ_1"><path style="fill:currentColor" d="M0,13c.11-.32.21-.64.34-1a4.23,4.23,0,0,1,6.94-1.28c1.77,1.74,3.52,3.51,5.27,5.26.71.71,1.22.71,1.93,0Q21.79,8.68,29.09,1.38A4.23,4.23,0,0,1,32.22,0,4,4,0,0,1,36.1,2.5,4.08,4.08,0,0,1,35.44,7c-.08.1-.17.19-.26.29L16.59,25.89a4.22,4.22,0,0,1-3.23,1.31,4.1,4.1,0,0,1-2.85-1.26Q5.88,21.34,1.26,16.7A4.32,4.32,0,0,1,.08,14.56c0-.07,0-.15-.08-.18Z"></path></g></g></svg></i></span>
<div class="oxd-checkbox-option-label"></div>
<!--v-if-->
</label></div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -61,4 +61,25 @@ describe('CardTable > Cell > Checkbox.vue', () => {
'disabled',
);
});
it('should renders OXD CardTable > Cell > Checkbox Cell should be disabled when the select is disabled and tooltip should be shown', () => {
const _global = {...GLOBAL};
const wrapper = mount(Checkbox, {
global: _global,
props: {
item: 24,
rowItem: {
isSelectDisabled: true,
selectDisabledTooltip: 'This cannot be deleted',
selectDisabledTooltipPosition: 'top',
},
},
});
expect(wrapper.find("input[type='checkbox']").element).toHaveProperty(
'disabled',
);
const tooltipSpan = wrapper.find('.oxd-checkbox-input');
expect(tooltipSpan.exists()).toBeTruthy();
expect(tooltipSpan.attributes('tooltip')).toBe('This cannot be deleted');
expect(tooltipSpan.attributes('flow')).toBe('top');
});
});
27 changes: 25 additions & 2 deletions components/src/core/components/Input/CheckboxInput.vue
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,13 @@
v-bind="$attrs"
v-model="checked"
/>
<span :class="classes" :style="style" class="oxd-checkbox-input">
<span
:class="classes"
:style="style"
class="oxd-checkbox-input"
:tooltip="disabledTooltip"
:flow="tooltipPosition"
>
<oxd-icon
class="oxd-checkbox-input-icon"
:name="checkIcon"
Expand Down Expand Up @@ -65,7 +71,13 @@

<script lang="ts">
import {defineComponent} from 'vue';
import {Position, LABEL_POSITIONS, RIGHT} from './types';
import {
Position,
LABEL_POSITIONS,
RIGHT,
TOP,
TOOLTIP_POSITIONS,
} from './types';
import Icon from '@orangehrm/oxd/core/components/Icon/Icon.vue';

export interface State {
Expand Down Expand Up @@ -147,6 +159,17 @@ export default defineComponent({
type: Boolean,
default: false,
},
disabledTooltip: {
type: String,
default: null,
},
tooltipPosition: {
type: String,
default: TOP,
validator: (value: Position) => {
return TOOLTIP_POSITIONS.indexOf(value) !== 1;
},
},
},

emits: ['update:modelValue', 'blur', 'focus', 'change'],
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ exports[`CheckboxGroup > CheckboxGroup.vue renders OXD CheckboxGroup 1`] = `
<div class="check-box-column">
<div class="oxd-checkbox-wrapper"><label class="">
<!--v-if-->
<!--v-if--><input type="checkbox" true-value="true" false-value="false" id="check-box-group-id_1" value="1"><span class="oxd-checkbox-input oxd-checkbox-input--active --label-right oxd-checkbox-input"><i class="oxd-svg-icon oxd-svg-icon--xx-small oxd-checkbox-input-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.51 27.2"><defs><style>{fill:currentColor;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="_ÎÓÈ_1" data-name="—ÎÓÈ_1"><path style="fill:currentColor" d="M0,13c.11-.32.21-.64.34-1a4.23,4.23,0,0,1,6.94-1.28c1.77,1.74,3.52,3.51,5.27,5.26.71.71,1.22.71,1.93,0Q21.79,8.68,29.09,1.38A4.23,4.23,0,0,1,32.22,0,4,4,0,0,1,36.1,2.5,4.08,4.08,0,0,1,35.44,7c-.08.1-.17.19-.26.29L16.59,25.89a4.22,4.22,0,0,1-3.23,1.31,4.1,4.1,0,0,1-2.85-1.26Q5.88,21.34,1.26,16.7A4.32,4.32,0,0,1,.08,14.56c0-.07,0-.15-.08-.18Z"></path></g></g></svg></i></span>
<!--v-if--><input type="checkbox" true-value="true" false-value="false" id="check-box-group-id_1" value="1"><span class="oxd-checkbox-input oxd-checkbox-input--active --label-right oxd-checkbox-input" flow="top"><i class="oxd-svg-icon oxd-svg-icon--xx-small oxd-checkbox-input-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.51 27.2"><defs><style>{fill:currentColor;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="_ÎÓÈ_1" data-name="—ÎÓÈ_1"><path style="fill:currentColor" d="M0,13c.11-.32.21-.64.34-1a4.23,4.23,0,0,1,6.94-1.28c1.77,1.74,3.52,3.51,5.27,5.26.71.71,1.22.71,1.93,0Q21.79,8.68,29.09,1.38A4.23,4.23,0,0,1,32.22,0,4,4,0,0,1,36.1,2.5,4.08,4.08,0,0,1,35.44,7c-.08.1-.17.19-.26.29L16.59,25.89a4.22,4.22,0,0,1-3.23,1.31,4.1,4.1,0,0,1-2.85-1.26Q5.88,21.34,1.26,16.7A4.32,4.32,0,0,1,.08,14.56c0-.07,0-.15-.08-.18Z"></path></g></g></svg></i></span>
<div class="oxd-checkbox-option-label">Item one</div>
<!--v-if-->
</label></div>
<div class="oxd-checkbox-wrapper"><label class="">
<!--v-if-->
<!--v-if--><input type="checkbox" true-value="true" false-value="false" id="check-box-group-id_2" value="2"><span class="oxd-checkbox-input oxd-checkbox-input--active --label-right oxd-checkbox-input"><i class="oxd-svg-icon oxd-svg-icon--xx-small oxd-checkbox-input-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.51 27.2"><defs><style>{fill:currentColor;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="_ÎÓÈ_1" data-name="—ÎÓÈ_1"><path style="fill:currentColor" d="M0,13c.11-.32.21-.64.34-1a4.23,4.23,0,0,1,6.94-1.28c1.77,1.74,3.52,3.51,5.27,5.26.71.71,1.22.71,1.93,0Q21.79,8.68,29.09,1.38A4.23,4.23,0,0,1,32.22,0,4,4,0,0,1,36.1,2.5,4.08,4.08,0,0,1,35.44,7c-.08.1-.17.19-.26.29L16.59,25.89a4.22,4.22,0,0,1-3.23,1.31,4.1,4.1,0,0,1-2.85-1.26Q5.88,21.34,1.26,16.7A4.32,4.32,0,0,1,.08,14.56c0-.07,0-.15-.08-.18Z"></path></g></g></svg></i></span>
<!--v-if--><input type="checkbox" true-value="true" false-value="false" id="check-box-group-id_2" value="2"><span class="oxd-checkbox-input oxd-checkbox-input--active --label-right oxd-checkbox-input" flow="top"><i class="oxd-svg-icon oxd-svg-icon--xx-small oxd-checkbox-input-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.51 27.2"><defs><style>{fill:currentColor;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="_ÎÓÈ_1" data-name="—ÎÓÈ_1"><path style="fill:currentColor" d="M0,13c.11-.32.21-.64.34-1a4.23,4.23,0,0,1,6.94-1.28c1.77,1.74,3.52,3.51,5.27,5.26.71.71,1.22.71,1.93,0Q21.79,8.68,29.09,1.38A4.23,4.23,0,0,1,32.22,0,4,4,0,0,1,36.1,2.5,4.08,4.08,0,0,1,35.44,7c-.08.1-.17.19-.26.29L16.59,25.89a4.22,4.22,0,0,1-3.23,1.31,4.1,4.1,0,0,1-2.85-1.26Q5.88,21.34,1.26,16.7A4.32,4.32,0,0,1,.08,14.56c0-.07,0-.15-.08-.18Z"></path></g></g></svg></i></span>
<div class="oxd-checkbox-option-label">Item two</div>
<!--v-if-->
</label></div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`CheckboxInput.vue renders OXD Checkbox Input 1`] = `
<div class="oxd-checkbox-wrapper"><label class="">
<!--v-if-->
<!--v-if--><input type="checkbox" true-value="true" false-value="false" label="Checkbox"><span class="oxd-checkbox-input oxd-checkbox-input--active --label-right oxd-checkbox-input"><i class="oxd-svg-icon oxd-svg-icon--xx-small oxd-checkbox-input-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.51 27.2"><defs><style>{fill:currentColor;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="_ÎÓÈ_1" data-name="—ÎÓÈ_1"><path style="fill:currentColor" d="M0,13c.11-.32.21-.64.34-1a4.23,4.23,0,0,1,6.94-1.28c1.77,1.74,3.52,3.51,5.27,5.26.71.71,1.22.71,1.93,0Q21.79,8.68,29.09,1.38A4.23,4.23,0,0,1,32.22,0,4,4,0,0,1,36.1,2.5,4.08,4.08,0,0,1,35.44,7c-.08.1-.17.19-.26.29L16.59,25.89a4.22,4.22,0,0,1-3.23,1.31,4.1,4.1,0,0,1-2.85-1.26Q5.88,21.34,1.26,16.7A4.32,4.32,0,0,1,.08,14.56c0-.07,0-.15-.08-.18Z"></path></g></g></svg></i></span>
<!--v-if--><input type="checkbox" true-value="true" false-value="false" label="Checkbox"><span class="oxd-checkbox-input oxd-checkbox-input--active --label-right oxd-checkbox-input" flow="top"><i class="oxd-svg-icon oxd-svg-icon--xx-small oxd-checkbox-input-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.51 27.2"><defs><style>{fill:currentColor;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="_ÎÓÈ_1" data-name="—ÎÓÈ_1"><path style="fill:currentColor" d="M0,13c.11-.32.21-.64.34-1a4.23,4.23,0,0,1,6.94-1.28c1.77,1.74,3.52,3.51,5.27,5.26.71.71,1.22.71,1.93,0Q21.79,8.68,29.09,1.38A4.23,4.23,0,0,1,32.22,0,4,4,0,0,1,36.1,2.5,4.08,4.08,0,0,1,35.44,7c-.08.1-.17.19-.26.29L16.59,25.89a4.22,4.22,0,0,1-3.23,1.31,4.1,4.1,0,0,1-2.85-1.26Q5.88,21.34,1.26,16.7A4.32,4.32,0,0,1,.08,14.56c0-.07,0-.15-.08-.18Z"></path></g></g></svg></i></span>
<div class="oxd-checkbox-option-label"></div>
<!--v-if-->
</label></div>
Expand All @@ -12,7 +12,7 @@ exports[`CheckboxInput.vue renders OXD Checkbox Input 1`] = `
exports[`CheckboxInput.vue should renders OXD Checkbox with string values 1`] = `
<div class="oxd-checkbox-wrapper"><label class="">
<!--v-if-->
<!--v-if--><input type="checkbox" true-value="testtrue" false-value="testfalse"><span class="oxd-checkbox-input oxd-checkbox-input--active --label-right oxd-checkbox-input"><i class="oxd-svg-icon oxd-svg-icon--xx-small oxd-checkbox-input-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.51 27.2"><defs><style>{fill:currentColor;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="_ÎÓÈ_1" data-name="—ÎÓÈ_1"><path style="fill:currentColor" d="M0,13c.11-.32.21-.64.34-1a4.23,4.23,0,0,1,6.94-1.28c1.77,1.74,3.52,3.51,5.27,5.26.71.71,1.22.71,1.93,0Q21.79,8.68,29.09,1.38A4.23,4.23,0,0,1,32.22,0,4,4,0,0,1,36.1,2.5,4.08,4.08,0,0,1,35.44,7c-.08.1-.17.19-.26.29L16.59,25.89a4.22,4.22,0,0,1-3.23,1.31,4.1,4.1,0,0,1-2.85-1.26Q5.88,21.34,1.26,16.7A4.32,4.32,0,0,1,.08,14.56c0-.07,0-.15-.08-.18Z"></path></g></g></svg></i></span>
<!--v-if--><input type="checkbox" true-value="testtrue" false-value="testfalse"><span class="oxd-checkbox-input oxd-checkbox-input--active --label-right oxd-checkbox-input" flow="top"><i class="oxd-svg-icon oxd-svg-icon--xx-small oxd-checkbox-input-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.51 27.2"><defs><style>{fill:currentColor;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="_ÎÓÈ_1" data-name="—ÎÓÈ_1"><path style="fill:currentColor" d="M0,13c.11-.32.21-.64.34-1a4.23,4.23,0,0,1,6.94-1.28c1.77,1.74,3.52,3.51,5.27,5.26.71.71,1.22.71,1.93,0Q21.79,8.68,29.09,1.38A4.23,4.23,0,0,1,32.22,0,4,4,0,0,1,36.1,2.5,4.08,4.08,0,0,1,35.44,7c-.08.1-.17.19-.26.29L16.59,25.89a4.22,4.22,0,0,1-3.23,1.31,4.1,4.1,0,0,1-2.85-1.26Q5.88,21.34,1.26,16.7A4.32,4.32,0,0,1,.08,14.56c0-.07,0-.15-.08-.18Z"></path></g></g></svg></i></span>
<div class="oxd-checkbox-option-label"></div>
<!--v-if-->
</label></div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -110,4 +110,45 @@ describe('CheckboxInput.vue', () => {
const border = wrapper.find('.border-enabled');
expect(border.classes()).toContain('--error');
});
it('when there is no disabled tooltip, flow attribute should be default top and tooltip should not be there', async () => {
const wrapper = mount(CheckboxInput, {
props: {
disabled: true,
},
});
await wrapper.vm.$nextTick();
const tooltipSpan = wrapper.find('.oxd-checkbox-input');
expect(tooltipSpan.exists()).toBeTruthy();
expect(tooltipSpan.attributes('tooltip')).toBeFalsy();
expect(tooltipSpan.attributes('flow')).toEqual("top");
});

it('when the disabled tooltip is there, checkbox should be disabled and the tooltip should be there', async () => {
const wrapper = mount(CheckboxInput, {
props: {
disabled: true,
disabledTooltip: 'This cannot be deleted',
},
});
await wrapper.vm.$nextTick();
const tooltipSpan = wrapper.find('.oxd-checkbox-input');
expect(tooltipSpan.exists()).toBeTruthy();
expect(tooltipSpan.attributes('tooltip')).toBe('This cannot be deleted');
expect(tooltipSpan.attributes('flow')).toBe('top');
});

it('when the disabled tooltip is there, checkbox should be disabled and the tooltip can be rendered in bottom', async () => {
const wrapper = mount(CheckboxInput, {
props: {
disabled: true,
disabledTooltip: 'This cannot be deleted',
tooltipPosition: 'bottom',
},
});
await wrapper.vm.$nextTick();
const tooltipSpan = wrapper.find('.oxd-checkbox-input');
expect(tooltipSpan.exists()).toBeTruthy();
expect(tooltipSpan.attributes('tooltip')).toBe('This cannot be deleted');
expect(tooltipSpan.attributes('flow')).toBe('bottom');
});
});
7 changes: 5 additions & 2 deletions components/src/core/components/Input/checkbox-input.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
@import 'variables';

.oxd-checkbox-wrapper {

.border-enabled {
border: 1px solid #ccc;
padding: 8px;
Expand All @@ -12,7 +11,7 @@
border: $oxd-input-border--error;
box-shadow: $oxd-input-box-shadow--error;
}

.oxd-checkbox-option-label {
overflow-wrap: break-word;
word-break: break-all;
Expand Down Expand Up @@ -128,3 +127,7 @@
align-self: center;
}
}

span.oxd-checkbox-input[tooltip]::after {
max-width: 150px;
}
1 change: 1 addition & 0 deletions components/src/core/components/Input/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export const RIGHT = 'right';
export const TOP = 'top';
export const BOTTOM = 'bottom';
export const LABEL_POSITIONS = [LEFT, RIGHT];
export const TOOLTIP_POSITIONS = [TOP, BOTTOM, LEFT, RIGHT];
export const DROPDOWN_POSITIONS = [TOP, BOTTOM, LEFT, RIGHT];
export type Position = typeof LEFT | typeof RIGHT | typeof TOP | typeof BOTTOM;

Expand Down
11 changes: 10 additions & 1 deletion components/src/core/components/ListTable/ListTable.vue
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,11 @@
v-else-if="selectable"
class="oxd-padding-cell oxd-table-th"
>
<oxd-checkbox-input v-model="selectAll" :checkIcon="checkIcon" />
<oxd-checkbox-input
v-model="selectAll"
:checkIcon="checkIcon"
:disabled="allSelectDisabled"
/>
</oxd-card-th>

<oxd-card-th
Expand Down Expand Up @@ -291,6 +295,10 @@ export default defineComponent({
return props.items;
});

const allSelectDisabled = computed(() => {
return computedItems.value.every(item => item.isSelectDisabled === true);
});

const tableRowClasses = computed(() =>
computedItems.value.map((_, index: number) => ({
'oxd-table-card': true,
Expand Down Expand Up @@ -340,6 +348,7 @@ export default defineComponent({
computedItems,
tableRowClasses,
computedHeaders,
allSelectDisabled,
};
},

Expand Down
Loading
Loading