From dc6d80608232c9accb88c1103da942a25342e354 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=96zg=C3=BCr=20G=C3=B6rg=C3=BCl=C3=BC?=
 <ozgurgorgulu54@gmail.com>
Date: Tue, 4 Jul 2023 18:29:38 +0300
Subject: [PATCH] telefon-vergisi-hesaplayici: group presets by their brand

---
 assets/scss/_utilities.scss                   |  4 ++
 .../telefon-vergisi-hesaplayici-slug.page.js  | 12 ++++++
 pages/telefon-vergisi-hesaplayici/index.vue   | 37 ++++++++++++++++---
 3 files changed, 47 insertions(+), 6 deletions(-)

diff --git a/assets/scss/_utilities.scss b/assets/scss/_utilities.scss
index 43cd89c6..dc1504bd 100644
--- a/assets/scss/_utilities.scss
+++ b/assets/scss/_utilities.scss
@@ -12,6 +12,10 @@
     gap: 8px !important
 }
 
+.gap-16 {
+    gap: 32px !important
+}
+
 .tabular-nums {
     font-variant-numeric: tabular-nums
 }
diff --git a/data/pages/telefon-vergisi-hesaplayici/telefon-vergisi-hesaplayici-slug.page.js b/data/pages/telefon-vergisi-hesaplayici/telefon-vergisi-hesaplayici-slug.page.js
index 97b5731f..d4420517 100644
--- a/data/pages/telefon-vergisi-hesaplayici/telefon-vergisi-hesaplayici-slug.page.js
+++ b/data/pages/telefon-vergisi-hesaplayici/telefon-vergisi-hesaplayici-slug.page.js
@@ -11,6 +11,7 @@ const lastUpdatedDateSamsung = new Date("Sat Jul 01 2023 08:22:32 GMT+0300 (GMT+
 const presets = [
     // Apple Vision Pro
     {
+        brand: "Apple",
         title: "Apple Vision Pro",
         slug: "apple-vision-pro",
         url: buildUrl("apple-vision-pro"),
@@ -29,6 +30,7 @@ const presets = [
 
     // iPhone 14
     {
+        brand: "Apple",
         title: "iPhone 14 Pro",
         slug: "iphone-14-pro",
         url: buildUrl("iphone-14-pro"),
@@ -77,6 +79,7 @@ const presets = [
         ]
     },
     {
+        brand: "Apple",
         title: "iPhone 14 Pro Max",
         slug: "iphone-14-pro-max",
         url: buildUrl("iphone-14-pro-max"),
@@ -125,6 +128,7 @@ const presets = [
         ]
     },
     {
+        brand: "Apple",
         title: "iPhone 14",
         slug: "iphone-14",
         url: buildUrl("iphone-14"),
@@ -164,6 +168,7 @@ const presets = [
         ]
     },
     {
+        brand: "Apple",
         title: "iPhone 14 Plus",
         slug: "iphone-14-plus",
         url: buildUrl("iphone-14-plus"),
@@ -206,6 +211,7 @@ const presets = [
 
     // iPhone 13
     {
+        brand: "Apple",
         title: "iPhone 13 mini",
         slug: "iphone-13-mini",
         url: buildUrl("iphone-13-mini"),
@@ -245,6 +251,7 @@ const presets = [
         ]
     },
     {
+        brand: "Apple",
         title: "iPhone 13",
         slug: "iphone-13",
         url: buildUrl("iphone-13"),
@@ -287,6 +294,7 @@ const presets = [
 
     // iPhone SE
     {
+        brand: "Apple",
         title: "iPhone SE 3 (2022)",
         slug: "iphone-se-3-2022",
         url: buildUrl("iphone-se-3-2022"),
@@ -329,6 +337,7 @@ const presets = [
 
     // iPhone 12
     {
+        brand: "Apple",
         title: "iPhone 12",
         slug: "iphone-12",
         url: buildUrl("iphone-12"),
@@ -371,6 +380,7 @@ const presets = [
 
     // Samsung Galaxy S23
     {
+        brand: "Samsung",
         title: "Samsung Galaxy S23",
         slug: "samsung-galaxy-s23",
         url: buildUrl("samsung-galaxy-s23"),
@@ -401,6 +411,7 @@ const presets = [
         ]
     },
     {
+        brand: "Samsung",
         title: "Samsung Galaxy S23+",
         slug: "samsung-galaxy-s23-plus",
         url: buildUrl("samsung-galaxy-s23-plus"),
@@ -426,6 +437,7 @@ const presets = [
         ]
     },
     {
+        brand: "Samsung",
         title: "Samsung Galaxy S23 Ultra",
         slug: "samsung-galaxy-s23-ultra",
         url: buildUrl("samsung-galaxy-s23-ultra"),
diff --git a/pages/telefon-vergisi-hesaplayici/index.vue b/pages/telefon-vergisi-hesaplayici/index.vue
index e5fdc20d..306e9255 100644
--- a/pages/telefon-vergisi-hesaplayici/index.vue
+++ b/pages/telefon-vergisi-hesaplayici/index.vue
@@ -16,16 +16,21 @@
 
         <InnerContainer>
             <FormRow>
-                <PageSubtitle class="mb-4">
-                    Bir telefon seçin…
-                </PageSubtitle>
-
-                <CalculatorPresets :presets="ui.presets" />
+                <div class="d-flex flex-column gap-16">
+                    <template v-for="_item in presetsGroupedByBrand">
+                        <div :key="_item.title">
+                            <PageSubtitle class="mb-2">
+                                {{ _item.title }}
+                            </PageSubtitle>
+                            <CalculatorPresets :presets="_item.presets" />
+                        </div>
+                    </template>
+                </div>
 
                 <v-divider class="my-12" />
 
                 <PageSubtitle class="mb-4">
-                    …veya kendiniz hesaplayın
+                    Kendiniz hesaplayın
                 </PageSubtitle>
             </FormRow>
 
@@ -177,6 +182,26 @@ export default {
                 currency: vm.form.currency,
                 registrationTitle: vm.ui.registration.find(item => item.value === vm.form.registration).title
             });
+        },
+        presetsGroupedByBrand() {
+            const vm = this;
+
+            const output = {};
+
+            vm.ui.presets.forEach(preset => {
+                const { brand, ...rest } = preset;
+                if (!output[brand]) {
+                    output[brand] = {
+                        title: brand,
+                        presets: []
+                    };
+                }
+                output[brand].presets.push({
+                    brand, ...rest
+                });
+            });
+
+            return Object.values(output);
         }
     },
     watch: {