Skip to content

Commit

Permalink
refactor: move template settings to vue component
Browse files Browse the repository at this point in the history 
Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de>
  • Loading branch information
@elzody
elzody committed Oct 15, 2024
1 parent 4d444ac commit 9391b63
Show file tree
Hide file tree
Showing 7 changed files with 234 additions and 259 deletions.
84 changes: 3 additions & 81 deletions css/admin.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,7 @@
margin-top: -4px;
width: 300px !important;
}
}

input#zoteroAPIKeyField {
width: 300px;
}

#richdocuments,
#richdocuments-templates {
// inline buttons on section headers
> h2 {
display: inline-flex;
Expand All @@ -55,77 +48,6 @@ input#zoteroAPIKeyField {
}
}

#richdocuments-templates {
> input {
// feedback for keyboard navigation
&:hover,
&:focus,
&:active {
+ h2 .icon-add,
+ h2 .icon-loading-small {
opacity: 0.7;
}
+ #emptycontent label {
color: var(--color-text-light);
}
}
}
ul:not(.hidden) {
display: flex;
flex-wrap: wrap;
li {
$size: 150px;
$sizeY: math.div($size, 210) * 297;
$space: 10px;
border-radius: var(--border-radius);
border: 1px solid var(--color-border);
margin: $space;
position: relative;
figure {
display: flex;
flex-direction: column;
width: $size;
margin: $space;
img, .templatePlaceholder {
width: $size;
height: $sizeY;
background-color: var(--color-background-dark);
}
figcaption {
margin-top: $space;
}
}
.delete-cover,
.delete-template {
width: $size;
height: $sizeY;
top: 0;
left: 0;
position: absolute;
margin: $space;
opacity: 0;
transition: opacity 250ms ease-in-out;
z-index: 3;
line-height: $sizeY;
text-align: center;
font-size: 20px;
background-size: 24px;
// text is set as bg
color: var(--color-background-darker);
}
.delete-cover {
// bg is set as color
background-color: var(--color-text-lighter);
z-index: 2;
}
&:hover .delete-template,
.delete-template:focus,
.delete-template.icon-loading {
opacity: 1;
+ .delete-cover {
opacity: 0.5;
}
}
}
}
}
input#zoteroAPIKeyField {
width: 300px;
}
9 changes: 9 additions & 0 deletions lib/Service/InitialStateService.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
use OCA\Richdocuments\AppConfig;
use OCA\Richdocuments\AppInfo\Application;
use OCA\Richdocuments\Db\Wopi;
use OCA\Richdocuments\TemplateManager;
use OCA\Theming\ImageManager;
use OCP\AppFramework\Services\IInitialState;
use OCP\Defaults;
Expand All @@ -24,6 +25,7 @@ public function __construct(
private IInitialState $initialState,
private AppConfig $appConfig,
private ImageManager $imageManager,
private TemplateManager $templateManager,
private CapabilitiesService $capabilitiesService,
private IURLGenerator $urlGenerator,
private Defaults $themingDefaults,
Expand Down Expand Up @@ -58,6 +60,13 @@ public function provideDocument(Wopi $wopi, array $params): void {
$this->provideOptions();
}

public function provideAdminSettings(): void {
$this->initialState->provideInitialState('adminSettings', [
'templatesAvailable' => $this->capabilitiesService->hasTemplateSource(),
'templates' => $this->templateManager->getSystemFormatted(),
]);
}

public function prepareParams(array $params): array {
$defaults = [
'instanceId' => $this->config->getSystemValue('instanceid'),
Expand Down
8 changes: 4 additions & 4 deletions lib/Settings/Admin.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@ public function __construct(

public function getForm(): TemplateResponse {
$this->initialStateService->provideCapabilities();
$this->initialStateService->provideAdminSettings();

return new TemplateResponse(
'richdocuments',
'admin',
Expand All @@ -45,8 +47,6 @@ public function getForm(): TemplateResponse {
'external_apps' => $this->config->getAppValue('richdocuments', 'external_apps'),
'canonical_webroot' => $this->config->getAppValue('richdocuments', 'canonical_webroot'),
'disable_certificate_verification' => $this->config->getAppValue('richdocuments', 'disable_certificate_verification', '') === 'yes',
'templates' => $this->manager->getSystemFormatted(),
'templatesAvailable' => $this->capabilitiesService->hasTemplateSource(),
'settings' => $this->appConfig->getAppSettings(),
'demo_servers' => $this->demoService->fetchDemoServers(),
'web_server' => strtolower($_SERVER['SERVER_SOFTWARE']),
Expand All @@ -59,11 +59,11 @@ public function getForm(): TemplateResponse {
);
}

public function getSection() {
public function getSection(): string {
return 'richdocuments';
}

public function getPriority() {
public function getPriority(): int {
return 0;
}
}
118 changes: 0 additions & 118 deletions src/admin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@
*/
import './init-shared.js'
import Vue from 'vue'
import axios from '@nextcloud/axios'
import { generateUrl } from '@nextcloud/router'
import AdminSettings from './components/AdminSettings.vue'
import '../css/admin.scss'

Expand All @@ -29,119 +27,3 @@ const element = document.getElementById('admin-vue')
new Vue({
render: h => h(AdminSettings, { props: { initial: JSON.parse(element.dataset.initial) } }),
}).$mount('#admin-vue')

/**
* Append a new template to the dom
*
* @param {object} data the template data from the template controller response
*/
function appendTemplateFromData(data) {
const template = document.querySelector('.template-model').cloneNode(true)
template.className = ''
template.dataset.filename = data.name
template.querySelector('img').src = data.preview
template.querySelector('figcaption').textContent = data.name
template.querySelector('.delete-template').href = data.delete

document.querySelector('#richdocuments-templates > ul').appendChild(template)
template.querySelector('.delete-template').addEventListener('click', deleteTemplate)
}

/**
* Delete template event handler
*
* @param {Event} event the button click event
*/
function deleteTemplate(event) {
event.preventDefault()
const emptyElmt = document.querySelector('#richdocuments-templates #emptycontent')
const tplListElmt = document.querySelector('#richdocuments-templates > ul')
const elmt = event.target

// ensure no request is in progress
if (elmt.className.indexOf('loading') === -1 && elmt.textContent === '') {
const remote = event.target.href
elmt.classList.add('icon-loading')
elmt.classList.remove('icon-delete')

// send request
axios.delete(remote)
.then(function() {
// remove template
elmt.parentElement.remove()
// is list empty? Only the default template is left
if (tplListElmt.querySelectorAll('li').length === 1) {
tplListElmt.classList.add('hidden')
emptyElmt.classList.remove('hidden')
}
})
.catch(function(e) {
// failure, show warning
elmt.textContent = t('richdocuments', 'Error')
elmt.classList.remove('icon-loading')
setTimeout(function() {
elmt.classList.add('icon-delete')
elmt.textContent = ''
}, 2000)
})
}
}

/**
* Init the upload manager and the delete template handler
*/
function initTemplateManager() {
const inputElmt = document.querySelector('#add-template')
const buttonElmt = document.querySelector('.icon-add')
const deleteElmts = document.querySelectorAll('.delete-template')
const emptyElmt = document.querySelector('#richdocuments-templates #emptycontent')
const tplListElmt = document.querySelector('#richdocuments-templates > ul')

deleteElmts.forEach(function(elmt) {
elmt.addEventListener('click', deleteTemplate)
})

// fileupload plugin
$('#richdocuments-templates').fileupload({
dataType: 'json',
url: generateUrl('apps/richdocuments/template'),
type: 'POST',

add(e, data) {
// submit on file selection
data.submit()
inputElmt.disabled = true
buttonElmt.className = 'icon-loading-small'
},

submit(e, data) {
data.formData = _.extend(data.formData || {}, {
requesttoken: OC.requestToken,
})
},

success(e) {
document.querySelector(`[data-filename="${e.data.name}"]`)?.remove()
inputElmt.disabled = false
buttonElmt.className = 'icon-add'
// add template to dom
appendTemplateFromData(e.data)
tplListElmt.classList.remove('hidden')
emptyElmt.classList.add('hidden')
},

fail(e, data) {
// failure, show warning
buttonElmt.className = 'icon-add'
buttonElmt.textContent = t('richdocuments', 'An error occurred') + ': ' + data.jqXHR.responseJSON.data.message
setTimeout(function() {
inputElmt.disabled = false
buttonElmt.textContent = ''
}, 2000)
},
})
}

document.addEventListener('DOMContentLoaded', () => {
initTemplateManager()
})
15 changes: 4 additions & 11 deletions src/components/AdminSettings.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -390,6 +390,8 @@
</p>
</div>
</div>
<GlobalTemplates />
</div>
</template>
Expand All @@ -406,6 +408,7 @@ import SettingsSelectGroup from './SettingsSelectGroup.vue'
import SettingsExternalApps from './SettingsExternalApps.vue'
import SettingsInputFile from './SettingsInputFile.vue'
import SettingsFontList from './SettingsFontList.vue'
import GlobalTemplates from './AdminSettings/GlobalTemplates.vue'
import '@nextcloud/dialogs/style.css'
import { getCallbackBaseUrl } from '../helpers/url.js'
Expand Down Expand Up @@ -435,6 +438,7 @@ export default {
SettingsExternalApps,
SettingsInputFile,
SettingsFontList,
GlobalTemplates,
NcModal,
NcNoteCard,
},
Expand Down Expand Up @@ -533,9 +537,6 @@ export default {
else this.serverError = Object.values(getCapabilities().collabora).length > 0 ? SERVER_STATE_OK : SERVER_STATE_CONNECTION_ERROR
}
},
isSetup() {
this.toggleTemplateSettings()
},
},
beforeMount() {
for (const key in this.initial.settings) {
Expand Down Expand Up @@ -581,7 +582,6 @@ export default {
}
this.checkIfDemoServerIsActive()
this.checkSettings()
this.toggleTemplateSettings()
},
methods: {
async checkSettings() {
Expand Down Expand Up @@ -815,13 +815,6 @@ export default {
this.settings.fonts.splice(index, 1)
}
},
toggleTemplateSettings() {
if (this.isSetup) {
document.getElementById('richdocuments-templates').classList.remove('hidden')
} else {
document.getElementById('richdocuments-templates').classList.add('hidden')
}
},
},
}
</script>
Expand Down
Loading

0 comments on commit 9391b63

Please sign in to comment.