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

add form

Browse Source
This commit is contained in:
Muhsin Keloth
2024-04-12 15:08:42 +05:30
parent 7e80d7cc3b
commit 2283c3505f
7 changed files with 186 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/components/ui/PreviewCard.vue
+5 -2
View File
@@ -14,13 +14,16 @@
}"
>
<div class="items-center flex font-medium p-1 text-sm">{{ heading }}</div>
<fluent-icon
<!-- <fluent-icon
v-if="active"
icon="checkmark-circle"
type="solid"
size="24"
class="text-woot-500 dark:text-woot-500"
/>
/> -->
<div>
<input type="radio" name="hotkey" value="enter" />
</div>
</div>
<div
class="text-slate-700 dark:text-slate-200 text-xs leading-[1.4] px-3 pt-3 pb-0 text-start"
app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue
+71 -51
View File
@@ -1,62 +1,82 @@
<template>
<div
class="flex flex-1 h-full justify-between flex-col m-0 bg-white dark:bg-slate-900 overflow-auto"
class="flex h-full flex-col p-5 pt-16 mx-auto my-0 bg-white dark:bg-slate-900 overflow-auto font-inter"
>
<div class="flex p-5 pt-16 mx-auto my-0">
<div class="flex flex-col gap-8 min-w-[335px] sm:w-[720px]">
<span class="font-medium dark:text-white text-slate-900 text-[24px]">
Profile Settings
<div class="flex flex-col gap-8 sm:max-w-3xl">
<h2 class="font-medium text-slate-900 dark:text-white text-2xl">
Profile Settings
</h2>
<div>
<span class="text-slate-900 dark:text-slate-25 text-normal font-medium">
Profile picture
</span>
<div>
<span
class="text-slate-900 dark:text-slate-25 text-normal font-medium"
>
Profile picture
</span>
<!-- <thumbnail src="" username="John Doe" size="72px" /> -->
</div>
<div>
<span class="text-slate-900 dark:text-slate-25 text-lg font-medium">
Personal message signature
</span>
<div class="w-full h-[1px] bg-slate-200 dark:bg-slate-700 my-2" />
<p class="text-slate-600 dark:text-slate-400 text-sm font-normal">
Create a unique message signature to appear at the end of every
message you send from any inbox. You can also include an inline
image, which is supported in live-chat, email, and API inboxes.
</p>
</div>
<div>
<span class="text-slate-900 dark:text-slate-25 text-lg font-medium">
Hot key to send messages
</span>
<div class="w-full h-[1px] bg-slate-200 dark:bg-slate-700 my-2" />
<p class="text-slate-600 dark:text-slate-400 text-sm font-normal">
You can select a hotkey (either Enter or Cmd/Ctrl+Enter) based on
your preference of writing.
</p>
<div class="flex flex-col md:flex-row gap-4">
<div class="flex-1 p-4 rounded-xl border border-slate-200">
<div class="flex flex-row justify-between">
<div class="text-sm">Enter (↵)</div>
<input type="radio" name="hotkey" value="enter" />
</div>
<div class="text-xs pt-2">
Send messages by pressing Enter key instead of clicking send
button.
</div>
<img class="pt-4" src="/hot-key-enter.png" alt="Enter key" />
</div>
<div class="flex-1 p-4 border">BOX 2</div>
</div>
</div>
<!-- <thumbnail src="" username="John Doe" size="72px" /> -->
</div>
<personal-wrapper
header="Personal message signature"
description="Create a unique message signature to appear at the end of every message you send from any inbox. You can also include an inline image, which is supported in live-chat, email, and API inboxes."
>
<template #settingsItem>
<message-signature />
<form-input
name="full_name"
class="flex-1"
:class="{ error: true }"
:label="$t('REGISTER.FULL_NAME.LABEL')"
:placeholder="$t('REGISTER.FULL_NAME.PLACEHOLDER')"
:has-error="true"
:error-message="$t('REGISTER.FULL_NAME.ERROR')"
/>
</template>
</personal-wrapper>
<personal-wrapper
header="Hot key to send messages"
description="You can select a hotkey (either Enter or Cmd/Ctrl+Enter) based on your
preference of writing."
>
<template #settingsItem>
<div class="flex gap-4 flex-row">
<button
v-for="keyOption in keyOptions"
:key="keyOption.key"
class="cursor-pointer p-0"
>
<preview-card
:heading="keyOption.heading"
:content="keyOption.content"
:src="keyOption.src"
:active="true"
/>
</button>
</div>
</template>
</personal-wrapper>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import MessageSignature from '../profile/MessageSignature.vue';
// import Thumbnail from './Thumbnail.vue';
import PersonalWrapper from './PersonalWrapper.vue';
import PreviewCard from 'dashboard/components/ui/PreviewCard.vue';
import FormInput from 'v3/components/Form/Input.vue';
const credentials = ref({
fullName: '',
});
const keyOptions = [
{
key: 'enter',
src: '/assets/images/dashboard/profile/hot-key-enter.svg',
heading: 'Enter key',
content: 'Send messages by pressing the Enter key',
},
{
key: 'cmd_enter',
src: '/assets/images/dashboard/profile/hot-key-ctrl-enter.svg',
heading: 'Enter key',
content: 'Send messages by pressing the Enter key',
},
];
</script>
app/javascript/dashboard/routes/dashboard/settings/personal/PersonalWrapper.vue
+48
View File
@@ -0,0 +1,48 @@
<template>
<div class="flex flex-col gap-6 w-full items-start">
<div
class="flex flex-col gap-4 divide-y divide-slate-200 dark:divide-slate-700"
>
<h4
v-if="header"
class="text-slate-900 dark:text-slate-25 text-lg font-medium"
>
{{ header }}
</h4>
<p
v-if="description"
class="text-slate-600 dark:text-slate-400 text-sm font-normal mb-0 pt-4"
>
{{ description }}
</p>
</div>
<div v-if="$slots.settingsItem" class="w-full flex flex-col gap-6">
<slot name="settingsItem" />
<woot-button
v-if="showActionButton"
color-scheme="primary"
class="rounded-xl w-fit"
@click="$emit('click')"
>
Save
</woot-button>
</div>
</div>
</template>
<script setup>
defineProps({
header: {
type: String,
default: '',
},
description: {
type: String,
default: '',
},
showActionButton: {
type: Boolean,
default: true,
},
});
</script>
app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue
+11 -37
View File
@@ -1,40 +1,14 @@
<template>
<div
class="profile--settings--row text-black-900 dark:text-slate-300 flex items-center"
>
<div class="w-1/4 py-4 pr-6 ml-0">
<h4 class="text-lg text-black-900 dark:text-slate-200">
{{ $t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.TITLE') }}
</h4>
<p>{{ $t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.NOTE') }}</p>
</div>
<div class="p-4 w-[45%]">
<div>
<label for="message-signature-input">{{
$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE.LABEL')
}}</label>
<woot-message-editor
id="message-signature-input"
v-model="messageSignature"
class="message-editor h-[10rem]"
:is-format-mode="true"
:placeholder="
$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE.PLACEHOLDER')
"
:enabled-menu-options="customEditorMenuList"
:enable-suggestions="false"
:show-image-resize-toolbar="true"
/>
</div>
<woot-button
:is-loading="isUpdating"
type="button"
@click.prevent="updateSignature"
>
{{ $t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.BTN_TEXT') }}
</woot-button>
</div>
</div>
<woot-message-editor
id="message-signature-input"
v-model="messageSignature"
class="message-editor h-[10rem]"
:is-format-mode="true"
:placeholder="$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE.PLACEHOLDER')"
:enabled-menu-options="customEditorMenuList"
:enable-suggestions="false"
:show-image-resize-toolbar="true"
/>
</template>
<script>
@@ -99,7 +73,7 @@ export default {
<style lang="scss" scoped>
.message-editor {
@apply px-3 mb-4;
@apply px-3;
::v-deep {
.ProseMirror-menubar {
app/javascript/v3/views/auth/signup/components/Signup/Form.vue
+1 -1
View File
@@ -83,7 +83,7 @@ import { required, minLength, email } from 'vuelidate/lib/validators';
import { mapGetters } from 'vuex';
import globalConfigMixin from 'shared/mixins/globalConfigMixin';
import alertMixin from 'shared/mixins/alertMixin';
import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals ';
import VueHcaptcha from '@hcaptcha/vue-hcaptcha';
import FormInput from '../../../../../components/Form/Input.vue';
import SubmitButton from '../../../../../components/Button/SubmitButton.vue';