feeds-fun 0.1.1 → 0.2.0

package/README.md

@@ -6,3 +6,5 @@
 - Then filter and sort news how you want.
 
 Service is up and running at https://feeds.fun
+
+Documentation can be found in the repository: https://github.com/Tiendil/feeds.fun

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feeds-fun",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "author": "Aliaksei Yaletski (Tiendil) <a.eletsky@gmail.com> (https://tiendil.org/)",
   "description": "Frontend for the Feeds Fun — web-based news reader",
   "keywords": [

package/src/components/RulesList.vue

@@ -7,7 +7,9 @@
       </tr>
     </thead>
     <tbody>
-      <tr v-for="rule in rules">
+      <tr
+        v-for="rule in rules"
+        :key="rule.id">
         <td>
           <rule-score-updater
             :score="rule.score"

package/src/components/TagsFilter.vue

@@ -13,6 +13,11 @@
         @tag:deselected="onTagDeselected" />
     </ul>
 
+    <input
+      type="text"
+      placeholder="Input part of tag..."
+      v-model="tagNameFilter" />
+
     <ul
       v-if="displayedTags.length > 0"
       style="list-style: none; padding: 0; margin: 0">
@@ -39,6 +44,9 @@
 
 <script lang="ts" setup>
   import {computed, ref} from "vue";
+  import {useTagsStore} from "@/stores/tags";
+
+  const tagsStore = useTagsStore();
 
   const selectedTags = ref<{[key: string]: boolean}>({});
 
@@ -48,6 +56,8 @@
 
   const showEntries = ref(showFromStart.value);
 
+  const tagNameFilter = ref("");
+
   function tagComparator(a: string, b: string) {
     const aCount = properties.tags[a];
     const bCount = properties.tags[b];
@@ -101,6 +111,16 @@
       return selectedTags.value[tag] !== true;
     });
 
+    values = values.filter((tag) => {
+      const tagInfo = tagsStore.tags[tag];
+
+      if (tagInfo === undefined || tagInfo.name === null) {
+        return tag.includes(tagNameFilter.value);
+      }
+
+      return tagInfo.name.includes(tagNameFilter.value);
+    });
+
     values.sort(tagComparator);
 
     values = values.slice(0, showEntries.value);

package/src/logic/enums.ts

@@ -90,3 +90,17 @@ export const FeedsOrderProperties = new Map<FeedsOrder, {text: string; orderFiel
   [FeedsOrder.Loaded, {text: "loaded", orderField: "loadedAt", orderDirection: "desc"}],
   [FeedsOrder.Linked, {text: "added", orderField: "linkedAt", orderDirection: "desc"}]
 ]);
+
+export enum RulesOrder {
+  Tags = "tags",
+  Score = "score",
+  Created = "created",
+  Updated = "updated"
+}
+
+export const RulesOrderProperties = new Map<RulesOrder, {text: string; orderField: string; orderDirection: string}>([
+  [RulesOrder.Tags, {text: "tags", orderField: "tags", orderDirection: "asc"}],
+  [RulesOrder.Score, {text: "score", orderField: "score", orderDirection: "desc"}],
+  [RulesOrder.Created, {text: "created", orderField: "createdAt", orderDirection: "desc"}],
+  [RulesOrder.Updated, {text: "updated", orderField: "updatedAt", orderDirection: "desc"}]
+]);

package/src/logic/types.ts

@@ -221,24 +221,30 @@ export type Rule = {
   readonly tags: string[];
   readonly score: number;
   readonly createdAt: Date;
+  readonly updatedAt: Date;
 };
 
 export function ruleFromJSON({
   id,
   tags,
   score,
-  createdAt
+  createdAt,
+  updatedAt
 }: {
   id: string;
   tags: string[];
   score: number;
   createdAt: string;
+  updatedAt: string;
 }): Rule {
+  tags = tags.sort();
+
   return {
     id: toRuleId(id),
     tags: tags,
     score: score,
-    createdAt: new Date(createdAt)
+    createdAt: new Date(createdAt),
+    updatedAt: new Date(updatedAt)
   };
 }
 
