Skip to content

Commit

Permalink
fix: fix wording and resolve ts issues. Added a subsection in lobby s…
Browse files Browse the repository at this point in the history 
…ettings

Signed-off-by: DorraJaouad <[email protected]>
  • Loading branch information
@DorraJaouad
DorraJaouad committed Nov 28, 2024
1 parent c4b30d7 commit ac7b0aa
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 39 deletions.
51 changes: 25 additions & 26 deletions src/components/ConversationSettings/LobbySettings.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,26 +9,12 @@
<NcNoteCard v-if="hasCall && !hasLobbyEnabled"
type="warning"
:text="t('spreed', 'Enabling the lobby will remove non-moderators from the ongoing call.')" />
<div class="lobby-general">
<NcCheckboxRadioSwitch :checked="hasLobbyEnabled"
type="switch"
:disabled="isLobbyStateLoading"
@update:checked="toggleLobby">
{{ t('spreed', 'Enable lobby, restricting the conversation to moderators') }}
</NcCheckboxRadioSwitch>

<NcButton v-if="supportImportEmails" @click="isImportEmailsDialogOpen = true">
<template #icon>
<IconFileUpload :size="20" />
</template>
{{ t('spreed', 'Import e-mail participants') }}
</NcButton>

<ImportEmailsDialog v-if="isImportEmailsDialogOpen"
:token="token"
container=".lobby-general"
@close="isImportEmailsDialogOpen = false" />
</div>
<NcCheckboxRadioSwitch :checked="hasLobbyEnabled"
type="switch"
:disabled="isLobbyStateLoading"
@update:checked="toggleLobby">
{{ t('spreed', 'Enable lobby, restricting the conversation to moderators') }}
</NcCheckboxRadioSwitch>
</div>
<div v-if="hasLobbyEnabled" class="app-settings-subsection">
<form :disabled="lobbyTimerFieldDisabled"
Expand All @@ -55,6 +41,25 @@
</div>
</form>
</div>
<div v-if="supportImportEmails" class="import-email-participants">
<h4 class="app-settings-section__subtitle">
{{ t('spreed', 'Import email participants') }}
</h4>
<div class="app-settings-section__hint">
{{ t('spreed', 'You can import a list of email participants from a CSV file.') }}
</div>
<NcButton @click="isImportEmailsDialogOpen = true">
<template #icon>
<IconFileUpload :size="20" />
</template>
{{ t('spreed', 'Import e-mail participants') }}
</NcButton>

<ImportEmailsDialog v-if="isImportEmailsDialogOpen"
:token="token"
container=".import-email-participants"
@close="isImportEmailsDialogOpen = false" />
</div>
</div>
</template>

Expand Down Expand Up @@ -228,12 +233,6 @@ export default {
</script>

<style lang="scss" scoped>
.lobby-general {
display: flex;
flex-direction: column;
gap: var(--default-grid-baseline);
}

.lobby_timer {
&--relative {
color: var(--color-text-maxcontrast);
Expand Down
44 changes: 31 additions & 13 deletions src/components/ImportEmailsDialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
import { importEmails } from '../services/participantsService.js'

const loading = ref(false)
const listImport = ref(null)
const listImport = ref<HTMLInputElement | null>(null)

const props = defineProps<{
token: string,
Expand All @@ -29,18 +29,28 @@ const emit = defineEmits<{
(event: 'close'): void,
}>()

const importedFile = ref<File>(null)
const uploadResult = ref(null)
const importedFile = ref<File | null>(null)
const uploadResult = ref<{ error?: boolean, invalid?: number, message?: string, duplicates?: number, invites?: number } | null>(null)
const uploadResultCaption = computed(() => {
return uploadResult.value?.error
? { class: 'import-list__caption--error', label: t('spreed', 'Error while verifying uploaded file') }
: { class: 'import-list__caption--success', label: t('spreed', 'Uploaded file is verified') }
})

const importListDescription = t('spreed', 'Content format is Comma Separated Values (CSV):<br/>- Header line is required and must match <samp>"email","name"</samp> or just <samp>"email"</samp><br/>- One entry per line (e.g. <samp>"John Doe","[email protected]"</samp>)',
undefined,
undefined, {
escape: true,
sanitize: true
})

/**
* Call native input[type='file'] to import a file
*/
function triggerImport() {
if (!listImport.value) {
return
}
listImport.value.value = ''
listImport.value.click()
}
Expand All @@ -51,8 +61,11 @@ function triggerImport() {
*/
function importList(event: Event) {
const file = (event.target as HTMLInputElement).files?.[0]
importedFile.value = file ?? null
if (!file) {
return
}

importedFile.value = file
testList(importedFile.value)
}

Expand All @@ -77,7 +90,7 @@ async function testList(file: File) {
* Verify imported file and add participants
* @param file file to upload
*/
async function submitList(file: File) {
async function submitList(file: File | null) {
if (!file) {
return
}
Expand All @@ -95,8 +108,8 @@ async function submitList(file: File) {

<template>
<NcDialog class="import-list"
:name="t('spreed', 'Import e-mail participants')"
size="small"
:name="t('spreed', 'Import email participants')"
size="normal"
close-on-click-outside
:container="container"
@update:open="emit('close')">
Expand All @@ -106,7 +119,8 @@ async function submitList(file: File) {
type="file"
class="hidden-visually"
@change="importList">

<!-- eslint-disable-next-line vue/no-v-html -->
<div class="import-list__hint" v-html="importListDescription" />
<div class="import-list__wrapper">
<NcTextField class="import-list__input"
:model-value="importedFile?.name ?? ''"
Expand All @@ -117,7 +131,7 @@ async function submitList(file: File) {
<NcLoadingIcon v-if="loading" :size="20" />
<IconFileUpload v-else :size="20" />
</template>
{{ t('spreed', 'Browse …') }}
{{ t('spreed', 'Browse') }}
</NcButton>
</div>

Expand All @@ -136,13 +150,13 @@ async function submitList(file: File) {
{{ uploadResultCaption.label }}
</p>
<p v-if="uploadResult?.invalid" class="import-list__description">
{{ n('spreed', '%n invalid e-mail', '%n invalid e-mails', uploadResult.invalid) }}
{{ n('spreed', '%n invalid email', '%n invalid emails', uploadResult.invalid) }}
</p>
<p v-if="uploadResult?.message" class="import-list__description">
{{ uploadResult.message }}
</p>
<p v-if="uploadResult?.duplicates" class="import-list__description">
{{ n('spreed', '%n e-mail is already imported or a duplicate', '%n e-mails are already imported or duplicates', uploadResult.duplicates) }}
{{ n('spreed', '%n email is already imported or a duplicate', '%n emails are already imported or duplicates', uploadResult.duplicates) }}
</p>
<p v-if="uploadResult?.invites" class="import-list__description import-list__description--separated">
{{ n('spreed', '%n invitation can be sent', '%n invitations can be sent', uploadResult.invites) }}
Expand All @@ -165,7 +179,7 @@ async function submitList(file: File) {
&__wrapper {
display: flex;
gap: var(--default-grid-baseline);
margin-bottom: calc(var(--default-grid-baseline) * 3);
margin-bottom: calc(var(--default-grid-baseline) * 3);
}

&__input {
Expand Down Expand Up @@ -201,10 +215,14 @@ async function submitList(file: File) {
&__description {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&--separated {
border-top: 1px solid var(--color-border-dark);
}
}

&__hint {
color: var(--color-text-maxcontrast);
padding: calc(var(--default-grid-baseline) * 2);
}
}
</style>

0 comments on commit ac7b0aa

Please sign in to comment.