chore: Update buttons in labels page (#11126)

This commit is contained in:
Sivin Varghese
2025-03-20 21:19:44 +05:30
committed by GitHub
parent 16e2c33db5
commit 0cbcb8b80c
3 changed files with 50 additions and 35 deletions

View File

@@ -5,7 +5,12 @@ import validations, { getLabelTitleErrorMessage } from './validations';
import { getRandomColor } from 'dashboard/helper/labelColor';
import { useVuelidate } from '@vuelidate/core';
import NextButton from 'dashboard/components-next/button/Button.vue';
export default {
components: {
NextButton,
},
props: {
prefillTitle: {
type: String,
@@ -105,16 +110,20 @@ export default {
</label>
</div>
<div class="flex items-center justify-end w-full gap-2 px-0 py-2">
<woot-button
:is-disabled="v$.title.$invalid || uiFlags.isCreating"
:is-loading="uiFlags.isCreating"
<NextButton
faded
slate
type="reset"
:label="$t('LABEL_MGMT.FORM.CANCEL')"
@click.prevent="onClose"
/>
<NextButton
type="submit"
data-testid="label-submit"
>
{{ $t('LABEL_MGMT.FORM.CREATE') }}
</woot-button>
<woot-button class="button clear" @click.prevent="onClose">
{{ $t('LABEL_MGMT.FORM.CANCEL') }}
</woot-button>
:label="$t('LABEL_MGMT.FORM.CREATE')"
:disabled="v$.title.$invalid || uiFlags.isCreating"
:is-loading="uiFlags.isCreating"
/>
</div>
</form>
</div>

View File

@@ -4,7 +4,12 @@ import { useAlert } from 'dashboard/composables';
import validations, { getLabelTitleErrorMessage } from './validations';
import { useVuelidate } from '@vuelidate/core';
import NextButton from 'dashboard/components-next/button/Button.vue';
export default {
components: {
NextButton,
},
props: {
selectedResponse: {
type: Object,
@@ -109,15 +114,19 @@ export default {
</label>
</div>
<div class="flex items-center justify-end w-full gap-2 px-0 py-2">
<woot-button
:is-disabled="v$.title.$invalid || uiFlags.isUpdating"
<NextButton
faded
slate
type="reset"
:label="$t('LABEL_MGMT.FORM.CANCEL')"
@click.prevent="onClose"
/>
<NextButton
type="submit"
:label="$t('LABEL_MGMT.FORM.EDIT')"
:disabled="v$.title.$invalid || uiFlags.isUpdating"
:is-loading="uiFlags.isUpdating"
>
{{ $t('LABEL_MGMT.FORM.EDIT') }}
</woot-button>
<woot-button class="button clear" @click.prevent="onClose">
{{ $t('LABEL_MGMT.FORM.CANCEL') }}
</woot-button>
/>
</div>
</form>
</div>

View File

@@ -8,6 +8,7 @@ import AddLabel from './AddLabel.vue';
import EditLabel from './EditLabel.vue';
import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
import SettingsLayout from '../SettingsLayout.vue';
import Button from 'dashboard/components-next/button/Button.vue';
const getters = useStoreGetters();
const store = useStore();
@@ -94,13 +95,11 @@ onBeforeMount(() => {
feature-name="labels"
>
<template #actions>
<woot-button
class="rounded-md button nice"
icon="add-circle"
<Button
icon="i-lucide-circle-plus"
:label="$t('LABEL_MGMT.HEADER_BTN_TXT')"
@click="openAddPopup"
>
{{ $t('LABEL_MGMT.HEADER_BTN_TXT') }}
</woot-button>
/>
</template>
</BaseSettingsHeader>
</template>
@@ -140,23 +139,21 @@ onBeforeMount(() => {
</td>
<td class="py-4 min-w-xs">
<div class="flex gap-1 justify-end">
<woot-button
<Button
v-tooltip.top="$t('LABEL_MGMT.FORM.EDIT')"
variant="smooth"
size="tiny"
color-scheme="secondary"
class-names="grey-btn"
icon="i-lucide-pen"
slate
xs
faded
:is-loading="loading[label.id]"
icon="edit"
@click="openEditPopup(label)"
/>
<woot-button
<Button
v-tooltip.top="$t('LABEL_MGMT.FORM.DELETE')"
variant="smooth"
color-scheme="alert"
size="tiny"
icon="dismiss-circle"
class-names="grey-btn"
icon="i-lucide-trash-2"
xs
ruby
faded
:is-loading="loading[label.id]"
@click="openDeletePopup(label, index)"
/>