Skip to content

Commit

Permalink
Merge pull request #1217 from NicoPennec/fix/settings
Browse files Browse the repository at this point in the history 
improve studio settings
  • Loading branch information
@NicoPennec
NicoPennec authored Oct 12, 2023
2 parents efbbaae + 16b68cd commit 74a5305
Show file tree
Hide file tree
Showing 4 changed files with 137 additions and 148 deletions.
264 changes: 129 additions & 135 deletions src/components/pages/Settings.vue
View file
Original file line number Diff line number Diff line change
@@ -1,103 +1,97 @@
<template>
<div class="settings page">
<div class="settings-content">
<div class="settings-body">
<h2>
{{ $t('settings.title') }}
</h2>
<p>
<label class="label">
{{ $t('settings.logo') }}
</label>
</p>
<div class="logo-wrapper" v-if="organisation.has_avatar">
<form ref="form" class="settings-form" @submit.prevent="saveSettings">
<h2>
{{ $t('settings.title') }}
</h2>
<div class="field">
<label class="label">
{{ $t('settings.logo') }}
</label>
<div class="logo-wrapper" v-if="form.has_avatar">
<img :src="organisationLogoPath" />
</div>
<p class="no-logo" v-else>
{{ $t('settings.no_logo') }}
<em>{{ $t('settings.no_logo') }}</em>
</p>
<p>
<button class="button set-logo-button" @click="showAvatarModal">
<button
type="button"
class="button set-logo-button"
@click="showAvatarModal"
>
{{ $t('settings.set_logo') }}
</button>
</p>
<p v-if="form.has_avatar">
<button
type="button"
class="button is-link remove-logo-button"
@click="removeAvatar"
>
{{ $t('settings.remove_logo') }}
</button>
</p>
</div>
<text-field
class="mt2"
:label="$t('settings.fields.name')"
v-model.trim="form.name"
/>
<text-field
:label="$t('settings.fields.hours_by_day')"
:max="24"
type="number"
v-model="form.hours_by_day"
/>
<combobox-boolean
:label="$t('settings.fields.use_original_name')"
v-model="form.use_original_file_name"
/>
<combobox-boolean
:label="$t('settings.fields.show_hd_default')"
v-model="form.hd_by_default"
/>
<combobox-boolean
:label="$t('settings.fields.timesheets_locked')"
v-model="form.timesheets_locked"
/>
<h2>
{{ $t('settings.integrations') }}
</h2>
<text-field
:label="$t('settings.fields.slack_token')"
v-model.trim="form.chat_token_slack"
/>
<text-field
:label="$t('settings.fields.discord_token')"
v-model.trim="form.chat_token_discord"
/>
<div class="mattermost_integrations">
<text-field
class="mt2"
:label="$t('settings.fields.name')"
@enter="saveSettings()"
v-model="form.name"
/>
<text-field
:label="$t('settings.fields.hours_by_day')"
type="number"
@enter="saveSettings()"
v-model="form.hours_by_day"
/>
<combobox-boolean
:label="$t('settings.fields.use_original_name')"
@enter="saveSettings()"
v-model="form.use_original_file_name"
/>
<combobox-boolean
:label="$t('settings.fields.show_hd_default')"
@enter="saveSettings()"
v-model="form.hd_by_default"
/>
<combobox-boolean
:label="$t('settings.fields.timesheets_locked')"
@enter="saveSettings()"
v-model="form.timesheets_locked"
/>
<h2>
{{ $t('settings.integrations') }}
</h2>
<text-field
:label="$t('settings.fields.slack_token')"
@enter="saveSettings()"
v-model="form.chat_token_slack"
/>

<text-field
:label="$t('settings.fields.discord_token')"
@enter="saveSettings()"
v-model="form.chat_token_discord"
:label="$t('settings.fields.mattermost_webhook')"
v-model.trim="form.chat_webhook_mattermost"
/>

<div id="mattermost_integrations">
<text-field
:label="$t('settings.fields.mattermost_webhook')"
@enter="saveSettings()"
v-model="form.chat_webhook_mattermost"
/>
<div
class="error pull-right"
v-if="this.errors.webhook_error === true"
>
<em>{{ $t('settings.webhook_error') }}</em>
</div>
</div>

<button
:class="{
button: true,
'save-button': true,
'is-medium': true,
'is-loading': loading.save
}"
@click="saveSettings()"
<div
class="error has-text-centered"
v-if="this.errors.webhook_error === true"
>
{{ $t('settings.save.button') }}
</button>
<p
:class="{
error: true,
'is-hidden': !errors.save
}"
>
{{ $t('settings.save.error') }}
</p>
<em>{{ $t('settings.webhook_error') }}</em>
</div>
</div>
</div>
<button
class="button save-button is-medium"
:class="{
'is-loading': loading.save
}"
:disabled="loading.save || !this.$refs.form?.checkValidity()"
>
{{ $t('settings.save.button') }}
</button>
<p class="error has-text-centered mt2" v-if="errors.save">
<em>{{ $t('settings.save.error') }}</em>
</p>
</form>

