Skip to content

Commit 6c6c9ca

Browse files
author
Elias Boukamza
committed
feat: read and apply user settings code
1 parent 9ce9670 commit 6c6c9ca

21 files changed

Lines changed: 263 additions & 21 deletions

File tree

‎apps/chrome-extension/src/chrome/utils.mock.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,10 @@ const getRuleSettings = async (): Promise<SettingsReadingTool> => {
8080
return buildDefaultSettingsReadingTool()
8181
}
8282

83+
const openSettingsCode = async () => {
84+
await router.push('settings-code')
85+
}
86+
8387
export {
8488
getCurrentTab,
8589
closeCurrentTab,
@@ -95,5 +99,6 @@ export {
9599
getMaskSettings,
96100
getRuleSettings,
97101
saveMaskSettings,
98-
saveRuleSettings
102+
saveRuleSettings,
103+
openSettingsCode
99104
}

‎apps/chrome-extension/src/chrome/utils.ts‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,16 @@ const getRuleSettings = async (): Promise<SettingsReadingTool> => {
102102
return ruleSettings ?? buildDefaultSettingsReadingTool()
103103
}
104104

105+
const openSettingsCode = async (): Promise<void> => {
106+
try {
107+
await chrome.tabs.create({
108+
url: 'index.html#/settingsCode'
109+
})
110+
} catch (e) {
111+
console.error(e)
112+
}
113+
}
114+
105115
export {
106116
getCurrentTab,
107117
closeCurrentTab,
@@ -117,5 +127,6 @@ export {
117127
saveMaskSettings,
118128
getMaskSettings,
119129
saveRuleSettings,
120-
getRuleSettings
130+
getRuleSettings,
131+
openSettingsCode
121132
}

‎apps/chrome-extension/src/chrome/utilsFactory.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export interface ChromeUtils {
1818
saveMaskSettings: (maskSettings: SettingsReadingTool) => Promise<void>
1919
getRuleSettings: () => Promise<SettingsReadingTool>
2020
saveRuleSettings: (ruleSettings: SettingsReadingTool) => Promise<void>
21+
openSettingsCode: () => Promise<void>
2122
}
2223

2324
const buildUtils = (): ChromeUtils => {

‎apps/chrome-extension/src/components/SettingsCode.vue‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<script lang="ts">
2+
import { computed, defineComponent, PropType, ref } from 'vue'
3+
import { BIconClipboardPlus, VBTooltip } from 'bootstrap-vue'
4+
import { getCode, Settings } from '@readapt/settings'
5+
6+
const SettingsCode = defineComponent({
7+
props: {
8+
settings: { type: Object as PropType<Settings>, required: true }
9+
},
10+
components: {
11+
BIconClipboardPlus
12+
},
13+
directives: {
14+
VBTooltip
15+
},
16+
setup(props) {
17+
const copyLabel = ref<string>('COPY')
18+
19+
const codeWrapper = computed(() => {
20+
return getCode(props.settings)
21+
})
22+
23+
const copyCode = (): Promise<void> => {
24+
copyLabel.value = 'COPIED'
25+
return navigator.clipboard.writeText(codeWrapper.value.code)
26+
}
27+
28+
const resetLabel = () => {
29+
setTimeout(() => {
30+
copyLabel.value = 'COPY'
31+
}, 300)
32+
}
33+
34+
return { codeWrapper, copyCode, copyLabel, resetLabel }
35+
}
36+
})
37+
38+
export default SettingsCode
39+
</script>
40+
41+
<template>
42+
<div class="d-flex justify-content-between">
43+
<span>{{ $t('SETTINGS_CODE.PREFERENCE_CODE') }}:</span>
44+
<span class="copy" @click="copyCode()" v-b-tooltip.hover.top :title="$t(copyLabel)" @mouseleave="resetLabel()">
45+
<code class="mr-4">{{ codeWrapper.preview }}</code>
46+
<BIconClipboardPlus></BIconClipboardPlus>
47+
</span>
48+
</div>
49+
</template>
50+
51+
<style scoped>
52+
.copy {
53+
cursor: pointer;
54+
}
55+
</style>

‎apps/chrome-extension/src/i18n/en.json‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,11 +85,17 @@
8585
"CANCEL": "Cancel"
8686
},
8787
"SETTINGS_CODE": {
88-
"PREFERENCE_CODE": "Preference code"
88+
"PREFERENCE_CODE": "Preference code",
89+
"APPLY_THIS_SETTINGS": "Apply this settings",
90+
"APPLY_YOUR_SETTINGS_CODE": "Apply your Settings Code",
91+
"WRONG_CODE_ERROR": "Wrong code!",
92+
"PASTE_YOUR_SETTINGS": "Paste your settings code here"
8993
},
9094
"LOADING": "Loading",
9195
"DEFAULT": "Default",
9296
"MEDIUM": "Medium",
9397
"LARGE": "Large",
94-
"EXTRA_LARGE": "Extra Large"
98+
"EXTRA_LARGE": "Extra Large",
99+
"COPY": "Copy",
100+
"COPIED": "Copied!"
95101
}

‎apps/chrome-extension/src/i18n/fr.json‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -85,12 +85,17 @@
8585
"CANCEL": "Annuler"
8686
},
8787
"SETTINGS_CODE": {
88-
"PREFERENCE_CODE": "Code du profil",
89-
"PREFERENCE_CODE_HELP": "Ce code correspond à votre profil. Vous pouvez utiliser ce code sur les autres plateformes que nous supportons."
88+
"PREFERENCE_CODE": "Code profile",
89+
"APPLY_THIS_SETTINGS": "Appliquer ces préférences",
90+
"APPLY_YOUR_SETTINGS_CODE": "Appliquer votre code profile",
91+
"WRONG_CODE_ERROR": "Code erroné",
92+
"PASTE_YOUR_SETTINGS": "Coller ici votre code profile"
9093
},
9194
"LOADING": "Chargement en cours",
9295
"DEFAULT": "Par Défaut",
9396
"MEDIUM": "Moyen",
9497
"LARGE": "Grand",
95-
"EXTRA_LARGE": "Très Grand"
98+
"EXTRA_LARGE": "Très Grand",
99+
"COPY": "Copier",
100+
"COPIED": "Copié !"
96101
}

