Updated icons

_includes/vue-rule-script.html

@@ -182,38 +182,49 @@
         </div>
 
         <div class="rule" v-show="preview" v-if="!legacy">
-            <div class="controls">
-                <vue-button class="primary is-large" @click="clickPreview" :icon="icons.edit"
-                    v-if="!view">Edit</vue-button>
-            </div>
-            <h1>
-                <icon :icon="rule.icon" v-if="rule.icon"></icon> [[rule.name]]
-            </h1>
-            <p>[[rule.summary]]</p>
-            <div class="modules__grid" :data-module-id="rule.ruleID" .module="rule">
-                <module-display v-for="module in rule.modules" :key="module" :module="module"></module-display>
-            </div>
-            <ul class="module-list">
-                <module-list v-for="(module, index) in rule.modules" :key="index" :module="module"
-                    v-if="rule.modules"></module-list>
-            </ul>
-            <div class="rule__creator" v-if="rule.creator.name">
-                Created By
-                <img src="/assets/tabler_icons/pencil.svg">
-                <span v-if="rule.creator.url"><a :href="rule.creator.url">[[rule.creator.name]]</a></span>
-                <span v-else>[[rule.creator.name]]</span>
-            </div>
-            Version History:
-            <div style="white-space: normal;">
-                <div v-for="ruleId1 in rule.edit_history" :key="ruleId1"
-                    style="display: inline-block; margin-right: 10px;">
-                    <a :href="getRuleLink(ruleId1)">[[
-                        getRuleName(ruleId1) ]]</a>
-                    ==>
+            <div v-if="rule.deleted !== 1">
+                <div class="controls">
+                    <vue-button class="primary is-large" @click="clickPreview" :icon="icons.edit"
+                        v-if="!view">Edit</vue-button>
+                </div>
+                <h1>
+                    <icon :icon="rule.icon" v-if="rule.icon"></icon> [[rule.name]]
+                    <icon :icon="icons.fork" v-if="rule.forked == 1"></icon>
+                </h1>
+                <p>[[rule.summary]]</p>
+                <div class="modules__grid" :data-module-id="rule.ruleID" .module="rule">
+                    <module-display v-for="module in rule.modules" :key="module" :module="module"></module-display>
+                </div>
+                <ul class="module-list">
+                    <module-list v-for="(module, index) in rule.modules" :key="index" :module="module"
+                        v-if="rule.modules"></module-list>
+                </ul>
+                <div class="rule__creator" v-if="rule.creator.name">
+                    Created By
+                    <img src="/assets/tabler_icons/pencil.svg">
+                    <span v-if="rule.creator.url"><a :href="rule.creator.url">[[rule.creator.name]]</a></span>
+                    <span v-else>[[rule.creator.name]]</span>
                 </div>
 
+                Version History:
+                <!-- <div style="white-space: normal;">
+                    <div v-for="ruleId1 in rule.edit_history" :key="ruleId1"
+                        style="display: inline-block; margin-right: 10px;">
+                        <a :href="getRuleLink(ruleId1)">[[
+                            getRuleName(ruleId1) ]]</a>
+                        <icon :icon="icons.arrow"></icon>
+                    </div>
+                </div> -->
+                <div v-for="(ruleId1, index) in rule.edit_history" :key="ruleId1"
+                    style="display: inline-block; margin-right: 10px;">
+                    <a :href="getRuleLink(ruleId1)">[[ getRuleName(ruleId1) ]]</a>
+                    <icon v-if="index < rule.edit_history.length - 1" :icon="icons.arrow"></icon>
+                </div>
             </div>
+            <div v-else>
+                <p>This Rule is deleted by owner</p>
 
+            </div>
         </div>
         <div class="rule legacy" v-if="legacy && preview">
             <h1>[[rule.name]]</h1>
@@ -244,13 +255,16 @@
             <vue-button class="is-large" @click="handleClickImport" :icon="icons.upload">Import <div class="btn-cover">
                     coming soon!</div></vue-button>
         </div>
-        <div class="btn-group" v-if="view && !legacy">
-            <vue-button class="primary is-large" @click="clickPreview" :icon="icons.fork">Fork &amp; Edit</vue-button>
-            <vue-button class="primary is-large" v-if="isOwner" @click="clickPreviewEdit" :icon="icons.fork">Edit
-            </vue-button>
-            <vue-button class="primary is-large" v-if="isAdmin" @click="clickDelete" :icon="icons.fork">Delete
-            </vue-button>
-            <vue-button class="is-large" @click="handleClickDownload" :icon="icons.download">Download</vue-button>
+        <div v-if="rule.deleted !== 1">
+            <div class="btn-group" v-if="view && !legacy">
+                <vue-button class="primary is-large" @click="clickPreview" :icon="icons.fork">Fork &amp;
+                    Edit</vue-button>
+                <vue-button class="primary is-large" v-if="isOwner" @click="clickPreviewEdit" :icon="icons.edit">Edit
+                </vue-button>
+                <vue-button class="primary is-large" v-if="isAdmin" @click="clickDelete" :icon="icons.delete">Delete
+                </vue-button>
+                <vue-button class="is-large" @click="handleClickDownload" :icon="icons.download">Download</vue-button>
+            </div>
         </div>
     </div>
 

assets/js/vue.rules.js

@@ -31,6 +31,8 @@ const app = Vue.createApp({
         modules: [],
         latest_version: 1,
         list: "",
+        deleted: 0,
+        forked: 0,
         edit_history: []
       },
       legacy: false,
@@ -73,6 +75,9 @@ const app = Vue.createApp({
         export: '/assets/tabler_icons/file-download.svg',
         upload: '/assets/tabler_icons/file-upload.svg',
         fork: '/assets/tabler_icons/git-fork.svg',
+        delete: '/assets/tabler_icons/x.svg',
+        edit: '/assets/tabler_icons/edit.svg',
+        arrow: '/assets/tabler_icons/arrow-narrow-left.svg'
       },
       // icons available in the editor
       moduleIcons: {
@@ -509,6 +514,10 @@ const app = Vue.createApp({
         const splitArray = rule.list.split(':');
         const resultArray = splitArray.filter(value => value.trim() !== '');
 
+        var forkedOrNot = 0
+        if (resultArray.length == 1) {
+          forkedOrNot = 1;
+        }
         this.rule = {
           ruleID: rule.rule_id,
           timestamp: rule.time_stamp,
@@ -524,11 +533,14 @@ const app = Vue.createApp({
           modules: (rule.modules) ? JSON.parse(rule.modules) : [],
           latest_version: rule.latest_version,
           list: rule.list,
+          forked: forkedOrNot,
+          deleted: rule.deleted,
           edit_history: resultArray
         }
 
         if (rule.email == localStorage.getItem('userEmail')) {
           this.isOwner = true;
+          this.isAdmin = true; // this will allow the user to delete his own rules
         }
         if (localStorage.getItem('userEmail') == this.adminMail) {
           this.isAdmin = true;
@@ -835,7 +847,7 @@ const app = Vue.createApp({
       if (this.edit) {
         previousListVersion = this.rule.list
       } else {
-        previousListVersion = this.rule.list + ruleID + "@" + rule.name + ":";
+        previousListVersion = ruleID + "@" + rule.name + ":" + this.rule.list;
       }
       // ------------------ exisituing code ---------------
       // add to database