improve final
This commit is contained in:
@@ -4,7 +4,7 @@
|
|||||||
<modelVersion>4.0.0</modelVersion>
|
<modelVersion>4.0.0</modelVersion>
|
||||||
<groupId>de.champonthis</groupId>
|
<groupId>de.champonthis</groupId>
|
||||||
<artifactId>abi</artifactId>
|
<artifactId>abi</artifactId>
|
||||||
<version>0.3.2</version>
|
<version>0.3.3</version>
|
||||||
<name>abi</name>
|
<name>abi</name>
|
||||||
|
|
||||||
<parent>
|
<parent>
|
||||||
|
|||||||
@@ -201,12 +201,13 @@
|
|||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<div class="alert py-2" :class="'alert-' + stepMsgType" x-text="stepMsg" x-show="stepMsg"></div>
|
<div class="alert py-2" :class="'alert-' + stepMsgType" x-text="stepMsg" x-show="stepMsg"></div>
|
||||||
<ul class="list-group mb-3" id="enteredContacts" x-show="enteredContacts && enteredContacts.length > 0">
|
<ul class="list-group mb-3" id="enteredContacts"
|
||||||
|
x-show="enteredContacts && enteredContacts.length > 0">
|
||||||
<template x-for="(c, index) in enteredContacts || []" :key="c.name + '_' + index">
|
<template x-for="(c, index) in enteredContacts || []" :key="c.name + '_' + index">
|
||||||
<li class="list-group-item">
|
<li class="list-group-item">
|
||||||
<!-- Normal view -->
|
<!-- Normal view -->
|
||||||
<div x-show="editingContactIndex !== index"
|
<div x-show="editingContactIndex !== index"
|
||||||
:class="editingContactIndex === index ? 'd-none' : 'd-flex justify-content-between align-items-center'">
|
:class="editingContactIndex === index ? 'd-none' : 'd-flex justify-content-between align-items-center'">
|
||||||
<div>
|
<div>
|
||||||
<strong x-text="c.name"></strong><br>
|
<strong x-text="c.name"></strong><br>
|
||||||
<small class="text-muted">
|
<small class="text-muted">
|
||||||
@@ -214,35 +215,46 @@
|
|||||||
<span x-show="c.phone" x-text="', ' + c.phone"></span>
|
<span x-show="c.phone" x-text="', ' + c.phone"></span>
|
||||||
</small>
|
</small>
|
||||||
</div>
|
</div>
|
||||||
<button class="btn btn-sm btn-outline-primary" @click="startEdit(index)" :disabled="working">
|
<button class="btn btn-sm btn-outline-primary" @click="startEdit(index)"
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
:disabled="working">
|
||||||
<path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708L4.707 14.707a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168L12.146.146zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293L12.793 5.5z"/>
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
|
||||||
|
fill="currentColor" viewBox="0 0 16 16">
|
||||||
|
<path
|
||||||
|
d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708L4.707 14.707a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168L12.146.146zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293L12.793 5.5z" />
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Edit view - fully inline -->
|
<!-- Edit view - fully inline -->
|
||||||
<div x-show="editingContactIndex === index"
|
<div x-show="editingContactIndex === index"
|
||||||
:class="editingContactIndex === index ? 'row g-2 align-items-start' : 'd-none'">
|
:class="editingContactIndex === index ? 'row g-2 align-items-start' : 'd-none'">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<strong x-text="c.name"></strong>
|
<strong x-text="c.name"></strong>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 col-md">
|
<div class="col-12 col-md">
|
||||||
<input type="email" class="form-control form-control-sm" x-model="editingContactData.email" placeholder="E-Mail" required>
|
<input type="email" class="form-control form-control-sm"
|
||||||
|
x-model="editingContactData.email" placeholder="E-Mail" required>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 col-md">
|
<div class="col-12 col-md">
|
||||||
<input type="text" class="form-control form-control-sm" x-model="editingContactData.phone" placeholder="Telefon (optional)">
|
<input type="text" class="form-control form-control-sm"
|
||||||
|
x-model="editingContactData.phone" placeholder="Telefon (optional)">
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 col-md-auto">
|
<div class="col-12 col-md-auto">
|
||||||
<div class="d-flex gap-1">
|
<div class="d-flex gap-1">
|
||||||
<button class="btn btn-sm btn-outline-danger" @click="cancelEdit()" :disabled="working">
|
<button class="btn btn-sm btn-outline-danger" @click="cancelEdit()"
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
|
:disabled="working">
|
||||||
<path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
|
||||||
|
fill="currentColor" viewBox="0 0 16 16">
|
||||||
|
<path
|
||||||
|
d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z" />
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<button class="btn btn-sm btn-success" @click="saveContactData(index)" :disabled="working">
|
<button class="btn btn-sm btn-success" @click="saveContactData(index)"
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16">
|
:disabled="working">
|
||||||
<path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/>
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"
|
||||||
|
fill="currentColor" viewBox="0 0 16 16">
|
||||||
|
<path
|
||||||
|
d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z" />
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -281,21 +293,24 @@
|
|||||||
Hast du Lust, am Samstag, den 13.11.2027, beim Nachtreffen in Gevelsberg dabei zu sein?
|
Hast du Lust, am Samstag, den 13.11.2027, beim Nachtreffen in Gevelsberg dabei zu sein?
|
||||||
Genauere Infos und Details gibt's dann später hier und per Mail.
|
Genauere Infos und Details gibt's dann später hier und per Mail.
|
||||||
</p>
|
</p>
|
||||||
<p x-show="!stepMsg && committed === 'YES'">
|
<p x-show="committed === 'YES'">
|
||||||
Du hast bereits für Samstag, den 13.11.2027, <strong>zugesagt</strong>. Genauere Infos und Details gibt's dann später hier und per Mail. Falls du deine Meinung ändern möchtest, kannst du hier nochmal wählen.
|
Du hast für Samstag, den 13.11.2027, <strong class="text-success">zugesagt</strong>.
|
||||||
|
Genauere Infos und
|
||||||
|
Details gibt's dann später hier und per Mail. Falls du deine Meinung ändern möchtest, kannst
|
||||||
|
du hier nochmal wählen.
|
||||||
</p>
|
</p>
|
||||||
<p x-show="!stepMsg && committed === 'NO'">
|
<p x-show="committed === 'NO'">
|
||||||
Du hast bereits für Samstag, den 13.11.2027, <strong>abgesagt</strong>. Falls du deine Meinung ändern möchtest, kannst du hier nochmal wählen.
|
Du hast für Samstag, den 13.11.2027, <strong class="text-danger">abgesagt</strong>. Falls du
|
||||||
|
deine
|
||||||
|
Meinung ändern möchtest, kannst du hier nochmal wählen.
|
||||||
</p>
|
</p>
|
||||||
<div class="d-flex gap-2 mb-3">
|
<div class="d-flex gap-2 mb-3">
|
||||||
<button x-show="!stepMsg" id="commitYes" class="btn flex-fill"
|
<button id="commitYes" class="btn flex-fill"
|
||||||
:class="{'btn-success': committed != 'NO', 'btn-outline-secondary' : committed == 'NO', 'disabled': working}"
|
:class="{'btn-success disabled': committed != 'NO', 'btn-outline-success opacity-75' : committed == 'NO', 'disabled': working}"
|
||||||
@click="submitCommit('YES')" autofocus>Ja, ich bin dabei!</button>
|
@click="submitCommit('YES')" autofocus>Ja, ich bin dabei!</button>
|
||||||
<button x-show="!stepMsg" id="commitNo" class="btn flex-fill"
|
<button id="commitNo" class="btn flex-fill"
|
||||||
:class="{'btn-danger' : committed != 'YES','btn-outline-secondary' : committed == 'YES', 'disabled': working}"
|
:class="{'btn-danger disabled' : committed != 'YES','btn-outline-danger opacity-75' : committed == 'YES', 'disabled': working}"
|
||||||
@click="submitCommit('NO')">Nein,
|
@click="submitCommit('NO')">Nein, ich bin nicht dabei</button>
|
||||||
ich
|
|
||||||
kann leider nicht</button>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex mt-2">
|
<div class="d-flex mt-2">
|
||||||
<button type="button" class="btn btn-outline-secondary flex-fill"
|
<button type="button" class="btn btn-outline-secondary flex-fill"
|
||||||
@@ -474,11 +489,11 @@
|
|||||||
this.stepMsg = '';
|
this.stepMsg = '';
|
||||||
this.stepMsgType = '';
|
this.stepMsgType = '';
|
||||||
this.step = step;
|
this.step = step;
|
||||||
|
|
||||||
if (!this.enteredContacts) {
|
if (!this.enteredContacts) {
|
||||||
this.enteredContacts = [];
|
this.enteredContacts = [];
|
||||||
}
|
}
|
||||||
|
|
||||||
if (step === 3 && this.userToken) {
|
if (step === 3 && this.userToken) {
|
||||||
this.loadPendingContacts();
|
this.loadPendingContacts();
|
||||||
}
|
}
|
||||||
@@ -490,7 +505,7 @@
|
|||||||
headers: { 'Authorization': this.userToken },
|
headers: { 'Authorization': this.userToken },
|
||||||
validateStatus: () => true
|
validateStatus: () => true
|
||||||
});
|
});
|
||||||
|
|
||||||
if (resp.status === 200) {
|
if (resp.status === 200) {
|
||||||
this.enteredContacts = (this.enteredContacts || []).filter((c) => c.isNew);
|
this.enteredContacts = (this.enteredContacts || []).filter((c) => c.isNew);
|
||||||
resp.data.forEach(contact => {
|
resp.data.forEach(contact => {
|
||||||
@@ -655,7 +670,7 @@
|
|||||||
email: this.enteredContacts[index].email,
|
email: this.enteredContacts[index].email,
|
||||||
phone: this.enteredContacts[index].phone || ''
|
phone: this.enteredContacts[index].phone || ''
|
||||||
};
|
};
|
||||||
|
|
||||||
// Focus the email input of the specific contact being edited
|
// Focus the email input of the specific contact being edited
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
// Find all email inputs and select the one that's currently visible (not d-none)
|
// Find all email inputs and select the one that's currently visible (not d-none)
|
||||||
@@ -676,7 +691,7 @@
|
|||||||
if (this.editingContactIndex >= 0 && this.enteredContacts[this.editingContactIndex].isNew) {
|
if (this.editingContactIndex >= 0 && this.enteredContacts[this.editingContactIndex].isNew) {
|
||||||
this.enteredContacts.splice(this.editingContactIndex, 1);
|
this.enteredContacts.splice(this.editingContactIndex, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.editingContactIndex = -1;
|
this.editingContactIndex = -1;
|
||||||
this.editingContactData = { email: '', phone: '' };
|
this.editingContactData = { email: '', phone: '' };
|
||||||
},
|
},
|
||||||
@@ -701,7 +716,7 @@
|
|||||||
this.enteredContacts[index].phone = this.editingContactData.phone.trim();
|
this.enteredContacts[index].phone = this.editingContactData.phone.trim();
|
||||||
// Remove the isNew flag since it's now saved
|
// Remove the isNew flag since it's now saved
|
||||||
delete this.enteredContacts[index].isNew;
|
delete this.enteredContacts[index].isNew;
|
||||||
|
|
||||||
this.stepMsg = 'Kontakt erfolgreich gespeichert!';
|
this.stepMsg = 'Kontakt erfolgreich gespeichert!';
|
||||||
this.stepMsgType = 'success';
|
this.stepMsgType = 'success';
|
||||||
this.editingContactIndex = -1;
|
this.editingContactIndex = -1;
|
||||||
|
|||||||
Reference in New Issue
Block a user