<change-avatar-modal
:active="modals.avatar"
Expand Down Expand Up @@ -128,16 +122,17 @@ export default {
data() {
return {
organisationLogoKey: new Date().getUTCDate(),
organisationLogoPath: '',
form: {
name: '',
hours_by_day: 0,
original_file_name: 'false',
hd_by_default: 'false',
chat_token_discord: '',
chat_token_slack: '',
chat_webhook_mattermost: '',
chat_token_discord: ''
has_avatar: false,
hd_by_default: 'false',
hours_by_day: 0,
name: '',
timesheets_locked: 'false',
use_original_file_name: 'false'
},
errors: {
save: false,
Expand All @@ -155,10 +150,7 @@ export default {
},
mounted() {
this.form = Object.assign(this.form, this.organisation)
this.organisationLogoKey = 'key' + new Date().toISOString()
this.organisationLogoPath =
'/api/pictures/thumbnails/organisations/' + `${this.organisation.id}.png`
this.organisationLogoPath = `/api/pictures/thumbnails/organisations/${this.organisation.id}.png`
},
computed: {
Expand Down Expand Up @@ -194,15 +186,13 @@ export default {
this.loading.save = true
this.errors.save = false
this.saveOrganisation(this.form)
.then(() => {
this.loading.save = false
this.errors.save = false
})
.catch(err => {
console.error(err)
this.loading.save = false
this.errors.save = true
})
.finally(() => {
this.loading.save = false
})
}
},
Expand All @@ -214,10 +204,8 @@ export default {
setTimeout(() => {
this.loading.saveAvatar = false
this.modals.avatar = false
this.organisationLogoPath =
'/api/pictures/thumbnails/organisations/' +
`${this.organisation.id}.png?t=` +
new Date().toISOString()
const timestamp = Date.now()
this.organisationLogoPath = `/api/pictures/thumbnails/organisations/${this.organisation.id}.png?t=${timestamp}`
}, 500)
})
.catch(err => {
Expand All @@ -229,24 +217,33 @@ export default {
showAvatarModal() {
this.modals.avatar = true
},
removeAvatar() {
this.form.has_avatar = false
}
},
watch: {
organisation() {
this.form = {
name: this.organisation.name,
hours_by_day: this.organisation.hours_by_day,
use_original_file_name: this.organisation.use_original_file_name
? 'true'
: 'false',
timesheets_locked: this.organisation.timesheets_locked
? 'true'
: 'false',
hd_by_default: this.organisation.hd_by_default ? 'true' : 'false',
chat_token_slack: this.organisation.chat_token_slack,
chat_token_discord: this.organisation.chat_token_discord,
chat_webhook_mattermost: this.organisation.chat_webhook_mattermost
organisation: {
immediate: true,
handler() {
this.form = {
chat_token_discord: this.organisation.chat_token_discord,
chat_token_slack: this.organisation.chat_token_slack,
chat_webhook_mattermost: this.organisation.chat_webhook_mattermost,
has_avatar: this.organisation.has_avatar,
hd_by_default: this.organisation.hd_by_default ? 'true' : 'false',
hours_by_day: this.organisation.hours_by_day,
name: this.organisation.name,
timesheets_locked: this.organisation.timesheets_locked
? 'true'
: 'false',
use_original_file_name: this.organisation.use_original_file_name
? 'true'
: 'false'
}
console.log(this.form.has_avatar)
}
}
},
Expand All @@ -262,11 +259,11 @@ export default {
<style lang="scss" scoped>
.dark {
.settings {
background: #36393f;
background: $dark-grey-2;
color: $white-grey;
}
.settings-content {
.settings-form {
background: $dark-grey-lighter;
color: $white-grey;
}
Expand All @@ -277,37 +274,29 @@ export default {
}
}
#mattermost_integrations {
.mattermost_integrations {
margin-bottom: 4em;
}
#mattermost_integrations .field {
margin-bottom: 0em;
}
strong {
text-transform: uppercase;
.field {
margin-bottom: 0em;
}
}
.settings {
background: $white-grey;
height: 100%;
}
.settings-content {
.settings-form {
background: white;
max-width: 500px;
margin: auto;
margin-top: 2em;
margin-bottom: 2em;
padding: 2em;
box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 4px 2px;
border-radius: 1em;
}
.settings-body {
padding: 2em;
}
input,
select,
span.select {
Expand Down Expand Up @@ -342,4 +331,9 @@ h2:first-child {
.no-logo {
margin-bottom: 1em;
}
.remove-logo-button {
margin-top: 0.5rem;
font-size: 0.7em;
}
</style>
1 change: 1 addition & 0 deletions src/locales/en.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -982,6 +982,7 @@ export default {
integrations: 'Integrations',
logo: 'Studio logo',
no_logo: 'There is no logo set.',
remove_logo: 'Remove studio logo',
set_logo: 'Set studio logo',
title: 'Settings',
webhook_error: 'An error occurred while posting webhook',
Expand Down
3 changes: 2 additions & 1 deletion src/store/api/people.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@ export default {
hd_by_default: organisation.hd_by_default === 'true',
chat_token_slack: organisation.chat_token_slack,
chat_webhook_mattermost: organisation.chat_webhook_mattermost,
chat_token_discord: organisation.chat_token_discord
chat_token_discord: organisation.chat_token_discord,
has_avatar: organisation.has_avatar
}
return client.pput(`/api/data/organisations/${organisation.id}`, data)
},
Expand Down
Loading

0 comments on commit 74a5305

Please sign in to comment.