src/components/queryBuilder/BuilderHost.vue

@@ -46,13 +46,18 @@
         </div>
       </div>
       <div class="grow max-lg:hidden"></div>
-      <div class="p-1 border border-gray-400 bg-gray-100 rounded-md" title="Schema-Struktur" @click="showStructure">
-        <SparklesIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
-      </div>
       <div class="flex flex-row min-w-fit overflow-hidden border border-gray-400 rounded-md">
         <div
           class="p-1"
-          :class="typeof value == 'object' ? 'bg-gray-200' : ''"
+          :class="queryMode == 'structure' ? 'bg-gray-200' : ''"
+          title="Schema-Struktur"
+          @click="queryMode = 'structure'"
+        >
+          <SparklesIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+        </div>
+        <div
+          class="p-1"
+          :class="typeof value == 'object' && queryMode != 'structure' ? 'bg-gray-200' : ''"
           title="Visual Builder"
           @click="queryMode = 'builder'"
         >
@@ -60,7 +65,7 @@
         </div>
         <div
           class="p-1"
-          :class="typeof value == 'string' ? 'bg-gray-200' : ''"
+          :class="typeof value == 'string' && queryMode != 'structure' ? 'bg-gray-200' : ''"
           title="SQL Editor"
           @click="queryMode = 'editor'"
         >
@@ -69,7 +74,10 @@
       </div>
     </div>
     <div class="p-2 h-44 md:h-60 w-full overflow-y-auto">
-      <textarea v-if="typeof value == 'string'" v-model="value" placeholder="SQL Query" class="h-full w-full" />
+      <div v-if="queryMode == 'structure'">
+        <img src="/administration-db.png" class="h-full w-full cursor-pointer" @click="showStructure" />
+      </div>
+      <textarea v-else-if="typeof value == 'string'" v-model="value" placeholder="SQL Query" class="h-full w-full" />
       <Table v-else v-model="value" />
     </div>
   </div>
@@ -145,7 +153,7 @@ export default defineComponent({
   data() {
     return {
       autoChangeFlag: false as boolean,
-      queryMode: "builder" as "builder" | "editor",
+      queryMode: "builder" as "builder" | "editor" | "structure",
     };
   },
   computed: {

src/components/queryBuilder/StructureModal.vue

@@ -11,10 +11,7 @@
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <a href="/administration-db.png" button primary-outline download="Datenbank-Schema" class="!whitespace-nowrap"
+        <button primary-outline @click="closeModal">schnließen</button>
-          >Bild herunterladen</a
-        >
-        <button primary-outline @click="closeModal">schließen</button>
       </div>
     </div>
   </div>

src/viewmodels/admin/club/protocol/protocolPresence.models.ts

@@ -1,7 +1,6 @@
 export interface ProtocolPresenceViewModel {
   memberId: number;
   absent: boolean;
-  excused: boolean;
   protocolId: number;
 }
 

src/views/admin/club/protocol/ProtocolPresence.vue

@@ -46,8 +46,7 @@
                   }"
                 >
                   <span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
-                    {{ getMember(member.memberId)?.firstname }} {{ getMember(member.memberId)?.lastname }}
+                    {{ getMember(member.memberId)?.firstname }} {{ getMember(member.memberId)?.lastname }} {{ getMember(member.memberId)?.nameaffix }}
-                    {{ getMember(member.memberId)?.nameaffix }}
                   </span>
                   <span
                     v-if="selected"
@@ -72,21 +71,12 @@
         class="flex flex-row h-fit w-full border border-primary rounded-md bg-primary p-2 text-white justify-between items-center"
       >
         <div class="flex flex-col items-start">
-          <p>
+          <p>{{ getMember(member.memberId)?.lastname }}, {{ getMember(member.memberId)?.firstname }} {{ getMember(member.memberId)?.nameaffix ? `- ${getMember(member.memberId)?.nameaffix}` : "" }}</p>
-            {{ getMember(member.memberId)?.lastname }}, {{ getMember(member.memberId)?.firstname }}
+          <label class="flex flex-row gap-2 items-center">
-            {{ getMember(member.memberId)?.nameaffix ? `- ${getMember(member.memberId)?.nameaffix}` : "" }}
+            <input type="checkbox" v-model="member.absent" />
-          </p>
+            war abwesend
-          <div class="flex flex-row gap-4">
+          </label>          
-            <label class="flex flex-row gap-2 items-center">
+        </div>        
-              <input type="checkbox" v-model="member.absent" />
-              war abwesend
-            </label>
-            <label v-if="member.absent" class="flex flex-row gap-2 items-center">
-              <input type="checkbox" v-model="member.excused" />
-              ist entschuldigt
-            </label>
-          </div>
-        </div>
         <TrashIcon
           v-if="can('create', 'club', 'protocol')"
           class="w-5 h-5 p-1 box-content cursor-pointer"
@@ -133,23 +123,21 @@ export default defineComponent({
     ...mapWritableState(useProtocolPresenceStore, ["presence", "loading"]),
     ...mapState(useMemberStore, ["members"]),
     ...mapState(useAbilityStore, ["can"]),
-    filtered(): Array<{ memberId: number; absent: boolean; excused: boolean; protocolId: number }> {
+    filtered(): Array<{memberId:number, absent:boolean; protocolId:number}> {
-      return (
+      return (this.query === ""
-        this.query === ""
+        ? this.members
-          ? this.members
+        : this.members.filter((member) =>
-          : this.members.filter((member) =>
+            (member.firstname + " " + member.lastname)
-              (member.firstname + " " + member.lastname)
+              .toLowerCase()
-                .toLowerCase()
+              .replace(/\s+/g, "")
-                .replace(/\s+/g, "")
+              .includes(this.query.toLowerCase().replace(/\s+/g, ""))
-                .includes(this.query.toLowerCase().replace(/\s+/g, ""))
+          )).map(m =>({memberId: m.id, absent:false, protocolId:parseInt(this.protocolId ?? "")}));
-            )
-      ).map((m) => ({ memberId: m.id, absent: false, excused: true, protocolId: parseInt(this.protocolId ?? "") }));
-    },
-    getMember() {
-      return (memberId: number) => {
-        return this.members.find((m) => memberId == m.id);
-      };
     },
+    getMember(){
+      return (memberId:number) => {
+        return this.members.find(m => memberId == m.id)
+      }
+    }
   },
   mounted() {
     this.fetchMembers(0, 1000, "", true);