akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Update design

Browse Source
This commit is contained in:
Pranav
2024-11-20 18:31:24 -08:00
parent 82c73f18d9
commit 226d0db11c
30 changed files with 350 additions and 404 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/assets/scss/widgets/_tabs.scss
+6 -16
View File
@@ -3,7 +3,7 @@
}
.tabs--container--with-border {
@apply border-b border-slate-50 dark:border-slate-800/50;
@apply border-b border-n-weak;
}
.tabs {
@@ -19,22 +19,12 @@
@apply items-center rounded-none cursor-pointer flex h-auto justify-center min-w-[2rem];
}
// Tab chat type
.tab--chat-type {
@apply flex;
.tabs-title {
a {
@apply text-base font-medium py-3;
}
}
}
.tabs-title {
@apply flex-shrink-0 my-0 mx-2;
.badge {
@apply bg-slate-50 dark:bg-slate-800 rounded-md text-slate-600 dark:text-slate-100 h-5 flex items-center justify-center text-xxs font-semibold my-0 mx-1 px-1 py-0;
@apply bg-n-slate-3 rounded-xl text-n-slate-11 h-5 flex items-center justify-center text-xxs font-semibold my-0 mx-1 px-1 py-0;
}
&:first-child {
@@ -48,22 +38,22 @@
&:hover,
&:focus {
a {
@apply text-slate-800 dark:text-slate-100;
@apply text-n-slate-11;
}
}
a {
@apply flex items-center flex-row border-b py-2.5 select-none cursor-pointer border-transparent text-slate-500 dark:text-slate-200 text-sm top-[1px] relative;
@apply flex items-center flex-row border-b py-2.5 select-none cursor-pointer border-transparent text-n-slate-10 text-sm top-[1px] relative;
transition: border-color 0.15s $swift-ease-out-function;
}
&.is-active {
a {
@apply border-b border-woot-500 text-woot-500 dark:text-woot-500;
@apply border-b border-n-brand text-n-brand;
}
.badge {
@apply bg-woot-50 dark:bg-woot-500 text-woot-500 dark:text-woot-50 dark:bg-opacity-40;
@apply bg-n-slate-3 text-n-brand;
}
}
}
app/javascript/dashboard/components/widgets/BackButton.vue
+2 -4
View File
@@ -23,14 +23,12 @@ const goBack = () => {
}
};
const buttonStyleClass = props.compact
? 'text-sm text-slate-600 dark:text-slate-300'
: 'text-base text-woot-500 dark:text-woot-500';
const buttonStyleClass = props.compact ? 'text-sm' : 'text-base';
</script>
<template>
<button
class="flex items-center p-0 font-normal cursor-pointer"
class="flex items-center p-0 font-normal cursor-pointer text-n-slate-11"
:class="buttonStyleClass"
@click.capture="goBack"
>
app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
+1 -11
View File
@@ -48,7 +48,7 @@ useKeyboardEvents(keyboardEvents);
<template>
<woot-tabs
:index="activeTabIndex"
class="w-full px-4 py-0 tab--chat-type"
class="w-full px-4 py-0 font-medium [&_a]:text-base [&_.tabs]:p-0"
@change="onTabChange"
>
<woot-tabs-item
@@ -60,13 +60,3 @@ useKeyboardEvents(keyboardEvents);
/>
</woot-tabs>
</template>
<style scoped lang="scss">
.tab--chat-type {
::v-deep {
.tabs {
@apply p-0;
}
}
}
</style>
app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
+4 -2
View File
@@ -65,7 +65,9 @@ export default {
class="ml-2 mr-4"
/>
<slot />
<span class="text-xl font-medium text-n-slate-12">
<span
class="text-xl font-medium text-n-slate-12 font-interDisplay tracking-[0.3px]"
>
{{ headerTitle }}
</span>
</h1>
@@ -75,7 +77,7 @@ export default {
:to="buttonRoute"
class="button success px-3.5 py-1 rounded-[5px] flex gap-2"
>
<fluent-icon icon="add-circle" />
<fluent-icon icon="add" />
<span class="button__content">
{{ buttonText }}
</span>
app/javascript/dashboard/routes/dashboard/settings/SettingsLayout.vue
+1 -1
View File
@@ -23,7 +23,7 @@ defineProps({
<div class="flex flex-col w-full h-full gap-8">
<slot name="header" />
<!-- Added to render any templates that should be rendered before body -->
<div class="mx-auto max-w-[960px] w-full">
<div class="mx-auto max-w-[960px] w-full pb-10">
<slot name="preBody" />
<slot v-if="isLoading" name="loading">
<woot-loading-state :message="loadingMessage" />
app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue
+1 -1
View File
@@ -78,7 +78,7 @@ export default {
<woot-button
color-scheme="success"
class-names="button--fixed-top"
icon="add-circle"
icon="add"
>
<router-link :to="newAgentBotsURL" class="white-text">
{{ $t('AGENT_BOTS.ADD.TITLE') }}
app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
+8 -8
View File
@@ -2,6 +2,7 @@
import { useAlert } from 'dashboard/composables';
import { computed, onMounted, ref } from 'vue';
import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
import Button from 'dashboard/components-next/button/Button.vue';
import { useI18n } from 'vue-i18n';
import {
useStoreGetters,
@@ -149,20 +150,19 @@ const confirmDeletion = () => {
feature-name="agents"
>
<template #actions>
<woot-button
class="inline-flex items-center justify-center min-w-0 gap-2 transition-all duration-200 ease-in-out border-0 rounded-lg outline-1 outline disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50 !bg-n-brand text-white hover:brightness-110 outline-transparent px-3 !text-sm"
icon="add"
<Button
:label="$t('AGENT_MGMT.HEADER_BTN_TXT')"
icon="i-lucide-plus"
size="sm"
@click="openAddPopup"
>
{{ $t('AGENT_MGMT.HEADER_BTN_TXT') }}
</woot-button>
/>
</template>
</BaseSettingsHeader>
</template>
<template #body>
<table class="divide-y divide-slate-75 dark:divide-slate-700">
<table class="divide-y divide-n-weak">
<tbody
class="divide-y divide-slate-50 dark:divide-slate-800 text-slate-700 dark:text-slate-300"
class="divide-y divide-n-weak text-slate-700 dark:text-slate-300"
>
<tr v-for="(agent, index) in agentList" :key="agent.email">
<td class="py-4 ltr:pr-4 rtl:pl-4">
app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
+115 -119
View File
@@ -158,130 +158,126 @@ export default {
</script>
<template>
<woot-modal v-model:show="show" :on-close="onClose">
<div class="flex flex-col h-auto overflow-auto">
<woot-modal-header :header-title="$t('ATTRIBUTES_MGMT.ADD.TITLE')" />
<div class="flex flex-col h-auto overflow-auto">
<woot-modal-header :header-title="$t('ATTRIBUTES_MGMT.ADD.TITLE')" />
<form class="flex w-full" @submit.prevent="addAttributes">
<div class="w-full">
<label :class="{ error: v$.attributeModel.$error }">
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.MODEL.LABEL') }}
<select v-model="attributeModel">
<option v-for="model in models" :key="model.id" :value="model.id">
{{ model.option }}
</option>
</select>
<span v-if="v$.attributeModel.$error" class="message">
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.MODEL.ERROR') }}
</span>
<form class="flex w-full" @submit.prevent="addAttributes">
<div class="w-full">
<label :class="{ error: v$.attributeModel.$error }">
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.MODEL.LABEL') }}
<select v-model="attributeModel">
<option v-for="model in models" :key="model.id" :value="model.id">
{{ model.option }}
</option>
</select>
<span v-if="v$.attributeModel.$error" class="message">
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.MODEL.ERROR') }}
</span>
</label>
<woot-input
v-model="displayName"
:label="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.LABEL')"
type="text"
:class="{ error: v$.displayName.$error }"
:error="
v$.displayName.$error
? $t('ATTRIBUTES_MGMT.ADD.FORM.NAME.ERROR')
: ''
"
:placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.PLACEHOLDER')"
@update:model-value="onDisplayNameChange"
@blur="v$.displayName.$touch"
/>
<woot-input
v-model="attributeKey"
:label="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.LABEL')"
type="text"
:class="{ error: v$.attributeKey.$error }"
:error="v$.attributeKey.$error ? keyErrorMessage : ''"
:placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.PLACEHOLDER')"
@blur="v$.attributeKey.$touch"
/>
<label :class="{ error: v$.description.$error }">
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.DESC.LABEL') }}
<textarea
v-model="description"
rows="3"
type="text"
:placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.DESC.PLACEHOLDER')"
@blur="v$.description.$touch"
/>
<span v-if="v$.description.$error" class="message">
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.DESC.ERROR') }}
</span>
</label>
<label :class="{ error: v$.attributeType.$error }">
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LABEL') }}
<select v-model="attributeType">
<option v-for="type in types" :key="type.id" :value="type.id">
{{ type.option }}
</option>
</select>
<span v-if="v$.attributeType.$error" class="message">
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.ERROR') }}
</span>
</label>
<div v-if="isAttributeTypeList" class="multiselect--wrap">
<label>
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.LABEL') }}
</label>
<woot-input
v-model="displayName"
:label="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.LABEL')"
type="text"
:class="{ error: v$.displayName.$error }"
:error="
v$.displayName.$error
? $t('ATTRIBUTES_MGMT.ADD.FORM.NAME.ERROR')
: ''
"
:placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.PLACEHOLDER')"
@update:model-value="onDisplayNameChange"
@blur="v$.displayName.$touch"
<multiselect
ref="tagInput"
v-model="values"
:placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.PLACEHOLDER')"
label="name"
track-by="name"
:class="{ invalid: isMultiselectInvalid }"
:options="options"
multiple
taggable
@close="onTouch"
@tag="addTagValue"
/>
<woot-input
v-model="attributeKey"
:label="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.LABEL')"
type="text"
:class="{ error: v$.attributeKey.$error }"
:error="v$.attributeKey.$error ? keyErrorMessage : ''"
:placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.PLACEHOLDER')"
@blur="v$.attributeKey.$touch"
/>
<label :class="{ error: v$.description.$error }">
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.DESC.LABEL') }}
<textarea
v-model="description"
rows="3"
type="text"
:placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.DESC.PLACEHOLDER')"
@blur="v$.description.$touch"
/>
<span v-if="v$.description.$error" class="message">
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.DESC.ERROR') }}
</span>
<label v-show="isMultiselectInvalid" class="error-message">
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.ERROR') }}
</label>
<label :class="{ error: v$.attributeType.$error }">
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LABEL') }}
<select v-model="attributeType">
<option v-for="type in types" :key="type.id" :value="type.id">
{{ type.option }}
</option>
</select>
<span v-if="v$.attributeType.$error" class="message">
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.ERROR') }}
</span>
</label>
<div v-if="isAttributeTypeList" class="multiselect--wrap">
<label>
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.LABEL') }}
</label>
<multiselect
ref="tagInput"
v-model="values"
:placeholder="
$t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.PLACEHOLDER')
"
label="name"
track-by="name"
:class="{ invalid: isMultiselectInvalid }"
:options="options"
multiple
taggable
@close="onTouch"
@tag="addTagValue"
/>
<label v-show="isMultiselectInvalid" class="error-message">
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.ERROR') }}
</label>
</div>
<div v-if="isAttributeTypeText">
<input
v-model="regexEnabled"
type="checkbox"
@input="toggleRegexEnabled"
/>
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.ENABLE_REGEX.LABEL') }}
</div>
<woot-input
v-if="isAttributeTypeText && isRegexEnabled"
v-model="regexPattern"
:label="$t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_PATTERN.LABEL')"
type="text"
:placeholder="
$t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_PATTERN.PLACEHOLDER')
"
/>
<woot-input
v-if="isAttributeTypeText && isRegexEnabled"
v-model="regexCue"
:label="$t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_CUE.LABEL')"
type="text"
:placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_CUE.PLACEHOLDER')"
/>
<div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
<woot-submit-button
:disabled="isButtonDisabled"
:button-text="$t('ATTRIBUTES_MGMT.ADD.SUBMIT')"
/>
<button class="button clear" @click.prevent="onClose">
{{ $t('ATTRIBUTES_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
</button>
</div>
</div>
</form>
</div>
</woot-modal>
<div v-if="isAttributeTypeText">
<input
v-model="regexEnabled"
type="checkbox"
@input="toggleRegexEnabled"
/>
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.ENABLE_REGEX.LABEL') }}
</div>
<woot-input
v-if="isAttributeTypeText && isRegexEnabled"
v-model="regexPattern"
:label="$t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_PATTERN.LABEL')"
type="text"
:placeholder="
$t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_PATTERN.PLACEHOLDER')
"
/>
<woot-input
v-if="isAttributeTypeText && isRegexEnabled"
v-model="regexCue"
:label="$t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_CUE.LABEL')"
type="text"
:placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_CUE.PLACEHOLDER')"
/>
<div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
<woot-submit-button
:disabled="isButtonDisabled"
:button-text="$t('ATTRIBUTES_MGMT.ADD.SUBMIT')"
/>
<button class="button clear" @click.prevent="onClose">
{{ $t('ATTRIBUTES_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
</button>
</div>
</div>
</form>
</div>
</template>
<style lang="scss" scoped>
app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
+7 -6
View File
@@ -1,6 +1,8 @@
<script setup>
import { computed, onMounted, ref } from 'vue';
import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
import Button from 'dashboard/components-next/button/Button.vue';
import AddAttribute from './AddAttribute.vue';
import CustomAttribute from './CustomAttribute.vue';
import SettingsLayout from '../SettingsLayout.vue';
@@ -68,13 +70,12 @@ const onClickTabChange = index => {
feature-name="custom_attributes"
>
<template #actions>
<woot-button
class="button nice rounded-md"
icon="add-circle"
<Button
:label="$t('ATTRIBUTES_MGMT.HEADER_BTN_TXT')"
icon="i-lucide-plus"
size="sm"
@click="openAddPopup"
>
{{ $t('ATTRIBUTES_MGMT.HEADER_BTN_TXT') }}
</woot-button>
/>
</template>
</BaseSettingsHeader>
</template>
app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
+2 -2
View File
@@ -97,7 +97,7 @@ const tableHeaders = computed(() => {
{{ $t('AUDIT_LOGS.LIST.404') }}
</p>
<div v-else class="min-w-full overflow-x-auto">
<table class="divide-y divide-slate-75 dark:divide-slate-700">
<table class="divide-y divide-n-weak">
<thead>
<th
v-for="thHeader in tableHeaders"
@@ -108,7 +108,7 @@ const tableHeaders = computed(() => {
</th>
</thead>
<tbody
class="divide-y divide-slate-50 dark:divide-slate-800 text-slate-700 dark:text-slate-300"
class="divide-y divide-n-weak text-slate-700 dark:text-slate-300"
>
<tr v-for="auditLogItem in records" :key="auditLogItem.id">
<td class="py-4 pr-4 break-all whitespace-nowrap">
app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
+9 -8
View File
@@ -3,6 +3,8 @@ import { useAlert } from 'dashboard/composables';
import AddAutomationRule from './AddAutomationRule.vue';
import EditAutomationRule from './EditAutomationRule.vue';
import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
import Button from 'dashboard/components-next/button/Button.vue';
import SettingsLayout from '../SettingsLayout.vue';
import { computed, onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
@@ -185,18 +187,17 @@ const tableHeaders = computed(() => {
feature-name="automation"
>
<template #actions>
<woot-button
class="button nice rounded-md"
icon="add-circle"
<Button
:label="$t('AUTOMATION.HEADER_BTN_TXT')"
icon="i-lucide-plus"
size="sm"
@click="openAddPopup"
>
{{ $t('AUTOMATION.HEADER_BTN_TXT') }}
</woot-button>
/>
</template>
</BaseSettingsHeader>
</template>
<template #body>
<table class="min-w-full divide-y divide-slate-75 dark:divide-slate-700">
<table class="min-w-full divide-y divide-n-weak">
<thead>
<th
v-for="thHeader in tableHeaders"
@@ -207,7 +208,7 @@ const tableHeaders = computed(() => {
</th>
</thead>
<tbody
class="divide-y divide-slate-50 dark:divide-slate-800 text-slate-700 dark:text-slate-300"
class="divide-y divide-n-weak text-slate-700 dark:text-slate-300"
>
<AutomationRuleRow
v-for="automation in records"
app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
+47 -51
View File
@@ -4,14 +4,12 @@ import { required, minLength } from '@vuelidate/validators';
import { useAlert } from 'dashboard/composables';
import WootSubmitButton from '../../../../components/buttons/FormSubmitButton.vue';
import Modal from '../../../../components/Modal.vue';
import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
export default {
name: 'AddCanned',
components: {
WootSubmitButton,
Modal,
WootMessageEditor,
},
props: {
@@ -82,58 +80,56 @@ export default {
</script>
<template>
<Modal v-model:show="show" :on-close="onClose">
<div class="flex flex-col h-auto overflow-auto">
<woot-modal-header
:header-title="$t('CANNED_MGMT.ADD.TITLE')"
:header-content="$t('CANNED_MGMT.ADD.DESC')"
/>
<form class="flex flex-col w-full" @submit.prevent="addCannedResponse()">
<div class="w-full">
<label :class="{ error: v$.shortCode.$error }">
{{ $t('CANNED_MGMT.ADD.FORM.SHORT_CODE.LABEL') }}
<input
v-model="shortCode"
type="text"
:placeholder="$t('CANNED_MGMT.ADD.FORM.SHORT_CODE.PLACEHOLDER')"
@blur="v$.shortCode.$touch"
/>
</label>
</div>
<div class="flex flex-col h-auto overflow-auto">
<woot-modal-header
:header-title="$t('CANNED_MGMT.ADD.TITLE')"
:header-content="$t('CANNED_MGMT.ADD.DESC')"
/>
<form class="flex flex-col w-full" @submit.prevent="addCannedResponse()">
<div class="w-full">
<label :class="{ error: v$.shortCode.$error }">
{{ $t('CANNED_MGMT.ADD.FORM.SHORT_CODE.LABEL') }}
<input
v-model="shortCode"
type="text"
:placeholder="$t('CANNED_MGMT.ADD.FORM.SHORT_CODE.PLACEHOLDER')"
@blur="v$.shortCode.$touch"
/>
</label>
</div>
<div class="w-full">
<label :class="{ error: v$.content.$error }">
{{ $t('CANNED_MGMT.ADD.FORM.CONTENT.LABEL') }}
</label>
<div class="editor-wrap">
<WootMessageEditor
v-model="content"
class="message-editor [&>div]:px-1"
:class="{ editor_warning: v$.content.$error }"
enable-variables
:enable-canned-responses="false"
:placeholder="$t('CANNED_MGMT.ADD.FORM.CONTENT.PLACEHOLDER')"
@blur="v$.content.$touch"
/>
</div>
</div>
<div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
<WootSubmitButton
:disabled="
v$.content.$invalid ||
v$.shortCode.$invalid ||
addCanned.showLoading
"
:button-text="$t('CANNED_MGMT.ADD.FORM.SUBMIT')"
:loading="addCanned.showLoading"
<div class="w-full">
<label :class="{ error: v$.content.$error }">
{{ $t('CANNED_MGMT.ADD.FORM.CONTENT.LABEL') }}
</label>
<div class="editor-wrap">
<WootMessageEditor
v-model="content"
class="message-editor [&>div]:px-1"
:class="{ editor_warning: v$.content.$error }"
enable-variables
:enable-canned-responses="false"
:placeholder="$t('CANNED_MGMT.ADD.FORM.CONTENT.PLACEHOLDER')"
@blur="v$.content.$touch"
/>
<button class="button clear" @click.prevent="onClose">
{{ $t('CANNED_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
</button>
</div>
</form>
</div>
</Modal>
</div>
<div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
<WootSubmitButton
:disabled="
v$.content.$invalid ||
v$.shortCode.$invalid ||
addCanned.showLoading
"
:button-text="$t('CANNED_MGMT.ADD.FORM.SUBMIT')"
:loading="addCanned.showLoading"
/>
<button class="button clear" @click.prevent="onClose">
{{ $t('CANNED_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
</button>
</div>
</form>
</div>
</template>
<style scoped lang="scss">
app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
+8 -11
View File
@@ -3,6 +3,7 @@ import { useAlert } from 'dashboard/composables';
import AddCanned from './AddCanned.vue';
import EditCanned from './EditCanned.vue';
import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
import Button from 'dashboard/components-next/button/Button.vue';
import { computed, onMounted, ref, defineOptions } from 'vue';
import { useI18n } from 'vue-i18n';
import { useStoreGetters, useStore } from 'dashboard/composables/store';
@@ -124,13 +125,12 @@ const tableHeaders = computed(() => {
feature-name="canned_responses"
>
<template #actions>
<woot-button
class="button nice rounded-md"
icon="add-circle"
<Button
:label="$t('CANNED_MGMT.HEADER_BTN_TXT')"
icon="i-lucide-plus"
size="sm"
@click="openAddPopup"
>
{{ $t('CANNED_MGMT.HEADER_BTN_TXT') }}
</woot-button>
/>
</template>
</BaseSettingsHeader>
<div class="mt-6 flex-1 w-full max-w-[960px] mx-auto">
@@ -144,10 +144,7 @@ const tableHeaders = computed(() => {
>
{{ $t('CANNED_MGMT.LIST.404') }}
</p>
<table
v-else
class="min-w-full overflow-x-auto divide-y divide-slate-75 dark:divide-slate-700"
>
<table v-else class="min-w-full overflow-x-auto divide-y divide-n-weak">
<thead>
<th
v-for="thHeader in tableHeaders"
@@ -173,7 +170,7 @@ const tableHeaders = computed(() => {
</th>
</thead>
<tbody
class="divide-y divide-slate-50 dark:divide-slate-800 text-slate-700 dark:text-slate-300"
class="divide-y divide-n-weak text-slate-700 dark:text-slate-300"
>
<tr
v-for="(cannedItem, index) in records"
app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
+9 -28
View File
@@ -38,33 +38,14 @@ const openInNewTab = url => {
</script>
<template>
<div
class="flex flex-col items-start w-full gap-2 pt-4 max-w-[960px] mx-auto"
>
<BackButton
v-if="backButtonLabel"
compact
:button-label="backButtonLabel"
/>
<div class="flex items-center justify-between w-full gap-4">
<div class="flex items-center gap-3">
<div
v-if="iconName"
class="flex items-center w-10 h-10 p-1 rounded-full bg-woot-25/60 dark:bg-woot-900/60"
>
<div
class="flex items-center justify-center w-full h-full rounded-full bg-woot-75/70 dark:bg-woot-800/40"
>
<fluent-icon
size="14"
:icon="iconName"
type="outline"
class="flex-shrink-0 text-woot-500 dark:text-woot-500"
/>
</div>
</div>
<div class="flex flex-col items-start w-full gap-2 max-w-[960px] mx-auto">
<div
class="flex items-center justify-between w-full gap-4 h-20 border-b border-n-weak"
>
<div class="flex gap-3">
<BackButton v-if="backButtonLabel" compact />
<h1
class="text-xl font-interDisplay font-semibold tracking-[0.3px] text-slate-900 dark:text-slate-25"
class="text-xl font-interDisplay tracking-[0.3px] font-medium text-n-slate-12"
>
{{ title }}
</h1>
@@ -74,9 +55,9 @@ const openInNewTab = url => {
<slot name="actions" />
</div>
</div>
<div class="flex flex-col gap-2 text-slate-600 dark:text-slate-300 w-full">
<div class="flex flex-col gap-4 text-n-slate-11 w-full pt-3">
<p
class="mb-0 text-sm font-normal line-clamp-5 sm:line-clamp-none max-w-3xl leading-5"
class="mb-0 text-sm font-normal line-clamp-5 sm:line-clamp-none max-w-3xl leading-6"
>
<slot name="description">{{ description }}</slot>
</p>
app/javascript/dashboard/routes/dashboard/settings/customRoles/Index.vue
+7 -7
View File
@@ -8,6 +8,7 @@ import CustomRolePaywall from './component/CustomRolePaywall.vue';
import { computed, onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useStore, useMapGetter } from 'dashboard/composables/store';
import Button from 'dashboard/components-next/button/Button.vue';
const store = useStore();
const { t } = useI18n();
@@ -134,14 +135,13 @@ const confirmDeletion = () => {
feature-name="canned_responses"
>
<template #actions>
<woot-button
class="rounded-md button nice"
icon="add-circle"
<Button
:label="$t('CUSTOM_ROLE.HEADER_BTN_TXT')"
icon="i-lucide-plus"
size="sm"
:disabled="isBehindAPaywall"
@click="openAddModal"
>
{{ $t('CUSTOM_ROLE.HEADER_BTN_TXT') }}
</woot-button>
/>
</template>
</BaseSettingsHeader>
</template>
@@ -150,7 +150,7 @@ const confirmDeletion = () => {
<CustomRolePaywall v-if="isBehindAPaywall" />
<table
v-else
class="min-w-full overflow-x-auto divide-y divide-slate-75 dark:divide-slate-700"
class="min-w-full overflow-x-auto divide-y divide-n-weak"
>
<thead>
<th
app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleTableBody.vue
+1 -1
View File
@@ -26,7 +26,7 @@ const getFormattedPermissions = role => {
<template>
<tbody
class="divide-y divide-slate-50 dark:divide-slate-800 text-slate-700 dark:text-slate-300"
class="divide-y divide-n-weak text-slate-700 dark:text-slate-300"
>
<tr v-for="(customRole, index) in roles" :key="index">
<td
app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
+14 -10
View File
@@ -8,9 +8,12 @@ import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useStoreGetters, useStore } from 'dashboard/composables/store';
import ChannelName from './components/ChannelName.vue';
import { useRouter } from 'vue-router';
import Button from 'dashboard/components-next/button/Button.vue';
const getters = useStoreGetters();
const store = useStore();
const router = useRouter();
const { t } = useI18n();
const { isAdmin } = useAdmin();
@@ -59,6 +62,10 @@ const openDelete = inbox => {
showDeletePopup.value = true;
selectedInbox.value = inbox;
};
const onClickNewInbox = () => {
router.push({ name: 'settings_inbox_new' });
};
</script>
<template>
@@ -75,21 +82,18 @@ const openDelete = inbox => {
feature-name="inboxes"
>
<template #actions>
<router-link
<Button
v-if="isAdmin"
class="button nice rounded-md"
:to="{ name: 'settings_inbox_new' }"
>
<fluent-icon icon="add-circle" />
{{ $t('SETTINGS.INBOXES.NEW_INBOX') }}
</router-link>
:label="$t('SETTINGS.INBOXES.NEW_INBOX')"
icon="i-lucide-plus"
size="sm"
@click="onClickNewInbox"
/>
</template>
</BaseSettingsHeader>
</template>
<template #body>
<table
class="min-w-full overflow-x-auto divide-y divide-slate-75 dark:divide-slate-700"
>
<table class="min-w-full overflow-x-auto divide-y divide-n-weak">
<tbody
class="divide-y divide-slate-25 dark:divide-slate-800 flex-1 text-slate-700 dark:text-slate-100"
>
app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue
+17 -18
View File
@@ -5,9 +5,11 @@ import DashboardAppModal from './DashboardAppModal.vue';
import DashboardAppsRow from './DashboardAppsRow.vue';
import globalConfigMixin from 'shared/mixins/globalConfigMixin';
import BaseSettingsHeader from '../../components/BaseSettingsHeader.vue';
import NextButton from 'dashboard/components-next/button/Button.vue';
export default {
components: {
NextButton,
BaseSettingsHeader,
DashboardAppModal,
DashboardAppsRow,
@@ -93,16 +95,15 @@ export default {
:back-button-label="$t('INTEGRATION_SETTINGS.HEADER')"
>
<template #actions>
<woot-button
class="rounded-md button nice"
icon="add-circle"
<NextButton
:label="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.HEADER_BTN_TXT')"
icon="i-lucide-plus"
size="sm"
@click="openCreatePopup"
>
{{ $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.HEADER_BTN_TXT') }}
</woot-button>
/>
</template>
</BaseSettingsHeader>
<div class="w-full overflow-x-auto text-slate-700 dark:text-slate-200">
<div class="w-full overflow-x-auto text-n-slate-12 max-w-[960px] mx-auto">
<p
v-if="!uiFlags.isFetching && !records.length"
class="flex flex-col items-center justify-center h-full"
@@ -115,18 +116,18 @@ export default {
/>
<table
v-if="!uiFlags.isFetching && records.length"
class="min-w-full divide-y divide-slate-75 dark:divide-slate-700"
class="min-w-full divide-y divide-n-weak"
>
<thead>
<th
v-for="thHeader in tableHeaders"
:key="thHeader"
class="py-4 pr-4 font-semibold text-left text-slate-700 dark:text-slate-300"
class="py-4 pr-4 font-semibold text-left text-n-slate-12"
>
{{ thHeader }}
</th>
</thead>
<tbody class="divide-y divide-slate-50 dark:divide-slate-800">
<tbody class="divide-y divide-n-weak">
<DashboardAppsRow
v-for="(dashboardAppItem, index) in records"
:key="dashboardAppItem.id"
@@ -152,14 +153,12 @@ export default {
:on-close="closeDeletePopup"
:on-confirm="confirmDeletion"
:title="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DELETE.TITLE')"
:message="
$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DELETE.MESSAGE', {
appName: selectedApp.title,
})
"
:confirm-text="
$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DELETE.CONFIRM_YES')
"
:message="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DELETE.MESSAGE', {
appName: selectedApp.title,
})
"
:confirm-text="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DELETE.CONFIRM_YES')
"
:reject-text="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DELETE.CONFIRM_NO')"
/>
</div>
app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue
+2 -2
View File
@@ -108,12 +108,12 @@ export default {
</script>
<template>
<div class="overflow-auto p-4 max-w-full my-auto flex flex-wrap h-full">
<div class="overflow-auto max-w-[960px] mx-auto my-auto flex flex-wrap">
<woot-button
v-if="showAddButton"
color-scheme="success"
class-names="button--fixed-top"
icon="add-circle"
icon="add"
@click="openAddHookModal"
>
{{ $t('INTEGRATION_APPS.ADD_BUTTON') }}
app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
+4 -6
View File
@@ -18,10 +18,10 @@ export default {
</script>
<template>
<div class="flex-shrink flex-grow overflow-auto p-4">
<div class="flex-shrink flex-grow overflow-auto p-1">
<div class="flex flex-col">
<div
class="bg-white dark:bg-slate-800 border border-solid border-slate-75 dark:border-slate-700/50 rounded-xl mb-4 p-4"
class="shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2 px-6 py-5"
>
<div class="flex">
<div class="flex h-[6.25rem] w-[6.25rem]">
@@ -35,12 +35,10 @@ export default {
/>
</div>
<div class="flex flex-col justify-center m-0 mx-4 flex-1">
<h3
class="text-xl font-medium mb-1 text-slate-800 dark:text-slate-100"
>
<h3 class="text-xl font-medium mb-1 text-n-slate-12">
{{ integration.name }}
</h3>
<p class="text-slate-700 dark:text-slate-200">
<p class="text-n-slate-11">
{{ integration.description }}
</p>
</div>
app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue
+3 -3
View File
@@ -77,10 +77,10 @@ export default {
<template>
<div
v-if="integrationLoaded && !uiFlags.isCreatingSlack"
class="flex flex-col flex-1 overflow-auto"
class="flex flex-col flex-1 overflow-auto max-w-[960px] mx-auto p-1 gap-4 pb-10"
>
<div
class="p-4 bg-white border-b border-solid rounded-sm dark:bg-slate-800 border-slate-75 dark:border-slate-700/50"
class="rounded-2xl shadow outline-1 outline outline-n-container bg-n-solid-2 px-6 py-5"
>
<Integration
:integration-id="integration.id"
@@ -96,7 +96,7 @@ export default {
}"
/>
</div>
<div v-if="areHooksAvailable" class="flex-1 p-6">
<div v-if="areHooksAvailable" class="flex-1 flex flex-col gap-4">
<SelectChannelWarning
v-if="!isIntegrationHookEnabled"
:has-connected-a-channel="hasConnectedAChannel"
app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue
+15 -23
View File
@@ -60,35 +60,28 @@ export default {
<template>
<div
class="px-6 py-4 mb-4 border border-yellow-200 rounded-md bg-yellow-50 dark:border-slate-700 dark:bg-slate-800"
class="px-6 py-5 border border-n-amber-6 rounded-2xl bg-n-solid-2 shadow"
>
<div class="flex">
<div class="flex-shrink-0 mt-0.5">
<fluent-icon
icon="alert"
class="text-yellow-500 dark:text-yellow-400"
size="24"
/>
<fluent-icon icon="alert" class="text-n-amber-12" size="24" />
</div>
<div class="ml-3">
<p
class="mb-1 text-base font-semibold text-yellow-900 dark:text-yellow-500"
>
<p class="mb-1 text-base font-semibold text-n-slate-12">
{{
$t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.ATTENTION_REQUIRED')
}}
</p>
<div class="mt-2 text-sm text-yellow-800 dark:text-yellow-600">
<div class="mt-2 text-sm text-n-slate-11">
<p
v-dompurify-html="
formatMessage(
useInstallationName(
errorDescription,
globalConfig.installationName
),
false
)
"
v-dompurify-html="formatMessage(
useInstallationName(
errorDescription,
globalConfig.installationName
),
false
)
"
/>
</div>
</div>
@@ -98,16 +91,15 @@ export default {
v-if="!availableChannels.length"
button-class="smooth small warning"
:loading="uiFlags.isFetchingSlackChannels"
:button-text="
$t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.BUTTON_TEXT')
"
:button-text="$t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.BUTTON_TEXT')
"
spinner-class="warning"
@click="fetchChannels"
/>
<div v-else class="inline-flex">
<select
v-model="selectedChannelId"
class="h-8 py-1 mr-4 text-xs leading-4 border border-yellow-300"
class="h-8 py-1 mr-4 text-xs leading-4"
>
<option value="">
{{ $t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.OPTION_LABEL') }}
app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SlackIntegrationHelpText.vue
+10 -11
View File
@@ -18,22 +18,21 @@ export default {
<template>
<div
class="flex-1 w-full p-6 bg-white rounded-md border border-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200"
class="flex-1 w-full p-6 shadow outline-1 outline outline-n-container rounded-2xl bg-n-solid-2 px-6 py-5"
>
<div class="prose-lg max-w-5xl">
<h5 class="dark:text-slate-100">
<div class="prose-lg max-w-5xl text-n-slate-11">
<h5>
{{ $t('INTEGRATION_SETTINGS.SLACK.HELP_TEXT.TITLE') }}
</h5>
<p>
<span
v-dompurify-html="
formatMessage(
$t('INTEGRATION_SETTINGS.SLACK.HELP_TEXT.BODY', {
selectedChannelName: selectedChannelName,
}),
false
)
"
v-dompurify-html="formatMessage(
$t('INTEGRATION_SETTINGS.SLACK.HELP_TEXT.BODY', {
selectedChannelName: selectedChannelName,
}),
false
)
"
/>
</p>
</div>
app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
+6 -7
View File
@@ -105,7 +105,7 @@ export default {
<template #actions>
<woot-button
class="button nice rounded-md"
icon="add-circle"
icon="add"
@click="openAddPopup"
>
{{ $t('INTEGRATION_SETTINGS.WEBHOOK.HEADER_BTN_TXT') }}
@@ -114,7 +114,7 @@ export default {
</BaseSettingsHeader>
</template>
<template #body>
<table class="min-w-full divide-y divide-slate-75 dark:divide-slate-700">
<table class="min-w-full divide-y divide-n-weak">
<thead>
<th
v-for="thHeader in tableHeaders"
@@ -155,11 +155,10 @@ export default {
:on-close="closeDeletePopup"
:on-confirm="confirmDeletion"
:title="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.TITLE')"
:message="
$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.MESSAGE', {
webhookURL: selectedWebHook.url,
})
"
:message="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.MESSAGE', {
webhookURL: selectedWebHook.url,
})
"
:confirm-text="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.YES')"
:reject-text="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.NO')"
/>
app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
+7 -7
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,19 +95,18 @@ onBeforeMount(() => {
feature-name="labels"
>
<template #actions>
<woot-button
class="rounded-md button nice"
icon="add-circle"
<Button
:label="$t('LABEL_MGMT.HEADER_BTN_TXT')"
icon="i-lucide-plus"
size="sm"
@click="openAddPopup"
>
{{ $t('LABEL_MGMT.HEADER_BTN_TXT') }}
</woot-button>
/>
</template>
</BaseSettingsHeader>
</template>
<template #body>
<table
class="min-w-full overflow-x-auto divide-y divide-slate-75 dark:divide-slate-700"
class="min-w-full overflow-x-auto divide-y divide-n-weak"
>
<thead>
<th
app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
+15 -11
View File
@@ -6,9 +6,12 @@ import SettingsLayout from '../SettingsLayout.vue';
import { computed, onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useStoreGetters, useStore } from 'dashboard/composables/store';
import { useRouter } from 'vue-router';
import Button from 'dashboard/components-next/button/Button.vue';
const getters = useStoreGetters();
const store = useStore();
const router = useRouter();
const { t } = useI18n();
const showDeleteConfirmationPopup = ref(false);
@@ -54,6 +57,10 @@ const tableHeaders = computed(() => {
t('MACROS.LIST.TABLE_HEADER.VISIBILITY'),
];
});
const onClickNewMacro = () => {
router.push({ name: 'macros_new' });
};
</script>
<template>
@@ -72,20 +79,17 @@ const tableHeaders = computed(() => {
feature-name="macros"
>
<template #actions>
<router-link
:to="{ name: 'macros_new' }"
class="button rounded-md primary"
>
<fluent-icon icon="add-circle" />
<span class="button__content">
{{ $t('MACROS.HEADER_BTN_TXT') }}
</span>
</router-link>
<Button
:label="$t('MACROS.HEADER_BTN_TXT')"
icon="i-lucide-plus"
size="sm"
@click="onClickNewMacro"
/>
</template>
</BaseSettingsHeader>
</template>
<template #body>
<table class="min-w-full divide-y divide-slate-75 dark:divide-slate-700">
<table class="min-w-full divide-y divide-n-weak">
<thead>
<th
v-for="thHeader in tableHeaders"
@@ -96,7 +100,7 @@ const tableHeaders = computed(() => {
</th>
</thead>
<tbody
class="divide-y divide-slate-50 dark:divide-slate-800 text-slate-700 dark:text-slate-300"
class="divide-y divide-n-weak text-slate-700 dark:text-slate-300"
>
<MacrosTableRow
v-for="(macro, index) in records"
app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
+7 -8
View File
@@ -69,13 +69,12 @@ export default {
type="add"
:index="i"
:error-key="errors[`action_${i}`]"
:file-name="
fileName(
actionData[i].action_params[0],
actionData[i].action_name,
files
)
"
:file-name="fileName(
actionData[i].action_params[0],
actionData[i].action_name,
files
)
"
:single-node="actionData.length === 1"
@reset-action="$emit('resetAction', i)"
@delete-node="$emit('deleteNode', i)"
@@ -90,7 +89,7 @@ export default {
class="macros__action-button"
color-scheme="success"
variant="smooth"
icon="add-circle"
icon="add"
@click="$emit('addNewNode')"
>
{{ $t('MACROS.EDITOR.ADD_BTN_TOOLTIP') }}
app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAHeader.vue
+6 -7
View File
@@ -1,5 +1,6 @@
<script setup>
import BaseSettingsHeader from '../../components/BaseSettingsHeader.vue';
import Button from 'dashboard/components-next/button/Button.vue';
defineProps({
showActions: {
@@ -19,14 +20,12 @@ defineEmits(['add']);
feature-name="sla"
>
<template v-if="showActions" #actions>
<woot-button
color-scheme="primary"
icon="plus-sign"
class="rounded-xl"
<Button
:label="$t('SLA.ADD_ACTION')"
icon="i-lucide-plus"
size="sm"
@click="$emit('add')"
>
{{ $t('SLA.ADD_ACTION') }}
</woot-button>
/>
</template>
</BaseSettingsHeader>
</template>
app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItem.vue
+1 -1
View File
@@ -48,7 +48,7 @@ const emit = defineEmits(['delete']);
</template>
<template #rightSection>
<div
class="flex items-center divide-x rtl:divide-x-reverse sm:rtl:!border-l-0 sm:rtl:!border-r sm:rtl:border-solid sm:rtl:border-slate-75 sm:rtl:dark:border-slate-700/50 gap-1.5 w-fit sm:w-full sm:gap-0 sm:justify-between divide-slate-75 dark:divide-slate-700/50"
class="flex items-center divide-x rtl:divide-x-reverse sm:rtl:!border-l-0 sm:rtl:!border-r sm:rtl:border-solid sm:rtl:border-slate-75 sm:rtl:dark:border-slate-700/50 gap-1.5 w-fit sm:w-full sm:gap-0 sm:justify-between divide-n-weak/50"
>
<SLAResponseTime response-type="FRT" :response-time="firstResponse" />
<SLAResponseTime response-type="NRT" :response-time="nextResponse" />
app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
+15 -14
View File
@@ -3,10 +3,13 @@ import { useAlert } from 'dashboard/composables';
import { useAdmin } from 'dashboard/composables/useAdmin';
import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';
import Button from 'dashboard/components-next/button/Button.vue';
import { useStoreGetters, useStore } from 'dashboard/composables/store';
import { useI18n } from 'vue-i18n';
const router = useRouter();
const store = useStore();
const { t } = useI18n();
const getters = useStoreGetters();
@@ -63,6 +66,10 @@ const confirmPlaceHolderText = computed(() =>
teamName: selectedTeam.value.name,
})
);
const onClickNewTeam = () => {
router.push({ name: 'settings_teams_new' });
};
</script>
<template>
@@ -74,16 +81,13 @@ const confirmPlaceHolderText = computed(() =>
feature-name="team_management"
>
<template #actions>
<router-link
<Button
v-if="isAdmin"
:to="{ name: 'settings_teams_new' }"
class="button rounded-md primary"
>
<fluent-icon icon="add-circle" />
<span class="button__content">
{{ $t('TEAMS_SETTINGS.NEW_TEAM') }}
</span>
</router-link>
:label="$t('TEAMS_SETTINGS.NEW_TEAM')"
icon="i-lucide-plus"
size="sm"
@click="onClickNewTeam"
/>
</template>
</BaseSettingsHeader>
<div
@@ -100,11 +104,8 @@ const confirmPlaceHolderText = computed(() =>
{{ $t('TEAMS_SETTINGS.LIST.404') }}
</p>
<table
v-else
class="min-w-full divide-y divide-slate-75 dark:divide-slate-700"
>
<tbody class="divide-y divide-slate-50 dark:divide-slate-800">
<table v-else class="min-w-full divide-y divide-n-weak">
<tbody class="divide-y divide-n-weak">
<tr v-for="team in teamsList" :key="team.id">
<td class="py-4 pr-4">
<span class="block font-medium capitalize">{{ team.name }}</span>