Tags 🏷

build/entitlements.mac.plist

@@ -8,5 +8,7 @@
     <key>com.apple.security.cs.allow-dyld-environment-variables</key><true/>
     <key>com.apple.security.files.user-selected.read-only</key><true/>
     <key>com.apple.security.files.user-selected.read-write</key><true/>
+    <key>com.apple.security.network.client</key><true/>
+    <key>com.apple.security.network.server</key><true/>
   </dict>
 </plist>

src/components/ATag.vue

@@ -4,34 +4,44 @@
               tag.color,
                         `inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium text-gray-800`
                     ]"
-     @click="cb(tag)"
      @mouseover="hover = true"
+     @click="(!editable) ? cb(tag) : ''"
      @mouseleave="hover = false"
  >
   {{ tag.name }}
+      <span
+          v-if="(hover && editable)"
+          @click="cb(tag)"
+          class="mx-1"
+      >
+     <SearchIcon class="w-4 h-4  hover:text-gray-500" />
+   </span>
    <span
        v-if="(hover && editable)"
        @click="edit(tag)"
+       class="mx-1"
    >
-     <PencilIcon class="w-4 h-4" />
+     <PencilIcon class="w-4 h-4  hover:text-gray-500" />
    </span>
    <span
           v-if="(hover && editable)"
           @click="deleteTag(tag)"
+          class="mx-1 "
       >
-     <TrashIcon class="w-4 h-4" />
+     <TrashIcon class="w-4 h-4 hover:text-gray-500" />
    </span>
   </span>
 </template>
 
 <script>
 
-import {PencilIcon, TrashIcon} from "@heroicons/vue/solid"
+import {PencilIcon, TrashIcon, SearchIcon} from "@heroicons/vue/solid"
 export default {
   name: "ATag",
   components: {
     PencilIcon,
-    TrashIcon
+    TrashIcon,
+    SearchIcon
   },
   props: ['tag', 'cb' , 'edit', 'editable'],
   data: () => {

src/services/StinkerService.js

@@ -19,7 +19,7 @@ export default class StinkerService {
     }
 
     createStinkerFile(sftp, cb) {
-        sftp.fastPut( pathJoin(__static, "../public/stinker.phar"), '/tmp/stinkycode').on('close', () => {
+        sftp.fastPut( pathJoin(__static, "../public/stinker.phar"), '/tmp/stinker.phar').on('close', () => {
             if (cb)
                 cb();
         })

src/store/index.js

@@ -78,13 +78,19 @@ export default createStore({
            state.isError = false
       },
       async refresh_snippets(state) {
-
           state.snippets = await db
               .snippets
               .orderBy('id')
               .toArray();
 
       },
+      async filter_snippets(state, payload) {
+        state.snippets = await  db
+            .snippets
+            .where('tags')
+            .equals(payload.name)
+            .toArray()
+      },
       increment_snippets(state) {
           state.snippets_count++
       },

src/views/Snippets.vue

@@ -8,11 +8,22 @@
       </div>
       <div class="flex p-2 my-auto">
         <span class="text-lg font-bold pr-2">Tags: </span>
-        <ul class="flex my-auto flex-row justify-center py-0.5 items-center">
+        <ul class="flex my-auto flex-row justify-center py-0.5 items-center" v-if="!selectedTag">
           <li v-for="tag in tags" :key="tag.name" class="mr-4 my-auto last:mr-0">
             <ATag :tag="tag" :edit="edit_tag"  :cb="filter_tag" :editable="true"/>
           </li>
         </ul>
+        <div v-else>
+          <ATag :tag="selectedTag" :cb="clear_filter" :editable="false"/>
+          <button
+              type="button"
+              @click="clear_filter"
+              class="inline-flex items-center mr-3 my-auto p-1 border border-transparent rounded-full shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+            <XIcon
+                class="h-4 w-4"
+                aria-hidden="true" />
+          </button>
+        </div>
         <div class="mr-2 ml-auto">
           <button
               type="button"
@@ -36,9 +47,6 @@
                 v-html="snippet.name"
             />
           </div>
-<!--          <div v-for="tag in snippet.tags" :key="tag">-->
-<!--          {{tag}}-->
-<!--        </div>-->
           <div class="flex justify-self-center">
             <CodeBlock class="relative ml-2 mr-auto">
               {{snippet.code}}
@@ -139,7 +147,7 @@
 <script>
 
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
-import { ChevronDownIcon, ServerIcon, PlusIcon, PencilAltIcon } from '@heroicons/vue/solid'
+import { ChevronDownIcon, ServerIcon, PlusIcon, PencilAltIcon, XIcon } from '@heroicons/vue/solid'
 import {TrashIcon, LightningBoltIcon}  from '@heroicons/vue/outline'
 import { mapState } from "vuex";
 import Modal from "../components/Modal";
@@ -164,13 +172,14 @@ export default {
     ServerIcon,
     PlusIcon,
     PencilAltIcon,
+    XIcon,
     TagModal,
     SnippetModal
   },
   data: () => {
     return {
       isOpen: false,
-      tag: {},
+      selectedTag: null,
       editingTag: false,
       editingSnippet: false,
       selectedSnippet: {},
@@ -187,6 +196,12 @@ export default {
     },
     filter_tag(tag) {
       console.log(tag)
+      this.selectedTag = tag
+      this.$store.commit('filter_snippets', tag)
+    },
+    clear_filter() {
+      this.selectedTag = null
+      this.$store.commit('refresh_snippets')
     },
     edit_snippet(snippet) {
       this.selectedSnippet = snippet;

tailwind.config.js

@@ -63,7 +63,10 @@ module.exports = {
     },
   },
   variants: {
-    extend: {},
+    extend: {
+        backgroundColor: ['active'],
+        textColor: ['hover']
+    },
   },
   plugins: [
       require('@tailwindcss/forms'),

vue.config.js

@@ -36,7 +36,11 @@ module.exports = {
                 entitlementsInherit: "./build/entitlements.mac.plist",
                 icon: './build/icons/icon.icns',
                 category: "public.app-category.developer-tools",
-                "hardenedRuntime": true
+                hardenedRuntime: true,
+                target: [
+                    "dmg",
+                    "zip"
+                ],
             },
         }
     },