fix(gui): toggle icon on change

Signed-off-by: Pranav C <pranavxc@gmail.com>
2 years ago · d858ab4e98
5 changed files with 111 additions and 38 deletions
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@ -300,18 +300,30 @@ watch(
  { immediate: true },
 )

-
 const setIcon = (icon: string, table: TableType) => {
  table.meta = {
-    // ...table.meta || {},
+    ...(table.meta || {}),
    icon,
  }
+  tables.value.splice(tables.value.indexOf(table), 1, { ...table })
+
  $api.dbTable.update(table.id as string, {
-    meta: {
-      icon,
-    },
+    meta: table.meta,
  })
 }
+
+// const getTableIcon = (table: TableType) => {
+//   if (table.meta?.icon) {
+//     return h(
+//       'span',
+//       {
+//         'key': table.meta?.icon,
+//         'class': 'iconify !cursor-pointer !text-2xl',
+//         'data-icon': table.meta?.icon,
+//       },)
+//   }
+//   return icon(table)
+// }
 </script>

 <template>
@ -546,14 +558,14 @@ const setIcon = (icon: string, table: TableType) => {
                  :nc-base="bases[0].id"
                >
                  <div
-                    v-for="table of tables.filter((table) => table.base_id === bases[0].id)"
+                    v-for="(table, i) of tables.filter((table) => table.base_id === bases[0].id)"
                    :key="table.id"
                    v-e="['a:table:open']"
                    :class="[
                      { hidden: !filteredTables?.includes(table), active: activeTable === table.id },
                      `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,
                    ]"
-                    class="nc-tree-item text-sm cursor-pointer group"
+                    class="nc-tree-item text-sm cursor-pointer group1"
                    :data-order="table.order"
                    :data-id="table.id"
                    :data-testid="`tree-view-table-${table.title}`"
@ -563,8 +575,7 @@ const setIcon = (icon: string, table: TableType) => {
                      <template #title>{{ table.table_name }}</template>
                      <div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
                        <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
-
-                          <a-popover trigger="hover" @click.stop>
+                          <a-popover trigger="click" @click.stop>
                            <div @click.stop>
                              <MdiDrag
                                v-if="isUIAllowed('treeview-drag-n-drop')"
@ -573,32 +584,38 @@ const setIcon = (icon: string, table: TableType) => {
                                @click.stop.prevent
                              />

-                              <span v-if="table.meta?.icon" class="iconify cursor-pointer" :data-icon="table.meta?.icon"></span>
-
-                              <component
-                                v-else
-                                :is="icon(table)"
-                                class="nc-view-icon text-xs"
-                                :class="{ 'group-hover:hidden group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
-                              />
+                              <a-tooltip>
+                                <span v-if="table.meta?.icon" :key="table.meta?.icon">
+                                  <GeneralIconifyIcon class="text-2xl" :key="table.meta?.icon" :icon="table.meta?.icon"></GeneralIconifyIcon>
+                                </span>
+                                <component
+                                  :is="icon(table)"
+                                  v-else
+                                  class="nc-view-icon text-xs"
+                                  :class="{ 'group-hover:hidden group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
+                                />
+
+                                <template #title>Change icon</template>
+                              </a-tooltip>
                            </div>
                            <template #content>
                              <LazyGeneralEmojiIcons @selectIcon="setIcon($event, table)" />
                            </template>
                          </a-popover>

-                          <MdiDragVertical
-                            v-if="isUIAllowed('treeview-drag-n-drop')"
-                            :class="`nc-child-draggable-icon-${table.title}`"
-                            class="nc-drag-icon text-xs hidden group-hover:block transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 cursor-move"
-                            @click.stop.prevent
-                          />
-
-                          <component
-                            :is="icon(table)"
-                            class="nc-view-icon text-xs"
-                            :class="{ 'group-hover:hidden group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
-                          />
+                          <!--
+                                                    <MdiDragVertical
+                                                      v-if="isUIAllowed('treeview-drag-n-drop')"
+                                                      :class="`nc-child-draggable-icon-${table.title}`"
+                                                      class="nc-drag-icon text-xs hidden group-hover:block transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 cursor-move"
+                                                      @click.stop.prevent
+                                                    />
+
+                                                    <component
+                                                      :is="icon(table)"
+                                                      class="nc-view-icon text-xs"
+                                                      :class="{ 'group-hover:hidden group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
+                                                    /> -->
                        </div>

                        <div class="nc-tbl-title flex-1">
--- a/packages/nc-gui/components/general/EmojiIcons.vue
+++ b/packages/nc-gui/components/general/EmojiIcons.vue
@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { Icon } from '@iconify/vue';
+
 const emit = defineEmits(['selectIcon'])
 const search = $ref('')

@ -1843,15 +1845,26 @@ const icons = [
 const filteredIcons = computed(() => {
  return icons.filter((icon) => !search || icon.toLowerCase().includes(search.toLowerCase()))
 })
+
 </script>

 <template>
-  <a-card class="overflow-y-auto">
-    <a-input-search v-model:value="search" class="w-full overflow-y-auto !m-4" placeholder="Search"></a-input-search>
-    <div class="flex gap-4 flex-wrap w-full m-4 max-w-80 max-h-40">
+  <div class="p-1 w-85 h-80 flex flex-col gap-1 justify-start">
+    <div>
+      <input v-model="search" class="p-1 border-1 w-full overflow-y-auto" placeholder="Search" />
+    </div>
+    <div class="flex gap-4 flex-wrap w-full flex-shrink overflow-y-auto scrollbar-thin-dull">
      <div v-for="icon of filteredIcons" :key="icon" @click="emit('selectIcon', `emojione:${icon}`)">
-        <span class="iconify cursor-pointer active:ring" :data-icon="`emojione:${icon}`"></span>
+        <span class="cursor-pointer nc-emoji-item">
+          <Icon class="text-2xl iconify"
+                :icon="`emojione:${icon}`"></Icon>
+        </span>
      </div>
    </div>
-  </a-card>
+  </div>
 </template>
+<style scoped>
+.nc-emoji-item {
+  @apply hover:(bg-primary bg-opacity-10) active:(bg-primary !bg-opacity-20) rounded-md w-[38px] h-[38px] block flex items-center justify-center;
+}
+</style>
--- a/packages/nc-gui/components/general/IconifyIcon.vue
+++ b/packages/nc-gui/components/general/IconifyIcon.vue
@ -0,0 +1,7 @@
+<template>
+  <Icon :icon="icon"/>
+</template>
+
+<script lang="ts" setup>
+import { Icon } from '@iconify/vue';
+</script>
--- a/packages/nc-gui/package-lock.json
+++ b/packages/nc-gui/package-lock.json
@ -9,7 +9,7 @@
      "license": "AGPL-3.0-or-later",
      "dependencies": {
        "@ckpack/vue-color": "^1.2.0",
-        "@iconify/iconify": "^2.2.1",
+        "@iconify/vue": "^4.0.1",
        "@types/file-saver": "^2.0.5",
        "@vue-flow/additional-components": "^1.2.0",
        "@vue-flow/core": "^1.3.0",
@ -1210,6 +1210,7 @@
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/@iconify/iconify/-/iconify-2.2.1.tgz",
      "integrity": "sha512-WJzw+3iicrF/tbjbxxRinSgy5FHdJoz/egTqwi3xCDkNRJPq482RX1iyaWrjNuY2vMNSPkQMuqHvZDXgA+WnwQ==",
+      "dev": true,
      "funding": {
        "url": "http://github.com/sponsors/cyberalien"
      }
@ -1234,6 +1235,25 @@
        "local-pkg": "^0.4.1"
      }
    },
+    "node_modules/@iconify/vue": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-4.0.1.tgz",
+      "integrity": "sha512-k4VwcSQpGqJpoyqENRRviFuXlVcquLvQ6BKLNJ6o2amZo7u+3HyALSO79Xyz7Sg68szQGstOk6weaKUF0DJbog==",
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "vue": ">=3"
+      }
+    },
+    "node_modules/@iconify/vue/node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="
+    },
    "node_modules/@intlify/bundle-utils": {
      "version": "2.2.2",
      "resolved": "https://registry.npmjs.org/@intlify/bundle-utils/-/bundle-utils-2.2.2.tgz",
@ -18576,7 +18596,8 @@
    "@iconify/iconify": {
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/@iconify/iconify/-/iconify-2.2.1.tgz",
-      "integrity": "sha512-WJzw+3iicrF/tbjbxxRinSgy5FHdJoz/egTqwi3xCDkNRJPq482RX1iyaWrjNuY2vMNSPkQMuqHvZDXgA+WnwQ=="
+      "integrity": "sha512-WJzw+3iicrF/tbjbxxRinSgy5FHdJoz/egTqwi3xCDkNRJPq482RX1iyaWrjNuY2vMNSPkQMuqHvZDXgA+WnwQ==",
+      "dev": true
    },
    "@iconify/types": {
      "version": "1.1.0",
@ -18598,6 +18619,21 @@
        "local-pkg": "^0.4.1"
      }
    },
+    "@iconify/vue": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-4.0.1.tgz",
+      "integrity": "sha512-k4VwcSQpGqJpoyqENRRviFuXlVcquLvQ6BKLNJ6o2amZo7u+3HyALSO79Xyz7Sg68szQGstOk6weaKUF0DJbog==",
+      "requires": {
+        "@iconify/types": "^2.0.0"
+      },
+      "dependencies": {
+        "@iconify/types": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+          "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="
+        }
+      }
+    },
    "@intlify/bundle-utils": {
      "version": "2.2.2",
      "resolved": "https://registry.npmjs.org/@intlify/bundle-utils/-/bundle-utils-2.2.2.tgz",
--- a/packages/nc-gui/package.json
+++ b/packages/nc-gui/package.json
@ -32,7 +32,8 @@
  },
  "dependencies": {
    "@ckpack/vue-color": "^1.2.0",
-    "@iconify/iconify": "^2.2.1",
+    "@iconify/vue": "^4.0.1",
+    "@types/file-saver": "^2.0.5",
    "@vue-flow/additional-components": "^1.2.0",
    "@vue-flow/core": "^1.3.0",
    "@vuelidate/core": "^2.0.0-alpha.44",
@ -42,7 +43,6 @@
    "ant-design-vue": "^3.2.11",
    "d3-scale": "^4.0.2",
    "dagre": "^0.8.5",
-    "@types/file-saver": "^2.0.5",
    "dayjs": "^1.11.3",
    "file-saver": "^2.0.5",
    "httpsnippet": "^2.0.0",