@drax/settings-vue 0.29.0 → 0.30.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.29.0",
+  "version": "0.30.0",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,9 +24,10 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/common-front": "^0.29.0",
-    "@drax/settings-front": "^0.29.0",
-    "@drax/settings-share": "^0.29.0"
+    "@drax/common-front": "^0.30.0",
+    "@drax/identity-vue": "^0.30.0",
+    "@drax/settings-front": "^0.30.0",
+    "@drax/settings-share": "^0.30.0"
   },
   "peerDependencies": {
     "pinia": "^2.2.2",
@@ -63,5 +64,5 @@
     "vue-tsc": "^2.1.10",
     "vuetify": "^3.7.1"
   },
-  "gitHead": "0a3f69beb23eb8768ebe7a3d41d61d4a6d40b104"
+  "gitHead": "f7f06578327be29f20dcb7e2c8a2eac9e9145cab"
 }

package/src/components/SettingCardConfig.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import {useSetting} from "../composables/UseSetting";
+import SettingField from "./SettingField.vue";
+import SettingEditor from "./SettingEditor.vue";
+import {onMounted, ref} from "vue";
+import {useI18n} from "vue-i18n";
+import type {ISetting} from "@drax/settings-share";
+
+const {fetchSettings, settingsGrouped} = useSetting()
+const {t, te} = useI18n()
+
+onMounted(async () => {
+  await fetchSettings()
+})
+
+const settingEditing = ref()
+const editing = ref(false)
+
+function edit(setting: ISetting) {
+  settingEditing.value = {...setting}
+  editing.value = true
+}
+
+function clearEdit() {
+  editing.value = false
+  settingEditing.value = null
+}
+
+</script>
+
+<template>
+  <div>
+    <h1 class="mb-6 text-h2">Settings</h1>
+
+    <setting-editor
+        v-if="editing"
+        v-model="editing"
+        :setting="settingEditing"
+        @updateValue="clearEdit"
+    ></setting-editor>
+
+    <v-row>
+      <v-col cols="12" v-for="(category,k) in settingsGrouped" class="mt-4">
+        <v-card >
+          <v-card-title>
+            <h4 class="text-h4 mt-2">{{ k }}</h4>
+          </v-card-title>
+          <v-card-text>
+            <v-card border flat rounded="xl"  v-for="(setting, i) in category" :key="i" class="mt-3" >
+              <v-card-title class="d-flex">
+                <h5 class="text-h5 mt-2">{{ setting.label }}</h5>
+                <v-spacer></v-spacer>
+                <v-chip v-if="setting.permission" density="compact" color="red" class="mt-2">
+                  {{t('common.permission')}}:
+                  {{ te('permission.'+setting.permission) ? t('permission.'+setting.permission) : setting.permission }}
+                </v-chip>
+                <v-chip v-else-if="setting.public" color="green" density="compact" class="mt-2">Public</v-chip>
+                <v-chip v-else color="orange" density="compact" class="mt-2">Private</v-chip>
+              </v-card-title>
+              <v-card-text class="px-12 pt-3">
+                    <setting-field
+                        v-model="setting.value"
+                        :setting="setting"
+
+                    ></setting-field>
+              </v-card-text>
+              <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn
+                    class="mr-1 mt-1"
+                    color="blue"
+                    variant="text"
+                    @click="edit(setting)"
+                >{{t('action.edit')}}</v-btn>
+              </v-card-actions>
+
+            </v-card>
+
+
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+    </v-row>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/SettingField.vue