@@ -311,7 +317,7 @@ export function tagInfoFromJSON({
 }
 
 export function noInfoTag(uid: string): TagInfo {
-  return {uid, name: null, link: null, categories: []};
+  return {uid, name: uid, link: null, categories: []};
 }
 
 export type UserSetting = {

package/src/logic/utils.ts

@@ -37,3 +37,23 @@ export function timeSince(date: Date) {
 
   return `${yearsPast}y`;
 }
+
+export function compareLexicographically(a: string[], b: string[]) {
+  for (let i = 0; i < Math.min(a.length, b.length); i++) {
+    const comparison = a[i].localeCompare(b[i]);
+
+    if (comparison !== 0) {
+      return comparison;
+    }
+  }
+
+  if (a.length > b.length) {
+    return 1;
+  }
+
+  if (a.length < b.length) {
+    return -1;
+  }
+
+  return 0;
+}

package/src/stores/globalSettings.ts

@@ -26,6 +26,9 @@ export const useGlobalSettingsStore = defineStore("globalSettings", () => {
   const feedsOrder = ref(e.FeedsOrder.Title);
   const failedFeedsFirst = ref(false);
 
+  // Rules
+  const rulesOrder = ref(e.RulesOrder.Tags);
+
   watch(mainPanelMode, (newValue, oldValue) => {
     router.push({name: mainPanelMode.value, params: {}});
   });
@@ -69,6 +72,7 @@ export const useGlobalSettingsStore = defineStore("globalSettings", () => {
     userSettings,
     info,
     feedsOrder,
-    failedFeedsFirst
+    failedFeedsFirst,
+    rulesOrder
   };
 });

package/src/views/RulesView.vue

@@ -1,13 +1,20 @@
 <template>
-  <side-panel-layout :reload-button="false">
+  <side-panel-layout :reload-button="true">
     <template #main-header>
       Rules
       <span v-if="rules">[{{ rules.length }}]</span>
     </template>
 
+    <template #side-menu-item-2>
+      Sorted by
+      <config-selector
+        :values="e.RulesOrderProperties"
+        v-model:property="globalSettings.rulesOrder" />
+    </template>
+
     <rules-list
       v-if="rules"
-      :rules="rules" />
+      :rules="sortedRules" />
   </side-panel-layout>
 </template>
 
@@ -15,8 +22,10 @@
   import {computed, ref, onUnmounted, watch} from "vue";
   import {computedAsync} from "@vueuse/core";
   import {useGlobalSettingsStore} from "@/stores/globalSettings";
+  import _ from "lodash";
+  import * as utils from "@/logic/utils";
   import * as api from "@/logic/api";
-  import * as t from "@/logic/types";
+  import type * as t from "@/logic/types";
   import * as e from "@/logic/enums";
 
   const globalSettings = useGlobalSettingsStore();
@@ -28,6 +37,60 @@
     globalSettings.dataVersion;
     return await api.getRules();
   }, null);
+
+  const sortedRules = computed(() => {
+    if (!rules.value) {
+      return null;
+    }
+
+    const orderProperties = e.RulesOrderProperties.get(globalSettings.rulesOrder);
+
+    if (!orderProperties) {
+      throw new Error(`Invalid order properties: ${globalSettings.rulesOrder}`);
+    }
+
+    const orderField = orderProperties.orderField;
+    const direction = {asc: -1, desc: 1}[orderProperties.orderDirection];
+
+    if (direction === undefined) {
+      throw new Error(`Invalid order direction: ${orderProperties.orderDirection}`);
+    }
+
+    let sorted = rules.value.slice();
+
+    sorted = sorted.sort((a: t.Rule, b: t.Rule) => {
+      if (globalSettings.rulesOrder === e.RulesOrder.Tags) {
+        return utils.compareLexicographically(a.tags, b.tags);
+      }
+
+      const valueA = _.get(a, orderField, null);
+      const valueB = _.get(b, orderField, null);
+
+      if (valueA === null && valueB === null) {
+        return 0;
+      }
+
+      if (valueA === null) {
+        return 1 * direction;
+      }
+
+      if (valueB === null) {
+        return -1 * direction;
+      }
+
+      if (valueA < valueB) {
+        return 1 * direction;
+      }
+
+      if (valueA > valueB) {
+        return -1 * direction;
+      }
+
+      return 0;
+    });
+
+    return sorted;
+  });
 </script>
 
 <style></style>