Better presentation of databse templates

martin-pabst · martin-pabst · commit b7dc1a8137b5 · 2024-10-13T17:29:07.000+02:00
diff --git a/include/css/databasedialogs.css b/include/css/databasedialogs.css
@@ -94,9 +94,27 @@
     height: 100%;
 }
 
+.jo_templateListDiv {
+    display: flex;
+    flex-direction: row;
+    position: relative;
+    height: 350px;
+}
+
+.jo_templateListOuter {
+    height: 100%;
+    margin: 0 10px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
 .jo_templatelist {
     border: 1px solid #808080;
-    margin: 0 10px;
-    height: 250px;
     overflow: auto;
 }
+
+.jo_templateListCaption {
+    font-weight: bold;
+    margin-bottom: 2px;
+}
diff --git a/src/client/communication/Data.ts b/src/client/communication/Data.ts
@@ -615,6 +615,7 @@ export type TemplateListEntry = {
     published_to: number,
     description: string,
     ownerName: string,
+    ownerId: number,
     $tle: JQuery<HTMLDivElement>
 }
 
diff --git a/src/client/main/gui/NewDatabaseDialog.ts b/src/client/main/gui/NewDatabaseDialog.ts
@@ -47,8 +47,17 @@ export class NewDatabaseDialog {
                     <div class="jo_ds_settings">
                        <div class="jo_ds_settings_caption">Vorlage suchen:</div><div><input class="dialog-input jo_templatename"></input></div>
                     </div>
-                    <div class="jo_scrollable jo_templatelist"></div>
-                 </div>
+                    <div class="jo_templateListDiv">
+                        <div class="jo_templateListOuter">
+                            <div class="jo_templateListCaption">Vorlagen anderer Nutzer:</div> 
+                            <div class="jo_scrollable jo_templatelist jo_templatelist_others"></div>
+                        </div>
+                        <div class="jo_templateListOuter">
+                            <div class="jo_templateListCaption">Eigene Datenbank als Vorlage:</div> 
+                            <div class="jo_scrollable jo_templatelist jo_templatelist_mine"></div>
+                        </div>
+                    </div>
+                </div>
                 <div class="jo_createDatabaseUseExistingTab">
                     <div class="jo_createDatabaseDescription">Wenn Du die Datenbank einer anderen Nutzerin/eines anderen Nutzers mitnutzen möchtest, brauchst Du einen Zugriffscode von ihr/ihm. Er ist unter Datenbank->Einstellungen zu finden.            
                     </div>
@@ -73,11 +82,16 @@ export class NewDatabaseDialog {
 
         makeTabs(this.$dialog);
 
-        let $templatelist = jQuery('.jo_templatelist');
+        let $templatelist_others = jQuery('.jo_templatelist_others');
+        let $templatelist_mine = jQuery('.jo_templatelist_mine');
+
+        let myUserId = this.main.user.id;
+
         this.main.networkManager.fetchTemplateList((templatelist) => {
             templatelist.sort((t1, t2) => {
                 return t1.name.localeCompare(t2.name);
             })
+            
             templatelist.forEach(tle => {
 
                 let $tle = jQuery('<div class="jo_templateListEntry"></div>')
@@ -86,19 +100,26 @@ export class NewDatabaseDialog {
                 $tle.data('templateId', tle.id);
                 $tle.data('name', tle.name);
 
-                $templatelist.append($tle);
+                if(tle.ownerId == myUserId){
+                    $templatelist_mine.append($tle);
+                } else {
+                    $templatelist_others.append($tle);
+                }
                 tle.$tle = <JQuery<HTMLDivElement>>$tle;
 
                 $tle.on('pointerdown', () => {
-                    $templatelist.find('.jo_templateListEntry').removeClass('jo_active');
+                    $templatelist_others.find('.jo_templateListEntry').removeClass('jo_active');
+                    $templatelist_mine.find('.jo_templateListEntry').removeClass('jo_active');
                     $tle.addClass('jo_active');
                 })
 
             })
+
             let $templateName = <JQuery<HTMLInputElement>>jQuery('.jo_templatename');
             $templateName.on('input', () => {
                 let s = <string>$templateName.val();
-                $templatelist.find('.jo_templateListEntry').hide();
+                $templatelist_others.find('.jo_templateListEntry').hide();
+                $templatelist_mine.find('.jo_templateListEntry').hide();
                 templatelist.forEach(tle => {
                     let tleString = tle.name + tle.ownerName + (tle.description ? tle.description : "");
                     if (tleString.indexOf(s) >= 0) tle.$tle.show();

Original file line number	Diff line number	Diff line change
`@@ -615,6 +615,7 @@ export type TemplateListEntry = {`
`615`	`615`	`published_to: number,`
`616`	`616`	`description: string,`
`617`	`617`	`ownerName: string,`
	`618`	`+ ownerId: number,`
`618`	`619`	`$tle: JQuery<HTMLDivElement>`
`619`	`620`	`}`
`620`	`621`