Merge pull request #21 from Smidra/chore/general-cleanup

Chore/general cleanup
Smidra · Mar 23, 2024 · fbe0b2d · fbe0b2d
2 parents 6c8fc5e + 3f3c8ca
commit fbe0b2d
Show file tree

Hide file tree

Showing 14 changed files with 183 additions and 325 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@carbon/icons-vue": "^10.79.1",
-    "@carbon/vue": "^3.0.11",
+    "@carbon/vue": "^3.0.14",
     "algoliasearch": "^4.22.0",
     "axios": "^1.6.2",
     "carbon-components": "^10.58.12",

diff --git a/src/App.vue b/src/App.vue
@@ -1,100 +1,104 @@
 <template>
-    <div id="app">
-        <ais-instant-search :search-client="searchClient" index-name="firmy">
-          <ais-configure :query="searchQuery" :hitsPerPage="hitsPerPage" :page="page - 1" />
-            <!-- Header -->
-            <cv-header aria-label="Carbon header">
-                <cv-header-menu-button class="hamburger-menu" aria-label="Header menu" aria-controls="side-nav"
-                    :active="expandedSideNav" @click="expandedSideNav = !expandedSideNav" />
-                <cv-skip-to-content href="#main-content">Skip to content</cv-skip-to-content>
-                <cv-header-name href="#" prefix="Tohle je" class="header-name" @click="reloadPage">Datoun</cv-header-name>
-
-                <cv-search v-model="searchQuery" placeholder="Search"></cv-search>
-
-                <!-- Side Navigation -->
-                <template v-slot:left-panels>
-                    <cv-side-nav id="side-nav" :rail="true" :fixed="useFixed" class="side-nav" :expanded="expandedSideNav">
-
-                        <ais-hierarchical-menu :show-parent-level="true"
-                            :attributes="['kategorie0', 'kategorie1', 'kategorie2']">
-                            <template v-slot="{ items, refine, canRefine }">
-                                <HierarchicalMenu :items="items" :refine="refine" :canRefine="canRefine">
-                                </HierarchicalMenu>
-                            </template>
-                        </ais-hierarchical-menu>
-
-                        <hr class="custom-divider" />
-                        <cv-button kind="ghost" class="grey-text" @click="handleCreateNew">
-                            Přidat novou firmu<add-icon />
-                        </cv-button>
-                        <EditModal v-model:visible="showModal" />
-
-
-                        <cv-button kind="ghost" class="grey-text" @click="showAbout = true">
-                            O nás
-                        </cv-button>
-                        <AboutModal v-model:visible="showAbout" />
-
-                    </cv-side-nav>
-                </template>
-
-            </cv-header>
-
-            <!-- Main Content -->
-            <main id="#main-content" class="padding-top">
-                <ais-hits>
-                    <template v-slot="{ items }">
-                        <div class="tile-container">
-                            <ItemTile v-for="item in items" :key="item.objectID" :item="item" @open-company-detail="detailModalItem = $event; showDetailModal = true" @open-eshop="handleOpenEshop" />
-                        </div>
-                    </template>
-                </ais-hits>
-              <div class="top-pagination">
-                <ais-pagination>
-                  <template v-slot="{ nbHits }">
-                    <cv-pagination @change="onPaginationChange" :number-of-items="nbHits" :page="page" :pageSizes="[
-                                12, { 'value': 12, 'selected': true }, 24, 48]" pageSizesLabel="Firem na stránku:">
-                      <template v-slot:range-text="{ scope }">
-                        <span>{{ scope.start }}-{{ scope.end }} ze {{ scope.items }}</span>
-                      </template>
-                      <template v-slot:of-n-pages="{ scope }">
-                        <span>ze {{ scope.pages }} stránek</span>
-                      </template>
-                    </cv-pagination>
-                  </template>
-                </ais-pagination>
-              </div>
-            </main>
-
-        </ais-instant-search>
-        <EditModal v-model:visible="showEditModal" :editedItem="editedItem" />
-        <CompanyDetailModal v-model:visible="showDetailModal" :item="detailModalItem" @edit="handleEditOpen()" @open-eshop="handleOpenEshop"/>
-        <AboutModal/>
-    </div>
+  <div id="app">
+    <ais-instant-search :search-client="searchClient" index-name="firmy">
+      <ais-configure :query="searchQuery" :hitsPerPage="hitsPerPage" :page="page - 1"/>
+      <!-- Header -->
+      <cv-header aria-label="Carbon header">
+        <cv-header-menu-button class="hamburger-menu" aria-label="Header menu" aria-controls="side-nav"
+                               :active="expandedSideNav" @click="expandedSideNav = !expandedSideNav"/>
+        <cv-skip-to-content href="#main-content">Skip to content</cv-skip-to-content>
+        <cv-header-name href="#" prefix="Tohle je" class="header-name" @click="reloadPage">Datoun</cv-header-name>
+
+        <cv-search v-model="searchQuery" placeholder="Search"></cv-search>
+
+        <!-- Side Navigation -->
+        <template v-slot:left-panels>
+          <cv-side-nav id="side-nav" :rail="true" :fixed="useFixed" class="side-nav" :expanded="expandedSideNav">
+
+            <ais-hierarchical-menu :show-parent-level="true"
+                                   :attributes="['kategorie0', 'kategorie1', 'kategorie2']">
+              <template v-slot="{ items, refine, canRefine }">
+                <HierarchicalMenu :items="items" :refine="refine" :canRefine="canRefine">
+                </HierarchicalMenu>
+              </template>
+            </ais-hierarchical-menu>
+
+            <hr class="custom-divider"/>
+            <cv-button kind="ghost" class="grey-text" @click="handleCreateNew">
+              Přidat novou firmu
+              <AddIcon/>
+            </cv-button>
+            <EditModal v-model:visible="showModal"/>
+
+
+            <cv-button kind="ghost" class="grey-text" @click="showAboutModal = true">
+              Co je to Datoun?
+              <Crossroads />
+            </cv-button>
+            <AboutModal v-model:visible="showAboutModal"/>
+
+          </cv-side-nav>
+        </template>
+
+      </cv-header>
+
+      <!-- Main Content -->
+      <main id="#main-content" class="padding-top">
+        <ais-hits>
+          <template v-slot="{ items }">
+            <div class="tile-container">
+              <ItemTile v-for="item in items" :key="item.objectID" :item="item"
+                        @open-company-detail="detailModalItem = $event; showDetailModal = true"
+                        @open-eshop="handleOpenUrl"/>
+            </div>
+          </template>
+        </ais-hits>
+
+      </main>
+
+      <div class="bottom-absolute">
+        <ais-pagination class="bottom-pagination">
+          <template v-slot="{ nbHits }">
+            <cv-pagination @change="onPaginationChange" :number-of-items="nbHits" :page="page" :pageSizes="[
+                               { 'value': 12, 'selected': true }, 24, 48]" pageSizesLabel="Firem na stránku:">
+              <template v-slot:range-text="{ scope }">
+                <span>{{ scope.start }}-{{ scope.end }} ze {{ scope.items }}</span>
+              </template>
+              <template v-slot:of-n-pages="{ scope }">
+                <span>ze {{ scope.pages }} stránek</span>
+              </template>
+            </cv-pagination>
+          </template>
+        </ais-pagination>
+      </div>
+
+    </ais-instant-search>
+    <EditModal v-model:visible="showEditModal" :editedItem="editedItem"/>
+    <CompanyDetailModal v-model:visible="showDetailModal" :item="detailModalItem" @edit="handleEditOpen()"/>
+    <AboutModal/>
+  </div>
 </template>
 
 <script src="./script.js"></script>
 
 <style src="./style.css"></style>
 <style scoped>
 :deep(.hamburger-menu) {
-    display: none;
+  display: none;
 }
 
 @media (max-width: 768px) {
-    :deep(.hamburger-menu) {
-        display: block;
-    }
+  :deep(.hamburger-menu) {
+    display: block;
+  }
 }
 
 .header-name {
-    font-size: 1.5rem;
-    /* Adjust as needed */
+  font-size: 1.5rem;
 }
 
 .grey-text {
-    /* color: #5A6872; */
-    color: #0f62fe;
+  color: #0f62fe;
 }
 
 .padding-top {

diff --git a/src/components/AboutModal.vue b/src/components/AboutModal.vue
@@ -1,5 +1,6 @@
 <template>
-  <cv-modal>
+  <cv-modal @secondary-click="handleOpenUrl('https://discord.com')"
+            @other-btn-click="handleOpenUrl('https://github.com/Smidra/datoun-katalog')">
     <template v-slot:title>
       <div class="modal-title-container">
         <h2 class="modal-title">O nás</h2>
@@ -8,42 +9,56 @@
     <!-- Content of the modal -->
     <template v-slot:content>
       <div class="modal-content">
-        <!-- Carbon design system form to modify data in Algolia -->
         <p>
           Webová stránka Datoun je inovativní platforma, která poskytuje
           uživatelům možnost snadno a rychle vyhledávat české firmy. S důrazem
           na přehlednost a uživatelskou přívětivost nabízí Datoun širokou škálu
           funkcí a možností pro efektivní procházení produktů vyráběných v České republice.
+          Datoun je open-source projekt, který je vyvíjen komunitou.
         </p>
-        <div class="about-section">
-      <a href="https://discord.com" class="about-button">Discord</a>
-      <a href="https://github.com/Smidra/datoun-katalog" class="about-button">Git hub</a>
-      <a href="https://docs.google.com/spreadsheets/d/1AEe_-kzGD-3siz9b7oaILM2IbTCpfKinbhFcpNSnlOg/edit#gid=0" class="about-button">Seznam firem</a>
-    </div>
+        <br/>
+        <p>
+          Provizorní databázi můžete upravovat na <a target="_blank"
+            href="https://docs.google.com/spreadsheets/d/1AEe_-kzGD-3siz9b7oaILM2IbTCpfKinbhFcpNSnlOg/edit#gid=0">Google
+          Sheets</a>.
+        </p>
+      </div>
+    </template>
+
+    <!-- Footer of the modal - Buttons -->
+    <template v-slot:other-button>
+      <div class="button-content">
+        <LogoGithub/>
+        Star on GitHub
+      </div>
+    </template>
+    <template v-slot:secondary-button>
+      <div class="button-content">
+        <LogoDiscord/>
+        Join Discord
       </div>
     </template>
+    <template v-slot:primary-button>Zavřít</template>
+
+
   </cv-modal>
 </template>
 
-<style scoped>
+<script>
+import LogoDiscord from '@carbon/icons-vue/es/logo--discord/20';
+import LogoGithub from '@carbon/icons-vue/es/logo--github/20';
+import {handleOpenUrl} from '@/utils/URLtools';
+
+export default {
+  methods: {
+    handleOpenUrl
+  },
+  components: {
+    LogoDiscord,
+    LogoGithub,
+  },
+};
+</script>
 
-.about-section {
-  text-align: center;
-  margin: auto;
-  margin-top: 20px;
-  max-width: 600px;
-}
-.about-button {
-  display: inline-block;
-  padding: 15px;
-  background-color: #007bff;
-  color: #fff;
-  text-decoration: none;
-  border-radius: 5px;
-  margin: 20px 40px 0 20px;
-  cursor: pointer;
-}
-.about-button:hover {
-  background-color: #0056b3;
-}
+<style scoped>
 </style>
diff --git a/src/components/CompanyDetailModal.vue b/src/components/CompanyDetailModal.vue
@@ -1,5 +1,5 @@
 <template>
-    <cv-modal ref="CompanyDetailModal" :visible="isOpen" @secondary-click="$emit('open-eshop', item.eshop)" @other-btn-click="$emit('edit')">
+    <cv-modal ref="CompanyDetailModal" :visible="isOpen" @secondary-click="handleOpenUrl(item.eshop)" @other-btn-click="$emit('edit')">
         <!-- Header of the modal -->
         <template v-slot:title>
             <div class="modal-title-container">
@@ -63,7 +63,7 @@
 
                 <!-- If there are aliases, show -->
                 <!-- <template v-if="(item.aliasy != undefined) && (item.aliasy.length > 0)"> -->
-                <template v-if="(item?.aliasy != undefined) && (item?.aliasy != '')">
+                <template v-if="(item?.aliasy !== undefined) && (item?.aliasy !== '')">
                     <h4>Značky & Aliasy</h4>
                     <p>{{ item?.aliasy }}</p>
                     <br />
@@ -92,7 +92,8 @@
 
 <script>
 import { CvModal, CvList, CvListItem } from '@carbon/vue';
-import { getUniqueBradcrumbs } from './KategorieTool.js';
+import { getUniqueBradcrumbs } from '@/utils/KategorieTool';
+import { handleOpenUrl } from '@/utils/URLtools';
 import LaunchIcon from '@carbon/icons-vue/es/launch/16';
 import EditIcon from '@carbon/icons-vue/es/edit/16';
 import UnknownIcon from '@carbon/icons-vue/es/unknown/16';
@@ -124,7 +125,9 @@ export default {
             default: () => ({})
         }
     },
-    methods: {},
+    methods: {
+        handleOpenUrl
+    },
     computed: {
         leaves() {
             return getUniqueBradcrumbs(this.item?.kategorie0, this.item?.kategorie1, this.item?.kategorie2);
@@ -136,7 +139,6 @@ export default {
 <style scoped>
 .tile-logo {
     height: 35px;
-    /* height: 50px; */
 }
 
 .tile-logo-container {

diff --git a/src/components/EditModal.vue b/src/components/EditModal.vue
@@ -58,7 +58,6 @@
         <!-- Footer of the modal - Buttons -->
         <template v-slot:secondary-button>
             <div class="button-content">
-                <!-- <launch-icon /> -->
                 Zavřít
             </div>
         </template>