first commit + add fe component vue accone

apps/components/oneDialogNotification.vue

@@ -0,0 +1,108 @@
+<template>
+  <v-layout>
+    <v-dialog
+      v-model="dialogNotification"
+      max-width="50vw"
+    >
+
+    <v-card>
+        <v-toolbar color="pink" dark>
+        <v-toolbar-title>Task List Notification</v-toolbar-title>
+        <v-spacer></v-spacer>
+        <v-icon>notifications</v-icon>
+        </v-toolbar>
+        <v-list two-line>
+        <template v-for="(item, index) in notification_list">
+            <v-list-tile :key="index" avatar ripple @click="updateNotification(item)">
+            <v-list-tile-content>
+                <v-list-tile-title>{{ item.NotificationType }}</v-list-tile-title>
+                <!-- <v-list-tile-sub-title class="text--primary">{{ item.headline }}</v-list-tile-sub-title> -->
+                <v-list-tile-sub-title v-html="item.NotificationDescription"
+                  :style="{
+                        whiteSpace: 'normal',
+                        wordBreak: 'break-word',
+                        display: '-webkit-box',
+                        WebkitLineClamp: 3,
+                        WebkitBoxOrient: 'vertical',
+                        overflow: 'hidden'
+                    }"></v-list-tile-sub-title>
+            </v-list-tile-content>
+            <v-list-tile-action>
+                <v-list-tile-action-text>{{ item.time_ago }}</v-list-tile-action-text>
+                <!-- <v-icon color="grey lighten-1">star_border</v-icon> -->
+            </v-list-tile-action>
+            </v-list-tile>
+            <v-divider v-if="index + 1 < notification_list.length" :key="`divider-${index}`"></v-divider>
+        </template>
+        </v-list>
+    </v-card>
+
+    </v-dialog>
+  </v-layout>
+</template>
+
+<style scoped>
+.wrap-text {
+  white-space: normal !important;
+  word-break: break-word;
+  display: -webkit-box;
+  -webkit-line-clamp: 3; /* jumlah baris maksimum */
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.bread-crumb {
+  margin-left: 20px;
+  font-weight: normal !important;
+}
+.v-badge__badge {
+  top: 0px;
+  right: 0px;
+}
+#topbar{
+  background-color: #F2E5D3;
+}
+</style>
+<script>
+module.exports = {
+  components: {
+
+  },
+
+  data: function () {
+    return {
+
+    };
+  },
+  mounted() {
+    this.$store.dispatch("system/getlistnotif")
+  },
+  computed: {
+    notification_list() {
+      return this.$store.state.system.notification_list;
+    },
+    dialogNotification: {
+        get() {
+            return this.$store.state.system.dialogNotification
+        },
+        set(val) {
+            this.$store.commit("system/update_dialogNotification",val)
+        }
+    },
+  },
+  methods: {
+    updateNotification(item) {
+        let prm = {
+            notif_id: item.NotificationID,
+            url: item.NotificationUrl,
+            type: item.NotificationType,
+            approve_level_id: item.NotificationDetailM_ApproveLevelID
+        }
+        this.$store.dispatch("system/readnotif", prm);
+    }
+  },
+  watch: {
+
+  },
+};
+</script>