From 29457ad867b4001cd54459e24d74614256dc7afc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=85=AB=E5=8D=83=E6=B5=81?=
 <40739051+jym503558564@users.noreply.github.com>
Date: Tue, 14 Jan 2020 16:44:28 +0800
Subject: [PATCH] =?UTF-8?q?Assets=5Fpermission=5Faction=20=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=20(#3585)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* [Update] 初步实现 actions的checkbox层叠嵌套

* [Update] 优化actions的checkbox层叠嵌套

* [Update] 修改校验用户/系统用户/资产的权限API可能会出现的问题

* [Update] 更新资产授权中动作的展示

* [Update] 更新资产授权中动作的展示 2

* [Update] 更新资产授权中动作的展示 3

Co-authored-by: BaiJiangJie <32935519+BaiJiangJie@users.noreply.github.com>
---
 apps/perms/api/user_permission/common.py      |  2 +
 .../perms/asset_permission_create_update.html | 86 ++++++++++++++++++-
 2 files changed, 86 insertions(+), 2 deletions(-)

diff --git a/apps/perms/api/user_permission/common.py b/apps/perms/api/user_permission/common.py
index 003e38856..12469d3da 100644
--- a/apps/perms/api/user_permission/common.py
+++ b/apps/perms/api/user_permission/common.py
@@ -84,6 +84,8 @@ class ValidateUserAssetPermissionApi(UserAssetPermissionMixin, APIView):
         system_users_actions = self.util.get_asset_system_users_with_actions(
             asset)
         actions = system_users_actions.get(system_user)
+        if actions is None:
+            return Response({'msg': False}, status=403)
         if action_name in Action.value_to_choices(actions):
             return Response({'msg': True}, status=200)
         return Response({'msg': False}, status=403)
diff --git a/apps/perms/templates/perms/asset_permission_create_update.html b/apps/perms/templates/perms/asset_permission_create_update.html
index 4cb5928eb..937e7273e 100644
--- a/apps/perms/templates/perms/asset_permission_create_update.html
+++ b/apps/perms/templates/perms/asset_permission_create_update.html
@@ -4,6 +4,17 @@
 {% load bootstrap3 %}
 {% block custom_head_css_js %}
     <link href="{% static 'css/plugins/datepicker/datepicker3.css' %}" rel="stylesheet">
+    <style>
+        .ul-padding-0 {
+            padding-inline-start: 0px
+        }
+        .ul-padding-20 {
+            padding-inline-start: 20px
+        }
+        ul li{
+            list-style-type: none;
+        }
+    </style>
 {% endblock %}
 
 {% block content %}
@@ -33,20 +44,55 @@
                                  </div>
                             {% endif %}
                             {% csrf_token %}
+
                             <h3>{% trans 'Basic' %}</h3>
                             {% bootstrap_field form.name layout="horizontal" %}
+
                             <div class="hr-line-dashed"></div>
                             <h3>{% trans 'User' %}</h3>
                             {% bootstrap_field form.users layout="horizontal" %}
                             {% bootstrap_field form.user_groups layout="horizontal" %}
+
                             <div class="hr-line-dashed"></div>
                             <h3>{% trans 'Asset' %}</h3>
                             {% bootstrap_field form.assets layout="horizontal" %}
                             {% bootstrap_field form.nodes layout="horizontal" %}
                             {% bootstrap_field form.system_users layout="horizontal" %}
+
                             <div class="hr-line-dashed"></div>
                             <h3>{% trans 'Action' %}</h3>
-                            {% bootstrap_field form.actions layout="horizontal" %}
+                            <div class="form-group required">
+                                <label class="col-md-2 control-label">{{ form.actions.label }}</label>
+                                <div class="col-md-9">
+                                    <div id="id_actions">
+                                        <ul class="ul-padding-0">
+                                            <li>
+                                                <div class="checkbox">{{ form.actions.0}}</div>
+                                                <ul class="ul-padding-20">
+                                                    <li>
+                                                        <div class="checkbox">{{ form.actions.1}}</div>
+                                                    </li>
+
+                                                    <li>
+                                                        <div class="checkbox">{{ form.actions.4}}</div>
+                                                        <ul class="ul-padding-20">
+                                                            <li>
+                                                                <div class="checkbox">{{ form.actions.2}}</div>
+                                                            </li>
+                                                            <li>
+                                                                <div class="checkbox">{{ form.actions.3}}</div>
+                                                            </li>
+                                                        </ul>
+                                                    </li>
+                                                </ul>
+
+                                            </li>
+                                        </ul>
+                                        <div class="help-block">{{ form.actions.help_text }}</div>
+                                    </div>
+                                </div>
+                            </div>
+
                             <div class="hr-line-dashed"></div>
                             <h3>{% trans 'Other' %}</h3>
                             <div class="form-group">
@@ -100,6 +146,21 @@
 <script>
 var api_action =  "{{ api_action }}";
 
+var idActionAll = "id_actions_0";
+var idActionConnect = "id_actions_1";
+var idActionUpload = "id_actions_2";
+var idActionDownload = "id_actions_3";
+var idActionUpDownload = "id_actions_4";
+var elementActionAll = document.getElementById(idActionAll);
+var elementActionConnect = document.getElementById(idActionConnect);
+var elementActionUpload = document.getElementById(idActionUpload);
+var elementActionDownload = document.getElementById(idActionDownload);
+var elementActionUpDownload = document.getElementById(idActionUpDownload);
+var elementActionUpDownloadChildren = [elementActionUpload, elementActionDownload];
+var elementActionAllChildren = [
+    elementActionConnect, elementActionUpload, elementActionDownload, elementActionUpDownload
+];
+
 $(document).ready(function () {
     $('.select2').select2({
         closeOnSelect: false
@@ -110,6 +171,27 @@ $(document).ready(function () {
     initDateRangePicker('#date_start');
     initDateRangePicker('#date_expired');
     initAssetTreeModel('#id_assets');
+}).on("change", "input[name=actions]", function (e) {
+    let idAction = e.target.getAttribute("id");
+    if (idAction === idActionAll){
+        $.each(elementActionAllChildren, function(i, elementAction){
+            elementAction.checked = elementActionAll.checked
+        });
+        return;
+    }
+    else if (idAction === idActionUpDownload){
+        $.each(elementActionUpDownloadChildren, function(i, elementAction){
+            elementAction.checked = elementActionUpDownload.checked
+        });
+    }
+    else if ([idActionUpload, idActionDownload].indexOf(idAction) !== -1){
+        elementActionUpDownload.checked = elementActionUpload.checked && elementActionDownload.checked
+    }
+    let checked = true;
+    $.each(elementActionAllChildren, function(i, elementAction){
+        checked &= elementAction.checked;
+    });
+    elementActionAll.checked = checked;
 })
 .on("submit", "form", function (evt) {
     evt.preventDefault();
@@ -133,6 +215,6 @@ $(document).ready(function () {
         redirect_to: redirect_to
     };
     formSubmit(props);
- })
+})
 </script>
 {% endblock %}