feat: show-hide component for json content in admin index

bedita · Nov 24, 2023 · 0f651a0 · 0f651a0
1 parent b96be26
commit 0f651a0
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 1 deletion.
diff --git a/resources/js/app/app.js b/resources/js/app/app.js
@@ -75,6 +75,7 @@ const _vueInstance = new Vue({
         Permissions:() => import(/* webpackChunkName: "permissions" */'app/components/permissions/permissions'),
         PaginationNavigation:() => import(/* webpackChunkName: "pagination-navigation" */'app/components/pagination-navigation/pagination-navigation'),
         ObjectsHistory:() => import(/* webpackChunkName: "objects-history" */'app/components/objects-history/objects-history'),
+        ShowHide:() => import(/* webpackChunkName: "show-hide" */'app/components/show-hide/show-hide'),
         SystemInfo:() => import(/* webpackChunkName: "system-info" */'app/components/system-info/system-info'),
         UserAccesses:() => import(/* webpackChunkName: "user-accesses" */'app/components/user-accesses/user-accesses'),
         AppIcon,

diff --git a/resources/js/app/components/show-hide/show-hide.vue b/resources/js/app/components/show-hide/show-hide.vue
@@ -0,0 +1,60 @@
+<template>
+    <div class="show-hide">
+        <button class="button button-outlined is-expanded" v-if="!visible" @click.prevent.stop="show">
+            <app-icon icon="carbon:add"></app-icon>
+            <span class="ml-05">{{ msgShow }}</span>
+        </button>
+        <button class="button button-outlined is-expanded" v-if="visible" @click.prevent.stop="hide">
+            <app-icon icon="carbon:subtract"></app-icon>
+            <span class="ml-05">{{ msgHide }}</span>
+        </button>
+    </div>
+</template>
+<script>
+import { t } from 'ttag';
+
+export default {
+    name: 'ShowHide',
+
+    props: {
+        field: {
+            type: String,
+            default: '',
+        },
+    },
+
+    data() {
+        return {
+            visible: false,
+            msgHide: t`Hide`,
+            msgShow: t`Show`,
+        };
+    },
+
+    mounted() {
+        this.$nextTick(() => {
+            document.getElementById(this.field).style.display = 'none';
+            this.visible = false;
+        });
+    },
+
+    methods: {
+        hide() {
+            this.visible = false;
+            document.getElementById(this.field).style.display = 'none';
+        },
+        show() {
+            this.visible = true;
+            document.getElementById(this.field).style.display = 'block';
+        },
+    },
+}
+</script>
+<style>
+div.show-hide {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+}
+</style>
diff --git a/resources/js/app/pages/admin/index.js b/resources/js/app/pages/admin/index.js
@@ -12,6 +12,7 @@ export default {
     components: {
         PropertyView: () => import(/* webpackChunkName: "property-view" */'app/components/property-view/property-view'),
         Secret: () => import(/* webpackChunkName: "secret" */'app/components/secret/secret'),
+        ShowHide:() => import(/* webpackChunkName: "show-hide" */'app/components/show-hide/show-hide'),
     },
     data() {
         return {

diff --git a/templates/Element/Admin/index_content.twig b/templates/Element/Admin/index_content.twig
@@ -44,7 +44,14 @@
                     {% for property,type in properties %}
                         {% set val = resource.attributes[property] %}
                         <div class="{{ property }}-cell" untitled-label="{{ __('Untitled') }}">
-                            {{ Admin.control(type, property, val)|raw }}
+                            {% if type == 'json' %}
+                                <show-hide field="field-{{ resource.id }}"></show-hide>
+                                <div id="field-{{ resource.id }}" class="mt-05">
+                                    {{ Admin.control(type, property, val)|raw }}
+                                </div>
+                            {% else %}
+                                {{ Admin.control(type, property, val)|raw }}
+                            {% endif %}
                         </div>
                     {% endfor %}
                     {% for property in propertiesSecrets %}