unclean SPARC
This commit is contained in:
STEINNI
@@ -0,0 +1,13 @@
|
||||
<article eiccard eiccard collapsable collapsed hidden class="pub-decision">
|
||||
<section>
|
||||
<div class="forms decision-dialog">
|
||||
<div class="eicui-input-container decision">
|
||||
<label>You're about to request a review for this template.</label>
|
||||
<label>Remarks or comments for the reviewer:</label>
|
||||
<textarea eictextarea hint="Please don't be gross." name="decision" eicinput value="" class="tpl-decision"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
class TemplatesDecisionDialog extends EICDialogContent {
|
||||
|
||||
actions = [
|
||||
{
|
||||
label: 'Cancel',
|
||||
onclick: this.cancel.bind(this),
|
||||
severity: 'secondary',
|
||||
role: 'cancel'
|
||||
},
|
||||
{
|
||||
label: 'Validate',
|
||||
onclick: this.validate.bind(this),
|
||||
severity: 'primary',
|
||||
role: 'validate',
|
||||
disabled: true
|
||||
}
|
||||
]
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
Object.assign(this, app.helpers.validators)
|
||||
}
|
||||
|
||||
DOMContentLoaded(options) {
|
||||
this.form = new Form(this.find('.decision-dialog'));
|
||||
this.decisionTextarea = this.find('.tpl-decision');
|
||||
|
||||
this.decisionTextarea.addEventListener('keyup', this.checkDecisionTextarea.bind(this))
|
||||
|
||||
}
|
||||
|
||||
checkDecisionTextarea(event) {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
if (this.decisionTextarea.value.trim().length > 0) {
|
||||
this.actions.find(o => o.role == 'validate').button.disabled = false
|
||||
}
|
||||
}
|
||||
|
||||
validate() {
|
||||
let data = { comment: this.decisionTextarea.value }
|
||||
this.commit(data)
|
||||
}
|
||||
|
||||
onFailed() {
|
||||
this.abort()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
app.registerClass('TemplatesDecisionDialog', TemplatesDecisionDialog);
|
||||
@@ -0,0 +1,35 @@
|
||||
<style>
|
||||
.tpl.testMail {
|
||||
color: var(--eicui-base-color-info-110);
|
||||
font-family: var(--eicui-base-font-family);
|
||||
font-size: var(--eicui-base-font-size-l);
|
||||
font-weight: 500;
|
||||
letter-spacing: -.25px;
|
||||
border-bottom: 1px solid var(--eicui-base-color-grey-25);
|
||||
}
|
||||
.tpl .test-email {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
.tpl .mail-address {
|
||||
width: 30em;
|
||||
}
|
||||
</style>
|
||||
<article eiccard eiccard collapsable collapsed hidden class="tpl testMail">
|
||||
<header>
|
||||
<h3>Sending a test email</h3>
|
||||
</header>
|
||||
<section>
|
||||
<div class="tpl test-mail-dialog">
|
||||
<div class="eicui-input-container test-email">
|
||||
<div>Enter a valid email address</div>
|
||||
<div>
|
||||
<input eicinput type="text" name="email" eicinput value="" class="tpl mail-address">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
class TemplatesMailTestDialog extends EICDialogContent {
|
||||
|
||||
actions = [
|
||||
{
|
||||
label: 'Cancel',
|
||||
onclick: this.cancel.bind(this),
|
||||
severity: 'secondary',
|
||||
role: 'cancel'
|
||||
},
|
||||
{
|
||||
label: 'Send test',
|
||||
onclick: this.add.bind(this),
|
||||
severity: 'primary',
|
||||
role: 'add',
|
||||
disabled: true
|
||||
}
|
||||
]
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
Object.assign(this, app.helpers.validators)
|
||||
}
|
||||
|
||||
DOMContentLoaded() {
|
||||
this.form = new Form(this.find('.test-mail-dialog'))
|
||||
this.mailInput = this.find('.mail-address')
|
||||
this.mailInput.addEventListener('keyup', this.checkEmail.bind(this))
|
||||
|
||||
// Use user email by default
|
||||
this.mailInput.value = app.User.identity.email || ''
|
||||
|
||||
// force validation on init
|
||||
setTimeout(() => this.checkEmail(), 0)
|
||||
}
|
||||
|
||||
checkEmail(event = null){
|
||||
if(event){
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
}
|
||||
|
||||
const addAction = this.actions.find(o => o.role === 'add')
|
||||
if (!addAction || !addAction.button) {
|
||||
return
|
||||
}
|
||||
|
||||
const isValid = this.validators.isValidEmail(this.mailInput.value)
|
||||
addAction.button.disabled = !isValid
|
||||
}
|
||||
|
||||
add() {
|
||||
if(!this.validators.isValidEmail(this.mailInput.value)) return
|
||||
let data = { email: this.mailInput.value }
|
||||
this.commit(data)
|
||||
}
|
||||
|
||||
onFailed() {
|
||||
this.abort()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
app.registerClass('TemplatesMailTestDialog', TemplatesMailTestDialog)
|
||||
@@ -0,0 +1,49 @@
|
||||
<style>
|
||||
.uplImg h6 {
|
||||
margin-top: auto;
|
||||
}
|
||||
.uplImg .uplImg-AllowedExt {
|
||||
text-align: center;
|
||||
}
|
||||
.dialog-spinner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1em;
|
||||
font-size: 1.1em;
|
||||
color: #333;
|
||||
}
|
||||
.eic-spinner {
|
||||
border: 4px solid #f3f3f3;
|
||||
border-top: 4px solid #3498db;
|
||||
border-radius: 50%;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-right: 10px;
|
||||
}
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg);}
|
||||
100% { transform: rotate(360deg);}
|
||||
}
|
||||
</style>
|
||||
<article eiccard eiccard collapsable collapsed hidden class="uplImg">
|
||||
<header>
|
||||
<h6>Upload images </h6>
|
||||
<span>Allowed extensions:</span>
|
||||
<div class="uplImg-AllowedExt">
|
||||
|
||||
<span eicbadge xlarge success>jpg</span>
|
||||
<span eicbadge xlarge success>jpeg</span>
|
||||
<span eicbadge xlarge success>png</span>
|
||||
<span eicbadge xlarge success>svg</span>
|
||||
</div>
|
||||
</header>
|
||||
<section>
|
||||
<div class="forms upload-img-dialog">
|
||||
<div class="eicui-input-container upload-img">
|
||||
<div eicfileupload class="browseBtn"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
@@ -0,0 +1,112 @@
|
||||
class TemplatesUplImgDialog extends EICDialogContent {
|
||||
constructor() {
|
||||
super();
|
||||
Object.assign(this, app.helpers.validators); // Inject validators
|
||||
this.actions = [
|
||||
{
|
||||
label: 'Cancel',
|
||||
onclick: this.cancel.bind(this),
|
||||
severity: 'secondary',
|
||||
role: 'cancel'
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
DOMContentLoaded() {
|
||||
const imgId = crypto.randomUUID()
|
||||
|
||||
const host = window.location.hostname
|
||||
let envUrl = (host.split('.')[1] !== 'eismea') ? host.split('.')[1] + '.' : ''
|
||||
|
||||
// Initialize file upload
|
||||
this.fileUpload = new FileUpload(this.find('.browseBtn'), {
|
||||
uploadId: imgId,
|
||||
uploadUrl: `https://myeic.${envUrl}eismea.eu/public/images/common/${imgId}`,
|
||||
uploadMethod: 'PUT',
|
||||
allowedExtensions: ['jpg', 'jpeg', 'png', 'svg'],
|
||||
allowedMimes: ['image/jpeg', 'image/pjpeg', 'image/png', 'image/svg+xml'],
|
||||
allowDrop: true,
|
||||
maxFiles: 1,
|
||||
minFiles: 1,
|
||||
dndLabel: 'Drop your image here !',
|
||||
imageTitle: '',
|
||||
noUpload: false,
|
||||
})
|
||||
|
||||
const dropArea = this.find('.file-drop-area')
|
||||
const uplButton = this.find('.uploadBtn.custom-class')
|
||||
const fileUpl = this.el.querySelector('.file-upload')
|
||||
|
||||
dropArea.addEventListener('change', () => {
|
||||
const existingInput = fileUpl.querySelector('.tpl-imgTitle')
|
||||
if (!existingInput) {
|
||||
const inputTitle = ui.create(`
|
||||
<input eicinput type="text" name="title" class="tpl-imgTitle" placeholder="title of your image" required>
|
||||
`)
|
||||
dropArea.appendChild(inputTitle)
|
||||
|
||||
// Desabled upload button if input Title empty
|
||||
uplButton.disabled = true
|
||||
|
||||
// Add listener to input Title
|
||||
inputTitle.addEventListener('input', () => {
|
||||
const titleValue = inputTitle.value.trim()
|
||||
if (titleValue) {
|
||||
inputTitle.classList.remove('highlight')
|
||||
uplButton.disabled = false
|
||||
} else {
|
||||
inputTitle.classList.add('highlight')
|
||||
uplButton.disabled = true
|
||||
}
|
||||
this.fileUpload.options.imageTitle = inputTitle.value
|
||||
})
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
// Event upload button
|
||||
uplButton.addEventListener('click', () => {
|
||||
this.fileUpload.onFileAdded.bind(this)
|
||||
this.addFile()
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// Handle File Added
|
||||
addFile() {
|
||||
const fileUpL = this.fileUpload
|
||||
const uplUrl = fileUpL.options?.uploadUrl
|
||||
const extension = uplUrl.split('.').pop()
|
||||
const uplId = fileUpL.options?.uploadId
|
||||
const fileName = uplId+'.'+extension
|
||||
let data = {
|
||||
id: uplId,
|
||||
name: fileName,
|
||||
type: extension,
|
||||
path: '/common',
|
||||
imageTitle: fileUpL.options?.imageTitle,
|
||||
meta:'',
|
||||
}
|
||||
this.commit(data)
|
||||
|
||||
}
|
||||
|
||||
commit(data) {
|
||||
this.result = data
|
||||
// NE PAS appeler this.cancel() ou this.close() ici
|
||||
}
|
||||
|
||||
showDialogSpinner(show = true) {
|
||||
let spinner = this.find('.dialog-spinner')
|
||||
if (!spinner && show) {
|
||||
spinner = document.createElement('div')
|
||||
spinner.className = 'dialog-spinner'
|
||||
spinner.innerHTML = `<span class="eic-spinner"></span> Uploading...`
|
||||
this.el.appendChild(spinner)
|
||||
}
|
||||
if (spinner) spinner.style.display = show ? 'block' : 'none'
|
||||
}
|
||||
}
|
||||
|
||||
// Register the class
|
||||
app.registerClass('TemplatesUplImgDialog', TemplatesUplImgDialog)
|
||||
Reference in New Issue
Block a user