feat: listview component

frappe · Jul 23, 2023 · 0669f3d · 0669f3d
1 parent cce028d
commit 0669f3d
Show file tree

Hide file tree

Showing 7 changed files with 274 additions and 11 deletions.
diff --git a/frontend/src/components/Icons/FilterIcon.vue b/frontend/src/components/Icons/FilterIcon.vue
@@ -0,0 +1,31 @@
+<template>
+  <svg
+    width="16"
+    height="17"
+    viewBox="0 0 16 17"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 4.5H14"
+      stroke="currentColor"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M4 8.5H12"
+      stroke="currentColor"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M6.5 12.5H9.5"
+      stroke="currentColor"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>
diff --git a/frontend/src/components/Icons/SortIcon.vue b/frontend/src/components/Icons/SortIcon.vue
@@ -0,0 +1,45 @@
+<template>
+  <svg
+    width="16"
+    height="17"
+    viewBox="0 0 16 17"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1.75 3.75H10.75"
+      stroke="currentColor"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M1.75 7.75H7.75"
+      stroke="currentColor"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M1.75 11.75H5.75"
+      stroke="currentColor"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M14.25 8.25L12.25 6.25L10.25 8.25"
+      stroke="currentColor"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M12.25 12.25L12.25 6.25"
+      stroke="currentColor"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>
diff --git a/frontend/src/components/ListView.vue b/frontend/src/components/ListView.vue
@@ -0,0 +1,142 @@
+<template>
+  <div id="header" class="flex justify-between items-center px-5 py-4">
+    <div class="left flex space-x-2">
+      <h1 class="font-semibold text-xl">{{ title }}</h1>
+    </div>
+    <div class="right flex space-x-2">
+      <Button variant="solid" label="Create">
+        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
+      </Button>
+    </div>
+  </div>
+  <div
+    id="sub-header"
+    class="flex justify-between items-center px-5 pb-3 border-b"
+  >
+    <div class="left flex space-x-2">
+      <Dropdown :options="viewsDropdownOptions">
+        <template #default="{ open }">
+          <Button
+            :label="currentView.label"
+            :icon-right="open ? 'chevron-up' : 'chevron-down'"
+          >
+            <template #prefix
+              ><FeatherIcon :name="currentView.icon" class="h-4"
+            /></template>
+          </Button>
+        </template>
+      </Dropdown>
+    </div>
+    <div class="right flex space-x-2">
+      <Button label="Sort">
+        <template #prefix><SortIcon class="h-4" /></template>
+      </Button>
+      <Button label="Filter">
+        <template #prefix><FilterIcon class="h-4" /></template>
+      </Button>
+      <Button icon="more-horizontal" />
+    </div>
+  </div>
+  <div id="content" class="">
+    <div
+      id="list-header"
+      class="flex space-x-2 items-center px-5 py-2 border-b"
+    >
+      <Checkbox class="mr-2" />
+      <div
+        v-for="column in columns"
+        :key="column"
+        class="text-sm text-gray-600"
+        :class="[column.size, column.align]"
+      >
+        {{ column.label }}
+      </div>
+    </div>
+    <div id="list-rows">
+      <div
+        v-for="row in rows"
+        :key="row"
+        class="flex space-x-2 items-center mx-2 px-3 py-2 border-b"
+      >
+        <Checkbox class="mr-2" />
+        <div
+          v-for="column in columns"
+          :key="column.key"
+          class="text-base text-gray-900"
+          :class="[column.size, column.align]"
+        >
+          {{ row[column.key] }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { FeatherIcon, Dropdown, Checkbox } from 'frappe-ui'
+import SortIcon from './Icons/SortIcon.vue'
+import FilterIcon from './Icons/FilterIcon.vue'
+import { ref } from 'vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  columns: {
+    type: Array,
+    default: []
+  },
+  rows: {
+    type: Array,
+    default: []
+  },
+})
+
+const currentView = ref({
+  label: 'List',
+  icon: 'list',
+})
+
+const viewsDropdownOptions = [
+  {
+    label: 'List',
+    icon: 'list',
+    onClick() {
+      currentView.value = {
+        label: 'List',
+        icon: 'list',
+      }
+    },
+  },
+  {
+    label: 'Table',
+    icon: 'grid',
+    onClick() {
+      currentView.value = {
+        label: 'Table',
+        icon: 'grid',
+      }
+    },
+  },
+  {
+    label: 'Calender',
+    icon: 'calendar',
+    onClick() {
+      currentView.value = {
+        label: 'Calender',
+        icon: 'calendar',
+      }
+    },
+  },
+  {
+    label: 'Board',
+    icon: 'columns',
+    onClick() {
+      currentView.value = {
+        label: 'Board',
+        icon: 'columns',
+      }
+    },
+  },
+]
+</script>
diff --git a/frontend/src/pages/Dashboard.vue b/frontend/src/pages/Dashboard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="px-6 py-4 font-semibold text-xl">
+  <div class="px-5 py-4 font-semibold text-xl">
     <h1>{{ title }}</h1>
   </div>
 </template>

diff --git a/frontend/src/pages/Deals.vue b/frontend/src/pages/Deals.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="px-6 py-4 font-semibold text-xl">
-    <h1>{{ title }}</h1>
-  </div>
+  <ListView :title="title"/>
 </template>
 
 <script setup>
+import ListView from '../components/ListView.vue';
+
 let title = 'Deals'
 </script>
diff --git a/frontend/src/pages/Inbox.vue b/frontend/src/pages/Inbox.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="px-6 py-4 font-semibold text-xl">
-    <h1>{{ title }}</h1>
-  </div>
+  <ListView :title="title"/>
 </template>
 
 <script setup>
+import ListView from '../components/ListView.vue';
+
 let title = 'Inbox'
 </script>
diff --git a/frontend/src/pages/Leads.vue b/frontend/src/pages/Leads.vue
@@ -1,9 +1,54 @@
 <template>
-  <div class="px-6 py-4 font-semibold text-xl">
-    <h1>{{ title }}</h1>
-  </div>
+  <ListView :title="title" :columns="columns" :rows="rows" />
 </template>
 
 <script setup>
-let title = 'Leads'
+import ListView from '../components/ListView.vue'
+
+const title = 'Leads'
+
+const columns = [
+  {
+    label: 'Title',
+    key: 'title',
+    size: 'flex-1',
+  },
+  {
+    label: 'Company',
+    key: 'company',
+    size: 'w-44',
+  },
+  {
+    label: 'Stage',
+    key: 'stage',
+    size: 'w-40',
+  },
+  {
+    label: 'Contact',
+    key: 'contact',
+    size: 'w-44',
+  },
+  {
+    label: 'Closed Date',
+    key: 'closedDate',
+    size: 'w-44',
+  },
+  {
+    label: 'Value',
+    key: 'value',
+    size: 'w-40',
+    align: 'text-right',
+  },
+]
+
+const rows = [
+  {
+    title: 'Summer Catalog',
+    company: 'Stripe',
+    stage: 'Qualified',
+    contact: 'Angela Bower',
+    closedDate: '27 Sept, 2023',
+    value: 99000.0,
+  },
+]
 </script>