@@ -56,7 +56,6 @@ const validateNumberList = computed(() => {
 
   <!--string-->
   <v-text-field v-if="setting.type === 'string'"
-                prepend-icon="text_snippet"
                 :name="setting.key"
                 v-model="valueModel"
                 :label="setting.label"
@@ -66,6 +65,7 @@ const validateNumberList = computed(() => {
                 :prefix="setting.prefix"
                 :suffix="setting.suffix"
                 :readonly="!editing"
+                :hide-details="!editing"
                 :variant="variant"
   >
   </v-text-field>
@@ -73,7 +73,6 @@ const validateNumberList = computed(() => {
   <!--longString-->
   <v-textarea v-if="setting.type === 'longString'"
               :rows="2"
-              prepend-icon="text_snippet"
               :name="setting.key"
               v-model="valueModel"
               :label="setting.label"
@@ -83,6 +82,7 @@ const validateNumberList = computed(() => {
               :prefix="setting.prefix"
               :suffix="setting.suffix"
               :readonly="!editing"
+              :hide-details="!editing"
               :variant="variant"
   >
   </v-textarea>
@@ -90,7 +90,6 @@ const validateNumberList = computed(() => {
 
   <!--password-->
   <v-text-field v-if=" setting.type === 'password'"
-                prepend-icon="text_snippet"
                 :name="setting.key"
                 v-model="valueModel"
                 :label="setting.label"
@@ -103,13 +102,13 @@ const validateNumberList = computed(() => {
                 :prefix="setting.prefix"
                 :suffix="setting.suffix"
                 :readonly="!editing"
+                :hide-details="!editing"
                 :variant="variant"
   >
   </v-text-field>
 
   <!--number-->
   <v-text-field v-if="setting.type === 'number'"
-                prepend-icon="text_snippet"
                 type="number"
                 :name="setting.key"
                 v-model.number="valueModel"
@@ -120,13 +119,13 @@ const validateNumberList = computed(() => {
                 :prefix="setting.prefix"
                 :suffix="setting.suffix"
                 :readonly="!editing"
+                :hide-details="!editing"
                 :variant="variant"
   >
   </v-text-field>
 
   <!--boolean-->
   <v-checkbox v-if="setting.type === 'boolean'"
-              prepend-icon="text_snippet"
               :name="setting.key"
               :value="true"
               v-model="valueModel"
@@ -134,6 +133,7 @@ const validateNumberList = computed(() => {
               :placeholder="setting.label"
               color="secondary"
               :readonly="!editing"
+              :hide-details="!editing"
               :variant="variant"
   >
   </v-checkbox>
@@ -141,7 +141,6 @@ const validateNumberList = computed(() => {
 
   <!--enum-->
   <v-select v-if="setting.type === 'enum'"
-            prepend-icon="text_snippet"
             :name="setting.key"
             :items="setting.options"
             v-model="valueModel"
@@ -151,6 +150,7 @@ const validateNumberList = computed(() => {
             :prefix="setting.prefix"
             :suffix="setting.suffix"
             :readonly="!editing"
+            :hide-details="!editing"
             :variant="variant"
   >
   </v-select>
@@ -160,13 +160,13 @@ const validateNumberList = computed(() => {
   <v-combobox v-if="setting.type === 'stringList'"
               chips
               multiple
-              prepend-icon="list"
               :name="setting.key"
               v-model="valueModel"
               :label="setting.label"
               :placeholder="setting.label"
               color="secondary"
               :readonly="!editing"
+              :hide-details="!editing"
               :variant="variant"
   >
   </v-combobox>
@@ -175,7 +175,6 @@ const validateNumberList = computed(() => {
   <v-combobox v-if="setting.type === 'numberList'"
               chips
               multiple
-              prepend-icon="list"
               :name="setting.key"
               v-model="valueModel"
               :label="setting.label"
@@ -183,6 +182,7 @@ const validateNumberList = computed(() => {
               color="secondary"
               :rules="validateNumberList"
               :readonly="!editing"
+              :hide-details="!editing"
               :variant="variant"
   >
   </v-combobox>
@@ -191,7 +191,6 @@ const validateNumberList = computed(() => {
   <v-select v-if="setting.type === 'enumList'"
             multiple
             chips
-            prepend-icon="text_snippet"
             :name="setting.key"
             :items="setting.options"
             v-model="valueModel"
@@ -201,6 +200,7 @@ const validateNumberList = computed(() => {
             :prefix="setting.prefix"
             :suffix="setting.suffix"
             :readonly="!editing"
+            :hide-details="!editing"
             :variant="variant"
   >
   </v-select>

package/src/components/SettingLoaded.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import {useSetting} from "../composables/UseSetting";
+import {useI18n} from "vue-i18n";
+
+const {settings} = useSetting()
+const {t, te} = useI18n()
+
+</script>
+
+<template>
+  <v-card variant="outlined" class="ma-2">
+    <v-card-title class="text-h4">Settings</v-card-title>
+    <v-divider></v-divider>
+    <v-card-text>
+      <h5 class="text-h5">Public (No requiere auth)</h5>
+      <v-chip v-for="(v,k) in settings.filter(s => s.public && !s.permission)" :key="k" class="mt-4" color="blue">
+        <b>{{ v.label }}</b>:{{ v.value }}
+      </v-chip>
+    </v-card-text>
+    <v-divider></v-divider>
+    <v-card-text>
+      <h5 class="text-h5">Private (Requiere auth)</h5>
+      <v-chip v-for="(v,k) in settings.filter(s => !s.public && !s.permission)" :key="k" class="mt-4" color="orange">
+        <b>{{ v.label }}</b>:{{ v.value }}
+      </v-chip>
+    </v-card-text>
+    <v-divider></v-divider>
+    <v-card-text>
+      <h5 class="text-h5">Permission (Requiere Permiso Especifico)</h5>
+      <v-chip v-for="(v,k) in settings.filter(s => s.permission)" :key="k" class="mt-4" color="purple">
+        <b>{{ v.label }}</b>({{v.permission}}):{{ v.value }}
+      </v-chip>
+    </v-card-text>
+  </v-card>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/SettingTableConfig.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import {useSetting} from "../composables/UseSetting";
+import SettingField from "./SettingField.vue";
+import SettingEditor from "./SettingEditor.vue";
+import {onMounted, ref} from "vue";
+import {useI18n} from "vue-i18n";
+import type {ISetting} from "@drax/settings-share";
+
+const {fetchSettings, settingsGrouped} = useSetting()
+const {t, te} = useI18n()
+
+onMounted(async () => {
+  await fetchSettings()
+})
+
+const settingEditing = ref()
+const editing = ref(false)
+
+function edit(setting: ISetting) {
+  settingEditing.value = {...setting}
+  editing.value = true
+}
+
+function clearEdit() {
+  editing.value = false
+  settingEditing.value = null
+}
+
+</script>
+
+<template>
+  <div>
+    <h1 class="mb-6 text-h2">Settings</h1>
+
+    <setting-editor
+        v-if="editing"
+        v-model="editing"
+        :setting="settingEditing"
+        @updateValue="clearEdit"
+    ></setting-editor>
+
+    <v-row>
+      <v-col cols="12" v-for="(category,k) in settingsGrouped" class="mt-4">
+        <v-card>
+          <v-card-title>
+            <h4 class="text-h4 mt-2">{{ k }}</h4>
+          </v-card-title>
+          <v-card-text>
+
+            <v-data-table
+                hide-default-footer
+                :headers="[
+                { title: t('common.identifier'), key: 'key', width: '130px', minWidth: '130px' },
+                { title: t('common.value'), key: 'value' },
+                { title: t('common.type'), key: 'type', width: '120px', minWidth: '120px' },
+                { title: t('common.scope'), key:'scope', width: '170px', minWidth: '170px' },
+                { title: t('common.actions'), key: 'actions', width: '70px' },
+
+            ]"
+                :items="category"
+
+            >
+
+              <template v-slot:item.value="{ item }">
+                {{ item.prefix }}
+                <template v-if="item.type === 'boolean'">
+                  <v-chip :color="item.value === true ? 'green' : 'red' " tile>
+                    {{ item.value }}
+                  </v-chip>
+                </template>
+                <template v-else-if="['stringList','numberList','enumList'].includes(item.type)">
+                  <v-chip v-for="(v,i) in item.value" :key="i">{{v}}</v-chip>
+                </template>
+                <template v-else>
+                  {{item.value}}
+                </template>
+                {{ item.suffix }}
+              </template>
+
+              <template v-slot:item.scope="{ item }">
+                <div style="width: 200px;">
+                  <v-chip v-if="item?.permission" density="compact" color="purple">
+                    {{
+                      te('permission.' + item?.permission) ? t('permission.' + item?.permission) : item?.permission
+                    }}
+                  </v-chip>
+                  <v-chip v-else-if="item?.public" color="blue" density="compact">Public</v-chip>
+                  <v-chip v-else color="orange" density="compact">Private</v-chip>
+                </div>
+              </template>
+
+              <template v-slot:item.actions="{ item }">
+                <v-btn
+                    class="mr-1 mt-1"
+                    color="blue"
+                    variant="text"
+                    icon="mdi-pencil"
+                    @click="edit(item)"
+                ></v-btn>
+              </template>
+            </v-data-table>
+
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+    </v-row>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/src/composables/UseSetting.ts

@@ -1,6 +1,7 @@
 import {useSettingStore} from "../stores/UseSettingStore";
 import {computed} from "vue";
 import {SettingProviderFactory} from "@drax/settings-front";
+import {useAuthStore} from "@drax/identity-vue";
 import type {ISetting} from "@drax/settings-share";
 
 export function useSetting() {
@@ -9,6 +10,33 @@ export function useSetting() {
     const provider = SettingProviderFactory.getInstance()
 
 
+    async function suscribeAuth(): Promise<any> {
+        const authStore = useAuthStore()
+        authStore.$onAction(({name, after}) => {
+            if (name === 'setAuthUser' || name === 'clearAuth') {
+                after(async () => {
+                    // console.log('Fetch settings on login/logout')
+                    await fetchSettings()
+                })
+            }
+        })
+    }
+
+    async function fetchSettings(): Promise<ISetting[]> {
+        try {
+            store.setLoading(true)
+            const settings = await provider.fetchAll()
+            store.setSettings(settings)
+            return settings
+        } catch (e) {
+            console.error("UseSettings fetchSettings", e)
+            throw e
+        } finally {
+            store.setLoading(false)
+        }
+    }
+
+
     const loading = computed({
         get() {
             return store.loading
@@ -40,19 +68,7 @@ export function useSetting() {
     })
 
 
-    async function fetchSettings(): Promise<ISetting[]> {
-        try {
-            store.setLoading(true)
-            const settings = await provider.fetchAll()
-            store.setSettings(settings)
-            return settings
-        } catch (e) {
-            console.error("UseSettings fetchSettings", e)
-            throw e
-        } finally {
-            store.setLoading(false)
-        }
-    }
+
 
     async function updateSettingValue(id:string,value:string): Promise<ISetting> {
         try {
@@ -72,6 +88,7 @@ export function useSetting() {
 
     return {
         fetchSettings,
+        suscribeAuth,
         updateSettingValue,
 
         settings,

package/src/index.ts

@@ -1,6 +1,8 @@
 import {useSetting} from "./composables/UseSetting";
 import {useSettingStore} from "./stores/UseSettingStore";
-import SettingConfig from "./components/SettingConfig.vue";
+import SettingCardConfig from "./components/SettingCardConfig.vue";
+import SettingTableConfig from "./components/SettingTableConfig.vue";
+import SettingLoaded from "./components/SettingLoaded.vue";
 import SettingPage from "./pages/SettingPage.vue";
 import SettingRoutes from "./routes/SettingRoutes";
 
@@ -8,7 +10,9 @@ import SettingRoutes from "./routes/SettingRoutes";
 export{
     useSetting,
     useSettingStore,
-    SettingConfig,
+    SettingCardConfig,
+    SettingTableConfig,
+    SettingLoaded,
     SettingPage,
     SettingRoutes
 }

package/src/pages/SettingCardPage.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import SettingCardConfig from "../components/SettingCardConfig.vue";
+</script>
+
+<template>
+  <v-container max-width="1200">
+    <setting-card-config></setting-card-config>
+  </v-container>
+
+</template>
+
+<style scoped>
+
+</style>

package/src/pages/SettingPage.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import SettingConfig from "../components/SettingConfig.vue";
+import SettingTableConfig from "../components/SettingTableConfig.vue";
 </script>
 
 <template>
-  <v-container max-width="900">
-    <setting-config></setting-config>
+  <v-container max-width="1200">
+    <setting-table-config></setting-table-config>
   </v-container>
 
 </template>

package/src/routes/SettingRoutes.ts

@@ -1,4 +1,5 @@
 import SettingPage from '../pages/SettingPage.vue'
+import SettingCardPage from '../pages/SettingCardPage.vue'
 
 const routes = [
     {
@@ -10,6 +11,15 @@ const routes = [
             permission: 'setting:manage'
         }
     },
+    {
+        name: 'SettingCardPage',
+        path: '/settings/card',
+        component: SettingCardPage,
+        meta: {
+            auth: true,
+            permission: 'setting:manage'
+        }
+    },
 
 ]
 

package/src/components/SettingConfig.vue

@@ -1,78 +0,0 @@
-<script setup lang="ts">
-import {useSetting} from "../composables/UseSetting";
-import SettingField from "./SettingField.vue";
-import SettingEditor from "./SettingEditor.vue";
-import {onMounted, ref} from "vue";
-import type {ISetting} from "@drax/settings-share";
-
-const {fetchSettings, settingsGrouped} = useSetting()
-
-onMounted(async () => {
-  await fetchSettings()
-})
-
-const settingEditing = ref()
-const editing = ref(false)
-
-function edit(setting: ISetting) {
-  settingEditing.value = {...setting}
-  editing.value = true
-}
-
-function clearEdit() {
-  editing.value = false
-  settingEditing.value = null
-}
-
-</script>
-
-<template>
-  <div>
-    <h1 class="mb-6">Settings</h1>
-
-    <setting-editor
-        v-if="editing"
-        v-model="editing"
-        :setting="settingEditing"
-        @updateValue="clearEdit"
-    ></setting-editor>
-
-    <v-row >
-      <v-col cols="12" v-for="(category,k) in settingsGrouped">
-        <v-card>
-          <v-card-title>
-            {{ k }}
-          </v-card-title>
-          <v-card-text>
-            <v-row  v-for="(setting, i) in category" :key="i">
-              <v-col cols="9">
-                <setting-field
-
-                    v-model="setting.value"
-                    :setting="setting"
-                ></setting-field>
-              </v-col>
-              <v-col cols="3">
-                <v-btn
-                    icon="mdi-pencil"
-                    class="mr-1"
-                    variant="text"
-                    color="blue"
-                    slim
-                    @click="edit(setting)"
-                ></v-btn>
-              </v-col>
-            </v-row>
-
-
-          </v-card-text>
-        </v-card>
-      </v-col>
-
-    </v-row>
-  </div>
-</template>
-
-<style scoped>
-
-</style>