add order buttons

resources/js/views/Memo/MemoIndex.vue

@@ -1,7 +1,17 @@
 <template>
     <div class="mx-2 p-2">
-        <div class="flex justify-between flex-center mb-4">
+        <div class="flex justify-between items-center flex-wrap flex-center mb-4">
             <a href="#" class="btn" @click="$router.back()">Back</a>
+            <div>
+                <a class="btn-secondary btn-small mr-2" @click="reorderList(true, 'date')">
+                    date
+                    <svg-vue icon="arrow" v-bind:class="{ arrowUp: !this.orderDate }" class="transform m-0 rotate-90 transition duration-300 ease-in-out" />
+                </a>
+                <a class="btn-secondary btn-small" @click="reorderList(true, 'alpha')">
+                    alpha
+                    <svg-vue icon="arrow" v-bind:class="{ arrowUp: !this.orderAlpha }" class="transform m-0 rotate-90 transition duration-300 ease-in-out" />
+                </a>
+            </div>
             <router-link :to="'/memos/create'" class="btn-primary">Add New Memo</router-link>
         </div>
         <Loader v-if="loading" />
@@ -36,6 +46,8 @@ export default {
         return {
             loading: true,
             memos: null,
+            orderDate: false,
+            orderAlpha: false,
         }
     },
     mounted() {
@@ -52,10 +64,22 @@ export default {
             })
     },
     methods: {
-        reorderList() {
+        reorderList(btn = false, types = 'date') {
-            this.memos.sort(function(a, b) {
+            if(btn && types === 'date') {
-                return b.data.last_updated_timestamp - a.data.last_updated_timestamp
+                this.orderDate = !this.orderDate
-            })
+            } else if (btn && types === 'alpha') {
+                this.orderAlpha = !this.orderAlpha
+            }
+
+            if(this.orderDate && types === 'date') {
+                this.memos.sort((a, b) => a.data.last_updated_timestamp - b.data.last_updated_timestamp)
+            } else if (this.orderAlpha && types === 'alpha') {
+                this.memos.sort((a, b) =>  a.data.name.localeCompare(b.data.name))
+            } else if(types === 'alpha') {
+                this.memos.sort((a, b) => b.data.name.localeCompare(a.data.name))
+            } else {
+                this.memos.sort((a, b) => b.data.last_updated_timestamp - a.data.last_updated_timestamp)
+            }
         }
     }
 }

resources/sass/components/_btn.scss

@@ -55,3 +55,17 @@
         @apply bg-green-dark;
     }
 }
+
+.btn-small {
+    @extend .btn;
+    @apply text-sm;
+
+    & svg {
+        @apply ml-2 mr-0;
+    }
+}
+
+.arrowUp {
+    --transform-rotate: -90deg !important;
+}
+