Merge pull request #1290 from KodeStar/feature/add_columns

Add alternate tag types

Author: KodeStar

app/Http/Controllers/ItemController.php

@@ -35,16 +35,32 @@ public function __construct()
      */
     public function dash(): View
     {
-        $data['apps'] = Item::whereHas('parents', function ($query) {
-            $query->where('id', 0);
-        })->orWhere('type', 1)->pinned()->orderBy('order', 'asc')->get();
+        $treat_tags_as = \App\Setting::fetch('treat_tags_as');
 
-        $data['all_apps'] = Item::whereHas('parents', function ($query) {
-            $query->where('id', 0);
-        })->orWhere('type', 1)->orderBy('order', 'asc')->get();
+        $data["treat_tags_as"] = $treat_tags_as;
+
+        if ($treat_tags_as == 'categories') {
+            $data['categories'] = Item::whereHas('children')->with('children', function ($query) {
+                $query->pinned()->orderBy('order', 'asc');
+            })->pinned()->orderBy('order', 'asc')->get();
+
+        } elseif ($treat_tags_as == 'tags') {
+            $data['apps'] = Item::with('parents')->where('type', 0)->pinned()->orderBy('order', 'asc')->get();
+            $data['all_apps'] = Item::where('type', 0)->orderBy('order', 'asc')->get();
+            $data['taglist'] = Item::where('type', 1)->pinned()->orderBy('order', 'asc')->get();
+        } else {
+
+            $data['apps'] = Item::whereHas('parents', function ($query) {
+                $query->where('id', 0);
+            })->orWhere('type', 1)->pinned()->orderBy('order', 'asc')->get();
+
+            $data['all_apps'] = Item::whereHas('parents', function ($query) {
+                $query->where('id', 0);
+            })->orWhere('type', 1)->orderBy('order', 'asc')->get();
+        }
 
         //$data['all_apps'] = Item::doesntHave('parents')->get();
-        //die(print_r($data['apps']));
+        // die(print_r($data));
         return view('welcome', $data);
     }
 

database/seeders/SettingsSeeder.php

@@ -327,5 +327,28 @@ public function run(): void
                 $app->parents()->attach(0);
             }
         }
+
+        $tag_options = json_encode([
+            'folders' => 'app.settings.folders',
+            'tags' => 'app.settings.tags',
+            'categories' => 'app.settings.categories',
+        ]);
+
+        if (! $setting = Setting::find(14)) {
+            $setting = new Setting;
+            $setting->id = 14;
+            $setting->group_id = 2;
+            $setting->key = 'treat_tags_as';
+            $setting->type = 'select';
+            $setting->options = $tag_options;
+            $setting->value = 'folders';
+            $setting->label = 'app.settings.treat_tags_as';
+            $setting->save();
+        } else {
+            $setting->options = $tag_options;
+            $setting->label = 'app.settings.treat_tags_as';
+            $setting->save();
+        }
+
     }
 }

lang/en/app.php

@@ -28,6 +28,10 @@
   'settings.view' => 'View',
   'settings.custom_css' => 'Custom CSS',
   'settings.custom_js' => 'Custom JavaScript',
+  'settings.treat_tags_as' => 'Treat Tags As:',
+  'settings.folders' => 'Folders',
+  'settings.tags' => 'Tags',
+  'settings.categories' => 'Categories',
   'options.none' => '- not set -',
   'options.google' => 'Google',
   'options.ddg' => 'DuckDuckGo',

public/css/app.css

@@ -171,6 +171,16 @@ $.when($.ready).then(() => {
         }, 350);
       }
     })
+    .on("click", ".tag", (e) => {
+      e.preventDefault();
+      const tag = $(e.target).data("tag");
+      $("#taglist .tag").removeClass("current");
+      $(e.target).addClass("current");
+      $("#sortable .item-container").show();
+      if (tag !== "all") {
+        $("#sortable .item-container:not(." + tag + ")").hide();
+      }
+    })
     .on("click", "#add-item, #pin-item", (e) => {
       e.preventDefault();
       const app = $("#app");

public/js/app.js

@@ -180,6 +180,22 @@ body {
 		list-style: none;
 		margin: 0;
 	}
+	#sortable.categories {
+		align-items: flex-start;
+		.category {
+			margin:10px;
+			background-color: #00000038;
+			border-radius: 10px;
+			> .title {
+				padding: 20px 20px 0;
+				
+				a {
+					color: white;
+					text-decoration: none;
+				}
+			}
+		}
+	}
 }
 #config-buttons {
 	position: fixed;
@@ -279,6 +295,9 @@ body {
 		z-index: 1;
 	}
 }
+.categorytitle {
+	color: #fff!important;
+}
 .tooltip {
 	padding: 25px;
 	border-radius: 5px;
@@ -294,13 +313,32 @@ body {
 	opacity: 0;
 	transform: translateY(-20px);
 	transition: all 0.3s;
+	pointer-events: none;
 	&.active {
 		transform: translateY(0);
 		opacity: 1;
 		z-index: 4;
 	}
 }
-
+.taglist {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 5px;
+	.tag {
+		padding: 10px 20px;
+		background: rgba(0, 0, 0, 0.608);
+		border-radius: 6px;
+		font-size: 12px;
+		cursor: pointer;
+		opacity: 0.6;
+		&.current {
+			opacity: 1;
+		}
+		&:hover:not(.current) {
+			opacity: 0.8;
+		}
+	}
+}
 .tile-actions {
     position: absolute;
     top: 0px;

public/mix-manifest.json

@@ -0,0 +1,13 @@
+<?php
+$treat_tags_as = \App\Setting::fetch('treat_tags_as');
+?>
+@if( $treat_tags_as == 'tags')
+    @if($taglist->first())
+        <div id="taglist" class="taglist">
+            <div class="tag white current" data-tag="all">All</div>
+            @foreach($taglist as $tag)
+                <div class="tag link{{ title_color($tag->colour) }}" style="background-color: {{ $tag->colour }}" data-tag="tag-{{ $tag->url }}">{{ $tag->title }}</div>
+            @endforeach
+        </div>
+    @endif
+@endif

resources/assets/js/app.js

@@ -1,6 +1,24 @@
-    <div id="sortable">
-        @foreach($apps as $app)
-            @include('item')
-        @endforeach
-        @include('add')
+    <div id="sortable" class="{{ $treat_tags_as ?? '' }}">
+        @if(isset($treat_tags_as) && $treat_tags_as == 'categories')
+
+            @foreach($categories as $category)
+                <?php $apps = $category->children; ?>
+                <div class="category item-container" data-name="{{ $category->title }}" data-id="{{ $category->id }}">
+                <div class="title"><a href="{{ $category->link }}" style="{{ $category->colour ? 'color: ' . $category->colour .';' : '' }}">{{ $category->title }}</a></div>
+                @foreach($apps as $app)
+                    @include('item')
+                @endforeach
+                </div>
+            @endforeach
+
+
+        @else
+
+            @foreach($apps as $app)
+                @include('item')
+            @endforeach
+            @include('add')
+        @endif
+
+        
     </div>