‎apps/chrome-extension/src/main.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import Vue from 'vue'
22
import VueSanitize from 'vue-sanitize'
3+
import { VBTooltip } from 'bootstrap-vue'
34

45
import App from './App.vue'
56
import i18n from './i18n'
@@ -11,6 +12,7 @@ import './theme.scss'
1112
Vue.config.productionTip = false
1213

1314
Vue.use(VueSanitize)
15+
Vue.directive('b-tooltip', VBTooltip)
1416

1517
new Vue({
1618
i18n,

‎apps/chrome-extension/src/router/router.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,10 @@ const routes: Array<RouteConfig> = [
2323
{
2424
path: '/settings',
2525
component: () => import('@/views/SettingsMenu.vue')
26+
},
27+
{
28+
path: '/settings-code',
29+
component: () => import('@/views/SettingsCodeEdit.vue')
2630
}
2731
]
2832

‎apps/chrome-extension/src/views/MainMenu.vue‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,17 @@ const MainMenu = defineComponent({
2626
setup() {
2727
const readaptEnabled = ref(true)
2828
29-
const { openSettings, sendMessageToCurrentTab, newSettings, openTemplates, broadcastMessage, getEnabled, saveEnabled, saveLocale } = utils
29+
const {
30+
openSettings,
31+
sendMessageToCurrentTab,
32+
newSettings,
33+
openTemplates,
34+
broadcastMessage,
35+
getEnabled,
36+
saveEnabled,
37+
saveLocale,
38+
openSettingsCode
39+
} = utils
3040
3141
const settings = computed(() => store.getters.getSettings)
3242
const defaultProfiles = buildDefaultProfiles()
@@ -60,16 +70,17 @@ const MainMenu = defineComponent({
6070
return {
6171
version,
6272
readaptEnabled,
73+
// methods,
6374
openSettings,
6475
newSettings,
6576
sendMessageToCurrentTab,
6677
broadcastMessage,
6778
openTemplates,
68-
// methods,
6979
switchEnabled,
7080
adapt,
7181
reset,
7282
selectTemplate,
83+
openSettingsCode,
7384
changeLocale,
7485
isDefaultSettings
7586
}
@@ -121,21 +132,21 @@ export default MainMenu
121132
<div v-else class="text-center my-3">{{ $t('MAIN_MENU.FIRST_RUN') }}</div>
122133

123134
<div class="mt-3 mb-auto d-flex align-items-center" :class="isDefaultSettings ? 'justify-content-center' : 'justify-content-between'">
124-
<b-button v-if="!isDefaultSettings" size="sm" variant="primary" @click="openSettings" style="max-width: 150px">
135+
<b-button v-if="!isDefaultSettings" size="sm" variant="primary" @click="openSettings" style="max-width: 120px">
125136
{{ $t('MAIN_MENU.SEE_MODIFY_CURRENT_PROFILE') }}
126137
</b-button>
127138

128-
<b-button size="sm" variant="primary" :class="{ 'mr-4': isDefaultSettings }" @click="newSettings" style="max-width: 150px">
139+
<b-button size="sm" variant="primary" :class="{ 'mr-3': isDefaultSettings }" @click="newSettings" style="max-width: 120px">
129140
{{ $t('MAIN_MENU.CREATE_BRAND_NEW_PROFILE') }}
130141
</b-button>
131142

143+
<b-button size="sm" variant="primary" :class="{ 'mr-3': isDefaultSettings }" @click="openSettingsCode" style="max-width: 120px">
144+
{{ $t('MAIN_MENU.I_HAVE_PROFILE_CODE') }}
145+
</b-button>
146+
132147
<b-button size="sm" variant="primary" @click="selectTemplate" style="max-width: 150px">
133148
{{ $t('MAIN_MENU.BASE_YOUR_PROFILE_FROM_TEMPLATE') }}
134149
</b-button>
135-
136-
<!-- <b-button size="sm" variant="primary" disabled>-->
137-
<!-- {{ $t('MAIN_MENU.I_HAVE_PROFILE_CODE') }}-->
138-
<!-- </b-button>-->
139150
</div>
140151

141152
<QuickActivate class="mb-auto" />

‎apps/chrome-extension/src/views/SettingsCodeEdit.vue‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<script lang="ts">
2+
import { computed, defineComponent, ref } from 'vue'
3+
import { BButton } from 'bootstrap-vue'
4+
5+
import { adaptHtmlElementAsyncFn } from '@/visualEngine/adaptHtmlElementAsync'
6+
import { code2Settings, getLangConfig } from '@readapt/settings'
7+
import { AdaptContainer, SaveSettings } from '@readapt/shared-components'
8+
import { saveSettings } from '@/store'
9+
import utils from '@/chrome'
10+
11+
const { closeCurrentTab } = utils
12+
13+
const SettingsCodeEdit = defineComponent({
14+
components: { BButton, AdaptContainer, SaveSettings },
15+
setup() {
16+
const code = ref<string>('')
17+
18+
const settings = computed(() => {
19+
try {
20+
return code2Settings(code.value)
21+
} catch (e) {
22+
//error
23+
}
24+
return undefined
25+
})
26+
27+
const wrongCodeError = computed(() => {
28+
return code.value && !settings.value
29+
})
30+
31+
const textPreview = computed(() => {
32+
const lang = settings.value ? settings.value.language : 'en'
33+
return getLangConfig(lang).textPreview
34+
})
35+
36+
const applyCode = () => {
37+
if (settings.value) {
38+
saveSettings(settings.value)
39+
}
40+
}
41+
42+
const close = async () => {
43+
await closeCurrentTab()
44+
}
45+
46+
return {
47+
adaptHtmlElementAsyncFn,
48+
applyCode,
49+
close,
50+
textPreview,
51+
settings,
52+
code,
53+
wrongCodeError
54+
}
55+
}
56+
})
57+
export default SettingsCodeEdit
58+
</script>
59+
<template>
60+
<div class="container-fluid">
61+
<div class="my-4">
62+
<h2>{{ $t('SETTINGS_CODE.APPLY_YOUR_SETTINGS_CODE') }}</h2>
63+
</div>
64+
<div>
65+
<textarea class="form-control" rows="5" :placeholder="$t('SETTINGS_CODE.PASTE_YOUR_SETTINGS')" v-model="code"></textarea>
66+
</div>
67+
68+
<div class="d-flex flex-column align-content-between h-100">
69+
<div class="mt-3 d-flex justify-content-between">
70+
<SaveSettings @save-settings="applyCode()" :disabled="!settings" label="SETTINGS_CODE.APPLY_THIS_SETTINGS" />
71+
<b-button size="sm" variant="outline-primary" @click="close()"> {{ $t('SETTINGS.CLOSE') }}</b-button>
72+
</div>
73+
74+
<p v-if="wrongCodeError" class="text-danger my-2">{{ $t('SETTINGS_CODE.WRONG_CODE_ERROR') }}</p>
75+
76+
<template v-if="settings">
77+
<h3 class="my-4">{{ $t('SETTINGS.TEXT_PREVIEW') }}</h3>
78+
79+
<AdaptContainer
80+
class="settings-code-preview"
81+
:adapt-html-element-async="adaptHtmlElementAsyncFn()"
82+
:content-to-adapt="$sanitize('<p>' + textPreview + '</p>')"
83+
:settings="settings"
84+
scope="settings-code-preview"
85+
/>
86+
</template>
87+
</div>
88+
</div>
89+
</template>
90+
<style scoped></style>

0 commit comments

Comments
 (0)